/* ===============================================
   GENERIC TOOL PAGE (views/tools/generic.ejs)
   =============================================== */
.dev-options { display: flex; flex-wrap: wrap; gap: var(--spacing-3) var(--spacing-5); align-items: flex-end; margin-bottom: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--color-border); }
.dev-opt { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--color-text-secondary); margin: 0; }
.dev-opt-checkbox { flex-direction: row; align-items: center; gap: 8px; height: 34px; cursor: pointer; }
.dev-opt-checkbox input { width: 14px; height: 14px; accent-color: var(--color-text-primary); margin: 0; }
.dev-opt input.form-control { height: 34px; width: 110px; padding: 0 10px; }
.dev-opt-text input.form-control { width: 220px; font-family: var(--font-family-mono); }
.dev-opt select { min-width: 150px; }

.dev-output-wrap { position: relative; display: flex; flex-direction: column; flex: 1; }
.dev-swatch { height: 36px; margin-bottom: var(--spacing-2); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); background-image: none; }
.dev-swatch[hidden] { display: none; }

.dev-message { margin: var(--spacing-3) 0 0; font-size: 12px; line-height: 1.5; color: var(--color-text-muted); }
.dev-message[hidden] { display: none; }
.dev-message-error { color: var(--color-error); }

.dev-tool textarea.form-control { font-family: var(--font-family-mono); font-size: 13px; }
.dev-actions { display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-2); }

/* Tools without an input pane: actions on top, one wide output */
.dev-noinput .main-content { flex-direction: column !important; }
.dev-noinput .dev-actions { flex-direction: row; justify-content: flex-start; flex-wrap: wrap; flex: none !important; }
.dev-noinput textarea.form-control { height: 300px !important; }
@media (min-width: 768px) {
  .dev-noinput .main-content > .c-breakdown__inner:first-child { flex: none !important; }
}
.dev-tool:not(.dev-noinput) .dev-actions { flex: 0 0 96px !important; }
.dev-tool:not(.dev-noinput) textarea.form-control { height: 340px !important; }
@media (max-width: 767px) {
  .dev-tool .dev-actions { flex-direction: row !important; flex-wrap: wrap; flex: none !important; }
  .dev-opt-text input.form-control { width: 100%; }
}

/* Generic tool layout (the older tools declare this in their own <style> block) */
.dev-tool .main-content { display: flex; gap: var(--spacing-4); }
@media (max-width: 767px) { .dev-tool .main-content { flex-direction: column; } }
.dev-tool textarea.form-control { width: 100%; }
.dev-output-wrap textarea.form-control { flex: 1; }
.dev-actions .btn { flex: 0 0 auto; height: 34px; padding: 0 12px; }
.dev-actions { align-self: flex-start; padding-top: 30px; }
.dev-noinput .dev-actions { padding-top: 0; align-self: auto; }
/* the URL Pro Analyzer grid rule sets align-items:start on every panel; generic tools need stretch */
.c-url-parser.dev-tool .c-breakdown__inner { align-items: stretch; }
.c-url-parser.dev-tool .dev-actions { display: flex; }
.dev-output-wrap textarea.form-control { flex: 1 1 auto; }
.dev-output-wrap { flex: 1 1 auto; }
.dev-opt-text input#opt-url, .dev-opt-text input#opt-phone, .dev-opt-text input#opt-message { width: 340px; max-width: 100%; }
.dev-swatch { height: 56px; }

/* Non-blocking toast (replaces alert()) */
.app-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); padding: 8px 14px; font-size: 13px; color: var(--color-text-primary); background: var(--color-bg-elevated); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 3000; }
.app-toast.show { opacity: 1; transform: translate(-50%, 0); }
.app-toast-error { color: var(--color-error); }

/* ===============================================
   FOCUS RING: keyboard only (no ring on mouse click)
   =============================================== */
:focus:not(:focus-visible) { outline: none !important; }
:focus-visible { outline: 2px solid var(--color-text-muted); outline-offset: 2px; }
.accordion-header:focus-visible, summary:focus-visible { outline-offset: -2px; }
html { -webkit-tap-highlight-color: transparent; }

