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

/* accent */
:root{--a1:#007AFF;--a2:#0a84ff;--ag:linear-gradient(135deg,#007AFF,#5856d6);--ab:rgba(0,122,255,.15);}
[data-accent="gold"]  {--a1:#f59e0b;--a2:#d97706;--ag:linear-gradient(135deg,#f59e0b,#ef4444);--ab:rgba(245,158,11,.15);}
[data-accent="purple"]{--a1:#8b5cf6;--a2:#7c3aed;--ag:linear-gradient(135deg,#8b5cf6,#ec4899);--ab:rgba(139,92,246,.15);}
[data-accent="teal"]  {--a1:#14b8a6;--a2:#0d9488;--ag:linear-gradient(135deg,#14b8a6,#3b82f6);--ab:rgba(20,184,166,.15);}
[data-accent="rose"]  {--a1:#f43f5e;--a2:#e11d48;--ag:linear-gradient(135deg,#f43f5e,#fb923c);--ab:rgba(244,63,94,.15);}
[data-accent="green"] {--a1:#10b981;--a2:#059669;--ag:linear-gradient(135deg,#10b981,#06b6d4);--ab:rgba(16,185,129,.15);}

/* themes */
:root,[data-theme="light"]{--bg:#f0f2f7;--surf:rgba(255,255,255,.9);--bdr:rgba(0,0,0,.08);--title:#0f1827;--body:#3a4560;--muted:#8a96ab;--is-light:1;}
[data-theme="dark"]   {--bg:#0b0e14;--surf:rgba(19,23,31,.9);  --bdr:rgba(255,255,255,.08);--title:#e2eaf8;--body:#8896a9;--muted:#4a5870;--is-light:0;}
[data-theme="indigo"] {--bg:#0f0c29;--surf:rgba(255,255,255,.07);--bdr:rgba(255,255,255,.1); --title:#e8eeff;--body:#9ba8cc;--muted:#5564a0;--is-light:0;}
[data-theme="ocean"]  {--bg:#020c1b;--surf:rgba(255,255,255,.07);--bdr:rgba(255,255,255,.09);--title:#e0f0ff;--body:#8ab0cc;--muted:#3d6080;--is-light:0;}
[data-theme="sunset"] {--bg:#1a0a00;--surf:rgba(255,255,255,.07);--bdr:rgba(255,255,255,.09);--title:#ffeedd;--body:#c0907a;--muted:#804030;--is-light:0;}

html,body{
  min-height:100vh;background:var(--bg);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  color:var(--body);
  transition:background .4s,color .25s;
}

/* bg decoration */
.bg-deco{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.blob{position:absolute;border-radius:50%;filter:blur(80px);animation:bm 22s ease-in-out infinite alternate;}
.blob:nth-child(1){width:700px;height:600px;background:var(--ag);opacity:.09;top:-200px;left:-150px;animation-duration:24s;}
.blob:nth-child(2){width:500px;height:500px;background:radial-gradient(circle,#38bdf8,transparent 65%);opacity:.06;bottom:-150px;right:-100px;animation-duration:28s;animation-delay:-10s;}
.blob:nth-child(3){width:400px;height:400px;background:var(--ag);opacity:.06;bottom:10%;left:40%;animation-duration:20s;animation-delay:-5s;}
@keyframes bm{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.1)}100%{transform:translate(-20px,40px) scale(.9)}}
[data-theme="indigo"] .blob:nth-child(1){background:radial-gradient(circle,#4f46e5,transparent 65%);opacity:.2;}
[data-theme="ocean"]  .blob:nth-child(1){background:radial-gradient(circle,#0ea5e9,transparent 65%);opacity:.18;}
[data-theme="sunset"] .blob:nth-child(1){background:radial-gradient(circle,#ea580c,transparent 65%);opacity:.18;}

/* grid */
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(var(--bdr) 1px,transparent 1px),linear-gradient(90deg,var(--bdr) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,black 20%,transparent 80%);}

/* card */
.wrap{position:relative;z-index:1;width:100%;max-width:460px;margin:0 auto;display:flex;align-items:center;min-height:100vh;padding:24px;}
.card{
  width:100%;
  background:var(--surf);
  border:1px solid var(--bdr);
  border-radius:28px;
  padding:48px 44px 44px;
  backdrop-filter:blur(32px);
  -webkit-backdrop-filter:blur(32px);
  box-shadow:0 24px 80px rgba(0,0,0,.12),0 4px 20px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.6);
  animation:ci .55s cubic-bezier(.22,.68,0,1.08) both;
  position:relative;overflow:hidden;
}
[data-theme="dark"]   .card{box-shadow:0 24px 80px rgba(0,0,0,.5),0 4px 20px rgba(0,0,0,.3);}
[data-theme="indigo"] .card,[data-theme="ocean"] .card,[data-theme="sunset"] .card{box-shadow:0 24px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--ag);border-radius:28px 28px 0 0;}
@keyframes ci{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}

/* logo area */
.logo{display:flex;align-items:center;gap:14px;margin-bottom:36px;}
.logo-mark{
  width:54px;height:54px;border-radius:16px;flex-shrink:0;
  background:var(--ag);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 24px var(--ab),inset 0 1px 0 rgba(255,255,255,.25);
  animation:lg 5s ease-in-out infinite alternate;
}
@keyframes lg{from{box-shadow:0 4px 18px var(--ab)}to{box-shadow:0 0 40px var(--ab),0 8px 30px var(--ab)}}
.logo-mark svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.logo-title{font-size:25px;font-weight:800;color:var(--title);letter-spacing:-.05em;}
.logo-sub{font-size:12px;color:var(--muted);margin-top:3px;}

/* server pill */
.server-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:14px;
  background:var(--bg,#f2f4f8);border:1px solid var(--bdr);
  margin-bottom:28px;width:100%;
}
[data-theme="dark"] .server-pill,[data-theme="indigo"] .server-pill,[data-theme="ocean"] .server-pill,[data-theme="sunset"] .server-pill{background:rgba(255,255,255,.04);}
.s-dot{width:8px;height:8px;border-radius:50%;background:#30d158;box-shadow:0 0 8px #30d158;flex-shrink:0;animation:sd 2.5s ease-in-out infinite;}
@keyframes sd{0%,100%{opacity:1}50%{opacity:.4}}
.server-pill p{font-size:12px;color:var(--body);flex:1;}
.server-pill b{color:var(--title);font-weight:700;}

/* err */
.err{
  display:flex;align-items:center;gap:11px;
  background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);
  border-radius:13px;padding:12px 16px;margin-bottom:20px;
  font-size:13px;font-weight:600;color:#ef4444;
  animation:shake .34s ease,fade-in .2s ease;
}
.err [data-lucide]{width:15px;height:15px;flex-shrink:0;}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-5px)}50%{transform:translateX(4px)}80%{transform:translateX(-2px)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* fields */
.fg{margin-bottom:18px;}
.fl{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.iw{position:relative;}
.ii{position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none;}
.ii [data-lucide]{width:15px;height:15px;color:var(--muted);transition:color .2s;}
.iw:focus-within .ii [data-lucide]{color:var(--a1);}
.inp{
  width:100%;background:var(--bg,#f2f4f8);border:1.5px solid var(--bdr);
  border-radius:13px;padding:13px 14px 13px 46px;
  color:var(--title);font-family:'Inter',sans-serif;font-size:14px;outline:none;
  transition:all .22s;
}
[data-theme="dark"] .inp,[data-theme="indigo"] .inp,[data-theme="ocean"] .inp,[data-theme="sunset"] .inp{background:rgba(255,255,255,.05);}
.inp::placeholder{color:var(--muted);}
.inp:focus{border-color:var(--a1);box-shadow:0 0 0 4px var(--ab);}
.pw-btn{position:absolute;right:13px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:3px;transition:color .2s;}
.pw-btn [data-lucide]{width:15px;height:15px;color:var(--muted);}
.pw-btn:hover [data-lucide]{color:var(--a1);}

/* submit */
.sub{
  width:100%;padding:14px;border-radius:14px;border:none;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:700;letter-spacing:.03em;
  background:var(--ag);color:#fff;
  box-shadow:0 4px 18px var(--ab);
  transition:all .22s;
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:8px;
}
.sub [data-lucide]{width:17px;height:17px;}
.sub:hover{box-shadow:0 8px 32px var(--ab);transform:translateY(-2px);}
.sub:active{transform:scale(.98);}

/* theme row */
.theme-row{display:flex;gap:6px;justify-content:center;margin-top:24px;padding-top:18px;border-top:1px solid var(--bdr);flex-wrap:wrap;}
.t-btn{
  width:28px;height:28px;border-radius:50%;cursor:pointer;border:2.5px solid transparent;
  transition:all .2s;
}
.t-btn:hover{transform:scale(1.15);}
.t-btn.active{border-color:var(--a1);box-shadow:0 0 0 2px var(--ab);}

.foot{text-align:center;margin-top:10px;font-size:11.5px;color:var(--muted);}

@media(max-width:500px){
  .wrap{padding:12px;}
  .card{padding:36px 22px 32px;border-radius:22px;}
}