:root{
    /* ---- Shopify Polaris-inspired tokens ---- */
    --navy:#303030; --navy2:#1a1a1a; --ink:#303030; --muted:#616161; --muted2:#8a8a8a;
    --pink:#303030; --pink2:#4a4a4a; --pink-dark:#303030; --pink-deep:#1a1a1a;
    --bg:#f1f1f1;
    --card:#ffffff; --line:#e3e3e3; --line2:#ebebeb;
    --green:#0c5132; --green-dk:#0a4327;
    --amber:#8a6116; --red:#8e1f0b; --blue:#00527c;
    --accent:#005bd3;            /* Polaris focus / link blue */
    --topnav:#1a1a1a;            /* global dark bar */
    --topnav-field:#303030;
    --radius:12px; --radius-sm:8px; --radius-lg:16px;
    --shadow-xs:0 1px 0 rgba(0,0,0,.05);
    --shadow:0 1px 0 rgba(0,0,0,.05);
    --shadow-md:0 4px 12px rgba(0,0,0,.10);
    --shadow-lg:0 26px 80px rgba(0,0,0,.22);
    --shadow-glow:0 0 0 3px rgba(0,91,211,.25);
    --btn-shadow:0 -1px 0 0 #b5b5b5 inset, 0 0 0 1px rgba(0,0,0,.10) inset, 0 .5px 0 1.5px #fff inset;
    --btn-shadow-dark:0 -1px 0 0 #000 inset, 0 0 0 1px rgba(255,255,255,.10) inset, 0 .5px 0 1.5px rgba(255,255,255,.22) inset;
    --grad:#303030;
    --grad-deep:#1a1a1a;
    --grad-navy:#f1f1f1;
    --grad-mesh:none;
    --ease:cubic-bezier(.22,.9,.32,1.16);
    --ease-soft:cubic-bezier(.4,0,.2,1);
  }
  *{box-sizing:border-box; margin:0; padding:0}
  html,body{height:100%}
  body{font-family:Inter,-apple-system,BlinkMacSystemFont,"San Francisco","Segoe UI",Roboto,"Helvetica Neue",sans-serif; background:var(--bg); color:var(--ink); font-size:13px; line-height:1.45; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; letter-spacing:normal}
  body::before{content:none}
  button{font-family:inherit; cursor:pointer}
  :focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-radius:6px}
  @media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important; transition-duration:.01ms!important}}
  input,select,textarea{font-family:inherit; font-size:13px; color:var(--ink)}
  ::-webkit-scrollbar{width:10px; height:10px}
  ::-webkit-scrollbar-thumb{background:#c9c9c9; border-radius:20px; border:2.5px solid transparent; background-clip:content-box}
  ::-webkit-scrollbar-thumb:hover{background:#adadad; background-clip:content-box}
  ::-webkit-scrollbar-track{background:transparent}

  /* ================= GLOBAL DARK TOP BAR (Shopify admin) ================= */
  .globalbar{position:sticky; top:0; z-index:50; background:var(--topnav); height:56px; display:flex; align-items:center; gap:16px; padding:0 12px 0 16px}
  .globalbar .gb-brand{display:flex; align-items:center; gap:9px; color:#e3e3e3; font-size:13.5px; font-weight:650; white-space:nowrap}
  .globalbar .gb-brand .gb-mark{width:26px; height:26px; border-radius:7px; background:#1a1a1a; border:1px solid #4a4a4a; display:flex; align-items:center; justify-content:center; font-size:14px}
  .globalbar .gb-search{flex:1; max-width:520px; margin:0 auto; position:relative}
  .globalbar .gb-field{display:flex; align-items:center; min-height:32px; border-radius:8px; background:var(--topnav-field); border:1px solid #616161; padding:0 8px 0 34px; gap:6px; transition:.15s}
  .globalbar .gb-field:hover{background:#3a3a3a}
  .globalbar .gb-field:focus-within{background:#3a3a3a; border-color:#8a8a8a; box-shadow:0 0 0 2px rgba(255,255,255,.18)}
  .globalbar .gb-search input{flex:1; min-width:0; width:auto; height:30px; border:none; border-radius:0; background:transparent; color:#e3e3e3; padding:0 4px 0 0; font-size:13px; outline:none; box-shadow:none}
  .globalbar .gb-search input::placeholder{color:#b5b5b5}
  .globalbar .gb-search input:hover,.globalbar .gb-search input:focus{background:transparent; border:none; box-shadow:none}
  .globalbar .gb-field:focus-within .gb-kbd{opacity:0; pointer-events:none}
  .gb-chip{display:inline-flex; align-items:center; gap:2px; height:22px; padding:0 2px 0 8px; border-radius:6px; background:#4a4a4a; color:#f1f1f1; font-size:12px; font-weight:650; flex:none; white-space:nowrap}
  .gb-chip .gb-chip-x{border:none; background:transparent; color:#c9c9c9; width:18px; height:18px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; line-height:1}
  .gb-chip .gb-chip-x:hover{background:#616161; color:#fff}
  .gb-pop{display:none; position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); width:min(560px,94vw); max-height:min(72vh,560px); overflow:auto; background:#fff; color:var(--ink); border-radius:12px; box-shadow:0 18px 48px rgba(0,0,0,.32); z-index:80; padding:6px}
  .gb-pop.show{display:block; animation:drop .12s var(--ease-soft)}
  .gb-sec{font-size:11.5px; font-weight:650; color:var(--muted); padding:8px 10px 4px}
  .gb-row{display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left; border:none; background:transparent; padding:8px 10px; border-radius:8px; cursor:pointer; color:inherit; font:inherit}
  .gb-row:hover,.gb-row.on{background:#f1f1f1}
  .gb-row .gb-ico{width:28px; height:28px; border-radius:8px; background:#f1f1f1; color:#4a4a4a; display:flex; align-items:center; justify-content:center; flex:none}
  .gb-row.on .gb-ico,.gb-row:hover .gb-ico{background:#e3e3e3}
  .gb-row .gb-body{min-width:0; flex:1}
  .gb-row .gb-t{font-size:13px; font-weight:650; display:flex; flex-wrap:wrap; gap:6px; align-items:center}
  .gb-row .gb-s{font-size:12px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .gb-more{width:100%; border:none; background:none; padding:10px; font-size:13px; font-weight:650; color:var(--accent); cursor:pointer; border-radius:8px; font-family:inherit}
  .gb-more:hover,.gb-more.on{background:#f1f6fd}
  .gb-empty{padding:22px 14px; text-align:center; color:var(--muted); font-size:13px}
  .globalbar .gb-search::before{content:""; position:absolute; left:11px; top:9px; width:14px; height:14px; opacity:.7;
    background:currentColor; color:#b5b5b5;
    -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='5'/%3E%3Cpath d='M12.8 12.8 16.5 16.5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='5'/%3E%3Cpath d='M12.8 12.8 16.5 16.5'/%3E%3C/svg%3E") center/contain no-repeat}
  .globalbar .gb-kbd{position:absolute; right:8px; top:7px; height:18px; padding:0 6px; border-radius:5px; background:#4a4a4a; color:#b5b5b5; font-size:10.5px; font-family:inherit; font-weight:600; display:flex; align-items:center; letter-spacing:.2px; pointer-events:none}
  .globalbar .gb-right{display:flex; align-items:center; gap:6px; margin-left:auto}
  .globalbar .gb-btn{width:32px; height:32px; border-radius:8px; border:none; background:transparent; color:#e3e3e3; font-size:14px; display:flex; align-items:center; justify-content:center; transition:.14s}
  .globalbar .gb-btn:hover{background:#303030}
  .globalbar .gb-avatar{display:flex; align-items:center; gap:8px; height:32px; padding:0 8px 0 4px; border-radius:8px; background:#303030; color:#e3e3e3; font-size:12.5px; font-weight:600; border:none; transition:.14s}
  .globalbar .gb-avatar:hover{background:#3f3f3f}
  .globalbar .gb-avatar .av{width:24px; height:24px; border-radius:6px; background:#36fba1; color:#0c5132; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700}
  @media(max-width:920px){.globalbar .gb-brand span{display:none} .globalbar{padding:0 8px}}

  /* ===== hamburger ===== */
  .gb-burger{width:32px; height:32px; border-radius:8px; border:none; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; flex:none; transition:background .14s}
  .gb-burger:hover{background:#303030}
  .gb-burger span{display:block; width:16px; height:1.8px; border-radius:2px; background:#e3e3e3; transition:transform .22s var(--ease-soft), opacity .18s}
  body.nav-collapsed .gb-burger span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
  body.nav-collapsed .gb-burger span:nth-child(2){opacity:0}
  body.nav-collapsed .gb-burger span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}

  /* ===== collapsed rail (desktop) ===== */
  .sidebar{transition:width .2s var(--ease-soft), min-width .2s var(--ease-soft), transform .22s var(--ease-soft)}
  body.nav-collapsed .sidebar{width:0; min-width:0; padding-left:0; padding-right:0; overflow:hidden}
  body.nav-collapsed .sidebar > *{opacity:0; pointer-events:none; transition:opacity .1s}

  /* ===== mobile drawer ===== */
  .nav-scrim{display:none; position:fixed; inset:56px 0 0; background:rgba(0,0,0,.45); z-index:29; animation:overlayIn .16s var(--ease-soft)}

  .app{display:flex; min-height:calc(100vh - 56px); position:relative; z-index:1; align-items:flex-start}

  /* ================= SIDEBAR (light Polaris nav) ================= */
  .sidebar{width:232px; min-width:232px; background:var(--bg); color:var(--ink); display:flex; flex-direction:column; position:sticky; top:56px; height:calc(100vh - 56px); z-index:30; overflow:hidden; padding:8px 8px 0; border-right:1px solid transparent}
  .sidebar::after{content:none}
  .brand{padding:8px 8px 10px; border-bottom:none; position:relative}
  .brand .logo{display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; transition:.14s}
  .brand .logo:hover{background:#e3e3e3}
  .brand .logo .mark{width:30px;height:30px;border-radius:8px;background:#303030;display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;flex-shrink:0;box-shadow:none; position:relative}
  .brand .logo .mark::after{content:none}
  .brand h1{font-size:13.5px; letter-spacing:normal; color:var(--ink); font-weight:650}
  .brand p{font-size:11.5px; color:var(--muted); margin-top:1px; letter-spacing:normal}
  .nav{padding:2px 0 10px; flex:1; overflow-y:auto; position:relative}
  .nav .nav-sec{font-size:11px; text-transform:none; letter-spacing:normal; color:var(--muted); padding:14px 8px 4px; font-weight:650}
  .nav .nav-sec:first-child{padding-top:2px}.nav-group-toggle{width:100%;border:none;background:transparent;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.nav-group-toggle .arr{font-size:12px;transition:transform .15s}.nav-group-toggle.closed .arr{transform:rotate(-90deg)}.nav-group-items.closed{display:none}
  .nav-item{display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; color:var(--ink); text-decoration:none; font-size:13px; margin-bottom:1px; width:100%; background:none; border:none; text-align:left; transition:background .12s var(--ease-soft); position:relative; font-weight:550; min-height:32px}
  .nav-item:hover{background:#e3e3e3; color:var(--ink); transform:none}
  .nav-item.active{background:#e3e3e3; color:var(--ink); font-weight:650; box-shadow:none}
  .nav-item.active::before{content:""; position:absolute; left:-8px; top:50%; transform:translateY(-50%); width:3px; height:20px; background:#303030; border-radius:0 3px 3px 0; opacity:1}
  .nav-item .ico{width:20px; height:20px; display:flex; align-items:center; justify-content:center; flex:none; color:#4a4a4a}
  .nav-item.active .ico{color:#303030}
  .nav-item .nl{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  svg.i{flex:none; display:block; overflow:visible}
  .btn svg.i{margin-right:-1px}
  .nav-item .cnt{margin-left:auto; background:#e3e3e3; color:var(--muted); border-radius:8px; padding:1px 7px; font-size:11.5px; font-weight:650; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
  .nav-item.active .cnt{background:#fff; color:var(--ink)}
  .side-foot{padding:12px 18px 16px; border-top:1px solid #dcdcdc; font-size:11.5px; color:var(--muted); line-height:1.5; position:relative; margin:0 -8px}
  .side-foot .dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:#29845a; margin-right:7px; box-shadow:0 0 0 2.5px rgba(41,132,90,.18)}
  .side-foot .sf-sub{margin-top:3px; padding-left:14px; color:#8a8a8a; font-size:11px}

  /* ================= MAIN / PAGE HEADER ================= */
  .main{flex:1; min-width:0; display:flex; flex-direction:column; background:var(--bg)}
  .topbar{background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:none; padding:20px 24px 4px; display:flex; align-items:center; gap:16px; position:static; z-index:20; box-shadow:none; max-width:none; width:100%; margin:0}
  .topbar h2{font-size:20px; font-weight:650; letter-spacing:normal; color:var(--ink); line-height:1.3; display:flex; align-items:center; gap:8px}
  .backlink{width:28px; height:28px; border-radius:8px; background:#fff; box-shadow:var(--btn-shadow); border:none; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; flex:none; transition:background .12s}
  .backlink:hover{background:#f1f1f1}
  .topbar .sub{font-size:12.5px; color:var(--muted); margin-top:2px}
  .topbar .spacer{flex:1}
  .topbar .actions{display:flex; gap:8px; flex-wrap:wrap}
  .content{padding:16px 24px 60px; max-width:none; width:100%; margin:0; animation:fadeUp .2s var(--ease-soft)}
  
  @media(min-width:1500px){.topbar{padding:20px 32px 4px} .content{padding:16px 32px 60px} .msgbox{padding:0 32px}}
  @keyframes fadeUp{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}

  /* ================= BUTTONS (Polaris) ================= */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; border-radius:8px; padding:0 12px; min-height:32px; font-size:13px; font-weight:600; transition:background .12s var(--ease-soft), box-shadow .12s; white-space:nowrap; letter-spacing:normal; line-height:1}
  .btn-primary{background:#303030; color:#fff; box-shadow:var(--btn-shadow-dark)}
  .btn-primary:hover{background:#1a1a1a; transform:none; filter:none}
  .btn-primary:active{background:#000; transform:none}
  .btn-primary:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
  .btn-ghost{background:#fff; color:var(--ink); border:none; box-shadow:var(--btn-shadow)}
  .btn-ghost:hover{background:#f7f7f7; border-color:transparent; transform:none; box-shadow:var(--btn-shadow)}
  .btn-ghost:active{background:#f0f0f0}
  .btn-danger{background:#fff; color:#8e1f0b; box-shadow:var(--btn-shadow)}
  .btn-danger:hover{background:#fdf3f1; transform:none}
  .btn-sm{padding:0 10px; min-height:28px; font-size:12.5px; border-radius:8px}
  .btn-icon{background:none; border:none; border-radius:8px; width:28px; height:28px; font-size:13px; color:var(--muted); transition:.12s var(--ease-soft); display:inline-flex; align-items:center; justify-content:center}
  .btn-icon:hover{background:#f1f1f1; color:var(--ink); transform:none}
  .btn-icon.danger{background:none; color:#8e1f0b; border-radius:8px}
  .btn-icon.danger:hover{background:#8e1f0b; color:#fff}
  .btn-icon.danger svg.i{stroke:none}
  .btn-icon.danger[disabled], .btn-icon.danger[disabled]:hover{background:none; color:#b5b5b5}
  .btn-icon.recv{background:#e6f6ec; color:#0c5132}
  .btn-icon.recv:hover{background:#cdfee1}

  /* ================= CARDS / STATS ================= */
  .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:16px}
  .stat{background:var(--card); border:none; border-radius:var(--radius); padding:14px 16px; box-shadow:0 0 0 1px rgba(0,0,0,.06), var(--shadow); position:relative; overflow:hidden; transition:box-shadow .15s var(--ease-soft)}
  .stat::before{content:none}
  .stat:hover{transform:none; box-shadow:0 0 0 1px rgba(0,0,0,.10), var(--shadow-md)}
  .stat .lbl{font-size:12px; text-transform:none; letter-spacing:normal; color:var(--muted); font-weight:600}
  .stat .val{font-size:22px; font-weight:650; margin-top:6px; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.2px}
  .stat .val small{font-size:12px; font-weight:550; color:var(--muted)}
  .stat .extra{font-size:12px; color:var(--muted); margin-top:4px}
  .stat .chip{position:absolute; right:12px; top:12px; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; background:#f1f1f1; color:#4a4a4a; transition:.14s}
  .stat.clickable{cursor:pointer}
  .stat.clickable:hover .chip{background:#e3e3e3; color:#303030}
  .stat.clickable:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .stat .lbl{padding-right:36px}
  /* thin progress bar */
  .prog{height:4px; border-radius:99px; background:#e3e3e3; overflow:hidden; margin-top:9px}
  .prog span{display:block; height:100%; border-radius:99px; background:#303030; transition:width .5s var(--ease-soft)}
  .prog.green span{background:#29845a}
  .stat:hover .chip{transform:none}
  .stat.pink .val{color:var(--ink)}
  .stat.pink .chip{background:#f1f1f1}
  .stat.green .val{color:#0c5132}
  .stat.green .chip{background:#cdfee1}

  /* ================= PIPELINE ================= */
  .flow-card{background:var(--card); border:none; border-radius:var(--radius); padding:16px; box-shadow:0 0 0 1px rgba(0,0,0,.06), var(--shadow); margin-bottom:16px}
  .flow-card .t{font-size:13.5px; font-weight:650}
  .flow-card .s{font-size:12.5px; color:var(--muted); margin-top:2px}
  .flow{display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; margin-top:14px}
  .flow .step{flex:1; min-width:108px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer; transition:.14s var(--ease-soft); position:relative}
  .flow .step:hover{border-color:#b5b5b5; transform:none; box-shadow:var(--shadow-md); background:#fafafa}
  .flow .step .n{font-size:18px; font-weight:650; color:var(--ink); font-variant-numeric:tabular-nums}
  .flow .step .t{font-size:12px; color:var(--muted); margin-top:2px; font-weight:550; letter-spacing:normal}
  .flow .step .ic{float:right; color:#8a8a8a; display:flex}
  .flow .step:hover .ic{color:#303030}
  .flow .arrow{display:flex; align-items:center; color:#c9c9c9; padding:0 2px; transform:rotate(-90deg)}
  @media(max-width:920px){.flow .arrow{display:none}}
  .modcell{display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-weight:550}
  .modcell svg.i{color:#616161}

  /* ================= TABLES / INDEX ================= */
  .panel{background:var(--card); border:none; border-radius:var(--radius); box-shadow:0 0 0 1px rgba(0,0,0,.06), var(--shadow); overflow:hidden}

  .dpop{position:fixed; top:0; left:0; z-index:210; display:none; width:284px; padding:12px;
        background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.22)}
  .dpop.show{display:block; animation:drop .12s var(--ease-soft)}
  .dpop-head{display:flex; align-items:center; gap:6px; margin-bottom:8px}
  .dpop-title{flex:1; text-align:center; font-size:13.5px; font-weight:650; color:var(--ink)}
  .dpop-nav{width:28px; height:28px; border:none; border-radius:8px; background:transparent; color:var(--ink);
            display:flex; align-items:center; justify-content:center; transition:background .12s}
  .dpop-nav:hover{background:#f1f1f1}
  .dpop-next svg{transform:rotate(180deg)}
  .dpop-dow{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:2px}
  .dpop-dow span{text-align:center; font-size:11.5px; font-weight:650; color:var(--muted); padding:4px 0}
  .dpop-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
  .dpc{height:34px; border:none; border-radius:8px; background:transparent; font-size:13px; font-weight:550;
       color:var(--ink); display:flex; align-items:center; justify-content:center; transition:background .1s}
  .dpc:hover{background:#f1f1f1}
  .dpc-mute{pointer-events:none}
  .dpc-today{box-shadow:inset 0 0 0 1px var(--line); font-weight:700}
  .dpc-sel{background:#303030; color:#fff; font-weight:700}
  .dpc-sel:hover{background:#1a1a1a}
  .dpop-foot{display:flex; justify-content:space-between; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}

  /* ===== Shopify-style report date range ===== */
  .rdp-trig{display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 10px 0 8px; border:none; border-radius:8px;
            background:#fff; box-shadow:var(--btn-shadow); font-size:13px; font-weight:650; color:var(--ink)}
  .rdp-trig:hover{background:#f7f7f7}
  .rdp-trig .rdp-calic{display:inline-flex; color:#616161}
  .rdp-chip{display:inline-flex; align-items:center; height:32px; padding:0 12px; border-radius:8px; background:#fff;
            box-shadow:var(--btn-shadow); font-size:13px; font-weight:550; color:var(--ink)}
  .rdp-pop{position:fixed; z-index:220; display:none; background:#fff; border:1px solid var(--line); border-radius:14px;
           box-shadow:0 18px 48px rgba(0,0,0,.22); overflow:hidden; min-width:min(760px,94vw)}
  .rdp-pop.show{display:flex; animation:drop .12s var(--ease-soft)}
  .rdp-side{width:168px; flex:none; padding:8px; border-right:1px solid var(--line); background:#fafafa}
  .rdp-si{display:block; width:100%; text-align:left; border:none; background:transparent; border-radius:8px;
          padding:8px 10px; font-size:13px; font-weight:550; color:var(--ink); margin-bottom:1px}
  .rdp-si:hover{background:#f1f1f1}
  .rdp-si.on{background:#e3e3e3; font-weight:650; box-shadow:var(--btn-shadow)}
  .rdp-main{flex:1; min-width:0; display:flex; flex-direction:column; background:#fff}
  .rdp-dates{display:flex; align-items:center; gap:10px; padding:12px 16px 6px}
  .rdp-date{flex:1; min-width:0}
  .rdp-date .inp{cursor:text; background:#fff}
  .rdp-date.on .inp{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent)}
  .rdp-arrow{color:var(--muted); flex:none; font-size:16px; font-weight:650}
  .rdp-lastbar{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 16px 4px}
  .rdp-lastbar .inp{width:auto; min-width:72px}
  .rdp-n{width:64px!important; min-width:64px!important; text-align:center}
  .rdp-check{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:550; margin-left:8px; cursor:pointer}
  .rdp-pills{display:flex; flex-wrap:wrap; gap:6px}
  .rdp-pill{height:28px; padding:0 10px; border:none; border-radius:8px; background:#f1f1f1; font-size:12.5px; font-weight:600}
  .rdp-pill.on{background:#303030; color:#fff}
  .rdp-cals{display:flex; gap:8px; padding:8px 16px 12px; flex-wrap:wrap}
  .rdp-cal{width:280px; min-width:260px; flex:1}
  .rdp-cal-h{display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:6px; font-size:13.5px; font-weight:650}
  .rdp-cal-h .dpop-nav{position:static}
  .rdp-hint{font-size:12.5px; color:var(--muted); padding:4px 16px 8px}
  .rdp-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 16px;
            border-top:1px solid var(--line); background:#fff}
  .rdp-foot .rdp-sum{font-size:13px; font-weight:550; color:var(--muted)}
  .dpc-in{background:#f1f1f1}
  .dpc-in.dpc-sel, .dpc-sel.dpc-in{background:#303030; color:#fff}
  @media(max-width:820px){
    .rdp-pop.show{flex-direction:column; max-height:86vh; overflow:auto}
    .rdp-side{width:auto; border-right:none; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:4px}
    .rdp-si{width:auto}
  }

  /* ===== Masters: tabbed layout ===== */
  .masters-wrap{display:grid; grid-template-columns:232px minmax(0,1fr); gap:16px; align-items:start}
  .mnav{background:#fff; border-radius:12px; box-shadow:0 0 0 1px rgba(0,0,0,.06), var(--shadow); padding:8px; position:sticky; top:16px}
  .mnav-sec{font-size:11px; font-weight:650; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; padding:12px 8px 4px}
  .mnav-sec:first-child{padding-top:4px}
  .mnav-item{display:flex; align-items:center; gap:9px; width:100%; border:none; background:none; text-align:left;
             padding:7px 8px; border-radius:8px; font-size:13px; font-weight:550; color:var(--ink); min-height:32px; transition:background .12s}
  .mnav-item:hover{background:#f1f1f1}
  .mnav-item.active{background:#f1f1f1; font-weight:650; box-shadow:var(--btn-shadow)}
  .mnav-item .mn-ic{width:20px; height:20px; display:flex; align-items:center; justify-content:center; color:#616161; flex:none}
  .mnav-item.active .mn-ic{color:#303030}
  .mnav-item .mn-l{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .mnav-item .cnt{font-size:11.5px; font-weight:650; color:var(--muted); background:#ebebeb; border-radius:6px; padding:0 6px; min-width:20px; text-align:center}
  .mnav-item.active .cnt{background:#fff; color:var(--ink)}
  .mpanel{padding:18px 20px 20px}
  .mhead{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px}
  .mhead h3{font-size:15px; font-weight:650; display:flex; align-items:center; gap:8px}
  .mhead h3 .c{font-size:12px; font-weight:650; color:var(--muted); background:#f1f1f1; border-radius:8px; padding:1px 8px}
  .mhead p{font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.5}
  .mtools{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px}
  .mtools .add-row .inp{min-width:160px}
  .msearch{max-width:260px; flex:0 1 260px}
  .mlist{max-height:none; border-radius:10px}
  .mlist .master-item{padding:10px 12px}
  #inward-items tr.row-over td{background:#fff5f4}
  #inward-items tr.row-over input[data-f="recQty"]{border-color:#8e1f0b; box-shadow:0 0 0 2px rgba(142,31,11,.18)}
  #inward-items .tdr{color:var(--ink)}
  .segbar{display:inline-flex; gap:4px; padding:3px; background:#f1f1f1; border-radius:10px}
  .seg{display:inline-flex; align-items:center; gap:6px; border:none; background:transparent; border-radius:8px;
       padding:6px 14px; font-size:13px; font-weight:600; color:var(--muted); transition:.12s}
  .seg:hover{color:var(--ink)}
  .seg.on{background:#fff; color:var(--ink); box-shadow:var(--btn-shadow)}
  .seg.locked{cursor:not-allowed; opacity:.55}
  .seg.locked:hover{color:var(--muted)}
  .seg.on.locked{opacity:1; color:var(--ink)}
  .seg svg.i{color:currentColor}
  #jw-issues td:nth-child(3), #jw-extras td:nth-child(3){min-width:130px}
  #jw-issues td:nth-child(4), #jw-extras td:nth-child(4){min-width:170px}
  #jw-issues td:nth-child(5), #jw-extras td:nth-child(5){min-width:150px}
  #jw-issues td:nth-child(3), #jw-extras td:nth-child(3){min-width:150px}
  #jw-issues .po-ref-cell, #jw-extras .po-ref-cell{min-width:120px}
  #jw-issues .uom-cell, #jw-extras .uom-cell{min-width:0; width:74px}
  #jw-issues .pod-cell, #jw-extras .pod-cell{min-width:150px}
  #jw-issues .uom-cell .inp, #jw-extras .uom-cell .inp{width:74px; text-align:center; padding-left:6px; padding-right:6px}
  #inward-items td:nth-child(2), #pr-items td:nth-child(2){min-width:140px}
  #inward-items td:nth-child(3), #pr-items td:nth-child(3){min-width:210px}
  #pr-items td.srcol, #pr-table th.srcol{text-align:center; width:52px}
  #pr-items td{vertical-align:middle}
  #pr-items td.num{font-variant-numeric:tabular-nums}
  #pr-items td:nth-child(6) .inp.num{width:96px; min-width:88px}
  #pr-items td:nth-child(8) .inp.num{width:96px; min-width:88px}
  .cellhint{font-size:10.5px; line-height:1.3; margin-top:3px; min-height:12px; color:var(--muted)}
  .cellhint.ok{color:#0c5132}
  .cellhint.bad{color:#8e1f0b}
  .inp.inp-bad{border-color:#8e1f0b; box-shadow:0 0 0 2px rgba(142,31,11,.15)}
  /* required-field highlight applied on save */
  .cbox.cbox-bad .cbox-input, .mcbox.cbox-bad .mcbox-input{border-color:#8e1f0b; box-shadow:0 0 0 2px rgba(142,31,11,.15)}
  .field.field-bad > .lbl, .field.field-bad > label.lbl{color:#8e1f0b; font-weight:650}
  .field.field-bad > .lbl::after{content:' \2022'; font-weight:800; font-size:15px; line-height:0; vertical-align:middle}
  td.cell-bad{background:#fff5f4}
  .req-flash{animation:reqFlash .5s var(--ease-soft) 1}
  @keyframes reqFlash{0%{box-shadow:0 0 0 0 rgba(142,31,11,.45)}70%{box-shadow:0 0 0 6px rgba(142,31,11,0)}100%{box-shadow:0 0 0 0 rgba(142,31,11,0)}}
  #pt-billtos td{min-width:130px; vertical-align:top}
  #pt-billtos .bt-addr{min-width:210px}
  #pt-billtos td:nth-child(2){min-width:170px}
  #pt-billtos td:last-child{min-width:0}
  .intot-wrap{max-width:420px; margin-left:auto}
  .inward-bottom-grid{display:grid;grid-template-columns:minmax(0,54%) minmax(280px,30%);gap:18px;justify-content:space-between;align-items:start;margin-top:24px}.inward-bottom-grid.single{grid-template-columns:minmax(0,54%);justify-content:start}.inward-bottom-grid .sec{margin-top:0}.inward-summary-panel .intot-wrap{width:100%;max-width:none;margin-left:0}.inward-attachments-panel,.inward-summary-panel{min-width:0}.inward-attachments-panel .table-wrap{max-width:100%}@media(max-width:1050px){.inward-bottom-grid,.inward-bottom-grid.single{grid-template-columns:1fr;justify-content:stretch}}
  .grid-even5{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0 14px}
  .grid-even5 .inp, .grid-even5 .inp.num{width:100%}
  @media(max-width:1100px){.grid-even5{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media(max-width:760px){.grid-even5{grid-template-columns:1fr}}
  .intot{width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:10px; overflow:hidden; min-width:0}
  .intot th{background:#fff; text-align:left; font-size:12.5px; font-weight:600; color:var(--ink);
            padding:9px 14px; border-bottom:1px solid var(--line2); text-transform:none; letter-spacing:normal; position:static}
  .intot td{text-align:right; font-size:12.5px; padding:9px 14px; border-bottom:1px solid var(--line2); font-variant-numeric:tabular-nums}
  .intot tr:last-child th, .intot tr:last-child td{border-bottom:none}
  .intot tr.grand th, .intot tr.grand td{font-weight:700; background:#f7f7f7}
  .att-cell{position:relative;min-width:180px}.att-upload-box{width:164px;min-height:108px;margin:0}.att-preview-cell{width:90px;white-space:nowrap}
  .att-none{font-size:12.5px; color:var(--muted)}
  .att-has{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:550; color:#0c5132}
  .att-file{display:block; margin-top:6px; font-size:12px; max-width:240px}
  #inward-items .tdr .sub-line{font-weight:550}
  .master-item .inuse{display:inline-block; margin-left:8px; font-size:11px; font-weight:600; color:var(--muted);
                      background:#f1f1f1; border-radius:6px; padding:1px 7px; vertical-align:middle}
  .master-item.mi-locked{background:#fcfcfc}
  .btn-icon[disabled]{opacity:.38; cursor:not-allowed}
  .btn-icon[disabled]:hover{background:none; color:var(--muted)}
  @media(max-width:920px){
    .masters-wrap{grid-template-columns:1fr}
    .mnav{position:static; display:flex; flex-wrap:wrap; gap:4px}
    .mnav-sec{width:100%; padding:6px 8px 2px}
    .mnav-item{width:auto}
    .mnav-item .cnt{display:none}
  }

  /* ===== index tabs (saved views) ===== */
  .tabs{display:flex; gap:2px; padding:6px 8px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; background:#fff}
  .tabs::-webkit-scrollbar{display:none}
  .tab{border:none; background:none; border-radius:8px; padding:5px 10px; font-size:13px; font-weight:550; color:var(--muted); white-space:nowrap; display:inline-flex; align-items:center; gap:6px; transition:background .12s, color .12s; position:relative}
  .tab:hover{background:#f1f1f1; color:var(--ink)}
  .tab.active{background:#f1f1f1; color:var(--ink); font-weight:650; box-shadow:var(--btn-shadow)}
  .tab .tc{font-size:11.5px; font-weight:600; color:var(--muted); background:#ebebeb; border-radius:6px; padding:0 5px; min-width:18px; text-align:center}
  .tab.active .tc{background:#e3e3e3; color:#303030}

  .rowcount{font-size:12.5px; color:var(--muted); font-weight:550; margin-left:auto; white-space:nowrap}
  .pager{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border-top:1px solid var(--line); background:#fff}
  .pager-nav{display:flex; align-items:center; gap:4px; margin-left:auto}
  .pager-num{min-width:28px; height:28px; border:none; background:transparent; border-radius:8px; font-weight:600; font-size:13px; color:var(--ink)}
  .pager-num:hover{background:#f1f1f1}
  .pager-num.on{background:#f1f1f1; box-shadow:var(--btn-shadow)}
  .pager-gap{color:var(--muted); padding:0 4px; font-size:13px}
  .pager .inp{width:auto; min-width:108px}
  .pager .btn[disabled]{opacity:.38; cursor:not-allowed}

  /* ===== bulk action bar ===== */
  .bulkbar{display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--line); background:#f1f1f1; font-size:13px; animation:slideDown .14s var(--ease-soft)}
  .bulkbar .bsp{flex:1}
  .bulkbar .cbox{min-width:150px}
  @keyframes slideDown{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}

  /* ===== checkbox ===== */
  .cbx{display:inline-flex; align-items:center; cursor:pointer}
  .cbx input{appearance:none; -webkit-appearance:none; width:17px; height:17px; border-radius:5px; border:1.5px solid #8a8a8a; background:#fff; cursor:pointer; position:relative; transition:.12s; margin:0}
  .cbx input:hover{border-color:#616161}
  .cbx input:checked{background:#303030; border-color:#303030}
  .cbx input:checked::after{content:""; position:absolute; left:5px; top:1.5px; width:4px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg)}
  .cbx input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}

  .filter-bar{display:flex; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); flex-wrap:wrap; align-items:center; background:#fff}
  .filter-bar .cbox{min-width:150px}
  .search{flex:1; min-width:200px; position:relative}
  .search .inp{width:100%; padding-left:34px; background:#fff}
  .search::before{content:none}
  .search > svg.i{position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; z-index:1}
  .table-wrap{overflow-x:auto}
  table{width:100%; border-collapse:collapse; min-width:780px}
  th{background:#f7f7f7; font-size:12px; text-transform:none; letter-spacing:normal; color:var(--muted); text-align:left; padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap; font-weight:650; position:sticky; top:0; z-index:2}
  .list-panel{display:flex; flex-direction:column; max-height:calc(100vh - 158px)}
  .list-panel .index-stick{flex:none; background:#fff; z-index:6}
  .list-panel .table-wrap{flex:1 1 auto; min-height:0; overflow:auto}
  .list-panel .table-wrap th{position:sticky; top:0; z-index:4; background:#f7f7f7; box-shadow:0 1px 0 var(--line)}
  .list-panel .pager{flex:none}
  .mpanel{display:flex; flex-direction:column; max-height:calc(100vh - 158px); overflow:hidden}
  .mpanel.menu-editor-host,.mpanel.user-editor-host{max-height:calc(100vh - 120px);overflow:auto;display:block}
  .mpanel .mhead, .mpanel .mtools{flex:none; background:#fff}
  .mpanel .mlist, .mpanel .master-list{flex:1 1 auto; min-height:120px; overflow:auto; max-height:none}
  .mpanel .pager{flex:none}
  .mnav{max-height:calc(100vh - 158px); overflow:auto}
  #im-list .table-wrap, #pt-list .table-wrap, #rep-body .table-wrap{
    max-height:min(62vh, calc(100vh - 260px)); overflow:auto}
  #im-list th, #pt-list th, #rep-body th{position:sticky; top:0; z-index:3; background:#f7f7f7; box-shadow:0 1px 0 var(--line)}
  td{padding:10px 12px; border-bottom:1px solid var(--line2); vertical-align:middle; font-size:13px}
  .xfilter-row th{padding:5px 6px;background:#fff;position:sticky;top:33px;z-index:3}
  .xfilter-row input{width:100%;min-width:64px;height:26px;border:1px solid #c9c9c9;border-radius:5px;padding:3px 7px;font:inherit;font-size:11.5px;background:#fff;color:var(--ink);outline:none}
  .xfilter-row input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
  .xfilter-row input::placeholder{color:#9a9a9a}
  th.sortable{cursor:pointer; user-select:none; transition:background .1s, color .1s}
  th.sortable:hover{background:#f1f1f1; color:var(--ink)}
  th.sortable.on{color:var(--ink)}
  th .thin{display:inline-flex; align-items:center; gap:4px}
  th.num .thin{justify-content:flex-end; width:100%}
  th .sarr{display:inline-flex; color:var(--ink)}
  th.selcol, td.selcol{width:38px; padding-right:0; padding-left:14px}
  tbody tr{transition:background .1s var(--ease-soft); cursor:pointer}
  tbody tr:hover td{background:#fafafa}
  tbody tr.sel td{background:#f1f6fd}
  tbody tr.sel:hover td{background:#e8f1fc}
  tbody tr:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
  td .badge{vertical-align:middle}
  tbody tr:last-child td{border-bottom:none}
  td.num, th.num{text-align:right; font-variant-numeric:tabular-nums}
  th.srcol, td.srcol{width:52px; min-width:46px; max-width:64px; text-align:center; font-variant-numeric:tabular-nums; color:var(--muted); font-weight:650; white-space:nowrap; padding-left:10px; padding-right:6px}
  .master-item .mi-sr{flex:0 0 32px; width:32px; color:var(--muted); font-weight:650; font-variant-numeric:tabular-nums; font-size:12.5px}
  .master-item .mi-id{flex:0 0 94px!important;width:94px;min-width:94px!important;color:var(--muted);font-weight:650;font-size:12px;white-space:nowrap}
  .master-status-cell{flex:0 0 130px!important;display:flex;align-items:center;gap:8px}.master-status-sw{flex:none}.master-status-label{font-size:11.5px;font-weight:650}.master-status-label.on{color:#0c5132}.master-status-label.off{color:#8e1f0b}
  .master-list-head{display:grid;grid-template-columns:32px 94px minmax(0,1fr) 130px 72px;gap:8px;padding:7px 12px;background:#f7f7f7;border:1px solid var(--line);border-bottom:none;border-radius:10px 10px 0 0;font-size:11.5px;font-weight:650;color:var(--muted)}
  .master-list-head + .master-list{border-radius:0 0 10px 10px}
  .sub-line{font-size:12px; color:var(--muted); margin-top:1px}
  .actions-cell{white-space:nowrap; text-align:right}
  .empty{text-align:center; padding:56px 24px; color:var(--muted); display:flex; flex-direction:column; align-items:center}
  .empty .big{width:56px; height:56px; border-radius:14px; background:#f1f1f1; color:#616161; display:flex; align-items:center; justify-content:center; margin-bottom:14px; filter:none; opacity:1}
  .empty h3{font-size:14.5px; font-weight:650; color:var(--ink); margin-bottom:5px}
  .empty p{margin-bottom:16px; font-size:13px; max-width:420px; line-height:1.5}

  /* ================= INPUTS ================= */
  .inp{background:#fff; border:1px solid #8a8a8a; border-top-color:#5c5c5c; border-radius:8px; padding:6px 12px; min-height:32px; outline:none; transition:box-shadow .12s var(--ease-soft), border-color .12s; width:100%}
  .inp:hover{border-color:#616161}
  .inp:focus{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent)}
  .inp::placeholder{color:#8a8a8a}
  /* ===== date field + calendar popover ===== */
  .mini-table td .inp[data-date]{min-width:132px}
  .inp[data-date]{padding-left:34px; cursor:pointer; background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMCAyMCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjNjE2MTYxJyBzdHJva2Utd2lkdGg9JzEuNScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJz48cmVjdCB4PSczLjI1JyB5PSc0Ljc1JyB3aWR0aD0nMTMuNScgaGVpZ2h0PScxMicgcng9JzInLz48cGF0aCBkPSdNMy4yNSA4LjI1aDEzLjVNNyAzLjV2Mi41TTEzIDMuNXYyLjUnLz48L3N2Zz4=); background-repeat:no-repeat; background-position:10px center; background-size:16px 16px}
  .inp[data-date]:disabled{cursor:not-allowed}

  .inp-sm{padding:4px 10px; min-height:28px; font-size:12.5px; width:auto}
  .inp.num{width:96px}
  .lbl{display:block; font-size:12.5px; font-weight:550; color:var(--ink); text-transform:none; letter-spacing:normal; margin:0 0 4px}
  .field{margin-bottom:14px}
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
  .grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 14px}
  .grid-auto{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0 14px}
  /* fixed-width row: fields keep a sane width instead of stretching edge to edge */
  /* inline validation hints under a field */
  .fhint{font-size:11.5px; margin-top:4px; min-height:14px; color:var(--muted)}
  .fhint.ok{color:#0c5132}
  .fhint.bad{color:#8e1f0b}
  /* hide native spinners — the app validates input itself */
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
  input[type=number]{-moz-appearance:textfield; appearance:textfield}
  .grid-fixed{display:grid; grid-template-columns:repeat(auto-fill,240px); gap:0 14px; justify-content:start}
  .grid-fixed.wide-last > .field:last-child{grid-column:span 2}
  .grid-fixed.in-jwr > .inj-no{order:1}
  .grid-fixed.in-jwr > .inj-date{order:2}
  .grid-fixed.in-jwr > .inj-jw{order:3}
  .grid-fixed.in-jwr > .inj-ven{order:4}
  .grid-fixed.in-jwr > .inj-wh{order:5}
  .grid-fixed.in-jwr > .inj-ch{order:6}
  .grid-fixed.in-jwr > .inj-by{order:7}
  tr.jw-dgrp{cursor:default}
  tr.jw-dgrp td, tbody tr.jw-dgrp:hover td{background:#f1f1f1; font-weight:650; font-size:12.5px; color:var(--ink); padding:7px 12px; border-bottom:1px solid var(--line)}
  tr.jw-dgrp .jw-dgrp-cell{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
  tr.jw-dgrp .jw-dgrp-n{margin-left:auto; font-weight:550; color:var(--muted); font-size:12px}
  tr.jw-dgrp .jw-dgrp-dc{background:#fff; border-radius:8px; padding:4px 10px; box-shadow:var(--btn-shadow); font-size:12.5px; font-weight:550}
  tr.jw-dgrp .jw-dgrp-dc b{font-weight:700}
  tr.jw-dgrp .jw-dgrp-pod{min-width:160px}
  tr.jw-dgrp .pod-file{max-width:150px}
  /* Date/DC group is displayed inside the item rows instead of consuming a
     separate full-width row. It spans every line belonging to that DC. */
  td.jw-merged-dispatch{min-width:164px; width:164px; padding:10px 12px; vertical-align:middle; text-align:center;
    background:#f7f7f7; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
  tbody tr:hover td.jw-merged-dispatch{background:#f7f7f7}
  .jw-merge-date{display:flex; align-items:center; justify-content:center; gap:7px; font-size:12.5px; white-space:nowrap}
  .jw-merge-date svg{color:var(--muted)}
  .jw-merge-dc{display:inline-flex; align-items:center; justify-content:center; margin-top:9px; padding:4px 8px;
    border-radius:8px; background:#fff; box-shadow:var(--btn-shadow); font-size:12px; white-space:nowrap}
  .jw-merge-lines{margin-top:10px; text-align:center; font-size:11.5px; color:var(--muted); white-space:nowrap}
  .dc-select-summary{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
  .dc-select-summary .stock-chip{margin:0}
  .dc-pod-status{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600}
  .dc-pod-status.ok{color:#0c5132}.dc-pod-status.miss{color:#8a6116}
  .audit-change{font-size:11.5px;line-height:1.4;padding:2px 0;border-bottom:1px dotted #e3e3e3;max-width:560px;white-space:normal;word-break:break-word}.audit-change:last-child{border-bottom:none}
  .audit-note{min-width:260px;max-width:420px;white-space:normal;line-height:1.45;background:#fafafa;color:#303030}
  .sf-builder{background:#eef2f6;border:1px solid #cfd8e3;border-radius:12px;overflow:hidden;min-height:calc(100vh - 180px)}.sf-builder-top{height:58px;background:#fff;border-bottom:1px solid #cfd8e3;display:flex;align-items:center;gap:8px;padding:0 12px}.sf-builder-title{min-width:0;flex:1}.sf-builder-title b{display:block;font-size:14px}.sf-builder-title span{font-size:11px;color:#65758b}.sf-builder-title input{border:none;background:transparent;font-weight:700;font-size:14px;width:min(280px,100%);outline:none;padding:2px 0}.sf-builder-title input:focus{border-bottom:1px solid #0176d3}.sf-builder-body{display:grid;grid-template-columns:310px minmax(0,1fr);min-height:calc(100vh - 238px)}.sf-builder-side{background:#fff;border-right:1px solid #cfd8e3;overflow:auto;max-height:calc(100vh - 180px)}.sf-builder-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #d8e0e8}.sf-builder-tabs button{height:42px;border:none;background:#fff;font-weight:650;color:#526174;border-bottom:3px solid transparent}.sf-builder-tabs button.on{color:#0176d3;border-bottom-color:#0176d3}.sf-side-body{padding:12px}.sf-side-section{margin-top:14px}.sf-side-section h4{font-size:11px;color:#526174;text-transform:uppercase;letter-spacing:.45px;margin:0 0 7px;display:flex;justify-content:space-between}.sf-drop-zone{border:1px dashed #9eafc1;background:#f8fafc;border-radius:7px;min-height:42px;padding:6px}.sf-chip{display:flex;align-items:center;gap:5px;background:#eaf5fe;color:#014486;border:1px solid #b8d8f2;border-radius:5px;padding:5px 7px;margin:3px;font-size:11.5px}.sf-chip span{flex:1}.sf-chip button{border:none;background:transparent;color:#526174;padding:0 2px}.sf-fields{max-height:260px;overflow:auto;border:1px solid #e0e6ed;border-radius:7px}.sf-field{display:flex;align-items:center;gap:7px;padding:7px 9px;border-bottom:1px solid #eef1f4;font-size:11.5px}.sf-field:last-child{border-bottom:none}.sf-field:hover{background:#f3f8fc}.sf-report-canvas{min-width:0;padding:12px;overflow:auto}.sf-preview-head{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #d5dde6;border-bottom:none;border-radius:8px 8px 0 0;padding:9px 11px}.sf-preview-head b{flex:1}.sf-preview-head span{font-size:11px;color:#65758b}.sf-report-table{background:#fff;border:1px solid #d5dde6;border-radius:0 0 8px 8px;overflow:auto;max-height:calc(100vh - 340px)}.sf-report-table table{min-width:900px}.sf-report-table th{background:#f4f6f9;border-right:1px solid #d8e0e8}.sf-report-table td{border-right:1px solid #edf0f3}.sf-filter-card{border:1px solid #d8e0e8;border-radius:7px;padding:8px;margin-bottom:7px;background:#fff}.sf-filter-card b{font-size:11.5px}.sf-filter-card div{font-size:10.5px;color:#65758b;margin-top:2px}.sf-builder .btn-brand{background:#0176d3;color:#fff;box-shadow:none}.sf-builder .btn-brand:hover{background:#0b5cab}.sf-format-pills{display:flex;background:#eef2f6;border-radius:7px;padding:3px}.sf-format-pills button{border:none;background:transparent;border-radius:5px;padding:5px 8px;font-size:11px}.sf-format-pills button.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15)}.sf-unsaved{color:#b85d00;font-size:10.5px}.sf-proto-badge{background:#ede9fe;color:#6d28d9;border-radius:5px;padding:3px 7px;font-size:10px;font-weight:700}.sf-builder-chart{background:#fff;border:1px solid #d5dde6;border-bottom:none;padding:10px;border-radius:8px 8px 0 0}@media(max-width:980px){.sf-builder-body{grid-template-columns:1fr}.sf-builder-side{max-height:none;border-right:none;border-bottom:1px solid #cfd8e3}.sf-report-canvas{padding:8px}}
  .reporting-shell{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;align-items:start}.reporting-main{min-width:0;grid-column:2}.reporting-customize{grid-column:1;grid-row:1}.reporting-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;background:#fff;border-bottom:1px solid var(--line)}.reporting-toolbar .report-name{min-width:190px;max-width:280px}.reporting-toolbar .inp{width:auto}.reporting-customize{background:#fff;border-radius:12px;box-shadow:0 0 0 1px rgba(0,0,0,.06);position:sticky;top:72px;max-height:calc(100vh - 100px);overflow:auto}.reporting-customize h3{font-size:14px;padding:14px;border-bottom:1px solid var(--line)}.pivot-section{padding:10px 12px;border-bottom:1px solid var(--line)}.pivot-section h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin:0 0 8px}.pivot-option{display:flex;align-items:center;gap:8px;padding:6px 4px;font-size:12.5px;cursor:pointer}.pivot-option input{width:16px;height:16px}.pivot-table th{position:sticky;top:0}.pivot-table td.pivot-break{font-weight:600}.pivot-indent{display:inline-block}.pivot-total td{font-weight:700;background:#f1f6fd}.pivot-head{display:flex;align-items:center;gap:5px;justify-content:space-between}.pivot-menu{border:none;background:transparent;color:var(--muted);width:20px;height:20px;border-radius:4px}.pivot-menu:hover{background:#e3e3e3;color:var(--ink)}.pivot-empty{padding:55px 20px;text-align:center;color:var(--muted)}.saved-report-bar{display:flex;gap:6px;align-items:center}.pivot-filter-chip{display:inline-flex;align-items:center;gap:4px;background:#e8f1fc;color:#00527c;border-radius:6px;padding:2px 7px;font-size:11px;margin:2px}.reporting-summary{display:flex;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}.reporting-summary span{font-size:11.5px;color:var(--muted)}.sf-report-home-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}.sf-report-home-head>div{flex:1}.report-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.report-type-card{border:1px solid var(--line);border-radius:10px;background:#fff;padding:16px;text-align:left;min-height:120px}.report-type-card:hover{border-color:#8aa7c4;box-shadow:0 4px 14px rgba(0,82,124,.1)}.report-type-card b{display:block;font-size:14px;margin-bottom:5px}.report-type-card span{font-size:12px;color:var(--muted)}.pivot-chart{padding:14px;border-bottom:1px solid var(--line);background:#fff}.pivot-chart h4{font-size:12px;margin-bottom:10px}.pivot-bars{display:flex;flex-direction:column;gap:7px}.pivot-bar-row{display:grid;grid-template-columns:150px 1fr 90px;gap:8px;align-items:center;font-size:11.5px}.pivot-bar-track{height:18px;background:#eef2f6;border-radius:4px;overflow:hidden}.pivot-bar-fill{height:100%;background:#0b74b5;border-radius:4px}.pivot-donut-wrap{display:flex;align-items:center;gap:20px}.pivot-donut{width:150px;height:150px;border-radius:50%;position:relative}.pivot-donut::after{content:"";position:absolute;inset:34px;border-radius:50%;background:#fff}.pivot-legend{display:grid;gap:5px;font-size:11.5px}.pivot-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}@media(max-width:1050px){.reporting-shell{grid-template-columns:1fr}.reporting-main,.reporting-customize{grid-column:1;grid-row:auto}.reporting-customize{position:static;max-height:none}.report-type-grid{grid-template-columns:1fr 1fr}}
  .auth-login{position:fixed;inset:0;z-index:999;background:#fff;display:grid;grid-template-columns:minmax(0,2.8fr) minmax(450px,1fr);overflow:hidden}
  .auth-visual{position:relative;min-width:0;margin:28px 28px 48px;background:#eef1f4;border-radius:10px;overflow:visible;box-shadow:0 12px 34px rgba(18,55,91,.13)}
  .auth-visual>img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;border-radius:10px;transition:opacity .35s ease}
  .auth-slide-dots{position:absolute;left:50%;bottom:-31px;z-index:2;transform:translateX(-50%);display:flex;gap:8px;padding:6px 9px;border-radius:99px;background:#d9e0e8;box-shadow:0 2px 8px rgba(18,55,91,.14)}.auth-slide-dots:empty{display:none}.auth-slide-dots button{width:8px;height:8px;border:none;border-radius:50%;background:#9aa8b7;padding:0}.auth-slide-dots button.on{width:22px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px #9aa8b7 inset}
  .auth-side{background:#fff;display:flex;align-items:center;justify-content:center;padding:36px 26px;border-left:1px solid #e7edf3}
  .auth-login-card{width:min(430px,100%);background:#fff;border:none;border-radius:16px;box-shadow:0 20px 55px rgba(18,55,91,.12);padding:38px}
  .auth-login-card .login-eyebrow{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:6px;background:#eef5fb;color:#00527c;font-size:10.5px;font-weight:750;letter-spacing:.8px;text-transform:uppercase;margin-bottom:17px}
  .auth-login-card h2{font-size:26px;line-height:1.2;margin:0 0 6px;color:#17212b}.auth-login-card>p{color:#6b7280;margin:0 0 24px}.auth-login-card .field{margin-bottom:16px}.auth-login-card .inp{min-height:40px;border-color:#c8d0d9}.auth-login-card .trial{font-size:11.5px;color:#4b5563;background:#f8fafc;border:1px solid #e5eaf0;border-radius:8px;padding:8px 10px;margin-bottom:18px;text-align:left}.auth-login-card .login-submit{min-height:42px;background:#086da8}.auth-login-card .login-submit:hover{background:#005985}
  @media(max-width:860px){.auth-login{grid-template-columns:1fr}.auth-visual{display:none}.auth-side{padding:20px}.auth-login-card{max-width:440px;box-shadow:0 14px 40px rgba(18,55,91,.14)}}
  .user-access-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:8px}.user-access-grid label{display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;font-size:12px}
  .perm-table{width:100%;min-width:760px;table-layout:fixed}.perm-table th:first-child,.perm-table td:first-child{width:36%;text-align:left}.perm-table th:not(:first-child),.perm-table td:not(:first-child){width:12.8%;text-align:center;padding-left:6px;padding-right:6px}.perm-table .cbx{justify-content:center}.perm-table td:last-child .btn{margin:0 auto}
  .login-slide-thumb{width:150px;height:82px;object-fit:cover;border:1px solid var(--line);border-radius:8px;background:#e8eef5;display:block}.login-thumb-replace{position:relative;display:inline-block;cursor:pointer}.login-thumb-replace input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.login-thumb-replace span{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);background:rgba(0,0,0,.72);color:#fff;border-radius:5px;padding:3px 8px;font-size:10px;font-weight:650;pointer-events:none}.login-thumb-replace:hover img{filter:brightness(.85)}
  .shop-menu-page{max-width:780px;margin:0 auto}.shop-menu-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}.shop-menu-head>div{flex:1}.shop-menu-name{background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 14px;margin-bottom:14px}.shop-menu-name label{font-size:12px;font-weight:650;display:block;margin-bottom:6px}.shop-menu-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}.shop-menu-card>h4{font-size:14px;margin:0 0 12px}.shop-menu-group{border:1px solid #dfe3e8;border-radius:8px;margin-bottom:8px;overflow:hidden;background:#fff}.shop-menu-group.dragging{opacity:.45;outline:2px dashed #6aa9d8}.shop-menu-parent{display:flex;align-items:center;gap:9px;padding:11px 12px;background:#fafafa;font-size:13px;font-weight:650}.shop-menu-parent .drag{color:#8a8a8a;letter-spacing:-2px}.shop-menu-parent .chev{border:none;background:transparent;width:22px}.shop-menu-parent .count{margin-left:auto;color:var(--muted);font-size:11px}.shop-menu-children{padding:6px 10px 8px 38px;border-top:1px solid #e8ebef}.shop-menu-group.closed .shop-menu-children{display:none}.shop-menu-group.closed .chev{transform:rotate(-90deg)}.shop-menu-child{display:grid;grid-template-columns:24px minmax(0,1fr) 104px;align-items:center;gap:7px;padding:9px 8px;border:1px solid #e1e5ea;border-radius:7px;margin:5px 0;background:#fff;cursor:grab}.shop-menu-child:hover{background:#f8fafc;border-color:#bcc9d6}.shop-menu-child.dragging{opacity:.4}.shop-menu-child .handle{color:#8a8a8a}.shop-menu-child small{display:block;color:var(--muted);margin-top:2px}.shop-menu-add{width:100%;border:1px dashed #b9c4cf;background:#fff;color:#005bd3;border-radius:7px;padding:9px;text-align:left;margin-top:8px}.shop-menu-save{display:flex;justify-content:flex-end;margin-top:12px}
  @media(max-width:760px){.user-access-grid{grid-template-columns:1fr 1fr}}
  td.jw-merged-pod{vertical-align:middle; text-align:center; min-width:178px; width:178px; padding:10px 12px;
    background:#fafafa; border-left:1px solid var(--line); border-right:1px solid var(--line)}
  tbody tr:hover td.jw-merged-pod{background:#fafafa}
  td.jw-merged-pod .pod-thumb{display:block; width:max-content; margin:0 auto 6px}
  td.jw-merged-pod .pod-file{display:block; max-width:156px; margin:4px auto 0}
  td.jw-merged-pod .sub-line{max-width:156px; margin:5px auto 0; white-space:normal; overflow-wrap:anywhere; text-align:center}
  .grp-toggle{display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px 0 8px; background:#fff; box-shadow:var(--btn-shadow); border-radius:8px; font-size:13px; font-weight:650; color:var(--ink)}
  .sw{width:36px; height:20px; border:none; border-radius:99px; background:#c9c9c9; position:relative; padding:0; flex:none}
  .sw.on{background:#29845a}
  .sw-knob{position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s}
  .sw.on .sw-knob{transform:translateX(16px)}
  .grp-by{display:inline-flex; align-items:center; gap:8px}
  .grp-by .mcbox{min-width:210px; max-width:280px}
  .grp-by-l{font-size:12.5px; font-weight:650; color:var(--muted)}
  tr.rep-grp td{background:#f1f6fd; font-weight:650; cursor:default}
  tbody tr.rep-grp:hover td{background:#e8f0fb}
  tr.rep-grp.d1 td{background:#f6f8fb; padding-left:28px}
  tr.rep-grp.d2 td{padding-left:44px}
  tr.rep-grp .rep-g-n{font-weight:550; color:var(--muted); margin-left:8px}
  @media(max-width:760px){.grid2,.grid3,.grid-auto{grid-template-columns:1fr}}
  .hint{font-size:12px; color:var(--muted); margin-top:8px; display:block; line-height:1.6}

  /* ===== Shopify-like rich text editor (PO Terms) ===== */
  .rte{border:1px solid #8a8a8a; border-top-color:#5c5c5c; border-radius:8px; background:#fff; overflow:hidden}
  .rte:focus-within{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent)}
  .rte-bar{display:flex; align-items:center; gap:2px; flex-wrap:wrap; padding:6px 8px; border-bottom:1px solid var(--line); background:#fafafa}
  .rte-sep{width:1px; height:18px; background:var(--line); margin:0 5px; flex:none}
  .rte-sel{height:28px; border:none; background:transparent; font:inherit; font-size:13px; font-weight:550; padding:0 6px; border-radius:6px; color:var(--ink); cursor:pointer}
  .rte-sel:hover{background:#e3e3e3}
  .rte-btn{width:28px; height:28px; border:none; background:transparent; border-radius:6px; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; flex:none; padding:0}
  .rte-btn:hover{background:#e3e3e3}
  .rte-btn.on{background:#e3e3e3; box-shadow:var(--btn-shadow)}
  .rte-btn b,.rte-btn i,.rte-btn u,.rte-btn s{font-size:13px; line-height:1; font-family:Georgia,serif}
  .rte-body{min-height:168px; max-height:420px; overflow:auto; padding:12px 14px; outline:none; line-height:1.55; font-size:13.5px; color:var(--ink)}
  .rte-body:empty:before{content:attr(data-ph); color:#8a8a8a; pointer-events:none}
  .rte-body p{margin:0 0 8px}
  .rte-body p:last-child{margin-bottom:0}
  .rte-body h2{font-size:18px; margin:0 0 8px}
  .rte-body h3{font-size:15px; margin:0 0 8px}
  .rte-body blockquote{margin:0 0 8px; padding-left:12px; border-left:3px solid #c9c9c9; color:var(--muted)}
  .rte-body ul,.rte-body ol{margin:6px 0 8px; padding-left:22px}
  .rte-body li{margin:2px 0}
  .rte-body a{color:var(--accent)}
  .rte.code .rte-body{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; white-space:pre-wrap; background:#f7f7f7}

  /* ================= COMBOBOX ================= */
  .cbox{position:relative}
  .cbox .cbox-input{padding-right:30px; cursor:pointer; background:#fff}
  .cbox .cbox-caret{position:absolute; right:9px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; color:var(--muted); pointer-events:none; transition:color .14s}
  .cbox .cbox-caret svg.i{display:block; width:16px; height:16px; stroke-width:1.6}
  .cbox.open .cbox-caret{color:var(--ink)}
  .cbox-list{position:fixed; top:0; left:0; width:auto; min-width:180px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.20); max-height:250px; overflow-y:auto; z-index:200; display:none; padding:4px; animation:drop .12s var(--ease-soft)}
  @keyframes drop{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
  .cbox.open .cbox-list{display:block}
  .cbox.cbox-ro{pointer-events:none;opacity:.72}.cbox.cbox-ro .cbox-input{background:#f4f4f4;color:#6b6b6b;-webkit-text-fill-color:#6b6b6b}
  .cbox-list::-webkit-scrollbar{width:8px}
  .cbox-opt{padding:7px 10px; border-radius:8px; cursor:pointer; font-size:13px; display:flex; align-items:center; gap:8px; transition:background .1s}
  .cbox-opt:hover,.cbox-opt.active{background:#f1f1f1; color:var(--ink)}
  .cbox-opt .tick{margin-left:auto; color:#303030; font-weight:700; font-size:11px}
  .cbox-opt .hint-l{font-size:11.5px; color:var(--muted); margin-left:auto}
  .cbox-search{display:flex; align-items:center; gap:6px; padding:6px 10px 8px; margin-bottom:4px; border-bottom:1px solid var(--line); font-size:11.5px; color:var(--muted); font-weight:550}
  .cbox-search svg.i{color:var(--muted); flex:none}
  .cbox-empty{padding:12px; font-size:12.5px; color:var(--muted); text-align:center}
  .cbox-add{padding:8px 10px; border-radius:8px; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--accent); border-top:1px solid var(--line); margin-top:4px; display:flex; align-items:center; gap:6px}
  .cbox-add:hover{background:#f1f6fd}
  .cbox.compact .cbox-input{padding:4px 26px 4px 10px; min-height:28px; font-size:12.5px}
  td .cbox{max-width:150px}
  td .cbox .cbox-input{border-color:transparent; background:transparent; font-weight:550}
  td .cbox .cbox-input:hover{border-color:#8a8a8a; background:#fff}
  .cbox.compact .cbox-caret svg.i{width:14px; height:14px}
  td .cbox .cbox-caret{opacity:0; transition:opacity .12s}
  tbody tr:hover td .cbox .cbox-caret, td .cbox.open .cbox-caret{opacity:1}
  td .cbox.open .cbox-input{border-color:var(--accent); background:#fff}
  .cbox.compact .cbox-list{font-size:12.5px}

  /* ================= BADGES (Polaris) ================= */
  .badge{display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:8px; font-size:12px; font-weight:550; line-height:1.4; white-space:nowrap; background:#e3e3e3; color:#303030}
  .badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85; flex:none}
  .b-green{background:#cdfee1; color:#0c5132}
  .b-amber{background:#ffd6a4; color:#5e4200}
  .b-red{background:#ffd7d4; color:#8e1f0b}
  .b-blue{background:#d3eafd; color:#00527c}
  .b-gray{background:#e3e3e3; color:#4a4a4a}
  .b-pink{background:#ebd7fd; color:#5700d1}
  .b-yellow{background:#fff2a8; color:#6b5200}
  .b-purple{background:#e6dcff; color:#4c1d95}
  .b-teal{background:#c9f3ec; color:#075e54}

  /* ================= MODAL ================= */
  .overlay{position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:flex-start; justify-content:center; padding:48px 18px; z-index:60; overflow-y:auto; backdrop-filter:none; -webkit-backdrop-filter:none}
  .overlay.show{display:flex; animation:overlayIn .14s var(--ease-soft)}
  @keyframes overlayIn{from{opacity:0}to{opacity:1}}
  .modal{background:#fff; border-radius:14px; width:100%; max-width:min(1100px,94vw); box-shadow:var(--shadow-lg); animation:pop .16s var(--ease-soft); overflow:hidden}
  .modal.modal-wide{max-width:min(1400px,96vw)}
  .modal.modal-xl{max-width:96vw}
  .modal.modal-item{max-width:min(1100px,84vw);height:auto;max-height:78vh;display:flex;flex-direction:column}
  .modal.modal-item .modal-head,.modal.modal-item .modal-foot{flex:none}
  .modal.modal-item .modal-body{flex:0 1 auto;min-height:0;max-height:calc(78vh - 118px);overflow:auto}
  @media(max-width:900px){.modal.modal-item{max-width:96vw;max-height:88vh}.modal.modal-item .modal-body{max-height:calc(88vh - 118px)}}
  .modal.modal-sm{max-width:min(460px,94vw)}
  .dlg-msg{font-size:13.5px; line-height:1.55; color:var(--ink)}
  .dlg-msg .dlg-strong{font-weight:650}
  .dlg-note{margin-top:10px; font-size:12.5px; color:var(--muted); background:#f7f7f7; border-radius:8px; padding:8px 10px}
  .dlg-field{margin-top:4px}
  .dlg-field label{display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:5px}
  .dlg-field + .dlg-field{margin-top:12px}
  .btn-critical{background:#8e1f0b; color:#fff; box-shadow:var(--btn-shadow-dark)}
  .btn-critical:hover{background:#7a1a09}
  @keyframes pop{from{transform:translateY(10px) scale(.99); opacity:0}to{transform:none; opacity:1}}
  .modal-head{display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; backdrop-filter:none; z-index:5}
  .modal-head::before{content:none}
  .modal-head h3{font-size:15px; font-weight:650; flex:1; letter-spacing:normal}
  .modal-head .tag{font-size:12px; font-weight:550; color:#303030; background:#e3e3e3; padding:2px 8px; border-radius:8px; margin-right:8px}
  .modal-body{padding:20px; background:#fff}
  .modal-foot{display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--line); background:#fff; position:sticky; bottom:0}
  /* form section rhythm */
  .entry-page .sec{padding-bottom:8px; border-bottom:1px solid var(--line)}
  .entry-page .sec::after{display:none}
  .inp:disabled,.inp[readonly]{background-color:#fafafa; color:var(--muted)}
  /* date fields stay white and keep their calendar icon even though they're readonly */
  .inp[data-date][readonly]{background-color:#fff; color:var(--ink)}
  .inp[data-date]:disabled{background-color:#fafafa; color:var(--muted)}
  .field:last-child{margin-bottom:0}
  .sec{font-size:13px; font-weight:650; text-transform:none; letter-spacing:normal; color:var(--ink); margin:22px 0 10px; display:flex; align-items:center; gap:10px}
  .sec:first-child{margin-top:0}
  .sec::after{content:""; flex:1; height:1px; background:var(--line)}
  .mini-table th{padding:7px 10px; font-size:11.5px}
  .mini-table td{padding:6px 8px}
  .mini-table .inp{padding:4px 10px; min-height:28px; font-size:12.5px}
  /* date cells keep room for the calendar glyph at the smaller mini-table scale */
  .mini-table .inp[data-date]{padding-left:30px; background-position:8px center; background-size:15px 15px}
  /* readable widths for the PO / entry item grids */
  .mini-table td .cbox{max-width:none}
  .mini-table td .cbox .cbox-input{border-color:#8a8a8a; background:#fff}
  .mini-table th, .mini-table td{white-space:nowrap}
  #po-items td:nth-child(2){min-width:150px}   /* Classification */
  #po-items td:nth-child(3){min-width:230px}   /* Item Name (with code) */
  #po-items td:nth-child(4){min-width:110px}   /* HSN No */
  #po-items td:nth-child(5){min-width:80px}    /* Unit */
  /* auto-filled, read-only cells read as data, not inputs */
  #po-items td .inp:disabled{background:#f7f7f7; border-color:#e3e3e3; color:#4a4a4a; -webkit-text-fill-color:#4a4a4a; opacity:1; cursor:not-allowed}
  #po-items td input.num, #po-items td .inp-sm{min-width:78px}
  .tot-row td{font-weight:650; background:#f7f7f7; border-top:1px solid var(--line); font-variant-numeric:tabular-nums}

  /* ================= CONTEXTUAL SAVE BAR ================= */
  .savebar{position:fixed; top:64px; left:50%; transform:translateX(-50%) translateY(-140%); z-index:70; width:min(1100px, calc(100vw - 32px)); transition:transform .22s var(--ease); pointer-events:none}
  .savebar.show{transform:translateX(-50%) translateY(0); pointer-events:auto}
  .sb-in{background:#303030; border-radius:10px; padding:8px 8px 8px 16px; display:flex; align-items:center; gap:10px; box-shadow:0 6px 20px rgba(0,0,0,.34); color:#e3e3e3; font-size:13px}
  .sb-msg{font-weight:550; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .sb-dot{width:8px; height:8px; border-radius:50%; background:#ffb800; flex:none; box-shadow:0 0 0 3px rgba(255,184,0,.2)}
  .sb-sp{flex:1}
  .sb-in .btn-ghost{background:transparent; color:#e3e3e3; box-shadow:0 0 0 1px #616161 inset}
  .sb-in .btn-ghost:hover{background:#4a4a4a; box-shadow:0 0 0 1px #8a8a8a inset}
  .sb-in .btn-primary{background:#fff; color:#303030; box-shadow:none}
  .sb-in .btn-primary:hover{background:#e3e3e3}
  body.has-savebar .globalbar{background:#1a1a1a}
  @media(max-width:920px){.savebar{top:auto; bottom:12px; transform:translateX(-50%) translateY(180%)}}
  body.has-savebar .topbar{padding-top:64px}

  /* ================= TOASTS (Polaris dark pill) ================= */
  .toast-wrap{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); top:auto; right:auto; z-index:120; display:flex; flex-direction:column; gap:8px; pointer-events:none; align-items:center}
  .toast{background:#303030; color:#fff; padding:10px 16px; border-radius:8px; font-size:13px; font-weight:550; box-shadow:0 4px 12px rgba(0,0,0,.28); display:flex; gap:8px; align-items:center; animation:toastIn .18s var(--ease-soft); max-width:420px; border-left:none}
  .toast .ti{display:flex; color:#36fba1; flex:none}
  .toast.red .ti{color:#ffd7d4}
  .tundo{background:transparent; border:none; color:#fff; font-weight:650; font-size:13px; text-decoration:underline; padding:2px 4px; margin-left:6px; border-radius:6px}
  .tundo:hover{background:rgba(255,255,255,.14); text-decoration:none}
  .toast.green{background:#303030}
  .toast.red{background:#8e1f0b}
  @keyframes toastIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
  .toast.out{opacity:0; transform:translateY(10px); transition:.24s}

  /* ================= MASTERS ================= */
  .master-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:12px}
  .master-box{background:var(--card); border:none; border-radius:var(--radius); padding:16px; box-shadow:0 0 0 1px rgba(0,0,0,.06), var(--shadow); transition:box-shadow .15s var(--ease-soft)}
  .im-thumb{width:28px; height:28px; border-radius:6px; object-fit:cover; vertical-align:middle; margin-right:6px; border:1px solid var(--line)}
  .im-image-col{width:64px}.im-list-image{width:42px;height:42px;border:1px solid var(--line);border-radius:7px;background:#fff;padding:2px;overflow:hidden}.im-list-image img{width:100%;height:100%;object-fit:cover;border-radius:5px;display:block}.im-list-image:hover{border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,91,211,.16)}.im-no-image{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;background:#f1f1f1;border-radius:7px;color:#9a9a9a}
  .item-image-viewer{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:28px}.item-image-viewer-card{max-width:min(900px,92vw);max-height:90vh;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 22px 70px rgba(0,0,0,.4)}.item-image-viewer-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}.item-image-viewer-head b{flex:1}.item-image-viewer-body{padding:14px;display:flex;justify-content:center;background:#f7f7f7}.item-image-viewer-body img{max-width:100%;max-height:calc(90vh - 75px);object-fit:contain;display:block}
  .im-thumb-empty{display:inline-flex; align-items:center; justify-content:center; background:#f1f1f1; font-size:13px}
  .im-thumb-lg{width:54px; height:54px; border-radius:8px; object-fit:cover; border:1px solid var(--line); margin-left:10px}
  .radio-row{display:flex; gap:16px; align-items:center; height:34px; font-size:13px; color:var(--ink)}
  .radio-row label{display:flex; align-items:center; gap:6px; cursor:pointer; font-weight:550}
  .im-equal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .im-equal-grid .field{min-width:0}.im-equal-grid .inp,.im-equal-grid .cbox{width:100%;max-width:none}
  .im-status-toggle{display:flex;align-items:center;gap:10px;min-height:34px}.im-status-toggle b{font-size:12.5px}
  @media(max-width:1000px){.im-equal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:680px){.im-equal-grid{grid-template-columns:1fr}}
  .img-upload-row{display:flex; align-items:center; gap:10px; height:34px}
  .file-btn{position:relative; overflow:hidden; display:inline-flex}
  .file-btn input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%}
  .master-box:hover{box-shadow:0 0 0 1px rgba(0,0,0,.10), var(--shadow-md); transform:none}
  .master-box h4{font-size:13.5px; font-weight:650; margin-bottom:10px; display:flex; align-items:center; gap:8px}
  .master-box h4 .mh-ic{width:26px; height:26px; border-radius:7px; background:#f1f1f1; color:#4a4a4a; display:flex; align-items:center; justify-content:center; flex:none}
  .master-item.mi-empty{color:var(--muted); font-style:normal; justify-content:center; padding:16px 12px; font-size:12.5px}
  .master-box h4 .c{margin-left:auto; font-size:11.5px; background:#e3e3e3; color:var(--muted); padding:1px 8px; border-radius:8px; font-weight:650}
  .master-list{max-height:232px; overflow-y:auto; border:1px solid var(--line); border-radius:10px; margin-bottom:10px}
  .master-item{display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid var(--line2); font-size:13px; gap:8px}
  .master-item:last-child{border-bottom:none}
  .master-item .mi-acts{display:inline-flex; gap:2px; flex:0 0 auto; margin-left:auto}
  .master-item > span:not(.mi-sr):not(.mi-id):not(.mi-acts):not(.master-status-cell){flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
  .mtools{align-items:flex-end}
  .mtools .add-row{align-items:center}
  .mtools .search.msearch{flex:0 0 240px}
  .rc-szhint{text-transform:none; font-weight:550; color:var(--muted); font-size:11px}
  .rc-table .rc-stcol, .rc-table .rc-stname{width:210px; min-width:210px; max-width:210px}
  .rc-stname{font-size:12.5px; line-height:1.35}
  .rc-stname b{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .rc-szcell{min-width:260px}
  /* let the size column soak up all spare width so the fixed columns stay tight */
  .rc-table th:nth-child(4), .rc-table td:nth-child(4){width:100%}
  /* tighter Date / Style / UOM so the size boxes get the room */
  .rc-table .rc-dcol, .rc-table td:nth-child(2){width:112px; min-width:112px; padding-left:6px; padding-right:4px}
  .rc-table td:nth-child(2) .inp,
  .rc-table.mini-table td .inp[data-date]{width:112px; min-width:112px; padding-left:24px; padding-right:4px; background-position:5px center; background-size:14px 14px}
  .jw-stname{font-size:12.5px}
  .rc-addbar{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
  .rc-table .rc-ucol, .rc-table .rc-uom{width:46px; min-width:46px; padding-left:4px; padding-right:4px}
  .rc-table .rc-sumunit{white-space:nowrap}
  .rc-table .rc-uom{color:var(--muted); font-size:12.5px}
  .rc-table .rc-qccol, .rc-table .rc-qc{width:104px; min-width:104px}
  .rc-table .rc-whcol, .rc-table .rc-wh{width:150px; min-width:150px}
  .rc-table .rc-qc .cbox-input, .rc-table .rc-wh .cbox-input{padding-right:26px}
  .rc-table tr.rc-locked .inp{background:#f4f4f4; color:#5a5a5a; -webkit-text-fill-color:#5a5a5a}
  .rc-table .cbox-ro{pointer-events:none; opacity:.75}
  .rc-table .actions-cell{white-space:nowrap}
  .rc-sz{display:flex; flex-wrap:wrap; gap:4px}
  .rc-sz .szbox{margin-right:2px}
  .rc-sz .szin{width:58px}
  .szbal{font-size:10.5px; color:var(--muted); font-weight:600; line-height:1.2}
  .rc-sz-tot{display:inline-block; margin-top:5px; font-size:11.5px; font-weight:700; color:var(--ink)}
  .rc-table .rc-hist td{background:#fafafa}
  .rc-table .rc-hist .inp{background:#fff}
  .rc-table .rc-sumbody{border-top:2px solid var(--line)}
  .rc-table .rc-sum td{padding-top:7px; padding-bottom:7px; border-bottom:none}
  .rc-table .rc-sum .rc-lbl{font-weight:600; color:var(--ink)}
  .rc-table .rc-sum .num b{font-variant-numeric:tabular-nums}
  .rc-table .rc-total-row td{border-top:1px solid var(--line); background:#f7f7f7}
  .rc-table .rc-diff-row td{border-top:1px solid var(--line); font-weight:700}
  .rc-table .rc-diff-row .rc-lbl{font-weight:700}
  .style-cell{min-width:300px}
  .style-cell .cbox-input{text-overflow:ellipsis}
  .mcbox-opt.mcbox-lock{color:var(--muted); cursor:not-allowed; background:#fafafa}
  .mcbox-opt.mcbox-lock:hover{background:#f4f4f4}
  .mcbox-opt.mcbox-lock .tick svg{vertical-align:-2px}
  .dpc.dpc-off{color:#c9c9c9; cursor:not-allowed; background:none}
  .dpc.dpc-off:hover{background:none}
  /* rows locked because downstream entries already consume them */
  tr.row-locked td, tr.jw-edit-locked td{background:#fafafa}
  tr.row-locked .inp, tr.jw-edit-locked .inp{background:#f4f4f4; border-color:#e3e3e3; color:#6b6b6b; -webkit-text-fill-color:#6b6b6b; cursor:not-allowed}
  tr.row-locked .cbox, tr.row-locked .mcbox, tr.jw-edit-locked .cbox, tr.jw-edit-locked .mcbox{pointer-events:none; opacity:.85}
  tr.row-locked .cbox-caret, tr.jw-edit-locked .cbox-caret{opacity:.4}
  tr.jw-edit-locked .jw-row-edit{opacity:1; color:var(--accent); background:#fff; box-shadow:var(--btn-shadow)}
  tr.jw-edit-locked .jw-row-edit:hover{background:#f1f6fd}
  .btn-icon[disabled]{opacity:.35; cursor:not-allowed}
  .btn-icon[disabled]:hover{background:none; color:var(--muted)}
  .lock-note{display:inline-flex; align-items:center; gap:6px; margin:10px 0 0; padding:8px 12px; border-radius:8px;
             background:#fff8e6; color:#5a4300; font-size:12.5px; font-weight:550}
  .po-add-item-bar{display:flex;width:100%;margin-top:10px;clear:both}
  .master-item .meta{font-size:11.5px; color:var(--muted); font-weight:550}
  .add-row{display:flex; gap:8px; flex-wrap:wrap}
  .add-row .inp{flex:1; min-width:112px}
  .add-row .btn{flex-shrink:0}
  .section-title{font-size:15px; font-weight:650; margin:24px 0 10px; display:flex; align-items:center; gap:8px; letter-spacing:normal}
  .section-title .c{font-size:12px; background:#e3e3e3; color:#303030; padding:1px 8px; border-radius:8px; font-weight:650}
  .recent tbody tr{cursor:pointer}
  .key-line{font-size:12px; color:var(--muted)}
  .recent td{font-size:12.5px}
  .demo-bar{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
  .footnote{margin-top:20px; font-size:12.5px; color:var(--muted); line-height:1.7; background:#fff; border:none; border-radius:12px; padding:0; box-shadow:0 0 0 1px rgba(0,0,0,.06)}
  .footnote summary{cursor:pointer; padding:12px 16px; font-weight:650; color:var(--ink); font-size:13px; list-style:none; display:flex; align-items:center; gap:8px; border-radius:12px}
  .footnote summary::-webkit-details-marker{display:none}
  .footnote summary::before{content:""; width:0; height:0; border-left:5px solid #616161; border-top:4px solid transparent; border-bottom:4px solid transparent; transition:transform .15s}
  .footnote[open] summary::before{transform:rotate(90deg)}
  .footnote summary:hover{background:#fafafa}
  .footnote .fn-body{padding:0 16px 16px; border-top:1px solid var(--line); padding-top:12px}
  .warn{background:#fff5ea; border:none; border-left:4px solid #ffb800; color:#5e4200; border-radius:12px; padding:12px 16px; font-size:12.5px; margin-bottom:16px; line-height:1.55; box-shadow:0 0 0 1px rgba(0,0,0,.05)}
  .stock-chip{background:#fff; border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:8px 12px; font-size:12.5px; font-weight:550; display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:4px}
  .stock-chip b{color:#0c5132}
  .load-msg{display:flex; align-items:center; justify-content:center; gap:10px; padding:64px 20px; color:var(--muted); font-size:13.5px; font-weight:550}
  .load-msg .spin{width:20px;height:20px;border-radius:50%;border:2.5px solid #e3e3e3;border-top-color:#303030;animation:rot .8s linear infinite}
  @keyframes rot{to{transform:rotate(360deg)}}
  .js-err{display:none; background:#ffd7d4; border:none; color:#8e1f0b; border-radius:12px; padding:12px 14px; font-size:12.5px; line-height:1.65; margin:0 0 14px; font-weight:550; white-space:pre-wrap; word-break:break-word; box-shadow:0 0 0 1px rgba(0,0,0,.05)}
  .js-err b{display:block; margin-bottom:4px}
  .msgbox{max-width:none; width:100%; margin:0; padding:0 24px}
  .entry-page{max-width:none; margin:0; background:var(--card); border:none; border-radius:var(--radius); padding:20px; box-shadow:0 0 0 1px rgba(0,0,0,.06), var(--shadow)}
  
  .entry-page .sec:first-child{margin-top:0}
  .entry-page.view-only .cbox,.entry-page.view-only .mcbox,.entry-page.view-only .file-btn{pointer-events:none}.entry-page.view-only{background:#fafafa}
  .sizes-cell{white-space:nowrap}
  .szbox{display:inline-flex; flex-direction:column; align-items:center; gap:2px; margin-right:6px}
  .szlbl{font-size:11px; font-weight:600; color:var(--muted); letter-spacing:normal}
  .szin{width:54px; padding:4px; min-height:28px; font-size:12.5px; text-align:center}
  .sz-inputs{margin-top:6px; display:flex; flex-wrap:wrap; gap:3px}
  .cons-cell{min-width:212px}
  .cons-total{font-size:11.5px; font-weight:650; color:#0c5132; margin-top:4px; white-space:nowrap}

  /* ================= MULTI-SELECT ================= */
  .mcbox{position:relative; min-width:152px; max-width:222px}
  /* form-level multiselects (e.g. PO Style) fill their field instead of the
     narrow width used by the in-table size pickers */
  .field > .mcbox{max-width:none; width:100%}
  .mcbox .mcbox-input{padding-right:28px; cursor:pointer; text-align:left; background:#fff}
  /* the caret was only positioned for .cbox — anchor it inside .mcbox too */
  .mcbox .cbox-caret{position:absolute; right:9px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; color:var(--muted); pointer-events:none; transition:color .14s}
  .mcbox .cbox-caret svg.i{display:block; width:16px; height:16px; stroke-width:1.6}
  .mcbox-list{position:fixed; top:0; left:0; min-width:180px; width:max-content; max-width:280px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,.20); max-height:232px; overflow-y:auto; z-index:200; display:none; padding:4px; animation:drop .12s var(--ease-soft)}
  .mcbox.open .mcbox-list{display:block}
  .mcbox.disabled{pointer-events:none;opacity:.72}.mcbox.disabled .mcbox-input{background:#f4f4f4;color:#6b6b6b;-webkit-text-fill-color:#6b6b6b}
  .mcbox.open .cbox-caret{color:var(--ink)}
  .mcbox-opt{padding:7px 10px; border-radius:8px; cursor:pointer; font-size:13px; display:flex; align-items:center; gap:8px; transition:background .1s}
  .mcbox-opt:hover{background:#f1f1f1; color:var(--ink)}
  .mcbox-opt .tick{margin-left:auto; color:#303030; font-weight:700; font-size:11px}
  .mcbox-hint{font-size:11.5px; color:var(--muted); padding:6px 10px; border-bottom:1px solid var(--line); margin-bottom:4px}

  /* ================= POD UPLOAD ================= */
  .pod-cell{min-width:176px}
  .pod-upload-box{position:relative; width:164px; min-height:104px; margin:0 auto; border:1px solid var(--line);
    border-radius:8px; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:10px; overflow:hidden; transition:border-color .14s, background .14s, box-shadow .14s}
  .pod-upload-box:hover{border-color:#8a8a8a; background:#fafafa; box-shadow:0 1px 3px rgba(0,0,0,.07)}
  .pod-upload-box.inp-bad{border-color:#8e1f0b;box-shadow:0 0 0 2px rgba(142,31,11,.15)}
  .pod-upload-box.empty{cursor:pointer}
  .pod-upload-box.empty input[type=file]{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer}
  .pod-upload-plus{font-size:18px; line-height:1; font-weight:500; color:#217346; margin-bottom:7px}
  .pod-upload-title{font-size:12.5px; font-weight:550; color:var(--muted)}
  .pod-upload-help{font-size:10.5px; color:#8a8a8a; margin-top:4px; text-align:center}
  .pod-preview-img{width:76px; height:54px; object-fit:cover; border-radius:6px; border:1px solid var(--line); display:block}
  .pod-preview-pdf{width:76px; height:54px; border-radius:6px; background:#f1f1f1; border:1px solid var(--line);
    color:#8e1f0b; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; letter-spacing:.5px}
  .pod-upload-name{width:100%; margin-top:6px; font-size:10.5px; color:var(--muted); text-align:center;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .pod-upload-actions{position:absolute; top:5px; right:5px; z-index:3; display:flex; gap:4px}
  .pod-upload-actions button{width:22px; height:22px; border:1px solid var(--line); border-radius:6px; background:#fff;
    display:flex; align-items:center; justify-content:center; padding:0; box-shadow:0 1px 3px rgba(0,0,0,.12)}
  .pod-upload-actions .pod-view{color:var(--accent)}
  .pod-upload-actions .pod-del{color:#8e1f0b}
  .pod-replace{position:relative; margin-top:6px; color:var(--accent); font-size:11px; font-weight:600; cursor:pointer}
  .pod-replace input[type=file]{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer}
  .invoice-gate-upload{width:100%;min-height:150px;margin-top:6px}.invoice-gate-upload input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.invoice-gate-upload .invoice-preview img{width:92px;height:68px;object-fit:cover;border-radius:7px;border:1px solid var(--line)}.invoice-gate-upload .invoice-preview .pdf{width:92px;height:68px;display:flex;align-items:center;justify-content:center;background:#f1f1f1;color:#8e1f0b;border-radius:7px;font-weight:800;border:1px solid var(--line)}.invoice-gate-delete{position:absolute;right:8px;top:8px;z-index:4;width:26px;height:26px;border:1px solid var(--line);border-radius:7px;background:#fff;color:#8e1f0b;display:none;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.14)}
  @media(max-width:920px){.msgbox{padding:0 16px}}

  @media(max-width:920px){
    .app{flex-direction:row; min-height:auto}
    .grid-fixed{grid-template-columns:1fr}
    /* sidebar becomes an off-canvas drawer */
    .sidebar{position:fixed; top:56px; left:0; bottom:0; width:264px; min-width:264px; height:auto;
             background:#f1f1f1; box-shadow:4px 0 24px rgba(0,0,0,.18); z-index:30;
             transform:translateX(-100%); padding:8px 8px 0}
    body.nav-open .sidebar{transform:none}
    body.nav-open .nav-scrim{display:block}
    body.nav-collapsed .sidebar{width:264px; min-width:264px; padding:8px 8px 0}
    body.nav-collapsed .sidebar > *{opacity:1; pointer-events:auto}
    .main{width:100%; min-width:0}
    .nav{display:block; padding:2px 0 10px}
    .nav .nav-sec{display:block}
    .nav-item{width:100%; padding:8px 10px; font-size:13.5px; min-height:38px}
    .nav-item .cnt{display:inline-block}
    .brand{padding:8px 8px 10px}
    .side-foot{display:block}
    .content{padding:12px}
    .topbar{padding:14px 12px 4px; flex-wrap:wrap}
    .entry-page{padding:16px}
    .tabs{padding:6px}
    .rowcount{display:none}
    th.selcol, td.selcol{padding-left:10px}
    .modal{border-radius:14px}
  }
  @media print{
    .sidebar,.topbar .actions,.filter-bar,.no-print,aside,.globalbar{display:none!important}
    .main{margin:0}
    body{background:#fff}
    body::before{display:none}
    .panel{box-shadow:none; border:none}
    .content{padding:0}
  }

  /* ================= COSTING MODULE (Excel-style sheet) ================= */
  .split-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 16px; align-items:start}
  .split-col{min-width:0}
  .split-grid table{min-width:0!important}
  @media(max-width:1100px){.split-grid{grid-template-columns:1fr}}
  .xl-sheet{border:1px solid #dfe1e5; border-radius:10px; overflow:hidden; background:#fff}
  .xl-sheet-head{background:#eceef1; border-bottom:1px solid #dfe1e5; padding:5px 12px; font-size:10.5px; font-weight:800; letter-spacing:.8px; color:#4a4f57; text-transform:uppercase; display:flex; align-items:center; gap:8px}
  .xl-sheet-head:not(:first-child){border-top:1px solid #dfe1e5}
  .xl-tip{margin-left:auto; font-size:10px; font-weight:600; letter-spacing:.2px; color:#7a8089; text-transform:none; white-space:nowrap}
  .xl-grid{display:grid; grid-template-columns:118px minmax(0,1fr) 108px minmax(0,1fr)}
  @media(max-width:760px){
    .xl-grid{grid-template-columns:110px minmax(0,1fr)}
    .xl-grid .xl-cell:nth-child(n){border-right:1px solid #e6e8ec}
    .xl-cell:nth-child(2n){border-right:none}
    .xl-grid > :nth-last-child(-n+2){border-bottom:none}
  }
  .xl-cell{border-right:1px solid #e6e8ec; border-bottom:1px solid #e6e8ec; min-height:30px; background:#fff; min-width:0}
  .xl-cell:nth-child(4n){border-right:none}
  .xl-grid > :nth-last-child(-n+4){border-bottom:none}
  .xl-cell.xl-lbl{background:#f7f8fa; padding:0 10px; display:flex; align-items:center; font-size:11.5px; font-weight:650; color:#3f4348; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .xl-cell.xl-val{padding:0; display:flex; align-items:center; min-width:0; overflow:hidden}
  .xl-cell.xl-val:hover{background:#fbfcff}
  .xl-cell.xl-empty{pointer-events:none; background:#fbfbfc}
  .xl-grid input.xl-in, .xl-table input.xl-in, .xl-table input.inp{
    border:none; border-radius:0; background:transparent; width:100%; min-height:30px; padding:4px 10px;
    box-shadow:none; outline:none; font-size:12.5px;
  }
  .xl-grid input.xl-in:focus, .xl-table input.xl-in:focus, .xl-table input.inp:focus{
    background:#fff; box-shadow:inset 0 0 0 2px #217346;
  }
  input.xl-in.num, .xl-table input.inp.num{text-align:right; font-variant-numeric:tabular-nums}
  .xl-in::placeholder, .xl-table input.inp::placeholder{color:#a9aeb6}
  table.xl-table{border-collapse:collapse; min-width:0; width:100%}
  .xl-table th{background:#eceef1; font-size:10.5px; font-weight:750; color:#4a4f57; padding:4px 10px; border-right:1px solid #dfe1e5; border-bottom:1px solid #dfe1e5; text-transform:uppercase; letter-spacing:.6px; text-align:left}
  .xl-table th.num{text-align:right}
  .xl-table th:last-child{border-right:none}
  .xl-table td{padding:0; border-right:1px solid #e6e8ec; border-bottom:1px solid #e6e8ec; vertical-align:middle; background:#fff; position:relative}
  .xl-table td:last-child{border-right:none}
  .xl-table tr:last-child td{border-bottom:none}
  .xl-table td.xl-lblc{background:#f7f8fa; padding:0 10px; font-size:12px; font-weight:600; color:#3f4348; white-space:nowrap}
  .xl-table tr.totalrow td{background:#eef1f6}
  .xl-table tr.totalrow td.xl-lblc{font-weight:750; color:#22262b}
  .xl-table tr.totalrow input.xl-in, .xl-table tr.totalrow input.inp{font-weight:700}
  .xl-table input.xl-in[readonly], .xl-table input.inp[readonly]{background:#f4f5f7; color:#6b7280; -webkit-text-fill-color:#6b7280; cursor:default; font-weight:600}
  .xl-table tr.totalrow input.xl-in[readonly], .xl-table tr.totalrow input.inp[readonly]{background:#e9ecf2; color:#3c4149; -webkit-text-fill-color:#3c4149; font-weight:750}
  .mini-table.xl-table td{padding:0}
  .mini-table.xl-table th{padding:4px 10px; font-size:10.5px; font-weight:750; letter-spacing:.6px; text-transform:uppercase}
  .mini-table.xl-table .inp{min-height:30px; padding:4px 10px; font-size:12.5px}
  td.fill-hl{background:#dff0e7!important}
  .fh{position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; background:#217346; border:1.5px solid #fff; border-radius:2px; z-index:6; cursor:crosshair; box-shadow:0 0 0 1px rgba(0,0,0,.12)}
  body.filling, body.filling *{user-select:none!important; -webkit-user-select:none!important}
  body.filling{cursor:crosshair!important}
  .xl-table td.sr-cell{text-align:center; vertical-align:middle; background:#f7f8fa; color:#7a8089; font-weight:700; font-size:12px; width:52px; min-width:52px; padding:0}
  .xl-table th.c-sr{text-align:center}
  .xl-table td.xl-act{text-align:center; width:44px; background:#fff}
  .bom-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px}
  .bom-hint{font-size:10.5px; color:#7a8089; font-weight:600}
  .xl-cell.xl-imgcell{min-height:78px; position:relative; align-items:center; justify-content:center}
  .xl-cell.xl-imgcell input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer; z-index:3}
  .xl-imgcell .imgph{font-size:11.5px; color:#8a8f98; pointer-events:none; display:inline-flex; align-items:center; gap:6px}
  .xl-imgcell .imgph::before{content:"+"; font-size:15px; font-weight:700; color:#217346; line-height:1}
  .xl-imgcell img.imgprev{position:relative; z-index:2; max-height:64px; max-width:calc(100% - 30px); object-fit:contain; border-radius:6px; display:block; background:#fff; box-shadow:0 0 0 1px #e6e8ec}
  .xl-imgcell .imgclear{position:absolute; top:3px; right:3px; z-index:4; width:18px; height:18px; border-radius:5px; border:none; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.14); color:#8e1f0b; font-size:10px; display:none; align-items:center; justify-content:center; line-height:1; padding:0}
  .xl-imgcell .imgclear:hover{background:#fdf3f1}
  .mpos{color:#0c5132;font-weight:650}
  .mneg{color:#8e1f0b;font-weight:650}
  /* BOM: compact so both 50% panels fit; Particulars + Cost stay readable */
  table.cost-bom{min-width:0!important; width:100%; table-layout:fixed}
  table.cost-bom th{white-space:normal; line-height:1.15; padding:5px 5px}
  table.cost-bom td{white-space:nowrap}
  table.cost-bom th.srcol, table.cost-bom td.srcol, table.cost-bom td.sr-cell{width:40px; min-width:40px; max-width:40px; padding-left:4px; padding-right:2px}
  table.cost-bom th:nth-child(2), table.cost-bom td:nth-child(2){width:auto; min-width:0; white-space:normal}
  table.cost-bom td:nth-child(2) .inp{width:100%; min-width:0}
  table.cost-bom th:nth-child(3), table.cost-bom td:nth-child(3),
  table.cost-bom th:nth-child(5), table.cost-bom td:nth-child(5){width:58px; min-width:52px}
  table.cost-bom th:nth-child(4), table.cost-bom td:nth-child(4){width:86px; min-width:78px}
  table.cost-bom th:nth-child(6), table.cost-bom td:nth-child(6){width:62px; min-width:56px}
  table.cost-bom th:nth-child(7), table.cost-bom td:nth-child(7){width:84px; min-width:76px}
  table.cost-bom td:nth-child(7) .inp{width:100%; min-width:0; text-align:right; font-weight:650}
  table.cost-bom th:nth-child(8), table.cost-bom td:nth-child(8),
  table.cost-bom td.xl-act{width:32px; min-width:32px}
  table.cost-bom .inp.num{width:100%; min-width:0; max-width:none}
  table.cost-bom .inp{padding-left:6px; padding-right:6px}
  .split-col .table-wrap{overflow-x:auto}
  /* Excel-like column resize on costing tables */
  .xl-table th{position:relative}
  .col-grip{position:absolute; right:-3px; top:0; width:8px; height:100%; cursor:col-resize; z-index:5; user-select:none}
  .col-grip:hover, .col-grip.on{background:linear-gradient(90deg, transparent 3px, #217346 3px, #217346 5px, transparent 5px)}
  body.col-resizing, body.col-resizing *{cursor:col-resize!important; user-select:none!important}
  .cost-print-img{max-width:160px; max-height:120px; object-fit:contain; border:1px solid #ccc; border-radius:4px; background:#fff}
  .xl-cell.xl-val .cbox{width:100%; max-width:none}
  .xl-cell.xl-val .cbox .cbox-input{border:none; border-radius:0; background:transparent; min-height:30px; box-shadow:none; padding:4px 28px 4px 10px}
  .xl-cell.xl-val .cbox .cbox-input:focus{background:#fff; box-shadow:inset 0 0 0 2px #217346; border-color:transparent}
  .xl-cell.xl-val .cbox .cbox-caret{right:8px}
  table.cost-bom td .cbox{max-width:none; width:100%}
  table.cost-bom td .cbox .cbox-input{border:none; background:transparent; min-height:30px; box-shadow:none; padding:4px 26px 4px 6px; font-weight:550}
  table.cost-bom td .cbox .cbox-input:focus{background:#fff; box-shadow:inset 0 0 0 2px #217346}
  table.cost-bom td .cbox .cbox-caret{opacity:1}


  /* ================= MOBILE-FIRST UX REFINEMENTS ================= */
  @media(max-width:920px){
    body{font-size:13px;overflow-x:hidden}
    .globalbar{height:52px;padding:0 8px;gap:8px}
    .globalbar .gb-brand{display:none}
    .globalbar .gb-search{max-width:none;margin:0;min-width:0}
    .globalbar .gb-field{min-height:36px}
    .globalbar .gb-right{gap:2px}
    .globalbar .gb-avatar{width:36px;padding:0;justify-content:center}
    .globalbar .gb-avatar>span:last-child{display:none}
    .globalbar .gb-btn{width:34px;height:34px}
    .app{min-height:calc(100vh - 52px)}
    .sidebar{top:52px;width:min(286px,86vw);min-width:min(286px,86vw)}
    body.nav-collapsed .sidebar{width:min(286px,86vw);min-width:min(286px,86vw)}
    .nav-scrim{inset:52px 0 0}
    .topbar{padding:12px 12px 4px;gap:9px;align-items:flex-start}
    .topbar h2{font-size:18px}
    .topbar .sub{font-size:11.5px;line-height:1.35}
    .topbar .actions{width:100%;gap:6px;order:3}
    .topbar .actions .btn{flex:1 1 auto;min-height:36px;padding:0 10px}
    .content{padding:10px 10px 56px}
    .msgbox{padding:0 10px}
    .entry-page{padding:13px;border-radius:10px}
    .entry-page .sec{margin-top:18px}
    .grid-fixed,.grid2,.grid3,.grid-auto,.grid-even5,.xl-grid{grid-template-columns:1fr!important}
    .grid-fixed.wide-last>.field:last-child{grid-column:auto}
    .field{margin-bottom:11px}
    .lbl{font-size:12px}
    .inp,.cbox-input,.mcbox-input,select.inp,textarea.inp{min-height:38px;font-size:16px}
    .inp-sm,.mini-table .inp{font-size:14px;min-height:34px}
    .btn{min-height:36px}
    .btn-sm{min-height:34px}
    .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .stat{padding:12px}.stat .val{font-size:19px}
    .flow-card{padding:12px}.flow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .flow .step{min-width:0}.flow .arrow{display:none}
    .panel{border-radius:10px}
    .table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;border-radius:8px}
    .table-wrap table{min-width:760px}
    .mini-table{min-width:720px}
    .table-wrap::-webkit-scrollbar{height:7px}
    .table-wrap::-webkit-scrollbar-thumb{background:#aeb7c1;border-radius:9px}
    th{font-size:11.5px;padding:8px 9px}
    td{padding:9px;font-size:12.5px}
    th.srcol,td.srcol{position:sticky;left:0;z-index:5;background:#f7f7f7;box-shadow:1px 0 0 var(--line)}
    tbody td.srcol{background:#fff}
    tbody tr:hover td.srcol{background:#fafafa}
    .actions-cell{position:sticky;right:0;background:#fff;z-index:4;box-shadow:-1px 0 0 var(--line)}
    th.actions-cell,th.no-print:last-child{right:0;z-index:6}
    .filter-bar{padding:8px;gap:7px}
    .filter-bar .search{flex:1 1 100%;min-width:0}
    .filter-bar>.btn,.filter-bar>span{flex:0 1 auto}
    .tabs{padding:5px;gap:4px}.tab{min-height:34px;padding:6px 10px}
    .pager{padding:8px;gap:6px}.pager .rowcount{display:block;flex:1 1 100%;margin:0}.pager-nav{margin-left:0}.pager select.inp{margin-left:auto;font-size:13px;width:auto;min-height:34px}
    .masters-wrap{display:block}
    .mnav{position:sticky;top:52px;z-index:16;display:flex!important;flex-wrap:nowrap!important;gap:5px;overflow-x:auto;max-height:none;padding:7px;margin-bottom:10px;border-radius:9px;scrollbar-width:none}
    .mnav::-webkit-scrollbar{display:none}
    .mnav-sec{display:none!important}
    .mnav-item{flex:0 0 auto;width:auto!important;min-height:36px;padding:7px 10px;box-shadow:0 0 0 1px var(--line)}
    .mnav-item .cnt{display:inline-block!important}
    .mpanel{display:block;max-height:none;overflow:visible;padding:14px!important}
    .mpanel .mlist,.mpanel .master-list{max-height:48vh;overflow:auto}
    .mhead{gap:8px;flex-wrap:wrap}.mhead>div:last-child{margin-left:0!important;width:100%}.mhead .btn{width:100%}
    .mtools{display:flex;align-items:stretch;gap:7px}.mtools .add-row{flex:1 1 100%}.mtools .search.msearch{flex:1 1 100%;max-width:none}.mtools>.btn{flex:1 1 auto}
    .master-list-head{grid-template-columns:30px 80px minmax(150px,1fr) 112px 62px;min-width:560px}
    .master-list{min-width:560px}
    .master-box{padding:12px}
    .inward-bottom-grid,.inward-bottom-grid.single{grid-template-columns:1fr!important;gap:12px;justify-content:stretch}
    .inward-attachments-panel,.inward-summary-panel{width:100%}
    .intot-wrap{max-width:none!important;width:100%}
    .overlay{padding:10px;align-items:flex-start}
    .modal,.modal.modal-wide,.modal.modal-xl,.modal.modal-item{max-width:100%;width:100%;max-height:calc(100vh - 20px);border-radius:12px}
    .modal.modal-item{height:auto}
    .modal-body{padding:14px;max-height:calc(100vh - 132px)!important;overflow:auto}
    .modal-head,.modal-foot{padding:12px 14px}
    .modal-foot .btn{flex:1}
    .dpop{max-width:calc(100vw - 16px)}
    .rdp-pop{min-width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)}
    .rdp-cals{display:block}.rdp-cal{width:100%;min-width:0}.rdp-cal+.rdp-cal{margin-top:12px}
    .savebar{width:calc(100vw - 16px)}.sb-in{padding:8px;flex-wrap:wrap}.sb-msg{flex:1}.sb-sp{display:none}
    .pod-upload-box,.att-upload-box{width:150px;min-height:105px}
    td.jw-merged-dispatch{min-width:145px;width:145px}
    td.jw-merged-pod{min-width:164px;width:164px}
    .sz-inputs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
    .reporting-shell,.sf-builder-body{grid-template-columns:1fr!important}
    .reporting-main,.reporting-customize,.sf-builder-side,.sf-report-canvas{grid-column:1!important;grid-row:auto!important}
    .reporting-customize,.sf-builder-side{position:static;max-height:none;border-right:none;border-bottom:1px solid var(--line)}
    .reporting-toolbar,.sf-builder-top{height:auto;flex-wrap:wrap;padding:8px}
    .reporting-toolbar>*{flex:1 1 auto}.reporting-toolbar .report-name{max-width:none}
    .sf-builder-title{flex:1 1 100%}.sf-format-pills{width:100%;overflow-x:auto}.sf-builder-top>.btn,.sf-builder-top>select{flex:1 1 auto}
    .sf-report-canvas{padding:8px}.sf-report-table{max-height:none}
    .report-type-grid{grid-template-columns:1fr!important}
    .perm-table{min-width:680px}
    .user-access-grid{grid-template-columns:1fr 1fr}
    .menu-manage-grid{grid-template-columns:1fr}.shop-menu-page{max-width:none}.shop-menu-head{flex-wrap:wrap}.shop-menu-head>div{flex:1 1 100%}.shop-menu-head>.btn{flex:1}
    .shop-menu-children{padding-left:16px}.shop-menu-child{grid-template-columns:22px minmax(150px,1fr) 104px}
    .login-slide-thumb{width:115px;height:68px}
    .item-image-viewer{padding:10px}.item-image-viewer-card{max-width:100%;max-height:96vh}
    .toast-wrap{bottom:12px;width:calc(100vw - 20px)}.toast{max-width:100%;width:auto}
  }
  @media(max-width:560px){
    .globalbar .gb-right .gb-btn{display:none}
    .globalbar .gb-kbd{display:none}
    .stats{grid-template-columns:1fr 1fr}.stat .extra{font-size:11px}
    .flow{grid-template-columns:1fr}
    .topbar .actions{display:grid;grid-template-columns:1fr 1fr}.topbar .actions>*{width:100%}
    .content{padding-left:8px;padding-right:8px}
    .entry-page{padding:11px}
    .user-access-grid{grid-template-columns:1fr}
    .radio-row{height:auto;flex-wrap:wrap}
    .segbar{width:100%;overflow-x:auto}.seg{flex:0 0 auto;padding:7px 10px}
    .img-upload-row{height:auto;flex-wrap:wrap}
    .auth-side{padding:12px}.auth-login-card{padding:24px 20px;border-radius:12px}.auth-login-card h2{font-size:22px}
    .modal-foot{position:sticky;bottom:0}
  }