/* Coordinated themes. Artwork retains its original colors in either mode. */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: #09111b;
  --theme-text: #edf5ff;
  --theme-muted: #9aacc0;
  --theme-line: #25364a;
  --theme-accent: #72d3ee;
  --theme-gold: #f4c76b;
  --bg: var(--theme-bg);
  --text: var(--theme-text);
  --muted: var(--theme-muted);
  --line: var(--theme-line);
  --accent: var(--theme-accent);
  --gold: var(--theme-gold);
  --surface: #101c2b;
  --surface-raised: #13283a;
  --surface-muted: #0c1b2a;
  --surface-hover: #1c3b50;
  --panel: var(--surface);
  --panel2: var(--surface-raised);
  --accent-strong: #21b7dd;
  --accent-fill: #72d3ee;
  --accent-fill-hover: #a0e8f9;
  --on-accent: #082333;
  --soft-accent: #17364a;
  --warning-bg: #302b20;
  --warning-text: #e8cc92;
  --success-bg: #173b34;
  --success-text: #a9e0ca;
  --field-bg: #102131;
  --theme-shadow: 0 12px 30px #0002;
}
html[data-theme="light"] {
  color-scheme: light;
  --theme-bg: #f5f5f2;
  --theme-text: #203441;
  --theme-muted: #5f7280;
  --theme-line: #ccd7dc;
  --theme-accent: #126d86;
  --theme-gold: #9b6b10;
  --bg: var(--theme-bg);
  --text: var(--theme-text);
  --muted: var(--theme-muted);
  --line: var(--theme-line);
  --accent: var(--theme-accent);
  --gold: var(--theme-gold);
  --surface: #ffffff;
  --surface-raised: #f1f5f5;
  --surface-muted: #e9eff0;
  --surface-hover: #e4f0f3;
  --panel: var(--surface);
  --panel2: var(--surface-raised);
  --accent-strong: #08647f;
  --accent-fill: #8dd8e8;
  --accent-fill-hover: #ade7f0;
  --on-accent: #103743;
  --soft-accent: #dceef2;
  --warning-bg: #fbf2df;
  --warning-text: #80601e;
  --success-bg: #e2f1e9;
  --success-text: #23634c;
  --green: #23634c;
  --field-bg: #ffffff;
  --theme-shadow: 0 8px 26px #2747580c;
}
html[data-theme] { background: var(--bg); color: var(--text); }
html[data-theme] input[type="range"] { accent-color: var(--accent-strong); }
html[data-theme] :is(button, a, input, select, textarea, summary):focus-visible {
  outline-color: var(--accent);
}
html[data-theme] .set-effect { border-color: var(--accent); }
html[data-theme] .set-effect :is(h5, p) { color: var(--muted); }
html[data-theme] .set-effect b { color: var(--accent); }
html[data-theme="dark"] .conditional { background: var(--soft-accent); border: 1px solid var(--line); }
html[data-theme="dark"] .conditional p { color: var(--muted); }
html[data-theme="dark"] .conditional .eyebrow { color: var(--accent); }
html[data-theme="dark"] .coming-input { background: var(--surface-muted); color: var(--muted); border-color: var(--line); }

/* The toggle stays available at every width; it has a distinct selected label. */
.theme-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}
.theme-toggle:hover { background: var(--surface-hover); border-color: var(--accent); }
.theme-toggle .theme-icon { color: var(--accent); font-size: 16px; line-height: 1; }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .theme-divider { opacity: .45; font-weight: 400; }
html[data-theme="dark"] .theme-toggle > span:last-child,
html[data-theme="light"] .theme-toggle > span:nth-child(2) { color: var(--text); font-weight: 800; }

