:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --bg:#f5f7fa; --card:#fff; --ink:#172033; --muted:#68758a; --line:#dfe4eb; --accent:#f58b1f; --accent-dark:#d96f0b; --green:#15a66b; }
* { box-sizing:border-box; }
html,body { min-width:320px; min-height:100%; margin:0; background:var(--bg); color:var(--ink); }
body { padding:34px 16px 48px; }
.shell { width:min(470px,100%); margin:0 auto; }
.brand { display:flex; align-items:center; justify-content:center; gap:10px; font-size:21px; font-weight:750; letter-spacing:0; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:8px; background:var(--ink); color:#fff; font-weight:800; }
.service-status { width:max-content; margin:14px auto 0; padding:6px 11px; border:1px solid #a8e9cd; border-radius:999px; color:#16855c; background:#f0fff8; font-size:12px; font-weight:650; }
.service-status span { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#18bd7a; }
.subtitle { margin:12px 0 28px; color:#8995a8; text-align:center; font-size:14px; }
.card { padding:28px; border:1px solid var(--line); border-radius:10px; background:var(--card); box-shadow:0 10px 28px rgba(35,50,73,.08); }
.card-kicker { color:#9aa6b6; font-size:11px; font-weight:750; letter-spacing:.1em; }
h1 { margin:10px 0 8px; font-size:24px; line-height:1.2; }
.hint { margin:0 0 22px; color:var(--muted); font-size:14px; }
label { display:block; margin-bottom:8px; color:#445168; font-size:13px; font-weight:650; }
input { width:100%; height:52px; padding:0 15px; border:1px solid #c8d0dc; border-radius:7px; outline:0; color:var(--ink); background:#fff; font-size:16px; letter-spacing:.1em; }
input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(245,139,31,.16); }
button { border:0; cursor:pointer; }
.primary { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:50px; margin-top:13px; border-radius:7px; background:var(--accent); color:#fff; font-weight:750; }
.primary:hover { background:var(--accent-dark); }
.primary:disabled { opacity:.55; cursor:wait; }
.status { min-height:22px; margin-top:11px; color:#c54b35; font-size:13px; }
.status.loading { color:#68758a; }
.microcopy { margin-top:13px; color:#9aa6b6; text-align:center; font-size:12px; }
.trust,.where { margin-top:18px; padding:20px 22px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.trust h2,.where h2 { margin:0 0 12px; font-size:15px; }
.trust h2 span { color:var(--green); }
.trust ul { margin:0; padding:0; list-style:none; color:#536177; font-size:13px; line-height:1.65; }
.trust li::before { content:"✓"; margin-right:8px; color:var(--green); font-weight:700; }
.trust p,.where p { margin:14px 0 0; color:#8995a8; font-size:12px; line-height:1.55; }
.where { background:#f0f4f8; border-color:#e2e8ef; }
.where h2 { font-size:14px; }
.where p { margin:0; color:#68758a; }
.result { margin-top:18px; }
.result[hidden] { display:none; }
.success { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.success > span { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#e8fbf2; color:var(--green); font-weight:800; }
.success h2 { margin:5px 0 0; font-size:21px; }
.credential { margin-top:15px; }
.credential-row { display:flex; align-items:center; min-height:46px; border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.credential code { flex:1; min-width:0; padding:0 12px; overflow-wrap:anywhere; font-family:ui-monospace,monospace; font-size:14px; }
.credential-row button { width:44px; align-self:stretch; border-left:1px solid var(--line); background:#f8fafc; color:#657287; font-size:16px; }
.credential-row button:hover { color:var(--accent-dark); background:#fff6ec; }
.start { margin-top:23px; }
footer { margin-top:22px; color:#9aa6b6; text-align:center; font-size:11px; }
@media (max-width:480px) { body { padding-top:24px; } .card { padding:22px 18px; } }