:root{
  --bg:#f2f7f5;--card:#fff;--soft:#f5f9f7;--soft2:#eef4f1;--ink:#13201b;--mut:#587068;--line:#d9e6e0;--line2:#c3d6ce;
  --brand:#0a766f;--brand-ink:#fff;--brand-soft:#dcf1ee;--brand-hover:#085e58;--ring:#8fcfc6;
  --ok:#13703a;--ok-soft:#dff3e6;--warn:#8a5700;--warn-soft:#fff0cc;--bad:#a8231a;--bad-soft:#fde7e5;--info:#0c5d86;--info-soft:#dcf0fa;--vio:#5b3fa5;--vio-soft:#ece6fa;
  --chip:#13201b;--chip-ink:#fff;--cur:#eef9f6;--out:#fff3f1;--flash:#fff4c2;--toast:#13201b;
  --r:12px;--shadow:0 1px 2px rgba(10,50,40,.06),0 4px 16px rgba(10,50,40,.06);
  --f-display:'Prompt','Noto Sans Lao','Sarabun',system-ui,sans-serif;
  --f-body:'Sarabun','Noto Sans Lao','Noto Sans Thai','Leelawadee UI','Lao UI',Tahoma,system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  font-family:var(--f-body);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0c1311;--card:#141d1a;--soft:#1a2521;--soft2:#202d28;--ink:#e6efeb;--mut:#92a9a1;--line:#263430;--line2:#34473f;
  --brand:#34c3b0;--brand-ink:#04201c;--brand-soft:#123a34;--brand-hover:#52d4c2;--ring:#1f5c53;
  --ok:#5fd68c;--ok-soft:#10301d;--warn:#ffc25a;--warn-soft:#3a2b0a;--bad:#ff8a80;--bad-soft:#3a1714;--info:#6cc6f0;--info-soft:#0f2b3b;--vio:#b9a2f5;--vio-soft:#2a2144;
  --chip:#e6efeb;--chip-ink:#0c1311;--cur:#10302b;--out:#2c1916;--flash:#3d3510;--toast:#243430;
  --shadow:0 1px 2px rgba(0,0,0,.4);color-scheme:dark}}
*{box-sizing:border-box}html,body{margin:0}h1,h2,h3,.logo,.hero h1{font-family:var(--f-display)}
body{background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand)}
input[type=checkbox]{accent-color:var(--brand)}
.boot{padding:60px;text-align:center;color:var(--mut)}
[hidden]{display:none!important}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:10px 18px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;cursor:pointer;text-decoration:none;color:var(--ink)}
.logo i{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--brand);color:var(--brand-ink);font-style:normal;font-size:14px}
.top nav{display:flex;gap:4px;margin-left:8px}
.top nav a{padding:7px 12px;border-radius:8px;color:var(--mut);text-decoration:none;font-weight:600;cursor:pointer}
.top nav a.on,.top nav a:hover{background:var(--brand-soft);color:var(--brand)}
.top .sp{flex:1}
.who{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:14px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:700;background:var(--brand-soft);color:var(--brand);white-space:nowrap}
.pill.warn{background:var(--warn-soft);color:var(--warn)}.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.info{background:var(--info-soft);color:var(--info)}.pill.vio{background:var(--vio-soft);color:var(--vio)}.pill.gray{background:var(--soft2);color:var(--mut)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.dot.pulse{animation:pulse 1.4s infinite}@keyframes pulse{50%{opacity:.25}}

/* ---------- layout ---------- */
main{max-width:1500px;margin:0 auto;padding:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card>header{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.card>header h3{margin:0;font-size:15px}.card>header .sp{flex:1}
.card .body{padding:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row.end{justify-content:flex-end}
.mut{color:var(--mut)}.sm{font-size:13px}.b{font-weight:700}.r{text-align:right}.nowrap{white-space:nowrap}
h1{font-size:22px;margin:0 0 4px}h2{font-size:18px;margin:0 0 10px}
.empty{padding:28px 14px;text-align:center;color:var(--mut)}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:9px;border:1px solid var(--line2);background:var(--card);font-weight:600;cursor:pointer;text-decoration:none;color:var(--ink);white-space:nowrap}
.btn:hover{background:var(--soft)}.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}.btn.primary:hover{background:var(--brand-hover)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:var(--brand-ink)}.btn.danger{color:var(--bad);border-color:var(--bad-soft)}.btn.danger:hover{background:var(--bad-soft)}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:8px}.btn.xs{padding:2px 8px;font-size:13px;border-radius:7px}
.btn.ghost{border-color:transparent;background:transparent}.btn.ghost:hover{background:var(--soft2)}
input[type=text],input[type=number],input[type=search],input[type=password],input[type=tel],select,textarea{width:100%;padding:8px 11px;border:1px solid var(--line2);border-radius:9px;background:var(--card);color:var(--ink)}
textarea{resize:vertical;min-height:70px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ring);border-color:var(--brand)}
label.f{display:block;margin:0 0 10px}label.f>span{display:block;font-size:13px;color:var(--mut);margin-bottom:3px}
.chk{display:flex;gap:9px;align-items:flex-start;margin:0 0 9px;cursor:pointer}.chk input{margin-top:4px}.chk small{display:block;color:var(--mut)}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden;background:var(--card)}
.seg button{border:0;background:transparent;padding:6px 12px;font-weight:600;cursor:pointer;color:var(--mut);border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}.seg button.on{background:var(--brand-soft);color:var(--brand)}
.seg button .n{margin-left:5px;font-size:12px;opacity:.8}
code,.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
code{background:var(--soft2);padding:1px 6px;border-radius:5px}

