/* Klarkorb Night: charcoal surfaces and restrained palette-sensitive accents. */
.theme-toggle {
  display:grid;place-items:center;flex-shrink:0;width:37px;height:37px;
  border:1px solid var(--palette-border);border-radius:13px;
  background:var(--palette-surface);color:var(--palette-primary);
  box-shadow:0 3px 12px #10231b0c;
  transition:background .2s,border-color .2s,transform .2s;
}
.theme-toggle:active {transform:scale(.94)}
.brand-period {color:var(--palette-muted)}
.appearance-section {margin:19px 0 21px}
.appearance-label {display:block;font-size:11px;letter-spacing:.055em;font-weight:800;color:var(--palette-muted);margin:0 0 9px}
.appearance-choices {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:5px;border-radius:17px;border:1px solid var(--palette-border);background:var(--palette-soft)}
.appearance-choice {display:flex;justify-content:center;align-items:center;gap:8px;min-height:43px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--palette-muted);font-size:12px;font-weight:800}
.appearance-choice.active {color:var(--palette-primary);background:var(--palette-surface);border-color:var(--palette-border);box-shadow:0 3px 13px #00000012}
.palette-heading {margin-bottom:10px}

html[data-mode="dark"][data-palette="sage"] {--night-accent:#afd6c7;--night-glow:#335f56}
html[data-mode="dark"][data-palette="slate"] {--night-accent:#b4d0e3;--night-glow:#385567}
html[data-mode="dark"][data-palette="rose"] {--night-accent:#e8b5be;--night-glow:#66434e}
html[data-mode="dark"][data-palette="crimson"] {--night-accent:#ff9cb2;--night-glow:#77354c}
html[data-mode="dark"][data-palette="mauve"] {--night-accent:#d9bbd5;--night-glow:#594560}
html[data-mode="dark"][data-palette="olive"] {--night-accent:#e1d985;--night-glow:#68613b}
html[data-mode="dark"][data-palette="taupe"] {--night-accent:#ddc5ac;--night-glow:#5c5147}

html[data-mode="dark"] {
  color-scheme:dark;
  --palette-bg:#11191c;
  --palette-surface:#1b2529;
  --palette-soft:color-mix(in srgb,var(--night-accent) 7%,#222e32);
  --palette-soft2:color-mix(in srgb,var(--night-accent) 11%,#29363a);
  --palette-swatch:color-mix(in srgb,var(--night-accent) 17%,#344448);
  --palette-border:color-mix(in srgb,var(--night-accent) 10%,#3b4b50);
  --palette-muted:#b0bfc1;
  --palette-primary:var(--night-accent);
  --palette-dark:#121b1e;
  --palette-ink:#f0f4f1;
  --palette-nav:#192327;
  --bg:var(--palette-bg);
  --ink:var(--palette-ink);
  --muted:var(--palette-muted);
  --line:var(--palette-border);
  --green:var(--palette-primary);
  --green2:var(--palette-primary);
  --mint:var(--palette-soft);
  --white:var(--palette-surface);
  background:var(--palette-bg);
  color:var(--palette-ink);
}
html[data-mode="dark"] .stage {
  background:radial-gradient(ellipse at 75% 14%,color-mix(in srgb,var(--night-glow) 40%,transparent),transparent 44%),
             radial-gradient(ellipse at 2% 94%,#26363a65,transparent 48%),#0d1316;
}
html[data-mode="dark"] .stage-copy {color:var(--palette-ink)}
html[data-mode="dark"] .stage-copy>p:not(.eyebrow) {color:var(--palette-muted)}
html[data-mode="dark"] .phone {
  border-color:#35474c;
  box-shadow:0 40px 110px #00000080,0 0 0 1px #ffffff10;
}
html[data-mode="dark"] .phone:before {box-shadow:inset 0 0 0 1px #ffffff1a}
html[data-mode="dark"] .app-header {border-bottom:1px solid #ffffff08}
html[data-mode="dark"] .brand-icon,
html[data-mode="dark"] .stage-mark-icon {
  background:color-mix(in srgb,var(--night-accent) 14%,#263a3b);
  color:var(--palette-primary);
  border:1px solid color-mix(in srgb,var(--night-accent) 25%,transparent);
}
html[data-mode="dark"] .theme-toggle {
  background:linear-gradient(155deg,#303d41,#222e32);
  border-color:color-mix(in srgb,var(--night-accent) 35%,#3a494e);
  box-shadow:0 4px 15px #00000028,inset 0 1px 0 #ffffff12;
}
html[data-mode="dark"] .bottom-nav {
  background:color-mix(in srgb,var(--palette-nav) 92%,transparent);
  border-top-color:#3b494d;
  box-shadow:0 -12px 24px #00000035;
}
html[data-mode="dark"] .nav-item {color:#9caaad}
html[data-mode="dark"] .nav-item.active {color:var(--palette-primary)}
html[data-mode="dark"] .nav-bubble {background:var(--palette-soft2);color:var(--palette-primary)}

html[data-mode="dark"] .home-cost-card {
  border:1px solid color-mix(in srgb,var(--night-accent) 36%,#314448);
  background:radial-gradient(ellipse at 106% -10%,color-mix(in srgb,var(--night-glow) 60%,transparent),transparent 75%),
             linear-gradient(135deg,#293b3f,#1e2d31 75%,#19282b);
  color:#f7f7f3;
  box-shadow:0 16px 36px #0000003a,inset 0 1px 0 #ffffff15;
}
html[data-mode="dark"] .home-cost-top {color:#e6efeb}
html[data-mode="dark"] .home-cost-count {background:#ffffff16;border-color:#ffffff27}
html[data-mode="dark"] .home-budget-metric,
html[data-mode="dark"] .home-spent-tile,
html[data-mode="dark"] .home-savings-row,
html[data-mode="dark"] .home-guide-teaser,
html[data-mode="dark"] .home-idle-note {
  box-shadow:inset 0 1px 0 #ffffff0c,0 4px 15px #00000017;
}
html[data-mode="dark"] .home-budget-metric {background:var(--palette-soft2);color:var(--palette-ink)}
html[data-mode="dark"] .home-budget-left {background:var(--palette-soft)}
html[data-mode="dark"] .home-budget-metric .metric-label,
html[data-mode="dark"] .home-spent-details>span,
html[data-mode="dark"] .home-savings-copy small {color:var(--palette-muted)}
html[data-mode="dark"] .home-spent-details strong,
html[data-mode="dark"] .home-budget-left strong {color:var(--palette-primary)}
html[data-mode="dark"] .home-spent-icon,
html[data-mode="dark"] .home-savings-icon {background:var(--palette-swatch);color:var(--palette-primary)}
html[data-mode="dark"] .home-budget-left.over,
html[data-mode="dark"] .list-compact-stats>button.over {background:#47312e;border-color:#76534e}
html[data-mode="dark"] .home-budget-left.over strong,
html[data-mode="dark"] .home-budget-left.over .metric-label,
html[data-mode="dark"] .list-compact-stats>button.over strong {color:#ffbaaa}
html[data-mode="dark"] .home-subtitle,
html[data-mode="dark"] .page-sub,
html[data-mode="dark"] .mini-label,
html[data-mode="dark"] .info-foot,
html[data-mode="dark"] .fine-print,
html[data-mode="dark"] .field-help,
html[data-mode="dark"] .sheet-note,
html[data-mode="dark"] .home-usage p,
html[data-mode="dark"] .home-usage-head,
html[data-mode="dark"] .history-item span,
html[data-mode="dark"] .soft-card p,
html[data-mode="dark"] .summary-hero p,
html[data-mode="dark"] .empty-state p,
html[data-mode="dark"] .stat-card span,
html[data-mode="dark"] .swap-product span,
html[data-mode="dark"] .swap-product small {color:var(--palette-muted)}
html[data-mode="dark"] .home-usage-head strong {color:var(--palette-ink)}
html[data-mode="dark"] .home-usage-track {background:#334246}
html[data-mode="dark"] .home-usage-track .usage-spent {background:var(--palette-primary)}
html[data-mode="dark"] .home-usage-track .usage-planned {background:var(--palette-swatch)}
html[data-mode="dark"] .period-switch button.active,
html[data-mode="dark"] .view-switch-btn.active {box-shadow:inset 0 1px 0 #ffffff10,0 2px 7px #00000020}
html[data-mode="dark"] .palette-trigger {background:var(--palette-surface);color:var(--palette-primary)}
html[data-mode="dark"] .palette-mini-dot {background:var(--palette-primary)}

html[data-mode="dark"] .primary-btn,
html[data-mode="dark"] .guide-filter.active,
html[data-mode="dark"] .guide-icon-btn.on,
html[data-mode="dark"] .guide-challenge-btn.completed,
html[data-mode="dark"] .tip-card .check.checked,
html[data-mode="dark"] .tile-check.checked svg {
  background:var(--palette-primary);border-color:var(--palette-primary);color:#142023;
}
html[data-mode="dark"] .primary-btn {box-shadow:0 9px 24px color-mix(in srgb,var(--night-glow) 38%,transparent)}
html[data-mode="dark"] .guide-daily {
  background:linear-gradient(125deg,#293b3f,#202f33);
  border-color:color-mix(in srgb,var(--night-accent) 30%,#354a4e);
  color:#f4f6f2;
}
html[data-mode="dark"] .guide-daily-top {color:var(--palette-primary)}
html[data-mode="dark"] .guide-progress-top {color:var(--palette-primary)}
html[data-mode="dark"] .guide-progress-track>span {background:var(--palette-primary)}
html[data-mode="dark"] .guide-category-icon,
html[data-mode="dark"] .guide-tip-no,
html[data-mode="dark"] .home-guide-icon,
html[data-mode="dark"] .tile-quantity,
html[data-mode="dark"] .tip-card .product-emoji {color:var(--palette-primary);background:var(--palette-swatch)}
html[data-mode="dark"] .guide-tip-card.is-done {opacity:.82}
html[data-mode="dark"] .guide-icon-btn.on[data-action="guide-favorite"] svg {fill:currentColor}
html[data-mode="dark"] .tip-card.struck .product-name,
html[data-mode="dark"] .item-tile.is-checked .tile-name,
html[data-mode="dark"] .item-tile.is-checked .tile-price {color:var(--palette-muted)}
html[data-mode="dark"] .tip-card .check,
html[data-mode="dark"] .tile-check svg {background:var(--palette-surface);color:var(--palette-muted)}
html[data-mode="dark"] .tip-card .check.checked,
html[data-mode="dark"] .tile-check.checked svg {color:#142023}

html[data-mode="dark"] .sheet {
  background:linear-gradient(180deg,#233135,#192427);
  box-shadow:0 -18px 65px #00000085;
  color:var(--palette-ink);
}
html[data-mode="dark"] .sheet::backdrop {background:#050b0dc9;backdrop-filter:blur(7px)}
html[data-mode="dark"] .sheet-handle {background:#56686b}
html[data-mode="dark"] .sheet-title {color:var(--palette-ink)}
html[data-mode="dark"] .sheet-sub,
html[data-mode="dark"] .form-section label,
html[data-mode="dark"] .field-label {color:var(--palette-muted)}
html[data-mode="dark"] .form-section input,
html[data-mode="dark"] .form-section select,
html[data-mode="dark"] .field-input,
html[data-mode="dark"] .search-wrap input {
  background:#111a1e;color:var(--palette-ink);border-color:var(--palette-border);
}
html[data-mode="dark"] input::placeholder {color:#99a8aa}
html[data-mode="dark"] .list-search-box {background:var(--palette-surface)}
html[data-mode="dark"] .list-search-box input {background:transparent;border:0;color:var(--palette-ink)}
html[data-mode="dark"] .search-wrap .search-icon {color:var(--palette-muted)}
html[data-mode="dark"] .chip {background:var(--palette-surface);border-color:var(--palette-border);color:var(--palette-muted)}
html[data-mode="dark"] .chip.active {color:var(--palette-primary);background:var(--palette-soft)}
html[data-mode="dark"] .product-emoji {background:var(--palette-soft2)}
html[data-mode="dark"] .sheet-close,
html[data-mode="dark"] .stepper-btn {color:var(--palette-primary);background:var(--palette-soft)}
html[data-mode="dark"] .summary-hero,
html[data-mode="dark"] .empty-state,
html[data-mode="dark"] .prompt-card,
html[data-mode="dark"] .soft-card,
html[data-mode="dark"] .stat-card,
html[data-mode="dark"] .history-item,
html[data-mode="dark"] .saving-card {background:var(--palette-surface);border-color:var(--palette-border)}
html[data-mode="dark"] .soft-card[style*="background:#eaf5ed"] {background:var(--palette-soft)!important}
html[data-mode="dark"] .soft-card[style*="background:#eaf5ed"] [style*="color:#"] {color:var(--palette-muted)!important}
html[data-mode="dark"] .prompt-card p {color:var(--palette-muted)}
html[data-mode="dark"] .danger-btn {background:#392927;color:#ffb0a2;border-color:#755047}
html[data-mode="dark"] .checkout-price-warning {background:#3b3029;color:#f5c7a0}
html[data-mode="dark"] .sticky-action.checkout-action {
  background:linear-gradient(0deg,var(--palette-bg) 72%,transparent);
}
html[data-mode="dark"] .basket-peek {
  background:color-mix(in srgb,#1a2629 93%,transparent);
  box-shadow:0 20px 48px #00000095;
}
html[data-mode="dark"] .toast {background:#e0e9e4;color:#152123;box-shadow:0 15px 38px #00000065}
html[data-mode="dark"] button:focus-visible,
html[data-mode="dark"] input:focus-visible,
html[data-mode="dark"] select:focus-visible {outline-color:var(--palette-primary)}
@media (prefers-reduced-motion:reduce){.theme-toggle{transition:none}}