:root, [data-theme=dark] {
  color-scheme: dark;
  --bg: #12151C;
  --card: #1B1F2A;
  --text: #E7E9EF;
  --muted: #A0A8B8;
  --line: #2C3344;
  --gold: #E8C872;
  --ink: #1C160C;
}
[data-theme=light] {
  color-scheme: light;
  --bg: #F3F4F6;
  --card: #FFFFFF;
  --text: #1B2330;
  --muted: #5E6A7D;
  --line: #E4E7EC;
  --gold: #7C6212;
  --ink: #FFFFFF;
}
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, "Segoe UI", Helvetica, sans-serif; }
main { max-width: 880px; margin: 0 auto; padding: 48px 20px 80px; }
h1 { font-size: 40px; font-weight: 650; margin: 0 0 12px; }
.lead { font-size: 18px; max-width: 40rem; }
.word { color: var(--gold); font-weight: 650; font-size: 20px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 20px; margin-top: 24px; }
label { display: block; margin: 12px 0 4px; }
input, select { width: 100%; box-sizing: border-box; padding: 10px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; }
button { margin-top: 16px; background: var(--gold); color: var(--ink); border: 0; border-radius: 6px; padding: 12px 18px; font-weight: 650; }
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.muted { color: var(--muted); }
@media (max-width: 700px) { .prices { grid-template-columns: 1fr; } }