:root{--bg:#04060b;--ink:#e8f2ff;--muted:#7f8ea6;--line:rgba(120,180,255,.16);--cyan:#35e0ff}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:radial-gradient(900px 520px at 50% 0%,rgba(22,60,110,.35) 0%,var(--bg) 60%),var(--bg);
  color:var(--ink);font-family:"Noto Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex;align-items:center;justify-content:center;padding:24px;
  -webkit-font-smoothing:antialiased;
}
.grid{
  position:fixed;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(90,180,255,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(90,180,255,.07) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 75%);
          mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 75%);
}
.wrap{position:relative;width:100%;max-width:400px}
.brand{
  display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:26px;
  font-size:.74rem;letter-spacing:.36em;text-transform:uppercase;color:#a9d6f5;text-decoration:none;
}
.brand .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}
.panel{
  display:flex;flex-direction:column;gap:16px;
  padding:30px 26px;border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(16,28,46,.9),rgba(7,12,21,.86));
  box-shadow:0 30px 80px -50px rgba(53,224,255,.7);
}
h1{margin:0;font-size:1.15rem;letter-spacing:.16em;font-weight:600;text-align:center}
.hint{margin:0;text-align:center;color:var(--muted);font-size:.78rem;line-height:1.7}
.error{
  margin:0;padding:9px 12px;border-radius:8px;font-size:.78rem;
  color:#ff9db3;background:rgba(255,90,120,.1);border:1px solid rgba(255,90,120,.28);
}
.field{display:flex;flex-direction:column;gap:7px}
.field span{font-size:.72rem;letter-spacing:.18em;color:#8ba6c4;text-transform:uppercase}
input[type=text],input[type=password]{
  width:100%;padding:12px 14px;border-radius:10px;
  border:1px solid rgba(120,170,230,.22);background:rgba(6,12,22,.85);color:var(--ink);
  font:inherit;font-size:.92rem;outline:none;transition:border-color .2s,box-shadow .2s;
}
input[type=text]:focus,input[type=password]:focus{
  border-color:rgba(53,224,255,.6);box-shadow:0 0 0 3px rgba(53,224,255,.12);
}
button{
  margin-top:6px;padding:13px;border-radius:10px;border:1px solid rgba(110,200,255,.45);cursor:pointer;
  background:linear-gradient(180deg,rgba(53,224,255,.22),rgba(53,224,255,.08));
  color:#eaf9ff;font:inherit;font-size:.88rem;letter-spacing:.22em;
  transition:box-shadow .2s,transform .15s,border-color .2s;
}
button:hover{box-shadow:0 0 28px rgba(53,224,255,.35);border-color:rgba(110,200,255,.85)}
button:active{transform:translateY(1px)}
.foot{margin:2px 0 0;text-align:center;font-size:.7rem;color:#5b6c85;letter-spacing:.06em}
body{flex-direction:column;min-height:100vh}
.wrap{margin:auto}
.auth-foot{margin-top:auto;padding:14px 0 4px;font-size:.7rem;letter-spacing:.1em;color:#5b6c85}
.auth-foot a{color:#7f98b3;text-decoration:none}
.auth-foot a:hover{color:#5ad1ff}