:root {
  --brand-50:#e8f7f4; --brand-300:#6fd0bf; --brand-500:#008f7a; --brand-600:#00796b;
  --text:#172033; --muted:#64748b; --border:#e5eaf0; --subtle-bg:#f6f8fb; --muted-bg:#eef2f7;
  --success:#047857;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:Inter, -apple-system, system-ui, sans-serif; background:var(--subtle-bg); color:var(--text); font-size:15px; }

.topbar { background:#fff; border-bottom:1px solid var(--border); height:62px; display:flex; align-items:center; padding:0 24px; }
.logo { display:flex; align-items:center; gap:8px; font-weight:800; font-size:17px; }
.logo b { width:28px; height:28px; border-radius:7px; background:var(--brand-600); color:#fff; display:grid; place-items:center; }
.logout { margin-left:auto; }
.logout button { height:34px; padding:0 14px; border-radius:9px; border:1px solid var(--border); background:#fff; font:inherit; font-weight:600; font-size:13px; color:var(--muted); cursor:pointer; }
.logout button:hover { border-color:var(--brand-500); color:var(--brand-600); }

/* Login */
.login-body { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(160deg, var(--brand-50), var(--subtle-bg) 60%); }
.login-card { width:100%; max-width:380px; background:#fff; border:1px solid var(--border); border-radius:18px; padding:28px; display:flex; flex-direction:column; gap:8px; box-shadow:0 20px 50px rgba(23,32,51,.08); }
.login-card .logo { margin-bottom:14px; }
.login-card h1 { font-size:22px; margin:0; }
.login-sub { color:var(--muted); font-size:14px; margin-bottom:8px; }
.login-card label { font-size:13px; font-weight:600; margin-top:6px; }
.login-card input { height:42px; border:1px solid var(--border); border-radius:10px; padding:0 12px; font:inherit; }
.login-card input:focus { outline:2px solid var(--brand-300); border-color:var(--brand-500); }
.login-card button { margin-top:14px; height:44px; border:0; border-radius:10px; background:var(--brand-600); color:#fff; font:inherit; font-weight:700; cursor:pointer; }
.login-card button:hover { background:#00695c; }
.login-msg { font-size:13px; padding:10px 12px; border-radius:10px; }
.login-msg.err { background:#fef0f0; color:#dc2626; }
.login-msg.ok { background:var(--brand-50); color:var(--brand-600); }

main { max-width:1100px; margin:0 auto; padding:32px 24px; }
h1 { font-size:26px; letter-spacing:-.6px; margin-bottom:20px; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:14px; color:inherit; text-decoration:none; transition:border-color .15s, transform .15s; }
.card:hover { border-color:var(--brand-500); transform:translateY(-2px); }
.ic { width:44px; height:44px; border-radius:12px; background:var(--brand-50); display:grid; place-items:center; font-size:22px; flex-shrink:0; }
.card h3 { font-size:17px; }
.card-sub { color:var(--muted); font-size:13px; margin-top:-8px; }

/* Detail */
.back { display:inline-block; color:var(--muted); text-decoration:none; font-weight:600; font-size:14px; margin-bottom:16px; }
.back:hover { color:var(--brand-600); }
.detail-hd { display:flex; align-items:center; gap:14px; }
.detail-hd h1 { margin:0; }

.toggle { display:inline-flex; background:var(--muted-bg); border:1px solid var(--border); border-radius:10px; padding:3px; margin-top:20px; }
.toggle a { padding:8px 14px; border-radius:8px; font-weight:600; font-size:14px; color:var(--muted); text-decoration:none; }
.toggle a.on { background:#fff; color:var(--text); box-shadow:0 1px 2px rgb(23 32 51/.08); }

.stage { position:relative; background:#fff; border:1px solid var(--border); border-radius:16px; margin:16px 0 24px; overflow:hidden; }
.wires { position:absolute; inset:0; }
.wires line { stroke:var(--border); stroke-width:2; stroke-dasharray:6 6; }

.node { position:absolute; z-index:1; transform:translate(-50%, -26px); display:flex; flex-direction:column; align-items:center; text-align:center; width:150px; }
.node b { font-size:13px; margin-top:6px; }
.node small { color:var(--muted); font-size:12px; }
.dot-ic { width:52px; height:52px; border-radius:50%; background:#fff; border:3px solid var(--border); display:grid; place-items:center; font-weight:800; font-size:18px; color:var(--muted); transition:all .3s; }
.node.on .dot-ic { border-color:var(--brand-600); color:var(--brand-600); background:var(--brand-50); box-shadow:0 0 0 6px rgba(0,121,107,.12); }

.coin { position:absolute; z-index:2; transform:translate(-50%, -50%); background:var(--brand-600); color:#fff; font-weight:800; font-size:12px; padding:4px 9px; border-radius:999px; white-space:nowrap; box-shadow:0 4px 10px rgba(0,121,107,.25); transition:left 1.1s ease-in-out, top 1.1s ease-in-out, opacity .3s, background .3s; }
.coin.hide { opacity:0; }
.coin.done { background:var(--success); }
.stage.reset .coin { transition:none; }

.steps { list-style:none; display:grid; grid-template-columns:repeat(var(--cols, 4),minmax(0,1fr)); gap:12px; }
.steps li { display:flex; gap:10px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px; opacity:.5; transition:all .3s; }
.steps li.past { opacity:.8; }
.steps li.on { opacity:1; border-color:var(--brand-500); box-shadow:0 6px 18px rgba(0,121,107,.1); }
.steps .n { width:24px; height:24px; border-radius:50%; background:var(--brand-50); color:var(--brand-600); display:grid; place-items:center; font-weight:800; font-size:12px; flex-shrink:0; }
.steps li.on .n, .steps li.past .n { background:var(--brand-600); color:#fff; }
.steps b { display:block; font-size:14px; }
.steps small { color:var(--muted); font-size:13px; }

.node.sm { transform:translate(-50%, -20px); }
.node.sm .dot-ic { width:40px; height:40px; font-size:15px; }
.node.sm b { margin-top:4px; }

.setup { margin-top:28px; }
.setup h2 { font-size:18px; margin-bottom:12px; }
.setup-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.setup-card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px; font-size:14px; }
.setup-hd { display:flex; justify-content:space-between; font-weight:800; padding-bottom:10px; border-bottom:1px solid var(--border); margin-bottom:8px; }
.setup-label { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:4px 0 6px; }
.setup-row { display:flex; justify-content:space-between; padding:4px 0; color:var(--text); }
.setup-row span:last-child { font-weight:700; font-variant-numeric:tabular-nums; }
.setup-total { display:flex; justify-content:space-between; align-items:center; margin-top:14px; background:var(--brand-50); border:1px solid var(--brand-300); border-radius:12px; padding:14px 16px; font-weight:600; }
.setup-total b { font-size:18px; color:var(--brand-600); }

/* ---------- One business, many payments ---------- */
:root { --out:#4f46e5; --out-50:#eef0ff; --info:#1d4ed8; --info-50:#e8eefd; }

.hub-banner { display:flex; align-items:center; gap:16px; padding:18px 20px; margin-bottom:28px; border-radius:16px; text-decoration:none; color:#fff; background:linear-gradient(120deg, var(--brand-600), #0f766e 55%, var(--out)); box-shadow:0 10px 30px rgba(0,121,107,.18); transition:transform .15s; }
.hub-banner:hover { transform:translateY(-2px); }
.hub-banner-ic { width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.18); display:grid; place-items:center; font-weight:800; font-size:20px; flex-shrink:0; }
.hub-banner-text { flex:1; display:flex; flex-direction:column; gap:2px; }
.hub-banner-text b { font-size:17px; }
.hub-banner-text span { font-size:13px; opacity:.9; }
.hub-banner-go { font-weight:700; white-space:nowrap; background:rgba(255,255,255,.18); padding:8px 14px; border-radius:999px; font-size:14px; }

.hub-head h1 { margin-bottom:6px; }
.hub-head p { color:var(--muted); font-size:16px; line-height:1.5; max-width:720px; margin-bottom:22px; }

.hub-summary { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.sum-part { flex:1; background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:4px; }
.sum-part span { font-size:12px; color:var(--muted); font-weight:600; }
.sum-part b { font-size:20px; letter-spacing:-.4px; font-variant-numeric:tabular-nums; }
.sum-part.in b { color:var(--brand-600); }
.sum-part.out b { color:var(--out); }
.sum-part.hub { background:var(--brand-50); border-color:var(--brand-300); }
.sum-arrow { color:var(--muted); font-size:20px; }

.hub-stage { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr) minmax(0,1fr); gap:56px; align-items:center; background:#fff; border:1px solid var(--border); border-radius:18px; padding:28px; }
.hub-wires { position:absolute; inset:0; pointer-events:none; z-index:0; }
.hub-wires .wire { fill:none; stroke-width:1.5; stroke:var(--border); transition:stroke .3s, stroke-width .3s; }
.hub-wires .wire.active { stroke-width:2.5; stroke-dasharray:6 7; animation:dash 0.8s linear infinite; }
.hub-wires .wire.in.active { stroke:var(--brand-500); }
.hub-wires .wire.out.active { stroke:var(--out); }
@keyframes dash { to { stroke-dashoffset:-26; } }

.hub-col { position:relative; z-index:1; display:flex; flex-direction:column; gap:10px; }
.hub-col-title { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:2px; }
.hub-col-title.in { color:var(--brand-600); }
.hub-col-title.out { color:var(--out); }

.stream { background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px 12px; display:flex; align-items:center; gap:10px; transition:border-color .3s, box-shadow .3s, background .3s; }
.stream.active { box-shadow:0 8px 20px rgba(23,32,51,.08); }
.stream.in.active { border-color:var(--brand-500); background:var(--brand-50); }
.stream.out.active { border-color:var(--out); background:var(--out-50); }
.stream-ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:17px; flex-shrink:0; background:var(--muted-bg); }
.stream-body { flex:1; min-width:0; }
.stream-body b { display:block; font-size:14px; }
.stream-body small { display:block; color:var(--muted); font-size:12px; line-height:1.35; }
.stream-end { display:flex; align-items:center; gap:8px; }
.stream-amt { font-weight:700; font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.stream-check { width:20px; height:20px; border-radius:50%; border:2px solid var(--border); display:grid; place-items:center; font-size:11px; font-weight:800; color:#fff; transition:all .3s; }
.stream.done .stream-check { background:var(--success); border-color:var(--success); }

.hub-center { position:relative; z-index:1; display:flex; justify-content:center; }
.hub-card { width:100%; max-width:260px; border-radius:20px; padding:22px 18px; text-align:center; color:#fff; background:linear-gradient(160deg, var(--brand-600), #134e4a); box-shadow:0 16px 36px rgba(0,105,92,.25); position:relative; transition:box-shadow .4s; }
.hub-card.done { box-shadow:0 0 0 6px rgba(4,120,87,.18), 0 16px 36px rgba(0,105,92,.25); }
.hub-logo { width:52px; height:52px; margin:0 auto 10px; border-radius:14px; background:#fff; color:var(--brand-600); display:grid; place-items:center; font-size:22px; font-weight:800; }
.hub-name { font-size:17px; font-weight:800; }
.hub-badge { display:inline-block; margin:6px 0 14px; font-size:11px; font-weight:700; background:rgba(255,255,255,.16); padding:3px 10px; border-radius:999px; }
.hub-metrics { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hub-metric { display:flex; flex-direction:column; gap:2px; background:rgba(255,255,255,.1); border-radius:10px; padding:8px 6px; min-width:0; }
.hub-metric span { font-size:11px; opacity:.8; }
.hub-metric b { font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hub-metric.in b { color:#a7f3d0; }
.hub-metric.out b { color:#c7d2fe; }
.hub-progress { margin-top:12px; font-size:12px; opacity:.9; }

.hub-coin { position:absolute; left:0; top:0; z-index:3; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:11px; font-weight:800; offset-distance:0%; offset-rotate:0deg; offset-anchor:center; transition:offset-distance 1.15s cubic-bezier(.45,0,.25,1); pointer-events:none; }
.hub-coin.in { background:var(--brand-600); }
.hub-coin.out { background:var(--out); }
.hub-coin.go { offset-distance:100%; }

.hub-narr { display:flex; align-items:center; gap:20px; margin-top:14px; background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px 20px; }
.narr-body { flex:1; min-width:0; }
.narr-step { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.narr-text { font-size:18px; font-weight:700; margin-top:2px; }
.narr-sub { font-size:14px; color:var(--muted); margin-top:2px; }
.hub-narr.pop .narr-body { animation:fadeUp .35s ease; }
@keyframes fadeUp { from { opacity:0; transform:translateY(4px); } }
.narr-dots { display:flex; gap:6px; }
.narr-dots i { width:9px; height:9px; border-radius:50%; background:var(--border); transition:all .3s; }
.narr-dots i.on.in { background:var(--brand-500); }
.narr-dots i.on.out { background:var(--out); }
.narr-dots i.now { transform:scale(1.4); }
.narr-controls { display:flex; gap:8px; }
.narr-btn { height:34px; padding:0 12px; border-radius:9px; border:1px solid var(--border); background:#fff; font-weight:600; font-size:13px; cursor:pointer; }
.narr-btn:hover { border-color:var(--brand-500); color:var(--brand-600); }

.hub-how { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.how-card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:6px; }
.how-card .n { width:26px; height:26px; border-radius:50%; background:var(--brand-600); color:#fff; display:grid; place-items:center; font-weight:800; font-size:12px; }
.how-card b { font-size:14px; }
.how-card small { color:var(--muted); font-size:13px; line-height:1.45; }

.hub-section { margin-top:32px; }
.hub-section h2 { font-size:18px; margin-bottom:12px; }
.user-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.user-card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.user-hd { display:flex; align-items:center; gap:10px; }
.user-hd .stream-ic { background:var(--muted-bg); }
.user-hd b { font-size:14px; }
.user-row { font-size:13px; color:var(--text); line-height:1.4; }
.user-row span { display:inline-block; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:999px; margin-right:6px; }
.user-row.in span { background:var(--brand-50); color:var(--brand-600); }
.user-row.out span { background:var(--out-50); color:var(--out); }

@media (max-width: 900px) {
  .hub-stage { grid-template-columns:1fr; gap:18px; }
  .hub-wires, .hub-coin { display:none; }
  .hub-summary, .hub-narr { flex-direction:column; align-items:stretch; }
  .sum-arrow { display:none; }
  .hub-how, .user-grid { grid-template-columns:1fr; }
}

@media (max-width: 800px) {
  .grid, .steps, .setup-grid { grid-template-columns:1fr; }
  .node { width:100px; }
}
@media (prefers-reduced-motion: reduce) {
  .coin, .dot-ic, .steps li { transition:none !important; animation:none !important; }
  .hub-coin { display:none; }
  .hub-wires .wire.active, .hub-narr.pop .narr-body { animation:none !important; }
}