/* Soniq8 Login — Vinyl Noir */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --green:#1db954;
    --green-bright:#1ed760;
    --bg:#0a0a0a;
    --card:#141414;
    --border:rgba(255,255,255,.08);
    --text:#f0f0f0;
    --muted:#777;
    --radius:16px;
}

html,body{height:100%}
body{
    font-family:'DM Sans',system-ui,sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow:hidden;
}

/* ── Animated background layer ────────────────────────── */
.bg-layer{
    position:fixed;inset:0;z-index:0;
    overflow:hidden;pointer-events:none;
}

/* Rotating vinyl */
.vinyl{
    position:absolute;
    width:700px;height:700px;
    right:-200px;top:-200px;
    border-radius:50%;
    background:
        radial-gradient(circle at center,#0a0a0a 18%,transparent 18.5%),
        radial-gradient(circle at center,rgba(255,255,255,.03) 30%,transparent 30.5%),
        radial-gradient(circle at center,rgba(255,255,255,.02) 45%,transparent 45.5%),
        radial-gradient(circle at center,rgba(255,255,255,.01) 60%,transparent 60.5%),
        conic-gradient(from 0deg,#111 0deg,#1a1a1a 30deg,#111 60deg,#1a1a1a 90deg,
                        #111 120deg,#1a1a1a 150deg,#111 180deg,#1a1a1a 210deg,
                        #111 240deg,#1a1a1a 270deg,#111 300deg,#1a1a1a 330deg,#111 360deg);
    border:1px solid rgba(255,255,255,.04);
    animation:spin 40s linear infinite;
    opacity:.45;
}

@keyframes spin{to{transform:rotate(360deg)}}

/* Waveform at bottom */
.waveform{
    position:absolute;bottom:0;left:0;width:100%;height:180px;
    opacity:.12;
}
.waveform svg{width:100%;height:100%;display:block}
.wave{fill:none;stroke:var(--green);stroke-width:1.5px}
.wave-1{animation:drift 8s ease-in-out infinite alternate;opacity:.6}
.wave-2{animation:drift 12s ease-in-out infinite alternate-reverse;opacity:.35;stroke-dasharray:8 4}

@keyframes drift{
    0%{d:path("M0,160 C180,260 360,60 540,160 C720,260 900,60 1080,160 C1200,220 1320,100 1440,160 L1440,320 L0,320 Z")}
    100%{d:path("M0,180 C200,80 380,280 560,140 C740,20 920,280 1100,140 C1220,80 1340,240 1440,180 L1440,320 L0,320 Z")}
}

/* Subtle grid */
.grid-overlay{
    position:absolute;inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
    background-size:60px 60px;
}

/* ── Main stage ───────────────────────────────────────── */
.login-stage{
    position:relative;z-index:1;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px 20px;
    gap:48px;
}

/* ── Login card ───────────────────────────────────────── */
.login-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:48px 40px 36px;
    width:100%;max-width:420px;
    text-align:center;
    box-shadow:
        0 0 0 1px rgba(29,185,84,.06),
        0 24px 80px rgba(0,0,0,.6),
        0 8px 24px rgba(0,0,0,.4);
    animation:cardIn .7s cubic-bezier(.16,1,.3,1) both;
}

@keyframes cardIn{
    from{opacity:0;transform:translateY(24px) scale(.97)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

/* Brand */
.brand{
    display:flex;align-items:center;justify-content:center;gap:14px;
    margin-bottom:8px;
}
.brand-icon{
    width:48px;height:48px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 20px rgba(29,185,84,.3);
    border-radius:12px;
}
.brand-logo{
    width:48px;height:48px;
    border-radius:12px;
}
.brand h1{
    font-family:'Syne',sans-serif;
    font-weight:800;font-size:2.4rem;
    letter-spacing:-1px;
    background:linear-gradient(135deg,#fff 30%,var(--green-bright));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
}

.brand-8{
    background:linear-gradient(135deg,var(--green),var(--green-bright));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
    font-weight:800;
}

.tagline{
    color:var(--muted);font-size:.95rem;
    font-weight:300;letter-spacing:.3px;
    margin-bottom:4px;
}

/* Divider */
.divider{
    display:flex;align-items:center;gap:16px;
    margin:28px 0 24px;color:var(--muted);font-size:.75rem;
    text-transform:uppercase;letter-spacing:1.5px;
}
.divider::before,.divider::after{
    content:'';flex:1;height:1px;
    background:linear-gradient(90deg,transparent,var(--border),transparent);
}

/* ── OAuth buttons ────────────────────────────────────── */
.oauth-buttons{
    display:flex;gap:12px;
    margin-bottom:24px;
}
.oauth-btn{
    display:flex;align-items:center;justify-content:center;gap:12px;
    padding:14px 20px;
    border-radius:10px;
    font-size:.93rem;font-weight:500;
    text-decoration:none;
    cursor:pointer;
    transition:all .25s cubic-bezier(.4,0,.2,1);
    border:1px solid var(--border);
    position:relative;overflow:hidden;
}
.oauth-btn::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.04),transparent);
    opacity:0;transition:opacity .25s;
}
.oauth-btn:hover::after{opacity:1}

.google-btn{
    background:rgba(255,255,255,.04);color:#e8e8e8;
}
.google-btn:hover{
    border-color:rgba(66,133,244,.5);
    box-shadow:0 0 20px rgba(66,133,244,.12);
    transform:translateY(-1px);
}

.github-btn{
    background:rgba(255,255,255,.04);color:#e8e8e8;
}
.github-btn:hover{
    border-color:rgba(255,255,255,.25);
    box-shadow:0 0 20px rgba(255,255,255,.06);
    transform:translateY(-1px);
}

.oauth-icon{flex-shrink:0}
.oauth-icon-fa{font-size:1.25rem;width:20px;text-align:center}

/* ── Error banner ─────────────────────────────────────── */
.form-error{
    background:rgba(239,68,68,.1);
    border:1px solid rgba(239,68,68,.3);
    color:#f87171;
    padding:10px 16px;
    border-radius:8px;
    font-size:.85rem;
    margin-bottom:4px;
    text-align:left;
}

/* ── Auth tabs ────────────────────────────────────────── */
.auth-tabs{
    display:flex;gap:0;
    margin:24px 0 20px;
    background:rgba(255,255,255,.03);
    border-radius:10px;
    padding:3px;
    border:1px solid var(--border);
}
.auth-tab{
    flex:1;
    padding:10px 16px;
    background:transparent;
    border:none;
    border-radius:8px;
    color:var(--muted);
    font-size:.85rem;font-weight:500;
    cursor:pointer;
    transition:all .2s;
    font-family:inherit;
}
.auth-tab.active{
    background:rgba(29,185,84,.12);
    color:var(--green);
    box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.auth-tab:hover:not(.active){color:#bbb}

/* ── Form fields ──────────────────────────────────────── */
.auth-form{
    display:flex;flex-direction:column;gap:12px;
    margin-bottom:20px;
}
.form-field{
    display:flex;align-items:center;gap:12px;
    padding:0 16px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    border-radius:10px;
    transition:border-color .2s;
}
.form-field:focus-within{
    border-color:rgba(29,185,84,.4);
    box-shadow:0 0 0 3px rgba(29,185,84,.08);
}
.form-field i{
    color:var(--muted);font-size:.85rem;width:16px;text-align:center;
    flex-shrink:0;
}
.form-field input{
    flex:1;
    padding:13px 0;
    background:transparent;border:none;outline:none;
    color:var(--text);font-size:.9rem;
    font-family:inherit;
}
.form-field input::placeholder{color:#555}
.form-field input:-webkit-autofill{
    -webkit-box-shadow:0 0 0 30px var(--card) inset !important;
    -webkit-text-fill-color:var(--text) !important;
}

.submit-btn{
    display:flex;align-items:center;justify-content:center;gap:10px;
    padding:14px 20px;
    background:linear-gradient(135deg,var(--green),#15803d);
    border:none;border-radius:10px;
    color:#fff;font-size:.93rem;font-weight:600;
    cursor:pointer;
    transition:all .25s cubic-bezier(.4,0,.2,1);
    font-family:inherit;
    margin-top:4px;
}
.submit-btn:hover{
    box-shadow:0 4px 24px rgba(29,185,84,.3);
    transform:translateY(-1px);
}
.submit-btn:disabled{
    opacity:.6;cursor:not-allowed;transform:none;
    box-shadow:none;
}

/* No providers warning */
.no-providers{
    background:rgba(255,167,38,.08);
    border:1px solid rgba(255,167,38,.2);
    border-radius:10px;
    padding:20px;margin-bottom:24px;
    color:#ffa726;font-size:.85rem;
    display:flex;flex-direction:column;align-items:center;gap:10px;
}
.no-providers i{font-size:1.4rem}
.no-providers code{
    background:rgba(0,0,0,.3);padding:2px 6px;border-radius:4px;
    font-size:.78rem;color:#ddd;
}

/* Legal */
.legal{
    color:var(--muted);font-size:.72rem;
    line-height:1.6;opacity:.7;
}
.legal a{
    color:var(--green);text-decoration:none;
}
.legal a:hover{
    text-decoration:underline;
}

/* ── Feature pills ────────────────────────────────────── */
.features{
    display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
    animation:cardIn .7s cubic-bezier(.16,1,.3,1) .15s both;
}
.feature{
    display:flex;align-items:center;gap:8px;
    padding:8px 18px;
    border-radius:100px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
    color:var(--muted);font-size:.82rem;font-weight:500;
    transition:all .3s;
}
.feature:hover{
    border-color:rgba(29,185,84,.3);
    color:var(--green);
    background:rgba(29,185,84,.05);
}
.feature i{
    color:var(--green);font-size:.9rem;opacity:.7;
}

/* ── Responsive ───────────────────────────────────────── */
@media(max-width:480px){
    .login-card{padding:36px 24px 28px}
    .brand h1{font-size:1.8rem}
    .vinyl{width:400px;height:400px;right:-120px;top:-120px}
    .features{flex-direction:column;align-items:center}
}