/* ---------- login ---------- */
.hero{max-width:880px;margin:56px auto;padding:0 18px;display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
.hero h1{font-size:34px;line-height:1.2;margin-bottom:10px}.hero p{color:var(--mut);font-size:16px}
.hero ul{padding-left:0;list-style:none;margin:18px 0;display:grid;gap:9px}.hero li::before{content:"✓";color:var(--ok);font-weight:700;margin-right:9px}
.fbbtn{display:inline-flex;align-items:center;gap:10px;background:#1877f2;color:#fff;border:0;border-radius:10px;padding:13px 22px;font-size:16px;font-weight:700;cursor:pointer;text-decoration:none}
.fbbtn:hover{background:#1467d6}
.alert{padding:10px 14px;border-radius:10px;background:var(--bad-soft);color:var(--bad);margin-bottom:12px}
.alert.info{background:var(--info-soft);color:var(--info)}.alert.warn{background:var(--warn-soft);color:var(--warn)}

/* ---------- sessions list ---------- */
.sess{display:grid;grid-template-columns:1fr auto;gap:8px;padding:13px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.sess:last-child{border-bottom:0}.sess:hover{background:var(--soft)}
.sess .t{font-weight:700}.sess .meta{display:flex;gap:14px;color:var(--mut);font-size:13px;flex-wrap:wrap;margin-top:2px}

/* ---------- live room ---------- */
.livebar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.livebar .ttl{font-size:20px;font-weight:700;display:flex;align-items:center;gap:8px;min-width:0}
.livebar .ttl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}
.stat{padding:11px 14px}.stat .k{font-size:12.5px;color:var(--mut)}.stat .v{font-size:23px;font-weight:700;line-height:1.25}.stat .s{font-size:12px;color:var(--mut)}
.room{display:grid;grid-template-columns:minmax(300px,1fr) minmax(380px,1.35fr) minmax(280px,.9fr);gap:14px;align-items:start}
.col{display:flex;flex-direction:column;gap:14px;min-width:0}
.scroll{max-height:calc(100vh - 330px);min-height:240px;overflow:auto}
.tabs-m{display:none}

.prod{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;padding:10px 14px;border-bottom:1px solid var(--line);align-items:center}
.prod:last-child{border-bottom:0}.prod.cur{background:var(--cur);box-shadow:inset 3px 0 var(--brand)}.prod.out{background:var(--card)6f5}
.code{display:inline-block;min-width:44px;text-align:center;padding:3px 9px;border-radius:7px;background:var(--chip);color:var(--chip-ink);font-weight:700;font-size:14px;letter-spacing:.3px}
.prod.out .code{background:var(--bad)}
.prod .nm{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prod .st{grid-column:1/-1;display:flex;align-items:center;gap:10px}
.bar{flex:1;height:8px;border-radius:9px;background:var(--soft2);overflow:hidden}.bar i{display:block;height:100%;background:var(--ok);border-radius:9px;transition:width .3s}
.bar.low i{background:var(--warn)}.bar.zero i{background:var(--bad)}
.prod .left{font-weight:700;min-width:76px;text-align:right}.prod .acts{display:flex;gap:4px;align-items:center}
.addp{display:grid;grid-template-columns:70px 1fr 82px 70px auto;gap:6px;padding:12px 14px;border-top:1px solid var(--line);background:var(--soft);border-radius:0 0 var(--r) var(--r)}

.ord{padding:11px 14px;border-bottom:1px solid var(--line)}.ord:last-child{border-bottom:0}
.ord.new{animation:flash 1.4s}@keyframes flash{from{background:var(--card)7cf}to{background:transparent}}
.ord .h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.ord .nm{font-weight:700}.ord .tot{margin-left:auto;font-weight:700}
.ord .it{color:var(--ink);margin:3px 0 7px;font-size:14px}.ord .it b{color:var(--ink)}
.ord .bt{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ord.cx{opacity:.55}.ord.cx .nm{text-decoration:line-through}
.tags{display:flex;gap:5px;flex-wrap:wrap}

.feed{padding:6px 0}.cm{padding:6px 14px;display:grid;grid-template-columns:1fr auto;gap:2px 8px;border-bottom:1px solid var(--line);font-size:14px}
.cm:last-child{border-bottom:0}.cm .who2{font-weight:700}.cm .msg{grid-column:1/-1;color:var(--ink);word-break:break-word}.cm .dt{grid-column:1/-1;font-size:12.5px;color:var(--mut)}
.wl{padding:8px 14px;border-bottom:1px solid var(--line);font-size:14px;display:flex;gap:8px;align-items:center}.wl:last-child{border-bottom:0}

.mockbox{border:1px dashed var(--line2);background:var(--soft);border-radius:var(--r);padding:12px 14px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.chips button{border:1px solid var(--line2);background:var(--card);border-radius:99px;padding:3px 11px;cursor:pointer;font-size:13px}.chips button:hover{background:var(--brand-soft)}

/* ---------- modal & toast ---------- */
.ov{position:fixed;inset:0;background:rgba(5,20,15,.5);display:flex;align-items:flex-start;justify-content:center;padding:4vh 14px;overflow:auto;z-index:50}
.md{background:var(--card);color:var(--ink);border-radius:16px;width:100%;max-width:560px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.md.wide{max-width:760px}.md>header{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}.md>header h3{margin:0;flex:1;font-size:17px}
.md .body{padding:16px 18px;max-height:72vh;overflow:auto}.md>footer{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line)}
.x{border:0;background:transparent;font-size:22px;cursor:pointer;color:var(--mut);line-height:1}
#toasts{position:fixed;bottom:16px;right:14px;display:flex;flex-direction:column-reverse;gap:8px;z-index:80;width:min(360px,calc(100vw - 28px))}
.toast{background:var(--toast);color:#fff;padding:10px 14px;border-radius:11px;box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:14px;animation:tin .2s;border-left:5px solid #5aa2ff}
.toast.soldout{background:#8f1d15;border-color:#ff8a80;font-weight:700}.toast.low{background:#7a5200;border-color:#ffc247}.toast.ok{border-color:#59d68a}.toast.error{background:#8f1d15;border-color:#ff8a80}
.toast.promoted{border-color:#b69cf5}@keyframes tin{from{transform:translateY(8px);opacity:0}}
.sum{white-space:pre-wrap;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:14px;max-height:230px;overflow:auto}
.slip{max-width:100%;max-height:360px;border-radius:10px;border:1px solid var(--line)}
table.t{width:100%;border-collapse:collapse}table.t td,table.t th{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}table.t th{font-size:12.5px;color:var(--mut);font-weight:600}

/* ---------- responsive ---------- */
@media (max-width:1180px){.room{grid-template-columns:1fr 1fr}.col.c3{grid-column:1/-1}.stats{grid-template-columns:repeat(3,1fr)}.scroll{max-height:60vh}}
@media (max-width:760px){
  main{padding:10px}.top{padding:8px 12px;gap:8px}.who span.nm0{display:none}.top nav a{padding:6px 9px}
  .hero{grid-template-columns:1fr;margin:24px auto}.hero h1{font-size:27px}.grid2{grid-template-columns:1fr}
  .room{grid-template-columns:1fr}.col{display:none}.col.show{display:flex}
  .tabs-m{display:flex;margin-bottom:10px}.tabs-m .seg{width:100%}.tabs-m .seg button{flex:1}
  .stats{grid-template-columns:repeat(2,1fr)}.scroll{max-height:none}
  .addp{grid-template-columns:64px 1fr 1fr;}.addp input:nth-child(2){grid-column:2/-1}.addp button{grid-column:1/-1}
  #toasts{bottom:64px}
}
@media (max-width:760px){
  .top .logo span,.who .nm0{display:none}
  .top nav a{white-space:nowrap}
  .top{gap:8px}
}

/* ---------- ตั้งค่า (แท็บย่อย) / ฟอร์มใหม่ ---------- */
.stabs{display:flex;gap:4px;flex-wrap:wrap;margin:12px 0 16px;padding:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow-x:auto}
.stabs a{padding:7px 13px;border-radius:9px;color:var(--mut);text-decoration:none;font-weight:600;white-space:nowrap}
.stabs a:hover{background:var(--soft)}.stabs a.on{background:var(--brand-soft);color:var(--brand)}
.hint{background:var(--info-soft);color:var(--info);border-radius:10px;padding:9px 13px;font-size:13.5px;margin:0 0 14px}
.hint a{color:inherit;font-weight:700}
.alert.ok{background:var(--ok-soft);color:var(--ok)}
.opts{display:grid;gap:8px}
.opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;cursor:pointer}
.opt.on{border-color:var(--brand);background:var(--brand-soft)}.opt input{margin-top:4px}.opt small{display:block;color:var(--mut);font-size:12.5px}
.evcols{display:grid;grid-template-columns:1fr 1fr;gap:14px}.evc textarea{min-height:60px}
.evt>header{flex-wrap:wrap}.evt>header h3{min-width:150px}
.paper{background:#fff;color:#13201b;border:1px solid var(--line2);border-radius:6px;padding:16px;box-shadow:var(--shadow);max-width:380px}
.paper .mut{color:#587068}.paper table.t td{border-color:#e3ebe7}
.ph0{text-align:center;border-bottom:1px dashed #b9cfc7;padding-bottom:8px}
.seg button.on{background:var(--brand-soft);color:var(--brand)}
.who .seg button{padding:4px 10px;font-size:13px}
.mono{font-family:var(--f-mono)}
@media (max-width:760px){.evcols{grid-template-columns:1fr}.stabs{margin-inline:-2px}}
@media (max-width:760px){
  .who .pill{display:none}.who{gap:6px}.who .btn{padding:4px 8px;font-size:12px}
  .top nav{margin-left:0}.top{overflow:hidden}
  .md{max-width:100%}.paper{max-width:none}
}