/* Forward Book Capital — front-end prototype theme
   Navy / electric-blue / gold · Space Grotesk · Inter · JetBrains Mono.
   Shared across every screen. Illustrative seed data only. */

:root{
  --navy:#0B1120; --navy-2:#0E1528; --blue:#16BAF2; --blue-dim:rgba(22,186,242,0.08);
  --blue-line:rgba(22,186,242,0.25); --gold:#C9A84C; --gold-2:#E8C96A;
  --text:#1A1F2E; --muted:#64748B; --line:#E2E8F0; --red:#EF4444; --green:#22C55E;
  --blue-ink:#0C74A8; --blue-num:#0A93C7; --ease-out:cubic-bezier(0.22,1,0.36,1); --t-fast:150ms; --t-med:220ms;
  --amber:#F59E0B; --bg:#F8FAFC; --white:#FFFFFF;
  /* semantic surface / ink tokens — light values; dark mode is a token swap */
  --surface:#FFFFFF; --surface-2:#F1F5F9; --zebra:#FAFCFE; --track:#EEF2F6;
  --ink-2:#374151; --head-ink:var(--navy);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
body{font-family:"Inter",system-ui,sans-serif;color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.mono{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums}
.serif{font-family:"Space Grotesk",serif}
.eyebrow{font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--blue-ink);font-weight:500}
.muted{color:var(--muted)}

.app{display:flex;min-height:100vh}

/* ---- SIDEBAR ---- */
.sidebar{width:236px;flex-shrink:0;background:var(--navy);color:rgba(255,255,255,0.6);
  padding:22px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar .brand{font-family:"Space Grotesk",serif;font-size:21px;font-weight:600;color:var(--blue);
  letter-spacing:-0.01em;padding:4px 12px 4px;line-height:1.1}
.sidebar .brand span{display:block;font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:0.18em;
  text-transform:uppercase;color:rgba(255,255,255,0.55);margin-top:6px}
.navgroup{margin-top:26px}
.navgroup .gl{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.55);
  padding:0 12px;margin-bottom:8px;font-weight:500}
.sidebar a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:7px;font-size:13px;
  color:rgba(255,255,255,0.6);margin-bottom:2px}
