:root { --ink: #14213a; --muted: #55627a; --line: #cfd7e3; --bg: #f3f5f8; --card: #fff; --navy: #0f2747; --gold: #f2b300; --ok: #2e7d4f; --okbg: #e3f1e6; --err: #b3261e; --errbg: #fbe9e7; --focus: #20487a; }
@media (prefers-color-scheme: dark) { :root { --ink: #eef1f6; --muted: #a9b4c6; --line: #33415a; --bg: #0d1626; --card: #16233a; --ok: #6fc28f; --okbg: #183022; --err: #ff8a80; --errbg: #3a2120; --focus: #9cc3ff; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; padding: max(16px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); }
.wrap { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 900px) { .wrap { max-width: 780px; } body { padding-top: 32px; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } }
.brand { display: flex; align-items: center; gap: 12px; background: var(--navy); color: #fff; padding: 14px 16px; border-radius: 12px; border-bottom: 3px solid var(--gold); }
.brand img { flex: none; }
.made { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin: 0; color: var(--gold); }
h1 { font-size: 20px; margin: 0; letter-spacing: .02em; text-transform: uppercase; font-weight: 800; }
.sub { margin: 0; color: #d6deea; font-size: 14px; }
h2 { font-size: 19px; margin: 0; color: var(--ink); }
h3 { font-size: 15px; margin: 4px 0 0; }
.hint { color: var(--muted); font-size: 14px; margin: 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.steps { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.steps li { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.steps li.on { background: var(--gold); } .steps li.done { background: var(--navy); }
@media (prefers-color-scheme: dark) { .steps li.done { background: #4f7bbd; } }
.btn { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 10px; border: 2px solid var(--ink); background: transparent; color: var(--ink); font: inherit; font-weight: 700; letter-spacing: .02em; cursor: pointer; width: 100%; padding: 0 14px; }
.btn.primary { background: var(--gold); border-color: var(--gold); color: #14213a; }
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, canvas:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
input[type=text], input[type=tel], input[type=email], input[type=date], select { font: inherit; font-size: 16px; padding: 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); width: 100%; min-height: 48px; }
#codeIn, #otpCode { font-size: 22px; letter-spacing: .12em; text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.chk { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink); font-weight: 600; cursor: pointer; padding: 6px 0; }
.chk input { width: 24px; height: 24px; accent-color: var(--navy); flex: none; margin-top: 0; }
.sub2 { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
fieldset.radios { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.q { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.q.ok { border-color: var(--ok); background: var(--okbg); } .q.bad { border-color: var(--err); background: var(--errbg); }
.q legend, .q .qt { font-weight: 700; margin: 0 0 4px; padding: 0; }
.q fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; background: var(--card); }
.opt input { margin-top: 2px; width: 22px; height: 22px; accent-color: var(--navy); flex: none; }
.why { font-size: 14px; color: var(--err); font-weight: 600; margin: 0; }
.okmsg { font-size: 14px; color: var(--ok); font-weight: 700; margin: 0; }
.status { font-size: 15px; min-height: 1.4em; } .status.err { color: var(--err); font-weight: 600; }
.banner { border-radius: 12px; padding: 14px; font-weight: 600; }
.banner.err { border: 2px solid var(--err); background: var(--errbg); color: var(--err); }
.see { border: 2px solid var(--gold); border-radius: 12px; padding: 12px; font-weight: 700; background: rgba(242,179,0,.14); }
.recap { font-size: 15px; padding-left: 20px; margin: 0; } .recap li { margin-bottom: 10px; }
.rules { white-space: pre-wrap; font-size: 15px; }
.em { border-left: 4px solid var(--err); padding-left: 12px; }
.em a { color: inherit; font-weight: 700; }
ul, ol { margin: 0; padding-left: 20px; }
ul.plain li { margin-bottom: 4px; }
.privacy { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.privacy summary { cursor: pointer; font-weight: 700; }
.privacy p { margin: 8px 0 0; }
canvas { width: 100%; height: 200px; border: 2px dashed var(--line); border-radius: 10px; background: #fff; touch-action: none; display: block; cursor: crosshair; }
@media (min-width: 900px) { canvas { height: 240px; } }
.tick { width: 84px; height: 84px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 52px; display: flex; align-items: center; justify-content: center; margin: 8px auto; }
.big { font-size: 22px; font-weight: 800; text-align: center; margin: 0; }
.ref { font-size: 20px; margin: 0; } .ref b { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; }
.center { text-align: center; }
[hidden] { display: none !important; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }