:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --border:rgba(20,20,30,0.09);
  --text:#181a24;
  --muted:#6b6f80;
  --accent:#7c5cff;
  --accent-2:#0e8fa6;
  --danger:#e0405f;
  --grad: linear-gradient(135deg,#7c5cff 0%,#22d3ee 100%);
  --surface-2: rgba(20,20,30,0.035);
  --card-shadow: 0 10px 40px rgba(20,20,30,0.08);
  --glow-1: rgba(124,92,255,0.10);
  --glow-2: rgba(14,143,166,0.08);
  --glow-3: rgba(219,39,119,0.05);
}
:root[data-theme="dark"]{
  --bg:#07080d;
  --card:#12141f;
  --border:rgba(255,255,255,0.08);
  --text:#f2f3f7;
  --muted:#9498ab;
  --accent-2:#22d3ee;
  --danger:#ff5c7a;
  --surface-2: rgba(255,255,255,0.03);
  --card-shadow: 0 30px 80px rgba(0,0,0,0.5);
  --glow-1: rgba(124,92,255,0.18);
  --glow-2: rgba(34,211,238,0.14);
  --glow-3: rgba(255,92,173,0.08);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Segoe UI', -apple-system, BlinkMacSystemFont, Inter, Roboto, Arial, sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; position:relative; overflow:hidden;
}
.bg-glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(600px circle at 15% 10%, var(--glow-1), transparent 60%),
    radial-gradient(700px circle at 85% 30%, var(--glow-2), transparent 60%),
    radial-gradient(500px circle at 50% 100%, var(--glow-3), transparent 60%);
}
.auth-card{
  position:relative; z-index:1;
  width:100%; max-width:420px;
  background:var(--card); border:1px solid var(--border); border-radius:20px;
  padding:40px 36px;
  box-shadow:var(--card-shadow);
  opacity:0; transform:translateY(18px);
  animation:cardIn .6s ease forwards;
}
@keyframes cardIn{ to{ opacity:1; transform:translateY(0); } }

.logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px; justify-content:center; margin-bottom:8px;}
.logo-mark{
  width:30px; height:30px; border-radius:9px; background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 24px rgba(124,92,255,0.4);
}
.logo-mark svg{width:16px; height:16px;}

h1{font-size:22px; font-weight:800; text-align:center; margin-top:18px; letter-spacing:-0.02em;}
.subtitle{color:var(--muted); text-align:center; font-size:14px; margin-top:8px; margin-bottom:30px;}

.field{margin-bottom:18px;}
.field label{display:block; font-size:13px; color:var(--muted); margin-bottom:7px; font-weight:600;}
.field input{
  width:100%; padding:12px 14px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  font-size:14px; outline:none; transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus{
  border-color:var(--accent); background:rgba(124,92,255,0.06);
  box-shadow:0 0 0 3px rgba(124,92,255,0.15);
}
.field input.invalid{ border-color:var(--danger); }

.btn{
  width:100%; padding:13px; border-radius:10px; font-size:15px; font-weight:700;
  border:none; cursor:pointer; transition:transform .2s, box-shadow .2s, opacity .2s;
  background:var(--grad); color:#08090f;
  box-shadow:0 8px 30px rgba(124,92,255,0.3);
  margin-top:6px;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 34px rgba(124,92,255,0.45);}
.btn:disabled{opacity:0.6; cursor:not-allowed; transform:none;}
.btn .spinner{
  display:none; width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(8,9,15,0.3); border-top-color:#08090f;
  animation:spin .7s linear infinite; margin:0 auto;
}
.btn.loading span{display:none;}
.btn.loading .spinner{display:inline-block;}
@keyframes spin{ to{ transform:rotate(360deg); } }

.error-banner{
  background:rgba(224,64,95,0.08); border:1px solid rgba(224,64,95,0.3); color:var(--danger);
  padding:11px 14px; border-radius:10px; font-size:13px; margin-bottom:18px;
  display:none; animation:shake .35s ease;
}
.error-banner.show{display:block;}
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); }
  75%{ transform:translateX(6px); }
}

.footer-link{text-align:center; margin-top:24px; font-size:14px; color:var(--muted);}
.footer-link a{color:var(--accent-2); font-weight:600; text-decoration:none;}
.footer-link a:hover{text-decoration:underline;}

.plan-note{
  margin-top:22px; text-align:center; font-size:12px; color:var(--muted);
  padding-top:18px; border-top:1px solid var(--border);
}
.plan-note b{color:var(--accent-2);}