:root{--bg:#0F172A;--card:#1E293B;--text:#F8FAFC;--muted:#CBD5E1;--green:#22C55E;--purple:#7C3AED;--soft:#94A3B8}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at 15% 15%,rgba(34,197,94,.2),transparent 30%),radial-gradient(circle at 80% 10%,rgba(124,58,237,.25),transparent 30%),var(--bg);color:var(--text)}
.main{padding:36px}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.card{background:linear-gradient(180deg,rgba(30,41,59,.92),rgba(17,24,39,.96));border:1px solid rgba(255,255,255,.09);border-radius:24px;padding:26px;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.span-5{grid-column:span 5}.span-7{grid-column:span 7}.title{font-size:54px;letter-spacing:-.06em;line-height:1;margin:12px 0}.subtitle{font-size:17px;line-height:1.65;color:var(--muted)}.kicker{color:#86EFAC;text-transform:uppercase;font-size:13px;font-weight:800;letter-spacing:.14em}
.btn{display:inline-flex;background:linear-gradient(135deg,var(--green),var(--purple));color:white;text-decoration:none;border:0;border-radius:999px;padding:13px 18px;font-weight:800}.btn.secondary,.pill{background:rgba(255,255,255,.07);color:var(--muted);text-decoration:none;border-radius:999px;padding:10px 13px;display:inline-flex;margin:4px}
.form-label{display:block;color:var(--muted);font-size:13px;margin:18px 0 8px}.form-input{width:100%;border-radius:16px;border:1px solid rgba(148,163,184,.2);background:rgba(15,23,42,.78);color:white;padding:14px 15px;font:inherit}
.notice{border-left:4px solid var(--green);padding:14px 16px;background:rgba(34,197,94,.08);border-radius:14px;color:var(--muted)}


.login-grid{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
}
.login-hero{
  padding:56px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.login-card-wrap{
  display:grid;
  place-items:center;
  padding:36px;
}
.login-card{
  width:min(460px,100%);
  background:linear-gradient(180deg,rgba(30,41,59,.94),rgba(17,24,39,.96));
  border:1px solid rgba(255,255,255,.1);
  border-radius:32px;
  padding:32px;
  box-shadow:0 24px 80px rgba(0,0,0,.35);
}
.login-title{
  font-size:76px;
  line-height:.95;
  letter-spacing:-.08em;
  margin:70px 0 22px;
}
.login-quote{
  font-size:22px;
  line-height:1.45;
  max-width:720px;
  color:var(--muted);
  letter-spacing:-.035em;
}
.login-option{
  width:100%;
  border:1px solid rgba(148,163,184,.18);
  border-radius:16px;
  background:rgba(255,255,255,.055);
  color:var(--text);
  padding:13px;
  font-weight:700;
  margin-top:10px;
}
.login-divider{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--soft);
  font-size:12px;
  margin:22px 0;
}
.login-divider:before,.login-divider:after{
  content:"";
  height:1px;
  background:rgba(148,163,184,.18);
  flex:1;
}
.login-footer-links{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:18px;
  color:var(--soft);
  font-size:13px;
}
.login-footer-links a{color:var(--soft);text-decoration:none}
@media(max-width:900px){
  .login-grid{grid-template-columns:1fr}
  .login-hero{padding:32px}
  .login-title{font-size:54px;margin:42px 0 18px}
}