:root{
    --primary-bg:#0a0b0f;
    --secondary-bg:#111318;
    --card-bg:#1a1d24;
    --accent-primary:#2563eb;
    --accent-secondary:#8b5cf6;
    --accent-gradient:linear-gradient(135deg,#2563eb 0%,#8b5cf6 100%);
    --text-primary:#fff;
    --text-secondary:#94a3b8;
    --text-muted:#64748b;
    --success:#10b981;
    --warning:#f59e0b;
    --error:#ef4444;
    --border-light:rgba(255,255,255,.08);
    --border-medium:rgba(255,255,255,.12);
    --border-heavy:rgba(255,255,255,.16);
    --shadow-sm:0 2px 8px rgba(0,0,0,.12);
    --shadow-md:0 8px 30px rgba(0,0,0,.2);
    --shadow-lg:0 20px 50px rgba(0,0,0,.3);
    --shadow-xl:0 32px 64px rgba(0,0,0,.4);
    --space-xs:.5rem;
    --space-sm:1rem;
    --space-md:1.5rem;
    --space-lg:2rem;
    --space-xl:3rem;
    --space-2xl:4rem;
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-xl:20px;
    --radius-2xl:24px;
}
*{margin:0;padding:0;box-sizing:border-box;}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:var(--primary-bg);color:var(--text-primary);line-height:1.6;overflow-x:hidden;font-weight:400;-webkit-font-smoothing:antialiased;padding-top:80px;}
.container{max-width:1200px;margin:0 auto;padding:0 var(--space-lg);}

/* GENERAL BUTTON STYLES */
.btn{padding:.6rem 1.2rem;border-radius:12px;font-weight:600;text-decoration:none;transition:all .3s ease;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;font-family:'Inter',sans-serif;}
.btn-login{background:transparent;color:var(--text-secondary);border:1.5px solid var(--border-medium);font-weight:500;}
.btn-login:hover{border-color:var(--accent-primary);color:var(--text-primary);transform:translateY(-1px);}
.btn-register{background:var(--accent-gradient);color:var(--text-primary);position:relative;font-weight:600;}
.btn-register:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(37,99,235,.3);}
.btn-primary{background:var(--accent-gradient);color:var(--text-primary);font-weight:600;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(37,99,235,.3);}
.btn-secondary{background:transparent;color:var(--text-primary);border:1.5px solid var(--border-medium);}
.btn-secondary:hover{border-color:var(--accent-primary);transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--text-primary);border:1.5px solid var(--border-medium);}
.btn-outline:hover{border-color:var(--accent-primary);transform:translateY(-1px);}

/* GENERAL COMPONENTS */
.back-to-home{text-align:center;margin:1.5rem 0;}
.empty-state{text-align:center;padding:4rem 2rem;grid-column:1/-1;}
.empty-state-icon{font-size:4rem;color:var(--text-muted);margin-bottom:1.5rem;}
.empty-state h3{color:var(--text-primary);margin-bottom:1rem;}
.empty-state p{color:var(--text-secondary);max-width:500px;margin:0 auto;}

/* RESPONSIVE DESIGN - GENERAL */
@media (max-width:1199px){.container{padding:0 2rem;}}
@media (max-width:1199px){body{padding-top:75px;}.container{padding:0 1.5rem;}}
@media (max-width:480px){body{padding-top:70px;}.container{padding:0 1rem;}.btn{padding:.9rem 1.2rem;font-size:.9rem;}}
@media (hover:none) and (pointer:coarse){.btn:hover{transform:none;}}
@media (max-width:1199px){html,body{max-width:100%;overflow-x:hidden;}}
i[class*="fa-"]{font-family:'Font Awesome 6 Free','Font Awesome 6 Brands'!important;font-weight:900;}