/* A theme changes tokens and a few seasonal accents, never training data. */
:root[data-theme="halloween"] {
  color-scheme: dark;
  --bg: #100d14;
  --surface: #1b1620;
  --surface-2: #241c29;
  --surface-3: #302536;
  --line: #3c2e43;
  --line-soft: #2d2333;
  --ink: #faf3ec;
  --ink-dim: #d7c9da;
  --ink-muted: #b4a3b9;
  --ink-faint: #a18da7;
  --accent: #ff9b50;
  --accent-dim: #e78236;
  --accent-ink: #211108;
  --accent-2: #c3a1ef;
  --chart-1: #ff9b50;
  --chart-2: #c3a1ef;
  --status-warn: #ffbc80;
  --danger: #ff9389;
  --season-tint: rgba(255, 155, 80, .09);
  --season-border: rgba(255, 155, 80, .24);
}

.topbar-actions { display: flex; align-items: center; gap: 10px; }
.primary > svg, .secondary > svg, .ghost > svg, .danger-btn > svg { width: 18px; height: 18px; flex: 0 0 18px; }
.hero-meta svg { width: 17px; height: 17px; flex: 0 0 17px; }
.hero-meta > span { white-space: nowrap; }
.theme-menu { position: relative; z-index: 30; flex-shrink: 0; }
.theme-menu summary {
  min-height: 44px; display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink-dim); background: var(--surface); cursor: pointer;
  list-style: none; font-size: 11px; font-weight: 700;
}
.theme-menu summary::-webkit-details-marker { display: none; }
.theme-menu summary > svg { width: 18px; height: 18px; color: var(--accent); }
.theme-menu summary:hover, .theme-menu[open] summary { border-color: var(--accent); }
.theme-popover {
  position: absolute; right: 0; top: calc(100% + 10px); width: min(258px, calc(100vw - 88px));
  padding: 12px; border-radius: 16px; background: var(--surface);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .32);
}
.theme-popover > p { margin: 4px 8px 12px; font: 600 13px var(--font-display); color: var(--ink); }
.theme-option {
  position: relative; display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 64px; padding: 10px; text-align: left;
  border: 1px solid transparent; border-radius: 12px;
  background: transparent; color: var(--ink);
}
.theme-option + .theme-option { margin-top: 4px; }
.theme-option:hover { background: var(--surface-2); }
.theme-option[aria-pressed="true"] { border-color: var(--accent); background: var(--surface-2); }
.theme-swatch { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: #daa134; box-shadow: inset 0 0 0 7px #151b1d; }
.theme-option-halloween .theme-swatch { background: #ff9b50; box-shadow: inset 0 0 0 7px #35203f; }
.theme-option-copy { min-width: 0; flex: 1; }
.theme-option-copy strong { display: block; font-size: 12px; font-weight: 700; }
.theme-option-copy small { display: block; margin-top: 4px; color: var(--ink-muted); font-size: 10px; line-height: 1.5; }
.theme-check { display: flex; width: 17px; color: var(--accent); opacity: 0; flex-shrink: 0; }
.theme-check svg { width: 17px; height: 17px; }
.theme-option[aria-pressed="true"] .theme-check { opacity: 1; }
.theme-settings > p { margin: -2px 0 16px; max-width: 46ch; color: var(--ink-muted); font-size: 12px; line-height: 1.7; }
.theme-current { font-size: 11px; color: var(--accent); }
.theme-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.theme-options .theme-option { display: grid; grid-template-columns: 1fr 17px; gap: 12px 4px; padding: 10px; margin: 0; border-color: var(--line); }
.theme-options .theme-option[aria-pressed="true"] { border-color: var(--accent); }
.theme-sample { grid-column: 1 / -1; position: relative; height: 100px; padding: 16px 14px; overflow: hidden; border-radius: 8px; background: #0a0e0f; }
.theme-sample-line { display: block; width: 52%; height: 5px; border-radius: 3px; background: #e2e7e4; }
.theme-sample-block { display: block; width: 70%; height: 21px; margin: 10px 0 8px; border-radius: 4px; background: #232c2e; }
.theme-sample-button { display: block; width: 36%; height: 11px; border-radius: 5px; background: #daa134; }
.theme-sample-halloween { background: #1b1223; }
.theme-sample-halloween .theme-sample-block { width: 43%; background: #35203f; }
.theme-sample-halloween .theme-sample-button { background: #ff9b50; }
.theme-sample img { position: absolute; width: 84px; height: 84px; object-fit: contain; bottom: 1px; right: -4px; }
.theme-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.theme-menu summary:focus-visible, .theme-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.login-theme-row { display: flex; justify-content: flex-end; margin: -20px 0 24px; }
.seasonal-banner { display: none; }

[data-theme="halloween"] body { background: #100d14; }
[data-theme="halloween"] ::selection { background: var(--accent); color: var(--accent-ink); }
[data-theme="halloween"] * { scrollbar-color: var(--surface-3) var(--bg); scrollbar-width: thin; caret-color: var(--accent); }
[data-theme="halloween"] :is(button, a, summary, input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[data-theme="halloween"] .home-content { display: flex; flex-direction: column; }
[data-theme="halloween"] .home-content > .page-head { order: -3; margin-bottom: 22px; }
[data-theme="halloween"] .home-content > .hero-card { order: -1; margin-bottom: 22px; }
[data-theme="halloween"] .home-content > .streak-panel { margin-bottom: 0; }
[data-theme="halloween"] .seasonal-banner {
  order: -2; isolation: isolate; position: relative; display: flex; align-items: center;
  min-height: 204px; margin-bottom: 18px; padding: 22px 24px;
  overflow: hidden; border-radius: 16px; background: #28172d;
}
[data-theme="halloween"] .seasonal-copy { position: relative; z-index: 1; width: 61%; }
[data-theme="halloween"] .seasonal-copy h2 { margin: 0; color: #fff0dd; font: 700 clamp(25px, 5.8vw, 30px)/1.12 var(--font-display); letter-spacing: -.035em; }
[data-theme="halloween"] .seasonal-copy p { margin: 12px 0 16px; color: #d0b8d4; font-size: 11px; line-height: 1.65; }
[data-theme="halloween"] .seasonal-edition { display: flex; align-items: center; gap: 6px; color: #ffb778; font-size: 10px; font-weight: 700; }
[data-theme="halloween"] .seasonal-edition svg { width: 16px; height: 16px; }
[data-theme="halloween"] .seasonal-art { position: absolute; z-index: 0; width: 49%; height: 96%; right: -2%; bottom: 0; object-fit: contain; pointer-events: none; }
[data-theme="halloween"] .top-brand { color: #fff0dd; }
[data-theme="halloween"] .top-brand small { color: var(--ink-muted); }
[data-theme="halloween"] .avatar { border-color: var(--season-border); background: var(--season-tint); }
[data-theme="halloween"] :is(.hero-card, .personal-hero) { background: var(--surface); box-shadow: none; }
[data-theme="halloween"] .hero-card { border-color: #67422e; }
[data-theme="halloween"] .hero-card::after { display: none; }
[data-theme="halloween"] .hero-card h2 { margin-top: 14px; }
[data-theme="halloween"] .hero-card { padding: 20px 24px; }
[data-theme="halloween"] .hero-meta { margin: 14px 0 18px; }
[data-theme="halloween"] .hero-card .primary { width: 100%; }
[data-theme="halloween"] .primary { box-shadow: none; }
[data-theme="halloween"] .primary:hover:not(:disabled) { background: #ffb374; }
[data-theme="halloween"] :is(.tag:not(.neutral):not(.cyan):not(.warn), .mini-icon, .development-icon, .pr-badge, .execution-link, .library-video) { color: var(--accent); background: var(--season-tint); border-color: var(--season-border); }
[data-theme="halloween"] :is(.tag.cyan, .tip) { color: var(--accent-2); background: rgba(195, 161, 239, .08); border-color: rgba(195, 161, 239, .18); }
[data-theme="halloween"] :is(.bottom-nav, .personal-nav) { background: #17121c; backdrop-filter: none; }
[data-theme="halloween"] .nav-btn { color: var(--ink-muted); }
[data-theme="halloween"] .nav-btn.active { color: var(--accent); }
[data-theme="halloween"] .nav-btn.active svg { filter: none; }
[data-theme="halloween"] .login-card { background: var(--surface); box-shadow: none; }
[data-theme="halloween"] .login-shell .seasonal-banner { margin: 0 0 26px; }
[data-theme="halloween"] .login-shell > .eyebrow { display: none; }
[data-theme="halloween"] .login-brand { margin-bottom: 32px; }
[data-theme="halloween"] .login-theme-row { margin-top: 0; }
[data-theme="halloween"] .intake-page { background: var(--bg); }
[data-theme="halloween"] :is(.intake-path span, .choice.active, .day-btn.active, .date-chip.active, .stepper-input:focus-within) { background: var(--season-tint); }
[data-theme="halloween"] :is(.progress-summary, .plan-development) { background: var(--surface); border-color: var(--season-border); }
[data-theme="halloween"] :is(.exercise-media, .equipment) { background: #18131c; }
[data-theme="halloween"] .share-sheet-card { background: var(--surface); }
[data-theme="halloween"] .success-mark { box-shadow: none; }
[data-theme="halloween"] .chart-value { fill: var(--accent-ink); }
[data-theme="halloween"] :is(.stat-value, .chart-value, .info-row strong) { font-variant-numeric: tabular-nums; }

@media (min-width: 700px) {
  /* Keep navigation at the bottom of the desktop app preview, outside its scrolling content. */
  .app-frame:not(.personal-frame) { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
  .app-frame:not(.personal-frame) .topbar { flex: 0 0 88px; }
  .app-frame:not(.personal-frame) .main { flex: 1; min-height: 0; overflow-y: auto; }
  .app-frame:not(.personal-frame) .bottom-nav { position: static; flex: 0 0 82px; margin-top: 0; }
  [data-theme="halloween"] body { background: #19121e; }
  [data-theme="halloween"] .app-frame:not(.personal-frame) { box-shadow: 0 28px 70px rgba(0, 0, 0, .4); }
}
@media (max-width: 380px) {
  .topbar-actions { gap: 6px; }
  .theme-menu summary { width: 44px; padding: 0; }
  .theme-menu summary > span { display: none; }
  [data-theme="halloween"] .seasonal-banner { min-height: 192px; padding: 20px 18px; }
  [data-theme="halloween"] .seasonal-copy { width: 68%; }
  [data-theme="halloween"] .seasonal-copy h2 { font-size: 22px; }
  [data-theme="halloween"] .seasonal-art { width: 47%; right: -2%; }
}
@media (min-width: 700px) and (max-height: 800px) {
  [data-theme="halloween"] .app-frame:not(.personal-frame) .topbar { flex-basis: 72px; }
  [data-theme="halloween"] .seasonal-banner { min-height: 170px; padding-top: 18px; padding-bottom: 18px; }
  [data-theme="halloween"] .seasonal-copy h2 { font-size: 26px; }
  [data-theme="halloween"] .seasonal-copy p { margin: 8px 0 10px; line-height: 1.45; }
}
@media (prefers-reduced-motion: no-preference) {
  [data-theme="halloween"] .seasonal-art { animation: seasonal-arrival .7s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes seasonal-arrival { from { transform: translateY(9px) rotate(5deg); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="halloween"] :is(.page-enter, .exercise-media, .check, .success-mark, .boot-line::after) { animation: none; }
  [data-theme="halloween"] .progress-fill { transition: none; }
}