/*
  EvrGuard light-mode override layer.

  Dark mode is the default and remains untouched. This sheet only takes
  effect when <html data-theme="light"> is set by evr-theme.js. The
  injection happens after each page's own <style> block, so plain
  class selectors are sufficient — no !important needed for CSS rules.
  Inline style="" attributes do require !important since they win the
  cascade unconditionally.

  Palette philosophy: mirror the dark Linear/Vercel aesthetic. Page
  isn't pure white (#F8F9FB), header is frosted glass over off-white,
  surfaces use rgba(0,0,0,0.X) overlays in the same proportions the
  dark side uses rgba(255,255,255,0.X). Brand green stays as accent
  fill but darkens to #047857 when used as foreground text.
*/

html[data-theme="light"] {
  color-scheme: light;
}

/* ─────────────────────────────────────────────────────────────────
   Page + ambient layer
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] body {
  background: #F5F2EB;
  color: rgba(0, 0, 0, 0.78);
}
/* Damp the ambient radial gradients — they were tuned for dark bg
   and bleed colour into the light surface when left at full opacity. */
html[data-theme="light"] body::before {
  background: radial-gradient(ellipse 50% 60% at 10% 40%, rgba(40, 180, 140, 0.04) 0%, transparent 70%),
              radial-gradient(ellipse 40% 50% at 90% 50%, rgba(120, 60, 160, 0.03) 0%, transparent 70%);
  opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────────
   Sticky header (frosted glass over light)
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .evrguard-header {
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .evrguard-brand img {
  /* The shipped logo is white pixels on a transparent background.
     brightness(0) maps every visible pixel to black while preserving
     the alpha channel, giving us a true black logo for the light bg
     without needing a separate asset. */
  filter: brightness(0);
  opacity: 0.88;
}
html[data-theme="light"] .evrguard-nav a {
  color: rgba(0, 0, 0, 0.5);
}
html[data-theme="light"] .evrguard-nav a:hover {
  color: rgba(0, 0, 0, 0.92);
}
html[data-theme="light"] .evrguard-nav a.active {
  color: #047857;
}
/* Live indicator stays brand green — readable on either bg */
html[data-theme="light"] .live-ind {
  color: #047857;
}
html[data-theme="light"] .live-dot {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.45);
}

/* ─────────────────────────────────────────────────────────────────
   Dashboard layout (sidebar + main)
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .sidebar {
  background: rgba(255, 255, 255, 0.6);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .side-section {
  color: rgba(0, 0, 0, 0.4);
}
html[data-theme="light"] .side-link {
  color: rgba(0, 0, 0, 0.6);
}
html[data-theme="light"] .side-link:hover {
  background: rgba(0, 0, 0, 0.035);
  color: rgba(0, 0, 0, 0.92);
}
html[data-theme="light"] .side-link.active {
  background: rgba(16, 185, 129, 0.08);
  border-left-color: #10b981;
  color: #047857;
}
html[data-theme="light"] .side-divider {
  background: rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .side-logout {
  color: rgba(0, 0, 0, 0.5);
}
html[data-theme="light"] .side-logout:hover {
  color: #dc2626;
}

/* ─────────────────────────────────────────────────────────────────
   Cards, panels, tiles
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .card,
html[data-theme="light"] .tile,
html[data-theme="light"] .panel-card,
html[data-theme="light"] .metric-card {
  background: #FBF9F4;
  border: 1px solid rgba(0, 0, 0, 0.09);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .card-title {
  color: rgba(0, 0, 0, 0.92);
}
html[data-theme="light"] .card-sub {
  color: rgba(0, 0, 0, 0.5);
}
html[data-theme="light"] .panel-title {
  color: rgba(0, 0, 0, 0.92);
}
html[data-theme="light"] .panel-sub {
  color: rgba(0, 0, 0, 0.55);
}
html[data-theme="light"] .label,
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .tile-label,
html[data-theme="light"] .side-section {
  color: rgba(0, 0, 0, 0.5);
}
html[data-theme="light"] .eyebrow {
  color: #047857;
}
html[data-theme="light"] .tile-value {
  color: rgba(0, 0, 0, 0.92);
}
html[data-theme="light"] .tile-sub {
  color: rgba(0, 0, 0, 0.55);
}
html[data-theme="light"] .tile-pass .tile-value {
  color: #047857;
}
html[data-theme="light"] .tile-steered .tile-value {
  color: #b45309;
}
html[data-theme="light"] .tile-blocked .tile-value {
  color: #dc2626;
}

/* ─────────────────────────────────────────────────────────────────
   Headings + body typography
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6 {
  color: rgba(0, 0, 0, 0.94);
}
html[data-theme="light"] .sub,
html[data-theme="light"] p {
  color: rgba(0, 0, 0, 0.65);
}
html[data-theme="light"] hr {
  border-color: rgba(0, 0, 0, 0.08);
}

/* ─────────────────────────────────────────────────────────────────
   Form controls
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] input[type=text],
html[data-theme="light"] input[type=email],
html[data-theme="light"] input[type=password],
html[data-theme="light"] input[type=number],
html[data-theme="light"] input[type=search],
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: #FBF9F4;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.92);
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: rgba(0, 0, 0, 0.32);
}
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
  border-color: rgba(16, 185, 129, 0.55);
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

/* ─────────────────────────────────────────────────────────────────
   Buttons (preserve the tinted-pill aesthetic, just darker text on
   light tint so contrast holds up)
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] button.primary,
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .btn-green {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
html[data-theme="light"] button.primary:hover,
html[data-theme="light"] .btn.primary:hover,
html[data-theme="light"] .btn-green:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.5);
}
html[data-theme="light"] button.secondary,
html[data-theme="light"] .btn.secondary {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] button.secondary:hover,
html[data-theme="light"] .btn.secondary:hover {
  background: rgba(0, 0, 0, 0.07);
}

/* ─────────────────────────────────────────────────────────────────
   Status: error / warning / success (banners + inline)
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .error,
html[data-theme="light"] .alert.error,
html[data-theme="light"] .flash.error {
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.22);
}
html[data-theme="light"] .warning,
html[data-theme="light"] .alert.warning,
html[data-theme="light"] .flash.warning,
html[data-theme="light"] .flash {
  color: #92400e;
  background: rgba(180, 83, 9, 0.06);
  border: 1px solid rgba(180, 83, 9, 0.22);
}
html[data-theme="light"] .success,
html[data-theme="light"] .alert.success,
html[data-theme="light"] .flash.success {
  color: #047857;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.28);
}

/* ─────────────────────────────────────────────────────────────────
   Action cards (live demo) + verdict badges
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .action-card {
  background: #FBF9F4;
  border: 1px solid rgba(0, 0, 0, 0.07);
}
html[data-theme="light"] .action-card.pass {
  border-left: 3px solid #10b981;
}
html[data-theme="light"] .action-card.steered {
  border-left: 3px solid #b45309;
}
html[data-theme="light"] .action-card.blocked {
  border-left: 3px solid #dc2626;
}
html[data-theme="light"] .verdict-badge {
  color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────────
   Tabs
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .tab {
  color: rgba(0, 0, 0, 0.55);
}
html[data-theme="light"] .tab:hover {
  color: rgba(0, 0, 0, 0.85);
}
html[data-theme="light"] .tab.active {
  color: #047857;
  border-bottom-color: #10b981;
}

/* ─────────────────────────────────────────────────────────────────
   Code, pre
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] code,
html[data-theme="light"] pre,
html[data-theme="light"] .code-block,
html[data-theme="light"] .codebox {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* ─────────────────────────────────────────────────────────────────
   Tables
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] table {
  color: rgba(0, 0, 0, 0.85);
}
html[data-theme="light"] th {
  color: rgba(0, 0, 0, 0.55);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] tr:hover {
  background: rgba(0, 0, 0, 0.025);
}

/* ─────────────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .evrguard-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.4);
}

/* ─────────────────────────────────────────────────────────────────
   Help / link blocks
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .help {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.55);
}
html[data-theme="light"] .help a,
html[data-theme="light"] a {
  color: #047857;
}
html[data-theme="light"] .help a:hover,
html[data-theme="light"] a:hover {
  color: #065f46;
}

/* ─────────────────────────────────────────────────────────────────
   evrselect (custom dropdown component)
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .evrselect,
html[data-theme="light"] .evrselect-trigger,
html[data-theme="light"] .evrselect-panel,
html[data-theme="light"] .evrselect-option {
  background: #FBF9F4;
  color: rgba(0, 0, 0, 0.85);
  border-color: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] .evrselect-option:hover,
html[data-theme="light"] .evrselect-option.highlighted {
  background: rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .evrselect-option.selected {
  background: rgba(16, 185, 129, 0.08);
  color: #047857;
}

/* ─────────────────────────────────────────────────────────────────
   Mobile hamburger menu (the slide-out the hamburger opens)
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] .evr-mobile-menu {
  background: #FBF9F4;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .evr-mobile-overlay {
  background: rgba(0, 0, 0, 0.35);
}
html[data-theme="light"] .evr-mobile-link {
  color: rgba(0, 0, 0, 0.85);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .evr-mobile-link.active {
  color: #047857;
}
html[data-theme="light"] .evr-hamburger span {
  background: rgba(0, 0, 0, 0.8);
}

/* ─────────────────────────────────────────────────────────────────
   Inline-style overrides (these need !important — inline wins cascade)
   Only the ones that visibly break readability on white.
   ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] [style*="color:#fff"]:not([style*="background"]),
html[data-theme="light"] [style*="color: #fff"]:not([style*="background"]),
html[data-theme="light"] [style*="color:#ffffff"]:not([style*="background"]),
html[data-theme="light"] [style*="color: #ffffff"]:not([style*="background"]) {
  color: rgba(0, 0, 0, 0.92) !important;
}
html[data-theme="light"] [style*="color:rgba(255,255,255,0.6)"],
html[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.6)"] {
  color: rgba(0, 0, 0, 0.65) !important;
}
html[data-theme="light"] [style*="color:rgba(255,255,255,0.5)"],
html[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.5)"] {
  color: rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="light"] [style*="color:rgba(255,255,255,0.4)"],
html[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.4)"] {
  color: rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="light"] [style*="color:rgba(255,255,255,0.32)"] {
  color: rgba(0, 0, 0, 0.42) !important;
}
html[data-theme="light"] [style*="color:rgba(255,255,255,0.30)"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.3)"] {
  color: rgba(0, 0, 0, 0.4) !important;
}
/* Brand-coloured inline text → darken */
html[data-theme="light"] [style*="color:#34d399"],
html[data-theme="light"] [style*="color: #34d399"] {
  color: #047857 !important;
}
html[data-theme="light"] [style*="color:#f87171"],
html[data-theme="light"] [style*="color: #f87171"] {
  color: #dc2626 !important;
}
html[data-theme="light"] [style*="color:#fbbf24"],
html[data-theme="light"] [style*="color: #fbbf24"] {
  color: #b45309 !important;
}
html[data-theme="light"] [style*="color:#60a5fa"],
html[data-theme="light"] [style*="color: #60a5fa"] {
  color: #2563eb !important;
}
html[data-theme="light"] [style*="color:#c084fc"],
html[data-theme="light"] [style*="color: #c084fc"] {
  color: #9333ea !important;
}
/* Pure dark inline backgrounds → flip */
html[data-theme="light"] [style*="background:#0b0b10"],
html[data-theme="light"] [style*="background: #0b0b10"],
html[data-theme="light"] [style*="background-color:#0b0b10"],
html[data-theme="light"] [style*="background-color: #0b0b10"] {
  background: #F5F2EB !important;
}
html[data-theme="light"] [style*="background:rgba(255,255,255,0.04)"],
html[data-theme="light"] [style*="background: rgba(255, 255, 255, 0.04)"] {
  background: rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] [style*="background:rgba(255,255,255,0.06)"],
html[data-theme="light"] [style*="background: rgba(255, 255, 255, 0.06)"] {
  background: rgba(0, 0, 0, 0.05) !important;
}
/* Translucent white borders → translucent black */
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.06)"],
html[data-theme="light"] [style*="border: 1px solid rgba(255, 255, 255, 0.06)"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.08)"],
html[data-theme="light"] [style*="border: 1px solid rgba(255, 255, 255, 0.08)"],
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.1)"],
html[data-theme="light"] [style*="border: 1px solid rgba(255, 255, 255, 0.1)"] {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ─────────────────────────────────────────────────────────────────
   Theme toggle button — lives inside .evrguard-header (preferred)
   or fixed top-LEFT as fallback when no header exists
   ───────────────────────────────────────────────────────────────── */
.evr-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  /* Nested inside .live-ind, which has `gap: 7px` — that controls
     the spacing between "Live" and the toggle icon. No extra margin
     needed; any would stack on top of the gap and look too airy. */
  margin-left: 0;
  flex-shrink: 0;
}
.evr-theme-toggle:hover {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
}
.evr-theme-toggle svg {
  width: 15px;
  height: 15px;
  display: block;
}
html[data-theme="light"] .evr-theme-toggle {
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.55);
}
html[data-theme="light"] .evr-theme-toggle:hover {
  color: rgba(0, 0, 0, 0.92);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.18);
}
.evr-theme-toggle--floating {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 999999;
  margin-left: 0;
  background: rgba(11, 11, 16, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html[data-theme="light"] .evr-theme-toggle--floating {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ═════════════════════════════════════════════════════════════════
   RED-TEAM PASS — additional overrides discovered by auditing
   the actual dark CSS rule-by-rule. Most fix things that were
   visually invisible (white-on-white) or amateur (faint borders,
   weak shadows, dark overlays bleeding into light pages).
   ═════════════════════════════════════════════════════════════════ */

/* ── Scrollbars ─────────────────────────────────────────────── */
html[data-theme="light"] *::-webkit-scrollbar-thumb,
html[data-theme="light"] .panel-body::-webkit-scrollbar-thumb,
html[data-theme="light"] .evrselect-menu::-webkit-scrollbar-thumb,
html[data-theme="light"] .evr-select-menu::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border: 2px solid transparent;
  background-clip: padding-box;
}
html[data-theme="light"] *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
  background-clip: padding-box;
}
html[data-theme="light"] *::-webkit-scrollbar-track {
  background: transparent;
}

/* ── evrselect dropdown (custom select component) ──────────── */
html[data-theme="light"] .evr-select-menu,
html[data-theme="light"] .evrselect-menu {
  background: #FBF9F4;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .evr-select-trigger,
html[data-theme="light"] .evrselect-trigger {
  background: #FBF9F4;
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.88);
}
html[data-theme="light"] .evr-select-trigger:hover,
html[data-theme="light"] .evrselect-trigger:hover {
  background: rgba(0, 0, 0, 0.025);
  border-color: rgba(0, 0, 0, 0.18);
}
html[data-theme="light"] .evr-select-trigger:focus-visible,
html[data-theme="light"] .evrselect-trigger:focus-visible {
  border-color: rgba(16, 185, 129, 0.55);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
  outline: none;
}
html[data-theme="light"] .evr-select.open > .evr-select-trigger {
  border-color: rgba(16, 185, 129, 0.55);
  background: rgba(0, 0, 0, 0.02);
}
html[data-theme="light"] .evr-select-value.placeholder {
  color: rgba(0, 0, 0, 0.4);
}
html[data-theme="light"] .evr-select-arrow {
  color: rgba(0, 0, 0, 0.55);
}
html[data-theme="light"] .evr-select-group {
  color: rgba(0, 0, 0, 0.5);
}
html[data-theme="light"] .evr-select-option {
  color: rgba(0, 0, 0, 0.85);
}
html[data-theme="light"] .evr-select-option:hover,
html[data-theme="light"] .evr-select-option.focused {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.95);
}
html[data-theme="light"] .evr-select-option.selected {
  background: rgba(16, 185, 129, 0.08);
  color: #047857;
}
html[data-theme="light"] .evr-select-option.selected:hover {
  background: rgba(16, 185, 129, 0.12);
}

