/* ============================================================
   ZOrders — Theme tokens
   Loaded BEFORE every other stylesheet.

   One accent (petrol) across three skins; only the environment
   changes, so no component needs rebuilding.

   Skins:  (default) Ζεστό Εργαστήριο · indigo Λεβάντα · graphite Γραφίτης
           dark Νυχτερινή Βάρδια · clean Καθαρός Θάλαμος
   ============================================================ */

/* ---------- SKIN 1 — Ζεστό Εργαστήριο (default) ---------- */
:root {
    /* accent — petrol reads clinical and sits complementary to the warm field.
       -rgb is exposed so callers can build any alpha they need. */
    --primary: #0E7C7B;
    --primary-rgb: 14, 124, 123;
    --primary-dark: #0A5F5E;
    --primary-soft: #E2F0EF;
    --glow: rgba(14, 124, 123, 0.38);

    /* surfaces */
    --surface: #FFFFFF;
    --surface-alt: #F7F2EA;
    --page-bg: linear-gradient(160deg, #FAF6F0 0%, #F8F1E8 45%, #F5EDE3 100%);

    /* warm neutrals — never cool grey on a warm field */
    --text-main: #2B241E;
    --text-muted: #7A6E63;
    --text-subtle: #9C9186;
    --text-on-accent: #FFFFFF;
    --text-on-success: #FFFFFF;
    --text-on-danger:  #FFFFFF;
    --text-on-warning: #FFFFFF;
    --text-on-info:    #FFFFFF;
    --border: #E8DFD4;
    --border-strong: #D9CDBE;

    /* semantic — deep, not pastel, so they hold up on the warm field */
    --success: #15803D;
    --warning: #A16207;
    --danger:  #B91C1C;
    --info:    #0E7C7B;
    --success-bg: rgba(21,128,61,0.08);
    --warning-bg: rgba(161,98,7,0.09);
    --danger-bg:  rgba(185,28,28,0.08);
    --info-bg:    rgba(14,124,123,0.08);

    /* glass */
    --glass: rgba(255, 251, 246, 0.66);
    --glass-strong: rgba(255, 252, 248, 0.82);
    --glass-border: rgba(255, 255, 255, 0.7);
    --glass-shadow: 0 8px 32px rgba(120, 72, 30, 0.10), 0 1px 1px rgba(255,255,255,0.5) inset;
    --glass-blur: blur(20px) saturate(160%);

    /* chrome */
    --chip-bg: rgba(255,255,255,0.55);
    --chip-bg-hover: rgba(255,255,255,0.85);
    --pill-hover: #D2E7E5;
    --row-hover: rgba(255,255,255,0.55);
    --row-border: rgba(232,223,212,0.6);
    --shadow-sm: 0 1px 3px rgba(120,72,30,0.10);
    --shadow-md: 0 4px 14px rgba(120,72,30,0.12);
    --shadow-lg: 0 12px 32px rgba(120,72,30,0.16);
    --header-shadow: 0 4px 24px rgba(120,72,30,0.07);
    --sheen-1: rgba(255,255,255,0.35);
    --sheen-2: rgba(255,255,255,0.18);
    --grid-dot: rgba(140,72,40,0.09);
    --sweep-tint: rgba(14,124,123,0.10);
    --overlay: rgba(43,36,30,0.45);

    /* ambient layers */
    --sunburst-opacity: 0.5;
    --blob-opacity: 0.55;
    --lines-opacity: 1;

    /* motion scale — micro / section / ambient. Nothing in between. */
    --t-micro: 150ms;
    --t-section: 250ms;
}

/* ---------- SKIN 2 — Λεβάντα ----------
   The original indigo look. Ambience lives entirely in the page gradient:
   no discrete shapes, so nothing can show an edge over the content. */
[data-theme="indigo"] {
    --primary: #6C63FF;
    --primary-rgb: 108, 99, 255;
    --primary-dark: #5A4FCF;
    --primary-soft: #EEF0FF;
    --glow: rgba(108, 99, 255, 0.38);

    --surface: #FFFFFF;
    --surface-alt: #F4F5FE;
    --page-bg:
        radial-gradient(ellipse 140% 90% at 8% -10%,  rgba(108,99,255,0.13) 0%, transparent 58%),
        radial-gradient(ellipse 130% 85% at 100% 92%, rgba(255,170,120,0.16) 0%, transparent 55%),
        linear-gradient(150deg, #F2F3FF 0%, #F7F5FD 48%, #FDF3EC 100%);

    --text-main: #1A1A2E;
    --text-muted: #6B7280;
    --text-subtle: #9AA1AD;
    --text-on-accent: #FFFFFF;
    --text-on-success: #FFFFFF;
    --text-on-danger:  #FFFFFF;
    --text-on-warning: #FFFFFF;
    --text-on-info:    #FFFFFF;
    --border: #E5E7EB;
    --border-strong: #D3D7DE;

    --success: #15803D;
    --warning: #A16207;
    --danger:  #B91C1C;
    --info:    #6C63FF;
    --success-bg: rgba(21,128,61,0.08);
    --warning-bg: rgba(161,98,7,0.09);
    --danger-bg:  rgba(185,28,28,0.08);
    --info-bg:    rgba(108,99,255,0.08);

    --glass: rgba(255, 255, 255, 0.70);
    --glass-strong: rgba(255, 255, 255, 0.86);
    --glass-border: rgba(255, 255, 255, 0.75);
    --glass-shadow: 0 8px 32px rgba(60, 56, 120, 0.10), 0 1px 1px rgba(255,255,255,0.6) inset;

    --chip-bg: rgba(255,255,255,0.6);
    --chip-bg-hover: rgba(255,255,255,0.9);
    --pill-hover: #E2E4FF;
    --row-hover: rgba(255,255,255,0.6);
    --row-border: rgba(229,231,235,0.7);
    --shadow-sm: 0 1px 3px rgba(60,56,120,0.10);
    --shadow-md: 0 4px 14px rgba(60,56,120,0.12);
    --shadow-lg: 0 12px 32px rgba(60,56,120,0.16);
    --header-shadow: 0 4px 24px rgba(60,56,120,0.07);
    --sheen-1: rgba(255,255,255,0.4);
    --sheen-2: rgba(255,255,255,0.2);
    --grid-dot: rgba(90,79,207,0.08);
    --sweep-tint: rgba(108,99,255,0.10);
    --overlay: rgba(26,26,46,0.45);

    --sunburst-opacity: 0;
    --blob-opacity: 0;
    --lines-opacity: 0;
}
[data-theme="indigo"] .sunburst,
[data-theme="indigo"] .blob,
[data-theme="indigo"] .bg-lines { display: none; }

/* ---------- SKIN 3 — Γραφίτης ----------
   The only neutral skin: chrome carries no hue, so status colour is the
   loudest thing on screen. Amber accent sits close to the usual amber
   warning, so warning is pushed to a yellower gold to stay separable. */
[data-theme="graphite"] {
    --primary: #B45309;
    --primary-rgb: 180, 83, 9;
    --primary-dark: #92400E;
    --primary-soft: #FBF0E4;
    --glow: rgba(180, 83, 9, 0.30);

    --surface: #FFFFFF;
    --surface-alt: #F5F5F4;
    --page-bg: linear-gradient(180deg, #FAFAF9 0%, #F5F5F4 55%, #EFEEEC 100%);

    --text-main: #1C1917;
    --text-muted: #78716C;
    --text-subtle: #A8A29E;
    --text-on-accent: #FFFFFF;
    --text-on-success: #FFFFFF;
    --text-on-danger:  #FFFFFF;
    --text-on-warning: #FFFFFF;
    --text-on-info:    #FFFFFF;
    --border: #E1DFDC;
    --border-strong: #CFCBC7;

    --success: #15803D;
    --warning: #CA8A04;      /* yellower than the #B45309 accent */
    --danger:  #B91C1C;
    --info:    #0F766E;
    --success-bg: rgba(21,128,61,0.07);
    --warning-bg: rgba(202,138,4,0.10);
    --danger-bg:  rgba(185,28,28,0.07);
    --info-bg:    rgba(15,118,110,0.07);

    --glass: #FFFFFF;
    --glass-strong: #FFFFFF;
    --glass-border: #E1DFDC;
    --glass-shadow: 0 1px 2px rgba(28,25,23,0.06), 0 1px 3px rgba(28,25,23,0.05);

    --chip-bg: #FFFFFF;
    --chip-bg-hover: #F5F5F4;
    --pill-hover: #F6E7D6;
    --row-hover: #FAFAF9;
    --row-border: #EFEEEC;
    --shadow-sm: 0 1px 2px rgba(28,25,23,0.07);
    --shadow-md: 0 2px 8px rgba(28,25,23,0.09);
    --shadow-lg: 0 10px 24px rgba(28,25,23,0.13);
    --header-shadow: 0 1px 3px rgba(28,25,23,0.08);
    --sheen-1: transparent;
    --sheen-2: transparent;
    --grid-dot: rgba(120,113,108,0.10);
    --sweep-tint: rgba(180,83,9,0.07);
    --overlay: rgba(28,25,23,0.5);

    --sunburst-opacity: 0;
    --blob-opacity: 0;
    --lines-opacity: 0;
}
[data-theme="graphite"] .sunburst,
[data-theme="graphite"] .blob,
[data-theme="graphite"] .bg-lines { display: none; }
[data-theme="graphite"] .main-header,
[data-theme="graphite"] .glass,
[data-theme="graphite"] .modal-content {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ---------- SKIN 4 — Νυχτερινή Βάρδια ---------- */
[data-theme="dark"] {
    /* tells the UA to render native widgets, scrollbars and
       form controls dark — without it inputs keep black-on-black text */
    color-scheme: dark;

    /* accent lifts: deep petrol loses contrast on a dark field */
    --primary: #2DD4BF;
    --primary-rgb: 45, 212, 191;
    --primary-dark: #14B8A6;
    --primary-soft: rgba(45,212,191,0.14);
    --glow: rgba(45, 212, 191, 0.40);

    --surface: #161D1E;
    --surface-alt: #1B2324;

    /* No discrete shapes: the ambience is baked in as over-sized ellipses
       (>100% wide) so no edge can land inside the viewport. Tints stay in the
       teal family to agree with the accent; one amber note keeps it warm. */
    --page-bg:
        radial-gradient(ellipse 150% 95% at 10% -12%, rgba(45,212,191,0.11) 0%, transparent 58%),
        radial-gradient(ellipse 130% 85% at 95% 4%,   rgba(56,130,150,0.09) 0%, transparent 52%),
        radial-gradient(ellipse 120% 80% at 88% 105%, rgba(196,132,58,0.07) 0%, transparent 55%),
        radial-gradient(ellipse 110% 75% at 30% 108%, rgba(20,90,88,0.10)  0%, transparent 60%),
        linear-gradient(180deg, #131C1D 0%, #0F1718 45%, #0A1112 100%);

    /* muted carries every small uppercase label — needs real contrast, not
       a dim grey. #B5AEA4 lands ~8.7:1 on the darkest part of the field. */
    --text-main: #EDE9E3;
    --text-muted: #B5AEA4;
    --text-subtle: #948D84;
    --text-on-accent: #06282A;   /* white on #2DD4BF is 1.86:1 — unusable */
    --text-on-success: #062A15;
    --text-on-danger:  #2C0707;
    --text-on-warning: #2A1D02;
    --text-on-info:    #06282A;
    --border: rgba(255,255,255,0.14);
    --border-strong: rgba(255,255,255,0.22);

    --success: #4ADE80;
    --warning: #FBBF24;
    --danger:  #F87171;
    --info:    #2DD4BF;
    --success-bg: rgba(74,222,128,0.12);
    --warning-bg: rgba(251,191,36,0.12);
    --danger-bg:  rgba(248,113,113,0.12);
    --info-bg:    rgba(45,212,191,0.12);

    --glass: rgba(255, 255, 255, 0.06);
    --glass-strong: rgba(255, 255, 255, 0.11);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.06) inset;

    --chip-bg: rgba(255,255,255,0.07);
    --chip-bg-hover: rgba(255,255,255,0.14);
    --pill-hover: rgba(45,212,191,0.16);
    --row-hover: rgba(255,255,255,0.05);
    --row-border: rgba(255,255,255,0.07);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
    --shadow-lg: 0 12px 36px rgba(0,0,0,0.6);
    --header-shadow: 0 4px 28px rgba(0,0,0,0.5);
    --sheen-1: rgba(255,255,255,0.07);
    --sheen-2: rgba(255,255,255,0.03);
    --grid-dot: rgba(170,220,215,0.06);
    --sweep-tint: rgba(45,212,191,0.10);
    --overlay: rgba(0,0,0,0.65);

    --sunburst-opacity: 0;
    --blob-opacity: 0;
    --lines-opacity: 0.30;
}

/* ---------- SKIN 5 — Καθαρός Θάλαμος ---------- */
[data-theme="clean"] {
    --primary: #0F766E;
    --primary-rgb: 15, 118, 110;
    --primary-dark: #115E56;
    --primary-soft: #E6F2F1;
    --glow: rgba(15, 118, 110, 0.28);

    --surface: #FFFFFF;
    --surface-alt: #F1F5F9;
    --page-bg: linear-gradient(180deg, #F7F8FA 0%, #EEF1F5 100%);

    --text-main: #0F172A;
    --text-muted: #64748B;
    --text-subtle: #94A3B8;
    --text-on-accent: #FFFFFF;
    --text-on-success: #FFFFFF;
    --text-on-danger:  #FFFFFF;
    --text-on-warning: #FFFFFF;
    --text-on-info:    #FFFFFF;
    --border: #D8DEE6;
    --border-strong: #C3CCD8;

    --success: #15803D;
    --warning: #B45309;
    --danger:  #B91C1C;
    --info:    #0F766E;
    --success-bg: rgba(21,128,61,0.07);
    --warning-bg: rgba(180,83,9,0.08);
    --danger-bg:  rgba(185,28,28,0.07);
    --info-bg:    rgba(15,118,110,0.07);

    /* solid surfaces — no translucency, no blur */
    --glass: #FFFFFF;
    --glass-strong: #FFFFFF;
    --glass-border: #D8DEE6;
    --glass-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);

    --chip-bg: #FFFFFF;
    --chip-bg-hover: #F1F5F9;
    --pill-hover: #DCEAE8;
    --row-hover: #F8FAFC;
    --row-border: #EDF1F5;
    --shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
    --shadow-md: 0 2px 8px rgba(15,23,42,0.08);
    --shadow-lg: 0 10px 24px rgba(15,23,42,0.12);
    --header-shadow: 0 1px 3px rgba(15,23,42,0.07);
    --sheen-1: transparent;
    --sheen-2: transparent;
    --grid-dot: rgba(100,116,139,0.10);
    --sweep-tint: rgba(15,118,110,0.07);
    --overlay: rgba(15,23,42,0.5);

    --sunburst-opacity: 0;
    --blob-opacity: 0;
    --lines-opacity: 0;
}

/* Clean skin drops the compositing work outright — blur(0) still costs a
   layer, so the filter is removed rather than zeroed. */
[data-theme="clean"] .main-header,
[data-theme="clean"] .glass,
[data-theme="clean"] .modal-content {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
[data-theme="clean"] .bg-scene { display: none; }

/* ============================================================
   Ambient background scene (skin-driven)
   ============================================================ */
.bg-scene {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.bg-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, black 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, black 0%, transparent 75%);
    opacity: 0.6;
}

/* Warm-skin hero: contained to the top-left corner and faded well before the
   content column, so nothing ever reads on top of a saturated band. */
.sunburst {
    position: absolute;
    top: -420px;
    left: -400px;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    background: conic-gradient(from 210deg at 50% 50%,
        #D9491F 0deg,   #F2894B 18deg,  #F7B27A 34deg,  #FBD9B8 50deg,
        #F7B27A 66deg,  #F2894B 82deg,  #D9491F 98deg,  #F2894B 114deg,
        #F7B27A 130deg, #FBD9B8 146deg, #F7B27A 162deg, #F2894B 178deg,
        #D9491F 194deg, #F2894B 210deg, #F7B27A 226deg, #FBD9B8 242deg,
        #F7B27A 258deg, #F2894B 274deg, #D9491F 290deg, #F2894B 306deg,
        #F7B27A 322deg, #FBD9B8 338deg, #D9491F 360deg);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 0%, black 38%, transparent 66%);
    mask-image: radial-gradient(circle at 50% 50%, black 0%, black 38%, transparent 66%);
    opacity: var(--sunburst-opacity);
    filter: blur(3px);
    animation: sunburstDrift 100s linear infinite;
    will-change: transform;
}
@keyframes sunburstDrift {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Ambient motion budget = ONE slow element. Perpetual background motion
   becomes noise in a tool someone stares at all day — and costs CPU. */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: var(--blob-opacity);
}
.blob-2 { width: 500px; height: 500px; top: 10%; right: -180px;
    background: radial-gradient(circle, rgba(255,160,110,0.34) 0%, rgba(255,160,110,0) 70%); }
.blob-3 { width: 480px; height: 480px; bottom: -180px; left: 18%;
    background: radial-gradient(circle, rgba(235,158,140,0.28) 0%, rgba(235,158,140,0) 70%); }
.blob-4 { width: 420px; height: 420px; bottom: 2%; right: 4%;
    background: radial-gradient(circle, rgba(255,178,102,0.38) 0%, rgba(255,178,102,0) 70%); }
.blob-6 { width: 300px; height: 300px; top: 55%; right: 30%;
    background: radial-gradient(circle, rgba(255,200,140,0.22) 0%, rgba(255,200,140,0) 70%); }

.bg-lines { position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: var(--lines-opacity); }
.bg-lines svg { width: 100%; height: 100%; display: block; }

/* A pale conic disc goes grey rather than luminous on near-black, and its mask
   leaves a visible rim; the page gradient carries the depth in dark instead.
   The orbit rings are circles too and read as stray hoops once it's gone. */
[data-theme="dark"] .sunburst,
[data-theme="dark"] .blob,
[data-theme="dark"] .bg-lines .ring-slow,
[data-theme="dark"] .bg-lines .ring-slow-rev,
[data-theme="dark"] .bg-lines .node { display: none; }

@media (prefers-reduced-motion: reduce) {
    .sunburst { animation: none !important; }
}

/* ============================================================
   Low-cost mode — phones, touch devices, reduced-motion

   The warm skin's ambience costs GPU work on every frame:
   four 90px blurs, a rotating 900px conic gradient, and a
   backdrop-filter behind each surface. On the phones used for
   the scanner flow that is continuous compositing for decoration.

   The look is kept by baking the same glow into plain radial
   gradients — painted once, no filter, no animation — and by
   making surfaces opaque so nothing needs a backdrop pass.
   ============================================================ */
@media (max-width: 900px), (pointer: coarse) {
    /* every skin drops the backdrop pass */
    :root, [data-theme] { --glass-blur: none; }

    /* :not() is load-bearing here. `:root` and `[data-theme="x"]` share
       specificity (0,1,0) and this block sits after the skin blocks, so a bare
       `:root` would override every skin's --page-bg while leaving its text
       colours alone — dark skin would render near-white text on cream. */
    :root:not([data-theme]) {
        /* approximates the sunburst + blobs with no filter and no animation */
        --page-bg:
            radial-gradient(ellipse 120% 80% at 4% -6%,   rgba(242,137,75,0.20)  0%, transparent 55%),
            radial-gradient(ellipse 100% 70% at 100% 14%, rgba(255,160,110,0.15) 0%, transparent 50%),
            radial-gradient(ellipse 110% 75% at 92% 100%, rgba(255,178,102,0.17) 0%, transparent 55%),
            linear-gradient(160deg, #FAF6F0 0%, #F8F1E8 45%, #F5EDE3 100%);

        /* opaque: without a backdrop pass, translucent surfaces look washed out */
        --glass: #FFFCF8;
        --glass-strong: #FFFFFF;
        --chip-bg: #FFFFFF;
        --chip-bg-hover: #F7F2EA;
        --row-hover: #FBF7F1;
    }
    [data-theme="dark"] {
        --glass: #161D1E;
        --glass-strong: #1B2324;
        --chip-bg: #1B2324;
        --chip-bg-hover: #232C2D;
        --row-hover: #1B2324;
    }
    [data-theme="indigo"] {
        --glass: #FFFFFF;
        --glass-strong: #FFFFFF;
        --chip-bg: #FFFFFF;
        --chip-bg-hover: #F4F5FE;
        --row-hover: #F8F9FF;
    }

    /* the expensive layers themselves */
    .sunburst,
    .blob,
    .bg-lines { display: none !important; }

    .main-header,
    .sub-nav-wrap,
    .glass,
    .modal-content,
    .theme-menu {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* A backgrounded tab still burns cycles on a running transform in some
   engines. Explicitly park it rather than trusting throttling. */
html.z-hidden .sunburst { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .sunburst, .blob { animation: none !important; }
}

/* ============================================================
   Print — paper is always white, whatever skin is on screen.
   Without this, printing under the dark skin puts #EDE9E3 text
   on white paper: a near-blank page.
   ============================================================ */
@media print {
    :root, [data-theme] {
        --page-bg: #FFFFFF;
        --surface: #FFFFFF;
        --surface-alt: #F5F5F5;
        --text-main: #000000;
        --text-muted: #333333;
        --text-subtle: #555555;
        --text-on-accent: #FFFFFF;
        --border: #999999;
        --border-strong: #666666;
        --glass: #FFFFFF;
        --glass-strong: #FFFFFF;
        --glass-border: #999999;
        --glass-shadow: none;
        --glass-blur: none;
        --chip-bg: #FFFFFF;
        --row-hover: transparent;
        --row-border: #CCCCCC;
        --shadow-sm: none;
        --shadow-md: none;
        --shadow-lg: none;
        --header-shadow: none;
        --sunburst-opacity: 0;
        --blob-opacity: 0;
        --lines-opacity: 0;
    }
    .bg-scene, .theme-picker { display: none !important; }
    .main-header, .glass, .modal-content {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ============================================================
   Theme picker — a named dropdown. Five skins is past the point
   where icon-only buttons stay self-explanatory.
   ============================================================ */
.theme-picker { position: relative; }

.theme-picker-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.5rem 0.32rem 0.4rem;
    border-radius: 20px;
    background: var(--chip-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--t-micro) ease, color var(--t-micro) ease;
}
.theme-picker-btn:hover { background: var(--chip-bg-hover); color: var(--text-main); }
.theme-picker-btn .chev {
    width: 13px; height: 13px;
    transition: transform var(--t-micro) ease;
}
.theme-picker-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

.theme-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    flex-shrink: 0;
    display: block;
}
.theme-swatch[data-skin="warm"]     { background: linear-gradient(135deg, #F8F1E8 50%, #0E7C7B 50%); }
.theme-swatch[data-skin="indigo"]   { background: linear-gradient(135deg, #F2F3FF 50%, #6C63FF 50%); }
.theme-swatch[data-skin="graphite"] { background: linear-gradient(135deg, #F5F5F4 50%, #B45309 50%); }
.theme-swatch[data-skin="dark"]     { background: linear-gradient(135deg, #131C1D 50%, #2DD4BF 50%); }
.theme-swatch[data-skin="clean"]    { background: linear-gradient(135deg, #F7F8FA 50%, #0F766E 50%); }

.theme-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    padding: 0.35rem;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity var(--t-micro) ease, transform var(--t-micro) ease;
    z-index: 9000;
}
.theme-menu.open { opacity: 1; transform: none; pointer-events: auto; }

.theme-menu button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: none;
    background: none;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-main);
    cursor: pointer;
    text-align: left;
    transition: background var(--t-micro) ease;
}
.theme-menu button:hover { background: var(--pill-hover); }
.theme-menu button[aria-checked="true"] {
    background: var(--primary-soft);
    font-weight: 600;
    color: var(--primary-dark);
}

/* ============================================================
   Shared icon sizing (SVG sprite replaces emoji)
   ============================================================ */
.icon {
    width: 1.05em;
    height: 1.05em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.18em;
    flex-shrink: 0;
}

/* ============================================================
   Semantic status pills
   ============================================================ */
.status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    border: 1px solid currentColor;
}
.status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.status-ok     { color: var(--success); background: var(--success-bg); }
.status-warn   { color: var(--warning); background: var(--warning-bg); }
.status-danger { color: var(--danger);  background: var(--danger-bg); }
.status-info   { color: var(--info);    background: var(--info-bg); }