:root{
  --bg:#0a0d12; --bg-raised:#0d1119; --surface:#131826; --surface-2:#1b2233;
  --border:#242c3d; --border-soft:#1c2333;
  --text:#edeff4; --text-dim:#8b93a8; --text-faint:#5b6479;
  --accent:#5b6ef5; --accent-2:#8b7cf6; --positive:#3ecf8e; --negative:#ff6b7a; --gold:#f0b429;
  --radius:12px; --radius-lg:18px;
  --font-display:'Space Grotesk', sans-serif; --font-body:'Inter', sans-serif; --font-mono:'JetBrains Mono', monospace;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{background:var(--bg); color:var(--text); font-family:var(--font-body); -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,.font-display{font-family:var(--font-display); letter-spacing:-0.02em;}
.font-mono{font-family:var(--font-mono);}
.text-dim{color:var(--text-dim) !important;} .text-faint{color:var(--text-faint) !important;}
.text-accent{color:var(--accent) !important;} .text-positive{color:var(--positive) !important;} .text-gold{color:var(--gold) !important;}
a{text-decoration:none; color:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600;}

.auth-shell{display:flex; min-height:100vh;}

/* ===== LEFT: illustration panel ===== */
.auth-visual{
  flex:0 0 46%; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between;
  padding:44px 48px;
  background:
    radial-gradient(ellipse 700px 500px at 20% 10%, rgba(91,110,245,0.22), transparent 60%),
    radial-gradient(ellipse 600px 500px at 90% 90%, rgba(139,124,246,0.16), transparent 60%),
    var(--bg-raised);
  border-right:1px solid var(--border-soft);
}
.brand-mark{font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--text); display:flex; align-items:center; gap:9px;}
.brand-mark .dot{width:9px;height:9px;border-radius:2px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); transform:rotate(45deg); display:inline-block;}
.auth-visual .headline{font-size:30px; font-weight:700; line-height:1.2; max-width:420px; margin-top:24px;}
.auth-visual .sub{color:var(--text-dim); font-size:14.5px; max-width:380px; margin-top:12px;}

/* --- orbit / globe illustration (variant 1) --- */
.orbit-wrap{position:relative; width:100%; max-width:420px; margin:20px auto; aspect-ratio:1/1;}
.orbit-ring{position:absolute; border:1px solid var(--border-soft); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%);}
.orbit-node{
  position:absolute; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:9px 13px;
  font-family:var(--font-mono); font-size:12px; display:flex; align-items:center; gap:7px; box-shadow:0 10px 24px -8px rgba(0,0,0,0.5);
  animation:float 6s ease-in-out infinite;
}
.orbit-node .bar{width:26px; height:4px; border-radius:2px; overflow:hidden; background:var(--surface-2);}
.orbit-node .bar span{display:block; height:100%; border-radius:2px;}
@keyframes float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);}}
.globe-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(91,110,245,0.5), rgba(91,110,245,0.05) 70%);
  border:1px solid rgba(91,110,245,0.4); display:flex; align-items:center; justify-content:center; font-size:32px; color:var(--accent);
}

/* --- perk list illustration (variant 2) --- */
.perk-list{margin-top:32px; display:flex; flex-direction:column; gap:16px; max-width:380px;}
.perk-item{display:flex; gap:12px; align-items:flex-start;}
.perk-icon{width:34px; height:34px; border-radius:9px; background:rgba(91,110,245,0.14); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:13.5px; flex:0 0 34px;}
.perk-item .t{font-weight:600; font-size:14px;}
.perk-item .d{font-size:12.5px; color:var(--text-faint);}

.stat-strip{display:flex; gap:28px; margin-top:auto; padding-top:20px; border-top:1px solid var(--border-soft);}
.stat-strip .n{font-family:var(--font-mono); font-weight:700; font-size:19px;}
.stat-strip .l{font-size:11.5px; color:var(--text-faint);}

/* ===== RIGHT: form panel ===== */
.auth-form-panel{flex:1; display:flex; align-items:center; justify-content:center; padding:40px 24px;}
.auth-form-wrap{width:100%; max-width:380px;}
.auth-form-wrap h2{font-size:26px; font-weight:700; margin-bottom:6px;}
.form-label-forecastr{font-size:13px; font-weight:600; color:var(--text-dim); margin-bottom:6px;}
.form-control-forecastr{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); color:var(--text);
  font-size:14px; padding:11px 14px; width:100%;
}
.form-control-forecastr:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(91,110,245,0.15); background:var(--surface);}
.form-control-forecastr::placeholder{color:var(--text-faint);}
.input-icon-wrap{position:relative;}
.input-icon-wrap i{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:13px;}
.input-icon-wrap .form-control-forecastr{padding-left:38px;}
.btn-forecastr-primary{background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:var(--radius); font-weight:600; font-size:14.5px; padding:12px; width:100%; transition:all .15s ease;}
.btn-forecastr-primary:hover{background:#4a5de0; color:#fff; box-shadow:0 0 0 4px rgba(91,110,245,0.18);}
.divider-line{display:flex; align-items:center; gap:14px; margin:22px 0; color:var(--text-faint); font-size:12.5px;}
.divider-line::before, .divider-line::after{content:''; flex:1; height:1px; background:var(--border);}
.btn-social{
  display:flex; align-items:center; justify-content:center; gap:10px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:11px; font-weight:600; font-size:13.5px; color:var(--text); width:100%; transition:all .15s ease;
}
.btn-social:hover{border-color:var(--accent); background:var(--surface-2);}
.remember-row{display:flex; justify-content:space-between; align-items:center; margin:14px 0 20px; font-size:13px;}
.form-check-input{background-color:var(--surface); border-color:var(--border);}
.form-check-input:checked{background-color:var(--accent); border-color:var(--accent);}

.referral-detected{
  display:flex; align-items:center; gap:10px; background:rgba(62,207,142,0.08); border:1px solid rgba(62,207,142,0.3);
  border-radius:var(--radius); padding:11px 14px; font-size:13px; margin-bottom:18px;
}
.referral-detected i{color:var(--positive);}
.referral-detected b{color:var(--positive);}

@media(max-width:900px){
  .auth-visual{display:none;}
}