/* Joost — สีจากโลโก้: ดำแปรงพู่กัน, เขียวเปลือกอะโวคาโด, เนื้ออะโวคาโด, น้ำตาลเมล็ด */
:root{
  --bg:#F4F3EA; --surface:#FFFFFF; --sunk:#F7F6EE; --line:#E2DFCC;
  --ink:#1C1A15; --muted:#6B6757; --accent:#2F5A17; --accent-ink:#FFFFFF; --accent-soft:#EAEFCF;
  --flesh:#DCD77A; --seed:#6B4423; --seed-soft:#F3E8DC;
  --warn:#9A5B00; --warn-soft:#FBEFD5; --danger:#A3322A; --danger-soft:#F7E1DE;
  --info:#2F5DA8; --info-soft:#E3E9F6; --side:#EEEDE1;
  --shadow:0 1px 2px rgba(40,36,20,.06),0 4px 14px rgba(40,36,20,.05);
  --f-display:"Mitr","IBM Plex Sans Thai",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r:14px; color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#14130E; --surface:#1D1C16; --sunk:#18170F; --line:#302E24;
  --ink:#EEEBDD; --muted:#A39E89; --accent:#A9C86A; --accent-ink:#15200A; --accent-soft:#283217;
  --flesh:#C9C46A; --seed:#D6A77C; --seed-soft:#33261A;
  --warn:#E7B45C; --warn-soft:#3A2C12; --danger:#F08A80; --danger-soft:#3D1D1A;
  --info:#93B4F0; --info-soft:#1E2A42; --side:#18170F;
  --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark}}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.55}
[hidden]{display:none!important}
h1,h2{font-family:var(--f-display);margin:0;text-wrap:balance}
h1{font-weight:700;font-size:1.65rem}
h2{font-weight:600;font-size:1.1rem}

button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:8px 14px}
button:hover{border-color:var(--muted)}
button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input,select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0;width:100%}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.btn-primary:hover{filter:brightness(1.07);border-color:var(--accent)}
.linkbtn{border:none;background:none;color:var(--muted);padding:4px 0;font-size:.85rem;text-decoration:underline}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0}
.fld{display:grid;gap:4px;min-width:0}
.fld label,.lbl{font-size:.78rem;color:var(--muted);letter-spacing:.02em}
.hint{font-size:.8rem;color:var(--muted);margin:6px 0 0}
.msg{border-radius:8px;padding:10px 14px;font-size:.9rem}
.msg.err{background:var(--danger-soft);color:var(--danger)}
.msg.ok{background:var(--accent-soft);color:var(--accent)}

/* ---------- หน้าล็อกอิน ---------- */
.auth{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.auth-card{width:100%;max-width:380px;display:grid;gap:18px}
.auth-card .brand{display:flex;align-items:center;gap:10px}
.mark{width:36px;height:36px;border-radius:9px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:1.05rem}
.auth-card form{display:grid;gap:14px}
.auth-card .sub{color:var(--muted);margin:0;font-size:.92rem}

/* ---------- หน้าแอป ---------- */
.wrap{max-width:780px;margin:0 auto;padding:20px 16px 40px;display:grid;gap:18px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.topbar .brand{display:flex;align-items:center;gap:10px}
.userbox{display:flex;align-items:center;gap:10px;font-size:.9rem}
.userbox .who{color:var(--muted)}
.userbox .who b{color:var(--ink);font-weight:600}
.subhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 20px}
.dateline{color:var(--muted);margin:0}
.counts{display:flex;gap:16px;font-size:.88rem;color:var(--muted)}
.counts b{color:var(--ink);font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.counts .late b{color:var(--danger)}
.nav{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.nav button{border:none;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--muted);padding:8px 12px;margin-bottom:-1px}
.nav button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}

.add{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1.2fr) minmax(0,1fr) auto;gap:10px 8px;align-items:end}
.add .full{grid-column:1/-1}
.add input[type=number]{font-family:var(--f-mono);text-align:right}
@media (max-width:640px){.add{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.add .go{grid-column:1/-1}.add .fld:has(.seg){grid-column:1/-1}}

.seg{display:flex;background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:2px;gap:2px}
.seg label{flex:1;text-align:center;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:.9rem;color:var(--muted);white-space:nowrap;position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.seg label:has(input:checked){background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.seg label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:1px}

.ph{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.tabs{display:flex;gap:4px;background:var(--sunk);padding:3px;border-radius:9px}
.tabs button{border:none;background:transparent;padding:5px 12px;font-size:.88rem;color:var(--muted)}
.tabs button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}

.filters{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr)) auto;gap:8px;align-items:end;padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--line)}
@media (max-width:640px){.filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.filters .grow,.filters .btn-export{grid-column:1/-1}}
.btn-export{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px solid var(--accent);color:var(--accent);background:var(--surface);text-decoration:none;font-weight:600;white-space:nowrap}
.btn-export:hover{background:var(--accent-soft)}
.btn-export:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.filter-note{font-size:.82rem;color:var(--muted);margin:8px 0 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.list{list-style:none;margin:0;padding:0;display:grid}
.item{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:11px 2px;border-top:1px solid var(--line)}
.list .item:first-child{border-top:none}
.item input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent);margin:0}
.txt{min-width:0;overflow-wrap:anywhere}
.item.done .t{text-decoration:line-through;color:var(--muted)}
.meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.8rem;color:var(--muted);margin-top:2px;align-items:center}
.due{font-family:var(--f-mono);font-variant-numeric:tabular-nums;padding:0 6px;border-radius:4px}
.due.late{color:var(--danger);font-weight:600}
.due.today{color:var(--warn);background:var(--warn-soft);font-weight:600}
.payer{font-size:.75rem;font-weight:600;padding:1px 8px;border-radius:999px}
.payer.company{background:var(--accent-soft);color:var(--accent)}
.payer.person{background:var(--warn-soft);color:var(--warn)}
.amt{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;font-size:.95rem}
.amt small{font-family:var(--f-body);color:var(--muted);font-size:.78rem;margin-left:4px}
.item.done .amt{color:var(--muted)}
.x{border:none;background:transparent;color:var(--muted);padding:4px 8px;font-size:1.1rem;line-height:1}
.x:hover{color:var(--danger)}
.blank{padding:26px 8px;text-align:center;color:var(--muted);font-size:.92rem}
.foot{display:flex;justify-content:flex-end;margin-top:10px}

/* ตารางพนักงาน */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th{text-align:left;font-weight:500;color:var(--muted);font-size:.78rem;padding:6px 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl td.actions{white-space:nowrap;text-align:right}
.tbl td.actions button{padding:4px 10px;font-size:.82rem}
.role{font-size:.75rem;padding:1px 8px;border-radius:999px;background:var(--sunk);color:var(--muted)}
.role.admin{background:var(--accent-soft);color:var(--accent);font-weight:600}
.off{color:var(--muted)}
.newuser{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:10px 8px;align-items:end;margin-bottom:16px}
@media (max-width:640px){.newuser{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.newuser button{grid-column:1/-1}}
.inline-form{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.inline-form input{width:160px}

dialog{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);padding:20px;max-width:min(380px,calc(100vw - 32px));width:100%}
dialog::backdrop{background:rgba(0,0,0,.35)}
dialog form{display:grid;gap:12px}
.row-end{display:flex;justify-content:flex-end;gap:8px}

/* ---------- โครงหน้า: เมนูซ้าย + เนื้อหา ---------- */
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.side{background:var(--side);border-right:1px solid var(--line);padding-block:18px;padding-inline:14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto}
.side .brand{display:flex;align-items:center;gap:10px;padding-inline:6px}
.brand-name{font-family:var(--f-display);font-weight:700;font-size:1.2rem}
.menu{display:grid;gap:16px}
.menu-group{display:grid;gap:2px}
.menu-h{font-size:.72rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;padding:0 10px 4px}
.menu button{display:flex;align-items:center;justify-content:space-between;gap:8px;border:none;background:transparent;color:var(--ink);text-align:left;padding:9px 10px;border-radius:8px;font-size:.93rem}
.menu button span{display:flex;align-items:center;gap:10px;min-width:0}
.menu button:hover{background:var(--sunk)}
.menu button[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.menu button b{font-family:var(--f-mono);font-size:.78rem;font-weight:500;min-width:22px;text-align:center;padding:1px 7px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.menu button b:empty{display:none}
.menu button b.n-hot{background:var(--danger);border-color:var(--danger);color:var(--surface)}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side-foot{margin-top:auto;display:grid;gap:10px;padding:12px 8px 0;border-top:1px solid var(--line);font-size:.88rem}
.side-foot .who{color:var(--muted);line-height:1.4}
.side-foot .who b{color:var(--ink)}
.side-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.side-actions button{padding:6px 12px;font-size:.85rem}
.main{min-width:0;max-width:880px;width:100%;padding-inline:24px;padding-block:24px 48px;display:grid;gap:18px;align-content:start}
.stack{display:grid;gap:18px}
.subhead .dateline{margin-top:2px}
.sum{display:grid;justify-items:end;gap:0}
.sum b{font-family:var(--f-mono);font-size:1.4rem;font-variant-numeric:tabular-nums}

@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;height:auto;flex-direction:column;gap:8px;padding-block:10px 0;padding-inline:0;border-right:none;border-bottom:1px solid var(--line)}
  .side .brand{padding-inline:16px}
  .menu{display:flex;gap:4px;overflow-x:auto;padding-inline:12px;padding-bottom:8px;scrollbar-width:none}
  .menu::-webkit-scrollbar{display:none}
  .menu-group{display:flex;gap:4px}
  .menu-h{display:none}
  .menu button{white-space:nowrap;padding:7px 10px;font-size:.88rem}
  .side-foot{position:absolute;top:8px;right:12px;margin:0;padding:0;border:none;display:flex;align-items:center}
  .side-foot .who{display:none}
  .side-actions .linkbtn{display:none}
  .main{padding-inline:16px;padding-block:18px 40px}
}

/* ---------- ชิปเลือกมุมมอง ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chips button{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 12px;font-size:.86rem;background:var(--surface);color:var(--muted)}
.chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.chips button b{font-family:var(--f-mono);font-weight:500;font-size:.78rem}
.chips button[aria-pressed="false"] b.n-warn{color:var(--warn)}
.chips button[aria-pressed="false"] b.n-danger{color:var(--danger)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot.company{background:var(--accent)}
.dot.person{background:var(--warn)}

/* ---------- ฟอร์มทั่วไป ---------- */
.grid-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px;align-items:end}
.grid-form .span2{grid-column:span 2}
.grid-form .span-all{grid-column:1/-1}
@media (max-width:640px){.grid-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.grid-form .span2{grid-column:1/-1}}
.grid-form .btn-primary.span-all{justify-self:start;min-width:180px}
@media (max-width:640px){.grid-form .btn-primary.span-all{justify-self:stretch}}
textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%;resize:vertical}
textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[type=file]{padding:6px}
.check{display:flex;align-items:center;gap:8px;font-size:.92rem;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--accent);margin:0}

/* ---------- แถวรายการแบบมีปุ่ม ---------- */
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:13px 2px;border-top:1px solid var(--line);align-items:start}
.list .row:first-child{border-top:none}
.side-col{display:grid;justify-items:end;gap:8px}
.amt.big{font-size:1.1rem;font-weight:600}
.acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.item .acts{flex-wrap:nowrap}
.item:has(.acts){grid-template-columns:auto minmax(0,1fr) auto auto}
.mini{padding:4px 10px;font-size:.82rem;white-space:nowrap}
.mini.ok{border-color:var(--accent);color:var(--accent)}
.mini.armed,.x.armed{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:var(--surface)}
.note{margin:4px 0 0;font-size:.86rem;color:var(--ink);overflow-wrap:anywhere}
.note.dec{color:var(--muted)}
.note.muted{color:var(--muted);font-size:.8rem}
.pill{font-size:.74rem;font-weight:600;padding:1px 8px;border-radius:999px;white-space:nowrap}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.ok{background:var(--accent-soft);color:var(--accent)}
.pill.info{background:var(--info-soft);color:var(--info)}
.pill.danger{background:var(--danger-soft);color:var(--danger)}
.pill.muted{background:var(--sunk);color:var(--muted)}
.thumb{display:inline-block;margin-top:8px;border:1px solid var(--line);border-radius:8px;overflow:hidden;line-height:0}
.thumb img{width:120px;height:90px;object-fit:cover}
.file-link{display:inline-block;margin-top:6px;font-size:.86rem;color:var(--accent)}
@media (max-width:640px){.row{grid-template-columns:minmax(0,1fr)}.side-col{justify-items:start}.acts{justify-content:flex-start}}

