:root{
  --bg: #0F1A2B;
  --surface: #16233A;
  --surface-2: #1C2C47;
  --paper: #FAF6EE;
  --paper-line: #E4DCC8;
  --ink: #EDEAE1;
  --ink-dim: #A9B2C3;
  --gold: #E3B341;
  --green: #3FA66B;
  --green-deep: #2C7A4E;
  --red: #C1443B;
  --amber: #D98C3A;
  --line: rgba(237,234,225,0.12);
  --radius: 14px;
  --shadow: 0 12px 30px -12px rgba(0,0,0,0.55);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'IBM Plex Sans', -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* Buttons don't inherit font-family from the page by default (a browser
   UA-stylesheet quirk) — without this, any button class that forgot to set
   its own font-family (e.g. .link-inline, .link-btn) silently renders in
   the OS's default UI font instead of this site's IBM Plex Sans, visibly
   mismatched against surrounding text set in the same sentence. */
button{ font-family:inherit; }
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(227,179,65,0.08), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(63,166,107,0.06), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{ color:inherit; }
.shell{ max-width:880px; margin:0 auto; padding:28px 20px 80px; }

header.top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
.brand{ display:flex; align-items:baseline; gap:10px; text-decoration:none; }
.brand .mark{ font-family:var(--serif); font-weight:600; font-style:italic; font-size:1.5rem; letter-spacing:-0.01em; }
.brand .mark span{ color:var(--gold); font-style:normal; }
.brand .tag{ font-size:0.78rem; color:var(--ink-dim); letter-spacing:0.02em; }
.demo-flag{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-dim); border:1px solid var(--line); padding:6px 12px; border-radius:100px; }

nav.tabs{ display:flex; gap:6px; background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:5px; margin-bottom:28px; overflow-x:auto; }
nav.tabs button{ flex:1; white-space:nowrap; appearance:none; border:none; background:transparent; color:var(--ink-dim); font-family:var(--sans); font-weight:500; font-size:0.86rem; padding:10px 16px; border-radius:100px; cursor:pointer; transition:background .2s ease, color .2s ease; }
nav.tabs button:hover{ color:var(--ink); }
nav.tabs button.active{ background:var(--gold); color:#22190a; }
nav.tabs button:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.view{ display:none; animation:fade .35s ease; }
.view.active{ display:block; }
@keyframes fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

h1.page-title{ font-family:var(--serif); font-weight:500; font-size:1.7rem; margin:0 0 4px; }
p.page-sub{ color:var(--ink-dim); margin:0 0 24px; font-size:0.94rem; max-width:46ch; }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:0.8rem; color:var(--ink-dim); margin-bottom:6px; }
.field input, .field select{ width:100%; background:var(--surface-2); border:1px solid var(--line); color:var(--ink); font-family:var(--sans); font-size:0.95rem; padding:11px 13px; border-radius:9px; }
.field .amount-wrap{ position:relative; }
.field .amount-wrap .naira{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--gold); font-family:var(--mono); font-weight:600; }
.field .amount-wrap input{ padding-left:30px; font-family:var(--mono); }

.password-wrap{ position:relative; }
.password-wrap input{ padding-right:60px; }
.password-toggle{ position:absolute; right:6px; top:50%; transform:translateY(-50%); background:transparent; border:none; color:var(--ink-dim); font-size:.76rem; font-weight:600; letter-spacing:.02em; cursor:pointer; padding:8px 9px; border-radius:6px; }
.password-toggle:hover{ color:var(--ink); background:var(--surface-2); }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .row2{ grid-template-columns:1fr; } }