/* "Parse another url" link: normal secondary button, readable in both themes */
.c-breakdown__add,
[data-theme="light"] .c-breakdown__add {
    background-color: var(--color-bg-elevated);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-light);
    padding: 7px 12px;
    border-radius: var(--radius-md);
    transform: none;
}
.c-breakdown__add:hover,
[data-theme="light"] .c-breakdown__add:hover {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border-color: var(--color-text-muted);
    transform: none;
}

/* ===============================================
   URL PRO ANALYZER
   =============================================== */
.upa { max-width: 1040px; margin: 0 auto; padding: 0 var(--spacing-6); }
.upa [hidden] { display: none !important; }

.upa-bar { display: flex; gap: var(--spacing-2); align-items: stretch; }
.upa-bar .form-control { flex: 1; min-width: 0; height: 40px; padding: 0 12px; font-size: 14px; }
.upa-bar .btn { height: 40px; padding: 0 18px; flex-shrink: 0; }
.upa-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--spacing-3) 0 0; font-size: 12px; color: var(--color-text-muted); }
.upa-chip { padding: 3px 10px; font: inherit; font-size: 12px; color: var(--color-text-secondary); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 999px; cursor: pointer; }
.upa-chip:hover { color: var(--color-text-primary); border-color: var(--color-text-muted); }

.upa-result { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--spacing-4); margin-top: var(--spacing-5); align-items: start; }
.upa-main, .upa-side { display: flex; flex-direction: column; gap: var(--spacing-4); min-width: 0; }
.upa-side { position: sticky; top: 72px; }

.upa-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-4); }
.upa-card h2 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.upa-card > h2 { margin-bottom: var(--spacing-3); }
.upa-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); margin-bottom: var(--spacing-3); }
.upa-count { display: inline-block; margin-left: 6px; padding: 0 7px; font-family: var(--font-family-mono); font-size: 11px; letter-spacing: 0; color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: 999px; }

.upa-parts { display: grid; grid-template-columns: 110px minmax(0, 1fr) 96px; gap: var(--spacing-3); }
.upa-f { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12px; color: var(--color-text-secondary); min-width: 0; }
.upa-path, .upa-hash { grid-column: 1 / -1; }
.upa .form-control, .upa-card input.form-control { height: 34px; padding: 0 10px; font-family: var(--font-family-mono); font-size: 13px; }

.upa-params { display: flex; flex-direction: column; gap: 6px; }
.upa-param { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.5fr) 30px; gap: 8px; align-items: center; }
.upa-eq { color: var(--color-text-muted); font-family: var(--font-family-mono); }
.upa-del { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; color: var(--color-text-muted); background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; }
.upa-del:hover { color: var(--color-error); border-color: var(--color-border); background: var(--color-bg-tertiary); }
.upa-empty { margin: 0; font-size: 13px; color: var(--color-text-muted); }

.upa textarea.form-control { height: 96px !important; padding: 8px 10px; resize: vertical; line-height: 1.5; word-break: break-all; }
.upa-hint { margin: var(--spacing-2) 0 0; font-size: 12px; color: var(--color-text-muted); }
.upa-json { margin: 0; padding: var(--spacing-3); max-height: 320px; overflow: auto; font-family: var(--font-family-mono); font-size: 12px; line-height: 1.6; color: var(--color-text-primary); background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: var(--radius-md); white-space: pre-wrap; word-break: break-all; }

@media (max-width: 900px) {
  .upa { padding: 0 var(--spacing-3); }
  .upa-result { grid-template-columns: 1fr; }
  .upa-side { position: static; }
}
@media (max-width: 520px) {
  .upa-bar { flex-wrap: wrap; }
  .upa-bar .form-control { flex: 1 1 100%; }
  .upa-bar .btn { flex: 1; }
  .upa-parts { grid-template-columns: 1fr 1fr; }
  .upa-host { grid-column: 1 / -1; }
  .upa-param { grid-template-columns: 1fr 30px; }
  .upa-eq { display: none; }
  .upa-param .form-control:nth-of-type(2) { grid-column: 1; }
}
.upa { margin-bottom: var(--spacing-8); }
@media (max-width: 520px) { .upa-param > input:first-child { grid-column: 1 / -1; } }

