@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root { color-scheme: dark; --ink:#07183e; --blue:#123978; --aqua:#73e3e4; --lilac:#a89aff; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; font-family: Manrope, Arial, sans-serif; color: #f7fbff; background:#061536; }
body::before { content:""; position:fixed; inset:0; background:radial-gradient(circle at 74% 17%,rgba(164,217,255,.82) 0 1px,transparent 2px),radial-gradient(circle at 18% 28%,rgba(255,255,255,.65) 0 1px,transparent 2px),radial-gradient(circle at 58% 66%,rgba(119,187,255,.26),transparent 30%),linear-gradient(145deg,#030d29,#0a2860 62%,#173b77); background-size:170px 170px,230px 230px,auto,auto; }
.login-page { position:relative; z-index:1; min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(100%,460px); padding:34px 38px 30px; border:1px solid rgba(139,207,255,.28); border-radius:30px; background:linear-gradient(155deg,rgba(14,43,95,.96),rgba(5,22,61,.97)); box-shadow:0 32px 90px rgba(0,8,35,.52),inset 0 1px rgba(255,255,255,.08); }
.brand { display:flex; align-items:center; gap:11px; color:#fff; font-size:22px; font-weight:700; }
.brand > span:last-child > span { color:var(--aqua); }
.brand__mark { position:relative; width:34px; height:34px; border:2px solid var(--aqua); border-radius:10px 10px 13px 13px; display:grid; place-items:center; box-shadow:0 0 22px rgba(115,227,228,.22); }
.brand__mark::before,.brand__mark i { content:""; display:block; border-radius:50%; border:2px solid #fff; }
.brand__mark::before { width:15px; height:15px; }
.brand__mark i { position:absolute; width:5px; height:5px; background:var(--aqua); border:0; }
.portal { position:relative; width:106px; height:68px; margin:30px auto 25px; }
.portal i,.portal b,.portal span { position:absolute; left:50%; transform:translateX(-50%); border:2px solid; border-radius:50%; }
.portal i { width:72px; height:72px; top:0; border-color:var(--aqua); box-shadow:0 0 32px rgba(115,227,228,.3); }
.portal b { width:45px; height:45px; top:13px; border-color:#fff; }
.portal span { width:15px; height:15px; top:28px; border:0; background:var(--lilac); box-shadow:0 0 20px var(--lilac); }
.kicker { margin:0 0 8px; color:var(--aqua); font-size:12px; line-height:1.4; font-weight:800; letter-spacing:.13em; text-align:center; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(32px,6vw,44px); line-height:1.08; letter-spacing:-.04em; text-align:center; }
.intro { margin:12px 0 27px; color:#bdcce8; font-size:15px; line-height:1.55; text-align:center; }
form { display:grid; gap:17px; }
label { display:grid; gap:8px; }
label > span:first-child { color:#dce7fa; font-size:13px; font-weight:700; }
input { width:100%; height:52px; padding:0 15px; border:1px solid rgba(158,194,241,.28); border-radius:14px; outline:0; background:rgba(3,18,53,.62); color:#fff; font:600 16px Manrope,Arial,sans-serif; transition:.2s; }
input:focus { border-color:var(--aqua); box-shadow:0 0 0 3px rgba(115,227,228,.12); }
.password-field { position:relative; }
.password-field input { padding-right:92px; }
.password-field button { position:absolute; right:8px; top:8px; height:36px; padding:0 10px; border:0; background:transparent; color:var(--aqua); font:700 12px Manrope,Arial,sans-serif; cursor:pointer; }
.submit { height:54px; margin-top:2px; padding:0 18px; border:0; border-radius:15px; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(95deg,var(--aqua),#99f0df); color:#092352; font:800 15px Manrope,Arial,sans-serif; cursor:pointer; box-shadow:0 12px 30px rgba(74,212,220,.2); }
.submit i { font-style:normal; font-size:22px; }
.submit:disabled { opacity:.65; cursor:wait; }
.error { min-height:20px; margin:-4px 0 -8px; color:#ffadb6; font-size:13px; font-weight:700; }
.support { margin:23px 0 0; color:#8398bc; font-size:12px; text-align:center; }
@media (max-width:540px) { .login-page { padding:14px; } .login-card { padding:27px 22px 24px; border-radius:24px; } .portal { margin-top:24px; } }
.brand.brand--official { display:block; width:245px; max-width:100%; margin:0 auto 30px; padding:9px 13px; border-radius:15px; background:#fff; box-shadow:0 12px 35px rgba(0,0,0,.16); }
.brand.brand--official img { display:block; width:100%; height:auto; }