:root{
    --accent:#8854d0;
    --bg:#06040a;
    --panel:rgba(255,255,255,.05);
    --border:rgba(255,255,255,.08);
    --muted:#9ea4b5;
    --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:#fff;min-height:100vh;font-family:'Outfit',sans-serif}
body{background:radial-gradient(circle at 18% 22%,rgba(229,9,20,.12),transparent 30%),radial-gradient(circle at 80% 70%,rgba(120,40,200,.08),transparent 28%),#06040a}

.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.auth-layout{display:grid;grid-template-columns:1fr 1fr;max-width:900px;width:100%;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:24px;overflow:hidden;backdrop-filter:blur(20px)}
.auth-copy{padding:48px 40px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.auth-copy .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;font-weight:900;font-size:18px}
.auth-copy .brand img{width:40px;height:40px;border-radius:10px;object-fit:cover}
.auth-copy .eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.auth-copy h1{margin:0;font-size:28px;font-weight:900;line-height:1.2}
.auth-copy h1 span{color:var(--accent)}
.auth-copy p{margin:0;font-size:14px;color:var(--muted);line-height:1.6}
.auth-features{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.auth-feature{font-size:13px;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:8px}

.login-box{padding:40px 36px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.auth-mobile-logo{display:none;align-items:center;gap:10px;margin-bottom:16px}
.auth-mobile-logo img{width:32px;height:32px;border-radius:8px;object-fit:cover}
.auth-mobile-logo span{font-weight:900;font-size:16px}
.login-box h2{margin:0;font-size:22px;font-weight:900}
.login-sub{font-size:13px;color:var(--muted);margin-bottom:16px}
.login-box form{display:flex;flex-direction:column;gap:14px}
.login-box label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.login-box input[type="text"],.login-box input[type="password"]{padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:#fff;font-size:14px;font-family:'Outfit',sans-serif;transition:.16s;width:100%}
.login-box input:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.06)}
.btn{padding:12px 24px;border-radius:12px;border:none;font-weight:700;font-size:14px;cursor:pointer;transition:.16s;font-family:'Outfit',sans-serif;text-align:center}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 18px rgba(229,9,20,.25)}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-block{width:100%}
.auth-links{margin-top:18px;text-align:center}
.auth-links a{color:var(--muted);font-size:13px;text-decoration:none;transition:.14s}
.auth-links a:hover{color:#fff}

.loader{display:none;position:fixed;inset:0;background:rgba(6,4,10,.92);backdrop-filter:blur(16px);z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;font-size:15px;font-weight:700}
.spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:700px){
    .auth-layout{grid-template-columns:1fr}
    .auth-copy{display:none}
    .auth-mobile-logo{display:flex}
}