/* ===============================================
   REDIRECTION CHECKER (shares the .upa shell with URL Pro Analyzer)
   =============================================== */
.rc #result { margin-top: var(--spacing-5); }
.rc-summary { display: flex; flex-direction: column; gap: var(--spacing-3); }
.rc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.rc-stat { display: flex; flex-direction: column; gap: 2px; padding: var(--spacing-3) var(--spacing-4); border-right: 1px solid var(--color-border); }
.rc-stat:last-child { border-right: 0; }
.rc-stat-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.rc-stat-value { font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--color-text-primary); }
.rc-final { display: flex; align-items: center; gap: var(--spacing-3); flex-wrap: wrap; }
.rc-url { flex: 1; min-width: 0; font-family: var(--font-family-mono); font-size: 13px; color: var(--color-text-primary); word-break: break-all; }
.rc-tip { margin: 0; font-size: 13px; color: var(--color-text-secondary); }
.rc-loading { margin: 0; font-size: 14px; color: var(--color-text-secondary); }
.rc-failure { margin: 6px 0 0; font-size: 13px; color: var(--color-error); }
.rc-summary > .rc-failure { margin: 0; font-size: 14px; }

.rc-chain { list-style: none; margin: var(--spacing-4) 0 0; padding: 0; display: flex; flex-direction: column; }
.rc-step { position: relative; display: flex; gap: var(--spacing-3); padding-bottom: var(--spacing-4); }
.rc-step:last-child { padding-bottom: 0; }
.rc-step::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 1px; background: var(--color-border-light); }
.rc-step:last-child::before { display: none; }
.rc-num { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; font-family: var(--font-family-mono); font-size: 12px; color: var(--color-text-primary); background: var(--color-bg-card); border: 1px solid var(--color-border-light); border-radius: 50%; z-index: 1; }
.rc-body { flex: 1; min-width: 0; padding: var(--spacing-3) var(--spacing-4); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.rc-top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-2); margin-bottom: 6px; }
.rc-badge { padding: 1px 9px; font-family: var(--font-family-mono); font-size: 12px; font-weight: 600; border: 1px solid currentColor; border-radius: 999px; }
.rc-ok { color: var(--color-success); }
.rc-redirect { color: var(--color-warning); }
.rc-error { color: var(--color-error); }
.rc-name { font-size: 13px; color: var(--color-text-secondary); }
.rc-time { margin-left: auto; font-family: var(--font-family-mono); font-size: 12px; color: var(--color-text-muted); }
.rc-final-tag { padding: 0 8px; font-size: 11px; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 999px; }
.rc-link { display: block; font-family: var(--font-family-mono); font-size: 13px; color: var(--color-text-primary); text-decoration: none; word-break: break-all; }
.rc-link:hover { text-decoration: underline; }
@media (max-width: 520px) { .rc-stat { padding: var(--spacing-2) var(--spacing-3); } .rc-stat-value { font-size: 17px; } .rc-time { margin-left: 0; } }

/* ===============================================
   API TEST LAB (shares the .upa shell)
   =============================================== */
.atl .upa-card { margin-top: var(--spacing-4); }
.atl-bar { display: flex; gap: var(--spacing-2); align-items: stretch; }
.atl-bar .form-control { flex: 1; min-width: 0; height: 40px; padding: 0 12px; font-size: 14px; }
.atl-bar .btn { height: 40px; padding: 0 22px; flex-shrink: 0; }
.atl-method, select.atl-method { height: 40px; min-width: 104px; font-family: var(--font-family-mono); font-weight: 600; }
.atl-spacer { flex: 1; }
.atl .upa-examples { margin-bottom: 0; }

