/* ==========================================================================
   TERASCAN — LIGHT THEME
   ==========================================================================

   WHAT THIS FILE IS
   The console's design system (Spatial Cobalt, and the Aurora layer over it)
   was written for one theme: a near-black canvas with carved panels, top
   edge-light and cobalt glow. This file is the daylight counterpart of exactly
   that system — the same layout, the same rhythm, the same components, lit from
   the other side.

   WHY IT IS ADDITIVE AND NOT A REWRITE
   Every rule here is scoped under html[data-theme="light"]. Nothing in the dark
   theme is touched, so the theme an operator has been looking at since 2.7.0 is
   byte-for-byte the theme they keep. A light theme that risks regressing the
   dark one is not a feature, it is a trade.

   THE THREE TRANSLATIONS THAT DO THE WORK
   1. Elevation inverts. On black, a raised surface is a white film and a top
      edge-light. On white, a white film is invisible — so a raised surface is a
      real hairline border and a soft, neutral, downward shadow instead.
   2. Glow becomes shadow. A coloured bloom on black reads as light; the same
      bloom on white reads as a smudge. Every glow is either dropped or replaced
      by a tinted shadow of the same hue.
   3. Status colour flips end of scale. #A7F3D0 on black is a legible mint;
      on white it is nearly invisible. The pale-on-dark palette becomes a
      saturated-on-light one, every value picked to clear 4.5:1 on --surface.

   WHAT IS NOT TRANSLATED
   The gradient-filled icon tiles, the primary button and the brand lockups keep
   white glyphs on a saturated fill in both themes — they are the one place the
   contrast direction does not change, and reversing them would break the
   product's only continuous visual signature.

   The `!important`s here are not carelessness. They match an `!important` in
   the Aurora layer one-for-one; where the base rule has none, neither does this
   file. Selectors that reach an ID-scoped rule repeat the ID for the same
   reason — specificity, not emphasis.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
html[data-theme="light"] {
  color-scheme: light;

  /* --- canvas and surfaces ------------------------------------------------
     Cool, slightly blue greys. A pure #FFF page under fluorescent plant
     lighting is glare; the page is tinted and only the cards are white, which
     is also what gives the layout its structure without a single divider. */
  --bg: #EEF2F8;
  --bg-2: #E6EBF4;
  --surface: #FFFFFF;
  --surface-2: #F5F8FC;
  --surface-3: #E8EEF7;
  --panel-hi: rgba(15, 23, 42, .07);
  --border: rgba(15, 23, 42, .10);
  --border-strong: rgba(15, 23, 42, .17);

  /* --- ink: every step measured against --surface -------------------------
     ink-1 16.1:1 · ink 12.6:1 · ink-2 7.4:1 · ink-3 4.8:1. ink-3 carries
     captions, axis labels and table headers, so it is the one that had to
     clear AA rather than merely look quiet. */
  --ink-1: #0F172A;
  --ink: #1E293B;
  --ink-2: #475569;
  --ink-3: #64748B;

  /* --- brand ---------------------------------------------------------------
     --brand is unchanged: #4073b6 carries white text at 4.8:1, so the filled
     button is the same colour in both themes. --brand-2 is the accent used as
     *text* and as an icon stroke on light surfaces, and the dark theme's value
     (#6098e0, 2.9:1 on white) could not be. */
  --brand: #4073b6;
  --brand-2: #2C6FB5;
  --brand-strong: #35608F;
  --brand-deep: #1E4A7A;
  --brand-tint: rgba(64, 115, 182, .10);
  --brand-glow: rgba(64, 115, 182, .30);

  /* --- status ------------------------------------------------------------- */
  --mint: #047857;
  --mint-dim: rgba(5, 150, 105, .11);
  --ochre: #B45309;
  --ochre-dim: rgba(217, 119, 6, .12);
  --coral: #BE123C;
  --coral-dim: rgba(225, 29, 72, .10);
  --emerald: #047857;
  --emerald-tint: var(--mint-dim);
  --rose: #BE123C;
  --rose-tint: var(--coral-dim);
  --amber: #B45309;
  --amber-tint: var(--ochre-dim);
  --cobalt: #1D4ED8;
  --cobalt-tint: rgba(29, 78, 216, .10);
  --slate: #475569;
  --slate-tint: rgba(15, 23, 42, .05);

  /* --- the Aurora hue set -------------------------------------------------
     These are read as text colour in the intelligence, vulnerability and
     transfer panels, so they are the AA-on-white members of each family, not
     the 300-weight ones the dark theme uses. */
  --violet: #6D28D9;
  --violet-2: #7C3AED;
  --violet-glow: rgba(109, 40, 217, .22);
  --cyan: #0E7490;
  --cyan-2: #0891B2;
  --cyan-glow: rgba(14, 116, 144, .22);
  --teal: #0F766E;
  --teal-glow: rgba(15, 118, 110, .22);
  --magenta: #BE185D;
  --magenta-glow: rgba(190, 24, 93, .22);
  --gold: #B45309;
  --gold-glow: rgba(180, 83, 9, .22);
  --lime: #4D7C0F;
  --lime-glow: rgba(77, 124, 15, .22);
  --accent-cyan: #0E7490;
  --accent-cyan-glow: rgba(14, 116, 144, .28);
  --glow-mint: rgba(5, 150, 105, .22);
  --glow-amber: rgba(217, 119, 6, .22);
  --glow-coral: rgba(225, 29, 72, .24);

  /* --- gradients ----------------------------------------------------------
     Deepened so white glyphs still clear AA on the lightest stop. The angles
     and the hue order are the dark theme's, unchanged: the icon tiles are the
     one thing an operator switching themes should recognise instantly. */
  --grad-brand: linear-gradient(135deg, #35608F 0%, #2F7FC4 45%, #0E9EC4 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(53, 96, 143, .95), rgba(14, 158, 196, .9));
  --grad-aurora: linear-gradient(120deg, #6D28D9 0%, #2F6FB5 40%, #0E8FB8 75%, #0F766E 100%);
  --grad-violet: linear-gradient(135deg, #6D28D9, #8B5CF6);
  --grad-cyan: linear-gradient(135deg, #0891B2, #0E7490);
  --grad-teal: linear-gradient(135deg, #0D9488, #0891B2);
  --grad-rose: linear-gradient(135deg, #E11D48, #DB2777);
  --grad-gold: linear-gradient(135deg, #D97706, #EA580C);
  --grad-emerald: linear-gradient(135deg, #059669, #65A30D);

  /* --- elevation ----------------------------------------------------------
     Neutral-cool rather than pure black: a grey shadow on a blue-grey page
     looks dirty. Two layers each — a tight contact shadow that separates the
     card from the page, and a wide soft one that gives it height. */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px -14px rgba(15, 23, 42, .22);
  --shadow-lg: 0 2px 6px rgba(15, 23, 42, .06), 0 28px 64px -28px rgba(15, 23, 42, .30);
  --elev-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --elev-2: 0 2px 6px rgba(15, 23, 42, .07), 0 16px 34px -20px rgba(15, 23, 42, .24);
  --elev-3: 0 2px 8px rgba(15, 23, 42, .07), 0 34px 84px -34px rgba(15, 23, 42, .32);
  --glass: saturate(1.15) blur(18px);

  /* --- CDR drawer ---------------------------------------------------------- */
  --cdr-bg: #F6F9FD;
  --cdr-glass: rgba(255, 255, 255, .82);
  --cdr-line: rgba(15, 23, 42, .09);
  --cdr-line-2: rgba(15, 23, 42, .15);
  --cdr-cobalt: #0E7490;
  --cdr-emerald: #047857;
  --cdr-amber: #B45309;
  --cdr-cobalt-glow: rgba(14, 116, 144, .28);
  --cdr-emerald-glow: rgba(5, 150, 105, .28);
  --cdr-amber-glow: rgba(217, 119, 6, .30);

  /* --- the inverted set ---------------------------------------------------
     These are declared with their dark values in index.html's :root, so the
     console renders correctly even if this file never loads. Here is the other
     half of each one. */
  --tint-1: rgba(15, 23, 42, .022);   /* faintest raised fill */
  --tint-2: rgba(15, 23, 42, .04);    /* hover fill */
  --tint-3: rgba(15, 23, 42, .07);    /* pressed / track fill */
  --sunken: rgba(15, 23, 42, .035);   /* the inside of an expanded row */
  --scrim: rgba(15, 23, 42, .34);     /* behind a drawer or a modal */
  --sheen: transparent;               /* the top edge-light, which daylight has not got */
  --chart-grid: rgba(15, 23, 42, .10);
  --chart-empty: rgba(15, 23, 42, .05);
  --chart-shadow: rgba(15, 23, 42, .18);
  --tile-shadow: rgba(15, 23, 42, .38);
  --series-1: #6D28D9;
  --series-2: #0891B2;
  --series-3: #0F766E;
  --series-glow: rgba(8, 145, 178, .26);
  --heading-grad: linear-gradient(90deg, #0F172A, #33507D);
  --value-grad: linear-gradient(180deg, #0F172A, #33507D);
}

/* The 240ms cross-fade, armed by theme.js only for the duration of a switch.
   Deliberately narrow: colour properties only, never transform or opacity, so
   nothing that is mid-animation gets dragged into it. */
html.theme-switching,
html.theme-switching body,
html.theme-switching *:not(svg):not(svg *) {
  transition: background-color .24s ease, border-color .24s ease, color .24s ease,
              box-shadow .24s ease, fill .24s ease, stroke .24s ease !important;
}

/* ==========================================================================
   2. FOUNDATION
   ========================================================================== */
html[data-theme="light"] body {
  background:
    radial-gradient(900px 500px at 88% -8%, rgba(64, 115, 182, .07), transparent 60%),
    radial-gradient(1100px 700px at 8% 108%, rgba(64, 115, 182, .05), transparent 55%),
    var(--bg);
}

/* The ambient mesh. Same four blooms, a third of the strength: on white these
   are a wash behind the content, not a light source in front of it. */
html[data-theme="light"] body::before {
  background:
    radial-gradient(42% 42% at 8% -5%, rgba(109, 40, 217, .07), transparent 60%),
    radial-gradient(38% 40% at 98% 4%, rgba(14, 116, 144, .06), transparent 58%),
    radial-gradient(40% 45% at 72% 108%, rgba(15, 118, 110, .05), transparent 60%),
    radial-gradient(35% 40% at 20% 115%, rgba(190, 24, 93, .04), transparent 60%) !important;
}
html[data-theme="light"] body::after { opacity: .015; }

html[data-theme="light"] ::selection { background: rgba(64, 115, 182, .20); color: var(--ink-1); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .16); }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, .28); }

/* ==========================================================================
   3. PRIMITIVES
   ========================================================================== */

/* Carved becomes bordered. The dark card is a white film over --surface with a
   lit top edge; the light card is plain white with a hairline, and the whole
   sense of depth moves into the shadow. */
html[data-theme="light"] .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  box-shadow: var(--elev-1);
}
html[data-theme="light"] .card:hover { border-color: var(--border-strong); }
html[data-theme="light"] .card.elev,
html[data-theme="light"] .elev { box-shadow: var(--elev-3); }
html[data-theme="light"] .panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  box-shadow: none;
}
html[data-theme="light"] .chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  color: var(--ink-2);
}

/* Buttons. The primary keeps the Aurora fill and white text in both themes —
   it is the one element that must look identical, because it is what an
   operator's eye finds on an unfamiliar screen. */
html[data-theme="light"] .btn-primary {
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 8px 20px -12px var(--brand-glow), 0 1px 2px rgba(15, 23, 42, .12);
}
html[data-theme="light"] .btn-primary:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 14px 30px -14px var(--brand-glow), 0 2px 6px rgba(15, 23, 42, .14);
}
html[data-theme="light"] .btn-ghost {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
html[data-theme="light"] .btn-ghost:hover {
  background: var(--surface-2);
  color: var(--ink-1);
  border-color: var(--brand);
}
html[data-theme="light"] .btn-danger {
  background: var(--coral-dim);
  border: 1px solid rgba(225, 29, 72, .30);
  color: var(--coral);
}
html[data-theme="light"] .btn-danger:hover { background: rgba(225, 29, 72, .16); }
html[data-theme="light"] .icon-btn { color: var(--ink-2); }
html[data-theme="light"] .icon-btn:hover { background: var(--tint-2); color: var(--brand-2); }

/* Fields */
html[data-theme="light"] .field {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--ink-1);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
}
html[data-theme="light"] .field:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
html[data-theme="light"] select.field option { background: #fff; color: var(--ink-1); }
html[data-theme="light"] .btn:focus-visible,
html[data-theme="light"] .icon-btn:focus-visible,
html[data-theme="light"] .field:focus-visible,
html[data-theme="light"] .field:focus,
html[data-theme="light"] .navlink:focus-visible,
html[data-theme="light"] .pgn:focus-visible {
  box-shadow: 0 0 0 3px var(--brand-tint), 0 0 0 1px var(--brand);
}

/* Status tokens. The tint carries the meaning at a glance and the text carries
   it on inspection, so both had to move: a .12-alpha wash reads on white, the
   300-weight text on it does not. */
html[data-theme="light"] .badge { border-top: 1px solid transparent; }
html[data-theme="light"] .b-clean { background: var(--mint-dim); color: #047857; box-shadow: none; }
html[data-theme="light"] .b-clean .dot { background: #059669; box-shadow: none; }
html[data-theme="light"] .b-mal { background: var(--coral-dim); color: #BE123C; box-shadow: none; }
html[data-theme="light"] .b-mal .dot { background: #E11D48; box-shadow: none; }
html[data-theme="light"] .b-susp { background: var(--ochre-dim); color: #B45309; box-shadow: none; }
html[data-theme="light"] .b-susp .dot { background: #D97706; box-shadow: none; }
html[data-theme="light"] .b-queue { background: var(--brand-tint); color: var(--brand-deep); }
html[data-theme="light"] .b-queue .dot { background: var(--brand); box-shadow: none; }
html[data-theme="light"] .b-err { background: var(--ochre-dim); color: #B45309; }
html[data-theme="light"] .b-err .dot { background: #D97706; }
html[data-theme="light"] .b-rej { background: var(--slate-tint); color: var(--ink-2); }
html[data-theme="light"] .b-rej .dot { background: var(--ink-3); }
html[data-theme="light"] tr:hover .b-mal { box-shadow: 0 0 0 1px rgba(225, 29, 72, .22); }

html[data-theme="light"] .skel { background: var(--surface-3); }
html[data-theme="light"] .skel::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
}

/* ==========================================================================
   4. APP SHELL
   ========================================================================== */
html[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, #FFFFFF, #F7F9FD);
  border-right: 1px solid var(--border);
  box-shadow: 1px 0 0 rgba(15, 23, 42, .04);
}
/* The mark carries its own block and radius, so it needs no plate behind it on
   either ground. What does change with the theme is which artwork is shown:
   the reverse file is drawn for #05070B and its cyan half loses contrast on
   white, so light swaps to the positive file. */
html[data-theme="light"] .brandmark--dark { display: none; }
html[data-theme="light"] .brandmark--light { display: block; }
html[data-theme="light"] .brandmark.fallback { background: var(--brand-deep); border-color: var(--brand-deep); }
html[data-theme="light"] .navlink { color: var(--ink-2); }
html[data-theme="light"] .navlink svg { color: var(--ink-3); }
html[data-theme="light"] .navlink:hover { background: var(--tint-2); color: var(--ink-1); }
html[data-theme="light"] .navlink:hover svg { color: var(--brand-2); }
html[data-theme="light"] .navlink.active {
  background: linear-gradient(90deg, var(--brand-tint), transparent);
  color: var(--brand-deep);
  box-shadow: inset 0 0 0 1px rgba(64, 115, 182, .18);
}
html[data-theme="light"] .navlink.active svg { color: var(--brand); }
html[data-theme="light"] .usercard {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
}
html[data-theme="light"] .avatar { box-shadow: 0 4px 12px -6px var(--brand-glow); }

html[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, .82);
  border-bottom: 1px solid var(--border);
}
html[data-theme="light"] .hpill {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-2);
}
html[data-theme="light"] .hpill:hover { box-shadow: 0 6px 16px -12px var(--brand-glow); }
html[data-theme="light"] .appfoot {
  background: rgba(255, 255, 255, .92);
  border-top: 1px solid var(--border);
  color: var(--ink-3);
}
html[data-theme="light"] .af-eng b { color: var(--ink-2); }
html[data-theme="light"] #sysStrip {
  background: rgba(255, 255, 255, .88);
  border-top: 1px solid var(--border);
}
html[data-theme="light"] .sd-ok { background: #059669; box-shadow: none; }
html[data-theme="light"] .sd-bad { background: #E11D48; box-shadow: none; }
html[data-theme="light"] .sys-item .sv { color: var(--ink-1); }
html[data-theme="light"] .sb-overlay.open { background: var(--scrim); }

html[data-theme="light"] .cmdk-trigger {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--ink-3);
}
html[data-theme="light"] .cmdk-trigger:hover { color: var(--ink-1); border-color: var(--brand); }
html[data-theme="light"] .cmdk-trigger kbd,
html[data-theme="light"] .cmdk-hint kbd {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--ink-2);
}

/* ==========================================================================
   5. HEADINGS AND GRADIENT TEXT
   The Aurora layer paints headings, KPI values and the login headline with a
   gradient clipped to the glyphs. Every one of those gradients ran white to
   pale blue, which on a white card is white text on white.
   ========================================================================== */
/* background-image, never the `background` shorthand: the shorthand resets
   background-clip to border-box, and an element whose text is transparent
   because it is clipped to the gradient then paints as a solid filled bar with
   no text in it at all. Each rule restates the clip for the same reason. */
html[data-theme="light"] .section-title h2,
html[data-theme="light"] .dw-head h3,
html[data-theme="light"] .cdr-title {
  background-image: var(--heading-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .kpi .k-val {
  background-image: var(--value-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .chart-card .cc-big,
html[data-theme="light"] .eyebrow {
  background-image: var(--grad-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   6. KPI BENTO
   ========================================================================== */
html[data-theme="light"] .kpi:hover { box-shadow: var(--elev-2); }
html[data-theme="light"] .kpi::after {
  background: radial-gradient(120% 80% at 100% 0%, rgba(14, 116, 144, .05), transparent 60%);
}
html[data-theme="light"] .kpi .k-ico {
  box-shadow: 0 6px 16px -10px rgba(15, 23, 42, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
}
/* The per-card hue wash. Held at .07 rather than .16: on a white card the same
   alpha reads as a colour cast over the number rather than a corner accent. */
html[data-theme="light"] #kpis .kpi:nth-child(1) { --kpi-tint: rgba(109, 40, 217, .07); }
html[data-theme="light"] #kpis .kpi:nth-child(2) { --kpi-tint: rgba(5, 150, 105, .08); }
html[data-theme="light"] #kpis .kpi:nth-child(3) { --kpi-tint: rgba(217, 119, 6, .08); }
html[data-theme="light"] #kpis .kpi:nth-child(4) { --kpi-tint: rgba(190, 24, 93, .07); }
html[data-theme="light"] #kpis .kpi:nth-child(5) { --kpi-tint: rgba(14, 116, 144, .07); }
html[data-theme="light"] #kpis .kpi::before,
html[data-theme="light"] #repKpis .kpi::before {
  background: radial-gradient(120% 90% at 0% 0%, var(--kpi-tint, rgba(64, 115, 182, .07)), transparent 65%);
}
html[data-theme="light"] .kpi-warn { border-color: rgba(225, 29, 72, .45) !important; }
/* The quarantine tile opts out of the clipped gradient: it is one colour, and
   it is the colour of the problem. */
html[data-theme="light"] .kpi-warn .k-val {
  background-image: none;
  -webkit-text-fill-color: var(--coral);
  color: var(--coral);
}

/* ==========================================================================
   7. UPLOAD AND PIPELINE
   ========================================================================== */
html[data-theme="light"] .dropzone {
  background: var(--surface-2);
  border: 1.5px dashed var(--border-strong);
}
html[data-theme="light"] .dropzone.drag {
  border-color: var(--brand);
  background: var(--brand-tint);
  box-shadow: inset 0 0 0 1px var(--brand);
}
html[data-theme="light"] .dz-ico { background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
html[data-theme="light"] .up-right { background: var(--surface-2); border-left-color: var(--border); }
html[data-theme="light"] .up-fact b { color: var(--ink-1); }

html[data-theme="light"] .stage .node {
  background: #fff;
  border: 1.5px solid var(--border-strong);
  color: var(--ink-3);
}
html[data-theme="light"] .stage::before,
html[data-theme="light"] .stage::after { background: var(--border-strong); }
html[data-theme="light"] .stage.done .node { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: none; }
html[data-theme="light"] .stage.active .node {
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-tint);
  animation: none;
}
html[data-theme="light"] .stage.active .lbl { color: var(--brand-deep); }
html[data-theme="light"] .stage.fail .node { background: var(--coral); border-color: var(--coral); color: #fff; box-shadow: none; }
html[data-theme="light"] .pl-progress { background: var(--surface-3); }
html[data-theme="light"] .pl-progress > i { box-shadow: none; }
html[data-theme="light"] .pl-progress::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
}
html[data-theme="light"] .pl-ftype,
html[data-theme="light"] .ftype-badge {
  background: var(--surface-2);
  border: 1px solid var(--border);
}
html[data-theme="light"] .engine-mini {
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: none;
}

/* ==========================================================================
   8. TABLES
   The dark grid dims every row but the hovered one. That reads as focus on
   black and as a fault on white, so the dimming is much softer here and the
   hovered row gains a tinted band instead.
   ========================================================================== */
html[data-theme="light"] .tbl thead th { background: var(--surface); color: var(--ink-3); border-bottom: 1px solid var(--border); }
html[data-theme="light"] .tbl tbody td { border-bottom: 1px solid var(--border); color: var(--ink-2); }
html[data-theme="light"] .tbl tbody:hover tr { opacity: .62; }
html[data-theme="light"] .tbl tbody tr:hover {
  opacity: 1;
  background: linear-gradient(90deg, var(--brand-tint), transparent);
  box-shadow: 0 1px 0 var(--border);
}
html[data-theme="light"] .tbl tbody tr:hover td { color: var(--ink-1); }
html[data-theme="light"] .tbl tbody tr:hover .fname { color: var(--brand-deep); }
html[data-theme="light"] .fname { color: var(--ink-1); }

html[data-theme="light"] .tabs { background: var(--surface-2); border: 1px solid var(--border); }
html[data-theme="light"] .tab { color: var(--ink-2); }
html[data-theme="light"] .tab.active { color: #fff; box-shadow: 0 4px 12px -8px var(--brand-glow); }
html[data-theme="light"] .pgn {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--ink-2);
}
html[data-theme="light"] .pgn:hover:not([disabled]):not(.active) {
  background: var(--surface-2);
  color: var(--ink-1);
  border-color: var(--brand);
}
html[data-theme="light"] .pgn.active { color: #fff; border-color: transparent; box-shadow: 0 6px 14px -8px var(--brand-glow); }
html[data-theme="light"] .empty .e-ico { background: var(--surface-2); border: 1px solid var(--border); }

/* ==========================================================================
   9. DRAWER, MODAL, PALETTE, TOAST
   ========================================================================== */
html[data-theme="light"] .drawer-bg,
html[data-theme="light"] .cdr-bg,
html[data-theme="light"] .modal-bg,
html[data-theme="light"] .ui-dialog-bg,
html[data-theme="light"] .cmdk-bg { background: var(--scrim); }

html[data-theme="light"] .drawer {
  background: var(--surface);
  box-shadow: -30px 0 90px -30px rgba(15, 23, 42, .35), inset 1px 0 0 var(--border);
}
html[data-theme="light"] .dw-head { border-bottom: 1px solid var(--border); }
html[data-theme="light"] .kv dd { color: var(--ink-1); }
html[data-theme="light"] .copybtn { color: var(--ink-3); }
html[data-theme="light"] .copybtn:hover { color: var(--brand-2); }
html[data-theme="light"] .copybtn.ok { color: var(--mint); }

html[data-theme="light"] .modal,
html[data-theme="light"] .ui-dialog,
html[data-theme="light"] .cmdk,
html[data-theme="light"] .notif-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--elev-3);
}
html[data-theme="light"] .cmdk input { color: var(--ink-1); border-bottom: 1px solid var(--border); }
html[data-theme="light"] .cmdk-item { color: var(--ink-2); }
html[data-theme="light"] .cmdk-item .ci-ico { background: var(--surface-3); color: var(--brand-2); }
html[data-theme="light"] .cmdk-item.sel,
html[data-theme="light"] .cmdk-item:hover { background: var(--brand-tint); color: var(--brand-deep); }
html[data-theme="light"] .cmdk-hint { border-top: 1px solid var(--border); }

html[data-theme="light"] #toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  box-shadow: var(--elev-3);
  color: var(--ink-1);
}
html[data-theme="light"] .notif-item { border-bottom: 1px solid var(--border); }
html[data-theme="light"] .notif-item:hover { background: var(--tint-2); }
html[data-theme="light"] .notif-head { border-bottom: 1px solid var(--border); }
html[data-theme="light"] .notif-dot { box-shadow: 0 0 0 2px #fff; animation: none; }
html[data-theme="light"] .secret-wrap .reveal {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--ink-2);
}

/* Evidence panels inside the drawer */
html[data-theme="light"] .entropy .track {
  background: linear-gradient(90deg, rgba(5, 150, 105, .30), rgba(217, 119, 6, .32), rgba(225, 29, 72, .34));
  border: 1px solid var(--border);
}
html[data-theme="light"] .entropy .marker { background: var(--ink-1); box-shadow: 0 0 0 1px #fff; }
html[data-theme="light"] .timeline .tl::before {
  background: var(--brand);
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--brand-tint);
}
html[data-theme="light"] .timeline .tl::after { background: var(--border-strong); }
html[data-theme="light"] .note {
  background: var(--brand-tint);
  border: 1px solid rgba(64, 115, 182, .22);
  color: var(--ink-2);
}
html[data-theme="light"] .note svg { color: var(--brand-deep); }

/* ==========================================================================
   10. CDR SANITISATION DRAWER
   The one screen that is entirely its own palette. Its bioluminescent green
   download button is kept — it is the affirmative act on that screen — but the
   glass, the trees and the metrics all come up into daylight.
   ========================================================================== */
html[data-theme="light"] .cdr-drawer {
  background: linear-gradient(180deg, rgba(14, 116, 144, .05), transparent 22%), var(--cdr-bg);
  box-shadow: -30px 0 90px -30px rgba(15, 23, 42, .35), inset 1px 0 0 var(--cdr-line-2);
}
html[data-theme="light"] .cdr-head { background: linear-gradient(180deg, rgba(14, 116, 144, .06), transparent); }
html[data-theme="light"] .cdr-eyebrow { color: var(--cdr-cobalt); text-shadow: none; }
html[data-theme="light"] .cdr-title { color: var(--ink-1); }
html[data-theme="light"] .glass {
  background: var(--surface);
  border: 1px solid var(--cdr-line);
  box-shadow: var(--elev-1);
}
html[data-theme="light"] .cdr-hero::after { opacity: .22; }
html[data-theme="light"] .cdr-seal {
  background: rgba(5, 150, 105, .10);
  border: 1px solid rgba(5, 150, 105, .28);
  box-shadow: none;
}
html[data-theme="light"] .cdr-hero.clean .cdr-seal {
  background: rgba(14, 116, 144, .10);
  border-color: rgba(14, 116, 144, .28);
  box-shadow: none;
}
html[data-theme="light"] .cdr-hero h3 { color: var(--ink-1); }
html[data-theme="light"] .cdr-hero p { color: var(--ink-2); }
html[data-theme="light"] .cdr-metric .m-lab,
html[data-theme="light"] .cdr-sec,
html[data-theme="light"] .cdr-hash .h-lab,
html[data-theme="light"] .cdr-check .ck .ck-sub,
html[data-theme="light"] .cstage .cs-lab { color: var(--ink-3); }
html[data-theme="light"] .cdr-metric .m-val { color: var(--ink-1); }
html[data-theme="light"] .cdr-metric.amber .m-val { color: var(--cdr-amber); text-shadow: none; }
html[data-theme="light"] .cdr-sec::after { background: var(--cdr-line); }
html[data-theme="light"] .tree-node { color: var(--ink-2); }
html[data-theme="light"] .tree-node::before { background: var(--ink-3); }
html[data-theme="light"] .tree-node.root { color: var(--ink-1); }
html[data-theme="light"] .tree-node.active::before,
html[data-theme="light"] .tree-node.kept::before { box-shadow: none; }
html[data-theme="light"] .tree-node.removed { color: var(--ink-3); opacity: .6; }
html[data-theme="light"] .cdr-check .ck .ck-ico {
  background: rgba(5, 150, 105, .12);
  color: var(--cdr-emerald);
  box-shadow: none;
}
html[data-theme="light"] .cdr-check .ck .ck-txt { color: var(--ink-1); }
html[data-theme="light"] .cdr-check .ck .ck-count {
  color: var(--cdr-amber);
  background: rgba(217, 119, 6, .10);
  border: 1px solid rgba(217, 119, 6, .26);
}
html[data-theme="light"] .cdr-hash { border-bottom: 1px solid var(--cdr-line); }
html[data-theme="light"] .cdr-hash .h-val { color: var(--ink-2); }
html[data-theme="light"] .cdr-copy { color: var(--ink-3); }
html[data-theme="light"] .cdr-copy:hover { color: var(--cdr-cobalt); }
html[data-theme="light"] .cdr-copy.ok { color: var(--cdr-emerald); }
html[data-theme="light"] .cdr-dl {
  color: #052E1B;
  background: linear-gradient(180deg, #10C97A, #059669);
  box-shadow: 0 0 0 1px rgba(5, 150, 105, .45), 0 10px 26px -12px rgba(5, 150, 105, .55);
  animation: none;
}
html[data-theme="light"] .cdr-dl:hover {
  box-shadow: 0 0 0 1px rgba(5, 150, 105, .6), 0 14px 32px -12px rgba(5, 150, 105, .6);
}
html[data-theme="light"] .cdr-trigger {
  color: var(--cdr-cobalt);
  background: rgba(14, 116, 144, .07);
  border: 1px solid rgba(14, 116, 144, .28);
}
html[data-theme="light"] .cdr-trigger:hover { background: rgba(14, 116, 144, .13); box-shadow: none; }
html[data-theme="light"] .cstage::after { background: var(--cdr-line-2); }
html[data-theme="light"] .cstage .cs-dot {
  background: #fff;
  border: 1px solid var(--cdr-line-2);
  color: var(--ink-3);
}
html[data-theme="light"] .cstage.done .cs-dot {
  background: rgba(14, 116, 144, .10);
  border-color: rgba(14, 116, 144, .35);
  color: var(--cdr-cobalt);
  box-shadow: none;
}
html[data-theme="light"] .cstage.done .cs-lab { color: var(--ink-2); }
html[data-theme="light"] .cstage.fail .cs-dot {
  background: rgba(217, 119, 6, .12);
  border-color: rgba(217, 119, 6, .45);
  color: var(--cdr-amber);
}
html[data-theme="light"] .cdr-valid.ok { background: rgba(5, 150, 105, .08); border: 1px solid rgba(5, 150, 105, .28); color: var(--cdr-emerald); }
html[data-theme="light"] .cdr-valid.bad { background: rgba(217, 119, 6, .09); border: 1px solid rgba(217, 119, 6, .32); color: var(--cdr-amber); }
html[data-theme="light"] .cdr-valid .dot { box-shadow: none; }
html[data-theme="light"] .threat {
  background: rgba(217, 119, 6, .09);
  border: 1px solid rgba(217, 119, 6, .26);
  color: var(--cdr-amber);
}
html[data-theme="light"] .threat.critical {
  background: rgba(225, 29, 72, .09);
  border-color: rgba(225, 29, 72, .28);
  color: #BE123C;
}
html[data-theme="light"] .ioc {
  background: var(--surface-2);
  border: 1px solid var(--cdr-line-2);
  color: var(--ink-2);
}

/* ==========================================================================
   11. CHARTS
   ========================================================================== */
html[data-theme="light"] .chart-card .cc-title,
html[data-theme="light"] .axis-lab,
html[data-theme="light"] .y-axis span,
html[data-theme="light"] .x-axis span,
html[data-theme="light"] .legend-caption { color: var(--ink-3); }
html[data-theme="light"] .spark-legend .sl,
html[data-theme="light"] .chart-legend .cl-item { color: var(--ink-2); }
html[data-theme="light"] .emeter .em-track { background: var(--surface-3); }
html[data-theme="light"] .em-ok,
html[data-theme="light"] .em-bad { box-shadow: none; }
html[data-theme="light"] .gauge-card .g-lab { color: var(--ink-3); }
html[data-theme="light"] .donut svg { filter: drop-shadow(0 6px 18px rgba(15, 23, 42, .14)); }
html[data-theme="light"] .hm-cell { outline: 1px solid rgba(15, 23, 42, .04); outline-offset: -1px; }

/* ==========================================================================
   12. EVIDENCE, INTELLIGENCE AND POLICY PANELS
   Every hardcoded 300-weight hue in these panels, brought down to a value that
   clears AA on a white card. The tints they sit on are unchanged.
   ========================================================================== */
html[data-theme="light"] .rep-status,
html[data-theme="light"] .rs-open { color: var(--cyan); }
html[data-theme="light"] .rs-open { background: rgba(14, 116, 144, .10); border-color: rgba(14, 116, 144, .28); }
html[data-theme="light"] .rs-reviewed { background: rgba(5, 150, 105, .10); border-color: rgba(5, 150, 105, .28); color: #047857; }
html[data-theme="light"] .rs-dismissed { background: var(--slate-tint); border-color: var(--border-strong); color: var(--ink-3); }

html[data-theme="light"] .ioc-panel .iocp-row { background: var(--surface-2); border: 1px solid var(--border); }
html[data-theme="light"] .iocp-url { background: rgba(14, 116, 144, .12); color: var(--cyan); }
html[data-theme="light"] .iocp-ip { background: rgba(109, 40, 217, .12); color: var(--violet); }
html[data-theme="light"] .iocp-host { background: rgba(15, 118, 110, .12); color: var(--teal); }
html[data-theme="light"] .ioc-panel .iocp-val { color: var(--ink-1); }

html[data-theme="light"] .vuln-badge {
  background: linear-gradient(135deg, rgba(234, 88, 12, .12), rgba(225, 29, 72, .10));
  border: 1px solid rgba(234, 88, 12, .35);
  color: #C2410C;
}
html[data-theme="light"] .vuln-sev { background: var(--surface-2); border: 1px solid var(--border); }
html[data-theme="light"] .vs-crit { background: rgba(225, 29, 72, .08); border-color: rgba(225, 29, 72, .28); }
html[data-theme="light"] .vs-crit .vs-n { color: #BE123C; }
html[data-theme="light"] .vs-high { background: rgba(234, 88, 12, .08); border-color: rgba(234, 88, 12, .28); }
html[data-theme="light"] .vs-high .vs-n { color: #C2410C; }
html[data-theme="light"] .vs-med { background: rgba(217, 119, 6, .08); border-color: rgba(217, 119, 6, .28); }
html[data-theme="light"] .vs-med .vs-n { color: #B45309; }
html[data-theme="light"] .vs-low { background: rgba(14, 116, 144, .07); border-color: rgba(14, 116, 144, .24); }
html[data-theme="light"] .vs-low .vs-n { color: #0E7490; }
html[data-theme="light"] .vuln-tbl th,
html[data-theme="light"] .vuln-tbl td { border-bottom: 1px solid var(--border); }
html[data-theme="light"] .vuln-tbl .vc-name { color: var(--ink-1); }
html[data-theme="light"] .cve-crit { background: rgba(225, 29, 72, .10); border-color: rgba(225, 29, 72, .32); color: #BE123C; }
html[data-theme="light"] .cve-high { background: rgba(234, 88, 12, .10); border-color: rgba(234, 88, 12, .32); color: #C2410C; }
html[data-theme="light"] .cve-med { background: rgba(217, 119, 6, .10); border-color: rgba(217, 119, 6, .32); color: #B45309; }
html[data-theme="light"] .cve-low { background: rgba(14, 116, 144, .09); border-color: rgba(14, 116, 144, .28); color: #0E7490; }
html[data-theme="light"] .fix-yes { color: #047857; }
html[data-theme="light"] .vuln-clean {
  background: rgba(5, 150, 105, .08);
  border: 1px solid rgba(5, 150, 105, .26);
  color: #047857;
}
html[data-theme="light"] .vuln-pending .spin { border-color: var(--border-strong); border-top-color: var(--brand); }
html[data-theme="light"] .vi-stat { background: var(--surface-2); border: 1px solid var(--border); }
html[data-theme="light"] .vi-val { color: var(--ink-1); }

html[data-theme="light"] .intel-badge {
  background: linear-gradient(135deg, rgba(109, 40, 217, .12), rgba(14, 116, 144, .10));
  border: 1px solid rgba(109, 40, 217, .32);
  color: var(--violet);
}
html[data-theme="light"] .rep-banner { border: 1px solid var(--border); }
html[data-theme="light"] .rep-mal { background: rgba(225, 29, 72, .07); border-color: rgba(225, 29, 72, .28); }
html[data-theme="light"] .rep-none { background: rgba(5, 150, 105, .07); border-color: rgba(5, 150, 105, .26); }
html[data-theme="light"] .rep-unk { background: var(--surface-2); }
html[data-theme="light"] .rep-unk .rb-ico { background: var(--surface-3); color: var(--ink-3); }
html[data-theme="light"] .rep-banner .rb-title { color: var(--ink-1); }
html[data-theme="light"] .intel-filter button {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-2);
}
html[data-theme="light"] .intel-filter button.on { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-deep); }
html[data-theme="light"] .ind-row,
html[data-theme="light"] .eng-row { background: var(--surface-2); border: 1px solid var(--border); }
html[data-theme="light"] .ind-head:hover,
html[data-theme="light"] .eng-head:hover { background: var(--tint-2); }
html[data-theme="light"] .ir-mal { background: rgba(225, 29, 72, .10); color: #BE123C; border: 1px solid rgba(225, 29, 72, .30); }
html[data-theme="light"] .ir-susp { background: rgba(217, 119, 6, .10); color: #B45309; border: 1px solid rgba(217, 119, 6, .30); }
html[data-theme="light"] .ir-unk { background: var(--surface-3); color: var(--ink-3); border: 1px solid var(--border); }
html[data-theme="light"] .ind-val,
html[data-theme="light"] .tl-ev { color: var(--ink-1); }
html[data-theme="light"] .ind-copy:hover { color: var(--brand-2); }
html[data-theme="light"] .ind-body,
html[data-theme="light"] .eng-body { background: var(--sunken); border-top: 1px solid var(--border); }
html[data-theme="light"] .ind-ev b,
html[data-theme="light"] .eng-kv span,
html[data-theme="light"] .gh-counts b { color: var(--ink-1); }
html[data-theme="light"] .tl::before { background: var(--border-strong); }
html[data-theme="light"] .tl-item::before { background: var(--brand); box-shadow: none; }
html[data-theme="light"] .prov-cell { background: var(--surface-2); border: 1px solid var(--border); }
html[data-theme="light"] .prov-cell .pc-v { color: var(--ink-1); }
html[data-theme="light"] .prov-disclaimer {
  background: rgba(217, 119, 6, .07);
  border-left: 2px solid var(--ochre);
  color: var(--ink-2);
}
html[data-theme="light"] .sig-signed { color: #047857; }
html[data-theme="light"] .sig-invalid { color: #BE123C; }
html[data-theme="light"] .cap-chip {
  background: rgba(109, 40, 217, .10);
  border: 1px solid rgba(109, 40, 217, .28);
  color: var(--violet);
}
html[data-theme="light"] .yara-str { background: var(--surface-3); color: var(--ink-2); }
html[data-theme="light"] .eng-lic { background: var(--surface-2); border: 1px solid var(--border); }
html[data-theme="light"] .eng-lic.lic-on {
  border-color: rgba(14, 116, 144, .32);
  background: linear-gradient(180deg, rgba(14, 116, 144, .05), var(--surface-2));
}
html[data-theme="light"] .eng-name { color: var(--ink-1); }

/* The release gate's own tile, and the role and weight marks beside every
   engine row. The vocabulary is unchanged; only the ink is. */
html[data-theme="light"] .gate-head { background: var(--surface-2); border: 1px solid var(--border); }
html[data-theme="light"] .gh-reason { color: var(--ink-1); }
html[data-theme="light"] .gh-counts { border-top: 1px solid var(--border); }
html[data-theme="light"] .gh-flag { background: var(--ochre-dim); color: var(--ochre); border: 1px solid rgba(217, 119, 6, .32); }
html[data-theme="light"] .gh-flag.bad { background: var(--coral-dim); color: var(--coral); border-color: rgba(225, 29, 72, .32); }
html[data-theme="light"] .role-ENGINE { background: rgba(64, 115, 182, .12); color: var(--brand-deep); border: 1px solid rgba(64, 115, 182, .32); }
html[data-theme="light"] .role-EVIDENCE_ONLY { background: var(--slate-tint); color: var(--ink-2); border: 1px solid var(--border-strong); }
html[data-theme="light"] .role-MOCK { background: var(--ochre-dim); color: var(--ochre); border: 1px solid rgba(217, 119, 6, .32); }
html[data-theme="light"] .role-UNKNOWN { background: var(--coral-dim); color: var(--coral); border: 1px solid rgba(225, 29, 72, .32); }
html[data-theme="light"] .weight-mark.on { color: var(--brand-2); }
html[data-theme="light"] .tier-rebuild { background: rgba(64, 115, 182, .12); color: var(--brand-deep); border: 1px solid rgba(64, 115, 182, .32); }
html[data-theme="light"] .tier-transcode { background: var(--cobalt-tint); color: var(--cobalt); border: 1px solid rgba(29, 78, 216, .28); }
html[data-theme="light"] .st-NOT_DETECTED { color: var(--brand-2); }
html[data-theme="light"] .engine-note { color: var(--ochre); }

/* ==========================================================================
   13. CONFIGURATION, WIZARD AND TRANSFER SCREENS
   ========================================================================== */
html[data-theme="light"] .cfg-sec { border-bottom: 1px solid var(--border); }
html[data-theme="light"] .cfg-num { background: var(--brand-tint); border: 1px solid var(--brand); color: var(--brand-deep); }
html[data-theme="light"] .cfg-title { color: var(--ink-1); }
html[data-theme="light"] .fld small code { background: var(--surface-3); color: var(--ink-2); }
html[data-theme="light"] .cfg-note {
  background: rgba(217, 119, 6, .07);
  border-left: 2px solid var(--ochre);
  color: var(--ochre);
}
html[data-theme="light"] .seg { background: var(--surface-2); border: 1px solid var(--border); }
html[data-theme="light"] .seg button { color: var(--ink-2); }
html[data-theme="light"] .seg button.on { background: var(--brand-tint); color: var(--brand-deep); box-shadow: inset 0 0 0 1px var(--brand); }
html[data-theme="light"] .chk { background: var(--surface-2); border: 1px solid var(--border); }
html[data-theme="light"] .chk:hover { border-color: var(--brand); }
html[data-theme="light"] .chk strong { color: var(--ink-1); }
html[data-theme="light"] .dt-card { background: var(--surface-2); border: 1px solid var(--border); }
html[data-theme="light"] .dt-card.on {
  border-color: rgba(15, 118, 110, .35);
  background: linear-gradient(180deg, rgba(15, 118, 110, .05), var(--surface-2));
}
html[data-theme="light"] .dt-meta { border-top: 1px solid var(--border); }
html[data-theme="light"] .dt-meta .m-v { color: var(--ink-1); }
html[data-theme="light"] .stat { background: var(--surface-2); border: 1px solid var(--border); }
html[data-theme="light"] .wz-step { background: var(--surface-2); border: 1px solid var(--border); }
html[data-theme="light"] .wz-step.on { background: var(--brand-tint); border-color: var(--brand); }
html[data-theme="light"] .wz-step.on .n,
html[data-theme="light"] .wz-step.on .t { color: var(--brand-deep); }
html[data-theme="light"] .wz-step.done { border-color: rgba(15, 118, 110, .4); }
html[data-theme="light"] .wz-foot { border-top: 1px solid var(--border); }
html[data-theme="light"] .wz-err { color: var(--coral); }
html[data-theme="light"] .wz-review .r-v { color: var(--ink-1); }
html[data-theme="light"] .wz-dialog .ud-title { color: var(--ink-1); }
html[data-theme="light"] .hz-online { background: rgba(5, 150, 105, .12); color: #047857; }
html[data-theme="light"] .hz-unreachable { background: rgba(225, 29, 72, .12); color: #BE123C; }
html[data-theme="light"] .hz-degraded { background: rgba(217, 119, 6, .12); color: #B45309; }
html[data-theme="light"] .hz-unknown { background: var(--surface-3); color: var(--ink-3); }

html[data-theme="light"] .stage-chip {
  background: rgba(217, 119, 6, .10);
  border: 1px solid rgba(217, 119, 6, .40);
  color: var(--gold);
}
html[data-theme="light"] .stage-chip:hover { background: rgba(217, 119, 6, .18); border-color: var(--gold); }
html[data-theme="light"] .stage-dot { background: var(--gold); box-shadow: none; animation: none; }
html[data-theme="light"] .stage-banner {
  background: linear-gradient(135deg, rgba(217, 119, 6, .09), rgba(234, 88, 12, .05));
  border: 1px solid rgba(217, 119, 6, .34);
}
html[data-theme="light"] .stage-banner .sb-txt { color: var(--ink-1); }
html[data-theme="light"] .diff-row { border-bottom: 1px solid var(--border); }
html[data-theme="light"] .diff-new,
html[data-theme="light"] .diff-added .diff-new { color: #047857; }
html[data-theme="light"] .diff-removed .diff-old { color: var(--coral); }
html[data-theme="light"] .diff-head { background: var(--surface-3); color: var(--ink-1); }
html[data-theme="light"] .op-create { background: rgba(5, 150, 105, .14); color: #047857; }
html[data-theme="light"] .op-update { background: rgba(14, 116, 144, .14); color: #0E7490; }
html[data-theme="light"] .op-delete { background: rgba(225, 29, 72, .14); color: #BE123C; }
html[data-theme="light"] .diff-card { background: var(--surface-2); border: 1px solid var(--border); }

html[data-theme="light"] .ud-danger { box-shadow: 0 8px 22px -12px rgba(225, 29, 72, .5); }
html[data-theme="light"] .ud-brand { box-shadow: 0 8px 22px -12px var(--brand-glow); }
html[data-theme="light"] .ui-dialog h3 { color: var(--ink-1); }

/* ==========================================================================
   14. LOGIN AND BOOT
   The hero keeps its video. The dark theme dims it to 50% brightness and lays a
   near-black scrim over it; here it is lifted and washed instead, so the same
   footage reads as daylight rather than as an underexposed frame.
   ========================================================================== */
html[data-theme="light"] #login-view {
  background: radial-gradient(700px 500px at 20% 30%, rgba(64, 115, 182, .10), transparent 60%), var(--bg) !important;
}
html[data-theme="light"] #bgVideo {
  opacity: .30;
  filter: brightness(1.25) saturate(.55) contrast(.92);
}
html[data-theme="light"] #bgVideoOverlay {
  background:
    linear-gradient(90deg, rgba(238, 242, 248, .86) 0%, rgba(238, 242, 248, .72) 42%, rgba(238, 242, 248, .93) 100%),
    radial-gradient(120% 80% at 50% 120%, rgba(238, 242, 248, .95), transparent 70%);
}
html[data-theme="light"] .login-hero h1 {
  background-image: linear-gradient(120deg, #0F172A 0%, #1E4A7A 55%, #0E7490 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .login-hero .lh-foot { color: var(--ink-3); }
html[data-theme="light"] .lh-feat b { color: var(--ink-1); }
html[data-theme="light"] .lh-feat span { color: var(--ink-2); }
html[data-theme="light"] .lh-top .brandmark,
html[data-theme="light"] .login-hero img { filter: drop-shadow(0 8px 18px rgba(15, 23, 42, .28)); }
html[data-theme="light"] #login-view .login-panel > .login-form,
html[data-theme="light"] .login-form {
  background: rgba(255, 255, 255, .88);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06), 0 40px 90px -40px rgba(15, 23, 42, .32);
}
html[data-theme="light"] .login-form::before {
  background: linear-gradient(135deg, rgba(109, 40, 217, .30), transparent 40%, transparent 60%, rgba(14, 116, 144, .28));
  opacity: .5;
}
html[data-theme="light"] .otp input {
  background: #fff;
  border: 1px solid var(--border-strong);
  color: var(--ink-1);
}
html[data-theme="light"] .otp input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
html[data-theme="light"] .otp input.filled { border-color: var(--brand); background: var(--brand-tint); }
html[data-theme="light"] .lf-back { color: var(--ink-3); }
html[data-theme="light"] .lf-back:hover { color: var(--ink-1); }
html[data-theme="light"] .lf-hint { color: var(--ochre); }
html[data-theme="light"] .lf-hint::before { background: var(--ochre); }
html[data-theme="light"] .login-form .secret-wrap .reveal { background: transparent; border-color: transparent; color: var(--ink-3); }
html[data-theme="light"] .login-form .secret-wrap .reveal:hover { color: var(--brand-2); }
html[data-theme="light"] .secret-box { background: var(--surface-2); border: 1px solid var(--border-strong); }
html[data-theme="light"] .secret-box .mono { color: var(--brand-deep); }
html[data-theme="light"] .sec-btn {
  background: var(--brand-tint);
  border: 1px solid rgba(64, 115, 182, .32);
  color: var(--brand-deep);
}
html[data-theme="light"] .sec-btn:hover { background: rgba(64, 115, 182, .18); box-shadow: none; }
html[data-theme="light"] .qr-frame { background: #fff; border: 1px solid var(--border); }
html[data-theme="light"] .modal h3 { color: var(--ink-1); }

html[data-theme="light"] #boot { background: radial-gradient(60% 60% at 50% 40%, #FFFFFF, #E9EEF7); }
html[data-theme="light"] #boot .boot-mark { filter: drop-shadow(0 10px 22px var(--brand-glow)); animation: none; }
html[data-theme="light"] #boot .boot-bar { background: var(--surface-3); }
html[data-theme="light"] #securityBtn svg { color: var(--brand-2); animation: none; }

/* ==========================================================================
   15. THE THEME CONTROL
   Lives in both themes, so it is defined once, here, rather than being split
   across two sheets. The icon shown is the theme you get if you press it.
   ========================================================================== */
.theme-btn { position: relative; }
.theme-btn svg { width: 18px; height: 18px; display: block; }
.theme-btn .ico-sun,
.theme-btn .ico-moon { transition: opacity .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
html[data-theme="dark"] .theme-btn .ico-moon,
html[data-theme="light"] .theme-btn .ico-sun { display: none; }
.theme-btn:hover .ico-sun { transform: rotate(35deg); }
.theme-btn:hover .ico-moon { transform: rotate(-18deg); }
/* Following the OS rather than having been chosen: a small dot, the same
   language as the unread mark on the bell. */
.theme-btn::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-2);
  opacity: 0;
  transition: opacity .2s;
}
html[data-theme-pref="system"] .theme-btn::after { opacity: .85; }

/* On the login screen the control floats clear of the card, over the video. */
#loginThemeBtn {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  z-index: 5;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
#loginThemeBtn:hover { background: var(--surface-3); }
@media (max-width: 900px) { #loginThemeBtn { top: .9rem; right: .9rem; } }

@media (prefers-reduced-motion: reduce) {
  .theme-btn:hover .ico-sun,
  .theme-btn:hover .ico-moon { transform: none; }
}