:root{
  --bg:#070b14;
  --panel:rgba(15,23,40,.72);
  --line:rgba(148,180,255,.14);
  --text:#e8eefc;
  --muted:#7f8daa;
  --neon:#22d3ee;
  --violet:#a855f7;
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--text);
  display:grid;place-items:center;padding:32px 20px;position:relative;overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:14.5px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,p{margin:0}
.noise{
  position:fixed;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(120,160,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,160,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);
}
.orb{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none}
.orb-a{width:460px;height:460px;background:rgba(34,211,238,.20);top:-160px;left:-140px}
.orb-b{width:500px;height:500px;background:rgba(168,85,247,.18);bottom:-200px;right:-160px}

.wrap{width:100%;max-width:436px;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px}
.brand-mark{
  font-family:ui-monospace,Menlo,monospace;font-size:11.5px;padding:4px 8px;border-radius:7px;
  color:var(--neon);border:1px solid rgba(34,211,238,.35);background:rgba(34,211,238,.08);
}
.panel{
  width:100%;padding:30px 30px 22px;border-radius:18px;
  background:var(--panel);border:1px solid var(--line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:4px;margin-bottom:22px}
.tab{text-align:center;font-size:13px;padding:7px 0;border-radius:7px;color:var(--muted);font-weight:500;transition:.18s}
.tab:hover{color:var(--text)}
.tab.active{
  color:#06101f;font-weight:650;
  background:linear-gradient(120deg,var(--neon),#5b9dff);
  box-shadow:0 4px 16px rgba(34,211,238,.25);
}
h1{font-size:23px;font-weight:800;letter-spacing:-.02em}
.sub{font-size:12.8px;color:var(--muted);margin-top:5px}
.alert{
  margin-top:16px;padding:10px 13px;border-radius:9px;font-size:12.5px;line-height:1.8;
  background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.28);color:#fca5a5;
}
form{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.fi{display:flex;flex-direction:column;gap:6px}
.fi > span{font-size:12px;font-weight:600;color:#9fb0cf}
.fi input{
  height:43px;padding:0 13px;border-radius:9px;font-size:13.5px;font-family:inherit;width:100%;
  color:var(--text);background:rgba(255,255,255,.035);border:1px solid var(--line);transition:.16s;
}
.fi input::placeholder{color:#5c6b88}
.fi input:focus{
  outline:none;border-color:rgba(34,211,238,.55);background:rgba(34,211,238,.05);
  box-shadow:0 0 0 3px rgba(34,211,238,.12);
}
.fi-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.submit{
  height:45px;border:none;border-radius:10px;cursor:pointer;margin-top:6px;
  font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:.08em;color:#06101f;
  background:linear-gradient(120deg,var(--neon),#5b9dff 55%,var(--violet));
  box-shadow:0 0 26px rgba(34,211,238,.25);transition:.18s;
}
.submit:hover{box-shadow:0 0 36px rgba(34,211,238,.42);transform:translateY(-1px)}
.panel-foot{
  display:flex;justify-content:space-between;gap:10px;margin-top:20px;padding-top:15px;
  border-top:1px solid var(--line);font-size:11.5px;color:var(--muted);
}
.panel-foot a:hover{color:var(--neon)}

@media (max-width:480px){
  body{padding:20px 14px}
  .panel{padding:24px 20px 18px}
  .fi-row{grid-template-columns:1fr}
}