.atl-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--color-border); margin: calc(var(--spacing-1) * -1) 0 var(--spacing-4); }
.atl-tab { padding: 8px 12px; font: inherit; font-size: 13px; color: var(--color-text-muted); background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.atl-tab:hover { color: var(--color-text-primary); }
.atl-tab.active { color: var(--color-text-primary); border-bottom-color: var(--color-text-primary); font-weight: 600; }
.atl-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; font-family: var(--font-family-mono); font-size: 10px; line-height: 16px; text-align: center; color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: 999px; }
.atl-tabs .btn { margin: 0 0 4px 6px; }

.atl-panel[hidden], .atl-rpanel[hidden], .atl-auth[hidden] { display: none !important; }
.atl-kv { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--spacing-3); }
.atl-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1.6fr) 30px; gap: 8px; align-items: center; }
.atl-row input[type="checkbox"] { width: 14px; height: 14px; margin: 0 auto; accent-color: var(--color-text-primary); }
.atl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.atl-hint { margin: var(--spacing-2) 0 0; font-size: 12px; line-height: 1.5; color: var(--color-text-muted); }
.atl-hint code { font-family: var(--font-family-mono); color: var(--color-text-secondary); }
.atl-ok { color: var(--color-success); }
.atl-bad { color: var(--color-error); }
.atl-radios { display: flex; flex-wrap: wrap; gap: var(--spacing-4); margin-bottom: var(--spacing-3); font-size: 13px; color: var(--color-text-secondary); }
.atl-radios label, .atl-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.atl-radios input, .atl-check input { accent-color: var(--color-text-primary); margin: 0; }
.atl-check { margin-top: var(--spacing-3); font-size: 13px; color: var(--color-text-secondary); }
.atl-field { margin-bottom: var(--spacing-3); max-width: 420px; }
.atl-auth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--spacing-3); max-width: 720px; }
.atl-auth-grid .atl-field { margin-bottom: 0; }
.atl-request textarea.form-control { height: 180px !important; font-family: var(--font-family-mono); font-size: 13px; }

.atl-status { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-3); margin-bottom: var(--spacing-3); }
.atl-st-text { font-size: 14px; color: var(--color-text-primary); }
.atl-meta { font-family: var(--font-family-mono); font-size: 12px; color: var(--color-text-muted); }
.atl-final { flex-basis: 100%; font-family: var(--font-family-mono); font-size: 12px; color: var(--color-text-muted); word-break: break-all; }
.atl-out { max-height: 460px; min-height: 80px; }
.atl-j-key { color: var(--color-text-primary); font-weight: 600; }
.atl-j-str { color: var(--color-success); }
.atl-j-num { color: var(--color-warning); }
.atl-j-lit { color: var(--color-text-secondary); font-style: italic; }
.atl-headers-table { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.atl-hrow { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); gap: var(--spacing-3); padding: 7px var(--spacing-3); font-size: 12px; border-top: 1px solid var(--color-border); }
.atl-hrow:first-child { border-top: 0; }
.atl-hk { font-family: var(--font-family-mono); font-weight: 600; color: var(--color-text-primary); word-break: break-word; }
.atl-hv { font-family: var(--font-family-mono); color: var(--color-text-secondary); word-break: break-all; }

