:root {
    /* Design system v3 remap - violet+coral accent pair, true near-black base, replacing the
       old cyan/pink/purple-tinted-void palette. Every existing page already references these
       same variable NAMES throughout its markup (--accent, --accent2, --bg-void, etc.), so
       changing the VALUES here reskins the entire site at once without touching any of the
       ~90 individual view files that use them.
       New v3 tokens (--violet, --coral, --r-*, --space-*) are added here rather than only in
       style-v3.css so existing pages loading only style.css still see the same base colors as
       pages using the newer v3 component classes - both point at the same source of truth. */
    --bg-void: #050506;
    --bg-panel: rgba(255, 255, 255, 0.09);
    --bg-panel-alt: rgba(255, 255, 255, 0.06);
    --bg-elevated: rgba(255, 255, 255, 0.14);
    --border: rgba(255, 255, 255, 0.16);
    --border-soft: rgba(255, 255, 255, 0.1);
    --accent: #7c5cff;
    --accent-soft: #9b7fff;
    --accent-glow: rgba(124, 92, 255, 0.3);
    --accent2: #ff5d8f;
    --accent2-glow: rgba(255, 93, 143, 0.3);
    --accent3: #ffb020;
    --accent3-glow: rgba(255, 176, 32, 0.25);
    --green: #2ee6a8;
    --yellow: #ffb020;
    --orange: #ff9f0a;
    --red: #ff5470;
    --purple: #7c5cff;
    --text: #f6f6f8;
    --text-dim: #b0b0ba;
    --text-faint: #6c6c76;
    --radius: 28px;
    --radius-sm: 18px;
    --violet: #7c5cff;
    --coral: #ff5d8f;
    --glass-blur: blur(40px) saturate(180%);
}

[data-theme="light"] {
    --bg-void: #f0edff;
    --bg-panel: rgba(255, 255, 255, 0.7);
    --bg-panel-alt: rgba(255, 255, 255, 0.5);
    --bg-elevated: rgba(255, 255, 255, 0.9);
    --border: rgba(120, 60, 200, 0.15);
    --border-soft: rgba(120, 60, 200, 0.1);
    --accent: #00b3a6;
    --accent-soft: #00b3a6;
    --accent-glow: rgba(0, 179, 166, 0.18);
    --text: #241c3d;
    --text-dim: #6b5f94;
    --text-faint: #9a8fc2;
}

[data-theme="sunset"] {
    --accent: #ff9f0a;
    --accent-soft: #ff8c00;
    --accent-glow: rgba(255, 159, 10, 0.25);
    --accent2: #ff453a;
    --accent2-glow: rgba(255, 69, 58, 0.25);
    --accent3: #ffb020;
}

[data-theme="emerald"] {
    --accent: #32ff7e;
    --accent-soft: #22c55e;
    --accent-glow: rgba(50, 255, 126, 0.25);
    --accent2: #ffb020;
    --accent2-glow: rgba(255,176,32, 0.25);
    --accent3: #7c5cff;
}

.theme-toggle-btn {
    display: block;
    width: 100%;
    background: var(--bg-panel-alt);
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    cursor: pointer;
    margin-top: 12px;
    font-family: 'Inter', sans-serif;
    transition: all 0.15s ease;
}
.theme-toggle-btn:hover { background: var(--bg-elevated); color: var(--text); }

* { box-sizing: border-box; }

body {
    margin: 0;
    background:
        radial-gradient(circle 700px at 8% 5%, rgba(255,93,143, 0.32), transparent 65%),
        radial-gradient(circle 650px at 95% 15%, rgba(124,92,255, 0.26), transparent 65%),
        radial-gradient(circle 600px at 30% 95%, rgba(255, 176, 32, 0.14), transparent 65%),
        radial-gradient(circle 550px at 80% 90%, rgba(155, 127, 255, 0.22), transparent 60%),
        var(--bg-void);
    background-attachment: fixed;
    color: var(--text);
    font-family: 'Inter', -apple-system, sans-serif;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    position: relative;
}
@keyframes bg-drift {
    0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%; }
    50% { background-position: 8% 8%, 92% 12%, 52% 92%; }
}

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

a { color: var(--accent); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: #4de8e0; }

/* ---------- Login ---------- */
.login-split {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(255,93,143,0.12), transparent),
                radial-gradient(ellipse 70% 60% at 85% 90%, rgba(124,92,255,0.1), transparent),
                var(--bg-void);
}
@media (max-width: 900px) {
    .login-split { grid-template-columns: 1fr; }
    .login-hero { display: none; }
}

/* Subtle animated grid mesh for depth, on top of the radial gradients above */
.login-split::before {
    content: '';
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 44px 44px;
    animation: grid-drift 30s linear infinite;
    pointer-events: none;
}
@keyframes grid-drift { from { background-position: 0 0; } to { background-position: 44px 44px; } }

.login-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    position: relative;
    z-index: 2;
    border-right: 1px solid var(--border-soft);
}
.login-hero-content { max-width: 480px; }
.login-hero-logo {
    width: 64px; height: 64px; border-radius: 16px;
    margin-bottom: 28px;
    box-shadow: 0 0 30px var(--accent2-glow);
    animation: logo-pulse 3s ease-in-out infinite;
}
.login-hero-title {
    font-family: 'Sora', sans-serif;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    background: linear-gradient(135deg, #fff, var(--accent2) 70%, var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
}
.login-hero-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--accent);
    margin-bottom: 24px;
}
.login-hero-desc {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text-dim);
    margin-bottom: 36px;
}
.login-feature-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.login-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13.5px;
    color: var(--text);
    background: var(--bg-panel-alt);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 14px 18px;
    animation: card-rise 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.login-feature:nth-child(1) { animation-delay: 0.1s; }
.login-feature:nth-child(2) { animation-delay: 0.2s; }
.login-feature:nth-child(3) { animation-delay: 0.3s; }
.login-feature:nth-child(4) { animation-delay: 0.4s; }
.login-feature i { color: var(--accent2); font-size: 16px; width: 20px; text-align: center; }

/* Live stat strip - a small "this is a real, active system" touch instead of a static screen */
.login-live-stat {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(50,255,126,0.08); border: 1px solid rgba(50,255,126,0.25);
    border-radius: 999px; padding: 8px 18px; font-size: 12px; font-weight: 700; color: var(--green);
}
.login-live-stat .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: live-dot-pulse 1.6s ease-in-out infinite; }
@keyframes live-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.login-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
    z-index: 2;
}
.login-footnote {
    font-size: 10.5px;
    color: var(--text-faint);
    margin-top: 20px;
    line-height: 1.5;
}

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: linear-gradient(rgba(0,217,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0,217,255,0.02) 1px, transparent 1px);
    background-size: 32px 32px;
    position: relative;
    overflow: hidden;
}
.login-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    pointer-events: none;
}
.login-orb-1 { width: 420px; height: 420px; background: var(--accent2); top: -120px; left: -100px; animation: orb-float-1 14s ease-in-out infinite; opacity: 0.6; }
.login-orb-2 { width: 340px; height: 340px; background: var(--accent); bottom: -100px; right: -80px; animation: orb-float-2 18s ease-in-out infinite; opacity: 0.55; }
.login-orb-3 { width: 260px; height: 260px; background: var(--accent3); bottom: 20%; left: 10%; animation: orb-float-3 20s ease-in-out infinite; opacity: 0.4; }
@keyframes orb-float-1 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(60px, 40px); } }
@keyframes orb-float-2 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-50px, -30px); } }
@keyframes orb-float-3 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px, -40px) scale(1.15); } }

.login-box {
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 90px var(--accent2-glow), 0 40px 100px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.1);
    padding: 52px 44px;
    width: 100%;
    max-width: 420px;
    text-align: center;
    border-radius: 28px;
    position: relative;
    z-index: 2;
    animation: page-fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.login-logo-ring {
    width: 116px; height: 116px; border-radius: 50%; margin: 0 auto 24px;
    display: flex; align-items: center; justify-content: center;
    background: conic-gradient(from 0deg, var(--accent2), var(--accent), var(--accent3), var(--accent2));
    animation: logo-ring-spin 6s linear infinite;
    padding: 3px;
}
.login-logo-ring-inner {
    width: 100%; height: 100%; border-radius: 50%; background: var(--bg-void);
    display: flex; align-items: center; justify-content: center;
}
@keyframes logo-ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.login-logo {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    animation: logo-pulse 3s ease-in-out infinite;
}
@keyframes logo-pulse {
    0%, 100% { filter: drop-shadow(0 0 14px var(--accent2-glow)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 24px var(--accent2-glow)); transform: scale(1.03); }
}
.login-box h1 {
    font-family: 'Sora', sans-serif;
    letter-spacing: -0.2px;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 6px;
    line-height: 1.4;
    background: linear-gradient(90deg, var(--text), var(--text) 60%, var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.login-box p.subtitle {
    color: var(--text-faint);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    letter-spacing: 2px;
    margin-bottom: 32px;
    font-family: 'JetBrains Mono', monospace;
}
.btn-discord {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #5865f2, #4752c4);
    color: white;
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: 0.3px;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    width: 100%;
    box-shadow: 0 8px 24px rgba(88,101,242,0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-discord:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(88,101,242,0.45); text-decoration: none; }
.btn-email-toggle {
    background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
    color: var(--text); border: 1px solid var(--border-strong, var(--border));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-email-toggle:hover { background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.05)); }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); }
.password-login-form { display: none; }
.password-login-form.show { display: block; }
.login-error {
    background: rgba(255, 85, 112, 0.08);
    border: 1px solid rgba(255,85,112,0.3);
    color: var(--red);
    padding: 12px 14px;
    font-size: 12px;
    margin-bottom: 20px;
    border-radius: var(--radius-sm);
    text-align: left;
}

/* ---------- Top Nav Layout ---------- */
.topnav {
    background:
        linear-gradient(90deg, rgba(255,93,143,0.08), rgba(124,92,255,0.06)),
        rgba(20,14,34,0.7);
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    padding: 0 32px;
    display: flex;
    align-items: center;
    gap: 20px;
    height: 68px;
    border-bottom: 1px solid var(--border-soft);
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 4px 30px rgba(0,0,0,0.3);
}
.topnav .brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--text);
    font-weight: 700;
    font-size: 14px;
    font-family: 'Sora', sans-serif;
    flex-shrink: 0;
    text-decoration: none;
    cursor: pointer;
}
.topnav .brand:hover { color: var(--accent); text-decoration: none; }
.topnav .brand img {
    width: 34px; height: 34px; border-radius: 9px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 4px 14px var(--accent2-glow);
}
.topnav nav { display: flex; gap: 3px; align-items: center; position: relative; }
.topnav nav > a {
    color: var(--text-dim);
    text-decoration: none;
    padding: 8px 13px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.topnav nav > a i { font-size: 12px; opacity: 0.85; transition: transform 0.2s ease; }
.topnav nav > a:hover i { transform: scale(1.2); }

/* Responsive nav - reduce spacing first, then drop to icon-only before anything gets crowded.
   MacBook screens commonly render browser windows narrower than a desktop monitor even at
   the same "resolution," which is exactly what was causing the cramped look. */
@media (max-width: 1400px) {
    .topnav { padding: 0 20px; gap: 12px; }
    .topnav nav { gap: 1px; }
    .topnav nav > a { padding: 8px 10px; font-size: 12px; }
    .topnav-search { display: none; } /* first thing to go - least essential */
}
@media (max-width: 1150px) {
    /* Collapses the text nodes to nothing while explicitly keeping icons visible at a
       readable size - standard technique for icon-only nav without touching any markup */
    .topnav nav > a, .nav-more > a { font-size: 0; padding: 10px; gap: 0; }
    .topnav nav > a i, .nav-more > a i { font-size: 15px; }
}
@media (max-width: 950px) {
    .streamer-toggle { font-size: 0; padding: 8px; gap: 0; }
    .streamer-toggle .dot { width: 8px; height: 8px; }
    .user-menu-info { display: none; }
}
.mobile-nav-toggle {
    display: none; background: var(--bg-elevated); border: 1px solid var(--border-soft); color: var(--text);
    width: 38px; height: 38px; border-radius: 10px; font-size: 15px; cursor: pointer; margin-left: auto;
}
@media (max-width: 700px) {
    /* True phone widths - the icon-only nav from the 1150px breakpoint still doesn't fit
       10+ items plus the brand and user menu on one row, so below this point the nav
       collapses entirely behind a hamburger button instead of trying to keep shrinking it. */
    .topnav { flex-wrap: wrap; padding: 0 16px; height: auto; min-height: 60px; }
    .mobile-nav-toggle { display: flex; align-items: center; justify-content: center; }
    .topnav-search, .user-menu-info { display: none; }
    .topnav nav {
        display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 2px;
        padding: 10px 0 14px; order: 10;
    }
    .topnav.mobile-nav-open nav { display: flex; }
    .topnav nav > a, .nav-more > a {
        font-size: 13px !important; padding: 11px 10px !important; justify-content: flex-start; gap: 10px !important;
        border-radius: 8px;
    }
    .topnav nav > a i, .nav-more > a i { font-size: 14px !important; width: 20px; text-align: center; }
    .nav-more { width: 100%; }
    .mega-menu { position: static; width: 100%; max-height: none; box-shadow: none; }
}
.topnav nav > a { position: relative; }
.topnav nav > a.active {
    background: rgba(255,255,255,0.06);
    color: var(--text);
}
.topnav nav > a.active::after {
    content: '';
    position: absolute;
    bottom: -3px; left: 14px; right: 14px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent2), var(--accent));
    border-radius: 2px;
    box-shadow: 0 0 8px var(--accent-glow);
}
.topnav nav > a:hover:not(.active) { background: var(--bg-panel-alt); color: var(--text); text-decoration: none; transform: translateY(-1px); }

