html[data-theme="moonlit"] {
  color-scheme: dark;
  --page: #0d1026; --paper: #171a37; --felt: #1b1d3f; --ink: #f6edff;
  --muted: #d1c5de; --line: #8a76ad; --gold: #efcb83;
  --chart-bg-one: #29234b; --chart-bg-two: #1d3451;
  --chart-panel: #111528e8; --chart-card: #191e34; --chart-border: #303754;
  --chart-input: #0a0e1d; --chart-input-border: #353b57;
  --chart-copy: #b8bfd1; --chart-faint: #9aa6bc; --chart-accent: #d9bd83;
  --chart-accent-ink: #151626; --chart-pill: #173248; --chart-pill-ink: #a9d0e3;
  --chart-shadow: 0 12px 42px #0004; --chart-wallpaper: url('/static/moonlit-card-wallpaper.webp');
}
html[data-theme="atelier"] {
  color-scheme: light;
  --page: #f6f7fb; --paper: #fff; --felt: #f0f1fb; --ink: #242842;
  --muted: #637089; --line: #d4d9ea; --gold: #6557cb;
  --chart-bg-one: #e1e5ff; --chart-bg-two: #ffe8e5;
  --chart-panel: #fffffff0; --chart-card: #f5f6fc; --chart-border: #d4d9ea;
  --chart-input: #fff; --chart-input-border: #c9cfe1;
  --chart-copy: #505d78; --chart-faint: #637089; --chart-accent: #6557cb;
  --chart-accent-ink: #fff; --chart-pill: #ebeafe; --chart-pill-ink: #5145b9;
  --chart-shadow: 0 15px 38px #39427114, 0 3px 9px #3942710b;
  --chart-wallpaper: url('/static/atelier-card-wallpaper.webp');
}
html[data-theme="witching"] {
  color-scheme: dark;
  --page: #101316; --paper: #211a22; --felt: #1b2020; --ink: #f9eee4;
  --muted: #cfbcb9; --line: #785d63; --gold: #ffbc73;
  --chart-bg-one: #533129; --chart-bg-two: #283d39;
  --chart-panel: #211a22ed; --chart-card: #2c232b; --chart-border: #785d63;
  --chart-input: #171b1d; --chart-input-border: #795d63;
  --chart-copy: #d0c0ba; --chart-faint: #b9aaa7; --chart-accent: #ffbc73;
  --chart-accent-ink: #211a22; --chart-pill: #35423c; --chart-pill-ink: #d1e2c9;
  --chart-shadow: 0 18px 38px #0508079c, inset 0 1px #ffd6a51c;
  --chart-wallpaper: url('/static/witching-card-wallpaper.webp');
}

html[data-theme] { background: var(--page); color: var(--ink); }
html[data-theme] body {
  color: var(--ink);
  background: radial-gradient(circle at 15% 5%, var(--chart-bg-one), transparent 34%),
              radial-gradient(circle at 85% 12%, var(--chart-bg-two), transparent 28%), var(--page);
}
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: var(--chart-wallpaper) center / 100% 100% no-repeat; opacity: .28; }
html[data-theme="atelier"] body::before { opacity: .16; }
html[data-theme="witching"] body::before { opacity: .34; }
main, .chart-shell { position: relative; z-index: 1; }
main { padding-top: 24px; }

