:root{
    --bg:#f4f6f9; --surface:#ffffff; --surface-2:#eef1f6; --border:#e1e6ee;
    --text:#19212f; --muted:#66707f; --muted-2:#8a93a3;
    --sidebar-bg:#0d1b26; --sidebar-text:#aab6c4; --sidebar-text-strong:#e7edf4; --sidebar-active:#15293a;
    --accent:#2f8fae; --accent-strong:#1f6f8b; --accent-soft:#e4f2f6;
    --po:#2f8fae; --sales:#1a9668; --fuel:#c8791a; --danger:#d2483c; --danger-soft:#fbe9e7;
    --holiday:#a3781f; --holiday-soft:#fdf4de;
    --shadow: 0 1px 2px rgba(20,30,45,.06), 0 8px 24px -12px rgba(20,30,45,.12);
    --radius:12px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0a1119; --surface:#121b28; --surface-2:#17212f; --border:#2532446;
      --border:#253244; --text:#e7ecf5; --muted:#9aa6b8; --muted-2:#7c869a;
      --sidebar-bg:#070d15; --sidebar-text:#8b97a9; --sidebar-text-strong:#eef2f8; --sidebar-active:#132030;
      --accent:#55b7d6; --accent-strong:#7fcbe4; --accent-soft:#12313d;
      --po:#55b7d6; --sales:#3fbf8f; --fuel:#e2a04c; --danger:#ea6a5e; --danger-soft:#3a1c1c;
      --holiday:#e0b45e; --holiday-soft:#332a14;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0a1119; --surface:#121b28; --surface-2:#17212f; --border:#253244;
    --text:#e7ecf5; --muted:#9aa6b8; --muted-2:#7c869a;
    --sidebar-bg:#070d15; --sidebar-text:#8b97a9; --sidebar-text-strong:#eef2f8; --sidebar-active:#132030;
    --accent:#55b7d6; --accent-strong:#7fcbe4; --accent-soft:#12313d;
    --po:#55b7d6; --sales:#3fbf8f; --fuel:#e2a04c; --danger:#ea6a5e; --danger-soft:#3a1c1c;
    --holiday:#e0b45e; --holiday-soft:#332a14;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  }
  *,*::before,*::after{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg); color:var(--text);
    font-family:'Sarabun','IBM Plex Sans Thai',system-ui,sans-serif;
    font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.brand-word,.stat-value,.section-title{font-family:'Kanit','Sarabun',system-ui,sans-serif;}
  h1,h2,h3{text-wrap:balance; margin:0;}
  button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit;}
  a{color:inherit;}
  ::selection{background:var(--accent); color:#fff;}
  :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}

  #app{min-height:100vh;}
  .shell{display:flex; min-height:100vh;}

  /* ---------- Sidebar ---------- */
  .sidebar{
    width:252px; flex:0 0 252px; background:var(--sidebar-bg); color:var(--sidebar-text);
    display:flex; flex-direction:column; padding:22px 14px; gap:6px;
  }
  .brand{display:flex; align-items:center; gap:10px; padding:6px 10px 22px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,.08);}
  .brand-mark{width:34px; height:34px; flex:0 0 34px;}
  .brand-word{color:var(--sidebar-text-strong); font-weight:700; font-size:19px; letter-spacing:.2px; line-height:1.1;}
  .brand-sub{color:var(--sidebar-text); font-size:11.5px; letter-spacing:.4px; margin-top:2px;}
  .nav-group{display:flex; flex-direction:column; gap:2px;}
  .nav-list{display:flex; flex-direction:column; gap:2px;}
  .nav-list-collapsed{display:none;}
  /* หัวข้อกลุ่มเมนู (งานขาย / ขนส่ง / จัดการบัญชี) — กดย่อ/ขยายได้ */
  .nav-section{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    padding:16px 12px 6px; font-size:11px; font-weight:700; letter-spacing:.8px;
    color:var(--muted-2); text-transform:uppercase;
    background:none; border:none; cursor:pointer; font-family:inherit;
  }
  .nav-section:hover{color:var(--sidebar-text-strong);}
  /* หัวข้อย่อยที่ซ้อนอยู่ในหัวข้อหลัก (เช่น VAT ใต้ จัดการบัญชี) — เยื้องเข้าและเว้นบนน้อยกว่า */
  .nav-section-sub{padding:8px 12px 4px 20px; font-size:10.5px; letter-spacing:.6px; opacity:.9;}
  .nav-list-sub{padding-left:10px; border-left:1px solid rgba(255,255,255,.08); margin-left:16px;}
  .nav-section-chev{width:14px; height:14px; flex:0 0 14px; opacity:.7; transform:rotate(90deg); transition:transform .12s ease;}
  .nav-section-chev svg{width:100%; height:100%;}
  .nav-section-chev.collapsed{transform:rotate(0deg);}
  .nav-item{
    display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px;
    color:var(--sidebar-text); text-decoration:none; cursor:pointer; border:1px solid transparent;
    font-size:14.5px; transition:background .12s ease, color .12s ease;
  }
  .nav-item svg{width:18px; height:18px; flex:0 0 18px; opacity:.85;}
  .nav-item:hover{background:rgba(255,255,255,.05); color:var(--sidebar-text-strong);}
  .nav-item.active{background:var(--sidebar-active); color:var(--sidebar-text-strong); border-color:rgba(255,255,255,.06);}
  .nav-item.active .nav-dot{background:var(--nav-accent, var(--accent));}
  .nav-dot{width:6px; height:6px; border-radius:50%; background:transparent; flex:0 0 6px; margin-right:-2px;}
  .sidebar-foot{margin-top:auto; padding:12px 10px 2px; font-size:11.5px; color:var(--muted-2); border-top:1px solid rgba(255,255,255,.08);}
  .save-pill{display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:12px;}
  .save-dot{width:7px; height:7px; border-radius:50%; background:var(--muted-2);}
  .save-pill[data-state="saved"] .save-dot{background:var(--sales);}
  .save-pill[data-state="saving"] .save-dot{background:var(--fuel); animation:pulse 1s infinite;}
  .save-pill[data-state="error"] .save-dot,.save-pill[data-state="offline"] .save-dot{background:var(--danger);}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
  .user-row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.08);}
  .user-name{font-size:12px; color:var(--sidebar-text-strong); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .user-row .btn{padding:4px 9px; font-size:11.5px; border-color:rgba(255,255,255,.15); background:transparent; color:var(--sidebar-text);}
  .user-row .btn:hover{border-color:var(--accent); color:var(--sidebar-text-strong);}
  .login-error{
    background:#fdecec; border:1px solid #f3b7b7; color:#a12626; font-size:13px;
    padding:9px 12px; border-radius:9px; margin-bottom:14px; display:none;
  }
  :root:not([data-theme="light"]) .login-error{ background:#3a1414; border-color:#6b2323; color:#f3a0a0; }

  /* ---------- Main ---------- */
  .main{flex:1 1 auto; min-width:0; padding:28px 34px 60px;}
  .topbar{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap;}
  .topbar h1{font-size:23px; font-weight:600; color:var(--text);}
  .topbar .eyebrow{font-size:12px; letter-spacing:.6px; color:var(--muted); text-transform:uppercase; margin-bottom:4px;}
  .topbar-actions{display:flex; gap:10px; align-items:center;}

  .btn{
    display:inline-flex; align-items:center; gap:8px; border-radius:9px; border:1px solid var(--border);
    background:var(--surface); color:var(--text); padding:9px 16px; font-size:14px; font-weight:500;
    cursor:pointer; transition:border-color .12s, background .12s, transform .05s; white-space:nowrap;
  }
  .btn:hover{border-color:var(--accent);}
  .btn:active{transform:translateY(1px);}
  .btn svg{width:16px; height:16px;}
  .icon-link{display:inline-flex; vertical-align:middle;}
  .icon-link svg{width:15px; height:15px;}
  .btn-primary{background:var(--accent); border-color:var(--accent); color:#fff;}
  .btn-primary:hover{background:var(--accent-strong); border-color:var(--accent-strong);}
  .btn-ghost{background:transparent; border-color:transparent;}
  .btn-ghost:hover{background:var(--surface-2); border-color:var(--border);}
  .btn-danger{color:var(--danger); border-color:var(--danger-soft); background:var(--danger-soft);}
  .btn-sm{padding:6px 11px; font-size:13px; border-radius:7px;}
  .btn:disabled{opacity:.5; cursor:not-allowed;}

  /* ---------- Dashboard stat cards ---------- */
  .stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:14px; margin-bottom:28px;}
  .stat-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:18px 18px 16px; box-shadow:var(--shadow); position:relative; overflow:hidden;
  }
  .stat-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--stat-color,var(--accent));}
  .stat-label{font-size:12.5px; color:var(--muted); margin-bottom:8px;}
  .stat-value{font-size:26px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums;}
  .stat-value small{font-size:15px; font-weight:500; color:var(--muted); margin-left:2px;}

  .panel-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px;}
  @media (max-width:980px){.panel-grid{grid-template-columns:1fr;}}
  .panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px;}
  .panel h3{font-size:15px; font-weight:600; margin-bottom:14px;}
  .mini-row{display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px dashed var(--border); font-size:13.5px;}
  .mini-row:last-child{border-bottom:none;}
  .mini-row .mr-sub{color:var(--muted); font-size:12px;}
  .empty-note{color:var(--muted); font-size:13.5px; padding:14px 0;}

  /* ---------- List views ---------- */
  .search-row{display:flex; gap:10px; margin-bottom:16px; align-items:center;}
  .search-input{
    flex:1; max-width:340px; padding:9px 13px; border-radius:9px; border:1px solid var(--border);
    background:var(--surface); color:var(--text);
  }
  /* ตัวกรองช่วงวันที่ (เมนู 1, 2, 3, 4, 6): ปุ่มลัด + ช่องเลือกวันที่จากปฏิทิน */
  .range-row{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:10px 14px; margin-bottom:14px; box-shadow:var(--shadow);
  }
  .range-label{font-size:12.5px; color:var(--muted); font-weight:500; margin-right:2px;}
  .range-presets{display:flex; gap:6px; flex-wrap:wrap;}
  .range-sep{font-size:12.5px; color:var(--muted); margin-left:4px;}
  .range-date{padding:6px 10px; font-size:13px;}
  @media (max-width: 760px){
    .range-row{gap:6px;}
    .range-label{width:100%;}
  }
  .table-wrap{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:auto;}
  .pager{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-top:1px solid var(--border); flex-wrap:wrap;}
  .pager-info{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums;}
  .pager-btns{display:flex; gap:8px;}
  table{width:100%; border-collapse:collapse; min-width:640px;}
  /* ตารางใน drawer (ทะเบียนรถ/ผู้ใช้) กว้างได้แค่ ~430px ถ้าบังคับ 640px ปุ่มลบท้ายแถวจะหลุดออกนอกจอ ต้องเลื่อนตารางถึงเห็น */
  #drawer table{min-width:0;}
  thead th{
    text-align:left; font-size:11.5px; letter-spacing:.4px; text-transform:uppercase; color:var(--muted);
    padding:12px 16px; border-bottom:1px solid var(--border); background:var(--surface-2); white-space:nowrap;
  }
  tbody td{padding:12px 16px; border-bottom:1px solid var(--border); font-size:14px; vertical-align:top;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--surface-2);}
  /* แถวรวมยอดท้ายตาราง (ใช้ในกล่องสรุปค่าน้ำมัน/Easy Pass แยกรายคัน) */
  tfoot td{padding:12px 16px; font-size:14px; border-top:2px solid var(--border); background:var(--surface-2);}

  /* ---- ตาราง "รายละเอียดการซื้อ": คุมความกว้างช่องข้อความยาว ----
     ถ้าไม่คุมไว้ ช่องที่อยู่จะโดนบีบจนตัดบรรทัดทีละคำ ดันความสูงของแถวจนตารางอ่านยาก
     ข้อความที่ยาวเกิน 2 บรรทัดจะตัด (...) แต่ยังอ่านเต็มได้จากการชี้ค้างไว้ (tooltip) */
  .purchase-table tbody td{vertical-align:middle;}
  .purchase-table .cell-clamp{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    overflow:hidden; text-overflow:ellipsis;
  }
  .purchase-table .col-name{min-width:160px; max-width:210px;}
  .purchase-table .col-supplier{min-width:130px; max-width:170px;}
  .purchase-table .col-address{min-width:220px; max-width:290px;}
  .purchase-table .col-phone{min-width:120px; max-width:160px;}

  /* ---- หน้าจัดส่งของ: ตารางอ่านง่าย ไล่สีตามรถแต่ละคัน ---- */
  .dv-table{min-width:1100px;}
  .dv-table tbody td{font-size:14.5px; vertical-align:middle; border-bottom:1px solid rgba(0,0,0,.10);}
  .dv-table .dv-strong{font-weight:600;}
  .dv-table .num{font-weight:600;}
  .dv-table select{padding:5px 8px; font-size:13px; max-width:190px;}
  /* ช่องหมายเหตุ: โปร่งใสจนกว่าจะโฟกัส เพื่อไม่ให้บังสีแถวที่ใช้แยกรถแต่ละคัน */
  .dv-table .dv-note{min-width:200px;}
  .dv-table .dv-note input{
    width:100%; padding:5px 8px; font-size:13px;
    background:rgba(255,255,255,.55); border:1px solid transparent; border-radius:6px;
  }
  .dv-table .dv-note input:hover{border-color:rgba(0,0,0,.18);}
  .dv-table .dv-note input:focus{background:var(--surface); border-color:var(--accent); outline:none;}
  @media (prefers-color-scheme: dark){
    .dv-table .dv-note input{background:rgba(0,0,0,.25); color:var(--text);}
    .dv-table .dv-note input:hover{border-color:rgba(255,255,255,.22);}
  }
  /* งานที่ยังไม่ได้จ่ายรถ: ทำให้สังเกตเห็นว่ายังค้างอยู่ */
  .dv-row.dv-none{background:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(0,0,0,.035) 8px,rgba(0,0,0,.035) 16px);}
  .dv-row.dv-none td:first-child{box-shadow:inset 3px 0 0 var(--danger);}
  /* ไล่สีพื้นหลังตามลำดับรถในทะเบียนรถ (วนซ้ำ 6 สี) — เข้มพอให้แยกกลุ่มออกชัดแบบในฟอร์มกระดาษ */
  .dv-row.dv-c0{background:#f6d9d6;} .dv-row.dv-c0 td:first-child{box-shadow:inset 3px 0 0 #c96a5c;}
  .dv-row.dv-c1{background:#e0ecdb;} .dv-row.dv-c1 td:first-child{box-shadow:inset 3px 0 0 #6f9d5e;}
  .dv-row.dv-c2{background:#d9e4f2;} .dv-row.dv-c2 td:first-child{box-shadow:inset 3px 0 0 #5b83b8;}
  .dv-row.dv-c3{background:#f5e6cf;} .dv-row.dv-c3 td:first-child{box-shadow:inset 3px 0 0 #c39442;}
  .dv-row.dv-c4{background:#e6dcef;} .dv-row.dv-c4 td:first-child{box-shadow:inset 3px 0 0 #8a6bab;}
  .dv-row.dv-c5{background:#d5eaea;} .dv-row.dv-c5 td:first-child{box-shadow:inset 3px 0 0 #4f9a9a;}
  .dv-table tbody tr:hover{filter:brightness(.96);}
  /* กะพริบแดงที่แถวของลูกค้าที่เพิ่งกดมาจากตารางประวัติ ให้หาเจอง่าย
     ใช้ box-shadow inset ทาบทับ เพื่อไม่ไปทับสีพื้นแถวที่ใช้แยกรถแต่ละคัน */
  @keyframes dvFlash{
    0%,100%{ box-shadow: inset 0 0 0 999px rgba(210,72,60,0); }
    50%    { box-shadow: inset 0 0 0 999px rgba(210,72,60,.38); }
  }
  .dv-table tr.dv-flash td{ animation: dvFlash .75s ease-in-out 4; }
  .dv-table tr.dv-flash td:first-child{ box-shadow: inset 3px 0 0 var(--danger); }
  @media (prefers-reduced-motion: reduce){
    /* ปิดการกะพริบให้คนที่ตั้งค่าลดการเคลื่อนไหว แต่ยังเน้นแถวไว้ */
    .dv-table tr.dv-flash td{ animation:none; box-shadow: inset 0 0 0 999px rgba(210,72,60,.22); }
  }
  @media (prefers-color-scheme: dark){
    .dv-row.dv-c0{background:#4a2f2c;} .dv-row.dv-c1{background:#2f4029;}
    .dv-row.dv-c2{background:#28374b;} .dv-row.dv-c3{background:#4a3d25;}
    .dv-row.dv-c4{background:#3b3149;} .dv-row.dv-c5{background:#25403f;}
    .dv-row.dv-none{background:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(255,255,255,.05) 8px,rgba(255,255,255,.05) 16px);}
    .dv-table tbody td{border-bottom-color:rgba(255,255,255,.12);}
  }
  td.num,th.num{text-align:right; font-variant-numeric:tabular-nums;}
  td.nowrap{white-space:nowrap;}
  .row-actions{display:flex; gap:6px; justify-content:flex-end;}
  .tag{display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:500; background:var(--surface-2); border:1px solid var(--border);}
  .tag-po{color:var(--po); background:color-mix(in srgb, var(--po) 12%, var(--surface));}
  .tag-sales{color:var(--sales); background:color-mix(in srgb, var(--sales) 14%, var(--surface));}
  .tag-fuel{color:var(--fuel); background:color-mix(in srgb, var(--fuel) 14%, var(--surface));}
  .tag-muted{color:var(--muted);}
  .tag-danger{color:var(--danger); background:color-mix(in srgb, var(--danger) 14%, var(--surface));}
  .name-cell{font-weight:500;}
  .sub-cell{color:var(--muted); font-size:12.5px; margin-top:2px;}

  /* ---------- Drawer ---------- */
  #drawer-overlay{position:fixed; inset:0; background:rgba(10,15,22,.35); opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:40;}
  #drawer-overlay.open{opacity:1; pointer-events:auto;}
  #drawer{
    position:fixed; top:0; right:0; height:100vh; width:min(480px,94vw); background:var(--surface);
    border-left:1px solid var(--border); box-shadow:-16px 0 40px -20px rgba(0,0,0,.35);
    transform:translateX(100%); transition:transform .2s ease; z-index:41; display:flex; flex-direction:column;
  }
  #drawer.open{transform:translateX(0);}
  #drawer.drawer-full{width:100vw; border-left:none;}
  #drawer > form{display:flex; flex-direction:column; flex:1; min-height:0;}
  .drawer-head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border);}
  .drawer-full .drawer-head{padding:20px min(6vw,64px);}
  .drawer-head h2{font-size:17px; font-weight:600;}
  .drawer-body{padding:20px 22px; overflow-y:auto; flex:1; min-height:0;}
  .drawer-full .drawer-body{max-width:1120px; margin:0 auto; width:100%; padding:26px min(6vw,64px) 40px;}
  .drawer-foot{padding:16px 22px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end;}
  .drawer-full .drawer-foot{padding:16px min(6vw,64px);}
  .field{margin-bottom:14px;}
  .field label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px;}
  .field input,.field select,.field textarea{
    width:100%; padding:9px 12px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text);
  }
  .field textarea{resize:vertical; min-height:64px;}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .field-row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
  .switch-row{display:flex; align-items:center; gap:9px; font-size:13.5px; margin-bottom:14px;}
  fieldset{border:1px solid var(--border); border-radius:10px; padding:14px; margin:0 0 14px;}
  legend{font-size:12.5px; color:var(--muted); padding:0 6px;}
  .item-row{display:grid; grid-template-columns:2.4fr 100px 90px 90px 92px auto; gap:6px; align-items:start; margin-bottom:10px;}
  .item-row input{padding:7px 8px; font-size:12.5px; min-width:0;}
  .item-row textarea{padding:7px 8px; font-size:12.5px; min-width:0; font-family:inherit; resize:vertical; line-height:1.45; min-height:60px;}
  .item-row-head{display:grid; grid-template-columns:2.4fr 100px 90px 90px 92px auto; gap:6px; font-size:11px; color:var(--muted); font-weight:500; margin-bottom:6px;}
  .drawer-full .item-row,.drawer-full .item-row-head{grid-template-columns:2.4fr 130px 110px 110px 120px 32px; gap:10px;}
  .drawer-full .item-row input{padding:9px 11px; font-size:13.5px;}
  .drawer-full .item-row textarea{padding:9px 11px; font-size:13.5px; min-height:74px;}
  .item-row-remove{background:transparent; border:none; color:var(--muted); cursor:pointer; padding:4px; align-self:center;}
  .item-row-remove:hover{color:var(--danger);}
  .item-desc-cell{display:flex; flex-direction:column; gap:6px; min-width:0;}
  .item-desc-cell textarea{min-height:44px;}
  .item-finish-options{display:flex; flex-wrap:wrap; gap:4px 10px; padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:var(--bg);}
  .item-finish-chip{display:flex; align-items:center; gap:4px; white-space:nowrap; cursor:pointer; font-size:11.5px; color:var(--text);}
  .item-finish-chip input{margin:0; width:auto; padding:0; accent-color:var(--accent);}
  .item-finish-other{padding:6px 8px; font-size:12px; min-width:0;}
  .drawer-full .item-finish-chip{font-size:12.5px;}
  .drawer-full .item-finish-other{padding:8px 10px; font-size:13px;}
  .item-size-shape{padding:5px 7px; font-size:11.5px;}
  .item-size-row{display:flex; align-items:center; gap:6px;}
  .item-size-row[hidden]{display:none;}
  .item-size-row input{min-width:0; flex:1 1 0; padding:6px 8px; font-size:12px;}
  .item-size-group{display:flex; gap:4px; flex:1 1 0; min-width:0;}
  .item-size-x{color:var(--muted); font-size:12px; flex:0 0 auto;}
  .item-size-unit{color:var(--muted); font-size:12px; flex:0 0 auto;}
  .drawer-full .item-size-shape{padding:7px 9px; font-size:12.5px;}
  .drawer-full .item-size-row input{padding:8px 10px; font-size:13px;}
  .item-angle-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
  .item-angle-row input{width:60px; flex:0 0 auto; min-width:0; padding:6px 8px; font-size:12px;}
  .drawer-full .item-angle-row input{padding:8px 10px; font-size:13px;}
  .totals-box{margin-top:6px; padding-top:10px; border-top:1px solid var(--border); font-size:13.5px;}
  .totals-box .t-row{display:flex; justify-content:space-between; padding:3px 0;}
  .totals-box .t-row.grand{font-weight:600; font-size:15px; color:var(--text); padding-top:6px;}

  /* ---------- Print sheet ---------- */
  #printView{display:none; position:fixed; inset:0; background:var(--bg); z-index:60; overflow:auto;}
  #printView.active{display:block;}
  .print-toolbar{display:flex; justify-content:flex-end; gap:10px; padding:14px 24px; border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0;}
  .print-sheet{max-width:760px; margin:28px auto 60px; background:#fff; color:#1a1f29; padding:44px 48px; border-radius:6px; box-shadow:var(--shadow);}
  .ps-head{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #1a1f29; padding-bottom:16px; margin-bottom:20px;}
  .ps-brand{font-family:'Kanit',sans-serif; font-weight:700; font-size:20px;}
  .ps-doc-title{text-align:right;}
  .ps-doc-title .t{font-family:'Kanit',sans-serif; font-size:19px; font-weight:600;}
  .ps-doc-title .n{font-size:13px; color:#555; margin-top:2px;}
  .ps-meta{display:flex; justify-content:space-between; gap:24px; margin-bottom:20px; font-size:13.5px;}
  .ps-meta .label{color:#666; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; margin-bottom:3px;}
  .ps-table{width:100%; border-collapse:collapse; font-size:13.5px; margin-bottom:14px;}
  .ps-table th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.3px; color:#555; border-bottom:1px solid #ccc; padding:8px 6px;}
  .ps-table td{padding:8px 6px; border-bottom:1px solid #e7e7e7;}
  .ps-table td.num,.ps-table th.num{text-align:right; font-variant-numeric:tabular-nums;}
  .ps-totals{width:260px; margin-left:auto; font-size:13.5px;}
  .ps-totals .r{display:flex; justify-content:space-between; padding:4px 0;}
  .ps-totals .r.grand{border-top:1px solid #1a1f29; margin-top:4px; padding-top:8px; font-weight:700; font-size:15px;}
  .ps-note{margin-top:22px; font-size:12.5px; color:#555;}

  /* ---------- ใบเสนอราคา (quotation) print layout ---------- */
  /* ความหนา/สีเส้นกรอบของทั้งใบ คุมจากตัวแปร 2 ตัวนี้ที่เดียว (เส้นเดิมบาง+จางเกินไปเวลาพิมพ์ออกกระดาษ)
     --qt-line = เส้นในตาราง, --qt-line-outer = กรอบนอก ให้หนากว่าเพื่อให้ขอบตารางชัด */
  .qt-sheet{
    max-width:900px; padding:36px 40px; font-size:13px;
    --qt-line:1.5px solid #222;
    --qt-line-outer:2.5px solid #000;
  }
  .qt-head{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #1a1f29; padding-bottom:14px; margin-bottom:16px; gap:16px;}
  .qt-company{display:flex; align-items:flex-start; gap:14px;}
  .qt-logo-img{height:52px; width:auto; flex:0 0 auto; display:block; object-fit:contain;}
  .qt-company-en{font-family:'Kanit',sans-serif; font-weight:700; font-size:15.5px;}
  .qt-company-th{font-size:11.5px; color:#555; margin-top:2px; line-height:1.5;}
  .qt-title{text-align:right; flex:0 0 auto; white-space:nowrap;}
  .qt-title .t{font-family:'Kanit',sans-serif; font-size:21px; font-weight:700;}
  .qt-title .n{font-size:12px; color:#555; margin-top:2px;}
  /* ป้าย ต้นฉบับ / สำเนา บนใบวางบิล (พิมพ์ 2 ชุดต่อ 1 ใบ) */
  .qt-copy-label{
    display:inline-block; margin-top:7px; padding:3px 12px; border:1.2px solid #1a1f29;
    border-radius:4px; font-family:'Kanit',sans-serif; font-size:12px; font-weight:700; letter-spacing:.5px;
  }
  .qt-copy-label span{font-weight:400; font-size:10px; color:#555;}
  table.qt-info{width:100%; min-width:0; border-collapse:collapse; margin-bottom:14px; font-size:10.5px; border:var(--qt-line-outer);}
  table.qt-info td{border:var(--qt-line); padding:8px 10px; vertical-align:top; line-height:1.6; font-size:10.5px;}
  table.qt-info td.lbl{width:110px; font-weight:600; background:#f4f6f9; color:#444;}
  .qt-nowrap{white-space:nowrap;}
  .qt-editable{outline:1px dashed rgba(0,90,200,.28); border-radius:3px; padding:0 3px; margin:0 -3px; cursor:text;}
  .qt-editable:focus{outline:1px solid var(--accent); background:rgba(0,120,255,.06);}
  table.qt-items{width:100%; min-width:0; table-layout:fixed; border-collapse:collapse; font-size:10.5px; margin-bottom:6px; border:var(--qt-line-outer);}
  table.qt-items th,table.qt-items td{border:var(--qt-line); padding:8px 9px; text-align:left; word-break:break-word; overflow-wrap:break-word; vertical-align:top; font-size:10.5px;}
  table.qt-items thead th{background:#f4f6f9; font-weight:600; text-align:center; font-size:9px; vertical-align:middle;}
  table.qt-items thead th span{display:block; font-weight:400; font-size:7.5px; color:#666;}
  table.qt-items td.num,table.qt-items th.num{text-align:right; font-variant-numeric:tabular-nums;}
  table.qt-items td.qt-spec-cell{line-height:1.6; min-height:4.8em; white-space:normal;}
  table.qt-items td.qt-line-no{text-align:center; white-space:nowrap; word-break:normal;}
  table.qt-bottom-table{width:100%; min-width:0; border-collapse:collapse; table-layout:fixed; margin-bottom:16px;}
  table.qt-bottom-table > tbody > tr > td{padding:0; vertical-align:top; border:none;}
  .qt-baht-cell{padding-right:20px;}
  .qt-totals-cell{width:260px;}
  /* ยอดเงินตัวหนังสือ = ข้อความเปล่า ไม่มีกรอบ */
  .qt-baht{font-size:10.5px; padding:8px 12px 8px 0;}
  /* กล่องยอดรวม: ใส่กรอบที่ตัวตารางเองด้วย กันกรณีแถวเดียว + border-collapse ทำให้เส้นขอบนอกหาย */
  .qt-totals-table{width:100%; min-width:0; border-collapse:collapse; border:2px solid #000; font-size:11px;}
  .qt-totals-table td{padding:5px 12px; border:var(--qt-line); font-size:11px;}
  .qt-totals-table td:last-child{text-align:right; font-variant-numeric:tabular-nums; width:110px;}
  .qt-totals-table tr.grand td{font-weight:700; background:#f4f6f9;}
  .qt-terms{margin-top:6px; font-size:11.5px; color:#444;}
  .qt-terms-label{font-weight:600; margin-bottom:4px;}
  .qt-terms-body{line-height:1.9;}
  .qt-remark{margin:0 0 16px; font-size:12.5px; border:var(--qt-line); border-radius:6px; padding:10px 12px;}
  .qt-remark-label{font-weight:600; margin-bottom:4px; color:#444;}
  .qt-remark-body{line-height:1.7; color:#333;}
  .qt-sign{display:flex; justify-content:space-between; margin-top:56px; font-size:12px; text-align:center; gap:40px;}
  .qt-sign-box{flex:1;}
  .qt-sign-box .line{border-top:var(--qt-line); margin-bottom:8px; padding-top:40px;}
  .qt-page-no{text-align:right; font-size:11px; color:#888; margin:-4px 0 10px;}
  .qt-sheet + .qt-sheet{margin-top:24px;}

  /* ---- ใบวางบิล: ฟอนต์ในตาราง/กล่องต่างๆ ใหญ่กว่าใบเสนอราคา +2px (เนื้อหาน้อยกว่า มีที่พอ) ---- */
  .bn-print table.qt-info,
  .bn-print table.qt-info td{font-size:12.5px;}
  .bn-print table.qt-items{font-size:12.5px;}
  .bn-print table.qt-items th,
  .bn-print table.qt-items td{font-size:12.5px; padding:9px 10px;}
  .bn-print table.qt-items thead th{font-size:11px;}
  .bn-print .qt-baht{font-size:12.5px;}
  .bn-print .qt-totals-table,
  .bn-print .qt-totals-table td{font-size:13px;}
  .bn-print .bn-pay{font-size:13.5px;}
  /* เลขหน้าใต้เลขที่ใบกำกับภาษี — เล็กและจางลง ไม่ให้แย่งสายตาจากเลขที่ */
  .bn-print .bn-pageno{font-size:9.5px; color:#999; margin-top:2px;}

  /* ---------- ใบกำกับภาษี/ใบส่งของ (พิมพ์ลงกระดาษฟอร์มสำเร็จรูป 5 ชั้น ที่มีเส้น/ป้ายกำกับพิมพ์ไว้แล้ว) ----------
     ตำแหน่ง/ขนาดของแต่ละช่องคำนวณมาจากไฟล์ Excel ต้นฉบับ (ความกว้างคอลัมน์ B..L และความสูงแถว 1..34)
     แปลงเป็นหน่วย mm จริง เพื่อให้ตำแหน่งตรงกับกล่องที่พิมพ์ไว้บนกระดาษ ไม่มีเส้นขอบ/สีพื้นใดๆ เพราะกระดาษมีลายเส้นอยู่แล้ว */
  /* ---- ใบกำกับภาษี: วางข้อความทับกระดาษฟอร์มสำเร็จรูป (กระดาษต่อเนื่อง 9x11 นิ้ว) ----
     ตำแหน่งทุกช่องเป็น % ของกรอบเนื้อหา จึงคงสัดส่วนถูกต้องไม่ว่าจะคาลิเบรตขนาด/ตำแหน่งเท่าไหร่
     ค่าคาลิเบรตอยู่ใน --tf-x / --tf-y / --tf-w (ปรับได้จากแถบเครื่องมือตอนพิมพ์ แล้วจำไว้ในเครื่อง) */
  /* --tf-w / --tf-h แยกกัน เพื่อแก้กรณีเครื่องพิมพ์บีบเฉพาะแนวนอน (เช่นตั้งกระดาษเป็น A4 แล้วย่อให้พอดี) */
  :root{ --tf-x:8mm; --tf-y:1.2mm; --tf-w:190mm; --tf-h:279.9mm; --tf-font-scale:1; --tf-totals-dy:0mm; }
  .taxform-page{
    position:relative; width:210mm; height:297mm;   /* หน้ากระดาษ A4 ให้ตรงกับไดรเวอร์เครื่องพิมพ์ */
    margin:16px auto 60px; background:#fff; overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.18);
  }
  .taxform-sheet{
    position:absolute; left:var(--tf-x); top:var(--tf-y);
    width:var(--tf-w); height:var(--tf-h);
    font-family:'Angsana New','AngsanaUPC','Angsana UPC','TH Sarabun New','Sarabun',serif;
    /* ฟอนต์คูณด้วย --tf-font-scale เพื่อชดเชยการย่อของเครื่องพิมพ์ดอทเมทริกซ์ (คำนวณจากอัตราส่วนเดียวกับที่ยืดกรอบ --tf-h)
       ถ้าไม่ได้เปิดผ่านหน้าออกใบกำกับภาษี (ยังไม่ได้ตั้งค่านี้) จะ fallback เป็น 1 คือขนาดจริง 13.75pt */
    font-size:calc(13.75pt * var(--tf-font-scale, 1));
  }
  .taxform-cell{
    position:absolute; outline:1px dashed rgba(0,90,200,.28); padding:0 2px;
    overflow:hidden; white-space:nowrap; line-height:1;
    box-sizing:border-box; display:flex; align-items:center;
  }
  .taxform-cell[contenteditable="true"]:focus{outline:1px solid var(--accent); background:rgba(0,120,255,.06);}
  .taxform-cell.center{justify-content:center; text-align:center;}
  .taxform-cell.right{justify-content:flex-end; text-align:right;}
  /* คอลัมน์รายละเอียดสินค้า: ใช้ขนาดฟอนต์เดียวกับช่องอื่นทั้งใบ ข้อความยาวเกินช่องจะตัดท้ายด้วยจุดไข่ปลา */
  .taxform-cell.wrap{text-overflow:ellipsis;}
  /* ช่อง "เลขที่" ของฟอร์มแคบ (ชิดขอบขวากระดาษแล้ว ขยายไม่ได้) ส่วนเลขที่ยาว 10 ตัว (IV+ปีเดือน+ลำดับ)
     จึงย่อฟอนต์เฉพาะช่องนี้ให้พอดี ไม่งั้น overflow:hidden จะตัดท้ายเลขหายไปตอนพิมพ์ */
  .taxform-cell.tf-no{font-size:calc(13.75pt * var(--tf-font-scale, 1) * 0.8);}
  /* บล็อกยอดรวมท้ายบิลของใบกำกับภาษี เลื่อนขึ้น/ลงได้แยกจากส่วนอื่น (ช่อง "ยอดรวมท้ายบิล" ในแถบปรับตำแหน่งพิมพ์)
     ใช้เฉพาะใบกำกับภาษี — ใบส่งของ (.dn-sheet) ไม่ติดคลาสนี้ จึงไม่ได้รับผลกระทบ */
  .taxform-cell.tf-total{transform:translateY(var(--tf-totals-dy, 0mm));}
  .taxform-hint{max-width:210mm; margin:0 auto 10px; font-size:12.5px; color:var(--muted);}
  /* ---- ใบส่งของ "ใบส่งสินค้า" (NoVAT): ฟอร์มคนละใบกับใบกำกับภาษี จึงมีกรอบ/ค่าคาลิเบรตของตัวเอง ----
     ใช้ .taxform-page (หน้า A4) และ .taxform-cell (ช่องข้อความ) ร่วมกัน ต่างกันแค่กรอบอ้างอิงนี้ */
  :root{ --dn-x:9.4mm; --dn-y:3.9mm; --dn-w:198.4mm; --dn-h:269.5mm; --dn-font-scale:1; }
  .dn-sheet{
    position:absolute; left:var(--dn-x); top:var(--dn-y);
    width:var(--dn-w); height:var(--dn-h);
    font-family:'Angsana New','AngsanaUPC','Angsana UPC','TH Sarabun New','Sarabun',serif;
    font-size:calc(13.75pt * var(--dn-font-scale, 1));
  }
  .dn-guide{position:absolute; inset:0; opacity:.28; pointer-events:none; background-size:100% 100%; background-repeat:no-repeat;}
  /* ภาพฟอร์มจริงซ้อนจางๆ ไว้เทียบตำแหน่งบนจอ (ไม่ถูกพิมพ์ออกกระดาษ) */
  .taxform-guide{position:absolute; inset:0; opacity:.28; pointer-events:none; background-size:100% 100%; background-repeat:no-repeat;}
  /* แถบคาลิเบรตตำแหน่ง */
  .tf-calib{
    display:flex; flex-wrap:wrap; gap:10px; align-items:center; max-width:210mm;
    margin:0 auto 10px; padding:10px 14px; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); font-size:12.5px;
  }
  .tf-calib label{display:flex; align-items:center; gap:6px; color:var(--muted);}
  .tf-calib input{width:74px; padding:5px 8px; border:1px solid var(--border); border-radius:6px; background:var(--surface-2);}
  /* คำเตือนเรื่องตั้งค่าหน้ากระดาษก่อนพิมพ์ (สาเหตุที่ทำให้ตำแหน่งเลื่อนบ่อยที่สุด) */
  .tf-warn{
    background:var(--danger-soft); border:1px solid var(--danger); border-radius:10px;
    padding:10px 14px; margin-bottom:10px; color:var(--text); line-height:1.5;
  }

  /* ---- ข้อมูลพนักงาน: การ์ดรายคนพร้อมรูปประจำตัว ---- */
  .emp-nick{font-weight:500; color:var(--muted);}
  .emp-bank-no{font-variant-numeric:tabular-nums; letter-spacing:.2px;}
  .emp-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px; margin-top:4px;}
  .emp-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:14px 16px; display:flex; flex-direction:column; gap:10px;
  }
  /* พนักงานที่ลาออกแล้วทำให้จางลง จะได้ไม่กลืนกับคนที่ยังทำงานอยู่ */
  .emp-card-left{opacity:.62;}
  .emp-card-head{display:flex; gap:12px; align-items:flex-start;}
  .emp-photo{
    border-radius:12px; object-fit:cover; flex-shrink:0;
    border:1px solid var(--border); background:var(--surface-2);
  }
  .emp-photo-blank{
    display:flex; align-items:center; justify-content:center;
    font-weight:700; color:var(--muted); text-transform:uppercase;
  }
  .emp-card-title{flex:1; min-width:0;}
  .emp-name{font-weight:650; font-size:15px; line-height:1.3; word-break:break-word;}
  .emp-pos{font-size:12.5px; color:var(--muted); margin-top:2px;}
  .emp-card-actions{display:flex; gap:4px; flex-shrink:0;}
  .emp-card-body{border-top:1px solid var(--border); padding-top:10px; display:flex; flex-direction:column; gap:6px;}
  .emp-row{display:flex; gap:10px; font-size:12.5px; align-items:flex-start;}
  .emp-row-label{color:var(--muted); flex:0 0 84px;}
  .emp-row-value{flex:1; min-width:0; word-break:break-word; white-space:pre-wrap;}
  .emp-service{color:var(--muted);}
  .emp-tel{color:var(--accent); text-decoration:none;}
  .emp-tel:hover{text-decoration:underline;}
  /* รูปเดิมในฟอร์มแก้ไข พร้อมปุ่มลบรูป */
  .emp-form-photo{display:flex; align-items:center; gap:12px; margin-bottom:8px;}

  /* ---- หน้าสถิติลูกค้า / ท็อป 10 ---- */
  .stats-search{display:flex; gap:8px; align-items:center; margin-top:4px;}
  .stats-search input{
    flex:1; padding:10px 14px; border:1px solid var(--border); border-radius:10px;
    background:var(--surface-2); font-size:14px;
  }
  .stats-search input:focus{outline:none; border-color:var(--accent); background:var(--surface);}

  /* เหรียญอันดับ */
  .cs-rank{
    display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
    border-radius:50%; font-weight:700; font-size:13px; background:var(--surface-2); color:var(--muted);
    font-variant-numeric:tabular-nums;
  }
  .cs-rank.gold{background:linear-gradient(145deg,#f5c451,#d9a12c); color:#4a3406;}
  .cs-rank.silver{background:linear-gradient(145deg,#dfe3e9,#b9c0ca); color:#3c434d;}
  .cs-rank.bronze{background:linear-gradient(145deg,#dda476,#bd7f4d); color:#452709;}

  .cs-name{min-width:240px;}
  .cs-name-btn{
    background:none; border:none; padding:0; text-align:left; cursor:pointer;
    font-weight:600; font-size:14px; color:var(--text); line-height:1.35;
  }
  .cs-name-btn:hover{color:var(--accent); text-decoration:underline;}
  .cs-inline-bar{height:6px; border-radius:999px; background:var(--surface-2); margin-top:6px; overflow:hidden; max-width:340px;}
  .cs-inline-bar span{display:block; height:100%; border-radius:999px; background:var(--accent);}

  /* กราฟแท่ง 12 เดือน */
  .cs-chart-head{font-size:12.5px; color:var(--muted); margin:14px 0 8px; font-weight:500;}
  .cs-chart{
    display:grid; grid-template-columns:repeat(12,1fr); gap:6px; align-items:end;
    background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:12px 10px;
  }
  .cs-bar-col{display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0;}
  .cs-bar-val{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; height:14px;}
  .cs-bar-track{width:100%; height:70px; display:flex; align-items:flex-end; background:transparent;}
  .cs-bar-fill{width:100%; min-height:2px; border-radius:4px 4px 2px 2px; background:var(--accent);}
  .cs-bar-lbl{font-size:10.5px; color:var(--muted-2); white-space:nowrap;}
  @media (max-width:760px){
    .cs-chart{grid-template-columns:repeat(6,1fr); row-gap:12px;}
  }

  /* ---- กล่องเช็คประวัติจัดส่งของลูกค้า (หน้าจัดส่งของ) ---- */
  .dc-head{font-size:12.5px; color:var(--muted); font-weight:500; margin:14px 0 8px;}
  .dc-future{background:color-mix(in srgb, var(--fuel) 10%, transparent);}
  @supports not (background: color-mix(in srgb, red 10%, transparent)){
    .dc-future{background:rgba(200,121,26,.10);}
  }

  /* ---- รายงานภาษีขาย: แถวใบที่ยกเลิกให้จางลงและขีดฆ่าเลขที่ ---- */
  tr.tax-void{opacity:.6;}
  tr.tax-void td:first-child{text-decoration:line-through;}

  /* ---- วางบิล: กล่องวิธีชำระเงินท้ายใบวางบิล (พิมพ์เท่านั้น) ---- */
  .bn-pay{
    margin:2px 0 10px; border:var(--qt-line); border-radius:6px;
    padding:9px 12px; font-size:11.5px; line-height:1.75; color:#1a1f29;
  }
  .bn-pay-name{font-weight:600;}
  .bn-pay-u{text-decoration:underline; text-underline-offset:2.5px; font-weight:600;}
  .bn-pay-bank{margin-top:3px; font-weight:600; letter-spacing:.2px;}

  /* ---- วางบิล: รายการใบกำกับภาษีให้ติ๊กเลือกในหน้าสร้างใบวางบิล ---- */
  .bill-pick-list{
    max-height:300px; overflow-y:auto; border:1px solid var(--border);
    border-radius:10px; padding:6px; background:var(--surface-2);
  }
  .bill-pick{
    display:flex; align-items:center; gap:10px; padding:9px 10px; background:var(--surface);
    border:1px solid var(--border); border-radius:8px; margin-bottom:6px; cursor:pointer; font-size:13px;
  }
  .bill-pick:last-child{margin-bottom:0;}
  .bill-pick:hover{border-color:var(--accent);}
  .bill-pick input{margin:0; flex:none;}
  .bill-pick-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
  .bill-pick-sub{font-size:11.5px; color:var(--muted);}
  .bill-pick-amt{font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap;}

  /* ---- หน้าเลือกคอลัมน์สำหรับ Export ---- */
  .export-col-row{
    display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border);
    border-radius:8px; margin-bottom:6px; cursor:pointer; font-size:13.5px;
  }
  .export-col-row:hover{background:var(--surface-2);}
  .export-col-row input{margin:0;}
  .export-col-row span:nth-of-type(1){flex:1;}
  .export-col-w{font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums;}
  .export-bar{height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden;}
  .export-bar span{display:block; height:100%; border-radius:999px;}
  .export-bar.ok span{background:var(--sales,#2e9e6b);}
  .export-bar.warn span{background:#d79a2b;}
  .export-bar.over span{background:var(--danger,#c0392b);}

  /* ---- ตารางจัดส่งที่พิมพ์ออกกระดาษ ---- */
  .dp-sheet{background:#fff; color:#111; padding:14px 16px; margin:0 auto 18px; max-width:190mm;}
  .dp-sheet.dp-landscape{max-width:277mm;}
  .dp-head{margin-bottom:10px;}
  .dp-head h2{margin:0 0 3px; font-size:17px; color:#111;}
  .dp-sub{font-size:12px; color:#555;}
  .dp-table{width:100%; border-collapse:collapse; table-layout:fixed; font-size:11px; min-width:0;}
  .dp-table th,.dp-table td{
    border:1px solid #b9b9b9; padding:5px 6px; text-align:left; vertical-align:top;
    word-break:break-word; overflow-wrap:break-word; color:#111;
  }
  .dp-table thead th{background:#eee; font-weight:600; font-size:10.5px; text-transform:none; letter-spacing:0; white-space:normal;}
  .dp-table td.num,.dp-table th.num{text-align:right; font-variant-numeric:tabular-nums;}
  .dp-table tr.dp-foot td{background:#f3f3f3; font-weight:600;}

  /* ---- รายงานภาษีขายที่พิมพ์ออกกระดาษ (A4 แนวนอน) ---- */
  .tx-report .qt-head{margin-bottom:12px; padding-bottom:10px;}
  .tx-report .qt-title .t{font-size:19px;}
  .tx-report .dp-table{font-size:10.5px;}
  .tx-report .dp-table th,.tx-report .dp-table td{padding:5px 7px;}
  /* เลขที่ / วันที่ / เลข PO / ยอดเงิน ห้ามตัดบรรทัด จะอ่านยากเวลาส่งบัญชี */
  .tx-report .dp-table td.num,
  .tx-report .dp-table tbody td:nth-child(-n+2),
  .tx-report .dp-table tbody td:nth-child(5){white-space:nowrap;}
  .tx-report .qt-sign{margin-top:34px; color:#333;}
  .tx-sum{
    display:flex; flex-wrap:wrap; gap:6px 24px; margin-bottom:10px; padding:8px 12px;
    border:1px solid #d5d9e0; background:#f6f8fa; font-size:11px; color:#444;
  }
  .tx-sum strong{font-size:12.5px; color:#111; margin-left:5px; font-variant-numeric:tabular-nums;}


  /* ---- บัตรตอก ---- */
  .tc-summary{min-width:900px;}
  .tc-summary .tc-emp-name{font-weight:600;}
  .tc-summary tbody td{vertical-align:middle;}
  .tc-summary .tc-muted{color:var(--muted); font-size:13px;}
  .tc-summary .tc-actions{text-align:right; white-space:nowrap;}
  .tc-net{font-weight:700; color:var(--sales);}

  .tc-card-head{display:flex; align-items:center; gap:14px; margin-bottom:14px; flex-wrap:wrap;}
  .tc-card-title{flex:1; min-width:200px;}
  .tc-card-name{font-family:'Kanit','Sarabun',system-ui,sans-serif; font-size:19px; font-weight:600;}
  .tc-card-sub{font-size:12.5px; color:var(--muted);}

  /* ตารางกรอกเวลา: แถวเตี้ยกว่าตารางอื่นเพราะมี 15-16 แถวต่อหนึ่งงวด ต้องเห็นทั้งงวดในจอเดียว */
  .tc-grid{min-width:860px;}
  .tc-grid tbody td{padding:5px 10px; vertical-align:middle;}
  .tc-grid thead th{padding:9px 10px;}
  .tc-grid tbody tr:hover{background:transparent;}
  .tc-date{white-space:nowrap;}
  .tc-daynum{font-weight:600; font-variant-numeric:tabular-nums; margin-right:7px;}
  .tc-dow{font-size:12px; color:var(--muted);}
  /* เสาร์-อาทิตย์ ทำสีไว้ให้เห็นชัดเหมือนบัตรกระดาษเดิม (ยังกรอกเวลาได้ถ้าวันนั้นมีงาน) */
  .tc-weekend{background:var(--danger-soft);}
  .tc-weekend .tc-dow{color:var(--danger); font-weight:600;}
  /* วันหยุดนักขัตฤกษ์คาดสีของตัวเอง จะได้ไม่สับสนกับวันอาทิตย์ */
  .tc-holiday{background:var(--holiday-soft);}
  .tc-holiday .tc-dow{color:var(--holiday); font-weight:600;}
  .tc-input{
    width:100%; padding:5px 8px; border:1px solid var(--border); border-radius:7px;
    background:var(--surface); color:var(--text); font-size:13.5px;
  }
  .tc-input:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent);}
  .tc-input.num{text-align:right; font-variant-numeric:tabular-nums;}
  .tc-grid td:nth-child(2) .tc-input,.tc-grid td:nth-child(3) .tc-input{min-width:104px;}
  /* ชั่วโมงในตารางรายวันอ่านเป็น ชม./นาที ตรงๆ (เลขทศนิยมโผล่เฉพาะตอนอธิบายวิธีคิดค่า OT) */
  .tc-grid .tc-worked,.tc-grid .tc-ot{font-weight:600; white-space:nowrap;}
  .tc-grid tfoot td{font-weight:600; white-space:nowrap;}

  .tc-sum-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px;}
  @media (max-width:960px){ .tc-sum-grid{grid-template-columns:1fr;} }
  .tc-sum-panel{padding:16px 18px;}
  .tc-sum-title{font-family:'Kanit','Sarabun',system-ui,sans-serif; font-weight:600; margin-bottom:12px;}
  /* สรุปค่าแรง: แยกหัวข้อรายได้ / รายการหัก / สุทธิ ให้ไล่ตามได้ว่ายอดสุทธิมาจากไหน */
  .tc-pay-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:7px 0 7px 14px; font-size:14px;}
  .tc-pay-row + .tc-pay-row{border-top:1px dashed var(--border);}
  .tc-pay-row .num{font-variant-numeric:tabular-nums; white-space:nowrap;}
  .tc-pay-label{display:flex; flex-direction:column;}
  .tc-pay-note{font-size:11px; color:var(--muted); margin-top:1px;}
  .tc-pay-head{
    display:flex; justify-content:space-between; gap:12px; margin-top:12px; padding:7px 10px;
    background:var(--surface-2); border-radius:7px; font-weight:600; font-size:13.5px;
  }
  .tc-pay-head .num{font-variant-numeric:tabular-nums;}
  .tc-pay-net{
    display:flex; justify-content:space-between; gap:12px; align-items:baseline;
    margin-top:12px; padding-top:11px; border-top:2px solid var(--border);
    font-size:18px; font-weight:700; color:var(--sales);
  }
  .tc-pay-net .num{font-variant-numeric:tabular-nums;}
  .tc-leave-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px;}
  .tc-leave-cell{
    background:var(--surface-2); border:1px solid var(--border); border-radius:9px;
    padding:8px 6px; text-align:center;
  }
  .tc-leave-cell span{display:block; font-size:11.5px; color:var(--muted);}
  .tc-leave-cell strong{font-size:17px; font-variant-numeric:tabular-nums;}
  .tc-leave-cell strong{display:block; line-height:1.25;}
  .tc-quota{display:block; font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums;}
  .tc-quota-over{color:var(--danger); font-weight:600;}
  .tc-hint{font-size:11.5px; color:var(--muted); margin:10px 0 0;}
  .tc-leave-strip-5{grid-template-columns:repeat(4,1fr) 1.35fr;}
  /* ตัวเลือกวันหยุดนักขัตฤกษ์: ติ๊กทีเดียวลงให้พนักงานทุกคนในงวด */
  .tc-hol-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:8px;}
  .tc-hol-row{
    display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer;
    border:1px solid var(--border); border-radius:9px; background:var(--surface-2); font-size:13.5px;
  }
  .tc-hol-row:has(input:checked){border-color:var(--accent); background:var(--accent-soft);}
  .tc-hol-date{font-weight:600; font-variant-numeric:tabular-nums;}
  .tc-hol-dow{color:var(--muted); font-size:12px;}
  .tc-hol-sun .tc-hol-dow{color:var(--danger); font-weight:600;}

  /* ---- บัตรตอก: หน้ากระดาษสำหรับพิมพ์ ---- */
  .tcp-sheet{
    background:#fff; color:#111; width:210mm; max-width:100%; margin:0 auto 18px;
    padding:14mm 12mm; box-shadow:var(--shadow); font-size:12px;
  }
  .tcp-head{text-align:center; margin-bottom:10px;}
  .tcp-company{font-size:12.5px;}
  .tcp-title{font-family:'Kanit','Sarabun',system-ui,sans-serif; font-size:19px; font-weight:600; margin:2px 0;}
  .tcp-who{font-size:15px; font-weight:600;}
  .tcp-meta{font-size:12px; color:#444;}
  .tcp-rule{font-size:10.5px; color:#555; margin-bottom:4px;}
  .tcp-sheet table{width:100%; min-width:0; border-collapse:collapse;}
  .tcp-table th,.tcp-table td{border:1px solid #999; padding:3px 6px; font-size:11.5px; color:#111;}
  .tcp-table thead th{background:#ececec; text-align:center; text-transform:none; letter-spacing:0; font-weight:600;}
  .tcp-table td.num,.tcp-table th.num{text-align:right; font-variant-numeric:tabular-nums;}
  .tcp-table tbody tr:hover{background:transparent;}
  .tcp-weekend td{background:#f6dcda;}
  .tcp-holiday td{background:#fbf0d4;}
  /* สรุปจำนวนวัน: แถวเดียวจบ อ่านแยกจากตารางเงิน */
  .tcp-days{width:100% !important; margin-top:10px;}
  .tcp-days th,.tcp-days td{border:1px solid #999; padding:3px 8px; font-size:11px; text-align:center; color:#111;}
  .tcp-days thead th{background:#ececec; text-transform:none; letter-spacing:0; font-weight:600;}
  .tcp-days tbody td{font-size:13px; font-weight:600;}
  .tcp-days tbody tr:hover{background:transparent;}
  .tcp-days tbody tr:last-child td{border-bottom:1px solid #999;}
  .tcp-q{display:block; font-size:9.5px; font-weight:400; color:#666;}

  /* สลิปเงินเดือน: 2 คอลัมน์ (รายการ / จำนวนเงิน) แบ่งหัวข้อรายได้-รายการหัก-สุทธิ */
  .tcp-pay{width:100% !important; margin-top:12px; border:1px solid #999;}
  .tcp-pay td{border:none; border-bottom:1px solid #ddd; padding:4px 10px; font-size:12px; color:#111;}
  .tcp-pay td.num{text-align:right; width:130px; font-variant-numeric:tabular-nums;}
  .tcp-pay tbody tr:hover{background:transparent;}
  .tcp-pay .tcp-pay-label{padding-left:22px;}
  .tcp-pay-note{display:block; font-size:10px; color:#666;}
  .tcp-pay tr.tcp-pay-head td{
    background:#f0f0f0; font-weight:700; padding-left:10px;
    border-top:1px solid #999; border-bottom:1px solid #999;
  }
  .tcp-pay tr.tcp-net td{
    background:#ddd; font-weight:700; font-size:15px; padding:7px 10px;
    border-top:2px solid #666; border-bottom:none;
  }
  .tcp-cardnote{margin-top:10px; font-size:11.5px;}


  /* ---- ออกเงินเดือน ---- */
  .pr-bar{
    display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:12px 16px;
  }
  .pr-all{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; cursor:pointer; margin:0;}
  .pr-count{font-size:13px; color:var(--muted); margin-right:auto;}
  .pr-table{min-width:900px;}
  .pr-table tbody td{vertical-align:middle;}
  .pr-table .tc-actions{text-align:right; white-space:nowrap;}
  .pr-table .tc-actions .btn + .btn{margin-left:6px;}
  .pr-bank{font-size:13px;}
  .pr-acct{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums;}
  .pr-picked{background:var(--accent-soft);}
  .pr-nocard td{color:var(--muted);}

  /* ---- สลิปเงินเดือน ----
     1 คน = 1 แผ่น A4 มีต้นฉบับอยู่บน สำเนาอยู่ล่าง ตัดตามเส้นประ
     ระยะและขนาดตัวอักษรถูกบีบให้ 2 ใบพอดีหน้ากระดาษหนึ่งแผ่น (พื้นที่พิมพ์ A4 สูงราว 1,047px)
     ถ้าจะขยายอะไรต้องวัดความสูงรวมของ .slip-sheet ใหม่ ไม่งั้นสำเนาจะตกไปหน้าที่สอง */
  .slip-sheet{
    background:#fff; color:#111; width:210mm; max-width:100%; margin:0 auto 18px;
    padding:8mm; box-shadow:var(--shadow);
  }
  .slip-slip{border:1px solid #999; padding:4mm 5mm;}
  .slip-cut{border-top:1px dashed #999; margin:2mm 0;}
  .slip-head{text-align:center; margin-bottom:5px;}
  .slip-company{font-size:10.5px; color:#333;}
  .slip-title{font-family:'Kanit','Sarabun',system-ui,sans-serif; font-size:15px; font-weight:600; line-height:1.3;}
  .slip-period{font-size:10.5px; color:#444;}
  .slip-copy{
    display:inline-block; margin-top:3px; padding:0 9px; border:1px solid #999; border-radius:3px;
    font-size:10.5px; font-weight:700; letter-spacing:.5px;
  }
  .slip-copy span{font-weight:400; font-size:9.5px; color:#555; letter-spacing:0;}
  .slip-slip table{width:100%; min-width:0; border-collapse:collapse;}
  .slip-who{margin-bottom:5px;}
  .slip-who td{border:none; padding:1px 0; font-size:11px; color:#111; line-height:1.4;}
  .slip-who-label{color:#666; width:76px; font-size:10px;}
  .slip-who tbody tr:hover,.slip-money tbody tr:hover{background:transparent;}
  .slip-money td{border:none; border-bottom:1px solid #e4e4e4; padding:1.5px 7px; font-size:11px; color:#111; line-height:1.3;}
  .slip-money td.num{text-align:right; width:110px; font-variant-numeric:tabular-nums;}
  .slip-note{display:block; font-size:9px; color:#666; line-height:1.35;}
  .slip-money tr.slip-sec td{background:#f0f0f0; font-weight:700; border-bottom:1px solid #999;}
  .slip-money tr.slip-sub td{font-weight:600; border-bottom:1px solid #999;}
  .slip-money tr.slip-net td{
    background:#ddd; font-weight:700; font-size:12.5px; padding:4px 7px;
    border-top:2px solid #666; border-bottom:none;
  }
  .slip-cardnote{margin-top:5px; font-size:10px;}
  .slip-sign{display:flex; gap:34px; margin-top:8px; font-size:10px; text-align:center; color:#333;}
  .slip-sign > div{flex:1;}
  .slip-line{border-bottom:1px dotted #666; height:15px; margin-bottom:3px;}


  /* ---- ใบออกหน้างาน: ใบเสนอราคาที่ตัดหัวบริษัทและราคาออก ---- */
  .ws-head{text-align:center; border-bottom:2px solid #1a1f29; padding-bottom:12px; margin-bottom:18px;}
  .ws-title{font-family:'Kanit','Sarabun',system-ui,sans-serif; font-size:22px; font-weight:700; letter-spacing:1px;}
  .ws-sub{font-size:12px; color:#555; margin-top:2px;}
  /* คอลัมน์ "ตรวจรับ" เว้นว่างไว้ให้ติ๊กหน้างานด้วยปากกา */
  .ws-items td:last-child{height:26px;}

  @media print{
    /* สลิปเงินเดือน: ต้นฉบับ+สำเนาของคนเดียวกันอยู่แผ่นเดียว ห้ามให้ใบใดถูกตัดข้ามหน้า */
    .slip-sheet{
      width:100%; max-width:100%; margin:0; padding:0; box-shadow:none;
      page-break-after:always; break-after:page;
    }
    .slip-sheet:last-child{page-break-after:auto; break-after:auto;}
    .slip-slip{page-break-inside:avoid; break-inside:avoid;}
    .slip-money tr.slip-sec td{background:#f0f0f0 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
    .slip-money tr.slip-net td{background:#ddd !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}

    /* บัตรตอก: 1 คน = 1 หน้ากระดาษ และสีวันเสาร์-อาทิตย์ต้องพิมพ์ออกมาด้วย */
    .tcp-sheet{
      width:100%; max-width:100%; margin:0; padding:6mm 4mm; box-shadow:none;
      page-break-after:always; break-after:page;
    }
    .tcp-sheet:last-child{page-break-after:auto; break-after:auto;}
    .tcp-table tr,.tcp-table td,.tcp-table th{page-break-inside:avoid; break-inside:avoid;}
    .tcp-table thead th,.tcp-days thead th,.tcp-table tfoot td{
      background:#ececec !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;
    }
    .tcp-pay tr.tcp-pay-head td{background:#f0f0f0 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
    .tcp-pay tr.tcp-net td{background:#ddd !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
    .tcp-pay,.tcp-days{page-break-inside:avoid; break-inside:avoid;}
    .tcp-weekend td{background:#f6dcda !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
    .tcp-holiday td{background:#fbf0d4 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}

    @page{ size:A4 portrait; margin:12mm; }
    html, body{height:auto !important; overflow:visible !important;}
    body *{visibility:hidden;}
    #app, #drawer-overlay, #drawer{display:none !important;}
    #printView, #printView *{visibility:visible;}
    #printView{
      position:static !important; inset:auto !important; top:auto; left:auto; right:auto; bottom:auto;
      width:100%; height:auto !important; max-height:none !important; overflow:visible !important; background:#fff;
    }
    .print-toolbar{display:none;}
    .print-sheet{box-shadow:none; margin:0 auto;}
    .qt-sheet{max-width:100%; width:100%; padding:16px 22px; font-size:12.5px; overflow:visible;}
    .qt-sheet{page-break-after:always;}
    .qt-sheet:last-child{page-break-after:auto;}
    .qt-sheet + .qt-sheet{margin-top:0;}
    /* Safari/WebKit silently ignores page-break-inside:avoid on <tr> when the table
       uses border-collapse:collapse — switching to separate (with 0 spacing) fixes
       rows getting sliced across a page break during print/PDF export. */
    table.qt-items{page-break-inside:auto; break-inside:auto; border-collapse:separate !important; border-spacing:0 !important;}
    table.qt-items tr{page-break-inside:avoid !important; break-inside:avoid-page !important; page-break-after:auto;}
    table.qt-items td{page-break-inside:avoid !important; break-inside:avoid-page !important;}
    table.qt-items td,table.qt-items th{border-top:none !important; border-left:none !important;}
    table.qt-items thead th{border-top:var(--qt-line) !important;}
    table.qt-items th:first-child,table.qt-items td:first-child{border-left:var(--qt-line) !important;}
    table.qt-bottom-table,.qt-sign{page-break-inside:avoid; break-inside:avoid-page;}
    .qt-remark,.qt-terms,.bn-pay{page-break-inside:avoid;}

    /* ใบกำกับภาษี/ใบส่งของ: พิมพ์ทับกระดาษฟอร์มต่อเนื่อง 9x11 นิ้ว ระยะขอบ 0 เพื่อให้ตำแหน่งตรงกับที่คาลิเบรตไว้
       ใช้ named page เฉพาะฟอร์มนี้ ไม่กระทบ @page หลักของใบเสนอราคา/PO */
    .taxform-page{
      page:taxformpage; width:210mm; height:297mm;
      margin:0 !important; box-shadow:none !important; overflow:visible;
    }
    .taxform-page + .taxform-page{ page-break-before:always; }
    .taxform-cell{ outline:none !important; }
    .qt-editable{ outline:none !important; background:none !important; }
    .taxform-hint,.tf-calib,.taxform-guide,.dn-guide{ display:none !important; }

    /* ตารางจัดส่ง: ให้ไหลข้ามหน้าได้ แต่ห้ามตัดกลางแถว และซ้ำหัวตารางทุกหน้า
       (border-collapse:separate เพราะ WebKit จะไม่สนใจ page-break-inside บน tr ถ้าใช้ collapse) */
    .dp-sheet{max-width:none !important; width:100% !important; padding:0 !important; margin:0 !important;}
    .dp-table{border-collapse:separate !important; border-spacing:0 !important; page-break-inside:auto;}
    .dp-table thead{display:table-header-group;}
    .dp-table tr{page-break-inside:avoid !important; break-inside:avoid-page !important;}
    .dp-table td,.dp-table th{border-top:none !important; border-left:none !important;}
    .dp-table thead th{border-top:1px solid #b9b9b9 !important;}
    .dp-table th:first-child,.dp-table td:first-child{border-left:1px solid #b9b9b9 !important;}
    .dp-table thead th{background:#eee !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
    .dp-table tr.dp-foot td{background:#f3f3f3 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}

    /* รายงานภาษีขาย: หัวกระดาษ/แถบสรุป/ช่องเซ็นชื่อ ห้ามถูกตัดกลาง */
    .tx-report .qt-head,.tx-sum,.tx-report .qt-sign{page-break-inside:avoid; break-inside:avoid-page;}
    .tx-sum{background:#f6f8fa !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
  }
  /* ใช้ A4 ให้ตรงกับที่ไดรเวอร์เครื่องพิมพ์ตั้งไว้ เพื่อไม่ให้เบราว์เซอร์ย่อหน้าให้พอดี
     (เนื้อหาที่ต้องพิมพ์กว้างแค่ ~190mm จึงอยู่ในกรอบ A4 ได้สบาย แม้กระดาษจริงจะกว้าง 9 นิ้ว)
     ระยะขอบ 0 เพราะตำแหน่งคุมด้วยค่าคาลิเบรตในหน้าเว็บแทน */
  @page taxformpage{ size:A4 portrait; margin:0; }

  @media (max-width:860px){
    .sidebar{width:76px; flex-basis:76px; padding:16px 8px;}
    .brand-word,.brand-sub,.nav-item span.nav-label{display:none;}
    .nav-item{justify-content:center;}
    /* จอแคบ: ซ่อนตัวหนังสือ/ลูกศรหัวข้อ เหลือแค่เส้นคั่นกลุ่มแทน (ย่อ/ขยายกลุ่มใช้ไม่ได้ตอนจอแคบ แสดงทุกเมนูเสมอ) */
    .nav-section{font-size:0; padding:0; height:0; border-top:1px solid rgba(255,255,255,.10); margin:10px 6px; cursor:default; pointer-events:none;}
    .nav-section-chev{display:none;}
    /* หัวข้อย่อยไม่ต้องมีเส้นคั่นซ้ำกับหัวข้อหลักที่อยู่ติดกัน และไม่ต้องเยื้อง */
    .nav-section-sub{display:none;}
    .nav-list-sub{padding-left:0; margin-left:0; border-left:none;}
    .nav-list-collapsed{display:flex;}
    .main{padding:20px 16px 50px;}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  }