.nav-more { position: relative; }
.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(5, 2, 12, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 90;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.nav-backdrop.show { display: block; opacity: 1; }

.mega-menu {
    display: none;
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    width: 100%;
    transform: translateY(-8px);
    background:
        linear-gradient(135deg, rgba(255,93,143,0.14), rgba(124,92,255,0.09)),
        rgba(18, 12, 30, 0.97);
    backdrop-filter: blur(30px) saturate(160%);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 22px 40px 34px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 30px 70px rgba(0,0,0,0.65);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.mega-menu.show { display: block; opacity: 1; pointer-events: auto; transform: translateY(0); }
[data-theme="light"] .mega-menu {
    background:
        linear-gradient(135deg, rgba(255,93,143,0.08), rgba(124,92,255,0.06)),
        rgba(255, 255, 255, 0.97);
}
.mega-menu::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--accent2), var(--accent3), var(--accent));
}
.mega-menu::after {
    content: '';
    position: absolute; bottom: -3px; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent3), var(--accent2));
    pointer-events: none;
}

.mega-menu-filter { position: sticky; top: 0; background: inherit; z-index: 2; padding: 10px 0 14px; margin-bottom: 6px; }
.mega-menu-filter { position: relative; }
.mega-menu-filter i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 12px; }
.mega-menu-filter input {
    max-width: 420px; background: var(--bg-void); border: 1px solid var(--border-soft); border-radius: 12px;
    padding: 10px 14px 10px 36px; font-size: 13px; color: var(--text);
}
.mega-menu-filter input:focus { outline: none; border-color: var(--accent-soft); }

/* CSS multi-column flow: the browser auto-balances section heights across columns,
   so sections of very different lengths (Staff vs Developers) never look lopsided
   again - no manual pairing/splitting needed regardless of how many links exist. */
.mega-menu-flow { column-count: 4; column-gap: 34px; }
@media (max-width: 1500px) { .mega-menu-flow { column-count: 3; } }
@media (max-width: 1100px) { .mega-menu-flow { column-count: 2; padding: 0 20px; } .mega-menu { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 680px) { .mega-menu-flow { column-count: 1; } }
.mega-section { break-inside: avoid; margin-bottom: 18px; display: inline-block; width: 100%; }
.mega-menu-empty { text-align: center; padding: 30px; color: var(--text-faint); font-size: 13px; }

.mega-col-title {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
    font-weight: 800;
    padding: 4px 12px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 8px;
}
.mega-col-title i { color: var(--accent2); font-size: 11px; }
.mega-col-title.tier-staff i { color: var(--text-dim); }
.mega-col-title.tier-mod i { color: var(--green); }
.mega-col-title.tier-admin i { color: var(--yellow); }
.mega-col-title.tier-dev i { color: var(--accent); }
.mega-col-title.tier-owner i { color: var(--accent2); }
.mega-section a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    border-radius: 10px;
    transition: all 0.15s ease;
    line-height: 1.3;
}
.mega-section a i {
    width: 26px; height: 26px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent2-glow), var(--accent-glow));
    color: var(--accent);
    font-size: 11.5px;
    transition: transform 0.15s ease;
}
.mega-section a:hover { background: var(--bg-elevated); color: var(--text); text-decoration: none; transform: translateX(3px); }
.mega-section a:hover i { transform: scale(1.08); }
.mega-section a.active { color: var(--accent); background: var(--accent-glow); }
.mega-section a.active i { background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #0a0612; }

/* Color-code each link's icon badge to match its section's tier color (the section headings
   already do this - Moderators green, Admin gold, Developers cyan, Owners pink - the
   individual link icons just never picked it up, so a long dense list read as one monotonous
   block of identical badges instead of visually distinct groups). Uses the sibling combinator
   from the heading, so no markup changes are needed on every single link. */
.mega-col-title.tier-staff ~ a i { background: rgba(255,255,255,0.08); color: var(--text-dim); }
.mega-col-title.tier-mod ~ a i { background: rgba(50,255,126,0.18); color: var(--green); }
.mega-col-title.tier-admin ~ a i { background: rgba(255,176,32,0.18); color: var(--yellow); }
.mega-col-title.tier-dev ~ a i { background: rgba(124,92,255,0.18); color: var(--accent); }
.mega-col-title.tier-owner ~ a i { background: rgba(255,93,143,0.18); color: var(--accent2); }
.mega-col-title.tier-staff ~ a.active i { background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #0a0612; }
.mega-col-title.tier-mod ~ a.active i { background: linear-gradient(135deg, var(--green), #1ecf5f); color: #06210f; }
.mega-col-title.tier-admin ~ a.active i { background: linear-gradient(135deg, var(--yellow), var(--orange)); color: #2b1c00; }
.mega-col-title.tier-dev ~ a.active i { background: linear-gradient(135deg, var(--accent), var(--accent-soft)); color: #002624; }
.mega-col-title.tier-owner ~ a.active i { background: linear-gradient(135deg, var(--accent2), #ff7ae6); color: #2b0021; }

.topnav-search {
    width: 210px;
    position: relative;
}
.topnav-search input {
    width: 100%;
    background: var(--bg-panel-alt);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 9px 14px 9px 34px;
    color: var(--text);
    font-size: 12.5px;
    font-family: 'Inter', sans-serif;
    transition: width 0.25s ease, background 0.2s ease;
}
.topnav-search input:focus { width: 100%; background: var(--bg-elevated); }
.topnav-search input::placeholder { color: var(--text-faint); }
.topnav-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 12px; }

.topnav-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }

.theme-toggle-icon {
    background: var(--bg-panel-alt);
    border: 1px solid var(--border);
    color: var(--text-dim);
    width: 34px; height: 34px;
    border-radius: 10px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    transition: all 0.15s ease;
}
.theme-toggle-icon:hover { background: var(--bg-elevated); color: var(--text); }

.user-menu { position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.user-menu .avatar-wrap { position: relative; }
.user-menu .avatar-wrap img { width: 34px; height: 34px; border-radius: 50%; display: block; border: 2px solid rgba(139,92,246,0.35); }
.user-menu .avatar-wrap .status-dot {
    position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px;
    border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-panel);
}
.user-menu-info .uname { font-size: 12.5px; font-weight: 600; color: var(--text); }
.user-menu-info .urank { font-size: 9.5px; color: var(--accent); letter-spacing: 0.5px; }
.user-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    padding-top: 14px; /* space is INSIDE the hoverable area now, not a dead zone above it */
    right: 0;
    min-width: 160px;
}
.user-dropdown-inner {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.user-menu:hover .user-dropdown { display: block; }
.user-dropdown-id { font-size: 9.5px; color: var(--text-faint); font-family: 'JetBrains Mono', monospace; margin-bottom: 8px; padding: 0 4px; }
.logout-link { display: block; padding: 8px; font-size: 12px; color: var(--red); border-radius: 6px; }
.logout-link:hover { background: var(--bg-panel-alt); text-decoration: none; }

.page-content {
    padding: 32px 36px;
    animation: page-fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    /* No max-width/auto-margin here on purpose - this is the shared container nearly every
       page on the site sits inside (everything still on the older page structure), and it
       should stretch to fill whatever monitor it's on rather than sitting centered in a fixed
       column with wasted space on either side, same reasoning as .v3-content. */
}
@media (max-width: 700px) {
    /* 36px of padding on each side was eating almost a fifth of a phone's screen width for
       nothing - this is the single container nearly every page's content sits inside, so
       fixing it here fixes the base amount of usable width on every page at once. */
    .page-content { padding: 18px 14px; }
}
@keyframes page-fade-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Staggered entrance for cards/panels - each one animates in slightly after the last */
.panel, .glass.metric-card, .case-card, .record-card, .rail-card, .duty-row, .mini-leader, .rb-item {
    animation: card-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.panel:nth-of-type(1), .glass.metric-card:nth-of-type(1) { animation-delay: 0.02s; }
.panel:nth-of-type(2), .glass.metric-card:nth-of-type(2) { animation-delay: 0.08s; }
.panel:nth-of-type(3), .glass.metric-card:nth-of-type(3) { animation-delay: 0.14s; }
.panel:nth-of-type(4), .glass.metric-card:nth-of-type(4) { animation-delay: 0.20s; }
.panel:nth-of-type(5) { animation-delay: 0.26s; }
.panel:nth-of-type(6) { animation-delay: 0.32s; }
.panel:nth-of-type(n+7) { animation-delay: 0.36s; }
@keyframes card-rise {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.page-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-soft);
}
.page-title-wrap { display: flex; align-items: center; gap: 14px; }
.back-btn { background: var(--bg-elevated); border: 1px solid var(--border-soft); color: var(--text-dim); width: 34px; height: 34px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: all 0.15s ease; }
.back-btn:hover { background: var(--accent-glow); color: var(--text); border-color: var(--accent-soft); transform: translateX(-2px); }
.page-title-accent {
    width: 6px;
    height: 30px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--accent2), var(--accent3), var(--accent));
    box-shadow: 0 0 16px var(--accent2-glow);
    flex-shrink: 0;
}
.page-titlebar h1 {
    font-size: 26px;
    font-family: 'Sora', sans-serif;
    letter-spacing: -0.3px;
    margin: 0;
    font-weight: 800;
    background: linear-gradient(90deg, var(--text), var(--text) 60%, var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
@media (max-width: 700px) {
    .page-titlebar { flex-wrap: wrap; gap: 8px; margin-bottom: 20px; padding-bottom: 14px; }
    .page-titlebar h1 { font-size: 19px; }
    #live-clock { font-size: 10.5px; }
}
#live-clock {
    color: var(--text-dim);
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.5px;
    background: var(--bg-panel-alt);
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
}

/* ---------- Panels / Cards ---------- */
.panel {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03)),
        linear-gradient(135deg, var(--accent2-glow), var(--accent-glow)),
        var(--bg-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px 28px;
    margin-bottom: 22px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.panel::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent2), var(--accent3), var(--accent));
    opacity: 0.9;
}
.panel:hover {
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-4px) scale(1.005);
    box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 40px var(--accent2-glow), inset 0 1px 0 rgba(255,255,255,0.15);
}
.panel-title {
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-soft);
    font-weight: 700;
    font-family: 'Sora', sans-serif;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; }
@media (max-width: 700px) {
    /* Every form built on these throughout the site assumed desktop width - two or three
       columns of fields at phone width means each input is only 100-150px wide, often too
       narrow to see what's being typed. Collapsing to one column is the standard fix and
       needs no change to any individual view, since they all just use these two classes. */
    .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- Status badges ---------- */
.badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 10px;
    letter-spacing: 0.5px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.badge:hover { transform: scale(1.08); }
.badge-green { background: rgba(50, 255, 126, 0.16); color: var(--green); border: 1px solid rgba(50,255,126,0.35); }
.badge-red { background: rgba(255, 59, 92, 0.16); color: var(--red); border: 1px solid rgba(255,59,92,0.35); }
.badge-yellow { background: rgba(255,176,32, 0.16); color: var(--yellow); border: 1px solid rgba(255,176,32,0.35); }
.badge-orange { background: rgba(255, 159, 10, 0.16); color: var(--orange); border: 1px solid rgba(255,159,10,0.35); }
.badge-cyan { background: rgba(124,92,255, 0.16); color: var(--accent); border: 1px solid rgba(124,92,255,0.35); }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
@media (max-width: 700px) {
    /* Wide data tables were overflowing the viewport on phones, forcing the WHOLE page to
       scroll sideways instead of just the table - this scopes the scroll to the table itself,
       which is the behavior every other responsive table pattern uses. display:block is what
       makes overflow-x apply to a <table> at all; border-collapse still renders fine this way. */
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}
th {
    text-align: left;
    color: var(--text-faint);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-soft);
    font-family: 'JetBrains Mono', monospace;
}
td { padding: 12px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg-panel-alt); }

/* ---------- Forms ---------- */
input[type=text], input[type=search], input[type=file], select, textarea {
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 11px 15px;
    font-family: -apple-system, 'Inter', sans-serif;
    font-size: 13px;
    border-radius: var(--radius-sm);
    width: 100%;
    transition: border-color 0.2s ease, background 0.2s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-soft); background: rgba(255,255,255,0.09); box-shadow: 0 0 0 4px var(--accent-glow); }
select option { background: #161022; color: #fff; }
.btn {
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    color: #16002e;
    border: none;
    padding: 11px 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.01em;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.34, 1.75, 0.64, 1), box-shadow 0.25s ease;
    display: inline-block;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px var(--accent2-glow);
}
.btn::before {
    content: '';
    position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
    transition: left 0.5s ease;
}
.btn:hover::before { left: 100%; }
.btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 28px var(--accent2-glow), 0 4px 14px var(--accent-glow); }
.btn:active { transform: translateY(0) scale(0.94); }
@keyframes btn-ripple { to { transform: scale(2.2); opacity: 0; } }
.btn-danger { background: linear-gradient(135deg, var(--red), var(--orange)); color: white; box-shadow: 0 4px 16px rgba(255,59,92,0.35); }
.btn-ghost { background: var(--bg-panel-alt); color: var(--text-dim); box-shadow: none; }
.btn-ghost:hover { color: var(--text); box-shadow: 0 4px 14px rgba(0,0,0,0.2); }
.btn-danger:hover { box-shadow: 0 10px 28px rgba(255,59,92,0.45); }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 10px; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 7px; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; }



/* ---------- Case entries (legacy list style, still used in a few places) ---------- */
.case-entry {
    border-left: 3px solid var(--accent-soft);
    padding: 14px 16px;
    margin-bottom: 12px;
    background: var(--bg-panel-alt);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: background 0.15s ease;
}
.case-entry:hover { background: var(--bg-elevated); }
.case-entry .case-meta { font-size: 10px; color: var(--text-dim); margin-top: 8px; font-family: 'JetBrains Mono', monospace; }
.case-entry .case-content { font-size: 13.5px; margin: 4px 0; line-height: 1.5; }

