:root {
  color-scheme: light;
  --surface: #fff;
  --chart-color: #39745b;
  --chart-fill: #39745b14;
}
.header-actions { display:flex; gap:16px; align-items:center; }
.theme-toggle { display:flex; align-items:center; gap:8px; min-height:44px; padding:9px 13px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:inherit; font-size:17px; }
.theme-toggle span { font-size:13px; font-weight:600; }
.theme-toggle:hover { border-color:var(--chart-color); }
.history-controls { display:flex; gap:6px; padding:5px; margin:0 0 24px; width:fit-content; max-width:100%; background:#f1f4ee; border-radius:9px; }
.history-controls button { border:0; background:transparent; color:var(--muted); font-size:14px; font-weight:600; padding:11px 14px; min-height:44px; border-radius:6px; }
.history-controls button[aria-pressed="true"] { background:var(--surface); color:inherit; box-shadow:0 1px 5px #00000012; }
.chart-heading { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:12px; margin-bottom:8px; }
.chart-scroll { overflow-x:auto; overscroll-behavior-x:contain; }
.price-chart { display:block; width:100%; max-height:330px; }
.chart-grid { stroke:var(--line); stroke-dasharray:4 5; }
.chart-label { fill:var(--muted); font-family:inherit; font-size:12px; }
.chart-line { stroke:var(--chart-color); stroke-width:3; fill:none; stroke-linejoin:round; stroke-linecap:round; }
.chart-area { fill:var(--chart-fill); }
.point-target { fill:transparent; }
.point-dot { stroke:var(--surface); stroke-width:3; fill:var(--chart-color); }
.chart-point { cursor:pointer; }
.chart-point[aria-pressed="true"] .point-dot,.chart-point:hover .point-dot,.chart-point:focus .point-dot { r:8; stroke:var(--chart-color); fill:var(--surface); }
.chart-selection { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0 4px; border-top:1px solid var(--line); }
.chart-selection>div:first-child { display:grid; gap:5px; font-size:14px; }
.chart-selection>div:first-child span { color:var(--muted); font-size:12px; }
.chart-note { margin:20px 0 0; font-size:12px; color:var(--muted); }
[data-theme="dark"] {
  color-scheme:dark;
  background:#101a17;
  color:#e5ede7;
  --surface:#192720;
  --muted:#a5b5ab;
  --line:#33463a;
  --chart-color:#b4da8a;
  --chart-fill:#b4da8a16;
}
[data-theme="dark"] :is(.topbar,.stat,.product,.panel,.mobile-nav,.empty,.button.secondary,input,select) { background:var(--surface); color:inherit; border-color:var(--line); }
[data-theme="dark"] :is(.sidebar nav a.active,.mobile-nav a.active,.history-controls) { background:#2a3c2d; color:#e0efc8; }
[data-theme="dark"] :is(.button,.brand-icon,.preview-panel,.detail-summary .stat:first-child,#toast) { background:#284c3e; color:#f0f5ec; }
[data-theme="dark"] .button { border-color:#4a7258; }
[data-theme="dark"] .button:hover { background:#365e49; }
[data-theme="dark"] .button.secondary:hover { background:#2a3c2d; }
[data-theme="dark"] .tip { background:#233223; border-color:#364936; color:#bacaad; }
[data-theme="dark"] .tip strong { color:#def0c3; }
[data-theme="dark"] .stat-symbol { color:#c9dfa7; }
[data-theme="dark"] .variation.up { background:#492f28; color:#ffb69e; }
[data-theme="dark"] .variation.down { background:#293d2b; color:#b5dda0; }
[data-theme="dark"] .variation.equal { background:#303c34; color:#c3d0c7; }
[data-theme="dark"] .product-icon { background:#3b3329; color:#d6b184; }
[data-theme="dark"] .product-icon.blue { background:#27383d; color:#a0c7d4; }
[data-theme="dark"] .product-icon.green { background:#333b26; color:#c2d393; }
[data-theme="dark"] .product-icon.pink { background:#412f31; color:#dbaca8; }
[data-theme="dark"] .error { color:#ffb69e; }
[data-theme="dark"] input::placeholder { color:#a2b0a6; }
@media(max-width:760px) {
  .header-actions { gap:6px; }
  .header-actions .demo-badge { display:none; }
  .theme-toggle { padding:9px 10px; }
  .chart-heading { flex-direction:column; gap:5px; }
  .chart-selection { flex-wrap:wrap; gap:16px; }
  .chart-selection .change { width:100%; }
  .history-controls { width:100%; }
  .history-controls button:first-child { flex:1; }
}