@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    --accent: #00d4ff;
    --accent2: #ff00ff;
    --bg: #050507;
    --surface: rgba(255,255,255,0.04);
    --surface-hover: rgba(255,255,255,0.08);
    --border: rgba(255,255,255,0.08);
    --text: #f0f0f0;
    --text-muted: rgba(240,240,240,0.5);
    --glass: rgba(8,8,15,0.75);
    --glass-border: rgba(255,255,255,0.1);
    --radius: 14px;
    --radius-sm: 8px;
    --shadow: 0 8px 32px rgba(0,0,0,0.5);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Outfit',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent); }

/* ── Auth ── */
.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; background:var(--bg); }

.auth-card {
    background:var(--glass);
    border:1px solid var(--glass-border);
    border-radius:18px;
    padding:1.75rem 2rem;
    width:100%; max-width:400px;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:var(--shadow), 0 0 60px rgba(0,212,255,0.05);
}

.auth-logo { text-align:center; margin-bottom:1.4rem; }
.auth-logo h1 {
    font-family:'Syne',sans-serif; font-size:1.65rem; font-weight:800;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    letter-spacing:-.02em;
}
.auth-logo p { color:var(--text-muted); font-size:.8rem; margin-top:.25rem; }

/* Form fields are tighter inside auth cards */
.auth-card .form-group { margin-bottom:.9rem; }
.auth-card .form-group label { font-size:.72rem; margin-bottom:.35rem; }
.auth-card .form-control { padding:.6rem .85rem; font-size:.875rem; }
.auth-card textarea.form-control { min-height:80px; }
.auth-card .btn { padding:.65rem 1.25rem; font-size:.85rem; }
.auth-card .alert { padding:.7rem .85rem; font-size:.8rem; margin-bottom:1rem; }
.auth-footer { text-align:center; margin-top:1.1rem; color:var(--text-muted); font-size:.8rem; }

/* ── Forms ── */
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; font-size:.8rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.5rem; }

.form-control {
    width:100%; background:rgba(255,255,255,0.05); border:1px solid var(--border);
    border-radius:var(--radius-sm); color:rgba(200,200,210,0.75); padding:.75rem 1rem;
    font-size:.95rem; font-family:'Outfit',sans-serif; outline:none;
    transition:border-color .2s, box-shadow .2s, background .2s;
}
.form-control:focus { border-color:var(--accent); background:rgba(0,212,255,0.05); box-shadow:0 0 0 3px rgba(0,212,255,0.1); }
.form-control::placeholder { color:var(--text-muted); }
textarea.form-control { resize:vertical; min-height:100px; }

/* ── Buttons ── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.75rem 1.5rem; border-radius:var(--radius-sm);
    font-family:'Outfit',sans-serif; font-size:.9rem; font-weight:600;
    cursor:pointer; border:none; transition:all .2s; text-decoration:none;
    letter-spacing:.02em; white-space:nowrap;
}
.btn-primary { background:linear-gradient(135deg,var(--accent),#0099bb); color:#000; box-shadow:0 4px 15px rgba(0,212,255,0.3); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 25px rgba(0,212,255,0.4); filter:brightness(1.1); }
.btn-secondary { background:var(--surface); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { background:var(--surface-hover); border-color:var(--accent); }
.btn-danger { background:rgba(0,212,255,0.15); color:#00d4ff; border:1px solid rgba(0,212,255,0.3); }
.btn-danger:hover { background:rgba(0,212,255,0.25); }
.btn-full { width:100%; }
.btn-sm { padding:.45rem .9rem; font-size:.8rem; }

/* ── Alerts ── */
.alert { padding:.85rem 1rem; border-radius:var(--radius-sm); font-size:.875rem; margin-bottom:1.25rem; display:flex; align-items:center; gap:.5rem; }
.alert-error { background:rgba(0,212,255,0.1); border:1px solid rgba(0,212,255,0.3); color:#00d4ff; }
.alert-success { background:rgba(0,200,100,0.1); border:1px solid rgba(0,200,100,0.3); color:#5fefa5; }

.auth-footer a { color:var(--accent); text-decoration:none; font-weight:600; }
.auth-footer a:hover { text-decoration:underline; }

/* ── Navbar ── */
.navbar {
    position:fixed; top:0; left:0; right:0; z-index:300;
    padding:.75rem 1.5rem; display:flex; align-items:center; justify-content:space-between;
    background:rgba(5,5,7,0.9); backdrop-filter:blur(20px); border-bottom:1px solid var(--border);
    height:65px; transition:left .25s cubic-bezier(.4,0,.2,1);
}
@media (max-width:991px) {
    .navbar { left:0; }
}
.navbar-left { display:flex; align-items:center; gap:1rem; }
.navbar-brand {
    font-family:'Syne',sans-serif; font-size:1.3rem; font-weight:800;
    text-decoration:none;
}

.navbar-brand,
.navbar-brand .brand-logo {
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
}

/* ── Hamburger toggle ── */
.sidebar-toggle {
    -webkit-appearance: none; appearance: none;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:5px; width:38px; height:38px; min-width:38px; min-height:38px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1); border-radius:8px;
    cursor:pointer; padding:0; flex-shrink:0; transition:background .2s;
    -webkit-tap-highlight-color: transparent;
}
.sidebar-toggle:hover, .sidebar-toggle:active { background:rgba(255,255,255,.14); }
.sidebar-toggle svg { display:block !important; pointer-events:none; color:rgba(255,255,255,.85); }
/* Hide hamburger ONLY on mobile dashboard (bottom nav handles it there) */
@media (max-width:991px) {
    body.dashboard-page .sidebar-toggle { display:none !important; }
}

/* ── Mobile brand: only show on mobile dashboard (sidebar hidden there) ── */
.navbar-brand-mobile {
    display:none !important;
    text-decoration:none; font-family:'Syne',sans-serif;
    font-weight:800; font-size:.95rem; letter-spacing:.03em;
    color: var(--accent);
    white-space:nowrap;
}

.navbar-brand-mobile,
.navbar-brand-mobile .brand-logo {
    background:linear-gradient(90deg,var(--accent),var(--accent2));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
}
@media (max-width:991px) {
    body.dashboard-page .navbar-brand-mobile { display:block !important; }
}

.navbar-links { display:flex; align-items:center; gap:1rem; }
.navbar-links a { color:var(--text-muted); text-decoration:none; font-size:.875rem; font-weight:500; transition:color .2s; padding:.4rem .8rem; border-radius:6px; }
.navbar-links a:hover { color:var(--text); background:var(--surface); }

/* ── Navbar user card ── */
.navbar-user-wrap { position:relative; }
.navbar-user-card {
    display:flex; align-items:center; gap:.6rem;
    padding:.4rem .7rem .4rem .4rem;
    border-radius:10px; cursor:pointer;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    transition:background .18s;
    user-select:none;
}
.navbar-user-card:hover { background:rgba(255,255,255,.09); }
.navbar-user-avatar {
    width:32px; height:32px; border-radius:50%;
    object-fit:cover; flex-shrink:0;
    border:2px solid rgba(255,255,255,.15);
}
.navbar-user-info { display:flex; flex-direction:column; gap:.05rem; }
.navbar-user-name { font-size:.8rem; font-weight:700; color:#fff; line-height:1.2; }
.navbar-user-sub  { font-size:.65rem; color:rgba(255,255,255,.4); line-height:1; }

/* ── Premium gold chroma name ─────────────────────────── */
.navbar-user-name--premium {
    background: linear-gradient(
        90deg,
        #7a5c00 0%,
        #c8960c 15%,
        #ffd700 28%,
        #fff4a3 38%,
        #ffe566 48%,
        #ffd700 55%,
        #e8b800 65%,
        #fff8c0 75%,
        #d4a800 85%,
        #ffd700 92%,
        #a07000 100%
    ) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: premiumChroma 3s linear infinite !important;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.55));
}
@keyframes premiumChroma {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* dropdown */
.navbar-user-menu {
    display:none;
    position:absolute; top:calc(100% + 8px); right:0;
    min-width:180px;
    background:rgba(14,14,26,.98);
    border:1px solid rgba(255,255,255,.1);
    border-radius:14px; padding:.4rem;
    box-shadow:0 12px 30px rgba(0,0,0,.6);
    z-index:9999;
    backdrop-filter:blur(20px);
    flex-direction:column; gap:.15rem;
}
.navbar-menu-item {
    display:flex; align-items:center; gap:.65rem;
    padding:.6rem .9rem; border-radius:10px;
    font-size:.83rem; font-weight:500;
    color:rgba(255,255,255,.7); text-decoration:none;
    transition:background .15s, color .15s;
}
.navbar-menu-item:hover { background:rgba(255,255,255,.07); color:#fff; }
.navbar-menu-logout { color:#00d4ff; }
.navbar-menu-logout:hover { background:rgba(0,212,255,.1); color:#00d4ff; }

/* ── Landing ── */
.landing { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem; }
.landing h1 { font-family:'Syne',sans-serif; font-size:clamp(3rem,8vw,6rem); font-weight:800; line-height:1; letter-spacing:-.04em; margin-bottom:1rem; }
.landing-btns { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }

/* ── Animations ── */
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.fade-in    { animation:fadeInUp .6s ease forwards; }
.fade-in-d1 { animation:fadeInUp .6s .1s ease both; }
.fade-in-d2 { animation:fadeInUp .6s .2s ease both; }
.fade-in-d3 { animation:fadeInUp .6s .3s ease both; }
.fade-in-d4 { animation:fadeInUp .6s .4s ease both; }

@media (max-width:600px) { .auth-card{padding:1.4rem 1.25rem} .auth-logo h1{font-size:1.45rem} .navbar{padding:.75rem 1.25rem} }

/* ── Register: username field with @ + live preview ── */
.username-input-wrap { position:relative; }
.username-at {
    position:absolute; left:.85rem; top:50%; transform:translateY(-50%);
    color:var(--accent); font-weight:700; font-size:1rem;
    pointer-events:none; line-height:1;
}
.username-field { padding-left:2.1rem !important; }
.username-field:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,212,255,0.12); background:rgba(0,212,255,0.04); }
.username-preview {
    margin-top:.4rem; font-size:.78rem; color:var(--text-muted);
    letter-spacing:.01em; word-break:break-all;
}
.username-preview span { color:var(--accent); font-weight:600; }

/* ── Register: terms of service checkbox ── */
.terms-wrap {
    display:flex; align-items:flex-start; gap:.65rem;
    margin:.25rem 0 1.1rem; cursor:pointer; user-select:none;
}
.terms-box {
    width:18px; height:18px; flex-shrink:0; margin-top:1px;
    border-radius:5px; border:1.5px solid rgba(255,255,255,0.2);
    background:rgba(255,255,255,0.05);
    display:flex; align-items:center; justify-content:center;
    transition:all .2s;
}
.terms-box.checked { background:var(--accent); border-color:var(--accent); }
#terms-check-icon { width:10px; height:10px; color:#000; display:none; }
.terms-text {
    font-size:.7rem; font-weight:600; letter-spacing:.06em;
    text-transform:uppercase; color:var(--text-muted); line-height:1.45;
}
.terms-text a { color:var(--accent); text-decoration:none; font-weight:700; }
.terms-text a:hover { text-decoration:underline; }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; filter:grayscale(.3); }

@keyframes shake-x { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.terms-wrap.shake { animation:shake-x .35s ease; }
.terms-wrap.shake .terms-box { border-color:#00d4ff; box-shadow:0 0 0 3px rgba(0,212,255,0.18); }
/* ── Site Footer ── */
.site-footer {
    position: relative; z-index: 2;
    border-top: 1px solid rgba(255,255,255,.07);
    background: rgba(5,5,10,.85);
    backdrop-filter: blur(12px);
    padding: 1.1rem 2rem;
}
.site-footer-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.2rem; flex-wrap: wrap;
}
.site-footer-left {
    display: flex; align-items: center; gap: .6rem;
}
.site-footer-logo {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent, #00d4ff);
}
.site-footer-copy {
    font-size: .75rem; color: rgba(255,255,255,.35); font-weight: 500;
}
.site-footer-links {
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.site-footer-links a {
    font-size: .75rem; font-weight: 500;
    color: rgba(255,255,255,.35); text-decoration: none;
    transition: color .15s;
}
.site-footer-links a:hover { color: rgba(255,255,255,.75); }
@media (max-width: 540px) {
    .site-footer { padding: 1rem 1.25rem; }
    .site-footer-inner { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .site-footer-links { gap: 1rem; }
}
/* ── Dashboard navbar offset (sidebar width) ── */
body.dashboard-page .navbar { left:250px; transition:left .25s cubic-bezier(.4,0,.2,1); }
body.dashboard-page.sidebar-collapsed .navbar { left:0; }
@media (max-width:991px) {
    body.dashboard-page .navbar { left:0 !important; }
}

/* ── Public navbar mobile: scrollable links ── */
@media (max-width:767px) {
    .navbar { padding:.6rem 1rem; gap:.5rem; }
    .navbar-brand { font-size:1.05rem; flex-shrink:0; }
    .navbar-links {
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        gap:.3rem;
        flex-shrink:1;
        min-width:0;
    }
    .navbar-links::-webkit-scrollbar { display:none; }
    .navbar-links a {
        font-size:.75rem; padding:.28rem .5rem;
        white-space:nowrap; flex-shrink:0;
    }
    .navbar-links .btn { font-size:.72rem; padding:.28rem .6rem; }
}

@media (max-width:560px) {
    .navbar {
        padding: .52rem .72rem;
        min-height: 60px;
    }

    .navbar-left {
        min-width: 0;
    }

    .navbar-brand {
        font-size: .94rem;
    }

    .navbar-links {
        gap: .25rem;
    }

    .navbar-links a {
        font-size: .69rem;
        padding: .22rem .42rem;
    }

    .navbar-links .btn {
        font-size: .68rem;
        padding: .22rem .5rem;
    }
}