/* Holders Business — design system v1. Tokens + components. Single truth: DESIGN.md */
@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:wdth,wght@100..125,400..800&family=Geist+Mono:wght@400..500&display=swap');

:root{
  /* neutrals — warm-leaning greys so black/white reads paper, not plastic */
  --ink:#0e0f11; --ink-2:#3a3c41; --muted:#62656d; --faint:#8e9097;
  --line:#e6e5e1; --line-strong:#d2d1cc;
  --canvas:#f5f5f2; --surface:#ffffff; --sunken:#f0efeb; --hover:#f7f7f4;
  /* one accent: harbor (petrol blue) — selection, focus, links, in-progress */
  --accent:#255e7e; --accent-hover:#1b4a64; --accent-soft:#e9f1f5; --accent-line:#bcd2de;
  /* semantic states — text colour on soft fill, never colour alone */
  --pos:#1d6a44; --pos-soft:#e7f2eb; --warn:#875700; --warn-soft:#fbf1dc; --neg:#a3271f; --neg-soft:#fbeae8;

  --font:'Mona Sans','Helvetica Neue',Arial,sans-serif;--hb-font-text:var(--font);
  --display-stretch:125%; --heading-stretch:118%;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* type scale (px): 12 / 13 / 14 / 16 / 20 / 24 / 32 / 44 */
  --t-xs:12px; --t-sm:13px; --t-md:14px; --t-lg:16px; --t-h3:18px; --t-h2:22px; --t-h1:34px; --t-display:44px; --t-balance:54px;

  /* spacing — 4px base */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s14:56px; --s20:80px;

  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill:999px;

  /* elevation — only floating layers carry shadow */
  --e-pop:0 1px 2px rgba(14,15,17,.06),0 8px 24px -6px rgba(14,15,17,.16);
  --e-dialog:0 2px 4px rgba(14,15,17,.06),0 24px 48px -12px rgba(14,15,17,.28);

  --ease:cubic-bezier(.22,1,.36,1); --d-fast:120ms; --d-base:180ms;
  --ctl:36px; --ctl-lg:40px; --row:48px; --row-compact:40px; --rail:256px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 var(--t-md)/1.5 var(--font);color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;}
::selection{background:var(--accent-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-hover)}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
h1,h2,h3{font-weight:650;font-stretch:var(--heading-stretch);letter-spacing:-.015em}
p{margin:0}
img{max-width:100%}
.num{font-family:var(--mono);font-weight:450;font-variant-numeric:tabular-nums lining-nums}
.mono{font-family:var(--mono);font-size:.93em;letter-spacing:0}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:10px;border:3px solid transparent;background-clip:content-box}

