:root{
  --brand:#075fc9;--brand2:#084a9c;--ink:#0b1726;--muted:#65768a;
  --card:#fff;--bg:#edf2f6;--line:#d7e0e9;--soft:#f6f8fa;
  --ok-bg:#e8f7f1;--ok-line:#b9e8d5;--ok-text:#0a664a;
}
html[data-theme="dark"]{
  --brand:#2386ef;--brand2:#1766be;--ink:#f1f6fa;--muted:#91a3b7;
  --card:#0d1b2a;--bg:#07111d;--line:#22364a;--soft:#102131;
  --ok-bg:#082d22;--ok-line:#0c4d39;--ok-text:#9ce4c4;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.topbar{width:100%;background:linear-gradient(180deg,#0a2c50,#071e37);color:#fff;box-shadow:0 8px 22px rgba(5,20,36,.22)}
.topbar__inner{max-width:760px;min-height:66px;margin:0 auto;padding:9px 15px;display:flex;align-items:center;gap:11px}
.logo{width:42px;height:42px;flex:0 0 42px;overflow:hidden;border:1px solid rgba(255,255,255,.28);border-radius:13px;background:#fff;box-shadow:0 5px 14px rgba(0,0,0,.18)}
.logo img{width:100%;height:100%;object-fit:cover;display:block}
.title{font-size:15px;font-weight:850;letter-spacing:-.01em}
.wrap{width:100%;max-width:560px;margin:0 auto;padding:22px 15px calc(30px + env(safe-area-inset-bottom,0px))}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 12px 28px rgba(7,30,55,.10)}
.lightbar{height:3px;margin:0 0 18px;border-radius:999px;background:linear-gradient(90deg,#d53e49 0 49%,#1b75ea 51% 100%)}
h1{margin:0 0 9px;font-size:clamp(24px,6vw,30px);line-height:1.1;letter-spacing:-.035em}
p{margin:0 0 16px;color:var(--muted);line-height:1.5}
label{display:block;margin:15px 0 7px;font-weight:800}
input{display:block;width:100%;max-width:100%;min-height:49px;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-size:16px}
input:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px rgba(7,95,201,.18)}
button{width:100%;min-height:49px;margin-top:16px;padding:12px 16px;border:0;border-radius:13px;background:linear-gradient(180deg,var(--brand),var(--brand2));color:#fff;font-size:15px;font-weight:850;cursor:pointer}
a{color:var(--brand);font-weight:800;text-decoration:none}
a:hover{text-decoration:underline}
.message{margin:0 0 16px;padding:12px 13px;border-radius:12px;font-weight:750;line-height:1.45}
.message--ok{border:1px solid var(--ok-line);background:var(--ok-bg);color:var(--ok-text)}
.links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:14px}
.note{margin:14px 0 0;padding:11px 12px;border-radius:12px;background:var(--soft);color:var(--muted);font-size:13px;line-height:1.45}
@media (max-width:420px){.wrap{padding-right:12px;padding-left:12px}.card{padding:16px}.links{display:grid;gap:10px}}