/* Barq cashflow portal · v63 · Barq Force
   Craft inspired by Integrated Forces Team public site (not a clone):
   deep slate navy, terracotta CTA, glass panels, reveal motion, Cairo type.
   Yellow bolt kept as brand mark. All IDs/classes/data-* preserved. */

:root{
  --yellow:#F5C400;--yellow-ink:#141414;
  --cta:#E78040;--cta-ink:#102335;--cta-hover:#F08A4A;
  --navy:#102335;--navy-2:#17394F;--navy-3:#3D5A6E;
  --rail:#102335;--rail-ink:#F4EFE7;--rail-muted:#A8B8C4;--rail-line:#1A3548;

  --paper:#F4F6F8;--card:#FFFFFF;--card-2:#F0F3F6;--well:#E8EEF2;
  --rule:#D9E1E8;--rule-2:#C3CED8;--field:#8FA3B3;

  --ink:#102335;--ink-2:#3D5A6E;--ink-3:#6E8494;
  --on-dark:#F4EFE7;--on-dark-2:#C3D0D9;

  --accent:#E78040;--accent-soft:#FFF1E8;--focus:#E78040;
  --info:#17394F;--info-soft:#E8EEF2;
  --btn:#102335;--btn-hover:#17394F;--btn-ink:#F4EFE7;

  --s1:#102335;--s2:#3D5A6E;--s3:#0F766E;--s4:#E78040;
  --grid:#E8EEF2;--axis:#C3CED8;

  --good:#0F766E;--good-ink:#0F766E;--good-soft:#D1FAF5;
  --warn:#B45309;--warn-ink:#B45309;--warn-soft:#FEF3C7;
  --crit:#B91C1C;--crit-ink:#B91C1C;--crit-soft:#FEE2E2;

  --font:"Cairo",system-ui,sans-serif;
  --font-h:"Cairo",system-ui,sans-serif;
  --font-num:"JetBrains Mono",ui-monospace,monospace;
  --t-1:12px;--t-2:13px;--t-3:15px;--t-4:17px;--t-5:21px;--t-6:28px;--t-7:40px;

  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;
  --r-1:8px;--r-2:12px;--r-3:16px;

  --dur-micro:160ms;--dur-short:280ms;--dur-reveal:520ms;
  --scrim:rgb(0 0 0 / .55);
  --shadow-card:0 1px 0 rgb(0 0 0 / .04),0 10px 28px -18px rgb(0 0 0 / .28);
  --elev:0 22px 50px -20px rgb(0 0 0 / .45);
  --glow:rgb(231 128 64 / .28);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#0B1620;--card:#122636;--card-2:#17394F;--well:#1A3548;
  --rule:#243B4D;--rule-2:#3D5A6E;--field:#6E8494;
  --ink:#F4EFE7;--ink-2:#C3D0D9;--ink-3:#8FA3B3;
  --rail:#0B1620;--rail-ink:#F4EFE7;--rail-muted:#8FA3B3;--rail-line:#1A3548;
  --navy:#F4EFE7;--navy-2:#C3D0D9;--navy-3:#8FA3B3;
  --accent:#E78040;--accent-soft:#2A1A10;--focus:#E78040;
  --info:#8FA3B3;--info-soft:#17394F;
  --btn:#E78040;--btn-hover:#F08A4A;--btn-ink:#102335;
  --s1:#E78040;--s2:#8FA3B3;--s3:#2DD4BF;--s4:#FBBF24;
  --grid:#1A3548;--axis:#3D5A6E;
  --good:#2DD4BF;--good-ink:#5EEAD4;--good-soft:#042F2E;
  --warn:#FBBF24;--warn-ink:#FCD34D;--warn-soft:#422006;
  --crit:#F87171;--crit-ink:#FCA5A5;--crit-soft:#450A0A;
  --shadow-card:0 1px 0 rgb(255 255 255 / .04),0 14px 36px -18px rgb(0 0 0 / .55);
  --elev:0 28px 60px -20px rgb(0 0 0 / .65);
  --scrim:rgb(0 0 0 / .72);
  color-scheme:dark;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
body{
  background:var(--paper);
  color:var(--ink);font:var(--t-3)/1.65 var(--font);-webkit-font-smoothing:antialiased;letter-spacing:.01em}
@media (prefers-reduced-motion:no-preference){
  body{background-attachment:fixed}
}
#auth,#app,#toasts{position:relative;z-index:1}
#shade{z-index:40}
#drawer{z-index:41}
#dlg{z-index:50}
button,input,select,textarea{font:inherit;color:inherit}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.hidden{display:none!important}
a{color:var(--info);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{overflow-wrap:break-word;min-width:0;text-wrap:balance;font-family:var(--font-h)}
h1,h2,h3,h4,.top h1,.panel-h h2,.dlg-h h3,.drawer-h h2,.dock-h h2,.statement .lead,.auth-card h2{
  font-family:var(--font-h);font-weight:600;letter-spacing:0;color:var(--ink)}

.num,td.n,th.n,.vl,.cf-fig>b,.dl b,.strip .vl,.hb-v,.dchip .num,.statement .lead .num,.nc,.dock-tot b,tfoot .num{
  font-family:var(--font-num);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;
  letter-spacing:0;direction:ltr;unicode-bidi:isolate}

.mark{width:36px;height:36px;border-radius:10px;background:var(--yellow);display:grid;place-items:center;flex:none;overflow:hidden;box-shadow:none}
.mark img{width:30px;height:30px;object-fit:contain}
.mark svg{width:15px;height:21px;fill:var(--yellow-ink)}
.logo{display:flex;align-items:center;gap:var(--sp-3);font-weight:700;font-size:var(--t-4);color:var(--ink);font-family:var(--font-h)}
.logo:hover{text-decoration:none}
.logo small{display:block;font-size:var(--t-1);color:var(--ink-3);font-weight:500;line-height:1.3;font-family:var(--font)}

/* ---------- sign in ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(300px,1.15fr) minmax(340px,.85fr);background:var(--rail);overflow:hidden}
.auth-brand{position:relative;display:grid;place-items:center;align-content:center;gap:28px;padding:56px 48px;color:var(--ink);isolation:isolate;overflow:hidden;background:transparent}
.auth-brand::before{content:"";position:absolute;inset:-20%;background:
  radial-gradient(circle at 30% 40%,rgb(245 196 0 / .12),transparent 35%),
  radial-gradient(circle at 70% 60%,rgb(231 128 64 / .1),transparent 40%);
  animation:auth-drift 18s ease-in-out infinite alternate;pointer-events:none}
.auth-brand::after{content:"";position:absolute;inset:0;background-image:
  linear-gradient(rgb(244 239 231 / .04) 1px,transparent 1px),
  linear-gradient(90deg,rgb(244 239 231 / .04) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(ellipse at 40% 40%,#000 15%,transparent 70%);opacity:.5;pointer-events:none}
.auth-orbit{position:absolute;width:380px;height:380px;border-radius:50%;border:1px solid rgb(231 128 64 / .22);animation:auth-spin 28s linear infinite;pointer-events:none}
.auth-orbit.o2{width:520px;height:520px;border-style:dashed;border-color:rgb(244 239 231 / .12);animation-duration:42s;animation-direction:reverse}
.auth-bolt{position:relative;z-index:1;animation:auth-float 4s ease-in-out infinite}
.auth-bolt .mark.xl{width:112px;height:112px;border-radius:28px;box-shadow:0 0 0 16px rgb(0 0 0 / .12),0 30px 70px rgb(0 0 0 / .45);animation:auth-pulse 2.8s ease-in-out infinite}
.auth-bolt .mark.xl svg{width:44px;height:60px}
.auth-brand-copy{position:relative;z-index:1;text-align:center;max-width:420px}
.auth-brand-copy[dir="ltr"]{text-align:center}
.auth-brand-copy[dir="rtl"]{text-align:center}
.auth-brand-copy .auth-word{unicode-bidi:plaintext}
.auth-kicker{margin:0 0 10px;letter-spacing:.22em;font-size:11px;font-weight:700;color:var(--cta);font-family:var(--font-num)}
.auth-brand-copy h1{margin:0 0 12px;font-size:clamp(34px,3.6vw,52px);line-height:1.12;font-weight:800;color:#fff}
.auth-brand-copy h1 em{font-style:normal;color:var(--cta)}
.auth-brand-copy p:last-child{margin:0;color:rgb(195 208 217 / .95);font-size:16px;line-height:1.7}
.auth-panel{display:grid;place-items:center;padding:40px 28px;background:
  radial-gradient(520px 280px at 100% 0%,rgb(231 128 64 / .08),transparent 60%),
  var(--paper)}
.auth-card{width:min(440px,100%);display:flex;flex-direction:column;gap:var(--sp-4);background:color-mix(in srgb,var(--card) 88%,transparent);border:1px solid rgb(255 255 255 / .55);border-radius:18px;padding:36px 32px;box-shadow:var(--elev);backdrop-filter:blur(16px);position:relative;animation:auth-rise .7s cubic-bezier(.2,.8,.2,1) both}
.auth-card>*{animation:auth-fade .55s ease both}
.auth-card>*:nth-child(1){animation-delay:.04s}
.auth-card>*:nth-child(2){animation-delay:.1s}
.auth-card>*:nth-child(3){animation-delay:.16s}
.auth-card>*:nth-child(4){animation-delay:.22s}
.auth-card>*:nth-child(5){animation-delay:.28s}
.auth-card>*:nth-child(6){animation-delay:.34s}
.auth-card>*:nth-child(7){animation-delay:.4s}
.auth-card>*:nth-child(8){animation-delay:.46s}
.auth-card.shake{animation:auth-shake .42s ease}
.auth-lang{position:absolute;inset-inline-end:16px;top:16px}
.auth-logo{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-2);color:var(--ink);font-weight:800;font-size:22px;text-decoration:none}
.auth-logo .mark{width:46px;height:46px;border-radius:14px}
.auth-card h2{font-size:clamp(28px,3vw,36px);margin:0;font-weight:800}
.auth-card>p{margin:0;color:var(--ink-3);font-size:15px}
.auth-card input,.auth-card select{min-height:50px;font-size:var(--t-3);background:var(--card);border-color:var(--rule-2);transition:border-color .2s,box-shadow .2s,transform .2s}
.auth-card input:focus,.auth-card select:focus{border-color:var(--ink);box-shadow:none;outline:none}
.pw{position:relative;display:block}
.pw input{width:100%;padding-inline-end:var(--sp-12)}
.pw button{position:absolute;inset-inline-end:var(--sp-1);top:50%;transform:translateY(-50%);border:0;background:none;color:var(--ink-2);cursor:pointer;padding:var(--sp-2);font-size:var(--t-2);font-weight:700;border-radius:var(--r-1)}
.auth-card .btn.primary,.auth-go{min-height:54px;font-size:16px;justify-content:center;background:var(--cta);border-color:var(--cta);color:var(--cta-ink);font-weight:800;border-radius:12px;box-shadow:inset 0 1px 0 rgb(255 255 255 / .25),0 10px 28px -10px rgb(0 0 0 / .45);position:relative;overflow:hidden;transition:transform .18s,background .18s,box-shadow .18s}
.auth-card .btn.primary:hover,.auth-go:hover{background:var(--cta-hover);border-color:var(--cta-hover);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),0 16px 32px -12px rgb(0 0 0 / .55)}
.auth-card .btn.primary:active,.auth-go:active{transform:translateY(0)}
.auth-go.busy{opacity:.75;pointer-events:none}
.auth-go.busy::after{content:none}
.auth-secure,.auth-help{display:flex;align-items:center;gap:var(--sp-2);color:var(--ink-3);font-size:var(--t-1);justify-content:center}
.auth-secure svg{width:14px;height:14px}
.auth-card .err:not(:empty){background:var(--crit-soft);color:var(--crit-ink);border:1px solid rgb(185 28 28 / .2);border-radius:12px;padding:10px 12px}
@keyframes auth-rise{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
@keyframes auth-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes auth-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes auth-pulse{0%,100%{box-shadow:0 0 0 16px rgb(0 0 0 / .12),0 30px 70px rgb(0 0 0 / .45)}50%{box-shadow:0 0 0 24px rgb(0 0 0 / .2),0 36px 80px rgb(0 0 0 / .5)}}
@keyframes auth-spin{to{transform:rotate(360deg)}}
@keyframes auth-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.05)}}
@keyframes auth-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes auth-sweep{to{transform:translateX(320%)}}
@keyframes page-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes erp-reveal{from{opacity:.55;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:960px){
  .auth{grid-template-columns:1fr}
  .auth-brand{min-height:240px;padding:36px 24px;gap:16px}
  .auth-orbit,.auth-orbit.o2{display:none}
  .auth-bolt .mark.xl{width:80px;height:80px;border-radius:22px}
  .auth-brand-copy h1{font-size:28px}
}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:268px minmax(0,1fr);height:100vh}
@media (min-width:961px){
  .app{grid-template-columns:268px minmax(0,1fr)}
  .app.docked{grid-template-columns:268px minmax(0,1fr) 400px}
}
.side{background:linear-gradient(180deg,#0B1620,#102335 40%,#122636);color:var(--rail-muted);border-inline-end:1px solid var(--rail-line);padding:22px 14px 16px;display:flex;flex-direction:column;gap:18px;overflow-y:auto}
.side .logo{padding:6px 10px 18px;color:var(--rail-ink);font-size:22px;font-weight:800}
.side .logo>div{display:block}
.side .mark{border-radius:0;box-shadow:none}
.nav{display:flex;flex-direction:column;gap:3px}
.nav .ng{font-size:11px;color:#7F93A3;padding:16px 12px 6px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-family:var(--font-num)}
.nav button{display:flex;align-items:center;gap:12px;padding:11px 12px;min-height:46px;border:0;background:none;border-radius:12px;cursor:pointer;color:var(--rail-muted);font-weight:600;font-size:15px;text-align:start;transition:background .18s,color .18s,transform .18s,box-shadow .18s}
.nav button svg{width:18px;height:18px;flex:none;opacity:.8;color:inherit}
.nav button .nl{flex:1}
.nav button .nc{font-size:11px;color:var(--cta-ink);background:var(--cta);border-radius:999px;padding:0 8px;line-height:20px;font-family:var(--font-num);font-weight:700}
.nav button:hover{background:rgb(255 255 255 / .06);color:var(--rail-ink);transform:translateX(-2px)}
.nav button.on{background:rgb(231 128 64 / .14);color:#fff;font-weight:800;box-shadow:inset 3px 0 0 var(--cta)}
.nav button.on svg{opacity:1;color:var(--cta)}
.side-foot{margin-top:auto;border-top:1px solid var(--rail-line);padding-top:14px;display:flex;align-items:center;gap:10px}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--cta);color:var(--cta-ink);border:0;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.side-foot>div{min-width:0;flex:1}
.side-foot strong{display:block;font-size:13px;color:var(--rail-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot small{color:#7F93A3;font-size:11px}
.side .icon{color:var(--rail-muted)}.side .icon:hover{background:rgb(255 255 255 / .06);color:var(--rail-ink)}

.main{min-width:0;display:flex;flex-direction:column;height:100vh;background:
  radial-gradient(900px 320px at 100% -10%,rgb(231 128 64 / .07),transparent 55%),
  var(--paper)}
.top{display:flex;align-items:center;gap:12px;padding:16px 28px 14px;background:color-mix(in srgb,var(--card) 78%,transparent);backdrop-filter:blur(14px);flex:none;border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:5}
.top>div{min-width:0}
.top h1{margin:0;font-size:clamp(22px,2vw,28px);font-weight:800;line-height:1.2;color:var(--ink)}
.top .crumb{display:none}
.top .sp{flex:1}
.menu-btn{display:none}
.scroll{flex:1;overflow-y:auto;overflow-x:clip;scrollbar-gutter:stable}
.page{padding:22px 28px 48px;display:flex;flex-direction:column;gap:16px;max-width:1480px;margin-inline:auto;width:100%}
.page>*{animation:erp-reveal var(--dur-reveal) cubic-bezier(.2,.8,.2,1) both}
.page>*:nth-child(1){animation-delay:.02s}
.page>*:nth-child(2){animation-delay:.07s}
.page>*:nth-child(3){animation-delay:.12s}
.page>*:nth-child(4){animation-delay:.17s}
.page>*:nth-child(5){animation-delay:.22s}
.page>*:nth-child(6){animation-delay:.27s}
.page>*:nth-child(n+7){animation-delay:.32s}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);border:1px solid var(--rule-2);background:var(--card);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-1);cursor:pointer;font-weight:700;white-space:nowrap;color:var(--ink);font-size:var(--t-2);min-height:36px;box-shadow:none;transition:border-color var(--dur-micro),background-color var(--dur-micro),color var(--dur-micro),transform var(--dur-micro),box-shadow var(--dur-micro)}
.btn:hover{border-color:var(--rule-2);color:var(--ink);text-decoration:none;background:var(--card-2)}
.btn:active{background:var(--well)}
.btn{border-radius:11px}.btn.primary{background:var(--cta);border-color:var(--cta);color:var(--cta-ink);box-shadow:none}.btn.primary:hover{background:var(--cta-hover);border-color:var(--cta-hover);color:var(--cta-ink);transform:translateY(-1px)}
.btn.primary:hover{background:var(--btn-hover);border-color:var(--btn-hover);color:var(--btn-ink);box-shadow:var(--shadow-card)}
.btn.danger{color:var(--crit-ink)}.btn.danger:hover{border-color:var(--crit);color:var(--crit-ink)}
.btn.sm{padding:var(--sp-1) var(--sp-3);font-size:var(--t-1);min-height:32px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn svg{width:16px;height:16px}
.icon{border:0;background:none;cursor:pointer;width:36px;height:36px;border-radius:var(--r-1);color:var(--ink-2);display:grid;place-items:center;flex:none;transition:background-color var(--dur-micro)}
.icon:hover{background:var(--well);color:var(--ink)}
.icon svg{width:18px;height:18px}
.top .icon,.top .lang-btn{background:var(--card);border:1px solid var(--rule)}
label.f{display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--t-1);font-weight:600;color:var(--ink-2)}
label.f.inline{flex-direction:row;align-items:center;gap:var(--sp-2)}
input,select,textarea{border:1px solid var(--rule-2);background:var(--card);border-radius:var(--r-1);padding:var(--sp-2) var(--sp-3);min-height:36px}
input:hover,select:hover,textarea:hover{border-color:var(--field)}
input:focus,select:focus,textarea:focus{border-color:var(--navy-2);outline:none;box-shadow:0 0 0 3px rgb(11 18 32 / .1)}
input:disabled,select:disabled{background:var(--well);cursor:not-allowed}
textarea{min-height:72px;resize:vertical}
input[type=checkbox]{min-height:auto;width:16px;height:16px;accent-color:var(--yellow)}

/* dense filter toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:0 0 12px}
.toolbar .f.grow{flex:1;min-width:min(100%,260px)}
.toolbar .actions{margin:0}
.filter-bar{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-2);padding:14px 16px;margin:0 0 14px;box-shadow:var(--shadow-card)}
.filter-row{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end}
.filter-row.primary{flex-direction:row;flex-wrap:wrap;align-items:flex-end;height:auto;min-height:0}
.filter-row.primary .f.grow{flex:1.4 1 220px;min-width:min(100%,220px);max-width:100%}
.filter-row .actions{margin-inline-start:auto;align-self:flex-end}
.filter-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fchip{border:1px solid var(--rule-2);background:var(--well);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer}
.fchip:hover{border-color:var(--navy);color:var(--ink)}
.fchip b{color:var(--ink-3);font-weight:600;margin-inline-end:4px}
.fchip span{margin-inline-start:4px;opacity:.7}
label.f.inline.tight{flex-direction:row;align-items:center;gap:6px;min-height:38px;padding-bottom:2px;color:var(--ink-2)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-3)}
.btn.ghost:hover{color:var(--ink);background:var(--well)}
.soft-tools{display:flex;justify-content:flex-end;margin:0 0 8px}
.note.info{font-size:13px;line-height:1.45;padding:10px 14px}
.pulse-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 14px;border-radius:var(--r-2);border:1px solid var(--rule);background:var(--card);font-size:13px;color:var(--ink-2);margin:0 0 4px}
.pulse-strip .dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:none}
.pulse-strip.live{border-color:rgb(5 150 105 / .25);background:var(--good-soft)}
.pulse-strip.warn{border-color:rgb(217 119 6 / .28);background:var(--warn-soft);color:var(--warn-ink)}
.pulse-strip.bad{border-color:rgb(220 38 38 / .25);background:var(--crit-soft);color:var(--crit-ink)}
.pulse-strip.info{background:var(--well)}
.pulse-strip .btn{margin-inline-start:auto}
.bulk-steps{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.bulk-steps span{background:var(--well);border:1px solid var(--rule);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;color:var(--ink-2)}
.bulk-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 8px}
.bulk-hero{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;justify-content:space-between}
.bulk-kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;flex:1;min-width:min(100%,280px)}
.bulk-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:start;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-2);background:var(--card-2);cursor:pointer;color:var(--ink);font:inherit;transition:border-color .15s,box-shadow .15s,background .15s}
.bulk-card:hover{border-color:var(--navy-3);background:var(--card)}
.bulk-card.on{border-color:var(--yellow);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--yellow),0 10px 24px -18px var(--glow)}
.bulk-card b{font-size:var(--t-3);font-weight:700;color:var(--ink)}
.bulk-card small{color:var(--ink-3);font-size:var(--t-1);line-height:1.35}
.bulk-card:disabled{opacity:.55;cursor:default}
.bulk-hero>.btn{align-self:center;white-space:nowrap}
.bulk-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px 20px;border:1.5px dashed var(--rule-2);border-radius:var(--r-2);background:
  radial-gradient(420px 160px at 50% 0%,rgb(245 197 24 / .12),transparent 70%),
  linear-gradient(180deg,var(--well),var(--card));cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;text-align:center}
.bulk-drop:hover,.bulk-drop:focus-visible{border-color:var(--yellow);outline:none;box-shadow:0 0 0 4px rgb(0 0 0 / .16)}
.bulk-drop.over{border-color:var(--yellow);border-style:solid;background:var(--accent-soft);box-shadow:0 0 0 4px rgb(0 0 0 / .22)}
.bulk-drop.has{border-style:solid;border-color:rgb(14 159 110 / .5);background:var(--good-soft)}
.bulk-drop-ico{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);border:0;color:var(--yellow-ink);margin-bottom:2px;box-shadow:0 8px 20px -10px rgb(0 0 0 / .8)}
.bulk-drop-ico svg{width:22px;height:22px}
.bulk-drop strong{font-size:var(--t-3)}
.bulk-impact,.bulk-issues{display:flex;flex-direction:column;gap:8px}
.bulk-impact h4,.bulk-issues h4{margin:0;font-size:var(--t-2);color:var(--ink-2);font-weight:700}
.flow-guide{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 12px}
.flow-guide>div{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-2);background:color-mix(in srgb,var(--card) 90%,transparent);box-shadow:var(--shadow-card);min-height:74px}
.flow-guide b{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--yellow-ink);font-family:var(--font-num);font-size:12px}
.flow-guide span{font-size:var(--t-2);color:var(--ink-2);line-height:1.45}
.month-packs{display:inline-flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
@media (max-width:960px){.flow-guide{grid-template-columns:1fr 1fr}.flow-guide>div{min-height:0}}
@media (max-width:640px){.flow-guide{grid-template-columns:1fr}}
.filters{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-2);padding:var(--sp-3) var(--sp-4)}
.filters input[type=search],.filter-row input[type=search]{min-width:240px}
.filters .grow,.filter-row .grow{flex:1}
.filters label.f,.filter-row label.f{font-size:var(--t-1);gap:4px;color:var(--ink-3)}
.filters input,.filters select,.filter-row input,.filter-row select{min-height:38px;font-size:var(--t-2)}
.filters .actions,.filter-row .actions,.page>.actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.seg{display:inline-flex;background:var(--well);border-radius:var(--r-1);padding:2px;gap:2px}
.seg button{border:0;background:none;padding:var(--sp-1) var(--sp-3);min-height:32px;cursor:pointer;color:var(--ink-2);font-weight:600;border-radius:6px;font-size:var(--t-2)}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--navy);color:#fff;box-shadow:none}
[data-theme="dark"] .seg button.on{background:var(--well);color:var(--ink)}
.tabs{display:flex;gap:var(--sp-1);border:1px solid var(--rule);background:var(--card);border-radius:var(--r-2);padding:0 var(--sp-2);flex-wrap:wrap}
.tabs button{border:0;background:none;padding:var(--sp-3) var(--sp-4);cursor:pointer;color:var(--ink-3);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px;font-size:var(--t-3)}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);border-bottom-color:var(--yellow)}
.tabs .count{font-size:var(--t-1);background:var(--well);border-radius:var(--r-1);padding:0 var(--sp-2);margin-inline-start:var(--sp-2);color:var(--ink-2)}
.tabs button.on .count{background:var(--accent-soft);color:var(--ink)}
.actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.kpis.ov{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpi{background:color-mix(in srgb,var(--card) 92%,transparent);border:1px solid var(--rule);border-radius:16px;padding:18px 18px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label value" "sub value" "spk spk";column-gap:16px;row-gap:6px;align-items:center;min-width:0;box-shadow:var(--shadow-card);backdrop-filter:blur(10px);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.kpi::before{display:none}
.kpi:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgb(0 0 0 / .25);border-color:color-mix(in srgb,var(--cta) 35%,var(--rule))}
.kpi-l{grid-area:label;color:var(--ink-2);font-size:13px;font-weight:700;line-height:1.35;margin:0}
.kpi-v,.kpi>b.kpi-v{grid-area:value;margin:0;padding:0;justify-self:end;align-self:center;font-family:var(--font-num);font-size:clamp(22px,1.9vw,28px);font-weight:700;font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;line-height:1.15;letter-spacing:0;color:var(--ink);white-space:nowrap;direction:ltr;unicode-bidi:isolate;text-align:end}
.kpi-v .num,.kpi>b.kpi-v .num{font:inherit;font-size:inherit;letter-spacing:0;line-height:inherit;color:inherit}
.kpi-v small,.kpi>b.kpi-v small{font-family:var(--font);font-size:12px;color:var(--ink-3);font-weight:600;margin-inline-start:6px}
.kpi-s,.kpi>small.kpi-s{grid-area:sub;color:var(--ink-3);font-size:12px;line-height:1.45;margin:0;max-width:38ch}
.kpi .dchip{grid-area:sub;justify-self:start}
.kpi .spk{grid-area:spk;height:28px;width:100%;margin-top:8px;opacity:.75}
.kpi.hero,.kpi.lead{background:linear-gradient(145deg,rgb(255 241 232 / .95),var(--card));border-color:rgb(231 128 64 / .35)}
.kpi.hero .kpi-v,.kpi.lead .kpi-v,.kpi.hero>b.kpi-v,.kpi.lead>b.kpi-v{font-size:clamp(24px,2.1vw,30px);font-weight:800;color:var(--ink)}
.kpi.bad .kpi-v,.kpi.dc .kpi-v,.kpi.bad>b.kpi-v,.kpi.dc>b.kpi-v{color:var(--crit-ink)}
.kpi.good .kpi-v,.kpi.dg .kpi-v,.kpi.good>b.kpi-v,.kpi.dg>b.kpi-v{color:var(--good-ink)}
.kpi.click{cursor:pointer}
.kpi.tall{align-items:center}
.state{font-size:12px;font-weight:700}
.state.good{color:var(--good-ink)}.state.bad{color:var(--crit-ink)}.state.warn{color:var(--warn-ink)}

/* ---------- panels ---------- */
.panel{background:color-mix(in srgb,var(--card) 94%,transparent);color:var(--ink);border:1px solid var(--rule);border-radius:16px;min-width:0;display:flex;flex-direction:column;box-shadow:var(--shadow-card);backdrop-filter:blur(10px);transition:transform .2s,box-shadow .2s}.panel:hover{box-shadow:0 16px 36px -22px rgb(0 0 0 / .22)}
.panel-h{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5) var(--sp-3);flex-wrap:wrap}
.panel-h h2{margin:0;font-size:var(--t-4);font-weight:600}
.panel-h p{margin:0;color:var(--ink-3);font-size:var(--t-1)}
.panel-h .sp{flex:1}
.panel-h .seg{margin-inline-end:var(--sp-1)}
.panel-b{padding:0 var(--sp-5) var(--sp-5)}
.panel>.tw{border-top:1px solid var(--rule)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.span2{grid-column:span 2}
.intro{color:var(--ink-3);font-size:var(--t-2);margin:0;line-height:1.7;max-width:90ch}
.note{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-2);background:var(--info-soft);color:var(--ink);font-size:var(--t-2);border:1px solid var(--rule)}
.note svg{width:18px;height:18px;flex:none;color:var(--info)}
.note.warn{background:var(--warn-soft);border-color:var(--warn-soft)}.note.warn svg{color:var(--warn-ink)}
.note.bad{background:var(--crit-soft);border-color:var(--crit-soft)}.note.bad svg{color:var(--crit-ink)}
.note.good{background:var(--good-soft);border-color:var(--good-soft)}.note.good svg{color:var(--good-ink)}
.alerts{display:flex;flex-direction:column;gap:var(--sp-2)}

/* ---------- charts ---------- */
.chart{position:relative;padding:var(--sp-1) var(--sp-4) var(--sp-4)}
.chart svg{display:block;width:100%;height:auto;direction:ltr;overflow:visible}
.chart text{font-family:var(--font);font-size:11px;fill:var(--ink-3)}
.chart .grid{stroke:var(--grid);stroke-width:1}
.chart .base{stroke:var(--axis);stroke-width:1}
.chart .hit{fill:transparent;cursor:crosshair}
.chart .cross{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.chart .ref{stroke:var(--crit);stroke-width:1.5;stroke-dasharray:5 4}
.chart .ref-t{fill:var(--crit-ink);font-weight:600;paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round}
.chart .ring{stroke:var(--card)}
.chart .dim{opacity:.35}
.legend{display:flex;gap:var(--sp-4);flex-wrap:wrap;font-size:var(--t-1);color:var(--ink-2);padding:0 var(--sp-5)}
.legend span{display:inline-flex;align-items:center;gap:var(--sp-2)}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--c);flex:none}
.sw.line{height:3px;border-radius:2px}
.sw.dash{height:0;border-top:2px dashed var(--c);background:none;width:14px}
.tip{position:absolute;pointer-events:none;background:var(--navy);color:#fff;border-radius:var(--r-1);padding:var(--sp-2) var(--sp-3);font-size:var(--t-1);min-width:160px;box-shadow:var(--elev);z-index:3;transform:translate(-50%,-100%);margin-top:calc(var(--sp-3) * -1);white-space:nowrap}
.tip b{display:block;margin-bottom:var(--sp-1)}
.tip div{display:flex;align-items:center;gap:var(--sp-2);justify-content:space-between}
.tip div span{display:flex;align-items:center;gap:var(--sp-2)}
.tip em{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums}

/* horizontal bars — thin, navy/slate, not loud */
.hb{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-1) var(--sp-5) var(--sp-4)}
.hb-row{display:grid;grid-template-columns:minmax(90px,160px) minmax(0,1fr) auto;gap:var(--sp-3);align-items:center;font-size:var(--t-2);border-radius:var(--r-1)}
.hb-row.click{cursor:pointer}.hb-row.click:hover .hb-l{color:var(--navy)}
.hb-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.hb-t{height:6px;background:var(--well);border-radius:999px;overflow:hidden;display:flex}
.hb-t i{display:block;height:100%;background:var(--c,var(--s1));border-radius:999px}
.hb-v{font-variant-numeric:tabular-nums;direction:ltr;font-weight:600;text-align:end;min-width:92px;font-size:var(--t-2)}
.hb-v small{display:block;font-weight:500;color:var(--ink-3);font-size:var(--t-1)}
.stack{display:flex;height:10px;border-radius:999px;overflow:hidden;gap:2px;margin:var(--sp-1) var(--sp-5) var(--sp-3)}
.stack i{display:block;height:100%;background:var(--c)}
.stack-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3);padding:0 var(--sp-5) var(--sp-4)}
.stack-l div{display:flex;flex-direction:column;font-size:var(--t-1);color:var(--ink-2)}
.stack-l div span{display:flex;align-items:center;gap:var(--sp-2)}
.stack-l b{font-size:var(--t-4);color:var(--ink);font-variant-numeric:tabular-nums}
.chips{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:var(--sp-2);border:1px solid var(--rule);background:var(--card);border-radius:var(--r-1);padding:var(--sp-1) var(--sp-3);min-height:32px;font-size:var(--t-1);cursor:pointer;color:var(--ink-2);font-weight:600;transition:border-color var(--dur-micro)}
.chip:hover{border-color:var(--field)}
.chip b{font-variant-numeric:tabular-nums;color:var(--ink)}
.chip.on{border-color:var(--navy);background:var(--navy);color:#fff}.chip.on b{color:#fff}
[data-theme="dark"] .chip.on{background:var(--well);border-color:var(--well);color:var(--ink)}[data-theme="dark"] .chip.on b{color:var(--ink)}

/* ---------- tables ---------- */
.tw{overflow:auto;max-height:min(70vh,640px)}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-2)}
th{position:sticky;top:0;background:var(--card-2);color:var(--ink-3);font-weight:600;text-align:start;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--rule);white-space:nowrap;z-index:1;font-size:var(--t-1);letter-spacing:.02em}
th.s{cursor:pointer;user-select:none}th.s:hover{color:var(--navy)}
th.n,td.n{text-align:end}
td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--rule);white-space:nowrap;height:44px}
tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--well) 45%,transparent)}
td.n,tfoot .num{font-family:var(--font-num);font-size:13px}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--well)}
tbody tr.click{cursor:pointer}
tbody tr.click:hover td{background:var(--card-2)}
tbody tr.click:focus-visible{outline:2px solid var(--navy-2);outline-offset:-2px}
tbody tr.sel td{background:var(--well);box-shadow:inset 2px 0 0 var(--yellow)}
tfoot td{position:sticky;bottom:0;background:var(--card-2);font-weight:700;border-top:1px solid var(--rule-2)}
td.wrap{white-space:normal;min-width:180px;max-width:380px}
td .sub{display:block;color:var(--ink-3);font-size:var(--t-1)}
.neg{color:var(--good-ink)}.hot{color:var(--crit-ink);font-weight:600}.muted{color:var(--ink-3)}
.pager{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);color:var(--ink-3);font-size:var(--t-1);border-top:1px solid var(--rule)}
.pager .sp{flex:1}
.empty{padding:var(--sp-10) var(--sp-4);text-align:center;color:var(--ink-3)}
.tag{display:inline-block;padding:0 var(--sp-2);border-radius:6px;font-size:var(--t-1);font-weight:600;background:var(--well);color:var(--ink-2);line-height:22px}
.tag.good{background:var(--good-soft);color:var(--good-ink)}
.tag.bad{background:var(--crit-soft);color:var(--crit-ink)}
.tag.warn{background:var(--warn-soft);color:var(--warn-ink)}
.tag.p1,.tag.p2{color:var(--ink);background:var(--well)}
.tag.p1::before,.tag.p2::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--s1);margin-inline-end:6px}
.tag.p2::before{background:var(--s2)}

