:root,
html[data-theme="dark"] {
    --color-primary: 190 176 255;
    --color-bg: 8 12 24;
    --color-card: 18 25 45;
    --color-border: 66 80 120;
    --theme-bg-soft: 14 20 37;
    --theme-bg-elev: 24 33 58;
    --theme-text-strong: 236 241 255;
    --theme-text-muted: 151 163 199;
    --theme-shadow-1: 0 14px 40px rgb(3 6 18 / 0.45);
    --theme-shadow-2: 0 28px 70px rgb(3 6 18 / 0.55);
    --theme-glow: 0 0 0 1px rgb(var(--color-primary) / 0.1), 0 10px 32px rgb(var(--color-primary) / 0.2);
}

html[data-theme="light"] {
    --color-primary: 120 96 232;
    --color-bg: 245 248 255;
    --color-card: 255 255 255;
    --color-border: 204 216 241;
    --theme-bg-soft: 236 242 255;
    --theme-bg-elev: 227 236 255;
    --theme-text-strong: 16 24 45;
    --theme-text-muted: 84 101 138;
    --theme-shadow-1: 0 10px 30px rgb(76 95 138 / 0.12);
    --theme-shadow-2: 0 20px 56px rgb(76 95 138 / 0.16);
    --theme-glow: 0 0 0 1px rgb(var(--color-primary) / 0.16), 0 10px 26px rgb(var(--color-primary) / 0.22);
}

html {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
}

body {
    font-family: Inter, "Segoe UI", sans-serif;
    background:
        radial-gradient(860px 340px at 15% -15%, rgb(var(--color-primary) / 0.18), transparent 72%),
        linear-gradient(180deg, rgb(var(--color-bg)), rgb(var(--theme-bg-soft)));
    color: rgb(var(--theme-text-strong));
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgb(var(--color-primary) / 0.04), transparent 35%, transparent 70%, rgb(var(--color-primary) / 0.05));
    z-index: 0;
}

body > * {
    position: relative;
    z-index: 1;
}

::selection {
    background: rgb(var(--color-primary) / 0.3);
    color: rgb(var(--theme-text-strong));
}

.site-hero-bg {
    background:
        radial-gradient(980px 340px at 50% -150px, rgb(var(--color-primary) / 0.2), transparent 62%),
        linear-gradient(180deg, rgb(var(--color-bg) / 0.98), rgb(var(--theme-bg-soft) / 0.98));
}

header.sticky,
header.mb-6 {
    backdrop-filter: blur(10px);
}

.panel,
.glass-card {
    background: linear-gradient(165deg, rgb(var(--color-card) / 0.96), rgb(var(--theme-bg-elev) / 0.82)) !important;
    border: 1px solid rgb(var(--color-border) / 0.95) !important;
    box-shadow: var(--theme-shadow-1);
}

.gold-line {
    box-shadow: var(--theme-glow);
}

.shadow-2xl {
    box-shadow: var(--theme-shadow-2) !important;
}

table thead tr {
    background: rgb(var(--theme-bg-soft) / 0.58) !important;
}

table tbody tr:hover {
    background: rgb(var(--color-primary) / 0.07) !important;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
select,
textarea {
    background: rgb(var(--theme-bg-soft) / 0.86) !important;
    border-color: rgb(var(--color-border) / 0.9) !important;
    color: rgb(var(--theme-text-strong)) !important;
    border-radius: 0.7rem !important;
}

input::placeholder,
textarea::placeholder {
    color: rgb(var(--theme-text-muted) / 0.85) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgb(var(--color-primary)) !important;
    box-shadow: 0 0 0 2px rgb(var(--color-primary) / 0.22) !important;
}

button,
a {
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

button.rounded-lg.bg-primary,
button.rounded-md.bg-primary,
a.rounded-lg.bg-primary,
a.rounded-md.bg-primary,
#player-search-btn {
    background: linear-gradient(135deg, rgb(var(--color-primary)), rgb(147 197 253)) !important;
    border: 1px solid rgb(var(--color-primary) / 0.38);
    color: rgb(17 24 39) !important;
    box-shadow: 0 8px 22px rgb(var(--color-primary) / 0.24);
}

button.rounded-lg.bg-primary:hover,
button.rounded-md.bg-primary:hover,
a.rounded-lg.bg-primary:hover,
a.rounded-md.bg-primary:hover,
#player-search-btn:hover {
    box-shadow: 0 12px 28px rgb(var(--color-primary) / 0.3);
}

button.border.border-border-dark,
a.border.border-border-dark {
    background: rgb(var(--theme-bg-soft) / 0.66);
    border-color: rgb(var(--color-border) / 0.95) !important;
}

button.border.border-border-dark:hover,
a.border.border-border-dark:hover {
    border-color: rgb(var(--color-primary) / 0.82) !important;
    background: rgb(var(--color-primary) / 0.12);
}

#theme-toggle {
    min-width: 84px;
    justify-content: center;
    background: rgb(var(--theme-bg-soft) / 0.72);
}

#theme-toggle:hover {
    border-color: rgb(var(--color-primary) / 0.85) !important;
    box-shadow: 0 0 0 2px rgb(var(--color-primary) / 0.15);
}

#incidents-pagination button[data-page],
#staff-punishments-filters .staff-type-tab,
#incidents-filters .incident-type-tab,
#admin-tabbar button {
    border-color: rgb(var(--color-border) / 0.95) !important;
    background: rgb(var(--theme-bg-soft) / 0.7);
}

#incidents-pagination button[data-page]:hover,
#staff-punishments-filters .staff-type-tab:hover,
#incidents-filters .incident-type-tab:hover,
#admin-tabbar button:hover {
    border-color: rgb(var(--color-primary) / 0.8) !important;
    color: rgb(var(--theme-text-strong)) !important;
}

#incidents-pagination button[data-page].border-primary,
#staff-punishments-filters .staff-type-tab.border-primary,
#incidents-filters .incident-type-tab.border-primary,
#admin-tabbar button.border-primary {
    background: rgb(var(--color-primary) / 0.2) !important;
    color: rgb(var(--theme-text-strong)) !important;
}

footer {
    background: rgb(var(--theme-bg-soft) / 0.36);
    backdrop-filter: blur(6px);
}

html[data-theme="light"] .bg-violet-300\/15 {
    background-color: rgb(124 58 237 / 0.18) !important;
}

html[data-theme="light"] .text-violet-200 {
    color: rgb(76 29 149) !important;
}

html[data-theme="light"] .bg-sky-300\/15 {
    background-color: rgb(14 116 144 / 0.17) !important;
}

html[data-theme="light"] .text-sky-200 {
    color: rgb(12 74 110) !important;
}

html[data-theme="light"] .bg-amber-300\/15 {
    background-color: rgb(245 158 11 / 0.22) !important;
}

html[data-theme="light"] .text-amber-200 {
    color: rgb(146 64 14) !important;
}

html[data-theme="light"] .bg-rose-300\/15 {
    background-color: rgb(244 63 94 / 0.16) !important;
}

html[data-theme="light"] .text-rose-200 {
    color: rgb(136 19 55) !important;
}

html[data-theme="light"] .text-yellow-400 {
    color: rgb(161 98 7) !important;
}

@media (max-width: 640px) {
    .panel,
    .glass-card {
        box-shadow: 0 10px 30px rgb(15 23 42 / 0.3);
    }
}