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

:root {
    --bg: #050507;
    --card: #0c0c12;
    --card-border: rgba(255,255,255,0.04);
    --accent: #6366f1;
    --text: #d4d4da;
    --dim: #5a5a6a;
    --muted: #2e2e3a;
    --input-bg: #0a0a10;
    --input-border: rgba(255,255,255,0.06);
    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

html, body { height: 100%; }
body {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font); background: var(--bg); color: var(--text);
    -webkit-font-smoothing: antialiased; overflow: hidden;
}

/* ── Beam background ─────────────────────────────────────── */
.beam-bg {
    position: fixed; inset: 0; z-index: 0; overflow: hidden;
    pointer-events: none;
}
.beam {
    position: absolute; width: 1px; height: 200%; top: -50%;
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.03) 30%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 70%, transparent 100%);
    transform-origin: center center;
    animation: beamDrift 25s ease-in-out infinite;
}
.beam:nth-child(1) { left: 8%; width: 2px; opacity: 0.5; transform: rotate(35deg); animation-delay: 0s; animation-duration: 20s; }
.beam:nth-child(2) { left: 22%; width: 3px; opacity: 0.3; transform: rotate(40deg); animation-delay: -4s; animation-duration: 28s; }
.beam:nth-child(3) { left: 38%; width: 1px; opacity: 0.6; transform: rotate(32deg); animation-delay: -8s; animation-duration: 22s; }
.beam:nth-child(4) { left: 52%; width: 4px; opacity: 0.2; transform: rotate(38deg); animation-delay: -2s; animation-duration: 30s; }
.beam:nth-child(5) { left: 65%; width: 2px; opacity: 0.4; transform: rotate(42deg); animation-delay: -6s; animation-duration: 24s; }
.beam:nth-child(6) { left: 78%; width: 1px; opacity: 0.5; transform: rotate(36deg); animation-delay: -10s; animation-duration: 26s; }
.beam:nth-child(7) { left: 90%; width: 3px; opacity: 0.25; transform: rotate(44deg); animation-delay: -3s; animation-duration: 32s; }

@keyframes beamDrift {
    0%, 100% { transform: rotate(35deg) translateY(0); opacity: var(--beam-o, 0.3); }
    25% { transform: rotate(37deg) translateY(-15px); }
    50% { transform: rotate(33deg) translateY(10px); opacity: calc(var(--beam-o, 0.3) * 1.3); }
    75% { transform: rotate(38deg) translateY(-8px); }
}

/* Subtle glow spots */
.glow {
    position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none;
}
.glow-1 { width: 400px; height: 400px; top: -150px; right: -100px; background: rgba(255,255,255,0.015); }
.glow-2 { width: 300px; height: 300px; bottom: -100px; left: -80px; background: rgba(255,255,255,0.01); }

/* ── Login card ──────────────────────────────────────────── */
.login-wrapper { position: relative; z-index: 1; width: 100%; max-width: 380px; padding: 20px; }