/* ---------- live status ---------- */
.live{display:inline-flex;align-items:center;gap:var(--sp-2);border:1px solid var(--rule);border-radius:var(--r-1);padding:var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);font-size:var(--t-1);color:var(--ink-2);background:var(--card)}
.live svg{width:14px;height:14px;color:var(--good)}
.live.bad svg{color:var(--crit)}
.live.run svg{color:var(--warn);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- drawer, dialog, toast ---------- */
.shade{position:fixed;inset:0;background:var(--scrim);z-index:40}
.drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(1120px,96vw);background:var(--paper);z-index:41;display:flex;flex-direction:column;box-shadow:var(--elev);animation:page-in .28s ease both}
.drawer-h{background:var(--card);border-bottom:1px solid var(--rule);padding:var(--sp-4) var(--sp-6);display:flex;gap:var(--sp-4);align-items:flex-start}
.drawer-h .avatar{width:48px;height:48px;font-size:var(--t-3)}
.drawer-h h2{margin:0;font-size:var(--t-5)}
.drawer-h dl{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-5);margin:var(--sp-2) 0 0;font-size:var(--t-1)}
.drawer-h dl div{display:flex;gap:var(--sp-1)}
.drawer-h dt{color:var(--ink-3)}.drawer-h dd{margin:0;color:var(--ink);font-weight:600}
.drawer-b{overflow:auto;padding:var(--sp-5) var(--sp-6) var(--sp-12);display:flex;flex-direction:column;gap:var(--sp-4)}
dialog{border:0;border-radius:var(--r-2);padding:0;width:min(640px,94vw);background:var(--card);color:var(--ink);box-shadow:var(--elev)}
dialog::backdrop{background:var(--scrim)}
.dlg-h{display:flex;align-items:center;padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--rule)}
.dlg-h h3{margin:0;font-size:var(--t-4);flex:1}
.dlg-b{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4);max-height:72vh;overflow:auto}
.dlg-f{display:flex;gap:var(--sp-2);justify-content:flex-end;padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--rule);background:var(--card-2);border-radius:0 0 var(--r-2) var(--r-2)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.err{color:var(--crit-ink);font-size:var(--t-2);min-height:1em;margin:0}
.toasts{position:fixed;bottom:var(--sp-6);inset-inline-start:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-2);z-index:40}
.toast{background:var(--navy);color:#fff;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-2);font-size:var(--t-2);box-shadow:var(--elev);max-width:440px}
.toast.bad{background:var(--crit);color:#fff}
.loading{opacity:.6;pointer-events:none}
.perm{width:100%}.perm td,.perm th{padding:var(--sp-2) var(--sp-3)}.perm td select{min-height:32px;width:100%}
.checks{display:flex;flex-wrap:wrap;gap:var(--sp-2);max-height:150px;overflow:auto;border:1px solid var(--rule);border-radius:var(--r-1);padding:var(--sp-2)}
.checks label{display:flex;gap:var(--sp-2);align-items:center;font-size:var(--t-1);background:var(--card-2);border-radius:6px;padding:var(--sp-1) var(--sp-2)}
.sk{display:flex;flex-direction:column;gap:var(--sp-4)}
.sk i{display:block;border-radius:var(--r-2);background:var(--well);height:var(--h,120px);animation:fade 1.2s ease-in-out infinite alternate}
.sk .row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3)}
@keyframes fade{to{opacity:.45}}