/* ---------- ประกาศ ---------- */
.news{display:grid;gap:12px}
.news-card{display:grid;gap:8px}
.news-card.pinned{border-color:var(--accent)}
.news-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.news-head h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.new-dot{font-family:var(--f-body);font-size:.7rem;font-weight:600;background:var(--danger);color:var(--surface);padding:1px 8px;border-radius:999px}
.news-body{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.readers summary{cursor:pointer;color:var(--accent)}
.readers p{margin:4px 0 0;color:var(--muted)}
.news-card .acts{justify-content:flex-start}

/* ---------- ตำแหน่งและสิทธิ์ ---------- */
.perm-tbl{min-width:560px}
.perm-tbl th,.perm-tbl td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
.perm-tbl thead th{vertical-align:bottom}
.perm-tbl .mod-name{font-weight:500;color:var(--ink);font-size:.88rem;white-space:nowrap}
.pos-col{min-width:150px}
.pos-name{font-weight:600;font-size:.9rem;padding:5px 8px}
.pos-title{display:block;font-weight:600;color:var(--ink);font-size:.9rem}
.pos-count{display:block;font-size:.75rem;color:var(--muted);margin-top:3px;font-weight:400}
.lvl{font-size:.84rem;padding:5px 6px}
.lvl-none{color:var(--muted)}
.lvl-view{color:var(--info)}
.lvl-edit{color:var(--accent)}
.lvl-manage{color:var(--warn);font-weight:600}
.lvl-tag{font-size:.82rem}
.del-row td,.del-row th{border-bottom:none}
.pos-add{display:flex;gap:8px;align-items:end;margin-top:14px;flex-wrap:wrap}
.pos-add .fld{flex:1;min-width:200px;max-width:380px}
.legend{margin-top:12px;font-size:.86rem;color:var(--muted)}
.legend summary{cursor:pointer;color:var(--accent)}
.legend ul{margin:8px 0 0;padding-left:18px;display:grid;gap:4px}
.legend b{color:var(--ink);font-weight:600}
.pos-sel{font-size:.86rem;padding:5px 6px;max-width:220px}
.tbl td .role.admin{margin-right:6px}
.newuser{grid-template-columns:minmax(0,.8fr) repeat(3,minmax(0,1fr)) auto}
@media (max-width:860px){.newuser{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.newuser button{grid-column:1/-1}}
.shell{background:linear-gradient(to right,var(--side) 0 247px,var(--line) 247px 248px,var(--bg) 248px)}
.side{border-right:none}
@media (max-width:860px){.shell{background:var(--bg)}.side{background:var(--side)}}
.tbl td:nth-child(4){white-space:nowrap}
.muted-sm{font-size:.8rem;color:var(--muted)}
.btn-export.sm{padding:5px 12px;font-size:.84rem}
.export-all{display:flex;align-items:center;gap:8px;color:var(--accent);text-decoration:none;font-weight:500;font-size:.88rem;padding:6px 2px}
.export-all:hover{text-decoration:underline}
.export-all:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (max-width:860px){.export-all{display:none}}
/* จำนวนกับยอดเงินแยกบรรทัด */
.add{grid-template-columns:repeat(3,minmax(0,1fr))}
.add .go{align-self:end}
@media (max-width:640px){.add{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.nums{display:grid;justify-items:end;gap:1px;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.nums .money{font-size:.98rem;font-weight:600}
.nums .qty{font-size:.84rem;color:var(--muted)}
.nums small{font-family:var(--f-body);font-weight:400;color:var(--muted);font-size:.76rem;margin-left:4px}
.item.done .nums .money{color:var(--muted);font-weight:500}

/* ---------- แบรนด์ Joost ---------- */
h1{font-weight:500;letter-spacing:.005em}
h2{font-weight:500}
.panel{box-shadow:var(--shadow)}
button,input,select,textarea{border-radius:10px}
.btn-primary{border-radius:10px;letter-spacing:.01em}
.logo-badge{display:inline-flex;align-items:center;justify-content:center;background:#FFFFFF;border-radius:12px;padding:6px 10px;line-height:0}
.logo-badge img{display:block;height:auto}
.side .brand{gap:10px;padding-inline:4px}
.side .logo-badge{padding:5px 8px;border:1px solid var(--line)}
.side .logo-badge img{width:96px}
.side .brand-name{font-family:var(--f-display);font-weight:500;font-size:.95rem;color:var(--muted)}
.menu button[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}
.menu button[aria-current="page"] b{background:rgba(255,255,255,.18);border-color:transparent;color:inherit}
.chips button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.payer.person,.dot.person{background:var(--seed-soft);color:var(--seed)}
.dot.person{background:var(--seed)}
.mark{background:var(--accent)}
@media (max-width:860px){.side .logo-badge img{width:78px}.side .brand-name{display:none}}

/* หน้าเข้าสู่ระบบ: แผงแบรนด์ซ้าย ฟอร์มขวา */
.auth{padding:0;place-items:stretch}
.auth-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.auth-brand{position:relative;overflow:hidden;background:var(--accent);color:#F4F3EA;padding-inline:clamp(24px,5vw,64px);padding-block:48px;display:flex;flex-direction:column;justify-content:center;gap:26px}
.auth-brand::before,.auth-brand::after{content:"";position:absolute;border-radius:50% 50% 46% 54% / 58% 58% 42% 42%;pointer-events:none}
.auth-brand::before{width:420px;height:520px;right:-140px;bottom:-200px;background:#DCD77A;opacity:.22;transform:rotate(-18deg)}
.auth-brand::after{width:150px;height:150px;right:30px;bottom:40px;background:#6B4423;opacity:.35;border-radius:50%}
.auth-brand .logo-badge{align-self:flex-start;padding:14px 20px;border-radius:18px;box-shadow:0 8px 30px rgba(0,0,0,.18);position:relative;z-index:1}
.auth-brand .logo-badge img{width:min(280px,60vw)}
.auth-brand h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:500;color:#FFFFFF;max-width:16ch;position:relative;z-index:1}
.auth-brand p{margin:0;max-width:40ch;color:#E6EBCB;position:relative;z-index:1}
.auth-mods{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:1}
.auth-mods li{font-size:.84rem;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.12);color:#F4F3EA;border:1px solid rgba(255,255,255,.18)}
.auth-form{display:grid;place-items:center;padding-inline:16px;padding-block:40px;background:var(--bg)}
.auth-card{max-width:400px}
.auth-card h1{font-size:1.8rem}
.auth-card .panel{padding:22px}
@media (max-width:860px){
  .auth-split{grid-template-columns:minmax(0,1fr);min-height:0}
  .auth-brand{padding-block:28px;gap:14px}
  .auth-brand .logo-badge img{width:190px}
  .auth-brand h2{font-size:1.3rem}
  .auth-brand p,.auth-mods{display:none}
  .auth-brand::before{width:260px;height:320px;right:-120px;bottom:-200px}
  .auth-brand::after{display:none}
  .auth-form{padding-block:28px 40px;align-items:start}
}

.pill.quota{letter-spacing:.04em;font-family:var(--f-mono)}



/* ตารางสิทธิ์: แถว = ตำแหน่ง */
.perm-tbl{min-width:860px}
.perm-tbl .mod-head{font-size:.78rem;white-space:nowrap}
.perm-tbl .pos-head{min-width:190px}
.perm-tbl .pos-cell{text-align:left;font-weight:400;position:sticky;left:0;background:var(--surface);z-index:1}
.perm-tbl .pos-cell .pos-name{width:180px}
.perm-tbl .pos-cell .pos-count{display:inline;margin-left:6px}
.perm-tbl tbody tr:hover td,.perm-tbl tbody tr:hover th{background:var(--sunk)}
.perm-tbl .lvl{min-width:120px}
.perm-tbl .pos-del{white-space:nowrap;text-align:right}
.main:has(#view-users:not([hidden])){max-width:1260px}
.perm-tbl{min-width:0;width:100%}
.perm-tbl th,.perm-tbl td{padding:6px 5px}
.perm-tbl .lvl{min-width:0;width:100%;font-size:.8rem;padding:5px 4px}
.perm-tbl .pos-head{min-width:170px;width:170px}
.perm-tbl .pos-cell .pos-name{width:100%}
.perm-tbl .pos-cell .pos-count{display:block;margin:2px 0 0 4px}
@media (max-width:1100px){.perm-tbl{min-width:980px}}

.user-form .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
#dlg-user{max-width:min(440px,calc(100vw - 32px))}
.tbl td.phone{font-family:var(--f-mono);font-size:.84rem;white-space:nowrap;color:var(--muted)}
.edit-btn{border-color:var(--accent);color:var(--accent)}

/* นำเข้าจาก Excel */
.io-btns{display:flex;gap:8px;flex-wrap:wrap}
.btn-import{display:inline-flex;align-items:center;padding:5px 12px;font-size:.84rem;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-weight:600;cursor:pointer;position:relative}
.btn-import:hover{filter:brightness(1.07)}
.btn-import input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.btn-import:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.io-hint{margin:-4px 0 12px}
.import-box{border:1px solid var(--accent);background:var(--accent-soft);border-radius:12px;padding:14px 16px;margin-bottom:16px;display:grid;gap:10px}
.import-box.bad{border-color:var(--danger);background:var(--danger-soft)}
.import-box.done{border-color:var(--accent)}
.import-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}
.import-head h3{margin:0;font-family:var(--f-display);font-weight:500;font-size:1.02rem}
.import-file{font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}
.import-sum{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.86rem;color:var(--muted)}
.import-sum span.on{color:var(--ink)}
.import-sum b{font-family:var(--f-mono)}
.import-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:280px;overflow:auto;font-size:.86rem;background:var(--surface);border-radius:8px;padding:8px 10px}
.import-list.err{color:var(--danger)}
.import-list li{overflow-wrap:anywhere}
.import-list .chg{color:var(--muted)}

/* หน่วยนับ */
.lbl-row{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.unit-manage{font-size:.74rem;padding:0;color:var(--accent)}
#dlg-units{max-width:min(440px,calc(100vw - 32px))}
.unit-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;max-height:220px;overflow:auto}
.unit-chip{display:inline-flex;align-items:center;gap:2px;background:var(--sunk);border:1px solid var(--line);border-radius:999px;padding:3px 4px 3px 12px;font-size:.88rem}
.unit-chip .x{padding:0 6px;font-size:1rem}
.unit-chip:not(:has(.x)){padding-right:12px}
.unit-add{display:flex;gap:8px;align-items:end}
.unit-add .fld{flex:1}

/* ---------- เช็คอินเข้างาน ---------- */
.att-card{display:grid;justify-items:center;text-align:center;gap:10px;padding-block:26px}
.att-clock{font-family:var(--f-mono);font-size:clamp(2.4rem,9vw,3.4rem);font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums;line-height:1}
.att-status{margin:0;font-size:1rem;font-weight:500}
.att-status.in{color:var(--accent)}
.att-status.none{color:var(--warn)}
.att-btn{font-family:var(--f-display);font-size:1.2rem;font-weight:500;padding:16px 28px;min-width:min(320px,100%);border:none;border-radius:16px;background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 18px rgba(47,90,23,.25)}
.att-btn.out{background:var(--seed);color:#fff;box-shadow:0 6px 18px rgba(107,68,35,.25)}
.att-btn:hover{filter:brightness(1.06)}
.att-btn:disabled{box-shadow:none}
.msg.info-m{background:var(--info-soft);color:var(--info)}
.att-card .msg{max-width:440px}
.att-today{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:4px;font-size:.9rem}
.att-counts{display:flex;gap:6px;flex-wrap:wrap}
.att-team{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.att-person{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--sunk)}
.att-person .muted-sm{grid-column:1/-1}
.att-range{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:end;margin-bottom:10px}
@media (max-width:640px){.att-range{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.att-range .btn-export,.att-range .fld:first-child{grid-column:1/-1}}
.att-branch{width:min(320px,100%);text-align:left}
.att-branch select{font-size:1rem}
.att-tbl td{white-space:nowrap}
.warn-t{color:var(--warn);font-weight:500}
.err-t{color:var(--danger)}
.loc-list{list-style:none;margin:0 0 14px;padding:0;display:grid}
.loc-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 2px;border-top:1px solid var(--line)}
.loc-list .loc-item:first-child{border-top:none}
.loc-item.off b{color:var(--muted)}
.loc-item a{color:var(--accent)}
.loc-form{border-top:1px dashed var(--line);padding-top:14px}
.row-start{display:flex;gap:12px;align-items:center}
@media (max-width:640px){.loc-item{grid-template-columns:minmax(0,1fr)}}
.att-sim{display:grid;gap:6px;justify-items:center;padding:10px 12px;border:1px dashed var(--warn);border-radius:12px;background:var(--warn-soft);max-width:460px;width:100%}
.att-sim .lbl{color:var(--warn)}
.att-sim .seg{width:100%}
.att-sim .seg label{white-space:normal;font-size:.84rem}

/* ===== ชื่อพนักงานมุมขวาบน ===== */
.shell{grid-template-rows:auto minmax(0,1fr)}
.side{grid-row:1/span 2;grid-column:1}
.topbar{grid-row:1;grid-column:2;display:flex;justify-content:flex-end;padding:14px 24px 0;min-width:0}
.shell>.main{grid-row:2;grid-column:2;padding-top:6px}
.me-box{position:relative}
.me-chip{display:flex;align-items:center;gap:10px;padding:5px 10px 5px 5px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);text-align:left;max-width:min(300px,62vw)}
.me-chip:hover{background:var(--sunk)}
.me-chip[aria-expanded="true"]{border-color:var(--accent)}
.me-ava{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-family:var(--f-display);font-weight:500;font-size:.95rem}
.me-txt{display:grid;min-width:0;line-height:1.2}
.me-txt b{font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-txt small{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-chip .caret{width:16px;height:16px;color:var(--muted)}
.me-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:190px;display:grid;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.12)}
.me-menu[hidden]{display:none}
.me-menu button{border:none;background:transparent;text-align:left;padding:9px 10px;border-radius:8px;font-size:.92rem;color:var(--ink)}
.me-menu button:hover{background:var(--sunk)}
.me-menu #btn-out{color:var(--danger)}
@media (max-width:860px){
  .side,.topbar{grid-row:1;grid-column:1}
  .topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:6;justify-self:end;align-self:start;padding:8px 12px 0}
  .shell>.main{grid-row:2;grid-column:1;padding-top:18px}
  .side-foot{display:none}
  .me-chip{padding:3px 8px 3px 3px;gap:8px;max-width:calc(100vw - 150px)}
  .me-ava{width:28px;height:28px;font-size:.85rem}
  .me-txt small{display:none}
}

.btn-export[hidden],.export-all[hidden]{display:none!important}

/* ===== รายรับ / ยอดขาย ===== */
.msg.warn-m{background:var(--warn-soft);color:var(--warn);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sales-form{display:grid;gap:14px}
.sales-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.sales-ch{border:1px solid var(--line);border-radius:12px;padding:12px 14px 14px;margin:0;min-width:0}
.sales-ch legend{padding:0 6px;font-size:.82rem;color:var(--muted)}
.sales-ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.sales-ch-grid input{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right}
.sales-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.sales-total{display:flex;align-items:baseline;gap:8px}
.sales-total span{color:var(--muted);font-size:.9rem}
.sales-total b{font-family:var(--f-mono);font-size:1.7rem;font-weight:500;font-variant-numeric:tabular-nums;color:var(--accent)}
.sales-total small{color:var(--muted)}
.sales-range{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:end;margin-bottom:12px}
.sales-range .fld[hidden]{display:none}
.sales-quick{margin:0}
@media (max-width:640px){.sales-range{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.sales-range .fld:nth-child(3),.sales-quick{grid-column:1/-1}}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-bottom:12px}
.kpi{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--sunk);min-width:0}
.kpi-h{font-size:.8rem;color:var(--muted)}
.kpi b{font-family:var(--f-mono);font-size:1.35rem;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi small{font-size:.78rem;color:var(--muted)}
.ch-bars{display:grid;gap:6px;margin-bottom:14px}
.ch-bars[hidden]{display:none}
.ch-bar{display:grid;grid-template-columns:110px minmax(0,1fr) 128px;gap:10px;align-items:center;font-size:.86rem}
.ch-bar .track{height:10px;border-radius:999px;background:var(--sunk);border:1px solid var(--line);overflow:hidden}
.ch-bar .track span{display:block;height:100%;background:var(--accent);border-radius:999px}
.ch-bar .v{font-family:var(--f-mono);font-size:.8rem;color:var(--muted);white-space:nowrap;text-align:right}
@media (max-width:640px){.ch-bar{grid-template-columns:78px minmax(0,1fr) 108px;gap:8px}.ch-bar .v{font-size:.74rem}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi b{font-size:1.15rem}}
.sales-tbl th.num,.sales-tbl td.num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.sales-tbl td.money-t{font-weight:600;color:var(--ink)}
.sales-tbl td.ch-list{white-space:normal;min-width:220px;font-size:.82rem;color:var(--muted)}
.sales-tbl td.ch-list span{display:inline-block;margin-right:10px}
.sales-tbl td.ch-list .note{display:block;font-style:italic}
.sales-tbl td.acts-t{white-space:nowrap;text-align:right}
.sales-tbl td.acts-t .mini+.mini{margin-left:4px}
.sales-tbl td{white-space:nowrap}
.kpi b.txt{font-family:var(--f-display);font-size:1.15rem}

/* ช่องทางรับเงิน */
.sales-ch .ch-manage{margin-top:10px;font-size:.86rem;color:var(--accent);padding:0}
.sales-ch-grid .fld[hidden]{display:none}
#dlg-channels{max-width:min(520px,calc(100vw - 32px))}
.chm-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px;max-height:min(46vh,380px);overflow:auto}
.chm-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--sunk)}
.chm-item input{padding:6px 10px;font-size:.92rem}
.chm-item.off input{color:var(--muted)}
.chm-item .acts{display:flex;gap:4px}
.chm-item .mini:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:480px){.chm-item{grid-template-columns:minmax(0,1fr) auto}.chm-item .acts{grid-column:1/-1;justify-content:flex-end}}

/* กะการทำงาน */
.att-branch .lbl-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.att-shift-manage{font-size:.8rem;color:var(--accent);padding:0}
.att-shift-now{margin:2px 0 0;text-align:left}
.att-branch select[hidden]{display:none}
#dlg-shifts{max-width:min(640px,calc(100vw - 32px))}
.sh-item{grid-template-columns:minmax(80px,1fr) auto auto}
.sh-item .acts{flex-wrap:nowrap}
.sh-item.off{opacity:.65}
.sh-times{display:flex;align-items:center;gap:4px}
.sh-times input{width:118px;padding:6px 8px;font-size:.88rem}
.sh-add{display:grid;grid-template-columns:minmax(0,1fr) 128px 128px auto;gap:8px;align-items:end}
@media (max-width:560px){.sh-item{grid-template-columns:minmax(0,1fr) auto}.sh-item .sh-times{grid-column:1/-1;order:3}.sh-times input{flex:1;width:auto;min-width:0}.sh-item .acts{justify-content:flex-end}.sh-add{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.sh-add .fld:first-child,.sh-add button{grid-column:1/-1}}

/* ทีมวันนี้แยกตามสาขา */
.att-groups{display:grid;gap:14px;margin-bottom:14px}
.att-group{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--surface)}
.att-group-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.att-group-h h3{margin:0;font-family:var(--f-display);font-size:1.02rem;font-weight:500;display:flex;align-items:center;gap:8px}
.att-group-h .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);flex:none}
.att-group.none{background:var(--sunk);border-style:dashed}
.att-group.none .dot{background:var(--warn)}
.att-group .att-team{margin:0}
.att-group.none .att-person{background:var(--surface)}
.shift-tag{display:inline-block;font-size:.76rem;font-weight:600;padding:1px 8px;margin-right:6px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}

/* ===== บันทึกสต็อก ===== */
.menu button b.n-warn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.st-form{display:grid;gap:4px;counter-reset:st}
.st-step:not([hidden]){counter-increment:st}
.st-no::before{content:counter(st)}
.st-step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px dashed var(--line)}
.st-step[hidden]{display:none}
.st-no{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--sunk);border:1px solid var(--line);font-family:var(--f-mono);font-size:.8rem;color:var(--muted);margin-top:2px}
.st-body{display:grid;gap:8px;min-width:0}
.st-body>label,.st-body>.lbl{font-size:.86rem;color:var(--muted)}
.st-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.st-grid .span2{grid-column:span 2}
@media (max-width:520px){.st-grid .span2{grid-column:auto}}
.st-types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:640px){.st-types{grid-template-columns:repeat(2,minmax(0,1fr))}}
.st-type{position:relative;display:grid;gap:2px;padding:12px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;--c:var(--accent);--cs:var(--accent-soft)}
.st-type input{position:absolute;opacity:0;pointer-events:none}
.st-type b{font-family:var(--f-display);font-weight:500;font-size:1.02rem;display:flex;align-items:center;gap:8px}
.st-type b::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}
.st-type small{font-size:.78rem;color:var(--muted)}
.st-type.t-out{--c:var(--seed);--cs:var(--seed-soft)}
.st-type.t-waste{--c:var(--danger);--cs:var(--danger-soft)}
.st-type.t-count{--c:var(--info);--cs:var(--info-soft)}
.st-type:hover{border-color:var(--c)}
.st-type:has(input:checked){border-color:var(--c);background:var(--cs);box-shadow:inset 0 0 0 1px var(--c)}
.st-type:has(input:focus-visible){outline:2px solid var(--c);outline-offset:2px}
.st-combo{position:relative}
.st-item-list{position:absolute;z-index:15;left:0;right:0;top:calc(100% + 4px);list-style:none;margin:0;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.12);max-height:300px;overflow:auto}
.st-item-list[hidden]{display:none}
.st-opt{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer}
.st-opt:hover,.st-opt.active{background:var(--sunk)}
.st-opt .bal{font-family:var(--f-mono);font-size:.82rem;white-space:nowrap;color:var(--muted)}
.st-opt .bal.low{color:var(--warn)}.st-opt .bal.out{color:var(--danger)}
.st-cat{font-size:.72rem;letter-spacing:.06em;color:var(--muted);padding:8px 10px 2px}
.st-none{padding:10px;color:var(--muted);display:flex;justify-content:space-between;gap:8px;align-items:center}
.st-picked{padding:10px 12px;border-radius:10px;background:var(--sunk);border:1px solid var(--line);display:grid;gap:4px}
.st-picked-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.st-picked-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.84rem;color:var(--muted)}
.st-qty{display:flex;align-items:center;gap:6px;max-width:360px}
.st-qty input{flex:1;min-width:0;font-family:var(--f-mono);font-size:1.25rem;text-align:center;padding:10px}
.st-step-btn{width:44px;height:44px;flex:none;font-size:1.3rem;padding:0;border-radius:10px}
.st-unit{min-width:40px;color:var(--muted)}
.st-quick{display:flex;flex-wrap:wrap;gap:6px}
.st-quick:empty{display:none}
.st-reasons{margin:0}
.st-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--sunk)}
.st-preview{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;color:var(--muted);font-size:.92rem}
.st-preview .nm{color:var(--ink);font-weight:600;margin-right:4px}
.st-preview .from{font-family:var(--f-mono)}
.st-preview .to{font-family:var(--f-mono);font-size:1.15rem;color:var(--ink)}
.st-preview .diff{font-size:.8rem;padding:1px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.st-preview .diff.neg{background:var(--danger-soft);color:var(--danger)}
.st-form[data-type="out"] .st-go{background:var(--seed);border-color:var(--seed)}
.st-form[data-type="waste"] .st-go{background:var(--danger);border-color:var(--danger)}
.st-form[data-type="count"] .st-go{background:var(--info);border-color:var(--info)}
.st-go{min-width:170px}
.st-tabs{width:auto}
.st-tabs button{border:none;background:transparent;padding:6px 14px;border-radius:6px;font-size:.9rem;color:var(--muted)}
.st-tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.st-kpis .kpi.warn b{color:var(--warn)}.st-kpis .kpi.danger b{color:var(--danger)}
.st-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;align-items:end;margin-bottom:10px}
.st-filters .fld[hidden]{display:none}
.st-lowonly{display:flex;align-items:center;gap:6px;font-size:.88rem;padding-bottom:10px;white-space:nowrap}
.st-tbl td,.st-tbl th{white-space:nowrap}
.st-tbl th.num,.st-tbl td.num{text-align:right}
.st-tbl td.st-b{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.st-tbl td.st-b.low{color:var(--warn);font-weight:600}.st-tbl td.st-b.out{color:var(--danger);font-weight:600}
.st-name b{display:block;font-weight:600}.st-name small{color:var(--muted);font-size:.78rem}
.st-tbl td.acts-t{text-align:right}.st-tbl td.acts-t .mini+.mini{margin-left:4px}
.st-log-sum{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.st-cost{font-size:.86rem;color:var(--muted);margin-left:auto}
.st-log{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.st-day-h{font-size:.8rem;color:var(--muted);padding:8px 2px 0}
.st-mv{position:relative;display:grid;gap:2px;padding:10px 12px 10px 14px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;background:var(--surface)}
.st-mv.t-out{border-left-color:var(--seed)}.st-mv.t-waste{border-left-color:var(--danger)}.st-mv.t-count{border-left-color:var(--info)}
.st-mv-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-right:56px}
.st-tag{font-size:.74rem;font-weight:600;padding:1px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.st-tag.t-out{background:var(--seed-soft);color:var(--seed)}.st-tag.t-waste{background:var(--danger-soft);color:var(--danger)}.st-tag.t-count{background:var(--info-soft);color:var(--info)}
.st-q{margin-left:auto;font-family:var(--f-mono);font-size:.92rem}
.st-q.pos{color:var(--accent)}.st-q.neg{color:var(--danger)}
.st-mv-meta{font-size:.82rem;color:var(--muted)}
.st-del{position:absolute;right:10px;top:8px}
#dlg-items{max-width:min(620px,calc(100vw - 32px))}
.it-search input{width:100%}
.it-list{max-height:min(38vh,320px)}
.it-item{grid-template-columns:minmax(0,1fr) auto}
.it-txt{display:grid;min-width:0}.it-txt b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.it-txt small{font-size:.78rem;color:var(--muted)}
.it-item.off{opacity:.6}
.it-add{border:1px solid var(--line);border-radius:12px;padding:10px 12px 12px;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:end}
.it-add legend{padding:0 6px;font-size:.82rem;color:var(--muted)}
.it-add .span2{grid-column:1/-1}
.it-add-go{display:flex;gap:8px;align-items:center;grid-column:1/-1;justify-content:flex-end}
@media (max-width:520px){.it-add{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.it-add .span2,.it-add-go{grid-column:1/-1}}
.st-tbl td.st-b .u{font-family:var(--f-body,inherit);font-size:.78rem;font-weight:400;color:var(--muted)}
.st-lowonly{justify-self:start}
.st-q .u{font-family:var(--f-body);font-size:.78rem;color:var(--muted)}
.st-preview .to .u{font-family:var(--f-body);font-size:.8rem;color:var(--muted);font-weight:400}

/* สต็อกแยกหัวข้อ */
.st-items-btn{align-self:center;white-space:nowrap}
.st-items-btn[hidden]{display:none}
.menu .st-ico-in{color:var(--accent)}.menu .st-ico-out{color:var(--seed)}.menu .st-ico-waste{color:var(--danger)}.menu .st-ico-count{color:var(--info)}
.menu button[aria-current="page"] .ico{color:inherit}
#view-stock[data-mode="in"] .st-form-panel{border-top:4px solid var(--accent)}
#view-stock[data-mode="out"] .st-form-panel{border-top:4px solid var(--seed)}
#view-stock[data-mode="waste"] .st-form-panel{border-top:4px solid var(--danger)}
#view-stock[data-mode="count"] .st-form-panel{border-top:4px solid var(--info)}
.st-tabs[hidden]{display:none}
.st-acts-go .mini{min-width:0}
.st-tbl .mini.st-go-in{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.st-tbl .mini.st-go-out{color:var(--seed);border-color:color-mix(in srgb,var(--seed) 40%,var(--line))}
.st-tbl .mini.st-go-count{color:var(--info);border-color:color-mix(in srgb,var(--info) 40%,var(--line))}

/* สต็อกหลายสาขา */
.st-branchbar{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin;align-items:center;border-radius:12px}
.st-branchbar[hidden]{display:none}
.st-branchbar.flash{animation:stflash 1.2s ease}
@keyframes stflash{0%,60%{box-shadow:0 0 0 3px var(--warn)}100%{box-shadow:0 0 0 0 transparent}}
.st-bhint{font-size:.84rem;color:var(--muted);white-space:nowrap;padding-right:2px}
.st-bhint.need{color:var(--warn);font-weight:600}
.st-bchip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border-radius:999px;padding:6px 14px;font-size:.9rem;background:var(--surface);color:var(--ink);flex:none}
.st-bchip b{font-family:var(--f-mono);font-weight:500;font-size:.74rem;min-width:20px;text-align:center;padding:0 6px;border-radius:999px;background:var(--warn-soft);color:var(--warn)}
.st-bchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.st-bchip[aria-pressed="true"] b{background:var(--surface);color:var(--warn)}
.st-bcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:12px}
.st-bcards[hidden]{display:none}
.st-bcard{display:grid;gap:6px;text-align:left;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent)}
.st-bcard.low{border-left-color:var(--warn)}.st-bcard.out{border-left-color:var(--danger)}
.st-bcard b{font-weight:600;font-size:.92rem}
.st-bcard-s{display:flex;flex-wrap:wrap;gap:4px}
.st-bcard:hover{background:var(--sunk)}
#st-bal.matrix .tbl-wrap{overflow-x:auto}
#st-bal.matrix .st-tbl th:first-child,#st-bal.matrix .st-tbl td:first-child{position:sticky;left:0;background:var(--surface);z-index:1;box-shadow:1px 0 0 var(--line)}
#st-bal.matrix .st-tbl th.num{font-size:.74rem;max-width:90px;white-space:normal;line-height:1.25;vertical-align:bottom}
.st-picked-meta .here{color:var(--ink);font-weight:600}
.st-others summary{cursor:pointer;font-size:.82rem;color:var(--accent)}
.st-others ul{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 12px;font-size:.84rem}
.st-others li{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed var(--line);padding:2px 0}
.st-others li b{font-family:var(--f-mono);font-weight:500}
.st-others li.low b{color:var(--warn)}.st-others li.out b{color:var(--danger)}

/* ===== สรุปสต็อก ===== */
.st-dash{display:grid;gap:14px}
.st-dash[hidden]{display:none}
.st-acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.st-acts[hidden]{display:none}
@media (max-width:640px){.st-acts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.st-act{display:grid;gap:2px;text-align:left;padding:14px 16px;border-radius:14px;border:1px solid var(--line);border-left:5px solid var(--c);background:var(--surface);--c:var(--accent)}
.st-act b{font-family:var(--f-display);font-weight:500;font-size:1.08rem;color:var(--c)}
.st-act small{font-size:.8rem;color:var(--muted)}
.st-act:hover{background:var(--sunk)}
.st-act.t-out{--c:var(--seed)}.st-act.t-waste{--c:var(--danger)}.st-act.t-count{--c:var(--info)}
.st-dkpis{margin:0;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.st-dkpis .kpi.warn b{color:var(--warn)}.st-dkpis .kpi.danger b{color:var(--danger)}
.st-dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.st-dgrid .panel{margin:0}
.st-span2{grid-column:1/-1}
@media (max-width:900px){.st-dgrid{grid-template-columns:minmax(0,1fr)}}
.st-need{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.st-need-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:10px}
.st-need-row.out{border-left-color:var(--danger)}
.st-need-txt{display:grid;gap:4px;min-width:0}
.st-need-txt .nm{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.st-need-txt .nm b{font-weight:600}
.st-need-txt small{font-size:.8rem;color:var(--muted)}
.st-loc-tag{font-size:.74rem;padding:0 8px;border-radius:999px;background:var(--sunk);border:1px solid var(--line);color:var(--muted)}
.st-meter{position:relative;height:6px;border-radius:999px;background:var(--sunk);overflow:visible}
.st-meter span{display:block;height:100%;border-radius:999px;background:var(--warn)}
.st-need-row.out .st-meter span{background:var(--danger)}
.st-meter i{position:absolute;top:-3px;width:2px;height:12px;background:var(--muted);opacity:.5}
.st-need-acts{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.st-allok{padding:14px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-size:.9rem;list-style:none}
.st-more{margin-top:8px;font-size:.86rem;color:var(--accent)}
.st-dbr{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.st-dbr-card{display:grid;gap:6px;text-align:left;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.st-dbr-card:hover{background:var(--sunk)}
.st-dbr-card.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.st-dbr-card .top{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.st-dbr-card .top b{font-weight:600;font-size:.92rem}
.st-dbr-card small{font-size:.76rem;color:var(--muted)}
.st-dbr-card small.warn-t{color:var(--warn)}
.st-stack{display:flex;gap:2px;height:8px}
.st-stack span{border-radius:4px;min-width:4px}
.st-stack .ok{background:var(--accent)}.st-stack .low{background:var(--warn)}.st-stack .out{background:var(--danger)}
.st-chart{min-height:150px}
.st-bars{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:4px;align-items:end;height:160px;padding-top:8px;border-bottom:1px solid var(--line)}
.st-bar-col{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;outline:none;cursor:default}
.st-bar{width:100%;max-width:22px;background:var(--accent);border-radius:4px 4px 0 0}
.st-bar-col small{position:absolute;bottom:-20px;font-size:.7rem;color:var(--muted)}
.st-bar-col:hover .st-bar,.st-bar-col:focus .st-bar{filter:brightness(1.15)}
.st-bar-col:hover::after,.st-bar-col:focus::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:var(--surface);font-size:.76rem;padding:4px 8px;border-radius:6px;z-index:5;pointer-events:none}
.st-chart{padding-bottom:22px}
.st-wtop{margin:0;padding-left:20px;display:grid;gap:8px}
.st-wtop li{display:grid;gap:1px}
.st-wtop li b{font-weight:600}
.st-wtop li span{font-size:.82rem;color:var(--muted)}
.st-wtop li.st-allok{margin-left:-20px}
.st-recent .st-mv-top{padding-right:0}
.main:has(#view-stock[data-mode="sum"]:not([hidden])),.main:has(#view-stock[data-mode="all"]:not([hidden])){max-width:1180px}
@media (max-width:640px){
  .st-need-row{grid-template-columns:minmax(0,1fr)}
  .st-need-acts{justify-content:flex-start}
  .st-dkpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-dkpis .kpi:last-child:nth-child(odd){grid-column:1/-1}
  .st-act{padding:10px 12px}
}

/* ===== ใบรายการต้องเติม (PDF) ===== */
.st-need-tools{display:flex;gap:6px;align-items:center}
.st-pdf{display:inline-flex;align-items:center;gap:4px}
.st-pdf .ico{width:15px;height:15px}
.pdf-host{position:absolute;left:-10000px;top:0;width:794px;pointer-events:none}
.pdf-page{width:794px;height:1123px;background:#fff;color:#1d1d1b;font-family:"IBM Plex Sans Thai","Sarabun",system-ui,sans-serif;font-size:13px;line-height:1.45;position:relative;box-sizing:border-box;padding:40px 44px 0;overflow:hidden}
.pdf-body{height:997px;overflow:hidden}
.pdf-foot{position:absolute;left:44px;right:44px;bottom:26px;border-top:1px solid #ddd;padding-top:6px;font-size:10.5px;color:#888}
.pdf-head{display:flex;align-items:center;gap:16px;padding-bottom:12px;border-bottom:2px solid #2f5a17;margin-bottom:10px}
.pdf-head img{width:110px;height:auto}
.pdf-ht{flex:1}
.pdf-ht h1{margin:0;font-family:"Mitr","IBM Plex Sans Thai",sans-serif;font-weight:500;font-size:24px;color:#2f5a17}
.pdf-ht p{margin:2px 0 0;font-size:14px;color:#444}
.pdf-meta{text-align:right;font-size:11.5px;color:#555}
.pdf-sum{font-size:11.5px;color:#555;background:#f4f3ea;border-radius:6px;padding:6px 10px;margin-bottom:6px}
.pdf-h2{margin:14px 0 4px;font-family:"Mitr","IBM Plex Sans Thai",sans-serif;font-weight:500;font-size:15px;color:#1d1d1b;border-left:4px solid #2f5a17;padding-left:8px}
.pdf-total-h{border-left-color:#6b4423}
.pdf-row{display:grid;grid-template-columns:22px minmax(0,1fr) 70px 60px 74px 56px 60px;gap:8px;align-items:center;padding:6px 4px;border-bottom:1px solid #e6e4d8}
.pdf-row.pdf-tot{grid-template-columns:22px minmax(0,1.1fr) 90px 56px minmax(0,1.6fr)}
.pdf-th{font-size:10.5px;color:#777;border-bottom:1.5px solid #bbb;padding-top:2px;padding-bottom:4px}
.pdf-row .box{width:14px;height:14px;border:1.5px solid #888;border-radius:3px}
.pdf-th .box,.pdf-th span:first-child{border:none}
.pdf-row .nm b{font-weight:600;display:block}
.pdf-row .nm small{font-size:10px;color:#888}
.pdf-row .n{text-align:right;font-variant-numeric:tabular-nums}
.pdf-row .strong{font-weight:700;color:#2f5a17}
.pdf-row .st{font-size:11px;color:#9a5b00}
.pdf-row.out .st{color:#a3322a;font-weight:600}
.pdf-row .w{font-size:11px;color:#555}
.pdf-th span:nth-child(3),.pdf-th span:nth-child(4),.pdf-th span:nth-child(5){text-align:right}
.pdf-th.pdf-tot span:nth-child(4),.pdf-th.pdf-tot span:nth-child(5){text-align:left}
.pdf-sign{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;font-size:12px;color:#444;text-align:center}
.pdf-sign div{display:grid;gap:4px}
.pdf-sign .line{border-bottom:1px solid #999;height:30px}
.pdf-sign .date{font-size:10.5px;color:#888}

/* ===== สต็อกสาขา + คลัง ===== */
.st-sec[hidden],#st-logwrap[hidden],#st-form-panel[hidden]{display:none!important}
.st-head-acts{display:flex;gap:8px;align-items:center}
.strong-t{font-weight:700;color:var(--accent)}
.st-bchip b.nc{background:var(--warn-soft);color:var(--warn);font-family:var(--f-body);font-size:.7rem}
.st-bchip b.wt{background:var(--info-soft);color:var(--info);font-family:var(--f-body);font-size:.7rem}
.st-pick-first{padding:18px;text-align:center;color:var(--warn);background:var(--warn-soft);border-radius:10px;margin:0}
.st-steps h2{margin:0 0 10px;font-size:1.05rem}
.st-day-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.st-day-steps li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.st-day-steps .dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);font-weight:700;color:var(--accent-ink)}
.st-day-steps li.done{background:var(--accent-soft);border-color:transparent}
.st-day-steps li.done .dot{background:var(--accent);border-color:var(--accent)}
.st-day-steps li.todo .dot{border-color:var(--warn)}
.st-day-steps li.locked{opacity:.6}
.st-day-steps .tx{display:grid;gap:1px;min-width:0}
.st-day-steps .tx small{color:var(--muted);font-size:.84rem}
.btn-primary.sm{padding:6px 14px;font-size:.88rem}
.st-br-link{padding:0;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line)}
.wh-br-tbl td{white-space:nowrap}
.st-progress{font-size:.84rem;padding:2px 10px;border-radius:999px;background:var(--warn-soft);color:var(--warn);font-weight:600}
.st-progress.done{background:var(--accent-soft);color:var(--accent)}
.st-count-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 10px}
.st-count-tools input{flex:1;min-width:180px}
.st-count-list{display:grid;gap:4px}
.st-count-foot{position:sticky;bottom:8px;z-index:4;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.st-lock{display:grid;gap:8px;justify-items:start;border-left:5px solid var(--warn)}
.st-lock b{font-family:var(--f-display);font-weight:500;font-size:1.1rem}
.st-lock p{margin:0;color:var(--muted)}
.rq-top{margin-bottom:6px}
.rq-tbl td,.rq-tbl th{white-space:nowrap}
.rq-qty input{width:96px;text-align:right;font-family:var(--f-mono);padding:6px 8px}
.rq-tbl tr.on td{background:var(--accent-soft)}
.st-reqs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.st-req{border:1px solid var(--line);border-left:5px solid var(--warn);border-radius:12px;padding:12px 14px;display:grid;gap:8px;background:var(--surface)}
.st-req.s-shipped{border-left-color:var(--info)}.st-req.s-received{border-left-color:var(--accent)}.st-req.s-rejected{border-left-color:var(--danger)}.st-req.s-cancelled{border-left-color:var(--line);opacity:.7}
.st-req-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.st-req-top .tt{display:grid}.st-req-top .tt b{font-weight:600;font-size:1rem}.st-req-top .tt small{color:var(--muted);font-size:.8rem}
.st-req-note{margin:0;font-size:.88rem;background:var(--warn-soft);color:var(--warn);padding:6px 10px;border-radius:8px}
.st-req-meta{margin:0;font-size:.8rem;color:var(--muted)}
.st-req-tbl td,.st-req-tbl th{white-space:nowrap;padding:6px 8px}
.st-req-acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-items:center}
.st-req-noteinp{flex:1;min-width:180px;padding:6px 10px;font-size:.88rem}
.st-req-more summary{cursor:pointer;font-size:.86rem;color:var(--accent)}
.wr-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:end;justify-content:space-between}
.wr-bar .chips{margin:0}
.wr-bar .fld{max-width:200px}
.wr-missing{margin:0 0 10px;padding:10px 12px;border-radius:10px;background:var(--warn-soft);color:var(--warn);font-size:.9rem}
#wr-pick tr.short td{background:var(--danger-soft)}
.st-matrix{overflow-x:auto}
.st-matrix th:first-child,.st-matrix td:first-child{position:sticky;left:0;background:var(--surface);z-index:1;box-shadow:1px 0 0 var(--line)}
.st-matrix th.num{font-size:.76rem;white-space:normal;line-height:1.25;vertical-align:bottom}
.st-tbl .wh-col{background:var(--sunk);font-weight:600}
.main:has(#view-stock:not([hidden])){max-width:1180px}
.loc-wh{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted)}
.pdf-head.big .pdf-ht h1{font-size:30px}
.pdf-badge{font-size:13px;font-weight:600;color:#2f5a17;background:#e9efd9;border-radius:6px;padding:8px 10px;margin-bottom:6px}
.st-req-acts .st-pdf{margin-right:auto}

/* ===== เมนู 3 ขีด ===== */
.menu-btn{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border-radius:10px;background:var(--surface);color:var(--ink);position:relative;flex:none}
.menu-btn .ico{width:22px;height:22px}
.menu-btn:hover{background:var(--sunk)}
.menu-dot{position:absolute;top:7px;right:7px;width:9px;height:9px;border-radius:50%;background:var(--danger);border:2px solid var(--surface)}
.menu-dot[hidden]{display:none}
.mhead,.side-close{display:none}
.nav-backdrop[hidden]{display:none}
.topbar{justify-content:space-between;align-items:center}
.shell{transition:grid-template-columns .2s ease}
.shell.nav-collapsed{grid-template-columns:0 minmax(0,1fr)}
.shell.nav-collapsed .side{visibility:hidden;overflow:hidden;padding-inline:0}
.shell.nav-collapsed{background:var(--bg)}
@media (max-width:860px){
  .menu-btn-d{display:none}
  .shell,.shell.nav-collapsed{grid-template-columns:minmax(0,1fr)}
  .shell.nav-collapsed .side{visibility:visible;padding-inline:14px}
  .mhead{display:flex;align-items:center;gap:10px;grid-row:1;grid-column:1;position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--side);border-bottom:1px solid var(--line);padding:8px 12px;min-height:56px}
  .mhead-title{font-family:var(--f-display);font-weight:500;font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100vw - var(--tb-w, 200px) - 64px)}
  .topbar{justify-content:flex-end;padding:8px 12px 0;min-height:56px;align-items:start}
  .side{position:fixed;top:0;left:0;bottom:0;width:min(300px,86vw);height:100dvh;z-index:40;transform:translateX(-105%);transition:transform .22s ease;visibility:hidden;
    flex-direction:column;gap:14px;padding:16px 14px 20px;border-right:1px solid var(--line);border-bottom:none;overflow-y:auto;box-shadow:0 0 40px rgba(0,0,0,.18);background:var(--side)}
  .shell.nav-open .side{transform:none;visibility:visible}
  .side-close{display:grid;place-items:center;position:absolute;top:12px;right:10px;width:36px;height:36px;padding:0;border-radius:10px;background:transparent;border:none;color:var(--muted)}
  .side .brand{padding-inline:4px;padding-right:44px}
  .side .brand-name{display:inline}
  .side .logo-badge img{width:90px}
  .menu{display:grid;gap:14px;overflow:visible;padding:0}
  .menu-group{display:grid;gap:2px}
  .menu-h{display:block}
  .menu button{white-space:normal;padding:10px 10px;font-size:.95rem}
  .side-foot{position:static;display:grid;margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--line)}
  .export-all{display:flex}
  .nav-backdrop{position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.35)}
  body.no-scroll{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.side,.shell{transition:none!important}}
/* ประกาศความรู้ + รับทราบ */
.n-kind{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.n-kind legend{font-size:.88rem;color:var(--muted);margin-bottom:6px;padding:0}
.kind-opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;background:var(--surface)}
.kind-opt input{margin:3px 0 0;width:18px;height:18px;accent-color:var(--accent)}
.kind-opt span{display:grid;gap:2px}
.kind-opt small{color:var(--muted);font-size:.8rem}
.kind-opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.news-tags{display:flex;gap:6px;flex-wrap:wrap;flex-shrink:0}
.news-card.knowledge{border-left:4px solid var(--accent)}
.news-card.need-ack{border-color:var(--warn);border-left-color:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.news-card.need-ack .new-dot{background:var(--warn)}
.ack-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:10px;background:var(--accent-soft)}
.need-ack .ack-row{background:var(--warn-soft)}
.ack-hint{font-size:.88rem;color:var(--warn)}
.ack-btn{min-height:44px;padding:8px 18px;font-size:1rem}
.ack-done{color:var(--accent);font-weight:600}
.ack-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-top:6px}
.ack-lists h3{font-size:.84rem;margin:0}
.ack-lists .no h3{color:var(--warn)}
.readers summary .pill{margin-left:8px}
.ack-nag{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px;border-radius:10px;background:var(--warn-soft);color:var(--ink);border:1px solid var(--warn)}
.ack-nag[hidden]{display:none}
@media (max-width:560px){.ack-btn,.ack-nag button{width:100%}}
.news-card .meta{flex-wrap:wrap}
.news-card .readers[open]{flex-basis:100%}
/* หมวดหมู่สินค้า */
.cat-tag{display:inline-block;font-size:.76rem;font-weight:600;padding:1px 9px;border-radius:999px;white-space:nowrap;background:var(--sunk);color:var(--muted);border:1px solid var(--line)}
.cat-tag.c0{background:#E8F1D8;color:#3B6A12;border-color:#CFE0B0}
.cat-tag.c1{background:#FBEBD3;color:#8A5300;border-color:#F1D3A3}
.cat-tag.c2{background:#E1ECF7;color:#25588F;border-color:#BED3EA}
.cat-tag.c3{background:#F6E2EC;color:#8E2F5C;border-color:#E9C1D4}
.cat-tag.c4{background:#EAE5F6;color:#55409A;border-color:#D2C8EC}
.cat-tag.c5{background:#E0F2EF;color:#1E6B5F;border-color:#B9E0D8}
.cat-tag.none{font-weight:500;font-style:italic}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cat-tag:not(.none){background:var(--sunk);border-color:currentColor}
  :root:not([data-theme="light"]) .cat-tag.c0{color:#A9C86A} :root:not([data-theme="light"]) .cat-tag.c1{color:#E7B45C} :root:not([data-theme="light"]) .cat-tag.c2{color:#8DB8E8}
  :root:not([data-theme="light"]) .cat-tag.c3{color:#E79BBE} :root:not([data-theme="light"]) .cat-tag.c4{color:#B7A6EA} :root:not([data-theme="light"]) .cat-tag.c5{color:#7FD1C1}}
.st-cat-td{white-space:nowrap}
.it-cats-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.it-catchips{margin-bottom:0}
.it-catmgr{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:var(--sunk)}
.it-catmgr .hint{margin-top:0}
.it-catrow{display:flex;align-items:center;gap:8px}
.it-catrow input{flex:1;min-width:0}
.it-catadd{display:flex;gap:8px;margin-top:8px}
.it-catadd input{flex:1;min-width:0}
.it-catquick{display:flex;gap:6px;margin-top:6px}
.it-catquick input{flex:1;min-width:0}
.it-grp{list-style:none;padding:8px 2px 2px;border:0}
.it-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.it-add .it-half{grid-column:span 2;align-self:start}
@media (max-width:520px){.it-add .it-half{grid-column:1/-1}}
/* ตัวกรองที่หัวตาราง (แบบ Excel) */
.st-tbl th:has(.hf-btn){padding:2px 2px}
.hf-btn{display:inline-flex;align-items:center;gap:4px;border:1px solid transparent;background:none;color:inherit;font:inherit;font-weight:500;padding:4px 6px;border-radius:6px;cursor:pointer;white-space:nowrap;min-height:30px}
.st-tbl th.num .hf-btn{flex-direction:row}
th.num .hf-btn{margin-left:auto}
.st-tbl th.num{text-align:right}
.hf-btn:hover{background:var(--sunk);border-color:var(--line);color:var(--ink)}
.hf-btn .hf-ico{font-size:.7rem;opacity:.55;line-height:1}
.hf-btn.on,.hf-btn.sorted{color:var(--accent);font-weight:700}
.hf-btn.on{background:var(--accent-soft);border-color:var(--accent)}
.hf-btn.on .hf-ico,.hf-btn.sorted .hf-ico{opacity:1}
.hf-btn[aria-expanded="true"]{border-color:var(--accent);background:var(--surface)}
.hf-tip{margin:-2px 0 8px;font-size:.8rem;color:var(--muted)}
.hf-info{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.84rem;color:var(--accent);background:var(--accent-soft);border-radius:8px;padding:6px 12px;margin-bottom:8px}
.hf-info[hidden]{display:none}
.hf-info .linkbtn{color:var(--accent);font-weight:600}
.hf-pop{position:fixed;z-index:60;width:270px;max-height:min(440px,calc(100vh - 16px));display:flex;flex-direction:column;gap:8px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 12px 32px rgba(20,18,10,.18)}
.hf-pop.sheet{left:0;right:0;bottom:0;top:auto;width:auto;max-height:75vh;border-radius:16px 16px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
.hf-title{font-weight:700}
.hf-sort{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.hf-sort .mini{justify-content:center;min-height:34px}
.hf-sort .mini.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.hf-sub{font-size:.78rem;color:var(--muted);border-top:1px solid var(--line);padding-top:8px}
.hf-q{padding:6px 10px;font-size:.9rem}
.hf-list{overflow:auto;display:grid;gap:1px;min-height:60px;border:1px solid var(--line);border-radius:8px;padding:4px}
.hf-opt{display:flex;align-items:center;gap:8px;padding:6px 6px;border-radius:6px;cursor:pointer;font-size:.9rem}
.hf-opt[hidden]{display:none}
.hf-opt:hover{background:var(--sunk)}
.hf-opt input{width:18px;height:18px;margin:0;accent-color:var(--accent);flex:none}
.hf-opt span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hf-opt small{color:var(--muted);font-family:var(--f-mono);font-size:.76rem}
.hf-all{border-bottom:1px solid var(--line);border-radius:6px 6px 0 0;font-weight:600}
.hf-err{color:var(--danger);font-size:.84rem}
.hf-foot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hf-foot .btn-primary{padding:6px 18px}
@media (max-width:560px){.hf-tip{display:none}}

/* ===== นับสต็อก (ออกแบบให้นับเร็ว) ===== */
.ct-bar{height:6px;border-radius:99px;background:var(--sunk);overflow:hidden;margin:2px 0 10px}
.ct-bar-fill{height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .25s}
.ct-quick-btn{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;padding:14px 16px;font-size:1.08rem;border-radius:12px;margin-bottom:12px}
.ct-quick-btn small{font-weight:400;font-size:.8rem;opacity:.85}
.ct-quick-btn[hidden]{display:none}
.ct-tools{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-bottom:8px}
.ct-tools .chips{margin:0;align-items:center}
.ct-tools input{flex:1;min-width:160px}
.ct-lbl{font-size:.78rem;color:var(--muted);margin-right:2px}
.st-count-list{display:grid;gap:6px}
.ct-cat{display:flex;justify-content:space-between;align-items:center;font-size:.86rem;font-weight:700;color:var(--ink);padding:12px 4px 2px;border-bottom:1px solid var(--line)}
.ct-cat-n{font-family:var(--f-mono);font-size:.78rem;font-weight:500;color:var(--warn)}
.ct-cat.done .ct-cat-n{color:var(--accent)}
.ct-row{display:grid;grid-template-columns:minmax(0,1fr) 56px auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:10px;background:var(--surface)}
.ct-row.filled{border-left-color:var(--accent)}
.ct-nm{display:grid;min-width:0}.ct-nm b{font-weight:600}.ct-nm small{font-size:.78rem;color:var(--muted)}
.ct-ctl{display:flex;align-items:center;gap:6px}
.ct-ctl input{width:92px;font-family:var(--f-mono);text-align:right;font-size:1.08rem;padding:8px 10px;min-height:44px}
.ct-pm{width:44px;min-height:44px;padding:0;font-size:1.3rem;font-weight:600;border-radius:10px;display:inline-flex;align-items:center;justify-content:center}
.ct-same{min-height:44px;padding:0 12px;border-radius:10px;font-size:.86rem;font-weight:600;color:var(--accent);border-color:var(--accent);background:var(--surface);white-space:nowrap}
.ct-same:hover{background:var(--accent-soft)}
.ct-unit{font-size:.82rem;color:var(--muted);min-width:30px}
.ct-diff{font-family:var(--f-mono);font-size:.84rem;color:var(--muted);text-align:right;font-weight:600}
.ct-diff.neg{color:var(--danger)}.ct-diff.pos{color:var(--accent)}.ct-diff.same{color:var(--muted);font-weight:400;font-family:inherit}
.st-count-foot .st-preview{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.st-count-foot .linkbtn[hidden]{display:none}
.ct-draft .linkbtn{color:inherit;font-weight:600}
@media (max-width:700px){
  .ct-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm diff" "ctl ctl";row-gap:8px}
  .ct-nm{grid-area:nm}.ct-diff{grid-area:diff}.ct-ctl{grid-area:ctl}
  .ct-ctl input{flex:1;width:auto;min-width:0}
  .ct-same{flex:none}
}
/* โหมดนับทีละรายการ */
dialog.ctq{width:min(460px,100vw - 16px);max-width:min(460px,100vw - 16px);padding:0;border-radius:18px}
.ctq-wrap{display:flex;flex-direction:column;min-height:min(620px,90vh)}
.ctq-top{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.ctq-count{font-family:var(--f-mono);font-size:.84rem;color:var(--muted);white-space:nowrap}
.ctq-bar{flex:1;margin:0}
.ctq-close{width:40px;height:40px;padding:0;border-radius:50%;font-size:1rem}
.ctq-card,.ctq-done{flex:1;display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:18px 18px 20px;text-align:center}
.ctq-card[hidden],.ctq-done[hidden]{display:none}
.ctq-grp{font-size:.82rem;color:var(--muted);font-weight:600}
.ctq-name{font-size:1.5rem;line-height:1.3;margin:0}
.ctq-sys{margin:0;color:var(--muted)}.ctq-sys b{color:var(--ink);font-family:var(--f-mono)}
.ctq-step{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;gap:10px;margin-top:6px}
.ctq-pm{min-height:64px;font-size:2rem;font-weight:600;border-radius:14px;padding:0}
.ctq-step input{min-height:64px;font-size:2rem;text-align:center;font-family:var(--f-mono);border-radius:14px;padding:4px}
.ctq-unit{margin:-4px 0 0;color:var(--muted);font-size:.9rem}
.ctq-diff{margin:0;min-height:1.4em;font-size:.9rem;color:var(--muted)}
.ctq-diff.pos{color:var(--accent);font-weight:600}.ctq-diff.neg{color:var(--danger);font-weight:600}.ctq-diff.same{color:var(--accent)}
.ctq-same{min-height:56px;border-radius:14px;font-size:1.02rem;font-weight:700;color:var(--accent);border:2px solid var(--accent);background:var(--accent-soft)}
.ctq-nav{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:auto}
.ctq-nav button{min-height:52px;border-radius:12px;font-size:1rem}
.ctq-done{justify-content:center}
.ctq-done-ico{width:72px;height:72px;margin:0 auto;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:2.2rem;font-weight:700}
.ctq-done h2{margin:6px 0 0}.ctq-done p{margin:0;color:var(--muted)}
.ctq-done button{min-height:52px;border-radius:12px;font-size:1rem}
@media (max-width:560px){
  dialog.ctq{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  .ctq-wrap{min-height:100dvh}
}
/* ตรวจทานก่อนบันทึก */
.ctr-list{list-style:none;margin:8px 0 14px;padding:0;display:grid;gap:6px;max-height:55vh;overflow:auto}
.ctr-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.ctr-row div{display:grid}.ctr-row small{color:var(--muted);font-size:.8rem}
.ctr-row.big{border-color:var(--warn);background:var(--warn-soft)}
.it-mgr-btns{display:flex;gap:14px;flex-wrap:wrap}
.it-spot-no{font-family:var(--f-mono);font-size:.8rem;color:var(--muted);width:20px;text-align:center}
.ctr-d{font-family:var(--f-mono);font-size:.9rem;font-weight:700;text-align:right}
.ctr-d.neg{color:var(--danger)}.ctr-d.pos{color:var(--accent)}
/* รายชื่อคนเรียงลงมา (ประกาศ) */
.ppl{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px}
.ppl li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;font-size:.88rem;color:var(--ink)}
.ppl li:nth-child(odd){background:var(--sunk)}
.ppl-av{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.82rem;background:var(--accent-soft);color:var(--accent)}
.ack-lists .no .ppl-av{background:var(--warn-soft);color:var(--warn)}
.ppl-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ppl-at{flex:none;font-size:.78rem;color:var(--muted);font-family:var(--f-mono)}
.ppl li.ppl-empty{background:none;color:var(--muted);padding-left:2px}
.ack-lists{align-items:start}
.it-io{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px}
.it-io a[hidden]{display:none}
.st-bal-exp{display:flex;align-items:center;gap:8px;justify-self:end;padding-bottom:4px;flex-wrap:wrap}
.st-bal-exp small{font-size:.78rem;color:var(--muted)}
.st-bal-exp a[hidden]{display:none}
.btn-export.disabled{opacity:.45;pointer-events:none}
/* รายจ่าย */
.ex-form{display:grid;gap:14px}
.ex-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.ex-row .ex-title{grid-column:span 2}
@media (max-width:560px){.ex-row .ex-title{grid-column:auto}}
.ex-amt input{font-family:var(--f-mono);font-size:1.15rem;text-align:right}
.ex-form .lbl{display:block;font-size:.84rem;color:var(--muted);margin-bottom:6px}
.ex-cats{margin-bottom:4px}
.ex-form .chips button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ex-file{display:inline-flex;max-width:100%}
.ex-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
.ex-what{display:grid;gap:1px;min-width:180px}.ex-what small{color:var(--muted);font-size:.78rem}
.ex-rc{font-size:.78rem;color:var(--accent)}
.kpi.neg b{color:var(--danger)}.kpi.pos b{color:var(--accent)}
.ch-bar .nm.linkish{background:none;border:0;padding:0;text-align:left;color:inherit;font:inherit;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
#ex-bars .ch-bar{grid-template-columns:minmax(120px,170px) minmax(0,1fr) 128px}
@media (max-width:560px){#ex-bars .ch-bar{grid-template-columns:110px minmax(0,1fr) 100px}}
.ex-file span{color:var(--accent-ink)}
.ex-form .fld > .linkbtn{justify-self:start;text-align:left}
.ex-tbl td.acts-t{white-space:nowrap}
/* ใบสำคัญจ่าย (PDF) */
.pv-page{padding:30px 40px 0}
.pv{height:520px;box-sizing:border-box;display:flex;flex-direction:column;color:#111;font-size:13px}
.pv-head{display:flex;align-items:center;gap:16px}
.pv-logo{height:58px;width:auto}
.pv-co{display:grid;gap:4px}.pv-co b{font-size:15px}.pv-co span{font-size:12.5px}
.pv-title{display:flex;justify-content:space-between;align-items:flex-end;margin-top:8px}
.pv-th{font-size:16px;font-weight:700}.pv-en{font-size:12px;letter-spacing:.04em;margin-top:2px}
.pv-no{display:grid;gap:6px;min-width:220px}
.pv-no div{display:flex;gap:6px;align-items:baseline;justify-content:flex-end}
.pv-dot{border-bottom:1px dotted #333;min-width:150px;padding:0 4px;text-align:center;min-height:17px}
.pv-dot.wide{flex:1;text-align:left}
.pv-k{font-weight:600;white-space:nowrap}
.pv-pay{display:flex;align-items:center;gap:26px;margin-top:10px}
.pv-chk{display:inline-flex;align-items:center;gap:8px}
.pv-box{width:22px;height:22px;border:1.5px solid #111;display:inline-grid;place-items:center;font-weight:700;font-size:15px}
.pv-to{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.pv-tbl{border:2px solid #111;margin-top:10px}
.pv-tr{display:grid;grid-template-columns:96px 112px minmax(0,1fr) 116px}
.pv-tr span{padding:5px 7px;border-right:1.5px solid #111;min-height:20px;word-break:break-word}
.pv-tr span:last-child{border-right:0}
.pv-tr .n{text-align:right;font-variant-numeric:tabular-nums}
.pv-thr{border-bottom:1.5px solid #111;font-weight:600}.pv-thr span{text-align:center}.pv-thr .n{text-align:center}
.pv-tbody{display:grid;min-height:96px;grid-auto-rows:min-content;background:linear-gradient(to right,transparent 95px,#111 95px,#111 96.5px,transparent 96.5px,transparent 207px,#111 207px,#111 208.5px,transparent 208.5px)}
.pv-tbody .pv-tr span{border-right:0}
.pv-tbody{position:relative}
.pv-tbody::after{content:"";position:absolute;top:0;bottom:0;right:116px;border-right:1.5px solid #111}
.pv-foot{display:grid;grid-template-columns:minmax(0,1fr) 278px;gap:14px;align-items:start}
.pv-note{display:flex;gap:10px;padding-top:8px}
.pv-note-lines{flex:1;display:grid;gap:6px}
.pv-ul{border-bottom:1px solid #111;min-height:19px;padding:0 4px;font-size:12px}
.pv-ul.wide{flex:1}
.pv-sum{display:grid;grid-template-columns:minmax(0,1fr) 116px;border:2px solid #111;border-top:0}
.pv-sum span{padding:6px 8px;text-align:right;font-weight:600;border-right:1.5px solid #111}
.pv-sum b{padding:6px 7px;text-align:right;font-variant-numeric:tabular-nums}
.pv-words{display:flex;align-items:baseline;gap:8px;margin-top:12px}
.pv-sign{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:auto;padding-bottom:14px;text-align:center}
.pv-sign div{display:grid;gap:3px}
.pv-sline{border-bottom:1px dotted #333;height:30px;margin:0 8px}
.pv-sname{font-size:11.5px;color:#333;white-space:pre}
.pv-sign b{font-size:13.5px}
.pv-sdate{font-size:10.5px;color:#666}
.pv-cut{height:42px;border-top:1.5px dashed #999;margin-top:18px;font-size:10px;color:#999;text-align:center;padding-top:2px}
.btn-pv{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px solid var(--accent);color:var(--accent);background:var(--surface);font-weight:600;white-space:nowrap;cursor:pointer}
.btn-pv.sm{padding:5px 12px;font-size:.84rem}
.btn-pv:hover{background:var(--accent-soft)}
.btn-pv[hidden]{display:none}
.co-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.co-form .co-wide,.co-acts,.co-form .msg{grid-column:1/-1}
.co-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media (max-width:560px){.co-form{grid-template-columns:1fr}}
.pdf-co{font-weight:600;color:#333}
/* ตำแหน่งและสิทธิ์: รายการซ้าย + ตัวแก้ขวา */
.pm{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:16px;align-items:start}
.pm-side{display:grid;gap:8px;position:sticky;top:12px}
.pm-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:62vh;overflow:auto}
.pm-item{display:grid;gap:3px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer}
.pm-item:hover{border-color:var(--accent)}
.pm-item.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.pm-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pm-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.pm-top b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-n{font-size:.78rem;color:var(--muted);white-space:nowrap}
.pm-item small{font-size:.76rem;color:var(--muted)}
.pm-chips{display:flex;flex-wrap:wrap;gap:4px}
.pm-chip{font-size:.7rem;padding:0 7px;border-radius:999px;background:var(--warn-soft);color:var(--warn);font-weight:600}
.pm-side .pos-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:end;margin:0}
.pm-edit{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--surface);min-width:0}
.pm-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pm-name{font-size:1.15rem;font-weight:600;flex:1;min-width:180px;padding:6px 10px}
.pm-title{margin:0;font-size:1.15rem}
.pm-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pm-tools select{max-width:260px}
.pm-del{margin-left:auto}
.pm-status{min-height:1.3em;font-size:.84rem;margin:6px 0 2px;color:var(--muted)}
.pm-status.ok{color:var(--accent);font-weight:600}
.pm-grp{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.pm-grp h4{margin:0 0 6px;font-size:.82rem;color:var(--muted);letter-spacing:.02em}
.pm-grp.warn h4{color:var(--warn)}
.pm-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line)}
.pm-row:last-child{border-bottom:0}
.pm-mod{display:grid;gap:2px;min-width:0}.pm-mod b{font-weight:600}.pm-mod small{font-size:.78rem;color:var(--muted)}
.pm-seg{display:inline-flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--sunk)}
.pm-lv{border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;padding:7px 12px;font-size:.84rem;color:var(--muted);white-space:nowrap;min-height:38px}
.pm-lv:last-child{border-right:0}
.pm-lv:hover:not(:disabled){background:var(--surface);color:var(--ink)}
.pm-lv.on{font-weight:700;color:#fff}
.pm-lv.on.lv0{background:#8a8778}
.pm-lv.on.lv1{background:#3c6fb0}
.pm-lv.on.lv2{background:#3f7a1f}
.pm-lv.on.lv3{background:#2a4d12}
.pm-grp.warn .pm-lv.on.lv3{background:#a35b00}
.pm-lv:disabled{cursor:default}
.pm-lv:disabled:not(.on){opacity:.55}
@media (max-width:860px){
  .pm{grid-template-columns:1fr}
  .pm-side{position:static}
  .pm-list{max-height:none;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .pm-row{grid-template-columns:1fr}
  .pm-seg{display:flex}.pm-lv{flex:1;padding:8px 6px;white-space:normal;text-align:center}
}
@media (max-width:860px){
  .pm-list{grid-template-columns:repeat(auto-fill,minmax(135px,1fr));max-height:240px;overflow:auto;padding:2px}
  .pm-item{padding:7px 10px}
  .pm-item small,.pm-item .pm-chips{display:none}
  .pm-top{flex-direction:column;align-items:flex-start;gap:0}
}

.ex-what .ex-link{display:inline-block;margin:3px 0 0;padding:1px 8px;border-radius:999px;font-size:11.5px;background:var(--info-soft);color:var(--info);width:max-content}

/* ลืมรหัสผ่าน */
.fp-link{display:block;margin:14px auto 0;background:none;border:0;padding:4px 6px;color:var(--accent);font:inherit;font-size:.92rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.fp-link:hover{opacity:.8}
.fp-sub{margin:0 0 14px;color:var(--muted);font-size:.92rem;line-height:1.55}
.pw-force{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:var(--warn-soft);border:1px solid var(--line);font-size:.92rem;line-height:1.5}

.tbl td.emp-code{font-family:var(--f-mono);font-size:.84rem;white-space:nowrap;color:var(--muted)}
.user-form .eu-top{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}

/* ตารางคงเหลือหลายสาขา: เลื่อนในกรอบ หัวตาราง + คอลัมน์สินค้าค้างไว้ แถบเลื่อนแนวนอนอยู่ในจอเสมอ */
.st-matrix{max-height:min(72vh,760px);overflow:auto;overscroll-behavior-x:contain;border:1px solid var(--line);border-radius:10px;cursor:grab}
.st-matrix.dragging{cursor:grabbing;user-select:none}
.st-matrix thead th{position:sticky;top:0;background:var(--surface);z-index:2;box-shadow:0 1px 0 var(--line)}
.st-matrix thead th:first-child{z-index:3;left:0}
.st-matrix::-webkit-scrollbar{height:12px;width:10px}
.st-matrix::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 45%,transparent);border-radius:999px;border:3px solid var(--surface)}
.st-matrix::-webkit-scrollbar-track{background:var(--sunk)}
.hs-nav{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin:0 0 6px}
.hs-nav[hidden]{display:none}
.hs-nav .mini{min-width:40px;font-size:.9rem}

/* ดู/ซ่อนรหัสผ่าน */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:44px}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:36px;height:36px;padding:0;display:grid;place-items:center;border:0;background:none;color:var(--muted);border-radius:8px;cursor:pointer}
.pw-eye:hover{color:var(--ink);background:var(--sunk)}
.pw-eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pw-eye[aria-pressed="true"]{color:var(--accent)}
.users-tbl th:has(.hf-btn){padding:2px 2px}
.users-tbl td{white-space:nowrap}

/* กะ: เหลือแค่ชื่อ ไม่มีเวลา */
.sh-item{grid-template-columns:minmax(0,1fr) auto}
.sh-add{grid-template-columns:minmax(0,1fr) auto}
@media (max-width:560px){.sh-add{grid-template-columns:minmax(0,1fr) auto}.sh-add .fld:first-child,.sh-add button{grid-column:auto}}

/* ปุ่มของหมด (กดครั้งเดียว = 0) */
.ct-out{min-height:44px;padding:0 12px;border-radius:10px;font-size:.86rem;font-weight:600;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 55%,var(--line));background:var(--surface);white-space:nowrap;flex:none}
.ct-out:hover{background:var(--danger-soft)}
.ct-row.is-out .ct-out{background:var(--danger);border-color:var(--danger);color:#fff}
.ctq-one{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:8px}
.ctq-out{min-height:56px;border-radius:14px;font-size:1.02rem;font-weight:700;color:var(--danger);border:2px solid var(--danger);background:var(--danger-soft)}
@media (max-width:480px){
  .ct-ctl{flex-wrap:wrap}
  .ct-ctl .ct-same,.ct-ctl .ct-out{flex:1 1 calc(50% - 3px)}
  .ct-ctl input{flex:1 1 60px}
}

.tbl td.actions .del-user{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.tbl td.actions .del-user:hover{background:var(--danger-soft)}
.tbl td.actions .del-user.armed{background:var(--danger);color:#fff;border-color:var(--danger)}
.users-tbl td.actions{white-space:normal;text-align:right;min-width:230px}
.users-tbl td.actions button{margin:2px 0}
.users-tbl .pos-sel{max-width:190px}
.mini.del-leave{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.mini.del-leave.armed{background:var(--danger);color:#fff;border-color:var(--danger)}
.seg[aria-labelledby="quota-l"]{min-width:0}
.seg[aria-labelledby="quota-l"] label{padding:6px 2px;font-size:.84rem;min-width:0}
.meta .todo-exp{font-size:.74rem;font-weight:600;padding:1px 8px;border-radius:999px;background:var(--info-soft);color:var(--info)}
.meta .todo-exp.pending{background:none;color:var(--muted);font-weight:400;padding:0}

/* สีป้ายใช้วันลา: PH เหลือง · VAC เหลืองมะนาวลายทาง · SWAP แดง */
.pill.quota-ph{background:#FFF1A8;color:#7A5B00;border:1px solid #F2D650}
.pill.quota-vac{background:repeating-linear-gradient(135deg,#E2F48A 0 7px,#F7FCE0 7px 13px);color:#3F5205;border:1px dashed #A9C92E}
.pill.quota-swap{background:#FBE0DD;color:#B3261E;border:1px solid #F1B3AC}
@media (prefers-color-scheme:dark){
  .pill.quota-ph{background:#4A3D05;color:#FFE27A;border-color:#7A6410}
  .pill.quota-vac{background:repeating-linear-gradient(135deg,#2C3510 0 7px,#1E240A 7px 13px);color:#D3EE6A;border-color:#5A6A1A}
  .pill.quota-swap{background:#4A1B17;color:#FFB4AB;border-color:#7E2C25}
}
.dc-events{display:grid;gap:8px;padding:4px 0}
.dc-ev{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--sunk)}
.dc-ev .dc-room{font-size:.84rem;padding:6px 10px}
@media (max-width:700px){.dc-ev{grid-template-columns:minmax(0,1fr)}}
.seg[aria-labelledby="cpayer-l"]{min-width:0}
.seg[aria-labelledby="cpayer-l"] label{padding:6px 2px;font-size:.84rem;min-width:0}
.meta .swap-with{font-size:.78rem;font-weight:600;color:#B3261E}
@media (prefers-color-scheme:dark){.meta .swap-with{color:#FFB4AB}}
.meta .claim-method{font-size:.78rem;color:var(--muted)}
.seg[aria-labelledby="cmethod-l"]{min-width:0}
.seg[aria-labelledby="cmethod-l"] label{padding:6px 2px;font-size:.84rem;min-width:0}

/* ---------- ตารางการทำงาน (ปฏิทินรายเดือน) ---------- */
:root{--sc-orange:#E0700F;--sc-orange-ink:#FFFFFF;--sc-num:#0E8FA6;--sc-cell-line:#4A3A2E;
  --br0-bg:#E6F0D4;--br0-ink:#2F5A17;--br1-bg:#DCEBF7;--br1-ink:#1F5A8C;--br2-bg:#FBE7D3;--br2-ink:#8A4510;
  --br3-bg:#EEE2F7;--br3-ink:#5B2A9E;--br4-bg:#DDF1EC;--br4-ink:#1D6B5A;--br5-bg:#F7DDE6;--br5-ink:#8E2450}
@media (prefers-color-scheme:dark){:root{--sc-orange:#F08A2E;--sc-orange-ink:#1C1206;--sc-num:#5CCDE0;--sc-cell-line:#5A4D40;
  --br0-bg:#283217;--br0-ink:#BFD98A;--br1-bg:#1C2D40;--br1-ink:#9CC6EE;--br2-bg:#3A2715;--br2-ink:#F2B67E;
  --br3-bg:#2E2240;--br3-ink:#CDB0F2;--br4-bg:#173129;--br4-ink:#8ED8C4;--br5-bg:#3A1C28;--br5-ink:#F0A5C0}}
.sc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.sc-mnav{display:flex;align-items:center;gap:6px}
.sc-mnav h2{min-width:9.5em;text-align:center;font-size:1.25rem}
.sc-arrow{width:36px;height:36px;padding:0;border-radius:999px;font-size:1.3rem;line-height:1;display:grid;place-items:center}
.sc-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.sc-filters .chips{margin:0}
.sc-filters select{width:auto;min-width:140px}
.sc-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.sc-dow{background:var(--sc-orange);color:var(--sc-orange-ink);border-radius:999px;text-align:center;font-family:var(--f-display);font-weight:600;font-size:.88rem;padding:4px 2px}
.sc-dow .s{display:none}
.sc-cell{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:3px;min-height:118px;padding:6px 6px 26px;
  border:1.5px solid var(--sc-cell-line);border-radius:16px;background:var(--surface);text-align:left;color:var(--ink);font-size:.78rem;line-height:1.3;min-width:0}
.sc-cell:hover{border-color:var(--sc-orange)}
.sc-cell.blank{border:none;background:none;pointer-events:none}
.sc-cell.today{box-shadow:inset 0 0 0 2px var(--sc-num)}
.sc-cell.sel{border-color:var(--sc-orange);box-shadow:0 0 0 2px var(--sc-orange)}
.sc-cell.hol{background:var(--warn-soft)}
.sc-top{display:flex;align-items:center;justify-content:space-between;min-height:16px;gap:4px}
.sc-top .sc-count{margin-left:auto;font-size:.7rem;color:var(--muted)}
.sc-holy{display:inline-flex;color:var(--sc-orange)}
.sc-holy svg{width:16px;height:16px}
.sc-hname{display:block;text-align:center;font-size:.72rem;font-weight:600;color:var(--warn);overflow-wrap:anywhere}
.sc-chips{display:flex;flex-direction:column;gap:2px;min-width:0}
.sc-chip{display:block;border-radius:6px;padding:1px 5px;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--sunk)}
.sc-chip b{font-family:var(--f-mono);font-weight:700;font-size:.7rem}
.sc-chip.me{outline:1.5px solid currentColor;font-weight:700}
.sc-chip.off{background:var(--sunk);color:var(--muted)}
.sc-chip.off.quota-ph{background:#FFF1A8;color:#7A5B00}.sc-chip.off.quota-vac{background:repeating-linear-gradient(135deg,#E2F48A 0 7px,#F7FCE0 7px 13px);color:#3F5205}.sc-chip.off.quota-swap{background:#FBE0DD;color:#B3261E}
.sc-more{font-size:.7rem;color:var(--muted);padding-left:4px}
.sc-num{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-family:var(--f-display);font-weight:700;font-size:1.05rem;color:var(--sc-num)}
.sc-mine{display:none}
.br0{background:var(--br0-bg);color:var(--br0-ink)}.br1{background:var(--br1-bg);color:var(--br1-ink)}.br2{background:var(--br2-bg);color:var(--br2-ink)}
.br3{background:var(--br3-bg);color:var(--br3-ink)}.br4{background:var(--br4-bg);color:var(--br4-ink)}.br5{background:var(--br5-bg);color:var(--br5-ink)}
.pill.quota-x{background:var(--sunk);color:var(--muted);border:1px solid var(--line)}
/* รายละเอียดวัน */
.sc-day .ph{margin-bottom:6px}
.sc-dhol{margin:0 0 10px;display:flex;align-items:center;gap:4px;color:var(--warn);font-weight:600}
.sc-empty{color:var(--muted);margin:6px 0}
.sc-groups{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sc-groups li{display:grid;grid-template-columns:minmax(120px,auto) 1fr auto;gap:10px;align-items:start;padding:8px 0;border-top:1px solid var(--line)}
.sc-groups li:first-child{border-top:none}
.sc-gname{border-radius:8px;padding:3px 10px;font-size:.88rem;white-space:nowrap;justify-self:start}
.sc-gname b{font-family:var(--f-mono)}
.sc-gppl{display:flex;flex-wrap:wrap;gap:6px 14px;padding-top:3px}
.sc-person.me{font-weight:700;color:var(--accent)}
.sc-person small{color:var(--muted);font-family:var(--f-mono)}
.sc-leaves{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.sc-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sc-acts .armed{border-color:var(--warn);color:var(--warn)}
.sc-toast{margin:0 0 10px}
/* หน้าต่างจัดกะ */
dialog.dlg-sched{max-width:min(560px,calc(100vw - 16px));max-height:calc(100dvh - 24px)}
.sd-hol{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.sd-holy{display:flex;align-items:center;gap:6px;font-size:.9rem;padding-bottom:8px;white-space:nowrap}
.sd-holy input{width:auto}
.sd-tools{display:flex;align-items:center;gap:10px}
.sd-count{font-size:.82rem;color:var(--muted);white-space:nowrap}
.sd-list{list-style:none;margin:0;padding:0;max-height:min(52dvh,440px);overflow:auto;border:1px solid var(--line);border-radius:10px}
.sd-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,180px);gap:8px;align-items:center;padding:6px 10px;border-top:1px solid var(--line)}
.sd-row:first-child{border-top:none}
.sd-row.on{background:var(--accent-soft)}
.sd-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:.9rem;min-width:0}
.sd-who small{color:var(--muted);font-family:var(--f-mono)}
.sd-row select{padding:5px 8px}
.dlg-sched .row-end{align-items:center}
.dlg-sched .row-end .linkbtn{margin-right:auto}
@media (max-width:640px){
  .sc-cal{gap:4px}
  .sc-dow{font-size:.74rem;padding:3px 0}
  .sc-dow .l{display:none}.sc-dow .s{display:inline}
  .sc-cell{min-height:64px;padding:3px 3px 20px;border-radius:12px;border-width:1.2px;align-items:center}
  .sc-chips,.sc-top .sc-count,.sc-hname{display:none}
  .sc-top{justify-content:center;min-height:12px}
  .sc-holy svg{width:12px;height:12px}
  .sc-cell.hol::after{content:"";position:absolute;top:4px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--warn)}
  .sc-mine{display:block;font-family:var(--f-mono);font-weight:700;font-size:.72rem;border-radius:6px;padding:0 4px;background:var(--accent);color:var(--accent-ink)}
  .sc-num{font-size:.92rem;bottom:2px}
  .sc-mnav h2{min-width:7.5em;font-size:1.1rem}
  .sc-groups li{grid-template-columns:1fr;gap:4px}
  .sd-row{grid-template-columns:1fr}
}
.sc-warn{color:var(--danger);font-weight:700}
.sc-chip.clash{outline:1.5px dashed var(--danger)}
@media (prefers-color-scheme:dark){.sc-chip.off.quota-ph{background:#3A3210;color:#F2D650}.sc-chip.off.quota-vac{background:repeating-linear-gradient(135deg,#2C3510 0 7px,#1E240A 7px 13px);color:#D3EE6A}.sc-chip.off.quota-swap{background:#3D1D1A;color:#F1B3AC}}

/* ---------- ตารางการทำงาน: ตารางรายคน (แบบ Excel) ---------- */
.main:has(#view-schedule.mx:not([hidden])){max-width:none}
.sc-mode button{border:none;background:none;padding:5px 12px;border-radius:6px;font-size:.9rem;color:var(--muted)}
.sc-mode button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.sc-brush{display:grid;gap:6px;margin-bottom:10px;padding:10px;border:1px dashed var(--line);border-radius:10px;background:var(--sunk)}
.sc-brush-keys,.sc-pick-keys{display:flex;flex-wrap:wrap;gap:5px}
.sc-key{min-width:42px;padding:5px 8px;border-radius:7px;border:1.5px solid rgba(0,0,0,.12);font-family:var(--f-mono);font-weight:700;font-size:.82rem;line-height:1.1}
.sc-key.none,.sc-key.clr{background:var(--surface);color:var(--ink);font-family:var(--f-body);font-weight:600}
.sc-key.on{outline:3px solid var(--ink);outline-offset:1px}
.sc-mx-wrap{overflow:auto;max-height:min(72dvh,820px);border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.sc-mx-tbl{border-collapse:separate;border-spacing:0;font-size:.8rem;min-width:100%}
.sc-mx-tbl th,.sc-mx-tbl td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;text-align:center;white-space:nowrap}
.sc-mx-tbl thead th{position:sticky;top:0;z-index:2;background:var(--sunk);font-weight:600;padding:4px 2px}
.sc-mx-tbl tfoot td,.sc-mx-tbl tfoot th{position:sticky;bottom:0;z-index:2;background:var(--sunk);font-weight:600;color:var(--muted);padding:3px 2px}
.sc-mx-tbl .h-code,.sc-mx-tbl .r-code{position:sticky;left:0;z-index:3;min-width:46px;font-family:var(--f-mono);font-size:.74rem;color:var(--muted);background:var(--surface)}
.sc-mx-tbl .h-name,.sc-mx-tbl .r-name{position:sticky;left:46px;z-index:3;min-width:104px;max-width:150px;text-align:left;padding:0 8px;overflow:hidden;text-overflow:ellipsis;background:var(--surface);box-shadow:2px 0 0 var(--line)}
.sc-mx-tbl thead .h-code,.sc-mx-tbl thead .h-name,.sc-mx-tbl tfoot th{z-index:4;background:var(--sunk)}
.sc-mx-tbl .r-name{font-weight:600}
.sc-mx-tbl tr.me .r-name,.sc-mx-tbl tr.me .r-code{background:var(--accent-soft);color:var(--accent)}
.sc-mx-tbl .h-day{min-width:34px;line-height:1.1}
.sc-mx-tbl .h-day .dw{display:block;font-size:.66rem;color:var(--muted);font-weight:500}
.sc-mx-tbl .h-day .dn{display:block;font-size:.95rem;font-family:var(--f-display)}
.sc-mx-tbl .h-day.we{background:color-mix(in srgb,var(--sc-orange) 14%,var(--sunk))}
.sc-mx-tbl .h-day.hol{background:var(--warn-soft);color:var(--warn)}
.sc-mx-tbl .h-day.td .dn{color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:0 5px;display:inline-block}
.sc-mx-tbl .h-day .sc-holy svg{width:11px;height:11px}
.sc-mx-tbl .h-sum{min-width:36px;background:var(--sunk)}
.sc-mx-tbl td.c{height:30px;min-width:34px;font-family:var(--f-mono);font-weight:700;font-size:.78rem;position:relative}
.sc-mx-tbl td.c.we{background:var(--sunk)}
.sc-mx-tbl.brushing{user-select:none;-webkit-user-select:none}
.sc-mx-tbl td.c.td{box-shadow:inset 2px 0 0 var(--accent),inset -2px 0 0 var(--accent)}
.sc-mx-tbl td.c.lv{box-shadow:inset 0 0 0 2px rgba(0,0,0,.35);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.35) 0 3px,transparent 3px 7px)}
.sc-mx-tbl td.c.clash::after{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 8px 8px 0;border-color:transparent #B3261E transparent transparent}
.sc-mx-tbl.edit td.c{cursor:pointer}
.sc-mx-tbl.edit td.c:hover{outline:2px solid var(--ink);outline-offset:-2px}
.sc-mx-tbl td.c:focus{outline:2px solid var(--info);outline-offset:-2px}
.sc-mx-tbl td.c.picked{outline:3px solid var(--ink);outline-offset:-3px}
.sc-mx-tbl.brushing td.c{cursor:crosshair;touch-action:none}
.sc-mx-tbl td.sc-sum{min-width:36px;font-weight:700;background:var(--sunk)}
.sc-mx-tbl td.s-X{color:#178A20}.sc-mx-tbl td.s-PH{color:#6B5A00}.sc-mx-tbl td.s-VAC{color:#4F6B00}
@media (prefers-color-scheme:dark){.sc-mx-tbl td.s-X{color:#6EE07A}.sc-mx-tbl td.s-PH{color:#F2E35A}.sc-mx-tbl td.s-VAC{color:#C8E63C}}
.sc-mx-tbl td.blank{padding:18px;color:var(--muted);text-align:left}
/* To-do: บัญชีสำหรับโอนเงิน */
.tb-open{justify-self:start;border:1px dashed var(--line);background:var(--surface);color:var(--info);border-radius:10px;padding:8px 12px;font-weight:600;font-size:.88rem;text-align:left}
.tb-open[hidden],.tb-box[hidden],#tb-other[hidden],.tb-saved[hidden]{display:none}
.tb-box{border:1px dashed var(--info);background:var(--info-soft);border-radius:12px;padding:12px 14px;display:grid;gap:10px}
.tb-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tb-h b{color:var(--info);font-family:var(--f-display);font-weight:500}
.tb-row{display:grid;grid-template-columns:1.1fr 1fr 1.2fr;gap:10px}
.tb-row .fld{display:grid;gap:5px;align-content:start}
.tb-saved{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tb-saved .lbl{font-size:.78rem;color:var(--muted)}
.tb-pick{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:3px 10px;font-size:.78rem}
.tb-box .hint{margin:0}
.tb-acct{display:flex;width:fit-content;max-width:100%;align-items:center;gap:8px;flex-wrap:wrap;background:var(--info-soft);color:var(--info);border-radius:10px;padding:5px 10px;margin:5px 0 2px;font-size:.84rem}
.tb-acct .no{font-family:var(--f-mono);letter-spacing:.03em}
.tb-copy{border:1px solid var(--info);background:var(--surface);color:var(--info);border-radius:7px;padding:1px 8px;font-size:.74rem;font-weight:600}
@media (max-width:640px){.tb-row{grid-template-columns:1fr}}
/* ปุ่ม/หน้าต่างล้างตารางทั้งเดือน (แอดมิน) */
.sc-clear-btn{display:inline-flex;align-items:center;padding:5px 12px;font-size:.84rem;border-radius:10px;border:1px solid var(--danger);background:var(--surface);color:var(--danger);font-weight:600}
.sc-clear-btn:hover{background:var(--danger-soft)}
.sc-clear-btn[hidden]{display:none}
.scl-big{font-family:var(--f-display);font-size:1.6rem;color:var(--danger);line-height:1.2}
.cx-body .scl-chk,.scl-chk{display:flex!important;gap:8px;align-items:flex-start;font-size:.88rem;text-align:left;justify-content:flex-start}
.scl-chk input{margin-top:4px;width:18px!important;height:18px;flex:none}
.scl-done{background:var(--accent-soft);color:var(--accent);border-radius:10px;padding:10px 12px;font-weight:600}
#scl-acts .btn-danger{padding:10px 12px;font-weight:600}
#scl-acts .btn-danger:disabled{opacity:.4;cursor:not-allowed}
#dlg-sclear{width:min(480px,calc(100vw - 24px))}
.scl-range{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.scl-range label{display:grid;gap:4px;font-size:.8rem;color:var(--muted)}
.scl-quick{display:flex;gap:6px;flex-wrap:wrap}
.scl-chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:3px 12px;font-size:.8rem}
.scl-chip.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.scl-who{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.scl-who .lbl{font-size:.8rem;color:var(--muted)}
.scl-plist{display:grid;gap:4px;border:1px solid var(--line);border-radius:10px;padding:8px}
.scl-plist[hidden]{display:none}
.scl-ptop{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.scl-ptop input{flex:1;min-width:120px;width:auto}
.scl-prows{display:grid;gap:2px;max-height:230px;overflow:auto}
.cx-body .scl-prow,.scl-prow{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:5px 6px;border-radius:8px;font-size:.88rem;cursor:pointer;text-align:left}
.scl-prow:hover{background:var(--sunk)}
.scl-prow input{width:18px!important;height:18px;margin:0}
.scl-prow small{color:var(--muted);font-size:.76rem;white-space:nowrap}
.scl-chk[hidden],.cx-warn[hidden]{display:none!important}
.sc-trash{display:grid;gap:6px;margin-bottom:8px}
.sc-trash[hidden]{display:none}
.sc-trash-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px dashed var(--muted);border-radius:12px;padding:8px 12px;font-size:.86rem}
.sc-trash-row small{color:var(--muted)}
.sc-trash-row button{white-space:nowrap}
/* หน้าต่าง SWAP: เทียบกะ เดิม → ใหม่ ของสองคน */
.swd-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;background:var(--sunk);border-radius:12px;padding:12px}
.swd-pair.one{grid-template-columns:1fr}
.swd-who{display:grid;gap:5px;justify-items:center;text-align:center;font-size:.84rem}
.swd-who b{font-family:var(--f-display);font-weight:500}
.swd-arrow{font-size:1.3rem;color:var(--muted)}
.swd-chg{display:flex;gap:6px;align-items:center}
.swd-mini{min-width:40px;height:30px;padding:0 4px;border-radius:7px;display:grid;place-items:center;font-family:var(--f-mono);font-weight:700;font-size:.78rem}
.swd-mini.old{opacity:.55;text-decoration:line-through}
.swd-mini.none{background:var(--surface);color:var(--muted);border:1px dashed var(--line)}
#swd-acts button small{display:block;font-weight:400;font-size:.76rem;opacity:.85}
.sc-pick{position:fixed;z-index:60;width:min(320px,calc(100vw - 16px));background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.18);padding:10px}
.sc-pick-h{margin:0 0 8px;font-size:.8rem;color:var(--muted)}
@media (max-width:640px){
  .sc-mx-tbl .h-code,.sc-mx-tbl .r-code{display:none}
  .sc-mx-tbl .h-name,.sc-mx-tbl .r-name{left:0;min-width:74px;max-width:96px;padding:0 6px}
  .sc-mx-tbl td.c{min-width:32px}
}

/* ---------- วันลาคงเหลือ ที่มุมขวาบน ---------- */
.me-chip{max-width:min(380px,72vw)}
.me-bal{display:flex;gap:4px;flex-shrink:0}
.me-q{display:inline-flex;align-items:baseline;gap:3px;border-radius:7px;padding:2px 6px;font-size:.74rem;line-height:1.2;border:1px solid transparent}
.me-q i{font-style:normal;font-family:var(--f-mono);font-weight:600;font-size:.66rem;opacity:.85}
.me-q b{font-family:var(--f-display);font-size:.92rem}
.me-q-vac{background:repeating-linear-gradient(135deg,#E2F48A 0 7px,#F7FCE0 7px 13px);color:#3F5205;border-color:#A9C92E;border-style:dashed}
.me-q-ph{background:#FFF1A8;color:#7A5B00;border-color:#F2D650}
.me-q.neg{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
@media (prefers-color-scheme:dark){.me-q-vac{background:repeating-linear-gradient(135deg,#2C3510 0 7px,#1E240A 7px 13px);color:#D3EE6A;border-color:#5A6A1A}.me-q-ph{background:#3A3210;color:#F2D650;border-color:#5A4E18}}
.me-bal-detail{padding:6px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--line);display:grid;gap:6px;min-width:230px}
.me-bal-detail .h{margin:0;font-size:.78rem;color:var(--muted)}
.me-bal-detail .r{display:grid;grid-template-columns:1fr auto;gap:0 10px;font-size:.88rem}
.me-bal-detail .r small{grid-column:1/-1;color:var(--muted);font-size:.76rem}
.me-bal-detail .neg{color:var(--danger)}
.me-bal-detail .n{margin:0;font-size:.78rem;color:var(--warn)}
@media (max-width:480px){.me-chip .me-txt small{display:none}.me-chip{gap:6px}.me-q{padding:2px 5px}}
.sc-mx-tbl .h-bal{min-width:40px;font-family:var(--f-mono);font-size:.74rem}
.sc-mx-tbl .h-bal-vac{background:repeating-linear-gradient(135deg,#E2F48A 0 7px,#F7FCE0 7px 13px);color:#3F5205}.sc-mx-tbl .h-bal-ph{background:#FFF1A8;color:#7A5B00}
.sc-mx-tbl td.bal{font-family:var(--f-display);font-weight:700;font-size:.9rem;min-width:40px}
.sc-mx-tbl td.bal-vac{color:#3F5205;background:repeating-linear-gradient(135deg,#E2F48A 0 7px,#F7FCE0 7px 13px)}
.sc-mx-tbl td.bal-ph{color:#7A5B00;background:color-mix(in srgb,#FFF1A8 55%,var(--surface))}
.sc-mx-tbl td.bal.neg{color:var(--danger)}
.sc-mx-tbl td.bal.ed{cursor:pointer}
.sc-mx-tbl td.bal.ed:hover{outline:2px solid var(--ink);outline-offset:-2px}
.sc-mx-tbl td.bal.picked{outline:3px solid var(--ink);outline-offset:-3px}
@media (prefers-color-scheme:dark){.sc-mx-tbl .h-bal-vac,.sc-mx-tbl td.bal-vac{background:repeating-linear-gradient(135deg,#2C3510 0 7px,#1E240A 7px 13px);color:#D3EE6A}.sc-mx-tbl .h-bal-ph,.sc-mx-tbl td.bal-ph{background:#3A3210;color:#F2D650}}
.sc-bal-form{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sc-bal-form .msg,.sc-bal-form button,.sc-bal-form .hint{grid-column:1/-1}

/* ---------- นำเข้าตารางงานจาก Excel ---------- */
.sc-io{display:flex;gap:8px;flex-wrap:wrap}
.sc-io .btn-import{border:none}
dialog.dlg-simp{max-width:min(720px,calc(100vw - 16px));max-height:calc(100dvh - 24px)}
.si-opts{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:10px;align-items:end}
.si-chk{grid-column:1/-1;display:flex;gap:8px;align-items:flex-start;font-size:.88rem}
.si-chk input{width:auto;margin-top:4px}
.si-result{display:grid;gap:8px}
.si-sum{margin:0;padding:8px 12px;border-radius:8px;background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:.9rem}
.si-errs,.si-warns{margin:0;padding:8px 12px 8px 28px;border-radius:8px;font-size:.84rem;display:grid;gap:3px}
.si-errs{background:var(--danger-soft);color:var(--danger)}
.si-warns{background:var(--warn-soft);color:var(--warn)}
.si-tbl-wrap{max-height:min(44dvh,380px);overflow:auto;border:1px solid var(--line);border-radius:10px}
.si-tbl{width:100%;border-collapse:collapse;font-size:.86rem}
.si-tbl th{position:sticky;top:0;background:var(--sunk);text-align:left;font-weight:600;font-size:.78rem;color:var(--muted);padding:6px 8px}
.si-tbl td{padding:5px 8px;border-top:1px solid var(--line);vertical-align:middle}
.si-tbl td.n{white-space:nowrap;color:var(--muted);font-family:var(--f-mono);font-size:.8rem}
.si-tbl td small{color:var(--muted)}
.si-tbl td .how{display:block;font-size:.72rem}
.si-tbl select{padding:4px 6px;min-width:150px}
.si-tbl tr.skip td{opacity:.6}
@media (max-width:640px){.si-opts{grid-template-columns:1fr}}

/* ---------- ระดับตำแหน่ง ---------- */
.pm-lvb{display:inline-flex;align-items:center;justify-content:center;min-width:22px;padding:0 7px;height:20px;border-radius:999px;font-size:.72rem;font-weight:700;font-family:var(--f-display);white-space:nowrap;background:var(--sunk);color:var(--muted);border:1px solid var(--line)}
.lvb1,.lvb2{background:var(--sunk);color:var(--muted)}
.lvb3,.lvb4{background:var(--info-soft);color:var(--info);border-color:transparent}
.lvb5,.lvb6{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.lvb7,.lvb8{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.lvb9{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.pm-top .pm-lvb{margin-right:6px}
.pm-level{border-bottom:1px dashed var(--line);padding-bottom:6px}
.pm-lvseg .pm-lv.lvn{min-width:34px;padding:6px 0;text-align:center;font-family:var(--f-display);font-weight:600}
.pm-lvseg .pm-lv.lvn.on{background:var(--accent);color:var(--accent-ink)}
.lv-cell{text-align:center}
.lv-lock{color:var(--muted)}
.sc-mx-tbl tr.locked .r-name{color:var(--muted)}
.sc-mx-tbl td.c.lk{cursor:not-allowed;opacity:.75}
.sd-row.lk{opacity:.65}
.pm-top{justify-content:flex-start;gap:6px}.pm-top .pm-n{margin-left:auto}

/* ---------- หมวดหมู่ To-do ---------- */
:root{--tc0:#2F7D32;--tc1:#B4531E;--tc2:#2F5DA8;--tc3:#8A3FA0;--tc4:#0E7C86;--tc5:#8A6D00;--tc6:#B03A64;--tcx:#6B6757}
@media (prefers-color-scheme:dark){:root{--tc0:#8BC98E;--tc1:#F0A070;--tc2:#93B4F0;--tc3:#D19BE0;--tc4:#6CCBD3;--tc5:#E2C860;--tc6:#EE93B3;--tcx:#A39E89}}
.tc0{--c:var(--tc0)}.tc1{--c:var(--tc1)}.tc2{--c:var(--tc2)}.tc3{--c:var(--tc3)}.tc4{--c:var(--tc4)}.tc5{--c:var(--tc5)}.tc6{--c:var(--tc6)}.tcx{--c:var(--tcx)}.tcall{--c:var(--accent)}
.tdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.tcat-pick,.tcat-filter{display:flex;flex-wrap:wrap;gap:6px}
.tcat-filter{margin:-4px 0 12px}
.tcat{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:5px 12px 5px 10px;font-size:.85rem;background:var(--sunk);color:var(--ink);border:1px solid var(--line);white-space:nowrap}
.tcat b{font-family:var(--f-mono);font-weight:500;font-size:.76rem;color:var(--muted)}
.tcat[aria-checked="true"],.tcat[aria-pressed="true"]{background:var(--surface);border-color:var(--c);box-shadow:inset 0 0 0 1px var(--c);font-weight:600}
.tcat[aria-checked="true"]::after{content:"✓";color:var(--c);font-size:.78rem}
.ttag{display:inline-flex;align-items:center;gap:5px;color:var(--c);font-weight:600}
.ttag .tdot{width:7px;height:7px}
.tcat-item input{border-left:4px solid var(--c)}
.tcat-sum{display:grid;gap:10px}
.tsum{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:.88rem}
.tsum-n{display:inline-flex;align-items:center;gap:7px;min-width:0;overflow-wrap:anywhere}
.tsum-n small{color:var(--muted);font-size:.75rem;white-space:nowrap}
.tsum-track{height:8px;background:var(--sunk);border-radius:99px;overflow:hidden}
.tsum-fill{height:100%;background:var(--c);border-radius:99px}
.tsum-v{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:500;min-width:6rem;text-align:right}
@media (max-width:560px){.tsum{grid-template-columns:minmax(0,1fr) auto}.tsum-track{grid-column:1/-1;grid-row:2}}

/* ---------- แถบระบบทดสอบ ---------- */
.env-test{position:sticky;top:0;z-index:50;background:var(--warn-soft);color:var(--warn);border-bottom:1px solid var(--warn);
  padding:6px max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px));font-size:.85rem;font-weight:600;text-align:center}

/* ---------- ยืนยันรับของ (สรุปคลัง / สาขาวันนี้) ---------- */
button.pill.st-recv{border:none;cursor:pointer;font:inherit;font-size:.78rem;font-weight:600;padding:2px 10px}
button.pill.st-recv:hover{filter:brightness(.95)}
.st-recv-sub{display:block;font-size:.72rem;color:var(--muted);margin-top:2px;white-space:nowrap}
.ri-form{display:grid;gap:12px}
.ri-tl{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.88rem}
.ri-tl li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:8px}
.ri-tl time{font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}
#ri-rows tr.diff td{background:var(--warn-soft)}
#ct-state .mini{vertical-align:middle}

/* ---------- สถานะวันนี้ทุกสาขา: การ์ดบนจอแคบ / ตารางบนจอกว้าง ---------- */
.bsb{container-type:inline-size;display:grid;gap:10px}
.bsb-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bsb-sum button{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:8px 6px;display:grid;text-align:center;min-width:0}
.bsb-sum b{font-family:var(--f-mono);font-size:1.2rem;font-variant-numeric:tabular-nums;line-height:1.2}
.bsb-sum span{font-size:.72rem;color:var(--muted);line-height:1.25}
.bsb-sum .warn b{color:var(--warn)}.bsb-sum .danger b{color:var(--danger)}.bsb-sum .info b{color:var(--info)}
.bsb-sum button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.bsb-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.bsb-info{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.bsb-info .linkbtn{font-size:.8rem;color:var(--accent);padding:0}
.bsb-seg{display:inline-flex;background:var(--sunk);border:1px solid var(--line);border-radius:999px;padding:2px}
.bsb-seg button{border:none;background:none;border-radius:999px;padding:3px 11px;font-size:.8rem;color:var(--muted)}
.bsb-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.bsb-cards{display:grid;gap:10px}
.bsb-card{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--line);border-radius:14px;padding:11px 13px;display:grid;gap:9px}
.bsb-card.need{border-left-color:var(--danger)}.bsb-card.wait{border-left-color:var(--warn)}.bsb-card.done{border-left-color:var(--accent)}
.bsb-card-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.bsb-name{font-family:var(--f-display);font-weight:500;font-size:1rem;min-width:0;overflow-wrap:anywhere;text-align:left;color:var(--ink)}
.bsb-card-h .linkbtn.bsb-name{color:var(--ink);text-decoration:none;padding:0}
.bsb-lv{font-size:.72rem;font-weight:600;white-space:nowrap;padding:2px 9px;border-radius:999px}
.bsb-card.need .bsb-lv{background:var(--danger-soft);color:var(--danger)}.bsb-card.wait .bsb-lv{background:var(--warn-soft);color:var(--warn)}.bsb-card.done .bsb-lv{background:var(--accent-soft);color:var(--accent)}
.bsb-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.bsb-step{background:var(--sunk);border:1px solid transparent;border-radius:10px;padding:6px 8px;display:grid;gap:1px;min-width:0;text-align:left;font:inherit;color:var(--ink)}
button.bsb-step{cursor:pointer;border-color:var(--line)}
.bsb-step small{font-size:.66rem;color:var(--muted)}
.bsb-step span{font-size:.8rem;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.bsb-step i{font-style:normal;font-size:.68rem;color:var(--muted);overflow-wrap:anywhere}
.bsb-step.ok span{color:var(--accent)}.bsb-step.warn span{color:var(--warn)}.bsb-step.danger span{color:var(--danger)}.bsb-step.info span{color:var(--info)}.bsb-step.off span{color:var(--muted);font-weight:500}
.bsb-step.danger{background:var(--danger-soft)}.bsb-step.warn{background:var(--warn-soft)}
.bsb-tbl{display:none}
@container (min-width:640px){.bsb-cards{display:none}.bsb-tbl{display:block}}
@media (max-width:400px){.bsb-sum span{font-size:.66rem}.bsb-steps{gap:4px}.bsb-step{padding:5px 6px}}
.bv-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:min(55vh,420px);overflow:auto}
.bv-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--sunk)}
.bv-list li.off{opacity:.6}
.bv-list b{font-weight:500;min-width:0;overflow-wrap:anywhere}
.bv-sw{position:relative;width:44px;height:26px;flex:none;border-radius:999px;border:1px solid var(--line);background:var(--line);padding:0}
.bv-sw::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--surface);transition:left .15s}
.bv-sw[aria-checked="true"]{background:var(--accent);border-color:var(--accent)}
.bv-sw[aria-checked="true"]::after{left:20px}

/* ---------- รายจ่ายที่มาจาก To-do: หมวดของงาน ---------- */
.ex-todo-link{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;background:var(--sunk);border:1px dashed var(--line);border-radius:10px;padding:9px 12px;font-size:.88rem}
.ex-todo-link small{color:var(--muted);font-size:.75rem}
.ex-tcf{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 10px}
.ex-tcf .lbl{font-size:.78rem;color:var(--muted);margin-right:2px}
.ex-tbl .ttag{font-size:.75rem;margin-top:2px}

/* ---------- ตารางงานรายวัน: ยอดรวมคน ---------- */
div.sc-sum{background:var(--sunk);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:8px;margin-bottom:8px}
.sc-sum-top{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
.sc-big{display:flex;align-items:baseline;gap:6px}
.sc-big b{font-family:var(--f-mono);font-size:1.45rem;font-variant-numeric:tabular-nums;line-height:1.1}
.sc-big span{font-size:.8rem;color:var(--muted)}
.sc-big.muted b{color:var(--muted)}
.sc-seg{margin-left:auto;display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:2px}
.sc-seg button{border:none;background:none;border-radius:999px;padding:3px 11px;font-size:.78rem;color:var(--muted)}
.sc-seg button[aria-pressed="true"]{background:var(--sunk);color:var(--ink);font-weight:600}
.sc-brs{display:flex;flex-wrap:wrap;gap:6px}
.sc-br{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:3px 4px 3px 12px;font-size:.84rem;font-weight:500;border:1px solid transparent}
.sc-br b{font-family:var(--f-mono);background:var(--surface);color:var(--ink);border-radius:999px;padding:0 9px;font-size:.8rem}
.sc-br[aria-pressed="true"]{border-color:currentColor;box-shadow:inset 0 0 0 1px currentColor}
.sc-groups li.sc-grp{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;border-top:none;margin-top:6px;font-family:var(--f-display);font-size:.9rem}
.sc-groups li.sc-grp small{font-family:var(--f-body);font-size:.76rem;opacity:.85}
.sc-gcnt{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:.8rem;font-weight:600;background:var(--sunk);border-radius:999px;padding:1px 10px;white-space:nowrap}
@media (max-width:560px){.sc-groups li:not(.sc-grp){grid-template-columns:minmax(0,1fr) auto}.sc-groups li:not(.sc-grp) .sc-gppl{grid-column:1/-1;grid-row:2}.sc-person small{display:none}.sc-seg{margin-left:0}}

/* ---------- ตารางงาน: ช่องที่ลาแล้วแต่ยังมีกะ / ใบลารออนุมัติ ---------- */
/* ช่องในตารางรายคน = ป้ายมุมมนสีตามรหัส มีช่องไฟรอบ ๆ (แบบหน้าตัวอย่าง) */
.sc-mx-tbl td.c{height:48px;min-width:46px;padding:0;background:var(--surface);vertical-align:middle}
.sc-mx-tbl td.c.we{background:var(--sunk)}
.sc-mx-tbl td.c.td{background:color-mix(in srgb,var(--sc-orange) 12%,var(--surface));box-shadow:none}
.sc-mx-tbl .h-day.td{background:color-mix(in srgb,var(--sc-orange) 22%,var(--sunk))}
.sc-mx-tbl td.c.lv,.sc-mx-tbl td.c.clash{box-shadow:none;background-image:none}
.sc-mx-tbl td.c.clash::after{display:none}
.sc-mx-tbl td.c .ch{position:absolute;inset:3px;border-radius:7px;display:grid;place-items:center;font-family:var(--f-mono);font-weight:700;font-size:.8rem;line-height:1;overflow:hidden;pointer-events:none}
.sc-mx-tbl td.c .ch.lv,.lg-sw.lg-lv{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.4) 0 3px,transparent 3px 7px)}
.sc-mx-tbl td.c .ch.cover,.lg-sw.lg-cover{grid-template-rows:1fr auto;place-items:stretch;outline:2.5px solid #E0A21B;outline-offset:-1px}
.ch.cover .cx-top,.lg-cover .cx-top{display:grid;place-items:center}
.ch.cover .cv-bar,.lg-cover .cv-bar{display:block;background:#F2B544;color:#3A2600;font-family:var(--f-body);font-size:.56rem;font-weight:700;line-height:14px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
/* ลาแล้วแต่ยังมีกะ: บนเป็นกะ ล่างเป็นแถบแดงบอกว่าลาอะไร + กรอบแดงกะพริบเบา ๆ */
.sc-mx-tbl td.c .ch.clash,.lg-sw.lg-clash{grid-template-rows:1fr auto;place-items:stretch;outline:2.5px solid var(--danger);outline-offset:-1px}
.ch.clash .cx-top,.lg-clash .cx-top{display:grid;place-items:center}
.ch.clash .cx-bar,.lg-clash .cx-bar{display:block;background:var(--danger);color:#fff;font-family:var(--f-body);font-size:.56rem;font-weight:700;line-height:14px;text-align:center;white-space:nowrap;overflow:hidden}
@media (prefers-reduced-motion:no-preference){.sc-mx-tbl td.c .ch.clash{animation:cxPulse 1.6s ease-in-out infinite}@keyframes cxPulse{50%{outline-color:transparent}}}
.sc-mx-tbl td.c .pend,.pend.static{position:absolute;right:3px;bottom:2px;z-index:1;font-family:var(--f-body);font-size:.52rem;font-weight:700;background:var(--warn-soft);color:var(--warn);border:1px dashed var(--warn);border-radius:4px;padding:0 3px;line-height:1.35;pointer-events:none;white-space:nowrap}
.pend.static{position:static;font-size:.62rem;padding:0 4px}
.sc-mx-tbl.edit td.c:hover .ch{box-shadow:0 0 0 2px var(--ink)}
.sc-mx-tbl.edit td.c:hover{outline:none}
.sc-mx-tbl td.c.picked{outline:none}.sc-mx-tbl td.c.picked .ch{box-shadow:0 0 0 3px var(--ink)}
.sc-mx-tbl td.c.picked:not(:has(.ch)){outline:3px solid var(--ink);outline-offset:-3px}
@media (max-width:640px){.sc-mx-tbl td.c{height:42px;min-width:40px}.sc-mx-tbl td.c .ch{inset:2px;border-radius:6px;font-size:.74rem}}
.sc-clash{background:var(--danger-soft);border:1.5px solid var(--danger);border-radius:12px;padding:10px 12px;display:grid;gap:6px;margin-bottom:10px}
.sc-clash-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.sc-clash-h b{color:var(--danger)}
.sc-clash-all{background:var(--danger);border-color:var(--danger);color:#fff;font-weight:600}
.sc-clash .hint{margin:0}
.sc-clash ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.sc-clash li{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border-radius:9px;padding:6px 10px;font-size:.86rem}
.sc-clash li.more{color:var(--muted);background:none;padding:2px 4px}
.sc-clash .btn-primary.sm{padding:4px 10px;font-size:.8rem}
.sc-legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:.76rem;color:var(--muted);margin:0 0 8px}
.sc-legend .lg{display:inline-flex;align-items:center;gap:5px}
.lg-sw{display:inline-grid;place-items:center;min-width:30px;height:24px;border-radius:6px;font-family:var(--f-mono);font-weight:700;font-size:.62rem;padding:0 3px}
.lg-sw.lg-clash,.lg-sw.lg-cover{overflow:hidden;padding:0;height:28px}
.cx-form{display:grid;gap:12px}
.cx-body{display:grid;gap:6px}
.cx-row{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:6px;font-size:.9rem}
.cx-row span:first-child{color:var(--muted)}
.cx-warn{background:var(--danger-soft);color:var(--danger);border-radius:10px;padding:9px 12px;font-size:.86rem;font-weight:600}
.cx-acts{display:grid;gap:8px}

/* ---------- กระดิ่งงานค้าง (มุมขวาบน) + แถบสรุปหน้าแรก ---------- */
.topbar{gap:10px;align-items:center}
.pd-box{position:relative;margin-left:auto}
.topbar .menu-btn-d + .pd-box{margin-left:auto}
.pd-bell{position:relative;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;padding:0}
.pd-bell .ico{width:22px;height:22px}
.pd-bell:hover{border-color:var(--accent)}
.pd-bell[aria-expanded="true"]{background:var(--accent-soft);border-color:var(--accent)}
.pd-cnt{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:999px;background:var(--warn);color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center;padding:0 5px;border:2px solid var(--bg);line-height:1}
.pd-bell.hot .pd-cnt{background:var(--danger)}
.pd-cnt[hidden]{display:none}
.pd-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(410px,calc(100vw - 24px));max-height:min(620px,calc(100dvh - 90px));overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.18);text-align:left}
.pd-panel[hidden]{display:none}
.pd-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:14px 16px 8px;position:sticky;top:0;background:var(--surface);z-index:1}
.pd-h h2{margin:0;font-size:1.05rem}
.pd-h small{display:block;color:var(--muted);font-size:.8rem}
.pd-x{border:none;background:none;font-size:1.1rem;color:var(--muted);padding:2px 6px;border-radius:8px}
.pd-x:hover{background:var(--sunk)}
.pd-tabs{display:flex;gap:6px;padding:0 16px 10px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.pd-tabs button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:2px 12px;font-size:.8rem}
.pd-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.pd-sec{padding:8px 10px 4px}
.pd-sec-h{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted);font-weight:600;padding:4px 6px}
.pd-sec-h i{width:8px;height:8px;border-radius:50%;display:inline-block}
.pd-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 8px;border-radius:12px;border:none;background:none;width:100%;text-align:left;color:var(--ink)}
.pd-row:hover{background:var(--sunk)}
.pd-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:1.05rem}
.pd-t{font-weight:600;font-size:.9rem;line-height:1.3}
.pd-d{font-size:.78rem;color:var(--muted);line-height:1.35;margin-top:1px;overflow-wrap:anywhere}
.pd-d b{color:var(--ink);font-weight:500}
.pd-right{display:grid;justify-items:end;gap:4px}
.pd-num{font-family:var(--f-display);font-size:1.05rem}
.pd-age{font-size:.7rem;font-weight:700;border-radius:6px;padding:1px 6px;white-space:nowrap}
.pd-age.late{background:var(--danger-soft);color:var(--danger)}
.pd-age.today{background:var(--warn-soft);color:var(--warn)}
.pd-age.ok{background:var(--sunk);color:var(--muted)}
.pd-f{padding:10px 16px 14px;font-size:.76rem;color:var(--muted);border-top:1px solid var(--line)}
.pd-empty{padding:28px 16px;text-align:center;color:var(--muted)}
.pd-ok{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:1.4rem;margin-bottom:6px}
.pd-strip{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:10px;margin-bottom:14px}
.pd-strip[hidden]{display:none}
.pd-strip-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pd-strip-h h2{margin:0;font-size:1rem}
.pd-all{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:9px;padding:4px 12px;font-size:.84rem}
.pd-chips{display:flex;flex-wrap:wrap;gap:8px}
.pd-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--sunk);color:var(--ink);border-radius:12px;padding:7px 12px;font-size:.86rem;text-align:left}
.pd-chip b{font-family:var(--f-display);font-weight:600;font-size:1rem}
.pd-chip.late{background:var(--danger-soft);border-color:transparent;color:var(--danger)}
.pd-chip.today{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.pd-chip.mine{background:var(--info-soft);border-color:transparent;color:var(--info)}
@media (prefers-color-scheme:dark){.pd-ic{background:var(--sunk)!important}}
@media (max-width:860px){
  .pd-bell{width:38px;height:38px;border-radius:11px}
  .me-chip{max-width:calc(100vw - 200px)}
  .pd-panel{position:fixed;left:8px;right:8px;width:auto;top:calc(env(safe-area-inset-top,0px) + 58px)}
}

/* ---------- ตารางงาน: ซ่อนพนักงานจากมุมมองพนักงาน ---------- */
.sc-vis-tools{display:inline-flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.sc-vis-tools[hidden]{display:none}
.sc-vis-tools .mini[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.sc-hidbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:var(--sunk);border:1px dashed var(--line);border-radius:12px;padding:7px 12px;font-size:.84rem;color:var(--muted);margin-bottom:8px}
.sc-hidbar[hidden]{display:none}
.sc-hidbar b{color:var(--ink)}
.sc-hid-warn{color:var(--warn)}
.sc-mx-tbl .r-name .rn-w{display:flex;align-items:center;gap:4px;min-width:0}
.sc-mx-tbl .r-name .rn-n{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sc-mx-tbl .r-name .rn-hid{flex:none;font-size:.8rem}
.sc-mx-tbl .rn-eye{flex:none;margin-left:auto;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:7px;padding:0 6px;font-size:.7rem;font-weight:500;opacity:0}
.sc-mx-tbl tr:hover .rn-eye,.sc-mx-tbl .rn-eye:focus-visible{opacity:1}
@media (hover:none){.sc-mx-tbl .rn-eye{opacity:.85}}
.sc-mx-tbl tr.hid .r-name,.sc-mx-tbl tr.hid .r-code{color:var(--muted);font-style:italic}
.sc-mx-tbl tr.hid td.c .ch{opacity:.5}
#dlg-vis{width:min(480px,calc(100vw - 24px))}
.vis-list{display:grid;gap:8px;max-height:60vh;overflow:auto}
.vis-grp{display:grid;gap:2px;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.vis-grp-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.86rem}
.vis-grp-h b{font-family:var(--f-display);font-weight:500}
.vis-grp-h .mini{white-space:nowrap;flex:none}
.cx-form .vis-row,.vis-row{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:5px 4px;border-radius:8px;font-size:.88rem;cursor:pointer;text-align:left}
.vis-row:hover{background:var(--sunk)}
.vis-row small{color:var(--muted);font-size:.74rem;white-space:nowrap}
.vis-sw{position:relative;width:38px;height:22px;flex:none;display:inline-block}
.vis-sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%!important;height:100%}
.vis-sw span{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:background .15s;pointer-events:none}
.vis-sw span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.vis-sw input:checked+span{background:var(--accent)}
.vis-sw input:checked+span::after{transform:translateX(16px)}
.vis-sw input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- ตารางงาน: จัดลำดับพนักงาน ---------- */
#dlg-order{width:min(480px,calc(100vw - 24px))}
.ord-sorts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ord-sorts .lbl{font-size:.8rem;color:var(--muted)}
.ord-sortb{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:2px 10px;font-size:.78rem;white-space:nowrap}
.ord-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:55vh;overflow:auto}
.ord-row{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px 8px;font-size:.88rem;user-select:none;-webkit-user-select:none}
.ord-row.moved{background:var(--accent-soft)}
.ord-row.drag{opacity:.4}
.ord-row.over{border-color:var(--accent);box-shadow:0 -3px 0 var(--accent)}
.ord-num{font-family:var(--f-mono);font-size:.74rem;color:var(--muted);min-width:22px;text-align:right}
.ord-hdl{cursor:grab;color:var(--muted);font-size:1.1rem;line-height:1;padding:2px 4px;touch-action:none;border:none;background:none}
.ord-nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ord-nm small{display:block;font-size:.72rem;color:var(--muted)}
.ord-ud{display:flex;gap:2px}
.ord-ud button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:6px;width:30px;height:28px;font-size:.82rem;padding:0}
.ord-ud button:disabled{opacity:.3}

/* ---------- นำเข้าตารางงาน: รหัสกะใหม่ ---------- */
.si-new{border:1.5px solid var(--info);background:var(--info-soft);border-radius:12px;padding:12px 14px;display:grid;gap:8px;margin:8px 0}
.si-new-h b{color:var(--info);font-family:var(--f-display);font-weight:500}
.si-new .hint{margin:0}
.si-new-row{display:grid;grid-template-columns:auto 60px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:end;background:var(--surface);border-radius:10px;padding:8px 10px}
.si-new-row.off{opacity:.55}
.si-new-ck{align-self:center;display:flex}
.si-new-ck input{width:18px;height:18px}
.si-new-code{font-family:var(--f-mono);font-weight:700;border-radius:7px;display:grid;place-items:center;height:36px;font-size:.88rem;overflow:hidden}
.si-new-f{display:grid;gap:3px;min-width:0}
.si-new-f span{font-size:.72rem;color:var(--muted)}
.si-new-f input{width:100%;min-width:0}
.si-new-ex{grid-column:2/-1;font-size:.76rem;color:var(--muted)}
@media (max-width:600px){.si-new-row{grid-template-columns:auto 56px minmax(0,1fr)}.si-new-row .si-new-f:first-of-type{grid-column:2/-1}.si-new-ex{grid-column:1/-1}}
.sc-trash-acts{display:inline-flex;gap:6px}
.sc-trash-del{border:1px solid var(--danger);background:var(--surface);color:var(--danger);border-radius:8px;padding:2px 10px;font-size:.84rem}
.sc-trash-del:hover{background:var(--danger-soft)}

/* ---------- ตารางงาน: กลุ่มพนักงาน ---------- */
#dlg-order{width:min(600px,calc(100vw - 24px))}
.ord-list{max-height:58vh}
.ord-gsec{list-style:none;border:1px solid var(--line);border-radius:12px;padding:8px;background:var(--sunk);display:grid;gap:6px;margin-bottom:8px}
.ord-gh{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:2px 4px;border-radius:8px;flex-wrap:wrap}
.ord-gh.over{outline:2px solid var(--accent)}
.ord-gh b{font-family:var(--f-display);font-weight:500;font-size:.95rem}
.ord-gc{font-family:var(--f-body);font-weight:400;font-size:.78rem;color:var(--muted)}
.ord-ga{display:inline-flex;gap:4px;align-items:center}
.ord-gbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:7px;padding:1px 8px;font-size:.74rem;white-space:nowrap}
.ord-gul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ord-empty{border:1.5px dashed var(--line);border-radius:10px;padding:10px;font-size:.8rem;color:var(--muted);text-align:center}
.ord-empty.over{border-color:var(--accent);color:var(--accent)}
.ord-row{grid-template-columns:auto auto minmax(0,1fr) auto auto}
.ord-mv{font-size:.76rem;border:1px solid var(--line);border-radius:7px;padding:3px 4px;background:var(--surface);color:var(--ink);max-width:130px;width:auto}
@media (max-width:520px){.ord-mv{max-width:86px}}
.sc-mx-tbl tr.g-row th,.sc-mx-tbl tr.g-row td{background:var(--sunk);border-top:2px solid var(--line)}
.sc-mx-tbl tr.g-row th.g-name{position:sticky;left:0;z-index:3;padding:0;text-align:left;box-shadow:2px 0 0 var(--line)}
.sc-mx-tbl .g-tog{display:flex;align-items:center;gap:6px;width:100%;border:none;background:none;padding:6px 10px;font-family:var(--f-display);font-weight:500;font-size:.88rem;text-align:left;color:var(--ink);white-space:nowrap}
.sc-mx-tbl .g-tog small{font-family:var(--f-body);font-weight:400;font-size:.74rem;color:var(--muted)}
.sc-mx-tbl .g-car{color:var(--muted);width:12px}
.sc-mx-tbl td.g-cnt{height:32px;font-family:var(--f-mono);font-size:.76rem;font-weight:600;color:var(--muted)}
#dlg-order,#dlg-vis,#dlg-sclear{max-width:calc(100vw - 24px)}
/* จัดกลุ่ม: ค้นหาชื่อเพื่อเพิ่มเข้ากลุ่ม */
.ord-add{display:grid;gap:4px}
.ord-add input{width:100%;font-size:.86rem;padding:7px 10px}
.ord-res{display:grid;gap:3px}
.ord-res:empty{display:none}
.ord-hit{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;border:1px solid var(--accent);background:var(--surface);color:var(--ink);border-radius:9px;padding:5px 10px;text-align:left;font-size:.86rem}
.ord-hit small{grid-column:1;font-size:.72rem;color:var(--muted)}
.ord-hit b{grid-column:2;grid-row:1/3;color:var(--accent);font-size:.8rem;font-weight:600;white-space:nowrap}
.ord-hit:hover{background:var(--accent-soft)}
.ord-none{font-size:.8rem;color:var(--muted);padding:4px 6px}

/* ---------- ลงลา: วันลาคงเหลือ + ปฏิทินที่ว่างลาของกลุ่ม ---------- */
.lv-bal{display:flex!important;flex-wrap:wrap;gap:8px;align-items:center}
.lv-bal[hidden]{display:none!important}
.lv-bchip{border-radius:10px;padding:5px 12px;font-size:.86rem;display:inline-flex;gap:4px;align-items:baseline}
.lv-bchip b{font-family:var(--f-display);font-size:1.05rem}
.lv-bchip.vac{background:repeating-linear-gradient(135deg,#E2F48A 0 7px,#F7FCE0 7px 13px);color:#3F5205;box-shadow:inset 0 0 0 2px #7FA10F}.lv-bchip.ph{background:#FFF1A8;color:#5C4A00;box-shadow:inset 0 0 0 2px #C9A800}
.lv-bchip.zero{outline:2px solid var(--danger);outline-offset:-2px}
@media (prefers-color-scheme:dark){.lv-bchip.vac{background:repeating-linear-gradient(135deg,#2C3510 0 7px,#1E240A 7px 13px);color:#D3EE6A}.lv-bchip.ph{background:#5A4B10;color:#FFE88A}}
.lv-bwarn{font-size:.82rem;color:var(--danger);font-weight:600}
.lv-calw{display:grid;gap:6px}
.lv-calh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lv-calh b{font-family:var(--f-display);font-weight:500;min-width:120px;text-align:center}
.lv-calh .hint{margin:0}
.lv-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.lv-dw{font-size:.72rem;color:var(--muted);text-align:center}
.lv-day{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:9px;padding:4px 2px;display:grid;gap:1px;justify-items:center;min-height:46px;font-size:.78rem}
.lv-day b{font-family:var(--f-display);font-size:.95rem;font-weight:500}
.lv-day small{font-size:.62rem;color:var(--accent);line-height:1.2}
.lv-day.full{background:var(--danger-soft);border-color:transparent;color:var(--danger);cursor:not-allowed}
.lv-day.full small{color:var(--danger)}
.lv-day.past{opacity:.35;cursor:default}
.lv-day.today{box-shadow:inset 0 0 0 1.5px var(--muted)}
.lv-day.sel{outline:2.5px solid var(--accent);outline-offset:-1px;background:var(--accent-soft)}
.note.lv-block{color:var(--danger);font-weight:600}
.ord-cap{display:inline-flex!important;align-items:center;gap:4px;font-size:.74rem;color:var(--muted);white-space:nowrap}
.ord-cap input{width:auto!important;margin:0}
.ord-pool{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--ink);background:var(--accent-soft);border-radius:999px;padding:3px 10px;white-space:nowrap;flex-wrap:wrap}
.ord-pool input{width:52px!important;padding:2px 4px;font-size:.85rem;text-align:center}
/* โยกกะคนมาทำแทน (หัวหน้าอนุมัติใบลา P/H / VAC) */
.cv-box{margin-top:8px;border:1px solid var(--line,#e3e3e3);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:6px;background:var(--card,#fff)}
.cv-h{display:flex;flex-direction:column;gap:2px}.cv-h .hint{font-size:12px;opacity:.7}
.cv-row{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.cv-d{display:flex;gap:6px;align-items:center;min-width:92px}
.cv-cands{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1}
.cv-code{font-size:11px;font-weight:700;padding:1px 6px;border-radius:6px;background:#eee;color:#333;margin-left:4px}
.cv-cand{display:inline-flex;align-items:center;gap:2px;padding:4px 8px;border-radius:999px;border:1px solid var(--line,#ccc);background:transparent;cursor:pointer;font-size:13px}
.cv-cand small{opacity:.6;margin-left:4px;font-size:11px}
.cv-cand.same{border-color:#2e9e5b}
.cv-cand.off{border-style:dashed}
.cv-cand[aria-pressed=true]{background:#2e9e5b;color:#fff;border-color:#2e9e5b}
.cv-cand[aria-pressed=true] small{color:#fff;opacity:.85}
.cv-more{padding:4px 8px;border-radius:999px;border:1px dashed var(--line,#aaa);background:transparent;cursor:pointer;font-size:13px}
.cv-ok{color:#2e9e5b;font-weight:600;font-size:13px}
.cv-extra{display:flex;flex-direction:column;gap:6px;padding:6px 8px;border-radius:8px;background:rgba(0,0,0,.03)}
.cv-xg{display:flex;flex-direction:column;gap:4px}.cv-xh{font-size:12px;font-weight:700;opacity:.75}
.cv-warn{color:#b9640b;font-size:12.5px}
.cv-chain{display:flex;flex-direction:column;gap:4px;padding:6px 8px;border-radius:8px;border:1px solid #f0b46b;background:rgba(240,180,107,.08)}
/* ===== สำรองข้อมูล ===== */
.panel.bk{display:grid;gap:14px}
.bk .ph{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.bk .ph h2{margin:0}
.bk-sub{font-family:var(--f-display);font-weight:500}
.bk-nag{display:flex;gap:8px;align-items:center;background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:10px 12px;font-size:.9rem}
.bk-nag.ok{background:var(--accent-soft);color:var(--accent)}
.bk-nag[hidden]{display:none}
.bk-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.bk-opt{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:8px;background:var(--sunk);align-content:start}
.bk-opt b{font-family:var(--f-display);font-weight:500}
.bk-size{font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}
.bk-dl{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:10px;text-decoration:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600}
.bk-dl.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.bk-dl.busy{opacity:.6;pointer-events:none}
.bk-warn{margin:0;border-left:3px solid var(--danger);background:var(--danger-soft);border-radius:8px;padding:8px 12px;font-size:.84rem}
.bk-tblw{overflow-x:auto}
.bk-tbl{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:6px}
.bk-tbl th,.bk-tbl td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line)}
.bk-tbl th{color:var(--muted);font-weight:500;font-size:.8rem}
.bk-m{font-family:var(--f-mono);font-size:.8rem;white-space:nowrap}
.bk-tag{font-size:.75rem;border-radius:6px;padding:1px 6px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.bk-tag.z{background:var(--warn-soft);color:var(--warn)}
.bk-tag.x{background:var(--danger-soft);color:var(--danger)}
.bk-how summary{cursor:pointer;color:var(--muted);font-size:.88rem}
.bk-how ol{margin:8px 0 0;padding-left:20px;font-size:.88rem;display:grid;gap:4px}
.bk-pcs{display:grid;gap:10px}
.bk-pc{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--sunk);display:grid;gap:8px}
.bk-pc.off{opacity:.65}
.bk-pc-top{display:flex;gap:8px;align-items:center}.bk-pc-top b{font-family:var(--f-display);font-weight:500}
.bk-pc-grid{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.88rem}
.bk-off{justify-self:start;color:var(--danger)}
.bk-new{display:flex;flex-wrap:wrap;gap:8px}
.bk-new input{flex:1 1 180px;min-width:0}
.bk-key{border:1px dashed var(--accent);border-radius:12px;padding:12px 14px;display:grid;gap:8px;background:var(--accent-soft)}
.bk-key[hidden]{display:none}
.bk-key code{font-family:var(--f-mono);font-size:.88rem;word-break:break-all;background:var(--surface);padding:8px 10px;border-radius:8px;user-select:all}
.bk-key button{justify-self:start}
@media (max-width:520px){.bk-hs{display:none}}
/* ===== ล้างข้อมูลรายหัวข้อ ===== */
.rs-off{display:grid;gap:12px;border-color:var(--line)}
.rs-off p{margin:4px 0 0}
.rs-on-f{display:flex;flex-wrap:wrap;gap:8px}.rs-on-f input{flex:1 1 200px;min-width:0}
.rs-alert{border-left:3px solid var(--danger);background:var(--danger-soft);border-radius:8px;padding:10px 14px;font-size:.9rem;display:grid;gap:4px}
.rs-close{justify-self:start;margin-top:4px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:6px 12px;font-size:.86rem}
.rs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.rs-mod{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:grid;gap:10px;align-content:start;min-width:0}
.rs-mod.empty{opacity:.6}
.rs-mt{display:flex;align-items:center;gap:8px}
.rs-mt h3{font-family:var(--f-display);font-weight:500;font-size:1.05rem;margin:0}
.rs-cnt{margin-left:auto;font-family:var(--f-mono);font-size:.8rem;background:var(--sunk);border:1px solid var(--line);border-radius:999px;padding:2px 9px;white-space:nowrap}
.rs-lst{display:grid;gap:3px;font-size:.84rem}
.rs-lst div{display:flex;gap:6px}
.rs-lst .d::before{content:"🗑";flex:none}
.rs-lst .k::before{content:"✓";color:var(--accent);flex:none;width:1.1em;text-align:center}
.rs-opt{display:flex;gap:8px;align-items:flex-start;font-size:.84rem;background:var(--sunk);border-radius:8px;padding:7px 9px}
.rs-opt input{margin-top:4px;flex:none}
.rs-btn{justify-self:start;border:1px solid var(--danger);color:var(--danger);background:var(--surface);border-radius:10px;padding:8px 14px;font-weight:500}
.rs-btn:hover:not(:disabled){background:var(--danger-soft)}
.rs-btn:disabled{opacity:.5;border-color:var(--line);color:var(--muted);cursor:not-allowed}
.rs-never{margin:0;font-size:.84rem;color:var(--muted);background:var(--sunk);border-radius:10px;padding:10px 12px}
#dlg-rs{max-width:min(480px,calc(100vw - 24px));width:100%}
.rs-dl{display:grid;gap:12px}
.rs-dl h2{font-size:1.2rem;color:var(--danger);margin:0}
.rs-rng{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
.rs-rng label{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.86rem;cursor:pointer;display:flex;gap:6px;align-items:center}
.rs-rng label:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.rs-rng input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.rs-rng input[type=date]{width:auto;flex:0 1 180px}
.rs-rng input[type=date]:disabled{opacity:.4}
#rs-log a{color:var(--accent);font-weight:600}
.rs-sum{background:var(--danger-soft);border-radius:10px;padding:10px 12px;font-size:.88rem;display:grid;gap:4px}
.rs-safe{display:flex;gap:8px;font-size:.86rem;background:var(--accent-soft);color:var(--accent);border-radius:10px;padding:8px 10px}
.rs-typ small{display:block;margin-bottom:6px;font-size:.84rem}
.rs-typ b{font-family:var(--f-mono);background:var(--sunk);padding:1px 6px;border-radius:6px}
.rs-typ input{width:100%}
.rs-acts{display:flex;justify-content:flex-end;gap:8px}
.rs-go{background:var(--danger);border-color:var(--danger);color:#fff;font-weight:600}
.rs-go:disabled{opacity:.45;cursor:not-allowed}
/* ===== การเข้าใช้งาน ===== */
.panel.ac{display:grid;gap:12px}
.ac .ph{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}.ac .ph h2{margin:0}
.ac-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.ac-kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:grid;gap:2px}
.ac-kpi span{font-size:.8rem;color:var(--muted)}
.ac-kpi b{font-family:var(--f-display);font-weight:500;font-size:1.6rem}
.ac-kpi.warn b{color:var(--warn)}.ac-kpi.bad b{color:var(--danger)}
.ac-online{display:flex;flex-wrap:wrap;gap:8px}
.ac-who{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:4px 12px 4px 4px;background:var(--sunk);font-size:.88rem}
.ac-who i{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-style:normal;font-size:.8rem;position:relative}
.ac-who i::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#2E9E5B;border:2px solid var(--sunk)}
.ac-who small{color:var(--muted)}
.ac-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ac-tools[hidden]{display:none}
.ac-tools input[type=search]{flex:1 1 200px;min-width:0;width:auto}
.ac-tools select{width:auto}
.ac-tabs{display:inline-flex;background:var(--sunk);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px;flex-wrap:wrap}
.ac-tabs button{border:none;background:transparent;border-radius:9px;padding:6px 12px;font-size:.9rem}
.ac-tabs button[aria-pressed=true]{background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.08);font-weight:600}
.ac-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--line)}
.ac-dot.on{background:#2E9E5B}.ac-dot.recent{background:#E0A82E}
.ac-sub2{font-size:.76rem;color:var(--muted);margin-left:14px}
#ac-log .ac-sub2,#ac-never .ac-sub2{margin-left:0}
.ac-dev{font-size:.84rem}.ac-dev small{display:block;color:var(--muted);font-size:.76rem}
.ac-tag{font-size:.75rem;border-radius:6px;padding:1px 7px;white-space:nowrap}
.ac-tag.ok{background:var(--accent-soft);color:var(--accent)}
.ac-tag.bad{background:var(--danger-soft);color:var(--danger)}
.ac-tag.out{background:var(--sunk);color:var(--muted);border:1px solid var(--line)}
.ac-kick{color:var(--danger);font-size:.84rem;white-space:nowrap}

/* วันลา P/H + VAC: ตัวหนังสือเข้มขึ้น + กรอบเข้ม ให้เห็นชัดบนมือถือ */
.pill.quota-ph{color:#5C4A00!important;border:1.5px solid #B39400!important}
.pill.quota-vac{border:1.5px solid #6E8C0A!important}
.me-q-ph{color:#5C4A00;border:1.5px solid #B39400}
.me-q-vac{border:1.5px solid #6E8C0A}
.sc-chip.off.quota-ph{color:#5C4A00;box-shadow:inset 0 0 0 1.5px #B39400}
.sc-chip.off.quota-vac{box-shadow:inset 0 0 0 1.5px #6E8C0A}
.sc-mx-tbl .h-bal-ph,.sc-mx-tbl td.bal-ph{color:#5C4A00}
.sc-mx-tbl td.s-PH:not(:empty){background:#FFFBE0;box-shadow:inset 0 0 0 2px #E0C400}
.sc-mx-tbl td.s-VAC:not(:empty){background:repeating-linear-gradient(135deg,#F1FAD0 0 5px,#FFFFFF 5px 9px);box-shadow:inset 0 0 0 2px #A9C92E}
@media (prefers-color-scheme:dark){
  .pill.quota-ph,.me-q-ph,.sc-chip.off.quota-ph,.sc-mx-tbl .h-bal-ph,.sc-mx-tbl td.bal-ph{color:#F2D650!important}
  .pill.quota-ph{border-color:#8A7A18!important}.pill.quota-vac{border-color:#7A9A20!important}
  .lv-bchip.ph{color:#FFE88A;box-shadow:inset 0 0 0 2px #8A7A18}.lv-bchip.vac{box-shadow:inset 0 0 0 2px #7A9A20}
  .sc-mx-tbl td.s-PH:not(:empty){background:#2A250C;box-shadow:inset 0 0 0 2px #8A7A18}
  .sc-mx-tbl td.s-VAC:not(:empty){background:#1E240A;box-shadow:inset 0 0 0 2px #7A9A20}
}

/* ปฏิทินลา: วันที่มีคนลาแล้ว / ลาครบ เห็นชัด + ป้ายชื่อคนลา */
.lv-day.half{background:#FFF4D6;border:2px solid #E0A82E}
.lv-day.half small{color:#8A5A00;font-weight:600}
.lv-day.full{background:#FBE3E1;border:2px solid #D9534A}
.lv-day.full b,.lv-day.full small{color:#B3261E;font-weight:700}
.lv-day.sel.half,.lv-day.sel{outline-offset:1px}
.lv-nm{font-size:.62rem;line-height:1.15;border-radius:5px;padding:1px 5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.lv-nm.ph{background:#FFF200;color:#3A3300;box-shadow:inset 0 0 0 1px #A89800}
.lv-nm.vac{background:repeating-linear-gradient(135deg,#C8E63C 0 4px,#F4FBD6 4px 7px);color:#24300A;box-shadow:inset 0 0 0 1px #6E8C0A}
.lv-cal-info{border-radius:12px;background:var(--sunk);padding:9px 12px;font-size:.86rem;display:grid;gap:5px}
.lv-cal-info[hidden]{display:none}
.lv-cal-info b{font-family:var(--f-display);font-weight:500}
.lv-who{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}.lv-who .lv-nm{font-size:.8rem;padding:2px 8px}
@media (prefers-color-scheme:dark){.lv-day.half{background:#3A2C10;border-color:#B07A1A}.lv-day.half small{color:#F2C46A}.lv-day.full{background:#3D1D1A;border-color:#B04A42}.lv-day.full b,.lv-day.full small{color:#F2A39C}}
@media (max-width:560px){.lv-day .lv-nm{font-size:0;height:6px;width:100%;padding:0;border-radius:3px}}

/* วันลาคงเหลือ: เหลือ 0 = แดงอ่อนกรอบแดง · ใช้เกิน (ติดลบ) = แดงทึบตัวขาว · ยังไม่ตั้งยอด = เทา */
.sc-mx-tbl td.bal.zero{background:#FBE0DD!important;color:#B3261E!important;box-shadow:inset 0 0 0 2px #E5867E}
.sc-mx-tbl td.bal.neg{background:#D63B30!important;color:#fff!important}
.sc-mx-tbl td.bal.unset{background:#F3F2EC!important}
@media (prefers-color-scheme:dark){.sc-mx-tbl td.bal.zero{background:#3D1D1A!important;color:#F2A39C!important;box-shadow:inset 0 0 0 2px #8E3A33}.sc-mx-tbl td.bal.neg{background:#C4372D!important;color:#fff!important}.sc-mx-tbl td.bal.unset{background:#22211B!important}}

/* ===== ใบเตือน / เงินเดือน (hr.js) ===== */
.hr{display:grid;gap:12px}
.hr-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hr-tools input[type=search]{width:200px}.hr-tools select{width:auto}
.hr-sb{justify-content:space-between}
.hr-mon{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.hr-mon b{font-family:var(--f-display);font-weight:500;font-size:1.1rem;min-width:130px;text-align:center}
.hr-grace{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted)}.hr-grace input{width:64px}
.hr-tbl{border-collapse:collapse;width:100%;font-size:.88rem}
.hr-tbl th{font-size:.75rem;color:var(--muted);font-weight:600;text-align:center;padding:6px;border-bottom:1px solid var(--line);white-space:nowrap}
.hr-tbl td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.hr-tbl .l{text-align:left}.hr-tbl .n{font-family:var(--f-mono);white-space:nowrap}
.hr-tbl .bad,.hr-lt .bad{color:var(--danger);font-weight:600}
.hr-tbl tfoot td{font-weight:700;border-top:2px solid var(--line);border-bottom:none}
.hr-tbl.py input{width:92px;text-align:right;font-family:var(--f-mono);padding:6px 8px}
.hr-sub{display:block;font-size:.75rem;color:var(--muted);font-weight:400}
.hr-flag{display:inline-block;margin-left:6px;font-size:.7rem;background:var(--danger-soft);color:var(--danger);border-radius:999px;padding:0 8px;font-weight:600}
.hr-wc{font-size:.78rem;padding:2px 9px;border-radius:999px;white-space:nowrap;border:1px solid var(--line);background:var(--sunk);color:var(--muted)}
.hr-wc.w1{background:var(--warn-soft);color:var(--warn);border-color:transparent;font-weight:600}
.hr-wc.w2,.hr-wc.w3{background:var(--danger-soft);color:var(--danger);border-color:transparent;font-weight:600}
.hr-wc.w3{background:var(--danger);color:#fff}
.hr-q{display:inline-block;font-size:.72rem;border-radius:6px;padding:0 6px;margin:1px;font-weight:600}
.hr-q.ph{background:#FFF6CC;color:#5C4A00}.hr-q.vac{background:repeating-linear-gradient(135deg,#E2F48A 0 6px,#F7FCE0 6px 11px);color:#3F5205}
.hr-link{border:none;background:none;padding:2px 4px;color:var(--accent);text-decoration:underline;font-size:.85rem}
.hr-dz{border-color:var(--danger);color:var(--danger)}
.hr-late{font-size:.8rem;padding:3px 8px;background:var(--danger-soft);color:var(--danger);border-color:transparent;white-space:nowrap}
.hr-lines{display:block;width:100%;min-width:110px;text-align:right;padding:5px 8px;font-family:var(--f-mono);background:var(--sunk)}
.hr-lines .hr-sub{font-family:var(--f-body);max-width:180px;margin-left:auto;white-space:normal}
.hr-lines:disabled{cursor:default;opacity:.85}
.hr-auto{display:block;font-size:.7rem;color:var(--muted)}
.hr-net{font-family:var(--f-mono);font-weight:700;color:var(--accent);white-space:nowrap}.hr-net.bad{color:var(--danger)}
.hr-st{font-size:.75rem;border-radius:999px;padding:2px 10px;font-weight:600}
.hr-st.draft{background:var(--warn-soft);color:var(--warn)}.hr-st.ok{background:var(--accent-soft);color:var(--accent)}
.hr-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.hr-kpi{background:var(--sunk);border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:grid}
.hr-kpi span{font-size:.75rem;color:var(--muted)}.hr-kpi b{font-family:var(--f-mono);font-size:1.05rem}
.hr-warnb{background:var(--danger-soft);color:var(--danger);border-radius:10px;padding:8px 12px;font-weight:600;font-size:.88rem}
.hr-list{display:grid;gap:8px}
.hr-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.hr-row.need{border-color:var(--danger);background:var(--danger-soft)}
dialog.hr-dlg{max-width:min(760px,calc(100vw - 16px));max-height:calc(100dvh - 24px);padding:0}
.hr-dl{display:grid;gap:12px;padding:18px}.hr-dl h2{font-size:1.1rem}
.hr-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;position:sticky;bottom:0;background:var(--surface);padding-top:8px}
.hr-lt,.hr-hist{display:grid;gap:4px;font-size:.88rem}
.hr-lt>div,.hr-hist>div{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:6px 0;border-bottom:1px dotted var(--line)}
.hr-hist>div.off{opacity:.55;text-decoration:line-through}.hr-ha{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.hr-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hr-form label{display:grid;gap:4px;font-size:.85rem}.hr-form .w{grid-column:1/-1}
.hr-form textarea{font:inherit;min-height:120px;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--surface);color:var(--ink);width:100%}
.hr-pick{display:grid;gap:4px;max-height:180px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:8px;font-size:.85rem}
.hr-pick label{display:flex!important;gap:6px;align-items:flex-start}.hr-pick input,.hr-edr input[type=checkbox]{width:auto}
.hr-form1{display:grid;gap:4px;font-size:.85rem}
.hr-ed{display:grid;gap:8px}
.hr-edr{display:grid;grid-template-columns:1fr 120px auto auto;gap:6px;align-items:center}
.hr-edr .am{text-align:right;font-family:var(--f-mono)}
.hr-edr .ss{font-size:.78rem;display:flex;gap:4px;align-items:center;white-space:nowrap}.hr-edr .ss.need{color:var(--danger);font-weight:600}
.hr-edr .rm{padding:4px 10px}
.hr-chip{font-size:.8rem;padding:4px 10px;border-radius:999px}
.hr-doc{border:1px solid var(--line);border-radius:10px;padding:16px;background:#fff;overflow:auto}
@media (max-width:560px){.hr-form{grid-template-columns:1fr}.hr-edr{grid-template-columns:1fr 90px auto}.hr-edr .ss{grid-column:1/-1}.hr-tools input[type=search]{width:100%}}
.hr-tbl.py input:disabled{background:var(--sunk);color:var(--muted);border-style:dashed;cursor:not-allowed}
/* เงินเดือน: บีบคอลัมน์ให้พอดีจอ ไม่ต้องเลื่อน */
.hr-tbl.py{font-size:.84rem}
.hr-tbl.py th{white-space:normal;padding:6px 3px;line-height:1.3}
.hr-tbl.py td{padding:6px 3px}
.hr-tbl.py td.l{min-width:96px}
.hr-tbl.py input{width:76px;padding:5px 6px}
.hr-tbl.py .hr-lines{min-width:0;width:100%;padding:4px 6px}
.hr-tbl.py .hr-lines .hr-sub{max-width:110px}
.hr-tbl.py .hr-late{white-space:pre-line;line-height:1.25;padding:3px 6px;max-width:84px}
.hr-tbl.py .hr-auto{font-size:.66rem}
.hr-tbl.py .hr-net{font-size:.84rem}
.hr-tbl.py tfoot td{white-space:normal;font-size:.8rem}
.hr-tbl.py .hr-link{padding:2px}
.hr-filt input[type=search]{width:190px}.hr-filt select{width:auto;max-width:220px}
.hr-tbl th[data-k]{cursor:pointer;user-select:none}.hr-tbl th[data-k]:hover{color:var(--ink)}
.hr-tbl th[aria-sort=ascending]::after{content:" ▲";color:var(--accent)}.hr-tbl th[aria-sort=descending]::after{content:" ▼";color:var(--accent)}
@media (max-width:560px){.hr-filt input[type=search],.hr-filt select{width:100%;max-width:none}}
#cb-other[hidden],#cb-box[hidden],#cb-saved[hidden]{display:none}
#cb-box{gap:10px}.tb-pick.on{border-color:var(--info);color:var(--info);font-weight:600}
.sc-brush-h{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.sc-undo{display:flex;align-items:center;gap:6px}.sc-undo button{font-weight:600}.sc-undo button:disabled{opacity:.45;cursor:default}
.hr-ns{display:flex;align-items:center;justify-content:center;gap:3px;font-size:.68rem;color:var(--muted);margin-top:2px;cursor:pointer;white-space:nowrap}.hr-ns input{width:auto;margin:0}
.hr-nosso{display:inline-block;font-size:.72rem;background:var(--sunk);border:1px dashed var(--line);color:var(--muted);border-radius:8px;padding:6px 8px;line-height:1.2}
.hr-tbl.py .hr-ns input{width:auto;padding:0;margin:0}
/* เช็คอิน: ป้ายสีกะ + ออกแล้ว + วันหยุด */
.att-nm{display:flex;align-items:center;gap:8px;min-width:0}
.att-sc{display:inline-grid;place-items:center;min-width:34px;height:24px;padding:0 6px;border-radius:6px;font:700 .72rem var(--f-mono);flex:none;background:var(--line);color:var(--ink)}
.att-person.out{border-style:dashed;opacity:.8}.att-person.out .att-nm{color:var(--muted)}.att-person.out .att-sc{opacity:.6}
.pill.off{background:var(--sunk);color:var(--muted);border:1px solid var(--line)}
.att-group.off .dot{background:var(--muted)}
/* รายจ่าย: ตารางพอดีจอ (ไม่ต้องเลื่อนซ้ายขวา) · มือถือเป็นการ์ด */
.ex-tbl{table-layout:auto}
.ex-tbl td{white-space:normal}
.ex-tbl td.ex-d,.ex-tbl td.ex-a,.ex-tbl td.acts-t{white-space:nowrap}
.ex-tbl .ex-what{min-width:0}
.ex-tbl td.ex-c,.ex-tbl td.ex-l,.ex-tbl td.ex-m{font-size:.82rem;max-width:130px}
.ex-tbl td.acts-t .mini{padding:3px 8px}
@media (max-width:760px){
  .ex-tbl thead{display:none}
  .ex-tbl,.ex-tbl tbody{display:block}
  .ex-tbl tr{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:12px 2px;border-bottom:1px solid var(--line)}
  .ex-tbl td{display:block;padding:0;border:0;max-width:none!important}
  .ex-tbl td.ex-d{grid-column:1;grid-row:1;font-size:.78rem;color:var(--muted)}
  .ex-tbl td.ex-a{grid-column:2;grid-row:1;align-self:start;font-size:1.05rem}
  .ex-tbl td.ex-what{grid-column:1/-1;grid-row:2;display:grid;gap:2px}
  .ex-tbl td.ex-c,.ex-tbl td.ex-l,.ex-tbl td.ex-m,.ex-tbl td.ex-p{display:none}
  .ex-tbl .ex-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 6px;font-size:.78rem;color:var(--muted)}
  .ex-tbl td.acts-t{grid-column:1/-1;text-align:left;display:flex;gap:6px;margin-top:4px}
  .ex-tbl td.blank{grid-column:1/-1}
}
@media (min-width:761px){.ex-tbl .ex-meta{display:none}}
.ex-tbl .payer{white-space:nowrap}
.ex-tbl td.ex-l{white-space:normal;min-width:72px}
.ex-meta .chipx{background:var(--sunk);border:1px solid var(--line);border-radius:999px;padding:0 8px}
.main:has(#view-expenses:not([hidden])){max-width:1320px}
.hr-edr{grid-template-columns:1fr 110px auto auto auto}
.hr-pin{display:flex;align-items:center;gap:4px;font-size:.76rem;white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:3px 9px;cursor:pointer;color:var(--muted)}
.hr-pin input{width:auto;margin:0}.hr-pin.on{background:var(--info-soft);border-color:var(--info);color:var(--info);font-weight:600}
.hr-edr.fx input.nm{border-color:var(--info)}
.hr-ask{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px dashed var(--line);background:var(--sunk);border-radius:10px;padding:8px 10px;font-size:.85rem}
@media (max-width:560px){.hr-edr{grid-template-columns:1fr 90px auto}.hr-edr .hr-pin{grid-column:1/-1;justify-self:start}}
/* นับสต็อก: ของเสียในแถวเดียวกัน */
.ct-row .ct-wbtn{grid-column:1/-1;justify-self:start;font-size:.76rem;border:1px dashed var(--line);background:none;color:var(--muted);border-radius:999px;padding:2px 10px}
.ct-row .ct-wbtn.on{border-style:solid;border-color:var(--danger);color:var(--danger);background:var(--danger-soft);font-weight:600}
.ct-row .ct-wbox{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--danger-soft);color:var(--danger);border-radius:10px;padding:6px 8px;font-size:.82rem}
.ct-row .ct-wbox[hidden]{display:none}
.ct-row .ct-wbox input{width:80px;text-align:center}.ct-row .ct-wbox select{width:auto}
.st-staffnote{display:grid;gap:6px;border-left:5px solid var(--info)}.st-staffnote b{font-family:var(--f-display);font-weight:500;font-size:1.05rem}.st-staffnote p{margin:0;color:var(--muted)}
.st-staffnote[hidden]{display:none}
/* ตั้งยอดควรมี (แยกสาขา) */
.main:has(#view-stock[data-mode="wh-par"]:not([hidden])){max-width:1320px}
.par-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.par-tools input[type=search]{width:200px}.par-tools select{width:auto;max-width:200px}.par-sp{flex:1}
.par-leg{margin:6px 0 0}
.par-tbl th{text-align:center;white-space:nowrap}.par-tbl th:first-child{text-align:left}
.par-tbl td.par-c{text-align:center;padding:5px 6px}
.par-tbl td.par-c input{width:76px;text-align:center;font-family:var(--f-mono);padding:5px}
.par-tbl td.par-c input.empty{background:var(--sunk);border-style:dashed}
.par-tbl td.par-c input.ch{border-color:var(--info);background:var(--info-soft)}
.par-tbl td.par-c.hot input{border-color:var(--warn);box-shadow:0 0 0 2px var(--warn-soft)}
.par-use{display:block;font-size:.68rem;color:var(--muted);margin-top:2px;white-space:nowrap}
.par-tbl td.hot .par-use{color:var(--warn);font-weight:700}
.par-tbl tr.par-cat td{background:var(--sunk);font-weight:700;font-size:.82rem;color:var(--muted)}
.par-alert{border:1.5px solid var(--warn);background:var(--warn-soft);color:var(--warn);border-radius:14px;padding:10px 14px;display:grid;gap:6px}
.par-alert[hidden]{display:none}
.par-al{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.86rem}
.par-bar{position:sticky;bottom:0;z-index:3;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 -4px 14px rgba(0,0,0,.05)}
.par-bar #par-stat{flex:1;font-size:.88rem;color:var(--muted)}.par-chg{color:var(--info)}
/* พนักงาน: ชื่อเล่น + บัญชีธนาคาร */
.eu-bank{border:1px solid var(--line);border-radius:12px;padding:8px 12px 12px;margin:0;display:grid;gap:8px}
.eu-bank legend{font-size:.84rem;color:var(--muted);padding:0 4px}
.eu-bank-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.eu-bank-row .fld:last-child{grid-column:1/-1}
#eu-bank-other[hidden]{display:none}
.bank-cell{white-space:nowrap}.bank-cell .bk-no{font-family:var(--f-mono);font-size:.84rem;display:block}.bank-cell small{color:var(--muted);font-size:.74rem;margin-right:6px}
.bank-cell .tb-copy{margin-top:2px}
/* ใบแจ้งเรื่อง */
.rp-form{display:grid;gap:12px}
.rp-form .lbl{display:block;font-size:.84rem;color:var(--muted);margin-bottom:6px}
.rp-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.rp-ty{text-align:left;border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:10px;display:grid;gap:2px}
.rp-ty b{font-size:.92rem}.rp-ty small{color:var(--muted);font-size:.74rem}.rp-ty .ic{font-size:1.3rem}
.rp-ty.on{border-color:var(--accent);background:var(--accent-soft)}
.rp-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rp-form textarea{font:inherit;min-height:90px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--surface);color:var(--ink);width:100%;resize:vertical}
.rp-urg{display:flex;gap:6px}.rp-urg button{flex:1;font-size:.86rem;border-width:1.5px}
.rp-urg button.on.n{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700}
.rp-urg button.on.h{border-color:var(--warn);background:var(--warn-soft);color:var(--warn);font-weight:700}
.rp-urg button.on.u{border-color:var(--danger);background:var(--danger-soft);color:var(--danger);font-weight:700}
.rp-photos{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rp-add{cursor:pointer;display:inline-flex;align-items:center;gap:4px}.rp-add[hidden]{display:none}
.rp-th{position:relative;width:72px;height:72px}.rp-th img{width:100%;height:100%;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.rp-thx{position:absolute;top:-6px;right:-6px;width:22px;height:22px;padding:0;border-radius:50%;font-size:.7rem;line-height:1}
.rp-lhd{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.rp-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.rp-tools select{width:auto}.rp-tools select[hidden]{display:none}
.rp-tools .chips button b{margin-left:2px}
.rp-list{display:grid;gap:10px}
.rp-card{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:6px;background:var(--surface)}
.rp-card.u{border-left:5px solid var(--danger)}.rp-card.h{border-left:5px solid var(--warn)}
.rp-ch{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.rp-ch .pill{margin-right:4px}.rp-t{display:block;margin-top:4px;font-size:1rem}
.pill.s-new{background:var(--warn-soft);color:var(--warn)}.pill.s-doing{background:var(--info-soft);color:var(--info)}.pill.s-done{background:var(--accent-soft);color:var(--accent)}
.pill.p-u{background:var(--danger);color:#fff}.pill.p-h{background:var(--warn-soft);color:var(--warn)}
.rp-det{margin:0;font-size:.92rem;white-space:pre-line}
.rp-ph{display:flex;gap:6px;flex-wrap:wrap}.rp-ph img{width:84px;height:84px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.rp-log{border-top:1px dotted var(--line);padding-top:6px;display:grid;gap:3px;font-size:.84rem;color:var(--muted)}.rp-log b{color:var(--ink)}
.rp-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.rp-acts input{flex:1;min-width:180px;width:auto;padding:6px 10px}
@media (max-width:560px){.rp-two{grid-template-columns:1fr}.rp-urg{flex-direction:column}}
.hr-who{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--accent);text-decoration:underline;text-align:left}
.hr-rc{font-size:.76rem;border:0;border-radius:999px;padding:2px 9px;background:var(--info-soft);color:var(--info);font-weight:700;white-space:nowrap}
.hr-htabs{margin-bottom:8px}.hr-htabs .on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.hr-hist>div.hr-hw{border-left:3px solid var(--warn);padding-left:8px}.hr-hist>div.hr-hr{border-left:3px solid var(--info);padding-left:8px;display:block}
.hr-hist>div.hr-hw.off{opacity:.55;text-decoration:line-through}
/* เบิกด่วนระหว่างวัน */
.st-urgent-btn{display:grid;gap:2px;text-align:left;width:100%;padding:12px 16px;border-radius:12px;border:2px solid #e8590c;background:#fff4e6;color:#a1430a;cursor:pointer}
.st-urgent-btn b{font-size:1.05rem}.st-urgent-btn small{color:#b85c1e}
.st-urgent-btn[hidden],.st-urgent-mini[hidden]{display:none}
.st-urgent-mini{border-color:#e8590c;color:#a1430a;background:#fff4e6;font-weight:600}
.pill.urg{background:#e8590c;color:#fff}
.st-req-pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.is-urgent{border-left:5px solid #e8590c!important}
.st-req-note.urg{background:#fff4e6;color:#a1430a}
.dlg-urg{max-width:560px;width:calc(100% - 24px)}
.ug{display:grid;gap:12px}.ug h2{margin:0}
.ug-sug{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ug-rows{display:grid;gap:6px}
.ug-row{display:grid;grid-template-columns:1fr 90px auto auto;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:8px}
.ug-row small{display:block;color:var(--muted)}.ug-row input{width:100%}
.warn-t{color:var(--danger)}
#ug-times button[aria-pressed=true]{background:#e8590c;color:#fff;border-color:#e8590c}
.ug-go{background:#e8590c;border-color:#e8590c}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .st-urgent-btn,:root:not([data-theme=light]) .st-urgent-mini,:root:not([data-theme=light]) .st-req-note.urg{background:#3a2210;color:#ffb37a}}
:root[data-theme=dark] .st-urgent-btn,:root[data-theme=dark] .st-urgent-mini,:root[data-theme=dark] .st-req-note.urg{background:#3a2210;color:#ffb37a}
.chip-add{border:1px dashed var(--line);background:none;border-radius:999px;padding:4px 10px;font-size:.88rem;cursor:pointer}.chip-add:hover{border-color:#e8590c;color:#a1430a}
.wr-urgbar{display:block;width:100%;text-align:left;margin-bottom:10px;padding:10px 14px;border-radius:10px;border:2px solid #e8590c;background:#fff4e6;color:#a1430a;font-weight:600;cursor:pointer}

/* พับหัวข้อเมนู */
.menu-tools{display:flex;justify-content:flex-end;margin:-8px 4px -10px}
.menu-tools .linkbtn{text-decoration:none;font-size:.78rem;border:1px solid var(--line);border-radius:999px;padding:2px 10px}
.menu .menu-h.mh{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;background:var(--sunk);color:var(--ink);font-weight:600;font-size:.8rem;letter-spacing:.02em;text-transform:none;padding:8px 10px;border-radius:8px;margin-bottom:2px}
.menu .menu-h.mh:hover{color:var(--accent)}
.menu .menu-h.mh:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mh .mh-tg{margin-left:auto;font-weight:400;font-size:.72rem;color:var(--muted)}
.mh .mh-sum{font-style:normal;font-family:var(--f-mono);font-size:.72rem;background:var(--danger);color:var(--surface);border-radius:999px;padding:0 7px}
.mh .mh-sum:empty{display:none}
.mh.mh-no{animation:mhno .35s}
@keyframes mhno{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.mh.mh-no{animation:none}}
.menu .menu-group.shut>button{display:none}
.menu .menu-group{gap:2px}
.menu{gap:8px}

/* ---------- เตือนความจำ (บันทึกธรรมดา) ---------- */
.rm-form{display:grid;gap:12px}
.rm-form textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%;resize:vertical}
.rm-foot{display:flex;gap:12px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.rm-dayf{max-width:220px}
.rm-bar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}
.rm-bar input{max-width:260px}
#rm-tabs b{font-weight:600}
.rm-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rm-list .blank{padding:22px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:12px}
.rm-item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.rm-item>input[type=checkbox]{width:20px;height:20px;margin-top:3px;flex-shrink:0;accent-color:var(--accent)}
.rm-item.rm-late{border-left:4px solid var(--danger)}
.rm-item.rm-today{border-left:4px solid var(--warn)}
.rm-item.rm-done{opacity:.65}
.rm-item.rm-done .rm-title{text-decoration:line-through}
.rm-main{flex:1;min-width:0;display:grid;gap:4px}
.rm-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rm-title{font-size:1rem}
.rm-note{font-size:.9rem;white-space:pre-wrap;color:var(--ink)}
.rm-who{color:var(--muted);font-size:.76rem}
.rm-acts{display:flex;gap:6px;flex-shrink:0}
@media (max-width:640px){.rm-item{flex-wrap:wrap}.rm-acts{width:100%;justify-content:flex-end}}

/* ---------- สาขา ---------- */
.br-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.br-list .blank{color:var(--muted);padding:8px 0}
.br-item{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.br-item input{flex:1;min-width:180px;max-width:360px}
.br-item.off input{color:var(--muted);text-decoration:line-through}
.br-add{display:flex;gap:8px;max-width:520px}.br-add input{flex:1}

/* ===== โทนขาว ดำ เขียว (Minimal × Joost) ===== */
:root,:root:root{--bg:#F5F5F5;--surface:#FFFFFF;--sunk:#FAFAFA;--line:#E3E3E3;--ink:#111111;--muted:#666666;
 --accent:#1E7F3C;--accent-ink:#FFFFFF;--accent-soft:#E6F4EA;--flesh:#7BC67E;--seed:#111111;--seed-soft:#EDEDED;
 --side:#111111;--shadow:0 1px 2px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.05);color-scheme:light}
@media (prefers-color-scheme:dark){:root,:root:root{--bg:#F5F5F5;--surface:#FFFFFF;--sunk:#FAFAFA;--line:#E3E3E3;--ink:#111111;--muted:#666666;
 --accent:#1E7F3C;--accent-ink:#FFFFFF;--accent-soft:#E6F4EA;--flesh:#7BC67E;--seed:#111111;--seed-soft:#EDEDED;--side:#111111;
 --warn:#9A5B00;--warn-soft:#FBEFD5;--danger:#A3322A;--danger-soft:#F7E1DE;--info:#2F5DA8;--info-soft:#E3E9F6;color-scheme:light}}
.side{--ink:#F2F2F2;--muted:#9A9A9A;--line:#2C2C2C;--surface:#1C1C1C;--sunk:#1C1C1C;color:#F2F2F2}
.side .menu-group,.side .menu-h{background:transparent}
.side .menu button:hover{background:#1F1F1F}
.side .menu button[aria-current="page"]{background:var(--accent);color:#fff}
.side .logo-badge{border-color:#2C2C2C}
.mhead{--ink:#F2F2F2;--muted:#9A9A9A;--line:#2C2C2C;color:#F2F2F2}
.side .brand{flex-direction:column;align-items:flex-start;gap:6px}
.side .logo-badge img{width:190px}
@media (max-width:860px){.side .logo-badge img{width:170px}}
.auth-brand .logo-badge img{width:min(340px,70vw)}
.auth-brand{background:#111111}.auth-brand p{color:#CFCFCF}

.auth-brand::before,.auth-brand::after{display:none!important}