.btn{ appearance:none; border:none; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:0.9rem; padding:12px 20px; border-radius:9px; transition:transform .12s ease, opacity .12s ease; text-decoration:none; display:inline-block; }
.btn:active{ transform:scale(0.98); }
.btn-primary{ background:var(--gold); color:#22190a; }
.btn-primary:hover{ opacity:0.92; }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--ink-dim); }
.btn-small{ padding:8px 14px; font-size:0.8rem; }
.btn-green{ background:var(--green); color:#0d2016; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:0.5; cursor:not-allowed; }

#toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(12px); background:var(--surface-2); border:1px solid var(--line); color:var(--ink); padding:12px 18px; border-radius:10px; font-size:0.86rem; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; max-width:90vw; text-align:center; z-index:50; }
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.wa-preview{ margin-top:18px; background:#0b1c17; border:1px solid rgba(63,166,107,0.35); border-radius:12px; padding:16px; }
.wa-preview .wa-label{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--green); margin-bottom:10px; }
.wa-bubble{ background:#183327; border-radius:10px; padding:12px 14px; font-size:0.88rem; line-height:1.5; color:#DCEFE3; }
.wa-bubble a{ color:var(--gold); text-decoration:underline; }

.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px; }
@media (max-width:560px){ .stats{ grid-template-columns:1fr; } }
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px; }
.stat .num{ font-family:var(--mono); font-size:1.35rem; font-weight:600; }
.stat .lbl{ font-size:0.76rem; color:var(--ink-dim); margin-top:2px; }
button.stat{ cursor:pointer; text-align:left; width:100%; display:block; appearance:none; transition:border-color .12s ease; }
button.stat:hover{ border-color:var(--ink-dim); }
.stat.outstanding .num{ color:var(--amber); }
.stat.collected .num{ color:var(--green); }