/* ---------- Case cards (search results) ---------- */
/* ---------- Type-to-confirm guard ---------- */
.confirm-box {
    display: none;
    margin-top: 14px;
    padding: 16px;
    background: rgba(255, 59, 92, 0.08);
    border: 1px solid rgba(255, 59, 92, 0.3);
    border-radius: var(--radius-sm);
    animation: card-rise 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.confirm-box.show { display: block; }
.confirm-box label {
    display: block;
    font-size: 11px;
    color: var(--red);
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
}
.confirm-box .confirm-input { flex: 1; }
.confirm-submit:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; }
.confirm-submit:disabled:hover { transform: none; box-shadow: none; }
/* Every confirm-box across the portal (bans, blacklist, task deletion, etc.) puts its input
   and two buttons in an inline flex row - fine on desktop, but three items side-by-side on a
   phone crushes button labels like "CONFIRM GLOBAL BAN" into unreadable wrapped text. This
   targets flex-direction specifically (never set inline, only display+gap are), so it overrides
   cleanly without needing to touch the markup on every page that uses this pattern. */
@media (max-width: 600px) {
    .confirm-box > div { flex-direction: column; }
    .confirm-box .confirm-input { width: 100%; }
    .confirm-box button { width: 100%; }
}

/* ---------- Timeline (investigations) ---------- */
.timeline-item { display: flex; gap: 13px; padding-bottom: 17px; position: relative; }
.timeline-item::before { content: ''; position: absolute; left: 5px; top: 16px; bottom: -2px; width: 1px; background: var(--border-soft); }
.timeline-item:last-child::before { display: none; }
.timeline-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent2); margin-top: 3px; flex-shrink: 0; box-shadow: 0 0 0 3px var(--accent2-glow); }
.timeline-item .tt { font-size: 13px; font-weight: 500; color: var(--text); }
.timeline-item .ts { font-size: 11px; color: var(--text-dim); margin-top: 4px; font-family: 'JetBrains Mono', monospace; }

/* ---------- Command Palette (Cmd+K) ---------- */
#cmdk-overlay {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(5, 2, 12, 0.6);
    backdrop-filter: blur(6px);
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    animation: page-fade-in 0.15s ease;
}
#cmdk-box {
    width: 90%; max-width: 560px;
    background: rgba(18, 12, 30, 0.97);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.6);
    overflow: hidden;
    animation: card-rise 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#cmdk-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-soft);
    padding: 18px 20px;
    font-size: 15px;
    color: var(--text);
    font-family: 'Inter', sans-serif;
}
#cmdk-input:focus { outline: none; }
#cmdk-results { max-height: 400px; overflow-y: auto; padding: 8px; }
.cmdk-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    cursor: pointer;
    transition: background 0.1s ease;
}
.cmdk-item.active, .cmdk-item:hover { background: var(--bg-elevated); }
.cmdk-icon { font-size: 15px; }
.cmdk-empty { padding: 20px; text-align: center; color: var(--text-faint); font-size: 13px; }

