:root,
html[data-theme="dark"] {
    color-scheme: dark;
    --app-bg: #050711;
    --app-panel: #0b1120;
    --app-panel-2: #0f172a;
    --app-sidebar-bg: rgba(5, 9, 20, .96);
    --app-border: rgba(148, 163, 184, .16);
    --app-text: #f8fafc;
    --app-muted: #94a3b8;
    --app-soft: #64748b;
    --app-input: rgba(3, 7, 18, .72);
    --app-table-head: rgba(3, 7, 18, .7);
    --app-shadow: rgba(0, 0, 0, .22);
    --bg-body: #050711;
    --bg-sidebar: rgba(5, 9, 20, .96);
    --bg-card: #0b1120;
    --border-card: rgba(148, 163, 184, .16);
    --text-main: #f8fafc;
    --text-sub: #94a3b8;
    --bg: #050711;
    --card: #0b1120;
    --border: rgba(148, 163, 184, .16);
    --text: #f8fafc;
    --sub: #94a3b8;
}

html[data-theme="light"] {
    color-scheme: light;
    --app-bg: #eef3f9;
    --app-panel: #ffffff;
    --app-panel-2: #f7f9fc;
    --app-sidebar-bg: rgba(255, 255, 255, .97);
    --app-border: rgba(51, 65, 85, .17);
    --app-text: #111827;
    --app-muted: #52627a;
    --app-soft: #718096;
    --app-input: #ffffff;
    --app-table-head: #eef4fa;
    --app-shadow: rgba(15, 23, 42, .10);
    --bg-body: #eef3f9;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --border-card: #d9e2ee;
    --text-main: #111827;
    --text-sub: #52627a;
    --bg: #eef3f9;
    --card: #ffffff;
    --border: #d9e2ee;
    --text: #111827;
    --sub: #52627a;
}

.theme-toggle { white-space: nowrap; }
.theme-toggle .theme-light-label { display: none; }
html[data-theme="light"] .theme-toggle .theme-dark-label { display: none; }
html[data-theme="light"] .theme-toggle .theme-light-label { display: inline; }