/* ---------- global courier search ---------- */
.gsearch{position:relative;display:flex;align-items:center;gap:var(--sp-2);border:1px solid var(--rule);border-radius:var(--r-1);padding:0 var(--sp-3);background:var(--card);width:min(360px,34vw);min-height:38px}
.gsearch:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.gsearch input{border:0;min-height:36px;padding:0;flex:1;background:none;width:100%;min-width:0}
.gsearch input:focus-visible{outline:none}
.gsearch input:focus{box-shadow:none}
.gsearch>svg{width:16px;height:16px;color:var(--ink-3);flex:none}
.gsearch kbd{font:inherit;font-size:var(--t-1);color:var(--ink-3);border:1px solid var(--rule-2);border-radius:6px;padding:0 var(--sp-1);white-space:nowrap;direction:ltr}
.gs-results{position:absolute;top:calc(100% + var(--sp-2));inset-inline:0;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-2);box-shadow:var(--elev);z-index:15;max-height:440px;overflow:auto;padding:var(--sp-1)}
.gs-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-1);cursor:pointer;width:100%;border:0;background:none;text-align:start;min-height:44px}
.gs-item:hover,.gs-item.on{background:var(--accent-soft)}
.gs-item b{display:block;font-weight:600}
.gs-item small{color:var(--ink-3);font-size:var(--t-1)}
.gs-item .num{margin-inline-start:auto;font-weight:600}

/* ---------- overview: statement + attention ---------- */
.statement{position:relative;background:transparent;border:0;box-shadow:none;padding:4px 0 0;overflow:visible}
.statement .lead{font-family:var(--font-h);font-size:clamp(20px,2.2vw,28px);font-weight:600;line-height:1.55;margin:0 0 6px;max-width:48ch;color:var(--ink)}
.statement .lead .num{color:var(--ink);font-weight:600;border-bottom:2px solid var(--yellow);padding-bottom:1px;box-shadow:none}
[data-theme="dark"] .statement .lead .num{color:var(--ink)}
.statement .lead .num.hot{color:var(--crit-ink);border-bottom-color:var(--crit)}
.statement .as{margin:0 0 var(--sp-4);color:var(--ink-3);font-size:var(--t-2);display:flex;align-items:center;gap:var(--sp-1);flex-wrap:wrap;max-width:70ch}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--sp-3)}
.statement .strip{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.strip .cell{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-2);box-shadow:var(--shadow-card);padding:var(--sp-4) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.strip .cell.wide{grid-column:span 2}
.strip .lb{color:var(--ink-3);font-size:var(--t-2);font-weight:500}
.strip .vl{font-size:clamp(20px,2vw,26px);font-weight:500;line-height:1.25;letter-spacing:0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip .vl small{font-size:var(--t-2);font-weight:500;color:var(--ink-3)}
.strip .cell.wide .vl{font-size:clamp(22px,2.2vw,28px);font-weight:600}
.strip .cell>small{color:var(--ink-3);font-size:var(--t-1);line-height:1.5}
.strip .cell.bad .vl{color:var(--crit-ink)}
.strip .cell.click{cursor:pointer;transition:border-color var(--dur-micro),box-shadow var(--dur-micro)}
.strip .cell.click:hover{border-color:var(--rule-2);box-shadow:var(--elev)}
.delta{display:inline-flex;align-items:center;gap:var(--sp-1);font-style:normal;font-size:var(--t-1);font-weight:600;color:var(--ink-3);width:fit-content}
.delta.good{color:var(--good-ink)}.delta.bad{color:var(--crit-ink)}
.attn{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.attn li{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5)}
.attn li+li{border-top:1px solid var(--rule)}
.attn .tx{flex:1;min-width:0;line-height:1.6;font-size:var(--t-3)}
.attn .dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--info)}
.attn .bad .dot{background:var(--crit)}.attn .warn .dot{background:var(--warn)}
.attn li .btn{margin-inline-start:auto}
.sev{flex:none;font-size:var(--t-1);font-weight:600;padding:2px 10px;border-radius:999px;margin-top:3px;background:var(--accent-soft);color:var(--navy-2)}
.sev.bad{background:var(--crit-soft);color:var(--crit-ink)}
.sev.warn{background:var(--warn-soft);color:var(--warn-ink)}
.sources{margin:0;padding:var(--sp-3) var(--sp-5);color:var(--ink-3);font-size:var(--t-1);line-height:1.8}
.sources b{color:var(--ink-2)}

/* ---------- cashflow card + change chips ---------- */
.dchip{display:inline-flex;align-self:flex-start;unicode-bidi:isolate;align-items:center;gap:3px;font-size:var(--t-1);font-weight:600;padding:1px 8px;border-radius:999px;background:var(--well);color:var(--ink-2);width:fit-content;direction:ltr}
.dchip span[aria-hidden]{font-size:9px}
.dchip.good{background:var(--good-soft);color:var(--good-ink)}
.dchip.bad{background:var(--crit-soft);color:var(--crit-ink)}
.cf-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--rule)}
.cf-fig{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-4) var(--sp-5);min-width:0}
.cf-fig+.cf-fig{border-inline-start:1px solid var(--rule)}
.cf-fig>span{font-size:var(--t-2);color:var(--ink-3)}
.cf-fig>b{font-size:var(--t-6);font-weight:600;line-height:1.25}
.cf-fig>b.pos{color:var(--good-ink)}
.cf-pills{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5) 0}
.pill{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--t-1);color:var(--ink-2);background:var(--accent-soft);border-radius:999px;padding:3px 12px}
.pill b{color:var(--ink)}
.pill.bad{background:var(--crit-soft);color:var(--crit-ink)}.pill.bad b{color:var(--crit-ink)}
.cf-card .legend{padding-top:var(--sp-3)}
.cf-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule)}
.cf-split>div{padding:var(--sp-4) 0 var(--sp-2);min-width:0}
.cf-split>div+div{border-inline-start:1px solid var(--rule)}
.cf-split h3{margin:0 0 var(--sp-3);padding:0 var(--sp-5);font-size:var(--t-3)}
.cf-split .hb-row{grid-template-columns:minmax(110px,190px) minmax(0,1fr) auto}
.cf-split .hb-v{min-width:64px}
.donut{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-2) var(--sp-5) var(--sp-6)}
.ring{position:relative;width:176px;height:176px;flex:none}
.ring svg{width:100%;height:100%;display:block}
.ring .dc{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:2px}
.ring .dc b{font-size:var(--t-5);font-weight:700;line-height:1.1}
.ring .dc small{font-size:var(--t-1);color:var(--ink-3)}
.dl{list-style:none;margin:0;padding:0;flex:1;min-width:0;display:flex;flex-direction:column}
.dl li{display:grid;grid-template-columns:auto minmax(0,1fr) auto 56px;gap:var(--sp-3);align-items:center;padding:var(--sp-3) 0;border-bottom:1px solid var(--rule)}
.dl li:last-child{border-bottom:0}
.dl i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.dl-l{font-weight:600;font-size:var(--t-2)}
.dl-l small{display:block;font-weight:400;color:var(--ink-3);font-size:var(--t-1)}
.dl b{font-weight:600;font-size:var(--t-3)}
.dl em{font-style:normal;color:var(--ink-3);font-size:var(--t-2);text-align:end}

/* ---------- docked courier detail pane ---------- */
.dock{background:var(--card);border-inline-start:1px solid var(--rule);overflow:auto;display:flex;flex-direction:column;height:100vh;min-width:0;box-shadow:-4px 0 12px -4px rgb(11 18 32 / .08);animation:page-in .28s ease both}
.dock-h{padding:var(--sp-5) var(--sp-5) var(--sp-3);display:flex;gap:var(--sp-3);align-items:flex-start}
.dock-h h2{margin:0;font-size:var(--t-4);line-height:1.35;flex:1;min-width:0}
.dock-meta{padding:0 var(--sp-5);color:var(--ink-3);font-size:var(--t-1);display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3)}
.dock-tot{padding:var(--sp-4) var(--sp-5) var(--sp-2)}.dock-tot small{display:block;color:var(--ink-3);font-size:var(--t-1)}
.dock-tot b{font-size:30px;line-height:1.2;font-weight:600}
.dock-sec{padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--rule)}
.dock-sec h3{margin:0 0 var(--sp-2);font-size:var(--t-2);color:var(--ink-2);font-weight:700}
.lines>div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2);padding:var(--sp-2) 0;border-bottom:1px solid var(--rule)}
.lines>div:last-child{border-bottom:0}.lines small{display:block;color:var(--ink-3);font-size:var(--t-1)}
.why{background:var(--card-2);border-radius:var(--r-1);padding:var(--sp-3);font-size:var(--t-1);color:var(--ink-2);display:flex;flex-direction:column;gap:var(--sp-2);line-height:1.7}
.tl{display:flex;flex-direction:column}
.tl>div{display:flex;gap:var(--sp-3);padding:var(--sp-2) 0;font-size:var(--t-2)}
.tl i{width:8px;height:8px;border-radius:50%;background:var(--s3);margin-top:8px;flex:none}.tl i.out{background:var(--s2)}
.tl small{color:var(--ink-3);display:block;font-size:var(--t-1)}.tl .amt{margin-inline-start:auto;font-weight:600;white-space:nowrap}
.dock-act{display:flex;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-4) var(--sp-5) var(--sp-6)}

/* ---------- explanations ---------- */
.ex{display:inline-grid;place-items:center;width:18px;height:18px;padding:0;min-height:0;margin-inline-start:var(--sp-1);border:0;background:none;color:var(--ink-3);cursor:pointer;border-radius:50%;vertical-align:middle}
.ex:hover,.ex[aria-expanded="true"]{color:var(--navy);background:var(--accent-soft)}.ex svg{width:15px;height:15px}
.pop{position:fixed;z-index:50;width:min(350px,92vw);background:var(--card);border:1px solid var(--rule-2);border-radius:var(--r-2);box-shadow:var(--elev);padding:var(--sp-4);font-size:var(--t-2);line-height:1.7;color:var(--ink)}
.pop h4{margin:0 0 var(--sp-2);font-size:var(--t-3)}
.pop dl{margin:var(--sp-2) 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-1) var(--sp-3);font-size:var(--t-1)}
.pop dt{color:var(--ink-3);font-weight:600}.pop dd{margin:0}
.pop p{margin:0;color:var(--ink-2)}

/* ---------- LTR (English) ---------- */
.auth-lang{align-self:flex-end}

