/* Theme preferences apply to the page, dialogs, navigation and form controls. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141218;
  --paper: #201c27;
  --ink: #f3edf7;
  --muted: #b8abc5;
  --line: #40354d;
  --soft: #302638;
  --purple: #ddbae9;
  --rose: #f1a3ce;
  --rose-soft: #3b2535;
  --blue: #a1c9ed;
  --green: #9bdbbb;
  --amber: #e8c28b;
  --danger: #ffacc2;
}
[data-theme="dark"] .topbar,
[data-theme="dark"] .bottom-nav { background: #201c27f7; }
[data-theme="dark"] :is(.navigation button:hover,.goal-line,.activity-detail,.activity-option,.extension) { background: var(--soft); }
[data-theme="dark"] :is(.welcome,.steps span,.tabs,.preview-value,.dialogue,.lineup-slots .slot) { background: var(--soft); }
[data-theme="dark"] .manager { background: #302439; border-color: var(--line); }
[data-theme="dark"] :is(.welcome p,.soft-note,.manager p,.scout-strip p,.tabs button,.preview-value span,.difficulty) { color: var(--muted); }
[data-theme="dark"] :is(.eyebrow,.nav-kicker,.footer-note,.schedule-row .week,.week-card .week-date,.steps,.bottom-nav button) { color: var(--muted); }
[data-theme="dark"] .bottom-nav button[aria-current="page"] { color: var(--rose); }
[data-theme="dark"] .tabs button[aria-pressed="true"] { background: var(--paper); color: var(--purple); }
[data-theme="dark"] .week-card.selected { background: #382b44; border-color: #b48ac8; }
[data-theme="dark"] .week-card.done { background: #29242e; }
[data-theme="dark"] :is(.button.primary,.toggle[aria-pressed="true"],.activity-option[aria-pressed="true"]) { background: #79538f; color: #fff; }
[data-theme="dark"] .button.primary:hover:not(:disabled) { background: #8a619f; }
[data-theme="dark"] .activity-option[aria-pressed="true"] small { color: #f0dff7; }
[data-theme="dark"] :is(.button.danger,.error-note) { background: #452733; color: var(--danger); }
[data-theme="dark"] :is(.warning,.save-error,.badge.warn) { background: #3b3022; color: var(--amber); }
[data-theme="dark"] .badge.green { background: #253c33; }
[data-theme="dark"] .resource .resource-icon { background: #3b3022; color: var(--amber); }
[data-theme="dark"] .resource:nth-child(2) .resource-icon { background: var(--rose-soft); color: var(--rose); }
[data-theme="dark"] .resource:nth-child(3) .resource-icon { background: var(--soft); color: var(--purple); }
[data-theme="dark"] .welcome-art { background: radial-gradient(ellipse at 45% 35%,#47334f,transparent 63%),#231d2e; }
[data-theme="dark"] :is(.welcome-card,.reveal-card) { background: var(--paper); }
[data-theme="dark"] .reveal-card .grade { color: #534b58; }
[data-theme="dark"] :is(.portrait-media,.lesson-row .portrait-media,.lineup-slots .slot .portrait-media,.room-team .solo-photo,.team-portraits img) { background: #2e2537; }
[data-theme="dark"] .dice-button:hover { background: #493553; }
[data-theme="dark"] .evolution { background: radial-gradient(ellipse,#62416d66,transparent 70%); }
[data-theme="dark"] .toast { background: #eee1f5; color: #30203f; }
[data-theme="dark"] dialog::backdrop { background: #09070dbb; }
[data-theme="dark"] input::placeholder { color: #aa9cb7; }
[data-theme="dark"] :is(.cinema-progress,.scout-progress i) { background: var(--line); }
[data-theme="dark"] .scout-progress i.revealed { background: #be8cc6; }
[data-theme="dark"] .scout-progress i.current { background: #8f749e; }

.theme-options { display: flex; gap: 6px; flex-shrink: 0; }
.theme-options button { display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; }
.theme-options button[aria-pressed="true"] { background: var(--soft); border-color: var(--purple); color: var(--purple); font-weight: 700; }
.theme-swatch { width: 15px; height: 15px; border: 1px solid #9b8aa7; border-radius: 50%; }
.theme-swatch.light { background: #fff; }
.theme-swatch.dark { background: #141218; }

/* Pager nodes stay mounted; reserved last-page slots prevent document shrinkage. */
.catalog-pager { margin: 0 0 13px; min-height: 44px; }
#catalog-page-label { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }
#catalog-results { overflow-anchor: none; }
.catalog-grid { grid-auto-rows: 1fr; }
.catalog-placeholder { visibility: hidden; pointer-events: none; }
.art-placeholder-image { display: block; aspect-ratio: 1; }
.catalog-grid .card-info :is(b,small) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.catalog-art-picker { margin-bottom: 12px; }
.catalog-art-picker h3,.detail-gallery h3 { font-size: 13px; }
.art-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 10px 0 15px; }
.art-tabs button { min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 9px 6px; background: var(--bg); }
.art-tabs button[aria-pressed="true"] { background: var(--soft); border-color: var(--purple); color: var(--purple); }
.art-tabs b { display: flex; justify-content: center; align-items: center; gap: 4px; font-size: 12px; }
.art-tabs small { display: block; font-size: 10px; color: var(--muted); }
.art-tabs .icon { width: 12px; height: 12px; flex-basis: 12px; }
.card-photo-column { min-width: 0; }
.card-detail .row { flex-wrap: wrap; gap: 7px; }
.art-image-button { display: block; width: 100%; padding: 0; border-radius: 12px; overflow: hidden; background: var(--soft); }
.art-image-button>span { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px; font-size: 10px; color: var(--purple); }
.art-image-button>span .icon { width: 12px; height: 12px; }
.art-locked { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 10px; min-height: 170px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; background: var(--soft); color: var(--muted); }
.art-locked>.icon { width: 28px; height: 28px; flex: 0 0 28px; }
.art-locked strong { font-size: 12px; color: var(--purple); }
.art-locked p,.art-locked small { font-size: 10px; line-height: 1.6; }
.art-locked-thumb { aspect-ratio: 1; min-height: 0; border: 0; border-radius: 0; padding: 5px; gap: 3px; }
.art-locked-thumb>.icon { width: 22px; height: 22px; flex-basis: 22px; }
.gallery-large { display: grid; place-items: center; }
.gallery-large .gallery-portrait { width: 100%; max-width: 430px; max-height: 58dvh; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 14px; background: var(--bg); }
.gallery-large .art-locked { width: 100%; min-height: min(340px,50dvh); }
.gallery-caption { text-align: center; padding-top: 12px; }
.card-upgrades { grid-column: 1/-1; }

@media(max-width:760px) {
  .bottom-nav { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .room-finance { display: block; }
  .theme-setting { flex-wrap: wrap; }
  .theme-options { width: 100%; }
  .theme-options button { flex: 1; justify-content: center; }
  .art-tabs b { font-size: 11px; }
  .catalog-art-picker>.row,.detail-gallery>.row { flex-wrap: wrap; gap: 4px; }
  .art-locked { padding: 12px 6px; min-height: 145px; }
  .art-locked-thumb { min-height: 0; }
  .card-detail .card-portrait { height: auto; aspect-ratio: 1; object-fit: contain; }
}