/* ══════════════════════════════════════════════════════════════════════
   SHIMMERING FOCUS — Web Adaptation  (light + dark)
   Source: https://github.com/chrisgrieser/shimmering-focus
   ══════════════════════════════════════════════════════════════════════ */

/* ── SHARED TOKENS (theme-independent) ─────────────────────────────── */
:root {
    --bg-hue: 230;
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
}

/* ── LIGHT THEME ────────────────────────────────────────────────────
   SF 00_Default.css .theme-light + variables.css .theme-light
─────────────────────────────────────────────────────────────────── */
:root,
[data-theme="light"],
html[data-theme="light"] {
    --bg-sat: 25%;

    /* Color scale — light: 99% → 13% (inverted vs dark) */
    --color-base-00 : hsl(var(--bg-hue) calc(var(--bg-sat) * 1.5) 99%);
    --color-base-10 : hsl(var(--bg-hue) var(--bg-sat) 97%);
    --color-base-20 : hsl(var(--bg-hue) var(--bg-sat) 95%);
    --color-base-25 : hsl(var(--bg-hue) var(--bg-sat) 92%);
    --color-base-30 : hsl(var(--bg-hue) var(--bg-sat) 88%);
    --color-base-35 : hsl(var(--bg-hue) var(--bg-sat) 83%);
    --color-base-40 : hsl(var(--bg-hue) var(--bg-sat) 74%);
    --color-base-50 : hsl(var(--bg-hue) var(--bg-sat) 67%);
    --color-base-60 : hsl(var(--bg-hue) var(--bg-sat) 44%);
    --color-base-70 : hsl(var(--bg-hue) var(--bg-sat) 35%);
    --color-base-85s: hsl(var(--bg-hue) calc(var(--bg-sat) * 2) 24%);
    --color-base-100: hsl(var(--bg-hue) var(--bg-sat) 13%);

    /* Surfaces: bg1=floor (white), bg6=raised-dark */
    --bg1: var(--color-base-00);
    --bg2: var(--color-base-10);
    --bg3: var(--color-base-20);
    --bg4: var(--color-base-25);
    --bg5: var(--color-base-30);
    --bg6: var(--color-base-35);

    /* Accent — SF light: teal 35% lightness */
    --color-accent      : hsl(184 79% 35%);
    --hover-accent      : hsl(328 70% 54%);
    --secondary-accent  : hsl(28  54% 51%);
    --alt-heading-color : hsl(232 34% 50%);
    --interactive-accent: hsl(184 79% 30%);

    /* Text */
    --text-normal : var(--color-base-85s);
    --text-muted  : var(--color-base-70);
    --text-gray   : var(--color-base-60);
    --text-faint  : var(--color-base-50);
    --text-on-accent: hsl(0 0% 100%);

    /* Links */
    --link-color      : var(--color-accent);
    --link-color-hover: var(--hover-accent);

    /* Borders */
    --basic-border-color: var(--color-base-50);
    --muted-border-color: var(--color-base-30);
    --thin-border  : 1px solid var(--basic-border-color);
    --muted-border : 1px solid var(--muted-border-color);

    /* Code */
    --inline-code-color: var(--secondary-accent);

    /* Table / blockquote */
    --table-header-background  : var(--bg5);
    --table-row-alt-background : hsla(0 0% 0% / 8%);
    --blockquote-border-color  : var(--bg5);
    --blockquote-background-color: var(--bg3);

    /* DaisyUI oklch overrides — light approximations */
    --b1: 97.5% 0.008 230;
    --b2: 95.5% 0.010 230;
    --b3: 92.5% 0.012 230;
    --bc: 24.0% 0.020 230;
    --p : 45.0% 0.100 184;
    --pf: 38.0% 0.100 184;
    --pc: 100%  0     0;
    --s : 51.0% 0.090 50;
    --sf: 45.0% 0.090 50;
    --sc: 100%  0     0;
    --a : 54.0% 0.150 340;
    --af: 48.0% 0.150 340;
    --ac: 100%  0     0;
    --n : 83.0% 0.010 230;
    --nf: 88.0% 0.010 230;
    --nc: 24.0% 0.020 230;
}

