:root {
    /* Nyx — Greek goddess of night. Palette reads as a starry night sky:
       near-black indigo ground, violet primary (doubles as the NYX ledger
       balance color so brand and balance always read as the same thing),
       moonlight-blue secondary, starlight-gold accent for prizes/streaks. */
    --nx-bg: #0a0a18;
    --nx-surface: #14132a;
    --nx-surface-2: #1c1a3a;
    --nx-border: #2e2b52;
    --nx-text: #eae8fb;
    --nx-text-muted: #9d97c7;
    --nx-primary: #7c3aed;
    --nx-primary-dark: #6425c9;
    --nx-primary-light: #a873f5;
    --nx-secondary: #38bdf8;
    --nx-accent: #f5c542;
    --nx-success: #34d399;
    --nx-danger: #ef4444;
    --nx-radius: 14px;
}

body {
    background-color: var(--nx-bg);
    color: var(--nx-text);
    font-family: 'Inter', sans-serif;
    position: relative;
}

/* Subtle starfield — faint fixed dots behind everything, never bright
   enough to fight page content for attention. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(1.5px 1.5px at 20px 30px, rgba(234,232,251,.35), transparent),
        radial-gradient(1.5px 1.5px at 140px 90px, rgba(234,232,251,.25), transparent),
        radial-gradient(1px 1px at 90px 160px, rgba(234,232,251,.3), transparent),
        radial-gradient(1.5px 1.5px at 220px 60px, rgba(234,232,251,.2), transparent),
        radial-gradient(1px 1px at 260px 200px, rgba(234,232,251,.3), transparent),
        radial-gradient(1.5px 1.5px at 40px 220px, rgba(234,232,251,.2), transparent);
    background-repeat: repeat;
    background-size: 280px 260px;
}

h1, h2, h3, h4, h5, h6, .fw-bold, .navbar-brand {
    font-family: 'Sora', sans-serif;
}

.mono { font-family: 'JetBrains Mono', monospace; }

.navbar {
    background-color: var(--nx-surface) !important;
    border-bottom: 1px solid var(--nx-border);
    position: relative;
    z-index: 1030;
}

.navbar-brand { color: var(--nx-primary-light) !important; }

.nav-link { color: var(--nx-text) !important; }
.nav-link:hover, .nav-link.active { color: var(--nx-primary-light) !important; }

.btn-primary {
    background-color: var(--nx-primary);
    border-color: var(--nx-primary);
    font-weight: 700;
    border-radius: 999px;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--nx-primary-dark);
    border-color: var(--nx-primary-dark);
}

.btn-outline-primary {
    color: var(--nx-primary-light);
    border-color: var(--nx-primary);
    border-radius: 999px;
    font-weight: 700;
}
.btn-outline-primary:hover { background-color: var(--nx-primary); color: #fff; }

.btn-accent {
    background: linear-gradient(135deg, var(--nx-accent), #d89f1f);
    border: none;
    color: #1a1400;
    font-weight: 700;
    border-radius: 999px;
}
.btn-accent:hover { filter: brightness(1.08); color: #1a1400; }

.card {
    background-color: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
}

.form-control, .form-select {
    background-color: var(--nx-surface-2);
    border-color: var(--nx-border);
    color: var(--nx-text);
}
.form-control:focus, .form-select:focus {
    background-color: var(--nx-surface-2);
    color: var(--nx-text);
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 0.2rem rgba(124, 58, 237, 0.2);
}
.form-control::placeholder { color: var(--nx-text-muted); opacity: .7; }

.text-muted { color: var(--nx-text-muted) !important; }
.text-nx-accent { color: var(--nx-accent) !important; }
.text-nx-primary { color: var(--nx-primary-light) !important; }

a { color: var(--nx-secondary); }
a:hover { color: var(--nx-primary-light); }

footer { border-top: 1px solid var(--nx-border); }

.badge-nyx {
    background: linear-gradient(135deg, var(--nx-primary), var(--nx-primary-dark));
    color: #fff;
}

.stat-tile {
    background: var(--nx-surface-2);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    padding: 1.25rem;
    text-align: center;
}

.table { color: var(--nx-text); }
.table > :not(caption) > * > * { border-bottom-color: var(--nx-border); background-color: transparent; color: inherit; }

.modal-content { background-color: var(--nx-surface); border: 1px solid var(--nx-border); color: var(--nx-text); }

.dropdown-menu { background-color: var(--nx-surface-2); border: 1px solid var(--nx-border); }
.dropdown-item { color: var(--nx-text); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--nx-surface); color: var(--nx-primary-light); }
.dropdown-divider { border-color: var(--nx-border); }

/* Fixed-height scroll body showing ~10 table-sm rows (1 sticky header row +
   10 body rows at ~1.9rem each); more rows are appended on scroll
   (admin log/history tables) rather than re-paginated by page load. */
.nx-scroll-table { max-height: 21rem; overflow-y: auto; }
.nx-scroll-table table { margin-bottom: 0; }
.nx-scroll-table thead th {
    position: sticky;
    top: 0;
    background: var(--nx-surface);
    z-index: 1;
}
.nx-scroll-table .nx-scroll-loading td { text-align: center; }

main.container { min-height: 60vh; }