.atl-history-list { list-style: none; margin: 0; padding: 0; }
.atl-hist-btn { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: var(--spacing-3); align-items: center; width: 100%; padding: 8px var(--spacing-2); font: inherit; text-align: left; color: var(--color-text-primary); background: transparent; border: 0; border-top: 1px solid var(--color-border); cursor: pointer; }
.atl-history-list li:first-child .atl-hist-btn { border-top: 0; }
.atl-hist-btn:hover { background: var(--color-bg-tertiary); }
.atl-hist-method { font-family: var(--font-family-mono); font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.atl-hist-url { font-family: var(--font-family-mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 700px) {
  .atl-bar { flex-wrap: wrap; }
  .atl-bar .form-control { flex: 1 1 100%; order: 3; }
  .atl-method { flex: 1; }
  .atl-bar .btn { flex: 1; }
  .atl-row { grid-template-columns: 22px minmax(0, 1fr) 30px; row-gap: 6px; }
  .atl-row input[type="checkbox"] { grid-column: 1; grid-row: 1; }
  .atl-row .atl-k { grid-column: 2; grid-row: 1; }
  .atl-row .upa-del { grid-column: 3; grid-row: 1; }
  .atl-row .atl-v { grid-column: 2 / -1; grid-row: 2; }
  .atl-tabs .atl-spacer { flex-basis: 100%; height: 0; }
  .atl-hrow { grid-template-columns: 1fr; gap: 2px; }
  .atl-hist-btn { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .atl-hist-btn .atl-meta { display: none; }
}

/* ===============================================
   MOBILE / TABLET HEADER (final): the old <=767px rule stacked the header in a column
   =============================================== */
@media (max-width: 1024px) {
    .header-container { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; height: auto; gap: 0 var(--spacing-3); padding: 0 var(--spacing-4); }
    .header-container > .header-brand { margin-right: auto; }
    .main-nav { width: auto; margin-left: auto; justify-content: flex-end; gap: var(--spacing-2); }
    .header-container > .breadcrumb { flex: 0 0 100%; justify-content: flex-start; flex-wrap: nowrap; padding: 0; gap: 4px; }
    .breadcrumb-separator { margin: 0; }
}

/* The <=640px "touch target" rule gives every link and button a 44px minimum; keep the header compact. */
@media (max-width: 640px) {
    .header-container .breadcrumb a, .header-container .breadcrumb-item, .header-container .breadcrumb span { min-height: 0; min-width: 0; }
    .header-container > .breadcrumb { min-height: 32px; align-items: center; }
    .header-container .theme-toggle { width: 34px; height: 34px; min-height: 0; min-width: 0; }
    .header-container .mobile-nav-toggle { width: 38px; height: 38px; min-height: 0; min-width: 0; }
    .header-container > .header-brand { min-height: 0; min-width: 0; }
}

/* Homepage: hover panel on a category heading lists every tool in it (hover-capable screens only) */
.cat-pop { display: none; }
@media (hover: hover) and (min-width: 769px) {
    .cat-hover { position: relative; width: fit-content; }
    .cat-hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; } /* keeps hover while moving into the panel */
    .cat-pop { display: block; position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: min(620px, 90vw); padding: var(--spacing-4); text-transform: none; letter-spacing: 0; font-weight: 400; background: var(--color-bg-elevated); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; }
    .cat-hover:hover .cat-pop, .cat-hover:focus-within .cat-pop { opacity: 1; visibility: visible; transform: none; }
    .cat-pop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
    .cat-pop-head strong { font-size: 14px; color: var(--color-text-primary); }
    .cat-pop-head span { font-family: var(--font-family-mono); font-size: 11px; color: var(--color-text-muted); }
    .cat-pop p { margin: 0 0 var(--spacing-3); font-size: 12px; color: var(--color-text-secondary); }
    .cat-pop-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; max-height: 340px; overflow-y: auto; }
    .cat-pop-list a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13px; color: var(--color-text-secondary); border-radius: var(--radius-md); text-decoration: none; }
    .cat-pop-list a:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); }
    .cat-pop-ic { display: inline-flex; color: var(--color-text-muted); }
}

/* Theme selector: System / Dark / Light */
.theme-seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.theme-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 0; width: 28px; height: 26px; padding: 0; border: 0; border-radius: calc(var(--radius-md) - 2px); background: transparent; color: var(--color-text-muted); cursor: pointer; font: inherit; font-size: 12px; }
.theme-seg button span { display: none; }
.theme-seg button:hover { color: var(--color-text-primary); }
.theme-seg button.active { background: var(--color-bg-tertiary); color: var(--color-text-primary); box-shadow: 0 0 0 1px var(--color-border-light); }
.mobile-theme-toggle .theme-seg { width: 100%; }
.mobile-theme-toggle .theme-seg button { flex: 1; width: auto; height: 34px; min-height: 0; min-width: 0; }
.mobile-theme-toggle .theme-seg button span { display: inline; }

