/* Shared admin design tokens from the approved mockups (finance / inflows-levels-engage / b2b-simplified).
   Tokens are scoped to the restyled pages; component classes below use unique
   names so they cannot collide with the legacy inline styles. */
#page-finance, #page-engage, #page-b2b, #page-growth, #page-activity{
  --page:#F1F4F8; --card:#FFFFFF; --panel:#F6F8FA;
  --line:#E5E7EB; --text:#111827; --muted:#6B7280;
  --blue:#2563EB; --blue-bg:#EAF1FE; --blue-deep:#185FA5;
  --green:#0CA30C; --green-deep:#0F6E56; --green-bg:#EAF7EF; --green-text:#085041;
  --red:#D03B3B; --red-bg:#FCEBEB; --red-text:#791F1F;
  --amber:#BA7517; --amber-bg:#FAEEDA; --amber-text:#633806;
  --purple:#534AB7; --teal:#1D9E75; --teal-light:#5DCAA5; --gray-bar:#B4B2A9;
  --fradius:8px;
  color:var(--text);
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
#page-finance .finCard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 20px;}
#page-finance h2.finTitle{font-size:15px;font-weight:600;margin:0;}
#page-finance .finSec{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 8px;}
#page-finance .finRow{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px;}
#page-finance .finPills{display:inline-flex;border:1px solid var(--line);border-radius:var(--fradius);overflow:hidden;font-size:12px;}
#page-finance .finPills span{padding:4px 10px;color:var(--muted);cursor:pointer;}
#page-finance .finPills span.on{background:var(--blue-bg);color:var(--blue);font-weight:500;}
#page-finance .heroGrid{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;margin-bottom:18px;}
@media(max-width:640px){#page-finance .heroGrid{grid-template-columns:1fr;}}
#page-finance .tile{background:var(--panel);border-radius:12px;padding:14px 16px;}
#page-finance .heroNum{font-size:40px;font-weight:600;line-height:1.1;color:var(--green-deep);font-variant-numeric:tabular-nums;}
#page-finance .heroUsd{font-size:22px;font-weight:500;color:var(--green-deep);opacity:.85;}
#page-finance .lbl{font-size:12px;color:var(--muted);}
#page-finance .bars{display:flex;align-items:flex-end;gap:4px;height:64px;}
#page-finance .bars div{flex:1;border-radius:2px;background:#1BAF7A;min-height:2px;}
#page-finance .bars div.loss{background:#E34948;}
#page-finance .wfRow{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:12px;}
#page-finance .wfRow .l{width:170px;color:var(--muted);flex:none;}
#page-finance .wfRow .track{flex:1;background:var(--panel);border-radius:4px;height:18px;overflow:hidden;}
#page-finance .wfRow .fill{height:18px;border-radius:4px;display:block;}
#page-finance .wfRow .v{width:104px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;flex:none;}
#page-finance table{width:100%;border-collapse:collapse;font-size:12px;}
#page-finance th{background:var(--panel);color:var(--muted);font-weight:600;text-align:left;padding:7px 12px;}
#page-finance td{padding:7px 12px;border-top:1px solid var(--line);}
#page-finance .r{text-align:right;font-variant-numeric:tabular-nums;}
#page-finance .tblWrap{border:1px solid var(--line);border-radius:var(--fradius);overflow:hidden;margin-bottom:18px;}
#page-finance .finChip{padding:1px 8px;border-radius:8px;font-size:11px;}
#page-finance .finChip.auto{background:var(--green-bg);color:var(--green-text);}
#page-finance .finChip.manual{background:var(--panel);color:var(--muted);}
#page-finance .finChip.earn{background:var(--green-bg);color:var(--green-text);}
#page-finance .finChip.loss{background:var(--red-bg);color:var(--red-text);}
#page-finance .pos{color:var(--green);} #page-finance .neg{color:var(--red);}
#page-finance .taxBox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:var(--fradius);margin-bottom:18px;font-size:13px;}
#page-finance .taxBox input{width:80px;font-size:14px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--fradius);}
#page-finance .addRow{color:var(--blue);cursor:pointer;font-weight:500;}
#page-finance .finNote{font-size:12px;color:var(--muted);margin:0 0 16px;}
#page-finance .finBtn{font-size:12px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--fradius);background:#fff;color:var(--text);cursor:pointer;}
#page-finance .finBtnPrimary{background:var(--blue);color:#fff;border:none;font-weight:500;}
#page-finance .finForm{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;padding:12px;background:var(--panel);border-radius:var(--fradius);margin-top:8px;}
#page-finance .finForm input,#page-finance .finForm select{font-size:13px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--fradius);width:100%;}
#page-finance .finForm label{font-size:11px;color:var(--muted);display:block;margin-bottom:3px;}

/* ---- v3 shared components (inflows / levels / engage / b2b mockups) ---- */
.vkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:10px;margin-bottom:14px;}
.vkpi{background:var(--panel);border-radius:var(--fradius);padding:10px 12px;}
.vkpi .l{font-size:12px;color:var(--muted);}
.vkpi .v{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;}
.vkpi .s{font-size:12px;color:var(--muted);}
.vkpi.sel{outline:2px solid var(--blue);}
.vpos{color:var(--green);} .vneg{color:var(--red);} .vwarn{color:var(--amber);}
.vmix{display:flex;height:20px;border-radius:4px;overflow:hidden;margin-bottom:6px;background:var(--panel);}
.vlegend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--muted);margin-bottom:16px;}
.vlegend span{display:flex;align-items:center;gap:4px;}
.vsw{width:10px;height:10px;border-radius:2px;display:inline-block;}
.vhint{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--panel);border-radius:var(--fradius);font-size:12px;color:var(--muted);flex-wrap:wrap;}
.vbar{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:12px;}
.vbar .l{width:74px;color:var(--muted);flex:none;}
.vbar .track{flex:1;background:var(--panel);border-radius:4px;height:14px;overflow:hidden;}
.vbar .fill{display:block;height:14px;border-radius:4px;}
.vbar .v{width:70px;text-align:right;font-weight:600;flex:none;font-variant-numeric:tabular-nums;}
.vbar .a{width:60px;text-align:right;color:var(--blue);flex:none;cursor:pointer;font-weight:500;}
.vcols2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px;}
@media(max-width:640px){.vcols2{grid-template-columns:1fr;}}
.etabs{display:flex;gap:6px;margin-bottom:14px;font-size:13px;}
.etabs span{padding:5px 12px;border-radius:var(--fradius);color:var(--muted);cursor:pointer;}
.etabs span.on{background:var(--blue-bg);color:var(--blue);font-weight:500;}
.jrow{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--line);font-size:13px;}
.jrow:first-child{border-top:0;}
.jrow .body{flex:1;}
.jrow .name{font-weight:600;}
.jrow .desc{font-size:12px;color:var(--muted);}
.jrow .stat{font-size:12px;color:var(--muted);flex:none;}
.vtoggle{width:34px;height:18px;border-radius:9px;position:relative;flex:none;cursor:pointer;border:0;padding:0;}
.vtoggle.on{background:var(--green);}
.vtoggle.off{background:#CBD5E1;}
.vtoggle b{position:absolute;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;}
.vtoggle.on b{right:2px;} .vtoggle.off b{left:2px;}
.addlink{color:var(--blue);font-weight:500;cursor:pointer;}
.vsec{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 8px;}
.vtblWrap{border:1px solid var(--line);border-radius:var(--fradius);overflow:hidden;margin-bottom:12px;}
.vtblWrap table{width:100%;border-collapse:collapse;font-size:12px;}
.vtblWrap th{background:var(--panel);color:var(--muted);font-weight:600;text-align:left;padding:7px 12px;}
.vtblWrap td{padding:8px 12px;border-top:1px solid var(--line);vertical-align:middle;}
.vr{text-align:right;font-variant-numeric:tabular-nums;}

/* ---- b2b simplified ---- */
.stgchip{padding:2px 8px;border-radius:10px;font-size:11px;white-space:nowrap;}
.stgchip.request{background:var(--panel);color:var(--muted);}
.stgchip.proposal{background:var(--blue-bg);color:var(--blue);}
.stgchip.contract{background:var(--amber-bg);color:var(--amber-text);}
.stgchip.delivery{background:var(--green-bg);color:var(--green-text);}
.stgchip.won{background:var(--green-bg);color:var(--green-text);}
.stgchip.lost{background:var(--red-bg);color:var(--red-text);}
.na-warn{font-weight:600;color:var(--amber);}
.na-red{font-weight:600;color:var(--red);}
.na-blue{font-weight:600;color:var(--blue);}
.na-green{font-weight:600;color:var(--green-deep);}
.vintake{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:var(--fradius);margin-bottom:14px;font-size:13px;}
.vintake input,.vintake select{font-size:13px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--fradius);}
.vbtnP{font-size:13px;padding:6px 14px;background:var(--blue);color:#fff;border:none;border-radius:var(--fradius);font-weight:500;cursor:pointer;}
.vbtn{font-size:13px;padding:8px 16px;background:#fff;color:var(--text);border:1px solid var(--line);border-radius:var(--fradius);cursor:pointer;}
.stepper{display:flex;align-items:center;margin-bottom:14px;font-size:12px;}
.step{display:flex;align-items:center;gap:6px;color:var(--muted);}
.step .dot{width:20px;height:20px;border-radius:50%;background:var(--panel);display:inline-flex;align-items:center;justify-content:center;font-size:11px;}
.step.done{color:var(--green-deep);}
.step.done .dot{background:var(--green-deep);color:#fff;}
.step.now{color:var(--blue);font-weight:600;}
.step.now .dot{background:var(--blue);color:#fff;}
.conn{flex:1;height:2px;background:var(--line);margin:0 6px;}
.conn.done{background:var(--green-deep);}
.vbanner{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--amber-bg);border-radius:var(--fradius);margin-bottom:14px;font-size:13px;color:var(--amber-text);flex-wrap:wrap;}
.vbanner.blue{background:var(--blue-bg);color:var(--blue-deep);}
.vbanner.green{background:var(--green-bg);color:var(--green-text);}
.vbanner button{font-size:12px;padding:5px 12px;flex:none;background:#fff;border:1px solid var(--line);border-radius:var(--fradius);cursor:pointer;}
.propCard{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--card);}
.propCard .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.propCard .hd .t{font-size:13px;font-weight:600;}
.propCard .hd .e{font-size:12px;color:var(--blue);cursor:pointer;}
.propCard .bodytext{font-size:13px;color:var(--muted);line-height:1.6;}
.propCard .bodytext b{color:var(--text);}
.vcopilot{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap;}
.vcopilot input{flex:1;min-width:180px;font-size:13px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--fradius);}
.vcopilot button,.vcopilot select{font-size:12px;padding:6px 12px;background:#fff;border:1px solid var(--line);border-radius:var(--fradius);cursor:pointer;}
.vacc{border:1px solid var(--line);border-radius:var(--fradius);margin-bottom:6px;font-size:13px;}
.vacc>summary{padding:9px 12px;color:var(--muted);cursor:pointer;list-style:none;}
.vacc>summary::before{content:"› ";}
.vacc[open]>summary::before{content:"⌄ ";}
.vacc .inner{padding:4px 12px 12px;}
.vacc.locked>summary{color:var(--muted);opacity:.7;cursor:default;}