/* ---------- Staff site footer ---------- */
.staff-footer { padding: 40px 36px 24px; margin: 40px 0 0; border-top: 1px solid var(--border-soft); }
.staff-footer-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-bottom: 20px; }
.staff-footer-brand { display: flex; align-items: center; gap: 12px; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 14px; color: var(--text); }
.staff-footer-brand img { width: 30px; height: 30px; border-radius: 8px; }
.staff-footer-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.staff-footer-links a { color: var(--text-dim); text-decoration: none; font-size: 12.5px; font-weight: 600; }
.staff-footer-links a:hover { color: var(--text); }
.staff-footer-public-btn { background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #16002e !important; padding: 8px 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.staff-footer-bottom { text-align: center; padding-top: 16px; border-top: 1px solid var(--border-soft); color: var(--text-faint); font-size: 10.5px; }
@media (max-width: 700px) { .staff-footer-top { flex-direction: column; align-items: flex-start; } }

.case-card-list { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Lookup result cards ---------- */
.lookup-result-list { display: flex; flex-direction: column; gap: 12px; }
.lookup-result-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--bg-panel-alt);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--text);
}
.lookup-result-card:hover {
    background: var(--bg-elevated);
    border-color: rgba(255,255,255,0.25);
    transform: translateX(6px) scale(1.01);
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3), 0 0 30px var(--accent2-glow);
}
.lookup-result-avatar {
    width: 54px; height: 54px; border-radius: 16px;
    border: 2px solid var(--accent2);
    box-shadow: 0 0 16px var(--accent2-glow);
    flex-shrink: 0;
}
.lookup-result-info { flex: 1; min-width: 0; }
.lookup-result-name {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.lookup-result-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; font-family: 'JetBrains Mono', monospace; }
.lookup-result-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.lookup-result-stats { text-align: center; flex-shrink: 0; }
.lookup-result-count { font-family: 'Sora', sans-serif; font-size: 26px; font-weight: 800; background: linear-gradient(135deg, var(--accent2), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.lookup-result-count-label { font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.lookup-result-arrow { color: var(--text-faint); font-size: 20px; flex-shrink: 0; }
.case-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--bg-panel-alt);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.case-card:hover {
    background: var(--bg-elevated);
    border-color: rgba(255,255,255,0.2);
    transform: translateX(4px);
    text-decoration: none;
}
.case-card-icon { font-size: 22px; line-height: 1; margin-top: 2px; }
.case-card-body { flex: 1; min-width: 0; }
.case-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.case-card-number { font-family: 'JetBrains Mono', monospace; color: var(--text); font-weight: 700; font-size: 13px; }
.case-card-snippet { color: var(--text); font-size: 13.5px; line-height: 1.5; margin-bottom: 8px; }
.case-card-meta { font-size: 10.5px; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }
.case-card-arrow { color: var(--text-faint); font-size: 16px; margin-top: 4px; }

.empty-state {
    color: var(--text-faint);
    font-size: 13px;
    padding: 40px 24px;
    text-align: center;
    background: var(--bg-panel-alt);
    border: 1px dashed var(--border-soft);
    border-radius: var(--radius-sm);
}
.empty-state::before {
    content: '🗂️';
    display: block;
    font-size: 26px;
    margin-bottom: 10px;
    opacity: 0.45;
    filter: grayscale(1);
}

.stat-box { text-align: center; padding: 12px; }
.stat-box .stat-value {
    font-size: 32px;
    font-weight: 800;
    font-family: 'Sora', sans-serif;
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.stat-box .stat-label { font-size: 10px; color: var(--text-dim); letter-spacing: 1px; margin-top: 6px; text-transform: uppercase; }

/* ---------- Bento metric cards (icon + big number, used on dashboard) ---------- */
.metric-card { text-align: left; }
.metric-icon-box {
    width: 42px; height: 42px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; margin-bottom: 16px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.metric-icon-box.violet { background: linear-gradient(135deg, #ff5d8f, #9b7fff); color: #fff; }
.metric-icon-box.teal { background: linear-gradient(135deg, #7c5cff, #9b7fff); color: #002624; }
.metric-icon-box.rose { background: linear-gradient(135deg, #ff3b5c, #ff9f0a); color: #fff; }
.metric-icon-box.amber { background: linear-gradient(135deg, #ffb020, #ff9f0a); color: #3d2900; }
.metric-card .stat-value { font-size: 36px; text-align: left; }
.metric-card .stat-label { text-align: left; margin-top: 8px; }

/* ---------- Document / Case Report view ---------- */
.document {
    background: linear-gradient(180deg, #0c0f18, #090b12);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 44px 52px;
    max-width: 900px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,217,255,0.04);
    position: relative;
    overflow: hidden;
    /* This box always has a dark background regardless of the site's active theme (light/sunset/etc),
       so its text colors must be locked to dark-theme values too - otherwise switching to Light theme
       makes all text here nearly invisible against a background that never actually changes. */
    --text: #ffffff;
    --text-dim: #b8b3d1;
    --text-faint: #7a7396;
    color: var(--text);
}
.document::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--purple), transparent);
}
.document-header {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 2px solid var(--border-soft);
    padding-bottom: 22px;
    margin-bottom: 28px;
}
.document-logo { width: 58px; height: 58px; border-radius: 12px; }
.document-title { flex: 1; }
.document-title h2 { margin: 0; font-size: 18px; color: var(--text); letter-spacing: 0.5px; font-family: 'JetBrains Mono', monospace; }
.document-subtitle { font-size: 10px; color: var(--accent); letter-spacing: 3px; margin-top: 4px; font-family: 'JetBrains Mono', monospace; }
.document-case-number {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 1px;
    border: 1px solid rgba(0,217,255,0.3);
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    background: var(--accent-glow);
    font-family: 'JetBrains Mono', monospace;
}
.document-status-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.document-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 36px;
    margin-bottom: 30px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--border-soft);
}
.document-label {
    font-size: 10px;
    color: var(--text-faint);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-family: 'JetBrains Mono', monospace;
}
.document-value { font-size: 14px; color: var(--text); }
.document-section { margin-bottom: 26px; }
.document-narrative {
    background: var(--bg-panel-alt);
    border-left: 3px solid var(--accent-soft);
    padding: 18px 20px;
    font-size: 14px;
    line-height: 1.7;
    border-radius: 0 8px 8px 0;
    white-space: pre-wrap;
}
.document-denial .document-narrative { border-left-color: var(--red); }
/* Document-style FORM fields - same letterhead look as the read-only .document above, but for
   an actual fill-in-the-blank form: an underline instead of a boxed input, so submitting HR
   paperwork feels like filling out an official form rather than a generic settings screen. */
.document-field { margin-bottom: 4px; }
.document-field label {
    display: block;
    font-size: 10px;
    color: var(--text-faint);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-family: 'JetBrains Mono', monospace;
}
.document-field input[type="text"], .document-field input[type="date"], .document-field input[type="number"],
.document-field select, .document-field textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
    padding: 6px 2px 10px;
    font-size: 14px;
    color: var(--text);
    font-family: inherit;
}
.document-field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.document-field textarea { resize: vertical; min-height: 60px; line-height: 1.6; }
.document-field input:focus, .document-field select:focus, .document-field textarea:focus {
    outline: none;
    border-bottom-color: var(--accent);
}
.document-field input::placeholder, .document-field textarea::placeholder { color: var(--text-faint); opacity: 0.6; }
.document-signoff {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed var(--border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}
.document-signoff-note { font-size: 11px; color: var(--text-faint); font-style: italic; }
.evidence-list { list-style: none; padding: 0; margin: 0; }
.evidence-list li { padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.evidence-list li:last-child { border-bottom: none; }
.document-footer {
    text-align: right;
    font-size: 10px;
    color: var(--text-faint);
    letter-spacing: 1px;
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid var(--border-soft);
    font-family: 'JetBrains Mono', monospace;
}
.evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: 12px;
}
.evidence-item {
    background: var(--bg-panel-alt);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.evidence-thumb { width: 100%; height: 120px; object-fit: cover; display: block; background: #000; }
.evidence-file-link { display: block; padding: 22px 10px; text-align: center; font-size: 12px; }
.evidence-meta {
    font-size: 9px;
    color: var(--text-dim);
    padding: 7px 9px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
}

/* ---------- Case File Header (player lookup) ---------- */
/* ---------- Blacklist banner (big, unmissable, red) ---------- */
.blacklist-banner {
    background: linear-gradient(135deg, #7a0012, #4d0009);
    border: 2px solid #ff2244;
    border-radius: var(--radius);
    padding: 20px 28px;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 0 0 40px rgba(255, 34, 68, 0.4), inset 0 0 20px rgba(255,34,68,0.1);
    animation: blacklist-pulse 2s ease-in-out infinite;
}
@keyframes blacklist-pulse {
    0%, 100% { box-shadow: 0 0 40px rgba(255, 34, 68, 0.4), inset 0 0 20px rgba(255,34,68,0.1); }
    50% { box-shadow: 0 0 60px rgba(255, 34, 68, 0.7), inset 0 0 30px rgba(255,34,68,0.2); }
}
.blacklist-banner-title {
    font-family: 'Sora', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 1px;
    text-shadow: 0 0 12px rgba(255,34,68,0.8);
}
.blacklist-banner-detail {
    font-size: 15px;
    color: #ffd9dd;
    margin-top: 10px;
}
.blacklist-banner-meta {
    font-size: 11.5px;
    color: #ffb3bb;
    margin-top: 8px;
    font-family: 'JetBrains Mono', monospace;
}

.case-file-header {
    display: flex;
    align-items: center;
    gap: 24px;
    background: linear-gradient(135deg, var(--accent2-glow), var(--accent-glow)), var(--bg-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 32px;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
}
.case-file-avatar {
    width: 96px; height: 96px; border-radius: 24px;
    border: 3px solid var(--accent2);
    box-shadow: 0 0 30px var(--accent2-glow);
    flex-shrink: 0;
}
.case-file-identity { flex: 1; }
.case-file-name {
    font-family: 'Sora', sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    background: linear-gradient(90deg, var(--accent2), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.case-file-username {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 6px;
}
.case-file-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.case-file-badges .badge { font-size: 11px; padding: 5px 12px; }

/* ---------- Bigger typography for dates/times/money ---------- */
.value-lg {
    font-family: 'Sora', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
}
.value-money { color: var(--green); }
.value-date { color: var(--accent2); font-size: 20px; }
.value-sub { font-size: 11px; color: var(--text-dim); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.value-date-sm { font-size: 13px; font-weight: 600; color: var(--accent2); }
.value-money-sm { font-size: 13px; font-weight: 700; color: var(--green); }

.stat-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; text-align: center; }

.record-breakdown-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.rb-item {
    background: var(--bg-panel-alt);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 16px 8px;
    text-align: center;
}
.rb-icon { font-size: 22px; margin-bottom: 8px; }
.rb-count { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 800; color: var(--text); }
.rb-label { font-size: 9.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

/* ---------- Record cards (case history on profile) ---------- */
.record-card-list { display: flex; flex-direction: column; gap: 14px; }
.record-card {
    background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)), var(--bg-panel-alt);
    border: 1px solid var(--border-soft);
    border-left: 4px solid var(--accent);
    border-radius: 16px;
    padding: 20px 22px;
    transition: all 0.2s ease;
}
.record-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.28); }
.record-card-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.record-card-icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 19px; flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}
.record-card-titlewrap { flex: 1; display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.record-card-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
}
.record-card-num:hover { color: var(--accent2); }
.record-card-type {
    font-size: 10px;
    color: var(--text-faint);
    letter-spacing: 1.2px;
    font-weight: 700;
    text-transform: uppercase;
}
.record-card-badges { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; padding-top: 2px; }
.record-card-narrative {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-dim);
    background: rgba(0,0,0,0.22);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.record-card-denial {
    font-size: 12.5px;
    color: var(--red);
    background: rgba(255,85,112,0.08);
    border: 1px solid rgba(255,85,112,0.2);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
}
.record-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}
.rcf-item {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--text-faint); font-weight: 600;
    background: var(--bg-elevated); padding: 5px 11px; border-radius: 999px;
}
.rcf-link { color: var(--accent) !important; text-decoration: none; }
.rcf-link:hover { background: rgba(124,92,255,0.14); }

.pf-app-card {
    display: block; text-decoration: none; color: var(--text);
    background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)), var(--bg-panel-alt);
    border: 1px solid var(--border-soft); border-left: 4px solid var(--accent2);
    border-radius: 16px; padding: 18px 22px; margin-bottom: 12px;
    transition: all 0.2s ease;
}
.pf-app-card:hover { border-color: var(--accent2); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.28); }
.pf-app-card-top { display: flex; align-items: flex-start; gap: 14px; }
.pf-app-card-icon {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    background: rgba(255,93,143,0.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}
.pf-app-card-title { font-weight: 800; font-size: 14.5px; }
.pf-app-card-sub { font-size: 10.5px; color: var(--text-faint); font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; margin-top: 2px; }
.pf-app-card-footer { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); font-size: 11px; color: var(--text-faint); font-weight: 600; }

/* ---------- Dashboard (Option J two-column layout) ---------- */
.dash-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.dash-greeting { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 700; margin-bottom: 20px; }

.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.glass.metric-card {
    background:
        linear-gradient(145deg, rgba(255,93,143,0.14), rgba(124,92,255,0.08)),
        var(--bg-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.glass.metric-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent2), var(--accent3), var(--accent));
}
.glass.metric-card:hover { border-color: rgba(255,255,255,0.3); transform: translateY(-5px) rotate(-0.5deg); box-shadow: 0 20px 48px rgba(0,0,0,0.35), 0 0 40px var(--accent2-glow); }

.tag-live {
    font-size: 9px; color: var(--accent); background: var(--accent-glow);
    padding: 4px 9px; border-radius: 20px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px;
    text-transform: none; letter-spacing: 0; float: right;
}
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); position: relative; }
.pulse-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--accent); animation: pulse 2s infinite; }
@keyframes pulse { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }

.duty-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.duty-row:last-child { border: none; }
.duty-row .av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--accent2), var(--accent)); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; }
.duty-row .name { flex: 1; font-size: 13px; font-weight: 500; }
.duty-row .time { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--accent); background: var(--accent-glow); padding: 3px 9px; border-radius: 999px; }

.chart-wrap { display: flex; align-items: flex-end; gap: 8px; height: 100px; margin-top: 6px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bar { width: 100%; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--accent2), var(--accent)); min-height: 4px; }
.bar-label { font-size: 9px; color: var(--text-faint); font-family: 'JetBrains Mono', monospace; }

.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.qa-form { display: contents; }
.qa-btn {
    background: var(--bg-panel-alt);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 16px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: var(--text);
    font-family: -apple-system, 'Inter', sans-serif;
    width: 100%;
    display: block;
}
.qa-btn:hover { background: var(--bg-elevated); border-color: rgba(255,255,255,0.2); text-decoration: none; transform: translateY(-2px); }
.qa-btn i { font-size: 17px; color: var(--accent2); margin-bottom: 8px; display: block; }
.qa-btn span { font-size: 11px; font-weight: 600; }

.dash-rail { display: flex; flex-direction: column; gap: 14px; }
.rail-card {
    background: var(--bg-panel);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
}
.rail-card h4 { font-family: 'Sora', sans-serif; font-size: 12px; margin-bottom: 14px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.6px; }

.server-status { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.server-status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex-shrink: 0; }
.server-status .txt { font-size: 13px; font-weight: 600; }
.server-status .sub { font-size: 10.5px; color: var(--text-dim); margin-top: 1px; font-family: 'JetBrains Mono', monospace; }
.player-bar-track { height: 6px; background: var(--border-soft); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.player-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent-soft), var(--accent)); border-radius: 4px; }
.player-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); }

.mini-leader { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.mini-leader:last-child { border: none; }
.mini-leader .rank-num { width: 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-faint); }
.mini-leader .name { flex: 1; font-size: 12.5px; font-weight: 500; }
.mini-leader .val { font-size: 11px; color: var(--yellow); font-weight: 600; font-family: 'JetBrains Mono', monospace; }

