/* Theme controls also work on the login page, without an account or API request. */
.theme-toggle { display: inline-grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 10px; color: #536270; background: var(--card); cursor: pointer; }
.theme-toggle:hover { color: var(--cyan); border-color: currentColor; }
.theme-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.theme-toggle svg { width: 20px; height: 20px; pointer-events: none; }
.theme-toggle .theme-sun { display: none; }
.login-panel { position: relative; }
.login-theme-toggle { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; }
@media (min-width: 1281px) and (max-width: 1380px) {
  .app-header { column-gap: 18px; padding-right: 22px; padding-left: 22px; }
  .main-nav { gap: 22px; }
  .user-copy { display: none; }
}
@media (max-width: 620px) {
  .header-identity { gap: 8px; }
  .header-identity .server-select { flex-basis: 112px; width: 112px; min-width: 112px; }
  .user-menu .theme-toggle { flex-basis: 38px; width: 38px; height: 38px; }
}
@media (max-width: 360px) {
  .app-header { column-gap: 8px; }
  .header-identity .server-select { flex-basis: 98px; width: 98px; min-width: 98px; }
  .server-badge { max-width: 98px; }
}

/* Slate surfaces and muted teal accents preserve the existing visual hierarchy. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e4edf4; --muted: #a1afbd; --line: #304052;
  --paper: #111a24; --card: #192431; --navy: #2b5c70;
  --blue: #8cb9ff; --blue-dark: #a6c9ff; --cyan: #8cc7d6; --danger: #ffaaaa;
  --shadow: 0 12px 38px rgba(0,0,0,.18);
  --theme-raised: #223243; --theme-inset: #14202c;
  --theme-accent-bg: #223e49; --theme-gold-bg: #3a3224; --theme-gold: #e2c38c;
  --text-secondary: var(--muted); --accent: var(--cyan);
}
html[data-theme="dark"] .theme-toggle { color: var(--cyan); }
html[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
html[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
html[data-theme="dark"] :is(.login-view,.login-panel,.detail-drawer) { background: var(--paper); }
html[data-theme="dark"] .app-header { background: rgba(17,26,36,.95); border-color: var(--line); }
html[data-theme="dark"] .drawer-header { background: rgba(25,36,49,.96); border-color: var(--line); }
html[data-theme="dark"] .lineup-card { background: linear-gradient(145deg, var(--card), var(--theme-accent-bg)); }
html[data-theme="dark"] select.control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='m3 5 4 4 4-4' fill='none' stroke='%23a1afbd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .header-identity .server-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='%23a1afbd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-theme="dark"] :is(.input-shell,.button.secondary,.control,.header-identity .server-select,.popover,.pagination select,.page-button,.action-button,.dialog,.drawer-close,.detail-section,.team-mobile-card,.dashboard-rank-row,.name-suggestions,.toast) { color: var(--ink); background-color: var(--card); border-color: var(--line); }
html[data-theme="dark"] :is(.panel,.stat-card,.lineup-card,.lineup-variant,.team-battle-card,.team-mobile-head,.team-mobile-hero,.battlefield-card,.battlefield-match,.matchup-card,.account-row,.account-list-head,.table-meta,.data-table th,.data-table td,.pagination,.filter-list:not(:empty),.detail-section-head,.detail-item,.team-battle-card-head,.team-battle-details,.import-fact,.battlefield-note,.battlefield-filters,.battlefield-watch,.dashboard-rank-row) { border-color: var(--line); }
html[data-theme="dark"] :is(.capture-hero,.stat-card,.search-shell,.team-battle-card,.drop-zone,.account-list-head,.data-table th,.compare-table thead th,.skill-card,.snapshot-facts div,.dashboard-merit>div,.matchup-reason) { background: var(--theme-inset); }
html[data-theme="dark"] :is(.search-shell,.drop-zone) { border-color: var(--line); }
html[data-theme="dark"] :is(.field-label,.button.secondary,.column-option,.table-meta,.data-table td,.empty-state h3,.drop-zone strong,.detail-item strong,.team-battle-facts strong,.team-mobile-hero strong) { color: var(--ink); }
html[data-theme="dark"] .cell-player { color: var(--cyan) !important; }
html[data-theme="dark"] :is(.label-note,.input-icon,.icon-button,.login-note,.button.ghost,.button.text,.nav-item,.user-copy span,.search-shell span,.remove-filter,.table-hint,.data-table th,.empty-state,.pagination,.import-fact span,.dialog-close,.drawer-heading>p:last-child,.lineup-card span,.detail-item label,.team-battle-loading,.team-battle-total,.team-battle-facts span,.team-battle-side h4,.skill-card span,.team-mobile-identity span,.team-mobile-position,.battlefield-card-head small,.battlefield-match-hint,.battlefield-match>small,.battlefield-match-hero small,.battlefield-empty,.matchup-hint,.matchup-empty,.matchup-facts,.matchup-position,.matchup-reason,.lineup-variant-metrics span,.data-table td::before,.account-row>span:nth-child(4)) { color: var(--muted); }
html[data-theme="dark"] :is(.button.ghost,.button.secondary:hover,.drawer-close:hover) { border-color: var(--line); }
html[data-theme="dark"] :is(input::placeholder,textarea::placeholder) { color: #91a1b1; opacity: 1; }
html[data-theme="dark"] :is(input[type="checkbox"],input[type="radio"]) { accent-color: var(--cyan); }
html[data-theme="dark"] :is(.button.primary:hover:not(:disabled)) { background: #356d82; }
html[data-theme="dark"] :is(.eyebrow,.link-button,.dashboard-rank-metric strong,.dashboard-rules summary,.lineup-variant h4,.team-mobile-identity strong,.team-battle-details summary,.battlefield-countdown,.matchup-summary,.lineup-variant-metrics strong) { color: var(--cyan); }
html[data-theme="dark"] :is(.server-badge,.dashboard-lineup>span,.count-pill,.account-avatar,.upload-mark,.selected-file,.detail-section-head span,.team-mobile-ratio,.empty-illustration,.lineup-variant-metrics>div) { color: var(--cyan); background: var(--theme-accent-bg); }
html[data-theme="dark"] :is(.dashboard-rank-number,.dataset-switch,.dashboard-mobile-tabs,.progress-track,.progress,.compare-track,.compare-outcomes,.hero-usage-track,.battlefield-troops span) { color: var(--muted); background: var(--theme-raised); }
html[data-theme="dark"] :is(.dataset-tab,.dataset-tab small,.dashboard-mobile-tabs button) { color: var(--muted); }
html[data-theme="dark"] .dataset-tab>span { color: var(--muted); background: var(--theme-raised); }
html[data-theme="dark"] :is(.dataset-tab:hover,.dashboard-rank-row:hover,.data-table tbody tr:hover td,.data-table tbody tr:focus td,.name-suggestion:hover,.name-suggestion.active,.drop-zone:hover,.drop-zone.dragging) { background: var(--theme-raised); }
html[data-theme="dark"] :is(.dataset-tab.active,.dashboard-mobile-tabs button.active,.nav-item.active,.matchup-tabs .active) { color: var(--ink); background: var(--theme-accent-bg); border-color: #527f90; }
html[data-theme="dark"] .dataset-tab.active>span { color: #fff; }
html[data-theme="dark"] .nav-item.active::after { background: var(--cyan); }
html[data-theme="dark"] .dashboard-more-list .dashboard-rank-row:hover { background: var(--theme-raised); border-color: #527f90; }
html[data-theme="dark"] .hero-art { background: #26362f; }
html[data-theme="dark"] .hero-art-fallback { color: #a0b4aa; }
html[data-theme="dark"] :is(.treasure-icon,.team-mobile-hero small,.dashboard-rank-number.rank-1,.dashboard-rank-number.rank-3) { color: var(--theme-gold); background: var(--theme-gold-bg); }
html[data-theme="dark"] .matchup-troop { color: var(--theme-gold); }
html[data-theme="dark"] :is(.dashboard-notice,.warning-box) { color: var(--theme-gold); background: #312b22; border-color: #6d5836; }
html[data-theme="dark"] :is(.sync-badge,.status-pill.active,.account-status.active,.team-result.win) { color: #9cddbd; background: #1d3b32; border-color: #36594c; }
html[data-theme="dark"] :is(.status-pill.retired,.account-status.expired,.team-result.loss,.remove-filter:hover) { color: #ffb2b2; background: #432b32; }
html[data-theme="dark"] .team-result.draw { color: var(--theme-gold); background: var(--theme-gold-bg); }
html[data-theme="dark"] :is(.status-pill.neutral,.dashboard-rank-number.rank-2) { color: #b2cef2; background: #24394e; }
html[data-theme="dark"] .role-pill { color: #d1bff4; background: #342c49; }
html[data-theme="dark"] :is(.stat-icon.blue,.dashboard-board-mark) { color: #a6caff; background: #24394e; }
html[data-theme="dark"] :is(.stat-icon.green,.dashboard-board-mark.green) { color: #9cddbd; background: #1d3b32; }
html[data-theme="dark"] :is(.stat-icon.amber,.dashboard-board-mark.amber) { color: var(--theme-gold); background: var(--theme-gold-bg); }
html[data-theme="dark"] :is(.stat-icon.violet,.dashboard-board-mark.purple),html[data-theme="dark"] #dashboardStats .stat-icon.purple { color: #d1bff4; background: #342c49; }
html[data-theme="dark"] .name-suggestion mark { color: #ffaaaa; }
html[data-theme="dark"] :is(.compare-profile-total strong,.compare-table thead th:first-child) { color: var(--cyan); }
html[data-theme="dark"] :is(.compare-profile.right .compare-profile-total strong,.compare-table thead th:last-child) { color: var(--theme-gold); }
html[data-theme="dark"] .toast { border-left-color: #83c8aa; }
html[data-theme="dark"] .toast.error { border-left-color: #ffaaaa; }
@media (max-width: 620px) {
  html[data-theme="dark"] :is(.data-table tbody,.team-mobile-list) { background: var(--theme-inset); }
  html[data-theme="dark"] .data-table tbody tr { background: var(--card); border-color: var(--line); }
  html[data-theme="dark"] :is(.data-table td.cell-player,.data-table tbody tr:hover td.cell-player,.data-table tbody tr:focus td.cell-player) { background: var(--theme-raised); }
  html[data-theme="dark"] .detail-grid.metrics .detail-item:nth-last-child(3) { border-color: var(--line); }
}