/* Kirish ekranlari: tungi osmon ustida O'zbekiston → Germaniya yo'nalishi. Karta mavzu (yorug'/qorong'i) ranglarida qoladi. */
body.authmode{background:#081839}
.authstage{--sky:#081839;--sky2:#17357A;--skyink:#F4F7FA;--skymuted:#B9C6D4;--gold:#86A8FF}
.asky{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(1.2px 1.2px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 78% 12%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 64% 82%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 28% 74%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 90% 58%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 44% 8%,#fff 50%,transparent 51%),radial-gradient(120% 90% at 50% 110%,var(--sky2),var(--sky) 70%)}
.authstage>:not(.asky),.authmode .foot{position:relative;z-index:1}
.authmode .foot{color:#B9C6D4;border-top-color:rgba(255,255,255,.18)}
.authmode .foot a{color:#A9C2FF}
[tabindex="-1"]:focus{outline:none}

/* boshlang'ich sahifa */
.ahero{min-height:calc(100dvh - 170px);display:grid;justify-items:center;align-content:center;gap:12px;text-align:center;color:var(--skyink);padding:12px 0 20px;animation:ahero-in .6s ease-out}
@keyframes ahero-in{from{opacity:0;transform:translateY(10px)}}
.abrand{display:inline-flex;align-items:center;gap:10px;margin:0 0 10px;font-family:var(--display);font-weight:600;font-size:18px;color:var(--skymuted)}
.abrand svg{width:36px;height:36px}
.authstage .ahero .logo{color:#fff}
.aflag .mflag{display:block;width:84px;height:56px;border-radius:6px;box-shadow:0 0 0 2px rgba(255,255,255,.35),0 14px 40px -10px rgba(0,0,0,.7)}
.atitle{font-size:clamp(27px,6.2vw,58px);letter-spacing:.04em;max-width:min(100%,18ch);margin-top:8px}
.alead{margin:0;font-size:clamp(17px,2.6vw,22px);font-weight:600}
.alead.de{font-weight:400;font-style:italic;color:var(--skymuted);font-size:clamp(15px,2.2vw,19px)}
.aends{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:8px;width:min(100%,620px);margin:6px 0 2px;font-size:13px;font-weight:600;color:var(--skymuted)}
.aends span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding-bottom:6px}
.aroute{display:block;width:100%;height:auto;overflow:visible}
.aroute .rt{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:3 10;animation:route-march 1.6s linear infinite}
@keyframes route-march{to{stroke-dashoffset:-13}}
.aroute .rp{fill:#0099B5;stroke:#fff;stroke-width:2.5}
.aroute .rp.de{fill:var(--gold)}
.aroute .rplane path{fill:#fff}
.acta{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(100%,460px);margin-top:10px}
.abtn{display:grid;gap:2px;justify-items:center;min-height:60px;padding:12px 16px;border-radius:12px;border:2px solid #86A8FF;background:#2254C7;color:#fff;font-weight:700;font-size:17px;letter-spacing:.08em;transition:transform .15s ease,background-color .15s ease}
.abtn small{font-weight:600;font-size:12.5px;letter-spacing:0;opacity:.85}
.abtn.ghost{background:rgba(11,22,38,.55);color:var(--skyink);border-color:rgba(255,255,255,.6)}
.abtn:hover{transform:translateY(-2px)}
.abtn:not(.ghost):hover{background:#2C63E0}
.abtn.ghost:hover{background:rgba(255,255,255,.14)}
.authstage .abtn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.asub{margin:8px 0 0;font-size:13px;color:var(--skymuted)}

/* karta: Login / Registrieren */
.authstage .authwrap{padding-top:8px}
.authcard{box-shadow:0 24px 70px -30px rgba(0,0,0,.8)}
.authcard .back{justify-self:start;margin:0;min-height:32px}
.atabs{grid-template-columns:repeat(4,1fr)}
.atabs button{min-height:44px;padding:9px 4px;font-size:13.5px}
.atabs .ic{width:16px;height:16px}
.fld{display:grid;gap:5px}
.aform input[aria-invalid="true"]{border-color:var(--bad);background:var(--bad-bg)}
.ferr,.aerr{margin:0;font-size:13.5px;font-weight:600;color:var(--bad)}
.ferr:empty,.aerr:empty,.amsg:empty{display:none}
.aerr{background:var(--bad-bg);border-radius:8px;padding:10px 12px;font-size:14.5px}
.amsg{margin:0;background:var(--good-bg);color:var(--good);border-radius:8px;padding:10px 12px;font-size:14.5px}
.aform .abig{min-height:52px;font-size:15.5px;letter-spacing:.05em;font-weight:700;text-align:center}
.btn[aria-disabled="true"]{opacity:.7;cursor:progress}
.spin{width:16px;height:16px;flex:none;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.aform .linkbtn,.aswitch .linkbtn{min-height:32px}
.aswitch{margin:0;font-size:14.5px;color:var(--muted)}
@media (max-width:480px){.aends{grid-template-columns:1fr 1fr}.aends .aroute{grid-column:1/-1;grid-row:1}.aends span:last-child{justify-self:end}.acta{grid-template-columns:1fr}.abtn{min-height:56px}.aends{font-size:12px}.authcard{padding:18px}.atabs button{font-size:12.5px;gap:4px}}
@media (max-height:560px) and (orientation:landscape){.ahero{min-height:0}.aflag .mflag{width:60px;height:40px}}

/* Gender preview does not rerender the registration form. */
.registration-avatar:not([hidden]){display:flex;align-items:center;gap:12px;margin:12px 0;color:var(--muted);font-size:14px}
.registration-avatar img{width:80px;height:80px;flex:none;object-fit:cover;border-radius:50%;border:2px solid var(--line);background:var(--surface)}