/* Build Lab shares the surrounding theme rather than imposing a light surface. */
html[data-theme] .lab-page {
  --muted: var(--theme-muted);
  --line: var(--theme-line);
  --accent: var(--theme-accent);
  --gold: var(--theme-gold);
  color-scheme: inherit;
  color: var(--text);
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--theme-shadow);
}
html[data-theme] .lab-page :is(.lab-top h2, .build-heading h3, .section-heading h3, .section-heading h4, .config-panel h3, .stat strong, .stat-cell strong, .compare-strip b) { color: var(--text); }
html[data-theme] .lab-page :is(.lab-top p, .field, .field small, .small, .stat-label, .stat small, .stat-cell span, .stat-cell small, .advanced, .advanced span:last-child, .advanced-label, .part-label, .part small, .set-effect h5, .set-effect p, .conditional p, .weapon-effect, .lab-footnote, .pending-value, .skill-row, .skill-row small, .skill-control > small, .custom-roll, .compare-strip > div) { color: var(--muted); }
html[data-theme] .lab-page :is(.eyebrow, .section-heading .eyebrow, .conditional .eyebrow, .skill-row strong, .set-effect b) { color: var(--accent); }
html[data-theme] .lab-page :is(select, input, option, textarea) { background: var(--field-bg); color: var(--text); border-color: var(--line); }
html[data-theme] .lab-page input[type="range"] { background: transparent; accent-color: var(--accent-strong); }
html[data-theme] .lab-page :is(.stat, .advanced, .skill-control, .lab-footnote, .build-panel + .build-panel) { border-color: var(--line); }
html[data-theme] .lab-page :is(.stat-cell, .config-panel, .compare-strip > div) { background: var(--surface-raised); border-color: var(--line); }
html[data-theme] .lab-page :is(.lab-status, .notice, .conditional) { background: var(--soft-accent); border-color: var(--line); color: var(--muted); }
html[data-theme] .lab-page :is(.notice b, .notice svg, .notice a) { color: var(--accent); }
html[data-theme] .lab-page :is(.reset, .button.secondary) { color: var(--text); border-color: var(--line); background: var(--surface-raised); }
html[data-theme] .lab-page :is(.reset:hover, .button.secondary:hover) { background: var(--surface-hover); border-color: var(--accent); }
html[data-theme] .lab-page :is(.build-label, .section-icon) { background: var(--soft-accent); color: var(--accent); box-shadow: none; }
html[data-theme] .lab-page .build-panel + .build-panel .build-label { background: var(--warning-bg); color: var(--warning-text); }
html[data-theme] .lab-page .range-with-value output { background: var(--soft-accent); color: var(--accent); border-color: var(--line); }
html[data-theme] .lab-page .part-icon { background: var(--soft-accent); color: var(--accent); }
html[data-theme] .lab-page .set-effect { border-color: var(--accent); }
html[data-theme] .lab-page .coming-input { background: var(--surface-muted); color: var(--muted); border-color: var(--line); }
html[data-theme] .lab-page .weapon-preview { background: var(--surface-raised); border-color: var(--line); color: var(--text); }
html[data-theme] .lab-page .weapon-preview :is(h4, h5) { color: var(--text); }
html[data-theme] .lab-page .weapon-preview small { color: var(--muted); }
html[data-theme] .lab-page .weapon-preview .rarity { color: var(--gold); }