/* ── DARK THEME ─────────────────────────────────────────────────────
   SF 00_Default.css .theme-dark + variables.css .theme-dark
─────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-sat: 15%;

        --color-base-00 : hsl(var(--bg-hue) var(--bg-sat) 12%);
        --color-base-10 : hsl(var(--bg-hue) var(--bg-sat) 14%);
        --color-base-20 : hsl(var(--bg-hue) var(--bg-sat) 16%);
        --color-base-25 : hsl(var(--bg-hue) var(--bg-sat) 18%);
        --color-base-30 : hsl(var(--bg-hue) var(--bg-sat) 22%);
        --color-base-35 : hsl(var(--bg-hue) var(--bg-sat) 25%);
        --color-base-40 : hsl(var(--bg-hue) var(--bg-sat) 33%);
        --color-base-50 : hsl(var(--bg-hue) var(--bg-sat) 40%);
        --color-base-60 : hsl(var(--bg-hue) var(--bg-sat) 60%);
        --color-base-70 : hsl(var(--bg-hue) var(--bg-sat) 73%);
        --color-base-85s: hsl(var(--bg-hue) calc(var(--bg-sat) * 2) 82%);
        --color-base-100: hsl(var(--bg-hue) var(--bg-sat) 85%);

        --bg1: var(--color-base-00);
        --bg2: var(--color-base-10);
        --bg3: var(--color-base-20);
        --bg4: var(--color-base-25);
        --bg5: var(--color-base-30);
        --bg6: var(--color-base-35);

        --color-accent      : hsl(184 79% 45%);
        --hover-accent      : hsl(328 80% 64%);
        --secondary-accent  : hsl(28  63% 61%);
        --alt-heading-color : hsl(232 50% 70%);
        --interactive-accent: hsl(184 79% 30%);

        --text-normal : var(--color-base-85s);
        --text-muted  : var(--color-base-70);
        --text-gray   : var(--color-base-60);
        --text-faint  : var(--color-base-50);
        --text-on-accent: hsl(0 0% 100%);

        --link-color      : var(--color-accent);
        --link-color-hover: var(--hover-accent);

        --basic-border-color: var(--color-base-50);
        --muted-border-color: var(--color-base-30);
        --thin-border  : 1px solid var(--basic-border-color);
        --muted-border : 1px solid var(--muted-border-color);

        --inline-code-color: var(--secondary-accent);
        --table-header-background  : var(--bg5);
        --table-row-alt-background : hsla(0 0% 0% / 35%);
        --blockquote-border-color  : var(--bg5);
        --blockquote-background-color: var(--bg3);

        --b1: 23.0% 0.010 230;
        --b2: 26.0% 0.010 230;
        --b3: 29.5% 0.010 230;
        --bc: 82.0% 0.008 230;
        --p : 58.5% 0.120 184;
        --pf: 51.0% 0.120 184;
        --pc: 100%  0     0;
        --s : 62.0% 0.120 50;
        --sf: 55.0% 0.120 50;
        --sc: 100%  0     0;
        --a : 60.0% 0.180 340;
        --af: 54.0% 0.180 340;
        --ac: 100%  0     0;
        --n : 28.0% 0.010 230;
        --nf: 24.0% 0.010 230;
        --nc: 82.0% 0.008 230;
    }
}

[data-theme="dark"],
html[data-theme="dark"] {
    --bg-sat: 15%;

    --color-base-00 : hsl(var(--bg-hue) var(--bg-sat) 12%);
    --color-base-10 : hsl(var(--bg-hue) var(--bg-sat) 14%);
    --color-base-20 : hsl(var(--bg-hue) var(--bg-sat) 16%);
    --color-base-25 : hsl(var(--bg-hue) var(--bg-sat) 18%);
    --color-base-30 : hsl(var(--bg-hue) var(--bg-sat) 22%);
    --color-base-35 : hsl(var(--bg-hue) var(--bg-sat) 25%);
    --color-base-40 : hsl(var(--bg-hue) var(--bg-sat) 33%);
    --color-base-50 : hsl(var(--bg-hue) var(--bg-sat) 40%);
    --color-base-60 : hsl(var(--bg-hue) var(--bg-sat) 60%);
    --color-base-70 : hsl(var(--bg-hue) var(--bg-sat) 73%);
    --color-base-85s: hsl(var(--bg-hue) calc(var(--bg-sat) * 2) 82%);
    --color-base-100: hsl(var(--bg-hue) var(--bg-sat) 85%);

    --bg1: var(--color-base-00);
    --bg2: var(--color-base-10);
    --bg3: var(--color-base-20);
    --bg4: var(--color-base-25);
    --bg5: var(--color-base-30);
    --bg6: var(--color-base-35);

    --color-accent      : hsl(184 79% 45%);
    --hover-accent      : hsl(328 80% 64%);
    --secondary-accent  : hsl(28  63% 61%);
    --alt-heading-color : hsl(232 50% 70%);
    --interactive-accent: hsl(184 79% 30%);

    --text-normal : var(--color-base-85s);
    --text-muted  : var(--color-base-70);
    --text-gray   : var(--color-base-60);
    --text-faint  : var(--color-base-50);
    --text-on-accent: hsl(0 0% 100%);

    --link-color      : var(--color-accent);
    --link-color-hover: var(--hover-accent);

    --basic-border-color: var(--color-base-50);
    --muted-border-color: var(--color-base-30);
    --thin-border  : 1px solid var(--basic-border-color);
    --muted-border : 1px solid var(--muted-border-color);

    --inline-code-color: var(--secondary-accent);
    --table-header-background  : var(--bg5);
    --table-row-alt-background : hsla(0 0% 0% / 35%);
    --blockquote-border-color  : var(--bg5);
    --blockquote-background-color: var(--bg3);

    --b1: 23.0% 0.010 230 !important;
    --b2: 26.0% 0.010 230 !important;
    --b3: 29.5% 0.010 230 !important;
    --bc: 82.0% 0.008 230 !important;
    --p : 58.5% 0.120 184 !important;
    --pf: 51.0% 0.120 184 !important;
    --pc: 100%  0     0   !important;
    --s : 62.0% 0.120 50  !important;
    --sf: 55.0% 0.120 50  !important;
    --sc: 100%  0     0   !important;
    --a : 60.0% 0.180 340 !important;
    --af: 54.0% 0.180 340 !important;
    --ac: 100%  0     0   !important;
    --n : 28.0% 0.010 230 !important;
    --nf: 24.0% 0.010 230 !important;
    --nc: 82.0% 0.008 230 !important;
}

/* ── BASE ELEMENTS ─────────────────────────────────────────────────── */
html { scroll-behavior: smooth; background-color: var(--bg1); }

