:root {
    --page-bg: #ffffff;
    --surface-bg: #ffffff;
    --surface-muted: #f8fafc;
    --surface-hover: #f8fafc;
    --surface-alt: #f9fafb;
    --surface-alt-2: #f3f4f6;
    --text-color: #111827;
    --text-muted: #667085;
    --border-color: #d6dce5;
    --input-bg: #ffffff;
    --input-border: #cccccc;
    --topbar-bg: #f7f7f7;
    --sidebar-bg: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    --sidebar-text: #ffffff;
    --sidebar-text-muted: #d7d7d7;
    --sidebar-hover-bg: rgba(255,255,255,0.1);
    --sidebar-active-bg: rgba(255,255,255,0.37);
    --warning-bg: lightyellow;
    --shadow-soft: none;
    --link-color: #2563eb;
}

html[data-theme="dark"] {
    --page-bg: #0f172a;
    --surface-bg: #111827;
    --surface-muted: #1f2937;
    --surface-hover: #243244;
    --surface-alt: #172033;
    --surface-alt-2: #1e293b;
    --text-color: #d8dee9;
    --text-muted: #9aa8bc;
    --border-color: #334155;
    --input-bg: #0f172a;
    --input-border: #475569;
    --topbar-bg: #111827;
    --sidebar-bg: linear-gradient(180deg, #020617 0%, #172554 100%);
    --sidebar-text: #f8fafc;
    --sidebar-text-muted: #cbd5e1;
    --sidebar-hover-bg: rgba(148,163,184,0.18);
    --sidebar-active-bg: rgba(148,163,184,0.28);
    --warning-bg: #3f2f16;
    --shadow-soft: 0 18px 38px rgba(0,0,0,0.45);
    --link-color: #93c5fd;
}

html,
body {
    background: var(--page-bg);
    color: var(--text-color);
}

body {
    transition: background-color 0.2s ease, color 0.2s ease;
}

a {
    color: var(--link-color);
}

html[data-theme="dark"] .login-page {
    background: var(--page-bg) !important;
}

html[data-theme="dark"] .login-card,
html[data-theme="dark"] .match-row,
html[data-theme="dark"] .match-row.detail,
html[data-theme="dark"] .rank-card,
html[data-theme="dark"] .matches-stat-card,
html[data-theme="dark"] .summary-stat-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .bet-row,
html[data-theme="dark"] .bets-header,
html[data-theme="dark"] .tips-progress-footer,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item {
    background: var(--surface-bg) !important;
    color: var(--text-color);
    border-color: var(--border-color) !important;
    box-shadow: var(--shadow-soft);
}

html[data-theme="dark"] .match-row:hover,
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-primary:hover {
    background: var(--surface-hover) !important;
}

html[data-theme="dark"] .upcoming-match {
    background: var(--surface-bg) !important;
}

html[data-theme="dark"] .played-match {
    background: linear-gradient(90deg, rgba(34, 197, 94, .12), rgba(34, 197, 94, .05)) !important;
    border-color: rgba(34, 197, 94, .24) !important;
}

html[data-theme="dark"] .played-match:hover {
    background: linear-gradient(90deg, rgba(34, 197, 94, .18), rgba(34, 197, 94, .07)) !important;
}

.match-left,
.rank-head,
.rank-footer,
.date,
.team-name,
.legend-note,
.login-loading {
    color: var(--text-muted) !important;
}

.rank-footer .update-date,
.login-title,
.score-big,
.clock,
.top-title,
.matches-dashboard-title,
.summary-dashboard-title,
.matches-stat-value,
.summary-stat-value,
.panel-title,
.panel-value,
.others-title {
    color: var(--text-color) !important;
}

html[data-theme="dark"] .matches-dashboard-subtitle,
html[data-theme="dark"] .summary-dashboard-subtitle,
html[data-theme="dark"] .matches-stat-label,
html[data-theme="dark"] .summary-stat-label,
html[data-theme="dark"] .bets-header,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .others,
html[data-theme="dark"] .detail-header-warning,
html[data-theme="dark"] .detail-header-ok,
html[data-theme="dark"] .tips-progress-label,
html[data-theme="dark"] .tips-progress-value,
html[data-theme="dark"] .tips-progress-percent {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .rank-head {
    border-bottom-color: var(--border-color) !important;
}

html[data-theme="dark"] .rank-row {
    background: var(--surface-alt) !important;
    color: var(--text-color);
}

html[data-theme="dark"] .rank-row:nth-child(even) {
    background: var(--surface-alt-2) !important;
}

html[data-theme="dark"] .rank-footer {
    border-top-color: var(--border-color) !important;
}

html[data-theme="dark"] .summary-stat-card,
html[data-theme="dark"] .matches-stat-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .bet-row,
html[data-theme="dark"] .bets-header {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .bets-header {
    background: var(--surface-muted) !important;
}

html[data-theme="dark"] .tips-progress-footer {
    border-top-color: var(--border-color) !important;
}

html[data-theme="dark"] .tips-progress-bar {
    background: #334155 !important;
}

html[data-theme="dark"] .tips-progress-value {
    color: #d8dee9 !important;
}

html[data-theme="dark"] .login-input,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .bet-input {
    background: var(--input-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--input-border) !important;
}

html[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted);
}

html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-primary {
    color: var(--text-color);
    border-color: var(--border-color);
}

html[data-theme="dark"] .table {
    --bs-table-bg: var(--surface-bg);
    --bs-table-color: var(--text-color);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: #162033;
    --bs-table-striped-color: var(--text-color);
    --bs-table-hover-bg: #1d2a3f;
    --bs-table-hover-color: var(--text-color);
}

html[data-theme="dark"] .navbar-toggler:checked {
    background-color: rgba(148, 163, 184, 0.35);
}

html[data-theme="dark"] .spinner {
    border-color: #475569;
    border-top-color: #93c5fd;
}

html[data-theme="dark"] .back-btn {
    color: #60a5fa !important;
}

html[data-theme="dark"] .back-btn:hover {
    color: #93c5fd !important;
}

html[data-theme="dark"] .blazored-toast,
html[data-theme="dark"] .blazored-toast-component {
    background-color: #172033 !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 18px 38px rgba(0,0,0,0.42) !important;
}

html[data-theme="dark"] .blazored-toast .blazored-toast-message {
    color: var(--text-color) !important;
}

html[data-theme="dark"] .blazored-toast .blazored-toast-close {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .blazored-toast .blazored-toast-close:hover {
    color: var(--text-color) !important;
}

html[data-theme="dark"] .blazored-toast .blazored-toast-progressbar {
    background: rgba(255,255,255,0.06) !important;
}