:root {
  color-scheme: dark;
  --background: #11101b;
  --surface: #1c1929;
  --edge: #423852;
  --text: #faf7ff;
  --muted: #c9c0d8;
  --accent: #dfff4e;
  --focus: #74eaff;
  --card-bg: #faf8fc;
  --card-ink: #211829;
  --card-price: #415b35;
  --card-line: #e5e0eb;
  --card-media: #eae5ee;
  --field-bg: #faf8ff;
  --field-ink: #201728;
  --field-border: #b8aac9;
  --paper: var(--text);
  --ink: var(--background);
  --lime: var(--accent);
  --line: var(--edge);
  color: var(--text);
  background: var(--background);
}

body {
  color: var(--text);
  background: radial-gradient(ellipse at 85% 5%, #29203e 0%, transparent 34%), var(--background);
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.top {
  background: linear-gradient(110deg, #19182e, #10101a 57%, #20152f);
  border-bottom-color: #9571eb;
}
.logo > span, .brand > span, .footer .logo > span {
  background: var(--accent);
  color: #17111c;
}
.skip, .button.lime, .button.solid {
  background: var(--accent);
  color: #17111c;
}
.button.lime:hover, .button.solid:hover { background: #eeff98; }
.button.outline, .button.secondary {
  background: var(--surface);
  border-color: var(--edge);
  color: var(--text);
}
.button.outline:hover, .button.secondary:hover { border-color: var(--accent); background: var(--surface); }
.hero:has(.hero-media) {
  color: var(--text);
  background: linear-gradient(120deg,#1c1929,#241c35);
  border: 1px solid var(--edge);
}
.hero-copy > p, .hero-note { color: var(--muted); }
.hero-media { background: #251c35; }
.hero-media-note {
  background: #161020;
  border-color: var(--edge);
  color: var(--text);
}
.hero-media-note strong, .text-link, .method a, .catalog-note a { color: var(--accent); }
.filters, .calculator {
  background: var(--surface);
  color: var(--text);
}
.filters input, .filters select, .controls input, .controls select, .calculator input {
  color-scheme: light;
  background: var(--field-bg);
  color: var(--field-ink);
  border-color: var(--field-border);
}
.product, .item {
  background: var(--card-bg);
  color: var(--card-ink);
  border-color: var(--card-line);
}
.product:hover, .item:hover { border-color: var(--accent); }
.product-image, .item img { background: var(--card-media); }
.product-category, .product-cost span, .product-budget { color: #574a62; }
.product-budget:hover { color: var(--card-ink); }
.product-cost strong, .item-price { color: var(--card-price); }
.shipping { background: #251c35; border: 1px solid var(--edge); }
.method h2 { color: var(--text); }
.footer { background: #191426; border-top: 1px solid var(--edge); color: var(--text); }
.footer p, .footer-inner > a:last-child { color: var(--muted); }

.status-box{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,2.8fr);gap:16px 24px;margin-top:20px;padding:20px;border:1px solid var(--edge);border-left:3px solid var(--accent);border-radius:10px;background:var(--surface)}
.status-box h2{font-size:23px;letter-spacing:-.03em;margin-bottom:5px}
.status-box p{font-size:14px;color:var(--muted)}
.status-box p+p{margin-top:8px}
.calculator fieldset{min-width:0;margin:14px 0 0;padding:0 10px 8px;border:1px solid var(--edge);border-radius:7px}
.calculator legend{padding:0 5px;font-weight:750}
.calculator fieldset p{color:var(--text)}
.calculator input[aria-invalid=true]{border:2px solid #be4a5a}
#difference{min-height:2.5em;color:var(--accent);font-weight:700}
@media(max-width:600px){.status-box{grid-template-columns:1fr;gap:10px;padding:14px}}

:root { --surface: #181628; --focus: #63f4ff; }
.hero { box-shadow: 0 12px 0 #ff58bc22; }
.product { display: flex; flex-direction: column; }
.product > a { flex: 1; height: auto; }
.product-links { padding: 0 13px 13px; }
.product-links a {
  display: block;
  border: 1px solid #1f2a18;
  border-radius: 6px;
  background: #26331d;
  color: #fff;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}
.product-links a:hover, .product-links a:focus-visible {
  background: #dfff4e;
  color: #161b11;
}