/* ── Pricing: success ticks (green radial circles) ─────────── */
html[data-theme="light"] .tick,
html[data-theme="light"] .tick-circle {
  background: radial-gradient(circle at 40% 35%, #10b981, #047857);
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.22);
}

/* ── Pricing: featured tier (highlighted plan) ─────────────── */
html[data-theme="light"] .tier {
  background: #FBF9F4;
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .tier.featured {
  background: rgba(16, 185, 129, 0.025);
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 8px 28px rgba(16, 185, 129, 0.15), 0 1px 3px rgba(16, 185, 129, 0.18);
}
html[data-theme="light"] .tier-btn.outline {
  border-color: rgba(0, 0, 0, 0.18);
  color: rgba(0, 0, 0, 0.78);
}
html[data-theme="light"] .tier-btn.outline:hover {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.28);
}

/* ── Modals: contact / email / generic ─────────────────────── */
html[data-theme="light"] .modal,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .email-card {
  background: #FBF9F4;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .modal-overlay,
html[data-theme="light"] .contact-modal,
html[data-theme="light"] .email-modal {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
html[data-theme="light"] .modal-card input,
html[data-theme="light"] .contact-card input,
html[data-theme="light"] .email-card input,
html[data-theme="light"] .modal input,
html[data-theme="light"] .modal textarea {
  background: #FBF9F4;
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.92);
}
html[data-theme="light"] .modal-cancel {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.7);
  border-color: rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .modal-cancel:hover {
  background: rgba(0, 0, 0, 0.07);
}
html[data-theme="light"] .modal-go,
html[data-theme="light"] .modal-card button:not(.modal-cancel) {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
html[data-theme="light"] .modal-go:hover {
  background: rgba(16, 185, 129, 0.2);
}

/* ── Contact card opt rows ─────────────────────────────────── */
html[data-theme="light"] .contact-card .opt {
  background: rgba(0, 0, 0, 0.025);
  border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .contact-card .opt:hover {
  background: rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .contact-card .opt-icon {
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
}
html[data-theme="light"] .contact-card .opt-cta {
  color: #2563eb;
}

/* ── Checkboxes ─────────────────────────────────────────────── */
html[data-theme="light"] input[type=checkbox] {
  background: #FBF9F4;
  border: 1px solid rgba(0, 0, 0, 0.22);
}
html[data-theme="light"] input[type=checkbox]:checked {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
}

/* ── Faint stat boxes / rate cards (dark uses ~0.015 alpha) ── */
html[data-theme="light"] .stat-box,
html[data-theme="light"] .rate-card,
html[data-theme="light"] .summary-box {
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ── History / list items ───────────────────────────────────── */
html[data-theme="light"] .history-item {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .history-item:hover {
  background: rgba(0, 0, 0, 0.035);
}

/* ── Sidebar link inactive colour (slight tweak for cohesion) ── */
html[data-theme="light"] .side-link {
  color: rgba(0, 0, 0, 0.58);
}

/* ── Live demo: phase tiles ─────────────────────────────────── */
html[data-theme="light"] .phase-green {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.22);
}
html[data-theme="light"] .phase-blue {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.22);
}

/* ── Live demo: steering banners ────────────────────────────── */
html[data-theme="light"] .steering-feedback {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.22);
  color: #1e40af;
}
html[data-theme="light"] .steering-correction {
  background: rgba(147, 51, 234, 0.08);
  border-color: rgba(147, 51, 234, 0.22);
  color: #6b21a8;
}
html[data-theme="light"] .steering-exhausted {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.22);
  color: #991b1b;
}

/* ── Live indicator dot — preserve glow on light bg ─────────── */
html[data-theme="light"] .live-dot {
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

/* ── Inline-style sweepers: catch every alpha variant of the
   four brand RGB triplets in one shot. The "color:rgba(N,N,N"
   prefix matches "color:rgba(N,N,N,0.X)" for any X without
   needing to enumerate each. Note: dark CSS authors sometimes
   wrote with no spaces, sometimes with — covered both. ─── */
html[data-theme="light"] [style*="color:rgba(96,165,250"],
html[data-theme="light"] [style*="color: rgba(96, 165, 250"] {
  color: #2563eb !important;
}
html[data-theme="light"] [style*="color:rgba(52,211,153"],
html[data-theme="light"] [style*="color: rgba(52, 211, 153"] {
  color: #047857 !important;
}
html[data-theme="light"] [style*="color:rgba(248,113,113"],
html[data-theme="light"] [style*="color: rgba(248, 113, 113"] {
  color: #dc2626 !important;
}
html[data-theme="light"] [style*="color:rgba(251,191,36"],
html[data-theme="light"] [style*="color: rgba(251, 191, 36"] {
  color: #b45309 !important;
}
html[data-theme="light"] [style*="color:rgba(192,132,252"],
html[data-theme="light"] [style*="color: rgba(192, 132, 252"] {
  color: #9333ea !important;
}

/* ── Inline white-rgba background sweeper for any opacity 0.0X ── */
html[data-theme="light"] [style*="background:rgba(255,255,255,0.0"],
html[data-theme="light"] [style*="background: rgba(255, 255, 255, 0.0"] {
  background: rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] [style*="background:rgba(255,255,255,0.1"],
html[data-theme="light"] [style*="background: rgba(255, 255, 255, 0.1"] {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* ── Inline white-rgba border sweeper for any opacity 0.0X ── */
html[data-theme="light"] [style*="border:1px solid rgba(255,255,255,0.0"],
html[data-theme="light"] [style*="border: 1px solid rgba(255, 255, 255, 0.0"] {
  border-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] [style*="border-color:rgba(255,255,255,0.0"] {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ── Toggle button: explicit svg colour to defeat any inheritance leak ── */
.evr-theme-toggle svg {
  stroke: currentColor;
  color: inherit;
}
html[data-theme="light"] .evr-theme-toggle svg {
  stroke: rgba(0, 0, 0, 0.6);
}

/* ═════════════════════════════════════════════════════════════════
   CYCLE 1 — Comprehensive text-colour coverage

   The initial red-team missed that 68 distinct classes set white-ish
   text via `color: rgba(255, 255, 255, 0.7+)` or `color: #fff`. Body
   inheritance doesn't help because those classes declare their own
   colour. Each must be overridden explicitly in light mode.

   Inline styles use 40+ different alpha variants of white rgba. The
   existing per-opacity sweepers only cover ~5 of them. A set of
   prefix-match sweepers now catches every 0.0X through 0.9X variant.

   Brand-coloured glow box-shadows (0 0 Xpx rgba(brand,alpha)) look
   bright and haloed on dark — on light they wash out into a ghost
   outline. Replaced with darker drop-shadows or significantly
   reduced glow alpha for light mode.
   ═════════════════════════════════════════════════════════════════ */

/* ── Prominent titles / hero text ───────────────────────────── */
html[data-theme="light"] .hero,
html[data-theme="light"] .gate-title,
html[data-theme="light"] .page-title,
html[data-theme="light"] .setup-title,
html[data-theme="light"] .setup-step-title,
html[data-theme="light"] .login-box,
html[data-theme="light"] .tier-price {
  color: rgba(0, 0, 0, 0.92);
}

/* ── Numeric values / metrics ──────────────────────────────── */
html[data-theme="light"] .metric-value,
html[data-theme="light"] .tile-value,
html[data-theme="light"] .stat-num,
html[data-theme="light"] .rate-num,
html[data-theme="light"] .num,
html[data-theme="light"] .stat-white,
html[data-theme="light"] .v {
  color: rgba(0, 0, 0, 0.92);
}

/* ── Code / input / editor surfaces ─────────────────────────── */
html[data-theme="light"] .code,
html[data-theme="light"] .editor,
html[data-theme="light"] .proof-input,
html[data-theme="light"] .input-field {
  color: rgba(0, 0, 0, 0.9);
}

/* ── Body content / table rows / cards ──────────────────────── */
html[data-theme="light"] .admin-table,
html[data-theme="light"] .anchor-row,
html[data-theme="light"] .history-row,
html[data-theme="light"] .webhook-row,
html[data-theme="light"] .kv-grid,
html[data-theme="light"] .result-card,
html[data-theme="light"] .controls,
html[data-theme="light"] .filters,
html[data-theme="light"] .pagination,
html[data-theme="light"] .preview-rules,
html[data-theme="light"] .nl-helper,
html[data-theme="light"] .upgrade-banner-text,
html[data-theme="light"] .connect-test,
html[data-theme="light"] .topbar,
html[data-theme="light"] .test-verdict {
  color: rgba(0, 0, 0, 0.82);
}

/* ── Labels / names / metadata ─────────────────────────────── */
html[data-theme="light"] .framework-name,
html[data-theme="light"] .mode-name,
html[data-theme="light"] .opt-name,
html[data-theme="light"] .modal-option-name,
html[data-theme="light"] .toggle-name,
html[data-theme="light"] .panel-label {
  color: rgba(0, 0, 0, 0.82);
}
html[data-theme="light"] .date,
html[data-theme="light"] .ts,
html[data-theme="light"] .url,
html[data-theme="light"] .framework-footnote {
  color: rgba(0, 0, 0, 0.55);
}

/* ── Strength / select component internals ─────────────────── */
html[data-theme="light"] .evr-strength-opt,
html[data-theme="light"] .evr-strength-trigger {
  color: rgba(0, 0, 0, 0.82);
  background: #FBF9F4;
  border-color: rgba(0, 0, 0, 0.12);
}

/* ── Outline / secondary buttons ────────────────────────────── */
html[data-theme="light"] .btn-outline,
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .copy-btn,
html[data-theme="light"] .outline,
html[data-theme="light"] .tier-btn,
html[data-theme="light"] .audit-modal-close {
  color: rgba(0, 0, 0, 0.78);
}

/* ── Gate overlay (demo access page) ────────────────────────── */
html[data-theme="light"] .gate-overlay {
  background: rgba(255, 255, 255, 0.86);
  color: rgba(0, 0, 0, 0.85);
}

/* ── Nav links (global) explicit colour ────────────────────── */
html[data-theme="light"] .evrguard-nav a,
html[data-theme="light"] .tab {
  color: rgba(0, 0, 0, 0.55);
}
html[data-theme="light"] .evrguard-nav a:hover,
html[data-theme="light"] .tab:hover {
  color: rgba(0, 0, 0, 0.92);
}

/* ── Verdict state classes — keep brand colours, darkened ─── */
html[data-theme="light"] .pass {
  color: #047857;
}
html[data-theme="light"] .steered {
  color: #b45309;
}
html[data-theme="light"] .blocked {
  color: #dc2626;
}
html[data-theme="light"] .ac-action {
  color: rgba(0, 0, 0, 0.85);
}

/* ── Utility white class (forces dark text in light mode) ──── */
html[data-theme="light"] .white {
  color: rgba(0, 0, 0, 0.88);
}

/* ─────────────────────────────────────────────────────────────
   Inline-style white rgba sweeper — catches every opacity variant
   0.0X through 0.9X in 10 prefix rules instead of enumerating 40+.
   ───────────────────────────────────────────────────────────── */
html[data-theme="light"] [style*="color:rgba(255,255,255,0.0"],
html[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.0"] {
  color: rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="light"] [style*="color:rgba(255,255,255,0.1"],
html[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.1"] {
  color: rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="light"] [style*="color:rgba(255,255,255,0.2"],
html[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.2"] {
  color: rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="light"] [style*="color:rgba(255,255,255,0.3"],
html[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.3"] {
  color: rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="light"] [style*="color:rgba(255,255,255,0.4"],
html[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.4"] {
  color: rgba(0, 0, 0, 0.58) !important;
}
html[data-theme="light"] [style*="color:rgba(255,255,255,0.5"],
html[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.5"] {
  color: rgba(0, 0, 0, 0.62) !important;
}
html[data-theme="light"] [style*="color:rgba(255,255,255,0.6"],
html[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.6"] {
  color: rgba(0, 0, 0, 0.68) !important;
}
html[data-theme="light"] [style*="color:rgba(255,255,255,0.7"],
html[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.7"] {
  color: rgba(0, 0, 0, 0.78) !important;
}
html[data-theme="light"] [style*="color:rgba(255,255,255,0.8"],
html[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.8"] {
  color: rgba(0, 0, 0, 0.85) !important;
}
html[data-theme="light"] [style*="color:rgba(255,255,255,0.9"],
html[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.9"] {
  color: rgba(0, 0, 0, 0.92) !important;
}

/* ─────────────────────────────────────────────────────────────
   Glow dampening — brand-coloured radial halos look muddy on
   light. Replace with depth (drop-shadow) + a much softer tint
   instead of the broadcast glow.
   ───────────────────────────────────────────────────────────── */
html[data-theme="light"] .ac-dot.pass {
  background: #10b981;
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.3);
}
html[data-theme="light"] .ac-dot.steered {
  background: #f59e0b;
  box-shadow: 0 1px 2px rgba(180, 83, 9, 0.3);
}
html[data-theme="light"] .ac-dot.blocked {
  background: #ef4444;
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.3);
}
html[data-theme="light"] .status-dot-lg {
  background: radial-gradient(circle at 40% 35%, #10b981, #047857);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12),
              0 0 18px rgba(16, 185, 129, 0.2),
              inset 0 0 20px rgba(255, 255, 255, 0.18);
}
/* Inline blue pulsing dots in the live demo timeline —
   the glow is via inline style, sweeper handles colour + we
   dampen the shadow via a broader rule: */
html[data-theme="light"] [style*="box-shadow:0 0 6px rgba(96,165,250"],
html[data-theme="light"] [style*="box-shadow: 0 0 6px rgba(96, 165, 250"] {
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3) !important;
}

/* ═════════════════════════════════════════════════════════════════
   CYCLE 2 — Muted text, translucent backgrounds, borders, pseudos

   Cycle 1 caught the prominent-white-text classes (0.7+ alpha).
   Cycle 2 sweeps the 100+ muted-text classes (0.1-0.6 alpha),
   every class with a translucent white background, every class
   with a translucent white border, the dark-hex backgrounds I
   missed, and the ::placeholder / ::after pseudo-elements.
   ═════════════════════════════════════════════════════════════════ */

/* ── Muted / secondary text classes ─────────────────────────── */
html[data-theme="light"] .hero-sub,
html[data-theme="light"] .gate-sub,
html[data-theme="light"] .page-sub,
html[data-theme="light"] .panel-sub,
html[data-theme="light"] .phase-sub,
html[data-theme="light"] .modal-sub,
html[data-theme="light"] .setup-sub,
html[data-theme="light"] .tier-price-sub,
html[data-theme="light"] .card-sub,
html[data-theme="light"] .section-title,
html[data-theme="light"] .modal-section-title,
html[data-theme="light"] .setup-frameworks-label,
html[data-theme="light"] .setup-step-hint,
html[data-theme="light"] .framework-desc,
html[data-theme="light"] .mode-desc,
html[data-theme="light"] .opt-desc,
html[data-theme="light"] .toggle-desc,
html[data-theme="light"] .modal-option-desc,
html[data-theme="light"] .mode-option,
html[data-theme="light"] .toggle-card,
html[data-theme="light"] .helper,
html[data-theme="light"] .help,
html[data-theme="light"] .meta,
html[data-theme="light"] .src,
html[data-theme="light"] .k,
html[data-theme="light"] .ex,
html[data-theme="light"] .com,
html[data-theme="light"] .count,
html[data-theme="light"] .label,
html[data-theme="light"] .stat-label,
html[data-theme="light"] .rate-label,
html[data-theme="light"] .metric-label,
html[data-theme="light"] .metric-hint,
html[data-theme="light"] .tile-label,
html[data-theme="light"] .tile-sub,
html[data-theme="light"] .plan-bar-legend,
html[data-theme="light"] .plan-free,
html[data-theme="light"] .plan-pill,
html[data-theme="light"] .pill,
html[data-theme="light"] .rule-count,
html[data-theme="light"] .rule-name,
html[data-theme="light"] .rule-strength,
html[data-theme="light"] .tier-name,
html[data-theme="light"] .tier-features,
html[data-theme="light"] .topbar-right,
html[data-theme="light"] .bullets,
html[data-theme="light"] .privacy-notice,
html[data-theme="light"] .modal-privacy,
html[data-theme="light"] .modal-note,
html[data-theme="light"] .modal-consent,
html[data-theme="light"] .consent,
html[data-theme="light"] .contact-fallback,
html[data-theme="light"] .admin-timestamp,
html[data-theme="light"] .cell-action,
html[data-theme="light"] .cell-ts,
html[data-theme="light"] .history-text,
html[data-theme="light"] .empty-hint,
html[data-theme="light"] .empty-row,
html[data-theme="light"] .empty-state,
html[data-theme="light"] .empty-text,
html[data-theme="light"] .panel-badge,
html[data-theme="light"] .panel-loading,
html[data-theme="light"] .proof-cell,
html[data-theme="light"] .quick-ref,
html[data-theme="light"] .result-proof,
html[data-theme="light"] .result-row,
html[data-theme="light"] .scard,
html[data-theme="light"] .ac-enforcement,
html[data-theme="light"] .ac-explain,
html[data-theme="light"] .ac-k,
html[data-theme="light"] .ac-v,
html[data-theme="light"] .test-verdict-row,
html[data-theme="light"] .live-pipeline,
html[data-theme="light"] .close,
html[data-theme="light"] .free,
html[data-theme="light"] .opt,
html[data-theme="light"] .footer-line,
html[data-theme="light"] .footer {
  color: rgba(0, 0, 0, 0.6);
}

/* ── Translucent-white-background classes flipped to black ─── */
html[data-theme="light"] .evr-strength-dd,
html[data-theme="light"] .evr-strength-opt,
html[data-theme="light"] .evr-strength-trigger,
html[data-theme="light"] .evr-strength-menu,
html[data-theme="light"] .pill,
html[data-theme="light"] .plan-pill,
html[data-theme="light"] .plan-free,
html[data-theme="light"] .progress,
html[data-theme="light"] .live-divider,
html[data-theme="light"] .live-pipeline,
html[data-theme="light"] .side-divider,
html[data-theme="light"] .history-item,
html[data-theme="light"] .modal-option,
html[data-theme="light"] .modal-consent,
html[data-theme="light"] .nl-helper,
html[data-theme="light"] .panel-body,
html[data-theme="light"] .opt,
html[data-theme="light"] .ex,
html[data-theme="light"] .free,
html[data-theme="light"] .connect-test,
html[data-theme="light"] .consent,
html[data-theme="light"] .framework-footnote,
html[data-theme="light"] .copy-btn,
html[data-theme="light"] .audit-modal-close {
  background: rgba(0, 0, 0, 0.03);
}

/* Toggle switch track (the pill that contains the circle handle) */
html[data-theme="light"] .toggle-switch {
  background: rgba(0, 0, 0, 0.15);
}
html[data-theme="light"] .toggle-switch.on {
  background: rgba(16, 185, 129, 0.35);
}
html[data-theme="light"] .toggle-switch::after {
  background: #FBF9F4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* `.open` (menu or modal open state) */
html[data-theme="light"] .open {
  background: rgba(0, 0, 0, 0.04);
}

/* ── Translucent-white-border classes flipped ──────────────── */
html[data-theme="light"] .action-card,
html[data-theme="light"] .admin-table,
html[data-theme="light"] .anchor-row,
html[data-theme="light"] .audit-modal-card,
html[data-theme="light"] .btn-outline,
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .close,
html[data-theme="light"] .code,
html[data-theme="light"] .code-block,
html[data-theme="light"] .connect-test,
html[data-theme="light"] .consent,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .controls,
html[data-theme="light"] .copy-btn,
html[data-theme="light"] .editor,
html[data-theme="light"] .empty-state,
html[data-theme="light"] .evr-strength-menu,
html[data-theme="light"] .evr-strength-trigger,
html[data-theme="light"] .evrguard-footer,
html[data-theme="light"] .ex,
html[data-theme="light"] .footer,
html[data-theme="light"] .framework-card,
html[data-theme="light"] .framework-footnote,
html[data-theme="light"] .gate,
html[data-theme="light"] .help,
html[data-theme="light"] .helper,
html[data-theme="light"] .history-item,
html[data-theme="light"] .history-row,
html[data-theme="light"] .input-field,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .modal,
html[data-theme="light"] .modal-cancel,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .modal-consent,
html[data-theme="light"] .modal-privacy,
html[data-theme="light"] .modal-section-title,
html[data-theme="light"] .mode-option,
html[data-theme="light"] .nl-helper,
html[data-theme="light"] .opt,
html[data-theme="light"] .outline,
html[data-theme="light"] .pagination,
html[data-theme="light"] .panel,
html[data-theme="light"] .panel-head,
html[data-theme="light"] .preview-rules,
html[data-theme="light"] .privacy-notice,
html[data-theme="light"] .quick-ref,
html[data-theme="light"] .rate-card,
html[data-theme="light"] .result-proof,
html[data-theme="light"] .setup-frameworks,
html[data-theme="light"] .stat-box,
html[data-theme="light"] .table-wrap,
html[data-theme="light"] .tabs,
html[data-theme="light"] .tier,
html[data-theme="light"] .tier-btn,
html[data-theme="light"] .tile,
html[data-theme="light"] .toggle-card,
html[data-theme="light"] .webhook-row {
  border-color: rgba(0, 0, 0, 0.1);
}

/* ── Dark hex backgrounds on class rules ───────────────────── */
html[data-theme="light"] .audit-modal-card,
html[data-theme="light"] .code-block,
html[data-theme="light"] .copy-btn,
html[data-theme="light"] .evr-strength-menu {
  background: rgba(0, 0, 0, 0.04);
}
/* .modal .modal-card .contact-card already covered above as #ffffff */

/* Strength dropdown menu (constitution page) — earlier sweepers put it
   in the translucent-inset bucket, but it's a FLOATING panel and needs
   a solid surface so the editor doesn't bleed through. */
html[data-theme="light"] .evr-strength-menu {
  background: #FBF9F4;
  border: 1px solid #D9DEE5;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
}

/* Quick-reference syntax block in the constitution Rule Writing Guide.
   Dark-mode bg is rgba(11,11,16,0.5) which bleeds through the cream
   page as a dark band. Match the neutral inset code-block treatment. */
html[data-theme="light"] .quick-ref {
  background: rgba(0, 0, 0, 0.04);
}

/* ── Specific placeholders (class + id) ────────────────────── */
html[data-theme="light"] .input-field::placeholder,
html[data-theme="light"] #actionInput::placeholder,
html[data-theme="light"] #proofInput::placeholder,
html[data-theme="light"] #apiKeyInput::placeholder {
  color: rgba(0, 0, 0, 0.32);
}

/* ── Side-logout specific colour (inherits from .side-link) ── */
html[data-theme="light"] .side-logout {
  color: rgba(0, 0, 0, 0.55);
}

/* ── Bullets and list metadata ─────────────────────────────── */
html[data-theme="light"] .bullets li,
html[data-theme="light"] .kv-grid .k,
html[data-theme="light"] .kv-grid .v {
  color: inherit;
}

/* ═════════════════════════════════════════════════════════════════
   CYCLE 3 — Final sweep: inline dark-rgba, id selectors, polish

   Things the first two cycles missed:
   1. Inline styles using rgba(11,11,16,0.X) and rgba(16,16,22,0.X)
      as backgrounds — these are the translucent dark surfaces used
      for code blocks in the live demo, and none of my existing
      sweepers caught them.
   2. The #actionInput id-based rule — ids beat class specificity,
      so this needs its own override.
   3. A few small polish items (strong/em/small inherit).
   ═════════════════════════════════════════════════════════════════ */

/* ── Inline dark-rgba background sweepers ──────────────────── */
html[data-theme="light"] [style*="background:rgba(11,11,16"],
html[data-theme="light"] [style*="background: rgba(11, 11, 16"],
html[data-theme="light"] [style*="background-color:rgba(11,11,16"],
html[data-theme="light"] [style*="background-color: rgba(11, 11, 16"] {
  background: rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] [style*="background:rgba(16,16,22"],
html[data-theme="light"] [style*="background: rgba(16, 16, 22"],
html[data-theme="light"] [style*="background-color:rgba(16,16,22"],
html[data-theme="light"] [style*="background-color: rgba(16, 16, 22"] {
  background: rgba(0, 0, 0, 0.035) !important;
}

/* ── #actionInput (id selector beats class cascade) ────────── */
html[data-theme="light"] #actionInput,
html[data-theme="light"] #proofInput,
html[data-theme="light"] #apiKeyInput {
  background: #FBF9F4;
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.92);
}

/* ── Semantic inline elements ──────────────────────────────── */
html[data-theme="light"] strong,
html[data-theme="light"] b {
  color: rgba(0, 0, 0, 0.92);
}
html[data-theme="light"] em,
html[data-theme="light"] i {
  color: inherit;
}
html[data-theme="light"] small {
  color: rgba(0, 0, 0, 0.6);
}

/* ── Selection highlight (native text selection) ───────────── */
html[data-theme="light"] ::selection {
  background: rgba(16, 185, 129, 0.2);
  color: rgba(0, 0, 0, 0.92);
}

/* ═════════════════════════════════════════════════════════════════
   CYCLE 4 — Button system + card-like surfaces I missed

   User feedback: tinted-pill buttons look washed out on white.
   Solid, higher-contrast buttons with white text are correct for
   light mode. Also caught: .gate (demo access page card), .hero
   and several other card-like surfaces had border-only overrides
   and kept their dark backgrounds.
   ═════════════════════════════════════════════════════════════════ */

/* ── Card-like surfaces I missed in Cycle 1-3 ───────────────── */
html[data-theme="light"] .gate,
html[data-theme="light"] .hero,
html[data-theme="light"] .login-box,
html[data-theme="light"] .framework-card,
html[data-theme="light"] .toggle-card,
html[data-theme="light"] .setup-frameworks,
html[data-theme="light"] .audit-modal-card,
html[data-theme="light"] .panel-head,
html[data-theme="light"] .table-wrap,
html[data-theme="light"] .tabs {
  background: #FBF9F4;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* The .gate page (demo access) carries a deep dark-shadow on dark
   to float over the radial-gradient bg. In light, we want a softer
   elevated-on-off-white look. */
html[data-theme="light"] .gate {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* ── Lock icon (blue-tinted circle on demo gate) ──────────── */
html[data-theme="light"] .lock-icon {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.25);
  color: #2563eb;
}

/* ═════════════════════════════════════════════════════════════════
   SOLID BUTTON SYSTEM — light mode

   Dark-mode buttons use `background:rgba(BRAND,0.15); color:BRAND`
   tinted-pill style. That pattern assumes a dark page bg to make
   the low-alpha fill read. On white, the fill disappears and the
   bright brand-text floats unattached.

   In light mode every action button becomes a SOLID fill with
   white text. Darker brand variants for foreground keep contrast
   ratios safely above WCAG AA for body text.
   ═════════════════════════════════════════════════════════════════ */

/* Primary / verify / unlock / submit: solid green */
html[data-theme="light"] button.primary,
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .btn-green,
html[data-theme="light"] .modal-go,
html[data-theme="light"] #verifyBtn,
html[data-theme="light"] #unlockBtn,
html[data-theme="light"] #signinBtn,
html[data-theme="light"] #requestBtn {
  background: #10b981;
  color: #ffffff;
  border: 1px solid #10b981;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(4, 120, 87, 0.18);
}
html[data-theme="light"] button.primary:hover,
html[data-theme="light"] .btn.primary:hover,
html[data-theme="light"] .btn-green:hover,
html[data-theme="light"] .modal-go:hover,
html[data-theme="light"] #verifyBtn:hover,
html[data-theme="light"] #unlockBtn:hover,
html[data-theme="light"] #signinBtn:hover,
html[data-theme="light"] #requestBtn:hover {
  background: #059669;
  border-color: #059669;
  box-shadow: 0 2px 4px rgba(4, 120, 87, 0.25);
}
html[data-theme="light"] button.primary:disabled,
html[data-theme="light"] .btn.primary:disabled {
  background: rgba(16, 185, 129, 0.35);
  border-color: rgba(16, 185, 129, 0.35);
  color: #ffffff;
  box-shadow: none;
}

/* Danger / blocked / delete: solid red */
html[data-theme="light"] .btn.danger,
html[data-theme="light"] .btn-danger,
html[data-theme="light"] .btn-red,
html[data-theme="light"] button.danger,
html[data-theme="light"] button.delete {
  background: #dc2626;
  color: #ffffff;
  border: 1px solid #dc2626;
  box-shadow: 0 1px 2px rgba(185, 28, 28, 0.18);
}
html[data-theme="light"] .btn.danger:hover,
html[data-theme="light"] .btn-danger:hover,
html[data-theme="light"] .btn-red:hover,
html[data-theme="light"] button.danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* Warning / steered: solid amber */
html[data-theme="light"] .btn.warning,
html[data-theme="light"] .btn-warning,
html[data-theme="light"] .btn-amber {
  background: #b45309;
  color: #ffffff;
  border: 1px solid #b45309;
  box-shadow: 0 1px 2px rgba(146, 64, 14, 0.18);
}
html[data-theme="light"] .btn.warning:hover,
html[data-theme="light"] .btn-warning:hover {
  background: #92400e;
  border-color: #92400e;
}

/* Secondary / outline button: light neutral fill, dark text */
html[data-theme="light"] button.secondary,
html[data-theme="light"] .btn.secondary,
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .btn-outline,
html[data-theme="light"] .tier-btn.outline {
  background: #FBF9F4;
  color: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.18);
  font-weight: 500;
}
html[data-theme="light"] button.secondary:hover,
html[data-theme="light"] .btn.secondary:hover,
html[data-theme="light"] .btn-secondary:hover,
html[data-theme="light"] .btn-outline:hover,
html[data-theme="light"] .tier-btn.outline:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.28);
}

/* Pricing tier CTA (featured): solid dark green */
html[data-theme="light"] .tier-btn:not(.outline) {
  background: #10b981;
  color: #ffffff;
  border: 1px solid #10b981;
}
html[data-theme="light"] .tier-btn:not(.outline):hover {
  background: #059669;
  border-color: #059669;
}

/* ═════════════════════════════════════════════════════════════════
   STATUS BANNERS (flash messages) — solid fills in light

   .flash.err / .flash.ok / .alert.error / etc. used tinted-dark
   fills in dark mode. On light, subtle tints look faded; users
   miss them. Use solid-fill-with-white-text variants for the
   prominent types (error, success) and keep tinted bg for the
   less-urgent warning variant.
   ═════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .flash.err,
html[data-theme="light"] .alert.error,
html[data-theme="light"] .error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid rgba(220, 38, 38, 0.25);
}
html[data-theme="light"] .flash.ok,
html[data-theme="light"] .alert.success,
html[data-theme="light"] .success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
html[data-theme="light"] .flash.warning,
html[data-theme="light"] .alert.warning,
html[data-theme="light"] .warning {
  background: #fffbeb;
  color: #78350f;
  border: 1px solid rgba(180, 83, 9, 0.3);
}

/* Verdict-state pills/badges (pass/steered/blocked) — solid fills */
html[data-theme="light"] .verdict-badge.pass,
html[data-theme="light"] .tile-pass .verdict-badge,
html[data-theme="light"] .ac-verdict.pass {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
}
html[data-theme="light"] .verdict-badge.steered,
html[data-theme="light"] .tile-steered .verdict-badge,
html[data-theme="light"] .ac-verdict.steered {
  background: #b45309;
  color: #ffffff;
  border-color: #b45309;
}
html[data-theme="light"] .verdict-badge.blocked,
html[data-theme="light"] .tile-blocked .verdict-badge,
html[data-theme="light"] .ac-verdict.blocked {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
}