/* Theme dropdown (top bar) */
.theme-dd { position: relative; }
.theme-dd-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-width: 0; min-height: 0; padding: 0; background: var(--color-bg-card); color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; }
.theme-dd-btn:hover, .theme-dd.open .theme-dd-btn { color: var(--color-text-primary); border-color: var(--color-text-muted); }
.tdd-ic { display: none; }
.theme-dd[data-mode="system"] .tdd-system, .theme-dd[data-mode="dark"] .tdd-dark, .theme-dd[data-mode="light"] .tdd-light { display: inline-flex; }
.theme-dd-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 150px; padding: 4px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); box-shadow: 0 12px 32px rgba(0, 0, 0, .3); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease, visibility .12s; }
.theme-dd.open .theme-dd-menu { opacity: 1; visibility: visible; transform: none; }
.theme-dd-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 0; padding: 8px 10px; background: transparent; border: 0; border-radius: var(--radius-md); color: var(--color-text-secondary); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.theme-dd-menu button:hover { background: var(--color-bg-tertiary); color: var(--color-text-primary); }
.theme-dd-menu button.active { color: var(--color-text-primary); background: var(--color-bg-tertiary); }
.theme-dd-menu button.active::after { content: "✓"; margin-left: auto; font-size: 12px; }

@media (min-width: 1025px) {
    /* search + theme sit on the right; the homepage has no breadcrumb, so margin-left:auto keeps it right too */
    .topbar-actions { display: contents; }
    .header-container > .breadcrumb { flex: 1 1 auto; }
    .topbar-search { margin-left: auto; margin-right: var(--spacing-2); }
    .theme-dd { margin-left: 0; }
    .topbar-actions--home .topbar-search { margin-left: auto; }
    .header-container { position: relative; }
}
@media (max-width: 1024px) { .theme-dd { display: none; } }

/* Search modal (⌘K): larger panel */
.cmdk { padding-top: 10vh; }
.cmdk-panel { width: min(760px, calc(100% - 32px)); border-radius: var(--radius-xl, 14px); box-shadow: 0 24px 64px rgba(0, 0, 0, .45); }
.cmdk-input { padding: 20px 22px; font-size: 18px; }
.cmdk-list { max-height: min(60vh, 520px); padding: 8px; }
.cmdk-item { padding: 12px 14px; font-size: 15px; gap: 12px; }
.cmdk-type { font-size: 12px; }
.cmdk-empty { padding: 32px; font-size: 14px; }

/* Search modal: tools listed by category */
.cmdk-group[hidden] { display: none; }
.cmdk-heading { position: sticky; top: -8px; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 6px; margin-top: 4px; background: var(--color-bg-elevated); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.cmdk-heading span { display: inline-flex; align-items: center; gap: 8px; }
.cmdk-heading em { font-style: normal; font-family: var(--font-family-mono); }
.cmdk-group:first-child .cmdk-heading { margin-top: 0; }
.cmdk-item .cmdk-name { flex: 0 1 auto; white-space: nowrap; color: var(--color-text-primary); }
.cmdk-desc { flex: 1; min-width: 0; margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--color-text-muted); }
.cmdk-panel { display: flex; flex-direction: column; }
.cmdk-list { max-height: min(68vh, 600px); }
@media (max-width: 640px) { .cmdk-desc { display: none; } }