.login-card {
    background: var(--card); border: 1px solid var(--card-border); border-radius: 12px;
    padding: 32px 28px 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: cardPop 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes cardPop {
    0% { opacity: 0; transform: scale(0.92) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Logo text */
.login-header { text-align: center; margin-bottom: 24px; }
.login-brand { font-size: 20px; font-weight: 300; letter-spacing: 0.05em; color: rgba(255,255,255,0.35); }
.login-brand span { font-weight: 700; color: rgba(255,255,255,0.6); letter-spacing: 0; }

/* Tabs */
.auth-tabs {
    display: flex; background: rgba(255,255,255,0.02); border-radius: 8px;
    padding: 3px; margin-bottom: 20px; border: 1px solid var(--card-border);
}
.auth-tab {
    flex: 1; padding: 8px 0; text-align: center; font-size: 12px; font-weight: 500;
    color: var(--dim); background: none; border: none; border-radius: 6px;
    cursor: pointer; transition: all 0.15s; font-family: var(--font);
}
.auth-tab:hover { color: var(--text); }
.auth-tab.active { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); }

/* Banners */
.banner { display: none; padding: 9px 12px; font-size: 11px; border-radius: 6px; margin-bottom: 14px; line-height: 1.5; }
.banner.visible { display: block; animation: headShake 0.5s ease; }
.banner-error { color: #ff6b6b; background: rgba(220,38,38,0.1); border: 1px solid rgba(220,38,38,0.2); text-shadow: 0 0 20px rgba(220,38,38,0.3); }
@keyframes headShake {
    0% { transform: translateX(0); }
    10% { transform: translateX(-8px) rotate(-1deg); }
    20% { transform: translateX(7px) rotate(0.5deg); }
    30% { transform: translateX(-6px) rotate(-0.3deg); }
    40% { transform: translateX(5px) rotate(0.2deg); }
    50% { transform: translateX(-3px); }
    60% { transform: translateX(2px); }
    70% { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}
.banner-success { color: #86efac; background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.08); }

/* Info/warn badges */
.info-badge { font-size: 11px; color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.04); border-radius: 6px; padding: 9px 12px; margin-bottom: 16px; line-height: 1.4; }
.warn-badge { font-size: 11px; color: #fde68a; background: rgba(245,158,11,0.04); border: 1px solid rgba(245,158,11,0.06); border-radius: 6px; padding: 9px 12px; margin-bottom: 16px; line-height: 1.4; }

/* Form description */
.form-desc { font-size: 12px; color: var(--dim); margin-bottom: 16px; line-height: 1.5; }

/* Fields */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11px; font-weight: 500; color: var(--dim); margin-bottom: 5px; letter-spacing: 0.02em; }
.field input {
    width: 100%; padding: 9px 11px; font-size: 13px; font-family: var(--font);
    color: var(--text); background: var(--input-bg); border: 1px solid var(--input-border);
    border-radius: 7px; outline: none; transition: border-color 0.12s;
}
.field input::placeholder { color: var(--muted); }
.field input:focus { border-color: rgba(255,255,255,0.12); }

/* Autofill fix */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
    border-color: var(--input-border);
    transition: background-color 5000s ease-in-out 0s;
}

/* Password toggle */
.input-row { position: relative; }
.input-row input { padding-right: 38px; }
.eye-btn {
    position: absolute; right: 1px; top: 1px; bottom: 1px; width: 36px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; color: var(--muted); cursor: pointer; border-radius: 6px;
}
.eye-btn:hover { color: var(--dim); }

/* Password strength */
.pw-bars { display: flex; gap: 2px; margin-top: 5px; height: 2px; }
.pw-bar { flex: 1; height: 100%; border-radius: 1px; background: rgba(255,255,255,0.04); transition: background 0.2s; }
.pw-bar.r { background: #dc2626; }
.pw-bar.y { background: #d97706; }
.pw-bar.g { background: #16a34a; }

/* Submit */
.submit-btn {
    width: 100%; padding: 10px 0; margin-top: 4px; font-size: 13px; font-weight: 600;
    font-family: var(--font); color: #fff; background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.06); border-radius: 7px;
    cursor: pointer; transition: all 0.12s;
}
.submit-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.1); }
.submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Link button */
.link-btn {
    display: block; width: 100%; margin-top: 10px; padding: 4px 0;
    font-size: 11px; color: var(--dim); background: none; border: none;
    cursor: pointer; font-family: var(--font);
}
.link-btn:hover { color: rgba(255,255,255,0.5); }

/* Footer */
.login-foot { text-align: center; margin-top: 16px; font-size: 10px; color: var(--muted); letter-spacing: 0.02em; }

/* Forms */
.auth-form { display: none; }
.auth-form.active { display: block; }
.dim { font-weight: 400; color: var(--muted); }

/* ── Unlock Animation ────────────────────────────────────── */
.login-card.unlocking .field,
.login-card.unlocking .auth-tabs,
.login-card.unlocking .banner,
.login-card.unlocking .link-btn,
.login-card.unlocking .login-foot,
.login-card.unlocking .info-badge,
.login-card.unlocking .warn-badge,
.login-card.unlocking .form-desc {
    opacity: 0; transition: opacity 0.25s ease;
}
.login-card.unlocking .submit-btn {
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    width: 52px !important; height: 52px; padding: 0;
    border-radius: 50% !important; margin: 20px auto 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0; color: transparent;
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1);
}
.login-card.unlocking .login-brand {
    transition: opacity 0.3s ease 0.1s; opacity: 0.3;
}

/* Lock icon phase */
.unlock-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    opacity: 0; transition: opacity 0.2s ease 0.3s;
    pointer-events: none;
}
.login-card.unlocking .unlock-icon { opacity: 1; }

/* Unlocked phase — card dissolves and zooms */
.login-card.unlocked {
    animation: zoomDissolve 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.login-card.unlocked .unlock-icon svg { animation: lockOpen 0.3s ease forwards; }

@keyframes zoomDissolve {
    0% { opacity: 1; transform: scale(1); }
    40% { opacity: 1; transform: scale(1.03); }
    100% { opacity: 0; transform: scale(1.5); filter: blur(8px); }
}
@keyframes lockOpen {
    0% { transform: rotate(0deg); }
    40% { transform: rotate(-15deg); }
    100% { transform: rotate(0deg) scale(1.1); opacity: 0; }
}

/* Background zoom on unlock */
.beam-bg.zooming .beam { transition: opacity 0.5s ease; opacity: 0 !important; }
.beam-bg.zooming .glow { transition: all 0.5s ease; transform: scale(2); opacity: 0; }