/* ---------- responsive ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media (max-width:1100px){
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.span2{grid-column:auto}
  .cf-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cf-fig:nth-child(3){border-inline-start:0}.cf-fig:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:960px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;inset-block:0;inset-inline-start:0;width:288px;z-index:30;transform:translateX(110%);transition:transform var(--dur-short);background:linear-gradient(180deg,#0B1620,#102335)}
  [dir="ltr"] .side{transform:translateX(-110%)}
  .side.open,[dir="ltr"] .side.open{transform:none}
  .menu-btn{display:grid}
  .page{padding:var(--sp-2) var(--sp-4) var(--sp-10)}
  .top{padding:var(--sp-3) var(--sp-4) var(--sp-2);flex-wrap:nowrap;gap:var(--sp-2)}
  .top .lang-btn,.top .live{display:none}
  #liveText{display:none}
  .gsearch{width:auto;flex:1}.gsearch kbd{display:none}
  .grid2,.grid3,.row2{grid-template-columns:minmax(0,1fr)}
  .filters,.filter-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2) var(--sp-3)}
  .filter-bar{padding:10px}
  .filters>*,.filter-row>*{min-width:0}
  .filters select,.filters input:not([type=checkbox]),.filter-row select,.filter-row input:not([type=checkbox]){width:100%;min-width:0;box-sizing:border-box}
  .filters input[type=search],.filters .seg,.filters .grow,.filters>.btn,.filters>.btn.primary,
  .filter-row input[type=search],.filter-row .seg,.filter-row .grow,.filter-row .actions,.filter-row>.btn{grid-column:1/-1;min-width:0;width:100%}
  .filters .seg,.filter-row .seg{display:flex}.filters .seg button,.filter-row .seg button{flex:1}
  .filter-row .actions{margin:0}
  .kpis{grid-template-columns:1fr;gap:10px}
  .kpi{padding:14px 14px;grid-template-columns:minmax(0,1fr) auto}
  .kpi-v,.kpi>b.kpi-v{font-size:20px}.kpi.hero .kpi-v,.kpi.lead .kpi-v,.kpi.hero>b.kpi-v,.kpi.lead>b.kpi-v{font-size:22px}
  .kpi.lead,.kpi.tall{grid-column:auto}
  .sk .row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cf-split{grid-template-columns:minmax(0,1fr)}.cf-split>div+div{border-inline-start:0;border-top:1px solid var(--rule)}
  .cf-pills,.cf-split h3{padding-inline:var(--sp-4)}
  .cf-split .hb{padding-inline:var(--sp-4)}.cf-split .hb-row{grid-template-columns:minmax(0,1.3fr) minmax(56px,1fr) auto}
  .donut{flex-direction:column;align-items:stretch;gap:var(--sp-4);padding:var(--sp-2) var(--sp-4) var(--sp-4)}
  .ring{align-self:center;width:150px;height:150px}
  .panel-h .seg{order:3;width:100%}.panel-h .seg button{flex:1}
  .panel-b,.hb,.legend,.stack-l,.cf-fig,.attn li,.statement .as{padding-inline:var(--sp-4)}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
  .tabs button{white-space:nowrap;flex:none}
  .auth-panel{padding:20px 16px}.auth-card{padding:26px 22px}
}

/* ---------- v63 Barq Force finish ---------- */
.mark{background:var(--yellow)}
.live{border-radius:11px}
.gsearch{border-radius:11px;backdrop-filter:blur(8px)}
.toast{animation:erp-reveal .35s ease both}
.drawer{animation:erp-reveal .28s ease both}
.filter-bar,.filters{border-radius:14px;backdrop-filter:blur(8px)}
.hb-t i{background:linear-gradient(90deg,var(--c,var(--s1)),color-mix(in srgb,var(--c,var(--s1)) 70%,#fff))}
@media (min-width:1100px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:960px){
  .kpis{grid-template-columns:1fr}
  .kpi-v,.kpi>b.kpi-v{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .auth-orbit,.auth-orbit.o2,.auth-bolt,.auth-bolt .mark.xl,.auth-brand::before{animation:none!important}
  .page>*,.kpi,.auth-card{animation:none!important;transform:none!important}
  .kpi:hover,.nav button:hover,.btn.primary:hover{transform:none}
}

/* ---------- v64 auth motion (Taste hero entrance + soft loops) ---------- */
:root{
  --m-in:150ms;--m-out:120ms;--m-press:90ms;--m-enter:cubic-bezier(.22,1,.36,1);--m-ease:cubic-bezier(.2,.8,.2,1);
}
.auth{--auth-stage:0}
.auth.is-enter{--auth-stage:1}
.auth-fx{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.auth-orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;animation:auth-orb 10s var(--m-ease) infinite alternate}
.auth-orb.o1{width:280px;height:280px;inset-inline-start:8%;top:12%;background:rgb(231 128 64 / .35);animation-duration:11s}
.auth-orb.o2{width:220px;height:220px;inset-inline-end:12%;bottom:18%;background:rgb(245 196 0 / .22);animation-duration:14s;animation-delay:-3s}
.auth-orb.o3{width:160px;height:160px;inset-inline-start:42%;bottom:8%;background:rgb(94 234 212 / .14);animation-duration:12s;animation-delay:-6s}
.auth-spark{position:absolute;width:6px;height:6px;border-radius:50%;background:rgb(255 255 255 / .55);box-shadow:0 0 12px rgb(0 0 0 / .65);animation:auth-spark 5.5s linear infinite}
.auth-spark.s1{inset-inline-start:18%;top:28%;animation-delay:0s}
.auth-spark.s2{inset-inline-start:72%;top:22%;animation-delay:-1.2s}
.auth-spark.s3{inset-inline-start:58%;top:68%;animation-delay:-2.1s}
.auth-spark.s4{inset-inline-start:28%;top:74%;animation-delay:-3.4s}
.auth-spark.s5{inset-inline-start:84%;top:52%;animation-delay:-4.2s}
.auth-orbit.o3{width:280px;height:280px;border-color:rgb(245 196 0 / .16);animation-duration:18s}
.auth-brand-copy h1{display:flex;flex-direction:column;gap:4px;align-items:center}
.auth-line{display:block;overflow:hidden;line-height:1.15}
.auth-word{display:inline-block;transform:translateY(110%);opacity:0}
.auth-word.accent{color:var(--cta)}
.auth-brand-copy h1 em{display:none}
.auth-lead{margin:0;color:rgb(195 208 217 / .95);font-size:16px;line-height:1.7;max-width:38ch}
.auth-pills{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.auth-pills li{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-num);color:var(--on-dark);border:1px solid rgb(244 239 231 / .18);background:rgb(255 255 255 / .05);border-radius:999px;padding:6px 12px;backdrop-filter:blur(8px)}

/* entrance: only after .is-enter */
.auth.is-enter .auth-bolt{animation:auth-bolt-in .9s var(--m-enter) both, auth-float 4s ease-in-out 1s infinite}
.auth.is-enter .auth-bolt .mark.xl{animation:auth-pulse 2.8s ease-in-out 1s infinite}
.auth.is-enter .auth-kicker{animation:auth-fade-up .52s var(--m-enter) .15s both}
.auth.is-enter .auth-line:nth-child(1) .auth-word{animation:auth-line-up .7s var(--m-enter) .22s both}
.auth.is-enter .auth-line:nth-child(2) .auth-word{animation:auth-line-up .7s var(--m-enter) .3s both}
.auth.is-enter .auth-lead{animation:auth-fade-up .52s var(--m-enter) .58s both}
.auth.is-enter .auth-pills{animation:auth-fade-up .52s var(--m-enter) .68s both}
.auth.is-enter .auth-pills li{animation:auth-pill .55s var(--m-enter) both}
.auth.is-enter .auth-pills li:nth-child(1){animation-delay:.72s}
.auth.is-enter .auth-pills li:nth-child(2){animation-delay:.8s}
.auth.is-enter .auth-pills li:nth-child(3){animation-delay:.88s}
.auth.is-enter .auth-card{animation:auth-rise .75s var(--m-enter) .18s both}
.auth.is-enter .auth-card>*{animation:auth-fade-up .5s var(--m-enter) both}
.auth.is-enter .auth-card>*:nth-child(1){animation-delay:.28s}
.auth.is-enter .auth-card>*:nth-child(2){animation-delay:.34s}
.auth.is-enter .auth-card>*:nth-child(3){animation-delay:.4s}
.auth.is-enter .auth-card>*:nth-child(4){animation-delay:.46s}
.auth.is-enter .auth-card>*:nth-child(5){animation-delay:.52s}
.auth.is-enter .auth-card>*:nth-child(6){animation-delay:.58s}
.auth.is-enter .auth-card>*:nth-child(7){animation-delay:.64s}
.auth.is-enter .auth-card>*:nth-child(8){animation-delay:.7s}
.auth.is-enter .auth-card>*:nth-child(9){animation-delay:.76s}

.auth-go{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.auth-go-arrow{width:18px;height:18px;transition:transform var(--m-in) var(--m-ease);flex:none}
[dir="rtl"] .auth-go-arrow{transform:scaleX(-1)}
@media (hover:hover) and (pointer:fine){
  .auth-go:hover{transform:translateY(-2px)}
  .auth-go:hover .auth-go-arrow{transform:translateX(3px)}
  [dir="rtl"] .auth-go:hover .auth-go-arrow{transform:scaleX(-1) translateX(3px)}
  .auth-go:active{transform:translateY(1px) scale(.985);transition-duration:var(--m-press)}
  .auth-card input:hover{border-color:color-mix(in srgb,var(--cta) 45%,var(--rule-2))}
  .auth-pills li:hover{border-color:rgb(231 128 64 / .45);transform:translateY(-1px)}
  .auth-logo:hover .mark{transform:scale(1.04)}
}
.auth-logo .mark{transition:transform var(--m-in) var(--m-ease)}
.auth-card input:focus,.auth-card select:focus{border-color:var(--ink);box-shadow:none}

@keyframes auth-line-up{from{transform:translateY(110%);opacity:0}to{transform:none;opacity:1}}
@keyframes auth-fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes auth-bolt-in{from{opacity:0;transform:scale(.86) translateY(18px)}to{opacity:1;transform:none}}
@keyframes auth-pill{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes auth-orb{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(18px,-14px,0) scale(1.08)}}
@keyframes auth-spark{0%{opacity:0;transform:translate3d(0,12px,0) scale(.6)}20%{opacity:1}80%{opacity:.7}100%{opacity:0;transform:translate3d(0,-48px,0) scale(1)}}

@media (max-width:960px){
  .auth-orb,.auth-spark,.auth-orbit.o3{display:none}
  .auth-pills{gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .auth-fx,.auth-orbit,.auth-orbit.o2,.auth-orbit.o3{display:none!important}
  .auth.is-enter .auth-bolt,
  .auth.is-enter .auth-bolt .mark.xl,
  .auth.is-enter .auth-kicker,
  .auth.is-enter .auth-word,
  .auth.is-enter .auth-lead,
  .auth.is-enter .auth-pills,
  .auth.is-enter .auth-pills li,
  .auth.is-enter .auth-card,
  .auth.is-enter .auth-card>*{animation:none!important;opacity:1!important;transform:none!important}
}

/* ---------- v66 Ops Clean: quieter inside app, keep auth motion ---------- */
.app .page>*{animation:erp-reveal .28s var(--m-ease,cubic-bezier(.2,.8,.2,1)) both;animation-delay:0s!important}
.app .main{background:var(--paper)}
.app .top{background:var(--card);backdrop-filter:none;border-bottom:1px solid var(--rule);box-shadow:none}
.app .kpi,
.app .panel,
.app .filter-bar,
.app .filters,
.app .gsearch,
.app .live{backdrop-filter:none!important}
.app .kpi{box-shadow:none;transition:border-color .15s}
.app .kpi:hover{transform:none;box-shadow:none;border-color:var(--rule-2)}
.app .panel{box-shadow:none;transition:none}
.app .panel:hover{box-shadow:none;transform:none}
.app .kpi.hero,.app .kpi.lead{background:var(--accent-soft);border-color:color-mix(in srgb,var(--cta) 28%,var(--rule))}
.app .flow-guide{display:none} /* replaced by single note in JS */
.app .pulse-strip{box-shadow:none;animation:none}
.app .pulse-strip .dot{animation:none}
.app .note.info{background:var(--well);border-color:var(--rule);color:var(--ink-2)}
.app .strip .cell{box-shadow:none}
.app .btn:hover{transform:none}
.app .btn.primary:hover{transform:none}
.app .nav button:hover{transform:none}
@media (min-width:1100px){
  .app .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* ---------- v67 Ops Align: summary-first + consistent spacing ---------- */
.app .page{padding:20px 24px 44px;gap:20px;max-width:1400px}
.app .vstack{display:flex;flex-direction:column;gap:20px}
.app .filter-bar{box-shadow:none;margin:0}
.app .tabs{margin:0}
.app .kpis{gap:12px}
.app .strip .cell{box-shadow:none;background:var(--card)}
.app .statement .lead{font-size:clamp(18px,1.8vw,24px);max-width:52ch}
.app .cf-card{box-shadow:none}
.app .more-block{border:1px solid var(--rule);border-radius:var(--r-2);background:var(--card);overflow:clip}
.app .more-block>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;font-weight:700;color:var(--ink);user-select:none}
.app .more-block>summary::-webkit-details-marker{display:none}
.app .more-block .more-t{flex:1;min-width:12ch}
.app .more-block .more-s{color:var(--ink-3);font-weight:500;font-size:var(--t-1)}
.app .more-block>summary::after{content:"";width:8px;height:8px;border-inline-end:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .15s;flex:none;margin-inline-start:4px}
.app .more-block[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
.app .more-block .more-b{display:flex;flex-direction:column;gap:16px;padding:16px;border-top:1px solid var(--rule)}
.app .more-block .more-b .panel{border-color:var(--rule)}
@media (min-width:1280px){
  .app .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1100px) and (max-width:1279px){
  .app .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* ---------- v68 Audit fixes: Arabic type, KPI grid, units, mobile ---------- */
/* Letter-spacing and monospace break Arabic letter joining; keep tracking for Latin only. */
:lang(ar) body,
:lang(ar) th,
:lang(ar) .nav .ng,
:lang(ar) .auth-pills li,
:lang(ar) .tabs button{letter-spacing:0}
:lang(ar) .nav .ng,
:lang(ar) .auth-pills li{font-family:var(--font);text-transform:none}
/* Numeric column headers are words, not figures: keep them in the text face. */
th.n{font-family:var(--font)}
.hb-v small{font-family:var(--font);letter-spacing:0}
:lang(ar) .hb-v small{direction:rtl;unicode-bidi:isolate}
.nav .ng{font-size:12px}
:lang(ar) .auth-pills li{font-size:12px}

/* KPI cards: label, figure, note stacked so narrow cards never squeeze text to one word per line,
   and the grid fills one row whether a page has 3, 4 or 5 cards. */
.app .kpis{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.app .kpi{grid-template-columns:minmax(0,1fr);grid-template-areas:"label" "value" "sub" "spk";row-gap:4px;align-content:start;padding:16px 18px}
.app .kpi{container-type:inline-size}
/* Figures scale with the card itself, so a 9-digit amount fits a narrow card; the unit wraps before the number overflows. */
.app .kpi .kpi-v{justify-self:start;text-align:start;font-size:min(24px,11.5cqi);max-width:100%;white-space:normal}
.app .kpi .kpi-v .num{white-space:nowrap}
/* Six cards read better as two rows of three than five plus an orphan. */
@media (min-width:641px){.app .kpis:has(> .kpi:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
.app .kpi .kpi-s{max-width:none}
.app .kpi.lead .kpi-v,.app .kpi.hero .kpi-v{font-size:min(26px,11.5cqi)}
.app .kpi .dchip{grid-area:sub;justify-self:start}

/* Amounts carry their unit on cards and the ledger strip. */
.kpi-v>.money:only-child::after,.strip .vl>.money:only-child::after{content:" ر.س";font-family:var(--font);font-size:.5em;font-weight:600;color:var(--ink-3)}
:lang(en) .kpi-v>.money:only-child::after,:lang(en) .strip .vl>.money:only-child::after{content:" SAR"}

/* Password toggle reads as a control, not as the field's value. */
.pw button{background:var(--well);border:1px solid var(--rule);padding:4px 10px;font-size:var(--t-1);color:var(--ink-2)}
.pw button:hover{color:var(--ink);border-color:var(--rule-2)}

/* Scrollable tab rows hint that more tabs exist. */
@media (max-width:960px){
  .app .tabs{mask-image:linear-gradient(to left,#000 85%,transparent);-webkit-mask-image:linear-gradient(to left,#000 85%,transparent)}
  :lang(en) .app .tabs{mask-image:linear-gradient(to right,#000 85%,transparent);-webkit-mask-image:linear-gradient(to right,#000 85%,transparent)}
  /* One scroller on touch screens: tables grow with the page instead of scrolling inside it. */
  .tw{max-height:none}
}
@media (max-width:640px){
  .app .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .app .kpi{padding:12px}
  .app .kpi.lead{grid-column:1/-1}
  .app .kpi .kpi-l{font-size:12px}
  .app .kpi .kpi-s{font-size:11px}
}

/* ---------- v76 Ledger by month ---------- */
td .sub{display:block;font-size:11px;color:var(--ink-3);font-family:var(--font);font-weight:500;margin-top:2px}
.tbar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--well);margin-top:6px;min-width:90px;gap:1px}
.tbar i{display:block;height:100%;background:var(--c)}
.tlegend{display:flex;flex-wrap:wrap;gap:6px 16px;padding:0 var(--sp-5) var(--sp-3);font-size:var(--t-1);color:var(--ink-2)}
.tlegend span{display:inline-flex;align-items:center;gap:6px}
.tlegend i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.delta{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ink-3);white-space:nowrap;font-family:var(--font)}
.delta.up{color:var(--crit-ink)}
.delta.down{color:var(--good-ink)}
.delta .num{font-family:var(--font-num)}
.rate{display:inline-block;min-width:48px;text-align:center;padding:2px 8px;border-radius:999px;background:var(--well);color:var(--ink-2);font-weight:700;font-family:var(--font-num);font-size:12px}
.rate.good{background:var(--good-soft);color:var(--good-ink)}
.rate.bad{background:var(--crit-soft);color:var(--crit-ink)}
.strip .vl .delta{font-size:inherit}
@media (max-width:640px){
  .months-sum .strip{grid-template-columns:1fr}
  .months-sum .strip .cell{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:8px}
}


/* ======================================================================
   v80 Calm banking — the direction chosen on 2026-11-08 (white + navy,
   one quiet type family for words and figures, yellow only as a marker).
   This layer sits last and only restyles; markup and behaviour are unchanged.
   ====================================================================== */
:root{
  --navy:#13294b;--navy-2:#1f3a66;--navy-3:#46536a;
  --ink:#132033;--ink-2:#46536a;--ink-3:#5d6a80;
  --paper:#f5f7fa;--card:#fff;--card-2:#f8fafc;--well:#eef2f8;
  --rule:#e3e7ee;--rule-2:#cfd6e1;--field:#cfd6e1;
  --yellow:#ffb71b;--yellow-ink:#132033;
  --cta:#13294b;--cta-ink:#fff;--cta-hover:#1f3a66;
  --accent:#1f3a66;--accent-soft:#eef2f8;--focus:#1f3a66;
  --btn:#13294b;--btn-hover:#1f3a66;--btn-ink:#fff;
  --rail:#fff;--rail-ink:#13294b;--rail-muted:#46536a;--rail-line:#e3e7ee;
  --s1:#13294b;--s2:#8aa1c4;--s3:#0f766e;--s4:#ffb71b;
  --good:#0f766e;--good-ink:#0f766e;--good-soft:#e6f4f1;
  --warn:#8a5a00;--warn-ink:#8a5a00;--warn-soft:#fff4dc;
  --crit:#b42318;--crit-ink:#b42318;--crit-soft:#fdecea;
  --font:"Noto Sans Arabic","Noto Sans",system-ui,sans-serif;
  --font-h:"Noto Kufi Arabic","Noto Sans",system-ui,sans-serif;
  --font-num:"Noto Sans","Noto Sans Arabic",system-ui,sans-serif;
  --shadow-card:none;--glow:transparent;
}
:root[data-theme="dark"]{
  --navy:#c6d2e4;--navy-2:#9fb4d4;--ink:#e8edf5;--ink-2:#b4c0d3;--ink-3:#8b98ad;
  --paper:#0e1726;--card:#15213a;--card-2:#1a2843;--well:#1f2f4d;--rule:#26375a;--rule-2:#34486f;
  --cta:#c6d2e4;--cta-ink:#0e1726;--btn:#c6d2e4;--btn-hover:#e8edf5;--btn-ink:#0e1726;--accent:#9fb4d4;--accent-soft:#1f2f4d;--focus:#9fb4d4;
  --rail:#111b2e;--rail-ink:#e8edf5;--rail-muted:#b4c0d3;--rail-line:#26375a;
  --s1:#9fb4d4;--s2:#5d7aa6;--s3:#2dd4bf;--s4:#ffb71b;
}

/* Type: one family, figures proportional with tabular digits, never monospace. */
body{font-family:var(--font);letter-spacing:0;font-size:15px;line-height:1.6}
h1,h2,h3,.top h1,.panel-h h2{font-family:var(--font-h);letter-spacing:0}
.num,td.n,.vl,.cf-fig>b,.dl b,.dl em,.strip .vl,.hb-v,.dchip .num,.statement .lead .num,.nc,.dock-tot b,tfoot .num,.kpi-v,.rate,.delta .num,.tabs .count,.donut .dc b{
  font-family:var(--font-num)!important;font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;letter-spacing:0}
th.n{font-family:var(--font)!important}

/* Sidebar: white, quiet, active page as a soft navy pill. */
.side{background:var(--rail)!important;border-inline-end:1px solid var(--rail-line);color:var(--rail-muted)}
.side .logo{color:var(--navy);font-family:var(--font-h);font-size:17px;font-weight:700}
.side .mark{box-shadow:none;border-radius:50%}
.nav .ng{color:var(--ink-3);font-size:12px;font-weight:600;padding:18px 12px 6px}
.nav button{color:var(--rail-muted);font-weight:500;font-size:15px;border-radius:8px;min-height:42px;padding:9px 12px}
.nav button:hover{background:var(--well);color:var(--navy);transform:none}
.nav button.on{background:var(--well);color:var(--navy);font-weight:600;box-shadow:none}
.nav button.on svg{color:var(--navy)}
.nav button .nc{background:var(--well);color:var(--ink-2);font-weight:600;font-size:12px}
.nav button.on .nc{background:var(--card);color:var(--navy)}
.side-foot{border-top:1px solid var(--rail-line)}
.side .icon{color:var(--ink-3)}.side .icon:hover{background:var(--well);color:var(--navy)}
.side-foot strong{color:var(--ink)}
.avatar{background:var(--navy)!important;color:#fff!important}
:root[data-theme="dark"] .avatar{color:var(--paper)!important}

/* Top bar: lighter, smaller title. */
.app .top{background:var(--paper);border-bottom:0}
.top h1{font-size:22px;font-weight:600;color:var(--ink)}
.gsearch{border-color:var(--rule);background:var(--card);border-radius:8px;box-shadow:none}
.live{border-color:var(--rule);background:var(--card);border-radius:8px;box-shadow:none;color:var(--ink-3);font-size:13px}

/* Buttons: navy primary, outlined secondary, no glows. */
.btn{border-radius:8px;border-color:var(--rule-2);font-weight:500;box-shadow:none}
.btn:hover{border-color:var(--navy-2);color:var(--navy)}
.btn.primary{background:var(--btn);border-color:var(--btn);color:var(--btn-ink);box-shadow:none}
.btn.primary:hover{background:var(--btn-hover);border-color:var(--btn-hover);color:var(--btn-ink)}
.btn.on{background:var(--well);border-color:var(--navy-2);color:var(--navy)}
.btn.ghost{border-color:transparent}

/* Surfaces: white cards, thin rules, 12px radius, no tinted hero. */
.app .panel,.app .kpi,.app .strip .cell,.app .filter-bar,.app .tabs,.app .more-block{border-radius:12px;border-color:var(--rule);box-shadow:none}
.app .kpi.lead,.app .kpi.hero{background:var(--card)!important;border-color:var(--rule)!important;position:relative}
.app .kpi.lead::after{content:"";position:absolute;inset-inline-start:0;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:var(--yellow)}

/* Figures: calmer size and weight. */
.app .kpi .kpi-l{font-size:13px;font-weight:500;color:var(--ink-3)}
.app .kpi .kpi-v,.app .kpi.lead .kpi-v{font-size:min(23px,10.5cqi);font-weight:600;color:var(--ink)}
.app .kpi .kpi-s{font-size:12px;color:var(--ink-3)}
.strip .vl{font-size:clamp(18px,1.6vw,22px)!important;font-weight:600!important}
.statement .lead{font-family:var(--font-h);font-size:clamp(19px,1.7vw,24px)!important;font-weight:600;line-height:1.8}
.statement .lead .num{color:var(--navy);border-bottom:2px solid var(--yellow)}
.statement .lead .hot{color:var(--crit)}
.kpi-v>.money:only-child::after,.strip .vl>.money:only-child::after{font-size:.55em;font-weight:500;color:var(--ink-3)}
.donut .dc b{font-size:22px;font-weight:600}
.dl b,.dl em{font-size:13px}

/* Tables: quieter header, more air, figures in the same family. */
th{background:var(--card-2);color:var(--ink-3);font-weight:600;font-size:12px}
td{font-size:14px}
td.n,tfoot .num{font-size:14px}
tbody tr:hover{background:var(--card-2)}

/* Tabs: underline in navy, counts as soft pills. */
.tabs button{font-weight:500;color:var(--ink-3)}
.tabs button.on{color:var(--navy);font-weight:600;border-bottom-color:var(--navy)}
.tabs .count{background:var(--well);color:var(--ink-2)}
.tabs button.on .count{background:var(--navy);color:#fff}
:root[data-theme="dark"] .tabs button.on .count{color:var(--paper)}
.seg button.on{background:var(--navy);color:#fff}
:root[data-theme="dark"] .seg button.on{color:var(--paper)}

/* Tags and alert severities. */
.sev.bad,.tag.bad{background:var(--crit-soft);color:var(--crit-ink)}
.sev.warn,.tag.warn{background:var(--warn-soft);color:var(--warn-ink)}
.sev.info{background:var(--well);color:var(--navy-2)}

/* Filter bar v2: actions row, one tidy main row, optional extra row. */
.page-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.page-actions .btn{min-height:36px}
.app .filter-bar{padding:14px 16px;gap:12px;background:var(--card)}
.fb-main{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.fb-main>.f{flex:0 1 190px;min-width:150px}
.fb-main>.f.grow{flex:1 1 300px}
.fb-toggle{height:38px;margin-inline-start:auto;display:inline-flex;align-items:center;gap:8px}
.fb-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--navy);color:#fff;font-size:11px;font-weight:600}
:root[data-theme="dark"] .fb-n{color:var(--paper)}
.fb-extra{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;align-items:end;padding-top:12px;border-top:1px solid var(--rule)}
.fb-extra .f.inline{align-self:center;flex-direction:row;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.filter-bar label.f{font-size:12px;font-weight:500;color:var(--ink-3);gap:5px}
.filter-bar input:not([type=checkbox]),.filter-bar select{min-height:38px;border-radius:8px;border-color:var(--rule-2);font-size:14px;background:var(--card);width:100%}
.filter-bar input:focus,.filter-bar select:focus{border-color:var(--navy-2);box-shadow:0 0 0 3px rgb(31 58 102 / .15);outline:none}
@media (max-width:640px){
  .fb-main{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .fb-main>.f,.fb-main>.f.grow{min-width:0}
  .fb-main>.f.grow,.fb-main>.fb-toggle{grid-column:1/-1}
  .fb-toggle{margin:0;justify-content:center}
  .fb-extra{grid-template-columns:1fr 1fr}
  .page-actions .btn{flex:1 1 auto;justify-content:center}
}

/* Cards, the figure strip and the headline show rounded riyals; tables and statements keep halalas. */
.money .m-round{display:none}
.kpi-v .money .m-full,.strip .vl .money .m-full,.statement .lead .money .m-full,.statement .as .money .m-full{display:none}
.kpi-v .money .m-round,.strip .vl .money .m-round,.statement .lead .money .m-round,.statement .as .money .m-round{display:inline}
.filter-bar input:not([type=checkbox]),.filter-bar select{height:40px;min-height:40px;padding-block:0;box-sizing:border-box}
.fb-toggle{height:40px}
.kpi-s .money .m-full{display:none}.kpi-s .money .m-round{display:inline}
/* Headline figures round; the exact riyal lives in the grid below them. */
.cm-stat-v .money .m-full{display:none}.cm-stat-v .money .m-round{display:inline}
.cf-fig .money .m-full{display:none}.cf-fig .money .m-round{display:inline}
.cf-fig>b,.cf-fig b.num{font-size:clamp(20px,1.7vw,24px)!important;font-weight:600!important;letter-spacing:0}
.zero{color:var(--rule-2)}
/* Tables fit their box: text columns wrap (names, projects), figures stay on one line. */
.tw th,.tw td{padding:9px 10px}
.tw td:not(.n):not(.num){white-space:normal;min-width:72px;max-width:230px;line-height:1.4}
.tw td.n,.tw th.n{white-space:nowrap}
.month-packs{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.month-packs .dl-label{font-size:12px;color:var(--ink-3);margin-inline-start:10px}


/* ======================================================================
   v120 Warm workspace — the owner's reference (2026-11-09): a warm greige
   ground with a honey glow, soft translucent cards with 24px corners, a
   dark pill for the current page, honey as the one accent (Barq yellow),
   and quick, smooth ease-out motion. Our data and pages, its look.
   ====================================================================== */
:root{
  --ground:#e9e6dd;--ground-2:#e3dfd4;--glow:#f6d98a;
  --ink:#1f1f24;--ink-2:#47464d;--ink-3:#625f66;--line:rgb(31 31 36 / .09);--line-2:rgb(31 31 36 / .16);
  --honey:#f2c14e;--honey-2:#e2a72a;--honey-soft:rgb(242 193 78 / .32);--honey-ink:#7a5300;
  --paper:var(--ground);--card:rgb(255 254 250 / .74);--card-2:#f6f3ea;--well:#efebe1;
  --rule:var(--line);--rule-2:var(--line-2);--field:var(--line-2);
  --navy:var(--ink);--navy-2:var(--ink-2);--navy-3:var(--ink-3);
  --cta:var(--ink);--cta-ink:#f4f3ee;--btn:var(--ink);--btn-hover:#000;--btn-ink:#f4f3ee;
  --accent:var(--ink);--accent-soft:var(--well);--focus:var(--ink);
  --rail:transparent;--rail-ink:var(--ink);--rail-muted:var(--ink-2);--rail-line:var(--line);
  --yellow:var(--honey);--yellow-ink:var(--ink);
  --s1:#1f1f24;--s2:#f2c14e;--s3:#2f7d4f;--s4:#b8a98a;
  --good:#2f7d4f;--good-ink:#2a6f46;--good-soft:#e1efe5;
  --warn:#b7791f;--warn-ink:#8a5a12;--warn-soft:#fbefd2;
  --crit:#c2410c;--crit-ink:#b23a0a;--crit-soft:#fbe4d8;
  --grid:var(--line);--axis:var(--line-2);
  --font:"Hanken Grotesk","Readex Pro",system-ui,sans-serif;
  --font-h:"Bricolage Grotesque","Readex Pro",system-ui,sans-serif;
  --font-num:"Hanken Grotesk","Readex Pro",system-ui,sans-serif;
  --card-shadow:inset 0 1px 0 rgb(255 255 255 / .85),0 18px 40px -26px rgb(40 36 70 / .35);
  --card-shadow-hover:inset 0 1px 0 rgb(255 255 255 / .9),0 24px 48px -26px rgb(40 36 70 / .45);
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow-card:var(--card-shadow);--elev:0 28px 60px -28px rgb(40 36 70 / .5);
}
:root[data-theme="dark"]{
  --ground:#17161a;--ground-2:#1d1c21;--glow:#4a3a12;
  --ink:#f4f3ee;--ink-2:#cfcdc6;--ink-3:#a7a49c;--line:rgb(244 243 238 / .08);--line-2:rgb(244 243 238 / .16);
  --honey-ink:#f2c14e;--honey-soft:rgb(242 193 78 / .22);
  --paper:var(--ground);--card:rgb(36 35 40 / .78);--card-2:#26252a;--well:#2b2a30;
  --cta-ink:#17161a;--btn-ink:#17161a;--btn-hover:#fff;
  --s1:#f4f3ee;--s4:#6f6a5c;
  --good:#6cc28f;--good-ink:#7fd3a0;--good-soft:#18271e;--warn-ink:#f0c26b;--warn-soft:#2c2414;--crit:#f08a5d;--crit-ink:#f5a07a;--crit-soft:#2e1d15;
  --card-shadow:inset 0 1px 0 rgb(255 255 255 / .05),0 18px 40px -26px rgb(0 0 0 / .7);
  --card-shadow-hover:inset 0 1px 0 rgb(255 255 255 / .07),0 24px 48px -26px rgb(0 0 0 / .8);
}

/* Ground: warm greige with a honey glow in the top corner. */
html,body{background:var(--ground)}
body{font-family:var(--font);color:var(--ink);letter-spacing:0;
  background:radial-gradient(900px 520px at 100% 0%,color-mix(in srgb,var(--glow) 55%,transparent),transparent 62%),var(--ground);background-attachment:fixed}
::selection{background:var(--honey-soft)}
input,textarea{caret-color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:10px}
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
h1,h2,h3,.top h1,.panel-h h2{font-family:var(--font-h);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.num,td.n,th.n,.vl,.cf-fig>b,.dl b,.dl em,.strip .vl,.hb-v,.dchip .num,.statement .lead .num,.nc,.dock-tot b,tfoot .num,.kpi-v,.rate,.delta .num,.tabs .count,.donut .dc b{font-family:var(--font-num)!important;font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
th.n{font-family:var(--font)!important}
.app .main,.app .scroll{background:transparent}

/* Sidebar: a lighter panel of the ground, the current page as a dark pill, counts as honey dots. */
.app .side,.side{background:rgb(255 254 250 / .38)!important;border-inline-end:1px solid var(--line);box-shadow:none;backdrop-filter:none}
.side .logo{font-family:var(--font-h);font-weight:700;font-size:20px;color:var(--ink)}
.side .mark{border-radius:10px;box-shadow:none;background:var(--honey)!important}
.nav .ng{font-size:12px;font-weight:500;color:var(--ink-3);padding:18px 12px 6px}
.nav button{border-radius:12px;color:var(--ink-2);font-weight:500;min-height:42px;padding:9px 12px;transition:background-color .22s ease,color .22s ease}
.nav button:hover{background:rgb(31 31 36 / .05);color:var(--ink);transform:none}
.nav button.on{background:var(--ink);color:#f4f3ee;font-weight:600;box-shadow:0 10px 20px -14px rgb(31 31 36 / .6)}
:root[data-theme="dark"] .nav button.on{color:#17161a}
.nav button.on svg{color:inherit;opacity:1}
.nav button .nc{background:var(--honey);color:var(--ink);font-weight:700;font-size:11px;min-width:20px;height:20px;line-height:20px;text-align:center;padding:0 6px;border-radius:999px}
.nav button.on .nc{background:var(--honey);color:var(--ink)}
.side-foot{border-top:1px solid var(--line)}
.avatar{background:var(--honey)!important;color:var(--ink)!important;border-radius:50%}

/* Top bar: transparent on the ground, title in the display face. */
.app .top{background:transparent;border-bottom:0;box-shadow:none}
.top h1{font-size:30px;font-weight:700;letter-spacing:-.02em}
.gsearch{background:var(--card);border:1px solid rgb(255 255 255 / .9);border-radius:14px;box-shadow:var(--card-shadow)}
.live{background:var(--card)!important;border:1px solid rgb(255 255 255 / .9)!important;border-radius:14px!important;box-shadow:var(--card-shadow)!important;color:var(--ink-3)}
.live svg.seal{display:none}
.live>svg:not(.seal){display:inline-block;color:var(--good)}
.live.bad>svg:not(.seal),.live.bad #liveText{color:var(--crit)}

/* Buttons: dark pill primary, white secondary, 12px corners. */
.btn{border-radius:12px;border:1px solid var(--line-2);background:rgb(255 255 255 / .7);color:var(--ink);font-weight:600;box-shadow:none;transition:background-color .22s ease,border-color .22s ease,transform .28s var(--ease)}
:root[data-theme="dark"] .btn{background:var(--card-2)}
.btn:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn.primary{background:var(--ink);color:var(--btn-ink);border-color:var(--ink)}
.btn.primary:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn.on{background:var(--ink);color:var(--btn-ink);border-color:var(--ink)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.danger{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 40%,transparent)}
input,select,textarea,.filter-bar input:not([type=checkbox]),.filter-bar select{border-radius:12px!important;border:1px solid var(--line-2);background:rgb(255 255 255 / .7);color:var(--ink)}
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea{background:var(--card-2)}
input:focus,select:focus,textarea:focus{border-color:var(--ink)!important;box-shadow:0 0 0 3px rgb(31 31 36 / .08)!important}
.seg{background:rgb(31 31 36 / .06);border:0;border-radius:12px;padding:3px}
.seg button{border-radius:9px;color:var(--ink-2);font-weight:600;transition:background-color .22s ease,color .22s ease}
.seg button.on,:root[data-theme="dark"] .seg button.on{background:var(--ink);color:var(--btn-ink)}
.fb-n{background:var(--honey);color:var(--ink)}

/* Cards: translucent warm white, 24px corners, a white rim and a soft low shadow. */
.app .panel,.app .kpi,.app .kpi.lead,.app .kpi.hero,.app .strip .cell,.app .filter-bar,.app .more-block,.app .statement{background:var(--card)!important;border:.8px solid rgb(255 255 255 / .9)!important;border-radius:24px!important;box-shadow:var(--card-shadow)!important;backdrop-filter:none}
:root[data-theme="dark"] .app .panel,:root[data-theme="dark"] .app .kpi,:root[data-theme="dark"] .app .strip .cell,:root[data-theme="dark"] .app .filter-bar,:root[data-theme="dark"] .app .more-block,:root[data-theme="dark"] .app .statement{border-color:rgb(255 255 255 / .06)!important}
.app .kpi,.app .panel,.app .strip .cell{transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.app .kpi:hover,.app .strip .cell.click:hover{transform:translateY(-2px);box-shadow:var(--card-shadow-hover)!important}
.app .kpi.lead::after{display:none}
.app .kpis{gap:14px!important;background:none;border:0}
.app .strip{gap:14px;background:none;border:0}
.app .kpi{padding:18px 20px}
.app .kpi .kpi-l{font-size:14px;font-weight:600;color:var(--ink-2)}
.app .kpi .kpi-v,.app .kpi.lead .kpi-v{font-weight:600!important;letter-spacing:-.03em;font-size:min(30px,12cqi)}
.app .kpi.lead .kpi-v{font-size:min(40px,14cqi)}
.app .kpi .kpi-s{color:var(--ink-3)}
.kpi-v>.money:only-child::after,.strip .vl>.money:only-child::after{font-family:var(--font);font-weight:500;color:var(--ink-3)}
.strip .vl{font-weight:600!important;letter-spacing:-.03em}
.statement .lead{font-family:var(--font-h);font-weight:600!important;letter-spacing:-.02em}
.statement .lead .num{color:var(--ink);border-bottom:3px solid var(--honey)}
.cf-fig>b,.cf-fig b.num{font-weight:600!important;letter-spacing:-.03em}
.cf-figs{border-color:var(--line)}
.panel-h h2{font-size:18px}
.panel-h p{color:var(--ink-3)}
.app .filter-bar{padding:16px 18px}
.page-actions{justify-content:flex-start}

/* Tabs: a segmented pill strip. */
.app .tabs{background:rgb(31 31 36 / .06)!important;border:0!important;border-radius:14px!important;padding:4px!important;box-shadow:none!important;gap:2px}
.tabs button{border-radius:10px;border-bottom:0!important;color:var(--ink-2);font-weight:600;padding:8px 14px;transition:background-color .22s ease,color .22s ease}
.tabs button.on{background:var(--ink);color:var(--btn-ink)}
.tabs button.on::after{display:none}
.tabs .count{background:rgb(31 31 36 / .08);color:var(--ink-2);border-radius:999px;font-weight:600}
.tabs button.on .count{background:var(--honey);color:var(--ink)}

/* Tables inside cards: quiet header, soft row lines. */
th{background:transparent;color:var(--ink-3);font-weight:600;font-size:12px;border-bottom:1px solid var(--line-2)}
td{border-bottom:1px solid var(--line)}
tbody tr{transition:background-color .22s ease}
tbody tr:hover{background:rgb(242 193 78 / .12)}
tfoot td{border-top:1px solid var(--line-2)}
.tag{border-radius:999px;border:0;background:rgb(31 31 36 / .07);color:var(--ink-2);font-weight:600}
.tag.good{background:var(--good-soft);color:var(--good-ink)}
.tag.bad{background:var(--crit-soft);color:var(--crit-ink)}
.tag.warn{background:var(--warn-soft);color:var(--warn-ink)}
.chip,.fchip{border-radius:999px;background:var(--card);border:1px solid rgb(255 255 255 / .9);box-shadow:var(--card-shadow)}
.dchip{border-radius:999px}
.dchip.good{background:transparent;color:var(--good-ink)}
.dchip.bad{background:transparent;color:var(--crit-ink)}

/* Notes: soft tinted cards, no side stripe. */
.note{border-radius:18px;border:0;box-shadow:none}
.note.warn{background:var(--warn-soft);color:var(--warn-ink)}
.note.bad{background:var(--crit-soft);color:var(--crit-ink)}
.note.info{background:var(--well)}

/* Charts: ink lines over honey fills, bars in honey. */
.chart text{font-family:var(--font);fill:var(--ink-3)}
.hb-t{background:rgb(31 31 36 / .07);border-radius:999px}.hb-t i{border-radius:999px}
.tbar{border-radius:999px}.tbar i:first-child{border-start-start-radius:999px;border-end-start-radius:999px}

/* Dialogs, drawers and search results share the card language. */
dialog,.drawer,.dock,.gs-results{border-radius:24px!important;border:.8px solid rgb(255 255 255 / .9)!important;background:color-mix(in srgb,var(--ground) 40%,#fffefa)!important;box-shadow:var(--elev)!important}
:root[data-theme="dark"] dialog,:root[data-theme="dark"] .drawer,:root[data-theme="dark"] .dock,:root[data-theme="dark"] .gs-results{background:var(--card-2)!important;border-color:rgb(255 255 255 / .06)!important}
.toast{border-radius:14px}

/* Motion: one entrance per page view, cards rise into place with a quick ease-out from an almost-there start. */
@media (prefers-reduced-motion:no-preference){
  .page>*,#results>*{animation:rise .5s var(--ease) both}
  .page>*:nth-child(2),#results>*:nth-child(2){animation-delay:.04s}
  .page>*:nth-child(3),#results>*:nth-child(3){animation-delay:.08s}
  .page>*:nth-child(4),#results>*:nth-child(4){animation-delay:.12s}
  .page>*:nth-child(n+5),#results>*:nth-child(n+5){animation-delay:.16s}
  .page.loading>*{animation:none}
}
@keyframes rise{from{opacity:.35;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:960px){
  .app .side{background:var(--ground)!important}
  .top h1{font-size:24px}
  .app .kpi{border-radius:20px!important}
}

/* Sign-in: the same ground and card language. */
.auth{background:transparent!important}
.auth-fx,.auth-orbit,.auth-orb,.auth-spark,.auth-kicker{display:none!important}
.auth-brand{background:transparent!important;color:var(--ink)!important}
.auth-bolt{animation:none!important}
.auth-bolt .mark,.auth-logo .mark{background:var(--honey)!important;border-radius:22px!important;box-shadow:var(--card-shadow)!important}
.auth-bolt .mark svg path,.auth-logo .mark svg path{fill:var(--ink)}
.auth-logo .mark{border-radius:10px!important}
.auth-brand-copy h1,.auth-word{color:var(--ink)!important;font-family:var(--font-h)!important;font-weight:700!important;letter-spacing:-.02em;background:none!important;-webkit-text-fill-color:currentColor}
.auth-word.accent{color:var(--ink)!important;box-shadow:inset 0 -.32em 0 var(--honey-soft)}
.auth-lead{color:var(--ink-2)!important}
.auth-pills li{background:var(--card)!important;border:1px solid rgb(255 255 255 / .9)!important;border-radius:999px!important;color:var(--ink-2)!important;box-shadow:var(--card-shadow)}
.auth-card{background:var(--card)!important;border:.8px solid rgb(255 255 255 / .9)!important;border-radius:24px!important;box-shadow:var(--card-shadow)!important;backdrop-filter:none!important}
.auth-card h2{font-family:var(--font-h);font-weight:700;color:var(--ink)}
.auth-card p,.auth-secure,.auth-help{color:var(--ink-3)!important}
.auth-go{background:var(--ink)!important;color:var(--btn-ink)!important;border:0!important;border-radius:14px!important;box-shadow:none!important}
.auth-go:hover{background:var(--btn-hover)!important}
.auth-go.busy{opacity:.75}
.auth-lang{border-radius:12px!important}
.pw button{border-radius:10px;background:rgb(31 31 36 / .06);border:0}

/* ---------- Overview: one hero figure with its trend, four small reads, then three short analyses ---------- */
.ov-top{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px}
.ov-hero{padding:20px 22px 8px!important}
.ov-hero-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ov-hero-h h2{font-size:16px;color:var(--ink-2);font-weight:600;margin:0}
.ov-hero-v{display:flex;align-items:baseline;gap:10px;margin:6px 0 2px;flex-wrap:wrap}
.ov-hero-v b{font:600 clamp(36px,3.4vw,48px)/1.05 var(--font-num);letter-spacing:-.035em;color:var(--ink)}
.ov-hero-v>span{font-size:15px;color:var(--ink-3);font-weight:500}
.ov-hero-h p{margin:2px 0 0;color:var(--ink-3);font-size:14px}
.ov-hero-h p b{color:var(--crit-ink)}
.ov-hero .chart{padding-inline:0}
.ov-minis{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ov-mini{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border-radius:24px;background:var(--card);border:.8px solid rgb(255 255 255 / .9);box-shadow:var(--card-shadow);color:var(--ink);text-decoration:none;min-width:0;transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
:root[data-theme="dark"] .ov-mini{border-color:rgb(255 255 255 / .06)}
.ov-mini:hover{transform:translateY(-2px);box-shadow:var(--card-shadow-hover)}
.ov-mini-l{font-size:14px;font-weight:600;color:var(--ink-2)}
.ov-mini-v{font:600 clamp(24px,2.1vw,30px)/1.15 var(--font-num);letter-spacing:-.03em;margin-top:4px}
.ov-mini-s{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);flex-wrap:wrap}
.ov-mini-s .hot{color:var(--crit-ink);font-weight:600}
.ov-mini .spk{width:100%;height:38px;margin-top:auto;padding-top:8px;opacity:1}
.ov-mini .spk polyline{stroke:var(--ink)}
.ov-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ov-row2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px}
.ov-row3 .panel,.ov-row2 .panel{padding-bottom:18px}
.ov-row3 .panel>*:not(.panel-h),.ov-row2 .panel>*:not(.panel-h){margin-inline:20px}
.ov-link{font-size:13px;font-weight:600;color:var(--honey-ink);text-decoration:none}
.ov-link:hover{text-decoration:underline;text-underline-offset:3px}
.ov-stack{display:flex;height:14px;border-radius:999px;overflow:hidden;gap:3px;margin-top:4px}
.ov-stack i{display:block;background:var(--c);border-radius:999px;min-width:6px}
.ov-legend{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.ov-legend li{display:grid;grid-template-columns:12px 1fr auto 42px;gap:10px;align-items:center;font-size:14px}
.ov-legend li i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.ov-legend b{font-weight:600}
.ov-legend em{font-style:normal;color:var(--ink-3);font-size:13px;text-align:end}
.ov-big{display:flex;align-items:baseline;gap:10px;margin-top:2px}
.ov-big b{font:600 44px/1 var(--font-num);letter-spacing:-.035em;color:var(--crit-ink)}
.ov-big span{font-size:14px;color:var(--ink-2);max-width:22ch;line-height:1.4}
.ov-meter{height:10px;border-radius:999px;background:rgb(31 31 36 / .07);overflow:hidden;margin-top:16px}
.ov-meter i{display:block;height:100%;border-radius:999px;background:var(--honey)}
.ov-pair{display:flex;justify-content:space-between;margin-top:12px;font-size:14px;color:var(--ink-3)}
.ov-pair b{color:var(--ink);font-weight:600}
.ov-ages{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:11px}
.ov-ages li{display:grid;grid-template-columns:96px 1fr 56px;gap:10px;align-items:center;font-size:13px;color:var(--ink-3)}
.ov-ages b{color:var(--ink);font-weight:600;text-align:end}
.ov-agebar{height:8px;border-radius:999px;background:rgb(31 31 36 / .07);overflow:hidden}
.ov-agebar i{display:block;height:100%;border-radius:999px;background:var(--honey)}
.ov-agebar i.old{background:var(--ink)}
.ov-rank{list-style:none;margin:0;padding:0}
.ov-rank li{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line);cursor:pointer;border-radius:12px;transition:background-color .22s ease}
.ov-rank li:first-child{border-top:0}
.ov-rank li:hover{background:rgb(242 193 78 / .12)}
.ov-rank-i{color:var(--ink-3);font-size:13px;text-align:center}
.ov-rank-n{display:flex;flex-direction:column;gap:2px;min-width:0;font-weight:600;font-size:14px}
.ov-rank-n small{font-weight:400;color:var(--ink-3);font-size:12px}
.ov-rank-bar{height:5px;border-radius:999px;background:rgb(31 31 36 / .06);overflow:hidden;margin-top:4px}
.ov-rank-bar i{display:block;height:100%;border-radius:999px;background:var(--honey)}
.ov-rank b{font-weight:600;font-size:15px}
.ov-rank li.off .ov-rank-n{color:var(--ink-2)}
.ov-rank li.off .ov-rank-bar i{background:var(--crit)}
@media (max-width:1180px){.ov-top{grid-template-columns:1fr}.ov-row3{grid-template-columns:1fr 1fr}.ov-row3 .panel:last-child{grid-column:1/-1}}
@media (max-width:760px){.ov-row3,.ov-row2{grid-template-columns:1fr}.ov-row3 .panel:last-child{grid-column:auto}.ov-minis{gap:10px}.ov-mini{padding:14px;border-radius:20px}}
.who{font-size:13px;color:var(--ink-2);font-weight:500;direction:ltr;unicode-bidi:isolate}.who.muted{color:var(--ink-3);direction:inherit}

/* ---------- Courier details (v140): one summary card, compact tabs, a running-balance read, calm motion ---------- */
.drawer{width:min(1080px,96vw);--dx:-28px}
:root[dir="ltr"] .drawer{--dx:28px}
.drawer-h{background:transparent!important;border-bottom:1px solid var(--line);padding:22px 28px 18px;align-items:center;gap:16px}
.drawer-h .avatar{width:52px;height:52px;font:600 16px/1 var(--font-h)}
.dh-id{flex:1;min-width:0}
.dh-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dh-name h2{font:700 22px/1.2 var(--font-h)!important;letter-spacing:-.02em;margin:0}
.dh-meta{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0}
.dh-meta div{display:flex;gap:6px;align-items:baseline;padding:4px 11px;border-radius:999px;background:rgb(31 31 36 / .05);font-size:12.5px}
.dh-meta dt{color:var(--ink-3)}.dh-meta dd{margin:0;font-weight:600;color:var(--ink)}
:root[data-theme="dark"] .dh-meta div{background:rgb(255 255 255 / .06)}
.drawer-b{padding:22px 28px 48px;gap:16px}

.dsum{display:grid;grid-template-columns:minmax(230px,.85fr) minmax(0,2.15fr);gap:6px;padding:6px;border-radius:24px;background:var(--card);border:.8px solid rgb(255 255 255 / .9);box-shadow:var(--card-shadow)}
.dsum-total{background:var(--ink);color:var(--cta-ink);border-radius:19px;padding:18px 22px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.dsum-total>span{font-size:13.5px;opacity:.72;font-weight:500}
.dsum-total b{font:600 34px/1 var(--font-num);letter-spacing:-.035em;color:var(--honey)}
.dsum-total small{font-size:13px;opacity:.6;margin-inline-start:6px}
.dsum-parts{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px}
.dsum-part{all:unset;box-sizing:border-box;cursor:pointer;padding:16px 18px 14px;border-radius:18px;display:flex;flex-direction:column;gap:6px;min-width:0;transition:background-color .28s var(--ease)}
.dsum-part:hover{background:rgb(242 193 78 / .13)}
.dsum-part.on{background:rgb(31 31 36 / .045)}
.dsum-part:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.dsum-part span{font-size:13px;color:var(--ink-3);font-weight:500}
.dsum-part b{font:600 22px/1.1 var(--font-num);letter-spacing:-.025em;color:var(--ink)}
.dsum-part.credit b{color:var(--good-ink)}
.dsum-bar{display:block;height:4px;border-radius:999px;background:rgb(31 31 36 / .07);overflow:hidden;margin-top:6px}
.dsum-bar>i{display:block;height:100%;width:var(--w);background:var(--honey);border-radius:999px;transform-origin:right}
:root[dir="ltr"] .dsum-bar>i{transform-origin:left}

.dtabs{display:inline-flex;align-self:flex-start;gap:4px;padding:4px;border-radius:999px;background:rgb(31 31 36 / .06)}
:root[data-theme="dark"] .dtabs{background:rgb(255 255 255 / .06)}
.dtabs button{all:unset;cursor:pointer;padding:8px 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-2);transition:background-color .28s var(--ease),color .28s var(--ease)}
.dtabs button:hover{color:var(--ink)}
.dtabs button.on{background:var(--ink);color:var(--cta-ink)}
.dtabs button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.dpane{display:flex;flex-direction:column;gap:16px}

.dled{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:14px}
.dled-stats,.dled-chart{border-radius:24px;background:var(--card);border:.8px solid rgb(255 255 255 / .9);box-shadow:var(--card-shadow)}
:root[data-theme="dark"] .dsum,:root[data-theme="dark"] .dled-stats,:root[data-theme="dark"] .dled-chart{border-color:rgb(255 255 255 / .06)}
.dled-stats{display:grid;gap:2px;padding:6px;align-content:center}
.dled-s{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 16px;border-radius:18px}
.dled-s span{font-size:13.5px;color:var(--ink-3)}
.dled-s b{font:600 18px/1.2 var(--font-num);letter-spacing:-.02em;color:var(--ink)}
.dled-s.good b,.dled-s.credit b{color:var(--good-ink)}
.dled-s.strong{background:rgb(242 193 78 / .2)}
.dled-s.strong b{font-size:22px}
.dled-chart{margin:0;padding:16px 18px 14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.dled-chart figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px;color:var(--ink-2);font-weight:600}
.dled-chart small{font-size:12.5px;font-weight:400;color:var(--ink-3)}
.dled-chart small b{color:var(--ink-2);font-weight:600}
.dled-chart svg{width:100%;height:112px;display:block;overflow:visible}
.dled-chart .area{fill:var(--honey);opacity:.26}
.dled-chart .ln{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.dled-chart .zero-l{stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}

@media (prefers-reduced-motion:no-preference){
  .drawer:not(.hidden){animation:drawer-in .46s var(--ease) both}
  .drawer.leaving{animation:drawer-out .24s cubic-bezier(.4,0,1,1) both}
  .shade:not(.hidden){animation:shade-in .4s ease both}
  .shade.leaving{animation:shade-out .24s ease both}
  .drawer.enter .drawer-h,.drawer.enter .drawer-b>*{animation:rise .6s var(--ease) both}
  .drawer.enter .drawer-h{animation-delay:.06s}
  .drawer.enter .drawer-b>*:nth-child(1){animation-delay:.1s}
  .drawer.enter .drawer-b>*:nth-child(2){animation-delay:.15s}
  .drawer.enter .drawer-b>*:nth-child(n+3){animation-delay:.2s}
  .drawer:not(.enter) .dpane{animation:pane-in .34s var(--ease) both}
  .dsum-bar>i{animation:grow .9s var(--ease) .3s both}
  .dled-chart svg{animation:wipe 1.1s var(--ease) .2s both}
  .dled-chart .area{animation:area-in .9s ease .45s both}
  .dsum-part,.dled-s{transition:background-color .28s var(--ease),transform .28s var(--ease)}
  .dsum-part:hover{transform:translateY(-1px)}
}
@keyframes drawer-in{from{opacity:0;transform:translateX(var(--dx))}to{opacity:1;transform:none}}
@keyframes drawer-out{to{opacity:0;transform:translateX(calc(var(--dx) * .6))}}
@keyframes shade-in{from{opacity:0}}
@keyframes shade-out{to{opacity:0}}
@keyframes pane-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
@keyframes wipe{from{clip-path:inset(-4px 100% -4px 0)}to{clip-path:inset(-4px 0 -4px 0)}}
@keyframes area-in{from{opacity:0}}

@media (max-width:860px){
  .drawer{width:100vw;border-radius:0!important}
  .drawer-h{padding:16px 16px 14px;flex-wrap:wrap}
  .drawer-h .actions{width:100%;justify-content:flex-start}
  .drawer-b{padding:16px 16px 40px}
  .dsum{grid-template-columns:1fr}
  .dsum-parts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dled{grid-template-columns:1fr}
  .dtabs{max-width:100%;overflow-x:auto}
}
/* Ledger rows in the courier details: deductions read green, credit balances too; the attach control stays quiet until the row is hovered. */
.drawer td .cr{color:var(--good-ink)}
.drawer td b.credit{color:var(--good-ink)}
.drawer .btn.attach:not(.has){background:transparent!important;border-color:transparent!important;color:var(--ink-3)!important;opacity:.55;transition:opacity .22s ease,background-color .22s ease}
.drawer tr:hover .btn.attach,.drawer .btn.attach:focus-visible{opacity:1;background:var(--card)!important;border-color:var(--line-2)!important}
.drawer-b>*{flex-shrink:0}
:root[data-theme="dark"] .dsum-total{background:#0e0d10;color:var(--ink)}
:root[data-theme="dark"] .dsum-part.on{background:rgb(255 255 255 / .05)}
:root[data-theme="dark"] .dsum-bar,:root[data-theme="dark"] .dled-chart .zero-l{background:rgb(255 255 255 / .08)}
:root[data-theme="dark"] .dtabs button.on{background:var(--honey);color:#17161a}
:root[data-theme="dark"] .btn.primary{background:var(--honey)!important;color:#17161a!important;border-color:var(--honey)!important}
:root[data-theme="dark"] .btn.primary:hover{background:#f6cf6e!important}

/* ======================================================================
   v150 Inner pages: one figure row per page, meaning-coded colour, pill tabs.
   Honey = loans and the lead read · clay = accidents and risk ·
   sage = deductions and good news · slate = plans and info.
   ====================================================================== */
:root{
  --clay:#b8582f;--clay-soft:#f6e3d8;--sage:#2f7d57;--sage-soft:#e0eee5;--slate:#4d6a8a;--slate-soft:#e2e9f1;
  --crit:var(--clay);--crit-ink:#a24a24;--crit-soft:var(--clay-soft);
  --good:var(--sage);--good-ink:#2a6e4c;--good-soft:var(--sage-soft);
  --s3:var(--sage);--s4:var(--slate);
}
:root[data-theme="dark"]{--clay:#e48a5f;--clay-soft:#33221a;--sage:#6cc28f;--sage-soft:#18271e;--slate:#8fb0d6;--slate-soft:#1b2430;--crit-ink:#f0a07a;--good-ink:#7fd3a0}

/* Figures: one row; the first is the page's lead read on a dark card, like the courier total. */
.app .kpis:not(.ov){display:flex!important;flex-wrap:wrap;gap:12px!important}
.app .kpis:not(.ov)>.kpi{flex:1 1 150px;min-width:0;padding:16px 18px!important;border-radius:20px!important;row-gap:3px}
.app .kpis:not(.ov)>.kpi:first-child{flex:1.5 1 240px;background:var(--ink)!important;border-color:transparent!important;color:var(--cta-ink)}
.app .kpis:not(.ov)>.kpi:first-child .kpi-l{color:rgb(244 243 238 / .72)}
.app .kpis:not(.ov)>.kpi:first-child .kpi-v{color:var(--honey)!important;font-size:min(32px,13cqi)!important}
.app .kpis:not(.ov)>.kpi:first-child .kpi-s,.app .kpis:not(.ov)>.kpi:first-child .kpi-v>.money:only-child::after{color:rgb(244 243 238 / .6)}
:root[data-theme="dark"] .app .kpis:not(.ov)>.kpi:first-child{background:#0e0d10!important}
:root[data-theme="dark"] .app .kpis:not(.ov)>.kpi:first-child .kpi-l,:root[data-theme="dark"] .app .kpis:not(.ov)>.kpi:first-child .kpi-s{color:var(--ink-3)}
.app .kpis:not(.ov)>.kpi .kpi-v{font-size:min(24px,12cqi)!important}
.app .kpis:not(.ov)>.kpi .kpi-l{font-size:13px!important;font-weight:600}
.app .kpis:not(.ov)>.kpi .kpi-s{font-size:12px}
/* A small colour mark tells what each figure is about. */
.app .kpis:not(.ov)>.kpi:not(:first-child) .kpi-l::before{content:"";display:inline-block;width:8px;height:8px;border-radius:3px;background:var(--honey);margin-inline-end:8px;vertical-align:1px}
.app .kpis:not(.ov)>.kpi.bad .kpi-l::before{background:var(--clay)}
.app .kpis:not(.ov)>.kpi.good .kpi-l::before{background:var(--sage)}
.app .kpis:not(.ov)>.kpi.bad .kpi-v{color:var(--crit-ink)!important}
.app .kpis:not(.ov)>.kpi.good .kpi-v{color:var(--good-ink)!important}

/* Page tabs: the same compact pill as the courier details. */
.app .tabs{display:inline-flex!important;align-self:flex-start;width:auto;max-width:100%;gap:4px;padding:4px!important;border:0!important;border-radius:999px!important;background:rgb(31 31 36 / .06)!important;box-shadow:none!important;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.app .tabs::-webkit-scrollbar{display:none}
:root[data-theme="dark"] .app .tabs{background:rgb(255 255 255 / .06)!important}
.app .tabs button{border:0!important;margin:0!important;padding:8px 16px!important;border-radius:999px!important;font-size:14px!important;font-weight:600!important;color:var(--ink-2)!important;background:none!important;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;transition:background-color .28s var(--ease),color .28s var(--ease)}
.app .tabs button:hover{color:var(--ink)!important}
.app .tabs button.on{background:var(--ink)!important;color:var(--cta-ink)!important}
:root[data-theme="dark"] .app .tabs button.on{background:var(--honey)!important;color:#17161a!important}
.app .tabs .count{margin:0!important;padding:1px 8px!important;border-radius:999px!important;font-size:12px!important;background:rgb(31 31 36 / .07)!important;color:var(--ink-2)!important}
.app .tabs button.on .count{background:var(--honey)!important;color:var(--ink)!important}
:root[data-theme="dark"] .app .tabs button.on .count{background:rgb(0 0 0 / .18)!important;color:#17161a!important}
.app .vstack>.tabs,.app #results>.tabs{margin-block:2px}

/* Tables: tags and months stay on one line; row actions stay quiet until the row is in focus. */
.app td .tag{white-space:nowrap}
.app td{vertical-align:middle}
.app tbody .btn.sm.danger{background:transparent!important;border-color:transparent!important;color:var(--ink-3)!important;opacity:.6;transition:opacity .22s ease,color .22s ease,background-color .22s ease}
.app tbody tr:hover .btn.sm.danger,.app tbody .btn.sm.danger:focus-visible{opacity:1;color:var(--crit-ink)!important;background:var(--clay-soft)!important}
.app .tag.bad,.app .tag.off{background:var(--clay-soft);color:var(--crit-ink)}
.app .tag.good,.app .tag.ok{background:var(--sage-soft);color:var(--good-ink)}

/* Notes: warm, not alarming. */
.app .note.warn{background:color-mix(in srgb,var(--honey) 16%,var(--card))!important;border-color:transparent!important}

/* Charts: plan lines in slate, safety in clay. */
.chart .ref{stroke:var(--clay)!important}.chart .ref-t{fill:var(--crit-ink)!important}
.app .kpis:not(.ov)>.kpi .kpi-v{font-size:min(24px,14.5cqi)!important}
.app .kpis:not(.ov)>.kpi:first-child .kpi-v{font-size:min(34px,14cqi)!important}

/* Collection rate: a sage mark always, the figure only turns green once deductions cover additions. */
.app .kpis:not(.ov)>.kpi.dw .kpi-l::before{background:var(--sage)}
:root[data-theme="dark"] .app .side,:root[data-theme="dark"] .side{background:rgb(255 255 255 / .025)!important}

/* ---------- Charts (v160): quiet grid, smooth lines with a fading fill, a labelled latest point, rounded bars ---------- */
:root{--card-solid:#fffefa}:root[data-theme="dark"]{--card-solid:#26252a}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .grid{stroke:var(--line)!important;stroke-dasharray:2 5;stroke-width:1}
.chart .base{stroke:var(--line-2)!important;stroke-width:1}
.chart text{font-size:11.5px;fill:var(--ink-3)!important;font-family:var(--font)}
.chart .ln{filter:drop-shadow(0 4px 6px rgb(31 31 36 / .12))}
.chart .last-halo{opacity:.16}
.chart .last-t{font-size:12.5px!important;font-weight:700;fill:var(--ink)!important;paint-order:stroke;stroke:var(--card-solid);stroke-width:4px;stroke-linejoin:round}
.chart .bv{font-size:11.5px!important;font-weight:600;fill:var(--ink-2)!important}
.chart .bar-g path{transition:opacity .22s ease}
.chart:hover .bar-g path{opacity:.55}
.chart:hover .bar-g:hover path{opacity:1}
.legend{gap:14px!important}
.legend .sw{border-radius:3px}
@media (prefers-reduced-motion:no-preference){
  .chart .ln{animation:chart-wipe 1s var(--ease) both}
  .chart .area{animation:area-in .9s ease .2s both}
  .chart .bar-g path{transform-box:fill-box;transform-origin:bottom;animation:bar-up .7s var(--ease) both}
  .chart .bar-g:nth-child(odd) path{animation-delay:.04s}
  .chart .last,.chart .last-halo,.chart .last-t,.chart .bv{animation:area-in .5s ease .7s both}
}
@keyframes chart-wipe{from{clip-path:inset(-10px 100% -10px 0)}to{clip-path:inset(-10px 0 -10px 0)}}
@keyframes bar-up{from{transform:scaleY(0)}to{transform:none}}
.ov-mini .spk path{stroke:var(--ink)}
.ov-agebar i.old{background:var(--clay)!important}
.chart.dense .ln,.chart.dense path[stroke-dasharray]{stroke-width:1.4!important;filter:none}
.tw:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:12px}
.ov-rank li:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Row actions and accident papers */
.row-acts{display:inline-flex;gap:4px;white-space:nowrap}
.app tbody .btn.sm.ghost,.drawer tbody .btn.sm.ghost{background:transparent!important;border-color:transparent!important;color:var(--ink-3)!important;transition:color .2s ease,background-color .2s ease}
.app tbody tr:hover .btn.sm.ghost,.drawer tbody tr:hover .btn.sm.ghost,tbody .btn.sm.ghost:focus-visible{color:var(--ink)!important;background:rgb(31 31 36 / .06)!important}
.drawer tbody .btn.sm.danger{background:transparent!important;border-color:transparent!important;color:var(--ink-3)!important;opacity:.6}
.drawer tbody tr:hover .btn.sm.danger{opacity:1;color:var(--crit-ink)!important;background:var(--clay-soft)!important}
.files{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.files a{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:background-color .2s ease,transform .2s var(--ease)}
.files a:hover{background:rgb(242 193 78 / .14);transform:translateY(-1px)}
.files a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.files .fi{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--clay-soft);color:var(--crit-ink);font:700 11px/1 var(--font)}
.files b{display:block;font-weight:600}
.files small{display:block;color:var(--ink-3);font-size:12.5px;direction:ltr;text-align:start;unicode-bidi:isolate}

/* Steady screen: redraws after the first entrance (filters, tabs, background refresh) do not animate,
   and a chart is shown only once it is drawn at its real width. */
.page.calm *,.page.calm>*,.page.calm #results>*{animation:none!important}
.chart:not(.fit) svg{visibility:hidden}

/* Courier status: a dot and a short word, coloured by what the status means for collection. */
.tag.st{display:inline-flex;align-items:center;gap:6px;padding:0 10px 0 9px;border-radius:999px;font-weight:600;white-space:nowrap;line-height:24px;border:1px solid transparent}
.tag.st::before,.st-dot{content:"";display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.st-dot{margin-inline-end:6px;vertical-align:1px}
.tag.st-on{background:var(--sage-soft);color:var(--good-ink)}
.tag.st-away{background:color-mix(in srgb,var(--honey) 22%,transparent);color:var(--honey-ink)}
.tag.st-out{background:rgb(31 31 36 / .06);color:var(--ink-2)}
.tag.st-out::before{background:var(--ink-3)}
.tag.st-risk{background:var(--clay-soft);color:var(--crit-ink)}
.tag.st-unk{background:transparent;color:var(--ink-3);border:1px dashed var(--line-2)}
.tag.st-unk::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.st-dot.st-on{background:var(--sage)}.st-dot.st-away{background:var(--honey)}.st-dot.st-out{background:var(--ink-3)}
.st-dot.st-risk{background:var(--clay)}.st-dot.st-unk{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-3)}
:root[data-theme="dark"] .tag.st-out{background:rgb(255 255 255 / .07)}
:root[data-theme="dark"] .tag.st-away{color:var(--honey)}


/* ======================================================================
   v210 Type system. One family drawn for Arabic, Latin and figures together
   (Vazirmatn, tabular digits by default), so a line never mixes two faces.
   Nine sizes, three weights, no negative tracking, Arabic-friendly leading.
   ====================================================================== */
:root{
  --font:"Vazirmatn",system-ui,"Segoe UI",Tahoma,sans-serif;--font-h:var(--font);--font-num:var(--font);
  --t-meta:12px;--t-label:13px;--t-body:14px;--t-ui:15px;--t-section:18px;--t-figure:22px;--t-page:28px;--t-lead:34px;--t-hero:44px;
}
html,body,button,input,select,textarea,.app *,.drawer *,dialog *,.auth *,.toast,.gs-results *{font-family:var(--font)!important;letter-spacing:0!important}
body{font-size:var(--t-body);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.num,td.n,th.n,.kpi-v,.ov-hero-v b,.ov-mini-v,.ov-big b,.dsum b,.dled-s b,.money{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:normal}
b,strong{font-weight:600}
h1,h2,h3,h4{font-weight:600!important;line-height:1.3;text-wrap:balance}

/* page title and section titles */
.top h1,#title{font-size:var(--t-page)!important;font-weight:600!important;line-height:1.25}
.panel-h h2,.ov-hero-h h2,.dled-chart figcaption,.dlg-h h3,.more-block summary b,.panel-h h3{font-size:var(--t-section)!important;font-weight:600!important}
.drawer-h h2,.dh-name h2{font-size:22px!important;font-weight:600!important}

/* figures */
.ov-hero-v b{font-size:var(--t-hero)!important;font-weight:600!important;line-height:1.1}
.ov-big b{font-size:40px!important;font-weight:600!important}
.app .kpis:not(.ov)>.kpi:first-child .kpi-v,.dsum-total b{font-size:var(--t-lead)!important;font-weight:600!important;line-height:1.15}
.app .kpis:not(.ov)>.kpi .kpi-v,.ov-mini-v,.dsum-part b,.app .kpi .kpi-v{font-size:var(--t-figure)!important;font-weight:600!important;line-height:1.2}
.dled-s b{font-size:18px!important;font-weight:600!important}.dled-s.strong b{font-size:var(--t-figure)!important}
.kpi-v>.money:only-child::after,.v small,.dsum-total small,.ov-hero-v>span{font-size:13px!important;font-weight:500!important}

/* labels, headers, metadata */
.kpi .kpi-l,.ov-mini-l,.dsum-total>span,.dsum-part span,.dled-s span,.dh-meta dt,label.f,.f>span{font-size:var(--t-label)!important;font-weight:500!important}
th,.app th{font-size:var(--t-label)!important;font-weight:500!important;color:var(--ink-3)}
.kpi .kpi-s,.ov-mini-s,.sub,small,.muted,.fine,.dled-chart small,.files small,.who{font-size:var(--t-meta)!important;font-weight:400}
.nav .ng{font-size:var(--t-meta)!important;font-weight:500!important;text-transform:none;letter-spacing:0!important}

/* body of the interface */
td,.app td{font-size:var(--t-body)!important;line-height:1.5}
td b,tfoot td,tfoot .num{font-weight:600!important}
.nav button{font-size:var(--t-ui)!important;font-weight:500!important}
.nav button.on{font-weight:600!important}
.nav button .nc{font-size:var(--t-meta)!important;font-weight:600!important}
.btn,.app .btn{font-size:var(--t-body)!important;font-weight:500!important}
.btn.sm{font-size:var(--t-label)!important}
.tabs button,.dtabs button,.seg button{font-size:var(--t-body)!important;font-weight:500!important}
.tabs button.on,.dtabs button.on{font-weight:600!important}
.tag,.tag.st,.chip{font-size:var(--t-meta)!important;font-weight:500!important}
.chip b{font-weight:600!important}
.note,.note *{font-size:var(--t-body);line-height:1.6}
input,select,textarea{font-size:var(--t-body)!important}
.chart text{font-size:12px!important;font-weight:400}
.chart .last-t,.chart .bv{font-weight:600!important}
.avatar{font-weight:600!important}
@media (max-width:760px){
  :root{--t-page:24px;--t-lead:30px;--t-hero:36px;--t-figure:20px}
}
/* light figures on dark cards read thinner: a touch more weight there */
.app .kpis:not(.ov)>.kpi:first-child .kpi-v,.dsum-total b{-webkit-font-smoothing:auto}
/* stragglers onto the scale; nothing asks for an unloaded weight (no synthesized bold) */
.logo div,.logo b{font-size:20px!important;font-weight:600!important}
.ov-big b{font-size:var(--t-lead)!important}
.cf-fig>b,.strip .vl{font-size:var(--t-figure)!important;font-weight:600!important}
.more-t{font-size:var(--t-ui)!important;font-weight:600!important}
.app *{font-synthesis:none}
.seg button,.seg label{white-space:nowrap}
.when{color:var(--ink-3);white-space:nowrap}

/* Cash flow upload preview */
.cu-head{display:flex;flex-direction:column;gap:4px;margin:0 0 12px;color:var(--ink-2)}
.cu-head>b{font-size:var(--t-ui);color:var(--ink)}
.cu-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px;margin-top:8px}
.cu-grid h4{margin:6px 0 8px;font-size:var(--t-label);color:var(--ink-3);font-weight:500}
.cu-top{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cu-top li{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:12px;background:rgb(31 31 36 / .04)}
.cu-top small{color:var(--ink-3);margin-inline-start:6px}
b.num.pos{color:var(--good-ink)}b.num.neg{color:var(--crit-ink)}
@media (max-width:760px){.cu-grid{grid-template-columns:1fr}}

/* ---------- Cash flow map: the workbook grid ---------- */
.cm-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:0 20px 12px}
.cm-tools .f{min-width:200px}.cm-tools .f.grow{flex:1}
.cm-btns{display:flex;gap:6px}
.cm-legend{display:flex;flex-wrap:wrap;gap:16px;padding:0 20px 12px;font-size:var(--t-meta);color:var(--ink-3)}
.cm-legend span{display:inline-flex;align-items:center;gap:6px}
.cm-legend i{width:14px;height:10px;border-radius:3px;display:inline-block;border:1px solid var(--line-2)}
.cm-legend i.act{background:var(--card-solid)}
.cm-legend i.fc{background:repeating-linear-gradient(135deg,rgb(31 31 36 / .07) 0 3px,transparent 3px 6px)}
.cm-legend i.low{background:var(--clay-soft);border-color:var(--clay)}
.cm-wrap{overflow:auto;max-height:min(72vh,820px);border-top:1px solid var(--line);overscroll-behavior:contain}
.cm-wrap:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.cmap{border-collapse:separate;border-spacing:0;font-size:13px;font-variant-numeric:tabular-nums;min-width:100%}
.cmap th,.cmap td{padding:7px 10px;white-space:nowrap;text-align:end;border-bottom:1px solid var(--line)}
.cmap thead th{position:sticky;top:0;z-index:2;background:color-mix(in srgb,var(--ground) 55%,#fffefa);font-weight:500;color:var(--ink-3);vertical-align:bottom}
.cmap thead th b{display:block;color:var(--ink);font-weight:600;font-size:13px}
.cmap thead th small{font-size:11px;color:var(--ink-3)}
.cmap .cm-name{position:sticky;inset-inline-start:0;z-index:1;text-align:start;background:color-mix(in srgb,var(--ground) 40%,#fffefa);min-width:220px;max-width:260px;overflow:hidden;text-overflow:ellipsis;font-weight:500;color:var(--ink);box-shadow:inset -1px 0 0 var(--line)}
:root[dir="ltr"] .cmap .cm-name{box-shadow:inset 1px 0 0 var(--line)}
.cmap thead .cm-name{z-index:3}
.cmap .cm-total{font-weight:600;background:rgb(31 31 36 / .03)}
.cmap td.fc{background-image:repeating-linear-gradient(135deg,rgb(31 31 36 / .035) 0 3px,transparent 3px 7px)}
.cmap th.fc b{color:var(--ink-2)}
.cmap th.part b::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--honey);margin-inline-start:5px;vertical-align:2px}
.cmap .today{box-shadow:inset 0 0 0 1.5px var(--honey)}
.cmap .z{color:var(--line-2)}
.cm-line .cm-name span{padding-inline-start:28px;display:block;overflow:hidden;text-overflow:ellipsis;font-weight:400;color:var(--ink-2)}
.cm-line td{color:var(--ink-2)}
.cm-line.out td[style]{background-color:color-mix(in srgb,var(--clay) calc(var(--h) * 100%),transparent)}
.cm-line.in td[style]{background-color:color-mix(in srgb,var(--sage) calc(var(--h) * 100%),transparent)}
.cm-line td[style]{color:var(--ink)}
.cm-line:hover th,.cm-line:hover td{box-shadow:inset 0 1px 0 var(--line-2),inset 0 -1px 0 var(--line-2)}
.cm-group th,.cm-group td{font-weight:600;background:rgb(31 31 36 / .045);color:var(--ink)}
.cm-group.out td{color:var(--crit-ink)}.cm-group.in td{color:var(--good-ink)}
.cm-toggle{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:600}
.cm-toggle small{font-weight:500;color:var(--ink-3);background:rgb(31 31 36 / .06);border-radius:999px;padding:0 7px;font-size:11px}
.cm-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .22s var(--ease)}
:root[dir="rtl"] .cm-toggle svg{transform:scaleX(-1)}
.cm-toggle[aria-expanded="true"] svg{transform:rotate(90deg)}
.cm-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.cm-sum th,.cm-sum td{font-weight:600}
.cm-sum.beg td{color:var(--ink-2)}
.cm-sum.net td.neg{color:var(--crit-ink)}.cm-sum.net td.pos{color:var(--good-ink)}
.cm-sum.end th,.cm-sum.end td{border-top:1.5px solid var(--ink);font-size:14px;color:var(--ink)}
.cm-sum.end td.low{background:var(--clay-soft);color:var(--crit-ink)}
:root[data-theme="dark"] .cmap thead th,:root[data-theme="dark"] .cmap .cm-name{background:var(--card-2)}
:root[data-theme="dark"] .cm-group th,:root[data-theme="dark"] .cm-group td{background:rgb(255 255 255 / .05)}
:root[data-theme="dark"] .cm-sum.end th,:root[data-theme="dark"] .cm-sum.end td{border-top-color:var(--ink-2)}
.cmap.day td,.cmap.day th{padding:7px 8px}
@media (max-width:760px){.cmap .cm-name{min-width:150px;max-width:170px}.cm-tools .f{min-width:0;flex:1 1 140px}}
.cm-toggle[aria-expanded="true"] svg{transform:rotate(90deg)!important}
.cmap .cm-name{min-width:260px;max-width:300px;white-space:normal}
.cm-line .cm-name span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;line-height:1.35;unicode-bidi:plaintext;text-align:start}
@media (max-width:760px){.cmap .cm-name{min-width:128px;max-width:140px;font-size:12px}.cm-line .cm-name span{padding-inline-start:10px}.cmap th,.cmap td{padding:6px 7px}}

/* A day cell you can set or move: it only looks clickable where the account is kept by day
   and the person may write, so the affordance never promises something the server refuses. */
.cm-editable td[data-act]{cursor:pointer}
.cm-editable td[data-act]:hover,.cm-editable td[data-act]:focus-visible{outline:2px solid var(--honey);outline-offset:-2px;border-radius:3px}

/* --- cash map ----------------------------------------------------------------
   Read as a map, not a table of numbers that happen to be tinted. The grid is a
   field of colour: five steps a side against one scale, cells with no borders of
   their own so the month reads as terrain, and figures sized to sit under the
   colour rather than compete with it. Clay runs out, sage runs in, and the key
   above the grid is the same five steps so a cell can be matched against it. */

.cm-lede{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  background:var(--line);border-block:1px solid var(--line);margin-bottom:0}
.cm-stat{background:var(--card-2);padding:14px 18px;display:flex;flex-direction:column;gap:3px}
.cm-stat-k{font-size:var(--t-meta);color:var(--ink-3)}
.cm-stat-v{font-size:22px;font-weight:600;color:var(--ink);line-height:1.15;font-variant-numeric:tabular-nums}
.cm-stat-s{font-size:var(--t-meta);color:var(--ink-3)}
.cm-stat.bad .cm-stat-v,.cm-stat.out .cm-stat-v{color:var(--crit-ink)}
.cm-stat.good .cm-stat-v,.cm-stat.in .cm-stat-v{color:var(--good-ink)}
.cm-stat::after{content:"";height:2px;border-radius:2px;margin-top:7px;background:var(--line-2)}
.cm-stat.bad::after,.cm-stat.out::after{background:var(--clay)}
.cm-stat.good::after,.cm-stat.in::after{background:var(--sage)}
.cm-stat-v .money .m-full{display:none}.cm-stat-v .money .m-round{display:inline}


/* The key is the scale itself. */
.cm-legend{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:10px 20px 12px;
  font-size:var(--t-meta);color:var(--ink-3)}
.cm-scale{display:inline-flex;align-items:center;gap:3px}
.cm-scale i{width:20px;height:11px;display:inline-block}
.cm-scale i:first-of-type{border-start-start-radius:3px;border-end-start-radius:3px}
.cm-scale i:last-of-type{border-start-end-radius:3px;border-end-end-radius:3px}
.cm-scale small{margin-inline-start:6px;color:var(--ink-3)}
.cm-key{display:inline-flex;align-items:center;gap:6px}
.cm-key i{width:16px;height:11px;border-radius:3px;display:inline-block;border:1px solid var(--line-2)}
.cm-key.act i{background:var(--card-solid)}
.cm-key.fc i{background:repeating-linear-gradient(135deg,rgb(31 31 36 / .09) 0 3px,transparent 3px 6px)}
.cm-key.low i{background:var(--clay);border-color:var(--clay)}

/* The field. No per-cell borders: the colour is the structure. */
.cm-wrap{overflow:auto;max-height:min(74vh,820px);border-top:1px solid var(--line);overscroll-behavior:contain}
.cmap{border-collapse:separate;border-spacing:0;font-size:12px;font-variant-numeric:tabular-nums;min-width:100%}
.cmap th,.cmap td{padding:0;white-space:nowrap;text-align:center;border:0}
.cmap tbody td{height:30px;min-width:46px}
.cmap thead th{position:sticky;top:0;z-index:2;background:var(--card-2);font-weight:500;
  color:var(--ink-3);padding:7px 6px;vertical-align:bottom;border-bottom:1px solid var(--line-2)}
.cmap thead th b{display:block;color:var(--ink);font-weight:600;font-size:12.5px}
.cmap thead th small{font-size:10px;color:var(--ink-3)}
.cmap .cm-name{position:sticky;inset-inline-start:0;z-index:1;text-align:start;background:var(--card-2);
  min-width:200px;max-width:220px;padding:0 12px;font-weight:500;color:var(--ink);
  box-shadow:inset -1px 0 0 var(--line)}
:root[dir="rtl"] .cmap .cm-name{box-shadow:inset 1px 0 0 var(--line)}
.cmap thead .cm-name{z-index:3}
.cmap .cm-total{font-weight:600;background:var(--well);padding:0 12px;min-width:92px;text-align:end}

/* Five steps a side. */
.cm-line.out td.b0{background:#efe3dc}.cm-line.out td.b1{background:#e6cdc0}
.cm-line.out td.b2{background:#d9ae9b}.cm-line.out td.b3{background:#c78a71}
.cm-line.out td.b4{background:#b2674b;color:#fff}
.cm-line.in td.b0{background:#e4eadf}.cm-line.in td.b1{background:#cfdcc6}
.cm-line.in td.b2{background:#b2c7a4}.cm-line.in td.b3{background:#8fae7c}
.cm-line.in td.b4{background:#6d9158;color:#fff}
.cm-scale i.b0{background:#efe3dc}.cm-scale i.b1{background:#e6cdc0}
.cm-scale i.b2{background:#d9ae9b}.cm-scale i.b3{background:#c78a71}.cm-scale i.b4{background:#b2674b}
.cm-line td.e{color:transparent}
.cm-line td{color:var(--ink);font-size:11.5px}
.cm-line .cm-name span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:400;color:var(--ink-2);padding-inline-start:22px}

/* A planned day is hatched over whatever colour it carries. */
.cmap td.fc{background-image:repeating-linear-gradient(135deg,rgb(255 255 255 / .34) 0 3px,transparent 3px 7px)}
.cmap th.fc b{color:var(--ink-2)}
.cmap td.fc.edge,.cmap th.fc.edge{box-shadow:inset 2px 0 0 var(--ink-3)}
:root[dir="rtl"] .cmap td.fc.edge,:root[dir="rtl"] .cmap th.fc.edge{box-shadow:inset -2px 0 0 var(--ink-3)}

/* Group and total lines keep the table voice, not the field. */
.cm-group th,.cm-group td{font-weight:600;background:var(--well);color:var(--ink);height:32px}
.cm-group.out td{color:var(--crit-ink)}.cm-group.in td{color:var(--good-ink)}
.cm-toggle{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:600}
.cm-toggle small{font-weight:500;color:var(--ink-3);background:rgb(31 31 36 / .07);border-radius:999px;padding:0 7px;font-size:10.5px}
.cm-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .22s var(--ease)}
:root[dir="rtl"] .cm-toggle svg{transform:scaleX(-1)}
.cm-toggle[aria-expanded="true"] svg{transform:rotate(90deg)!important}
.cm-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.cm-sum th,.cm-sum td{font-weight:600;height:32px;background:var(--card-2)}
.cm-sum.beg td{color:var(--ink-2)}
.cm-sum.net td.neg{color:var(--crit-ink)}.cm-sum.net td.pos{color:var(--good-ink)}
.cm-sum.end th,.cm-sum.end td{border-top:1.5px solid var(--ink);font-size:13px;color:var(--ink);height:44px}
.cm-sum.end td.low{color:var(--crit-ink)}

/* The closing balance fills from its baseline, the floor ruled across it. */
.cmap .cm-sum.end td{position:relative;isolation:isolate}
.cmap .cm-sum.end td[style]::before{content:"";position:absolute;inset-inline:1px;bottom:0;z-index:-1;
  height:calc(var(--fill) * 100%);transform-origin:bottom;
  background:linear-gradient(to top,color-mix(in srgb,var(--sage) 50%,transparent),color-mix(in srgb,var(--sage) 16%,transparent))}
.cmap .cm-sum.end td.low[style]::before{background:linear-gradient(to top,color-mix(in srgb,var(--clay) 60%,transparent),color-mix(in srgb,var(--clay) 20%,transparent))}
.cmap .cm-sum.end td[style]::after{content:"";position:absolute;inset-inline:1px;z-index:-1;
  bottom:calc(var(--floor,0) * 100%);border-top:1px dashed color-mix(in srgb,var(--clay) 80%,transparent)}

/* Today, and the day under the pointer. */
.cmap td.today,.cmap th.today{box-shadow:inset 2px 0 0 var(--honey),inset -2px 0 0 var(--honey)}
.cmap thead th.today{box-shadow:inset 2px 0 0 var(--honey),inset -2px 0 0 var(--honey),inset 0 3px 0 var(--honey)}
.cmap thead th.today b{color:var(--honey-ink);font-weight:700}
.cm-line:hover .cm-name{background:color-mix(in srgb,var(--honey) 12%,var(--card-2))}
.cmap[data-hot="0"] tbody [data-c="0"],.cmap[data-hot="1"] tbody [data-c="1"],.cmap[data-hot="2"] tbody [data-c="2"],
.cmap[data-hot="3"] tbody [data-c="3"],.cmap[data-hot="4"] tbody [data-c="4"],.cmap[data-hot="5"] tbody [data-c="5"],
.cmap[data-hot="6"] tbody [data-c="6"],.cmap[data-hot="7"] tbody [data-c="7"],.cmap[data-hot="8"] tbody [data-c="8"],
.cmap[data-hot="9"] tbody [data-c="9"],.cmap[data-hot="10"] tbody [data-c="10"],.cmap[data-hot="11"] tbody [data-c="11"],
.cmap[data-hot="12"] tbody [data-c="12"],.cmap[data-hot="13"] tbody [data-c="13"],.cmap[data-hot="14"] tbody [data-c="14"],
.cmap[data-hot="15"] tbody [data-c="15"],.cmap[data-hot="16"] tbody [data-c="16"],.cmap[data-hot="17"] tbody [data-c="17"],
.cmap[data-hot="18"] tbody [data-c="18"],.cmap[data-hot="19"] tbody [data-c="19"],.cmap[data-hot="20"] tbody [data-c="20"],
.cmap[data-hot="21"] tbody [data-c="21"],.cmap[data-hot="22"] tbody [data-c="22"],.cmap[data-hot="23"] tbody [data-c="23"],
.cmap[data-hot="24"] tbody [data-c="24"],.cmap[data-hot="25"] tbody [data-c="25"],.cmap[data-hot="26"] tbody [data-c="26"],
.cmap[data-hot="27"] tbody [data-c="27"],.cmap[data-hot="28"] tbody [data-c="28"],.cmap[data-hot="29"] tbody [data-c="29"],
.cmap[data-hot="30"] tbody [data-c="30"]{box-shadow:inset 0 0 0 1.5px rgb(31 31 36 / .3)}

.cm-editable td[data-act]{cursor:pointer}
.cm-editable td[data-act]:hover,.cm-editable td[data-act]:focus-visible{
  outline:2px solid var(--ink);outline-offset:-2px;position:relative;z-index:1}

:root[data-theme="dark"] .cmap thead th,:root[data-theme="dark"] .cmap .cm-name,
:root[data-theme="dark"] .cm-sum th,:root[data-theme="dark"] .cm-sum td{background:var(--card-2)}
:root[data-theme="dark"] .cm-group th,:root[data-theme="dark"] .cm-group td{background:rgb(255 255 255 / .05)}
:root[data-theme="dark"] .cm-sum.end th,:root[data-theme="dark"] .cm-sum.end td{border-top-color:var(--ink-2)}

@media (prefers-reduced-motion:no-preference){
  .cm-lede .cm-stat{animation:cm-rise 360ms var(--ease) backwards}
  .cm-lede .cm-stat:nth-child(2){animation-delay:40ms}
  .cm-lede .cm-stat:nth-child(3){animation-delay:80ms}
  .cm-lede .cm-stat:nth-child(4){animation-delay:120ms}
  .cmap tbody tr{animation:cm-rise 200ms var(--ease) backwards}
  .cmap tbody tr:nth-child(-n+24){animation-delay:calc(var(--i,0) * 14ms)}
  .cmap .cm-sum.end td[style]::before{animation:cm-grow 560ms var(--ease) backwards}
  .cm-changed{animation:cm-pulse 560ms var(--ease)}
}
@keyframes cm-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes cm-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes cm-pulse{0%{transform:scale(1)}45%{transform:scale(1.1)}100%{transform:scale(1)}}

@media (max-width:760px){
  .cm-lede{grid-template-columns:repeat(2,1fr)}.cm-stat{padding:11px 13px}.cm-stat-v{font-size:18px}
  .cm-legend{padding-inline:12px}
  .cmap .cm-name{min-width:132px;max-width:142px;padding:0 8px}
  .cmap tbody td{min-width:40px;height:28px}
}

/* --- the day as the unit -----------------------------------------------------
   Measured on the live plan, a month holds 40 accounts against 30 days and about
   one cell in ten carries a figure. A dense field is the wrong instrument for
   that: the eye reads scattered points, not terrain. So the day column carries
   its own weight and its own state, and picking one drops the nine rows in ten
   that have nothing on it. */

/* Each column header says what leaves on that day. */
.cmap thead th .cm-day-out{display:block;font-style:normal;font-size:10px;font-weight:600;
  color:var(--crit-ink);margin-top:2px;min-height:12px;font-variant-numeric:tabular-nums}
.cmap thead th[data-act]{cursor:pointer}
.cmap thead th[data-act]:hover,.cmap thead th[data-act]:focus-visible{background:color-mix(in srgb,var(--honey) 16%,var(--card-2));outline:none}

/* A day whose closing balance falls under the floor, marked the whole way down. */
.cmap th.tight{background:color-mix(in srgb,var(--clay) 17%,var(--card-2))}
.cmap th.tight b,.cmap th.tight .cm-day-out{color:var(--crit-ink)}
.cmap tbody td.tight{box-shadow:inset 1px 0 0 color-mix(in srgb,var(--clay) 45%,transparent),
  inset -1px 0 0 color-mix(in srgb,var(--clay) 45%,transparent)}
.cmap .cm-sum td.tight{background:color-mix(in srgb,var(--clay) 13%,var(--card-2))}
.cmap thead th.tight::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--clay)}
.cmap thead th{position:sticky;top:0}

/* With one day picked, the rest of the month steps back rather than disappearing:
   the shape of the month stays readable while the question is about one column. */
.cmap td.dim,.cmap th.dim{opacity:.26}
.cmap th.dim .cm-day-out{visibility:hidden}

.cm-focus{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 20px;
  background:color-mix(in srgb,var(--honey) 13%,var(--card-2));border-bottom:1px solid var(--line)}
.cm-focus b{font-weight:600;color:var(--ink)}
.cm-focus span{color:var(--ink-3);font-size:var(--t-meta);flex:1;min-width:120px}

@media (max-width:760px){.cm-focus{padding-inline:12px}.cmap thead th .cm-day-out{font-size:9px}}