:root {
    --bg: #0d1117;
    --surface: #161b22;
    --surface2: #21262d;
    --border: #30363d;
    --accent: #58a6ff;
    --accent-hover: #79b8ff;
    --accent-dim: #1f6feb;
    --text: #e6edf3;
    --text-muted: #8b949e;
    --danger: #f85149;
    --danger-dim: #3d1a1a;
    --success: #3fb950;
    --success-dim: #1a3d1a;
    --warning: #d29922;
    --radius: 6px;
    --radius-lg: 10px;
    --nav-height: 56px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; line-height: 1.6; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* Navigation */
.nav {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    height: var(--nav-height);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
}
.nav-brand {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
    letter-spacing: 0.02em;
}
.nav-brand:hover { color: var(--accent); text-decoration: none; }
.nav-links { display: flex; gap: 0.25rem; flex: 1; }
.nav-link {
    color: var(--text-muted);
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: var(--surface2); color: var(--text); text-decoration: none; }
.nav-link.active { color: var(--accent); }
.nav-auth { display: flex; gap: 0.5rem; align-items: center; margin-left: auto; }
.nav-user { font-size: 0.85rem; color: var(--text-muted); }
.cheater-badge {
    display: inline-block;
    background: var(--danger-dim);
    color: var(--danger);
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid var(--danger);
}

.nav-usermenu { position: relative; }
.nav-usermenu-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 0.3rem 0.6rem;
    color: var(--text);
    cursor: pointer;
    font: inherit;
}
.nav-usermenu-toggle:hover { background: var(--surface2); }
.nav-usermenu.open .nav-usermenu-toggle { background: var(--surface2); border-color: var(--border); }
.nav-user-icon { color: var(--text-muted); flex-shrink: 0; }
.nav-usermenu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 160px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 0.3rem;
    z-index: 200;
}
.nav-usermenu.open .nav-usermenu-dropdown { display: block; }
.nav-usermenu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius);
    color: var(--text);
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}
.nav-usermenu-item:hover { background: var(--surface2); text-decoration: none; }
.nav-usermenu-item-btn { font: inherit; }

/* Password reveal toggle */
.pw-field { position: relative; display: flex; }
.pw-field input[type=password], .pw-field input[type=text] { flex: 1; padding-right: 2.2rem; }
.pw-toggle {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem;
    color: var(--text-muted);
    line-height: 0;
}
.pw-toggle:hover { color: var(--text); }
.pw-toggle svg { display: block; }
.pw-toggle .pw-eye-open { display: block; }
.pw-toggle .pw-eye-closed { display: none; }
.pw-toggle.pw-toggle-visible .pw-eye-open { display: none; }
.pw-toggle.pw-toggle-visible .pw-eye-closed { display: block; }

/* Main content */
main {
    flex: 1;
    padding: 2rem 1.5rem;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}
.page-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--text);
}
.page-subtitle {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* Cards / surfaces */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}
.card + .card { margin-top: 1rem; }

/* Forms */
.form-group { margin-bottom: 1.2rem; }
label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}
input[type=text], input[type=email], input[type=password],
input[type=number], select, textarea {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
    transition: border-color 0.15s;
    outline: none;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(88,166,255,0.15);
}
textarea { resize: vertical; min-height: 80px; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
    text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent-dim); color: #fff; border-color: var(--accent-dim); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-secondary { background: var(--surface2); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--text-muted); }
.btn-danger { background: var(--danger-dim); color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
.btn-link { background: none; border: none; color: var(--accent); padding: 0; }
.btn-link:hover { color: var(--accent-hover); }
button[type=submit] { cursor: pointer; }

/* Tables */
/* .table-wrap's own overflow-x (needed so wide tables scroll horizontally on narrow screens)
   already makes it the containing block for any position:sticky descendant, per spec — a sticky
   thead can only ever stick relative to THIS box, never the page. Since the box had no bounded
   height, it just grew with content and never scrolled vertically itself, so a sticky header
   relative to it never actually stuck (it just scrolled away with everything else). Fix: give the
   wrapper a real bounded height with its own scrollbar, so sticky has an actual box to stick
   within — this is the standard pattern for sticky table headers, not a page-scroll-relative one. */
.table-wrap { overflow: auto; max-height: 70vh; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; }
thead th {
    background: var(--surface2);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.7rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1;
}
tbody tr { border-bottom: 1px solid var(--border); }
tbody tr:hover { background: var(--surface2); }
td { padding: 0.7rem 1rem; vertical-align: middle; }

/* Alerts */
.alert { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.9rem; }
.alert-success { background: var(--success-dim); color: var(--success); border: 1px solid var(--success); }
.alert-error { background: var(--danger-dim); color: var(--danger); border: 1px solid var(--danger); }
.alert-info { background: rgba(88,166,255,0.1); color: var(--accent); border: 1px solid var(--accent-dim); }

/* Auth pages */
.auth-wrap {
    min-height: calc(100vh - var(--nav-height));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.auth-box {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
}
.auth-box h1 { font-size: 1.3rem; margin-bottom: 0.25rem; }
.auth-box .subtitle { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.5rem; }
.auth-footer { margin-top: 1.25rem; font-size: 0.85rem; color: var(--text-muted); text-align: center; }

/* Utility */
.text-muted { color: var(--text-muted); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-accent { color: var(--accent); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.chip {
    display: inline-block;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.75rem;
    padding: 1px 7px;
    color: var(--text-muted);
}
.chip.admin { background: rgba(88,166,255,0.1); border-color: var(--accent-dim); color: var(--accent); }
.chip.cheater { background: var(--danger-dim); border-color: var(--danger); color: var(--danger); }

/* Cascade delete modal */
.modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 200;
    align-items: center;
    justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    max-width: 540px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
}
.modal h2 { font-size: 1.1rem; margin-bottom: 1rem; color: var(--danger); }
.cascade-tree { font-size: 0.85rem; }
.cascade-item { padding: 0.35rem 0 0.35rem 1.2rem; border-left: 2px solid var(--border); margin-top: 0.25rem; }
.cascade-item .res-type { color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; }
.cascade-item .res-name { font-weight: 600; }
.cascade-item .res-meta { color: var(--text-muted); font-size: 0.75rem; }

/* Footer */
footer {
    text-align: center;
    padding: 1.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}