/* Homepage hero */
.hero { padding: var(--spacing-2) 0 var(--spacing-6); }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; font-size: 12px; color: var(--color-text-secondary); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: 999px; }
.hero-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.hero-h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; margin: var(--spacing-4) 0 var(--spacing-3); max-width: 30ch; }
.hero-lead { max-width: 64ch; margin: 0 0 var(--spacing-5); font-size: 15px; line-height: 1.6; color: var(--color-text-secondary); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-bottom: var(--spacing-5); }
.hero-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 0; min-width: 0; padding: 9px 16px; font: inherit; font-size: 13px; font-weight: 500; color: var(--color-text-primary); background: var(--color-bg-card); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); text-decoration: none; cursor: pointer; }
.hero-btn:hover { border-color: var(--color-text-muted); background: var(--color-bg-tertiary); }
.hero-btn-primary { background: var(--color-text-primary); color: var(--color-bg-primary); border-color: var(--color-text-primary); }
.hero-btn-primary:hover { background: var(--color-text-primary); opacity: .88; }
.hero-btn kbd { font-family: var(--font-family-mono); font-size: 11px; padding: 0 5px; border: 1px solid currentColor; border-radius: 4px; opacity: .6; }
.hero-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--spacing-4); }
.hero-cat { display: inline-flex; align-items: center; gap: 8px; min-height: 0; min-width: 0; padding: 6px 12px; font-size: 13px; color: var(--color-text-secondary); background: transparent; border: 1px solid var(--color-border); border-radius: 999px; text-decoration: none; }
.hero-cat:hover { color: var(--color-text-primary); border-color: var(--color-text-muted); background: var(--color-bg-card); }
.hero-cat em { font-style: normal; font-family: var(--font-family-mono); font-size: 11px; color: var(--color-text-muted); }
.hero .dash-by { margin: 0; }
.dash-stat-sub { display: block; margin-top: 2px; font-size: 11px; color: var(--color-text-muted); }
.dash-stat-num { font-size: 22px; }
.tool-group { scroll-margin-top: 72px; }
html { scroll-behavior: smooth; }
@media (max-width: 640px) { .hero-btn { flex: 1 1 100%; justify-content: center; } .hero-btn kbd { display: none; } .hero-lead { font-size: 14px; } }

/* Homepage hero search */
.hero-search { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 560px; min-height: 0; min-width: 0; margin: 0 0 var(--spacing-4); padding: 14px 18px; font: inherit; font-size: 15px; color: var(--color-text-muted); background: var(--color-bg-card); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); cursor: pointer; }
.hero-search:hover { border-color: var(--color-text-muted); color: var(--color-text-secondary); }
.hero-search span { flex: 1; text-align: left; }
.hero-search kbd { font-family: var(--font-family-mono); font-size: 11px; padding: 0 5px; border: 1px solid var(--color-border); border-radius: 4px; }
@media (max-width: 640px) { .hero-search kbd { display: none; } }

