:root { --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --brand:#0d3b5a; --brand2:#1565c0; --ok:#15803d; --warn:#b45309; --bad:#b91c1c; --bg:#f4f7fb; }
* { box-sizing:border-box; }
html, body { height:100%; margin:0; background:var(--bg); color:var(--ink); font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-user-select:none; user-select:none; }
input, textarea { -webkit-user-select:text; user-select:text; }
.screen { display:none; min-height:100vh; padding:32px 24px; flex-direction:column; align-items:center; }
.screen.show { display:flex; }
.brand { display:flex; align-items:center; gap:14px; margin-bottom:18px; cursor:default; }
.brand img { height:56px; }
.brand h1 { margin:0; font-size:26px; color:var(--brand); }
.idle { justify-content:center; text-align:center; }
.idle .tap { width:min(92vw, 640px); background:#fff; border:1px solid var(--line); border-radius:24px; padding:48px 32px; box-shadow:0 10px 30px rgba(15,23,42,.08); cursor:pointer; }
.idle .tap h2 { font-size:38px; margin:0 0 10px; color:var(--brand); }
.idle .tap p { font-size:20px; color:var(--muted); margin:0; }
.card { width:min(94vw, 760px); background:#fff; border:1px solid var(--line); border-radius:20px; padding:28px; box-shadow:0 8px 24px rgba(15,23,42,.06); }
.card h2 { margin:0 0 6px; font-size:28px; color:var(--brand); }
.card p.lead { margin:0 0 18px; font-size:18px; color:var(--muted); }
.big-input { width:100%; font-size:28px; padding:18px 20px; border:2px solid #cbd5e1; border-radius:14px; outline:none; }
.big-input:focus { border-color:var(--brand2); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:14px; padding:18px 28px; font-size:20px; font-weight:700; cursor:pointer; background:var(--brand2); color:#fff; }
.btn.secondary { background:#eef2f7; color:var(--ink); }
.btn.block { width:100%; margin-top:16px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.row { display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.row .btn { flex:1; }
.err { display:none; margin:14px 0 0; padding:12px 14px; border-radius:10px; background:#fee2e2; color:#991b1b; font-weight:600; }
.err.show { display:block; }
.hello { font-size:22px; margin:0 0 4px; }
.sub { color:var(--muted); font-size:16px; margin:0 0 18px; }
.docs { display:flex; flex-direction:column; gap:12px; }
.doc { display:flex; align-items:center; gap:16px; padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.doc .ic { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26px; flex-shrink:0; background:#f1f5f9; }
.doc.complete .ic { background:#dcfce7; }
.doc.missing .ic { background:#fee2e2; }
.doc.optional .ic { background:#f1f5f9; }
.doc .t { flex:1; }
.doc .t b { display:block; font-size:19px; }
.doc .t span { color:var(--muted); font-size:15px; }
.doc .state { font-weight:700; font-size:15px; padding:6px 12px; border-radius:999px; white-space:nowrap; }
.doc.complete .state { background:#dcfce7; color:var(--ok); }
.doc.missing .state { background:#fee2e2; color:var(--bad); }
.doc.optional .state { background:#f1f5f9; color:var(--muted); }
.doc .btn { padding:12px 18px; font-size:16px; }
.banner { margin:0 0 16px; padding:16px 18px; border-radius:14px; font-weight:700; font-size:18px; }
.banner.ok { background:#eaf7ef; color:#14532d; border:1px solid #bfe6cd; }
.banner.todo { background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; }
.foot { margin-top:auto; padding-top:24px; color:var(--muted); font-size:13px; }
.done { justify-content:center; text-align:center; }
.done .card { text-align:center; }
.done h2 { font-size:34px; }
.spin { display:inline-block; width:22px; height:22px; border:3px solid #cbd5e1; border-top-color:var(--brand2); border-radius:50%; animation:sp .8s linear infinite; vertical-align:middle; }
@keyframes sp { to { transform:rotate(360deg); } }
.pair small { color:var(--muted); display:block; margin-top:8px; }
.tile-row { display:flex; gap:12px; margin-top:18px; }
.tile { flex:1; padding:16px; border:1px dashed #cbd5e1; border-radius:14px; color:var(--muted); text-align:center; font-weight:600; }
@media (max-width:520px) { .doc { flex-wrap:wrap; } .doc .btn { width:100%; } .idle .tap h2 { font-size:30px; } }