body {
    background-color: var(--bg1);
    color: var(--text-normal);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
                 "Segoe UI Emoji";
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* SF-style modular heading scale with tight tracking */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-normal);
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin-top: 1.2em;
    margin-bottom: 0.4em;
}
h1 { font-size: 2em;    font-weight: 700; }
h2 { font-size: 1.5em;  font-weight: 700; }
h3 { font-size: 1.25em; font-weight: 600; }
h4 { font-size: 1.1em;  font-weight: 600; }
h5 { font-size: 1em;    font-weight: 600; }
h6 { font-size: 0.9em;  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

/* Paragraph rhythm */
p { margin-bottom: 0.75em; }

a {
    color: var(--link-color);
    text-decoration: underline;
    text-decoration-thickness: 1.2px;
    text-underline-offset: 2px;
    transition: color 0.15s;
}
a:hover { color: var(--link-color-hover); }

::selection { background-color: hsl(184 79% 45% / 25%); color: var(--text-normal); }

::-webkit-scrollbar             { width: 6px; height: 6px; }
::-webkit-scrollbar-track       { background: var(--bg1); }
::-webkit-scrollbar-thumb       { background: var(--bg5); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

hr { border: none; border-top: 2px solid var(--text-faint); margin: 2rem 0; }

/* ── CODE ─────────────────────────────────────────────────────────── */
code {
    color: var(--inline-code-color);
    background-color: var(--bg3);
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    font-size: 0.85em;
    font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
}
pre {
    background-color: var(--bg2) !important;
    border: var(--muted-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}
pre code { background: transparent; color: inherit; padding: 0; font-size: 0.875rem; }
pre code.hljs { background: transparent; }

/* ── COMPONENTS ───────────────────────────────────────────────────── */

/* SF-style shadow scale — soft, layered, no harsh edges */
:root {
    --shadow-xs : 0 1px 2px 0 rgb(0 0 0 / 0.04);
    --shadow-sm : 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
    --shadow-md : 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-lg : 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
    --shadow-xl : 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04);
    --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 12%, transparent),
                   0 4px 20px -4px color-mix(in srgb, var(--color-accent) 10%, transparent);
    --shadow-hover: 0 0 0 1px color-mix(in srgb, var(--color-accent) 25%, transparent),
                    0 8px 30px -6px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.card {
    background-color: var(--bg2);
    border: 1px solid var(--muted-border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.22s cubic-bezier(0.33, 1, 0.68, 1),
                box-shadow 0.22s cubic-bezier(0.33, 1, 0.68, 1),
                border-color 0.22s ease;
}
.card:hover {
    border-color: color-mix(in srgb, var(--color-accent) 40%, var(--muted-border-color));
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}
.card-body  { padding: 1.5rem; }
.card-title { color: var(--text-normal); font-weight: 700; }

.navbar {
    background: color-mix(in srgb, var(--bg2) 85%, transparent);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border-bottom: 1px solid var(--muted-border-color);
    box-shadow: var(--shadow-xs);
}

.divider { color: var(--text-faint); }
.divider::before, .divider::after { background-color: var(--bg5); }

.badge {
    border-color: var(--bg5);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2em 0.6em;
    border-radius: 9999px;
}
.badge-primary   { background: hsl(184 79% 45% / 12%); color: var(--color-accent);    border-color: color-mix(in srgb, var(--color-accent) 25%, transparent);    }
.badge-secondary { background: hsl(28  54% 51% / 12%); color: var(--secondary-accent); border-color: color-mix(in srgb, var(--secondary-accent) 25%, transparent); }
.badge-ghost     { background: var(--bg3);              color: var(--text-muted);       border-color: var(--bg5);             }

/* ── INPUTS — clean, spacious, SF-inspired ───────────────────────── */
.input, .select, .textarea {
    background-color: var(--bg2);
    border: 1px solid var(--muted-border-color);
    border-radius: var(--radius-md);
    color: var(--text-normal);
    padding: 0.625rem 0.875rem;
    font-size: 0.925rem;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input:focus, .select:focus, .textarea:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
select option { background-color: var(--bg2); color: var(--text-normal); }

.range { accent-color: var(--color-accent); }

/* ── TABLES — minimal, breathable ────────────────────────────────── */
.table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9em;
    width: 100%;
}
.table th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background-color: var(--bg3);
    border-bottom: 1px solid var(--muted-border-color);
    padding: 0.875rem 1rem;
}
.table td {
    border-bottom: 1px solid var(--bg3);
    padding: 0.875rem 1rem;
    color: var(--text-normal);
    transition: background-color 0.15s ease;
}
.table tr:nth-child(even) td { background-color: color-mix(in srgb, var(--bg3) 40%, transparent); }
.table tr:hover td           { background-color: var(--bg3); }

.alert-info    { background: hsl(184 79% 45% / 10%); border-color: var(--color-accent);   color: var(--color-accent);  }
.alert-success { background: hsl(141 71% 48% / 10%); border-color: hsl(141 71% 48%);      color: hsl(141 71% 40%);     }
.alert-warning { background: hsl(38  92% 50% / 10%); border-color: hsl(38  92% 50%);      color: hsl(38  92% 40%);     }
.alert-error   { background: hsl(0   91% 60% / 10%); border-color: hsl(0   91% 60%);      color: hsl(0   91% 45%);     }

/* ── BLOCKQUOTE ───────────────────────────────────────────────────── */
blockquote {
    padding: 4px 12px;
    background-color: var(--blockquote-background-color);
    border-left: 8px solid var(--blockquote-border-color);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-normal);
    margin: 1.25rem 0;
}

/* ── PROSE / MARKDOWN ─────────────────────────────────────────────── */
.prose { color: var(--text-normal); max-width: 72ch; line-height: 1.65; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { color: var(--text-normal); }
.prose h2 { border-bottom: var(--muted-border); padding-bottom: 0.3em; }
.prose a        { color: var(--link-color); text-decoration-style: double; }
.prose a:hover  { color: var(--link-color-hover); }
.prose strong   { color: var(--hover-accent); font-weight: 700; }
.prose em       { color: var(--alt-heading-color); }
.prose blockquote { padding: 4px 12px; background-color: var(--blockquote-background-color); border-left: 8px solid var(--blockquote-border-color); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.prose blockquote p { color: var(--text-muted); margin: 0; }
.prose code     { color: var(--inline-code-color); background-color: var(--bg3); }
.prose pre      { background-color: var(--bg2); border: var(--muted-border); }
.prose pre code { background: transparent; color: inherit; }
.prose ul { padding-left: 1em;   margin: 0.2em 0; }
.prose ol { padding-left: 1.9em; margin: 0.2em 0; }
.prose li { margin: 0.25em 0; }
.prose table { font-size: 0.9em; }
.prose th { background-color: var(--bg5); color: var(--text-muted); font-weight: 600; padding: 0.5rem 0.75rem; }
.prose td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--bg3); }
.prose tr:nth-child(even) td { background-color: var(--table-row-alt-background); }

mark {
    background-color: hsl(50 85% 40% / 40%);
    color: var(--text-normal);
    padding: 0 2px;
    border-radius: 2px;
}

/* ── UTILITIES ────────────────────────────────────────────────────── */
/* Text colors */
.text-accent    { color: var(--color-accent);     }
.text-muted     { color: var(--text-muted);       }
.text-faint     { color: var(--text-faint);       }
.text-secondary { color: var(--secondary-accent); }
.text-normal    { color: var(--text-normal);      }
.text-heading   { color: var(--text-normal);      }
.text-on-accent { color: var(--text-on-accent);   }
.text-alt-heading { color: var(--alt-heading-color); }

/* Background surfaces */
.bg-surface-1   { background-color: var(--bg1);   }
.bg-surface-2   { background-color: var(--bg2);   }
.bg-surface-3   { background-color: var(--bg3);   }
.bg-surface-4   { background-color: var(--bg4);   }
.bg-surface-5   { background-color: var(--bg5);   }
.bg-surface-6   { background-color: var(--bg6);   }

/* Borders */
.border-subtle  { border-color: var(--bg5);       }
.border-muted   { border-color: var(--muted-border-color); }
.border-accent  { border-color: var(--color-accent); }

/* ── PANELS — SF layered surfaces with breathing whitespace ────── */
.panel {
    background-color: var(--bg2);
    border: 1px solid var(--muted-border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}
.panel-raised {
    background-color: var(--bg2);
    border: 1px solid var(--muted-border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.panel-accent {
    background-color: var(--bg2);
    border: 1px solid color-mix(in srgb, var(--color-accent) 20%, var(--muted-border-color));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glow);
}
.panel-secondary {
    background-color: var(--bg2);
    border: 1px solid color-mix(in srgb, var(--secondary-accent) 20%, var(--muted-border-color));
    border-radius: var(--radius-lg);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--secondary-accent) 10%, transparent),
                 0 4px 20px -4px color-mix(in srgb, var(--secondary-accent) 8%, transparent);
}
.panel-alt {
    background-color: var(--bg2);
    border: 1px solid color-mix(in srgb, var(--alt-heading-color) 20%, var(--muted-border-color));
    border-radius: var(--radius-lg);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--alt-heading-color) 10%, transparent),
                 0 4px 20px -4px color-mix(in srgb, var(--alt-heading-color) 8%, transparent);
}