/* Cookie consent banner */
.consent { position: fixed; z-index: 3000; left: 16px; right: 16px; bottom: 16px; max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: var(--spacing-4); padding: var(--spacing-4); background: var(--color-bg-elevated); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); box-shadow: 0 16px 48px rgba(0, 0, 0, .4); }
.consent-text { flex: 1; min-width: 0; font-size: 13px; color: var(--color-text-secondary); }
.consent-text strong { display: block; margin-bottom: 2px; font-size: 14px; color: var(--color-text-primary); }
.consent-text p { margin: 0; line-height: 1.5; }
.consent-text a { color: var(--color-text-primary); text-decoration: underline; }
.consent-actions { display: flex; gap: 8px; flex-shrink: 0; }
.consent-btn { min-height: 0; min-width: 0; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 500; color: var(--color-text-primary); background: var(--color-bg-card); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); cursor: pointer; }
.consent-btn:hover { border-color: var(--color-text-muted); }
.consent-btn-primary { background: var(--color-text-primary); color: var(--color-bg-primary); border-color: var(--color-text-primary); }
.ft-linkbtn { min-height: 0; min-width: 0; padding: 0; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.ft-linkbtn:hover { color: var(--color-text-primary); }
@media (max-width: 640px) { .consent { flex-direction: column; align-items: stretch; } .consent-actions .consent-btn { flex: 1; } }
.ft-col .ft-linkbtn { font-size: 13px; color: var(--color-text-secondary); line-height: 1.4; }
.ft-col .ft-linkbtn:hover { color: var(--color-text-primary); }

/* Tool pages: related tools list */
.related-tools { list-style: none; margin: 0 0 var(--spacing-4); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.related-tools a { display: block; padding: 10px 14px; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); text-decoration: none; font-size: 13px; }
.related-tools a:hover { border-color: var(--color-text-muted); }
.related-tools strong { display: block; color: var(--color-text-primary); font-size: 14px; margin-bottom: 2px; }
@media (max-width: 640px) { .related-tools { grid-template-columns: 1fr; } }
.related-tools { padding-left: 0 !important; margin-left: 0 !important; }

/* Extension screenshots on tool pages */
.ext-shots { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-4); max-width: 960px; margin: 0 auto var(--spacing-8); padding: 0 var(--spacing-5); }
.ext-shots h2 { flex: 0 0 100%; text-align: center; margin: 0; }
.ext-shots figure { margin: 0; max-width: 460px; flex: 1 1 280px; }
.ext-shots img { display: block; width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-card); }
.ext-shots figcaption { margin-top: var(--spacing-2); text-align: center; font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Install page spacing (markup unchanged) */
.c-faq.ext-page { max-width: 860px; margin: 0 auto var(--spacing-12); padding: var(--spacing-8); }
.c-faq.ext-page h1 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-3); margin: 0 0 var(--spacing-4); line-height: var(--line-height-tight); }
.c-faq.ext-page h1 { font-size: var(--font-size-2xl); color: var(--color-text-primary); }
.c-faq.ext-page > p { margin: 0 0 var(--spacing-6); color: var(--color-text-secondary); }
.c-faq.ext-page ol li { color: var(--color-text-secondary); }
.c-faq.ext-page ol li::marker { color: var(--color-text-muted); font-family: var(--font-family-mono); }
.c-faq.ext-page strong { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.c-faq.ext-page .ext-link { cursor: pointer; padding: 1px var(--spacing-2); font-family: var(--font-family-mono); font-size: 0.9em; color: var(--color-text-primary); background: var(--color-bg-elevated); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); transition: border-color var(--transition-base); }
.c-faq.ext-page .ext-link:hover { border-color: var(--color-text-muted); }
.c-faq.ext-page ol { margin: 0; padding-left: var(--spacing-6); display: flex; flex-direction: column; gap: var(--spacing-4); }
.c-faq.ext-page ol li { line-height: var(--line-height-relaxed); padding-left: var(--spacing-1); }
.c-faq.ext-page .download { margin-top: var(--spacing-10) !important; }
.c-faq.ext-page .download a { display: inline-flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-6); }
@media (max-width: 600px) { .c-faq.ext-page { padding: var(--spacing-5); } }

/* Breadcrumb never runs under the centred search box: long crumbs shrink with an ellipsis */
.header-container > .breadcrumb { min-width: 0; }
.breadcrumb-item { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb-item:first-child, .breadcrumb-separator { flex-shrink: 0; }
@media (min-width: 1025px) {
    .header-container > .breadcrumb { max-width: calc(50% - clamp(130px, 19vw, 280px) - 40px); overflow: hidden; }
}
.c-faq.ext-page .download a.btn-primary { color: var(--color-text-inverse); background-color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--radius-md); font-weight: var(--font-weight-medium); text-decoration: none; }
.c-faq.ext-page .download a.btn-primary:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-text-inverse); }
.c-faq.ext-page h1 .ext-ic { flex: 0 0 auto; color: var(--color-text-secondary); }
.c-faq.ext-page .ext-link { margin: 0 2px; }

/* Generic tool with two inputs (e.g. JSON Difference Checker): inputs side by side, actions in a row, output below. */
.dev-two .main-content { flex-direction: column !important; }
.dev-two .dev-inputs { display: flex; gap: var(--spacing-4); }
.dev-two .dev-inputs > .c-breakdown__inner { min-width: 0; }
.dev-tool.dev-two .dev-actions { flex-direction: row; justify-content: flex-start; flex-wrap: wrap; flex: none !important; padding-top: 0; align-self: auto; }
.dev-tool.dev-two .dev-actions .btn { width: auto; }
.dev-two textarea.form-control { height: 280px !important; }
@media (max-width: 767px) { .dev-two .dev-inputs { flex-direction: column; } }