:root {
  --ink:#101828;
  --muted:#667085;
  --faint:#98a2b3;
  --line:#e4eaf1;
  --orange:#ff3d0d;
  --orange-dark:#e92e00;
  --orange-soft:#fff0eb;
  --cobalt:#1677ff;
  --cobalt-soft:#edf5ff;
  --jade:#0ead88;
  --jade-soft:#eafaf6;
  --coral:#ff365d;
  --sans:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --number:"Manrope","Noto Sans SC",sans-serif;
}

* { box-sizing:border-box; }
html,body { min-width:320px; min-height:100%; margin:0; }
body { color:var(--ink); background:#fff; font-family:var(--sans); -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; color:inherit; }
button { border:0; }

.auth-page { min-height:100vh; overflow-x:hidden; }
.auth-stage { position:relative; min-height:100vh; isolation:isolate; overflow:hidden; display:flex; align-items:center; padding:118px clamp(24px,7vw,110px) 50px; background:#fff; }
.auth-stage::before { content:""; position:absolute; z-index:-4; inset:0; background:radial-gradient(circle at 77% 45%,rgba(22,119,255,.05),transparent 25%),linear-gradient(90deg,#fff 0 48%,rgba(249,252,255,.82)); }
.auth-stage::after { content:""; position:absolute; z-index:-1; left:0; right:0; bottom:0; height:32%; background:linear-gradient(to top,rgba(244,249,254,.92),transparent); }

.auth-brand { position:absolute; z-index:5; left:clamp(24px,4.5vw,72px); top:34px; display:flex; align-items:center; gap:14px; color:inherit; text-decoration:none; }
.auth-seal { position:relative; width:56px; height:56px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#ff6035,var(--orange) 68%,#e92800); border-radius:16px 16px 23px 16px; box-shadow:0 13px 30px rgba(255,61,13,.22),inset 0 1px 0 rgba(255,255,255,.35); transform:rotate(-3deg); }
.auth-seal::after { content:""; position:absolute; inset:6px; border:1px solid rgba(255,255,255,.28); border-radius:11px 11px 17px 11px; }
.auth-seal svg { position:relative; z-index:1; width:29px; stroke-width:1.7; transform:rotate(3deg); }
.auth-seal em { position:absolute; z-index:2; right:4px; top:-8px; font:900 18px/1 var(--sans); transform:rotate(3deg); }
.auth-brand > span:last-child { display:grid; gap:3px; }
.auth-brand strong { font-size:23px; font-weight:900; letter-spacing:-.7px; }
.auth-brand small { color:var(--muted); font-size:10px; }

.auth-map { position:absolute; z-index:-3; left:-7%; bottom:-8%; width:min(1050px,73vw); height:88%; object-fit:cover; object-position:center; opacity:.78; mask-image:linear-gradient(90deg,#000 0 73%,transparent 100%); }
.route-stream { position:absolute; z-index:-2; left:3%; bottom:12%; width:61%; height:25%; border-top:8px solid rgba(22,119,255,.42); border-radius:50%; transform:rotate(-7deg); filter:drop-shadow(0 12px 18px rgba(22,119,255,.13)); }
.route-stream::before { content:""; position:absolute; left:0; right:0; top:-17px; height:5px; border-radius:100%; background:linear-gradient(90deg,transparent,var(--cobalt),#22bfd3,var(--jade),transparent); }
.route-stream i { position:absolute; top:-22px; width:18px; height:18px; border:5px solid #fff; border-radius:50%; background:var(--cobalt); box-shadow:0 0 0 2px rgba(22,119,255,.24),0 9px 25px rgba(22,119,255,.25); animation:route-pulse 2.8s ease-in-out infinite; }
.route-stream i:nth-child(1) { left:12%; }.route-stream i:nth-child(2) { left:39%; animation-delay:.4s; }.route-stream i:nth-child(3) { left:67%; animation-delay:.8s; }.route-stream i:nth-child(4) { right:5%; background:var(--jade); animation-delay:1.2s; }
@keyframes route-pulse { 50% { transform:scale(1.18); box-shadow:0 0 0 8px rgba(22,119,255,.08),0 10px 28px rgba(22,119,255,.25); } }

.auth-panel { position:relative; z-index:2; width:min(430px,100%); margin-left:auto; margin-right:clamp(0px,7vw,110px); padding:38px 38px 30px; border:1px solid rgba(221,228,237,.92); border-radius:24px; background:rgba(255,255,255,.97); box-shadow:0 34px 100px rgba(31,51,73,.14),0 2px 10px rgba(31,51,73,.05); animation:panel-in .56s cubic-bezier(.2,.82,.2,1); }
.register-panel { width:min(460px,100%); padding-block:30px 24px; }
@keyframes panel-in { from { opacity:0; transform:translateY(18px) scale(.985); } }
.auth-heading { margin-bottom:26px; }
.auth-heading h1 { margin:0; font-size:30px; line-height:1.1; letter-spacing:-1.2px; }
.auth-heading p { margin:9px 0 0; color:var(--muted); font-size:11px; }
#authForm { display:grid; gap:18px; }
.register-panel #authForm { gap:13px; }
.auth-field { display:grid; gap:8px; }
.auth-field label { color:#344054; font-size:11px; font-weight:700; }
.auth-input { position:relative; display:flex; align-items:center; }
.auth-input > svg { position:absolute; z-index:1; left:14px; width:18px; color:#7b8798; stroke-width:1.8; }
.auth-input input { width:100%; height:50px; padding:0 46px 0 43px; border:1px solid #dbe2eb; border-radius:12px; outline:none; background:#fff; font-size:13px; transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.auth-input input::placeholder { color:#b4bcc8; }
.auth-input input:focus { border-color:var(--cobalt); box-shadow:0 0 0 4px rgba(22,119,255,.09); transform:translateY(-1px); }
.auth-input:focus-within > svg { color:var(--cobalt); }
.auth-input button { position:absolute; right:8px; width:36px; height:36px; display:grid; place-items:center; border-radius:9px; color:#7b8798; background:transparent; cursor:pointer; }
.auth-input button:hover { color:var(--cobalt); background:var(--cobalt-soft); }
.auth-input button svg { width:17px; }
.auth-error { min-height:0; max-height:0; overflow:hidden; margin:-4px 0 0; padding:0 11px; border:1px solid transparent; border-radius:10px; color:var(--coral); background:#fff8fa; font-size:11px; line-height:1.55; opacity:0; transition:.22s ease; }
.auth-error.is-visible { min-height:39px; max-height:80px; padding:10px 11px; border-color:#ffd5dd; opacity:1; }
.auth-submit { height:51px; display:flex; align-items:center; justify-content:center; gap:10px; margin-top:2px; border-radius:12px; color:#fff; background:linear-gradient(110deg,#ff5327,var(--orange) 65%,#f12e00); box-shadow:0 14px 30px rgba(255,61,13,.23); font-size:13px; font-weight:800; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease,filter .2s ease; }
.auth-submit:hover { transform:translateY(-2px); box-shadow:0 18px 38px rgba(255,61,13,.3); }
.auth-submit:active { transform:translateY(0) scale(.99); }
.auth-submit:disabled { cursor:wait; opacity:.72; filter:saturate(.7); }
.auth-submit svg { width:17px; transition:transform .2s ease; }
.auth-submit:hover svg { transform:translateX(3px); }
.auth-submit.is-loading svg { animation:loading-arrow .8s ease-in-out infinite alternate; }
@keyframes loading-arrow { to { transform:translateX(5px); opacity:.45; } }
.auth-switch { display:block; margin-top:19px; color:var(--cobalt); font-size:11px; font-weight:700; text-align:center; text-decoration:none; }
.auth-switch:hover { color:var(--orange); }

@media (max-width:900px) {
  .auth-stage { align-items:flex-end; padding:110px 22px 34px; }
  .auth-map { left:-30%; width:130%; height:100%; opacity:.58; mask-image:linear-gradient(to bottom,#000 0 63%,transparent 100%); }
  .route-stream { left:-12%; bottom:45%; width:112%; }
  .auth-panel,.register-panel { margin:0 auto; }
}

@media (max-width:560px) {
  .auth-stage { min-height:100svh; padding:100px 14px 16px; }
  .auth-brand { left:18px; top:20px; gap:10px; }
  .auth-seal { width:45px; height:45px; border-radius:13px 13px 18px 13px; }
  .auth-seal svg { width:23px; }.auth-seal em { font-size:15px; }
  .auth-brand strong { font-size:18px; }.auth-brand small { display:none; }
  .auth-panel,.register-panel { padding:27px 22px 23px; border-radius:20px; }
  .auth-heading { margin-bottom:21px; }.auth-heading h1 { font-size:27px; }
  #authForm,.register-panel #authForm { gap:13px; }
  .auth-input input { height:47px; }
  .route-stream { bottom:49%; opacity:.7; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}