/* Hero / page backgrounds */
.bg-page        { background-color: var(--bg1); }
.bg-section-alt { background-color: var(--bg2); }

/* ── BUTTONS — SF clean, tactile, no gradients ───────────────────── */
.btn-theme-primary {
    background-color: var(--color-accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.625rem 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s cubic-bezier(0.33, 1, 0.68, 1);
    cursor: pointer;
}
.btn-theme-primary:hover {
    background-color: var(--interactive-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.btn-theme-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-xs);
}
.btn-theme-ghost {
    background-color: transparent;
    color: var(--color-accent);
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5625rem 1.25rem;
    transition: all 0.2s cubic-bezier(0.33, 1, 0.68, 1);
    cursor: pointer;
}
.btn-theme-ghost:hover {
    background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
    transform: translateY(-1px);
}
.btn-theme-ghost:active {
    transform: translateY(0);
}

/* ── INPUT-THEME — roomy, clean, SF focus ring ───────────────────── */
.input-theme {
    background-color: var(--bg2);
    border: 1px solid var(--muted-border-color);
    color: var(--text-normal);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-size: 0.925rem;
    line-height: 1.5;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.input-theme:hover {
    border-color: var(--basic-border-color);
    background-color: color-mix(in srgb, var(--bg3) 50%, var(--bg2));
}
.input-theme:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
    background-color: var(--bg2);
}
.input-theme::placeholder {
    color: var(--text-faint);
}

/* ── TABLE-THEME — rounded container, clean rows ─────────────────── */
.table-theme {
    background-color: var(--bg2);
    border: 1px solid var(--muted-border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.table-theme th {
    background-color: var(--bg3);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--muted-border-color);
}
.table-theme td {
    color: var(--text-normal);
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--bg3);
    transition: background-color 0.15s ease;
}
.table-theme tr:last-child td { border-bottom: none; }
.table-theme tr:hover td {
    background-color: color-mix(in srgb, var(--color-accent) 4%, var(--bg2));
}

/* ── SECTION GRADIENTS — subtle, breathing backgrounds ───────────── */
.section-gradient {
    background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
}
.section-gradient-alt {
    background: linear-gradient(180deg, var(--bg2) 0%, var(--bg1) 100%);
}

/* ── CARD-HOVER — subtle lift + glow ─────────────────────────────── */
.card-hover {
    transition: transform 0.22s cubic-bezier(0.33, 1, 0.68, 1),
                box-shadow 0.22s cubic-bezier(0.33, 1, 0.68, 1),
                border-color 0.22s ease;
}
.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

/* ── SEARCH FORM — modern, centered, spacious ────────────────────── */
.search-form-wrapper {
    background-color: var(--bg2);
    border: 1px solid var(--muted-border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2rem;
    max-width: 64rem;
    margin: 0 auto;
}
.search-form-wrapper:focus-within {
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--muted-border-color));
    box-shadow: var(--shadow-glow);
}

