:root { --ink: #202822; --muted: #59625c; --line: #cecfc6; --paper: #f6f4ef; --accent: #0f8a63; --bad: #b42318; }
        * { box-sizing: border-box; }
        body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; }
        a { color: #086749; text-underline-offset: 4px; }
        a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
        :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
        .wrap { max-width: 680px; margin: auto; padding: 0 20px 48px; }
        .site-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 2px solid var(--ink); padding: 16px 0; margin-bottom: 28px; }
        .brand { color: var(--ink); font-weight: 750; letter-spacing: -.03em; text-decoration: none; overflow-wrap: anywhere; }
        .brand small { display: block; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }
        h1 { font: 600 30px/1.15 Georgia, "Times New Roman", serif; margin: 0 0 16px; overflow-wrap: anywhere; }
        h2, .eyebrow { font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
        h2 { margin: 30px 0 10px; }
        p { margin: 0 0 16px; }
        .note { color: var(--muted); font-size: 14px; }
        .note, .document, .ledger { overflow-wrap: anywhere; }
        .section { border-top: 1px solid var(--line); padding: 20px 0; }
        .summary { padding: 22px 0 26px; border-bottom: 2px solid var(--ink); }
        .hero-amount { display: block; font-size: clamp(30px, 8vw, 52px); line-height: 1.2; letter-spacing: -.045em; font-weight: 650; margin: 8px 0 20px; overflow-wrap: anywhere; }
        .summary .btn { width: auto; min-width: 160px; }
        .row { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 2fr); gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
        .row > :first-child { color: var(--muted); }
        .row > :last-child { text-align: right; overflow-wrap: anywhere; }
        .status { font-size: 14px; font-weight: 600; }
        .ok { color: #086749; } .bad { color: var(--bad); } .muted, .warn { color: var(--muted); }
        .inv { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--line); padding: 16px 0; color: inherit; text-decoration: none; }
        a.inv:hover { color: #086749; }
        .inv > :first-child { min-width: 0; overflow-wrap: anywhere; }
        .inv strong, .inv .note { display: block; }
        .inv strong { font-size: 14px; font-weight: 600; }
        .amount { font-weight: 600; white-space: nowrap; }
        .tabs { display: flex; flex-wrap: wrap; gap: 0 20px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
        .tabs a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--muted); text-decoration: none; }
        .tabs a.on { color: var(--ink); border-bottom: 2px solid var(--ink); font-weight: 650; }
        .btn { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; width: 100%; padding: 11px 16px; font: inherit; font-weight: 600; border: 1px solid var(--accent); border-radius: 2px; background: #0c7957; color: #fff; text-decoration: none; cursor: pointer; transition: background-color .15s; }
        .btn:hover { background: #096d4d; }
        .btn-line { background: transparent; border-color: var(--line); color: var(--ink); }
        .btn-line:hover { background: #e9e7df; }
        .link-btn, .back { display: inline-flex; align-items: center; min-height: 44px; }
        .link-btn { font: inherit; font-size: 14px; background: none; border: 0; padding: 0 4px; color: var(--muted); text-decoration: underline; cursor: pointer; }
        .auth { max-width: 400px; padding-top: 22px; }
        label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
        input, select, textarea { width: 100%; min-height: 48px; padding: 12px; border: 1px solid #7c857c; border-radius: 2px; background: #fff; color: var(--ink); font: inherit; }
        textarea { resize: vertical; }
        .auth-help { margin-top: 20px; }
        .otp { font: 32px/1.3 ui-monospace, monospace; letter-spacing: .25em; }
        .stack > * + * { margin-top: 20px; }
        .err { color: var(--bad); font-size: 14px; margin: 8px 0 0; }
        .notice { border-left: 3px solid var(--ink); padding: 10px 14px; font-size: 14px; margin-bottom: 20px; }
        .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
        .actions .btn { flex: 1 1 220px; }
        .document { background: #fff; padding: 24px 20px; border-top: 2px solid var(--ink); }
        .document-head { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 16px; }
        .company { font-weight: 700; margin-bottom: 24px; }
        .ledger { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 24px; }
        .ledger th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; }
        .ledger th, .ledger td { border-bottom: 1px solid var(--line); padding: 12px 0; vertical-align: top; }
        .ledger th:last-child, .ledger td:last-child { text-align: right; padding-left: 12px; }
        .ledger tfoot th, .ledger tfoot td { color: var(--ink); border-bottom: 2px solid var(--ink); }
        .ledger .hero-amount { font-size: clamp(24px, 6vw, 38px); margin: 0; }
        pre.pay { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 0; }
        @media (min-width: 600px) { .wrap { padding-inline: 28px; } .document { padding: 32px; } }
        @media print {
            @page { margin: 18mm; }
            body { background: #fff; color: #000; font-size: 11pt; }
            .wrap { max-width: none; padding: 0; }
            .site-header, .no-print, .actions, .btn { display: none !important; }
            .document { border: 0; padding: 0; }
            .document-head, .ledger tr { break-inside: avoid; }
            a { color: #000; text-decoration: none; }
        }
            .amount, .hero-amount, .num { white-space: nowrap; }
            .steps { list-style: none; margin: 14px 0 0; padding: 0; }
        .step { position: relative; padding: 0 0 16px 30px; }
        .step::before { content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); background: var(--paper); box-sizing: border-box; }
        .step::after { content: ""; position: absolute; left: 6px; top: 19px; bottom: 0; width: 2px; background: var(--line); }
        .step:last-child::after { display: none; }
        .step strong { display: block; font-weight: 600; }
        .step.done::before { background: var(--accent); border-color: var(--accent); }
        .step.done::after { background: var(--accent); }
        .step.current::before { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15,138,99,.2); }
        .step.todo strong { color: var(--muted); font-weight: 500; }

:root { --ink:#0b1640; --muted:#464e70; --line:#d8d6d0; --paper:#f3efe6; --accent:#3ee0a8; --sheet:#fffdf8; }
body { font-family:'IBM Plex Sans',sans-serif; }
.wrap { max-width:460px; padding:0 18px calc(100px + env(safe-area-inset-bottom)); }
.site-header { margin-bottom:22px; border-bottom:1px solid var(--line); gap:12px; }
.site-header select { max-width:180px; font-size:12px; }
h1 { font:600 28px/1.15 'IBM Plex Sans',sans-serif; }
h2 { margin-top:24px; }
.eyebrow,.amount,.hero-amount,.num { font-family:'IBM Plex Mono',monospace; }
.hero-amount { font-size:clamp(28px,8vw,38px); white-space:normal; }
.section,.summary,.document,.service-card { background:var(--sheet); border:1px solid var(--line); border-radius:16px; padding:18px; margin-bottom:16px; }
.service-card { background:#071236; color:#fffdf8; border:0; }
.service-card .note { color:#bac5df; }
.service-card .status { color:var(--accent); }
.service-card .speed { font:500 48px/1.2 'IBM Plex Mono',monospace; margin:12px 0; }
.service-card .speed small { font-size:16px; }
.btn { border-radius:12px; background:var(--accent); color:#04382a; }
.btn:hover { background:#70e9be; }
.btn-line { background:transparent; color:var(--ink); border-color:var(--line); }
input,select,textarea { border-radius:10px; min-width:0; }
.quick { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px 4px; margin:20px 0; }
.quick a { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; font-size:11.5px; line-height:1.25; text-decoration:none; color:var(--ink); min-height:72px; }
.quick svg { background:var(--sheet); padding:12px; width:48px; height:48px; border-radius:14px; }
svg.icon { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.quick svg.icon { width:48px; height:48px; }
.bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:460px; display:grid; grid-template-columns:repeat(4,1fr); padding:10px 8px calc(8px + env(safe-area-inset-bottom)); background:#071236; z-index:20; }
.bottom-nav a { min-height:48px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; font-size:12px; text-decoration:none; color:#c4cbe0; }
.bottom-nav a[aria-current] { color:var(--accent); }
.inv { flex-wrap:wrap; gap:6px; }
.inv .amount { font-size:14px; }
.summary .btn { width:100%; }
.steps .note { display:block; }
details summary { cursor:pointer; min-height:48px; display:flex; align-items:center; font-weight:600; }
.tabs { gap:16px; }
.tabs a.on { border-color:#0b7a57; }
@media print { .bottom-nav { display:none; } .wrap { max-width:none; padding:0; } }