/* Light mode. Dark stays the default; html[data-theme="light"] switches.
   Ground is a soft sage off-white (not pure white) tuned to the green accents;
   the globe keeps its greens; glass becomes milky white instead of smoky black. */
html[data-theme="light"] {
  --bg: #EEF3EF;
  --bg-2: #E6EDE8;
  --ink: #10201A;
  --ink-2: rgba(16, 32, 26, .74);
  --ink-3: rgba(16, 32, 26, .54);
  --line: rgba(16, 48, 36, .09);
  --line-2: rgba(16, 48, 36, .15);
  --glass: rgba(255, 255, 255, .58);
  --glass-grad: linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, .42));
  --accent: #0FA875;
  --accent-2: #00A07D;
  --mint: #0B7552;
  --deep: rgba(16, 168, 117, .10);
  --up: #0C9467;
  --down: #D2464B;
  --warn: #B7791F;
  --gold: #A9771F;
  --shadow-in: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(16, 48, 36, .05), 0 8px 24px -14px rgba(16, 48, 36, .18);
  color-scheme: light;
}
html[data-theme="light"] body { background: var(--bg); }

/* ---------- ground & chrome ---------- */
html[data-theme="light"] .bg-glow {
  background:
    radial-gradient(60% 40% at 50% -5%, rgba(16, 188, 131, .16), transparent 70%),
    radial-gradient(30% 25% at 90% 10%, rgba(227, 192, 126, .14), transparent 70%),
    radial-gradient(rgba(16, 64, 46, .07) 1px, transparent 1px) 0 0 / 22px 22px;
}
html[data-theme="light"] .topbar { background: linear-gradient(var(--bg), rgba(238, 243, 239, .78)); }
html[data-theme="light"] .pillnav a { color: rgba(16, 32, 26, .62); }
html[data-theme="light"] .pillnav a:hover { color: var(--ink); }
html[data-theme="light"] .pillnav a[aria-current="page"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(16, 48, 36, .12); }

/* ---------- headings & big numbers: dark gradient instead of white ---------- */
html[data-theme="light"] .h-grad { background: radial-gradient(120% 60% at 50% 50%, #0E241C 0%, #4B6B5F 100%); -webkit-background-clip: text; background-clip: text; }
html[data-theme="light"] .big { background: radial-gradient(120% 70% at 30% 40%, #0E241C 0%, #557468 100%); -webkit-background-clip: text; background-clip: text; }

/* ---------- buttons ---------- */
html[data-theme="light"] .btn.primary, html[data-theme="light"] .btn.glow {
  background: linear-gradient(180deg, #16C98E, #0DA472); color: #fff; border-color: transparent;
  box-shadow: 0 0 0 1px rgba(13, 164, 114, .35), 0 8px 24px -8px rgba(16, 188, 131, .65), inset 0 1px 0 rgba(255, 255, 255, .35); }
html[data-theme="light"] .btn.primary:hover, html[data-theme="light"] .btn.glow:hover { background: linear-gradient(180deg, #19D697, #0FB07B); }
html[data-theme="light"] .btn.ghost { background: rgba(255, 255, 255, .55); }
html[data-theme="light"] .btn.ghost:hover { border-color: rgba(16, 48, 36, .28); background: #fff; }
html[data-theme="light"] .btn.glow-gold { background: linear-gradient(180deg, #F7D58E, #E2AE4B); color: #2A1B04; }
html[data-theme="light"] .ibtn { background: rgba(255, 255, 255, .6); }
html[data-theme="light"] .ibtn:hover { background: #fff; }

/* ---------- badges & status ---------- */
html[data-theme="light"] .badge { border-color: rgba(16, 140, 98, .25); }
html[data-theme="light"] .badge.demo { background: rgba(240, 182, 90, .16); border-color: rgba(183, 121, 31, .4); color: #8A5A12; }
html[data-theme="light"] .badge.gold { background: rgba(240, 190, 100, .18); border-color: rgba(169, 119, 31, .4); color: #7A5310; }
html[data-theme="light"] .badge.muted-badge { background: rgba(16, 48, 36, .05); }
html[data-theme="light"] .badge.conf-medium { color: #2D4C8F; background: rgba(80, 110, 200, .1); border-color: rgba(80, 110, 200, .3); }
html[data-theme="light"] .badge.conf-low { color: #8A5A12; background: rgba(240, 182, 90, .14); border-color: rgba(183, 121, 31, .35); }
html[data-theme="light"] .status-pill { background: rgba(255, 255, 255, .6); }
html[data-theme="light"] .status-pill[data-s="live"] { color: #0B7552; border-color: rgba(16, 168, 117, .45); background: rgba(16, 188, 131, .10); }
html[data-theme="light"] .status-pill[data-s="delayed"] { color: #8A5A12; border-color: rgba(183, 121, 31, .45); background: rgba(240, 182, 90, .12); }
html[data-theme="light"] .status-pill[data-s="reconnecting"] { color: #B23338; border-color: rgba(210, 70, 75, .4); background: rgba(210, 70, 75, .08); }
html[data-theme="light"] .demo-banner { border-color: rgba(183, 121, 31, .35); background: rgba(255, 255, 255, .45); }
html[data-theme="light"] .demo-ctrl button[aria-pressed="true"] { background: #fff; }
html[data-theme="light"] .sym { border-color: rgba(16, 140, 98, .22); }

/* ---------- cards, tables, controls ---------- */
html[data-theme="light"] .price-card:hover { border-color: rgba(16, 168, 117, .4); }
html[data-theme="light"] .ktable tr:hover td { background: rgba(16, 168, 117, .05); }
html[data-theme="light"] .seg { background: rgba(255, 255, 255, .5); }
html[data-theme="light"] .seg button { color: rgba(16, 32, 26, .62); }
html[data-theme="light"] .seg button[aria-pressed="true"], html[data-theme="light"] .seg button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(16, 48, 36, .14); }
html[data-theme="light"] .calc .seg.tabs button[aria-selected="true"] { background: linear-gradient(180deg, #16C98E, #0DA472); color: #fff; box-shadow: 0 6px 18px -8px rgba(16, 188, 131, .7); }
html[data-theme="light"] .karat-chips button { background: rgba(255, 255, 255, .55); }
html[data-theme="light"] .karat-chips button[aria-pressed="true"] { background: rgba(16, 188, 131, .12); border-color: rgba(16, 168, 117, .55); color: #0B7552; }
html[data-theme="light"] .karat-chips input,
html[data-theme="light"] .field input,
html[data-theme="light"] .asst-input input,
html[data-theme="light"] .row-input input,
html[data-theme="light"] .shop-filters input, html[data-theme="light"] .shop-filters select,
html[data-theme="light"] .dlg select, html[data-theme="light"] .dlg textarea, html[data-theme="light"] #alNote { background: rgba(255, 255, 255, .8); }
html[data-theme="light"] select option { background: #fff; }
html[data-theme="light"] .field input:focus { box-shadow: 0 0 0 3px rgba(16, 188, 131, .18); }
html[data-theme="light"] .hint, html[data-theme="light"] .warn { color: #8A5A12; }
html[data-theme="light"] .errors { color: #B23338; }

/* ---------- chart shell ---------- */
html[data-theme="light"] .chart-wrap { background: rgba(255, 255, 255, .7); }
html[data-theme="light"] .sw.hist { background: repeating-linear-gradient(135deg, rgba(16, 48, 36, .22) 0 2px, rgba(16, 48, 36, .05) 2px 5px); border-color: rgba(16, 48, 36, .3); }

/* ---------- calculator ---------- */
html[data-theme="light"] .stat { background: rgba(255, 255, 255, .55); }
html[data-theme="light"] .stat.hl, html[data-theme="light"] .calc .stat.hl { border-color: rgba(16, 168, 117, .35); background: linear-gradient(rgba(16, 188, 131, .10), rgba(16, 188, 131, .03)); }
html[data-theme="light"] .cmp-sum { border-color: rgba(16, 168, 117, .3); background: rgba(16, 188, 131, .06); }

/* ---------- assistant ---------- */
html[data-theme="light"] .assistant { background: rgba(248, 251, 249, .92); box-shadow: var(--shadow-in), 0 30px 80px -30px rgba(16, 48, 36, .35); }
html[data-theme="light"] .ctx-chip, html[data-theme="light"] .acard { background: rgba(255, 255, 255, .7); }
html[data-theme="light"] .msg.user { background: rgba(16, 168, 117, .12); }
html[data-theme="light"] .sugg button { background: rgba(255, 255, 255, .6); }
html[data-theme="light"] .sugg button:hover { border-color: rgba(16, 48, 36, .3); }

/* ---------- landing (market page) ---------- */
html[data-theme="light"] .frame, html[data-theme="light"] .frame-glow { background: rgba(255, 255, 255, .62); background-image: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .35));
  border-color: rgba(16, 48, 36, .11); box-shadow: var(--shadow-in), 0 40px 100px -40px rgba(16, 48, 36, .30); }
html[data-theme="light"] .frame .card { background: rgba(255, 255, 255, .7); background-image: none; }
html[data-theme="light"] .frame-bar .dots i { background: rgba(16, 48, 36, .14); }
html[data-theme="light"] .stage-stats li { border-bottom-color: rgba(16, 168, 117, .28); }
html[data-theme="light"] .stage-stats .l { color: #0C8A60; }
html[data-theme="light"] .kw-tag { background: rgba(255, 248, 232, .92); color: #7A5310; border-color: rgba(169, 119, 31, .45); }
html[data-theme="light"] .ingot-line { color: #7A5310; }
html[data-theme="light"] .tcard { background: rgba(255, 255, 255, .7); background-image: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .45)); border-color: rgba(16, 48, 36, .1); }
html[data-theme="light"] .tcard:hover { border-color: rgba(16, 168, 117, .35); }
html[data-theme="light"] .tcard.featured { border-color: rgba(16, 168, 117, .45); background-image: linear-gradient(rgba(16, 188, 131, .16), rgba(255, 255, 255, .6) 55%); }
html[data-theme="light"] .tcard li::before { color: #0C9467; }

/* ---------- phase 2 screens ---------- */
html[data-theme="light"] .shop-card, html[data-theme="light"] .al-item { background: rgba(255, 255, 255, .62); }
html[data-theme="light"] .shop-card:hover { border-color: rgba(16, 168, 117, .35); }
html[data-theme="light"] .shop-name:hover, html[data-theme="light"] .shop-dl a { color: #0C8A60; }
html[data-theme="light"] .al-item.st-triggered { background: rgba(16, 188, 131, .08); }
html[data-theme="light"] .al-hit { color: #0B7552; }
html[data-theme="light"] .dlg { background: #F8FBF9; color: var(--ink); box-shadow: 0 0 0 1px rgba(16, 168, 117, .15), 0 30px 80px -20px rgba(16, 48, 36, .35); }
html[data-theme="light"] .dlg::backdrop { background: rgba(30, 50, 42, .35); }
html[data-theme="light"] .toast { background: rgba(255, 255, 255, .96); box-shadow: 0 20px 50px -12px rgba(16, 48, 36, .3); }
html[data-theme="light"] .acard-list a, html[data-theme="light"] .sources a, html[data-theme="light"] .foot a { text-decoration-color: rgba(16, 48, 36, .25); }

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  html[data-theme="light"] .tabbar { background: rgba(250, 252, 250, .92); box-shadow: var(--shadow-in), 0 18px 40px -12px rgba(16, 48, 36, .3); }
  html[data-theme="light"] .tabbar [aria-current="page"] { color: #0B7552; background: rgba(16, 188, 131, .10); }
  html[data-theme="light"] .assistant { background-color: rgba(248, 251, 249, .98); }
  html[data-theme="light"] .stage-stats { background: rgba(238, 243, 239, .78); }
  html[data-theme="light"] .fab { background: linear-gradient(180deg, #16C98E, #0DA472); color: #fff; }
}

/* ---------- theme toggle button ---------- */
.btn.theme-btn { width: 38px; min-width: 38px; height: 32px; padding: 0; border-radius: var(--r-ctl); flex: none; }
.btn.theme-btn svg { flex: none; }
.theme-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .i-sun { display: none; }
html[data-theme="light"] .theme-btn .i-sun { display: block; }
html[data-theme="light"] .theme-btn .i-moon { display: none; }
/* smooth switch, but never animate on first paint */
html.theme-anim, html.theme-anim body, html.theme-anim .card, html.theme-anim .frame, html.theme-anim .topbar, html.theme-anim .btn, html.theme-anim .seg button {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important; }
@media (max-width: 900px) {
  html[data-theme="light"] .stage-stats { background: rgba(240, 245, 241, .88); border-color: rgba(16, 48, 36, .10); box-shadow: 0 14px 34px -20px rgba(16, 48, 36, .35); }
}