/* Large search input */
.search-input-lg {
    background-color: var(--bg3);
    border: 1.5px solid var(--muted-border-color);
    color: var(--text-normal);
    border-radius: var(--radius-md);
    padding: 0.875rem 1.125rem 0.875rem 2.75rem;
    font-size: 1rem;
    line-height: 1.5;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.search-input-lg:hover {
    background-color: color-mix(in srgb, var(--bg4) 50%, var(--bg3));
    border-color: var(--basic-border-color);
}
.search-input-lg:focus {
    border-color: var(--color-accent);
    outline: none;
    background-color: var(--bg2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}
.search-input-lg::placeholder { color: var(--text-faint); }

/* Search icon positioning — wrapper MUST contain the input */
.search-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.search-icon-wrapper::before {
    content: '';
    position: absolute;
    left: 0.875rem;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 1.125rem;
    height: 1.125rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

/* Results table — wrapped container */
.results-table-wrapper {
    background-color: var(--bg2);
    border: 1px solid var(--muted-border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.results-table-wrapper table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.results-table-wrapper th {
    background-color: var(--bg3);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--muted-border-color);
    text-align: left;
    position: sticky;
    top: 0;
    z-index: 1;
}
.results-table-wrapper td {
    padding: 0.75rem 1rem;
    color: var(--text-normal);
    border-bottom: 1px solid color-mix(in srgb, var(--bg3) 60%, transparent);
    transition: background-color 0.12s ease;
    vertical-align: middle;
}
.results-table-wrapper tr:last-child td { border-bottom: none; }
.results-table-wrapper tbody tr:hover td {
    background-color: color-mix(in srgb, var(--color-accent) 4%, var(--bg2));
}

/* Filter dropdown — modern overlay */
.filter-dropdown-menu {
    background-color: var(--bg2);
    border: 1px solid var(--muted-border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.375rem;
    z-index: 50;
}
.filter-dropdown-menu a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--text-normal);
    font-size: 0.875rem;
    text-decoration: none;
    transition: background-color 0.12s ease;
}
.filter-dropdown-menu a:hover {
    background-color: var(--bg3);
    color: var(--color-accent);
}

/* Filter trigger button */
.filter-trigger {
    background-color: var(--bg3);
    border: 1px solid var(--muted-border-color);
    border-radius: var(--radius-md);
    color: var(--text-normal);
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.15s ease;
}
.filter-trigger:hover {
    border-color: var(--basic-border-color);
    background-color: var(--bg4);
}

/* Advanced filters panel */
.filters-panel {
    background-color: color-mix(in srgb, var(--bg3) 50%, var(--bg2));
    border: 1px solid var(--muted-border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}
.filters-panel summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.5rem 0;
    transition: color 0.15s ease;
}
.filters-panel summary:hover { color: var(--color-accent); }
.filters-panel[open] summary { color: var(--color-accent); }

/* Button row — for centering filter action buttons */
.btn-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding-top: 1rem;
}

/* Result count label */
.result-count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    padding: 0.5rem 0;
    text-align: center;
}
.result-count strong {
    color: var(--color-accent);
    font-weight: 700;
}

/* ── STATUS / SEMANTIC COLORS ─────────────────────────────────────
   Theme-aware status colours that look great on both light & dark.
   Each uses a translucent tinted bg + saturated text + subtle border.
────────────────────────────────────────────────────────────────── */
:root, [data-theme="light"] {
    --color-success: hsl(152 60% 36%);
    --color-info   : hsl(210 70% 46%);
    --color-warning: hsl(38  80% 48%);
    --color-danger : hsl(0   72% 50%);
    --color-vram   : hsl(210 70% 46%);
    --color-gen    : hsl(270 50% 52%);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-success: hsl(152 65% 54%);
        --color-info   : hsl(210 75% 62%);
        --color-warning: hsl(38  85% 62%);
        --color-danger : hsl(0   72% 62%);
        --color-vram   : hsl(210 75% 62%);
        --color-gen    : hsl(270 55% 72%);
    }
}
[data-theme="dark"] {
    --color-success: hsl(152 65% 54%);
    --color-info   : hsl(210 75% 62%);
    --color-warning: hsl(38  85% 62%);
    --color-danger : hsl(0   72% 62%);
    --color-vram   : hsl(210 75% 62%);
    --color-gen    : hsl(270 55% 72%);
}

