:root {
    --bg-main: #020204;
    --bg-glass: rgba(10, 10, 15, 0.6);
    --bg-panel: rgba(15, 15, 20, 0.85);
    
    --c-border: rgba(255, 255, 255, 0.08);
    
    --c-cyan: #00f3ff;
    --c-purple: #bc13fe;
    --c-gold: #ffd700;
    --c-green: #00ff41;
    --c-red: #ff003c;
    
    --t-main: #ffffff;
    --t-dim: #888899;
    
    --f-sans: 'Outfit', sans-serif;
    --f-tech: 'Orbitron', sans-serif;
    
    --rad-sm: 8px;
    --rad-md: 16px;
    --rad-lg: 24px;
    
    --trans: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    margin: 0; padding: 0; box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

body {
    background-color: var(--bg-main); color: var(--t-main); font-family: var(--f-sans);
    min-height: 100vh; overflow-x: hidden; display: flex; flex-direction: column;
}

h1, h2, h3, h4 { font-family: var(--f-tech); letter-spacing: 1px; text-transform: uppercase; }

button { background: none; border: none; font-family: inherit; cursor: pointer; color: inherit; outline: none; }

.text-cyan { color: var(--c-cyan) !important; }
.text-purple { color: var(--c-purple) !important; }
.text-gold { color: var(--c-gold) !important; }
.text-green { color: var(--c-green) !important; }
.text-red { color: var(--c-red) !important; }
.text-white { color: #fff !important; }
.text-black { color: #000 !important; }

.glow-cyan-text { text-shadow: 0 0 15px var(--c-cyan), 0 0 30px rgba(0,243,255,0.4); }
.glow-purple-text { text-shadow: 0 0 15px var(--c-purple), 0 0 30px rgba(188,19,254,0.4); }
.glow-gold-text { text-shadow: 0 0 15px var(--c-gold), 0 0 30px rgba(255,215,0,0.4); }
.glow-green-text { text-shadow: 0 0 15px var(--c-green), 0 0 30px rgba(0,255,65,0.4); }
.glow-red-text { text-shadow: 0 0 15px var(--c-red), 0 0 30px rgba(255,0,60,0.4); }

.bg-cyan { background-color: var(--c-cyan) !important; color: #000 !important; box-shadow: 0 0 20px rgba(0,243,255,0.3); }
.bg-purple { background-color: var(--c-purple) !important; color: #fff !important; box-shadow: 0 0 20px rgba(188,19,254,0.3); }
.bg-gold { background-color: var(--c-gold) !important; color: #000 !important; box-shadow: 0 0 20px rgba(255,215,0,0.3); }
.bg-red { background-color: var(--c-red) !important; color: #fff !important; box-shadow: 0 0 20px rgba(255,0,60,0.3); }

.border-cyan { border: 1px solid var(--c-cyan) !important; }
.border-purple { border: 1px solid var(--c-purple) !important; }
.border-gold { border: 1px solid var(--c-gold) !important; }
.border-red { border: 1px solid var(--c-red) !important; }

.border-cyan-hover:hover { border-color: var(--c-cyan); box-shadow: 0 0 40px rgba(0,243,255,0.15); }