:root {
    color-scheme: dark;
    --page: #050611;
    --page-secondary: #0d0d26;
    --surface: rgba(29, 28, 67, .88);
    --surface-strong: rgba(8, 9, 27, .92);
    --surface-soft: rgba(126, 98, 235, .09);
    --border: rgba(151, 131, 255, .18);
    --highlight: rgba(255, 255, 255, .11);
    --text: #f7f5ff;
    --muted: #a6a3c2;
    --shadow: 0 24px 64px rgba(0, 0, 0, .32), 0 10px 30px rgba(55, 38, 133, .10), inset 0 1px 0 rgba(255,255,255,.07);
    --accent: #7659e8;
}

html[data-theme="light"] {
    color-scheme: light;
    --page: #f3f6fc;
    --page-secondary: #e8eef9;
    --surface: rgba(255, 255, 255, .82);
    --surface-strong: rgba(255, 255, 255, .92);
    --surface-soft: rgba(255, 255, 255, .70);
    --border: rgba(82, 101, 135, .24);
    --highlight: rgba(255, 255, 255, .94);
    --text: #172033;
    --muted: #52627a;
    --shadow: 0 25px 65px rgba(63, 79, 113, .18), inset 0 1px 0 rgba(255,255,255,.96);
    --accent: #5365e8;
}