/* Text utilities */
.text-success  { color: var(--color-success); }
.text-info     { color: var(--color-info);    }
.text-warning  { color: var(--color-warning); }
.text-danger   { color: var(--color-danger);  }
.text-vram     { color: var(--color-vram);    }
.text-gen      { color: var(--color-gen);     }

/* Badge components — translucent bg + text + border */
.badge-success {
    background: color-mix(in srgb, var(--color-success) 14%, transparent);
    color: var(--color-success);
    border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
}
.badge-info {
    background: color-mix(in srgb, var(--color-info) 14%, transparent);
    color: var(--color-info);
    border: 1px solid color-mix(in srgb, var(--color-info) 30%, transparent);
}
.badge-warning {
    background: color-mix(in srgb, var(--color-warning) 14%, transparent);
    color: var(--color-warning);
    border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
}
.badge-danger {
    background: color-mix(in srgb, var(--color-danger) 14%, transparent);
    color: var(--color-danger);
    border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
}
.badge-gen {
    background: color-mix(in srgb, var(--color-gen) 14%, transparent);
    color: var(--color-gen);
    border: 1px solid color-mix(in srgb, var(--color-gen) 30%, transparent);
}
.badge-vram {
    background: color-mix(in srgb, var(--color-vram) 14%, transparent);
    color: var(--color-vram);
    border: 1px solid color-mix(in srgb, var(--color-vram) 30%, transparent);
}
.badge-accent {
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent);
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* ── SHIMMERING FOCUS POLISH ──────────────────────────────────────
   Refined micro-interactions, glass effects, breathing rhythm.
