:root{
    --brand:#1e3a8a; --brand-dark:#172554; --brand-soft:#eff6ff; --brand-rgb:37,99,235;
    --page-1:#F0F4FF; --page-2:#E0E7FF;
    --in:#14B8A6;  --in-soft:#dff6f1;  --in-ink:#0d7c70;
    --out:#E18AAA; --out-soft:#fbe6ee; --out-ink:#b14070;
    --warn:#f59e0b; --warn-soft:#fef3c7; --warn-ink:#92400e;
    --ok:#0d7c70; --bad:#b14070;
    --ink:#0f172a; --ink-2:#475569; --ink-3:#94a3b8;
    --line:#e2e8f0; --bg:#f4f6f9; --card:#ffffff;
    --glass:rgba(255,255,255,.78); --glass-strong:rgba(255,255,255,.92); --glass-border:rgba(37,99,235,.16);
    --radius:14px;
    --shadow:0 1px 2px rgba(15,23,42,.05),0 6px 20px rgba(30,58,138,.06);
    --shadow-md:0 2px 8px rgba(15,23,42,.07),0 16px 40px rgba(30,58,138,.10);
    --lift:0 10px 30px rgba(var(--brand-rgb),.16);
  }
  body[data-co="mbark"]{ --brand:#1e3a8a; --brand-dark:#172554; --brand-soft:#dbeafe; --brand-rgb:37,99,235; --page-1:#F0F4FF; --page-2:#E0E7FF; --glass-border:rgba(37,99,235,.16); }
  body[data-co="benya"]{ --brand:#0d9488; --brand-dark:#115e59; --brand-soft:#ccfbf1; --brand-rgb:13,148,136; --page-1:#F0FDFA; --page-2:#CCFBF1; --glass-border:rgba(13,148,136,.18); }
  *{box-sizing:border-box}
  body{margin:0;font-family:"IBM Plex Sans Thai","IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;background:linear-gradient(165deg,var(--page-1) 0%,var(--page-2) 100%) fixed;color:var(--ink);font-size:14.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
  .page-head h1,.card h3{font-family:"IBM Plex Sans","IBM Plex Sans Thai",ui-sans-serif,sans-serif;letter-spacing:-.3px}
  button{font-family:inherit;cursor:pointer}
  .topbar{display:flex;align-items:center;gap:12px;background:var(--glass-strong);backdrop-filter:blur(14px);border-bottom:1px solid var(--glass-border);padding:0 24px;position:sticky;top:0;z-index:20;height:56px}
  .crumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-3);flex:1;min-width:0}
  .crumb .co{font-weight:700;color:var(--brand-dark);font-size:13.5px}
  .crumb .sep{color:var(--line)}
  .crumb .pg{color:var(--ink);font-weight:600;font-size:13px}
  .topbar .date{font-size:12px;color:var(--ink-3);font-weight:500;white-space:nowrap;letter-spacing:.2px}
  .topbar .user{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2)}
  .topbar .user .pill{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
  .topbar .logout{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 12px;font-size:12px;color:var(--ink-2);font-weight:500;transition:.15s}
  .topbar .logout:hover{background:var(--out-soft);color:var(--out-ink);border-color:var(--out)}
  .wrap{display:flex;min-height:100vh}
  .sidebar{width:236px;flex-shrink:0;background:var(--glass);backdrop-filter:blur(18px);border-right:1px solid var(--glass-border);display:flex;flex-direction:column;height:100vh;position:sticky;top:0}
  .sb-brand{padding:18px 14px 12px;border-bottom:1px solid var(--glass-border);display:flex;flex-direction:column;align-items:center;gap:6px}
  .sb-brand .sb-logo{height:42px;display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;color:var(--brand-dark);letter-spacing:-.5px}
  .sb-brand .sb-logo .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-dark));display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px rgba(var(--brand-rgb),.3)}
  .sb-brand .sb-logo .mark svg{width:19px;height:19px}
  .sb-brand .sb-tagline{font-size:11px;color:var(--ink-3);font-weight:500;letter-spacing:.3px;margin-top:2px}
  .company-switch{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--glass-border)}
  .company-switch button{flex:1;border:1px solid var(--line);background:rgba(255,255,255,.6);color:var(--ink-3);padding:5px 8px;border-radius:8px;font-weight:600;font-size:11.5px;transition:.15s}
  .company-switch button:hover{border-color:var(--brand);color:var(--brand-dark)}
  .company-switch button.active{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;border-color:var(--brand);box-shadow:0 3px 10px rgba(var(--brand-rgb),.28)}
  .sb-nav{flex:1;overflow-y:auto;padding:8px 6px 16px}
  .stage-label{font-size:11.5px;font-weight:700;color:var(--ink-2);letter-spacing:.4px;padding:12px 10px 6px}
  .nav-item{display:flex;gap:12px;align-items:center;padding:9px 11px;border-radius:9px;cursor:pointer;transition:transform .12s ease,background .12s,color .12s;margin-bottom:1px;color:var(--ink-2);border-left:2.5px solid transparent}
  .nav-item:hover{background:rgba(var(--brand-rgb),.08);color:var(--ink);transform:translateX(2px)}
  .nav-item.active{background:rgba(var(--brand-rgb),.12);color:var(--brand-dark);font-weight:600;border-left:2.5px solid var(--brand);padding-left:8px}
  .nav-item .ic{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;color:#64748b}
  .nav-item .ic svg{width:16px;height:16px;stroke-width:1.7}
  .nav-item.active .ic,.nav-item:hover .ic{color:var(--brand)}
  .nav-item .t{font-size:12.5px;font-weight:500}
  .nav-item.active .t{font-weight:700;color:var(--brand-dark)}
  .nav-item .badge-mini{margin-left:auto;font-size:9px;background:var(--warn-soft);color:var(--warn-ink);padding:1px 6px;border-radius:999px;font-weight:700}
  .sb-footer{padding:10px 12px;border-top:1px solid var(--glass-border);font-size:10.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px}
  .sb-footer .dot{width:6px;height:6px;border-radius:50%;background:var(--in);box-shadow:0 0 0 3px var(--in-soft);flex-shrink:0}
  .main{flex:1;padding:24px 28px;overflow-x:auto;min-width:0;max-width:none}
  .page-head{margin-bottom:22px}
  .page-head h1{margin:0 0 5px;font-size:25px;font-weight:800;letter-spacing:-.6px;color:var(--ink)}
  .page-head .sub{color:var(--ink-2);font-size:13.5px}
  .badge{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--brand-soft);color:var(--brand-dark);vertical-align:middle;margin-left:8px}
  .card{background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:16px;transition:transform .18s ease,box-shadow .18s ease}
  .card:hover{box-shadow:var(--shadow-md)}
  .card h3{margin:0 0 4px;font-size:14.5px;font-weight:700;color:var(--ink)}
  .card .note{color:var(--ink-3);font-size:12.5px;margin-bottom:14px}
  .drop{border:1.5px dashed var(--glass-border);border-radius:12px;padding:28px;text-align:center;color:var(--ink-3);transition:.18s;background:rgba(255,255,255,.45);cursor:pointer}
  .drop:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-dark)}
  .drop .big{font-size:28px;margin-bottom:6px;opacity:.6}
  .drop b{color:var(--brand)}
  .drop .sm{font-size:11.5px;margin-top:6px}
  .sheet-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:10px 14px;background:rgba(255,255,255,.5);border:1px solid var(--glass-border);border-radius:10px}
  .sheet-row .sheet-lbl{font-size:12.5px;font-weight:700;color:var(--ink-2)}
  .sheet-row select{border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:12.5px;font-family:inherit;background:#fff;min-width:180px;color:var(--ink)}
  .sheet-row .sheet-auto{font-size:11.5px;color:var(--in-ink);font-weight:600}
  .slots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
  .slot{background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:7px;transition:transform .18s ease,box-shadow .18s ease}
  .slot:hover{box-shadow:var(--shadow)}
  .slot .lbl{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13px;color:var(--ink)}
  .slot .lbl .step{display:inline-flex;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;font-size:11px;align-items:center;justify-content:center;font-weight:800;flex-shrink:0}
  .slot .hint{font-size:11.5px;color:var(--ink-3);line-height:1.4}
  .slot.ready{border-color:var(--in);background:var(--in-soft)}
  .slot .ok{font-size:11.5px;color:var(--in-ink);font-weight:600;margin-top:2px}
  .tabs{display:flex;gap:4px;background:rgba(var(--brand-rgb),.10);padding:4px;border-radius:11px;margin-bottom:14px}
  .tabs button{flex:1;border:none;background:transparent;padding:9px 12px;font-size:12.5px;font-weight:600;color:var(--ink-2);border-radius:8px;cursor:pointer;transition:.15s}
  .tabs button:hover{background:rgba(255,255,255,.55)}
  .tabs button.active{background:#fff;color:var(--brand-dark);box-shadow:0 2px 8px rgba(var(--brand-rgb),.16);font-weight:700}
  .tabs button .c{display:inline-block;margin-left:5px;background:var(--brand-soft);color:var(--brand-dark);border-radius:999px;padding:1px 7px;font-size:10.5px}
  .tabs button.active .c{background:var(--brand);color:#fff}
  .warning-row{background:var(--warn-soft)!important}
  .neg{color:var(--out-ink);font-weight:600}
  .pos{color:var(--in-ink);font-weight:600}
  .btn{border:1px solid transparent;background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;padding:9px 17px;border-radius:9px;font-weight:600;font-size:13px;transition:transform .14s ease,box-shadow .14s ease,filter .14s;box-shadow:0 3px 10px rgba(var(--brand-rgb),.22)}
  .btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(var(--brand-rgb),.30)}
  .btn.ghost{background:rgba(255,255,255,.7);color:var(--brand);border-color:var(--brand);box-shadow:none}
  .btn.ghost:hover{background:var(--brand-soft)}
  .btn.sm{padding:6px 13px;font-size:12px;border-radius:8px}
  .btnrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
  .table-wrap{overflow:auto;border:1px solid var(--glass-border);border-radius:12px;margin-top:12px;max-height:440px;background:rgba(255,255,255,.5)}
  table{border-collapse:collapse;width:100%;font-size:12.5px;white-space:nowrap}
  th,td{border-bottom:1px solid var(--line);padding:9px 12px;text-align:left}
  th{background:rgba(var(--brand-rgb),.07);position:sticky;top:0;font-weight:700;color:var(--brand-dark);font-size:11px;letter-spacing:.4px;text-transform:uppercase}
  tbody tr{transition:background .12s}
  tbody tr:hover{background:rgba(var(--brand-rgb),.05)}
  .empty{padding:40px;text-align:center;color:var(--ink-3);font-size:13px}
  .opts{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px}
  .opt{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
  .opt input{width:15px;height:15px;accent-color:var(--brand)}
  .pill-stat{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0 0}
  .stat{background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:12px;padding:12px 18px;min-width:120px;transition:transform .16s ease,box-shadow .16s ease}
  .stat:hover{transform:translateY(-2px);box-shadow:var(--lift)}
  .stat .n{font-size:22px;font-weight:800;color:var(--brand-dark);letter-spacing:-.5px}
  .stat .l{font-size:11px;color:var(--ink-2);font-weight:600;margin-top:1px}
  .stat.warn{background:var(--warn-soft);border-color:rgba(245,158,11,.25)}.stat.warn .n{color:var(--warn-ink)}
  .stat.in{background:var(--in-soft);border-color:rgba(20,184,166,.3)}.stat.in .n{color:var(--in-ink)}
  .stat.out{background:var(--out-soft);border-color:rgba(225,138,170,.4)}.stat.out .n{color:var(--out-ink)}

  /* Cash Flow Staff view */
  .cf-chips{display:flex;gap:6px;flex-wrap:wrap}
  .cf-chips button{border:1px solid var(--glass-border);background:rgba(255,255,255,.6);color:var(--ink-2);padding:5px 13px;border-radius:999px;font-size:12px;font-weight:600;transition:.14s}
  .cf-chips button:hover{border-color:var(--brand);color:var(--brand-dark)}
  .cf-chips button.active{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;border-color:var(--brand);box-shadow:0 3px 10px rgba(var(--brand-rgb),.26)}
  .kpigrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
  @media(max-width:1100px){.kpigrid{grid-template-columns:repeat(3,1fr)}.bankgrid{grid-template-columns:1fr!important}}
  @media(max-width:760px){.kpigrid{grid-template-columns:repeat(2,1fr)}}
  .kpi{background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px;display:flex;flex-direction:column;gap:3px;transition:transform .16s ease,box-shadow .16s ease;cursor:pointer;font-family:inherit;text-align:left}
  .kpi:hover{transform:translateY(-3px);box-shadow:var(--lift)}
  .kpi .kpi-ic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;background:var(--brand-soft);color:var(--brand)}
  .kpi .kpi-ic svg{width:17px;height:17px}
  .kpi .kpi-l{font-size:11.5px;color:var(--ink-2);font-weight:600}
  .kpi .kpi-n{font-size:21px;font-weight:800;color:var(--brand-dark);letter-spacing:-.3px;font-family:"IBM Plex Sans","IBM Plex Sans Thai",sans-serif}
  .kpi .kpi-d{font-size:10.5px;color:var(--ink-3);font-weight:500}
  .kpi.in .kpi-ic{background:var(--in-soft);color:var(--in-ink)} .kpi.in .kpi-n{color:var(--in-ink)}
  .kpi.out .kpi-ic{background:var(--out-soft);color:var(--out-ink)} .kpi.out .kpi-n{color:var(--out-ink)}
  .kpi.warn .kpi-ic{background:var(--warn-soft);color:var(--warn-ink)} .kpi.warn .kpi-n{color:var(--warn-ink)}
  .bridge{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
  .br-item{flex:1;min-width:140px;background:rgba(255,255,255,.6);border:1px solid var(--glass-border);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:5px;justify-content:center}
  .br-item .br-l{font-size:11.5px;color:var(--ink-2);font-weight:600}
  .br-item .br-v{font-size:19px;font-weight:800;color:var(--brand-dark);font-family:"IBM Plex Sans","IBM Plex Sans Thai",sans-serif}
  .br-item.in{background:var(--in-soft);border-color:rgba(20,184,166,.3)} .br-item.in .br-v{color:var(--in-ink)}
  .br-item.out{background:var(--out-soft);border-color:rgba(225,138,170,.4)} .br-item.out .br-v{color:var(--out-ink)}
  .br-item.total{background:linear-gradient(135deg,var(--brand),var(--brand-dark));border:none;box-shadow:0 6px 18px rgba(var(--brand-rgb),.28)}.br-item.total .br-l{color:rgba(255,255,255,.85)}.br-item.total .br-v{color:#fff}
  .br-op{display:flex;align-items:center;font-size:24px;font-weight:300;color:var(--ink-3)}
  .bankgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .bankcard{background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:13px;padding:16px;display:flex;flex-direction:column;gap:9px;transition:transform .16s ease,box-shadow .16s ease}
  .bankcard:hover{transform:translateY(-2px);box-shadow:var(--lift)}
  .bankcard.neg{border-color:rgba(225,138,170,.5);background:var(--out-soft)}
  .bankcard .bk-top{display:flex;align-items:center;gap:10px}
  .bankcard .bk-logo{width:38px;height:38px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--glass-border);overflow:hidden}
  .bankcard .bk-logo img{width:100%;height:100%;object-fit:contain;padding:3px}
  .bankcard .bk-logo .bk-fb{font-weight:800;font-size:11px;color:var(--brand-dark)}
  .bankcard .bk-name{font-weight:700;font-size:13px;color:var(--ink);line-height:1.2}
  .bankcard .bk-acc{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
  .bankcard .bk-net{font-size:22px;font-weight:800;color:var(--brand-dark);letter-spacing:-.4px;font-family:"IBM Plex Sans","IBM Plex Sans Thai",sans-serif}
  .bankcard.neg .bk-net{color:var(--out-ink)}
  .bankcard .bk-rows{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--ink-2);border-top:1px dashed var(--glass-border);padding-top:8px}
  .bankcard .bk-rows .r{display:flex;justify-content:space-between}
  .bankcard .bk-rows .r b{font-variant-numeric:tabular-nums;color:var(--ink)}
  .cat-row td{background:rgba(var(--brand-rgb),.07);font-weight:700;color:var(--brand-dark)!important;text-transform:none!important;letter-spacing:0!important}
  .sub-row td:first-child{padding-left:30px;color:var(--ink-2)}
  .tot-row td{border-top:2px solid var(--glass-border);font-weight:800;color:var(--ink);background:rgba(255,255,255,.5)}
  td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
  .muted{color:var(--ink-3)}

  /* multi-select checkbox dropdown */
  .multi-dd{position:relative}
  .multi-dd summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 12px;min-width:140px;user-select:none}
  .multi-dd summary::-webkit-details-marker{display:none}
  .multi-dd summary::after{content:"▾";color:var(--ink-3);font-size:10px;margin-left:auto}
  .multi-dd[open] summary{border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12)}
  .multi-dd .multi-pop{position:absolute;top:calc(100% + 4px);left:0;z-index:50;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;min-width:220px;max-height:300px;overflow-y:auto}
  .multi-dd .multi-pop label{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;font-size:12.5px;color:var(--ink);border-radius:6px;white-space:nowrap}
  .multi-dd .multi-pop label:hover{background:rgba(var(--brand-rgb),.08)}
  .multi-dd .multi-pop label input{width:14px;height:14px;accent-color:var(--brand);flex-shrink:0}
  .multi-dd .multi-pop .multi-actions{display:flex;justify-content:space-between;padding:5px 10px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
  .multi-dd .multi-pop .multi-actions button{font-size:11px;font-weight:700;color:var(--brand);background:none;border:none;cursor:pointer;padding:2px 4px}
  .multi-dd .multi-pop .multi-actions button:hover{text-decoration:underline}
  .multi-dd .multi-count{background:var(--brand);color:#fff;font-size:10px;padding:1px 6px;border-radius:999px;font-weight:700;margin-left:4px}
  /* Excel-style per-column filter dropdown */
  .col-fdd{position:relative;display:inline-block}
  .col-fdd summary{cursor:pointer;list-style:none;font-size:10px;color:var(--ink-3);padding:1px 5px;border-radius:4px;user-select:none;line-height:1}
  .col-fdd summary::-webkit-details-marker{display:none}
  .col-fdd summary:hover{background:rgba(99,102,241,.12);color:var(--brand)}
  .col-fdd summary.active{background:var(--brand);color:#fff}
  .col-fdd .col-fpop{position:absolute;top:calc(100% + 4px);left:0;z-index:200;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:8px;min-width:280px;max-width:360px}
  .col-fdd .col-fpop.right{left:auto;right:0}
  .col-fdd .col-fsearch{width:100%;padding:6px 10px;border:1px solid var(--line);border-radius:7px;font-size:12px;margin-bottom:6px;font-family:inherit;box-sizing:border-box}
  .col-fdd .col-factions{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border-bottom:1px solid var(--line);margin-bottom:6px;font-size:11.5px;color:var(--ink-3)}
  .col-fdd .col-factions label{display:flex;align-items:center;gap:6px;color:var(--ink);font-weight:600;cursor:pointer}
  .col-fdd .col-factions label input{width:14px;height:14px;accent-color:var(--brand)}
  .col-fdd .col-fopts{max-height:230px;overflow-y:auto}
  .col-fdd .col-fopts label{display:flex;align-items:center;gap:8px;padding:5px 8px;cursor:pointer;font-size:12px;border-radius:5px}
  .col-fdd .col-fopts label:hover{background:rgba(99,102,241,.08)}
  .col-fdd .col-fopts label input{width:14px;height:14px;accent-color:var(--brand);flex-shrink:0}
  .col-fdd .col-fopts label .vlabel{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .col-fdd .col-fopts label .vcount{margin-left:auto;color:var(--ink-3);font-size:11px;flex-shrink:0}
  .col-fdd .col-ffooter{display:flex;justify-content:space-between;padding-top:8px;border-top:1px solid var(--line);margin-top:6px;gap:6px}
  .col-fdd .col-ffooter button{font-size:11.5px;font-weight:700;background:transparent;border:1px solid var(--line);padding:5px 12px;border-radius:6px;cursor:pointer;color:var(--ink-2);font-family:inherit}
  .col-fdd .col-ffooter button.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
  .col-fdd .col-ffooter button:hover{background:rgba(99,102,241,.08)}
  .col-fdd .col-ffooter button.primary:hover{filter:brightness(1.05)}
  .toolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
  @media(max-width:1100px){.charts{grid-template-columns:1fr!important}}
  .toolcard{background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:11px;box-shadow:var(--shadow);padding:12px 14px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s;display:flex;align-items:center;gap:11px;position:relative;text-align:left;font-family:inherit}
  .toolcard:hover{transform:translateY(-2px);box-shadow:var(--lift);border-color:var(--brand)}
  .toolcard .tc-ic{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--brand-soft),rgba(255,255,255,.4));display:flex;align-items:center;justify-content:center;color:var(--brand);border:1px solid var(--glass-border);flex-shrink:0}
  .toolcard .tc-ic svg{width:17px;height:17px;stroke-width:1.9}
  .toolcard .tc-body{flex:1;min-width:0}
  .toolcard .tc-t{font-weight:700;font-size:13px;color:var(--ink);line-height:1.3}
  .toolcard .tc-d{font-size:11px;color:var(--ink-3);line-height:1.4;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .toolcard .tc-go{display:none}
  .charts{display:grid;grid-template-columns:1.7fr 1fr;gap:14px}
  .bars{display:flex;align-items:flex-end;gap:12px;height:190px;padding-top:8px}
  .bars .bcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
  .bars .bar{width:100%;border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--brand),var(--brand-dark));min-height:6px;transition:.25s}
  .bars .bar.in{background:linear-gradient(180deg,var(--in),#0d9488)}
  .bars .bx{font-size:10.5px;color:var(--ink-3);font-weight:600}
  .donutwrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:100%}
  .donut{width:148px;height:148px;border-radius:50%;background:conic-gradient(var(--brand) 0 52%,var(--in) 52% 80%,var(--out) 80% 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(var(--brand-rgb),.16)}
  .donut .hole{width:96px;height:96px;border-radius:50%;background:var(--glass-strong);display:flex;flex-direction:column;align-items:center;justify-content:center}
  .donut .hole .n{font-size:20px;font-weight:800;color:var(--brand-dark);letter-spacing:-.5px}
  .donut .hole .l{font-size:10px;color:var(--ink-3);font-weight:600}
  .legend{display:flex;flex-direction:column;gap:7px;font-size:12px;width:100%;max-width:200px}
  .legend .li{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
  .legend .sw{width:11px;height:11px;border-radius:3px;flex-shrink:0}
  .legend .li b{margin-left:auto;color:var(--ink)}
  .addbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
  .input{border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:13px;font-family:inherit;background:#fff;color:var(--ink);min-width:160px}
  .input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12)}
  .urole{font-size:10px;font-weight:700;padding:2px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.3px}
  .urole.admin{background:var(--brand-soft);color:var(--brand-dark)}
  .urole.user{background:#eef2f7;color:var(--ink-2)}
  .ustatus{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
  .ustatus .d{width:7px;height:7px;border-radius:50%}
  .ustatus.on .d{background:var(--in);box-shadow:0 0 0 3px var(--in-soft)}
  .ustatus.off .d{background:var(--ink-3)}
  .soon-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 20px;gap:14px}
  .soon-wrap .sic{width:74px;height:74px;border-radius:20px;background:linear-gradient(135deg,var(--brand-soft),rgba(255,255,255,.4));display:flex;align-items:center;justify-content:center;color:var(--brand);border:1px solid var(--glass-border);box-shadow:var(--shadow)}
  .soon-wrap .sic svg{width:34px;height:34px}
  .soon-wrap h2{margin:0;font-size:23px;font-weight:800;color:var(--ink);letter-spacing:-.5px}
  .soon-wrap p{margin:0;color:var(--ink-3);font-size:13.5px;max-width:380px}
  .matchchip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px}
  .matchchip.ok{background:var(--in-soft);color:var(--in-ink)}
  .matchchip.warn{background:var(--warn-soft);color:var(--warn-ink)}
  @media(max-width:820px){.slots{grid-template-columns:1fr}.toolgrid{grid-template-columns:1fr}}

  /* compatibility shims for existing JS */
  body[data-co="mbark"]{ --gradient-1:#1e3a8a; --gradient-2:#2563eb; }
  body[data-co="benya"]{ --gradient-1:#0d9488; --gradient-2:#14b8a6; }

  /* stage groups (collapsible) — not in design, ported from current */
  .stage-label{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;border-radius:6px;transition:.12s}
  .stage-label:hover{color:var(--brand);background:rgba(var(--brand-rgb),.06)}
  .stage-label .chev{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:#475569;transition:transform .2s ease}
  .stage-label .chev svg{width:16px;height:16px;stroke-width:2.4}
  .stage-label:hover .chev{color:var(--brand)}
  .stage-group.collapsed .stage-label .chev{transform:rotate(-90deg)}
  .stage-items{display:flex;flex-direction:column;overflow:hidden;transition:max-height .2s ease}
  .stage-group.collapsed .stage-items{max-height:0!important;display:none}

  /* sidebar logo image (replaces design's icon mark) */
  .sb-brand .sb-logo-img{height:46px;width:auto;max-width:170px;object-fit:contain}

  /* topbar user email + dropdown for export */
  .topbar .user .u-email{color:var(--ink-3);font-size:12px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dd{position:relative;display:inline-block}
  .dd-menu{position:absolute;top:calc(100% + 5px);left:0;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow-md);min-width:165px;overflow:hidden;display:none;z-index:10}
  .dd.open .dd-menu{display:block}
  .dd-menu button{display:flex;width:100%;gap:8px;align-items:center;border:none;background:#fff;padding:10px 14px;font-size:13px;text-align:left;color:var(--ink);transition:.12s}
  .dd-menu button:hover{background:var(--brand-soft)}
  .dd-menu .x{font-size:10.5px;color:var(--ink-3)}

  /* filechip / slot fchip used by existing pages */
  .filechip{display:inline-flex;align-items:center;gap:8px;background:var(--brand-soft);color:var(--brand-dark);border-radius:999px;padding:5px 14px;font-size:12.5px;font-weight:600;margin-top:10px}
  .filechip button{border:none;background:none;color:var(--brand-dark);font-size:14px;line-height:1;opacity:.7}
  .filechip button:hover{opacity:1}
  .slot .files{display:flex;flex-direction:column;gap:4px}
  .slot .fchip{display:flex;align-items:center;justify-content:space-between;gap:6px;background:var(--brand-soft);color:var(--brand-dark);border-radius:7px;padding:5px 10px;font-size:11.5px}
  .slot .fchip .meta{font-size:10px;color:var(--ink-2);opacity:.8}
  .slot .fchip button{border:none;background:none;color:var(--brand-dark);font-size:13px;cursor:pointer;opacity:.7}
  .slot .err{font-size:11.5px;color:var(--out-ink);font-weight:600;margin-top:2px}

  /* user roles for existing users page (more roles than design's admin/user) */
  .urole.viewer{background:#eef2f7;color:var(--ink-2)}
  .urole.finance_mgr,.urole.accountant,.urole.treasury,.urole.sales_ops,.urole.approver,.urole.executive{background:var(--in-soft);color:var(--in-ink)}

  /* sheet manual */
  .sheet-row .sheet-manual{font-size:11.5px;color:var(--warn-ink);font-weight:600}

  /* btn disabled */
  .btn[disabled]{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

  /* tbody last row no border */
  tbody tr:last-child td{border-bottom:none}

  /* soon note used by existing pages */
  .soon-note{font-size:12px;color:var(--ink-3);background:rgba(255,255,255,.5);border-radius:7px;padding:10px 14px;margin-top:12px;border:1px solid var(--glass-border)}

  /* responsive — extended */
  @media(max-width:820px){
    .sidebar{position:fixed;left:-260px;transition:.22s;height:100%;z-index:30}
    .sidebar.show{left:0}
    .main{padding:16px}
    .menu-toggle{display:inline-block!important}
    .slots{grid-template-columns:1fr}
  }
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;border-radius:7px;padding:5px 10px;font-size:18px;line-height:1;color:var(--ink-2);cursor:pointer;transition:.15s}
  .menu-toggle:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
  body.sb-hidden .sidebar{display:none}


  /* ---- Executive Dashboard styling ---- */
  .ed-page{background:linear-gradient(180deg,#f5f9ff 0%,#eef5ff 100%);min-height:calc(100vh - 54px);margin:-24px -28px;padding:24px 28px}
  /* ลูกเล่น animation (Executive Summary) */
  @keyframes edGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes edShimmer{0%{transform:translateX(-130%)}55%{transform:translateX(230%)}100%{transform:translateX(230%)}}
  @keyframes edShine{0%{transform:translateX(-130%) skewX(-16deg)}60%{transform:translateX(330%) skewX(-16deg)}100%{transform:translateX(330%) skewX(-16deg)}}
  @keyframes edGlow{0%,100%{box-shadow:0 14px 30px rgba(45,55,120,.26)}50%{box-shadow:0 16px 42px rgba(45,55,120,.5)}}
  .ed-grow{transform-origin:left;animation:edGrow .85s cubic-bezier(.22,1,.36,1)}
  .ed-shim{position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.55) 50%,transparent 75%);animation:edShimmer 2.8s ease-in-out infinite}
  .ed-shine{position:absolute;top:0;left:0;width:38%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);animation:edShine 3.4s ease-in-out infinite;pointer-events:none}
  .ed-glow{animation:edGlow 2.6s ease-in-out infinite}
  .ed-card{background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border:1px solid #d6e4ff;border-radius:14px;box-shadow:0 1px 3px rgba(30,58,138,.06),0 4px 16px rgba(30,58,138,.05);padding:18px 20px;margin-bottom:14px}
  .ed-card h3{margin:0 0 10px;font-family:"IBM Plex Sans","IBM Plex Sans Thai",ui-sans-serif,sans-serif;font-size:14.5px;font-weight:700;color:#1e3a8a;letter-spacing:-.2px}
  .ed-tabs{display:flex;gap:4px;background:rgba(99,179,237,.12);padding:4px;border-radius:11px;margin-bottom:16px;flex-wrap:wrap}
  .ed-tabs button{flex:1;min-width:120px;border:none;background:transparent;padding:9px 14px;font-size:12.5px;font-weight:600;color:#475569;border-radius:8px;cursor:pointer;transition:.15s;font-family:inherit}
  .ed-tabs button:hover{background:rgba(255,255,255,.5)}
  .ed-tabs button.active{background:#fff;color:#1e40af;box-shadow:0 2px 8px rgba(79,138,247,.18);font-weight:700}

  /* Print header (visible only when printing) */
  #printHeader{display:none}
  @media print{
    body{background:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
    .sidebar,.topbar,#exportDD,.ed-tabs,.menu-toggle,.btn,button{display:none!important}
    .main{padding:0!important;max-width:none!important;overflow:visible!important}
    .ed-page{background:#fff!important;margin:0!important;padding:14mm!important;min-height:auto!important}
    .wrap{display:block!important}
    .ed-card,.card{box-shadow:none!important;border:1px solid #cbd5e1!important;backdrop-filter:none!important;background:#fff!important;page-break-inside:avoid;margin-bottom:10px!important}
    #printHeader{display:block;border-bottom:3px solid #4F8AF7;padding:0 0 14px;margin-bottom:18px}
    #printHeader .ph-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
    #printHeader .ph-co{display:flex;align-items:center;gap:14px}
    #printHeader .ph-logo{width:62px;height:62px;object-fit:contain}
    #printHeader .ph-co-name{font-family:"IBM Plex Sans","IBM Plex Sans Thai",ui-sans-serif,sans-serif;font-size:18px;font-weight:800;color:#0f172a;letter-spacing:-.4px}
    #printHeader .ph-co-sub{font-size:11px;color:#64748b;margin-top:2px;text-transform:uppercase;letter-spacing:.7px;font-weight:600}
    #printHeader .ph-meta{text-align:right;font-size:11.5px;color:#475569;line-height:1.7}
    #printHeader .ph-title{font-size:13px;font-weight:700;color:#1e40af;letter-spacing:.3px;text-transform:uppercase}
    #printHeader .ph-period{font-size:14.5px;font-weight:700;color:#0f172a;margin-top:1px}
    #printHeader .ph-ts{color:#94a3b8;font-size:10.5px;margin-top:2px;font-style:italic}
    .page-head,h1{break-after:avoid}
    .table-wrap{max-height:none!important;overflow:visible!important;border:none!important}
    table{font-size:10px!important}
    th,td{padding:5px 7px!important}
    th{background:#eff6ff!important;color:#1e40af!important;border-bottom:1.5px solid #4F8AF7!important}
    .ed-print-only{display:block!important}
    canvas{max-width:100%!important;height:auto!important}
    @page{size:A4 landscape;margin:10mm}
  }
  .ed-print-only{display:none}