/* Light navigation, shared cards and controls. Existing dark colors stay intact. */
html[data-theme="light"] body { background: radial-gradient(ellipse at 75% 0%, #e7f0f1 0, transparent 42%), var(--bg); }
html[data-theme="light"] :is(.topbar, .header) { background: #fff; border-color: var(--line); }
html[data-theme="light"] .sidebar { background: #eef2f2; border-color: var(--line); }
html[data-theme="light"] :is(.private-badge, .channel, .nav-title, .sidebar-bottom p, .breadcrumb, .breadcrumbs) { color: var(--muted); }
html[data-theme="light"] .nav-link { color: #4c6574; }
html[data-theme="light"] .nav-link:hover { background: #e0e9ec; color: var(--text); }
html[data-theme="light"] .nav-link.active { background: #d8ebf0; color: #09647d; box-shadow: inset 3px 0 #2389a1; }
html[data-theme="light"] :is(.breadcrumb span, .breadcrumbs span, .text-link, .catalog-footer a, .footer a, .hub-head > a, .section-heading > a) { color: var(--accent); }
html[data-theme="light"] :is(.page-head .sub, .page-title p, .description, .detail-copy p, .catalog-footer, .credit, .footer, .card-bottom, .type-line, .unit-title, .variant, .weapon-recommendation) { color: var(--muted); }
html[data-theme="light"] :is(.eyebrow, .route-card .eyebrow, .news-card .eyebrow, .home-raid .event-body > .eyebrow) { color: var(--accent); }
html[data-theme="light"] .button { background: var(--accent-fill); color: var(--on-accent); box-shadow: none; }
html[data-theme="light"] .button:hover { background: var(--accent-fill-hover); }
html[data-theme="light"] :is(.button.secondary, .detail-button, .reset, .slot-actions button, dialog .dialog-close) { color: var(--text); border-color: var(--line); background: var(--surface-raised); }
html[data-theme="light"] :is(.button.secondary:hover, .detail-button:hover, .reset:hover, .slot-actions button:hover, dialog .dialog-close:hover) { background: var(--surface-hover); border-color: var(--accent); }
html[data-theme="light"] .button:disabled { background: var(--surface-muted); color: var(--muted); }
html[data-theme="light"] :is(input, select, textarea, select option) { background: var(--field-bg); color: var(--text); border-color: var(--line); }
html[data-theme="light"] input::placeholder { color: #73848f; }
html[data-theme="light"] input[type="range"] { background: transparent; }
html[data-theme="light"] :is(.field, .field small, .skill-row, .skill-row small, .skill-control > small, .custom-roll, .search svg) { color: var(--muted); }
html[data-theme="light"] .skill-row strong { color: var(--accent); }
html[data-theme="light"] .range-with-value output { background: var(--soft-accent); border-color: var(--line); color: var(--accent); }
html[data-theme="light"] :is(.catalog-top, .footer, .fact-row, .status-row, .skill-control, details, th, td) { border-color: var(--line); }
html[data-theme="light"] .tab { color: var(--muted); }
html[data-theme="light"] .tab.active { color: var(--accent); border-color: var(--accent); }
html[data-theme="light"] :is(.tab small, .code-label) { background: var(--surface-muted); color: var(--muted); }
html[data-theme="light"] :is(.item-card, .unit-card, .weapon-card, .hub-card, .event-card, .box, .route-card, .style-card, .roster-item, .squad-panel, .news-card, .unipart-card, .unipart-preview, .release-unit, .release-weapon) { background: var(--surface); color: var(--text); border-color: var(--line); box-shadow: var(--theme-shadow); }
html[data-theme="light"] :is(.hub-card:hover, .item-card:hover, .unit-card:hover, .weapon-card:hover, .release-unit:hover, .release-weapon:hover, .event-card:hover, .route-card:hover, .style-card:hover, .roster-item:hover, .unipart-preview:hover) { border-color: #69a8b9; box-shadow: 0 10px 25px #26435412; }
html[data-theme="light"] .hub-card:hover { background: #fcfefe; }
html[data-theme="light"] :is(.card-body h3, .box h2, .box h3, .release-name > b, .release-name > strong, .release-weapon-info > b, .release-weapon-info > strong, .news-card h3, .unipart-preview-body h3, .mini-unit b, .fact-row strong, .stat-cell strong, .slot-label strong, .synergy-list strong, .empty-state h3, .no-results h3) { color: var(--text); }
html[data-theme="light"] :is(.box p, .box li, .hub-head p, .hub-card > p, .event-body p, .rules-list li, .style-card p, .style-card .type-line, .route-card p, .promo p, .news-card p, .unipart-card p, .unipart-preview-body p, .uniparts-home-intro, .uniparts-intro p, .battlefield-card p, .home-uniparts-card p, .home-section-title p, .home-small-grid .event-body > small, .release-name > small, .release-meta .role, .release-meta .release-role, .release-meta > small, .release-meta > p, .release-weapon-type, .mini-unit small, .mini-unit .unit-title, .fact-row span, .fact-row small, .status-row span, .pending-value, .news-date, .statusline, .battle-period) { color: var(--muted); }
html[data-theme="light"] :is(.attribute-badge, .mini-unit) { color: #486773; }
html[data-theme="light"] :is(.release-meta, .unipart-preview-footer, .set-star-row) { border-color: var(--line); }
html[data-theme="light"] :is(.detail-copy h2, .detail-hero .subtitle, .card-bottom b, .status-row strong, .unipart-preview-footer > span:last-child) { color: var(--accent); }
html[data-theme="light"] :is(.stars, .rarity, .release-meta .stars, .release-meta .rarity, .unipart-preview-footer > span:first-child) { color: var(--gold); }
html[data-theme="light"] :is(.chip, .pill) { background: var(--surface-raised); border-color: var(--line); color: #4f6e7c; }
html[data-theme="light"] .chip.verified { background: var(--success-bg); border-color: #acd2bf; color: var(--success-text); }
html[data-theme="light"] :is(.notice, .lab-status, .conditional) { background: var(--soft-accent); color: #476a7b; border-color: #bbd6df; }
html[data-theme="light"] :is(.notice b, .notice svg, .notice a, .conditional .eyebrow) { color: var(--accent); }
html[data-theme="light"] .conditional p { color: var(--muted); }
html[data-theme="light"] :is(.empty-state, .no-results, .coming-input) { background: var(--surface-raised); border-color: var(--line); color: var(--muted); }
html[data-theme="light"] :is(.config-panel, .squad-panel .config-panel, .stat-cell, .mini-weapon, .squad-slot, .team-ghosts > *) { background: var(--surface-raised); border-color: var(--line); }
html[data-theme="light"] :is(.squad-slot.drag-over, .squad-slot.selected) { background: var(--soft-accent); border-color: var(--accent); }
html[data-theme="light"] .squad-slot.selected { box-shadow: 0 0 0 1px var(--accent); }
html[data-theme="light"] :is(.squad-panel > p, .squad-slot > p, .squad-slot > .empty-slot, .squad-slot:empty::after, .slot-label, .slot-label small, .slot-label span, .roster-actions, .synergy-list > p, .synergy-list li, .team-ghosts > *, .stat-cell span, .stat-cell small) { color: var(--muted); }
html[data-theme="light"] .synergy-list li { border-color: #72aaba; }
html[data-theme="light"] :is(.table-wrap, .rewards-table th, .rewards-table td) { border-color: var(--line); }
html[data-theme="light"] :is(th, .rewards-table th) { background: var(--surface-muted); color: #325e71; }
html[data-theme="light"] :is(td, .rewards-table td) { color: var(--muted); }
html[data-theme="light"] :is(.rewards-table td b, summary) { color: var(--text); }
html[data-theme="light"] :is(.source, .source small) { color: var(--muted); border-color: var(--line); }
html[data-theme="light"] .source a { color: var(--accent); }
html[data-theme="light"] :is(.promo, .battlefield-card, .home-uniparts-card, .home-uniparts) { background: linear-gradient(125deg, #e8f2f3, #ffffff); border-color: var(--line); }
html[data-theme="light"] :is(.promo .icon-box, .uniparts-emblem) { background: var(--soft-accent); border-color: #bad6df; color: var(--accent); }
html[data-theme="light"] :is(.uniparts-slots > span, .unipart-art-pending, .unipart-art > .icon) { color: var(--accent); }
html[data-theme="light"] :is(.unipart-art, .unipart-detail-art, .mode-placeholder) { background: radial-gradient(ellipse at top, #e1edf0, #edf2f2); border-color: var(--line); }
html[data-theme="light"] .pending-large { background: repeating-linear-gradient(135deg, #eef3f3, #eef3f3 8px, #e8eeee 8px, #e8eeee 9px); border-color: var(--line); }
html[data-theme="light"] .pending-large p { color: var(--muted); }
html[data-theme="light"] :is(.countdown, .news-status) { background: var(--soft-accent); border-color: #b3d1dc; color: #28657c; }
html[data-theme="light"] .countdown strong { color: #22536a; }
html[data-theme="light"] :is(.countdown.ended, .battle-ended, .home-raid .battle-ended) { background: var(--warning-bg); border-color: #dec992; color: var(--warning-text); }
html[data-theme="light"] .set-star-row { color: var(--muted); }
html[data-theme="light"] .set-star-tabs button { background: var(--surface-raised); color: var(--muted); border-color: var(--line); }
html[data-theme="light"] .set-star-tabs button[aria-pressed="true"] { background: var(--accent-fill); color: var(--on-accent); border-color: #66b7ca; }
html[data-theme="light"] .set-bonuses > span { background: var(--warning-bg); border-color: #e2d2aa; color: var(--warning-text); }
html[data-theme="light"] .set-trigger { border-color: #80afbf; }
html[data-theme="light"] .set-trigger p { color: var(--muted); }
html[data-theme="light"] .set-trigger b { color: var(--gold); }
html[data-theme="light"] :is(.part-label, .part small, .weapon-effect, .set-effect p) { color: var(--muted); }
html[data-theme="light"] .weapon-preview { background: var(--surface-raised); border-color: var(--line); color: var(--text); }
html[data-theme="light"] .weapon-preview :is(h4, h5) { color: var(--text); }
html[data-theme="light"] .weapon-preview small { color: var(--muted); }
html[data-theme="light"] :is(.section-icon, .part-icon) { background: var(--soft-accent); color: var(--accent); box-shadow: none; }
html[data-theme="light"] .section-heading .eyebrow { color: var(--accent); }
html[data-theme="light"] dialog#quick-dialog { background: var(--surface); color: var(--text); border-color: #a7bdc8; box-shadow: 0 25px 90px #142c4355; }
html[data-theme="light"] dialog#quick-dialog::backdrop { background: #172c4366; }
html[data-theme="light"] .quick-detail p { color: var(--muted); }

/* Text on image overlays remains light in both modes. */
html[data-theme="light"] .hero-copy :is(h1, h2) { color: #fff; }
html[data-theme="light"] .hero-copy > p { color: #d7e8f2; }
html[data-theme="light"] .hero-copy .eyebrow { color: #baf1ff; }
html[data-theme="light"] .hero-feature .countdown { background: #102a3de8; color: #d5f8ff; border-color: #47758f; }
html[data-theme="light"] .hero-feature .countdown strong { color: #e2f9ff; }
html[data-theme="light"] .hero-feature .button.secondary { background: #142d40e6; color: #e3f3fb; border-color: #6c96a9; }
html[data-theme="light"] .hero-feature .chip { background: #142d40e6; color: #d9edf7; border-color: #527689; }

@media (max-width: 850px) {
  .top-right { gap: 10px; }
  .theme-toggle { padding: 8px 9px; gap: 6px; }
}
@media (max-width: 620px) {
  .top-right .private-badge { display: none; }
  .topbar { gap: 10px; }
  .theme-toggle { min-height: 38px; padding: 8px; gap: 5px; font-size: 10px; }
}
@media (max-width: 360px) {
  .theme-toggle { gap: 4px; padding: 8px 6px; }
  .theme-toggle .theme-icon { display: none; }
}