.sidebar a svg{width:16px;height:16px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.6}
.sidebar a.active{color:var(--blue);background:rgba(22,186,242,0.1)}
.sidebar a:hover:not(.active){color:#fff}
.sidebar .who{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid rgba(255,255,255,0.08)}
.sidebar .who .av{width:30px;height:30px;border-radius:50%;background:rgba(22,186,242,0.14);color:var(--blue);
  display:grid;place-items:center;font-family:"JetBrains Mono",monospace;font-size:11px}
.sidebar .who .nm{font-size:12.5px;color:#fff;line-height:1.2}
.sidebar .who .rl{font-size:10.5px;color:rgba(255,255,255,0.55)}

/* ---- MAIN ---- */
main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:16px;padding:16px 30px;border-bottom:1px solid var(--line);background:var(--surface)}
.search{flex:1;max-width:360px;display:flex;align-items:center;gap:9px;border:1px solid var(--line);
  border-radius:7px;padding:8px 12px;color:var(--muted);font-size:13px;background:var(--surface)}
.search svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.topbar .spacer{flex:1}
.modepill{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-family:"JetBrains Mono",monospace;
  color:#6b4e0a;background:rgba(201,168,76,0.14);border:1px solid rgba(201,168,76,0.4);padding:5px 11px;border-radius:999px}
.modepill .d{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.btn{font-family:"Inter",sans-serif;font-size:13px;font-weight:500;padding:9px 16px;border-radius:7px;
  border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}
.btn-primary{background:var(--blue);color:#04222e}
.btn-navy{background:var(--navy);color:#fff}
.btn-ghost{background:transparent;color:var(--head-ink);border-color:var(--line)}
.btn-sm{padding:6px 12px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.iconbtn{width:38px;height:38px;border-radius:7px;border:1px solid var(--line);background:var(--surface);display:grid;
  place-items:center;color:var(--muted);cursor:pointer}
.iconbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}

.content{padding:30px;max-width:1320px;width:100%}
.pagehead{display:flex;align-items:flex-end;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.pagehead h1{font-family:"Space Grotesk",serif;font-size:40px;font-weight:600;letter-spacing:-0.02em;
  line-height:1.02;color:var(--head-ink)}
.pagehead .sub{font-size:12.5px;color:var(--muted);margin-top:4px}
.pagehead .ph-actions{margin-left:auto;display:flex;gap:10px}

/* stat strip */
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--blue-line);
  border-radius:10px;overflow:hidden;background:#fff;margin-bottom:24px}
.statstrip>div{padding:18px 20px;border-right:1px solid var(--line)}
.statstrip>div:last-child{border-right:none}
.statstrip .n{font-family:"Space Grotesk",serif;font-size:32px;font-weight:600;color:var(--blue-num);line-height:1}
.statstrip .k{font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.statstrip .delta{font-family:"JetBrains Mono",monospace;font-size:11px;margin-top:6px}
.statstrip .delta.up{color:#15803d}.statstrip .delta.flat{color:var(--muted)}.statstrip .delta.down{color:#b91c1c}

/* layout grids */
.grid{display:grid;grid-template-columns:1.7fr 1fr;gap:24px;align-items:start}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.grid-eq{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.stack{display:flex;flex-direction:column;gap:24px}
.panel{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.panel.mt{margin-top:24px}
.panel .ph{display:flex;align-items:center;gap:12px;padding:18px 20px 14px}
.panel .ph .pt{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
.panel .ph .pn{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted)}
.panel .ph .ph-r{margin-left:auto;display:flex;gap:8px;align-items:center}
.panel .ph .lk{font-size:12px;color:var(--blue-ink)}
.panel .pbody{padding:0 20px 20px}
.panel .pbody.pt0{padding-top:0}
.panel .pbody.p{padding:18px 20px 20px}

/* table */
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:left;padding:10px 14px;background:var(--navy);color:rgba(255,255,255,0.82);font-size:10px;
  letter-spacing:0.08em;text-transform:uppercase;font-weight:500}
thead th:first-child{padding-left:20px}thead th:last-child{padding-right:20px;text-align:right}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle}
tbody td:first-child{padding-left:20px;color:var(--head-ink);font-weight:500}
tbody td:last-child{padding-right:20px;text-align:right}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even) td{background:var(--zebra)}
tbody tr.click{cursor:pointer}
tbody tr.click:hover td{background:var(--blue-dim)}
td.fig,th.fig{font-family:"JetBrains Mono",monospace;color:var(--head-ink);font-variant-numeric:tabular-nums;text-align:right}
td.l,th.l{text-align:left !important}

/* tags */
.tag{display:inline-block;font-size:10.5px;font-weight:500;padding:3px 10px;border-radius:999px;letter-spacing:0.02em;white-space:nowrap}
.tag-blue{background:var(--blue-dim);color:#0c6f95}
.tag-green{background:rgba(34,197,94,0.1);color:#15803d}
.tag-amber{background:rgba(245,158,11,0.12);color:#92400e}
.tag-red{background:rgba(239,68,68,0.1);color:#b91c1c}
.tag-navy{background:rgba(11,17,32,0.08);color:var(--navy)}
.tag-gold{background:rgba(201,168,76,0.14);color:#6b4e0a}

/* approver chips */
.apprv{display:inline-flex}
.apprv .a{width:24px;height:24px;border-radius:50%;border:1.5px solid #fff;margin-left:-6px;display:grid;
  place-items:center;font-family:"JetBrains Mono",monospace;font-size:9.5px;color:#fff;background:var(--navy)}
.apprv .a:first-child{margin-left:0}
.apprv .a.b{background:var(--blue);color:#04222e}
.apprv .a.pend{background:var(--surface);color:var(--muted);border:1.5px dashed var(--line)}

/* callout */
.callout{background:var(--blue-dim);border:1px solid var(--blue-line);padding:12px 16px;border-radius:8px;
  font-size:12.5px;color:var(--ink-2);margin:0 20px 16px}
.callout.gold{background:rgba(201,168,76,0.08);border-color:rgba(201,168,76,0.4);color:#6b4e0a}
.callout.red{background:rgba(239,68,68,0.07);border-color:rgba(239,68,68,0.35);color:#b91c1c}
.callout strong{color:var(--head-ink)}
.callout.inline{margin:0 0 16px}

/* broker scorecard */
.broker-id{display:flex;align-items:center;gap:14px;padding:18px 20px 16px;border-bottom:1px solid var(--line)}
.broker-id .mk{width:48px;height:48px;border-radius:10px;background:var(--navy);color:var(--blue);display:grid;
  place-items:center;font-family:"JetBrains Mono",monospace;font-size:15px;letter-spacing:0.04em}
.broker-id .nm{font-family:"Space Grotesk",serif;font-size:22px;font-weight:600;color:var(--head-ink);line-height:1.05}
.broker-id .mt{font-size:11.5px;color:var(--muted)}
.score-h{display:flex;align-items:baseline;gap:9px;padding:16px 20px 4px}
.score-h .big{font-family:"Space Grotesk",serif;font-size:34px;font-weight:600;color:var(--blue-num);line-height:1}
.score-h .out{font-size:12px;color:var(--muted)}
.score-h .cap{margin-left:auto}
.bars{padding:12px 20px 4px}
.bar{margin-bottom:11px}
.bar .l{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-2);margin-bottom:5px}
.bar .l .w{font-family:"JetBrains Mono",monospace;color:var(--muted);font-size:10.5px}
.bar .l .s{font-family:"JetBrains Mono",monospace;color:var(--head-ink)}
.bar .track{height:6px;border-radius:999px;background:var(--track);overflow:hidden}
.bar .fill{height:100%;border-radius:999px;background:var(--blue)}
.drows{padding:12px 20px 20px;border-top:1px solid var(--line);margin-top:6px}
.drow{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.drow:last-child{border-bottom:none}
.drow .k{font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:var(--muted)}
.drow .v{font-size:13px;font-weight:500;color:var(--head-ink)}
.drow .v.fig{font-family:"JetBrains Mono",monospace}

/* waterfall */
.wstep{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);border-radius:8px;margin-bottom:8px;background:var(--surface)}
.wstep .wl{font-size:12.5px;font-weight:500;color:var(--head-ink)}
.wstep .wd{font-size:11px;color:var(--muted)}
.wstep .wv{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:13.5px;color:var(--head-ink);font-variant-numeric:tabular-nums}
.wstep.neg .wv{color:#b91c1c}
.wstep.accent{border-color:var(--blue-line);background:var(--blue-dim)}
.wstep.gold{border-color:rgba(201,168,76,0.4);background:rgba(201,168,76,0.07)}
.wchev{display:flex;justify-content:center;color:var(--line);margin:1px 0}
.wchev svg{width:14px;height:14px;stroke:var(--muted);opacity:.5;fill:none;stroke-width:1.6}

/* audit feed */
.ev{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--line)}
.ev:last-child{border-bottom:none}
.ev .seq{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--blue);background:var(--navy);
  border-radius:6px;padding:4px 8px;height:fit-content}
.ev .et{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--head-ink);font-weight:500}
.ev .em{font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.45}
.ev .meta{display:flex;gap:10px;align-items:center;margin-top:6px;flex-wrap:wrap}
.ev .hash{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--muted)}
.ev .who{font-size:10.5px;color:var(--muted)}
.chainok{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#15803d;margin:0 20px 14px;font-weight:500}
.chainok .d{width:7px;height:7px;border-radius:50%;background:var(--green)}

/* ---- forms ---- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;padding:18px 20px 22px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1 / -1}
.field label{font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
.field input,.field select,.field textarea{font-family:"Inter",sans-serif;font-size:13.5px;color:var(--text);
  padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-dim)}
.field .hint{font-size:11px;color:var(--muted)}
.form-actions{display:flex;gap:10px;justify-content:flex-end;padding:0 20px 20px}

/* pipeline / stepper */
.pipeline{display:flex;gap:0;padding:18px 20px;overflow-x:auto}
.pstep{flex:1;min-width:120px;text-align:center;position:relative;padding:0 6px}
.pstep::before{content:"";position:absolute;top:13px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0}
.pstep:first-child::before{display:none}
.pstep .dot{position:relative;z-index:1;width:26px;height:26px;border-radius:50%;margin:0 auto 8px;display:grid;
  place-items:center;background:var(--surface);border:2px solid var(--line);color:var(--muted);font-family:"JetBrains Mono",monospace;font-size:11px}
.pstep.done .dot{background:var(--blue);border-color:var(--blue);color:#04222e}
.pstep.done::before{background:var(--blue)}
.pstep.current .dot{border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 4px var(--blue-dim)}
.pstep .pl{font-size:11.5px;color:var(--head-ink);font-weight:500}
.pstep .pd{font-size:10.5px;color:var(--muted)}

/* lifecycle vertical */
.life{padding:8px 20px 20px}
.lrow{display:flex;align-items:center;gap:12px;padding:9px 0}
.lrow .ldot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex-shrink:0}
.lrow.done .ldot{background:var(--blue);border-color:var(--blue)}
.lrow.current .ldot{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-dim)}
.lrow .ll{font-size:13px;color:var(--head-ink);font-weight:500}
.lrow .lm{font-size:11px;color:var(--muted)}
.lrow .lt{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted)}

/* key-value detail header */
.detail-head{display:flex;align-items:center;gap:16px;padding:20px;border-bottom:1px solid var(--line)}
.detail-head .mk{width:54px;height:54px;border-radius:11px;background:var(--navy);color:var(--blue);display:grid;
  place-items:center;font-family:"JetBrains Mono",monospace;font-size:16px}
.detail-head h2{font-family:"Space Grotesk",serif;font-size:26px;font-weight:600;color:var(--head-ink);line-height:1.05}
.detail-head .dm{font-size:12px;color:var(--muted)}
.kvgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.kvgrid .kv{background:var(--surface);padding:14px 18px}
.kvgrid .kv .k{font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
.kvgrid .kv .v{font-size:15px;color:var(--head-ink);font-weight:500;margin-top:4px}
.kvgrid .kv .v.fig{font-family:"JetBrains Mono",monospace}

/* portal hero */
.portal-hero{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;border-radius:14px;
  padding:30px 32px;margin-bottom:24px;border:1px solid var(--blue-line)}
.portal-hero .eyebrow{color:var(--blue)}
.portal-hero h1{font-family:"Space Grotesk",serif;font-size:36px;font-weight:600;margin-top:6px}
.portal-hero .pv{display:flex;gap:40px;margin-top:22px;flex-wrap:wrap}
.portal-hero .pv .n{font-family:"Space Grotesk",serif;font-size:30px;color:var(--blue)}
.portal-hero .pv .k{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-top:4px}

.footline{padding:22px 30px 40px;color:var(--muted);font-size:11.5px}
.footline .mono{color:var(--blue-ink)}

/* ===== Sprint 6 components (live trades, broker contacts/comms/forecast, capital allocation, notifications) ===== */

/* Space Grotesk heading polish — tighter, more 'terminal' */
.pagehead h1{letter-spacing:-0.015em}
.eyebrow{font-weight:500}

/* live ticker / pulse */
.livedot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);position:relative;flex-shrink:0}
.livedot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--green);opacity:.5;animation:lpulse 1.8s ease-out infinite}
@keyframes lpulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.livebadge{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-family:"JetBrains Mono",monospace;color:#15803d;background:rgba(34,197,94,0.1);padding:4px 10px;border-radius:999px}

/* live trade cards */
.livegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;padding:16px 20px 20px}
.livecard{border:1px solid var(--line);border-radius:11px;padding:14px;background:var(--surface);position:relative;overflow:hidden}
.livecard.warn{border-color:rgba(245,158,11,0.45)}
.livecard .lc-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.livecard .lc-ref{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--head-ink);font-weight:500}
.livecard .lc-pair{font-family:"Space Grotesk",sans-serif;font-size:18px;font-weight:600;color:var(--head-ink);letter-spacing:-0.01em}
.livecard .lc-sub{font-size:11px;color:var(--muted)}
.livecard .lc-px{margin-left:auto;text-align:right}
.livecard .lc-px .v{font-family:"JetBrains Mono",monospace;font-size:15px;color:var(--head-ink)}
.livecard .lc-px .d{font-family:"JetBrains Mono",monospace;font-size:11px}
.lc-px .d.up{color:#15803d}.lc-px .d.down{color:#b91c1c}
.livecard .lc-row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-2);margin-top:7px}
.livecard .lc-row .mono{color:var(--head-ink)}
.lc-mtrack{height:5px;border-radius:999px;background:var(--track);overflow:hidden;margin-top:10px}
.lc-mtrack .f{height:100%;border-radius:999px;background:var(--blue)}
.lc-mtrack .f.amber{background:var(--amber)}

/* contact cards */
.contactgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:14px 20px 20px}
.contact{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:12px}
.contact .cav{width:38px;height:38px;border-radius:50%;background:var(--blue-dim);color:#0c6f95;display:grid;place-items:center;font-family:"JetBrains Mono",monospace;font-size:12px;flex-shrink:0}
.contact .cn{font-size:13.5px;font-weight:500;color:var(--head-ink)}
.contact .cr{font-size:11px;color:var(--muted)}
.contact .cc{font-size:11px;color:var(--blue-ink);margin-top:5px;line-height:1.5;word-break:break-word}
.contact .cc i{color:var(--muted)}
.contact .pri{font-size:9.5px;letter-spacing:0.06em;text-transform:uppercase;color:#6b4e0a;background:rgba(201,168,76,0.16);padding:2px 7px;border-radius:999px;margin-top:6px;display:inline-block}

/* message thread */
.thread{padding:14px 20px;display:flex;flex-direction:column;gap:12px;max-height:320px;overflow:auto}
.msg{max-width:78%;padding:9px 13px;border-radius:12px;font-size:13px;line-height:1.5}
.msg .mh{font-size:10.5px;color:var(--muted);margin-bottom:3px}
.msg.them{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:3px}
.msg.us{align-self:flex-end;background:var(--blue-dim);border:1px solid var(--blue-line);border-bottom-right-radius:3px}
.composer{display:flex;gap:8px;padding:12px 20px 18px;border-top:1px solid var(--line)}
.composer input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-family:"Inter",sans-serif;font-size:13px}
.composer input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-dim)}

/* capital allocation visualisation */
.allocbar{display:flex;height:46px;border-radius:10px;overflow:hidden;border:1px solid var(--line);margin:4px 0 6px}
.allocbar .seg{display:flex;flex-direction:column;justify-content:center;padding:0 12px;color:#fff;font-size:11px;min-width:0;white-space:nowrap;overflow:hidden}
.allocbar .seg .sv{font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:500}
.allocbar .seg .sk{font-size:10px;opacity:.85;text-transform:uppercase;letter-spacing:0.06em}
.seg-buffer{background:#475569}.seg-deployed{background:var(--blue);color:#04222e}.seg-forecast{background:#7c9cf2;color:#0B1120}.seg-undeployed{background:#cbd5e1;color:#334155}
.alloclegend{display:flex;gap:18px;flex-wrap:wrap;padding:2px 0 10px;font-size:11.5px;color:var(--muted)}
.alloclegend .lg{display:flex;align-items:center;gap:6px}
.alloclegend .sw{width:11px;height:11px;border-radius:3px}

/* forecast flow (lender capital -> forecasted trades) */
.flow{display:grid;grid-template-columns:200px 1fr;gap:0;padding:8px 20px 20px}
.flow .src,.flow .dst{display:flex;flex-direction:column;gap:8px}
.fnode{border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:var(--surface)}
.fnode .fn{font-size:12.5px;font-weight:500;color:var(--head-ink)}
.fnode .ff{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted);margin-top:2px}
.fnode.alloc{border-color:var(--blue-line);background:var(--blue-dim)}
.fnode.warn{border-color:rgba(245,158,11,0.45);background:rgba(245,158,11,0.06)}

/* forecast editable inputs */
.fc-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 0.8fr;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.fc-row:last-child{border-bottom:none}
.fc-row input{padding:7px 10px;border:1px solid var(--line);border-radius:7px;font-family:"JetBrains Mono",monospace;font-size:12.5px;width:100%}
.fc-row input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-dim)}
.fc-head{display:grid;grid-template-columns:1.4fr 1fr 1fr 0.8fr;gap:10px;font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);padding-bottom:6px}

/* notifications */
.notlist{padding:6px 0}
.not{display:flex;gap:13px;padding:13px 20px;border-bottom:1px solid var(--line);align-items:flex-start}
.not:last-child{border-bottom:none}
.not.unread{background:var(--blue-dim)}
.not .nic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;font-size:15px}
.nic.red{background:rgba(239,68,68,0.12);color:#b91c1c}.nic.amber{background:rgba(245,158,11,0.14);color:#92400e}
.nic.blue{background:var(--blue-dim);color:#0c6f95}.nic.green{background:rgba(34,197,94,0.12);color:#15803d}.nic.gold{background:rgba(201,168,76,0.16);color:#6b4e0a}
.not .nt{font-size:13px;color:var(--head-ink);font-weight:500}
.not .nm{font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.45}
.not .nw{font-size:10.5px;color:var(--muted);margin-top:5px}
.not .ndot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:6px}

/* bell badge */
.iconbtn{position:relative}
.iconbtn .badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:999px;background:#DC2626;color:#fff;font-size:10px;font-family:"JetBrains Mono",monospace;display:grid;place-items:center;padding:0 4px;border:2px solid #fff}

/* toggle pill */
.toggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:12px;color:var(--head-ink)}
.toggle .tk{width:34px;height:19px;border-radius:999px;background:#cbd5e1;position:relative;transition:background .15s}
.toggle .tk::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:left .15s}
.toggle.on .tk{background:var(--blue)}.toggle.on .tk::after{left:17px}

/* ===== Sprint 7 — gradient/flow visual pass, slide-over drawer, agentic assistant ===== */

