@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url(/fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Geist';font-weight:500;font-display:swap;src:url(/fonts/geist-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Geist';font-weight:600;font-display:swap;src:url(/fonts/geist-sans-latin-600-normal.woff2) format('woff2')}
:root{
  --ivory:#F7F4ED;--paper:#FFFFFF;--sand:#ECE5D8;--hair:rgba(46,46,44,.10);--hair2:rgba(46,46,44,.18);
  --ink:#1B1B1A;--anth:#363636;--muted:#6E685F;--faint:#9A9387;
  --gold:#F2AC3C;--gold-deep:#A8711C;--ok:#4F7A6B;--warn:#A8503A;
  --serif:'Geist',system-ui,sans-serif;--sans:'Inter',system-ui,sans-serif;
  --shadow:0 18px 40px -26px rgba(46,38,24,.35);--r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ivory);color:var(--ink);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
.top{background:linear-gradient(160deg,#323230,#151514);color:#fff;padding:18px 16px}
.top .in{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:10px}
.top img{height:26px}
.top span{font:500 13px var(--sans);color:rgba(255,255,255,.65);margin-left:auto}
main{max-width:640px;margin:0 auto;padding:28px 16px 64px}
h1{font:600 26px/1.2 var(--serif);margin:0 0 8px;letter-spacing:-.01em}
.lead{color:var(--muted);margin:0 0 24px}
.card{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow);padding:20px}
label{display:block;font:500 14px var(--sans);margin:0 0 6px}
input[type=text]{width:100%;font:600 24px var(--serif);letter-spacing:8px;text-align:center;padding:14px;border:1px solid var(--hair2);border-radius:10px;background:#fff}
input[type=text]:focus{outline:2px solid var(--gold);border-color:transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin-top:14px;
  background:var(--ink);color:#fff;border:0;border-radius:10px;font:600 15px var(--sans);cursor:pointer}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--hair2)}
.msg{margin-top:12px;font-size:14px}.msg.err{color:var(--warn)}.msg.ok{color:var(--ok)}
.progress{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.bar{flex:1;height:8px;background:var(--sand);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:var(--gold);border-radius:99px;transform-origin:left;transform:scaleX(0);transition:transform .4s var(--ease,ease)}
.progress b{font:600 14px var(--sans);white-space:nowrap}
h2{font:600 15px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:26px 0 10px}
.doc{display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);padding:16px;margin-bottom:10px}
.doc .st{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--hair2);display:grid;place-items:center;font-size:15px;color:#fff;margin-top:2px}
.doc.done .st{background:var(--ok);border-color:var(--ok)}
.doc .tx{flex:1;min-width:0}
.doc .t{font:600 16px var(--serif)}
.doc .h{color:var(--muted);font-size:14px;margin-top:2px}
.doc .act{margin-top:10px}
.doc .act label{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;margin:0;border-radius:10px;
  border:1px solid var(--hair2);font:600 14px var(--sans);cursor:pointer;background:#fff}
.doc.done .act label{color:var(--muted)}
.doc input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.doc .state{font-size:13px;margin-top:6px;color:var(--muted)}
.foot{color:var(--muted);font-size:13px;margin-top:28px}
.done-box{border:1px solid rgba(79,122,107,.35);background:rgba(79,122,107,.08);padding:16px;border-radius:10px;margin-bottom:18px}
@media (max-width:420px){h1{font-size:22px}}

.q{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);padding:16px;margin-bottom:10px}
.q p{margin:0 0 12px;font:500 15px/1.45 var(--sans)}
.q .yn{display:flex;gap:8px}
.q .yn button{flex:1;min-height:44px;border-radius:10px;border:1px solid var(--hair2);background:#fff;font:600 15px var(--sans);color:var(--ink);cursor:pointer}
.q .yn button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.doc .act label.busy{opacity:.55;pointer-events:none}
.doc .state.err{color:var(--warn)}
.doc .state.ok{color:var(--ok)}
.link{background:none;border:0;padding:0;margin-top:14px;color:var(--muted);text-decoration:underline;font:500 14px var(--sans);cursor:pointer}
.hidden{display:none !important}

.doc .act:focus-within label{outline:2px solid var(--gold-deep);outline-offset:2px}
.btn:focus-visible,.q .yn button:focus-visible,.link:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
h1:focus{outline:none}
.info-box{border:1px solid rgba(168,113,28,.35);background:rgba(242,172,60,.10);padding:16px;border-radius:10px;margin-bottom:18px}

a.btn{text-decoration:none}