/* Login page of Passport Legend: dark, muted, flat (no blur, no glow, no animation). Fits one screen without scrolling (small phones included). */
:root { --bg: #0c0c0f; --panel: #17171d; --border: #2d2b36; --text: #ebe8e1; --muted: #9d9aa8; --gold: #c9a45c; --danger: #c45a64; --ok: #6fae8d; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.lg { background: #0c0c0f; color: var(--text); font: 500 15px/1.4 "Nunito", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; height: 100dvh; padding: 8px; overflow: hidden; }
.lg-card { width: min(380px, 100%); max-height: 100%; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: clamp(10px, 3vh, 22px) clamp(14px, 4vw, 24px); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); display: flex; flex-direction: column; gap: clamp(6px, 1.6vh, 12px); }
.lg-brand { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); padding-bottom: clamp(6px, 1.6vh, 12px); }
.lg-logo { font-size: 26px; line-height: 1; }
.lg-brand h1 { margin: 0; font-size: 19px; font-weight: 800; color: var(--text); display: flex; flex-direction: column; }
.lg-brand small { color: var(--gold); letter-spacing: .28em; font-size: 10px; text-transform: uppercase; font-weight: 700; }
.lg-notice { margin: 0; padding: 7px 10px; border: 1px solid var(--gold); border-radius: 7px; background: #1e1b14; color: #e3d3a8; font-size: 13px; }
.lg-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.lg-tabs button { background: #111115; color: var(--muted); border: 0; padding: 8px 6px; font: inherit; font-weight: 700; cursor: pointer; }
.lg-tabs button + button { border-left: 1px solid var(--border); }
.lg-tabs button[aria-selected="true"] { background: #22201a; color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
form { display: flex; flex-direction: column; gap: clamp(6px, 1.4vh, 10px); }
label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .02em; }
label[hidden], .lg-notice[hidden] { display: none; }
input { background: #0e0e12; color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; font: inherit; font-size: 16px; }
input:focus { outline: 1px solid var(--gold); border-color: var(--gold); }
.lg-msg { margin: 0; min-height: 1.3em; font-size: 13px; color: var(--danger); }
.lg-msg.ok { color: var(--ok); }
.lg-go { background: linear-gradient(180deg, #d4b068, #b8924a); color: #1a1408; border: 1px solid #b8924a; border-radius: 7px; padding: 9px 12px; font: inherit; font-weight: 800; cursor: pointer; }
.lg-go:disabled { opacity: .6; cursor: default; }
.lg-foot { margin: 0; font-size: 11px; color: #7d7a88; }
@media (max-height: 520px) { .lg-foot { display: none; } .lg-msg { min-height: 0; } }