.chart-shell { max-width: 1280px; margin: auto; padding: 0 28px; }
.chart-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 18px; border-bottom: 2px dashed var(--line); font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; }
.chart-brand { color: var(--gold); text-decoration: none; font-weight: 900; font-size: 22px; letter-spacing: 1px; white-space: nowrap; }
.chart-header nav { display: flex; gap: 18px; align-items: center; }
.chart-nav-link { color: var(--muted); background: none; border: none; padding: 7px 0; font-size: 13px; text-decoration: none; white-space: nowrap; }
.chart-nav-link:is(:hover, :focus-visible) { color: var(--ink); }
.chart-nav-link.is-current { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--gold); }
.chart-nav-link span { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 3px; background: var(--felt); color: var(--ink); }
.chart-theme-toggle { flex: none; min-height: 38px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--gold); font-size: 11px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.chart-theme-toggle:hover { border-color: var(--gold); transform: translateY(-2px); }
html[data-theme="atelier"] .chart-header { border-bottom: 1px solid #dce1ef; font-family: 'Segoe UI', Arial, sans-serif; }
html[data-theme="atelier"] .chart-brand { color: #252a48; }
html[data-theme="atelier"] .chart-nav-link:is(:hover, :focus-visible), html[data-theme="atelier"] .chart-nav-link.is-current { color: #5145b9; }
html[data-theme="atelier"] .chart-theme-toggle { color: #5145b9; box-shadow: 0 5px 14px #494bb218; }
html[data-theme="witching"] .chart-header { border-bottom: 1px solid #a0706759; font-family: 'Segoe UI', Arial, sans-serif; }
html[data-theme="witching"] .chart-brand { color: #ffd29d; text-shadow: 0 0 16px #f18c4f5e; }
html[data-theme="witching"] .chart-nav-link:is(:hover, :focus-visible), html[data-theme="witching"] .chart-nav-link.is-current { color: #ffcf97; }
html[data-theme="witching"] .chart-theme-toggle { border-color: #aa795e; background: #2b2024; color: #ffd19a; box-shadow: 0 0 18px #e58e4d36; }

html[data-theme] .intro, html[data-theme] .guide-intro, html[data-theme] .big-card p,
html[data-theme] .retro-box p, html[data-theme] .planet-detail, html[data-theme] .aspect-detail,
html[data-theme] .house-chip, html[data-theme] .ai-status { color: var(--chart-copy); }
html[data-theme] .intro { text-align: left; }
html[data-theme] .panel { background: var(--chart-panel); border-color: var(--chart-border); box-shadow: var(--chart-shadow); }
html[data-theme] h2, html[data-theme] .eyebrow, html[data-theme] .big-card .symbol,
html[data-theme] .house-chip strong, html[data-theme] .ai-output h3,
html[data-theme] .planet-detail strong, html[data-theme] .aspect-detail strong { color: var(--gold); }
html[data-theme] label, html[data-theme] .planet-item summary > span:last-child,
html[data-theme] .aspect-item summary > span:last-child { color: var(--chart-copy); }
html[data-theme] input, html[data-theme] select { background: var(--chart-input); border-color: var(--chart-input-border); color: var(--ink); }
html[data-theme] input:focus, html[data-theme] select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold), transparent 78%); }
html[data-theme] :is(button, a, input, select, summary):focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
html[data-theme] .primary { background: var(--chart-accent); color: var(--chart-accent-ink); }
html[data-theme] .primary:hover { filter: brightness(1.1); }
html[data-theme] .city-search button { background: var(--paper); color: var(--gold); border-color: var(--line); }
html[data-theme] .city-search button:hover { background: var(--felt); }
html[data-theme] .city-option { background: var(--chart-card); color: var(--ink); border-color: var(--chart-border); }
html[data-theme] .city-option:hover, html[data-theme] .city-option:focus { background: var(--felt); border-color: var(--gold); }
html[data-theme] .city-option small, html[data-theme] .city-note, html[data-theme] .date-hint,
html[data-theme] .hint, html[data-theme] .footer, html[data-theme] .muted,
html[data-theme] .planet-item summary small, html[data-theme] .big-card small { color: var(--chart-faint); }
html[data-theme] .pill { background: var(--chart-pill); color: var(--chart-pill-ink); }
html[data-theme] .big-card, html[data-theme] .retro-box, html[data-theme] .house-chip,
html[data-theme] .ai-output { background: var(--chart-card); border-color: var(--chart-border); }
html[data-theme] .planet-item, html[data-theme] .aspect-item, html[data-theme] .more-list,
html[data-theme] .house-guide { border-color: var(--chart-border); }
html[data-theme] .planet-item summary:hover, html[data-theme] .aspect-item summary:hover,
html[data-theme] .planet-item[open] summary, html[data-theme] .aspect-item[open] summary,
html[data-theme] .more-list summary, html[data-theme] .house-guide summary { color: var(--gold); }
html[data-theme] .status, html[data-theme] a { color: var(--gold); }
html[data-theme] .chart-nav-link { color: var(--muted); }
html[data-theme] .chart-nav-link.is-current, html[data-theme] .chart-nav-link:is(:hover, :focus-visible) { color: var(--ink); }
html[data-theme="atelier"] .chart-nav-link.is-current, html[data-theme="atelier"] .chart-nav-link:is(:hover, :focus-visible) { color: #5145b9; }
html[data-theme="witching"] .chart-nav-link.is-current, html[data-theme="witching"] .chart-nav-link:is(:hover, :focus-visible) { color: #ffcf97; }
html[data-theme] .chart-brand { color: var(--gold); }
html[data-theme="atelier"] .chart-brand { color: #252a48; }
html[data-theme="witching"] .chart-brand { color: #ffd29d; }
html[data-theme] .status { min-height: 20px; }
[hidden] { display: none !important; }

.astro-tabs { display: inline-flex; flex-wrap: wrap; gap: 8px; margin: 19px 0 20px; padding: 5px; border: 1px solid var(--chart-border); border-radius: 14px; background: var(--chart-panel); }
.astro-tab { padding: 11px 16px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--chart-copy); font-size: 13px; font-weight: 750; }
.astro-tab:is(:hover, :focus-visible) { color: var(--gold); }
.astro-tab.is-current { color: var(--chart-accent-ink); background: var(--chart-accent); }
#weekly-view { display: grid; gap: 20px; }
.weekly-controls, .weekly-summary, .weekly-ai, .weekly-guide { padding: 24px; }
.weekly-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.weekly-heading h2 { margin-bottom: 9px; }
.weekly-heading .guide-intro { margin-bottom: 0; }
.weekly-range { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.weekly-range strong { min-width: 170px; text-align: center; color: var(--ink); }
.weekly-secondary { padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--gold); font-size: 12px; font-weight: 700; }
.weekly-secondary:is(:hover, :focus-visible) { background: var(--felt); }
.weekly-secondary:disabled { opacity: .45; cursor: not-allowed; }
.weekly-summary h2 { font-family: Georgia, serif; text-transform: none; letter-spacing: -.02em; font-size: clamp(24px, 3vw, 34px); margin: 8px 0 13px; }
.weekly-events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.weekly-event { min-width: 0; border: 1px solid var(--chart-border); border-radius: 14px; background: var(--chart-card); padding: 17px; }
.weekly-event:first-child { grid-column: 1 / -1; }
.weekly-event-kicker { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--chart-faint); font-size: 11px; }
.weekly-event-badge { color: var(--chart-pill-ink); background: var(--chart-pill); padding: 4px 8px; border-radius: 99px; }
.weekly-event h3 { color: var(--gold); font-size: 17px; margin: 12px 0 8px; }
.weekly-event p { color: var(--chart-copy); font-size: 13px; line-height: 1.65; margin: 8px 0; }
.weekly-event .weekly-question { color: var(--ink); font-weight: 650; }
.weekly-event details { border-top: 1px solid var(--chart-border); margin-top: 12px; padding-top: 10px; color: var(--chart-faint); font-size: 11px; line-height: 1.55; }
.weekly-event summary { cursor: pointer; color: var(--gold); font-weight: 700; }
.weekly-ai .primary { width: auto; margin: 0; }
.weekly-ai .primary:disabled { opacity: .5; cursor: not-allowed; }
.weekly-guide { font-size: 13px; line-height: 1.7; color: var(--chart-copy); }
.weekly-guide p { margin: 10px 0 0; }
.weekly-guide strong { color: var(--ink); }

@media (max-width: 700px) {
  .weekly-events { grid-template-columns: 1fr; }
  .weekly-event:first-child { grid-column: auto; }
  .weekly-heading { flex-direction: column; }
  .weekly-range strong { order: -1; width: 100%; text-align: left; }
}
@media (max-width: 560px) {
  .astro-tabs { display: flex; }
  .astro-tab { flex: 1; padding: 10px 8px; font-size: 11px; }
  .weekly-controls, .weekly-summary, .weekly-ai, .weekly-guide { padding: 18px; }
}

@media (max-width: 1000px) {
  .chart-header { flex-wrap: wrap; }
  .chart-header nav { order: 3; width: 100%; justify-content: center; flex-wrap: wrap; gap: 10px 15px; }
}
@media (max-width: 760px) {
  .chart-shell { padding: 0 14px; }
  .chart-brand { font-size: 19px; }
  .chart-nav-link { font-size: 11px; }
  body::before { background-size: auto 100%; opacity: .18; }
}
@media (max-width: 560px) {
  .chart-header { gap: 10px; }
  .chart-header nav { justify-content: space-between; gap: 4px 8px; }
  .chart-nav-link { font-size: 10px; }
  .chart-theme-toggle { margin-left: auto; }
}