:root{
    --primary-bg:#ffffff;
    --secondary-bg:#f7f9fc;
    --tertiary-bg:#eef2f7;
    --card-bg:#ffffff;
    --accent-primary:#2563eb;
    --accent-primary-dark:#1d4ed8;
    --accent-primary-light:#3b82f6;
    --accent-secondary:#10b981;
    --accent-secondary-dark:#059669;
    --accent-gradient:linear-gradient(135deg,#2563eb 0%,#3b82f6 50%,#10b981 100%);
    --accent-gradient-soft:linear-gradient(135deg,rgba(37,99,235,.08) 0%,rgba(16,185,129,.08) 100%);
    --text-primary:#0f172a;
    --text-secondary:#475569;
    --text-muted:#94a3b8;
    --success:#10b981;
    --warning:#f59e0b;
    --error:#ef4444;
    --border-light:#e5e9f0;
    --border-medium:#cbd5e1;
    --border-heavy:#94a3b8;
    --shadow-xs:0 1px 2px rgba(15,23,42,.04);
    --shadow-sm:0 2px 8px rgba(15,23,42,.06);
    --shadow-md:0 6px 20px rgba(15,23,42,.08);
    --shadow-lg:0 16px 40px rgba(15,23,42,.10);
    --shadow-xl:0 24px 60px rgba(15,23,42,.14);
    --shadow-blue:0 12px 32px rgba(37,99,235,.18);
    --shadow-green:0 12px 32px rgba(16,185,129,.22);
    --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',-apple-system,BlinkMacSystemFont,'Segoe UI',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:1240px;margin:0 auto;padding:0 var(--space-lg);}

/* GENERAL BUTTON STYLES */
.btn{
    padding:.75rem 1.5rem;
    border-radius:12px;
    font-weight:600;
    text-decoration:none;
    transition:all .25s cubic-bezier(.4,0,.2,1);
    border:none;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-size:.9rem;
    font-family:'Inter',sans-serif;
    letter-spacing:-.01em;
}
.btn-login{background:#fff;color:var(--text-secondary);border:1.5px solid var(--border-light);font-weight:500;}
.btn-login:hover{border-color:var(--accent-primary);color:var(--accent-primary);transform:translateY(-1px);}
.btn-register{background:var(--accent-gradient);color:#fff;font-weight:600;box-shadow:0 4px 14px rgba(37,99,235,.2);}
.btn-register:hover{transform:translateY(-2px);box-shadow:var(--shadow-blue);}
.btn-primary{background:var(--accent-gradient);color:#fff;font-weight:600;box-shadow:0 4px 14px rgba(37,99,235,.2);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-blue);}
.btn-secondary{background:#fff;color:var(--text-primary);border:1.5px solid var(--border-light);}
.btn-secondary:hover{border-color:var(--accent-primary);color:var(--accent-primary);transform:translateY(-1px);}
.btn-outline{background:#fff;color:var(--text-primary);border:1.5px solid var(--border-light);}
.btn-outline:hover{border-color:var(--accent-primary);color:var(--accent-primary);transform:translateY(-1px);}
.btn-swap{background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#fff;font-weight:700;box-shadow:0 4px 14px rgba(16,185,129,.2);}
.btn-swap:hover{transform:translateY(-2px);box-shadow:var(--shadow-green);}

/* 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){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;}