html[data-theme="light"] body.app-body {
    background: radial-gradient(circle at 80% -20%, rgba(56, 189, 248, .15), transparent 38%), var(--app-bg);
}
html[data-theme="light"] .app-sidebar { background: var(--app-sidebar-bg); }
html[data-theme="light"] .stat-card,
html[data-theme="light"] .panel-card,
html[data-theme="light"] .module-card { background: linear-gradient(145deg, #fff, #f7f9fc); box-shadow: 0 14px 34px var(--app-shadow); }
html[data-theme="light"] .app-user-card,
html[data-theme="light"] .app-pill,
html[data-theme="light"] .app-button { background: rgba(255,255,255,.92); }
html[data-theme="light"] .app-table th { background: var(--app-table-head); }
html[data-theme="light"] .app-table td { color: #263449; }
html[data-theme="light"] .field input,
html[data-theme="light"] .field select { background: var(--app-input); color: var(--app-text); }
html[data-theme="light"] .detail-drawer { background: #fff; }

body:not(.app-body) .sidebar { width:278px; min-width:278px; padding:22px 16px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(148,163,184,.25) transparent; }
body:not(.app-body) .brand-logo { padding:4px 10px 16px; margin-bottom:8px; }
body:not(.app-body) .nav-item a { min-height:40px; padding:9px 12px; border:1px solid transparent; }
body:not(.app-body) .card,
body:not(.app-body) .table-box,
body:not(.app-body) .sync-btn-box { border-radius:16px; box-shadow:0 16px 38px var(--app-shadow); }

/* Radar de bosses: componentes compartilhados entre os dois temas. */
body:not(.app-body) .boss-card-grid { gap: 14px; }
body:not(.app-body) .boss-hex-card {
    background: linear-gradient(145deg, var(--app-panel-2), var(--app-panel)) !important;
    border: 1px solid var(--app-border) !important;
    box-shadow: 0 14px 34px var(--app-shadow) !important;
}
body:not(.app-body) .boss-hex-card:hover,
body:not(.app-body) .boss-hex-card.active {
    border-color: rgba(56, 189, 248, .58) !important;
    box-shadow: 0 12px 30px rgba(56, 189, 248, .14) !important;
    transform: translateY(-3px);
}
body:not(.app-body) .boss-hex-card.active {
    background: linear-gradient(145deg, rgba(56, 189, 248, .12), var(--app-panel)) !important;
}
body:not(.app-body) .hex-icon-box {
    background: rgba(56, 189, 248, .09) !important;
    border-color: rgba(56, 189, 248, .28) !important;
    color: var(--app-cyan, #38bdf8) !important;
    box-shadow: 0 8px 22px rgba(56, 189, 248, .10) !important;
}
body:not(.app-body) .boss-hex-title { color: var(--app-text) !important; }
body:not(.app-body) .boss-hex-respawn { color: var(--app-muted) !important; }
body:not(.app-body) .filter-controls,
body:not(.app-body) .table-container {
    background: linear-gradient(145deg, var(--app-panel-2), var(--app-panel)) !important;
    border-color: var(--app-border) !important;
    box-shadow: 0 14px 34px var(--app-shadow) !important;
}
body:not(.app-body) .filter-input-group label { color: var(--app-muted) !important; }
body:not(.app-body) .boss-table-server,
body:not(.app-body) .boss-table-next,
body:not(.app-body) .boss-table-player { color: var(--app-cyan, #38bdf8); font-weight: 800; }
body:not(.app-body) .boss-table-name { color: var(--app-green, #10b981); font-weight: 800; }
body:not(.app-body) .boss-table-map,
body:not(.app-body) .boss-table-last { color: var(--app-muted); }
body:not(.app-body) .boss-table-respawn { color: var(--app-text); font-weight: 800; }
body:not(.app-body) .table-container tbody tr:hover { background: rgba(56, 189, 248, .04); }

/* O tema escuro das telas públicas usa a mesma paleta equilibrada do painel admin. */
html[data-theme="dark"] body:not(.app-body) {
    background: radial-gradient(circle at 80% -20%, rgba(99, 102, 241, .16), transparent 38%), var(--app-bg) !important;
    color: var(--app-text) !important;
}
html[data-theme="dark"] body:not(.app-body) .main-wrapper {
    background: radial-gradient(circle at 80% -20%, rgba(99, 102, 241, .16), transparent 38%), var(--app-bg) !important;
}
html[data-theme="dark"] body:not(.app-body) .sidebar {
    background: var(--app-sidebar-bg) !important;
    border-color: var(--app-border) !important;
}
html[data-theme="dark"] body:not(.app-body) .card,
html[data-theme="dark"] body:not(.app-body) .table-box,
html[data-theme="dark"] body:not(.app-body) .sync-btn-box,
html[data-theme="dark"] body:not(.app-body) .header,
html[data-theme="dark"] body:not(.app-body) .user-profile-box,
html[data-theme="dark"] body:not(.app-body) .sidebar-user,
html[data-theme="dark"] body:not(.app-body) .stat-card-item,
html[data-theme="dark"] body:not(.app-body) .awards-filter-box,
html[data-theme="dark"] body:not(.app-body) .ranking-card-box,
html[data-theme="dark"] body:not(.app-body) .full-ranking-box,
html[data-theme="dark"] body:not(.app-body) .boss-hex-card,
html[data-theme="dark"] body:not(.app-body) .filter-controls,
html[data-theme="dark"] body:not(.app-body) .table-container,
html[data-theme="dark"] body:not(.app-body) [class*="modal-content"],
html[data-theme="dark"] body:not(.app-body) .modal-box-awards,
html[data-theme="dark"] body:not(.app-body) .nav-pill,
html[data-theme="dark"] body:not(.app-body) .vip-cta-banner,
html[data-theme="dark"] body:not(.app-body) .vip-perk-item,
html[data-theme="dark"] body:not(.app-body) .spotlight-card,
html[data-theme="dark"] body:not(.app-body) .spot-item,
html[data-theme="dark"] body:not(.app-body) .fila-item,
html[data-theme="dark"] body:not(.app-body) .saldo-box > div {
    background: linear-gradient(145deg, var(--app-panel-2), var(--app-panel)) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
    box-shadow: 0 14px 34px var(--app-shadow);
}
html[data-theme="dark"] body:not(.app-body) input,
html[data-theme="dark"] body:not(.app-body) select,
html[data-theme="dark"] body:not(.app-body) textarea {
    background: var(--app-input) !important;
    color: var(--app-text) !important;
    border-color: var(--app-border) !important;
}
html[data-theme="dark"] body:not(.app-body) th { background: var(--app-table-head) !important; }
html[data-theme="dark"] body:not(.app-body) td { border-color: rgba(148, 163, 184, .1) !important; }

/* Compatibilidade visual das telas operacionais ainda em migração. */
html[data-theme="light"] body:not(.app-body) { background: var(--bg-body) !important; color: var(--text-main) !important; }
html[data-theme="light"] body:not(.app-body) .sidebar { background: var(--bg-sidebar) !important; border-color: var(--border-card) !important; }
html[data-theme="light"] body:not(.app-body) .card,
html[data-theme="light"] body:not(.app-body) .table-box,
html[data-theme="light"] body:not(.app-body) .sync-btn-box,
html[data-theme="light"] body:not(.app-body) .header,
html[data-theme="light"] body:not(.app-body) .user-profile-box,
html[data-theme="light"] body:not(.app-body) .sidebar-user,
html[data-theme="light"] body:not(.app-body) .filter-controls,
html[data-theme="light"] body:not(.app-body) .table-container,
html[data-theme="light"] body:not(.app-body) [class*="modal-content"],
html[data-theme="light"] body:not(.app-body) .modal-box-awards,
html[data-theme="light"] body:not(.app-body) .nav-pill,
html[data-theme="light"] body:not(.app-body) .vip-cta-banner,
html[data-theme="light"] body:not(.app-body) .vip-perk-item,
html[data-theme="light"] body:not(.app-body) .spotlight-card,
html[data-theme="light"] body:not(.app-body) .spot-item,
html[data-theme="light"] body:not(.app-body) .fila-item,
html[data-theme="light"] body:not(.app-body) .saldo-box > div { background-color: var(--bg-card) !important; border-color: var(--border-card) !important; color: var(--text-main) !important; }
html[data-theme="light"] body:not(.app-body) input,
html[data-theme="light"] body:not(.app-body) select,
html[data-theme="light"] body:not(.app-body) textarea { background:#fff !important; color:#111827 !important; border-color:var(--border-card) !important; }
html[data-theme="light"] body:not(.app-body) th { background:#eef4fa !important; }
html[data-theme="light"] body:not(.app-body) td { color:#263449; border-color:rgba(51,65,85,.1) !important; }
html[data-theme="light"] body:not(.app-body) .nav-item a { color:#52627a; }
html[data-theme="light"] body:not(.app-body) .brand-logo { color:#111827; }
html[data-theme="light"] body:not(.app-body) .main-wrapper { background:radial-gradient(circle at 80% -20%, rgba(56,189,248,.12), transparent 36%), var(--bg-body); }
html[data-theme="light"] body:not(.app-body) .main-wrapper h1 { color:var(--text-main) !important; }
html[data-theme="light"] body:not(.app-body) .modal-overlay { background:rgba(15,23,42,.48) !important; }
html[data-theme="light"] body:not(.app-body) .boss-hex-card {
    background: linear-gradient(145deg, #fff, #f7f9fc) !important;
}
html[data-theme="light"] body:not(.app-body) .boss-hex-card.active {
    background: linear-gradient(145deg, #fff, #eef8ff) !important;
}
html[data-theme="light"] body:not(.app-body) .hex-icon-box {
    background: #eef8ff !important;
    border-color: rgba(2,132,199,.24) !important;
    box-shadow: 0 8px 20px rgba(2,132,199,.10) !important;
}
html[data-theme="light"] body:not(.app-body) .boss-table-server,
html[data-theme="light"] body:not(.app-body) .boss-table-next,
html[data-theme="light"] body:not(.app-body) .boss-table-player { color:#0284c7; }
html[data-theme="light"] body:not(.app-body) .boss-table-name { color:#059669; }
html[data-theme="light"] body:not(.app-body) .boss-table-map,
html[data-theme="light"] body:not(.app-body) .boss-table-last { color:#52627a; }
html[data-theme="light"] body:not(.app-body) .boss-table-respawn { color:#172033; }
html[data-theme="light"] body:not(.app-body) .table-container tbody tr:hover { background:rgba(2,132,199,.045); }
html[data-theme="light"] body:not(.app-body) #bossHistoryModal > div,
html[data-theme="light"] body:not(.app-body) #bossHistoryModal > div > div { background:#fff !important; border-color:var(--app-border) !important; color:#111827 !important; }
html[data-theme="light"] body:not(.app-body) #bossHistoryModal h3 { color:#0284c7 !important; }