:root{
  --bg:#050a12; --bg-alt:#080f1c; --surface:#0d1729; --surface-2:#13203a;
  --border:rgba(122,212,255,0.16); --border-strong:rgba(122,212,255,0.4);
  --gold:#7ad4ff; --gold-soft:#c9ecff; --gold-dim:#3f7fa3;
  --violet:#b9c8de; --violet-soft:#e6edf7;
  --text:#eaf3ff; --text-dim:#93aac9; --text-faint:#5b7392;
  --ok:#3ddc84; --danger:#ff5d7a;
  --radius:20px; --radius-sm:12px;
  --font-display:'Orbitron',sans-serif; --font-body:'Space Grotesk',sans-serif;
}
.field.password-field .input-wrap{ position:relative; display:flex; align-items:stretch;
  background:rgba(2,5,9,0.55); border:1px solid var(--border); border-radius:var(--radius-sm);
  transition:border-color .2s, box-shadow .2s; }
.field.password-field .input-wrap:focus-within{ border-color:var(--violet); box-shadow:0 0 0 3px rgba(185,200,222,0.16); }
.field.password-field .input-wrap input{ flex:1 1 auto; min-width:0; width:auto;
  background:transparent; border:0; border-radius:0; padding:13px 8px 13px 15px; }
.field.password-field .input-wrap input:focus{ box-shadow:none; }
.field.password-field .eye-toggle{ position:relative; flex:0 0 auto; align-self:center;
  width:38px; height:38px; margin-right:4px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; color:var(--violet); opacity:.68; padding:0; border-radius:8px;
  transition:color .2s ease, opacity .2s ease, background .2s ease; }
.field.password-field .eye-toggle:hover{ color:var(--violet-soft); opacity:1; background:rgba(185,200,222,.1); }
.field.password-field .eye-toggle:focus-visible{ outline:2px solid var(--violet); outline-offset:2px; opacity:1; }
.field.password-field .eye-toggle.is-active{ color:var(--violet-soft); opacity:1; }

.field.password-field .eye-icon{ position:absolute; top:50%; left:50%; width:18px; height:18px;
  transform:translate(-50%,-50%) scaleY(1); opacity:1; transform-origin:center;
  transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .22s ease; }
.field.password-field .eye-icon-on{ opacity:0; transform:translate(-50%,-50%) scaleY(.1); }
.field.password-field .eye-toggle.is-active .eye-icon-off{ opacity:0; transform:translate(-50%,-50%) scaleY(.1); }
.field.password-field .eye-toggle.is-active .eye-icon-on{ opacity:1; transform:translate(-50%,-50%) scaleY(1); }
@media (prefers-reduced-motion: reduce){
  .field.password-field .eye-icon{ transition:opacity .12s ease; transform:translate(-50%,-50%) !important; }
}
.field.password-field .input-wrap.no-eye input{ padding-right:15px; }
*,*::before,*::after{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
a,button,input,textarea,[tabindex]{ -webkit-tap-highlight-color:transparent; outline:none; -webkit-appearance:none; appearance:none; }
button::-moz-focus-inner{ border:0; padding:0; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }
html{ overflow-x:hidden; width:100%; }
body{ margin:0; min-height:100vh; background:var(--bg); color:var(--text); font-family:var(--font-body);
  display:flex; align-items:center; justify-content:center; padding:24px; position:relative; overflow-x:hidden; max-width:100vw; touch-action:pan-y; overscroll-behavior-x:none; }
a{ color:inherit; }
::selection{ background:var(--gold); color:#071019; }

.bg-grid{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(185,200,222,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(185,200,222,0.07) 1px,transparent 1px);
  background-size:42px 42px; mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%); }
.bg-glow{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(620px 380px at 12% 8%,rgba(122,212,255,0.10),transparent 60%),
             radial-gradient(560px 420px at 92% 88%,rgba(185,200,222,0.14),transparent 60%); }

.wrap{ position:relative; z-index:2; width:100%; max-width:420px; display:flex; flex-direction:column; gap:22px;
  animation:fadeUp .55s cubic-bezier(.2,.9,.4,1.1); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(28px);} to{ opacity:1; transform:translateY(0);} }

.brand{ display:flex; align-items:center; justify-content:center; gap:10px; }
.brand svg{ width:38px; height:38px; filter:drop-shadow(0 0 12px rgba(122,212,255,.35)); }
.brand-text{ font-family:var(--font-display); font-weight:800; letter-spacing:.08em; font-size:1.2rem; }
.brand-text small{ display:block; font-family:var(--font-body); font-weight:500; letter-spacing:.1em; font-size:.62rem; color:var(--text-faint); text-transform:uppercase; text-align:center; }

.card{ background:linear-gradient(180deg,var(--surface),var(--bg-alt)); border:1px solid var(--border); border-radius:var(--radius);
  padding:32px 28px; display:flex; flex-direction:column; gap:20px; position:relative; overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.45); }
.card::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--violet),var(--gold),transparent); opacity:.7; }

h1{ font-family:var(--font-display); font-size:1.05rem; letter-spacing:.03em; margin:0; text-align:center;
  background:linear-gradient(90deg,var(--violet-soft),var(--gold) 55%,var(--gold-soft)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sub{ text-align:center; color:var(--text-dim); font-size:.84rem; margin:-10px 0 4px; }

.notif{ padding:11px 14px; border-radius:var(--radius-sm); font-size:.82rem; display:none; align-items:center; gap:9px; }
.notif.error{ display:flex; background:rgba(255,93,122,0.1); border:1px solid rgba(255,93,122,.35); color:var(--danger); }
.notif.success{ display:flex; background:rgba(61,220,132,0.1); border:1px solid rgba(61,220,132,.35); color:var(--ok); }

.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-faint); }
.field input{ background:rgba(2,5,9,0.55); border:1px solid var(--border); border-radius:var(--radius-sm); padding:13px 15px;
  font-size:.92rem; color:var(--text); font-family:var(--font-body); outline:none; transition:border-color .2s, box-shadow .2s; }
.field input:focus{ border-color:var(--violet); box-shadow:0 0 0 3px rgba(185,200,222,0.16); }
.field input::placeholder{ color:var(--text-faint); }
.field-hint{ font-size:.68rem; color:var(--text-faint); }

.btn{ border:none; border-radius:999px; padding:14px 18px; font-family:var(--font-display); font-weight:700; font-size:.82rem;
  letter-spacing:.05em; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(105deg,var(--violet) 0%,#6f4fe0 100%); color:#fff; transition:transform .2s, box-shadow .2s, filter .2s;
  box-shadow:0 10px 26px rgba(185,200,222,0.28); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(185,200,222,0.4); filter:brightness(1.05); }
.btn:active{ transform:translateY(0); }
.btn:focus{ outline:none; }
.btn:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; box-shadow:0 0 0 5px rgba(122,212,255,.12),0 10px 26px rgba(122,212,255,.22); }
.btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.btn svg{ width:16px; height:16px; }

.spin{ width:14px; height:14px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.footer{ text-align:center; font-size:.82rem; color:var(--text-dim); }
.footer a{ color:var(--gold-soft); font-weight:600; text-decoration:none; border-bottom:1px dashed var(--border-strong); }
.footer a:hover{ color:var(--gold); }

.backhome{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:.78rem; color:var(--text-faint); text-decoration:none; }
.backhome:hover{ color:var(--text-dim); }
.backhome svg{ width:13px; height:13px; }