/* Вход и регистрация «Мышелова» по рефу «Parallax login»: ночное небо, планета вместо луны, барханы с дымкой,
   стеклянная карточка по центру с наклоном к курсору, поля с плавающей подписью, кнопка-дверь. Поверх tokens + components. */
.au{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden;position:relative;background:#060914}
.au::before{display:none}

/* ================= сцена ================= */
.au-scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:radial-gradient(120% 80% at 70% 0%,#0f1733 0%,#080c1c 55%,#05070f 100%)}
.au-layer{position:absolute;inset:-4%;will-change:transform;
  transform:translate3d(calc(var(--px,0)*var(--d,0)*1px),calc(var(--py,0)*var(--d,0)*1px),0)}

/* небо: звёзды (canvas), млечный путь, мерцание; без JS остаются звёзды из градиентов */
.l-sky{--d:-5;background:
  radial-gradient(1.2px 1.2px at 12% 22%,rgba(255,255,255,.8),transparent),
  radial-gradient(1px 1px at 31% 41%,rgba(255,255,255,.6),transparent),
  radial-gradient(1.4px 1.4px at 47% 14%,rgba(255,255,255,.7),transparent),
  radial-gradient(1px 1px at 63% 38%,rgba(255,255,255,.55),transparent),
  radial-gradient(1px 1px at 88% 18%,rgba(255,255,255,.7),transparent),
  radial-gradient(1.2px 1.2px at 95% 45%,rgba(255,255,255,.6),transparent)}
.au-stars{position:absolute;inset:0;width:100%;height:100%}
.au-milky{position:absolute;left:38%;top:-30%;width:90%;height:120%;transform:rotate(28deg);opacity:.8;mix-blend-mode:screen;
  background:
    radial-gradient(40% 18% at 50% 40%,rgba(170,185,255,.16),transparent 70%),
    radial-gradient(24% 9% at 46% 52%,rgba(210,220,255,.12),transparent 70%),
    radial-gradient(30% 12% at 56% 30%,rgba(196,245,58,.05),transparent 70%);
  filter:blur(6px)}
.au-twinkle{position:absolute;inset:0;animation:au-twinkle 4.5s ease-in-out infinite alternate;background:
  radial-gradient(1.8px 1.8px at 72% 12%,#fff,transparent),
  radial-gradient(1.6px 1.6px at 84% 34%,#e8ecff,transparent),
  radial-gradient(1.6px 1.6px at 58% 22%,#fff,transparent),
  radial-gradient(2px 2px at 92% 8%,#dfffa0,transparent),
  radial-gradient(1.4px 1.4px at 40% 8%,#fff,transparent),
  radial-gradient(1.6px 1.6px at 22% 52%,#e8ecff,transparent)}
@keyframes au-twinkle{0%{opacity:.25}100%{opacity:1}}

/* «луна» — наша планета, слева сверху, дышит свечением */
.l-moon{--d:9;--mw:clamp(700px,66vw,1400px);--ml:-6vw;--mt:-2vh}
.l-moon img{position:absolute;left:var(--ml);top:var(--mt);width:var(--mw);max-width:none;height:auto;
  -webkit-mask-image:radial-gradient(52% 72% at 33% 30%,#000 62%,transparent 100%);mask-image:radial-gradient(52% 72% at 33% 30%,#000 62%,transparent 100%)}
.au-moonglow{position:absolute;left:calc(var(--ml) - var(--mw)*.3);top:calc(var(--mt) - var(--mw)*.5);
  width:calc(var(--mw)*1.1);aspect-ratio:1;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(120,140,255,.0) 70%,rgba(140,160,255,.16) 82%,rgba(196,245,58,.10) 90%,transparent 100%);
  animation:au-breathe 9s ease-in-out infinite}
@keyframes au-breathe{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}

/* падающая звезда */
.au-shoot{position:absolute;right:16%;top:16%;width:130px;height:1.4px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,0));transform:rotate(24deg);
  animation:au-shoot 11s ease-out 2.5s infinite}
@keyframes au-shoot{0%{opacity:0;translate:0 0}2%{opacity:1}9%{opacity:0;translate:-300px -135px}100%{opacity:0;translate:-300px -135px}}

/* барханы: фото под луной, верх растворяется в небе */
.l-dunes{--d:16;inset:auto -4% -2vh -4%;height:max(46vh,300px)}
.l-dunes img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%)}

/* дымка над барханами */
.au-mist{position:absolute;left:-4%;bottom:30%;width:55%;height:50%;opacity:.3;filter:blur(14px);mix-blend-mode:screen;
  background:radial-gradient(40% 16% at 30% 60%,rgba(220,228,255,.9),transparent 70%),radial-gradient(30% 10% at 55% 48%,rgba(220,228,255,.7),transparent 70%);
  animation:au-mist 16s ease-in-out infinite alternate}
@keyframes au-mist{from{translate:0 0;opacity:.18}to{translate:10% -6%;opacity:.38}}

/* затемнение по краям и снизу — под футер */
.au-shade{position:absolute;inset:0;background:
  radial-gradient(120% 100% at 50% 45%,transparent 60%,rgba(4,6,14,.6)),
  linear-gradient(180deg,transparent 70%,rgba(4,6,14,.75))}

/* ================= каркас ================= */
.au-top{position:relative;z-index:2;display:flex;align-items:center;height:68px;padding-inline:clamp(16px,4vw,40px)}
.au-top .logo{color:#f3f6ff;font-size:17px}
.au-top .logo .mark{width:32px;height:32px;background:#c4f53a;color:#0a1200;box-shadow:0 0 24px rgba(196,245,58,.4)}
.au-main{position:relative;z-index:2;flex:1;display:grid;place-items:center;padding:8px 16px 28px;perspective:1400px}
.au-foot a{color:#c4f53a}
.au-foot{position:relative;z-index:2;max-width:780px;margin:0 auto;padding:0 16px 20px;text-align:center;font-size:12.5px;line-height:1.55;color:#7e89a3}

/* ================= стеклянная карточка ================= */
.au-card{position:relative;width:100%;max-width:404px;padding:32px 32px 28px;border-radius:26px;
  background:linear-gradient(160deg,rgba(66,82,150,.36) 0%,rgba(20,28,58,.5) 48%,rgba(10,14,32,.62) 100%);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 40px 100px -30px rgba(0,0,0,.9),0 0 80px -30px rgba(110,125,255,.45);
  transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));
  animation:au-in .7s cubic-bezier(.2,.8,.2,1) both}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .au-card{background:linear-gradient(160deg,rgba(40,52,100,.94),rgba(12,17,36,.96))}
}
@keyframes au-in{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
.au-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--gx,25%) var(--gy,0%),rgba(255,255,255,.08),transparent 45%)}

.au-brand{display:flex;align-items:center;gap:8px;margin:0;font:600 11.5px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#a9b6ff}
.au-card h1{margin:14px 0 6px;font-size:clamp(26px,3vw,31px);font-weight:700;letter-spacing:-.025em;color:#f3f6ff;line-height:1.12}
.au-lead{margin:0 0 22px;font-size:14px;color:#8d97b5}
.au-gap{margin:0 0 14px}
#auth-status:not(:empty){margin:0 0 14px}
.au-card .alert{font-size:13.5px}

/* поля с плавающей подписью */
.au-form{display:flex;flex-direction:column;gap:14px}
.fl{position:relative}
.fl-input{width:100%;height:56px;padding:22px 16px 7px;border-radius:12px;border:1px solid rgba(255,255,255,.11);
  background:rgba(8,13,30,.42);color:#f3f6ff;font:500 15.5px var(--sans);outline:0;color-scheme:dark;
  transition:border-color .2s,box-shadow .2s,background .2s}
.fl-input:hover{border-color:rgba(255,255,255,.2)}
.fl-input:focus{border-color:#8592ff;background:rgba(8,13,30,.55);box-shadow:0 0 0 3px rgba(120,135,255,.22),0 0 26px rgba(120,135,255,.2)}
.fl label{position:absolute;left:17px;top:50%;translate:0 -50%;font:500 15px var(--sans);color:#7e89a3;pointer-events:none;
  transition:top .18s,font-size .18s,color .18s}
.fl-input:focus + label,.fl-input:not(:placeholder-shown) + label,.fl-input:-webkit-autofill + label{top:17px;font-size:11.5px;color:#9aa6c8}
.fl-input:focus + label{color:#aab5ff}
.fl-input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px #121a35 inset;-webkit-text-fill-color:#f3f6ff;caret-color:#f3f6ff}
.fl-input:user-invalid{border-color:rgba(255,90,95,.55)}

/* ловушка для ботов — человеку не видна */
.au-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ряд ссылок под формой */
.au-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px;color:#8d97b5;margin-top:-2px}
.au-row a,.au-hint a{color:#aab5ff}
/* ---- кнопка-дверь ---- */
.au-go{position:relative;display:flex;align-items:center;width:100%;height:54px;margin-top:4px;padding:0 20px;border:0;border-radius:12px;overflow:hidden;cursor:pointer;
  background:linear-gradient(100deg,#4d63ff 0%,#6c7cff 55%,#8a95ff 100%);color:#fff;font:600 16px var(--sans);text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 32px -10px rgba(95,112,255,.75);
  transition:box-shadow .3s,filter .3s,background .5s}
.au-go::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#a6e22a,#c4f53a 60%,#d8ff6a);opacity:0;transition:opacity .45s}
.au-go:hover{filter:brightness(1.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 40px -10px rgba(95,112,255,.95)}
.au-go:focus-visible{outline:2px solid #c9d0ff;outline-offset:3px}
.go-label{position:relative;transition:opacity .25s}
.go-door{position:absolute;right:16px;top:50%;width:26px;height:32px;margin-top:-16px;border-radius:5px;perspective:160px;
  background:#120e06;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);transition:opacity .3s}
/* тёплый свет за дверью, как в рефе */
.go-light{position:absolute;inset:0;border-radius:inherit;opacity:0;
  background:radial-gradient(70% 62% at 50% 55%,#fff7dc 0%,#f6dc96 28%,#b98d3e 58%,#2a1f0c 100%);
  box-shadow:0 0 22px rgba(255,226,150,.55)}
.go-leaf{position:absolute;inset:0;border-radius:inherit;transform-origin:100% 50%;transition:transform .4s cubic-bezier(.3,.7,.3,1);
  background:linear-gradient(150deg,#8e9bff 0%,#5a6cf2 55%,#4456e0 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4),inset 0 1px 0 rgba(255,255,255,.5),0 2px 6px rgba(10,14,40,.35)}
.go-leaf::after{content:"";position:absolute;left:5px;top:11px;width:3px;height:10px;border-radius:2px;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.8)}
.au-go:hover .go-leaf{transform:rotateY(-24deg)}
.au-go:hover .go-light{opacity:.6}
.go-check{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;color:#0a1200;opacity:0;scale:.3}

/* дверь распахивается светом, свет дышит, пока сервер отвечает */
.au-go.is-going{cursor:progress}
.au-go.is-going .go-leaf{animation:go-door .5s cubic-bezier(.3,.7,.3,1) forwards}
.au-go.is-going .go-light{animation:go-light .5s ease forwards,go-glow 1.1s ease-in-out .5s infinite alternate}
.au-go.is-going .go-label{opacity:.7}
@keyframes go-door{to{transform:rotateY(-82deg)}}
@keyframes go-light{from{opacity:0}to{opacity:1}}
@keyframes go-glow{from{box-shadow:0 0 14px rgba(255,226,150,.45)}to{box-shadow:0 0 30px 4px rgba(255,226,150,.85)}}

/* готово: лаймовая кнопка с галочкой */
.au-go.is-done{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 36px -8px rgba(196,245,58,.7)}
.au-go.is-done::before{opacity:1}
.au-go.is-done .go-label,.au-go.is-done .go-door{opacity:0}
.au-go.is-done .go-check{animation:go-pop .45s cubic-bezier(.3,1.6,.5,1) .1s forwards}
@keyframes go-pop{to{opacity:1;scale:1}}
.au-go.is-error{animation:go-shake .4s}
@keyframes go-shake{20%,60%{translate:-5px 0}40%,80%{translate:5px 0}}

.au-status{margin:2px 0 0;text-align:center;font-size:13px;color:#9aa6c8}
.au-status:empty{display:none}
.au-status.ok{color:#c4f53a}

/* «или» и вторая кнопка */
.au-or{display:flex;align-items:center;gap:12px;margin:20px 0 14px;font-size:12.5px;color:#6f7a96}
.au-or::before,.au-or::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
.au-alt{display:flex;align-items:center;justify-content:center;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);color:#f3f6ff;font:600 14.5px var(--sans);transition:background .2s,border-color .2s}
.au-alt:hover{text-decoration:none;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.au-hint{margin:16px 0 0;text-align:center;font-size:13px;line-height:1.5;color:#7e89a3}

/* экран кода */
.au-mail{color:#f3f6ff;font-weight:600;word-break:break-all}
.au-paste{margin:-4px 0 0;text-align:center;font-size:12.5px;color:#7e89a3}
.au-code-links{margin-top:18px}
.au-code-links form{margin:0}
.au-link{padding:0;border:0;background:none;font:inherit;color:#aab5ff;cursor:pointer}
.au-link:hover:not(:disabled){text-decoration:underline}
.au-link:disabled{color:#6f7a96;cursor:default}
.au-card .alert.ok{background:rgba(196,245,58,.1);border-color:rgba(196,245,58,.3);color:#c4f53a}
.au-card [data-code-input]{margin:2px 0 4px}

/* шаги регистрации */
.au-steps{list-style:none;margin:-8px 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font:500 12px var(--sans);color:#7e89a3}
.au-steps li{display:flex;align-items:center;gap:7px}
.au-steps b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.08);font-size:11px;font-weight:600;color:#b4bdd3}
.au-steps .on{color:#f3f6ff}
.au-steps .on b{background:#c4f53a;color:#0a1200}

/* ================= адаптив ================= */
@media (max-width:760px){
  .l-moon{--mw:max(118vw,460px);--ml:-30vw;--mt:-1vh}
  .l-dunes{height:max(38vh,260px)}
}
@media (max-width:480px){
  .au-top{height:58px}
  .au-main{padding:4px 12px 20px}
  .au-card{padding:26px 20px 22px;border-radius:22px}
  .au-card h1{margin-top:12px}
  .au-lead{margin-bottom:18px}
}
@media (min-width:1700px){
  .au-card{max-width:430px;padding:38px 38px 32px}
}
@media (prefers-reduced-motion:reduce){
  .au-layer{transform:none;will-change:auto}
  .au-card{transform:none;animation:none}
  .au-twinkle,.au-moonglow,.au-shoot,.au-mist{animation:none}
  .au-shoot{display:none}
  .au-go.is-going .go-leaf,.au-go.is-going .go-light{animation:none}
  .au-go.is-going .go-leaf{transform:rotateY(-82deg)}
  .au-go.is-going .go-light{opacity:1}
}
.au-card .ci-in{color:#f3f6ff}