html, body { min-height: 100%; }
body {
    color: var(--text) !important;
    background:
        radial-gradient(circle at 50% 105%, rgba(116, 82, 222, .27), transparent 38rem),
        radial-gradient(circle at 8% 38%, rgba(90, 70, 190, .10), transparent 22rem),
        radial-gradient(circle at 92% 14%, rgba(107, 83, 219, .08), transparent 24rem),
        linear-gradient(155deg, var(--page) 0%, #070718 54%, var(--page-secondary) 100%) !important;
    background-attachment: fixed !important;
    transition: color .25s ease, background-color .25s ease;
}

nav {
    background: color-mix(in srgb, var(--surface-strong) 86%, transparent) !important;
    border-color: var(--border) !important;
    -webkit-backdrop-filter: saturate(180%) blur(28px) !important;
    backdrop-filter: saturate(180%) blur(28px) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.22), inset 0 -1px 0 rgba(151,131,255,.11) !important;
}
.web-logo-button {
    padding: .35rem .7rem .35rem .35rem;
    border: 1px solid transparent;
    border-radius: .9rem;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.web-logo-button:hover {
    transform: translateY(-1px);
    background: var(--surface-soft);
    border-color: var(--border);
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.web-logo-button:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
[class~="bg-slate-950"], [class~="bg-slate-900"], [class~="bg-slate-800"] { background-color: var(--surface-strong) !important; }
[class~="bg-white/5"], [class~="bg-white/[0.03]"] { background-color: var(--surface-soft) !important; }
[class~="bg-white/10"] { background-color: color-mix(in srgb, var(--surface-soft) 155%, transparent) !important; }
[class~="border-white/5"], [class~="border-white/10"], [class~="border-white/15"] { border-color: var(--border) !important; }
[class~="divide-white/5"] > :not([hidden]) ~ :not([hidden]), [class~="divide-white/10"] > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }
[class~="text-slate-100"], [class~="text-slate-200"] { color: var(--text) !important; }
[class~="text-slate-300"] { color: color-mix(in srgb, var(--text) 78%, var(--muted)) !important; }
[class~="text-slate-400"], [class~="text-slate-500"] { color: var(--muted) !important; }

.panel, .stat-card, article { box-shadow: var(--shadow); }
.panel, .stat-card, article, section[class*="bg-white/"], div[class*="bg-white/"] {
    -webkit-backdrop-filter: saturate(150%) blur(22px);
    backdrop-filter: saturate(150%) blur(22px);
}
.panel, .stat-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 95%, white 5%), var(--surface)) !important;
    border-color: var(--border) !important;
    border-radius: 1.35rem !important;
}
.panel::before, .stat-card::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(125deg, var(--highlight), transparent 24%, transparent 74%, rgba(126,91,232,.09));
    opacity: .42;
}
.panel > *, .stat-card > * { position: relative; z-index: 1; }
.field, input:not([type="radio"]):not([type="checkbox"]), textarea, select {
    color: var(--text) !important;
    background-color: var(--surface-soft) !important;
    border-color: var(--border) !important;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    box-shadow: inset 0 1px 0 var(--highlight), 0 5px 18px rgba(0,0,0,.04);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.field:focus, input:focus, textarea:focus, select:focus { border-color: rgba(101,117,255,.7) !important; box-shadow: 0 0 0 4px rgba(101,117,255,.12), inset 0 1px 0 var(--highlight) !important; }
input::placeholder, textarea::placeholder { color: var(--muted) !important; opacity: .78; }
select option, select optgroup { color: #eef4ff; background-color: #111a2d; }
select option:checked { color: #fff; background-color: #2563eb; }
table thead { background: var(--surface-soft) !important; }

.theme-toggle {
    width: 2.35rem; height: 2.35rem; border-radius: .75rem;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text); background: linear-gradient(145deg, var(--surface-soft), rgba(255,255,255,.04));
    border: 1px solid var(--border); transition: .2s ease;
    -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
    box-shadow: inset 0 1px 0 var(--highlight), 0 8px 22px rgba(0,0,0,.12);
}
.theme-toggle:hover { transform: translateY(-1px); border-color: rgba(109, 124, 255, .5); color: #7c8aff; }
.theme-toggle .theme-sun { display: none; }
html[data-theme="light"] .theme-toggle .theme-sun { display: inline-block; }
html[data-theme="light"] .theme-toggle .theme-moon { display: none; }

.auth-alert-error { color:#fecdd3; background:rgba(225,29,72,.13); border-color:rgba(251,113,133,.35); }
.auth-alert-success { color:#a7f3d0; background:rgba(16,185,129,.12); border-color:rgba(52,211,153,.32); }
.mail-delivery-hint { color:#fde68a; background:rgba(245,158,11,.10); border-color:rgba(251,191,36,.30); }
html[data-theme="light"] .auth-alert-error { color:#9f1239; background:rgba(255,228,230,.92); border-color:rgba(225,29,72,.32); }
html[data-theme="light"] .auth-alert-success { color:#065f46; background:rgba(209,250,229,.94); border-color:rgba(5,150,105,.30); }
html[data-theme="light"] .mail-delivery-hint { color:#78350f; background:rgba(254,243,199,.95); border-color:rgba(217,119,6,.32); }

html[data-theme="light"] .text-blue-300, html[data-theme="light"] .text-blue-400 { color: #4255c9 !important; }
html[data-theme="light"] .text-emerald-300, html[data-theme="light"] .text-emerald-400 { color: #087c5b !important; }
html[data-theme="light"] .text-amber-300, html[data-theme="light"] .text-amber-400 { color: #9a5c08 !important; }
html[data-theme="light"] .text-red-300, html[data-theme="light"] .text-red-400 { color: #c33245 !important; }
html[data-theme="light"] [class~="shadow-xl"], html[data-theme="light"] [class~="shadow-2xl"] { box-shadow: var(--shadow) !important; }
html[data-theme="light"] [class~="bg-white/5"] { background-color: rgba(255,255,255,.68) !important; }
html[data-theme="light"] [class~="bg-white/10"] { background-color: rgba(255,255,255,.82) !important; }
html[data-theme="light"] [class~="text-white"]:not([class~="bg-blue-600"]):not([class~="bg-blue-700"]):not([class*="from-blue-"]) { color: var(--text) !important; }
html[data-theme="light"] [class~="bg-blue-600"][class~="text-white"],
html[data-theme="light"] [class~="bg-blue-700"][class~="text-white"] { color: #fff !important; }
html[data-theme="light"] input:not([type="radio"]):not([type="checkbox"]),
html[data-theme="light"] textarea,
html[data-theme="light"] select { background-color: rgba(255,255,255,.88) !important; border-color: rgba(82,101,135,.25) !important; }
html[data-theme="light"] select { color-scheme: light !important; color: #172033 !important; }
html[data-theme="light"] select option,
html[data-theme="light"] select optgroup { color: #172033 !important; background-color: #ffffff !important; }
html[data-theme="light"] select option:checked { color: #ffffff !important; background-color: #2563eb !important; }
html[data-theme="light"] select option:disabled { color: #7b8799 !important; background-color: #f1f5f9 !important; }
html[data-theme="dark"] select { color-scheme: dark !important; }
html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup { color: #f7f5ff !important; background-color: #171733 !important; }
html[data-theme="dark"] select option:checked { color: #ffffff !important; background-color: #7659e8 !important; }
html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: #65748a !important; opacity: 1; }
html[data-theme="light"] label { color: #27354a !important; font-weight: 500; }
html[data-theme="light"] .exam-timer-box { background: rgba(219, 229, 255, .96) !important; border-color: rgba(55, 83, 190, .38) !important; box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgba(55,83,190,.13); }
html[data-theme="light"] .exam-timer-box #timer { color: #1e3a8a !important; text-shadow: none; }
html[data-theme="light"] .exam-timer-box .text-slate-400 { color: #45597a !important; }

/* Exam selection: keep card copy and colored actions clearly readable in both themes. */
.exam-select-page .exam-category-card .text-slate-400,
.exam-select-page .exam-select-modal .text-slate-400 { color: #bbb8d1 !important; }
.exam-select-page .exam-category-card .text-slate-300,
.exam-select-page .exam-select-modal .text-slate-300 { color: #dedbea !important; }
.exam-select-page .exam-primary-action { color: #fff !important; }
.exam-select-page .exam-primary-action:disabled { color: #e8ebf2 !important; }
html[data-theme="light"] .exam-select-page .exam-category-card .text-slate-400,
html[data-theme="light"] .exam-select-page .exam-select-modal .text-slate-400 { color: #46566f !important; }
html[data-theme="light"] .exam-select-page .exam-category-card .text-slate-300,
html[data-theme="light"] .exam-select-page .exam-select-modal .text-slate-300 { color: #2f3e55 !important; }
html[data-theme="light"] body.exam-select-page .exam-category-card .exam-primary-action.text-white,
html[data-theme="light"] body.exam-select-page .exam-category-card a.exam-primary-action.text-white,
html[data-theme="light"] body.exam-select-page .exam-category-card button.exam-primary-action.text-white {
    color: #fff !important;
}

button, a[class*="rounded-xl"], a[class*="rounded-lg"] { transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
button:hover, a[class*="rounded-xl"]:hover, a[class*="rounded-lg"]:hover { transform: translateY(-1px); }
[class~="rounded-xl"] { border-radius: 1rem; }
[class~="rounded-2xl"] { border-radius: 1.4rem; }

html[data-theme="light"] body {
    background:
        radial-gradient(circle at 8% 0%, rgba(138, 151, 255, .32), transparent 31rem),
        radial-gradient(circle at 94% 8%, rgba(70, 205, 235, .24), transparent 27rem),
        radial-gradient(circle at 54% 100%, rgba(202, 151, 255, .18), transparent 34rem),
        linear-gradient(145deg, #f5f8ff, #e8eef8) !important;
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }

/* Nuvios-inspired dark presentation: deep navy, violet surfaces and crisp contrast. */
html[data-theme="dark"] nav {
    background: rgba(5, 6, 18, .91) !important;
    border-bottom-color: rgba(151, 131, 255, .16) !important;
}
html[data-theme="dark"] .panel,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] article {
    border: 1px solid rgba(151, 131, 255, .16) !important;
    box-shadow: var(--shadow) !important;
}
html[data-theme="dark"] .panel,
html[data-theme="dark"] .stat-card {
    background: linear-gradient(145deg, rgba(32, 31, 73, .96), rgba(22, 22, 53, .95)) !important;
}
html[data-theme="dark"] .stat-card {
    min-height: 9.5rem;
}
html[data-theme="dark"] .stat-card:hover {
    background: linear-gradient(145deg, rgba(42, 39, 91, .98), rgba(27, 26, 65, .97)) !important;
    border-color: rgba(151, 131, 255, .34) !important;
    box-shadow: 0 28px 60px rgba(0,0,0,.38), 0 0 32px rgba(118,89,232,.10) !important;
}
html[data-theme="dark"] .stat-number { color: #ffffff !important; letter-spacing: -.025em; }
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .stat-foot { color: #aaa7c7 !important; }
html[data-theme="dark"] .stat-icon {
    border: 1px solid rgba(173,157,255,.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px rgba(0,0,0,.20);
}
html[data-theme="dark"] [class~="bg-blue-600"],
html[data-theme="dark"] [class~="bg-blue-700"] {
    background-color: #7056dc !important;
}
html[data-theme="dark"] [class~="hover:bg-blue-700"]:hover,
html[data-theme="dark"] [class~="hover:bg-blue-600"]:hover {
    background-color: #8168eb !important;
}
html[data-theme="dark"] [class~="text-blue-300"],
html[data-theme="dark"] [class~="text-blue-400"] { color: #9d8aff !important; }
html[data-theme="dark"] [class~="bg-blue-500/10"],
html[data-theme="dark"] [class~="bg-blue-500/15"],
html[data-theme="dark"] [class~="bg-blue-500/20"] { background-color: rgba(118,89,232,.17) !important; }
html[data-theme="dark"] [class~="border-blue-500/20"],
html[data-theme="dark"] [class~="border-blue-500/30"] { border-color: rgba(151,131,255,.30) !important; }
html[data-theme="dark"] nav a[class~="bg-white/10"],
html[data-theme="dark"] nav summary[class~="bg-white/10"] {
    color: #fff !important;
    background: linear-gradient(135deg, #7659e8, #6550d2) !important;
    border-color: rgba(185,173,255,.38) !important;
    box-shadow: 0 8px 22px rgba(78,55,174,.28), inset 0 1px 0 rgba(255,255,255,.17);
}
html[data-theme="dark"] nav details > div,
html[data-theme="dark"] #shared-mobile-menu {
    background: rgba(14, 14, 38, .98) !important;
    border-color: rgba(151, 131, 255, .20) !important;
    box-shadow: 0 24px 55px rgba(0,0,0,.42) !important;
}
html[data-theme="dark"] .quick-link {
    background: rgba(8, 9, 29, .34) !important;
    border-color: rgba(151,131,255,.14) !important;
}
html[data-theme="dark"] .quick-link:hover {
    background: rgba(118,89,232,.13) !important;
    border-color: rgba(151,131,255,.30) !important;
}
html[data-theme="dark"] table thead { background: rgba(7, 8, 27, .52) !important; }
html[data-theme="dark"] footer { border-color: rgba(151,131,255,.11) !important; }

@media (max-width: 767px) {
    html[data-theme="dark"] .stat-card { min-height: 8.75rem; }
}