/* ── Tab strip (in .gate and elsewhere) — flip bottom border ── */
html[data-theme="light"] .tabs {
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: none;
}

/* ═════════════════════════════════════════════════════════════════
   CYCLE 5 — Saturated verdict colours on pass/steered/blocked cards

   The dark CSS uses extremely faint tints (0.05-0.12 alpha) for the
   pass/steered/blocked surfaces on the playground + live demo +
   dashboard. On the #F8F9FB page bg those tints become almost
   invisible — users can't tell the verdict at a glance.

   Light-mode versions use strong tinted backgrounds with proper
   brand borders and darkened text for readable contrast. Border
   thickness bumped to 1.5px visual weight.
   ═════════════════════════════════════════════════════════════════ */

/* Playground .result cards — SOLID brand fills with white text.
   On a white page bg any tinted surface reads as "faded"; only
   fully-saturated solid fills carry real visual weight. Traffic-
   light logic: green = pass, amber = steered, red = blocked. */
html[data-theme="light"] .result.pass {
  background: #059669;
  border: 1px solid #047857;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}
html[data-theme="light"] .result.steered {
  background: #d97706;
  border: 1px solid #b45309;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.25);
}
html[data-theme="light"] .result.blocked {
  background: #dc2626;
  border: 1px solid #b91c1c;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(185, 28, 28, 0.25);
}
/* Make sure any child text (rgba-white from the dark rules, or
   inline coloured spans) stays white on these solid fills. */
html[data-theme="light"] .result.pass *,
html[data-theme="light"] .result.steered *,
html[data-theme="light"] .result.blocked * {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Live demo / agent test-verdict surfaces — same solid treatment */
html[data-theme="light"] .test-verdict.pass {
  background: #059669;
  border: 1px solid #047857;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}
html[data-theme="light"] .test-verdict.steered {
  background: #d97706;
  border: 1px solid #b45309;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.25);
}
html[data-theme="light"] .test-verdict.blocked {
  background: #dc2626;
  border: 1px solid #b91c1c;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(185, 28, 28, 0.25);
}
html[data-theme="light"] .test-verdict.pass *,
html[data-theme="light"] .test-verdict.steered *,
html[data-theme="light"] .test-verdict.blocked * {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Verdict badges (pill shape) — solid fills, white text (already set
   earlier, but explicitly override any lingering tinted-pill rules) */
html[data-theme="light"] .verdict-badge.pass,
html[data-theme="light"] .ac-verdict.pass {
  background: #10b981;
  color: #ffffff;
  border: 1px solid #10b981;
}
html[data-theme="light"] .verdict-badge.steered,
html[data-theme="light"] .ac-verdict.steered {
  background: #d97706;
  color: #ffffff;
  border: 1px solid #d97706;
}
html[data-theme="light"] .verdict-badge.blocked,
html[data-theme="light"] .ac-verdict.blocked {
  background: #dc2626;
  color: #ffffff;
  border: 1px solid #dc2626;
}

/* Dashboard summary tiles (.tile-pass / .tile-steered / .tile-blocked)
   — stronger saturated tints + visible border, keep dark-value text */
html[data-theme="light"] .tile-pass {
  background: #d1fae5;
  border-color: #10b981;
}
html[data-theme="light"] .tile-pass .tile-value,
html[data-theme="light"] .tile-pass .metric-value {
  color: #065f46;
}
html[data-theme="light"] .tile-steered {
  background: #fef3c7;
  border-color: #d97706;
}
html[data-theme="light"] .tile-steered .tile-value,
html[data-theme="light"] .tile-steered .metric-value {
  color: #78350f;
}
html[data-theme="light"] .tile-blocked {
  background: #fee2e2;
  border-color: #dc2626;
}
html[data-theme="light"] .tile-blocked .tile-value,
html[data-theme="light"] .tile-blocked .metric-value {
  color: #991b1b;
}

/* Action cards on live demo: bump left-border thickness + colour
   to match the new saturated brand values */
html[data-theme="light"] .action-card.pass {
  border-left: 3px solid #10b981;
}
html[data-theme="light"] .action-card.steered {
  border-left: 3px solid #d97706;
}
html[data-theme="light"] .action-card.blocked {
  border-left: 3px solid #dc2626;
}

/* ═════════════════════════════════════════════════════════════════
   CYCLE 6 — Table bodies (td), anchor/history rows, controls

   User flagged: audit log rows have white text on white, and the
   anchor history panel is still dark. Root causes:

   1. `td { color: rgba(255,255,255,0.65) }` was not overridden —
      I set `table` colour but specificity cascaded from td, so
      every row body stayed white.
   2. `.anchor-row` and `.history-row` use `rgba(16,16,22,0.6)` as
      their background and I only overrode `.history-item` (a
      different class) in Cycle 2.
   3. `.controls input[type=text]` / `.controls button` have
      specificity (0,2,1) beating my input override (0,1,1). Need
      more specific (or !important) overrides.
   ═════════════════════════════════════════════════════════════════ */

/* Table row bodies */
html[data-theme="light"] td {
  color: rgba(0, 0, 0, 0.78);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] th {
  color: rgba(0, 0, 0, 0.5);
}
html[data-theme="light"] thead {
  background: rgba(0, 0, 0, 0.025);
}
html[data-theme="light"] th:hover {
  color: rgba(0, 0, 0, 0.82);
}
html[data-theme="light"] tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* Anchor + history row cards (audit integrity + constitution versions) */
html[data-theme="light"] .anchor-row,
html[data-theme="light"] .history-row {
  background: #FBF9F4;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .anchor-row .date,
html[data-theme="light"] .history-row .ts {
  color: rgba(0, 0, 0, 0.85);
}
html[data-theme="light"] .anchor-row .count,
html[data-theme="light"] .history-row .count,
html[data-theme="light"] .history-row .src {
  color: rgba(0, 0, 0, 0.55);
}
html[data-theme="light"] .anchor-row .root {
  color: #2563eb;
}

/* Controls panel (filter/search bar above the audit table) */
html[data-theme="light"] .controls input[type=text],
html[data-theme="light"] .controls select {
  background: #FBF9F4;
  color: rgba(0, 0, 0, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] .controls input[type=text]:focus,
html[data-theme="light"] .controls select:focus {
  border-color: rgba(16, 185, 129, 0.55);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
html[data-theme="light"] .controls button {
  background: #FBF9F4;
  color: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.18);
}
html[data-theme="light"] .controls button:hover {
  background: rgba(0, 0, 0, 0.035);
  color: rgba(0, 0, 0, 0.92);
}
html[data-theme="light"] .controls button.green {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
}
html[data-theme="light"] .controls button.green:hover {
  background: #059669;
  border-color: #059669;
}

/* Pagination bar at the bottom of the audit table */
html[data-theme="light"] .pagination {
  color: rgba(0, 0, 0, 0.55);
  background: rgba(0, 0, 0, 0.02);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .pagination button {
  background: #FBF9F4;
  color: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Upgrade banner (pass/steered/blocked gradient tile at top of dashboard) */
html[data-theme="light"] .upgrade-banner {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(37, 99, 235, 0.08));
  border: 1px solid rgba(16, 185, 129, 0.25);
}
html[data-theme="light"] .upgrade-banner a {
  background: #FBF9F4;
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.4);
}
html[data-theme="light"] .upgrade-banner a:hover {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
}

/* Progress bar track */
html[data-theme="light"] .progress {
  background: rgba(0, 0, 0, 0.06);
}

/* Verdict-badge pills on audit log rows (small pass/steered/blocked pills
   inside cells — need same solid treatment as elsewhere) */
html[data-theme="light"] .verdict-badge {
  color: #ffffff;
}
html[data-theme="light"] .verdict-badge.pass {
  background: #10b981;
}
html[data-theme="light"] .verdict-badge.steered {
  background: #d97706;
}
html[data-theme="light"] .verdict-badge.blocked {
  background: #dc2626;
}

/* Rule tags inside cells (amber pill with rule name) */
html[data-theme="light"] .rule-tag {
  background: rgba(180, 83, 9, 0.1);
  color: #92400e;
  border: 1px solid rgba(180, 83, 9, 0.25);
}

/* .ac-label (small colour-coded labels above action cards) */
html[data-theme="light"] .ac-label.pass {
  color: #047857;
}
html[data-theme="light"] .ac-label.steered {
  color: #b45309;
}
html[data-theme="light"] .ac-label.blocked {
  color: #b91c1c;
}

/* .ac-rules / .ac-rules-tag — amber rules pills */
html[data-theme="light"] .ac-rules {
  color: #92400e;
}
html[data-theme="light"] .ac-rules-tag {
  background: rgba(180, 83, 9, 0.1);
  color: #92400e;
  border: 1px solid rgba(180, 83, 9, 0.28);
}

/* .ac-outcome (exec/deny status text on action cards) */
html[data-theme="light"] .ac-outcome.exec {
  color: #047857;
}
html[data-theme="light"] .ac-outcome.deny {
  color: #dc2626;
}

/* .ac-enforcement block (red enforcement notice under blocked actions) */
html[data-theme="light"] .ac-enforcement {
  background: #fef2f2;
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: rgba(0, 0, 0, 0.78);
}
html[data-theme="light"] .ac-enforcement-label {
  color: #b91c1c;
}

/* "Works with" inline pill row inside the Connect Your Agent card.
   Reset to inline (no card bg/shadow), darker top divider, brand-blue
   pills with readable contrast on white. */
html[data-theme="light"] .setup-frameworks {
  background: transparent;
  border: none;
  border-top: 1px solid #E2E8F0;
  box-shadow: none;
  padding-top: 18px;
}
html[data-theme="light"] .setup-frameworks-label {
  color: #64748B;
}
html[data-theme="light"] .fw-pill {
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  border: 1px solid rgba(37, 99, 235, 0.22);
}

/* ═════════════════════════════════════════════════════════════════
   CYCLE 7 — PREMIUM PASS

   Goal: light mode should read as "considered product design", not
   "template". Three levers:

     A. Shadow-first surfaces, no structural borders on cards.
        Borders say "wireframe"; multi-layer shadow says "glass".
     B. Unified cool-slate neutral palette. The page bg is cool
        (#F8F9FB — slight blue undertone from oklch 250). All
        greys should sit on that axis, not pure black-alpha.
     C. Buttons get a vertical gradient + inset top highlight +
        brand-tinted drop shadow. "Pressed glass" look.

   Every rule is under html[data-theme="light"], so dark-mode is
   untouched. Rules appear after earlier Cycle 1-6 overrides, so
   equal-specificity ties are broken in this pass's favour (later
   wins the cascade).
   ═════════════════════════════════════════════════════════════════ */

/* ─── Cool-slate text palette (replaces neutral-black-alpha) ─── */
html[data-theme="light"] body {
  color: #334155;
}
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6,
html[data-theme="light"] .panel-title,
html[data-theme="light"] .card-title,
html[data-theme="light"] .page-title,
html[data-theme="light"] .hero,
html[data-theme="light"] .gate-title,
html[data-theme="light"] .setup-title,
html[data-theme="light"] .setup-step-title,
html[data-theme="light"] .login-box,
html[data-theme="light"] .tier-price,
html[data-theme="light"] strong,
html[data-theme="light"] b {
  color: #0F172A;
  letter-spacing: -0.01em;
}
html[data-theme="light"] .metric-value,
html[data-theme="light"] .tile-value,
html[data-theme="light"] .stat-num,
html[data-theme="light"] .rate-num,
html[data-theme="light"] .num,
html[data-theme="light"] .stat-white,
html[data-theme="light"] .v {
  color: #0F172A;
  font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .panel-sub,
html[data-theme="light"] .page-sub,
html[data-theme="light"] .hero-sub,
html[data-theme="light"] .gate-sub,
html[data-theme="light"] .setup-sub,
html[data-theme="light"] .card-sub,
html[data-theme="light"] .tier-price-sub,
html[data-theme="light"] .tier-features,
html[data-theme="light"] .section-title,
html[data-theme="light"] .framework-desc,
html[data-theme="light"] .mode-desc,
html[data-theme="light"] .opt-desc,
html[data-theme="light"] .toggle-desc,
html[data-theme="light"] .helper,
html[data-theme="light"] .help,
html[data-theme="light"] .sub,
html[data-theme="light"] .meta,
html[data-theme="light"] p {
  color: #475569;
}
html[data-theme="light"] .label,
html[data-theme="light"] .tile-label,
html[data-theme="light"] .stat-label,
html[data-theme="light"] .rate-label,
html[data-theme="light"] .metric-label,
html[data-theme="light"] .side-section,
html[data-theme="light"] .evrguard-nav a,
html[data-theme="light"] .tab,
html[data-theme="light"] .tile-sub,
html[data-theme="light"] .cell-ts,
html[data-theme="light"] .cell-action,
html[data-theme="light"] .proof-cell,
html[data-theme="light"] .ts,
html[data-theme="light"] .date,
html[data-theme="light"] .url,
html[data-theme="light"] .framework-footnote,
html[data-theme="light"] .side-link,
html[data-theme="light"] .side-logout,
html[data-theme="light"] small {
  color: #64748B;
}
html[data-theme="light"] .evrguard-footer,
html[data-theme="light"] .footer,
html[data-theme="light"] .footer-line,
html[data-theme="light"] .empty-hint,
html[data-theme="light"] .empty-row,
html[data-theme="light"] .empty-state,
html[data-theme="light"] .empty-text,
html[data-theme="light"] .panel-loading,
html[data-theme="light"] .admin-timestamp {
  color: #94A3B8;
}
html[data-theme="light"] td {
  color: #334155;
  border-bottom-color: #F1F5F9;
}
html[data-theme="light"] th {
  color: #64748B;
  border-bottom-color: #E2E8F0;
  font-weight: 600;
}
html[data-theme="light"] thead {
  background: #F8FAFC;
}
html[data-theme="light"] tbody tr:hover {
  background: #F8FAFC;
}

/* ─── Shadow-first surfaces (cards, panels, modals, rows) ───── */
/* Single unified surface system. Cards float via shadow stack;
   borders removed unless the surface is inside another card or
   needs a separator (e.g. form fields). The 3-layer shadow mimics
   the Linear/Stripe "pane on off-white" depth signature. */
html[data-theme="light"] .card,
html[data-theme="light"] .tile,
html[data-theme="light"] .panel-card,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .tier,
html[data-theme="light"] .hero,
html[data-theme="light"] .login-box,
html[data-theme="light"] .gate,
html[data-theme="light"] .framework-card,
html[data-theme="light"] .toggle-card,
html[data-theme="light"] .audit-modal-card,
html[data-theme="light"] .anchor-row,
html[data-theme="light"] .history-row,
html[data-theme="light"] .action-card,
html[data-theme="light"] .result-card,
html[data-theme="light"] .modal,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .email-card {
  background: linear-gradient(180deg, #FBF9F4 0%, #FCFCFD 100%);
  border: none;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.04),
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(15, 23, 42, 0.06);
}
/* The .gate (demo access) is a primary centred surface — give it
   more presence with a deeper shadow. */
html[data-theme="light"] .gate {
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(15, 23, 42, 0.06),
    0 24px 48px rgba(15, 23, 42, 0.08);
}
/* Modals float above an overlay — deepest shadow */
html[data-theme="light"] .modal,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .email-card,
html[data-theme="light"] .audit-modal-card {
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.04),
    0 12px 24px rgba(15, 23, 42, 0.1),
    0 40px 80px rgba(15, 23, 42, 0.18);
}
/* Action cards: state-tinted diagonal gradient. The gradient hints
   at the verdict before the reader parses the badge — pass cards
   have a faint mint wash, steered cards a faint amber wash, blocked
   cards a faint rose wash. Neutral (proposed, pre-verdict) cards
   use a cool slate wash so they feel different from plain white. */
html[data-theme="light"] .action-card {
  background: linear-gradient(135deg, #FBF9F4 0%, #F8FAFC 100%);
  border: 1px solid #E2E8F0;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.02),
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(15, 23, 42, 0.05);
}
html[data-theme="light"] .action-card.pass {
  background: linear-gradient(135deg, #FBF9F4 0%, #ECFDF5 100%);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-left: 3px solid #10b981;
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.04),
    0 1px 2px rgba(5, 150, 105, 0.06),
    0 8px 24px rgba(5, 150, 105, 0.08);
}
html[data-theme="light"] .action-card.steered {
  background: linear-gradient(135deg, #FBF9F4 0%, #FFFBEB 100%);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-left: 3px solid #f59e0b;
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.04),
    0 1px 2px rgba(180, 83, 9, 0.06),
    0 8px 24px rgba(180, 83, 9, 0.08);
}
html[data-theme="light"] .action-card.blocked {
  background: linear-gradient(135deg, #FBF9F4 0%, #FEF2F2 100%);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-left: 3px solid #ef4444;
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.04),
    0 1px 2px rgba(185, 28, 28, 0.06),
    0 8px 24px rgba(185, 28, 28, 0.08);
}

/* Steering-pipeline phase cards (Step 1/2/3 with EvrGuard Verdict).
   Same diagonal-gradient treatment so the pipeline feels cohesive
   with the action cards below it. */
html[data-theme="light"] .phase-green {
  background: linear-gradient(135deg, #FBF9F4 0%, #ECFDF5 100%);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
html[data-theme="light"] .phase-blue {
  background: linear-gradient(135deg, #FBF9F4 0%, #EFF6FF 100%);
  border: 1px solid rgba(59, 130, 246, 0.25);
}

/* Steering banners (the "DENIED. Steering agent..." / "Corrected
   successfully" strip that sits inside action cards) */
html[data-theme="light"] .steering-feedback {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #1e3a8a;
}
html[data-theme="light"] .steering-correction {
  background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #5b21b6;
}
html[data-theme="light"] .steering-exhausted {
  background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #7f1d1d;
}

/* Enforcement notice block (the detailed explanation of why a rule
   triggered — dark-mode uses rgba(248,113,113,0.04)) */
html[data-theme="light"] .ac-enforcement {
  background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #450a0a;
}
html[data-theme="light"] .ac-enforcement-label {
  color: #b91c1c;
}
/* Tile states keep their verdict tints (user wants these visible);
   the shadow stack adds floating depth on top. Gradients from
   white to the tinted shade give a soft top-lit finish. */
html[data-theme="light"] .tile-pass {
  background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 100%);
  border: 1px solid #34d399;
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.08),
    0 1px 2px rgba(5, 150, 105, 0.08),
    0 8px 24px rgba(5, 150, 105, 0.12);
}
html[data-theme="light"] .tile-steered {
  background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1px solid #f59e0b;
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.08),
    0 1px 2px rgba(180, 83, 9, 0.08),
    0 8px 24px rgba(180, 83, 9, 0.12);
}
html[data-theme="light"] .tile-blocked {
  background: linear-gradient(180deg, #FEF2F2 0%, #FEE2E2 100%);
  border: 1px solid #ef4444;
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.08),
    0 1px 2px rgba(185, 28, 28, 0.08),
    0 8px 24px rgba(185, 28, 28, 0.12);
}

/* ─── Sidebar on the dashboard — cool grey divider, no border ─ */
html[data-theme="light"] .sidebar {
  background: #FBF9F4;
  border-right: 1px solid #E2E8F0;
}
html[data-theme="light"] .side-divider {
  background: #E2E8F0;
}
html[data-theme="light"] .side-link.active {
  background: #ECFDF5;
  border-left-color: #10b981;
  color: #047857;
}
html[data-theme="light"] .side-link:hover {
  background: #F1F5F9;
  color: #0F172A;
}

/* ─── Header: subtle shadow instead of 1px border ─────────── */
html[data-theme="light"] .evrguard-header {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  box-shadow: 0 1px 0 0 rgba(15, 23, 42, 0.06), 0 8px 24px -16px rgba(15, 23, 42, 0.06);
}
html[data-theme="light"] .evrguard-nav a.active {
  color: #047857;
}

/* ─── Ambient: gentle cool radial glow behind everything ───── */
html[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 70% 50% at 15% 5%, rgba(16, 185, 129, 0.045) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 10%, rgba(99, 102, 241, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 120%, rgba(15, 23, 42, 0.03) 0%, transparent 50%);
  opacity: 1;
}

/* ─── Form fields — deeper, cooler, with focus ring ────────── */
html[data-theme="light"] input[type=text],
html[data-theme="light"] input[type=email],
html[data-theme="light"] input[type=password],
html[data-theme="light"] input[type=number],
html[data-theme="light"] input[type=search],
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] #actionInput,
html[data-theme="light"] #proofInput,
html[data-theme="light"] #apiKeyInput,
html[data-theme="light"] .controls input[type=text],
html[data-theme="light"] .controls select {
  background: #FBF9F4;
  color: #0F172A;
  border: 1px solid #E2E8F0;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder,
html[data-theme="light"] .input-field::placeholder,
html[data-theme="light"] #actionInput::placeholder,
html[data-theme="light"] #proofInput::placeholder,
html[data-theme="light"] #apiKeyInput::placeholder {
  color: #94A3B8;
}
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
  border-color: #10b981;
  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, 0.04),
    0 0 0 4px rgba(16, 185, 129, 0.12);
  outline: none;
}

/* ─── Premium button sheen (primary = brand green gradient) ── */
html[data-theme="light"] button.primary,
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .btn-green,
html[data-theme="light"] .modal-go,
html[data-theme="light"] #verifyBtn,
html[data-theme="light"] #unlockBtn,
html[data-theme="light"] #signinBtn,
html[data-theme="light"] #requestBtn,
html[data-theme="light"] .tier-btn:not(.outline),
html[data-theme="light"] .controls button.green {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
  color: #FFFFFF;
  border: 1px solid #047857;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(5, 150, 105, 0.35),
    0 2px 6px rgba(5, 150, 105, 0.18);
  font-weight: 600;
  letter-spacing: -0.005em;
}
html[data-theme="light"] button.primary:hover,
html[data-theme="light"] .btn.primary:hover,
html[data-theme="light"] .btn-green:hover,
html[data-theme="light"] .modal-go:hover,
html[data-theme="light"] #verifyBtn:hover,
html[data-theme="light"] #unlockBtn:hover,
html[data-theme="light"] #signinBtn:hover,
html[data-theme="light"] #requestBtn:hover,
html[data-theme="light"] .tier-btn:not(.outline):hover,
html[data-theme="light"] .controls button.green:hover {
  background: linear-gradient(180deg, #059669 0%, #047857 100%);
  border-color: #065f46;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 2px 4px rgba(5, 150, 105, 0.45),
    0 4px 10px rgba(5, 150, 105, 0.22);
}
html[data-theme="light"] button.primary:active {
  background: linear-gradient(180deg, #047857 0%, #065f46 100%);
  box-shadow:
    inset 0 2px 4px rgba(6, 95, 70, 0.4),
    0 1px 1px rgba(5, 150, 105, 0.2);
}

/* Danger red button with matching sheen */
html[data-theme="light"] .btn.danger,
html[data-theme="light"] .btn-danger,
html[data-theme="light"] .btn-red,
html[data-theme="light"] button.danger,
html[data-theme="light"] button.delete {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  color: #FFFFFF;
  border: 1px solid #b91c1c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(185, 28, 28, 0.35),
    0 2px 6px rgba(185, 28, 28, 0.18);
}
html[data-theme="light"] .btn.danger:hover,
html[data-theme="light"] .btn-danger:hover,
html[data-theme="light"] .btn-red:hover,
html[data-theme="light"] button.danger:hover {
  background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
  border-color: #991b1b;
}

/* Warning amber button */
html[data-theme="light"] .btn.warning,
html[data-theme="light"] .btn-warning,
html[data-theme="light"] .btn-amber {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  color: #FFFFFF;
  border: 1px solid #b45309;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(180, 83, 9, 0.35),
    0 2px 6px rgba(180, 83, 9, 0.18);
}

/* Secondary / outline button — clean white with subtle shadow + slate border */
html[data-theme="light"] button.secondary,
html[data-theme="light"] .btn.secondary,
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .btn-outline,
html[data-theme="light"] .tier-btn.outline,
html[data-theme="light"] .controls button {
  background: #FBF9F4;
  color: #0F172A;
  border: 1px solid #CBD5E1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  font-weight: 500;
}
html[data-theme="light"] button.secondary:hover,
html[data-theme="light"] .btn.secondary:hover,
html[data-theme="light"] .btn-secondary:hover,
html[data-theme="light"] .btn-outline:hover,
html[data-theme="light"] .tier-btn.outline:hover,
html[data-theme="light"] .controls button:hover {
  background: #F8FAFC;
  border-color: #94A3B8;
}

/* ─── Code blocks — cool slate bg ─────────────────────────── */
html[data-theme="light"] code,
html[data-theme="light"] pre,
html[data-theme="light"] .code-block,
html[data-theme="light"] .codebox {
  background: #F1F5F9;
  color: #0F172A;
  border: 1px solid #E2E8F0;
}

/* ─── Toggle button (header) with premium look ─────────────── */
html[data-theme="light"] .evr-theme-toggle {
  border: 1px solid #CBD5E1;
  background: #FBF9F4;
  color: #475569;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] .evr-theme-toggle:hover {
  background: #F1F5F9;
  border-color: #94A3B8;
  color: #0F172A;
}

/* ═════════════════════════════════════════════════════════════════
   CYCLE 8 — Demo page .panel, enforcement-mode, nested tiles

   The live demo (live_agent_v2.html) uses .panel as the primary
   surface for every section (Steering Pipeline, Session Stats,
   Task History, Regulatory Compliance, Constitution). That class
   wasn't in any earlier override list, so every panel rendered
   with its dark .panel {background:rgba(16,16,22,0.75)} intact.

   Also: the enforcement-mode cards (.mode-option) and the nested
   tiles (.stat-box, .rate-card, .history-item) needed surface
   treatment. The .input-field class override has higher
   specificity than my generic input[type=text] rule so it stuck.
   ═════════════════════════════════════════════════════════════════ */

/* ─── .panel surface — demo-page ONLY ──────────────────────────
   The demo page (live_agent_v2.html) uses .panel as a visible frame
   with .panel-head + .panel-body children (dark: bg + border). The
   dashboard (evrguard_dashboard_html.py) uses .panel as an abstract
   display:none grouping that holds .panel-title + .panel-sub + card
   siblings (dark: transparent, no frame). Applying a white card
   background to both makes the dashboard look like the section title
   sits in the corner of a box that was never designed to contain it.
   :has() lets us target ONLY the demo-page variant. */
html[data-theme="light"] .panel:has(> .panel-body) {
  background: linear-gradient(180deg, #FBF9F4 0%, #FCFCFD 100%);
  border: none;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.04),
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(15, 23, 42, 0.06);
  backdrop-filter: none;
}
html[data-theme="light"] .panel-head {
  background: transparent;
  border-bottom: 1px solid #E2E8F0;
}
html[data-theme="light"] .panel-label {
  color: #0F172A;
}
html[data-theme="light"] .panel-badge {
  color: #64748B;
}
html[data-theme="light"] .panel-body {
  background: transparent;
}

/* ─── Nested tiles inside .panel — lighter treatment (no heavy
       shadow since they're already within a shadowed surface) ── */
html[data-theme="light"] .stat-box,
html[data-theme="light"] .rate-card,
html[data-theme="light"] .summary-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  box-shadow: none;
}
html[data-theme="light"] .stat-num,
html[data-theme="light"] .rate-num,
html[data-theme="light"] .stat-white .stat-num {
  color: #0F172A;
}
html[data-theme="light"] .stat-label,
html[data-theme="light"] .rate-label {
  color: #64748B;
}

/* ─── History item (list row inside a panel) ───────────────── */
html[data-theme="light"] .history-item {
  background: transparent;
  border: 1px solid transparent;
}
html[data-theme="light"] .history-item:hover {
  background: #F1F5F9;
  border-color: #E2E8F0;
}
html[data-theme="light"] .history-text {
  color: #475569;
}
html[data-theme="light"] .empty-text {
  color: #94A3B8;
}
html[data-theme="light"] .empty-hint {
  color: #CBD5E1;
}

/* ─── Enforcement Mode cards (.mode-option) ────────────────── */
html[data-theme="light"] .mode-option {
  background: #FBF9F4;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: all 0.15s ease;
}
html[data-theme="light"] .mode-option:hover {
  border-color: #CBD5E1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
html[data-theme="light"] .mode-option.on {
  background: linear-gradient(180deg, #FBF9F4 0%, #ECFDF5 100%);
  border: 2px solid #10b981;
  box-shadow:
    0 0 0 3px rgba(16, 185, 129, 0.1),
    0 2px 6px rgba(5, 150, 105, 0.12);
}
html[data-theme="light"] .mode-name {
  color: #0F172A;
}
html[data-theme="light"] .mode-desc {
  color: #64748B;
}

/* ─── .input-field class (not caught by input[type=text]) ──── */
html[data-theme="light"] .input-field {
  background: #FBF9F4;
  color: #0F172A;
  border: 1px solid #E2E8F0;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
html[data-theme="light"] .input-field::placeholder {
  color: #94A3B8;
}
html[data-theme="light"] .input-field:focus {
  border-color: #10b981;
  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, 0.04),
    0 0 0 4px rgba(16, 185, 129, 0.12);
}

/* ─── Demo-page hero + sub text cooling ────────────────────── */
html[data-theme="light"] .hero h1 {
  color: #0F172A;
}
html[data-theme="light"] .hero-sub {
  color: #64748B;
}
html[data-theme="light"] .phase-sub {
  color: #94A3B8;
}
html[data-theme="light"] .ac-k {
  color: #94A3B8;
}
html[data-theme="light"] .ac-v {
  color: #334155;
}
html[data-theme="light"] .ac-action {
  color: #0F172A;
}
html[data-theme="light"] .ac-explain {
  color: #64748B;
}
html[data-theme="light"] .ac-enforcement {
  color: #475569;
}

/* ─── Modal (demo page) — primary surface treatment ───────── */
html[data-theme="light"] .modal h2 {
  color: #0F172A;
}
html[data-theme="light"] .modal-sub {
  color: #64748B;
}
html[data-theme="light"] .modal-section-title {
  color: #64748B;
  border-bottom: 1px solid #E2E8F0;
}
html[data-theme="light"] .modal-option {
  background: #FBF9F4;
  border: 1px solid #E2E8F0;
}
html[data-theme="light"] .modal-option:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
}
html[data-theme="light"] .modal-option-name {
  color: #0F172A;
}
html[data-theme="light"] .modal-option-desc {
  color: #64748B;
}
html[data-theme="light"] .modal-note {
  color: #94A3B8;
}

/* ─── Footer ───────────────────────────────────────────────── */
html[data-theme="light"] .footer span {
  color: #94A3B8;
}

/* ═════════════════════════════════════════════════════════════════
   CYCLE 9 — Signup success page (Your API key is ready)

   The free-signup success screen shows the new API key in a dark
   pill with green text, a dark Python code example, a dark warning
   box and a green CTA pill. Classes: .key-box, .warn, .code, .btn-go.
   Each keeps its dark-mode styling because none of my earlier passes
   caught them specifically.
   ═════════════════════════════════════════════════════════════════ */

/* The API-key display pill — prominent, brand-green accent */
html[data-theme="light"] .key-box {
  background: linear-gradient(135deg, #FBF9F4 0%, #ECFDF5 100%);
  border: 2px solid #10b981;
  color: #047857;
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.08),
    0 1px 2px rgba(5, 150, 105, 0.08),
    0 4px 12px rgba(5, 150, 105, 0.08);
}

/* Warning block ("Save this key now, treat it like a password") */
html[data-theme="light"] .warn {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #78350f;
}
html[data-theme="light"] .warn strong {
  color: #92400e;
}

/* Python code example block */
html[data-theme="light"] .code {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  color: #0F172A;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

/* "Log in to dashboard" CTA — solid green gradient with sheen */
html[data-theme="light"] .btn-go {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
  color: #FFFFFF;
  border: 1px solid #047857;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(5, 150, 105, 0.35),
    0 2px 6px rgba(5, 150, 105, 0.18);
  font-weight: 600;
}
html[data-theme="light"] .btn-go:hover {
  background: linear-gradient(180deg, #059669 0%, #047857 100%);
  border-color: #065f46;
}

/* Copy button when it flashes "Copied" */
html[data-theme="light"] .copy-btn.copied {
  background: #ECFDF5;
  color: #047857;
  border-color: #10b981;
}

/* Subscription-success page uses same classes, so it inherits these. */

/* ═════════════════════════════════════════════════════════════════
   CYCLE 10 — "Silver" polish (Apple / Linear settings sheet feel)

   User feedback: white-on-white-bg cards on the dashboard read as
   "bright/cheap". Apple System Settings, Linear sheets, Notion
   sidebars all use a slightly darker page bg + cards with a subtle
   cool-silver gradient + a 1px top inset white highlight that mimics
   polished metal. The contrast between page surface and card
   surface is what makes cards feel "lifted" rather than "stickered".

   Changes:
     - Page bg darkens from #F8F9FB to #F2F4F8 (still cool, more grey)
     - Cards get a subtle white-to-silver vertical gradient
     - Inset 1px top highlight (the "polished metal" detail)
     - Cooler borders (#E4E7EC slate-200ish) instead of pure black-alpha
     - Headings and labels stay slate but ~5% darker for crispness

   State-tinted cards (pass / steered / blocked / featured tier) keep
   their coloured gradients from earlier cycles — only NEUTRAL cards
   get this silver treatment.
   ═════════════════════════════════════════════════════════════════ */

/* Page bg meaningfully cooler so white cards visibly lift off it.
   Apple System Settings uses ~#E5E5E7 (silver-grey ~20 points
   darker than card white) and that's what makes cards read as
   "elevated panes" rather than "white squares on white".  */
html[data-theme="light"] body {
  background: #F5F2EB;
}

/* Neutral card surfaces — clean white top with subtle silver fade,
   stronger border + lifted shadow so cards visibly stand off the
   silver page bg.
   .setup-frameworks deliberately NOT in this list — it's an inline
   pill row with just a top divider, not a card. */
html[data-theme="light"] .card,
html[data-theme="light"] .tile,
html[data-theme="light"] .panel-card,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .hero,
html[data-theme="light"] .login-box,
html[data-theme="light"] .gate,
html[data-theme="light"] .framework-card,
html[data-theme="light"] .toggle-card,
html[data-theme="light"] .audit-modal-card,
html[data-theme="light"] .anchor-row,
html[data-theme="light"] .history-row,
html[data-theme="light"] .modal,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .email-card {
  background: linear-gradient(180deg, #FBF9F4 0%, #F8FAFC 100%);
  border: 1px solid #D9DEE5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 1px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(15, 23, 42, 0.06),
    0 12px 32px rgba(15, 23, 42, 0.06);
}

/* Demo-page .panel surface — same lifted silver treatment */
html[data-theme="light"] .panel:has(> .panel-body) {
  background: linear-gradient(180deg, #FBF9F4 0%, #F8FAFC 100%);
  border: 1px solid #D9DEE5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 1px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(15, 23, 42, 0.06),
    0 12px 32px rgba(15, 23, 42, 0.06);
}

/* Modals float higher — keep deep shadow but apply silver gradient */
html[data-theme="light"] .modal,
html[data-theme="light"] .modal-card,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .email-card,
html[data-theme="light"] .audit-modal-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 24px rgba(15, 23, 42, 0.1),
    0 40px 80px rgba(15, 23, 42, 0.18);
}

/* The .gate (demo access page) — silver with deeper shadow for hero feel */
html[data-theme="light"] .gate {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 4px 12px rgba(15, 23, 42, 0.06),
    0 24px 56px rgba(15, 23, 42, 0.1);
}

/* Action cards keep state-tinted gradients but get the inset top
   highlight too — the highlight is what gives the "polished" feel
   regardless of the card's tint. */
html[data-theme="light"] .action-card {
  background: linear-gradient(135deg, #FBF9F4 0%, #F1F3F6 100%);
  border: 1px solid #E4E7EC;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 14px rgba(15, 23, 42, 0.05);
}
html[data-theme="light"] .action-card.pass {
  background: linear-gradient(135deg, #FBF9F4 0%, #ECFDF5 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(5, 150, 105, 0.06),
    0 8px 24px rgba(5, 150, 105, 0.08);
}
html[data-theme="light"] .action-card.steered {
  background: linear-gradient(135deg, #FBF9F4 0%, #FFFBEB 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(180, 83, 9, 0.06),
    0 8px 24px rgba(180, 83, 9, 0.08);
}
html[data-theme="light"] .action-card.blocked {
  background: linear-gradient(135deg, #FBF9F4 0%, #FEF2F2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(185, 28, 28, 0.06),
    0 8px 24px rgba(185, 28, 28, 0.08);
}

/* Verdict tile cards (dashboard summary) — same inset highlight */
html[data-theme="light"] .tile-pass {
  background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(5, 150, 105, 0.08),
    0 8px 24px rgba(5, 150, 105, 0.12);
}
html[data-theme="light"] .tile-steered {
  background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(180, 83, 9, 0.08),
    0 8px 24px rgba(180, 83, 9, 0.12);
}
html[data-theme="light"] .tile-blocked {
  background: linear-gradient(180deg, #FEF2F2 0%, #FEE2E2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(185, 28, 28, 0.08),
    0 8px 24px rgba(185, 28, 28, 0.12);
}

/* Header glass — frosted over the cool silver page */
html[data-theme="light"] .evrguard-header {
  background: rgba(245, 242, 235, 0.7);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid #D9DEE5;
  box-shadow: 0 1px 0 0 rgba(15, 23, 42, 0.04);
}

/* Sidebar matches the silver page tone */
html[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, #EEF1F5 0%, #E8EBF0 100%);
  border-right: 1px solid #D9DEE5;
}

/* Form fields get a subtle silver inset depth */
html[data-theme="light"] input[type=text],
html[data-theme="light"] input[type=email],
html[data-theme="light"] input[type=password],
html[data-theme="light"] input[type=number],
html[data-theme="light"] input[type=search],
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .input-field,
html[data-theme="light"] #actionInput,
html[data-theme="light"] #proofInput,
html[data-theme="light"] #apiKeyInput {
  background: #FBF9F4;
  border: 1px solid #D9DEE5;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Stronger heading colour for crispness on silver */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] .panel-title,
html[data-theme="light"] .card-title,
html[data-theme="light"] .page-title {
  color: #0B1220;
}


/* ─── Remaining demo-page buttons (solid + sheen pattern) ──── */
html[data-theme="light"] .send-btn,
html[data-theme="light"] .modal-submit {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
  color: #FFFFFF;
  border: 1px solid #047857;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(5, 150, 105, 0.35),
    0 2px 6px rgba(5, 150, 105, 0.18);
  font-weight: 600;
}
html[data-theme="light"] .send-btn:hover,
html[data-theme="light"] .modal-submit:hover {
  background: linear-gradient(180deg, #059669 0%, #047857 100%);
  border-color: #065f46;
}
html[data-theme="light"] .send-btn:disabled {
  background: #E2E8F0;
  color: #94A3B8;
  border-color: #CBD5E1;
  box-shadow: none;
}
html[data-theme="light"] .send-btn.running {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  color: #FFFFFF;
  border-color: #b45309;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(180, 83, 9, 0.35);
}

/* Blue informational pill button (Dashboard shortcut under stats) */
html[data-theme="light"] .demo-dash-btn {
  background: #FBF9F4;
  color: #2563eb;
  border: 1px solid #BFDBFE;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.08);
}
html[data-theme="light"] .demo-dash-btn:hover {
  background: #EFF6FF;
  border-color: #93C5FD;
  color: #1d4ed8;
}

/* Stat numbers (brand-coloured metric displays) */
html[data-theme="light"] .stat-green .stat-num {
  color: #047857;
}
html[data-theme="light"] .stat-red .stat-num {
  color: #b91c1c;
}
html[data-theme="light"] .stat-blue .stat-num {
  color: #1d4ed8;
}

/* ─── Compliance packs (locked/unlocked badges) ────────────── */
html[data-theme="light"] .pack-locked,
html[data-theme="light"] .framework-locked,
html[data-theme="light"] .compliance-pack {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: #475569;
}
html[data-theme="light"] .pack-unlocked,
html[data-theme="light"] .compliance-pack.unlocked {
  background: linear-gradient(180deg, #FBF9F4 0%, #ECFDF5 100%);
  border-color: #10b981;
  color: #065f46;
}

/* ─── Constitution rule list items ─────────────────────────── */
html[data-theme="light"] .rule-item,
html[data-theme="light"] .rule-line,
html[data-theme="light"] .rule-name-item {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: #334155;
}

/* ─── Inline-style dark pill sweepers (catches inline buttons
       using the low-alpha tinted-pill pattern in demo page JS) ─ */
html[data-theme="light"] [style*="background:rgba(52,211,153,0.15)"],
html[data-theme="light"] [style*="background: rgba(52, 211, 153, 0.15)"],
html[data-theme="light"] [style*="background:rgba(52,211,153,0.12)"] {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
  color: #FFFFFF !important;
  border-color: #047857 !important;
}
