/* ═══════════════════════════════════════════════════════════
   BASE — Reset, Variables, Body
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Backgrounds */
    --bg:          #0b0b0f;
    --bg-2:        #0f0f14;
    --bg-3:        #131319;
    --bg-4:        #18181f;

    /* Borders */
    --border:      #1a1a22;
    --border-mid:  #202028;

    /* Accent */
    --accent:      #5865f2;
    --accent-dim:  rgba(88,101,242,.16);
    --accent-hover:#4752c4;
    --accent-text: #818cf8;

    /* Twitch */
    --twitch:      #9147ff;
    --twitch-hover:#7d37e0;

    /* Text */
    --text:        #dde0ee;
    --text-sub:    #6b7099;
    --text-dim:    #3c4060;

    /* Status */
    --green:  #22c55e;
    --yellow: #f59e0b;
    --red:    #ef4444;

    /* Layout */
    --sidebar-w: 248px;
    --radius:    8px;
    --radius-lg: 14px;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    font-size: 14px;
    line-height: 1.5;
}

svg { color: inherit; }

.hidden { display: none !important; }
.page   { min-height: 100vh; }