/* softer flow + more breathing room */
.sidebar{background:linear-gradient(180deg,#0B1120 0%,#0E1528 55%,#0B1120 100%)}
.content{padding:34px 34px 30px}
.grid,.grid2,.grid-eq{gap:26px}
.statstrip{background:linear-gradient(180deg,#ffffff,#fbfdff);box-shadow:0 1px 0 rgba(22,186,242,0.04)}
.panel{box-shadow:0 1px 2px rgba(15,23,42,0.03)}
.panel .ph{padding:18px 22px 14px}
.panel .pbody{padding:0 22px 22px}
/* a gentle gradient band behind the section title so colour 'flows' rather than sits in hard blocks */
.panel .ph{background:linear-gradient(180deg,rgba(22,186,242,0.045),rgba(22,186,242,0));border-bottom:1px solid rgba(226,232,240,0.6)}
.panel .pbody.pt0,.panel .pbody.p{padding-top:14px}
/* detail header: gradient tint so the title area reads as a soft surface, not a hard box */
.detail-head{background:linear-gradient(135deg,rgba(22,186,242,0.07),rgba(22,186,242,0) 60%)}
.broker-id{background:linear-gradient(135deg,rgba(22,186,242,0.06),rgba(22,186,242,0) 60%)}
.pagehead{margin-bottom:30px}
/* stat numbers a touch calmer */
.statstrip .n{font-weight:600}

/* slide-over drawer — detail sits behind a click */
.scrim{position:fixed;inset:0;background:rgba(11,17,32,0.45);opacity:0;visibility:hidden;transition:opacity .2s;z-index:60}
.scrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(580px,94vw);background:var(--bg);
  box-shadow:-24px 0 60px rgba(11,17,32,0.28);transform:translateX(101%);transition:transform .26s cubic-bezier(.22,.61,.36,1);
  z-index:61;display:flex;flex-direction:column;overflow-y:auto}
.drawer.open{transform:none}
.drawer-head{position:sticky;top:0;background:linear-gradient(135deg,var(--navy),#13203b);color:#fff;
  padding:18px 22px;display:flex;align-items:center;gap:13px;z-index:2}
.drawer-head .mk{width:42px;height:42px;border-radius:10px;background:rgba(22,186,242,0.16);color:var(--blue);
  display:grid;place-items:center;font-family:"JetBrains Mono",monospace;font-size:14px}
.drawer-head h3{font-family:"Space Grotesk",sans-serif;font-size:19px;font-weight:600;color:#fff;line-height:1.1}
.drawer-head .ds{font-size:11.5px;color:rgba(255,255,255,0.55)}
.drawer-head .x{margin-left:auto;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  cursor:pointer;color:rgba(255,255,255,0.75);border:1px solid rgba(255,255,255,0.15)}
.drawer-head .x:hover{background:rgba(255,255,255,0.08);color:#fff}
.drawer-body{padding:18px 22px 30px}
.drawer-body .panel{margin-bottom:16px}

/* agentic assistant */
.asst-launch{display:inline-flex;align-items:center;gap:8px;font-family:"Inter",sans-serif;font-size:13px;font-weight:500;
  padding:9px 15px;border-radius:999px;border:1px solid var(--blue-line);
  background:linear-gradient(135deg,rgba(22,186,242,0.14),rgba(22,186,242,0.04));color:#0c6f95;cursor:pointer}
.asst-launch svg{width:15px;height:15px;stroke:#0c6f95;fill:none;stroke-width:1.7}
.assistant{position:fixed;top:0;right:0;height:100vh;width:min(440px,94vw);background:var(--white);
  box-shadow:-24px 0 60px rgba(11,17,32,0.28);transform:translateX(101%);transition:transform .26s cubic-bezier(.22,.61,.36,1);
  z-index:71;display:flex;flex-direction:column}
.assistant.open{transform:none}
.asst-head{background:linear-gradient(135deg,var(--navy),#13203b);color:#fff;padding:16px 20px;display:flex;align-items:center;gap:11px}
.asst-head .spark{width:30px;height:30px;border-radius:9px;background:rgba(22,186,242,0.18);color:var(--blue);display:grid;place-items:center}
.asst-head .spark svg{width:17px;height:17px;stroke:var(--blue);fill:none;stroke-width:1.7}
.asst-head .ht{font-family:"Space Grotesk",sans-serif;font-size:15px;font-weight:600;color:#fff}
.asst-head .hs{font-size:10.5px;color:rgba(255,255,255,0.55)}
.asst-head .x{margin-left:auto;cursor:pointer;color:rgba(255,255,255,0.7);font-size:20px;line-height:1}
.asst-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,#fbfdff,#f4f8fc)}
.asst-msg{max-width:88%;padding:10px 13px;border-radius:13px;font-size:13px;line-height:1.5}
.asst-msg.them{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:3px}
.asst-msg.us{align-self:flex-end;background:var(--blue-dim);border:1px solid var(--blue-line);border-bottom-right-radius:3px;color:#0c4a63}
.asst-msg .src{font-size:10.5px;color:var(--muted);margin-top:6px}
.asst-card{align-self:flex-start;max-width:92%;border:1px solid var(--blue-line);border-radius:12px;background:#fff;overflow:hidden}
.asst-card .ach{background:linear-gradient(135deg,rgba(22,186,242,0.1),rgba(22,186,242,0.02));padding:10px 13px;font-size:11px;
  letter-spacing:0.08em;text-transform:uppercase;color:#0c6f95;font-weight:500;border-bottom:1px solid var(--line)}
.asst-card .acb{padding:12px 13px;font-size:12.5px;color:#374151;line-height:1.5}
.asst-card .acb .k{color:var(--muted)}.asst-card .acb .v{color:var(--head-ink);font-weight:500}
.asst-card .acf{display:flex;gap:8px;padding:0 13px 13px;flex-wrap:wrap}
.asst-card .note{padding:9px 13px;font-size:11px;color:#92400e;background:rgba(245,158,11,0.08);border-top:1px solid var(--line)}
.asst-suggest{display:flex;flex-wrap:wrap;gap:7px;padding:0 0 4px}
.asst-chip{font-size:12px;padding:7px 11px;border-radius:999px;border:1px solid var(--blue-line);background:#fff;color:#0c6f95;cursor:pointer}
.asst-chip:hover{background:var(--blue-dim)}
.asst-input{display:flex;gap:8px;padding:12px 16px 16px;border-top:1px solid var(--line);background:#fff}
.asst-input input{flex:1;padding:10px 13px;border:1px solid var(--line);border-radius:999px;font-family:"Inter",sans-serif;font-size:13px}
.asst-input input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-dim)}
.asst-input button{border:none;background:var(--blue);color:#04222e;border-radius:999px;padding:0 16px;font-weight:600;cursor:pointer}

@media (max-width:1040px){.grid,.grid2,.grid-eq{grid-template-columns:1fr}.statstrip{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}.kvgrid{grid-template-columns:1fr 1fr}.flow{grid-template-columns:1fr}}
@media (max-width:760px){.sidebar{display:none}.kvgrid{grid-template-columns:1fr}}

/* The dark theme is defined once, as a token swap, at the end of this file
   (after all later light-value passes) so it wins by source order. */

/* ===== Readability + breathing-room pass (larger text, more space, less crowding) ===== */
html{font-size:16.5px}
body{line-height:1.65}
.content{padding:40px 40px 34px;max-width:1380px}
.grid,.grid2,.grid-eq{gap:30px}
.grid2{margin-top:30px}
.panel.mt,.stack{margin-top:0}
.stack{gap:30px}
.panel.mt{margin-top:30px}
.pagehead{margin-bottom:34px}
.pagehead h1{font-size:42px}
.pagehead .sub,.sub{font-size:13.5px}
.eyebrow{font-size:11.5px;letter-spacing:0.2em}

/* tables — bigger type, roomier rows */
table{font-size:14.5px}
thead th{padding:13px 16px;font-size:11px;letter-spacing:0.07em}
thead th:first-child{padding-left:22px}thead th:last-child{padding-right:22px}
tbody td{padding:15px 16px}
tbody td:first-child{padding-left:22px}tbody td:last-child{padding-right:22px}

/* panel headers + section labels */
.panel .ph{padding:20px 24px 15px}
.panel .pbody{padding:0 24px 24px}
.panel .ph .pt{font-size:12.5px;letter-spacing:0.13em}
.panel .ph .pn{font-size:12.5px}
.panel .ph .lk,.panel .ph .ph-r .lk{font-size:13px}

/* stat strip — larger, airier */
.statstrip>div{padding:24px 24px}
.statstrip .n{font-size:36px}
.statstrip .k{font-size:12px;letter-spacing:0.08em;margin-top:10px}
.statstrip .delta{font-size:12px}

/* sidebar */
.sidebar{width:248px;padding:24px 18px}
.sidebar a{font-size:14px;padding:11px 13px;gap:12px}
.navgroup .gl{font-size:11px}
.sidebar .brand{font-size:22px}

/* key-value + detail */
.kvgrid .kv{padding:17px 20px}
.kvgrid .kv .k{font-size:11.5px}
.kvgrid .kv .v{font-size:16px}
.detail-head{padding:24px}
.detail-head h2{font-size:28px}
.detail-head .dm{font-size:13px}
.drow{padding:11px 0}
.drow .k{font-size:12.5px}
.drow .v{font-size:14px}

/* tags + callouts a touch larger */
.tag{font-size:11.5px;padding:4px 11px}
.callout{font-size:13.5px;padding:14px 18px;line-height:1.6}

/* waterfall / lists / events / cards — lift the smallest text */
.wstep{padding:14px 16px;margin-bottom:10px}
.wstep .wl{font-size:13.5px}.wstep .wd{font-size:12px}.wstep .wv{font-size:14.5px}
.bar .l{font-size:12.5px}
.ev{padding:15px 0}
.ev .et{font-size:13px}.ev .em{font-size:13px}.ev .hash,.ev .who{font-size:11.5px}
.lc-sub{font-size:12px}.livecard .lc-row{font-size:12.5px}
.contact .cn{font-size:14px}.contact .cr,.contact .cc{font-size:12px}
.not{padding:15px 24px;gap:14px}
.not .nt{font-size:14px}.not .nm{font-size:12.5px}.not .nw{font-size:11.5px}
.msg,.asst-msg{font-size:13.5px}
.fnode .fn{font-size:13px}.fnode .ff{font-size:12px}
.pstep .pl{font-size:12.5px}.pstep .pd{font-size:11px}
.lrow .ll{font-size:13.5px}.lrow .lm{font-size:11.5px}
.field label{font-size:11.5px}
.footline{font-size:12px;padding:28px 40px 44px}

/* let dense two-column detail blocks stack more often so they don't feel packed */
@media (max-width:1180px){.grid{grid-template-columns:1fr}}


/* ===== Design elevation (ported from app globals.css, 10 Jun 2026) ===== */
:focus-visible{outline:2px solid var(--blue-ink);outline-offset:2px;border-radius:3px}
.sidebar :focus-visible,thead :focus-visible{outline-color:var(--blue)}
.field input:focus,.field select:focus,.field textarea:focus,.composer input:focus,
.fc-row input:focus,.asst-input input:focus{outline:none}
.pagehead h1,.detail-head h2,.broker-id .nm{text-wrap:balance}
.btn{min-height:38px;transition:background-color var(--t-fast) var(--ease-out),
  border-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),
  transform var(--t-fast) var(--ease-out)}
.btn-sm{min-height:30px}
.btn-primary:hover:not(:disabled){background:#45C8F5}
.btn-navy:hover:not(:disabled){background:#16203A}
.btn-ghost:hover:not(:disabled){background:var(--blue-dim);border-color:var(--blue-line)}
.btn:active:not(:disabled){transform:translateY(1px)}
.iconbtn{transition:color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),
  background-color var(--t-fast) var(--ease-out)}
.iconbtn:hover{color:var(--navy);border-color:#cbd5e1;background:var(--bg)}
.sidebar a{transition:color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
.sidebar a:hover:not(.active){background:rgba(255,255,255,0.05)}
tbody tr.click td{transition:background-color var(--t-fast) var(--ease-out)}
.not,.contact,.fnode,.wstep,.livecard{transition:border-color var(--t-fast) var(--ease-out)}
.field input,.field select,.field textarea,.composer input,.fc-row input{
  transition:border-color var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;scroll-behavior:auto !important}
  .livedot::after{display:none}
}


/* ===== Elevation v2 — visible brand pass (11 Jun 2026) =====
   One Committed brand moment per page (navy stat band); depth on panels;
   stronger nav/search affordances. Contrast pairs verified:
   blue#16BAF2 on navy 8.4:1 · #4ade80 on navy ~10:1 · #f87171 on navy ~6:1. */

/* stat strip -> navy brand band, electric numerals */
.statstrip{background:linear-gradient(135deg,var(--navy),var(--navy-2));border:1px solid var(--blue-line);
  border-radius:12px;box-shadow:0 1px 2px rgba(11,17,32,0.06)}
.statstrip>div{border-right:1px solid rgba(255,255,255,0.08);padding:20px 22px}
.statstrip .n{color:var(--blue);font-size:34px}
.statstrip .k{color:rgba(255,255,255,0.6)}
.statstrip .delta.up{color:#4ade80}
.statstrip .delta.down{color:#f87171}
.statstrip .delta.flat{color:rgba(255,255,255,0.55)}

/* panels: quiet depth + header hairline */
.panel{box-shadow:0 1px 2px rgba(11,17,32,0.05)}
.panel .ph{border-bottom:1px solid var(--bg);padding-bottom:12px}

/* sidebar: confident active state, breathing brand block */
.sidebar .brand{padding-bottom:16px;margin-bottom:2px;border-bottom:1px solid rgba(255,255,255,0.08)}
.sidebar a{border-radius:8px}
.sidebar a.active{font-weight:600;box-shadow:inset 0 0 0 1px rgba(22,186,242,0.22)}
.navgroup{margin-top:22px}

/* topbar: pill search, taller rhythm */
.search{background:var(--surface-2);border-color:transparent;border-radius:999px;padding:9px 14px}
.search:focus-within{background:var(--surface);border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-dim)}

/* buttons: weightier voice */
.btn,.lbtn{font-weight:600}

/* tables: crisper header, calmer zebra */
thead th{letter-spacing:0.1em;padding:11px 14px}
tbody tr:nth-child(even) td{background:var(--zebra)}
tbody tr.click:hover td{background:var(--blue-dim)}

/* page header: tighter lockup */
.pagehead{align-items:flex-end;margin-bottom:28px}
.pagehead h1{font-size:42px}

/* fix: figure-column headers were navy-on-navy (invisible). Scope the navy
   ink to body cells; headers keep the light thead ink. */
thead th.fig{color:rgba(255,255,255,0.82)}

/* ===== Dark theme — token swap (AA-verified, 11 Jun 2026) =====
   Mirrors the app (globals.css). The neutral palette flips; navy chrome
   (sidebar, table head, stat band, login) stays. Status text moves to light
   variants on tinted backgrounds. Placed last so it wins by source order. */
html[data-theme="dark"]{
  --bg:#0A0F1C; --surface:#121A2B; --surface-2:#1A2438; --zebra:#0E1626; --track:#1A2438;
  --line:#233047; --text:#E7ECF3; --ink-2:#C2CCDC; --muted:#93A4BF; --head-ink:#E7ECF3;
  --blue-ink:#16BAF2; --blue-num:#16BAF2; --white:#121A2B;
}
html[data-theme="dark"] body{background:var(--bg);color:var(--text)}

/* status text -> light variants */
html[data-theme="dark"] .tag-blue{color:#7DD3F5}
html[data-theme="dark"] .tag-green{color:#4ADE80}
html[data-theme="dark"] .tag-amber{color:#FBBF24}
html[data-theme="dark"] .tag-red{color:#F87171}
html[data-theme="dark"] .tag-gold{color:#E8C96A}
html[data-theme="dark"] .tag-navy{background:rgba(231,236,243,0.1);color:#E7ECF3}
html[data-theme="dark"] .callout{color:var(--ink-2)}
html[data-theme="dark"] .callout.gold{color:#E8C96A}
html[data-theme="dark"] .callout.red{color:#F87171}
html[data-theme="dark"] .statstrip .delta.up,
html[data-theme="dark"] .lc-px .d.up{color:#4ADE80}
html[data-theme="dark"] .lc-px .d.down{color:#F87171}
html[data-theme="dark"] .chainok,html[data-theme="dark"] .livebadge{color:#4ADE80}
html[data-theme="dark"] .nic.red{color:#F87171}
html[data-theme="dark"] .nic.amber{color:#FBBF24}
html[data-theme="dark"] .nic.blue{color:#7DD3F5}
html[data-theme="dark"] .nic.green{color:#4ADE80}
html[data-theme="dark"] .nic.gold{color:#E8C96A}
html[data-theme="dark"] .modepill{color:#E8C96A;background:rgba(201,168,76,0.14)}
html[data-theme="dark"] .contact .pri{color:#E8C96A}

/* surfaces / borders that referenced white or hard hexes */
html[data-theme="dark"] .iconbtn{background:var(--surface);border-color:var(--line);color:var(--muted)}
html[data-theme="dark"] .iconbtn:hover{color:var(--text);border-color:#33415c;background:var(--surface-2)}
html[data-theme="dark"] .search:focus-within{background:var(--surface)}
html[data-theme="dark"] .apprv .a{border-color:var(--surface)}
html[data-theme="dark"] .apprv .a.pend{background:var(--surface)}
html[data-theme="dark"] .pstep .dot{background:var(--surface)}
html[data-theme="dark"] .iconbtn .badge{border-color:var(--surface)}
html[data-theme="dark"] .panel{box-shadow:none}
html[data-theme="dark"] .topbar{background:var(--surface)}
html[data-theme="dark"] .statstrip{background:linear-gradient(135deg,var(--navy),var(--navy-2))}

/* prototype-only chrome (drawer, assistant) — not tokenized, so explicit */
html[data-theme="dark"] .drawer{background:var(--bg)}
html[data-theme="dark"] .asst-body{background:#0A0F1C}
html[data-theme="dark"] .asst-msg.them{background:var(--surface);border-color:var(--line);color:var(--ink-2)}
html[data-theme="dark"] .asst-card{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .asst-card .acb{color:var(--ink-2)}
html[data-theme="dark"] .asst-input,html[data-theme="dark"] .asst-input input{background:var(--surface);border-color:var(--line);color:var(--text)}
html[data-theme="dark"] .seg-undeployed{color:#0A0F1C}
html[data-theme="dark"] .toggle .tk{background:#2C3A55}

/* ============================================================================
   LENDER CAPITAL JOURNEY  (lender-detail.html)  — added 11 Jun 2026
   Sleeve flow → trades · sleeve composition donut · return runway · profit split.
   Contrast law: flow bands are DECORATIVE ribbons (no text on them — they go
   dark in dark theme). All labels live in node cards / legends on --surface
   (token-driven, AA in both themes). On-fill text appears ONLY on full-opacity
   solid fills: dark ink #04222e on electric blue, #2A2105 on gold, #fff on grey.
   Verified ≥4.5:1 (≥3.0 for ≥24px) in light AND dark via WCAG checker.
   gold CTA mirrors globals.css .btn-gold (prototype fbc.css lacked it).
   ============================================================================ */

/* one gold CTA per screen — gold fill, dark ink (AA: #2A2105 on #C9A84C ≈ 7:1) */
.btn-gold{background:var(--gold);color:#2A2105;font-weight:600;border-color:transparent}
.btn-gold:hover:not(:disabled){background:#E8C96A}
.btn-gold:active:not(:disabled){transform:translateY(1px)}

/* ===== Risk-terminal widgets (donut gauge, book-health hex, area chart) =====
   Parity copy of the block in src/app/globals.css. Colors resolve through the
   token vars (--surface, --track, --line, --muted, --head-ink, --ink-2) so the
   widgets follow the light/dark swap. The % centre sits in the ring hole on
   --surface (never on the colored arc), so its contrast is token-driven AA. */
.gauge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;color:currentColor}
.gauge svg{display:block}
.gauge .g-k{margin-top:2px;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.gauge .g-sub{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--muted);line-height:1.35}
.gaugerow{display:flex;justify-content:space-around;gap:14px;flex-wrap:wrap;padding:14px 20px 20px;border-top:1px solid var(--line)}
.hexwrap{display:flex;justify-content:center;padding:18px 20px 6px}
.areachart{padding:8px 20px 18px}
.areachart svg{display:block}

/* full-width panel helper */
.panel.full{width:100%}

/* ---- Capital flow (sankey-lite SVG) ---- */
.capflow{padding:8px 22px 22px}
.capflow svg{display:block;width:100%;height:auto;overflow:visible}
.capflow .cf-band{fill:none;stroke-linecap:butt;transition:opacity var(--t-fast) var(--ease-out),stroke-width var(--t-fast) var(--ease-out)}
.cf-band.b-w{stroke:rgba(22,186,242,0.55)}
.cf-band.b-m{stroke:rgba(22,186,242,0.35)}
.cf-band.b-buffer{stroke:rgba(201,168,76,0.50)}
.cf-band.b-undeployed{stroke:rgba(148,164,191,0.35)}
html[data-theme="dark"] .cf-band.b-undeployed{stroke:rgba(147,164,191,0.40)}
/* SVG node cards — surface fill, token ink */
.cf-node{fill:var(--surface);stroke:var(--line);stroke-width:1}
.cf-node.src{fill:var(--surface-2);stroke:var(--blue-line)}
.cf-lab{font-family:"Inter",sans-serif;fill:var(--head-ink)}
.cf-ref{font-family:"JetBrains Mono",monospace;fill:var(--head-ink)}
.cf-mut{font-family:"JetBrains Mono",monospace;fill:var(--muted)}
.cf-eyebrow{font-family:"Inter",sans-serif;fill:var(--muted);letter-spacing:0.04em;text-transform:uppercase}
/* hover highlight: dim everything, lift the hovered group */
.capflow.has-hover .cf-band{opacity:0.16}
.capflow.has-hover .cf-trade{opacity:0.3}
.capflow .cf-band.hot{opacity:1;stroke-width:var(--hot-w,inherit)}
.capflow .cf-trade.hot{opacity:1}
.cf-trade{transition:opacity var(--t-fast) var(--ease-out)}
.cf-hit{fill:transparent;cursor:pointer}
.cf-dot{stroke-width:0}
.cf-dot.d-w,.cf-dot.d-m{fill:var(--blue)}
.cf-dot.d-buffer{fill:var(--gold)}
.cf-dot.d-undeployed{fill:var(--muted)}
.cf-legend{display:flex;flex-wrap:wrap;gap:18px;padding:2px 22px 16px;font-size:12px;color:var(--muted)}
.cf-legend .lg{display:flex;align-items:center;gap:7px}
.cf-legend .sw{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.cf-legend .sw.s-w{background:rgba(22,186,242,0.85)}
.cf-legend .sw.s-m{background:rgba(22,186,242,0.45)}
.cf-legend .sw.s-buffer{background:rgba(201,168,76,0.7)}
.cf-legend .sw.s-undeployed{background:rgba(148,164,191,0.6)}

/* ---- Sleeve composition donut ---- */
.donutwrap{display:flex;gap:22px;align-items:center;padding:16px 22px 8px;flex-wrap:wrap}
.donutwrap svg{flex-shrink:0}
.donut-seg{fill:none;transition:opacity var(--t-fast) var(--ease-out)}
.ds-w{stroke:#16BAF2}.ds-m{stroke:rgba(22,186,242,0.45)}.ds-buffer{stroke:var(--gold)}.ds-undeployed{stroke:#94A3B8}
html[data-theme="dark"] .ds-undeployed{stroke:#5A6B86}
.donut-center .dc-n{font-family:"JetBrains Mono",monospace;fill:var(--head-ink)}
.donut-center .dc-k{font-family:"Inter",sans-serif;fill:var(--muted)}
.donut-legend{flex:1;min-width:240px;display:flex;flex-direction:column;gap:12px}
.dl-row{display:flex;flex-direction:column;gap:5px}
.dl-top{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--head-ink)}
.dl-top .sw{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.dl-top .nm{font-weight:500}
.dl-top .amt{margin-left:auto;font-family:"JetBrains Mono",monospace;color:var(--head-ink);font-size:12.5px}
.dl-top .sw.s-w{background:#16BAF2}.dl-top .sw.s-m{background:rgba(22,186,242,0.45)}
.dl-top .sw.s-buffer{background:var(--gold)}.dl-top .sw.s-undeployed{background:#94A3B8}
.dl-micro{display:flex;height:7px;border-radius:999px;overflow:hidden;background:var(--track);margin-left:20px}
.dl-micro .m-margin{background:var(--blue)}
.dl-micro .m-reserve{background:rgba(22,186,242,0.28)}
.dl-cap{margin-left:20px;font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--muted)}

/* ---- Return runway timeline ---- */
.runway{padding:18px 22px 8px}
.runway svg{display:block;width:100%;height:auto;overflow:visible}
.rw-track{fill:var(--track)}
.rw-fill{fill:#22C55E}
html[data-theme="dark"] .rw-fill{fill:#22C55E}
.rw-tick{stroke:var(--line);stroke-width:1}
.rw-axis{font-family:"JetBrains Mono",monospace;fill:var(--muted)}
.rw-today-line{stroke:var(--head-ink);stroke-width:1.5;stroke-dasharray:3 3}
.rw-pill{fill:var(--blue)}
.rw-pill-tx{font-family:"JetBrains Mono",monospace;fill:#04222e;font-weight:500}
.rw-flag{fill:var(--gold)}
.rw-flag-tx{font-family:"JetBrains Mono",monospace;fill:#2A2105;font-weight:500}
.rw-pct{font-family:"JetBrains Mono",monospace;fill:#15803d;font-weight:500}
html[data-theme="dark"] .rw-pct{fill:#4ADE80}
.runway-kv{display:flex;gap:26px;flex-wrap:wrap;padding:12px 22px 2px}
.runway-kv .rk{display:flex;flex-direction:column;gap:3px}
.runway-kv .rk .k{font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
.runway-kv .rk .v{font-family:"JetBrains Mono",monospace;font-size:15px;color:var(--head-ink);font-weight:500}
.tag-green-rt{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;padding:4px 11px;border-radius:999px;background:rgba(34,197,94,0.12);color:#15803d}
html[data-theme="dark"] .tag-green-rt{color:#4ADE80}
.tag-green-rt .d{width:7px;height:7px;border-radius:50%;background:var(--green)}
.runway-cap{padding:10px 22px 18px;font-size:11.5px;color:var(--muted)}

/* ---- Profit split (extends allocbar) ---- */
.profitbar{display:flex;height:54px;border-radius:10px;overflow:hidden;border:1px solid var(--line);margin:4px 22px 8px}
.profitbar .seg{display:flex;flex-direction:column;justify-content:center;padding:0 14px;min-width:0;white-space:nowrap;overflow:hidden}
.profitbar .seg .sv{font-family:"JetBrains Mono",monospace;font-size:14px;font-weight:600}
.profitbar .seg .sk{font-size:10px;text-transform:uppercase;letter-spacing:0.06em;margin-top:2px;opacity:.9}
.profitbar .p-lender{background:var(--blue);color:#04222e}
.profitbar .p-costs{background:#475569;color:#fff}
.profitbar .p-deficit{background:#94A3B8;color:#1A1F2E}
.profitbar .p-equity{background:var(--gold);color:#2A2105}
.profitlegend{display:flex;gap:20px;flex-wrap:wrap;padding:2px 22px 14px;font-size:11.5px;color:var(--muted)}
.profitlegend .lg{display:flex;align-items:center;gap:7px}
.profitlegend .sw{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.profitlegend .sw.s-lender{background:var(--blue)}
.profitlegend .sw.s-costs{background:#475569}
.profitlegend .sw.s-deficit{background:#94A3B8}
.profitlegend .sw.s-equity{background:var(--gold)}
/* this-lender pot meter */
.potmeter{padding:6px 22px 6px}
.pot-head{display:flex;align-items:baseline;gap:10px;margin-bottom:9px}
.pot-head .pt-lab{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.pot-head .pt-fig{font-family:"JetBrains Mono",monospace;font-size:14px;color:var(--head-ink);font-weight:500;margin-left:auto}
.pot-track{height:30px;border-radius:8px;background:var(--track);overflow:hidden;position:relative;border:1px solid var(--line)}
.pot-fill{height:100%;background:#22C55E;display:flex;align-items:center;padding:0 12px;border-radius:8px 0 0 8px}
.pot-fill .pf-tx{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:600;color:#04222e}
.pot-cap{padding:10px 22px 20px;font-size:11.5px;color:var(--muted)}

@media (max-width:1040px){.donutwrap{justify-content:center}}

/* ============================================================================
   REPORTS — management board-pack (reports.html)  — added 17 Jun 2026
   Multi-series income trend chart + its legend. Everything else on the page
   reuses existing classes (statstrip, wstep, allocbar, donutwrap/donut-seg,
   gaugerow/gauge, runway, bars, kvgrid, drows, tables, tags, callouts).
   Chart axis/grid use token vars; the three series strokes are the brand
   accents (#16BAF2 blue / #C9A84C gold / #22C55E green) — all decorative
   strokes, never carrying text. Node dots get a --surface halo. Legend +
   axis labels sit on --surface so contrast is token-driven AA in both themes.
   Verified ≥4.5:1 (≥3.0 for ≥24px) light AND dark via WCAG checker.
   ============================================================================ */
.trendchart{padding:8px 22px 14px}
.trendchart svg{display:block;width:100%;height:auto;overflow:visible}
.tc-axis{fill:var(--muted);font-size:10px}
.tc-legend{display:flex;flex-wrap:wrap;gap:22px;padding:2px 22px 18px;font-size:12px;color:var(--muted)}
.tc-legend .lg{display:flex;align-items:center;gap:7px}
.tc-legend .sw{width:14px;height:4px;border-radius:2px;flex-shrink:0}

/* ============================================================================
   TRADE WIZARD — new-trade entry + approval flow (trade-new.html) — 17 Jun 2026
   The wizard reuses existing primitives wholesale (pipeline/pstep, form-grid/
   field, kvgrid, callout, bar/track/fill, drows, life/lrow, apprv, tag-*,
   btn-*, detail-head). Only addition: a theme-correct red hint for the >90-day
   tenor breach. var(--red) (#EF4444) is a FILL colour — as 11.5px text on white
   it is 3.76:1 (fails AA), so the hint uses the darker status reds already used
   by tag-red / delta.down: #b91c1c on light (6.5:1), #F87171 on dark (6.3:1).
   .wpanel is a JS marker only (no style). Parity copy lives in globals.css.
   ============================================================================ */
.wiz-hint-red{color:#b91c1c;font-weight:500}
html[data-theme="dark"] .wiz-hint-red{color:#F87171}

/* ============================================================================
   LENDER ONBOARD — onboarding wizard (lender-onboard.html)  — added 17 Jun 2026
   Multi-step wizard: details → KYC (MLRO gate) → agreement (DocuSign + SHA-256)
   → deposit (reconcile) → activation. Parity block: identical in
   prototype/assets/fbc.css and src/app/globals.css.
   Contrast law: every text/bg pair is token-driven so it follows the light/dark
   swap. Status tags reuse .tag-green/.tag-amber/.tag-red (already AA both themes).
   The below-min warning + mismatch ink use #B91C1C (light) → #F87171 (dark),
   NOT raw --red (#EF4444 fails on white). All pairs verified ≥4.5:1
   (≥3.0 for ≥24px) in LIGHT and DARK via WCAG checker. No border-left stripes;
   cards ≤12px radius. Transitions ≤150ms, reduced-motion handled by the global
   prefers-reduced-motion rule earlier in this file.
   ============================================================================ */

/* step panels — JS toggles [hidden]; nothing here animates layout */
.wstepwrap[hidden]{display:none}

/* section sublabel inside a pbody (reused across KYC + review) */
.seclabel{display:block;font-size:11px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin-bottom:12px}

/* validation states on the committed-capital field */
.field .hint.hint-red{color:#B91C1C;font-weight:500}
html[data-theme="dark"] .field .hint.hint-red{color:#F87171}
.field input.inp-red{border-color:#B91C1C}
html[data-theme="dark"] .field input.inp-red{border-color:#F87171}

/* beneficial owners table — extends .fc-row grid to 3 cols */
.bo-head{display:grid;grid-template-columns:1.6fr 0.8fr 0.8fr;gap:10px;font-size:10px;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);padding-bottom:6px}
.fc-row.bo-row{grid-template-columns:1.6fr 0.8fr 0.8fr}
.fc-row.bo-row select{padding:7px 10px;border:1px solid var(--line);border-radius:7px;
  font-family:"Inter",sans-serif;font-size:12.5px;color:var(--text);background:var(--surface);width:100%}
.fc-row.bo-row select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-dim)}

/* document checklist rows */
.docrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.docrow:last-child{border-bottom:none}
.docrow .dcheck{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2);cursor:pointer;flex:1}
.docrow .dcheck input{width:15px;height:15px;accent-color:var(--blue);flex-shrink:0}
.docrow .tag{margin-left:auto}

/* MLRO decision gate bar */
.gatebar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border:1px solid rgba(201,168,76,0.4);
  background:rgba(201,168,76,0.07);border-radius:10px;padding:14px 16px}
html[data-theme="dark"] .gatebar{background:rgba(201,168,76,0.10)}
.gatebar .gate-tt{font-size:13px;font-weight:600;color:var(--head-ink)}
.gatebar .gate-tm{font-size:12px;color:var(--muted);margin-top:3px;max-width:62ch}
.gatebar .gatebar-r{margin-left:auto;display:flex;align-items:center;gap:10px}

/* e-signature panel */
.esign{display:flex;flex-direction:column}
.es-state{display:flex;align-items:flex-start;gap:12px}
.es-dot{width:14px;height:14px;border-radius:50%;background:var(--muted);flex-shrink:0;margin-top:4px;
  transition:background-color var(--t-fast) var(--ease-out)}
.es-dot.s1{background:var(--muted)}
.es-dot.s2{background:var(--blue)}
.es-dot.s3{background:var(--green)}
.es-label{font-size:14px;font-weight:600;color:var(--head-ink)}
.es-sub{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45}
.es-steps{display:flex;align-items:center;gap:9px;margin-top:14px}
.es-pip{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted);
  padding:4px 10px;border-radius:999px;border:1px solid var(--line);
  transition:color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),
  background-color var(--t-fast) var(--ease-out)}
.es-pip.on{color:var(--blue-ink);border-color:var(--blue-line);background:var(--blue-dim)}
.es-arr{color:var(--muted);font-size:12px}
.es-hash{margin-top:16px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);padding:12px 13px}
.es-hash .esh-k{font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
.es-hash .esh-v{font-size:11.5px;color:var(--text);margin-top:5px;word-break:break-all;line-height:1.5}
.es-hash .esh-note{font-size:11px;color:var(--muted);margin-top:7px;line-height:1.45}

/* fine print under terms recap */
.finehint{font-size:11.5px;color:var(--muted);line-height:1.55}

/* deposit reconciliation read-out */
.recon{border:1px solid var(--line);border-radius:10px;background:var(--surface-2);
  padding:6px 16px;transition:border-color var(--t-fast) var(--ease-out)}
.recon.mismatch{border-color:rgba(239,68,68,0.45)}
.recon .rc-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line)}
.recon .rc-row:last-child{border-bottom:none}
.recon .rc-k{font-size:12px;color:var(--head-ink)}
.recon .rc-v{font-size:14px;color:var(--text)}
.recon .rc-result .rc-k{font-weight:600}
.recon .rc-tag{margin-left:0}

/* executed-hash line in the review recap */
.hashline{font-size:12px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);
  border-radius:8px;padding:11px 13px;word-break:break-all;line-height:1.5}

/* activation success state */
.success{display:flex;gap:18px;align-items:flex-start;padding:22px 24px 26px}
.success .su-mark{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:rgba(34,197,94,0.12);color:#15803D;font-size:24px;font-weight:600}
html[data-theme="dark"] .success .su-mark{color:#4ADE80}
.success .su-h{font-family:"Space Grotesk",sans-serif;font-size:22px;font-weight:600;color:var(--head-ink);line-height:1.1}
.success .su-sub{font-size:13.5px;color:var(--ink-2);margin-top:7px;line-height:1.55}
.success .su-id{color:var(--blue-ink)}
.success .su-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}

@media (max-width:1180px){.gatebar .gatebar-r{margin-left:0}}

/* ============================================================================
   SEMANTIC COLOUR SYSTEM  (added 2026-06-18)
   Colour now carries meaning. Each part of the capital-flow story has a
   signature hue, used consistently everywhere so a reader can tell at a glance
   which domain a number, row, tag or panel belongs to — and see how they link:
       LENDER capital (teal)  →  TRADES / margin deployed (blue)
       →  BROKER commission (violet)  →  DISTRIBUTIONS / payouts (gold)
   FORECAST = pipeline (periwinkle).  STATUS = good/watch/breach (green/amber/red).
   Placed last so it wins by source order. AA-checked in both themes.
   ========================================================================== */
:root{
  --c-lender:#0E9F8E;   --c-lender-ink:#0A7A6C; --c-lender-bg:rgba(14,159,142,0.10); --c-lender-line:rgba(14,159,142,0.34);
  --c-broker:#7B6CF6;   --c-broker-ink:#5840CF; --c-broker-bg:rgba(123,108,246,0.11); --c-broker-line:rgba(123,108,246,0.34);
  --c-trade:#16BAF2;    --c-trade-ink:#0C74A8;  --c-trade-bg:rgba(22,186,242,0.10);   --c-trade-line:rgba(22,186,242,0.30);
  --c-forecast:#5B8DEF; --c-forecast-ink:#3A5FC4;--c-forecast-bg:rgba(91,141,239,0.11);--c-forecast-line:rgba(91,141,239,0.32);
  --c-dist:#C9A84C;     --c-dist-ink:#6B4E0A;   --c-dist-bg:rgba(201,168,76,0.13);    --c-dist-line:rgba(201,168,76,0.42);
  --c-control:#64748B;  --c-control-ink:#475569;--c-control-bg:rgba(100,116,139,0.10);--c-control-line:rgba(100,116,139,0.30);
  --c-good:#22C55E; --c-good-ink:#15803D; --c-watch:#F59E0B; --c-watch-ink:#92400E; --c-breach:#EF4444; --c-breach-ink:#B91C1C;
  /* default accent = brand blue (overview) */
  --accent:var(--c-trade); --accent-ink:var(--c-trade-ink); --accent-bg:var(--c-trade-bg); --accent-line:var(--c-trade-line);
}
html[data-theme="dark"]{
  --c-lender:#34D8C4; --c-lender-ink:#34D8C4; --c-lender-bg:rgba(52,216,196,0.13); --c-lender-line:rgba(52,216,196,0.34);
  --c-broker:#A99BFB; --c-broker-ink:#A99BFB; --c-broker-bg:rgba(169,155,251,0.15); --c-broker-line:rgba(169,155,251,0.36);
  --c-trade:#16BAF2;  --c-trade-ink:#16BAF2;  --c-trade-bg:rgba(22,186,242,0.13);   --c-trade-line:rgba(22,186,242,0.34);
  --c-forecast:#93B4FF;--c-forecast-ink:#93B4FF;--c-forecast-bg:rgba(147,180,255,0.14);--c-forecast-line:rgba(147,180,255,0.34);
  --c-dist:#E8C96A;   --c-dist-ink:#E8C96A;   --c-dist-bg:rgba(232,201,106,0.15);   --c-dist-line:rgba(232,201,106,0.40);
  --c-control:#93A4BF;--c-control-ink:#93A4BF;--c-control-bg:rgba(147,164,191,0.13);--c-control-line:rgba(147,164,191,0.32);
  --c-good-ink:#4ADE80; --c-watch-ink:#FBBF24; --c-breach-ink:#F87171;
}
/* per-page accent: shell.js sets data-domain on <html> from the active page */
html[data-domain="lender"]  {--accent:var(--c-lender);  --accent-ink:var(--c-lender-ink);  --accent-bg:var(--c-lender-bg);  --accent-line:var(--c-lender-line)}
html[data-domain="broker"]  {--accent:var(--c-broker);  --accent-ink:var(--c-broker-ink);  --accent-bg:var(--c-broker-bg);  --accent-line:var(--c-broker-line)}
html[data-domain="trade"]   {--accent:var(--c-trade);   --accent-ink:var(--c-trade-ink);   --accent-bg:var(--c-trade-bg);   --accent-line:var(--c-trade-line)}
html[data-domain="forecast"]{--accent:var(--c-forecast);--accent-ink:var(--c-forecast-ink);--accent-bg:var(--c-forecast-bg);--accent-line:var(--c-forecast-line)}
html[data-domain="dist"]    {--accent:var(--c-dist);    --accent-ink:var(--c-dist-ink);    --accent-bg:var(--c-dist-bg);    --accent-line:var(--c-dist-line)}
html[data-domain="control"] {--accent:var(--c-control); --accent-ink:var(--c-control-ink); --accent-bg:var(--c-control-bg); --accent-line:var(--c-control-line)}

/* apply the accent — eyebrow, page heading bar, KPI band, panel headers, table edge */
.eyebrow{color:var(--accent-ink)}
.pagehead h1{border-left:4px solid var(--accent);padding-left:15px}
.statstrip{border-top:3px solid var(--accent)}
.statstrip .n{color:var(--accent-ink)}
.panel .ph{box-shadow:inset 0 2px 0 var(--accent-line)}
.panel .ph .pt{color:var(--accent-ink)}
.content table tbody td:first-child{box-shadow:inset 3px 0 0 var(--accent-line)}
.bar .fill{background:var(--accent)}
.btn-primary{background:var(--accent);color:#04222e}
html[data-theme="dark"] .btn-primary{color:#04222e}

/* domain colour utility classes — for mixed pages (e.g. the dashboard) and the Key.
   Apply .dom-lender / .dom-broker / .dom-trade / .dom-forecast / .dom-dist to a
   .panel or any container to locally re-accent it to that domain. */
.dom-lender  {--accent:var(--c-lender);  --accent-ink:var(--c-lender-ink);  --accent-bg:var(--c-lender-bg);  --accent-line:var(--c-lender-line)}
.dom-broker  {--accent:var(--c-broker);  --accent-ink:var(--c-broker-ink);  --accent-bg:var(--c-broker-bg);  --accent-line:var(--c-broker-line)}
.dom-trade   {--accent:var(--c-trade);   --accent-ink:var(--c-trade-ink);   --accent-bg:var(--c-trade-bg);   --accent-line:var(--c-trade-line)}
.dom-forecast{--accent:var(--c-forecast);--accent-ink:var(--c-forecast-ink);--accent-bg:var(--c-forecast-bg);--accent-line:var(--c-forecast-line)}
.dom-dist    {--accent:var(--c-dist);    --accent-ink:var(--c-dist-ink);    --accent-bg:var(--c-dist-bg);    --accent-line:var(--c-dist-line)}

/* expanded domain tags (sit alongside the existing status tags) */
.tag-lender  {background:var(--c-lender-bg);  color:var(--c-lender-ink)}
.tag-broker  {background:var(--c-broker-bg);  color:var(--c-broker-ink)}
.tag-trade   {background:var(--c-trade-bg);   color:var(--c-trade-ink)}
.tag-forecast{background:var(--c-forecast-bg);color:var(--c-forecast-ink)}
.tag-dist    {background:var(--c-dist-bg);    color:var(--c-dist-ink)}

/* sidebar nav coloured by domain — each section now reads in its own hue,
   so the colour you see in the rail is the colour you see on the page. */
.sidebar a[data-dom] svg{color:var(--dom)}
.sidebar a[data-dom]{--dom:rgba(255,255,255,0.6)}
.sidebar a[data-dom="lender"]  {--dom:var(--c-lender)}
.sidebar a[data-dom="broker"]  {--dom:var(--c-broker)}
.sidebar a[data-dom="trade"]   {--dom:var(--c-trade)}
.sidebar a[data-dom="forecast"]{--dom:var(--c-forecast)}
.sidebar a[data-dom="dist"]    {--dom:var(--c-dist)}
.sidebar a[data-dom="control"] {--dom:var(--c-control)}
.sidebar a[data-dom].active{color:var(--dom);background:color-mix(in srgb,var(--dom) 16%,transparent)}
.sidebar a[data-dom].active svg{color:var(--dom)}

/* ============================================================================
   KEY ASSIST  (added 2026-06-18)
   A top-right toggle that (a) turns on "explain mode" — hover any highlighted
   area for a plain-English definition — and (b) opens the Key: a slide-over
   index of the colour key, glossary and controls. Mirrors the assistant chrome.
   ========================================================================== */
.keybtn{display:inline-flex;align-items:center;gap:7px;font-family:"Inter",sans-serif;font-size:13px;font-weight:500;
  padding:9px 14px;border-radius:7px;border:1px solid var(--line);background:var(--surface);color:var(--head-ink);cursor:pointer}
.keybtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}
.keybtn:hover{border-color:var(--accent-line);color:var(--accent-ink)}
.keybtn[aria-pressed="true"]{background:var(--accent-bg);border-color:var(--accent-line);color:var(--accent-ink)}
.keybtn .kbd{font-family:"JetBrains Mono",monospace;font-size:10px;opacity:.6;border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:2px}

/* explain mode: highlight annotated regions */
body.fbc-explain [data-help]{outline:1.5px dashed var(--accent-line);outline-offset:2px;border-radius:4px;cursor:help;position:relative}
body.fbc-explain [data-help]:hover{outline-color:var(--accent);outline-style:solid;background:var(--accent-bg)}
.fbc-explain-banner{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:8px 16px;background:var(--accent-ink);color:#fff;font-size:12.5px;letter-spacing:.01em;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.fbc-explain-banner b{font-weight:600}
.fbc-explain-banner .x{cursor:pointer;border:1px solid rgba(255,255,255,.5);border-radius:6px;padding:1px 8px;font-size:11px}
body.fbc-explain{padding-top:0}

/* floating tooltip */
.fbc-tip{position:fixed;z-index:70;max-width:320px;background:var(--navy);color:#EAF2F8;border:1px solid var(--c-trade-line);
  border-radius:9px;padding:11px 13px;font-size:12.5px;line-height:1.5;box-shadow:0 12px 34px rgba(2,8,20,.42);pointer-events:none;opacity:0;
  transform:translateY(4px);transition:opacity .14s,transform .14s}
.fbc-tip.show{opacity:1;transform:translateY(0)}
.fbc-tip .th{font-family:"Space Grotesk",serif;font-weight:600;font-size:13px;margin-bottom:3px;color:#fff;display:flex;align-items:center;gap:7px}
.fbc-tip .tdom{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.fbc-tip .tk{display:block;margin-top:7px;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#8FB7CF}

/* the Key slide-over */
.keypanel{position:fixed;top:0;right:0;height:100vh;width:412px;max-width:92vw;background:var(--surface);border-left:1px solid var(--line);
  box-shadow:-22px 0 60px rgba(2,8,20,.26);transform:translateX(100%);transition:transform .26s var(--ease-out);z-index:65;display:flex;flex-direction:column}
.keypanel.open{transform:translateX(0)}
.keypanel .kp-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.keypanel .kp-head .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent-ink)}
.keypanel .kp-head .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7}
.keypanel .kp-head .ht{font-family:"Space Grotesk",serif;font-size:17px;font-weight:600;color:var(--head-ink)}
.keypanel .kp-head .hs{font-size:11px;color:var(--muted)}
.keypanel .kp-head .x{margin-left:auto;cursor:pointer;color:var(--muted);font-size:22px;line-height:1;padding:2px 6px}
.keypanel .kp-body{padding:18px 20px 28px;overflow-y:auto}
.kp-sec{margin-bottom:24px}
.kp-sec > .t{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:11px}
.kp-explain-toggle{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid var(--accent-line);background:var(--accent-bg);
  color:var(--accent-ink);border-radius:9px;padding:11px 13px;cursor:pointer;font-size:12.5px;font-weight:500;margin-bottom:22px}
.kp-explain-toggle svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;flex-shrink:0}
.kp-explain-toggle .sw{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:10px;border:1px solid currentColor;border-radius:5px;padding:1px 7px;opacity:.85}
/* colour key swatches */
.legend{display:flex;flex-direction:column;gap:9px}
.leg{display:flex;align-items:flex-start;gap:11px;font-size:12.5px;color:var(--ink-2)}
.leg .sw{width:16px;height:16px;border-radius:5px;flex-shrink:0;margin-top:1px}
.leg .nm{font-weight:600;color:var(--head-ink)}
.leg .ds{color:var(--muted);font-size:11.5px;display:block;margin-top:1px}
.sw-lender{background:var(--c-lender)}.sw-broker{background:var(--c-broker)}.sw-trade{background:var(--c-trade)}
.sw-forecast{background:var(--c-forecast)}.sw-dist{background:var(--c-dist)}.sw-control{background:var(--c-control)}
.sw-good{background:var(--c-good)}.sw-watch{background:var(--c-watch)}.sw-breach{background:var(--c-breach)}
/* glossary + controls */
.gloss{display:flex;flex-direction:column;gap:13px}
.gl-item{font-size:12.5px;line-height:1.5}
.gl-item .term{font-weight:600;color:var(--head-ink)}
.gl-item .def{color:var(--ink-2)}
.kp-flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px;font-size:11px}
.kp-flow .node{padding:4px 9px;border-radius:7px;font-weight:600}
.kp-flow .ar{color:var(--muted)}
.kp-flow .n-lender{background:var(--c-lender-bg);color:var(--c-lender-ink)}
.kp-flow .n-trade{background:var(--c-trade-bg);color:var(--c-trade-ink)}
.kp-flow .n-broker{background:var(--c-broker-bg);color:var(--c-broker-ink)}
.kp-flow .n-dist{background:var(--c-dist-bg);color:var(--c-dist-ink)}

/* ============================================================================
   TRADE DETAIL — broker placement + live currency-pair window (added 2026-06-18)
   ========================================================================== */
.td-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:24px;align-items:start;margin-top:24px}
@media (max-width:1000px){.td-grid{grid-template-columns:1fr}}

/* broker placement "path": FBC margin -> Broker -> LP -> market */
.placement{display:flex;align-items:stretch;gap:0;margin:4px 20px 18px;flex-wrap:wrap}
.placement .node{flex:1;min-width:120px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface);position:relative}
.placement .node .role{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.placement .node .nm{font-size:13.5px;font-weight:600;color:var(--head-ink);margin-top:3px;line-height:1.2}
.placement .node .sub{font-size:11px;color:var(--muted);margin-top:2px;font-family:"JetBrains Mono",monospace}
.placement .arrow{display:flex;align-items:center;color:var(--muted);padding:0 8px}
.placement .arrow svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7}
.placement .node.n-fbc{border-color:var(--c-lender-line);background:var(--c-lender-bg)}
.placement .node.n-broker{border-color:var(--c-broker-line);background:var(--c-broker-bg)}
.placement .node.n-trade{border-color:var(--c-trade-line);background:var(--c-trade-bg)}
.placement .node.n-mkt{border-color:var(--line)}

/* live FX window */
.fxwin .ph .livebadge.sim{color:var(--c-trade-ink);background:var(--c-trade-bg)}
html[data-theme="dark"] .fxwin .ph .livebadge.sim{color:var(--c-trade)}
.fxhead{display:flex;align-items:flex-end;gap:18px;padding:8px 20px 6px;flex-wrap:wrap}
.fxhead .px{font-family:"JetBrains Mono",monospace;font-size:38px;font-weight:600;color:var(--head-ink);line-height:1}
.fxhead .chg{font-family:"JetBrains Mono",monospace;font-size:14px;font-weight:500}
.fxhead .chg.up{color:#15803d}.fxhead .chg.down{color:#b91c1c}
html[data-theme="dark"] .fxhead .chg.up{color:#4ADE80}html[data-theme="dark"] .fxhead .chg.down{color:#F87171}
.fxhead .hl{margin-left:auto;display:flex;gap:18px}
.fxhead .hl .b{text-align:right}
.fxhead .hl .bk{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fxhead .hl .bv{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--ink-2)}
.fxchart{padding:6px 12px 4px}
.fxchart svg{width:100%;height:auto;display:block}
.fx-entrylab{font-family:"JetBrains Mono",monospace;font-size:10px;fill:var(--muted)}
.fxnote{font-size:11px;color:var(--muted);padding:2px 20px 16px;font-family:"JetBrains Mono",monospace}

/* position risk readout */
.posrisk{padding:4px 20px 20px}
.posrow{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)}
.posrow:last-child{border-bottom:none}
.posrow .k{font-size:12px;color:var(--muted)}
.posrow .v{font-family:"JetBrains Mono",monospace;font-size:14px;color:var(--head-ink);font-variant-numeric:tabular-nums}
.posrow .v.pos{color:#15803d}.posrow .v.neg{color:#b91c1c}
html[data-theme="dark"] .posrow .v.pos{color:#4ADE80}html[data-theme="dark"] .posrow .v.neg{color:#F87171}
.mbar-wrap{margin:14px 0 4px}
.mbar-l{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:6px}
.mbar-l .s{font-family:"JetBrains Mono",monospace;color:var(--head-ink)}
.mbar{height:9px;border-radius:999px;background:var(--track);overflow:hidden;position:relative}
.mbar .f{height:100%;border-radius:999px;background:var(--c-good);transition:width .5s var(--ease-out),background .5s}
.mbar .f.watch{background:var(--c-watch)}.mbar .f.breach{background:var(--c-breach)}
.mbar-cap{font-size:11px;color:var(--muted);margin-top:7px;line-height:1.45}

/* ============================================================================
   BRAND LOGO  (added 2026-06-18) — FBC "FB›" mark in the sidebar lockup.
   Recreated from the brand logo (FB + electric-blue chevron) as crisp vector
   so it scales and holds in both themes. ========================================================================== */
.sidebar .brand{display:flex;align-items:center;gap:11px;padding:2px 10px 6px;line-height:1}
.logo-mark{display:inline-flex;align-items:center;gap:3px;flex-shrink:0;
  font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:23px;letter-spacing:-0.02em}
.logo-mark .fb{color:#fff}
.logo-mark .chev{width:15px;height:19px;display:block;color:var(--blue)}
.logo-mark .chev svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:4.5;stroke-linecap:square;stroke-linejoin:miter}
.sidebar .brand .brand-text{font-family:"Space Grotesk",serif;font-size:14.5px;font-weight:600;color:#fff;line-height:1.08}
.sidebar .brand .brand-text span{display:block;font-family:"JetBrains Mono",monospace;font-size:8.5px;letter-spacing:0.16em;
  text-transform:uppercase;color:rgba(255,255,255,0.55);margin-top:4px;font-weight:400}

/* real FBC logo (added 2026-06-18) — white wordmark/mark on dark surfaces */
.sidebar .brand{flex-direction:column;align-items:flex-start;gap:7px;padding:4px 10px 8px}
.sidebar .brand .brand-logo{width:100%;max-width:190px;height:auto;display:block}
.sidebar .brand .brand-crm{font-family:"JetBrains Mono",monospace;font-size:8.5px;letter-spacing:0.18em;
  text-transform:uppercase;color:rgba(255,255,255,0.5)}
.ptopbar .ptop-logo{height:24px;width:auto;display:block;margin-right:6px}
.login-logo-img{display:block;margin:0 auto 18px;width:230px;max-width:78%;height:auto}

/* drawer maximise (added 2026-06-18) */
.drawer{transition:transform .26s var(--ease-out),width .26s var(--ease-out)}
.drawer.max{width:min(1180px,96vw)}
.drawer-head .x{cursor:pointer}

/* allocation mini-bars + gradient bars (added 2026-06-18) */
.allocmini{height:7px;border-radius:999px;background:var(--track);overflow:hidden;margin-top:6px;min-width:90px}
.allocmini .f{height:100%;border-radius:999px}
.gbar-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.gbar-row:last-child{border-bottom:none}
.gbar-row .nm{width:170px;flex-shrink:0;font-size:13px;font-weight:500;color:var(--head-ink)}
.gbar-row .track{flex:1;height:24px;border-radius:7px;background:var(--track);overflow:hidden;position:relative}
.gbar-row .track .f{height:100%;border-radius:7px;display:flex;align-items:center;padding:0 10px;color:#04222e;font-family:"JetBrains Mono",monospace;font-size:11.5px;font-weight:600}
.gbar-row .cap{width:120px;text-align:right;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted)}
.grad-cyan{background:linear-gradient(90deg,#16BAF2,#5BD0F5)}
.grad-violet{background:linear-gradient(90deg,#7B6CF6,#E0699F)}
.grad-teal{background:linear-gradient(90deg,#0E9F8E,#34D8C4)}
.grad-amber{background:linear-gradient(90deg,#F59E0B,#FBBF24)}

/* lender "capital pot" + deploy-more (added 2026-06-18) */
.pot-wrap{display:flex;gap:30px;align-items:center;flex-wrap:wrap;padding:8px 20px 22px}
.pot{width:172px;height:212px;flex-shrink:0}
.pot .liquid{transition:y 1s var(--ease-out),height 1s var(--ease-out)}
.pot .surface{transition:transform 1s var(--ease-out)}
.pot-side{flex:1;min-width:280px}
.pot-amt{font-family:"Space Grotesk",sans-serif;font-size:36px;font-weight:600;color:var(--head-ink);line-height:1}
.pot-sub{font-size:12.5px;color:var(--muted);margin-top:4px}
.deploy-chips{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 4px}
.chip{padding:9px 15px;border:1px solid var(--c-lender-line);border-radius:999px;background:var(--c-lender-bg);
  color:var(--c-lender-ink);font-size:13px;font-weight:600;cursor:pointer;font-family:"JetBrains Mono",monospace}
.chip:hover{filter:brightness(1.06)}
.proj{background:var(--c-lender-bg);border:1px solid var(--c-lender-line);border-radius:10px;padding:12px 15px;
  font-size:13px;color:var(--ink-2);margin-top:12px;line-height:1.5}
.proj b{color:var(--c-lender-ink)}
.milestone{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:8px;font-family:"JetBrains Mono",monospace}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;
  padding:13px 20px;border-radius:10px;font-size:13px;box-shadow:0 14px 40px rgba(2,8,20,.4);opacity:0;transition:.28s;z-index:90;
  border:1px solid var(--c-lender-line);max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .tk{color:#34D8C4;font-weight:600}

/* ===== motion: make it feel alive (added 2026-06-18) — reduced-motion safe ===== */
@keyframes fbcRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fbcFade{from{opacity:0}to{opacity:1}}
.content > .pagehead{animation:fbcRise .42s var(--ease-out) both}
.content > .statstrip{animation:fbcRise .42s var(--ease-out) .05s both}
.content > .panel,.content > .grid,.content > .grid2,.content > .grid-eq,.content > .td-grid,.content > section{animation:fbcRise .46s var(--ease-out) .10s both}
.content > .panel.mt,.content > section.mt{animation:fbcRise .46s var(--ease-out) .16s both}
.statstrip .n{animation:fbcFade .6s ease .2s both}
.btn{transition:transform .12s var(--ease-out),filter .15s,background .15s,border-color .15s}
.btn:active{transform:translateY(1px) scale(.985)}
.tag{transition:transform .12s var(--ease-out)}
tbody tr.click{transition:background .12s}
tbody tr.click:hover{transform:translateX(1px)}
.livecard{transition:transform .16s var(--ease-out),box-shadow .16s}
.livecard:hover{transform:translateY(-2px)}
.iconbtn,.keybtn,.chip{transition:transform .12s var(--ease-out),filter .15s,background .15s,border-color .15s,color .15s}
.iconbtn:active,.keybtn:active,.chip:active{transform:translateY(1px) scale(.97)}
@media (prefers-reduced-motion: reduce){
  .content > *,.statstrip .n,.pot .liquid,.pot .surface{animation:none!important;transition:none!important}
  .btn:active,.iconbtn:active,.keybtn:active,.chip:active,tbody tr.click:hover,.livecard:hover{transform:none!important}
}

/* ============================================================================
   FEATURE PASS (added 2026-06-19) — call-log, documents, RBAC matrix,
   broker gamification + shared filter bar. Additive; token-driven so both
   themes + AA contrast hold. Reuses panel/table/tag/bar/drow/gauge. ========= */

/* ---- shared filter bar (call-log, documents) ---- */
.fbc-filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line)}
.fbc-find{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;background:var(--surface-2);
  border:1px solid transparent;border-radius:999px;padding:8px 14px;color:var(--muted);font-size:13px}
.fbc-find:focus-within{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.fbc-find input{border:none;background:transparent;outline:none;flex:1;color:var(--text);font-family:"Inter",sans-serif;font-size:13px}
.fbc-find svg{width:15px;height:15px;stroke:var(--muted);fill:none;flex-shrink:0}
.fbc-chips{display:flex;flex-wrap:wrap;gap:7px}
.fbc-chip{font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  color:var(--muted);cursor:pointer;transition:all var(--t-fast) var(--ease-out);user-select:none}
.fbc-chip:hover{border-color:var(--accent-line);color:var(--head-ink)}
.fbc-chip.on{background:var(--accent-bg);border-color:var(--accent-line);color:var(--accent-ink);font-weight:500}
tbody tr.is-hidden{display:none}

/* ---- sentiment dot ---- */
.senti{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.senti .sd{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--muted)}
.senti.pos .sd{background:var(--green)}.senti.neu .sd{background:var(--c-control)}
.senti.neg .sd{background:var(--red)}.senti.warm .sd{background:var(--gold)}

/* ---- call detail (drawer + recent-calls block) ---- */
.ai-sum{background:var(--accent-bg);border:1px solid var(--accent-line);border-radius:10px;padding:14px 16px;margin:4px 0 14px}
.ai-sum .ai-h{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-ink);font-weight:600;margin-bottom:8px}
.ai-sum .ai-h .spk{width:15px;height:15px;flex-shrink:0}
.ai-sum p{font-size:13px;line-height:1.55;color:var(--head-ink);margin:0}
.actionlist{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.actionlist li{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--head-ink)}
.actionlist li .ck{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--accent);flex-shrink:0;display:grid;place-items:center;margin-top:1px}
.actionlist li.done .ck{background:var(--accent);border-color:var(--accent)}
.actionlist li.done .ck svg{width:11px;height:11px;stroke:var(--surface)}
.actionlist li.done span{color:var(--muted);text-decoration:line-through}
.transcript{border:1px solid var(--line);border-radius:10px;background:var(--surface-2);max-height:300px;overflow:auto;padding:12px 14px}
.tr-line{display:flex;gap:10px;padding:6px 0;font-size:12.5px;line-height:1.5}
.tr-line .who{flex-shrink:0;width:88px;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--accent-ink);font-weight:500}
.tr-line .what{color:var(--head-ink)}
.tr-line .ts{flex-shrink:0;font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--muted);width:42px;text-align:right}
.recent-calls{display:flex;flex-direction:column;gap:8px}
.rc{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);cursor:pointer;transition:border-color var(--t-fast)}
.rc:hover{border-color:var(--accent-line)}
.rc .rc-ic{width:30px;height:30px;border-radius:7px;background:var(--accent-bg);color:var(--accent-ink);display:grid;place-items:center;flex-shrink:0}
.rc .rc-ic svg{width:15px;height:15px;stroke:currentColor;fill:none}
.rc .rc-m{flex:1;min-width:0}.rc .rc-t{font-size:12.5px;font-weight:500;color:var(--head-ink)}
.rc .rc-s{font-size:11px;color:var(--muted)}
.upload-drop{border:1.5px dashed var(--accent-line);border-radius:10px;padding:18px;text-align:center;color:var(--muted);
  font-size:12.5px;background:var(--accent-bg);cursor:pointer;transition:background var(--t-fast)}
.upload-drop:hover{background:var(--accent-bg);border-color:var(--accent)}
.upload-drop b{color:var(--accent-ink)}

/* ---- documents: signature tracker stepper ---- */
.docstep{display:flex;align-items:flex-start;gap:0;margin:6px 0 4px}
.docstep .ds-node{flex:1;text-align:center;position:relative;padding-top:26px}
.docstep .ds-node::before{content:"";position:absolute;top:9px;left:50%;width:100%;height:2px;background:var(--line)}
.docstep .ds-node:last-child::before{display:none}
.docstep .ds-node .dot{position:absolute;top:0;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;
  background:var(--surface);border:2px solid var(--line);display:grid;place-items:center;font-size:10px;color:var(--muted);z-index:1}
.docstep .ds-node.done .dot{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.docstep .ds-node.done::before{background:var(--accent)}
.docstep .ds-node.current .dot{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-bg)}
.docstep .ds-node .dl{font-size:10.5px;color:var(--muted);font-weight:500;margin-top:3px}
.docstep .ds-node.done .dl,.docstep .ds-node.current .dl{color:var(--head-ink)}
.recip{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.recip:last-child{border-bottom:none}
.recip .ro{width:22px;height:22px;border-radius:6px;background:var(--accent-bg);color:var(--accent-ink);display:grid;place-items:center;
  font-family:"JetBrains Mono",monospace;font-size:11px;flex-shrink:0}
.recip .rn{flex:1}.recip .rn .n{font-size:13px;color:var(--head-ink);font-weight:500}.recip .rn .e{font-size:11.5px;color:var(--muted)}

/* ---- RBAC permission matrix ---- */
.rbac{width:100%;border-collapse:collapse}
.rbac th,.rbac td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:center;font-size:12px}
.rbac thead th{font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);font-weight:500;vertical-align:bottom}
.rbac th.role,.rbac td.role{text-align:left;white-space:nowrap}
.rbac td.role .rname{font-size:13px;font-weight:500;color:var(--head-ink)}
.rbac td.role .rdesc{font-size:11px;color:var(--muted)}
.rbac tbody tr:hover td{background:var(--accent-bg)}
.permdot{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);transition:all var(--t-fast) var(--ease-out)}
.permdot svg{width:13px;height:13px;stroke:var(--muted);fill:none;opacity:0}
.permdot.on{background:var(--accent);border-color:var(--accent)}
.permdot.on svg{stroke:var(--surface);opacity:1}
.permdot.step{background:rgba(245,158,11,0.16);border-color:rgba(245,158,11,0.45)}
.permdot.step svg{stroke:var(--gold);opacity:1}
.permdot:hover{transform:translateY(-1px)}
.rbac-leg{display:flex;flex-wrap:wrap;gap:16px;padding:12px 20px;font-size:12px;color:var(--muted)}
.rbac-leg .lg{display:flex;align-items:center;gap:7px}
.rbac-leg .sq{width:16px;height:16px;border-radius:5px;flex-shrink:0;display:grid;place-items:center}
.rbac-leg .sq.on{background:var(--accent)}.rbac-leg .sq.on svg{width:10px;height:10px;stroke:var(--surface)}
.rbac-leg .sq.step{background:rgba(245,158,11,0.16);border:1px solid rgba(245,158,11,0.45)}
.rbac-leg .sq.off{background:var(--surface-2);border:1px solid var(--line)}

/* ---- broker gamification: badges + unlock ---- */
.standing-wrap{display:flex;gap:22px;align-items:center;flex-wrap:wrap;padding:16px 20px 6px}
.standing-meta{flex:1;min-width:220px}
.badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:4px}
.badge{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:9px;font-size:11.5px;font-weight:500;
  border:1px solid var(--line);background:var(--surface);color:var(--muted)}
.badge .bi{width:16px;height:16px;flex-shrink:0;display:grid;place-items:center}
.badge .bi svg{width:14px;height:14px;stroke:currentColor;fill:none}
.badge.earned{border-color:var(--accent-line);background:var(--accent-bg);color:var(--accent-ink)}
.badge.earned.gold{border-color:var(--c-dist-line);background:var(--c-dist-bg);color:var(--c-dist-ink)}
.badge.earned.green{border-color:rgba(34,197,94,0.34);background:rgba(34,197,94,0.10);color:#15803d}
.badge.locked{opacity:0.55;filter:grayscale(0.3)}
html[data-theme="dark"] .badge.earned.green{color:#4ADE80}
.unlock{margin-top:14px;padding:13px 15px;border:1px solid var(--accent-line);border-radius:10px;background:var(--accent-bg)}
.unlock .uh{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--head-ink);margin-bottom:9px}
.unlock .uh b{font-weight:600}
.unlock .un{font-family:"JetBrains Mono",monospace;color:var(--accent-ink)}
.unlock-note{font-size:11px;color:var(--muted);margin-top:9px;line-height:1.45}