/* Tamra site v2 — Banking module page (modules/banking.html).
   Mock-ups drawn from src/modules/accounting/BankReconciliation.jsx at 1.71.0 (Quiet theme), every selector under .vg-br.
   The reconcile workspace has phases: p0 three lines open · p1 the rule booked the fee · p2 the Corniche transfer applied ·
   p3 every line matched · px the period closed. The hero plays p0 → px once; the tour shows one phase per chapter. */

/* ── the reconcile workspace ───────────────────────────────────────────────────────────────── */
.vg-br .page{padding:16px 24px 0;position:relative}
.vg-br .ws{transition:opacity .45s ease,visibility .45s}
.vg-br .hd{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.vg-br .hd-id{display:flex;align-items:center;gap:12px}
.vg-br .bk{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);
  color:#444D5A;font:600 12px/1.2 "Inter",sans-serif}
.vg-br .bk .ic{width:13px;height:13px}
.vg-br .h1{display:flex;align-items:center;gap:10px;font:800 20px/1.2 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.vg-br .h1>.ic{width:20px;height:20px;color:#444D5A}
.vg-br .sub{font-size:11px;color:#626976;margin-top:3px}
.vg-br .hd-acts{display:flex;align-items:center;gap:8px}
.vg-br .ob{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:8px;border:1px solid #D6DEE8;color:#444D5A;font:700 11px/1.2 "Inter",sans-serif}
.vg-br .ob .ic{width:12px;height:12px}
.vg-br .mbw{position:relative;display:inline-flex}
.vg-br .mb{width:26px;height:26px;border-radius:6px;border:1px solid #D6DEE8;color:#444D5A;display:grid;place-items:center;transition:background .3s,border-color .3s}
.vg-br .mb .ic{width:13px;height:13px}
.vg-br .cp{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;background:#0F1A2B;color:#fff;font:700 12px/1.2 "Inter",sans-serif;white-space:nowrap}
.vg-br .cp .ic{width:13px;height:13px}
.vg-br .cpd{display:inline-flex;align-items:stretch;white-space:nowrap;padding-right:2px}
.vg-br .pc{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:8px 0 0 8px;background:rgba(30,142,90,.12);border:1px solid rgba(30,142,90,.35);border-right:0;
  color:#0F1A2B;font:700 12px/1.2 "Inter",sans-serif}
.vg-br .pc .ic{width:13px;height:13px;color:#1E8E5A}
.vg-br .ro{display:inline-flex;align-items:center;gap:4px;padding:8px 10px;border-radius:0 8px 8px 0;border:1px solid #D6DEE8;color:#444D5A;font:600 11px/1.2 "Inter",sans-serif}
.vg-br .ro .ic{width:11px;height:11px}
.vg-br .inote{display:flex;width:max-content;align-items:center;gap:6px;color:#2563EB;font:600 11px/1.3 "Inter",sans-serif;margin-bottom:12px}
.vg-br .inote .ic{width:13px;height:13px}

/* success banner: collapsible */
.vg-br .ban{display:grid;grid-template-rows:1fr;margin-bottom:12px}
.vg-br .ban-w{min-height:0;overflow:hidden}
.vg-br .ban-in{display:flex;align-items:center;gap:8px;padding:10px;border-radius:8px;background:rgba(30,142,90,.08);border:1px solid rgba(30,142,90,.2);color:#1E8E5A;font-size:12px}
.vg-br .ban-in .ic{width:13px;height:13px}
.vg-br .ban .br{display:none}

/* the compass */
.vg-br .cmp{display:flex;align-items:center;gap:18px;padding:8px 14px;margin-bottom:12px;background:#fff;border:1px solid #D6DEE8;border-radius:12px;font-size:12px;position:relative;z-index:2}
.vg-br .ci{display:inline-flex;align-items:baseline;color:#626976;white-space:nowrap}
.vg-br .ci>b{color:#0F1A2B;margin-left:4px;font-weight:700}
.vg-br .ci .n2{margin-left:4px}
.vg-br .cmp .nb{display:inline-flex;align-items:baseline;max-width:0;margin-left:-18px;opacity:0;overflow:hidden}
.vg-br .sp{display:inline-flex;align-items:center;padding:1px 6px;border-radius:999px;font:700 9.5px/1.45 "Inter",sans-serif;letter-spacing:.02em;white-space:nowrap;border:1px solid}
.vg-br .sp.ok{color:#1E8E5A;background:rgba(30,142,90,.10);border-color:rgba(30,142,90,.22)}
.vg-br .sp.warn{color:#9A5B00;background:rgba(154,91,0,.10);border-color:rgba(154,91,0,.22)}
.vg-br .sp.sl{color:#444D5A;background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.08)}
.vg-br .det{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:6px;border:1px solid #D6DEE8;color:#444D5A;font:700 11px/1.2 "Inter",sans-serif}
.vg-br .det .ic{width:11px;height:11px}

/* filter bar */
.vg-br .fb{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.vg-br .srch{position:relative;flex:1 1 240px;max-width:360px;padding:8px 12px 8px 34px;border-radius:8px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);color:#9AA3AF;font-size:12px;line-height:16px}
.vg-br .srch .ic{position:absolute;left:12px;top:50%;width:13px;height:13px;margin-top:-6.5px;color:#626976}
.vg-br .seg{display:flex;gap:4px;padding:4px;border-radius:9px;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.06)}
.vg-br .seg>span{padding:5px 10px;border-radius:6px;font:600 11px/1.3 "Inter",sans-serif;color:#444D5A;white-space:nowrap}
.vg-br .seg>span.on{background:#0F1A2B;color:#fff}
.vg-br .seg em{font-size:10px;opacity:.7;margin-left:4px}
.vg-br .addl{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:8px;border:1px solid #D6DEE8;color:#444D5A;font:700 11px/1.2 "Inter",sans-serif;opacity:.5}
.vg-br .addl .ic,.vg-br .clr .ic{width:12px;height:12px}
.vg-br .clr{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:8px;background:rgba(225,29,72,.08);border:1px solid rgba(225,29,72,.25);color:#E11D48;
  font:700 11px/1.2 "Inter",sans-serif;white-space:nowrap;overflow:hidden;max-width:0;padding-left:0;padding-right:0;border-width:0;margin-left:-10px;opacity:0}

/* the running statement table */
.vg-br .tbl{border:1px solid #D6DEE8;border-radius:12px;background:#fff;box-shadow:0 4px 16px rgba(15,23,42,.06);overflow:hidden;font-size:12px}
.vg-br .tr{display:grid;grid-template-columns:32px 104px minmax(0,1fr) 110px 110px 130px 158px;align-items:center}
.vg-br .tr>span{padding:10px 12px;min-width:0}
.vg-br .tr .r{text-align:right}
.vg-br .tr .c{text-align:center;padding-left:6px;padding-right:6px;display:flex;justify-content:center}
.vg-br .th{background:#EEF2F6;border-bottom:1px solid #D6DEE8}
.vg-br .th>span{font:800 10.5px/1.3 "Inter",sans-serif;color:#334155;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.vg-br .inp{display:block;padding:5px 7px;border-radius:5px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);color:#0F1A2B;font-size:11px;line-height:15px;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-br .inp.ph-t{color:#9AA3AF}
.vg-br .inp.dte{display:flex;align-items:center;justify-content:space-between;gap:4px}
.vg-br .inp.dte .ic{width:11px;height:11px;color:#444D5A}
.vg-br .inp.in{background:rgba(30,142,90,.04)}
.vg-br .inp.out{background:rgba(225,29,72,.04);color:rgba(225,29,72,.55)}
.vg-br .add{background:rgba(0,0,0,.02);border-top:1px dashed rgba(0,0,0,.16)}
.vg-br .add>span{padding:6px 8px}
.vg-br .add .c .ic{width:12px;height:12px;color:#444D5A;opacity:.6}
.vg-br .trio{display:flex;gap:6px}
.vg-br .trio .d{flex:2}.vg-br .trio .p{flex:1.2;min-width:120px}.vg-br .trio .f{flex:1}
.vg-br .addb{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:5px;background:#0F1A2B;color:#fff;font:700 10px/1.2 "Inter",sans-serif;font-style:normal}
.vg-br .addb .ic{width:9px;height:9px}
.vg-br .rwith{background:rgba(0,0,0,.02);border-bottom:1px solid #E6ECF2}
.vg-br .rwith .rw-in{grid-column:2/7;display:flex;align-items:center;gap:10px;padding:2px 8px 10px}
.vg-br .lbl{display:block;font:700 10px/1.3 "Inter",sans-serif;color:#626976;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;font-style:normal}
.vg-br .rw-in .wide{flex:1;max-width:520px;padding:6px 8px}
.vg-br .rw-in small{font-size:10px;color:#626976;white-space:nowrap}
.vg-br .nxt{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:rgba(0,0,0,.02);border-top:1px dashed rgba(0,0,0,.16);font-size:11px}
.vg-br .nxt>span{padding:0}
.vg-br .nx-l{display:inline-flex;align-items:center;gap:7px;color:#626976}
.vg-br .nx-l .ic{width:11px;height:11px}
.vg-br .nx-l b{font:700 10.5px/1.3 "Inter",sans-serif;color:#444D5A;text-transform:uppercase;letter-spacing:.05em}
.vg-br .nx-v{font-weight:700;color:#0F1A2B}
.vg-br .cbal{background:rgba(0,0,0,.03);border-top:1px solid rgba(0,0,0,.14)}
.vg-br .cbal>span{padding:12px}
.vg-br .cbal .lab{grid-column:2/4;font:700 11px/1.3 "Inter",sans-serif;color:#444D5A;text-transform:uppercase;letter-spacing:.05em}
.vg-br .cbal .r{font-weight:700;color:#0F1A2B}
.vg-br .cbal .big{font:800 14px/1.2 "Plus Jakarta Sans",sans-serif}
.vg-br .ln{border-bottom:1px solid #E6ECF2}
.vg-br .ln .dt{color:#444D5A;font-size:11px}
.vg-br .ln .ds b{display:block;color:#0F1A2B;font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-br .ln .pt{display:flex;align-items:center;gap:4px;font-size:10px;color:#444D5A;margin-top:2px}
.vg-br .ln .pt .ic{width:9px;height:9px}
.vg-br .ln .rf{display:block;font-size:10px;color:#626976;margin-top:2px}
.vg-br .mt{display:grid;grid-template-rows:1fr;margin-top:3px;font-size:10px;color:#444D5A}
.vg-br .mt>span{min-height:0;overflow:hidden;display:flex;align-items:center;gap:4px;white-space:nowrap}
.vg-br .mt .ic{width:9px;height:9px}
.vg-br .ln .a{font-weight:700;color:#0F1A2B}
.vg-br .ln .rb{font-weight:600;color:#0F1A2B}
.vg-br .sq-o{display:block;width:16px;height:16px;border-radius:4px;border:1.5px solid rgba(154,91,0,.5)}
.vg-br .sq-m{display:grid;place-items:center;width:18px;height:18px;border-radius:4px;background:#0F1A2B;color:#fff}
.vg-br .sq-m .ic{width:11px;height:11px}
.vg-br .acts{display:inline-flex;align-items:center;gap:6px}
.vg-br .rc{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:6px;background:#0F1A2B;border:1px solid #0F1A2B;color:#fff;font:700 10px/1.2 "Inter",sans-serif;font-style:normal;white-space:nowrap}
.vg-br .rc .ic{width:9px;height:9px}
.vg-br .dots{width:26px;height:26px;border-radius:6px;border:1px solid #D6DEE8;color:#444D5A;display:grid;place-items:center}
.vg-br .dots .ic{width:13px;height:13px}
/* Unmatch: locked once the period is closed (the app's opacity .45 baked into the colours) */
.vg-br .um{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:6px;font:700 10px/1.2 "Inter",sans-serif;font-style:normal;white-space:nowrap;
  background:rgba(0,0,0,.014);border:1px solid rgba(0,0,0,.03);color:#C2C6CC}
.vg-br .um .ic{width:9px;height:9px}

/* suggestions under the 29 Sep cheque: collapsible */
.vg-br .sug{display:grid;grid-template-rows:0fr;background:rgba(0,0,0,.02);border-bottom:0 solid rgba(0,0,0,.06)}
.vg-br .sug-w{min-height:0;overflow:hidden}
.vg-br .sug-in{padding:8px 12px 10px 50px}
.vg-br .sg-rw{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.vg-br .sg-rw .inp{flex:1;max-width:520px;padding:5px 8px;border-radius:7px;border:1px solid #D6DEE8;background:#fff}
.vg-br .sg-h{display:flex;align-items:center;gap:4px;font:700 10px/1.3 "Inter",sans-serif;color:#626976;margin-bottom:6px}
.vg-br .sg-h .ic{width:10px;height:10px;color:#444D5A}
.vg-br .card{display:flex;align-items:center;gap:10px;padding:8px;border-radius:7px;margin-bottom:4px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.08)}
.vg-br .card>.ic{width:11px;height:11px;color:#444D5A}
.vg-br .card .cd{flex:1;font-size:11px;color:#626976;white-space:nowrap}
.vg-br .card .cd b{color:#0F1A2B;font-weight:600}
.vg-br .card .cd span{margin-left:8px}
.vg-br .card .am{font:700 11px/1.2 "SF Mono",Monaco,ui-monospace,monospace;color:#0F1A2B}
.vg-br .card .ap{padding:4px 10px;border-radius:5px;background:#0F1A2B;color:#fff;font:700 10px/1.2 "Inter",sans-serif;font-style:normal}

/* the header's ⋯ menu (Rules chapter) */
.vg-br .menu{position:absolute;top:calc(100% + 4px);right:0;z-index:6;display:flex;flex-direction:column;min-width:228px;padding:4px;border-radius:10px;background:#fff;
  border:1px solid rgba(0,0,0,.14);box-shadow:0 10px 30px rgba(15,23,42,.14);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .35s ease,visibility .35s,transform .35s ease}
.vg-br .mi{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;font:600 12px/1.3 "Inter",sans-serif;color:#0F1A2B;white-space:nowrap}
.vg-br .mi .ic{width:12px;height:12px}
.vg-br .mi.hov{background:rgba(0,0,0,.06)}

/* swaps: every variant in one cell, one visible */
.vg-br .sw{display:inline-grid;vertical-align:top;justify-items:start}
.vg-br .sw>*{grid-area:1/1}
.vg-br .sw-r{justify-items:end}
.vg-br .ph{font-style:normal;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.vg-br .ph.px{opacity:1;visibility:visible}

/* the header button: Close Period, or Period closed + Reopen… (collapsing, so nothing leaves a gap) */
.vg-br .hd-acts .cp,.vg-br .hd-acts .cpd{overflow:hidden;transition:max-width .45s ease,opacity .35s ease,margin .45s ease,padding .45s ease}
.vg-br .hd-acts .cp{max-width:0;opacity:0;margin-left:-8px;padding-left:0;padding-right:0}
.vg-br .hd-acts .cpd{max-width:250px;opacity:1}

/* ── phases for the tour and the hero's first frame ─────────────────────────────────────────── */
/* p0: the hero, before it plays */
.motion .m-shot:not(.in) .vg-br .ph.px{opacity:0;visibility:hidden}
.motion .m-shot:not(.in) .vg-br .ph.p0{opacity:1;visibility:visible}
/* p1: Rules and Suggestions (the rule has booked the fee) · p3: Close Period */
.vg-br[data-state=rules] .ph.px,.vg-br[data-state=suggest] .ph.px,.vg-br[data-state=close] .ph.px{opacity:0;visibility:hidden}
.vg-br[data-state=rules] .ph.p1,.vg-br[data-state=suggest] .ph.p1,.vg-br[data-state=close] .ph.p3{opacity:1;visibility:visible}

/* the period still open (p0–p3): Close Period shows, Unmatch and Add Line are live */
.motion .m-shot:not(.in) .vg-br .hd-acts .cp,.vg-br[data-state=rules] .hd-acts .cp,.vg-br[data-state=suggest] .hd-acts .cp,.vg-br[data-state=close] .hd-acts .cp{max-width:160px;opacity:1;margin-left:0;padding-left:14px;padding-right:14px}
.motion .m-shot:not(.in) .vg-br .hd-acts .cpd,.vg-br[data-state=rules] .hd-acts .cpd,.vg-br[data-state=suggest] .hd-acts .cpd,.vg-br[data-state=close] .hd-acts .cpd{max-width:0;opacity:0;margin-left:-8px}
.motion .m-shot:not(.in) .vg-br .um,.vg-br[data-state=rules] .um,.vg-br[data-state=suggest] .um,.vg-br[data-state=close] .um{background:rgba(225,29,72,.08);border-color:rgba(225,29,72,.2);color:#E11D48}
.motion .m-shot:not(.in) .vg-br .addl,.vg-br[data-state=rules] .addl,.vg-br[data-state=suggest] .addl,.vg-br[data-state=close] .addl{opacity:1}
/* lines still open (p0–p2): Not booked, Clear unmatched and the suggestions show */
.motion .m-shot:not(.in) .vg-br .cmp .nb,.vg-br[data-state=rules] .cmp .nb,.vg-br[data-state=suggest] .cmp .nb{max-width:170px;margin-left:0;opacity:1}
.motion .m-shot:not(.in) .vg-br .clr,.vg-br[data-state=rules] .clr,.vg-br[data-state=suggest] .clr{max-width:180px;padding-left:12px;padding-right:12px;border-width:1px;margin-left:0;opacity:1}
.motion .m-shot:not(.in) .vg-br .sug,.vg-br[data-state=rules] .sug,.vg-br[data-state=suggest] .sug{grid-template-rows:1fr;border-bottom-width:1px}
/* matched sub-lines not there yet */
.motion .m-shot:not(.in) .vg-br .ln:is(.l-fee,.l-chq,.l-cor) .mt,.vg-br[data-state=rules] .ln:is(.l-chq,.l-cor) .mt,.vg-br[data-state=suggest] .ln:is(.l-chq,.l-cor) .mt{grid-template-rows:0fr;margin-top:0;opacity:0}
/* the banner: none before closing, the rules' count in the Rules chapter */
.motion .m-shot:not(.in) .vg-br .ban,.vg-br[data-state=suggest] .ban,.vg-br[data-state=close] .ban{grid-template-rows:0fr;margin-bottom:0}
.vg-br[data-state=rules] .ban .bx{display:none}
.vg-br[data-state=rules] .ban .br{display:inline}
/* the menu, open */
.vg-br[data-state=rules] .menu{opacity:1;visibility:visible;transform:none}
.vg-br[data-state=rules] .mb{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.14)}
/* gentle crossfades between chapters */
.vg-br .cmp .nb,.vg-br .clr{transition:max-width .45s ease,margin .45s ease,padding .45s ease,opacity .35s ease}
.vg-br .sug,.vg-br .mt,.vg-br .ban{transition:grid-template-rows .45s ease,margin .45s ease,opacity .35s ease,border-width .45s}
.vg-br .um{transition:background-color .4s,border-color .4s,color .4s}
.vg-br .addl{transition:opacity .4s}

/* ── Import (chapter 1): a statement PDF, read and checked before it comes in ─────────────────── */
.vg-br .imp{position:absolute;inset:0;padding:16px 24px 0;background:#fff;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s;overflow:hidden}
.vg-br[data-state=import] .imp{opacity:1;visibility:visible}
.vg-br[data-state=import] .ws{opacity:0;visibility:hidden}
.vg-br .chipa{font:600 11px/1.3 "Inter",sans-serif;color:#626976;padding:3px 9px;border-radius:5px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06)}
.vg-br .imp .h1>.ic{width:18px;height:18px}
.vg-br .ob2,.vg-br .ob3,.vg-br .ob4{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:8px;font:700 11px/1.2 "Inter",sans-serif}
.vg-br .ob2{border:1px solid #D6DEE8;color:#0F1A2B}
.vg-br .ob3{background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);color:#444D5A}
.vg-br .ob2 .ic,.vg-br .ob3 .ic{width:12px;height:12px}
.vg-br .okb{display:flex;align-items:center;gap:8px;padding:10px;margin-bottom:14px;border-radius:8px;background:rgba(30,142,90,.08);border:1px solid rgba(30,142,90,.2);color:#1E8E5A;font-size:12px}
.vg-br .okb .ic{width:13px;height:13px}
.vg-br .note{padding:10px;margin:-6px 0 14px;border-radius:8px;background:rgba(30,142,90,.06);color:#0F1A2B;font-size:12.5px;line-height:1.5}
.vg-br .st{font:700 13px/1.3 "Plus Jakarta Sans",sans-serif;color:#0F1A2B;margin-bottom:8px}
.vg-br .map{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 10px;margin-bottom:12px}
.vg-br .sel,.vg-br .inp2{display:flex;align-items:center;justify-content:space-between;padding:7px 11px;border-radius:8px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);
  color:#0F1A2B;font-size:13px;line-height:17px;font-style:normal;margin-top:4px}
.vg-br .sel .ic{width:12px;height:12px;color:#626976}
.vg-br .pv{background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.06);border-radius:10px;margin-bottom:12px;overflow:hidden}
.vg-br .pv-h{padding:7px 12px;font:700 11px/1.3 "Inter",sans-serif;color:#626976;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid rgba(0,0,0,.06)}
.vg-br .pv-r{display:grid;grid-template-columns:120px minmax(0,1fr) 140px;font-size:11px;border-top:1px solid rgba(0,0,0,.06)}
.vg-br .pv-r>span{padding:5px 10px;color:#444D5A}
.vg-br .pv-th{background:rgba(0,0,0,.015);border-top:0}
.vg-br .pv-th>span{font-size:10px;font-weight:700;color:#626976}
.vg-br .pv-r .mono{font-family:"SF Mono",Monaco,ui-monospace,monospace;color:#0F1A2B}
.vg-br .pv-r .r{text-align:right;font-weight:700}
.vg-br .per{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.vg-br .adds{padding:9px 12px;margin-bottom:12px;border-radius:8px;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.06);color:#444D5A;font-size:12px;line-height:1.5}
.vg-br .adds b{color:#0F1A2B}
.vg-br .ibtn{display:flex;justify-content:space-between}
.vg-br .ob4{background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06);color:#444D5A;padding:9px 16px;font-size:12px}
.vg-br .go{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:8px;background:#0F1A2B;color:#fff;font:700 12px/1.2 "Inter",sans-serif}
.vg-br .go .ic{width:13px;height:13px}

/* ── the two dialogs (chapters 4 and 5) ─────────────────────────────────────────────────────── */
.vg-br .veil{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(2,6,23,.55);
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
.vg-br[data-state=close] .v-close,.vg-br[data-state=reopen] .v-reopen{opacity:1;visibility:visible}
.vg-br .dlg{width:580px;padding:24px;border-radius:16px;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 20px 60px rgba(2,6,23,.45);transform:translateY(10px) scale(.98);transition:transform .45s ease}
.vg-br[data-state=close] .v-close .dlg,.vg-br[data-state=reopen] .v-reopen .dlg{transform:none}
.vg-br .dlg-r{width:540px}
.vg-br .dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.vg-br .dh b{display:flex;align-items:center;gap:8px;font:800 17px/1.2 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.vg-br .dh b .ic{width:16px;height:16px;color:#444D5A}
.vg-br .dh .x{width:18px;height:18px;color:#626976}
.vg-br .dlg .inote{margin-bottom:14px}
.vg-br .dates{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.vg-br .figs{padding:12px 14px;border-radius:10px;margin-bottom:12px;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.06)}
.vg-br .fr{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:12px;font-weight:600;color:#0F1A2B}
.vg-br .fr.t{padding:7px 0 2px;border-top:1px solid rgba(0,0,0,.08);font-weight:700}
.vg-br .fr.t span+span{font-weight:800}
.vg-br .figs .gap{height:10px}
.vg-br .dif{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:10px;margin-bottom:12px;background:rgba(30,142,90,.08);border:1px solid rgba(30,142,90,.2)}
.vg-br .dif span{font:700 12px/1.3 "Inter",sans-serif;color:#0F1A2B}
.vg-br .dif b{font:800 16px/1.2 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.vg-br .ta{display:block;height:52px;margin:4px 0 14px;padding:8px 11px;border-radius:8px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);font-size:13px;line-height:1.45;font-style:normal;color:#0F1A2B}
.vg-br .ta.ok{height:74px;border-color:rgba(30,142,90,.35);margin-top:5px}
.vg-br .dbtn{display:flex;justify-content:flex-end;gap:8px}
.vg-br .cn{padding:9px 16px;border-radius:8px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06);color:#444D5A;font:700 12px/1.2 "Inter",sans-serif}
.vg-br .rbox{padding:12px;margin-bottom:14px;border-radius:8px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.08);font-size:12px;color:#444D5A;line-height:1.55}
.vg-br .rbox b{color:#0F1A2B}
.vg-br .rbox small{display:block;margin-top:8px;font-size:11px;color:#626976;font-style:italic}

/* ── the hero plays once: the rule books the fee, two transfers go onto their invoices, the compass
      agrees, the account reconciles, and the period closes ───────────────────────────────────── */
.vg-br .ph.p1:not(.p0){--a:.7s}
.vg-br .ph.p2:not(.p0):not(.p1){--a:1.7s}
.vg-br .ph.p3:not(.p0):not(.p1):not(.p2){--a:2.7s}
.vg-br .ph.px:not(.p0):not(.p1):not(.p2):not(.p3){--a:3.8s}
.vg-br .ph.p0:not(.p1){--d:.7s}
.vg-br .ph.p1:not(.p2){--d:1.7s}
.vg-br .ph.p2:not(.p3){--d:2.7s}
.vg-br .ph.p3:not(.px){--d:3.8s}
.motion .m-shot.in .vg-br .ph{animation:brOn .32s ease var(--a,0s) both,brOff .28s ease var(--d,60s) forwards}
.motion .m-shot.in .vg-br .ph.p0{animation:brOff .28s ease var(--d,60s) both}
.motion .m-shot.in .vg-br .ph.sq-m{animation:brStamp .42s cubic-bezier(.2,.7,.2,1) var(--a,0s) both}
.motion .m-shot.in .vg-br .ph.sp.ok{animation:brStamp .5s cubic-bezier(.2,.7,.2,1) var(--a,0s) both}
.motion .m-shot.in .vg-br .l-fee .mt{animation:brRow .4s ease .7s both}
.motion .m-shot.in .vg-br .l-chq .mt{animation:brRow .4s ease 1.7s both}
.motion .m-shot.in .vg-br .l-cor .mt{animation:brRow .4s ease 2.7s both}
.motion .m-shot.in .vg-br .l-fee,.motion .m-shot.in .vg-br .l-chq,.motion .m-shot.in .vg-br .l-cor{animation:brLit 1s ease var(--t) both}
.motion .m-shot.in .vg-br .l-fee{--t:.6s}
.motion .m-shot.in .vg-br .l-chq{--t:1.6s}
.motion .m-shot.in .vg-br .l-cor{--t:2.6s}
.motion .m-shot.in .vg-br .card.c1{animation:brPress .5s ease 1.1s both}
.motion .m-shot.in .vg-br .card.c1 .ap{animation:brTap .3s ease 1.25s both}
.motion .m-shot.in .vg-br .sug{animation:brShut .42s ease 1.5s both}
.motion .m-shot.in .vg-br .cmp .nb{animation:brNb .45s ease 2.8s both}
.motion .m-shot.in .vg-br .clr{animation:brClr .45s ease 2.8s both}
.motion .m-shot.in .vg-br .hd-acts .cp{animation:brCpOut .45s ease 3.8s both}
.motion .m-shot.in .vg-br .hd-acts .cpd{animation:brCpIn .5s ease 3.8s both}
.motion .m-shot.in .vg-br .ban{animation:brBan .45s ease 3.95s both}
.motion .m-shot.in .vg-br .um{animation:brLock .5s ease 4.1s both}
.motion .m-shot.in .vg-br .ph.um{animation:brOn .32s ease var(--a,0s) both,brLock .5s ease 4.1s both}
.motion .m-shot.in .vg-br .addl{animation:brDim .5s ease 4s both}
@keyframes brOn{from{opacity:0;visibility:hidden;transform:translateY(5px)}to{opacity:1;visibility:visible;transform:none}}
@keyframes brOff{from{opacity:1;visibility:visible;transform:none}to{opacity:0;visibility:hidden;transform:translateY(-5px)}}
@keyframes brStamp{0%{opacity:0;visibility:hidden;transform:scale(1.55)}60%{opacity:1;visibility:visible;transform:scale(.94)}100%{opacity:1;visibility:visible;transform:none}}
@keyframes brRow{from{grid-template-rows:0fr;margin-top:0;opacity:0}to{grid-template-rows:1fr;margin-top:3px;opacity:1}}
@keyframes brLit{0%{background:rgba(30,142,90,0)}30%{background:rgba(30,142,90,.07)}100%{background:rgba(30,142,90,0)}}
@keyframes brPress{0%{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.08)}40%{background:rgba(30,142,90,.10);border-color:rgba(30,142,90,.45)}100%{background:rgba(30,142,90,.10);border-color:rgba(30,142,90,.45)}}
@keyframes brTap{50%{transform:scale(.92)}}
@keyframes brShut{from{grid-template-rows:1fr;border-bottom-width:1px}to{grid-template-rows:0fr;border-bottom-width:0}}
@keyframes brNb{from{max-width:170px;margin-left:0;opacity:1}to{max-width:0;margin-left:-18px;opacity:0}}
@keyframes brClr{from{max-width:180px;padding-left:12px;padding-right:12px;border-width:1px;margin-left:0;opacity:1}to{max-width:0;padding-left:0;padding-right:0;border-width:0;margin-left:-10px;opacity:0}}
@keyframes brCpOut{from{max-width:160px;opacity:1;margin-left:0;padding-left:14px;padding-right:14px}to{max-width:0;opacity:0;margin-left:-8px;padding-left:0;padding-right:0}}
@keyframes brCpIn{0%{max-width:0;opacity:0;margin-left:-8px}50%{opacity:0}100%{max-width:250px;opacity:1;margin-left:0}}
@keyframes brBan{from{grid-template-rows:0fr;margin-bottom:0}to{grid-template-rows:1fr;margin-bottom:12px}}
@keyframes brLock{from{background:rgba(225,29,72,.08);border-color:rgba(225,29,72,.2);color:#E11D48}to{background:rgba(0,0,0,.014);border-color:rgba(0,0,0,.03);color:#C2C6CC}}
@keyframes brDim{from{opacity:1}to{opacity:.5}}

/* ── the account list (second picture) ─────────────────────────────────────────────────────── */
.vg-bra{background:#fff;padding:26px 30px}
.vg-bra .ah{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.vg-bra .ah1{display:flex;align-items:center;gap:10px;font:800 22px/1.2 "Plus Jakarta Sans",sans-serif;letter-spacing:-.02em;color:#0F1A2B}
.vg-bra .ah1 .ic{width:22px;height:22px;color:#444D5A}
.vg-bra .asub{font-size:12px;color:#626976;margin-top:4px}
.vg-bra .aacts{display:flex;align-items:center;gap:8px}
.vg-bra .ab{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:8px;background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.08);color:#444D5A;font:700 12px/1.2 "Inter",sans-serif}
.vg-bra .ab .ic{width:12px;height:12px}
.vg-bra .chip-action{font-size:14px}
.vg-bra .agrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.vg-bra .acard{background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.06);border-radius:12px;overflow:hidden}
.vg-bra .acard.warn{border-color:rgba(154,91,0,.25)}
.vg-bra .ac-h{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid rgba(0,0,0,.06)}
.vg-bra .ac-id{display:flex;align-items:center;gap:10px;min-width:0}
.vg-bra .ini{width:36px;height:36px;border-radius:9px;background:rgba(0,0,0,.08);color:#444D5A;display:grid;place-items:center;font:700 12px/1 "Plus Jakarta Sans",sans-serif;flex:none}
.vg-bra .ini .ic{width:16px;height:16px}
.vg-bra .ac-id b{display:block;font-size:13px;font-weight:700;color:#0F1A2B}
.vg-bra .ac-id small{display:block;font-size:10px;color:#626976;margin-top:2px}
.vg-bra .ac-bal{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px}
.vg-bra .ac-bal em,.vg-bra .ac-cash em{display:block;font:700 10px/1.3 "Inter",sans-serif;color:#626976;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;font-style:normal}
.vg-bra .ac-bal b{display:block;font:800 16px/1.25 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.vg-bra .ac-bal small{display:block;font-size:10px;color:#626976;margin-top:3px}
.vg-bra .ac-strip{display:flex;justify-content:space-between;align-items:center;margin:0 14px 12px;padding:7px 10px;border-radius:7px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.08)}
.vg-bra .ac-strip span{font:700 10px/1.3 "Inter",sans-serif;color:#444D5A;text-transform:uppercase;letter-spacing:.05em}
.vg-bra .ac-strip b{font:800 12px/1.2 "Inter",sans-serif;color:#444D5A}
.vg-bra .ac-strip.w{background:rgba(154,91,0,.08);border-color:rgba(154,91,0,.2)}
.vg-bra .ac-strip.w span,.vg-bra .ac-strip.w b{color:#9A5B00}
.vg-bra .ac-st{display:flex;gap:14px;padding:8px 14px;background:rgba(0,0,0,.015);border-top:1px solid rgba(0,0,0,.06);font-size:10px;color:#626976}
.vg-bra .ac-st .ok{color:#444D5A;font-weight:700}
.vg-bra .ac-st .wr{color:#9A5B00;font-weight:700}
.vg-bra .ac-st .li{margin-left:auto}
.vg-bra .ac-cash{padding:14px}
.vg-bra .ac-cash b{display:block;font:800 18px/1.25 "Plus Jakarta Sans",sans-serif;color:#0F1A2B}
.vg-bra .ac-cash small{display:block;font-size:11px;color:#626976;margin-top:6px;font-style:italic}
.vg-bra .ac-act{display:flex;gap:6px;padding:12px;border-top:1px solid rgba(0,0,0,.06)}
.vg-bra .rec{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 12px;border-radius:7px;background:#0F1A2B;color:#fff;font:700 11px/1.3 "Inter",sans-serif}
.vg-bra .rec .ic{width:11px;height:11px}
.vg-bra .imb{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:7px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06);color:#444D5A;font:700 11px/1.3 "Inter",sans-serif}
.vg-bra .imb .ic{width:10px;height:10px}
.vg-bra .sq{display:grid;place-items:center;width:27px;padding:7px;border-radius:7px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06);color:#626976}
.vg-bra .sq .ic{width:11px;height:11px}
/* plays once: the cards come in, their status settles */
.motion .shot:not(.in) .vg-bra .acard{opacity:0;transform:translateY(10px)}
.motion .shot.in .vg-bra .acard{transition:opacity .55s ease calc(var(--k) * 180ms + 150ms),transform .55s cubic-bezier(.2,.7,.2,1) calc(var(--k) * 180ms + 150ms)}
.vg-bra .acard[data-k="0"]{--k:0}.vg-bra .acard[data-k="1"]{--k:1}.vg-bra .acard[data-k="2"]{--k:2}
.motion .shot:not(.in) .vg-bra .sp{opacity:0}
.motion .shot.in .vg-bra .sp{animation:brStamp .5s cubic-bezier(.2,.7,.2,1) calc(var(--k) * 180ms + 700ms) both}