.receipt{ position:relative; background:var(--paper); color:#241F16; border-radius:12px; padding:18px 18px 16px; margin-bottom:16px; box-shadow:var(--shadow); overflow:hidden; border:1px solid var(--paper-line); }
.receipt::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 20px); opacity:0.5; }
.receipt-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px; }
.receipt-client{ font-family:var(--serif); font-weight:600; font-size:1.05rem; }
.receipt-desc{ font-size:0.85rem; color:#5a5342; margin-top:2px; }
.receipt-amount{ font-family:var(--mono); font-weight:600; font-size:1.15rem; white-space:nowrap; }
.badge{ display:inline-block; font-size:0.68rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; padding:4px 9px; border-radius:100px; margin-top:6px; }
.badge.unpaid{ background:rgba(217,140,58,0.18); color:#8a5a1c; }
.badge.overdue{ background:rgba(193,68,59,0.16); color:#9c2f27; }
.badge.paid{ background:rgba(63,166,107,0.18); color:#2C7A4E; }
.badge.cancelled{ background:rgba(120,120,128,0.18); color:#5a5a62; }

.timeline{ display:flex; align-items:center; gap:6px; margin:14px 0 6px; }
.tl-step{ display:flex; align-items:center; gap:6px; flex:1; }
.tl-dot{ width:9px; height:9px; border-radius:50%; background:#d8d0ba; flex-shrink:0; }
.tl-dot.done{ background:var(--green-deep); }
.tl-line{ flex:1; height:2px; background:#e3dbc4; }
.tl-line.done{ background:var(--green-deep); }
.tl-labels{ display:flex; justify-content:space-between; font-size:0.62rem; color:#7a725c; margin-bottom:14px; }

.receipt-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.stamp{ position:absolute; top:14px; right:16px; border:3px solid var(--green-deep); color:var(--green-deep); font-family:var(--serif); font-weight:600; font-size:0.95rem; padding:4px 10px; border-radius:6px; transform:rotate(-9deg) scale(0); letter-spacing:0.03em; opacity:0; }
.stamp.show{ animation:stampIn .5s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes stampIn{ 0%{ transform:rotate(-9deg) scale(1.6); opacity:0; } 60%{ opacity:1; } 100%{ transform:rotate(-9deg) scale(1); opacity:1; } }
@media (prefers-reduced-motion:reduce){ .stamp.show{ animation:none; transform:rotate(-9deg) scale(1); opacity:1; } .view{ animation:none; } }

.verify-box{ display:flex; gap:10px; margin-bottom:18px; }
.verify-box input{ flex:1; }
@media (max-width:520px){ .verify-box{ flex-direction:column; } }

.verify-result{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px; margin-bottom:14px; }
.verify-result .vr-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.verify-result .vr-name{ font-family:var(--serif); font-weight:600; font-size:1.05rem; }
.verify-result .vr-rc{ font-family:var(--mono); font-size:0.78rem; color:var(--ink-dim); margin-top:2px; }
.status-pill{ font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; padding:5px 11px; border-radius:100px; white-space:nowrap; }
.status-pill.active{ background:rgba(63,166,107,0.18); color:var(--green); }
.status-pill.inactive{ background:rgba(217,140,58,0.18); color:var(--amber); }
.status-pill.notfound{ background:rgba(193,68,59,0.18); color:#e58178; }

.disclaimer{ font-size:0.78rem; color:var(--ink-dim); border-left:2px solid var(--line); padding-left:12px; margin-top:18px; line-height:1.55; }

.seed-hint{ font-size:0.76rem; color:var(--ink-dim); margin-bottom:14px; }
.seed-hint button{ background:none; border:none; color:var(--gold); cursor:pointer; font-size:0.76rem; text-decoration:underline; padding:0; margin-right:10px; }

.empty-state{ text-align:center; padding:40px 20px; color:var(--ink-dim); font-size:0.9rem; }

.qr-block{ margin-top:16px; text-align:center; }
.qr-label{ font-size:0.78rem; color:var(--ink-dim); margin-bottom:10px; }
.qr-img{ width:150px; height:150px; background:#fff; border-radius:10px; padding:8px; box-shadow:var(--shadow); }
.qr-toggle-wrap{ margin-top:12px; text-align:center; }
.qr-toggle-wrap .qr-img{ width:130px; height:130px; }

.checklist{ display:flex; flex-direction:column; gap:2px; margin:20px 0; }
.check-item{
  display:flex; align-items:flex-start; gap:12px; padding:12px;
  border-radius:9px; cursor:pointer; transition:background .15s ease;
}
.check-item:hover{ background:var(--surface-2); }
.check-item input{ margin-top:3px; width:17px; height:17px; accent-color:var(--red); flex-shrink:0; cursor:pointer; }
.check-item .ci-text{ font-size:0.88rem; line-height:1.45; }

.risk-meter{ margin-top:8px; padding:16px; background:var(--surface-2); border-radius:10px; }
.risk-label{ font-family:var(--serif); font-size:1rem; font-weight:600; margin-bottom:10px; }
.risk-bar-track{ height:8px; border-radius:100px; background:rgba(237,234,225,0.12); overflow:hidden; }
.risk-bar-fill{ height:100%; width:0%; background:var(--green); border-radius:100px; transition:width .3s ease, background .3s ease; }
.risk-sub{ font-size:0.76rem; color:var(--ink-dim); margin-top:8px; }

.inline-link{ background:none; border:none; color:var(--gold); text-decoration:underline; cursor:pointer; font-size:inherit; padding:0; font-family:inherit; }

footer{ margin-top:50px; padding-top:20px; border-top:1px solid var(--line); font-size:0.76rem; color:var(--ink-dim); text-align:center; }

.field label .opt{ color:var(--ink-dim); font-weight:400; }

[hidden]{ display:none !important; }
.header-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.eyebrow{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--gold); margin:0 0 9px; }
.login-panel{ display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:44px; min-height:68vh; }
.login-copy h1{ font-family:var(--serif); font-weight:500; font-size:clamp(2.5rem,6vw,4.25rem); line-height:1.05; margin:0 0 18px; }
.login-copy h1 span{ color:var(--gold); }
.login-copy>p:not(.eyebrow){ color:var(--ink-dim); line-height:1.7; max-width:38ch; }
.trust-points{ display:flex; flex-direction:column; gap:12px; margin-top:26px; color:var(--ink-dim); font-size:.86rem; }
.trust-points span::before{ content:'✓'; color:var(--green); font-weight:600; margin-right:9px; }
.login-card{ padding:26px; }
.login-card h2{ font-family:var(--serif); font-size:1.5rem; margin:0 0 6px; }
.login-card>p{ color:var(--ink-dim); font-size:.88rem; margin:0 0 22px; }
.login-card .access-note{ margin:15px 0 0; text-align:center; font-size:.75rem; }
.link-btn{ display:block; width:100%; text-align:center; margin-top:12px; background:none; border:none; padding:4px; color:var(--gold); font-size:.85rem; font-weight:600; cursor:pointer; text-decoration:underline; }
.link-btn:hover{ opacity:.85; }
.link-inline{ display:inline; background:none; border:none; padding:0; margin:0; color:var(--gold); font-size:inherit; font-weight:600; cursor:pointer; text-decoration:underline; }
.link-inline:hover{ opacity:.85; }
.verify-banner{ background:rgba(217,140,58,.14); color:var(--amber); border:1px solid rgba(217,140,58,.3); border-radius:10px; padding:11px 16px; font-size:.85rem; margin-bottom:16px; }
.settlement-status{ margin-bottom:18px; }
.recurring-form{ margin-bottom:20px; }
.recurring-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:10px; }
.recurring-row .rr-meta{ color:var(--ink-dim); font-size:.82rem; margin-top:3px; }
.settlement-form-heading{ font-family:var(--serif); font-size:1.15rem; margin:0 0 4px; }
.settlement-form-sub{ color:var(--ink-dim); font-size:.88rem; margin:0 0 18px; }
.settlement-confirm{ margin-top:16px; padding:16px 18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.settlement-confirm-name{ margin:0 0 14px; font-size:.92rem; }
.merchant-filters{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
.merchant-filters input[type="search"]{ flex:1 1 260px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink); font-family:var(--sans); font-size:.9rem; padding:10px 13px; border-radius:9px; }
.merchant-filters select{ background:var(--surface-2); border:1px solid var(--line); color:var(--ink); font-family:var(--sans); font-size:.9rem; padding:10px 13px; border-radius:9px; }
.chart-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px 10px; margin-bottom:22px; position:relative; }
.chart-card svg{ display:block; width:100%; height:auto; overflow:visible; }
.chart-axis-label{ font-family:var(--sans); font-size:9px; fill:var(--ink-dim); }
.chart-gridline{ stroke:var(--line); stroke-width:1; }
.chart-tooltip{ position:absolute; pointer-events:none; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:.76rem; color:var(--ink); white-space:nowrap; box-shadow:var(--shadow); opacity:0; transition:opacity .1s; z-index:5; }
.chart-tooltip.show{ opacity:1; }
.ledger-subhead{ font-family:var(--serif); font-size:1.1rem; margin:26px 0 12px; }
.toggle-field{ display:flex; align-items:center; gap:10px; font-size:.9rem; margin-bottom:18px; cursor:pointer; }
.toggle-field input{ width:17px; height:17px; accent-color:var(--gold); cursor:pointer; }
.merchant-banner{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; background:var(--surface); border:1px solid var(--line); border-radius:12px; margin-bottom:16px; }
.merchant-banner strong{ font-family:var(--serif); font-size:1.1rem; }
.merchant-status{ color:var(--green); background:rgba(63,166,107,.12); padding:7px 11px; font-size:.76rem; border-radius:100px; }
.merchant-warning{ color:var(--amber); background:rgba(217,140,58,.12); }
.section-heading{ margin-bottom:8px; }
.items-heading{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 12px; }
.items-heading h2{ font-size:.95rem; margin:0 0 4px; }
.items-heading p{ color:var(--ink-dim); font-size:.78rem; margin:0; }
.line-item{ display:grid; grid-template-columns:minmax(0,1.8fr) 76px minmax(110px,1fr) 26px; gap:10px; align-items:end; }
.line-item .field{ margin-bottom:11px; }
.remove-item{ height:44px; margin-bottom:11px; background:transparent; border:0; color:var(--ink-dim); font-size:1.4rem; cursor:pointer; }
.invoice-total-bar{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; margin:4px 0 18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--ink-dim); font-size:.84rem; }
.invoice-total-bar strong{ color:var(--gold); font-family:var(--mono); font-size:1.2rem; }
.invoice-total-breakdown{ display:flex; flex-direction:column; gap:4px; padding:0 0 10px; color:var(--ink-dim); font-size:.82rem; }
.invoice-total-breakdown div{ display:flex; justify-content:space-between; }
.invoice-total-breakdown span:last-child{ font-family:var(--mono); }
.share-actions{ display:flex; flex-wrap:wrap; gap:9px; margin-top:15px; }
.share-actions .btn{ text-decoration:none; }
.receipt-meta{ margin-top:5px; font-size:.72rem; color:#736951; }
.receipt .btn-ghost{ color:#241F16; border-color:rgba(36,31,22,.2); text-decoration:none; }
.receipt .btn-green{ text-decoration:none; }

.public-shell{ max-width:680px; }
.public-brand{ text-decoration:none; }
.secure-chip{ padding:7px 11px; border:1px solid rgba(63,166,107,.35); color:var(--green); border-radius:100px; font-size:.73rem; }
.public-invoice-card{ background:var(--paper); color:#241F16; border:1px solid var(--paper-line); padding:28px; border-radius:16px; box-shadow:var(--shadow); }
.invoice-card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.invoice-card-top .eyebrow{ color:#7b6840; }
.invoice-card-top h1{ font-family:var(--serif); margin:0; font-size:1.7rem; }
.registration-note{ margin:7px 0 0; color:#716854; font-size:.77rem; }
.invoice-meta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:15px; margin:26px 0 16px; padding:15px 0; border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line); }
.invoice-meta-grid div,.public-line-item div{ display:flex; flex-direction:column; gap:5px; }
.invoice-meta-grid span,.public-line-item span{ color:#736951; font-size:.77rem; }
.invoice-meta-grid strong{ font-size:.88rem; }
.public-line-item{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; }
.public-line-item strong{ font-size:.91rem; }
.public-total{ display:flex; justify-content:space-between; align-items:center; margin:17px 0; padding:17px 0; border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line); }
.public-total strong{ font-family:var(--mono); color:var(--green-deep); font-size:1.4rem; }
.public-note{ background:#f1ecdd; color:#514a3a; font-size:.85rem; line-height:1.5; padding:12px; border-radius:8px; }
.public-payment-form label{ display:block; margin:17px 0 6px; font-size:.8rem; color:#514a3a; }
.public-payment-form input{ width:100%; padding:11px 12px; border:1px solid #d4cbb7; border-radius:8px; font-size:.92rem; background:#fff; margin-bottom:12px; }
.provider-note{ font-size:.76rem; text-align:center; color:#736951; }
.link-button{ background:transparent; border:0; color:var(--green-deep); text-decoration:underline; cursor:pointer; display:block; margin:16px auto 0; }
.paid-confirmation,.status-card{ text-align:center; padding-top:24px; }
.paid-confirmation h2,.status-card h1{ font-family:var(--serif); }
.paid-confirmation p,.status-card p{ color:#655c48; line-height:1.6; }
.paid-check,.pending-check{ display:inline-flex; align-items:center; justify-content:center; width:62px; height:62px; border-radius:50%; background:rgba(63,166,107,.14); color:var(--green-deep); font-size:2rem; }
.pending-check{ background:rgba(217,140,58,.15); color:#8a5a1c; }
.status-card>.btn{ display:inline-block; margin-top:10px; text-decoration:none; }

@media (max-width:680px){ .login-panel{ grid-template-columns:1fr; gap:23px; min-height:auto; padding:25px 0; }.login-copy h1{ font-size:3rem; }.trust-points{ flex-direction:row; flex-wrap:wrap; gap:10px 14px; }.login-card{ padding:20px; }.line-item{ grid-template-columns:minmax(0,1fr) 63px minmax(100px,1fr) 22px; gap:6px; }.line-item .field input{ padding-left:8px; padding-right:8px; }.line-item .amount-wrap input{ padding-left:25px; }.merchant-banner{ align-items:flex-start; flex-direction:column; }.public-invoice-card{ padding:20px; }.invoice-card-top{ flex-direction:column; }.share-actions .btn{ flex:1 1 100%; text-align:center; } }