:root { --brand:#0e7c86; --brand-d:#0a5f67; --ink:#14232b; --muted:#5b6b73; --line:#dde5e8; --bg:#f4f8f9; --card:#fff; --bad:#b42318; --ok:#067647; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:var(--bg); }
.loading { text-align:center; margin-top:20vh; color:var(--muted); }
header.bar { display:flex; align-items:center; gap:1rem; padding:.75rem 1.25rem; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap; }
header.bar .brand { display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:1.1rem; text-decoration:none; color:var(--ink); }
header.bar .brand img { width:32px; height:32px; }
nav { display:flex; gap:.25rem; flex:1; flex-wrap:wrap; }
nav a { padding:.4rem .8rem; border-radius:8px; color:var(--muted); text-decoration:none; font-weight:600; }
nav a.on, nav a:hover { background:#e6f2f3; color:var(--brand-d); }
.who { color:var(--muted); font-size:.9rem; display:flex; gap:.6rem; align-items:center; }
main { max-width:60rem; margin:0 auto; padding:1.25rem; }
h1 { font-size:1.5rem; margin:.5rem 0 1rem; }
h2 { font-size:1.15rem; margin:0 0 .75rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.25rem; margin-bottom:1rem; }
.hero { text-align:center; max-width:30rem; margin:12vh auto 0; padding:0 1rem; }
.hero img { width:84px; height:84px; }
.hero h1 { font-size:2rem; }
.hero p { color:var(--muted); }
button, .btn { font:inherit; font-weight:600; border:0; border-radius:10px; padding:.55rem 1rem; background:var(--brand); color:#fff; cursor:pointer; text-decoration:none; display:inline-block; }
button:hover, .btn:hover { background:var(--brand-d); }
button.ghost, .btn.ghost { background:#e6f2f3; color:var(--brand-d); }
button.danger { background:#fdecea; color:var(--bad); }
button:disabled { opacity:.55; cursor:default; }
input[type=text], input[type=email], select { font:inherit; padding:.5rem .65rem; border:1px solid var(--line); border-radius:10px; background:#fff; min-width:0; }
label { display:block; font-weight:600; margin:.5rem 0 .2rem; }
.row { display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end; }
.row > * { flex:0 1 auto; }
.grow { flex:1 1 14rem !important; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:.5rem .4rem; border-bottom:1px solid var(--line); vertical-align:middle; }
th { font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.pill { display:inline-block; padding:.1rem .55rem; border-radius:999px; font-size:.8rem; font-weight:600; background:#eef2f3; color:var(--muted); }
.pill.ok { background:#e7f6ee; color:var(--ok); }
.pill.bad { background:#fdecea; color:var(--bad); }
.err { color:var(--bad); font-weight:600; margin:.5rem 0; }
.note { color:var(--muted); font-size:.92rem; }
.tabs { display:flex; gap:.4rem; margin:.5rem 0; flex-wrap:wrap; }
.qrbox { display:flex; gap:1.25rem; flex-wrap:wrap; align-items:flex-start; }
.qrbox img { width:230px; height:230px; border:1px solid var(--line); border-radius:12px; padding:6px; background:#fff; }
.steps { margin:.25rem 0 .5rem 1.1rem; padding:0; }
pre.code { background:#0f1e24; color:#d5f3ee; padding:.75rem 1rem; border-radius:10px; overflow:auto; font-size:.85rem; white-space:pre-wrap; word-break:break-all; }
.exits label { display:flex; gap:.6rem; align-items:center; font-weight:500; margin:.35rem 0; }
@media (max-width:560px) { main { padding:.75rem; } th:nth-child(n+4), td:nth-child(n+4) { font-size:.85rem; } }