:root{
    --paper:#EEF0F2;--card:#FFF;--ink:#10151C;--muted:#6B7580;
    --line:#D6DAE0;--blue:#0B4F8F;--blue-soft:#E7EFF7;
    --amber:#B8860B;--amber-soft:#FDF4DC;--red:#A4262C;--green:#1B7040;
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
  /* attribute hidden ต้องชนะ CSS ที่ตั้ง display ไว้เสมอ (เคยทำให้แถบโหมดทดสอบและรูปสลิปแสดงผิด) */
  [hidden]{display:none!important}
  html{-webkit-text-size-adjust:100%}
  body{font-family:'IBM Plex Sans Thai',system-ui,sans-serif;background:var(--paper);color:var(--ink);font-size:16px;line-height:1.5;padding-bottom:160px}
  .wrap{max-width:560px;margin:0 auto;padding:16px 14px 0}

  header{margin-bottom:16px}
  .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--blue);text-transform:uppercase;display:flex;align-items:center;gap:8px}
  .eyebrow::after{content:"";flex:1;height:2px;background:var(--blue);opacity:.25}
  h1{font-size:23px;font-weight:700;letter-spacing:-.02em;margin-top:6px}
  .sub{font-size:13px;color:var(--muted);margin-top:2px}

  .card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:12px}
  .card-title{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}

  label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:5px}
  .field{margin-bottom:13px}
  .field:last-child{margin-bottom:0}
  select,input,textarea{width:100%;font-family:inherit;font-size:16px;font-weight:500;padding:11px;border:1.5px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
  input[type=number]{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
  select:focus,input:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
  select{appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7580' stroke-width='2.5' stroke-linecap='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:36px}
  textarea{resize:vertical;min-height:58px;line-height:1.5}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hint{font-size:11.5px;color:var(--muted);margin-top:4px}

  .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
  .chip{background:var(--blue-soft);border:none;color:var(--blue);border-radius:20px;padding:5px 12px;font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;cursor:pointer}
  .chip:active{background:var(--blue);color:#fff}

  .toggle-btn{width:100%;display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;margin-bottom:12px}
  .toggle-btn .chev{transition:transform .18s;color:var(--muted);font-size:12px}
  .toggle-btn.open .chev{transform:rotate(180deg)}
  .fold{display:none}
  .fold.show{display:block}

  .switch{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);gap:12px}
  .switch:last-child{border-bottom:none}
  .switch-label{font-size:14px;font-weight:500}
  .switch-price{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);display:block;font-weight:500}
  .switch input[type=checkbox]{width:22px;height:22px;accent-color:var(--blue);flex-shrink:0}
  .switch input[type=number]{width:84px;padding:8px;text-align:right;font-size:15px}

  .line{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;gap:12px}
  .line:last-of-type{border-bottom:none}
  .line-label{color:var(--muted)}
  .line-val{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
  .line.minus .line-val{color:var(--red)}
  .line.sum{border-top:2px solid var(--ink);border-bottom:none;margin-top:6px;padding-top:11px;font-weight:700}
  .line.sum .line-label{color:var(--ink)}

  .warn{background:var(--amber-soft);border-left:3px solid var(--amber);padding:10px 12px;font-size:12.5px;color:#6B4E00;border-radius:0 6px 6px 0;margin-top:10px;display:none}
  .warn.show{display:block}

  .preview{background:#26282B;color:#E8EAED;border-radius:10px;padding:14px;font-size:13.5px;line-height:1.85;white-space:pre-wrap;word-break:break-word;margin-top:10px}

  .btn{width:100%;border:none;border-radius:8px;padding:13px;font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;margin-top:10px}
  .btn-primary{background:var(--blue);color:#fff}
  .btn-primary:active{background:#083D6E}
  .btn-ghost{background:var(--card);color:var(--ink);border:1.5px solid var(--line)}
  .btn.done{background:var(--green);color:#fff}

  .totalbar{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:2px solid var(--ink);padding:11px 14px 15px;box-shadow:0 -4px 20px rgba(16,21,28,.1);z-index:50}
  .totalbar-inner{max-width:560px;margin:0 auto}
  .total-row{display:flex;align-items:center;gap:12px;margin-bottom:9px}
  .total-meta{flex:1;min-width:0}
  .total-cap{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .total-num{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1}
  .total-num .baht{font-size:13px;color:var(--muted);margin-left:3px;font-weight:500}
  .actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}
  .actions button{border:none;border-radius:7px;padding:11px 4px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;background:var(--blue-soft);color:var(--blue);line-height:1.3}
  .actions button:active{background:var(--blue);color:#fff}
  .actions button.done{background:var(--green);color:#fff}

  .foot{text-align:center;font-size:11.5px;color:var(--muted);padding:6px 0 20px}

  /* ══════════ ล็อกอิน ══════════ */
  #gate{position:fixed;inset:0;background:var(--paper);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
  #gate.hide{display:none}
  .gate-box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px 22px;width:100%;max-width:380px}
  .gate-box .eyebrow{margin-bottom:6px}
  .gate-box h2{font-size:21px;font-weight:700;margin-bottom:4px}
  .gate-box .lead{font-size:13px;color:var(--muted);margin-bottom:20px}
  .gate-msg{font-size:13px;padding:10px 12px;border-radius:8px;margin-top:12px;display:none}
  .gate-msg.show{display:block}
  .gate-msg.err{background:#FBEAEA;color:var(--red);border-left:3px solid var(--red)}
  .gate-msg.ok{background:#E6F3EC;color:var(--green);border-left:3px solid var(--green)}
  .boot{text-align:center;color:var(--muted);font-size:14px;padding:40px 0}
  .gate-links{display:flex;justify-content:space-between;gap:12px;margin-top:14px}
  .gate-links a{color:var(--blue);font-size:13px;font-weight:600;text-decoration:none}

  /* ══════════ จัดการผู้ใช้ ══════════ */
  .u-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:10px}
  .u-card.pending{border-color:var(--amber);background:var(--amber-soft)}
  .u-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
  .u-name{flex:1;min-width:0}
  .u-name b{display:block;font-size:15px}
  .u-name span{display:block;font-size:12px;color:var(--muted);margin-top:2px;word-break:break-all}
  .u-tag{font-size:11px;font-weight:700;padding:4px 9px;border-radius:20px;white-space:nowrap}
  .u-tag.on{background:#E6F3EC;color:var(--green)}
  .u-tag.off{background:#F1F2F4;color:var(--muted)}
  .u-tag.wait{background:#FFF;color:var(--amber);border:1px solid var(--amber)}
  .u-act{display:flex;gap:7px;flex-wrap:wrap}
  .u-act select{flex:1;min-width:130px;padding:9px;font-size:14px}
  .u-act button{border:none;border-radius:7px;padding:9px 14px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
  .u-ok{background:var(--blue);color:#fff}
  .u-off{background:var(--card);color:var(--muted);border:1px solid var(--line)}
  .u-del{background:var(--card);color:var(--red);border:1px solid var(--red)}
  .u-sec{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:16px 0 9px}

  .d-grid{display:grid;grid-template-columns:1fr;gap:11px}
  /* การ์ดห้ามกว้างเกินคอลัมน์ — เดิมชื่อยาวบรรทัดเดียวดันการ์ดกว้างเกินจอมือถือ (หน้าหลักไม่เต็มจอ · 23 ก.ย. 69) */
  .d-grid>*{min-width:0}
  @media (min-width:860px){
    .wrap:has(#pageHome:not([hidden])){max-width:1120px}
    .d-grid{grid-template-columns:1fr 1fr;align-items:start}
    .home-act{grid-template-columns:1fr 1fr 1fr 1fr}
    .d-grid .span2{grid-column:1 / -1}
    .ub-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
    .ub-nav button{font-size:13px;padding:11px 8px}
  }

  .d-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
  .d-head > div{flex:1;min-width:0}
  .d-refresh{background:none;border:1px solid var(--line);border-radius:8px;padding:7px 11px;font-family:inherit;font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;flex-shrink:0}
  .d-refresh:active{background:var(--blue-soft);color:var(--blue);border-color:var(--blue)}

  .home-act{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:13px}
  .ha-btn{background:var(--card);border:1.5px solid var(--line);border-radius:11px;padding:14px 12px;font-family:inherit;text-align:left;cursor:pointer;transition:all .15s}
  .ha-btn b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
  .ha-btn span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
  .ha-btn:active{transform:scale(.985)}
  .ha-main{background:var(--blue);border-color:var(--blue)}
  .ha-main b{color:#fff}
  .ha-main span{color:rgba(255,255,255,.8)}
  .ha-badge{display:inline-block;font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;background:var(--amber);color:#fff;min-width:18px;padding:1px 6px;border-radius:9px;margin-left:5px;vertical-align:middle}
  .ha-main .ha-badge{background:#fff;color:var(--blue)}

  .d-list{margin-top:4px}
  .d-li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
  .d-li.tap{cursor:pointer;margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:7px}
  .d-li.tap:active{background:var(--blue-soft)}
  .d-li.tap:hover{background:var(--bg)}
  .d-li:last-child{border-bottom:none;padding-bottom:0}
  .d-li-t{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;min-width:46px;color:var(--blue)}
  .d-li-m{flex:1;min-width:0}
  .d-li-m b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .d-li-m span{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
  .d-li-tag{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;background:var(--blue-soft);color:var(--blue);padding:3px 8px;border-radius:6px;white-space:nowrap}
  .d-more{display:block;width:100%;background:none;border:none;border-top:1px solid var(--line);margin-top:9px;padding:10px 0 0;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--blue);cursor:pointer;text-align:center}

  .d-card{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:15px;margin-bottom:11px}
  .d-card h3{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-family:'IBM Plex Mono',monospace}
  .d-card.alert{border-color:var(--amber);background:var(--amber-soft)}
  .d-card.alert h3{color:var(--amber)}

  .d-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
  .d-row:last-child{border-bottom:none;padding-bottom:0}
  .d-row:first-of-type{padding-top:0}
  .d-num{font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:600;min-width:44px;font-variant-numeric:tabular-nums}
  .d-num.hot{color:var(--amber)}
  .d-num.zero{color:var(--line)}
  .d-lbl{flex:1;min-width:0}
  .d-lbl b{display:block;font-size:14px;font-weight:600}
  .d-lbl span{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
  .d-go{background:var(--blue-soft);border:none;border-radius:7px;padding:8px 13px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--blue);cursor:pointer;white-space:nowrap}
  .d-go:active{background:var(--blue);color:#fff}

  .d-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
  .d-stat{text-align:center;padding:11px 6px;background:var(--bg);border-radius:9px}
  .d-stat b{display:block;font-family:'IBM Plex Mono',monospace;font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
  .d-stat span{display:block;font-size:11px;color:var(--muted);margin-top:3px}

  .d-empty{text-align:center;padding:22px 14px;color:var(--muted);font-size:13px;line-height:1.7}
  .d-hello{font-size:15px;font-weight:600;margin-bottom:3px}
  .d-date{font-size:12.5px;color:var(--muted);margin-bottom:14px}

  .n-item{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:13px;margin-bottom:8px;display:flex;gap:11px;align-items:flex-start}
  .n-item.unread{border-left:3px solid var(--blue)}
  .n-item.high{border-left:3px solid var(--amber)}
  .n-ico{font-size:17px;line-height:1.3;flex-shrink:0}
  .n-txt{flex:1;min-width:0}
  .n-txt b{display:block;font-size:13.5px;font-weight:600}
  .n-txt span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
  .n-txt i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:4px}
  .n-act{display:flex;flex-direction:column;gap:5px;flex-shrink:0}
  .n-act button{background:var(--blue-soft);border:none;border-radius:6px;padding:6px 10px;font-family:inherit;font-size:11.5px;font-weight:600;color:var(--blue);cursor:pointer;white-space:nowrap}
  .n-act button.done{background:#E6F3EC;color:var(--green)}

  .slip-drop{display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--line);border-radius:9px;padding:16px 12px;font-size:13px;color:var(--muted);cursor:pointer;text-align:center;transition:all .15s;background:var(--bg)}
  .slip-drop:hover{border-color:var(--blue);color:var(--blue)}
  .slip-drop.has{border-style:solid;border-color:var(--green);color:var(--green);background:#E6F3EC}
  .slip-prev{display:block;width:100%;max-height:220px;object-fit:contain;border-radius:9px;margin-top:9px;border:1px solid var(--line);background:var(--bg)}

  .ti-opt{display:flex;gap:13px;align-items:center;border:1.5px solid var(--line);border-radius:11px;padding:16px 15px;margin-bottom:10px;cursor:pointer;transition:all .15s;background:var(--card)}
  .ti-opt:hover{border-color:var(--blue);background:var(--blue-soft)}
  .ti-opt:active{transform:scale(.99)}
  .ti-ico{font-size:26px;line-height:1;flex-shrink:0}
  .ti-txt{flex:1;min-width:0}
  .ti-txt b{display:block;font-size:16px;font-weight:700}
  .ti-txt span{display:block;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.55}
  /* ── กล่องออกใบกำกับภาษี ── */
  #tov [hidden]{display:none!important}
  .t-sec{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.02em;margin:16px 0 8px}
  .ti-opt{position:relative}
  .ti-radio{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
  .ti-opt.sel{border-color:var(--blue);background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue)}
  .ti-opt.sel::after{content:'✓';position:absolute;top:9px;right:12px;font-weight:700;color:var(--blue)}
  .ti-opt:focus-within{outline:2px solid var(--blue);outline-offset:2px}
  .t-warn{background:var(--amber-soft);border-left:3px solid var(--amber);color:#6B4E00;font-size:12.5px;line-height:1.55;padding:10px 12px;border-radius:0 8px 8px 0;margin:0 0 6px}
  .t-credit{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .t-credit .chips{margin-top:0}
  #tov .chip{font-family:inherit}
  #tov .chip.on{background:var(--blue);color:#fff}
  .t-days{display:flex;align-items:center;gap:6px;margin-left:auto}
  .t-days input{width:78px;text-align:right}
  .t-days span{font-size:13px;color:var(--muted)}
  .t-note{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.5}
  .t-center{text-align:center}
  .t-check{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
  .t-check input{width:auto}
  .t-sum{background:var(--paper);border-radius:9px;padding:11px 13px;margin:16px 0 12px;font-size:13px}
  .t-sum div{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
  .t-sum span{color:var(--muted)}
  .t-sum b{font-family:'IBM Plex Mono',monospace;font-weight:600}
  .t-sum .tot{border-top:1px solid var(--line);margin-top:4px;padding-top:7px}
  .t-sum .tot span{color:var(--ink);font-weight:600}

  .at-link{background:#E6F3EC;border-left:3px solid var(--green);border-radius:9px;padding:13px;margin-top:11px;font-size:13px;line-height:1.6}
  .at-link a{display:block;color:var(--green);font-weight:600;word-break:break-all;margin-top:6px;text-decoration:underline}
  .at-link button{margin-top:9px;background:var(--card);border:1px solid var(--green);border-radius:7px;padding:8px 13px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--green);cursor:pointer}

  .pay-head{background:var(--bg);border-radius:9px;padding:13px;margin-bottom:14px}
  .pay-head b{display:block;font-size:15px;font-weight:600}
  .pay-head span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
  .pay-head .amt{display:flex;justify-content:space-between;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);font-size:13px}
  .pay-head .amt b{font-family:'IBM Plex Mono',monospace;font-size:15px}

  .r-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:13px;margin-bottom:8px}
  .r-card.overdue{border-left:3px solid var(--red)}
  .r-card.partial{border-left:3px solid var(--amber)}
  .r-card.paid{opacity:.62}
  .r-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
  .r-name{flex:1;min-width:0}
  .r-name b{display:block;font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .r-name span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;font-family:'IBM Plex Mono',monospace}
  .r-bal{text-align:right;white-space:nowrap}
  .r-bal b{display:block;font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
  .r-tag{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:20px;display:inline-block;margin-top:4px}
  .r-tag.unpaid{background:#F1F2F4;color:var(--muted)}
  .r-tag.partial{background:var(--amber-soft);color:var(--amber)}
  .r-tag.overdue{background:#FBEAEA;color:var(--red)}
  .r-tag.paid{background:#E6F3EC;color:var(--green)}
  .r-meta{font-size:11.5px;color:var(--muted);margin-bottom:10px}
  .r-meta .late{color:var(--red);font-weight:600}
  .r-act{display:flex;gap:7px;flex-wrap:wrap}
  .r-act button{border:none;border-radius:7px;padding:8px 13px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;background:var(--blue-soft);color:var(--blue)}
  .r-act button.pay{background:#E6F3EC;color:var(--green)}

  .test-banner{display:flex;align-items:center;gap:11px;background:var(--amber);border-radius:10px;padding:12px 14px;margin-bottom:11px;color:#fff;box-shadow:0 2px 10px rgba(212,160,23,.32)}
  .tb-dot{font-size:20px;line-height:1;flex-shrink:0}
  .tb-txt{flex:1;min-width:0}
  .tb-txt b{display:block;font-size:14px;font-weight:700}
  .tb-txt span{display:block;font-size:11.5px;opacity:.92;margin-top:2px}
  .test-banner button{background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.5);border-radius:7px;padding:7px 13px;font-family:inherit;font-size:12.5px;font-weight:700;color:#fff;cursor:pointer;white-space:nowrap;flex-shrink:0}
  .test-banner button:active{background:#fff;color:var(--amber)}
  body.testing{box-shadow:inset 0 0 0 3px var(--amber)}

  .userbar{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:12px}
  .ub-top{display:flex;align-items:center;gap:10px}
  .userbar .who{flex:1;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .userbar .who span{display:block;font-weight:500;color:var(--muted);font-size:11.5px;margin-top:1px}

  .ub-menu{position:relative;flex-shrink:0}
  .ub-dots{background:none;border:1px solid var(--line);border-radius:7px;width:38px;height:34px;font-size:17px;line-height:1;color:var(--muted);cursor:pointer;padding:0}
  .ub-drop{position:absolute;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--line);border-radius:9px;box-shadow:0 6px 20px rgba(16,21,28,.14);min-width:210px;z-index:40;display:none;overflow:hidden}
  .ub-drop.show{display:block}
  .ub-drop button{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line);padding:12px 14px;font-family:inherit;font-size:13.5px;font-weight:500;color:var(--ink);cursor:pointer}
  .ub-drop button:last-child{border-bottom:none;color:var(--red)}
  .ub-drop button:active{background:var(--blue-soft)}

  .ub-test{background:transparent;border:1px solid var(--line);border-radius:7px;width:38px;height:34px;font-size:15px;line-height:1;cursor:pointer;padding:0;flex-shrink:0;filter:grayscale(1);opacity:.42;transition:all .18s;box-shadow:none}
  .ub-test.on{background:var(--amber);border-color:var(--amber);filter:none;opacity:1;box-shadow:0 2px 9px rgba(212,160,23,.42)}
  .ub-test:not(.on):hover{opacity:.7;border-color:var(--muted)}

  .ub-bell{position:relative;background:none;border:1px solid var(--line);border-radius:7px;width:38px;height:34px;font-size:15px;line-height:1;cursor:pointer;padding:0;flex-shrink:0}
  .ub-bell i{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--red);color:#fff;font-style:normal;font-size:11px;font-weight:700;line-height:19px;text-align:center;font-family:'IBM Plex Mono',monospace;box-shadow:0 1px 4px rgba(0,0,0,.2)}
  .ub-bell.ring{animation:ring .55s ease}
  @keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}}

  .ub-nav{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:6px;margin-top:11px}
  .ub-nav button{background:var(--blue-soft);border:none;border-radius:8px;padding:10px 4px;font-family:inherit;font-size:12px;font-weight:600;color:var(--blue);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ub-nav button:active{background:var(--blue);color:#fff}

  #app.hide{display:none}

  .day-head{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--muted);margin:16px 0 8px;display:flex;align-items:center;gap:9px}
  .day-head::after{content:"";flex:1;height:1px;background:var(--line)}
  .day-head.today{color:var(--blue)}
  .day-head.today::after{background:var(--blue);opacity:.3}

  .j-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:13px;margin-bottom:8px}
  .j-card.cancelled{opacity:.55}
  .j-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:7px}
  .j-time{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:600;min-width:52px}
  .j-main{flex:1;min-width:0}
  .j-main b{display:block;font-size:14.5px;font-weight:600}
  .j-main span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
  .j-pump{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;background:var(--blue-soft);color:var(--blue);padding:3px 9px;border-radius:6px;white-space:nowrap}
  .j-tag{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;display:inline-block}
  .j-tag.booked{background:#F1F2F4;color:var(--muted)}
  .j-tag.confirmed{background:var(--blue-soft);color:var(--blue)}
  .j-tag.working{background:var(--amber-soft);color:var(--amber)}
  .j-tag.done{background:#E6F3EC;color:var(--green)}
  .j-tag.billed,.j-tag.paid{background:#E6F3EC;color:var(--green)}
  .j-tag.cancelled{background:#FBEAEA;color:var(--red)}
  .j-act{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
  .j-act select{flex:1;min-width:110px;padding:7px;font-size:12.5px}
  .j-act button{border:none;border-radius:7px;padding:7px 12px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;background:var(--blue-soft);color:var(--blue)}
  .j-act button:active{background:var(--blue);color:#fff}
  .j-act button.quote{background:#E6F3EC;color:var(--green)}
  .j-act button.cancel{background:var(--card);color:var(--red);border:1px solid var(--line)}
  .j-qt{font-size:11px;color:var(--green);margin-top:5px}

  .pump-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
  .pump-opt{border:1.5px solid var(--line);border-radius:9px;padding:11px;cursor:pointer;background:var(--card);text-align:left}
  .pump-opt b{display:block;font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:600}
  .pump-opt span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
  .pump-opt.busy{background:var(--amber-soft);border-color:var(--amber)}
  .pump-opt.busy span{color:var(--amber)}
  .pump-opt.on{border-color:var(--blue);background:var(--blue-soft);box-shadow:0 0 0 3px var(--blue-soft)}
  .pump-opt.on b{color:var(--blue)}

  .l-filters{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}
  .l-sum{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
  .l-sum b{color:var(--ink);font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}

  .q-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:9px}
  .q-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
  .q-no{flex:1;min-width:0}
  .q-no b{display:block;font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600}
  .q-no span{display:block;font-size:14px;font-weight:600;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .q-meta{font-size:12px;color:var(--muted);margin-bottom:11px}
  .q-amt{text-align:right;white-space:nowrap}
  .q-amt b{font-family:'IBM Plex Mono',monospace;font-size:16px;font-variant-numeric:tabular-nums}
  .q-tag{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;display:inline-block;margin-top:4px}
  .q-tag.draft{background:#F1F2F4;color:var(--muted)}
  .q-tag.sent{background:var(--blue-soft);color:var(--blue)}
  .q-tag.approved{background:#E6F3EC;color:var(--green)}
  .q-tag.rejected{background:#FBEAEA;color:var(--red)}
  .q-tag.expired{background:var(--amber-soft);color:var(--amber)}
  .q-fa{font-size:11px;color:var(--green);margin-top:3px}
  .q-act{display:flex;gap:7px;flex-wrap:wrap}
  .q-act select{flex:1;min-width:120px;padding:8px;font-size:13px}
  .q-act button{border:none;border-radius:7px;padding:8px 13px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;background:var(--blue-soft);color:var(--blue)}
  .q-act button:active{background:var(--blue);color:#fff}
  .q-act button.tax{background:#E6F3EC;color:var(--green)}
  .q-act button.dup{background:var(--amber-soft);color:var(--amber)}
  .q-empty{text-align:center;padding:36px 18px;color:var(--muted);font-size:14px}

  .sync-log{display:none;margin-top:13px;font-size:13px;line-height:1.9}
  .sync-log.show{display:block}
  .sync-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}
  .sync-row:last-child{border-bottom:none}
  .sync-row b{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
  .sync-bar{height:7px;background:var(--line);border-radius:4px;overflow:hidden;margin:11px 0}
  .sync-bar i{display:block;height:100%;background:var(--blue);width:0;transition:width .25s}
  .sync-msg{padding:11px 13px;border-radius:8px;margin-top:11px;font-size:13px;line-height:1.6;white-space:pre-wrap}
  .sync-msg.ok{background:#E6F3EC;border-left:3px solid var(--green);color:#12502F}
  .sync-msg.err{background:#FBEAEA;border-left:3px solid var(--red);color:var(--red)}
  .sync-msg.info{background:var(--amber-soft);border-left:3px solid var(--amber);color:#6B4E00}

  .fa-box{display:none;margin-top:11px;border-radius:9px;padding:12px;font-size:13px;line-height:1.6}
  .fa-box.show{display:block}
  .fa-box.ok{background:#E6F3EC;border-left:3px solid var(--green);color:#12502F}
  .fa-box.err{background:#FBEAEA;border-left:3px solid var(--red);color:var(--red)}
  .fa-box.info{background:var(--amber-soft);border-left:3px solid var(--amber);color:#6B4E00}
  .fa-box b{display:block;margin-bottom:4px}
  .fa-box pre{margin-top:9px;background:#26282B;color:#E8EAED;border-radius:7px;padding:11px;font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:1.55;overflow-x:auto;max-height:280px;white-space:pre-wrap;word-break:break-word}

  /* ══════════ ช่องค้นหาลูกค้า ══════════ */
  .lookup{position:relative}
  .lookup-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:var(--line);border:none;border-radius:50%;width:24px;height:24px;font-size:12px;color:var(--ink);cursor:pointer;line-height:1;padding:0}
  .lookup-list{position:absolute;left:0;right:0;top:calc(100% + 5px);background:var(--card);border:1.5px solid var(--blue);border-radius:8px;max-height:260px;overflow-y:auto;z-index:30;display:none;box-shadow:0 6px 20px rgba(16,21,28,.14)}
  .lookup-list.show{display:block}
  .lookup-item{padding:11px 13px;cursor:pointer;border-bottom:1px solid var(--line);font-size:14px}
  .lookup-item:last-child{border-bottom:none}
  .lookup-item:active,.lookup-item.on{background:var(--blue-soft)}
  .lookup-item .nm{font-weight:600;display:block}
  .lookup-item .meta{font-size:11.5px;color:var(--muted);display:block;margin-top:2px}
  .lookup-item .star{color:var(--amber)}
  .lookup-empty{padding:13px;font-size:13px;color:var(--muted);text-align:center}
  .picked{background:var(--blue-soft);border-radius:8px;padding:9px 12px;margin-top:7px;font-size:13px;font-weight:600;color:var(--blue);display:none}
  .picked.show{display:block}

  /* ══════════ ตัวอย่างเอกสาร ══════════ */
  .overlay{position:fixed;inset:0;background:#5A6068;z-index:100;overflow:auto;display:none}
  /* กล่องที่เปิดซ้อนบนหน้าอื่น ต้องอยู่ชั้นบนสุด */
  .overlay.layer2{z-index:140;background:rgba(32,36,42,.72);backdrop-filter:blur(2px)}
  .overlay.show{display:block}
  .ov-bar{position:sticky;top:0;background:var(--ink);padding:10px 14px;display:flex;gap:8px;align-items:center;z-index:10}
  .ov-bar span{flex:1;color:#fff;font-size:13px;font-weight:600}
  .ov-bar button{border:none;border-radius:7px;padding:9px 15px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}
  .ov-pdf{background:var(--blue);color:#fff}
  .ov-img{background:#2F6B4F;color:#fff}
  .ov-close{background:#3D444D;color:#fff}
  .ov-bar button:disabled{opacity:.5}
  .ov-body{padding:14px;display:flex;flex-direction:column;align-items:center;gap:14px}
  .ov-body.ov-wide{display:block;max-width:1120px;margin:0 auto;width:100%}

  /* ══════════ เอกสาร A4 ══════════ */
  .page{
    width:210mm;min-height:297mm;background:#fff;color:#000;
    padding:13mm 11mm 10mm;font-family:'Sarabun','IBM Plex Sans Thai',sans-serif;
    font-size:9.6pt;line-height:1.5;position:relative;flex-shrink:0;
    transform-origin:top center;
  }
  .p-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14mm;margin-bottom:5mm}
  .p-left{flex:1;min-width:0}
  .p-logo{width:44mm;margin-bottom:2.5mm}
  .p-co{font-size:8.6pt;line-height:1.55}
  .p-right{width:66mm;flex-shrink:0}
  .p-right h2{font-size:16pt;font-weight:600;text-align:right;margin-bottom:4mm;letter-spacing:.01em}
  .p-meta{display:grid;grid-template-columns:17mm 1fr;gap:.6mm 3mm;font-size:8.6pt;line-height:1.45}
  .p-meta .g{margin-top:2.6mm}
  .p-cust{font-size:8.6pt;line-height:1.55;margin-bottom:4mm}

  .p-tbl{width:100%;border-collapse:collapse;font-size:8.8pt}
  .p-tbl th,.p-tbl td{border:.6pt solid #000;padding:1.6mm 2mm;vertical-align:top}
  .p-tbl th{font-weight:600;text-align:center;font-size:8.8pt}
  .p-tbl td.c{text-align:center}
  .p-tbl td.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .p-terms{font-size:8.2pt;line-height:1.62;white-space:pre-wrap}

  .p-sumbox{border:.6pt solid #000;display:flex;align-items:center;margin-top:0}
  .p-sumtxt{flex:1;padding:4mm;font-size:8.8pt}
  .p-sumtbl{width:78mm;padding:4mm 4mm 4mm 0;font-size:8.8pt}
  .p-sumtbl div{display:flex;justify-content:space-between;gap:6mm;padding:.7mm 0;font-variant-numeric:tabular-nums}
  .p-sumtbl .sep{border-top:.5pt solid #999;margin:2mm 0 1mm;padding:0}
  .p-sumtbl .pay{font-weight:600}

  .p-sign{display:flex;gap:20mm;margin-top:32mm;font-size:8.8pt}
  .p-sign>div{flex:1}
  .p-sign .who{margin-bottom:16mm}
  .p-sign .cols{display:flex;gap:6mm}
  .p-sign .cols>div{flex:1;text-align:center}
  .p-sign .rule{border-top:.6pt solid #000;padding-top:1.2mm}

  .p-no{position:absolute;left:11mm;bottom:6mm;font-size:8.4pt}

  @media screen{
    .page{box-shadow:0 3px 16px rgba(0,0,0,.3)}
  }
  @media print{
    body{background:#fff;padding:0}
    .wrap,.totalbar{display:none!important}
    .overlay{position:static;display:block!important;background:#fff;overflow:visible}
    .ov-bar{display:none!important}
    .ov-body{padding:0;display:block}
    .page{box-shadow:none;margin:0;transform:none!important;page-break-after:always;width:auto;min-height:auto;padding:0}
    .page:last-child{page-break-after:auto}
    @page{size:A4;margin:12mm 10mm 9mm}
    .p-no{position:fixed;bottom:3mm}
  }