────────────────────────────────────────────────────────────────── */

/* Glass panel variant — frosted glass look */
.panel-glass {
    background: color-mix(in srgb, var(--bg2) 80%, transparent);
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    border: 1px solid color-mix(in srgb, var(--color-accent) 12%, var(--muted-border-color));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glow),
        inset 0 1px 0 color-mix(in srgb, var(--color-base-100) 5%, transparent);
}

/* Shimmer gradient text — use on headings for extra pop */
.text-shimmer {
    background: linear-gradient(135deg, var(--color-accent), var(--alt-heading-color), var(--hover-accent));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Refined focus ring — accessible + beautiful */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Stat highlight — for hero numbers */
.stat-highlight {
    color: var(--color-accent);
    text-shadow: 0 0 20px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

/* Divider with accent glow */
.divider-accent {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    border: none;
    opacity: 0.4;
}

/* Status badge base (used with badge-success etc.) */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── BREATHING LAYOUT HELPERS ────────────────────────────────────── */
.section-breathing {
    padding: 3.5rem 1.5rem;
}
@media (min-width: 768px) {
    .section-breathing { padding: 5rem 2rem; }
}

/* Smooth container max-widths */
.container-narrow { max-width: 48rem; margin: 0 auto; }
.container-wide   { max-width: 72rem; margin: 0 auto; }

/* Responsive table scroll wrapper */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-scroll::-webkit-scrollbar { height: 4px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--bg5); border-radius: 2px; }

/* Loading shimmer placeholder */
.htmx-indicator { opacity: 0; transition: opacity 0.3s ease; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-faint);
}
.empty-state p { font-size: 1.05rem; }

/* ── NAV / FOOTER LINK PATTERNS ──────────────────────────────────
   Eliminates 30+ repeated inline hover:text-primary transition-colors
────────────────────────────────────────────────────────────────── */
.nav-link {
    color: var(--text-normal);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    transition: color 0.15s ease;
}
.nav-link:hover { color: var(--color-accent); }

.nav-link-muted {
    color: var(--text-muted);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    transition: color 0.15s ease;
}
.nav-link-muted:hover { color: var(--color-accent); }

.dropdown-link {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.12s ease, background-color 0.12s ease;
}
.dropdown-link:hover {
    color: var(--color-accent);
    background-color: var(--bg3);
}

.footer-link {
    color: var(--text-muted);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.15s ease;
}
.footer-link:hover { color: var(--color-accent); }

/* Nav dropdown panel */
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background-color: var(--bg2);
    border: 1px solid var(--muted-border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.375rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 50;
}
.group:hover > .nav-dropdown {
    opacity: 1;
    visibility: visible;
}