.bolo-ticker-item { padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.bolo-ticker-item:last-child { border: none; }
.bolo-ticker-item .subj { font-size: 12.5px; font-weight: 600; color: var(--red); }
.bolo-ticker-item .reason { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* ---------- Calendar ---------- */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-weekday { text-align: center; font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 1px; padding-bottom: 8px; font-family: 'JetBrains Mono', monospace; }
.cal-cell { min-height: 100px; background: var(--bg-panel-alt); border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px; }
.cal-cell.empty { background: transparent; border: none; }
.cal-cell.today { border-color: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-soft); }
.cal-daynum { font-size: 12px; color: var(--text-dim); font-weight: 600; margin-bottom: 6px; font-family: 'JetBrains Mono', monospace; }
.cal-event { font-size: 10px; padding: 3px 6px; border-radius: 4px; margin-bottom: 3px; background: rgba(0,217,255,0.1); color: var(--accent); position: relative; }
.cal-event-shift { background: rgba(46,232,138,0.1); color: var(--green); }
.cal-event-meeting { background: rgba(255,201,77,0.1); color: var(--yellow); }
.cal-event-server-event { background: rgba(157,123,255,0.12); color: var(--purple); }
.cal-event-restart { background: rgba(255,85,112,0.1); color: var(--red); }
.cal-event-delete { background: none; border: none; color: inherit; opacity: 0.5; cursor: pointer; float: right; font-size: 10px; padding: 0; }
.cal-event-delete:hover { opacity: 1; }
.cal-availability {
    font-size: 9.5px; font-weight: 700; color: var(--green); background: rgba(50,255,126,0.12);
    border-radius: 6px; padding: 2px 6px; margin-top: 3px; cursor: default;
}

/* ---------- Staff chat ---------- */
.chat-bubble-wrap { display: flex; }
.chat-bubble-wrap.mine { justify-content: flex-end; }
.chat-bubble {
    max-width: 65%;
    background: var(--bg-panel-alt);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 10px 14px;
}
.chat-bubble.mine { background: var(--accent-glow); border-color: rgba(0,217,255,0.25); }
.chat-sender { font-size: 10.5px; color: var(--accent); font-weight: 700; margin-bottom: 4px; }
.chat-content { font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.chat-time { font-size: 9px; color: var(--text-faint); margin-top: 6px; text-align: right; }

/* ---------- Notification bell ---------- */
.notif-bell { position: relative; cursor: pointer; color: var(--text-dim); font-size: 16px; transition: color 0.15s ease; }
.notif-bell:has(.notif-dot) { animation: bell-wiggle 4s ease-in-out infinite; }
@keyframes bell-wiggle {
    0%, 92%, 100% { transform: rotate(0deg); }
    93% { transform: rotate(-12deg); }
    94% { transform: rotate(10deg); }
    95% { transform: rotate(-8deg); }
    96% { transform: rotate(6deg); }
    97% { transform: rotate(0deg); }
}
.notif-bell:hover { color: var(--accent); }
.notif-dot { position: absolute; top: -2px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 2px solid var(--bg-panel); }
.notif-dropdown {
    display: none;
    position: absolute;
    top: 28px;
    right: 0;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    min-width: 220px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 100;
}
.notif-dropdown.show { display: block; }
.notif-dropdown a {
    display: block;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text);
    border-radius: 6px;
}
.notif-dropdown a:hover { background: var(--bg-panel-alt); text-decoration: none; }

/* ========== STREAMER MODE ========== */
/* When active, anything marked .sensitive gets blurred until hovered - keeps IDs, tokens,
   IPs, and player identifiers off-stream without needing to navigate away from the page. */
body.streamer-mode .sensitive {
    filter: blur(6px);
    user-select: none;
    transition: filter 0.15s ease;
    cursor: pointer;
}
body.streamer-mode .sensitive:hover {
    filter: blur(0px);
}
.streamer-toggle {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 10px;
    padding: 7px 14px; font-size: 11.5px; font-weight: 700; color: var(--text-dim);
    transition: all 0.15s ease;
}
.streamer-toggle:hover { border-color: var(--accent-soft); color: var(--text); }
.streamer-toggle.active { background: rgba(255,69,58,0.15); border-color: #ff453a; color: #ff453a; }
.streamer-toggle .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }
.streamer-toggle.active .dot { background: #ff453a; box-shadow: 0 0 6px #ff453a; }

/* ========== ELITE POLISH PASS ========== */

/* Premium custom scrollbar - applies everywhere */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent2), var(--accent)); border-radius: 999px; border: 2px solid var(--bg-void); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--accent), var(--accent2)); }

/* Panels fade/lift in on load instead of just appearing - a small but real "premium app" cue */
@keyframes panelEnter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.panel { animation: panelEnter 0.35s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.panel:nth-of-type(1) { animation-delay: 0.02s; }
.panel:nth-of-type(2) { animation-delay: 0.06s; }
.panel:nth-of-type(3) { animation-delay: 0.1s; }
.panel:nth-of-type(4) { animation-delay: 0.14s; }

/* Softer, more refined panel hover - less bouncy, more "premium lift" */
.panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 50px var(--accent2-glow), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* Refined focus states for accessibility and polish - a visible, on-brand focus ring instead of the default browser outline */
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--accent-soft) !important;
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Buttons get a subtle press-down feel instead of feeling flat when clicked */
.btn:active, .btn-primary:active, .btn-secondary:active { transform: scale(0.97); }

/* Badges get a soft glow instead of a hard flat fill, reads as more premium */
.badge-green { box-shadow: 0 0 12px rgba(50,255,126,0.15); }
.badge-red { box-shadow: 0 0 12px rgba(255,59,92,0.15); }
.badge-cyan { box-shadow: 0 0 12px rgba(124,92,255,0.15); }
.badge-yellow { box-shadow: 0 0 12px rgba(255,176,32,0.15); }

/* Table rows get a subtle hover highlight - makes dense data tables feel more responsive/alive */
table tr:hover td { background: rgba(255,255,255,0.03); }
td, th { transition: background 0.15s ease; }

/* Links get a refined underline-on-hover instead of an abrupt color snap */
a { text-underline-offset: 3px; }
a:not(.btn):not(.btn-ghost):not(.btn-danger):hover { text-decoration: underline; }

/* Slightly tighter, more confident heading letter-spacing for that "premium dashboard" feel */
h1, h2, h3, .panel-title { letter-spacing: 0.2px; }

/* ========== MY PAGES - PERSONALIZED MENU ========== */
.mega-view-btn {
    background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 8px;
    padding: 6px 14px; font-size: 11px; font-weight: 700; color: var(--text-dim); cursor: pointer; transition: all 0.15s ease;
}
.mega-view-btn:hover { color: var(--text); border-color: var(--border); }
.mega-view-btn.active { background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #0f0a1a; border-color: transparent; }

.my-pages-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.my-pages-grid a {
    display:flex; align-items:center; gap:10px; padding:12px 14px;
    background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:12px;
    font-size:12.5px; font-weight:600; color:var(--text); text-decoration:none;
    transition:all 0.15s ease;
}
.my-pages-grid a:hover { border-color:var(--accent-soft); background:var(--accent-glow); text-decoration:none; transform:translateY(-1px); }
.my-pages-grid a i { color:var(--accent2); width:14px; text-align:center; }
@media (max-width: 1100px) { .my-pages-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 680px) { .my-pages-grid { grid-template-columns:1fr; } }

/* ========== RESPONSIVE FIXES FOR CORE LAYOUT CLASSES ==========
   .grid-2, .bento, and .dash-layout are each used across dozens of pages site-wide, but had
   zero mobile breakpoints anywhere in this file - on a phone, a rigid 2-column .grid-2 or a
   4-column .bento just squeezes into unreadably narrow slivers, and .dash-layout (the
   dashboard's main content + sidebar split) would push its 320px sidebar into whatever space
   is left over rather than stacking. Fixing these three shared classes once here improves
   mobile usability across the whole portal in one pass, instead of patching each page. */
@media (max-width: 900px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .grid-2 { grid-template-columns: 1fr; }
    .bento { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
    .dash-layout { grid-template-columns: 1fr; }
}

/* Every plain <table> across the portal (punch logs, blacklist, staff directory, cases, etc. -
   18 different pages) had zero mobile handling: a 5-6 column table just overflows the screen
   with no way to see the rest except pinch-zooming. This turns the table itself into a
   horizontally-scrollable block on narrow screens - a well-supported technique that needs no
   markup changes on any of those 18 pages, since <tr>/<td> keep their default table-row/
   table-cell rendering even though the outer <table> becomes a scroll container. */
@media (max-width: 700px) {
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    table th, table td { padding: 8px 10px; }
}