@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0F1E35;--navy2:#162844;--navy3:#1E3558;
  --green:#1DB954;--green2:#17A348;
  --amber:#F5A623;--red:#E5534B;--blue:#3B82F6;
  --t1:#F0F4F8;--t2:#9BB5CC;--t3:#5C7A96;
  --bg:#F1F5F9;--panel:#fff;--border:#E2EAF0;
  --sw:240px;--th:52px;--bnh:60px;
}
body{font-family:'Inter',sans-serif;background:var(--bg);color:#1A2B3C;min-height:100vh}
/* MOBILE ROLE BAR */
.mob-role-bar{display:none;position:sticky;top:var(--th);left:0;right:0;z-index:100;background:var(--navy2);border-bottom:1px solid var(--navy3);padding:5px 12px;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:-12px -12px 6px -12px}
.mob-role-bar::-webkit-scrollbar{display:none}
.mrb{flex:1;min-width:64px;padding:5px 4px;border-radius:7px;border:none;cursor:pointer;font-size:11px;font-weight:700;font-family:inherit;color:var(--t2);background:var(--navy3);transition:all .2s;text-align:center;white-space:nowrap}
.mrb.active{background:var(--green);color:#fff}
/* merged 640px */

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:10px}

/* TOPBAR */
.topbar{position:fixed;top:0;left:0;right:0;z-index:200;background:var(--navy);height:var(--th);display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--navy3);gap:10px}
.hamburger{display:none;background:none;border:none;cursor:pointer;color:var(--t1);font-size:20px;padding:4px;flex-shrink:0}
.topbar-logo{display:flex;align-items:center;gap:8px}
.topbar-logo .brand{font-size:13px;font-weight:700;color:var(--t1)}
.topbar-logo .sub{font-size:10px;color:var(--t3)}
.freshness{display:flex;align-items:center;gap:6px;background:rgba(29,185,84,.12);border:1px solid rgba(29,185,84,.3);border-radius:20px;padding:4px 10px;font-size:11px;color:#6EE7A0;font-weight:500;white-space:nowrap}
.freshness .dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
.role-switcher{display:flex;gap:3px;background:var(--navy3);border-radius:8px;padding:3px}
.role-btn{padding:4px 9px;border-radius:6px;border:none;cursor:pointer;font-size:11px;font-weight:600;font-family:inherit;color:var(--t2);background:transparent;transition:all .2s}
.role-btn.active{background:var(--green);color:#fff}
.role-btn:hover:not(.active){background:var(--navy2);color:var(--t1)}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--green),#0A8A3C);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}

/* SIDEBAR */
.sidebar-overlay{display:none;position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.5)}
.sidebar-overlay.open{display:block}
.sidebar{position:fixed;left:0;top:var(--th);bottom:0;width:var(--sw);background:var(--navy);display:flex;flex-direction:column;border-right:1px solid var(--navy3);overflow-y:auto;z-index:160;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.nav-section{padding:14px 12px 4px}
.nav-label{font-size:9.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1px;padding:0 8px;margin-bottom:4px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;color:var(--t2);font-size:13px;font-weight:500;transition:all .15s;margin-bottom:2px}
a.nav-item{text-decoration:none;color:var(--t2)}
a.nav-item:hover{color:var(--t1)}
a.nav-item.active{color:var(--green)}
.nav-item:hover{background:var(--navy2);color:var(--t1)}
.nav-item.active{background:rgba(29,185,84,.15);color:var(--green)}
.nav-item .icon{font-size:16px;width:20px;text-align:center;flex-shrink:0}
.nav-item .nbadge{margin-left:auto;background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px}
.sidebar-footer{margin-top:auto;padding:12px;border-top:1px solid var(--navy3)}
.sidebar-user{display:flex;align-items:center;gap:10px}
.sidebar-user .name{font-size:12px;font-weight:600;color:var(--t1)}
.sidebar-user .role-tag{font-size:10px;color:var(--t3)}

/* BOTTOM NAV */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:140;background:var(--navy);border-top:1px solid var(--navy3);height:var(--bnh);padding:0 4px env(safe-area-inset-bottom);justify-content:space-around;align-items:center}
.bn-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 8px;border-radius:10px;cursor:pointer;color:var(--t3);transition:all .15s;flex:1;min-width:0}
.bn-item.active{color:var(--green)}
.bn-icon{font-size:18px;position:relative}
.bn-label{font-size:9px;font-weight:600;text-align:center;white-space:nowrap}
.bn-badge::after{content:attr(data-count);position:absolute;top:-4px;right:-8px;background:var(--red);color:#fff;font-size:9px;font-weight:700;padding:0 4px;border-radius:8px;min-width:14px;text-align:center}

/* MAIN */
.main{margin-left:var(--sw);margin-top:var(--th);padding:22px;min-height:calc(100vh - var(--th))}
.view{display:none}
.view.active{display:block}

/* PAGE HEADER */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.page-title{font-size:22px;font-weight:800;color:#0F1E35}
.page-sub{font-size:13px;color:var(--t3);margin-top:3px}
.header-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-size:13px;font-weight:600;font-family:inherit;transition:all .15s;white-space:nowrap}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green2)}
.btn-ghost{background:#fff;color:#1A2B3C;border:1.5px solid var(--border)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}

/* KPI CARDS */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.kpi-card{background:var(--panel);border-radius:12px;padding:18px;border:1.5px solid var(--border);position:relative;overflow:hidden}
.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.kpi-card.green::before{background:var(--green)}
.kpi-card.amber::before{background:var(--amber)}
.kpi-card.red::before{background:var(--red)}
.kpi-card.blue::before{background:var(--blue)}
.kpi-label{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px}
.kpi-value{font-size:24px;font-weight:800;color:#0F1E35;line-height:1}
.kpi-value .cur{font-size:13px;font-weight:600;color:var(--t3);margin-right:2px}
.kpi-trend{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:11px;font-weight:500}
.kpi-trend.up{color:var(--green)}.kpi-trend.down{color:var(--red)}.kpi-trend.neutral{color:var(--t3)}
.kpi-sub{font-size:10px;color:var(--t3);margin-top:3px}

/* GRIDS */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.g3{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:16px}

/* PANELS */
.panel{background:var(--panel);border-radius:12px;border:1.5px solid var(--border);overflow:hidden;margin-bottom:16px}
.panel-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);gap:8px;flex-wrap:wrap}
.panel-title{font-size:14px;font-weight:700;color:#0F1E35}
.panel-body{padding:16px 18px}

/* TABS */
.tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:20px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:10px 16px;font-size:13px;font-weight:600;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;white-space:nowrap;flex-shrink:0}
.tab.active{color:var(--green);border-bottom-color:var(--green)}
.tab:hover:not(.active){color:#1A2B3C}
.tab-content{display:none}
.tab-content.active{display:block}

/* TABLE */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dt{width:100%;border-collapse:collapse;min-width:460px}
.dt th{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;padding:0 12px 10px;text-align:left;white-space:nowrap}
.dt td{font-size:13px;padding:9px 12px;border-top:1px solid var(--border);color:#1A2B3C}
.dt tr:hover td{background:#F8FAFB}
.dt .amt{font-weight:700;font-variant-numeric:tabular-nums}
.dt .r{text-align:right}

/* BADGES */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.bg{background:#DCFCE7;color:#166534}.ba{background:#FEF3C7;color:#92400E}
.br{background:#FEE2E2;color:#991B1B}.bb{background:#DBEAFE;color:#1E40AF}.bk{background:#F1F5F9;color:#475569}

/* PROGRESS */
.pw{background:#E2EAF0;border-radius:4px;height:6px;overflow:hidden}
.pb{height:100%;border-radius:4px;transition:width .6s ease}
.pb.g{background:var(--green)}.pb.a{background:var(--amber)}.pb.r{background:var(--red)}.pb.b{background:var(--blue)}

/* AI CHAT */
.ai-wrap{display:flex;flex-direction:column;height:300px}
.ai-msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-bottom:8px}
.msg{max-width:85%;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.5}
.msg-ai{background:#F1F5F9;color:#1A2B3C;border-bottom-left-radius:4px;align-self:flex-start}
.msg-ai .lbl{font-size:10px;font-weight:700;color:var(--green);margin-bottom:4px;letter-spacing:.5px}
.msg-user{background:var(--green);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.ai-row{display:flex;gap:8px;margin-top:10px}
.ai-inp{flex:1;padding:10px 14px;border-radius:8px;border:1.5px solid var(--border);font-family:inherit;font-size:13px;outline:none;min-width:0}
.ai-inp:focus{border-color:var(--green)}
.ai-send{padding:10px 16px;background:var(--green);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;flex-shrink:0}

/* AGING */
.aging-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ab{text-align:center;padding:14px 8px;border-radius:8px}
.ab.a1{background:#DCFCE7}.ab.a2{background:#FEF3C7}.ab.a3{background:#FFEDD5}.ab.a4{background:#FEE2E2}
.ab-days{font-size:10px;font-weight:700;margin-bottom:4px}
.a1 .ab-days{color:#166534}.a2 .ab-days{color:#92400E}.a3 .ab-days{color:#9A3412}.a4 .ab-days{color:#991B1B}
.ab-amt{font-size:15px;font-weight:800;color:#0F1E35}
.ab-cnt{font-size:10px;color:var(--t3);margin-top:2px}

/* UPLOAD */
.upload-zone{border:2px dashed var(--border);border-radius:12px;padding:28px 20px;text-align:center;color:var(--t3);cursor:pointer;transition:all .2s}
.upload-zone:hover{border-color:var(--green);color:var(--green);background:rgba(29,185,84,.04)}
.ufc{border:1.5px solid var(--border);background:#FAFBFC;border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:12px;margin-bottom:8px}
.ufc.done{border-color:#DCFCE7;background:#F0FDF4}

/* DAILY GRID */
.daily-grid{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dg{border-collapse:collapse;font-size:11px;white-space:nowrap;min-width:900px}
.dg th{background:var(--navy);color:var(--t1);padding:6px 8px;text-align:center;font-size:10px;font-weight:700;letter-spacing:.3px}
.dg th.dt-col{background:var(--navy2);text-align:left;min-width:80px}
.dg td{padding:5px 8px;text-align:right;border-bottom:1px solid #F1F5F9;color:#1A2B3C}
.dg td.dt-cell{text-align:left;font-weight:600;font-size:11px;color:#0F1E35;background:#FAFBFC;min-width:80px}
.dg td.day-cell{color:var(--t3);font-weight:500;background:#FAFBFC;min-width:48px}
.dg td.num{font-weight:600}
.dg td.empty{color:#CBD5E1;text-align:center}
.dg tr.total-row td{background:var(--navy)!important;color:#fff!important;font-weight:700}
.dg tr.avg-row td{background:var(--navy2)!important;color:var(--t2)!important;font-weight:600;font-size:10px}
.dg .cs{background:#FFF3E0}.dg .cc{background:#FFE0B2}
.dg .os{background:#E8F5E9}.dg .oc{background:#C8E6C9}
.dg .as{background:#FFF8E1}.dg .ac{background:#FFECB3}
.dg .js{background:#E3F2FD}.dg .jc{background:#BBDEFB}
.dg .vs{background:#F3E5F5}.dg .vc{background:#E1BEE7}
.dg .ks{background:#E0F7FA}.dg .kc{background:#B2EBF2}
.dg .ds{background:#FCE4EC}.dg .dc{background:#F8BBD0}
.dg .es{background:#E8EAF6}.dg .ec{background:#C5CAE9}
.dg .ts{background:#E0F2FE;font-weight:700!important}.dg .tc{background:#BAE6FD;font-weight:700!important}

/* PRODUCT TABLE */
.ps-tbl{border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap;min-width:600px}
.ps-tbl th{background:var(--navy);color:var(--t1);padding:7px 10px;text-align:right;font-size:10px;font-weight:700;letter-spacing:.3px}
.ps-tbl th.pc{text-align:left;min-width:160px}
.ps-tbl td{padding:6px 10px;text-align:right;border-bottom:1px solid var(--border);color:#1A2B3C}
.ps-tbl td.pc{text-align:left;font-weight:600;font-size:12px;background:#fff;min-width:160px}
.ps-tbl tr.cat-hdr td{background:#0F1E35;color:var(--t2);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:5px 10px}
.ps-tbl tr.sub-row td{background:#F8FAFB;font-weight:700;border-top:2px solid var(--border)}
.ps-tbl tr.total-row td{background:var(--navy);color:#fff;font-weight:700}
.ps-tbl tr.coll-row td{background:#E0F7FA;color:#0E7490;font-weight:700}
.ps-tbl tr.outs-row td{background:#FEF3C7;color:#92400E;font-weight:700}
.ps-tbl tr.sales-val-row td{background:#EDE9FE;color:#5B21B6;font-weight:700}
.ps-tbl .num{font-variant-numeric:tabular-nums}

/* SCORECARD BARS */
.sc-wrap{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sc-lbl{font-size:11px;font-weight:600;min-width:68px}
.sc-track{flex:1;background:#E2EAF0;border-radius:4px;height:8px;overflow:hidden}
.sc-fill{height:100%;border-radius:4px;transition:width .6s ease}

/* PRIORITY */
.pri-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.pri-item:last-child{border-bottom:none}
.pri-rank{width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pri-party{font-size:13px;font-weight:600;color:#0F1E35}
.pri-detail{font-size:11px;color:var(--t3);margin-top:2px}
.pri-amt{margin-left:auto;font-weight:700;font-size:13px;color:var(--red);white-space:nowrap}

/* ALERTS */
.alert-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.alert-item:last-child{border-bottom:none}
.alert-icon{font-size:18px;min-width:24px}
.alert-text{font-size:13px;color:#1A2B3C;line-height:1.4}
.alert-time{font-size:11px;color:var(--t3);margin-top:2px}

/* CHEQUE ALERT BOX */
.cheque-alert{background:#FEF3C7;border:1.5px solid #FCD34D;border-radius:12px;padding:16px 18px;margin-bottom:16px}
.cheque-alert-title{font-size:13px;font-weight:700;color:#92400E;margin-bottom:10px}
.cheque-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;background:#fff;padding:10px 12px;border-radius:8px;margin-bottom:6px}
.cheque-row:last-child{margin-bottom:0}

/* STOCK DOT */
.sdot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}
.sdot.ok{background:var(--green)}.sdot.warn{background:var(--amber)}.sdot.crit{background:var(--red)}

/* REP TRACKER */
.rep-chip{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:#fff;color:var(--t3);transition:all .15s;white-space:nowrap}
.rep-chip:hover{border-color:var(--green);color:var(--green)}
.rep-chip.active{background:var(--green);color:#fff;border-color:var(--green)}
.metrics-6{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}
.metrics-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.mc{background:var(--panel);border-radius:12px;padding:16px;border:1.5px solid var(--border);position:relative;overflow:hidden}
.mc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.mc.g::before{background:var(--green)}.mc.a::before{background:var(--amber)}.mc.r::before{background:var(--red)}.mc.b::before{background:var(--blue)}
.mc .ml{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.mc .mv{font-size:20px;font-weight:800;color:#0F1E35;line-height:1}
.mc .ms{font-size:11px;color:var(--t3);margin-top:4px}
.mc .mt{font-size:11px;font-weight:600;margin-top:5px}
.mc .mt.up{color:var(--green)}.mc .mt.dn{color:var(--red)}.mc .mt.ne{color:var(--t3)}
.age-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.age-bar-label{font-size:12px;font-weight:600;min-width:72px}
.age-bar-track{flex:1;height:22px;background:#F1F5F9;border-radius:6px;overflow:hidden;display:flex}
.age-bar-recent{background:var(--green);height:100%;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:10px;font-weight:700;color:#fff;min-width:30px}
.age-bar-old{background:var(--red);height:100%;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-size:10px;font-weight:700;color:#fff;min-width:0}
.focus-card{background:#fff;border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:8px;display:flex;align-items:flex-start;gap:12px}
.focus-card.rb{border-color:#FECACA}
.focus-card.ab{border-color:#FCD34D}
.focus-num{font-size:11px;font-weight:800;color:#fff;background:var(--navy);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.focus-party{font-size:13px;font-weight:700;color:#0F1E35}
.focus-meta{font-size:11px;color:var(--t3);margin-top:2px;line-height:1.5}
.focus-amt{margin-left:auto;text-align:right;flex-shrink:0}
.focus-amt .fa{font-size:14px;font-weight:800;color:var(--red)}
.focus-amt .fd{font-size:10px;color:var(--t3);margin-top:2px}
.rh-card{background:var(--navy);border-radius:14px;padding:20px 22px;margin-bottom:18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rh-av{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--green),#0A8A3C);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;flex-shrink:0}
.rh-name{font-size:22px;font-weight:800;color:#fff}
.rh-zone{font-size:13px;color:var(--t2);margin-top:2px}
.risk-pill{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700}
.rg{background:rgba(29,185,84,.2);color:#6EE7A0}
.ra{background:rgba(245,166,35,.2);color:#FCD34D}
.rr{background:rgba(229,83,75,.2);color:#FCA5A5}
/* merged 1024px */
/* merged into main 640px block */

/* RESPONSIVE */
@media(max-width:1024px){
  .metrics-6{grid-template-columns:repeat(3,1fr)}.metrics-4{grid-template-columns:repeat(2,1fr)}#ledger60Summary{grid-template-columns:repeat(2,1fr)!important}
  .sidebar{transform:translateX(-100%);top:var(--th)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0;padding:18px}
  .hamburger{display:flex}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .g2{grid-template-columns:1fr}
  .g3{grid-template-columns:1fr}
  #riskStrip{grid-template-columns:1fr 1fr}
  .rh-card{gap:12px}
  .metrics-6{grid-template-columns:repeat(3,1fr)}
  .sc-lbl{min-width:60px}
  .freshness .ft{display:none}
}
@media(max-width:640px){
  :root{--th:48px}
  /* MOBILE ROLE BAR */
  .mob-role-bar{display:flex}
  /* LAYOUT */
  .main{padding:8px 12px;padding-bottom:calc(var(--bnh) + 14px + env(safe-area-inset-bottom))}
  /* TOPBAR */
  .topbar{padding:0 12px;gap:8px;height:48px}
  .topbar-logo .sub{display:none}
  .topbar-logo .brand{font-size:12px}
  .freshness{padding:4px 8px}
  .role-switcher{display:none}
  /* BOTTOM NAV */
  .bottom-nav{display:flex}
  /* PAGE HEADER */
  .page-title{font-size:16px}
  .header-actions .btn-ghost{display:none}
  .page-header{margin-bottom:6px}
  .page-sub{font-size:10px;margin-top:1px}
  /* KPI CARDS - 2x2 grid, readable */
  .kpi-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
  .kpi-card{padding:13px 13px}
  .kpi-value{font-size:19px}
  .kpi-sub{display:block;font-size:10px}
  .kpi-label{font-size:9.5px}
  .kpi-trend{font-size:10px}
  /* TABS - sticky so always visible */
  .tabs{background:var(--panel);margin-bottom:8px;position:sticky;top:calc(var(--th) + 28px);z-index:90}
  .tab{padding:6px 10px;font-size:11px}
  /* PANELS */
  .panel{margin-bottom:12px}
  .panel-hdr{padding:11px 13px;flex-wrap:wrap;gap:8px}
  .panel-title{font-size:13px}
  .panel-body{padding:11px 13px}
  /* BUTTONS */
  .btn{padding:7px 12px;font-size:12px}
  /* AGING GRID */
  .aging-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .ab-amt{font-size:13px}
  /* G2/G3 GRIDS */
  .g2{grid-template-columns:1fr}
  .g3{grid-template-columns:1fr}
  /* AI CHAT */
  .ai-wrap{height:240px}
  /* DAILY SALES GRID */
  .daily-grid{max-height:360px;overflow-y:auto}
  /* REP TRACKER */
  .metrics-6{grid-template-columns:repeat(2,1fr);gap:9px}
  .rh-card{padding:14px;gap:10px;flex-wrap:wrap}
  .rh-av{width:40px;height:40px;font-size:16px;flex-shrink:0}
  .rh-name{font-size:17px}
  .risk-pill{font-size:11px;padding:4px 10px;margin-top:4px}
  /* REP CHIPS */
  .rep-chip{padding:5px 10px;font-size:11px}
  /* SCORECARD BARS */
  .sc-lbl{min-width:52px;font-size:11px}
  .sc-wrap{margin-bottom:8px}
  /* AGE BARS */
  .age-bar{flex-wrap:wrap;gap:6px}
  .age-bar-label{min-width:54px;font-size:11px}
  .age-bar-track{min-width:0;flex:1}
  /* FOCUS CARDS */
  .focus-card{flex-wrap:wrap;gap:8px}
  .focus-amt{margin-left:0;min-width:100%}
  /* CHEQUE ALERT ROWS */
  .cheque-row{flex-direction:column;align-items:flex-start;gap:4px}
  /* RISK STRIP */
  #riskStrip{grid-template-columns:1fr!important}
  /* LEDGER SUMMARY */
  #ledger60Summary{grid-template-columns:1fr 1fr!important}
  /* MC CARDS (rep tracker metric cards) */
  .mc{padding:12px}
  .mc .mv{font-size:17px}
  .mc .ms{display:none}
  /* PRODUCT BARS - label truncate */
  .age-bar-recent{min-width:20px;font-size:9px}
  .age-bar-old{min-width:0;font-size:9px}
  /* inline KPI strips collapse to 2-col */
  #mgrRepKPIs{grid-template-columns:1fr 1fr!important}
  #mgrRepSelector{overflow-x:auto;flex-wrap:nowrap!important}
  /* product bars label truncate */
  #repSalesBars > div > div:first-child,#mgrRepSalesBars > div > div:first-child{min-width:120px!important;max-width:140px;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:400px){
  .kpi-card{padding:10px 9px}
  .kpi-value{font-size:17px}
}

.grid-360{grid-template-columns:320px 1fr}
@media(max-width:860px){.grid-360{grid-template-columns:1fr !important}.grid-360 #party360List{max-height:300px}}

.grid-plan{grid-template-columns:1fr 1fr}
@media(max-width:760px){.grid-plan{grid-template-columns:1fr !important}.grid-chq{grid-template-columns:1fr !important}}

/* Single-role users: compact role pill instead of full-width green bar */
.mob-role-bar.single-role{padding:3px 12px;justify-content:flex-start;margin:-10px -12px 6px -12px}
.mob-role-bar.single-role .mrb{flex:0 0 auto;min-width:0;padding:4px 14px;font-size:11px}

/* ─── REAL vs DEMO data colour coding ─── */
.data-real{color:#16A34A!important;font-weight:800!important}
.data-fake{color:#DC2626!important;font-weight:800!important}
.dverify-legend{position:sticky;top:0;z-index:5000;background:#0F2942;color:#fff;padding:10px 18px;display:flex;gap:20px;align-items:center;font-size:13px;flex-wrap:wrap;border-bottom:2px solid #16A34A}
.dverify-dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dverify-real{background:#16A34A}.dverify-fake{background:#DC2626}
.dverify-pill{background:rgba(255,255,255,.12);padding:4px 12px;border-radius:20px;font-weight:600}
.dverify-real-txt{color:#6EE7A0;font-weight:700}.dverify-fake-txt{color:#FCA5A5;font-weight:700}