:root { color-scheme:light; --bg:#f5f7fa; --surface:#fff; --text:#1b2432; --muted:#596677; --border:#dbe1e9; --accent:#1166dc; --accent-hover:#0756bf; --accent-text:#fff; --soft:#edf3fc; --error:#a42126; --error-bg:#fff0f0; --success:#17603d; --success-bg:#ebf7ef; --focus:#146de3; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#14181e; --surface:#1e242d; --text:#f2f5fa; --muted:#b0bccd; --border:#414b5b; --accent:#368aff; --accent-hover:#5c9fff; --accent-text:#071c38; --soft:#263247; --error:#ffb8b8; --error-bg:#3c2428; --success:#9bddb5; --success-bg:#20372b; --focus:#81b4ff; }
@media (prefers-color-scheme:dark) { :root[data-theme="system"] { color-scheme:dark; --bg:#14181e; --surface:#1e242d; --text:#f2f5fa; --muted:#b0bccd; --border:#414b5b; --accent:#368aff; --accent-hover:#5c9fff; --accent-text:#071c38; --soft:#263247; --error:#ffb8b8; --error-bg:#3c2428; --success:#9bddb5; --success-bg:#20372b; --focus:#81b4ff; } }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
::selection { background:var(--accent); color:var(--accent-text); }
.page { max-width:560px; margin:64px auto; padding:0 20px 32px; }
.header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:32px; }
h1 { margin:0; font-size:30px; font-weight:720; line-height:1.2; letter-spacing:-.025em; }
h2 { margin:0 0 10px; font-size:24px; font-weight:700; line-height:1.3; letter-spacing:-.02em; }
.theme-label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }
select { min-height:44px; max-width:155px; padding:8px 28px 8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font:inherit; cursor:pointer; }
.steps { display:flex; flex-direction:column; gap:16px; margin:0 0 26px; padding:0; list-style:none; }
.steps li { display:flex; align-items:center; gap:12px; color:var(--muted); font-weight:600; line-height:1.35; }
.step-number { display:grid; place-items:center; width:34px; height:34px; flex:none; border:1px solid var(--border); border-radius:50%; color:var(--muted); font-variant-numeric:tabular-nums; }
.steps li.current { color:var(--text); }
.steps li.current .step-number { border-color:var(--accent); background:var(--accent); color:var(--accent-text); }
.steps li.done .step-number { border-color:var(--success); color:var(--success); }
.step-detail { display:block; color:var(--muted); font-size:13px; font-weight:400; margin-top:2px; }
.stage { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px; }
.intro { margin:0 0 24px; color:var(--muted); }
.amounts { margin:0 0 24px; }
.amount-row { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:6px 16px; padding:12px 0; border-bottom:1px solid var(--border); }
.amount-row:first-child { padding-top:0; }
.amount-row:last-child { border-bottom:0; padding-bottom:0; }
dt { color:var(--muted); font-size:14px; }
dd { margin:0; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.amount-row.total dt { color:var(--text); font-size:16px; font-weight:600; }
.amount-row.total dd { font-size:26px; font-weight:720; letter-spacing:-.02em; }
.actions { display:flex; flex-direction:column; gap:10px; }
.button { display:flex; justify-content:center; align-items:center; gap:4px; width:100%; min-height:52px; border:1px solid transparent; border-radius:10px; padding:13px 18px; font:600 16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; text-align:center; text-decoration:none; cursor:pointer; transition:background-color .15s,color .15s; }
.primary { background:var(--accent); color:var(--accent-text); }
.primary:hover { background:var(--accent-hover); }
.secondary { background:var(--surface); color:var(--text); border-color:var(--border); }
.secondary:hover { background:var(--soft); }
.button:active { filter:brightness(.95); }
.button:disabled { cursor:wait; opacity:.65; }
a[aria-disabled="true"] { pointer-events:none; opacity:.65; }
:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
h2:focus { outline:none; }
.feedback,.invoice-state { margin:0 0 20px; font-size:14px; padding:12px 14px; border-radius:8px; background:var(--soft); }
.feedback.error { background:var(--error-bg); color:var(--error); }
.feedback.success { background:var(--success-bg); color:var(--success); }
.invoice-state { color:var(--text); font-weight:600; }
.timer { margin:18px 0 0; text-align:center; font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums; }
.help { margin:12px 0 0; color:var(--muted); font-size:14px; }
.next-stage { padding:24px 8px 0; }
.next-stage h2 { font-size:18px; color:var(--muted); margin-bottom:8px; }
.next-stage p { font-size:14px; color:var(--muted); margin:0; }
.footer { margin:28px 0 0; color:var(--muted); font-size:12px; text-align:center; }
@media (max-width:600px) { .page { margin:28px auto 0; } .header { margin-bottom:26px; } .stage { padding:24px; } }
@media (max-width:380px) { .page { padding-inline:16px; } .stage { padding:20px; } h1 { font-size:28px; } h2 { font-size:22px; } .amount-row.total dd { font-size:24px; } }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }