:root{
  --navy:#03244d;--orange:#dd550c;--bg:#03244d;--card:#ffffff;--fg:#14213a;--muted:#5b6478;--line:#dde1ea;--bad:#b3261e;--bad-soft:#fbe3e1;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;--body:"Source Sans 3",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root{--card:#121c30;--fg:#e7ebf3;--muted:#9aa5bb;--line:#26324a;--bad:#f08a82;--bad-soft:#3d1b19;color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:#fff;font:16px/1.5 var(--body);border-top:6px solid var(--orange)}
.wrap{max-width:400px;margin:0 auto;padding:calc(48px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:20px}
.brand{text-align:center}
.mark{width:56px;height:56px;margin:0 auto 10px;border-radius:12px;background:var(--orange);position:relative}
.mark::after{content:"";position:absolute;left:14px;right:14px;top:12px;bottom:18px;border-radius:6px 6px 3px 3px;background:#fff}
.brand h1{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;font-size:2rem;margin:0;line-height:1.1}
.brand p{margin:4px 0 0;color:#c9d3e6}
.card{background:var(--card);color:var(--fg);border-radius:14px;padding:22px 20px;display:flex;flex-direction:column;gap:8px}
label{font-weight:600;font-size:.95rem}
input{font:inherit;font-size:1.05rem;color:var(--fg);background:transparent;border:1px solid var(--line);border-radius:8px;padding:12px;width:100%;margin-bottom:6px}
input:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
button{margin-top:6px;font:700 1.15rem var(--body);background:var(--orange);color:#fff;border:0;border-radius:10px;padding:14px;cursor:pointer}
button:disabled{opacity:.6;cursor:default}
#msg:not(:empty){background:var(--bad-soft);color:var(--bad);border-radius:8px;padding:10px 12px;font-size:.95rem}
.foot{text-align:center;color:#c9d3e6;font-size:.9rem;margin:0}