:root {
    color-scheme: dark;
    --accent: #d79bef;
    --accent-strong: #c77de8;
    --accent-soft: rgba(215, 155, 239, .13);
    --accent-rgb: 215, 155, 239;
    --bg-main: #0b0b10;
    --bg-panel: rgba(20, 19, 27, .82);
    --border-pure: rgba(228, 210, 243, .11);
    --border-glow: rgba(228, 210, 243, .18);
    --text-main: #f7f3fa;
    --text-muted: #aaa0b4;
}

html[data-ui-accent="pink"] { --accent: #d79bef; --accent-strong: #c77de8; --accent-soft: rgba(215, 155, 239, .13); --accent-rgb: 215, 155, 239; }
html[data-ui-accent="blue"] { --accent: #38bdf8; --accent-strong: #0ea5e9; --accent-soft: rgba(56, 189, 248, .13); --accent-rgb: 56, 189, 248; }
html[data-ui-accent="green"] { --accent: #34d399; --accent-strong: #10b981; --accent-soft: rgba(52, 211, 153, .13); --accent-rgb: 52, 211, 153; }

html { scrollbar-color: #594363 #100f15; }
body {
    background-color: var(--bg-main) !important;
    background-image:
        radial-gradient(ellipse at 12% 0%, rgba(var(--accent-rgb), .12), transparent 34%),
        radial-gradient(ellipse at 88% 5%, rgba(var(--accent-rgb), .065), transparent 32%),
        linear-gradient(180deg, #0b0b10 0%, #101016 100%) !important;
    color: var(--text-main);
}

button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex="0"]:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 3px;
}

.panel-base, .profile-card, .table-container {
    border-color: var(--border-pure) !important;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .24);
}
.btn-wire, .stats-row .btn-wire, .time-filters .btn-wire {
    border-color: var(--border-pure);
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn-wire:hover, .stats-row .btn-wire:hover {
    border-color: rgba(var(--accent-rgb), .5);
    background: var(--accent-soft);
}
.btn-wire.active, .time-filters .btn-wire.active {
    border-color: rgba(var(--accent-rgb), .52);
    background: var(--accent-soft);
    color: var(--accent);
}

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