/* ---------- icons: 16px 1.5 stroke, CSS masks so a page needs nothing but ds.css. Usage: <i class="ic ic-copy" aria-hidden="true"></i> ---------- */
.ic{display:inline-block;width:16px;height:16px;flex:none;vertical-align:-3px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ic-home{--i:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2.5 7 8 2.5 13.5 7v6a.5.5 0 0 1-.5.5H10V10H6v3.5H3a.5.5 0 0 1-.5-.5Z%27/%3E%3C/svg%3E")}
.ic-activity{--i:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5.5 4h8M5.5 8h8M5.5 12h8M2.5 4h.01M2.5 8h.01M2.5 12h.01%27/%3E%3C/svg%3E")}
.ic-plus{--i:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M8 3v10M3 8h10%27/%3E%3C/svg%3E")}
.ic-bank{--i:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2 6.5 8 3l6 3.5M3.5 7v5M6.5 7v5M9.5 7v5M12.5 7v5M2 13.5h12%27/%3E%3C/svg%3E")}
.ic-settings{--i:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2.5 4.5h7M12.5 4.5h1M2.5 11.5h1M6.5 11.5h7%27/%3E%3Ccircle cx=%2711%27 cy=%274.5%27 r=%271.5%27/%3E%3Ccircle cx=%275%27 cy=%2711.5%27 r=%271.5%27/%3E%3C/svg%3E")}
.ic-copy{--i:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%275.5%27 y=%275.5%27 width=%278%27 height=%278%27 rx=%271.5%27/%3E%3Cpath d=%27M10.5 5.5V3.5a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2%27/%3E%3C/svg%3E")}
.ic-check{--i:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m3.5 8.5 3 3 6-7%27/%3E%3C/svg%3E")}
.ic-chev{--i:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 3.5 4.5 4.5L6 12.5%27/%3E%3C/svg%3E")}
.ic-chevd{--i:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m4 6 4 4 4-4%27/%3E%3C/svg%3E")}
.ic-ext{--i:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 3.5h6.5V10M12.5 3.5 4 12%27/%3E%3C/svg%3E")}
.ic-alert{--i:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M8 2.5 14 13H2Z%27/%3E%3Cpath d=%27M8 6.5v3M8 11.25h.01%27/%3E%3C/svg%3E")}
.ic-info{--i:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%278%27 cy=%278%27 r=%275.75%27/%3E%3Cpath d=%27M8 7.25v3.5M8 5.25h.01%27/%3E%3C/svg%3E")}
.ic-search{--i:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%277%27 cy=%277%27 r=%274.25%27/%3E%3Cpath d=%27m10.25 10.25 3.25 3.25%27/%3E%3C/svg%3E")}
.ic-x{--i:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m4 4 8 8M12 4l-8 8%27/%3E%3C/svg%3E")}
.ic-key{--i:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%275.5%27 cy=%2710.5%27 r=%273%27/%3E%3Cpath d=%27m7.6 8.4 5.4-5.4M11 5l1.5 1.5%27/%3E%3C/svg%3E")}
.ic-clock{--i:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%278%27 cy=%278%27 r=%275.75%27/%3E%3Cpath d=%27M8 5v3.25l2 1.25%27/%3E%3C/svg%3E")}
.ic-doc{--i:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 2.5h5.5l2.5 2.5v8.5H4Z%27/%3E%3Cpath d=%27M9.5 2.5V5H12M6 8.5h4M6 11h4%27/%3E%3C/svg%3E")}
.ic-user{--i:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%278%27 cy=%275.5%27 r=%272.75%27/%3E%3Cpath d=%27M2.75 13.5c.6-2.5 2.7-4 5.25-4s4.65 1.5 5.25 4%27/%3E%3C/svg%3E")}
.ic-menu{--i:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2.5 4.5h11M2.5 8h11M2.5 11.5h11%27/%3E%3C/svg%3E")}
.ic-down{--i:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M8 3v10M4 9l4 4 4-4%27/%3E%3C/svg%3E")}

/* type roles */
.t-display{font-size:var(--t-display);font-weight:700;font-stretch:var(--display-stretch);letter-spacing:-.025em;line-height:1}
.t-h1{font-size:var(--t-h1);font-weight:650;font-stretch:var(--heading-stretch);letter-spacing:-.015em;line-height:1.1}
.t-h2{font-size:var(--t-h2);font-weight:650;font-stretch:var(--heading-stretch);letter-spacing:-.015em;line-height:1.2}
.t-h3{font-size:var(--t-h3);font-weight:650;font-stretch:var(--heading-stretch);letter-spacing:-.01em;line-height:1.3}
.t-body-lg{font-size:var(--t-lg);line-height:1.55;color:var(--ink-2)}
.t-body{font-size:var(--t-md);line-height:1.5}
.t-label{font-size:var(--t-sm);font-weight:500;line-height:1.4}
.t-caption{font-size:var(--t-xs);line-height:1.4;color:var(--muted)}

/* ---------- buttons ---------- */
.btn{--h:var(--ctl);display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding:0 16px;border-radius:var(--r-pill);border:1px solid transparent;font:600 var(--t-md)/1 var(--font);letter-spacing:-.005em;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background-color var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease)}
.btn-lg{--h:var(--ctl-lg);padding:0 20px}
.btn-sm{--h:28px;padding:0 12px;font-size:var(--t-sm)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover,.btn-primary.is-hover{background:#2a2c30;color:#fff}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn-secondary:hover,.btn-secondary.is-hover{background:var(--hover);border-color:#bdbcb6;color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink-2)}
.btn-ghost:hover,.btn-ghost.is-hover{background:var(--sunken);color:var(--ink)}
.btn-danger{background:var(--surface);color:var(--neg);border-color:#e9c3bf}
.btn-danger:hover,.btn-danger.is-hover{background:var(--neg-soft);color:var(--neg)}
.btn:disabled,.btn.is-disabled{background:var(--sunken);color:var(--faint);border-color:transparent;cursor:not-allowed}
.btn.is-loading{color:transparent;position:relative;pointer-events:none}
.btn.is-loading::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
.btn-secondary.is-loading::after{border-color:var(--line-strong);border-top-color:var(--ink)}
.btn.is-focus{outline:2px solid var(--accent);outline-offset:2px}
.btn-icon{width:var(--h);padding:0}
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer;font-weight:500}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- fields ---------- */
.field{display:grid;gap:6px;min-width:0;align-content:start}
.field>label,.field .lbl{font-size:var(--t-sm);font-weight:500;color:var(--ink)}
.field .opt{color:var(--muted);font-weight:400}
.input{width:100%;height:var(--ctl-lg);padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);font:400 var(--t-md)/1.4 var(--font);color:var(--ink);transition:border-color var(--d-fast) var(--ease),box-shadow var(--d-fast) var(--ease)}
.input::placeholder{color:var(--muted)}
.input:hover,.input.is-hover{border-color:#b9b8b2}
.input:focus,.input.is-focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input[aria-invalid=true]{border-color:var(--neg)}
.input[aria-invalid=true]:focus{box-shadow:0 0 0 3px var(--neg-soft)}
.input:disabled,.input[readonly]{background:var(--sunken);color:var(--muted);border-color:var(--line)}
.input.mono{font-family:var(--mono);font-size:13px}
.affix{display:flex;align-items:stretch;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);height:var(--ctl-lg);overflow:hidden}
.affix:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.affix .input{border:0;height:100%;box-shadow:none;border-radius:0}
.affix span{display:flex;white-space:nowrap;align-items:center;padding:0 12px;color:var(--muted);background:var(--hover);font-size:var(--t-sm)}
.affix span:first-child{border-right:1px solid var(--line)}.affix span:last-child{border-left:1px solid var(--line)}
select.input{appearance:none;padding-right:36px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2362656d' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center}
textarea.input{height:auto;min-height:96px;padding:10px 12px;resize:vertical}
.help{font-size:var(--t-xs);color:var(--muted);line-height:1.45}
.err{font-size:var(--t-xs);color:var(--neg);line-height:1.45;display:flex;gap:6px;align-items:flex-start}
.err .ic{width:14px;height:14px;margin-top:1px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-md);line-height:1.45;cursor:pointer}
.check input{appearance:none;flex:none;width:18px;height:18px;margin:1px 0 0;border:1px solid var(--line-strong);border-radius:5px;background:var(--surface);display:grid;place-content:center;cursor:pointer}
.check input[type=radio]{border-radius:50%}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input[type=checkbox]:checked::after{content:'';width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.check input[type=radio]:checked::after{content:'';width:6px;height:6px;border-radius:50%;background:#fff}
.check input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* field group: form column + context rail (desktop) */
.fgroup{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--s10);padding:var(--s8) 0;border-top:1px solid var(--line)}
.fgroup:first-child{border-top:0;padding-top:0}
.fgroup .fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4)}
.fgroup .fields .full{grid-column:1/-1}
.fgroup .rail{font-size:var(--t-sm);color:var(--muted);line-height:1.5;padding-top:2px}
.fgroup .rail h4{font-size:var(--t-md);color:var(--ink);margin-bottom:6px;letter-spacing:-.01em}
.fgroup .rail p+p{margin-top:8px}

/* segmented control */
.seg{display:inline-flex;padding:3px;gap:2px;background:var(--sunken);border-radius:var(--r-md)}
.seg button{height:28px;padding:0 12px;border:0;border-radius:6px;background:transparent;font:500 var(--t-sm)/1 var(--font);color:var(--ink-2);cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(14,15,17,.08),0 0 0 1px var(--line)}
.seg .count{color:var(--muted);font-weight:500}

/* ---------- status chip ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r-sm);font:500 var(--t-xs)/1 var(--font);white-space:nowrap;background:var(--sunken);color:var(--ink-2)}
.chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.chip-progress{background:var(--accent-soft);color:var(--accent)}
.chip-done{background:var(--pos-soft);color:var(--pos)}
.chip-hold{background:var(--warn-soft);color:var(--warn)}
.chip-hold::before{border-radius:1px}
.chip-fail{background:var(--neg-soft);color:var(--neg)}
.chip-fail::before{border-radius:0;width:7px;height:7px;clip-path:polygon(50% 0,100% 100%,0 100%)}
.chip-neutral::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}

/* ---------- settlement track (signature) ---------- */
.track{display:inline-grid;grid-auto-flow:column;gap:3px;align-items:center}
.track i{width:14px;height:4px;border-radius:2px;background:var(--line-strong)}
.track i.done{background:var(--ink)}
.track i.now{background:var(--accent);animation:pulse 1.6s var(--ease) infinite}
.track i.held{background:var(--warn)}
@keyframes pulse{50%{opacity:.45}}

/* ---------- money ---------- */
.money{font-family:var(--mono);font-weight:450;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.money-xl{font-family:var(--font);font-size:var(--t-balance);font-weight:700;font-stretch:var(--display-stretch);letter-spacing:-.025em;line-height:1}
.money-neg{color:var(--neg)}
.money-pending{color:var(--muted)}

/* ---------- address / hash ---------- */
.addr{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0}
.addr code{font-family:var(--mono);font-size:13px;color:var(--ink);overflow-wrap:anywhere;letter-spacing:.01em}
.addr code b{font-weight:500;background:var(--sunken);border-radius:3px;padding:0 2px}
.copy{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font:500 var(--t-xs)/1 var(--font);color:var(--ink-2);cursor:pointer;flex:none}
.copy:hover{background:var(--hover);border-color:var(--line-strong)}
.copy.is-done{color:var(--pos);border-color:#bcd9c6}
.copy .ic{width:13px;height:13px}

/* ---------- key-value list ---------- */
.kv{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:0;margin:0}
.kv dt,.kv dd{margin:0;padding:10px 0;border-top:1px solid var(--line);font-size:var(--t-md)}
.kv dt{color:var(--muted);padding-right:var(--s6)}
.kv dd{text-align:right;min-width:0}
.kv>:nth-child(-n+2){border-top:0}

/* ---------- banners ---------- */
.banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 14px;border-radius:var(--r-md);background:var(--sunken);color:var(--ink);font-size:var(--t-md);line-height:1.5}
.banner .ic{margin-top:2px}
.banner b{font-weight:600}
.banner .acts{display:flex;gap:8px;align-self:center}
.banner-info{background:var(--accent-soft)}.banner-info>.ic{color:var(--accent)}
.banner-warn{background:var(--warn-soft)}.banner-warn>.ic{color:var(--warn)}
.banner-neg{background:var(--neg-soft)}.banner-neg>.ic{color:var(--neg)}
.banner-pos{background:var(--pos-soft)}.banner-pos>.ic{color:var(--pos)}

/* ---------- table (rules: DESIGN.md "Tables — MANDATORY hb-table"; behaviour: hb-table.js) ---------- */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-md);line-height:1.4}
.table th{height:36px;padding:0 12px;text-align:left;font:500 12px/1 var(--font);color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
.table td{height:44px;padding:0 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface);font-size:var(--t-md)}
.table th:first-child,.table td:first-child{padding-left:0}
.table th:last-child,.table td:last-child{padding-right:0}
.table .r{text-align:right}
.table .num,.table .date{font-family:inherit;font-weight:inherit;font-variant-numeric:tabular-nums lining-nums}
.table .money{font-family:inherit;font-weight:inherit}
.table .date{color:var(--ink-2)}
.table .addr-s{font-family:var(--mono);font-size:.9em;font-size-adjust:.5;letter-spacing:0;color:var(--ink)}
.table .note{color:var(--muted)}
.table .approx{color:var(--muted);white-space:nowrap}
.table .approx::before{content:'≈';margin-right:.12em}
.table .chip{height:auto;padding:0;background:none;font-size:inherit;font-weight:500;gap:6px;align-items:baseline;line-height:inherit}
.table .chip::before{align-self:center}
.table .chip{color:var(--ink)}
.table .chip-progress::before{background:var(--accent)}.table .chip-done::before{background:var(--pos)}.table .chip-hold::before{background:var(--warn)}.table .chip-fail::before{background:var(--neg)}
.table .chip::before{width:6px;height:6px}
.table tbody tr{cursor:pointer}
.table tbody tr:hover td{background:var(--hover)}
.table tbody tr:focus-visible td{box-shadow:inset 0 2px 0 var(--accent),inset 0 -2px 0 var(--accent)}
.table tbody tr:focus-visible{outline:none}
.table tbody tr[data-tone=danger] td{background:var(--neg-soft)}
.table tbody tr[data-tone=warning] td{background:var(--warn-soft)}
.table tbody tr[data-tone=success] td{background:var(--pos-soft)}
.table tr.hb-state td{height:64px;color:var(--muted);text-align:left;padding-left:0;cursor:default}
.table tr.hb-state:hover td{background:var(--surface)}
.table tr.hb-loading td{color:var(--muted)}
.table.compact td{height:var(--row-compact)}
/* hb-table chrome */
.hb-table-wrap{position:relative;min-width:0;max-width:100%}
.hb-table-bar{position:relative;display:flex;justify-content:flex-end;margin-bottom:6px}
.hb-table-colbtn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font:500 12px/1 var(--font);color:var(--ink-2);cursor:pointer}
.hb-table-colbtn:hover{background:var(--hover)}
.hb-table-colbtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
.hb-cm{position:absolute;right:0;top:34px;z-index:20;width:240px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--e-pop)}
.hb-cm-hd{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 8px;font-size:13px}
.hb-cm ul{list-style:none;margin:0;padding:0}
.hb-cm li{display:flex;align-items:center;justify-content:space-between;gap:8px;height:34px;padding:0 6px;border-radius:6px;font-size:13px}
.hb-cm li:hover{background:var(--hover)}
.hb-cm li.is-over{box-shadow:inset 0 2px 0 var(--accent)}
.hb-cm .check{font-size:13px;align-items:center}
.hb-grip{border:0;background:none;color:var(--faint);cursor:grab;font-size:12px;letter-spacing:-2px;padding:4px 6px;border-radius:4px}
.hb-grip:focus-visible{color:var(--accent)}
.hb-table-scroll{overflow-x:auto;max-width:100%;overscroll-behavior-x:contain}
.hb-table-scroll .hb-table tr>:first-child{position:sticky;left:0;z-index:1}
.hb-table-wrap.is-scrolled .hb-table tr>:first-child{box-shadow:inset -1px 0 0 var(--line)}
.hb-table th[draggable=true]{cursor:grab}
.hb-table th.is-over{box-shadow:inset 2px 0 0 var(--accent)}
.hb-sort{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer}
.hb-sort:hover{color:var(--ink)}
.hb-table th.is-sorted{color:var(--ink);font-weight:600}
.hb-caret{font-size:9px;line-height:1;color:var(--faint);opacity:0;transition:opacity var(--d-fast) var(--ease)}
.hb-sort:hover .hb-caret,.hb-sort:focus-visible .hb-caret{opacity:.8}
.is-sorted .hb-caret{opacity:1;color:var(--accent)}
@media (hover:none){.hb-caret{opacity:.45}}
@media (max-width:860px){.hb-table-scroll .hb-table tr>:first-child{padding-right:12px}}

/* ---------- stepper ---------- */
.stepper{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.stepper li{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;height:36px;padding:0 10px;border-radius:var(--r-md);font-size:var(--t-md);color:var(--muted)}
.stepper .dot{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;font:600 11px/1 var(--font);color:var(--muted);background:var(--surface)}
.stepper .done{color:var(--ink-2)}
.stepper .done .dot{background:var(--ink);border-color:var(--ink);color:#fff}
.stepper .cur{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--line)}
.stepper .cur .dot{border-color:var(--accent);color:var(--accent)}
.stepper .meta{font-size:var(--t-xs);color:var(--muted);font-weight:400}
.hsteps{display:flex;gap:6px;align-items:center;font-size:var(--t-sm);color:var(--muted)}
.hsteps .bar{display:flex;gap:4px}.hsteps .bar i{width:24px;height:3px;border-radius:2px;background:var(--line-strong)}
.hsteps .bar i.done{background:var(--ink)}.hsteps .bar i.now{background:var(--accent)}

/* ---------- timeline ---------- */
.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:4px 12px;padding-bottom:20px}
.tl li::before{content:'';position:absolute;left:9.25px;top:20px;bottom:0;width:1.5px;background:var(--line-strong)}
.tl li:last-child{padding-bottom:0}.tl li:last-child::before{display:none}
.tl li.done::before{background:var(--ink)}
.tl .dot{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--surface);display:grid;place-items:center;position:relative}
.tl .done .dot{background:var(--ink);border-color:var(--ink);color:#fff}
.tl .done .dot .ic{width:12px;height:12px;stroke-width:2}
.tl .now .dot{border-color:var(--accent)}
.tl .now .dot::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent)}
.tl .held .dot{border-color:var(--warn)}.tl .held .dot::after{content:'';width:8px;height:8px;border-radius:1px;background:var(--warn)}
.tl .ttl{font-weight:600;font-size:var(--t-md)}
.tl .todo .ttl{color:var(--muted);font-weight:500}
.tl .when{font-size:var(--t-xs);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.tl .desc{grid-column:2/-1;font-size:var(--t-sm);color:var(--muted)}

/* ---------- panel, dialog, sheet ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.panel-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}
.panel-hd h3{font-size:var(--t-md);font-weight:600;letter-spacing:-.005em}
.panel-bd{padding:16px 20px}
.dialog{width:min(480px,100%);background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--e-dialog);border:0;padding:0;color:var(--ink)}
.dialog::backdrop{background:rgba(14,15,17,.36)}
.dialog[open]{animation:dlg var(--d-base) var(--ease)}
.dialog .hd,.sheet-side .hd{padding:20px 24px 0}
.dialog .hd h2,.sheet-side .hd h2{font-size:var(--t-h3)}
.dialog .hd p,.sheet-side .hd p{margin-top:6px;color:var(--ink-2)}
.dialog .bd,.sheet-side .bd{padding:16px 24px}
.dialog .ft,.sheet-side .ft{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--line);background:var(--hover);border-radius:0 0 var(--r-lg) var(--r-lg)}
@keyframes dlg{from{opacity:0;transform:translateY(6px) scale(.985)}}
.sheet-side{display:flex;flex-direction:column;width:420px;max-width:100%;background:var(--surface);box-shadow:var(--e-dialog);border-left:1px solid var(--line)}
.menu{min-width:200px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--e-pop)}
.menu button{display:flex;width:100%;align-items:center;gap:10px;height:32px;padding:0 10px;border:0;border-radius:6px;background:none;font:500 var(--t-md)/1 var(--font);color:var(--ink);cursor:pointer;text-align:left}
.menu button:hover,.menu button.is-hover{background:var(--sunken)}

/* ---------- email card (transactional email, also the in-app mock inbox) ---------- */
.email{max-width:600px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.email-meta{padding:14px 32px;border-bottom:1px solid var(--line);font-size:var(--t-xs);color:var(--muted);display:grid;gap:2px}
.email-meta b{color:var(--ink);font-weight:500}
.email-hd{display:flex;align-items:center;gap:10px;padding:24px 32px 0}
.email-bd{padding:20px 32px 28px;display:grid;gap:14px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.email-bd h1{font-size:var(--t-h2);color:var(--ink)}
.email-bd .btn{justify-self:start}
.email-ft{padding:16px 32px;background:var(--hover);border-top:1px solid var(--line);font-size:var(--t-xs);color:var(--muted)}

/* ---------- empty / error ---------- */
.empty{display:grid;justify-items:start;gap:8px;padding:var(--s8);border:1px dashed var(--line-strong);border-radius:var(--r-lg);max-width:560px}
.empty h3{font-size:var(--t-lg)}
.empty p{color:var(--muted);max-width:52ch}
.empty .acts{display:flex;gap:8px;margin-top:8px}

/* ---------- skeleton ---------- */
.skel{display:block;height:12px;border-radius:4px;background:var(--sunken)}

/* ---------- app shell ---------- */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh;min-height:100dvh;background:var(--canvas)}
.side{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:20px;padding:16px 12px}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px;font-weight:700;font-size:15px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.brand img{width:22px;height:22px}
.org{display:flex;align-items:center;gap:8px;width:100%;padding:8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font:inherit;text-align:left;cursor:pointer}
.org .av{width:24px;height:24px;border-radius:6px;background:var(--ink);color:#fff;display:grid;place-items:center;font:600 12px/1 var(--font);flex:none}
.org b{display:block;font-size:var(--t-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org small{display:block;font-size:var(--t-xs);color:var(--muted)}
.org>span{min-width:0;flex:1}
.nav{display:grid;gap:1px}
.nav a{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--r-md);color:var(--ink-2);text-decoration:none;font-weight:500;font-size:var(--t-md)}
.nav a:hover{background:var(--sunken);color:var(--ink)}
.nav a[aria-current=page]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 0 0 1px var(--line)}
.nav a[aria-current=page] .ic{color:var(--accent)}
.nav .badge{margin-left:auto;font-size:var(--t-xs);font-weight:600;color:var(--warn);background:var(--warn-soft);border-radius:10px;padding:2px 7px}
.nav-label{font-size:var(--t-xs);color:var(--muted);padding:0 10px;margin:8px 0 4px;font-weight:500}
.side .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:8px;font-size:var(--t-sm)}
.side .me .av{width:28px;height:28px;border-radius:50%;background:var(--sunken);display:grid;place-items:center;font-weight:600;font-size:12px;color:var(--ink-2)}
.main{margin:8px 8px 8px 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);min-width:0}
.page{max-width:1120px;margin:0 auto;padding:28px 40px 64px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px}
.mobile-bar{display:none}
.search{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;width:260px;border:1px solid var(--line);border-radius:var(--r-md);color:var(--muted);font-size:var(--t-sm);background:var(--hover)}
.search kbd{margin-left:auto;font:500 11px/1 var(--mono);border:1px solid var(--line-strong);border-radius:4px;padding:2px 5px;color:var(--muted);background:var(--surface)}

/* ---------- auth layout (sign-up, sign-in): .auth > .auth-main + aside.ctx ---------- */
.page-surface{background:var(--surface)}
.auth{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:100vh;min-height:100dvh}
.auth-main{display:flex;flex-direction:column;padding:24px 56px calc(24px + env(safe-area-inset-bottom,0px))}
.auth-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.auth-top .t-sm{font-size:var(--t-sm);color:var(--muted)}
.auth-form{width:100%;max-width:440px;margin:0;padding:clamp(48px,13vh,128px) 0 48px;flex:1;margin-left:clamp(0px,8vw,120px)}
.auth-form h1{margin-top:20px}
.auth-form .lede{margin-top:10px;max-width:40ch}
.auth-form form{margin-top:32px;display:grid;gap:20px}
.auth-form .row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.auth-form .fine{font-size:var(--t-xs);color:var(--muted);max-width:44ch}
.warnhelp{font-size:var(--t-xs);line-height:1.45;color:var(--warn);display:flex;gap:6px}
.warnhelp .ic{width:14px;height:14px;margin-top:1px}
.auth-foot{display:flex;gap:16px;font-size:var(--t-xs);color:var(--muted)}
.auth-foot a{color:var(--muted)}
.ctx{background:var(--canvas);border-left:1px solid var(--line);padding:clamp(48px,13vh,128px) 56px 40px;display:flex;flex-direction:column;gap:36px}
.ctx h2{font-size:var(--t-lg);letter-spacing:-.01em}
.ctx .stepper{margin-top:14px}
.ctx .stepper li{height:auto;min-height:44px;padding:8px 10px}
.ctx .stepper li>span:nth-child(2) small{display:block;font-size:var(--t-xs);color:var(--muted);font-weight:400}
.ready{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;font-size:var(--t-md);color:var(--ink-2)}
.ready li{display:flex;gap:10px;align-items:flex-start}
.ready .ic{color:var(--muted);margin-top:2px}
.sent{display:grid;gap:12px}
.sent .addr code{font-family:var(--font);font-weight:600;font-size:var(--t-md)}
@media (max-width:1100px){.auth-main{padding:24px 32px}.ctx{padding:56px 32px 32px}.auth-form{margin-left:0}}
@media (max-width:860px){
  .auth{grid-template-columns:1fr}
  .auth-main{padding:calc(16px + env(safe-area-inset-top,0px)) 16px 16px}
  .auth-form{padding:40px 0 40px;margin:0}
  .ctx{border-left:0;border-top:1px solid var(--line);padding:32px 16px calc(32px + env(safe-area-inset-bottom,0px))}
  .auth-top .t-sm span{display:none}
}

/* ---------- account home: .overview (balance + receive panel), .sec-hd ---------- */
.overview{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:start;margin-top:28px}
.bal-label{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);color:var(--muted);font-weight:500}
.bal{margin-top:10px}
.bal-meta{margin-top:10px;font-size:var(--t-sm);color:var(--muted);display:flex;gap:16px;flex-wrap:wrap}
.bal-meta b{color:var(--ink);font-weight:600}
.bal-acts{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap}
.overview .banner{margin-top:28px}
.acct .panel-bd{display:grid;gap:18px}
.acct h4{font-size:var(--t-xs);font-weight:500;color:var(--muted);margin-bottom:6px}
.acct .kv dt,.acct .kv dd{padding:8px 0;font-size:var(--t-sm)}
.acct .kv dd .addr{justify-content:flex-end}.acct .kv dd .copy{padding:0 6px}
.acct .dep-addr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 12px;background:var(--hover);border:1px solid var(--line);border-radius:var(--r-md)}
.acct .net{font-size:var(--t-xs);color:var(--warn);display:flex;gap:6px;align-items:center;margin-top:8px}
.acct .net .ic{width:13px;height:13px}
.sec-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:48px 0 12px;flex-wrap:wrap}
.sec-hd h2{font-size:var(--t-h3)}
.foot-note{margin-top:14px;font-size:var(--t-xs);color:var(--muted)}
@media (max-width:1100px){.overview{grid-template-columns:1fr}.acct{max-width:560px}}
@media (max-width:860px){
  .hide-sm{display:none}
  .money-xl{font-size:36px}
  .sec-hd{margin-top:36px}
}

@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{display:none}
  .main{margin:0;border:0;border-radius:0}
  .mobile-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:5;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;background:var(--surface);border-bottom:1px solid var(--line)}
  .page{padding:20px 16px 48px}
  .fgroup{grid-template-columns:1fr;gap:var(--s4)}
  .fgroup .fields{grid-template-columns:1fr}
  .search{display:none}
  .banner{grid-template-columns:auto minmax(0,1fr)}
  .banner .acts{grid-column:2;justify-self:start}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}