/* Render Prop — Linear palette (คู่มือสีเดียวกับที่ตกลงไว้กับพายลอต) */
:root{
  /* พื้นหลังเทาเข้มขึ้นกว่าเดิม — ขาวเกินไปการ์ดขาวจะกลืนกับพื้นและอ่านยาก */
  --bg:#e9ebf1; --panel:#fff; --panel-2:#f7f8fb; --line:#dcdee7; --line-soft:#eaecf2;
  /* พื้นการ์ด — เคยถูกเรียกใช้หลายที่ทั้งที่ไม่เคยประกาศไว้ ทำให้การ์ดพวกนั้นพื้นใส กลืนกับพื้นหลังจนอ่านยาก */
  --card:var(--panel);
  --text:#14151a; --muted:#5a5f6d; --accent:#5b5fc7; --accent-ink:#fff; --accent-soft:#eeeefb;
  --ok:#2f9e6b; --ok-soft:#e8f6ef; --warn:#d9822b; --danger:#c0392b; --warn-soft:#fdf3e7; --danger-soft:#fdeceb;
  /* ตัวหนังสือที่วางบนพื้นสีสถานะ · โหมดมืดพื้นพวกนี้สว่างขึ้น ตัวขาวจะจมหายไปกับพื้น จึงต้องสลับเป็นตัวเข้ม */
  --ok-ink:#07150e; --warn-ink:#241704; --danger-ink:#fff;
  --radius:10px; --shadow:0 1px 2px rgba(16,17,25,.06),0 6px 20px rgba(16,17,25,.05);
  color-scheme:light;   /* ให้ปฏิทินและ scrollbar ของเครื่องเป็นโทนสว่างตาม */
}
/* โหมดมืดมาได้ 2 ทาง: ตามเครื่อง (auto) หรือผู้ใช้กดเลือกเอง (data-theme) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e0f12; --panel:#16171b; --panel-2:#1a1c21; --line:#282a32; --line-soft:#212329;
    --text:#eceef3; --muted:#9aa0ad; --accent:#8b8dfb; --accent-ink:#14151a; --accent-soft:#23253a;
    --ok:#4dbd8b; --ok-soft:#16291f; --warn:#e2a25c; --danger:#e0705f; --warn-soft:#2a2114; --danger-soft:#2a1614;
    --ok-ink:#0b1710; --warn-ink:#241704; --danger-ink:#2a0f0c;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --bg:#0e0f12; --panel:#16171b; --panel-2:#1a1c21; --line:#282a32; --line-soft:#212329;
    --text:#eceef3; --muted:#9aa0ad; --accent:#8b8dfb; --accent-ink:#14151a; --accent-soft:#23253a;
    --ok:#4dbd8b; --ok-soft:#16291f; --warn:#e2a25c; --danger:#e0705f; --warn-soft:#2a2114; --danger-soft:#2a1614;
    --ok-ink:#0b1710; --warn-ink:#241704; --danger-ink:#2a0f0c;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.35);
    color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font-family:Inter,"Noto Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
a{color:var(--accent)}

/* ---------- shell ---------- */
/*
 * ออกจากระบบไปอยู่ขวาสุดของแถบ ห่างจากปุ่มที่ใช้ทุกวัน
 * เป็นไอคอนอย่างเดียว เพราะคำว่า ออก สั้นจนอ่านเป็นปุ่มอื่นได้ และคนเคยกดโดนตอนจะกดปุ่มข้าง ๆ
 */
.top .logoutbtn{margin-left:auto;padding-left:12px;padding-right:12px}
.top .logoutbtn svg{display:block}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;flex-wrap:wrap;row-gap:8px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
/* จอแคบ ให้เมนูลงไปอยู่บรรทัดของตัวเองเต็มความกว้าง ดีกว่าถูกบีบจนอ่านไม่ออก */
@media (max-width:1100px){ .navtabs{order:9;flex:1 0 100%;min-width:0} }
.top .logo{white-space:nowrap}
.top .logo span{color:var(--accent)}
.top .crumb{flex:0 1 auto;min-width:0;color:var(--muted);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .spacer{flex:none}
.top .who{font-size:13px;color:var(--muted);white-space:nowrap}
.themebtn{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);display:grid;place-items:center;font-size:15px;flex:none}
.themebtn:hover{border-color:var(--muted);background:var(--panel-2)}
.login .logintools .themebtn,.login .logintools .langbtn{position:static}
/* ปุ่มภาษาเป็นตัวหนังสือ ไม่ใช่สัญลักษณ์ จึงต้องกว้างกว่าปุ่มอื่นเล็กน้อย */
.langbtn{width:auto;min-width:32px;padding:0 9px;font-size:12px;font-weight:600;letter-spacing:.02em}

.filechip{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--accent);background:var(--accent-soft);border-radius:8px;font-size:13.5px;margin-bottom:14px}
.filechip b{flex:1;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrap{max-width:1120px;margin:0 auto;padding:20px 16px 64px}
/*
 * หน้าที่เป็นกระดาน รายการ หรือตาราง ใช้ความกว้างของจอให้คุ้ม
 * หน้าที่เป็นตัวหนังสือยาว (หน้าเขียน หน้าลิงก์ลูกค้า ใบพิมพ์) ยังแคบเท่าเดิมเพื่อการอ่าน
 */
#app[data-wide="on"] .wrap:not(.pubwrap):not(.docpage):not(.writewrap){max-width:min(1600px,94vw)}
.head{margin-bottom:18px}
.kicker{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.head h2{font-size:21px}
.head p{margin:4px 0 0;color:var(--muted);font-size:14px}
.headrow{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;justify-content:space-between}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:var(--panel);font-size:14px;font-weight:550}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--text);background:var(--line-soft)}
.btn.danger{color:var(--danger);border-color:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.big{padding:15px 18px;font-size:16px;border-radius:12px;width:100%;justify-content:center}

/* ---------- list rows (Linear) ---------- */
.rows{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line-soft);text-align:left;width:100%;background:none}
.row:last-child{border-bottom:none}
.row:hover{background:var(--panel-2)}
.row .main{flex:1;min-width:0}
.rowmain{flex:1;min-width:0;text-align:left;padding:0}
.rowmain b{display:block;font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowmain small{display:block;color:var(--muted);font-size:12.5px}
.error.notice{background:var(--accent-soft);color:var(--text);border-color:var(--accent)}

/* นาฬิกานับถอยหลังถึงเวลานัดกอง */
.cd{font-size:12.5px;font-weight:600;white-space:nowrap;padding:3px 9px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.cd.far{color:var(--muted)}
.cd.near{color:var(--accent);border-color:var(--accent)}
.cd.soon{color:var(--warn-ink);background:var(--warn);border-color:var(--warn)}
.cd.now{color:var(--danger-ink);background:var(--danger);border-color:var(--danger)}
.cd.past,.cd.none{color:var(--muted);border-style:dashed}
.cd.big{font-size:15px;padding:7px 14px}
.cdbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;margin-bottom:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.cdedit{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.cdedit input{padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:var(--panel-2)}

/* วางสคริปหลายก้อน ก้อนละคอนเทนต์ */
.blocks{display:flex;flex-direction:column;gap:12px}
.block{border:1px solid var(--line);border-radius:var(--radius);padding:12px;background:var(--panel-2)}
.blockhead{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px}
.blockhead b{font-weight:600}
.blockbox{width:100%;min-height:150px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.7;resize:vertical}
.blockbox:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.btn.small{padding:6px 11px;font-size:13px;margin-top:9px}
.blockadd{display:flex;gap:10px;flex-wrap:wrap}
.addblock{border-style:dashed}

/* เลือกคอนเทนต์ที่จะเตรียมพร้อมกัน */
.prepbtn{width:100%;justify-content:center;margin-top:16px;padding:13px}
.listfoot{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* เส้นแบ่งระหว่างงานวันถ่าย กับเรื่องเงิน */
.sectionline{display:flex;align-items:center;gap:12px;margin:26px 0 16px;color:var(--muted);font-size:12px;letter-spacing:.06em}
.sectionline::before,.sectionline::after{content:"";height:1px;background:var(--line);flex:1}

/*
 * ส่วนเงินและเอกสาร — ต้องแยกออกจากส่วนทำงานให้ชัด
 * เดิมเป็นแค่เส้นคั่นบาง ๆ กับหัวข้อตัวเล็ก คนเลื่อนผ่านแล้วไม่รู้ว่าเปลี่ยนเรื่องแล้ว
 * ตอนนี้เป็นกรอบของตัวเองพร้อมหัวแถบสี ข้างในแบ่งเป็นหัวข้อย่อยอีกชั้น
 */
.moneyzone{margin-top:28px;border:1px solid var(--ok);border-radius:16px;overflow:hidden;background:var(--panel)}
.moneyhead{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--ok-soft);
  border-bottom:1px solid var(--ok)}
.moneyhead i{font-style:normal;font-size:22px;line-height:1}
.moneyhead b{display:block;font-size:15.5px;color:var(--ok)}
.moneyhead small{display:block;font-size:12px;color:var(--muted);margin-top:1px;line-height:1.5}
.moneybody{padding:4px 16px 18px}
.moneysub{margin:18px 0 8px;font-size:11.5px;letter-spacing:.06em;color:var(--muted);font-weight:700;
  display:flex;align-items:center;gap:9px}
.moneysub::after{content:"";flex:1;height:1px;background:var(--line)}
.moneybody>.billbox,.moneybody>.extrabox{margin-top:0}
/* การ์ดเอกสารแต่ละใบต้องแยกจากกันชัด ไม่ใช่กล่องขาวเรียงกันเฉย ๆ */
.actiongrid.money .actcard{border-left:4px solid var(--ok);background:var(--panel)}
.actiongrid.money .actcard i{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;background:var(--ok-soft);font-size:18px;margin-bottom:7px}
/* การ์ดเน้นต้องชนะกฎของโซนเงิน ไม่งั้นพื้นขาวกับตัวหนังสือขาวทับกันจนอ่านไม่เห็น */
.actiongrid.money .actcard.primary{background:var(--accent);border-color:var(--accent);
  border-left-color:var(--accent);color:var(--accent-ink)}
.actiongrid.money .actcard.primary small{color:var(--accent-ink);opacity:.85}
.actiongrid.money .actcard.primary i{background:rgba(255,255,255,.22)}

/* การ์ดเมนูแทนแถบสีทึบ */
.actiongrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;margin-top:14px}
.actcard{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);text-align:left}
.actcard i{font-style:normal;font-size:20px;margin-bottom:4px}
.actcard b{font-size:14px;font-weight:600}
.actcard small{color:var(--muted);font-size:12px;line-height:1.45}
.actcard:hover{border-color:var(--accent);background:var(--accent-soft)}
.actcard:disabled{opacity:.45;cursor:not-allowed}
.actcard:disabled:hover{border-color:var(--line);background:var(--panel)}
.actiongrid.work .actcard{border-left:3px solid var(--accent)}
.actiongrid.money .actcard{border-left:3px solid var(--ok)}
.actcard.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.actcard.primary small{color:var(--accent-ink);opacity:.85}
.actcard.primary:hover{filter:brightness(1.06);background:var(--accent)}
.reimb + .reimb{page-break-before:always;margin-top:24px}
.backbtn{margin-left:8px;font-size:11.5px;padding:2px 8px;color:var(--accent);border:1px solid var(--line)}
.invtable tr.paidback{opacity:.6}
.invtable tr.paidback td:nth-child(2){text-decoration:line-through}
.pickrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.pick{display:flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--line);border-radius:99px;font-size:13.5px;cursor:pointer;background:var(--panel)}
.pick.on{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.item .dot{margin-right:2px}
@media (max-width:640px){.cdbar .cdedit{flex:1 1 100%}}
.row .main b{display:block;font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .main small{display:block;color:var(--muted);font-size:12.5px}
.row .meta{color:var(--muted);font-size:12.5px;white-space:nowrap}
.bar{width:78px;height:5px;border-radius:99px;background:var(--line);overflow:hidden;flex:none}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.bar i.ok{background:var(--ok)}
.empty{padding:38px 16px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius)}

/* ---------- forms ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2)}
.field textarea{min-height:230px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.7}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.hint{color:var(--muted);font-size:12.5px;margin:-8px 0 14px}
.error{background:#fdeceb;color:#a3271b;border:1px solid #f3c6c1;padding:9px 12px;border-radius:8px;font-size:13.5px;margin-bottom:14px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .error{background:#2a1614;color:#ffb2a7;border-color:#4a2320}}
:root[data-theme="dark"] .error{background:#2a1614;color:#ffb2a7;border-color:#4a2320}
/* แถบบอกสถานะ (ไม่ใช่ข้อผิดพลาด) ต้องไม่เป็นสีแดงในโหมดมืด */
:root[data-theme="dark"] .error.notice,
.error.notice{background:var(--accent-soft);color:var(--text);border-color:var(--accent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .error.notice{background:var(--accent-soft);color:var(--text);border-color:var(--accent)}}

/* ---------- QC ---------- */
.tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.tabs button{padding:9px 14px;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--text);border-bottom-color:var(--accent);font-weight:600}
.qc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:16px;align-items:start}
.script{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:sticky;top:62px}
.script header{padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.script .sctap{display:none}
.script pre{margin:0;padding:14px;max-height:66vh;overflow:auto;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.85}
mark.hl{background:var(--accent-soft);color:inherit;border-radius:3px;padding:0 2px}
mark.hl.active{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 3px var(--accent-soft)}
.zoom{flex:none;padding:5px 7px;font-size:14px;line-height:1;border-radius:7px;opacity:.55}
button.zoom:hover{opacity:1;background:var(--accent-soft)}
button.zoom.on{opacity:1;background:var(--accent);border-radius:7px}
.zoom.off{opacity:.18;cursor:default}
.qcitems{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.qcitems>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line)}
.qcrow{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.qcrow.done{background:var(--panel-2)}
.qcrow .nm{flex:1;min-width:150px;padding:7px 9px;border:1px solid transparent;border-radius:7px;background:none;font-weight:550}
.qcrow .nm:hover{border-color:var(--line)}
.qcrow .qty{width:56px;padding:7px 6px;border:1px solid transparent;border-radius:7px;background:none;text-align:right}
.qcrow .un{width:60px;padding:7px 6px;border:1px solid transparent;border-radius:7px;background:none;color:var(--muted);font-size:13px}
.qcrow .qty:hover,.qcrow .un:hover{border-color:var(--line)}
.tick{width:24px;height:24px;flex:none;border:1.5px solid var(--line);border-radius:6px;display:grid;place-items:center;font-size:13px;color:transparent}
.tick.on{background:var(--ok);border-color:var(--ok);color:var(--ok-ink)}
.tag{font-size:11px;padding:2px 7px;border-radius:99px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.tag.ai{border-color:var(--warn);color:var(--warn)}
.tag.script{border-color:var(--accent);color:var(--accent)}
.tag.creative{border-color:var(--ok);color:var(--ok)}
.tag.nofind{border-style:dashed;opacity:.8}
.tag.adm{border-color:var(--accent);color:var(--accent);margin-left:6px;font-weight:600}
/* สีสถานะในตารางโพสต์ — เขียวคือพร้อมแล้ว เหลืองคือค้างอยู่ที่ใครสักคน */
.tag.ok{border-color:var(--ok);color:var(--ok)}
.tag.warn{border-color:var(--warn);color:var(--warn)}
.tag.busy{border-color:var(--accent);color:var(--accent)}
.tag.wait{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}
.picksplit{display:block;margin:14px 0 6px;padding:0 2px}
.picksplit:first-child{margin-top:0}
.picksplit b{display:block;font-size:13px;color:var(--ink)}
.picksplit.wait b{color:var(--warn)}
.picksplit i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin:3px 0 0;line-height:1.55}
.error.notice.pickwarn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.admtoggle{font-size:12.5px;white-space:nowrap;color:var(--muted)}
.admtoggle:hover{color:var(--accent)}
.qcrow.nomatch .nm{opacity:.9}
.why{flex-basis:100%;margin:0 0 2px 33px;color:var(--muted);font-size:12px}
.foot{padding:12px 14px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}

/* ---------- find ---------- */
.progress{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:var(--muted);font-size:13.5px}
.progress b{color:var(--text);font-size:19px}
.progress .bar{flex:1;width:auto;height:6px}
.group{margin-bottom:22px}
.group h3{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-bottom:8px;color:var(--muted);font-weight:600}
.group h3 b{color:var(--text)}
.group h3 em{font-style:normal;font-size:12px;font-weight:400}
.dot{width:8px;height:8px;border-radius:99px;flex:none}
.item{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-bottom:none;background:var(--panel)}
.item:first-of-type{border-radius:var(--radius) var(--radius) 0 0}
.item:last-of-type{border-bottom:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius)}
.item.ready{background:var(--ok-soft)}
.item .main{flex:1;min-width:0}
.item .main b{display:block;font-size:14.5px;font-weight:600}
.item .main small{color:var(--muted);font-size:12.5px}
.state{font-size:12.5px;color:var(--muted);white-space:nowrap}
.state .byline{display:block;font-style:normal;font-size:11.5px;opacity:.8}
.state.ready{color:var(--ok);font-weight:600}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}

/* ---------- modal ---------- */
.backdrop{position:fixed;inset:0;background:rgba(12,13,18,.45);display:flex;align-items:flex-end;justify-content:center;z-index:60;padding:0}
.sheet{width:100%;max-width:460px;background:var(--panel);border-radius:16px 16px 0 0;padding:18px;max-height:92vh;overflow:auto;box-shadow:var(--shadow)}
.sheet{max-height:92dvh}
@media (min-width:640px){.backdrop{align-items:center;padding:20px}.sheet{border-radius:16px}}
.sheet header{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.sheet header h3{font-size:18px;flex:1}
.sheet header small{color:var(--muted);font-size:13px}
.q{font-size:15px;font-weight:600;margin-bottom:12px}
.methods{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.method{display:flex;flex-direction:column;align-items:center;gap:7px;padding:18px 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);font-weight:600;font-size:14px;text-align:center}
.method:hover{border-color:var(--accent);background:var(--accent-soft)}
.method i{font-style:normal;font-size:24px}
.stack{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.photo{font-size:13px;color:var(--ok);margin-top:-4px}

/* ---------- print sheets ---------- */
.sheetview{background:var(--bg);min-height:100vh}
.sheetview{min-height:100dvh}
.sheetbar{display:flex;gap:8px;padding:12px 16px;justify-content:space-between;flex-wrap:wrap}
.paper{background:#fff;color:#111;max-width:820px;margin:0 auto 40px;padding:34px 38px;border-radius:6px;box-shadow:var(--shadow)}
.paper h1{font-size:20px}
.paper .pmeta{color:#555;font-size:13px;margin:6px 0 20px;border-bottom:1px solid #ddd;padding-bottom:12px}
.psec{margin-bottom:22px}
.psec h3{font-size:14px;margin-bottom:8px;border-bottom:1px solid #ddd;padding-bottom:5px}
.prow{display:flex;gap:10px;padding:5px 0;font-size:13.5px;border-bottom:1px dotted #e2e2e2}
.prow b{flex:1;font-weight:500}
.prow span:first-child{width:18px}
.prow.done b{color:#555}
table.bill{width:100%;border-collapse:collapse;font-size:13.5px}
table.bill th,table.bill td{border:1px solid #ccc;padding:7px 9px;text-align:left}
table.bill th{background:#f3f3f3}
table.bill td.amt,table.bill th.amt{text-align:right;font-variant-numeric:tabular-nums}
table.bill tfoot td{font-weight:600;background:#fafafa}
/* ใบรับรองแทนใบเสร็จรับเงิน */
.cert{font-size:14px;line-height:1.9;color:#111}
.cert-title{text-align:center;font-size:20px;font-weight:700;margin:0 0 18px}
.cert-meta{display:flex;justify-content:flex-end;gap:34px;margin-bottom:14px;font-size:13.5px}
.blank{display:inline-block;border-bottom:1px dotted #555;height:1em;vertical-align:baseline;min-width:90px}
.cert-table{width:100%;border-collapse:collapse;margin-bottom:20px}
.cert-table th,.cert-table td{border:1px solid #333;padding:7px 9px;font-size:13.5px;vertical-align:top}
.cert-table th{background:#f1f1f1;font-weight:600;text-align:center}
.cert-table .c-date{width:104px;text-align:center;white-space:nowrap}
.cert-table .c-amt{width:124px;text-align:right;font-variant-numeric:tabular-nums}
.cert-table .c-note{width:132px}
.cert-table tr.pad td{height:2em}
.cert-table tfoot td{font-weight:600;background:#fafafa}
.cert-table tfoot td:first-child{text-align:right}
.cert-words{text-align:center;font-weight:600}
.cert-certify{margin:0 0 30px;text-indent:2.2em;line-height:2.4}
.cert-signs{display:flex;gap:56px;justify-content:space-around;margin-bottom:26px;text-align:center}
.cert-signs>div{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:210px}
.cert-signs i{display:block;width:100%;border-bottom:1px dotted #555;height:2.4em}
.cert-signs small{font-size:13px}
.cert-signs em{font-style:normal;font-size:13px;color:#444}
.cert-foot{border-top:1px solid #ccc;padding-top:10px;font-size:13px}
.cert-foot label{margin-right:14px}
.psrc{margin-top:16px;font-size:11.5px;color:#888;text-align:right}

/* ---------- login ---------- */
.login{position:relative;min-height:100dvh;display:grid;place-items:center}
.login .card{text-align:left}
.login h1{font-size:24px;margin-bottom:6px}
.login p{color:var(--muted);font-size:13.5px;margin:0 0 20px}

.spin{display:inline-block;width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:99px;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
.loading{padding:60px 16px;text-align:center;color:var(--muted)}

@media (max-width:820px){
  .qc{grid-template-columns:1fr}
  /*
   * บนไอแพดกับไอโฟน บทเคยเลื่อนหายขึ้นไปพร้อมหน้า คนติ๊กของเลยต้องเลื่อนกลับไปอ่านทุกครั้ง
   * จึงล็อกบทไว้ใต้แถบบน แต่ล็อกแบบกางค้างไว้ บทจะลอยทับรายการของจนติ๊กไม่ได้ (ทีมพร็อพเจอมาแล้ว)
   * ตอนนี้ล็อกไว้เป็นแถบเดียว แตะแถบถึงจะกางบทออกมา กดแว่นขยายก็กางให้เอง
   */
  .script{position:sticky;top:var(--toph,62px);z-index:6;box-shadow:0 8px 16px rgba(16,17,25,.10)}
  :root[data-topaway="1"] .script{top:10px}
  .script header{cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text);
    display:flex;align-items:center;gap:8px}
  .script .scfull{display:none}
  .script .sctap{display:inline}
  .script:not(.open) pre{display:none}
  .script:not(.open) header{border-bottom:0}
  .script pre{max-height:32vh}
  .grid2{grid-template-columns:1fr}
}
@media (max-width:520px){
  .script pre{max-height:26vh}
}
/* ---------- หลักฐานในใบสรุปส่งบัญชี ---------- */
.proofpic{margin:10px 0 0;padding:0}
.proofpic .pics{display:flex;flex-wrap:wrap;gap:8px}
.proofpic img{max-width:250px;max-height:340px;border:1px solid #ddd;border-radius:4px;background:#fff}
.proofpic figcaption{font-size:11.5px;color:#555;margin-top:4px}
.proofpic figcaption i{color:#888;font-style:normal}
.sharednote{background:#fff8e6;border:1px solid #e8d9a8;color:#6b5a2a;border-radius:5px;padding:7px 9px;font-size:12px;margin-top:8px}
.sharedbill{border:1px solid #ddd;border-radius:6px;padding:12px 14px;margin-bottom:14px;break-inside:avoid}
.sharedbill h4{font-size:13.5px;margin:0 0 8px}
.sharedbill h4 i{font-weight:400;color:#777;font-style:normal}

@media print{
  .top,.sheetbar,.no-print{display:none!important}
  body,.sheetview{background:#fff}
  .paper{box-shadow:none;margin:0;padding:0;max-width:none}
  .proofpic,.sharedbill,.psec{break-inside:avoid}
  .proofpic img{max-width:200px;max-height:260px}
  .sharednote{background:#fff!important;color:#333!important;border-color:#bbb!important}
}


/* ---------- เมนูบนแถบบน ----------
 * เมนูเป็นส่วนที่ยอมหดและเลื่อนซ้ายขวาได้ ส่วนปุ่มฝั่งขวา (กระดิ่ง ชื่อ ธีม ออก) ตรึงไว้เสมอ
 * ถ้าปล่อยให้เมนูดันของ พอใครซูมหน้าเว็บหรือจอไม่กว้างพอ กระดิ่งแจ้งเตือนกับปุ่มออกจะถูกดันหลุดขอบจอ
 */
/*
 * เมนูเลื่อนซ้ายขวาได้ แต่ห้ามถูกบีบจนหายไปทั้งแถบ
 * ของเดิม min-width เป็นศูนย์ พอหน้าต่างแคบลงและปุ่มฝั่งขวามีเยอะ เมนูจะหดจนมองไม่เห็นสักอัน
 * คนใช้จะนึกว่าเมนูหายไปเลย ต้องเหลือความกว้างพอให้เห็นว่ามีเมนูอยู่และเลื่อนดูได้
 */
.navtabs{display:flex;gap:2px;flex:1 1 auto;min-width:150px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.navtabs::-webkit-scrollbar{display:none}
.top>.btn,.top .who,.top .themebtn,.top .langbtn,.top .deptbadge{flex:none}
.navtab{flex:none;white-space:nowrap;padding:6px 12px;border-radius:8px;font-size:13.5px;color:var(--muted);font-weight:550}
.navtab:hover{background:var(--line-soft);color:var(--text)}
.navtab.on{background:var(--accent-soft);color:var(--accent)}

/* ---------- จัดลำดับคอนเทนต์ + สถานะเตรียมครบ ---------- */
.content-row{cursor:default}
.grip{color:var(--muted);font-size:15px;cursor:grab;user-select:none;flex:none;letter-spacing:-2px}
.grip:active{cursor:grabbing}
.seq{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:6px;background:var(--line-soft);color:var(--muted);font-size:12px;font-weight:700}
.movebtns{display:flex;gap:2px;flex:none}
.movebtns .btn{padding:4px 8px;font-size:13px;line-height:1}
.content-row.dragging{opacity:.45}
.content-row.dropinto{box-shadow:inset 0 2px 0 var(--accent)}
.statuswait{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--warn);border:1px solid var(--warn);background:var(--warn-soft,transparent)}
.statusready{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--ok);border:1px solid var(--ok);background:transparent}
.statusdone{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--ok);background:var(--ok-soft);border:1px solid var(--ok)}
.aib.done{color:var(--ok);background:var(--ok-soft);border-color:var(--ok)}
.donebar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;padding:14px;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel)}
.donebar b{font-size:15px}
.donebar span{flex:1;min-width:150px;color:var(--muted);font-size:13px}
.donebar.ready{border-color:var(--ok);background:var(--ok-soft)}
.donebar.ready b{color:var(--ok)}

/* ---------- หลักฐานการซื้อ ---------- */
.attlist{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.attrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.attrow.on{border-color:var(--ok);background:var(--ok-soft)}
.attrow.need{border-color:var(--warn);border-style:dashed}
.attmain{flex:1;min-width:0}
.attmain b{display:block;font-size:13.5px;font-weight:600}
.attmain small{display:block;font-size:12px;color:var(--muted)}
.attrow.on .attmain small{color:var(--ok)}
.req{font-style:normal;font-size:10.5px;padding:1px 6px;border-radius:99px;background:var(--warn);color:var(--warn-ink);margin-left:4px;vertical-align:1px}
.methods.bills{grid-template-columns:1fr}
.methods.bills .method{flex-direction:row;justify-content:flex-start;gap:12px;text-align:left;padding:14px}
.methods.bills .method i{font-size:22px}

/* ---------- รายการวัสดุประดิษฐ์ ---------- */
.mats{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.mat{border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--panel-2)}
.matline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.matline.sub{margin-top:8px}
.matno{width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:99px;background:var(--line);color:var(--muted);font-size:11px;font-weight:700}
.matname{flex:1;min-width:110px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.matprice{width:88px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);text-align:right}
.matlink{flex:1;min-width:130px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:13px}
.mateta{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:13px}
.mattotal{text-align:right;font-size:13.5px;color:var(--muted);margin-top:4px}
.mattotal b{color:var(--text);font-size:16px;margin-left:6px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px}

/* ---------- ใบแจ้งหนี้ ---------- */
.invedit{display:flex;gap:8px;flex-wrap:wrap;align-items:center;max-width:820px;margin:0 auto 14px;padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.invedit b{font-size:13px;color:var(--muted);white-space:nowrap}
.invedit input{flex:1;min-width:160px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2)}
.invoice{color:#111}
.invhead{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:2px solid #333;padding-bottom:14px;margin-bottom:16px}
.invco h1{font-size:19px;margin-bottom:4px}
.invco p{margin:2px 0;font-size:12.5px;color:#444}
.invtitle{text-align:right}
.invtitle b{display:block;font-size:17px}
.invtitle span{font-size:11.5px;color:#666}
.invtitle p{margin:4px 0 0;font-size:12.5px}
.invclient{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:16px}
.invclient>div{flex:1;min-width:220px;border:1px solid #ddd;border-radius:6px;padding:10px 12px}
.invclient small{display:block;font-size:11px;color:#777;letter-spacing:.04em}
.invclient b{font-size:14px}
.invclient p{margin:2px 0 0;font-size:12.5px;color:#444}
.invtable{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:16px}
.invtable th,.invtable td{border:1px solid #ccc;padding:7px 9px;vertical-align:top}
.invtable th{background:#f2f2f2;text-align:left}
.invtable .c-no{width:34px;text-align:center}
.invtable .c-qty{width:92px}
.invtable .c-amt{width:120px;text-align:right;font-variant-numeric:tabular-nums}
.invtable td small{display:block;font-size:11px;color:#777;margin-top:2px}
.invgroup td{background:#fafafa;font-weight:600;font-size:12.5px}
.invsum{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.invnote{flex:1;min-width:230px;font-size:12.5px}
.invnote p{margin:3px 0}
.invsmall{color:#777;font-size:11.5px;line-height:1.6}
.invtotals{border-collapse:collapse;min-width:290px;font-size:13px}
.invtotals td{padding:5px 10px;border-bottom:1px solid #eee}
.invtotals td:last-child{text-align:right;font-variant-numeric:tabular-nums;min-width:110px}
.invtotals .invline td{border-top:1px solid #999;font-weight:600}
.invtotals .invnet td{border-top:2px solid #333;border-bottom:none;font-weight:700;font-size:15px}
@media (max-width:640px){.grid3{grid-template-columns:1fr}}

/* ---------- ค่าใช้จ่ายหน้ากอง + เตือนบิลขาด ---------- */
.extrabox{margin:18px 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:hidden}
.extrabox h3{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.extrabox h3 b{color:var(--text)}
.extrabox h3 em{font-style:normal;font-size:12.5px}
.extrabox h3 .btn{margin-left:auto}
.extrarow{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-soft)}
.extrarow:last-child{border-bottom:none}
.extramain{flex:1;min-width:0}
.extramain b{display:block;font-size:14px}
.extramain small{color:var(--muted);font-size:12.5px}
.extrarow.off{background:var(--warn-soft,transparent)}
.extraamt{white-space:nowrap;font-variant-numeric:tabular-nums}
.matfree{font-size:12px;color:var(--ok);padding:6px 8px;white-space:nowrap}
.matsources{gap:6px}
.matsrc{padding:5px 11px;border:1px solid var(--line);border-radius:99px;font-size:12.5px;color:var(--muted);background:var(--panel)}
.matsrc.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.proofwarn{padding:12px 14px;margin-bottom:16px;border:1px solid var(--warn);border-radius:var(--radius);background:var(--warn-soft,transparent)}
.proofwarn>b{display:block;font-size:14px;color:var(--warn);margin-bottom:8px}
.proofwarn>div{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.proofwarn small{color:var(--muted);font-size:12px}

/* ---------- บิลของงาน ---------- */
.billbox{margin:18px 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:hidden}
.billbox h3{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.billbox h3 b{color:var(--text)}
.billrow{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.billrow:last-child{border-bottom:none}
.billmain{flex:1;min-width:140px}
.billmain b{display:block;font-size:14px}
.billmain small{color:var(--muted);font-size:12.5px}
.billdiff{font-size:12px;font-weight:600;color:var(--warn);white-space:nowrap}
.billrow.off{background:color-mix(in srgb,var(--warn) 8%,transparent);background:var(--warn-soft,transparent)}
.billok{font-size:12px;color:var(--ok);white-space:nowrap}
.billowed{padding:10px 14px;border-top:1px solid var(--line);font-size:13px;background:var(--panel-2)}
.billowed b{color:var(--accent)}
.billcard{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:11px 13px;border:1px solid var(--accent);background:var(--accent-soft);border-radius:10px;margin-bottom:12px}
.billcard b{flex:1 1 100%;font-size:14px}
.billcard small{flex:1;color:var(--muted);font-size:12.5px}
.attrow.pickbill{width:100%;text-align:left;cursor:pointer}
.attrow.pickbill:hover{border-color:var(--accent)}

/* ---------- ของที่รอส่ง ---------- */
.shipbox{margin:18px 0;border:1px solid var(--warn);border-radius:var(--radius);background:var(--panel);overflow:hidden}
.shipbox h3{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--warn)}
.shipbox h3 b{color:var(--text)}
.shipbox h3 em{font-style:normal;font-size:12px;color:var(--muted);font-weight:400}
.shiplist{display:flex;flex-direction:column}
.shiprow{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line-soft);font-size:13.5px;flex-wrap:wrap}
.shiprow:last-child{border-bottom:none}
.shiprow>b{flex:1;min-width:120px;font-weight:600}
.shipcontent{color:var(--muted);font-size:12.5px;min-width:80px}
.shipeta{font-size:12.5px;color:var(--muted);white-space:nowrap}
.shiprow.late .shipeta{color:var(--danger);font-weight:600}
.shiplink{font-size:12.5px;white-space:nowrap}
.shipstate{padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);font-size:13px}
.shiprow.in{opacity:.6}
.shiprow.in>b{text-decoration:line-through}
.find-warn{margin:-6px 0 12px;padding:8px 11px;border-radius:8px;background:var(--danger-soft,#fdeceb);color:var(--danger);font-size:12.5px;border:1px solid var(--danger)}
.method small{display:block;font-weight:400;font-size:11.5px;color:var(--muted);margin-top:-3px}

/* ---------- ใบออกกอง ---------- */
.callsum{display:flex;gap:18px;flex-wrap:wrap;padding:10px 0 14px;border-bottom:1px solid #ddd;margin-bottom:16px;font-size:13px;color:#555}
.callsum b{color:#111;font-size:15px;margin-right:4px}
.callsum .warn b{color:#c0392b}
.callblock{margin-bottom:22px;break-inside:avoid}
.callblock h2{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:16px;padding-bottom:6px;border-bottom:2px solid #333;margin-bottom:10px}
.callno{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;background:#111;color:#fff;font-size:13px;flex:none}
.callblock h2 em{font-style:normal;font-size:12px;font-weight:500;margin-left:auto}
.callblock h2 em.ok{color:#1f7a4d}
.callblock h2 em.warn{color:#c0392b}
.sheetnote{font-size:11.5px;color:#777;margin:4px 0 0}
.pwarn{font-size:12.5px;color:#c0392b;margin:8px 0 0}
.callfoot{display:flex;gap:26px;margin-top:34px;padding-top:14px;border-top:1px solid #ccc}
.callfoot div{flex:1;font-size:12px;color:#555}
.callfoot i{display:block;border-bottom:1px dotted #555;height:2.2em}

/* ---------- แถบคะแนนหน้าแรก ---------- */
.scorebar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 14px;margin-bottom:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.scorebar>b{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap;display:flex;flex-direction:column;line-height:1.35}
.scorebar>b small{font-weight:400;font-size:11px;opacity:.8}
.periodbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 14px;margin-bottom:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.periodbar>b{font-size:13px;color:var(--muted);white-space:nowrap}
.periodbar select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);font-size:13.5px}
.scorehint{font-size:12.5px;color:var(--muted)}
.scorechips{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.scorechip{display:inline-flex;align-items:baseline;gap:6px;padding:5px 12px;border-radius:99px;background:var(--panel-2);border:1px solid var(--line);font-size:13px;white-space:nowrap}
.scorechip i{font-style:normal;font-size:13px}
.scorechip b{font-size:14px;font-variant-numeric:tabular-nums}
.scorechip small{font-size:11px;color:var(--muted)}
.scorechip.r1{border-color:var(--warn);background:var(--warn-soft,transparent)}
.scorechip.r1 b{color:var(--warn)}
.scorechip.me{border-color:var(--accent);background:var(--accent-soft)}
.scorechip.me i{color:var(--accent);font-weight:700;font-size:11px}
.scoremore{white-space:nowrap;font-size:12.5px}
.scorebar.empty{border-style:dashed}

/* ---------- หน้าสรุปกอง ---------- */
.ovsec{margin-bottom:26px}
.ovhead{display:flex;align-items:center;gap:9px;margin-bottom:9px;font-size:14px;font-weight:600}
.ovhead span{font-size:12px;padding:1px 8px;border-radius:99px;background:var(--line);color:var(--muted);font-weight:600}
.ovhead em{font-style:normal;font-size:12.5px;color:var(--muted);font-weight:400}
.clearpts{margin-left:auto;font-size:12.5px;color:var(--danger)}
.clearpts:hover{background:var(--danger-soft,transparent)}
.ovhead.warn b{color:var(--warn)}
.ovhead.ok b{color:var(--ok)}
.ovhead.past b{color:var(--muted)}
.lead{font-size:12.5px;color:var(--muted);white-space:nowrap}
.lead .nolead{font-style:normal;opacity:.65}

/* ---------- หน้าทีม ---------- */
.rank{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:99px;background:var(--line);font-size:12px;font-weight:700;color:var(--muted)}
.rank.gold{background:var(--warn);color:var(--warn-ink)}
.ptbar{width:90px;height:5px;border-radius:99px;background:var(--line);overflow:hidden;flex:none}
.ptbar i{display:block;height:100%;background:var(--accent)}
.pts{font-size:13px;white-space:nowrap;min-width:76px;text-align:right}
.pts.adminpts{color:var(--muted);font-weight:400;font-size:12px}

/* ---------- ผู้ช่วยจัดของ ---------- */
.plangrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.plancard{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:hidden}
.plancard header{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:11px 13px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.plancard header b{font-size:15px}
.plancard header span{font-size:12px;color:var(--muted)}
.triphead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 13px;background:var(--panel-2);border-bottom:1px solid var(--line);font-size:13px}
.triphead i{font-style:normal;font-size:15px}
.triphead b{font-weight:650}
.triphead span{color:var(--muted);font-size:12px}
.triphead em{font-style:normal;margin-left:auto;font-size:11.5px;color:var(--muted)}
.plantask{display:flex;align-items:center;gap:9px;padding:9px 13px;border-bottom:1px solid var(--line-soft);font-size:13.5px;flex-wrap:wrap}
.plantask:last-child{border-bottom:none}
.plantask .time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12.5px;white-space:nowrap}
.plantask b{flex:1;min-width:110px;font-weight:550}
.plantask.ot{background:var(--warn-soft,#fdf3e7);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.plantask.late{background:var(--danger-soft,#fdeceb);background:color-mix(in srgb,var(--danger) 12%,transparent)}
.flag{font-style:normal;font-size:11px;padding:1px 7px;border-radius:99px;background:var(--danger);color:var(--danger-ink)}
.flag.ot{background:var(--warn)}

/* ---------- เด้งคะแนน ---------- */
.pointpop{
  position:fixed;left:50%;top:38%;transform:translate(-50%,-50%) scale(.6);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:22px 34px;border-radius:20px;z-index:200;pointer-events:none;
  background:var(--accent);color:var(--accent-ink);box-shadow:0 18px 50px rgba(91,95,199,.45);
  animation:popin .45s cubic-bezier(.2,1.5,.4,1) forwards;
}
.pointpop b{font-size:44px;line-height:1;font-weight:800;letter-spacing:-.02em}
.pointpop span{font-size:15px;opacity:.9}
.pointpop i{font-style:normal;font-size:13px;opacity:.85;margin-top:4px}
.pointpop.out{animation:popout .6s ease forwards}
@keyframes popin{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}60%{transform:translate(-50%,-50%) scale(1.08);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes popout{to{transform:translate(-50%,-130%) scale(.9);opacity:0}}
@media (prefers-reduced-motion:reduce){.pointpop{animation:none}.pointpop.out{opacity:0;transition:opacity .3s}}

/* ---------- ดูรูปที่เพิ่งถ่ายก่อนใช้ ---------- */
.shotwrap{position:fixed;inset:0;z-index:130;background:#0b0c10;display:flex;flex-direction:column}
/* ชื่อคลาสนี้ซ้ำกับหัวคอนเทนต์ในหน้าอ่านบท จึงต้องผูกไว้กับตัวดูรูปเท่านั้น
   ไม่งั้นชื่อเรื่องในหน้าอ่านบทจะกลายเป็นตัวเทาจัดกลาง */
.shotwrap .shothead{color:#c9ccd6;font-size:13px;text-align:center;line-height:1.4;
  padding:calc(12px + env(safe-area-inset-top)) 16px 10px}
.shotstage{flex:1;display:flex;align-items:center;justify-content:center;padding:0 14px;overflow:auto;min-height:0}
.shotstage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
/* ปุ่มอยู่ล่างจอเสมอ: บนไอโฟนแถบบนสุดเป็นพื้นที่ของติ่งจอ กดไม่ได้ */
.shotfoot{display:flex;gap:10px;background:#16171b;border-top:1px solid #2a2c34;
  padding:12px calc(14px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left))}
.shotfoot .btn{flex:1;justify-content:center;padding:14px 12px;font-size:15px;background:#22242c;border-color:#33353f;color:#eceef3}
.shotfoot .btn.primary{flex:1.6;background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ---------- แก้เอกสารก่อนพิมพ์ ---------- */
.doctools{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.docmark{font-size:12px;color:#b45309;background:rgba(217,119,6,.12);border-radius:999px;padding:3px 10px}
.docwarn{max-width:820px;margin:0 auto 10px;padding:10px 14px;border-radius:8px;font-size:12.5px;
  background:#fff8e6;border:1px solid #e8d9a8;color:#6b5a2a}
.paper.editing{outline:2px dashed var(--accent);outline-offset:6px}
.paper.editing *:focus{outline:none;background:var(--accent-soft)}
.paper .edited{background:rgba(217,119,6,.14);border-radius:3px}
.docnote{margin-top:24px}
.docnote .notebody{white-space:pre-wrap;font-size:13px;min-height:22px;color:#111}
.paper.editing .docnote .notebody:empty::before{content:attr(data-placeholder);color:#aaa}
@media print{
  .doctools,.docmark,.docwarn{display:none!important}
  .paper.editing{outline:none}
  .paper .edited{background:none!important}
}

.settingtabs{margin-bottom:20px;flex-wrap:wrap}

.refgrid{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.refgrid figure{margin:0;width:120px}
.refgrid img{width:120px;height:120px;object-fit:cover;border:1px solid #ddd;border-radius:6px;display:block}
.refgrid figcaption{font-size:11px;color:#555;margin-top:3px;line-height:1.3}
.signline{display:flex;align-items:flex-end;gap:16px;margin-top:14px;padding-top:10px;border-top:1px solid #ddd}
.signline small{display:block;font-size:11.5px;color:#666}
.signline b{display:block;font-size:13.5px;margin:2px 0}
.signline img{height:52px;background:#fff}
.signline.nosign i{display:block;width:220px;border-bottom:1px solid #999;height:26px}

.blocktitle{flex:1 1 220px;min-width:150px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);font-size:13px}

/* ---------- Render Ops: ภาพรวมและลูกค้า ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:26px}
.kpi{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:14px 16px}
.kpi span{display:block;font-size:12.5px;color:var(--muted)}
.kpi b{display:block;font-size:27px;font-weight:700;letter-spacing:-.02em;margin:3px 0 2px;line-height:1.1}
.kpi i{display:block;font-style:normal;font-size:12px;color:var(--muted)}
.kpi.bad{border-color:#e5484d;background:rgba(229,72,77,.07)}
.kpi.bad b{color:#c0392b}
.kpi.warn{border-color:#d97706;background:rgba(217,119,6,.08)}
.kpi.warn b{color:#b45309}
.kpi.good{border-color:#16a34a;background:rgba(22,163,74,.07)}
.kpi.good b{color:#15803d}
.opshead{font-size:15px;margin:0 0 12px}
.row.opstodo{align-items:center}
.row.opstodo.urgent{border-left:3px solid #e5484d}
.opsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.opscard{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:14px;display:flex;flex-direction:column;gap:10px}
.opscard .rowmain{text-align:left;padding:0}
.opsbar{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--line-soft)}
.opsbar i.done{background:#16a34a}
.opsbar i.wip{background:var(--accent)}
.opslegend{display:flex;gap:12px;font-size:11.5px;color:var(--muted)}
.gapline{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 12px;border-radius:9px;background:var(--line-soft);font-size:13px;margin-bottom:14px}
.gapline b{font-weight:650}
.gapline.alert{background:rgba(229,72,77,.1);color:#c0392b}
.clipadd{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.clipadd textarea{flex:1 1 260px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);font:inherit;resize:vertical}
.row [data-clipstatus]{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);font-size:13px;flex:none}

/* ---------- ใครอยู่ในกองนี้บ้าง ---------- */
.whohere{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-8px 0 16px;padding:9px 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.whohere>span{font-size:12px;color:var(--muted)}
.whohere b{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:4px 11px}
.whohere b i{font-style:normal;font-weight:400;font-size:11.5px;color:var(--muted)}
.itemwho{display:inline-block;margin-top:3px;font-size:11.5px;font-weight:600;color:#b45309;
  background:rgba(217,119,6,.14);border-radius:999px;padding:2px 9px}

/* ---------- หน้ากรอกค่าใช้จ่ายเพิ่มเติมของแต่ละกอง ---------- */
.costbox{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:16px;overflow:hidden}
.costbox h3{display:flex;align-items:center;gap:8px;font-size:14px;padding:13px 14px;margin:0;border-bottom:1px solid var(--line-soft)}
.costbox h3 em{font-style:normal;font-weight:400;font-size:12.5px;color:var(--muted)}
.costadd{display:flex;gap:8px;flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--line-soft)}
.costsum{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;
  background:var(--accent-soft);border:1.5px solid var(--accent);font-size:15px;margin-bottom:10px}

/* ---------- ขั้นเสนอครีเอทีฟและแผ่นเซ็นชื่อ ---------- */
.item.propose{align-items:center}
.item.propose .estprice{width:130px;flex:none;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);text-align:right}
/* รูปตัวอย่างของพร็อพ — หลายรูปต่อชิ้น กดที่รูปเพื่อดูใหญ่ กดกากบาทเพื่อเอาออก */
.refpics{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:none}
.refthumb{position:relative;width:52px;height:52px;flex:none;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);padding:0;background:var(--panel-2);display:block}
.refthumb img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.refthumb i{position:absolute;top:1px;right:1px;width:17px;height:17px;border-radius:99px;
  background:rgba(12,14,24,.66);color:#fff;font-size:11px;font-style:normal;line-height:17px;
  text-align:center;cursor:pointer}
.refthumb i:hover{background:var(--danger)}
.refadd{white-space:nowrap}
.billwho{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}

/*
 * ปุ่มย่อ/กางของกล่องบนหน้าโปรเจ็ค กับบรรทัดสรุปที่ขึ้นแทนตอนย่อ
 * ย่อแล้วยังต้องรู้ว่าข้างในมีอะไร ไม่งั้นต้องกางทุกอันเพื่อหา
 */
.foldbtn{flex:none;opacity:.6}
.headgap{flex:1}
/* แถวคลิปในมุมมองเฉพาะคลิป — ลากจัดลำดับได้เหมือนหน้าจัดลำดับ Content */
.cliporder{gap:10px}
.cliporder .ogrip{cursor:grab;color:var(--muted);flex:none}
.cliporder .ono{flex:none;min-width:24px;height:24px;display:inline-grid;place-items:center;border-radius:7px;
  background:var(--line-soft);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.cliporder .omove{display:inline-flex;flex-direction:column;gap:2px;flex:none}
.cliporder .omove .btn{padding:0 6px;font-size:10px;line-height:1.3}
.cliporder.dragging{opacity:.45}
.opsnote{display:block;font-style:normal;font-weight:400;font-size:12px;color:var(--muted);margin-top:3px}
.briefbox .briefhead>b,.dirhead>b{flex:none}
.briefhead:hover .foldbtn,.dirhead:hover .foldbtn{opacity:1}
.foldpeek{flex:1;min-width:0;font-size:12.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foldpeek.line{display:block;flex:none;margin:6px 0 0}
.briefbox .briefhead{display:flex;align-items:center;gap:10px}
.briefbox .briefhead>b{flex:none}
.dirhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* กล่องตรวจงานของ Host ในหน้าเขียน */
.hostbox{padding:13px 15px;margin:16px 0;border-color:var(--accent)}
.writecol>.hostbox:first-child{margin-top:0}
.sendtop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.sendtop i{font-style:normal;font-size:12.5px;color:var(--muted);flex:1;min-width:150px}
@media(max-width:600px){.sendtop .btn{width:100%}.sendtop i{flex:none}}
.fixtop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.fixtop>i{font-style:normal;font-size:12.5px;color:var(--muted);flex:1;min-width:150px}
.fixpick{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.fixpick b{display:block;font-size:14px;margin:0 0 9px}
.fixpick .btnrow{margin:0}
.fixpick i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin:9px 0 0;line-height:1.55}
@media(max-width:600px){.fixpick .btnrow .btn{width:100%}}
.hostbox.ok{border-color:var(--ok)}
.hostbox b{font-size:14.5px}
.hostbox .filechip b{font-size:12.5px;font-weight:500;word-break:break-all}

/* กล่องรายการพร็อพที่ทีมเสนอ ในหน้าเขียนของครีเอทีฟ */
.propcheck{padding:13px 15px;margin:16px 0}
.propcheck.sent{border-color:var(--accent)}
.propcheck.ok{border-color:var(--ok)}
.propcheck.fix{border-color:var(--warn)}
.propcheckrow{align-items:flex-start;gap:12px}
.propcheckrow .main small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;white-space:normal}
.signedbar.sent{border-color:var(--accent);background:var(--accent-soft,transparent)}
.signedbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;margin-bottom:16px;
  border:1.5px solid #16a34a;background:rgba(22,163,74,.08)}
.signedbar.warn{border-color:#d97706;background:rgba(217,119,6,.09)}
.signedbar b{display:block;font-size:14px}
.signedbar span{font-size:12.5px;color:var(--muted)}
.signedbar>div{flex:1;min-width:180px}
.signshow{height:44px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px}
.signwrap{position:relative;margin-bottom:14px}
#signpad{width:100%;height:190px;background:#fff;border:1.5px dashed var(--line);border-radius:12px;touch-action:none;display:block}
.signclear{position:absolute;right:10px;top:10px}
@media (max-width:700px){.item.propose .estprice{width:110px}}

/* ---------- ทะเบียนลูกค้าและผู้รับผิดชอบ ---------- */
.clientbox{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:20px;overflow:hidden}
.clientbox h3{display:flex;align-items:center;gap:8px;font-size:14px;padding:13px 14px;border-bottom:1px solid var(--line-soft);margin:0}
.clientbox h3 b{background:var(--line-soft);border-radius:999px;padding:1px 9px;font-size:12px}
.clientbox h3 em{font-style:normal;font-weight:400;font-size:12.5px;color:var(--muted)}
.clientlist{display:flex;flex-direction:column}
.clientrow{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-soft)}
.clientrow.due{background:rgba(217,119,6,.08)}
.clientmain{flex:1;min-width:0}
.clientmain b{display:block;font-size:14px}
.clientmain small{display:block;font-size:12px;color:var(--muted)}
.clientrow select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);font-size:13.5px;max-width:170px}
.clientedit{padding:14px;border-bottom:1px solid var(--line-soft);background:var(--line-soft)}
.clientadd{display:flex;gap:8px;padding:12px 14px;flex-wrap:wrap;border-top:1px solid var(--line-soft)}
.clientadd input,.clientadd select{padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);flex:1 1 150px}
.clientsuggest{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:0 14px 12px}
.clientsuggest span{font-size:12px;color:var(--muted)}
.clientfoot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--line-soft);background:var(--line-soft)}
.rotatebox{padding:14px;border-top:1px solid var(--line)}
.rotatebox>b{display:block;margin-bottom:10px;font-size:13.5px}
.rotatebox table.bill{background:var(--panel)}
.rotatebox table.bill th,.rotatebox table.bill td{border-color:var(--line);color:var(--text)}
.rotatebox table.bill th{background:var(--line-soft)}

/* ---------- งานที่อ่านบทแล้วแต่ยังไม่ได้คิดของ ---------- */
.resumebox{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;
  border:1.5px solid var(--accent);background:var(--accent-soft);border-radius:12px;padding:14px 16px;margin:0 0 16px}
.resumebox b{display:block;font-size:14.5px}
.resumebox span{font-size:12.5px;color:var(--muted)}

/* ---------- แถบขั้นตอนของทั้งกอง ---------- */
.stepbar{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin:0 0 20px;overflow:hidden}
.stepbar ol{list-style:none;margin:0;padding:14px 16px;display:flex;gap:8px;flex-wrap:wrap}
.stepbar li{flex:1 1 150px;display:flex;gap:9px;align-items:center;min-width:0}
.stepbar li .num{flex:none;width:24px;height:24px;border-radius:99px;display:grid;place-items:center;
  font-size:12px;font-weight:650;border:1.5px solid var(--line);color:var(--muted)}
.stepbar li b{display:block;font-size:13px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stepbar li small{display:block;font-size:11.5px;color:var(--muted)}
.stepbar li.ok .num{background:#16a34a;border-color:#16a34a;color:#fff}
.stepbar li.ok b{color:var(--muted);font-weight:450}
.stepbar li.now .num{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.stepbar li.now b{color:var(--accent)}
.stepbar li.todo{opacity:.55}
.stepbar li.empty{opacity:.4}
.stepnext{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;
  padding:12px 16px;border-top:1px solid var(--line-soft);background:var(--accent-soft)}
.stepnext b{font-size:14px;display:block}
.stepnext span{font-size:12.5px;color:var(--muted)}
.stepnext.done{background:rgba(22,163,74,.09)}

/* ---------- กล่องจบงาน: ฝั่งทีม Prop กับฝั่งบัญชี แยกกัน ---------- */
.finishbox{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px;align-items:stretch}
.finishside{display:flex;flex-direction:column}
.finishside .finishlist{flex:1}
@media (max-width:760px){.finishbox{grid-template-columns:1fr}}
.finishside{border:1.5px solid var(--line);border-radius:12px;padding:16px}
.finishside h4{font-size:15px;margin:0 0 10px}
/* ชื่อคลาสนี้เคยเป็น wrap ซึ่งไปชนกับ .wrap ที่เป็นกรอบหน้าเว็บทั้งหน้า
   การ์ดฝั่งซ้ายเลยถูกบีบเหลือครึ่งเดียวของช่องตัวเอง ไม่สมมาตรกับฝั่งขวา */
.finishside.packup{border-color:var(--accent)}
.finishside.money{border-color:#16a34a}
.finishside.done{background:var(--line-soft);border-style:solid}
.finishside.packup.done{background:var(--accent-soft)}
.finishside.money.done{background:rgba(22,163,74,.09);border-color:#16a34a}
.finishstamp{font-size:12.5px;color:var(--muted);margin:0 0 12px}
.finishlist{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:7px}
.finishlist li{display:flex;gap:8px;align-items:flex-start;font-size:13px}
.finishlist li span{flex:none;width:15px;text-align:center}
.finishlist li.ok{color:var(--muted)}
.finishlist li.ok b{font-weight:450}
.finishlist li.no span{color:#d97706}
.finishlist li b{font-weight:550}
.finishlist li small{display:block;color:#b45309;font-size:12px;margin-top:1px}
.btn.big.packup{width:100%;background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.big.money{width:100%;background:#16a34a;border-color:#16a34a;color:#fff}
.btn.big.money:hover{background:#15803d;border-color:#15803d}

/* ---------- ปุ่มรีเฟรช + ป้ายบอกว่าข้อมูลสดแค่ไหน ---------- */
.btn.refresh{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;flex:none}
.btn.refresh i{font-style:normal;font-size:11.5px;color:var(--muted)}
.btn.refresh svg{display:block;opacity:.75}
.btn.refresh:hover svg{opacity:1}
.btn.refresh.spinning svg{animation:sp .8s linear infinite;opacity:1}

/* ---------- กล่องบอกว่ากำลังทำงานอยู่ ไม่ได้ค้าง ---------- */
.working{display:flex;align-items:flex-start;gap:12px;margin-top:14px;padding:14px 16px;
  border:1px solid var(--accent);background:var(--accent-soft);border-radius:12px}
.working .spin{width:20px;height:20px;border-width:2.5px;flex:none;margin-top:2px}
.working b{display:block;font-size:14px}
.working small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px}

/* ---------- ให้ฟรี กับ ให้เช่า: แยกสีให้เห็นแต่ไกล ---------- */
.choicebox{border:1.5px solid var(--line);border-radius:12px;padding:14px}
.choicebox h4{font-size:15px;margin:0 0 3px}
.choicebox p{font-size:12.5px;color:var(--muted);margin:0 0 11px}
.choicebox.free{border-color:#16a34a;background:rgba(22,163,74,.07)}
.choicebox.free h4{color:#15803d}
.choicebox.rent{border-color:#d97706;background:rgba(217,119,6,.08)}
.choicebox.rent h4{color:#b45309}
.btn.free{background:#16a34a;border-color:#16a34a;color:#fff;width:100%}
.btn.free:hover{background:#15803d;border-color:#15803d}
.btn.rent{background:#d97706;border-color:#d97706;color:#fff;width:100%}
.btn.rent:hover{background:#b45309;border-color:#b45309}
.btn.small.shoot{border-color:var(--accent);color:var(--accent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .choicebox.free h4{color:#4ade80}
  :root:not([data-theme="light"]) .choicebox.rent h4{color:#fbbf24}
}
:root[data-theme="dark"] .choicebox.free h4{color:#4ade80}
:root[data-theme="dark"] .choicebox.rent h4{color:#fbbf24}

/* ---------- แถบกรองสถานะกอง + งานของฉัน ---------- */
.chipbar{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;
      background:var(--panel);color:var(--muted);font-size:13.5px;font-weight:550;min-height:34px}
.chip i{font-style:normal;font-size:12px;color:var(--muted);background:var(--line-soft);border-radius:999px;padding:1px 7px}
.chip:hover{border-color:var(--accent);color:var(--text)}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.chip.on i{background:var(--accent);color:var(--accent-ink)}
.tabdot{font-style:normal;font-size:11px;font-weight:700;background:#e5484d;color:#fff;border-radius:999px;padding:1px 6px;margin-left:5px}
.opengroup{margin-bottom:14px}
.ovhead.warn b{color:#c0392b}
/* กล่องแจ้งงานใหม่: กดได้ (ต่างจากกล่องคะแนนที่แค่โชว์แล้วหาย) และอยู่บนสุดไม่บังรายการ */
.pointpop.assign{top:auto;bottom:calc(24px + env(safe-area-inset-bottom));padding:14px 22px;border-radius:16px;
  pointer-events:auto;cursor:pointer;max-width:min(420px,92vw)}
.pointpop.assign b{font-size:26px}
.pointpop.assign span{font-size:14px}
.pointpop.assign i{opacity:.9;text-align:center}

/* ---------- iPhone / iPad ---------- */
/*
 * Safari บนไอโฟนจะซูมหน้าเข้าเองทุกครั้งที่กดช่องกรอกที่ตัวอักษรเล็กกว่า 16px
 * แล้วไม่ซูมกลับ ทีมจะต้องถ่างนิ้วออกเองทุกครั้ง จึงบังคับ 16px บนจอแคบ
 */
@media (max-width:820px){
  /*
   * ต้องใช้ !important เพราะกฎที่เจาะจงกว่าอย่าง .etpick ตั้งตัวอักษรเล็กไว้
   * แล้วมันชนะกฎกว้าง ๆ ข้างล่างนี้ ทำให้ไอโฟนซูมเข้าทุกครั้งที่กดช่องนั้น (เจอกับช่องพิมพ์แชทมาแล้ว)
   */
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important}
  select{min-height:36px}
  .movebtns .btn{padding:8px 10px;min-height:34px;min-width:34px}
  .item .tick,.tick{width:30px;height:30px}
}
/* จอมีติ่ง/ขอบโค้ง: กันแถบบนไปอยู่ใต้นาฬิกา และปุ่มล่างไปอยู่ใต้ขีดโฮม */
.top{padding-top:calc(10px + env(safe-area-inset-top));
     padding-left:calc(16px + env(safe-area-inset-left));
     padding-right:calc(16px + env(safe-area-inset-right))}
.wrap{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.sheet{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.sheetbar{padding-top:calc(12px + env(safe-area-inset-top))}
/* เอกสารที่ตารางกว้างกว่าจอ ให้เลื่อนในกรอบของตัวเอง ไม่ลากทั้งหน้าไปทางข้าง */
@media (max-width:700px){
  .paper{padding:20px 16px}
  .psec{overflow-x:auto}
  table.bill{font-size:12px}
  table.bill th,table.bill td{padding:6px 7px}
}

/*
 * จอไม่กว้างพอ (รวมถึงตอนที่คนซูมหน้าเว็บ 125% ขึ้นไป) เมนูลงไปเป็นแถวของตัวเองใต้โลโก้
 * กลุ่มปุ่มฝั่งขวาจึงอยู่ครบบนแถวบนเสมอ ไม่โดนเมนูดันออกนอกจอ
 */
@media (max-width:1000px){
  .navtabs{order:3;width:100%;flex:1 1 100%;justify-content:flex-start;border-top:1px solid var(--line-soft);
    padding-top:6px;margin-top:2px;gap:4px}
  .top{flex-wrap:wrap}
  .top .crumb{display:none}          /* จอแคบ ชื่องานยาวเกินจะแสดงพอดี — มีชื่อในหน้าอยู่แล้ว */
  .top .who{margin-left:auto}
  .btn.refresh i{display:none}       /* เหลือแค่ไอคอน ตัวหนังสือบอกเวลาอัปเดตไปอยู่ใน title แทน */
}

@media (max-width:700px){

  /* แถวรายการบนมือถือ: ชื่ออยู่บรรทัดบน ส่วนป้าย/ปุ่มลงมาบรรทัดล่าง ไม่บีบกัน */
  .row{flex-wrap:wrap;row-gap:8px}
  .rowmain,.row .main{flex:1 1 100%}
  .row .btn,.row .lead,.row .cd,.row .aib{flex:none;white-space:nowrap}
  .row .bar{flex:1 1 60px;min-width:60px}
  .item{flex-wrap:wrap;row-gap:8px}
  .item .main{flex:1 1 100%}
  .item .btn{flex:none}
  .item .state{flex:1}
  .plantask{row-gap:4px}
  .plantask b{flex:1 1 100%;order:2}
  .plantask .time{order:1}
  .plantask .tag{order:3}
  .cdbar{gap:8px}
  .headrow{gap:10px}
  .actions .btn{flex:1 1 auto;justify-content:center}
  .scorebar{gap:8px;row-gap:10px}
  .scorebar>b{flex:1 1 100%}
  .scorechips{flex:1 1 auto}
  .scoremore{margin-left:auto}
}
.planjob{display:none}
/* การ์ดใบแบ่งงานในหน้างาน */
.planbox{display:block;width:100%;text-align:left;margin:18px 0;border:1px solid var(--accent);border-radius:var(--radius);background:var(--accent-soft);cursor:pointer}
.planbox:hover{filter:brightness(1.03)}
.planbox header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 14px 8px}
.planbox header b{font-size:15px}
.planbox header span{font-size:12.5px;color:var(--muted)}
.planpeople{display:flex;flex-wrap:wrap;gap:8px 18px;padding:0 14px 10px}
.planperson{display:flex;align-items:center;gap:8px;font-size:13px}
.planperson b{font-weight:600}
.planperson small{color:var(--muted);font-size:12px;white-space:nowrap}
.planbox footer{padding:8px 14px;border-top:1px solid var(--accent);font-size:12px;color:var(--muted)}
/* แถวงานในใบแบ่งงาน */
.plantask[role="button"]{cursor:pointer}
.plantask[role="button"]:hover{background:var(--accent-soft)}
.plantask.done{opacity:.55}
.plantask.done b{text-decoration:line-through}
.plantask.next{box-shadow:inset 3px 0 0 var(--accent)}
.flag.next{background:var(--accent);color:var(--accent-ink)}
.tickbox{color:var(--muted);font-size:15px;margin-left:auto}
.plancard header{flex-wrap:wrap}

/* พิมพ์ใบแบ่งงาน: คนละหน้า และมีหัวกระดาษบอกว่างานไหน */
@media print{
  /* กระดาษต้องเป็นขาว-ดำเสมอ ถึงคนสั่งพิมพ์จะใช้โหมดมืดอยู่ก็ตาม */
  :root,:root[data-theme="dark"],:root[data-theme="light"]{
    --bg:#fff; --panel:#fff; --panel-2:#fff; --line:#bbb; --line-soft:#ddd;
    --text:#111; --muted:#555; --accent:#111; --accent-soft:#fff; --accent-ink:#fff;
    --ok:#111; --ok-soft:#fff; --warn:#111; --danger:#111; --shadow:none;
    color-scheme:light;
  }
  .no-print,.top,.head p,.kicker{display:none!important}
  body,.wrap,.plancard,.plantask{background:#fff!important;color:#111!important}
  .plantask.done{opacity:1}
  .plantask.done b{text-decoration:line-through}
  .plantask.next{box-shadow:none}
  .wrap{padding:0;max-width:none}
  .plangrid{display:block}
  .plancard{border:none;break-inside:auto;margin:0}
  .plangrid.perpage .plancard{page-break-after:always}
  .plangrid.perpage .plancard:last-child{page-break-after:auto}
  .plancard header{border-bottom:2px solid #333;background:#fff;padding:0 0 8px;margin-bottom:6px}
  .plancard header b{font-size:20px}
  .triphead{background:#f4f4f4!important;border-bottom:1px solid #999;padding:6px 4px;font-size:12.5px}
  .planjob{display:block;flex-basis:100%;font-size:12px;color:#555;margin-top:2px}
  .plantask{border-bottom:1px solid #ddd;padding:9px 2px;font-size:13.5px}
  .plantask.ot,.plantask.late{background:#fff}
  .plantask .time{font-weight:600;color:#000}
  .tickbox{font-size:17px;color:#000}
  .flag{background:#fff!important;color:#000;border:1px solid #000}
}


/* ---------- สถานะการคิดของ AI ---------- */
.aib{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px;white-space:nowrap;border:1px solid transparent}
.aib.work{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.aib.stale{background:var(--warn-soft,#fdf3e7);background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn);border-color:var(--warn)}
.aib.fail{background:var(--danger-soft,#fdeceb);background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger);border-color:var(--danger)}
.aib .spin{width:11px;height:11px;border-width:2px;border-color:var(--line);border-top-color:currentColor}
.waitbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;margin-bottom:14px;border:1px solid var(--accent);background:var(--accent-soft);border-radius:var(--radius);font-size:13px}
.pick[data-act="setspeed"]{flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 14px;border-radius:10px}
.pick[data-act="setspeed"] b{font-size:13.5px}


/* ---------- โหมดสแกนบิล ---------- */
.scanwrap{position:fixed;inset:0;z-index:120;background:#0b0c10;display:flex;flex-direction:column}
.scanbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#16171b;border-bottom:1px solid #2a2c34;color:#eceef3;
  padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left))}
.scanbar b{font-size:13px;font-weight:500;color:#c9ccd6}
.scanbar .btn{background:#22242c;border-color:#33353f;color:#eceef3}
.scanbar .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.scanstage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:14px;overflow:hidden;touch-action:none}
.scanstage img{max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
#scansvg{position:absolute;left:0;top:0;pointer-events:none}
#scanpoly{fill:rgba(91,95,199,.18);stroke:#8b8dfb;stroke-width:2}
.scanhandle{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(139,141,251,.25);border:2px solid #8b8dfb;touch-action:none;cursor:grab}
.scanhandle::after{content:"";position:absolute;inset:11px;border-radius:50%;background:#8b8dfb}
.scanhandle:active{cursor:grabbing;background:rgba(139,141,251,.45)}
@media (max-width:700px){.scanbar{gap:6px}.scanbar b{flex:1 1 100%;order:5;font-size:12px}}


/* ---------- บิลเงินสด: ตามแบบฟอร์มบิลเงินสดมาตรฐาน ---------- */
.cashform{--ink:#2233a8;color:#111;padding:26px 28px}
.cashtop{display:flex;gap:0;border:1px solid var(--ink);border-bottom:none}
.cashstamp{flex:1;min-height:86px;padding:10px 12px;border-right:1px solid var(--ink);display:flex;flex-direction:column;justify-content:center;gap:2px}
.cashstamp b{font-size:15px;color:#111}
.cashstamp span{font-size:11.5px;color:#444;line-height:1.5}
.cashno{display:flex;width:250px}
.cashno>div{flex:1;padding:8px 10px;text-align:center;border-left:1px solid var(--ink)}
.cashno>div:first-child{border-left:none}
.cashno small{display:block;font-size:12px;font-weight:700;color:var(--ink)}
.cashno i{display:block;font-style:normal;font-size:9.5px;color:var(--ink);letter-spacing:.03em}
.cashno u{display:block;text-decoration:none;border-bottom:1px solid #999;height:2.2em}
.cashband{background:var(--ink);color:#fff;text-align:center;padding:7px 8px}
.cashband b{display:block;font-size:19px;letter-spacing:.04em}
.cashband span{font-size:10.5px;letter-spacing:.22em}
.cashwho{display:flex;border:1px solid var(--ink);border-top:none}
.cashfield{flex:1;display:flex;align-items:flex-end;gap:8px;padding:7px 10px;border-left:1px solid var(--ink)}
.cashfield:first-child{border-left:none}
.cashfield.wide{flex:2}
.cashfield label{font-size:12px;color:var(--ink);white-space:nowrap;font-weight:600;line-height:1.15}
.cashfield label i{display:block;font-style:normal;font-size:8.5px;letter-spacing:.03em}
.cashfield u{flex:1;text-decoration:none;border-bottom:1px dotted #666;min-height:1.5em;font-size:13px;padding-left:4px}
.cashtable{width:100%;border-collapse:collapse;border:1px solid var(--ink);border-top:none;font-size:13px}
.cashtable th{background:#eceefb;color:var(--ink);border:1px solid var(--ink);padding:5px 6px;font-size:12px;line-height:1.2}
.cashtable th i{display:block;font-style:normal;font-size:8.5px;letter-spacing:.03em}
.cashtable td{border:1px solid var(--ink);padding:6px 8px;vertical-align:top;height:2.1em}
.cashtable td small{display:block;font-size:10.5px;color:#666;margin-top:1px}
.cashtable .c-qty{width:82px;text-align:center}
.cashtable .c-unit,.cashtable .c-amt{width:104px;text-align:right;font-variant-numeric:tabular-nums}
.cashtable tr.cashpad td{height:2.1em}
.cashwords{background:#eceefb}
.cashwords label{color:var(--ink);font-size:11.5px;font-weight:700;margin-right:10px;display:inline-block}
.cashwords label i{font-style:normal;font-size:8.5px;display:block}
.cashwords span{font-size:13px}
.cashtotal{background:#eceefb;font-weight:700;font-size:15px}
.cashtotal label{display:block;color:var(--ink);font-size:11px;font-weight:700}
.cashtotal label i{font-style:normal;font-size:8.5px;display:block}
.cashsign{display:flex;gap:40px;margin-top:16px}
.cashsign>div{flex:1;font-size:12px;color:var(--ink)}
.cashsign i{font-style:normal;font-size:9px;margin-left:4px}
.cashsign u{display:block;text-decoration:none;border-bottom:1px dotted #666;height:2.4em;margin-top:2px}
@media print{
  .cashform{padding:0}
  .cashform,.cashform *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* =============== Render Ops: คิวกอง ภาระงาน เงินค้างรับ เอกสาร แผนงาน ======== */

/* ช่องเลือกแผนกของแอดมิน อยู่บนแถบบน ต่อจากเมนู */
.deptpick{flex:none;font-size:12.5px;padding:4px 8px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);color:var(--muted);max-width:150px}

.newshoot{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.newshoot>b{font-size:14px}
/*
 * แถวของช่องกรอก — ชิดล่างเสมอ
 * บางช่องมีคำอธิบายใต้ชื่อช่อง ป้ายจึงสูงไม่เท่ากัน ถ้าจัดกึ่งกลางช่องกรอกจะเยื้องกันทั้งแถว
 */
.frow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
/* ช่องกรอกในแถวเดียวกันสูงเท่ากันหมด ขอบบนขอบล่างจึงตรงกันทั้งแถว ไม่ใช่แค่ชิดล่าง */
.frow .field>input:not([type="checkbox"]),.frow .field>select{height:42px}
.frow .field{flex:1;min-width:150px}
.frow .field,.frow .field:last-child{margin-bottom:14px}


/* ---- ภาระงาน ---- */
.loadbox{border:1px solid var(--line);border-radius:10px;background:var(--card);margin-bottom:10px;overflow:hidden}
.loadbox>header{display:flex;justify-content:space-between;padding:9px 12px;background:var(--line-soft);font-size:13.5px}
.loadrow{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line-soft);font-size:13px}
.loadrow .who{flex:none;width:110px;font-weight:600}
.loadbar{flex:1;height:8px;border-radius:5px;background:var(--line-soft);overflow:hidden}
.loadbar i{display:block;height:100%;background:var(--accent)}
.loadrow b{flex:none;font-variant-numeric:tabular-nums;width:66px;text-align:right}
.loadrow i{flex:none;font-style:normal;font-size:11.5px;color:var(--muted);width:82px}
.loadrow.over .loadbar i{background:#c0392b}
.loadrow.over b,.loadrow.over i{color:#c0392b}

/* ---- เงินค้างรับ: อายุหนี้ ---- */
.ageline{border-left:3px solid var(--line)}
.ageline.due{border-left-color:#d99a2b;background:#fdf9ef}
.ageline.late{border-left-color:#c0392b;background:#fdefee}
.ageline.late b{color:#c0392b}

/* ---- เรทการ์ด ---- */
.ratecard p{font-size:12.5px;color:var(--muted);margin:6px 0 0;line-height:1.45}
.rateprice{font-size:22px;font-weight:700;margin:6px 0 2px;letter-spacing:-.02em}
.rateprice i{font-style:normal;font-size:12.5px;font-weight:500;color:var(--muted);margin-left:3px}

/* ---- ใบเสนอราคา: ยอดรวมที่คิดสดตอนพิมพ์ ---- */
.quotesum{display:flex;flex-direction:column;gap:0;margin-bottom:14px}
.qline{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.qline span{flex:1}
.qline i{font-style:normal;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.qline b{flex:none;font-variant-numeric:tabular-nums}
.qline.total{font-weight:700}
.qline.grand{border-bottom:none;padding-top:10px;font-size:16px;font-weight:700;color:var(--accent)}

/* ---- เอกสารพิมพ์: ใบเสนอราคาและสัญญา ---- */
.doc{background:#fff;color:#1a1a1a;border:1px solid var(--line);border-radius:8px;padding:26px 28px;
  max-width:760px;margin:0 auto 18px;line-height:1.65;font-size:13.5px}
.dochead{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid #1a1a1a;padding-bottom:12px;margin-bottom:16px;flex-wrap:wrap}
.doctitle{font-size:20px;display:block}
.dochead small{font-size:11.5px;color:#777;display:block}
.docme{text-align:right;max-width:290px;font-size:11.5px}
.docparties{display:flex;gap:20px;margin-bottom:14px;flex-wrap:wrap}
.docparties>div{flex:1;min-width:180px}
.docparties>div:last-child{text-align:right}
.docparties small{display:block;font-size:11.5px;color:#777}
.doctable{width:100%;border-collapse:collapse;margin-bottom:12px;font-size:13px}
.doctable th,.doctable td{border:1px solid #ccc;padding:6px 9px;text-align:left;vertical-align:top}
.doctable th{background:#f2f2f4;font-size:12px}
.doctable .r{text-align:right;font-variant-numeric:tabular-nums}
.doctable tr.hl td{background:#eceefb;font-weight:700}
.docnote{font-size:12px;color:#666;line-height:1.6}
.doc .clauses{padding-left:20px}
.doc .clauses li{margin-bottom:9px}
.docsign{display:flex;gap:40px;margin-top:26px;font-size:12.5px}
.docsign>div{flex:1}
/* คำเตือนเรื่องทนายกับงานสปอนเซอร์ ต้องเป็นสีเหลืองทั้งธีมสว่างและธีมมืด */
:root[data-theme="dark"] .error.notice.lawyer,
.error.notice.lawyer{background:#fdf3d7;border-color:#e8d9a8;color:#6b5a2a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .error.notice.lawyer{background:#fdf3d7;border-color:#e8d9a8;color:#6b5a2a}}

/* ---- แผนงาน ---- */
.tablewrap{overflow-x:auto;margin-bottom:16px}
.metrics{width:100%;border-collapse:collapse;font-size:13px;min-width:420px}
.metrics th,.metrics td{border-bottom:1px solid var(--line-soft);padding:8px 10px;text-align:left;white-space:nowrap}
.metrics th{font-size:12px;color:var(--muted);font-weight:600}
.metrics .r{text-align:right;font-variant-numeric:tabular-nums}
.metrics .warnnum{color:#8a7333;font-weight:700}
.opshead.wave{display:inline-block;padding:3px 11px;border-radius:20px;font-size:12.5px;margin-top:20px}
.opshead.w1{background:#fdefee;color:#a5352a}
.opshead.w2{background:#fdf3d7;color:#6b5a2a}
.opshead.w3{background:var(--accent-soft);color:var(--accent)}
.taskrow select{flex:none;max-width:140px}
.taskrow.isdone .main b{color:var(--muted);text-decoration:line-through}
.taskrow.isstuck{border-left:3px solid #c0392b}

@media print{
  .noprint,.top{display:none!important}
  body{background:#fff}
  .wrap{padding:0;max-width:none}
  .doc{border:none;border-radius:0;padding:0;max-width:none;margin:0;font-size:12px}
  .doc .clauses li{break-inside:avoid}
}

@media (max-width:820px){
  .deptpick{max-width:112px;font-size:12px}
  /*
   * แถวช่องกรอกเรียงเป็นคอลัมน์บนจอเล็ก แต่ของเดิมยังชิดขวาตามค่าของแถวแนวนอน
   * ผลคือทุกช่องลอยไปอยู่ขวาและกว้างไม่เท่ากัน ดูเหมือนหน้าเพี้ยน · ต้องยืดเต็มความกว้างและชิดซ้าย
   */
  .frow{flex-direction:column;gap:8px;align-items:stretch}
  .frow .field{width:100%;min-width:0;max-width:none}
  .frow .field>input,.frow .field>select,.frow .field>textarea{width:100%}
  .loadrow{flex-wrap:wrap}
  .loadrow .who{width:auto;flex:1}
  .loadrow i{width:auto}
  .loadbar{order:5;flex-basis:100%}
  .doc{padding:16px 14px}
  .docparties>div:last-child{text-align:left}
}
.deptset{flex:none;max-width:130px;font-size:12px}
@media (max-width:820px){.deptset{max-width:100%;flex:1 1 100%}}

/* แผนกที่ยังสร้างหน้าจอไม่เสร็จ */
.soonbox{border:1px dashed var(--line);border-radius:10px;background:var(--card);padding:22px 20px;text-align:center}
.soonbox b{display:block;font-size:15px;margin-bottom:6px}
.soonbox p{margin:0 auto;max-width:440px;color:var(--muted);font-size:13px;line-height:1.6}

/* ================================= แผนก Content ================================= */

/* กองหนึ่งกองในหน้ารวม พร้อมแถบความคืบหน้าสี่ขั้น */
.cshoot{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:12px 14px;margin-bottom:10px}
.cshoot.late{border-color:#e0b4ae}
.cshoot .rowmain{display:block;width:100%;text-align:left}
.cprog{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:9px;font-size:12px;color:var(--muted)}
.cprog span.ok{color:#2e7d4f;font-weight:600}
.clate{margin-top:8px;font-size:12px;color:#a5352a;background:#fdefee;border-radius:6px;padding:6px 9px}

/* ไดเร็กชั่นของกอง — ทีมเห็นตลอดเวลาที่คิดไอเดียและตอนเขียน */
/*
 * ไดเร็กชั่นคือบรรทัดที่คนอ่านตอนกำลังคิดงาน จึงต้องเป็นตัวที่ใหญ่ที่สุดในกลุ่มนี้
 * ชื่อการ์ดกับชื่อคนย้ายไปเป็นป้ายเล็ก ๆ รอบ ๆ ไม่แย่งสายตากับตัวเนื้อหา
 */
.dircard{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;
  background:var(--panel);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:16px}
.dircard.small{margin-bottom:14px;font-size:13px}
.dircard.empty2{border-left-color:var(--line)}
.dirhead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:11px;
  padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.dirhead b{font-size:11.5px;font-weight:600;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.dirhead .btn{margin-left:auto}
.dircard p{margin:0;font-size:17px;line-height:1.75;white-space:pre-wrap;word-break:break-word}
.dircard p.muted{color:var(--muted);font-size:14.5px}
.dircard.small p{font-size:14px}
/* ใครเป็นใครในกองนี้ — อ่านเป็นป้ายคู่ ชื่อหน้าที่เล็ก ชื่อคนเด่นกว่า */
.dirwho{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.who1{display:flex;flex-direction:column;gap:1px;padding:5px 12px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel-2)}
.who1 i{font-style:normal;font-size:10.5px;color:var(--muted);letter-spacing:.02em}
.who1 b{font-size:13px}
.who1.miss{border-style:dashed}
.who1.miss b{color:var(--warn)}
.dircard.small .dirwho{display:none}

/* กระดานไอเดีย — พิมพ์ได้ทันที ไม่มีปุ่มเซฟ */
.idearow{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:9px;
  background:var(--card);padding:10px 12px;margin-bottom:8px}
.idearow.picked{border-color:var(--accent);background:var(--accent-soft)}
.idearow .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.idearow .who{flex:none;font-size:11.5px;color:var(--muted);padding-top:6px}
.pickbox{flex:none;width:24px;height:24px;border-radius:6px;border:1.5px solid var(--line);
  background:var(--panel);color:#fff;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;margin-top:4px}
button.pickbox{cursor:pointer}
button.pickbox:hover{border-color:var(--accent)}
.pickbox.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ideat{font-weight:600;font-size:14px;border:none;background:transparent;padding:2px 0;width:100%}
.idean{border:none;background:transparent;padding:0;font-size:13px;resize:none;overflow:hidden;width:100%;line-height:1.5}
.ideat:focus,.idean:focus{outline:none;background:var(--line-soft);border-radius:5px;padding:4px 6px}

/* แท็บสลับคลิปในกองเดียวกัน ตอนเขียน */
.otabs{display:flex;gap:4px;overflow-x:auto;margin-bottom:14px;padding-bottom:4px;scrollbar-width:none}
.otabs::-webkit-scrollbar{display:none}
.otab{flex:none;white-space:nowrap;padding:6px 12px;border-radius:8px;font-size:13px;
  color:var(--muted);border:1px solid var(--line);background:var(--card)}
.otab.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}

/* ช่องเขียน Outline */
.obox span i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);font-weight:400;margin-top:2px}
.obox textarea{line-height:1.6}
.obox textarea[readonly]{background:var(--line-soft);color:var(--muted)}

/* เรื่องย่อที่ลูกค้าเห็น */
.csyn{border-bottom:1px solid #e6e6e6;padding:12px 0}
.csyn:last-of-type{border-bottom:none}
.csyn b{display:block;font-size:14px;margin-bottom:4px}
.csyn p{margin:0;font-size:13px;line-height:1.65}
.csyn small{display:block;margin-top:5px;font-size:12px;color:#666}

@media (max-width:820px){
  .idearow{flex-wrap:wrap}
  .idearow .who{width:100%;padding-top:0}
}

/* ทะเบียนลูกค้าฝั่งบริหาร */
.addonrow{align-items:flex-end;border-bottom:1px solid var(--line-soft);padding-bottom:10px;margin-bottom:10px}
.addonrow .btn{flex:none;margin-bottom:2px}
.addonline{font-size:12.5px;color:var(--muted);margin:4px 0 0}
.field span i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);font-weight:400;margin-top:2px}

/* ตั้งค่าทีมงาน: แยกเป็นก้อนตามแผนก จะได้ตั้งค่าทีละกลุ่ม */
.deptgroup{border:1px solid var(--line);border-radius:10px;background:var(--card);margin-bottom:14px;overflow:hidden}
.deptgroup>header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:9px 13px;background:var(--line-soft)}
.deptgroup>header b{font-size:13.5px}
.deptgroup>header span{font-size:12px;color:var(--muted)}
.deptgroup>header i{font-style:normal;font-size:11.5px;color:var(--muted);margin-left:auto}
.deptgroup .row{border:none;border-top:1px solid var(--line-soft);border-radius:0;margin:0}

/* ติ๊กจดจำในหน้าล็อกอิน */
.remember{display:flex;align-items:flex-start;gap:9px;margin:2px 0 14px;cursor:pointer}
.remember input{width:17px;height:17px;flex:none;margin-top:1px;accent-color:var(--accent)}
.remember span{font-size:13px;line-height:1.4}
.remember i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px}
#loginform{display:flex;flex-direction:column}

/* โลโก้บริษัท: ตัวอักษรตามสีตัวหนังสือของธีม จุดกลมเป็นสีแบรนด์เสมอ */
.top .logo{display:flex;align-items:center;flex:none;color:var(--text)}
.brandmark{display:block;width:auto}
/* ชื่อเว็บ Render Ops — วางต่อท้ายโลโก้ ไม่ใช้ตัวหนา จะได้ไม่แข่งกับโลโก้ */
.loginlogo{margin:0 0 10px;line-height:0;color:var(--text);display:flex;align-items:center;gap:2px}
.loginlogo span{font-size:18px;font-weight:400;line-height:1;color:var(--muted);letter-spacing:.01em}
.opsname{font-style:normal;font-weight:400;font-size:13px;color:var(--muted);margin-left:6px;letter-spacing:.01em}
@media (max-width:700px){.top .logo .brandmark{height:20px}}

/* ======================================= โปรเจ็ค ======================================= */

/* เลือกประเภทงานก่อน เพราะประเภทเป็นตัวตัดสินเส้นทางทั้งหมด */
.kindgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.kindcard{text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--card);
  padding:16px 17px;display:flex;flex-direction:column;gap:5px;cursor:pointer}
.kindcard:hover{border-color:var(--accent);background:var(--accent-soft)}
.kindcard b{font-size:15.5px}
.kindcard small{font-size:12.5px;color:var(--muted)}
.kindcard i{font-style:normal;font-size:11.5px;color:var(--muted);line-height:1.55;margin-top:5px}
.kindtag{align-self:flex-start;margin-top:8px;font-size:11px;padding:2px 9px;border-radius:20px;
  background:var(--line-soft);color:var(--muted)}
.kindtag.on{background:var(--accent-soft);color:var(--accent)}

.projrow select{flex:none;max-width:150px}
.briefout{margin-top:14px;border-top:1px solid var(--line-soft);padding-top:12px}
/*
 * กล่องที่ต้องอ่านก่อนคิดงาน — หัวข้อกับเนื้อหาต้องไม่เท่ากัน
 * เดิมชื่อหัวข้อกับข้อความจริงตัวเท่ากันและอยู่บรรทัดเดียวกัน ตาแยกไม่ออกว่าอันไหนคือของจริง
 * จึงทำหัวข้อเป็นป้ายเล็กสีจาง แล้วให้เนื้อหาตัวโตขึ้นและอยู่คนละคอลัมน์
 */
.detline{display:grid;grid-template-columns:104px minmax(0,1fr);gap:2px 12px;margin:0;
  padding:9px 0;border-top:1px solid var(--line-soft);font-size:15px;line-height:1.7}
.detline:first-of-type{border-top:0;padding-top:2px}
.detline i{font-style:normal;color:var(--muted);margin:0;font-size:12px;padding-top:4px}
.detline span{white-space:pre-wrap;word-break:break-word}
@media (max-width:640px){
  .detline{grid-template-columns:minmax(0,1fr);gap:2px;padding:10px 0}
}
.briefbox{padding:16px 18px}
.briefbox>b{display:block;font-size:11.5px;font-weight:600;letter-spacing:.05em;color:var(--muted);
  text-transform:uppercase;margin-bottom:10px}
.bigline{margin:0;font-size:16px;font-weight:550;line-height:1.7;white-space:pre-wrap;word-break:break-word}

/* กล่องรอฟุตเทจจากลูกค้า */
.footbox{border-left:3px solid #d99a2b}
.footbox.done{border-left-color:#2e7d4f}
.footbox b{display:block;margin-bottom:5px}
.footbox p{margin:0 0 10px;font-size:13px;color:var(--muted);line-height:1.6}

@media (max-width:820px){
  .projrow select{max-width:100%;flex:1 1 100%}
}
.fromproj{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px dashed var(--line);
  border-radius:9px;padding:10px 13px;margin-bottom:14px;font-size:12.5px;color:var(--muted)}
.fromproj .btn{margin-left:auto}
.projrow.late{border-color:#e0b4ae}
.flowline{font-size:12px !important;color:var(--muted);margin-top:4px !important}
.briefcard{border-left:3px solid var(--accent)}
.packinfo{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:9px;
  background:var(--panel);padding:11px 13px;margin-top:12px}
.packinfo b{display:block;font-size:13.5px}
.packinfo span{display:block;font-size:13px;margin-top:3px}
.packinfo i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:5px;line-height:1.55}
.packinfo small{display:block;font-size:11.5px;color:var(--muted);margin-top:7px}
.backtorate{margin-top:2px;align-self:flex-start}

/* คลังไอเดีย และปุ่มเก็บเข้าคลัง */
/* ปุ่มนี้มีข้อความสองแบบ ความกว้างจึงไม่เท่ากันและดันช่องอื่นในแถวเยื้องกัน จึงล็อกความกว้างไว้ */
.stockbtn{flex:none;width:126px;justify-content:center;text-align:center;font-size:11.5px;white-space:nowrap;color:var(--muted)}
.stockbtn.on{color:#b45309;font-weight:600}
/*
 * แถวที่ถูกเก็บเข้าคลังค่อย ๆ จางออกไปก่อนหน้าจะวาดใหม่
 * ถ้าหายวับทันที คนกดจะไม่แน่ใจว่าหายไปเพราะกดถูกอันหรือกดผิดอัน
 */
.row.leaving{opacity:0;transform:translateX(14px);pointer-events:none;
  transition:opacity .24s ease,transform .24s ease}
@media (prefers-reduced-motion:reduce){.row.leaving{transition:none}}
.stockbox{margin:12px 0}
.stockbox>b{display:block;font-size:14px}
.row select[data-clipwriter]{flex:none;width:170px;max-width:170px}
.row .stockbtn~.tag{flex:none;min-width:58px;text-align:center}
@media (max-width:820px){
  .row select[data-clipwriter]{width:auto;max-width:100%;flex:1 1 100%}
  .stockbtn{width:100%}
}

/* แท็บกระดานไอเดีย */
.btabs{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 10px}
.btab{padding:5px 12px;border-radius:8px;font-size:12.5px;border:1px solid var(--line);
  background:var(--card);color:var(--muted);white-space:nowrap}
.btab:hover{border-color:var(--accent)}
.btab.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);font-weight:600}
.btab i{font-style:normal;font-size:11px;opacity:.75;margin-left:3px}
.btab.add{font-size:14px;line-height:1;padding:5px 11px}
.opshead .btn.small{margin-left:9px;font-size:11.5px;font-weight:400}
.brename{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.brename input{flex:1;min-width:180px}
.boardfull{margin-top:10px;font-size:12.5px;color:#6b5a2a;background:#fdf3d7;
  border:1px solid #e8d9a8;border-radius:8px;padding:8px 11px}

/* สลับมุมมองในหน้าโปรเจ็ค */
/*
 * ปุ่มสลับมุมมอง — ตัวที่ยังไม่ได้เลือกต้องอ่านออกด้วย
 * เดิมพื้นรางจางเกือบเท่าพื้นหน้า และตัวหนังสือของตัวที่ไม่ได้เลือกเป็นสีจาง คนจึงเห็นแค่ปุ่มขาวปุ่มเดียว
 */
.viewswitch{display:inline-flex;gap:4px;flex-wrap:wrap;margin:18px 0 14px;padding:4px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px}
.vbtn{flex:1;min-width:130px;padding:8px 14px;border-radius:9px;font-size:13px;font-weight:550;
  color:var(--text);opacity:.88;white-space:nowrap;transition:opacity .12s ease,background .12s ease}
.vbtn:hover{opacity:1;background:var(--line-soft)}
.vbtn.on{background:var(--panel);color:var(--text);opacity:1;font-weight:650;
  box-shadow:0 1px 2px rgba(16,17,25,.1),0 2px 8px rgba(16,17,25,.06)}
.vbtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (max-width:640px){.viewswitch{display:flex;width:100%}}

/* ================================ แจ้งเตือน ================================= */
.bell{position:relative;flex:none;padding:6px 8px;line-height:0;color:var(--muted)}
.bell:hover{color:var(--text)}
.bell.on{background:var(--accent-soft);color:var(--accent)}
.belldot{position:absolute;top:1px;right:1px;min-width:15px;height:15px;padding:0 4px;border-radius:9px;
  background:#c0392b;color:#fff;font-size:9.5px;font-style:normal;font-weight:700;line-height:15px;
  text-align:center;border:2px solid var(--panel)}

.notifywrap{position:fixed;inset:0;z-index:60;background:rgba(15,17,26,.32);display:flex;justify-content:flex-end}
.notifypanel{width:min(400px,100%);height:100%;background:var(--panel);border-left:1px solid var(--line);
  overflow-y:auto;padding:0 0 24px}
.notifypanel>header{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;padding:15px 16px 13px;
  background:var(--panel);border-bottom:1px solid var(--line)}
.notifypanel>header b{flex:1;font-size:14.5px;letter-spacing:-.01em}
.unreadnum{display:inline-block;min-width:18px;padding:0 5px;margin-left:5px;border-radius:9px;
  background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700;line-height:18px;text-align:center}
/* ปุ่มไอคอนบนหัวกล่องแจ้งเตือน — ขนาดเท่ากันทุกปุ่ม อยู่ระนาบเดียวกับชื่อกล่อง */
.notifypanel>header .nico{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:9px;background:var(--panel);
  color:var(--muted);cursor:pointer}
.notifypanel>header .nico:hover{border-color:var(--accent);color:var(--accent)}
.notifypanel>header .nico.on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}

.notifyrow{display:flex;gap:10px;width:100%;text-align:left;padding:13px 16px;border-bottom:1px solid var(--line-soft)}
.notifyrow:hover{background:var(--line-soft)}
.ndot{flex:none;width:6px;height:6px;border-radius:50%;background:transparent;margin-top:6px}
.notifyrow.new .ndot{background:var(--accent)}
.notifyrow.new b{font-weight:650}
.nmain{flex:1;min-width:0}
.notifyrow b{display:block;font-size:13.5px;line-height:1.45;font-weight:550}
.notifyrow small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.notifyrow i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:5px}

/* ================================ ใบงานกอง ================================= */
.crewrow{align-items:flex-end;margin-bottom:8px}
.crewrow .btn{flex:none;margin-bottom:2px}
.placebox{margin-bottom:12px}
.placebox>b{display:block;margin-bottom:8px;font-size:13.5px}
.maplink{display:inline-block;margin-top:6px;font-size:12.5px;color:var(--accent)}
.readydot{font-style:normal;font-size:11px;color:#2e7d4f;background:#e7f5ec;border-radius:20px;padding:1px 8px;margin-left:5px}
.verdict .cnote{flex:1 1 220px;min-width:160px;font-size:13px}
.error.notice.fixnote{background:#fdefee;border-color:#e0b4ae;color:#a5352a}

/* ================================ ปฏิทินกอง ================================= */
/* ---------- ปฏิทิน ----------
 * ช่องวันต้องเป็นช่องจริง ๆ มีกรอบและพื้น ไม่ใช่ตัวเลขลอยอยู่บนหน้า
 * เดิมคลาสของช่องวันไม่มีสไตล์เลย ปฏิทินเลยออกมาเป็นตารางตัวเลขเปล่า ๆ
 */
.calbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.calbar b{font-size:17px}
.calwrap{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden;
  box-shadow:var(--shadow)}
.calhead{display:grid;grid-template-columns:repeat(7,1fr);background:var(--panel-2);
  border-bottom:1px solid var(--line)}
.calhead span{text-align:center;font-size:12px;font-weight:600;color:var(--muted);padding:9px 0}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr)}
.cday{min-height:118px;padding:8px 8px 6px;border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:4px;
  background:var(--panel);transition:background-color .12s ease}
.cday:nth-child(7n){border-right:0}
.cday>b{font-size:14px;font-weight:600;color:var(--text);line-height:1}
.cday.out{background:var(--panel-2)}
.cday.has:hover{background:var(--panel-2)}
/* วันนี้ — ให้หาเจอในพริบตา */
.cday.today{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.cday.today>b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink)}
.cmore{font-style:normal;font-size:11px;color:var(--muted);padding-left:2px}

.cchip{display:block;width:100%;text-align:left;font-size:12px;line-height:1.35;padding:5px 7px;
  border-radius:7px;background:var(--panel-2);border:1px solid var(--line);
  border-left:3px solid var(--accent);color:var(--text);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cchip:hover{background:var(--accent-soft);border-color:var(--accent)}
.cchip.ok{border-color:#a8cbb4;border-left-color:var(--ok);background:#f2f8f4}
:root[data-theme="dark"] .cchip.ok{background:var(--ok-soft);border-color:var(--ok)}

@media (max-width:820px){
  .cday{min-height:76px;padding:6px 5px 5px}
  .cday>b{font-size:12.5px}
  .calhead span{font-size:11px;padding:7px 0}
  .cchip{font-size:10px;padding:3px 5px;border-left-width:2px}
}

@media (max-width:820px){
  .crewrow{flex-wrap:wrap}
  .cchip{font-size:9.5px}
  .verdict .cnote{flex-basis:100%}
}
/* Outline ที่ล็อกแล้ว อ่านเป็นข้อความ ไม่ใช่ช่องกรอกที่ต้องเลื่อนอ่าน */
.oread{margin-bottom:16px}
.oread>span{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.oread p{margin:0;font-size:14px;line-height:1.7;white-space:pre-wrap}
.oread p.muted{color:var(--muted);font-style:italic}
/* ปุ่มลบโปรเจ็ค วางแยกไว้ท้ายหน้า จะได้ไม่กดโดนตอนทำงานปกติ */
.dangerzone{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:32px;padding:14px 16px;
  border:1px solid var(--line);border-radius:11px;background:var(--card)}
.dangerzone>div{flex:1;min-width:200px}
.dangerzone b{display:block;font-size:13.5px}
.dangerzone small{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5}
/* แถบเลิกทำหลังลบโปรเจ็ค */
.undobar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;padding:11px 14px;
  border:1px solid var(--line);border-radius:10px;background:var(--card)}
.undobar span{flex:1;min-width:180px;font-size:13px}

/* ================================ ใบออกกอง ================================= */
.logotoggle{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);cursor:pointer}
.logotoggle input{width:16px;height:16px;accent-color:var(--accent)}
.orderrow{align-items:flex-end;padding-bottom:9px;border-bottom:1px solid var(--line-soft);margin-bottom:9px}
.field.narrow{flex:0 0 108px;min-width:96px}
/* ช่องเลือกวัน — ต้องกว้างพอให้เห็น วว/ดด/ปปปป ครบกับไอคอนปฏิทิน ไม่งั้นปีโดนตัด */
.field.daypick{flex:0 0 210px;min-width:190px}
.field.daypick input[type=date]{width:100%}
.dayread{display:block;font-style:normal;font-size:12px;color:var(--muted);margin:5px 0 0}
input[type=date]{cursor:pointer}
@media(max-width:640px){.field.daypick{flex:1 1 100%}}
.ordername{flex:1;min-width:160px;padding-bottom:6px}
.ordername b{display:block;font-size:13.5px}
.ordername small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.castrow{margin-bottom:10px}

}
@media (max-width:820px){
  .field.narrow{flex:1 1 46%}
  .orderrow{flex-wrap:wrap}
}

/* ================================== หน้าแรกรวมของทุกทีม ================================== */
.scoretoggle{display:flex;justify-content:flex-end;margin:-6px 0 6px}
.homerow{display:flex;align-items:center;gap:12px;width:100%;text-align:left}
.homerow .hdate{flex:none;width:88px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.homerow .main{flex:1;min-width:0}
.homerow .main b{display:block;font-size:13.5px;line-height:1.4}
.homerow .main small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.homerow .hwho{flex:none;font-size:12px;color:var(--muted);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lanetag{flex:none}
.homerow{border-left:3px solid var(--line)}
.homerow.lane-shoot{border-left-color:#6b7fd7}
.homerow.lane-write{border-left-color:#d99a2b}
.homerow.lane-edit{border-left-color:#2e9e78}
.cchip.lane-shoot{border-left:3px solid #6b7fd7}
.cchip.lane-write{border-left:3px solid #d99a2b}
.cchip.lane-edit{border-left:3px solid #2e9e78}

@media (max-width:820px){
  .homerow{flex-wrap:wrap;row-gap:6px}
  .homerow .hdate{width:auto}
  .homerow .hwho{max-width:none}
}
.targetbox{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.targetbox>div:first-child{flex:1;min-width:220px}
.targetbox b{display:block;font-size:13.5px}
.targetbox small{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5}
.targetnum{flex:none;font-size:19px;font-weight:700;letter-spacing:-.02em}
.leadreal{display:block;margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
.leadreal b{display:inline;font-size:inherit}

/* งานของแต่ละคน — ข้อเท็จจริง ไม่ใช่คะแนน */
.workrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border:1px solid var(--line);
  border-radius:10px;background:var(--card);padding:12px 14px;margin-bottom:9px}
.wname{flex:0 0 170px;min-width:140px}
.wname b{display:block;font-size:13.5px}
.wname small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.wcells{flex:1;display:flex;gap:22px;flex-wrap:wrap}
.wcell span{display:block;font-size:11px;color:var(--muted)}
.wcell b{display:block;font-size:18px;font-weight:600;line-height:1.25;font-variant-numeric:tabular-nums}
.wcell i{display:block;font-style:normal;font-size:11px;color:var(--muted)}
@media (max-width:820px){.wname{flex-basis:100%}.wcells{gap:16px}}

/* ================================ ใบออกกอง — เอกสารพิมพ์ ================================= */
/*
 * กระดาษที่ทีมถือไปกอง ตั้งใจให้แยกหัวข้อออกจากกันด้วยสีและตัวเลข
 * เพราะคนอ่านมันตอนยืนอยู่หน้ากอง ไม่ได้นั่งอ่านทีละบรรทัด
 * สีทุกสีเป็นพื้นอ่อนตัวหนังสือเข้ม ปรินต์ขาวดำก็ยังอ่านออก
 */
.calldoc{background:#fff;color:#1a1a1a;border:1px solid var(--line);border-radius:10px;
  max-width:780px;margin:0 auto 20px;padding:0 0 28px;overflow:hidden;line-height:1.6;font-size:13.5px}
.calldoc,.calldoc *{-webkit-print-color-adjust:exact;print-color-adjust:exact}

.cband{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  background:#14161f;color:#fff;padding:20px 26px}
.cband-logo{margin-bottom:9px;color:#fff}
.cband-left b{display:block;font-size:23px;letter-spacing:-.02em;line-height:1.15}
.cband-left span{display:block;font-size:12.5px;opacity:.72;margin-top:3px}
.cband-right{text-align:right}
.cband-right b{display:block;font-size:17px}
.cband-right span{display:block;font-size:11.5px;opacity:.72;margin-top:3px}
.cnote{margin:0;padding:11px 26px;background:#f4f5f8;font-size:12.5px;color:#555;border-bottom:1px solid #e6e7ec}

.csec{padding:20px 26px 4px}
.csec h3{display:flex;align-items:center;gap:10px;font-size:14.5px;margin:0 0 13px;padding-bottom:8px;
  border-bottom:2px solid currentColor}
.csec h3 i{flex:none;width:23px;height:23px;border-radius:6px;font-style:normal;font-size:12.5px;
  font-weight:700;line-height:23px;text-align:center;background:currentColor}
.csec.t-blue h3{color:#0a7cdc}
.csec.t-indigo h3{color:#5b5bd6}
.csec.t-amber h3{color:#b4741a}
.csec.t-green h3{color:#1f7a53}
.csec h3 i{color:#fff}
.csec.t-blue h3 i{background:#0a7cdc}
.csec.t-indigo h3 i{background:#5b5bd6}
.csec.t-amber h3 i{background:#b4741a}
.csec.t-green h3 i{background:#1f7a53}

.cfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#e6e7ec;border:1px solid #e6e7ec;border-radius:7px;overflow:hidden;margin-bottom:12px}
.cfacts>div{background:#fff;padding:9px 11px}
.cfacts span{display:block;font-size:10.5px;color:#888}
.cfacts b{display:block;font-size:13.5px;margin-top:2px}

.ccrew{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.cperson{border:1px solid #e6e7ec;border-radius:7px;padding:7px 11px;background:#fafbfc;min-width:130px}
.cperson span{display:block;font-size:10.5px;color:#888}
.cperson b{display:block;font-size:13px;margin-top:1px}

.cplace{display:flex;align-items:center;gap:12px;border:1px solid #e6e7ec;border-left:4px solid #0a7cdc;
  border-radius:7px;padding:10px 13px;margin-bottom:8px}
.cplace-no{flex:none;width:22px;height:22px;border-radius:50%;background:#0a7cdc;color:#fff;
  font-size:11.5px;font-weight:700;line-height:22px;text-align:center}
.cplace-main{flex:1;min-width:0}
.cplace-main b{display:block;font-size:13.5px}
.cplace-main a{display:block;font-size:10px;color:#0a7cdc;word-break:break-all;margin-top:2px}
.cplace-time{display:flex;gap:16px;flex:none}
.cplace-time span{display:block;font-size:10.5px;color:#888}
.cplace-time b{display:block;font-size:14px;font-variant-numeric:tabular-nums}

.crun{border-left:2px solid #e6e7ec;margin-left:58px}
.crow{position:relative;display:flex;gap:14px;padding:0 0 14px 18px}
.crow:last-child{padding-bottom:2px}
.ctime{position:absolute;left:-58px;top:0;width:46px;text-align:right;font-size:12.5px;font-weight:700;
  color:#5b5bd6;font-variant-numeric:tabular-nums}
.crow::before{content:"";position:absolute;left:-5px;top:5px;width:8px;height:8px;border-radius:50%;
  background:#5b5bd6;border:2px solid #fff}
.cbody b{display:block;font-size:13.5px}
.cbody small{display:block;font-size:11.5px;color:#777;margin-top:2px}

.ckit-row{border:1px solid #ecdcbe;border-left:4px solid #b4741a;background:#fdf8ee;border-radius:7px;
  padding:10px 13px;margin-bottom:8px}
.ckit-row b{display:block;font-size:13px}
.ckit-row p{margin:3px 0 0;font-size:12.5px;white-space:pre-wrap;color:#5c4a2a}

.ctable{width:100%;border-collapse:collapse;font-size:12.5px}
.ctable th{background:#eef7f2;color:#1f7a53;text-align:left;padding:7px 9px;font-size:11px;border-bottom:1px solid #cfe4d9}
.ctable td{padding:8px 9px;border-bottom:1px solid #eee;vertical-align:top}
.ctable tr:nth-child(even) td{background:#fafbfa}
.ctable td b{display:block;font-size:13px}
.ctable td small{display:block;font-size:11px;color:#888;margin-top:1px}
.ckind{display:inline-block;padding:2px 8px;border-radius:20px;background:#eef7f2;color:#1f7a53;font-size:11px;white-space:nowrap}
.cphone{font-variant-numeric:tabular-nums;white-space:nowrap}
.ccall{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

.clipsheet{break-before:page;page-break-before:always;padding:22px 26px 0}
.cliphead{display:flex;align-items:center;gap:13px;padding-bottom:11px;margin-bottom:14px;border-bottom:2px solid #5b5bd6}
.clipno{flex:none;width:34px;height:34px;border-radius:9px;background:#5b5bd6;color:#fff;
  font-size:16px;font-weight:700;line-height:34px;text-align:center}
.cliphead b{display:block;font-size:16px;line-height:1.25}
.cliphead span{display:block;font-size:11.5px;color:#888;margin-top:2px}
.dpart{border-left:3px solid #e6e7ec;padding-left:12px;margin-bottom:13px}
.dpart>span{display:block;font-size:10.5px;color:#5b5bd6;font-weight:700;letter-spacing:.04em;margin-bottom:3px}
.dpart p{margin:0;font-size:13px;line-height:1.7;white-space:pre-wrap}
.dpart.warnpart{border-left-color:#b4741a;background:#fdf8ee;padding:10px 12px;border-radius:0 7px 7px 0}
.dpart.warnpart span{color:#b4741a}
.cboxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:16px}
.cbox{border:1px solid #e6e7ec;border-radius:7px;padding:10px 12px;background:#fafbfc}
.cbox span{display:block;font-size:10.5px;color:#888;margin-bottom:3px}
.cbox p{margin:0;font-size:12.5px;line-height:1.6;white-space:pre-wrap}
.cbox.amber{border-color:#ecdcbe;background:#fdf8ee}
.cbox.amber span{color:#b4741a}

.csign{display:flex;gap:36px;margin:30px 26px 0;padding-top:16px;border-top:1px solid #e6e7ec}
.csign>div{flex:1}
.csign span{display:block;font-size:10.5px;color:#888}
.csign b{display:block;font-size:13px;margin-top:1px}
.csign u{display:block;text-decoration:none;border-bottom:1px dotted #999;height:2.6em}

@media print{
  /*
   * ใบนี้ต้องออกมาเหมือนที่เห็นบนจอ
   * เบราว์เซอร์ตัดพื้นหลังกับแถบสีทิ้งตอนพิมพ์โดยปริยาย แถบหัวใบ กล่องของลูกค้า และหัวตาราง
   * เลยกลายเป็นขาวโล่ง ทั้งที่บนจอมีสี จึงต้องสั่งให้พิมพ์สีตามจริง
   */
  .calldoc,.calldoc *{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .calldoc{border:none;border-radius:0;max-width:none;margin:0;font-size:12.5px;background:#fff!important;color:#1a1a1a!important}
  .csec{break-inside:avoid}
  .csec h3,.cliphead{break-after:avoid}
  .ctable tr,.cplace,.ckit-row,.crow{break-inside:avoid}
  /* แถบคั่นที่ถูกยกมาเป็นหัวใบ ต้องไม่ถูกตัดออกจากคอนเทนต์ของมัน */
  .clipsheet .runbar{margin:0 0 12px;break-after:avoid;break-inside:avoid}
  .dpart,.cbox{break-inside:avoid}
}
@media (max-width:820px){
  .cfacts{grid-template-columns:repeat(2,1fr)}
  .cplace{flex-wrap:wrap}
  .cband,.csec,.clipsheet{padding-left:16px;padding-right:16px}
}
/*
 * บนมือถือ ตารางนักแสดงประกอบหกคอลัมน์กว้างเกินจอจนตัวหนังสือหลุดขอบ
 * จึงคลี่เป็นการ์ดทีละคน โดยเอาชื่อหัวคอลัมน์มาไว้หน้าค่าของมันเอง
 * ตอนพิมพ์กระดาษกว้างพอ จึงยังเป็นตารางเหมือนเดิม
 */
@media (max-width:640px){
  .ctable,.ctable tbody,.ctable tr,.ctable td{display:block;width:100%}
  .ctable thead{display:none}
  .ctable tr{border:1px solid #e3e9e6;border-radius:8px;padding:9px 11px;margin-bottom:8px;background:#fff}
  .ctable tr:nth-child(even) td{background:none}
  .ctable td{border:0;padding:3px 0;display:flex;gap:10px;align-items:baseline}
  .ctable td:before{content:attr(data-th);flex:none;width:92px;color:#8a8f9c;font-size:11px}
  .ctable td b,.ctable td small{display:block}
  .cphone,.ccall{white-space:normal;word-break:break-word}
}

/* ลากสลับลำดับการถ่าย */
.orderlist{border:1px solid var(--line);border-radius:9px;overflow:hidden}
.orderrow{display:flex;align-items:center;gap:12px;padding:11px 13px;background:var(--card);
  border-top:1px solid var(--line-soft);cursor:grab}
.orderrow:first-child{border-top:none}
.orderrow.dragging{opacity:.4;background:var(--accent-soft)}
.orderrow .ono,.orderrow .ordername{transition:none}
.orderlist{will-change:contents}
.ogrip{flex:none;color:var(--muted);font-size:15px;letter-spacing:-2px;user-select:none;cursor:grab}
.ono{flex:none;width:24px;height:24px;border-radius:6px;background:var(--line-soft);color:var(--muted);
  font-size:12px;font-weight:700;line-height:24px;text-align:center}
.orderrow .ordername{flex:1 1 170px;min-width:140px;padding:0}
/*
 * ทุกช่องยกเว้นชื่อเรื่อง กว้างตายตัว
 * เดิมทุกช่องยืดตามเนื้อหา ป้ายสถานะที่ยาวไม่เท่ากัน (รอลูกค้า กับ รอลูกค้าอนุมัติบท)
 * จึงดันช่องเวลาและสถานที่ให้เลื่อนไปมาทีละแถว ตากวาดลงมาแล้วไม่ตรงกันสักคอลัมน์
 */
.otime{flex:0 0 122px;margin:0}
.otimes{flex:0 0 244px;display:block}
.otlab{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.otrow{display:flex;align-items:center;gap:5px}
.otrow input{flex:1;min-width:0;padding:10px 8px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel-2);font-family:inherit;font-size:13.5px}
.otrow input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.otrow i{flex:none;font-style:normal;color:var(--muted)}
/* ปุ่มลัดความยาวคลิป — กดทีเดียวได้เวลาจบ ไม่ต้องไล่กดทีละหลักในช่องเวลา */
.otquick{display:flex;gap:4px;margin-top:5px}
.otq{flex:1;padding:3px 0;border:1px solid var(--line);border-radius:7px;background:var(--panel);
  color:var(--muted);font-size:11px;font-family:inherit;cursor:pointer}
.otq:hover{border-color:var(--accent);color:var(--accent)}
.orderrow .oplace{flex:0 0 220px;margin:0}
.orderrow .oday{flex:0 0 108px;margin:0}
/* ช่องทีม ขึ้นเฉพาะกองที่แยกสองทีม จึงต้องแคบกว่าช่องอื่นเพื่อไม่ไปเบียดชื่อเรื่อง */
.orderrow .oteam{flex:0 0 96px;margin:0}
.ostate{flex:0 0 132px;display:flex;justify-content:flex-end;align-items:center}
.ostate .tag{white-space:normal;text-align:center;line-height:1.35}
.orderrow .addrest{flex:none;width:52px;text-align:right}
@media (min-width:821px) and (max-width:1200px){
  .otimes{flex:0 0 206px}
  .orderrow .oplace{flex:0 1 150px;min-width:120px}
  .ostate{flex:0 0 104px}
}
@media (max-width:820px){
  .orderrow{flex-wrap:wrap}
  .otime{flex:1 1 100%}
  .otimes,.orderrow .oplace,.orderrow .oday,.orderrow .oteam,.ostate{flex:1 1 100%}
  .ostate{justify-content:flex-start}
}
/* ปุ่มขึ้นลง สำหรับจอสัมผัสที่ลากแบบเมาส์ไม่ได้ */
.omove{flex:none;display:flex;flex-direction:column;gap:1px}
.omove .btn{padding:0 6px;font-size:9px;line-height:13px;color:var(--muted);min-height:0}
.omove .btn:disabled{opacity:.25}

/*
 * การ์ดแจ้งงานใหม่จากโปรเจ็ค บนหน้าแรกของทีมพร็อพ
 * ตั้งใจให้เด่นกว่าแถวงานปกติ เพราะเป็นของที่ถ้าไม่เห็นก็จะไม่มีใครไปตามหาเอง
 */
.newshoot{border:1px solid var(--accent);border-radius:var(--radius);padding:13px 15px 12px;margin-bottom:16px;
  background:var(--accent-soft,transparent)}
.nshead b{display:block;font-size:14.5px}
.nshead small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.newshoot .rows{margin-top:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.nsrow .main b{font-size:14px}
.nsrow .main small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.newshoot>.btn{margin-top:10px}
.nsleft{flex:none;font-size:12px;font-weight:600;white-space:nowrap;color:var(--muted);
  border:1px solid var(--line);border-radius:99px;padding:3px 10px}
.nsleft.soon{color:var(--warn);border-color:var(--warn)}
.nsleft.now{color:var(--danger);border-color:var(--danger)}
.nsleft.late{color:var(--muted)}
.shootpick.waiting{opacity:.72}
@media (max-width:600px){
  .nsrow{flex-wrap:wrap}
  .nsrow .main{flex-basis:100%}
  .nsrow .btn{margin-left:auto}
}

/* ดึงกองจากคิวกองมาทำงานพร็อพ */
.fromshoot{border-left:3px solid var(--accent);margin-bottom:18px}
.fromshoot>b{display:block;font-size:14.5px}
.shootpick{margin-bottom:8px}
.orsplit{display:flex;align-items:center;gap:14px;margin:22px 0 18px;color:var(--muted);font-size:12.5px}
.orsplit::before,.orsplit::after{content:"";flex:1;height:1px;background:var(--line)}
.newbtns{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:600px){.newbtns{width:100%}.newbtns .btn{flex:1}}

/* ================================== ติดตามงาน ================================== */
.trackrow{display:flex;align-items:center;gap:16px;border-left:3px solid var(--line);cursor:default}
.trackrow .main{flex:1;min-width:0}
.trackrow .main b{display:block;font-size:13.5px}
.trackrow .main small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.propnote{display:inline-block;margin-top:5px;font-size:11.5px;color:var(--muted);
  background:var(--line-soft);border-radius:20px;padding:2px 9px}
.propnote.wait{background:#fdf3d7;color:#6b5a2a}
.propnote.ok{background:#e7f5ec;color:#1d5b34}
.tprog{flex:none;width:130px;display:flex;align-items:center;gap:9px}
.tbar{flex:1;height:6px;border-radius:4px;background:var(--line-soft);overflow:hidden}
.tbar i{display:block;height:100%;background:var(--accent)}
.tprog b{flex:none;width:34px;text-align:right;font-size:12.5px;font-variant-numeric:tabular-nums}
.tright{flex:none;width:150px;text-align:right}
.tright .tstage{display:block;font-size:12.5px;font-weight:600}
.tright .twho{display:block;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ปุ่มกระโดดไปหน้างานตัด ขึ้นเฉพาะแถวที่ค้างอยู่ขั้นตัดต่อ */
.tright .btn.small{margin-top:6px;white-space:nowrap;font-size:11.5px}
.trackrow.st-direction,.trackrow.st-ideas{border-left-color:#5b5bd6}
.trackrow.st-writing{border-left-color:#0a7cdc}
.trackrow.st-fix{border-left-color:#c0392b}
.trackrow.st-client,.trackrow.st-footage,.trackrow.st-sheet{border-left-color:#b4741a}
.trackrow.st-shoot{border-left-color:#2e7d4f}
.trackrow.st-edit{border-left-color:#1f7a53}
.trackrow.st-done{border-left-color:var(--line);opacity:.65}
.trackrow.st-done .tbar i{background:#2e7d4f}
@media (max-width:820px){
  .trackrow{flex-wrap:wrap;row-gap:8px}
  .tprog{width:100%;order:5}
  .tright{width:auto;text-align:left}
}
.stagecount{font-style:normal;font-size:12px;color:var(--muted);font-weight:400}
.stagewho{font-size:11.5px;color:var(--muted);font-weight:400;margin-left:8px}
@media (max-width:820px){
  .trackrow{flex-wrap:wrap;row-gap:5px}
  .trackrow .tstage{width:auto}
  .trackrow .twho{max-width:none;text-align:left}
}

/* ================================ ภาพรวมรายลูกค้า ================================ */
.cboard{display:flex;flex-direction:column;gap:0}
.shotline{margin-top:10px}
.shotline b{display:block;font-size:15px}
.shotline span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.cboard .opsbar{margin:8px 0 12px}

.billstate{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line);
  border-radius:9px;padding:10px 12px;margin-bottom:10px;background:var(--panel)}
.billstate>div{flex:1;min-width:150px}
.billstate b{display:block;font-size:13.5px}
.billstate small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.billstate.ready{border-color:#e0b4ae;background:#fdefee}
.billstate.ready b{color:#a5352a}

.invlines{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.invline{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12px;
  border-left:3px solid var(--line);padding:5px 9px;background:var(--panel);border-radius:0 6px 6px 0}
.invline span{color:var(--muted);font-variant-numeric:tabular-nums}
.invline b{font-variant-numeric:tabular-nums}
.invline i{flex:1;font-style:normal;color:var(--muted)}
.invline.paid{border-left-color:#2e7d4f;opacity:.7}
.invline.due{border-left-color:#d99a2b}
.invline.late{border-left-color:#c0392b}
.invline.late i{color:#c0392b;font-weight:600}
.noinv{margin:0 0 10px;font-size:12px;color:var(--muted)}

.propspend{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:9px}
.propspend span{font-size:12px;color:var(--muted)}
.propspend b{font-size:15px;font-variant-numeric:tabular-nums}
.propspend i{flex-basis:100%;font-style:normal;font-size:11.5px;color:var(--muted)}
/* แท็บย่อยของเมนู Sales */
.salesbar{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:18px;padding:4px;background:var(--line-soft);border-radius:10px}
.stab{flex:1;min-width:110px;padding:7px 14px;border-radius:7px;font-size:13px;color:var(--muted);white-space:nowrap}
.stab:hover{color:var(--text)}
.stab.on{background:var(--card);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
/* เส้นทางขั้นตอนของโปรเจ็ค เห็นทั้งที่ผ่านมาแล้วและที่เหลือ */
.steps{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.stp{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:2px 8px;border-radius:20px;
  border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.stp i{font-style:normal;font-size:9px}
.stp em{font-style:normal;opacity:.75}
.stp.done{border-color:#a8cbb4;background:#eef7f2;color:#1d5b34}
.stp.now{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
/* ขั้นที่ยังไม่ถึงต้องดูจางกว่าขั้นที่ทำแล้ว แต่ .55 จางจนอ่านไม่ออกบนพื้นสี */
.stp.wait{opacity:.8;background:var(--panel)}

/* ================================ คิวกอง แบ่งเป็นช่วงเวลา ================================ */
.shootgroup{margin-bottom:26px}
.shootgroup>h3{display:flex;align-items:center;gap:9px;font-size:14px;margin:0 0 11px}
.shootgroup>h3 i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--muted);
  background:var(--line-soft);border-radius:20px;padding:1px 9px}

.shootgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.shootcard{display:flex;flex-direction:column;gap:9px;border:1px solid var(--line);border-top:3px solid var(--line);
  border-radius:11px;background:var(--card);padding:13px 14px}
.shootcard.set{border-top-color:#2e7d4f}

.scdate{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.scdate b{font-size:15px;letter-spacing:-.01em}
.scdate span{font-size:11.5px;color:var(--muted);white-space:nowrap}
.scmain b{display:block;font-size:14px}
.scmain small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.scnote{font-style:italic}

.scfacts{display:flex;flex-wrap:wrap;gap:5px}
.scfacts span{font-size:11px;padding:2px 8px;border-radius:20px;background:var(--line-soft);color:var(--muted)}
.scfacts .warnnum{background:#fdf3d7;color:#6b5a2a;font-weight:600}
.scfacts .oknum{background:#e7f5ec;color:#1d5b34;font-weight:600}

.scfoot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.scfoot select{flex:1;min-width:110px;font-size:12px}
.scdel{margin-left:auto;color:var(--muted)}

@media (max-width:600px){.shootgrid{grid-template-columns:1fr}}
/* ปุ่มเรียกคนและพิมพ์ อยู่มุมขวาบนของใบงาน */
/* ปุ่มปิดท้ายใบงานกอง — สองปุ่มกว้างเท่ากันเป๊ะ ไม่ใช่ปุ่มหนึ่งเต็มจออีกปุ่มหดตามคำ */
.sheetend{display:flex;gap:10px;align-items:stretch;margin-top:20px}
.sheetend .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center;padding:14px 16px;
  font-size:15px;border-radius:12px}
.sheetendhint{margin:8px 0 0;font-size:12.5px;color:var(--muted);line-height:1.6}
@media (max-width:640px){ .sheetend{flex-direction:column} }
.sheetacts{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.sheetacts .statusdone{white-space:nowrap}
.stab i{font-style:normal;font-size:11px;opacity:.7;margin-left:3px}
@media (max-width:820px){
  .sheetacts{width:100%}
  .sheetacts .btn{flex:1;min-width:130px}
}

/* ==================================== แชท ==================================== */
/*
 * ปุ่มแชทค้างอยู่ทุกหน้า ทุกวัน จึงทำให้เบาที่สุด — วงกลมสีพื้นเรียบ ไอคอนเส้นบาง
 * ไม่ใช้อิโมจิเพราะสีของมันแย่งสายตาไปจากงานที่คนกำลังทำอยู่
 */
  display:flex;align-items:center;justify-content:center;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);
  box-shadow:0 4px 14px rgba(0,0,0,.12);transition:transform .12s ease,box-shadow .12s ease}
  background:#c0392b;color:#fff;font-size:10.5px;font-style:normal;font-weight:700;line-height:19px;
  border:2px solid var(--panel)}

  height:min(520px,calc(100vh - 90px));display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.24)}
.shakebtn{color:#b4741a;font-weight:600}
.shakepick{max-width:118px;font-size:11.5px;padding:3px 6px}
/*
 * ไอโฟน: 100vh ไม่นับแถบที่อยู่เว็บและแป้นพิมพ์ กล่องแชทจึงยาวเกินจอจนแถวปุ่มส่งหลุดไปใต้แป้นพิมพ์
 * dvh คือความสูงที่เหลือจริงตอนนั้น ใช้ได้ทั้งตอนแป้นพิมพ์ขึ้นและตอนแถบที่อยู่ยุบ
 */
@supports (height:100dvh){
}

.cavatar{flex:none;width:34px;height:34px;border-radius:50%;background:var(--line-soft);color:var(--muted);
  font-size:14px;font-weight:700;line-height:34px;text-align:center}
.cavatar.dm{background:var(--accent-soft);color:var(--accent)}
.cmain{flex:1;min-width:0}
.cmain b{display:block;font-size:13.5px}
.cmain small{display:block;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  font-size:10.5px;font-style:normal;font-weight:700;line-height:19px;text-align:center}

.cpeople{margin-top:14px;border-top:1px solid var(--line-soft);padding-top:10px}
.cpeople b{display:block;font-size:11.5px;color:var(--muted);margin-bottom:6px}

  background:var(--line-soft);font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.csys{text-align:center;font-size:11px;color:var(--muted);margin:8px 0}
  padding:4px 11px;margin:8px auto;display:table}

.picklist{max-height:190px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;padding:6px;margin-bottom:10px}

  background:#b4741a;color:#fff;padding:11px 20px;border-radius:26px;font-size:13.5px;font-weight:600;
  box-shadow:0 8px 22px rgba(0,0,0,.25)}

@media (max-width:600px){
  /*
   * บนมือถือ แชทเป็นหน้าเต็มจอไปเลย ไม่ใช่กล่องเล็ก ๆ ลอยอยู่มุมล่าง
   * เพราะจอแคบ กล่องลอยจะเหลือที่พิมพ์นิดเดียวและกดปิดยาก
   * กดกากบาทมุมขวาบนเพื่อกลับไปหน้างานเหมือนเดิม
   */
  /* ต้อง !important เพราะกฎของธีมอยู่ท้ายไฟล์ ถ้าไม่ใส่ ธีมจะดันกล่องกลับไปลอยมุมล่างบนมือถือ */
    border:0;border-radius:0;box-shadow:none}
    padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}
}

/* ---- กล่องแชทตอนห้องเยอะ: ค้นหา จัดกลุ่ม และซ่อนห้องที่ไม่ได้คุยแล้ว ---- */
.csect{display:block;width:100%;text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  color:var(--muted);text-transform:uppercase;margin:10px 2px 4px}
.ctoggle{cursor:pointer;padding:6px 2px;border-top:1px solid var(--line-soft);margin-top:12px}
.ctoggle:hover{color:var(--accent)}
  font-size:12px;line-height:26px;text-align:center;opacity:0;transition:opacity .12s ease}
.cgroup{margin-bottom:8px}
.cglabel{display:block;font-size:10.5px;color:var(--muted);padding:2px 4px}
.cglist{display:block}
.colder{display:block;margin:0 auto 10px;font-size:11.5px;color:var(--accent);padding:4px 12px;
  border:1px solid var(--line);border-radius:20px}
.colder:hover{background:var(--line-soft)}
.bellmark{vertical-align:-2px;margin-right:3px}

/* ---- ตารางโพสต์ ---- */
.postlist{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.postrow{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--card);
  border-bottom:1px solid var(--line-soft);cursor:grab}
.postrow:last-child{border-bottom:none}
.postrow.dragging{opacity:.55;background:var(--accent-soft)}
.postrow .pno{flex:none;width:22px;font-size:12px;color:var(--muted);text-align:right}
.pdate{flex:none;display:flex;align-items:center;gap:5px}
.pdate input{font-size:12.5px;padding:4px 6px}
.pdate i{font-style:normal;font-size:11px;color:var(--muted);width:22px}
/* ชื่อคลิปต้องไม่ถูกบีบจนหาย เมื่อแถวมีช่องลิงก์ต่อท้าย ให้ตัดบรรทัดแทน */
.ptitle{flex:1 1 190px;min-width:150px;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.postrow{flex-wrap:wrap}
.pnote{flex:none;width:150px;font-size:12px;padding:4px 7px}
.sharebox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0;padding:11px 13px;
  background:var(--accent-soft);border-radius:10px}
.sharebox b{display:block;font-size:12.5px}
.sharebox small{display:block;font-size:11px;color:var(--muted)}
.sharelink{flex:1;min-width:220px;font-size:12px;font-family:ui-monospace,monospace}

/* หน้าที่ลูกค้าเปิดจากลิงก์ — ไม่มีเมนู ไม่มีปุ่ม อ่านง่ายบนมือถือ */
.pubwrap{max-width:900px}
.pubhead{text-align:center;padding:22px 0 10px}
.publogo{margin-bottom:10px}
.publogo svg{display:block;margin:0 auto}
.pubhead h1{font-size:22px;margin:0 0 4px}
.pubhead p{font-size:12.5px;color:var(--muted);margin:0}
.pubtable td{font-size:13px}
.pubfoot{text-align:center;font-size:11.5px;color:var(--muted);margin:24px 0 30px}

@media (max-width:700px){
  .postrow{flex-wrap:wrap}
  .ptitle{flex:1 1 100%;order:5}
  .pnote{flex:1 1 100%;width:auto;order:6}
}


:root[data-theme="dark"] .cshake{background:#3a3117;color:#e6c375}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cshake{background:#3a3117;color:#e6c375}
}

/* ประวัติการแจ้งทีมของใบงานกอง */
.sendlog{margin:14px 0;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.sendlog>b{display:block;font-size:12.5px;margin-bottom:6px}
.sendlog ul{list-style:none;margin:0;padding:0}
.sendlog li{padding:5px 0;border-top:1px solid var(--line-soft);font-size:12px}
.sendlog li:first-child{border-top:none}
.sendlog li b{font-weight:600}
.sendlog li span{color:var(--muted);margin-left:6px}
.sendlog li small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.sendlog .plan{display:block;margin-top:8px;font-size:11.5px;color:var(--muted)}

/* รายชื่อลูกค้าในหน้าตารางโพสต์ */
.clientgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-top:12px}
.clientcard{display:block;text-align:left;padding:13px 15px;border:1px solid var(--line);border-radius:11px;
  background:var(--card);transition:border-color .12s ease,transform .12s ease}
.clientcard:hover{border-color:var(--accent);transform:translateY(-1px)}
.clientcard b{display:block;font-size:14.5px}
.clientcard small{display:block;font-size:11.5px;color:var(--muted);margin:2px 0 7px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cctags{display:flex;gap:5px;flex-wrap:wrap}
.cctags .tag{font-style:normal}

/* แท็บบิล และแถบแก้รายละเอียดบิล */
.stab.add{color:var(--accent)}
.schedbill{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;margin:12px 0;padding:11px 13px;
  border:1px solid var(--line);border-radius:10px;background:var(--card)}
.schedbill .field{margin:0}
.btn.danger{color:var(--danger)}

/* ช่องลิงก์ในแต่ละแถวของตารางโพสต์ */
.plinks{display:flex;gap:7px;flex:1 1 100%;order:9;padding-left:32px}
.plink{flex:1;min-width:120px;display:block}
.plink span{display:block;font-size:10.5px;color:var(--muted);margin-bottom:2px}
.plink input{width:100%;font-size:11.5px;padding:4px 7px}
.plink.on input{border-color:var(--ok)}
.plinks .pnote{flex:1;width:auto;align-self:flex-end}
.pbill{flex:none;max-width:130px;font-size:11.5px;padding:4px 6px}
.publinks a{display:block;font-size:12px}

/* ไฟล์อ้างอิงของบิล */
.billfile{flex:1 1 100%;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding-top:9px;border-top:1px solid var(--line-soft);margin-top:2px}
.billfile>b{font-size:12px}
.billfile small{font-size:11px;color:var(--muted)}
.bfname{font-size:12px;color:var(--muted)}
.btn.small{padding:4px 10px;font-size:11.5px}
label.btn.small{cursor:pointer}

/* แถบเลือกบิลในหน้าที่ลูกค้าเปิด */
.pubbills{margin:14px 0 6px}
.pubbillfile{margin:0 0 12px;font-size:12.5px}

/* โปรเจ็คที่อยู่ในบิล */
.billprojects{flex:1 1 100%;display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;
  padding-top:9px;border-top:1px solid var(--line-soft);margin-top:2px}
.billprojects>b{font-size:12px;align-self:center}
.billprojects small{font-size:11px;color:var(--muted);align-self:center}
.billprojects ul{list-style:none;margin:0;padding:0;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.billprojects li{display:flex;align-items:center;gap:6px;font-size:11.5px;
  background:var(--line-soft);border-radius:20px;padding:3px 5px 3px 11px}
.billprojects .field{margin:0}

/* ทะเบียนลูกค้า — ตารางแถวเดียวจบ อ่านเร็วกว่าการ์ด */
/* ช่องสถานะกว้างคงที่ ไม่งั้นหัวตารางกับแถวคำนวณความกว้างคนละแบบ แล้วคอลัมน์เหลื่อมกัน */
.reghead,.reg{display:grid;gap:12px;align-items:center;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1.2fr) 232px minmax(0,1fr) minmax(0,.8fr) minmax(0,.9fr) 44px}
.reghead{padding:0 13px 6px;font-size:10.5px;color:var(--muted);letter-spacing:.03em;text-transform:uppercase}
.reglist{border:1px solid var(--line);border-radius:11px;overflow:hidden}
.reg{padding:10px 13px;background:var(--card);border-bottom:1px solid var(--line-soft);font-size:12.5px}
.reg:last-child{border-bottom:none}
.reg:hover{background:var(--line-soft)}
.reg .rowmain{padding:0;background:none;text-align:left}
.reg .rowmain b{display:block;font-size:13.5px}
.reg .rowmain small{display:block;font-size:11.5px;color:var(--muted)}
.regpack i,.regpay i,.regcontact i{font-style:normal;color:var(--muted);font-size:11.5px}
.regpack .tag{font-size:10.5px;margin-left:4px}
.regcard{margin-bottom:12px}
.regcard>b{display:block;font-size:12.5px;margin-bottom:8px}
.regline{display:grid;grid-template-columns:180px 1fr;gap:10px;padding:6px 0;border-top:1px solid var(--line-soft);font-size:13px}
.regcard .regline:first-of-type{border-top:none}
.regline span{color:var(--muted);font-size:12px}
.regline i{grid-column:2;font-style:normal;color:var(--muted);font-size:11.5px}
.regnote{margin:0;font-size:13px;white-space:pre-wrap}

@media (max-width:820px){
  .reghead{display:none}
  .reg{grid-template-columns:1fr auto;gap:6px}
  .reg .rowmain{grid-column:1/-1}
  .regline{grid-template-columns:1fr}
}

/* เรื่องที่ขอ Production support */
.suprow{align-items:flex-start}
.suprow .rowmain{cursor:default}
.supnote{margin:5px 0 0;font-size:12.5px;white-space:pre-wrap}
.supnote.muted{color:var(--muted);font-size:11.5px}

/* หน้าอัพโหลดของทีมกล้อง */
.uplist{width:100%;text-align:left;align-items:center}
.uplist.todo{border-left:3px solid var(--warn)}
.naspath{display:block;font-family:ui-monospace,monospace;font-size:11px;color:var(--muted);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uprow{align-items:center;gap:12px}
.upfile{flex:0 0 300px;margin:0}
.upfile span{font-size:10.5px;color:var(--muted)}
.upfile input{font-size:12px;padding:5px 8px}
@media (max-width:760px){ .upfile{flex:1 1 100%} }
.nasnote{display:block;font-size:11px;color:var(--muted);margin-top:2px}

/* ปุ่มสองปุ่มในการ์ดอัพโหลด ต้องอยู่บรรทัดเดียวกันและไม่ทับข้อความใต้ปุ่ม */
.card .btnrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0 4px}
.card .btnrow .btn.big{flex:1;min-width:240px}
.card .btnrow + .hint{margin-top:8px}

/* ---- การ์ดงานตัดหนึ่งคลิป ---- */
.editcard{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;
  padding:13px 15px;margin-bottom:9px;background:var(--card);
  border:1px solid var(--line);border-radius:12px}
.editcard:hover{border-color:var(--line-strong,var(--line))}
.ecmain{flex:1 1 320px;min-width:0}
.ectitle{display:block;padding:0;background:none;text-align:left;font-size:15px;font-weight:600;color:var(--text)}
.ectitle:hover{color:var(--accent)}
.ecmain>small{display:block;font-size:12px;color:var(--muted);margin-top:2px}

.ecfacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.fact{display:flex;align-items:center;gap:7px;padding:5px 10px;border-radius:9px;
  background:var(--line-soft);font-size:12.5px}
.fact i{font-style:normal;font-size:11px;color:var(--muted);white-space:nowrap}
.fact code{font-family:ui-monospace,SFMono-Regular,monospace;font-size:12.5px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(420px,50vw)}
.fact .who{display:flex;align-items:center;gap:6px;font-weight:600}
.fact .cavatar{width:20px;height:20px;line-height:20px;font-size:10.5px}
.fact.none b{font-weight:500;color:var(--warn)}
.fact .btn.small{padding:2px 8px;font-size:11px}
.ecnote{margin:8px 0 0;font-size:12px;color:var(--muted)}

.ecside{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.ecside .field{margin:0;min-width:180px}
.ecsteps{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.ecstep{padding:5px 11px;border:1px solid var(--line);border-radius:20px;font-size:12px;
  color:var(--muted);background:var(--panel);white-space:nowrap;transition:border-color .12s,color .12s}
.ecstep:hover{border-color:var(--accent);color:var(--accent)}
.ecstep.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.ecstep.on.ok{background:var(--ok);border-color:var(--ok)}
.ecstep.on.warn{background:var(--warn);border-color:var(--warn)}

@media (max-width:820px){
  .ecside{flex:1 1 100%;align-items:stretch}
  .ecsteps{justify-content:flex-start}
  .ecside .field{min-width:0}
  .fact code{max-width:100%}
}

/* หน้าทีมตัดฝั่งบริหาร */
.etrow{display:flex;align-items:center;gap:12px;padding:9px 13px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;margin-bottom:7px;font-size:12.5px}
.etrow .rowmain{flex:1;min-width:0;padding:0;background:none;text-align:left}
.etrow .rowmain b{display:block;font-size:13.5px}
.etrow .rowmain small{display:block;font-size:11.5px;color:var(--muted)}
.etwho{flex:0 0 110px;font-weight:600}
.etcheck{flex:0 0 140px;color:var(--muted);font-size:11.5px}
@media (max-width:760px){
  .etrow{flex-wrap:wrap}
  .etwho,.etcheck{flex:0 0 auto}
}
.etdone{flex:0 0 auto;font-size:11px;color:var(--muted)}

/* ---- เรื่องที่ขอ Production support ---- */
.supcard{padding:13px 15px;margin-bottom:9px;background:var(--card);
  border:1px solid var(--line);border-radius:12px}
.supcard.closed{opacity:.85}
.suphead{display:flex;align-items:flex-start;gap:12px}
.supmain{flex:1;min-width:0}
.supmain b{display:block;font-size:14px}
.supmain small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.supacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.supclose{margin-top:11px;padding-top:11px;border-top:1px solid var(--line-soft)}
.supclose .frow{margin-bottom:8px}
.supclose .field{margin-bottom:8px}
.supresult{margin-top:10px;padding:9px 12px;border-radius:9px;font-size:12.5px;background:var(--ok-soft)}
.supresult.bad{background:var(--warn-soft)}
.supresult b{margin-right:6px}
.supresult small{display:block;margin-top:3px}
.supresult i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:3px}

/* กล่องเดียวกันเวอร์ชันที่ครีเอทีฟเห็นในหน้า Outline */
/*
 * การ์ดสถานะของอีกทีมบนหน้าโปรเจ็ค — Production support กับทีม Prop
 * ตั้งใจให้อ่านจบด้วยการกวาดตาครั้งเดียว ว่าเหลืออะไร ใครถืออยู่ และตอบกลับมาว่าอะไร
 */
.teamcard{padding:13px 15px;margin-bottom:14px}
.teamcard.done{border-color:var(--ok)}
.teamhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.teamhead b{font-size:14.5px;flex:1;min-width:0}
.teamhead span{font-size:12px;font-weight:650;white-space:nowrap}
.teamhead span.ok{color:var(--ok)}
.teamhead span.wait{color:var(--warn)}
.teamline{display:flex;align-items:center;gap:12px;margin-top:8px}
.teamline .bar{flex:1}
.teamline b{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.askrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line-soft)}
.askrow .main{flex:1;min-width:0}
.askrow .main b{display:block;font-size:13.5px}
.askrow .main small{display:block;color:var(--muted);font-size:12px;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.askrow .askans{color:var(--ok);white-space:normal}
.askrow.bad .askans{color:var(--danger)}

.fixcard{border-color:var(--danger)}
.askrow.bad .askans{color:var(--danger);white-space:normal}
.row.verdict{gap:10px}

/* ตอนแอดมินดูมุมมองของแผนกอื่น — ป้ายเปลี่ยนสีให้รู้ว่ากำลังดูแทน ไม่ใช่มุมมองของตัวเอง */
.deptbadge.peek{background:var(--warn);border-color:var(--warn);color:var(--warn-ink)}
.deptback{flex:none;white-space:nowrap}

/* ขั้นลงบิล — แถบเลือกของที่อยู่ในบิลใบเดียวกัน และช่องใส่ราคาของแต่ละชิ้น */
.billbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 14px;margin:0 0 14px;
  border:1px solid var(--accent);border-radius:var(--radius);background:var(--accent-soft,transparent)}
.billbar>div{flex:1;min-width:220px}
.billbar b{display:block;font-size:14px}
.billbar span{font-size:12.5px;color:var(--muted)}
.billitems{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;max-height:260px;overflow:auto}
.billitem{display:flex;align-items:center;gap:10px}
.billitem span{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.billitem input{flex:0 0 110px;text-align:right;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel);color:var(--text)}

/* แถวปุ่มบนสุดของขั้นหาของ */
.findtop{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
/* กล่องถามรูปกับราคาตอนกดว่ายังไม่มีของ */
.needask .supkinds{margin-top:4px}
.refpics.big .refthumb{width:74px;height:74px}
.refpics.big{margin:6px 0 14px}

/* แถบเรียก Host มาตรวจไอเดีย ใต้กระดานไอเดีย */
.callhost{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;border-color:var(--accent)}
.callhost.done{border-color:var(--line)}
.callmain{flex:1;min-width:220px}
.callmain b{display:block;font-size:14px}
.callmain small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}

/* แถบถังขยะของหน้า Production support */
.trashbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.trashbar>div{flex:1;min-width:220px}
.trashbar b{font-size:14px}

/* ชื่อคอนเทนต์ในหน้าเขียน — กดแก้ได้ตรงหัวเรื่อง */
.namehead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* ปุ่มแก้ชื่อต้องอยู่กึ่งกลางบรรทัดเดียวกับชื่อ ปุ่มเล็กมีระยะห่างบนติดมาจึงต้องล้างทิ้ง */
.namehead .btn{font-size:12px;padding:0 10px;height:24px;margin:0;flex:none;opacity:.55;
  display:inline-flex;align-items:center;align-self:center}
.namehead:hover .btn{opacity:1}
.titlein{width:100%;max-width:560px;font-size:24px;font-weight:700;padding:6px 10px;
  border:1px solid var(--accent);border-radius:10px;background:var(--panel);color:var(--text)}

/* การ์ดเลือกเรื่องที่จะขอ Production support */
.supkinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:12px}
/* เลือกว่าใครเป็นคนติดต่อสถานที่นี้ · มีสองทางเลือกเท่านั้น จึงบังคับให้อยู่สองช่องเสมอ */
.supkinds.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:620px){ .supkinds.two{grid-template-columns:1fr} }
/*
 * คอนเทนต์ทั้งกอง ที่กางดูได้จากในการ์ดงาน
 * ชื่อคลาสต้องไม่ใช่ scmain หรือ scno · scmain เป็นคลาสที่มีอยู่ก่อนแล้วและนิยามไว้สองที่
 * ถ้าใช้ซ้ำ แถวนี้จะไปหยิบขนาดตัวหนังสือของหน้าอื่นมาใช้โดยไม่ตั้งใจ
 */
.supclips{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft,var(--line))}
.supcliplist{margin-top:6px;display:flex;flex-direction:column;gap:6px}
.supcliplist>.hint{margin:0 0 2px}
.supcliprow{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
/* ชิ้นที่ยังไม่มีที่ถ่าย คือชิ้นที่งานนี้ต้องตอบให้ได้ จึงต้องสะดุดตา */
.supcliprow.nowhere{border-color:var(--warn,#b4541f)}
.supclipno{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-size:11.5px;font-weight:700}
.supclipmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.supclipmain b{font-size:14.5px;line-height:1.4}
.supclipmain small{font-size:12px;color:var(--muted);line-height:1.5}
.supclipmain p{margin:3px 0 0;font-size:12.5px;line-height:1.6;color:var(--text)}
/*
 * แถบโปรเจ็คที่ผ่านมาตอนที่ยังยุบอยู่ · มีปุ่มเปิด ช่องค้นหา และสรุปว่าเดือนไหนมีกี่กอง
 * ค้นหาได้ตั้งแต่ตอนยุบ เพราะคนที่หากองเก่าไม่เจอมักไม่รู้ว่าต้องกดเปิดอะไรก่อน
 */
.pastshut{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.pastshut input{flex:1;min-width:220px;max-width:360px;height:34px;padding:0 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font-size:13px}
.pasthint{font-size:12.5px;color:var(--muted)}
@media (max-width:620px){ .pastshut input{max-width:none} }

/*
 * คำเตือนในกล่องบันทึกผลของกองที่ผ่านมา
 * ต้องเด่นกว่าคำอธิบายทั่วไป เพราะสองตัวเลือกนี้ดึงคอนเทนต์ออกจากกองจริง ๆ
 * และคนมักกดทั้งที่ตั้งใจจะเลื่อนทั้งกอง
 */
.pastwarn{display:flex;flex-direction:column;gap:6px;margin:10px 0 4px;padding:14px 16px;
  border:1px solid var(--warn,#b4541f);border-radius:12px;background:var(--warn-soft,#fff4ec)}
/* ตัวหนาใช้สีตัวหนังสือปกติ · warn-ink เป็นสีน้ำตาลเข้มชุดเดียวทั้งสองธีม อ่านไม่ออกบนพื้นมืด */
.pastwarn b{font-size:14px;color:var(--text)}
.pastwarn span{font-size:12.5px;line-height:1.6;color:var(--text)}
.pastwarnhint{border-top:1px dashed var(--line);padding-top:7px;margin-top:2px}

/* ป้ายบอกว่าแถวนี้คือหลายกองที่รวมกันไว้ · ไม่งั้นแถวเดียวจะดูเหมือนกองเดียว */
.mergetag{display:inline-block;margin-left:8px;padding:1px 9px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);font-style:normal;font-size:11.5px;font-weight:600;
  vertical-align:middle}
.supteam{margin:2px 0 4px}
.supteam .askstep{display:block;margin-bottom:6px;font-size:11.5px;letter-spacing:.06em;color:var(--muted)}
.supteam .kindcard.on{border-color:var(--accent);background:var(--accent-soft)}
.supkinds .kindcard{align-items:flex-start;gap:2px;padding:13px 14px}
.supico{font-style:normal;font-size:18px;line-height:1;margin-bottom:6px}
/* ช่องกรอกของแต่ละเรื่อง — เรียงสองคอลัมน์บนจอกว้าง ช่องยาวกินเต็มแถว */
.supform{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 14px;margin-bottom:12px}
/*
 * ช่องกรอกในแถวเดียวกันต้องอยู่ระนาบเดียวกัน
 * หัวข้อบางอันมีคำอธิบายใต้ชื่อ บางอันไม่มี ของเดิมช่องที่ไม่มีคำอธิบายจึงลอยสูงกว่าเพื่อน
 * ดันหัวข้อให้ยืดเต็มความสูงของแถว แล้วช่องกรอกจะไปชิดล่างเท่ากันทุกอัน
 */
.supform .field{margin:0;display:flex;flex-direction:column}
.supform .field > span{flex:1 0 auto}
.supform .field.wide{grid-column:1 / -1}
.supform .suppick .chipbar{margin:4px 0 0}
@media (max-width:640px){ .supform{grid-template-columns:1fr} .supform .field.narrow{max-width:none} }

.supbox{margin:10px 0 16px;padding:11px 14px;border-radius:10px;border:1px solid var(--line);background:var(--card)}
.supbox.open{border-left:3px solid var(--accent)}
.supbox.good{border-left:3px solid var(--ok);background:var(--ok-soft)}
.supbox.bad{border-left:3px solid var(--warn);background:var(--warn-soft)}
.supbox b{display:block;font-size:13px;margin-bottom:4px}
.supbox p{margin:0;font-size:12.5px;white-space:pre-wrap}
.supbox .supanswer{margin-top:6px;font-weight:600}
.supbox small{display:block;margin-top:5px;font-size:11px;color:var(--muted)}
.supbox .btn{margin-top:9px}

/* ตัวเลือกว่าจะเขียนเป็น Outline หรือ Full Script */
.modepick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.modepick>span{font-size:12px;color:var(--muted)}
.mchip{padding:6px 14px;border:1px solid var(--line);border-radius:20px;font-size:12.5px;
  color:var(--muted);background:var(--panel)}
.mchip:hover{border-color:var(--accent);color:var(--accent)}
.mchip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.modepick i{flex:1 1 100%;font-style:normal;font-size:11.5px;color:var(--muted)}

/* แถบเครื่องมือของ Full Script */
.stools{margin:0 0 8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.strow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.strow>span{flex:0 0 52px;font-size:11px;color:var(--muted)}
.sbtn{padding:5px 11px;border:1px solid var(--line);border-radius:18px;font-size:12.5px;
  background:var(--panel);color:var(--text);white-space:nowrap}
.sbtn:hover{border-color:var(--accent);color:var(--accent)}
.sbtn.add{color:var(--accent)}
.stools i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:2px}
@media (max-width:600px){ .strow>span{flex:1 1 100%} }

/* แท็บชุดคำเขียนบทในเมนูตั้งค่า */
.marklist{display:flex;flex-direction:column;gap:6px}
.markrow{display:flex;align-items:center;gap:6px}
.markrow input{flex:1}
.sbtn.own{border-style:dashed;padding-right:6px}
.sbtn.own i{font-style:normal;margin-left:6px;color:var(--muted);padding:0 4px}
.sbtn.own i:hover{color:var(--danger)}

/* แอดมินลากสลับตำแหน่งเมนูได้ */
.navtab[draggable="true"]{cursor:grab}
.navtab.dragging{opacity:.5;cursor:grabbing}
.navtabs{will-change:contents}

/* หน้าทีมงาน — แถวเดียวจบต่อหนึ่งคน อ่านไล่ลงมาได้เร็ว */
.addrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.addrow input,.addrow select{flex:1;min-width:150px}
.addrow select.half{flex:0 1 180px;min-width:150px}
.teamhint{margin:0 0 14px}
.teamhint code{font-family:ui-monospace,monospace;background:var(--line-soft);padding:1px 6px;border-radius:5px}
.mgroup{display:flex;align-items:center;margin:14px 0 4px}
.mgroup span{font-size:11px;color:var(--muted);letter-spacing:.03em;text-transform:uppercase}
.mrow{display:grid;
  grid-template-columns:60px minmax(140px,1.4fr) 128px 136px 118px 18px 40px 128px 78px 74px 112px 24px;
  gap:10px;align-items:center;
  padding:9px 12px;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.mrow:hover{background:var(--line-soft)}
.mrow select,.mrow input[type="text"],.mrow input:not([type]){font-size:12px;padding:4px 8px}
.mn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn b{font-size:13.5px}
.mn i{font-style:normal;color:var(--muted);margin-left:6px;font-size:11.5px}
.pdot{font-size:13px;text-align:center}
.pdot.ok{color:var(--ok)}
.pdot.wait{color:var(--warn)}
.pdot.none{color:var(--line)}
.lnk{font-size:11.5px;color:var(--muted);background:none;padding:0}
.lnk:hover{color:var(--accent)}
.lnk.del:hover{color:var(--danger)}
.lnk.off{visibility:hidden}
.mad{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);cursor:pointer}
.mad input{width:15px;height:15px;accent-color:var(--accent)}
@media (max-width:1180px){
  /* จอแคบลงเหลือสองแถว รูปกับชื่อขึ้นบรรทัดบน ที่เหลือไหลต่อกัน ไม่ตัดอะไรทิ้ง */
  .mrow{grid-template-columns:60px minmax(120px,1fr) repeat(4,minmax(90px,1fr));row-gap:8px}
  .mrow.mhead{display:none}
}
@media (max-width:860px){
  .mrow{grid-template-columns:60px 1fr;gap:8px}
  .mrow>*:not(.mface):not(.mn){grid-column:2}
  .mad{justify-content:flex-start}
}

/* คู่มือการอัพโหลดของทีมกล้อง */
.tree{margin-top:10px;font-size:13px;line-height:2}
.tl{position:relative;color:var(--text)}
.tl i{font-style:normal;color:var(--muted);font-size:11.5px;margin-left:8px}
.tl.l1{padding-left:22px}
.tl.l2{padding-left:44px}
.tl.l3{padding-left:66px}
.tl.l4{padding-left:88px}
.tl.l5{padding-left:110px}
.tl.l6{padding-left:132px}
.tl.audio{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
.steps{list-style:none;margin:10px 0 0;padding:0}
.steps li{display:flex;gap:11px;align-items:flex-start;padding:7px 0;font-size:13px}
.steps li span{flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  font-size:12px;font-weight:600;line-height:22px;text-align:center}
.steps li small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}
kbd{display:inline-block;padding:2px 7px;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;
  background:var(--panel);font-family:ui-monospace,monospace;font-size:12px;margin:0 2px}
.warnline{margin:4px 0 6px;font-size:12px;color:var(--warn)}

/*
 * .hint ถูกดึงขึ้นด้วย margin ติดลบ เพราะปกติมันอยู่ใต้หัวข้อ
 * แต่ถ้าไปอยู่ใต้ปุ่มหรือแถบปุ่ม มันจะทับปุ่มนั้น — กรณีพวกนี้ต้องดันกลับลงมา
 */
.btnrow + .hint,
.stools + .hint,
.salesbar + .hint,
.btn + .hint{margin-top:12px}

/* แถบแท็บของทีมตัด มีชื่อคนเยอะ ให้ตัดบรรทัดได้ */
.editbar{flex-wrap:wrap;height:auto;padding:4px;gap:4px}
.editbar .stab{flex:0 1 auto;padding:7px 14px}

/* ขอโมชั่นกราฟิกจากในการ์ดงานตัด */
.ecstep.motionbtn{border-style:dashed;color:var(--accent);border-color:var(--accent)}
.ecstep.motionbtn.on{background:var(--accent);color:var(--accent-ink);border-style:solid}
.ecstep.on.ok{background:var(--ok);border-color:var(--ok);color:var(--ok-ink)}
.motionform{flex:1 1 100%;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
.motionform>b{display:block;font-size:13px;margin-bottom:8px}
.motionline{flex:1 1 100%;margin-top:9px;padding:8px 11px;border-radius:9px;background:var(--accent-soft);font-size:12.5px}
.motionline.done{background:var(--ok-soft)}
.motionline b{margin-right:6px}
.motionline i{font-style:normal;color:var(--muted)}
.motionline span{display:block;margin-top:2px}
.motionline code{display:block;margin-top:3px;font-family:ui-monospace,monospace;font-size:11.5px}
.motionline small{display:block;margin-top:3px;color:var(--muted)}
.modone{display:flex;flex-direction:column;gap:6px;width:100%;max-width:280px}
.modone input{font-size:12px;padding:5px 8px}

/* งานด่วน */
.rushtag{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11px;font-weight:600;
  background:var(--warn-soft);color:var(--warn);vertical-align:2px}
.rushtag.hot{background:var(--danger-soft);color:var(--danger)}
.etpick{flex:0 0 130px;font-size:12px;padding:4px 7px}
.etneed{display:block;margin-top:2px;color:var(--muted)}

/* ช่องที่อยู่ไฟล์ของทีมโมชั่น อยู่ฝั่งซ้ายคู่กับที่มาของไฟล์ หน้าตาเดียวกัน */
.fact.fill{flex:1 1 280px;min-width:220px}
.fact .factin{flex:1;min-width:0;border:0;background:transparent;padding:0;color:var(--text);
  font-family:ui-monospace,SFMono-Regular,monospace;font-size:12.5px}
.fact .factin:focus{outline:0}
.fact:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent)}

/* แถบเลิกทำ ลอยล่างจอ อยู่เหนือทุกหน้าเพราะกดผิดได้ทุกหน้า */
.undobar{position:fixed;left:16px;bottom:16px;z-index:60;
  display:flex;align-items:center;gap:8px;padding:6px 8px 6px 11px;border-radius:9px;
  background:var(--text);color:var(--bg);box-shadow:0 8px 20px rgba(0,0,0,.2);font-size:11.5px;max-width:min(360px,80vw)}
.undobar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.undobar .btn.small{padding:2px 8px;font-size:11px;background:var(--bg);color:var(--text);border-color:transparent;font-weight:600}
.undox{border:0;background:transparent;color:var(--bg);opacity:.6;cursor:pointer;font-size:11px;padding:1px 3px;line-height:1}
.undox:hover{opacity:1}
@media (max-width:640px){.undobar{left:10px;right:10px;bottom:10px;max-width:none}}

/* การ์ดงานโมชั่น — สามข้อเรียงลงมา ที่อยู่ไฟล์ยาวแค่ไหนก็ให้เห็นครบ ไม่ตัดท้าย */
.ecfacts.factcol{flex-direction:column;align-items:stretch;gap:6px}
.factcol .fact{width:100%;align-items:center;padding:8px 11px}
.factcol .fact.fill{flex:0 0 auto}
.factcol .fact>i{min-width:112px;padding-top:2px}
.factcol .fact code{max-width:none;white-space:normal;word-break:break-all;overflow:visible;text-overflow:clip;flex:1}
.factcol .fact .factin{padding:1px 0}
.factcol .fact .btn.small{align-self:center}
@media (max-width:640px){
  .factcol .fact{flex-wrap:wrap;gap:4px}
  .factcol .fact>i{min-width:0;width:100%}
}

/* ป้ายเตือนกลางจอ ใสพอให้เห็นของข้างหลัง แล้วจางหายเองใน 2.7 วินาที */
.toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:70;pointer-events:none;
  padding:9px 16px;border-radius:11px;font-size:13px;line-height:1.4;max-width:80vw;text-align:center;
  color:var(--text);background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(7px) saturate(1.3);backdrop-filter:blur(7px) saturate(1.3);
  box-shadow:0 6px 20px rgba(0,0,0,.10);
  animation:toastin .16s ease-out, toastout .7s ease-in 2s forwards}
@keyframes toastin{from{opacity:0;transform:translate(-50%,calc(-50% + 6px))}to{opacity:1}}
@keyframes toastout{to{opacity:0}}
:root[data-theme="dark"] .toast{background:rgba(22,24,30,.5);border-color:rgba(255,255,255,.14);
  box-shadow:0 6px 20px rgba(0,0,0,.35)}

/* ---------------------------------------------------------------- ความเคลื่อนไหว ----
 * ใส่เท่าที่ช่วยให้รู้ว่ากดติดแล้ว และรู้ว่าหน้าเปลี่ยนไปแล้ว
 * ทุกอันสั้นกว่าหนึ่งในสี่วินาที และปิดทั้งหมดให้คนที่ตั้งเครื่องว่าไม่ชอบภาพเคลื่อนไหว
 */
.vin{animation:vin .18s ease-out}
@keyframes vin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* เส้นบาง ๆ วิ่งบนสุดตอนระบบกำลังคุยกับเซิร์ฟเวอร์ แทนที่จะเงียบไปเฉย ๆ */
.loadbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;overflow:hidden;
  background:color-mix(in srgb,var(--accent) 18%,transparent)}
.loadbar::after{content:"";position:absolute;top:0;left:0;height:100%;width:40%;
  background:var(--accent);border-radius:2px;animation:loadslide 1.1s ease-in-out infinite}
@keyframes loadslide{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

/* กดแล้วรู้สึกว่าโดน */
.btn,.stab,.ecstep,.lnk,.navtab{transition:background-color .13s ease,border-color .13s ease,color .13s ease,transform .1s ease,box-shadow .13s ease}
.btn:active,.ecstep:active,.stab:active,.navtab:active{transform:scale(.975)}
.stab.on,.ecstep.on{transition:background-color .16s ease,color .16s ease,border-color .16s ease}

/* การ์ดและแถวในรายการ ขยับนิดเดียวตอนชี้ ให้รู้ว่ากดได้ */
.editcard,.row{transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease}
.row:hover{transform:translateY(-1px)}

/* แถบเลิกทำเลื่อนขึ้นมาแทนที่จะโผล่ทื่อ ๆ */
.undobar{animation:undoin .18s ease-out}
@keyframes undoin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .vin,.undobar,.toast{animation:none}
  .btn:active,.ecstep:active,.stab:active,.navtab:active,.row:hover{transform:none}
  .loadbar::after{animation:none;width:100%}
}
.motionline .btn.small{margin-top:5px;padding:2px 9px;font-size:11px}

/* ช่องใส่ ID ที่ยังว่าง ต้องสะดุดตาพอให้รู้ว่ายังต้องกรอก */
.mrow input.need{border-style:dashed;border-color:var(--accent);color:var(--accent)}
.mrow input.need::placeholder{color:var(--accent);opacity:.8}
.mrow.mhead{font-size:11px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:4px}
.mrow.mhead:hover{background:none}

/* ช่องเลือกคนทำในการ์ดของ Production support */
.supacts .supwho{max-width:190px;margin:0}
.supacts{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}

/*
 * ราคาที่กะไว้ · อยู่ในการ์ดตั้งแต่ยังไม่ปิดเรื่อง
 * วางเป็นแถบของตัวเอง ไม่ปนกับปุ่มรับเรื่อง เพราะเป็นคนละจังหวะกัน
 */
.supest{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.supesth{display:block;font-size:12px;font-weight:700}
.supesth i{font-style:normal;font-weight:400;color:var(--muted)}
.supestrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 6px}
.supestrow input{max-width:150px;font-variant-numeric:tabular-nums}
.supest .hint{margin:0}

/* แถบค้นหาเหนือรายการยาว ๆ */
.findrow{display:flex;align-items:center;gap:10px;margin:12px 0 14px;flex-wrap:wrap}
.findrow input{flex:1;min-width:240px;padding:8px 12px;font-size:13px}
.findrow .hint{margin:0}
.btn.wide{width:100%;justify-content:center;margin-top:6px}
.stuckhint{margin:0 0 12px}

/* กล่องขอ Production support หลังเขียนเสร็จ */
.supbox.ask{border-style:dashed}
.supbox.ask .field{margin-top:10px}

/* ป้าย Extra / Vendor และกล่องสรุปให้ลูกค้า */
.kindtag{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11px;font-weight:600;
  background:var(--accent-soft);color:var(--accent)}
.modepick.askkind{margin:10px 0 0}
.sumbox{margin-top:16px}
.sumbox textarea{width:100%;font-size:13.5px;line-height:1.6}

/* รูปแนบของเรื่องที่ขอ Production support */
.shotrow{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0}
.shotthumb{position:relative;width:84px;height:84px;padding:0;border:1px solid var(--line);
  border-radius:9px;overflow:hidden;background:var(--line-soft);cursor:pointer}
.shotthumb img{width:100%;height:100%;object-fit:cover;display:block}
.shotthumb i{position:absolute;top:2px;right:2px;width:20px;height:20px;line-height:20px;text-align:center;
  border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-style:normal;cursor:pointer}
.btn.pickshot{position:relative;overflow:hidden;cursor:pointer}
.btn.pickshot input{position:absolute;inset:0;opacity:0;cursor:pointer}
.bigshot{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;background:rgba(0,0,0,.78);cursor:zoom-out;padding:24px}
.bigshot img{max-width:min(1100px,94vw);max-height:82vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.bigshot i{color:#fff;opacity:.7;font-style:normal;font-size:12px}

/* ป้ายชื่อแผนก อยู่ติดโลโก้ บอกชัดว่าอยู่หน้าของแผนกไหน */
.deptbadge{flex:none;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;
  background:var(--accent-soft);color:var(--accent);font-size:13.5px;font-weight:650;white-space:nowrap}
.deptbadge.pick{position:relative;cursor:pointer}
.deptbadge.pick::after{content:"▾";font-size:10px;opacity:.7}
.deptbadge select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
  border:0;padding:0;-webkit-appearance:none;appearance:none}
@media (max-width:860px){.deptbadge{font-size:12px;padding:4px 9px}}

/* ============================== Modern ==============================
 * ขาว ดำ น้ำเงิน · พื้นหลังเป็นลายโมเสกจาง ๆ แทนพื้นเรียบ
 * เปลี่ยนแค่สีกับพื้นหลัง ไม่ขยับตำแหน่งอะไรเลย เพราะทุกคนจำที่อยู่ของปุ่มไว้แล้ว
 */
:root[data-skin="modern"]{
  --bg:#f4f6fb; --panel:#fff; --panel-2:#fafbff; --line:#d7dceb; --line-soft:#e7ebf6;
  /* สีเทาอ่อนเกินอ่านไม่ออกบนพื้นไล่สี จึงเข้มขึ้นกว่าธีมอื่น */
  --text:#0a1020; --muted:#49526a; --accent:#1d4ed8; --accent-ink:#fff; --accent-soft:#e5ecfd;
  --ok:#0f766e; --ok-soft:#e3f4f2; --warn:#b45309; --warn-soft:#fdf1e3; --danger:#b91c1c; --danger-soft:#fdeaea;
  --shadow:0 1px 2px rgba(11,18,32,.06),0 10px 28px rgba(29,78,216,.07);
}
/*
 * พื้นหลังไล่สีแบบเมช — ม่วง ชมพู ส้มอิฐ ตามภาพที่ตกลงกันไว้
 * วาดด้วยวงไล่สีซ้อนกันหลายชั้น ไม่ใช้ไฟล์รูป จะได้คมทุกขนาดจอ ไม่กินเน็ต และเปลี่ยนสีได้ทีหลัง
 * ตรึงไว้กับจอ (fixed) เวลาเลื่อนหน้าพื้นหลังจึงนิ่ง เหมือนมองผ่านกระจกออกไป
 */
:root[data-skin="modern"] body{
  background-color:#f3ebee;
  background-image:
    radial-gradient(52% 48% at 50% 22%, rgba(74,36,124,.60), rgba(74,36,124,0) 70%),
    radial-gradient(40% 36% at 72% 10%, rgba(186,66,50,.58), rgba(186,66,50,0) 72%),
    radial-gradient(44% 42% at 3% 44%, rgba(205,96,70,.55), rgba(205,96,70,0) 74%),
    radial-gradient(50% 46% at 33% 92%, rgba(186,132,196,.60), rgba(186,132,196,0) 72%),
    radial-gradient(42% 40% at 97% 86%, rgba(214,118,86,.50), rgba(214,118,86,0) 74%),
    radial-gradient(34% 32% at 90% 50%, rgba(246,238,241,.9), rgba(246,238,241,0) 70%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
/* การ์ดโปร่งเล็กน้อยให้สีพื้นหลังเรืองผ่านขึ้นมา แต่ยังอ่านตัวหนังสือได้สบาย */
/*
 * การ์ดต้องทึบพอให้ตัวหนังสืออ่านสบาย และมีเส้นขอบจริงให้เห็นว่าการ์ดจบตรงไหน
 * ตอนแรกใช้ขอบขาวโปร่ง ปรากฏว่าการ์ดลอยกลืนกับพื้น มองยาก
 */
:root[data-skin="modern"] .card,
:root[data-skin="modern"] .kpi,
:root[data-skin="modern"] .editcard,
:root[data-skin="modern"] .supcard,
:root[data-skin="modern"] .doc{background:rgba(255,255,255,.95);border-color:rgba(10,16,32,.10);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* ของที่มีตัวหนังสือแต่ไม่มีพื้น ให้มีแผ่นขาวจาง ๆ รองไว้ ไม่ให้ตัวหนังสือลอยบนสีพื้นหลัง */
:root[data-skin="modern"] .empty,
:root[data-skin="modern"] .findrow input,
:root[data-skin="modern"] .salesbar,
:root[data-skin="modern"] .kpis>*{background:rgba(255,255,255,.88)}
:root[data-skin="modern"] input:not([type="checkbox"]):not([type="file"]),
:root[data-skin="modern"] select,
:root[data-skin="modern"] textarea{background:var(--panel);color:var(--text);border-color:var(--line)}
/*
 * หัวเรื่องของหน้าวางอยู่บนพื้นไล่สีตรง ๆ ตัวหนังสือสีเทาจะจมหายตรงที่สีเข้ม
 * จึงรองด้วยแผ่นขาวโปร่งเบลอฉากหลัง อ่านชัดขึ้นแต่ยังเห็นสีพื้นเรืองผ่านขึ้นมา
 */
:root[data-skin="modern"] .head{background:rgba(255,255,255,.66);border-radius:14px;padding:14px 16px;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
:root[data-skin="modern"] .opshead{text-shadow:0 1px 0 rgba(255,255,255,.8)}
:root[data-skin="modern"] .navtabs{background:rgba(255,255,255,.92);border-left-color:rgba(255,255,255,.8)}
/*
 * ห้ามใส่ backdrop-filter ที่แถบบนของธีมนี้
 * เพราะ backdrop-filter ทำให้ลูกที่เป็น position:fixed ยึดกับแถบบนแทนที่จะยึดกับจอ
 * รางเมนูอยู่ในแถบบน มันจะถูกหั่นให้สูงเท่าแถบทันที (เจอมาแล้วตอนทำ)
 */
:root[data-skin="modern"] .top{background:rgba(255,255,255,.78);border-bottom-color:rgba(255,255,255,.7)}
:root[data-skin="modern"] .card,
:root[data-skin="modern"] .doc,
:root[data-skin="modern"] .editcard,
:root[data-skin="modern"] .supcard{border-color:var(--line)}
:root[data-skin="modern"] .btn.primary{background:var(--accent);border-color:var(--accent)}
:root[data-skin="modern"] .deptbadge{background:var(--accent);color:var(--accent-ink)}

/* Modern โหมดมืด — ดำจริง น้ำเงินสว่าง โมเสกเข้ม */
:root[data-skin="modern"][data-theme="dark"],
:root[data-skin="modern"]:not([data-theme="light"]){
  --accent:#60a5fa; --accent-soft:#132036;
}
@media (prefers-color-scheme:dark){
  :root[data-skin="modern"]:not([data-theme="light"]){
    --bg:#080a0f; --panel:#101420; --panel-2:#141926; --line:#2c3648; --line-soft:#1e2534;
    --text:#f2f5fc; --muted:#a9b5c9; --accent-ink:#08111f;
  }
  :root[data-skin="modern"]:not([data-theme="light"]) body{
    background-color:#0a0910;
    background-image:
      radial-gradient(58% 52% at 50% 28%, rgba(96,52,150,.55), rgba(96,52,150,0) 70%),
      radial-gradient(44% 40% at 76% 12%, rgba(150,52,42,.40), rgba(150,52,42,0) 72%),
      radial-gradient(48% 44% at 4% 48%, rgba(150,70,54,.34), rgba(150,70,54,0) 74%),
      radial-gradient(52% 48% at 34% 92%, rgba(112,70,132,.40), rgba(112,70,132,0) 72%);
  }
  :root[data-skin="modern"]:not([data-theme="light"]) .card,
  :root[data-skin="modern"]:not([data-theme="light"]) .kpi,
  :root[data-skin="modern"]:not([data-theme="light"]) .editcard,
  :root[data-skin="modern"]:not([data-theme="light"]) .supcard{background:rgba(14,18,30,.94);border-color:rgba(255,255,255,.14)}
  :root[data-skin="modern"]:not([data-theme="light"]) .navtabs{background:rgba(16,20,32,.92);border-left-color:rgba(255,255,255,.08)}
  :root[data-skin="modern"]:not([data-theme="light"]) .top{background:rgba(12,14,24,.86);border-bottom-color:rgba(255,255,255,.10)}
  :root[data-skin="modern"]:not([data-theme="light"]) .head{background:rgba(14,18,30,.66)}
  :root[data-skin="modern"]:not([data-theme="light"]) .opshead{text-shadow:0 1px 2px rgba(0,0,0,.6)}
  :root[data-skin="modern"]:not([data-theme="light"]) .empty,
  :root[data-skin="modern"]:not([data-theme="light"]) .findrow input,
  :root[data-skin="modern"]:not([data-theme="light"]) .salesbar,
  :root[data-skin="modern"]:not([data-theme="light"]) .kpis>*{background:rgba(14,18,30,.9)}
}
:root[data-skin="modern"][data-theme="dark"]{
  --bg:#080a0f; --panel:#101420; --panel-2:#141926; --line:#2c3648; --line-soft:#1e2534;
  --text:#f2f5fc; --muted:#a9b5c9; --accent-ink:#08111f;
}
/* โหมดมืดไม่ต้องมีเงาขาวใต้ตัวหนังสือ และของที่ไม่มีพื้นให้ใช้แผ่นดำจาง */
:root[data-skin="modern"][data-theme="dark"] .head{background:rgba(14,18,30,.66)}
:root[data-skin="modern"][data-theme="dark"] .opshead{text-shadow:0 1px 2px rgba(0,0,0,.6)}
:root[data-skin="modern"][data-theme="dark"] .empty,
:root[data-skin="modern"][data-theme="dark"] .findrow input,
:root[data-skin="modern"][data-theme="dark"] .salesbar,
:root[data-skin="modern"][data-theme="dark"] .kpis>*{background:rgba(14,18,30,.9)}
:root[data-skin="modern"][data-theme="dark"] body{
  background-color:#0a0910;
  background-image:
    radial-gradient(58% 52% at 50% 28%, rgba(96,52,150,.55), rgba(96,52,150,0) 70%),
    radial-gradient(44% 40% at 76% 12%, rgba(150,52,42,.40), rgba(150,52,42,0) 72%),
    radial-gradient(48% 44% at 4% 48%, rgba(150,70,54,.34), rgba(150,70,54,0) 74%),
    radial-gradient(52% 48% at 34% 92%, rgba(112,70,132,.40), rgba(112,70,132,0) 72%);
}
:root[data-skin="modern"][data-theme="dark"] .card,
:root[data-skin="modern"][data-theme="dark"] .kpi,
:root[data-skin="modern"][data-theme="dark"] .editcard,
:root[data-skin="modern"][data-theme="dark"] .supcard{background:rgba(14,18,30,.94);border-color:rgba(255,255,255,.14)}
:root[data-skin="modern"][data-theme="dark"] .navtabs{background:rgba(16,20,32,.92);border-left-color:rgba(255,255,255,.08)}
:root[data-skin="modern"][data-theme="dark"] .top{background:rgba(12,14,24,.78);border-bottom-color:rgba(255,255,255,.07)}

/* รอบแก้ของลูกค้า */
.roundbox{margin-top:16px}
.roundrow{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line-soft)}
.roundrow:first-of-type{border-top:0}
.roundrow p{margin:0;font-size:13px}
.roundrow small{color:var(--muted);font-size:11.5px}
.roundrow .rno{flex:0 0 auto;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;
  background:var(--warn-soft);color:var(--warn);white-space:nowrap}
.roundrow.ok .rno{background:var(--ok-soft);color:var(--ok)}

/* ประวัติการแก้ไข */
.audlist{display:flex;flex-direction:column}
.audrow{display:grid;grid-template-columns:130px 1fr 150px;gap:10px;align-items:baseline;
  padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.audrow:last-child{border-bottom:0}
.audwho{font-weight:600}
.audact i{font-style:normal;color:var(--muted);margin-left:6px;font-size:11.5px}
.audwhen{color:var(--muted);font-size:11.5px;text-align:right}
@media (max-width:720px){.audrow{grid-template-columns:1fr;gap:2px}.audwhen{text-align:left}}

/* ไอคอนเมนู ซ่อนไว้ในธีมที่เมนูเป็นข้อความ โชว์เฉพาะธีมที่เมนูเป็นราง */
.navico{display:none;width:18px;height:18px;flex:none}
.navlab{white-space:nowrap}
.railpin{display:none}

/* ============================== Modern — รางเมนูด้านขวา ============================== */
:root[data-skin="modern"] .navtabs{
  position:fixed;top:0;right:0;bottom:0;z-index:30;width:60px;
  flex-direction:column;align-items:stretch;gap:4px;
  padding:14px 8px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  background:var(--panel);border-left:1px solid var(--line);
  transition:width .18s ease,box-shadow .18s ease}
:root[data-skin="modern"] .navtabs:hover,
:root[data-skin="modern"] .navtabs.open,
:root[data-skin="modern"] .navtabs.pinned{width:226px;box-shadow:-14px 0 34px rgba(11,18,32,.10)}
:root[data-skin="modern"] .navtab{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:9px}
:root[data-skin="modern"] .navico{display:block}
:root[data-skin="modern"] .navlab{opacity:0;transform:translateX(-4px);transition:opacity .16s ease,transform .16s ease}
:root[data-skin="modern"] .navtabs:hover .navlab,
:root[data-skin="modern"] .navtabs.open .navlab,
:root[data-skin="modern"] .navtabs.pinned .navlab{opacity:1;transform:none}
:root[data-skin="modern"] .navtab.on{background:var(--accent);color:var(--accent-ink)}
:root[data-skin="modern"] .railpin{display:block;margin-top:auto;padding:6px;border:1px solid var(--line);
  border-radius:8px;color:var(--muted);background:var(--panel-2);font-size:13px}
:root[data-skin="modern"] .railpin:hover{color:var(--accent);border-color:var(--accent)}
/* เนื้อหาเว้นที่ให้รางเสมอ ไม่ให้รางทับของ */
:root[data-skin="modern"] .top{padding-right:76px}
:root[data-skin="modern"] .wrap{padding-right:76px}
/* ปักหมุดให้รางกางค้าง เนื้อหาต้องถอยให้จริง ไม่ใช่ให้รางทับ */
:root[data-skin="modern"] body:has(.navtabs.pinned) .top,
:root[data-skin="modern"] body:has(.navtabs.pinned) .wrap{padding-right:242px}
:root[data-skin="modern"] .undobar{left:16px}
/*
 * ปุ่มแชทอยู่ขอบขวาเหมือนราง พอรางกางออกมันจะทับกัน
 * จึงให้ปุ่มเลื่อนหลบไปทางซ้ายพร้อมกับจังหวะที่รางกาง แล้วเลื่อนกลับเองเมื่อรางยุบ
 */
@media (max-width:760px){
}
/* มือถือ รางกลายเป็นแถบล่างจอแบบแอป กดด้วยนิ้วโป้งได้ */
@media (max-width:760px){
  :root[data-skin="modern"] .navtabs{top:auto;left:0;right:0;bottom:0;width:auto;flex-direction:row;
    justify-content:space-around;padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    border-left:0;border-top:1px solid var(--line);overflow-x:auto}
  :root[data-skin="modern"] .navtabs:hover,
  :root[data-skin="modern"] .navtabs.pinned{width:auto;box-shadow:0 -10px 24px rgba(11,18,32,.10)}
  :root[data-skin="modern"] .navtab{flex-direction:column;gap:3px;padding:6px 10px;font-size:10.5px}
  :root[data-skin="modern"] .navlab{opacity:1;transform:none;font-size:10.5px}
  :root[data-skin="modern"] .railpin{display:none}
  :root[data-skin="modern"] .top,
  :root[data-skin="modern"] .wrap{padding-right:16px}
  :root[data-skin="modern"] .wrap{padding-bottom:96px}
}

/* ============================== Studio — ห้องตัดต่อ ============================== */
:root[data-skin="studio"]{
  --bg:#0b0c0e; --panel:#14161a; --panel-2:#181b20; --line:#2a2e36; --line-soft:#1f2228;
  --text:#e9ecf2; --muted:#8f97a5; --accent:#e0a33e; --accent-ink:#12140f; --accent-soft:#2a2317;
  --ok:#3fb9a5; --ok-soft:#132725; --warn:#e0a33e; --warn-soft:#2a2317; --danger:#e06a5a; --danger-soft:#2a1714;
  --radius:6px; --shadow:none;
  color-scheme:dark;
}
:root[data-skin="studio"] body{background:var(--bg);font-size:14.5px}
:root[data-skin="studio"] .card,
:root[data-skin="studio"] .editcard,
:root[data-skin="studio"] .supcard,
:root[data-skin="studio"] .kpi{box-shadow:none;border-radius:6px}
:root[data-skin="studio"] .top{background:var(--panel);border-bottom:1px solid var(--line)}
/* รางซ้ายตายตัว ไอคอนอยู่บนชื่อ กดที่เดิมได้ทุกครั้งโดยไม่ต้องมอง */
:root[data-skin="studio"] .navtabs{
  position:fixed;top:0;left:0;bottom:0;z-index:30;width:88px;
  flex-direction:column;align-items:stretch;gap:2px;padding:12px 6px;
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--panel);border-right:1px solid var(--line)}
:root[data-skin="studio"] .navtab{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:9px 4px;border-radius:6px;font-size:10.5px;line-height:1.25;text-align:center}
:root[data-skin="studio"] .navico{display:block;width:19px;height:19px}
:root[data-skin="studio"] .navtab.on{background:var(--accent-soft);color:var(--accent);
  box-shadow:inset 2px 0 0 var(--accent)}
:root[data-skin="studio"] .top{padding-left:104px}
:root[data-skin="studio"] .wrap{padding-left:104px;max-width:1240px}
/* โมโนสเปซเฉพาะที่อยู่ไฟล์กับเวลา ไม่ใส่กับตัวเลขที่มีคำไทยต่อท้าย เพราะไทยในโมโนอ่านแปลก */
:root[data-skin="studio"] code,
:root[data-skin="studio"] .factin,
:root[data-skin="studio"] .naspath{font-family:ui-monospace,SFMono-Regular,"JetBrains Mono",monospace}
@media (max-width:760px){
  :root[data-skin="studio"] .navtabs{top:auto;left:0;right:0;bottom:0;width:auto;flex-direction:row;
    justify-content:space-around;padding:5px 6px calc(5px + env(safe-area-inset-bottom));
    border-right:0;border-top:1px solid var(--line);overflow-x:auto}
  :root[data-skin="studio"] .top,
  :root[data-skin="studio"] .wrap{padding-left:16px}
  :root[data-skin="studio"] .wrap{padding-bottom:96px}
}

/* ============================== Paper — กระดาษใบงาน ============================== */
:root[data-skin="paper"]{
  --bg:#f6f3ec; --panel:#fffdf8; --panel-2:#faf7f0; --line:#ddd6c7; --line-soft:#eae4d7;
  --text:#14110c; --muted:#6d6455; --accent:#b4391f; --accent-ink:#fff; --accent-soft:#f6e6e1;
  --ok:#2f6b46; --ok-soft:#e6efe8; --warn:#9a6314; --warn-soft:#f6eddb; --danger:#a02a17; --danger-soft:#f7e4e0;
  --radius:3px; --shadow:none;
  color-scheme:light;
}
:root[data-skin="paper"] body{background:var(--bg)}
:root[data-skin="paper"] .card,
:root[data-skin="paper"] .editcard,
:root[data-skin="paper"] .supcard,
:root[data-skin="paper"] .kpi{box-shadow:none;border-radius:3px;border:1px solid var(--line)}
:root[data-skin="paper"] .head h2{font-family:Georgia,"Times New Roman","Noto Serif Thai",serif;font-size:25px;letter-spacing:-.01em}
:root[data-skin="paper"] .doctitle,
:root[data-skin="paper"] .opshead{font-family:Georgia,"Times New Roman","Noto Serif Thai",serif}
:root[data-skin="paper"] .wrap{max-width:1000px;padding-top:26px}
:root[data-skin="paper"] .kicker{letter-spacing:.16em}
:root[data-skin="paper"] .top{background:var(--panel);border-bottom:2px solid var(--text)}
:root[data-skin="paper"] .navtab{border-radius:0;background:none;padding:6px 10px 5px;
  border-bottom:2px solid transparent;color:var(--muted)}
:root[data-skin="paper"] .navtab.on{background:none;color:var(--text);border-bottom-color:var(--accent)}
:root[data-skin="paper"] .navtab:hover{background:none;color:var(--text)}
:root[data-skin="paper"] .btn{border-radius:3px}
:root[data-skin="paper"] .btn.primary{background:var(--text);border-color:var(--text);color:var(--panel)}
:root[data-skin="paper"] .deptbadge{border-radius:3px;background:none;color:var(--text);
  border:1px solid var(--text);font-weight:600}
:root[data-skin="paper"] .vin{animation:none}
:root[data-skin="paper"] .row:hover{transform:none}
:root[data-skin="paper"] .btn:active,
:root[data-skin="paper"] .navtab:active,
:root[data-skin="paper"] .stab:active{transform:none}

.roundbox.inline{margin-top:10px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2)}
.roundbox.inline b{font-size:12px}

/* ข้อความที่เพิ่งกดส่ง ยังไม่ได้รับคำยืนยันจากเซิร์ฟเวอร์ */
/* ตัวเลขข้อความใหม่บนไอคอนแชท เด้งหนึ่งครั้งตอนตัวเลขเปลี่ยน */
@keyframes dotpop{0%{transform:scale(.6)}55%{transform:scale(1.25)}100%{transform:scale(1)}}

/* ปุ่มบอกว่ามีข้อความใหม่ ตอนที่กำลังอ่านย้อนอยู่ */
  padding:5px 12px;border-radius:20px;border:1px solid var(--line);background:var(--accent);color:var(--accent-ink);
  font-size:11.5px;font-weight:600;box-shadow:0 6px 16px rgba(0,0,0,.18);cursor:pointer}

/*
 * มือถือ: ทุกอย่างที่กดได้ต้องตอบสนองทันทีที่แตะ
 * touch-action:manipulation บอก Safari ว่าไม่ต้องรอดูว่าจะแตะซ้ำเพื่อซูมไหม จึงไม่มีอาการหน่วง
 * และใส่สีตอนนิ้วแตะค้าง เพื่อให้รู้ว่ากดติดแล้วแม้เน็ตจะยังโหลดอยู่
 */

/*
 * เครื่องที่ใช้นิ้วไม่มีการ "ชี้" — กฎ hover ทำให้ไอโฟนต้องแตะหนึ่งครั้งเพื่อชี้ก่อนแล้วค่อยแตะกด
 * จึงปิดเอฟเฟกต์ hover ที่ขยับตำแหน่งหรือเปลี่ยนขนาดทั้งหมดบนเครื่องที่ใช้นิ้ว
 */
@media (hover:none){
  .row:hover{transform:none}
  .btn:hover{border-color:var(--line)}
  .navtab:hover{background:none}
  :root[data-skin="modern"] .navtabs:hover{width:auto}
}



/* เงินที่กองอยู่กับลูกค้ารายหนึ่ง */
.risknote{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0 0;font-size:12px;color:var(--muted)}
.risknote .riskbig{flex:1 1 100%;color:var(--danger);font-size:12.5px}

/* เตือนราคาต่ำกว่าเพดานในใบเสนอราคา */
.qwarn{border-radius:10px;padding:10px 12px;margin-bottom:10px;font-size:12.5px;line-height:1.55}
.qwarn b{display:block;font-size:13.5px;margin-bottom:2px}
.qwarn.warn{background:var(--warn-soft);color:var(--warn)}
.qwarn.bad{background:var(--danger-soft);color:var(--danger)}

/* เพดานสำรองจ่ายรายเดือน */
.capcard{margin-bottom:18px}
.caphead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.caphead b{font-size:14.5px}
.caphead .hint{margin:0}
.caprow{display:grid;grid-template-columns:1fr 160px 150px;gap:12px;align-items:center;
  padding:8px 0;border-top:1px solid var(--line-soft)}
.caprow:first-of-type{border-top:0}
.capmain b{font-size:13.5px;display:block}
.capmain small{font-size:11.5px;color:var(--muted)}
.capbar{height:8px;border-radius:6px;background:var(--line-soft);overflow:hidden}
.capbar i{display:block;height:100%;background:var(--ok);border-radius:6px}
.caprow.near .capbar i{background:var(--warn)}
.caprow.over .capbar i{background:var(--danger)}
.capnum{text-align:right}
.capnum b{font-size:13.5px}
.capnum small{display:block;font-size:11px;color:var(--muted)}
.capwarn{color:var(--danger)}
@media (max-width:720px){.caprow{grid-template-columns:1fr;gap:4px}.capnum{text-align:left}}

/* วันสุดท้ายของพนักงาน ในแถวทีมงาน */
.mleave input,.mstart input{font-size:11.5px;padding:3px 6px;width:100%;border:1px solid var(--line);border-radius:7px;background:var(--panel)}
.mstart{display:flex;flex-direction:column;gap:2px;min-width:0}
.mstart i{font-style:normal;font-size:10.5px;color:var(--muted);white-space:nowrap}
.mface{display:grid;place-items:center;cursor:pointer}

/* ================================ สิ่งที่ต้องทำ ================================
 * รายการส่วนตัว · แถวเตี้ย ๆ อ่านไว ติ๊กแล้วเส้นวิ่งขีดฆ่าให้เห็นก่อนค่อยย้ายลงไปกองที่ทำแล้ว
 */
.todoadd{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.todoaddrow{display:flex;gap:8px}
.todoaddrow input{flex:1;min-width:0;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel-2);color:var(--text);font-size:15px}
.todoaddrow input:focus{outline:none;border-color:var(--accent);background:var(--panel)}
.duerow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.duelab{font-size:11.5px;color:var(--muted);margin-right:2px}
.duebtn{padding:5px 11px;font-size:12.5px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel-2);color:var(--muted);cursor:pointer}
.duebtn:hover{border-color:var(--accent);color:var(--text)}
.duebtn.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.duebtn.off{border-style:dashed}
.duesay{margin:0;font-size:12px;color:var(--muted)}
.todoadd>.lnk{align-self:flex-start;text-align:left}

.todobox{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:8px;
  transition:opacity .25s ease,border-color .14s ease}
.todobox.open{border-color:var(--accent)}
.todo{display:flex;align-items:center;gap:11px;padding:11px 13px}
.ttick{flex:none;width:26px;height:26px;border:1.6px solid var(--line);border-radius:999px;background:var(--panel-2);
  display:grid;place-items:center;color:transparent;cursor:pointer;transition:all .16s ease}
.ttick svg{width:15px;height:15px}
.ttick:hover{border-color:var(--ok);color:color-mix(in srgb,var(--ok) 45%,transparent)}
.todobox.done .ttick{background:var(--ok);border-color:var(--ok);color:var(--ok-ink)}
.tmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:left;background:none;
  border:0;padding:0;cursor:pointer;color:inherit}
.ttitle{font-size:14.5px;font-weight:550;line-height:1.45;word-break:break-word}
.ttitle i{font-style:normal;position:relative;display:inline}
/* เส้นขีดฆ่าเริ่มจากศูนย์ วิ่งไปทางขวา แล้วค้างไว้เมื่อรายการเสร็จแล้วจริง ๆ */
.ttitle i::after{content:"";position:absolute;left:0;top:52%;height:1.8px;width:0;background:currentColor;
  border-radius:2px;opacity:.6}
.todobox.striking .ttitle i::after{animation:strike .4s ease-out forwards}
.todobox.done .ttitle i::after{width:100%}
.todobox.done .ttitle,.todobox.done .tmeta{color:var(--muted)}
.todobox.striking{opacity:.55}
@keyframes strike{from{width:0}to{width:100%}}
.tmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.tmeta .due{font-weight:600}
.tmeta .due.soon{color:var(--warn)}
.tmeta .due.late{color:var(--danger)}
.tmeta .due.free{font-weight:400;opacity:.75}
.tdot{opacity:.45}
.tnote{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(340px,50vw)}
.tx{flex:none;border:0;background:none;color:var(--muted);opacity:.4;font-size:12px;padding:5px 6px;
  line-height:1;cursor:pointer;border-radius:6px}
.tx:hover{opacity:1;color:var(--danger);background:var(--danger-soft)}
.todoedit{display:flex;flex-direction:column;gap:10px;padding:0 13px 13px 50px;border-top:1px solid var(--line-soft);padding-top:12px}
.todoedit .btnrow{justify-content:flex-end}

/* คำชมตอนติ๊กเสร็จ · ใสแบบเดียวกับข้อความเตือน แต่ใหญ่กว่าและเด้งขึ้นมานิดหนึ่ง */
.cheer{position:fixed;left:50%;top:46%;transform:translate(-50%,-50%);z-index:71;pointer-events:none;
  padding:14px 22px;border-radius:14px;max-width:82vw;text-align:center;
  color:var(--text);background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(9px) saturate(1.3);backdrop-filter:blur(9px) saturate(1.3);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  animation:cheerin .26s cubic-bezier(.2,1.4,.5,1), toastout .7s ease-in 2s forwards}
.cheer b{font-size:15.5px;line-height:1.45}
@keyframes cheerin{from{opacity:0;transform:translate(-50%,calc(-50% + 10px)) scale(.9)}to{opacity:1}}
:root[data-theme="dark"] .cheer{background:rgba(22,24,30,.55);border-color:rgba(255,255,255,.15);
  box-shadow:0 10px 30px rgba(0,0,0,.4)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cheer{background:rgba(22,24,30,.55);border-color:rgba(255,255,255,.15)}}

@media (max-width:640px){
  .todoedit{padding-left:13px}
  .tnote{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cheer{animation:none}
  .todobox.striking .ttitle i::after{animation:none;width:100%}
}

/* ---------- ผู้รับผิดชอบลูกค้าและประวัติการเปลี่ยนมือ ---------- */
.ownercard .ownerrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 4px}
.ownercard select{padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);
  color:var(--text);font-size:14px;min-width:200px}
.ownercard select:hover{border-color:var(--accent)}
.ownernow{font-size:15px}
.ownerage{font-style:normal;font-size:12px;color:var(--muted)}
.spellmini{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.spellmini>b{display:block;font-size:11.5px;color:var(--muted);margin-bottom:6px;font-weight:600}
.spelllist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.spelllist li{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.spelllist li b{color:var(--text);font-weight:600;min-width:96px}
.spelllist li.now b::after{content:"ตอนนี้";margin-left:7px;font-size:10px;font-weight:600;color:var(--ok);
  border:1px solid var(--ok);border-radius:999px;padding:1px 6px;vertical-align:middle}
.spelllist li i{font-style:normal;opacity:.7}
.spellnone{margin:0;font-size:12.5px}
.spellbox{border-top:1px solid var(--line-soft);margin-top:4px}
.spellhead{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;background:none;border:0;
  cursor:pointer;color:inherit;text-align:left}
.spellhead b{font-size:13.5px}
.spellhead span{flex:1;font-size:12px;color:var(--muted)}
.spellhead i{font-style:normal;font-size:10px;color:var(--muted)}
.spellhead:hover{background:var(--panel-2)}
.spellbody{padding:0 14px 14px}
.spellclient{padding:10px 0;border-top:1px solid var(--line-soft)}
.spellname{display:block;font-size:13px;margin-bottom:6px}

/* ================== ฟอร์มทะเบียนลูกค้า ==================
 * ทุกช่องในแถวเดียวกันกว้างเท่ากันและก้นตรงกัน แม้คำอธิบายใต้หัวข้อจะยาวไม่เท่ากัน
 * เดิมใช้ flex ผสมช่องแคบ ช่องเลยเหลื่อมกันทั้งหน้า กรอกแล้วสายตาต้องกระโดดไปมา
 */
.regform .card{padding:18px 20px 20px}
.regform .card>b{display:block;font-size:14.5px;margin-bottom:14px;padding-bottom:10px;
  border-bottom:1px solid var(--line-soft)}
.regform .frow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:18px;align-items:end;margin-bottom:16px}
.regform .frow:last-child,.regform .card>.field:last-child{margin-bottom:0}
.regform .frow .field,.regform .card>.field{margin-bottom:0}
/* ช่องแคบไม่ใช้ในฟอร์มนี้แล้ว เผื่อมีตกค้างให้กลับมากว้างเท่าคนอื่น */
.regform .field.narrow{flex:none;min-width:0}
.regform .field span{margin-bottom:6px;line-height:1.35;color:var(--text);font-size:13px;font-weight:550}
.regform .field span i{color:var(--muted);font-weight:400;margin-top:3px}
.regform .field input,.regform .field select{height:42px;font-size:14.5px}
.regform .field input::placeholder{color:var(--muted);opacity:.6}

/* ช่องที่ต้องกรอก ใช้ป้ายสีเดียวกับที่อื่นในเว็บ จะได้อ่านออกว่าหมายถึงอะไรทันที */
.regform .req{font-weight:600}

/* หน่วยกำกับท้ายช่องตัวเลข จะได้ไม่ต้องเดาว่าใส่อะไร */
.regform .field.unit{position:relative}
.regform .field.unit input{padding-right:52px}
.regform .field.unit::after{position:absolute;right:12px;bottom:12px;font-size:12.5px;color:var(--muted);pointer-events:none}
.regform .field.baht::after{content:"บาท"}
.regform .field.clip::after{content:"คลิป"}

/* แถวบริการเสริม ช่องราคาแคบกว่าได้ แต่ยังตรงเป็นคอลัมน์เดียวกันทุกแถว */
.regform .addonrow{grid-auto-flow:row;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,2fr) 42px;
  align-items:end;margin-bottom:10px}
.regform .addonrow>.btn{height:42px;padding:0;display:grid;place-items:center}

/* ปุ่มบันทึกลอยติดขอบล่าง ฟอร์มยาวแค่ไหนก็กดได้โดยไม่ต้องเลื่อนลงไปหา */
.regform .formbar{position:sticky;bottom:0;z-index:5;display:flex;justify-content:flex-end;gap:10px;
  margin:20px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 88%,transparent);border-top:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

@media (max-width:760px){
  .regform .frow,.regform .addonrow{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:14px}
  .regform .addonrow>.btn{justify-self:end;width:42px}
  .regform .formbar{margin-left:-12px;margin-right:-12px}
}

/* ---------- ผู้รับผิดชอบสองฝั่ง: Prop และ Host ---------- */
.ownersides{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:10px 0 4px}
.ownerside{display:flex;flex-direction:column;gap:7px;padding:13px 14px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel-2)}
.sidename{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--accent)}
.ownerside select{width:100%}
.sideduty{font-size:11.5px;color:var(--muted);line-height:1.45}
.ownerside .spellmini{margin-top:4px;padding-top:9px}
.ownerpair{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.ownerpick{display:flex;flex-direction:column;gap:3px}
.ownerpick span{font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.03em}
.ownerpick select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);
  color:var(--text);font-size:13px;min-width:150px}
.clientrow.two{align-items:flex-end;gap:14px;flex-wrap:wrap}
.spellside{margin-top:6px}
.spellside em{display:block;font-style:normal;font-size:10.5px;font-weight:600;color:var(--accent);margin-bottom:4px}
@media (max-width:640px){
  .ownerpair{width:100%}
  .ownerpick{flex:1}
  .ownerpick select{min-width:0;width:100%}
}

/* คนที่ยังไม่ได้ตั้งแผนก ต้องเห็นว่ายังไม่ได้ตั้ง ไม่ใช่โชว์แผนกแรกเหมือนตั้งไว้แล้ว */
.mrow select.unset{border-color:var(--warn);color:var(--warn)}

/* ---------- สถานะลูกค้าในทะเบียน ---------- */
/* สามปุ่มติดกัน กดอันไหนคืออันนั้น กดซ้ำที่อันเดิมคือเอาออก กลับไปเป็นยังไม่เริ่ม */
.statusset{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--panel-2)}
.statusbtn{padding:4px 10px;font-size:11px;line-height:1.5;color:var(--muted);background:none;border:0;cursor:pointer;white-space:nowrap}
.statusbtn+.statusbtn{border-left:1px solid var(--line)}
.statusbtn:hover{background:var(--line-soft);color:var(--text)}
.statusbtn.on{font-weight:600}
/*
 * ให้ตัวที่เลือกอยู่มีมุมมนของตัวเองด้วย ไม่พึ่งการตัดขอบของกล่องอย่างเดียว
 * บางหน้าที่กล่องถูกบีบหรือมีของมาซ้อน การตัดขอบไม่ทำงาน สีพื้นจะเป็นเหลี่ยมโผล่ออกมา
 */
.statusset>.statusbtn:first-child{border-top-left-radius:999px;border-bottom-left-radius:999px}
.statusset>.statusbtn:last-child{border-top-right-radius:999px;border-bottom-right-radius:999px}
.statusbtn.ok.on{background:var(--ok);color:var(--ok-ink)}
.statusbtn.warn.on{background:var(--warn);color:var(--warn-ink)}
.statusbtn.off.on{background:var(--muted);color:var(--panel)}
.statuschip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;
  background:var(--panel-2);color:var(--muted);border:1px solid var(--line)}
.statuschip.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.statuschip.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.statuschip.off{background:var(--line-soft);color:var(--muted);border-color:transparent}
.regchannel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.regchannel a{color:var(--accent);text-decoration:none}
.regchannel a:hover{text-decoration:underline}
.regchannel i{font-style:normal;color:var(--muted);font-size:11.5px}
.reg.gone .rowmain b,.reg.gone .regchannel{opacity:.5}
.statustabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.statustabs .stab i{font-style:normal;opacity:.6;margin-left:3px}
@media (max-width:820px){
  .statusset{margin-top:4px}
  .statustabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
}

/* ---------- ทะเบียนลูกค้า: แยกเป็นกล่องตามสถานะ อ่านง่ายกว่าตารางยาวก้อนเดียว ---------- */
.reggroup{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden;margin-bottom:18px;
  box-shadow:var(--shadow)}
.reggrouphead{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--panel-2);
  border-bottom:1px solid var(--line)}
.reggrouphead b{font-size:13.5px}
.reggrouphead i{font-style:normal;font-size:11.5px;color:var(--muted)}
.gdot{width:9px;height:9px;border-radius:99px;background:var(--muted);flex:none}
.reggroup.ok .gdot{background:var(--ok)}
.reggroup.warn .gdot{background:var(--warn)}
.reggroup.off .gdot{background:var(--muted)}
.reggroup.none .gdot{background:transparent;border:1.5px dashed var(--muted)}
.reggroup.ok .reggrouphead{background:var(--ok-soft)}
.reggroup.warn .reggrouphead{background:var(--warn-soft)}

/* หัวคอลัมน์กับแถว อยู่ในกล่องเดียวกันแล้ว จึงไม่ต้องมีกรอบซ้อนอีกชั้น */
.reggroup .reghead{padding:8px 14px;border-bottom:1px solid var(--line-soft);background:var(--panel)}
.reggroup .reglist{border:0;border-radius:0}
.reggroup .reg{padding:11px 14px}
/* สลับสีแถวเว้นแถว ตาจะได้ไม่หลุดบรรทัดตอนกวาดไปทางขวา */
.reggroup .reg:nth-child(even){background:var(--panel-2)}
.reggroup .reg:hover{background:var(--accent-soft)}
/* เส้นคั่นคอลัมน์บาง ๆ ช่วยให้รู้ว่าข้อมูลไหนเป็นของช่องไหน */
.reggroup .reg>*+*{border-left:1px solid var(--line-soft);padding-left:12px;min-height:22px;display:flex;
  align-items:center;flex-wrap:wrap}
.reggroup .reg>.regcontact{display:block}
.reggroup .reg .rowmain b{font-size:14px}
/* ช่องที่ยังไม่ได้กรอก จางลงกว่าของจริง จะได้ไม่แย่งสายตา */
.reg .blank{font-style:normal;color:var(--muted);opacity:.5;font-size:11.5px}
.reg.gone{opacity:.72}
@media (max-width:820px){
  .reggroup .reg>*+*{border-left:0;padding-left:0}
}

/* ป้ายสถานะบนการ์ดลูกค้าในหน้าภาพรวม วางมุมขวาบนของการ์ด ไม่แย่งที่ตัวเลข */
.cboard{position:relative}
.cardstate{position:absolute;top:12px;right:12px}
.cardstate .statuschip{font-size:10.5px;padding:2px 8px}

/* ============ สิ่งที่ต้องทำ ติดอยู่ในหน้างานของฉัน ============
 * จอคอม: กางค้างมุมขวาบน · ไอแพดกับไอโฟน: ย่อเป็นปุ่ม กดแล้วค่อยกาง
 * เพราะจอเล็กพื้นที่ทำงานสำคัญกว่า ไม่ควรมีอะไรบังตั้งแต่เปิดหน้า
 */
/*
 * เว้นที่ด้านขวาให้พ้นรางไอคอน (โทรโข่ง · กองวันนี้ · สิ่งที่ต้องทำ)
 * ของเดิมกล่องนี้ทับปุ่มทั้งราง กดปุ่มเดิมซ้ำเพื่อปิดไม่ได้ และกดปุ่มอื่นข้าง ๆ ก็ไม่ได้
 */
.todoside{position:fixed;top:62px;right:76px;z-index:45;width:296px;max-height:calc(100vh - 92px);
  display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:13px;box-shadow:0 10px 34px rgba(16,17,25,.14);overflow:hidden}
/* เล่นอนิเมชันเฉพาะตอนกดเปิด · ถ้าใส่ไว้ที่ตัวกล่องตรง ๆ มันจะเล่นซ้ำทุกครั้งที่หน้าวาดใหม่ */
.todoside.justopen{animation:sidein .18s ease-out}
@keyframes sidein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
:root[data-theme="dark"] .todoside{box-shadow:0 10px 34px rgba(0,0,0,.5)}
.todoside header{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--line-soft);
  background:var(--panel-2)}
.todoside header b{flex:1;font-size:13px}
.sidecount{font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.sidecount.late{background:var(--danger-soft);color:var(--danger)}
.sidex{border:0;background:none;color:var(--muted);font-size:12px;cursor:pointer;padding:2px 4px;line-height:1;border-radius:6px}
.sidex:hover{background:var(--line-soft);color:var(--text)}
.sideadd{padding:10px 13px;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:7px}
.sideadd input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel-2);color:var(--text);font-size:13px}
.sideadd input:focus{outline:none;border-color:var(--accent);background:var(--panel)}
.duerow.small{gap:5px}
.duerow.small .duebtn{padding:3px 9px;font-size:11px}
.sidelist{overflow-y:auto;padding:6px 0}
.sideempty{margin:0;padding:14px 13px;font-size:12px;color:var(--muted);text-align:center}
.todobox.side{border:0;border-radius:0;margin:0;background:none}
.todobox.side .todo{padding:7px 13px;gap:9px}
.todobox.side:hover{background:var(--panel-2)}
.todobox.side .ttick{width:21px;height:21px}
.todobox.side .ttick svg{width:12px;height:12px}
.todobox.side .ttitle{font-size:12.5px;font-weight:500;line-height:1.4}
.sdue{font-style:normal;font-size:10.5px;color:var(--muted)}
.sdue.soon{color:var(--warn);font-weight:600}
.sdue.late{color:var(--danger);font-weight:600}
.todoside footer{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 13px;border-top:1px solid var(--line-soft);background:var(--panel-2);font-size:11px;color:var(--muted)}

/* ปุ่มย่อ — เห็นจำนวนที่ค้างโดยไม่ต้องกางทั้งกล่อง */
.sidepill{position:fixed;top:62px;right:16px;z-index:45;display:flex;align-items:center;gap:7px;
  padding:7px 13px 7px 11px;border-radius:999px;border:1px solid var(--line);background:var(--panel);
  color:var(--text);cursor:pointer;box-shadow:0 6px 18px rgba(16,17,25,.12);font-size:12px}
.sidepill:hover{border-color:var(--accent)}
.sidepill b{font-weight:700}
.sidepill.late{border-color:var(--danger);color:var(--danger)}
:root[data-theme="dark"] .sidepill{box-shadow:0 6px 18px rgba(0,0,0,.45)}

/* ไอแพด: กล่องแคบลงนิดหนึ่ง ยังลอยอยู่มุมเดิม วางทับเนื้อหาเฉพาะตอนกางเอง · เว้นรางไอคอนเหมือนจอใหญ่ */
@media (max-width:1099px){
  .todoside{width:276px;top:58px;right:70px}
  .sidepill{top:58px;right:12px}
}
/* ไอโฟน: กางแล้วเต็มจอไปเลย กล่องลอยบนจอแคบกดยากและบังงานที่กำลังทำ */
@media (max-width:720px){
  .todoside{inset:0;width:auto;max-height:none;border-radius:0;border:0;
    padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .todoside header{padding:14px 16px}
  .todoside header b{font-size:15px}
  .sidex{font-size:16px;padding:6px 8px}
  .sideadd{padding:12px 16px}
  .todobox.side .todo{padding:11px 16px}
  .todobox.side .ttitle{font-size:14.5px}
  .todobox.side .ttick{width:24px;height:24px}
  .sidepill{top:auto;bottom:calc(78px + env(safe-area-inset-bottom));right:14px;padding:9px 15px 9px 12px;
    font-size:12.5px}
  .sidepill span{display:none}
}

/* แถวที่เพิ่งติ๊ก — ยุบหายไปจากกองที่ต้องทำ แล้วไปเด้งโผล่ในกองที่ทำแล้ว */
.todobox{transition:opacity .25s ease,border-color .14s ease,height .3s ease,margin-bottom .3s ease}
.todobox.vanish{height:0!important;opacity:0;margin-bottom:0;overflow:hidden;border-color:transparent}
.todobox.pop{animation:todopop .5s cubic-bezier(.22,1.3,.45,1)}
@keyframes todopop{
  0%{opacity:0;transform:translateY(16px) scale(.94)}
  60%{opacity:1;transform:translateY(-3px) scale(1.015)}
  100%{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .todobox.pop{animation:none}
  .todobox.vanish{transition:none}
}

/* ธีม Modern มีรางเมนูอยู่ขอบขวา กล่องสิ่งที่ต้องทำต้องขยับเข้ามาไม่ให้ทับกัน */
@media (min-width:821px){
  :root[data-skin="modern"] .todoside,
  :root[data-skin="modern"] .sidepill{right:72px}
}

/* แถบบอกว่ามีเวอร์ชันใหม่ — อยู่นอกหน้าจอหลัก ไม่โดนวาดใหม่ไปด้วย */
.newbuild{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:90;
  display:flex;align-items:center;gap:12px;padding:9px 12px 9px 16px;border-radius:999px;
  background:var(--text);color:var(--bg);box-shadow:0 10px 26px rgba(0,0,0,.22);font-size:12.5px;
  animation:undoin .2s ease-out}
.newbuild button{border:0;border-radius:999px;padding:5px 13px;background:var(--bg);color:var(--text);
  font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.newbuild button:hover{opacity:.85}
@media (max-width:640px){.newbuild{left:10px;right:10px;transform:none;justify-content:space-between}}

/* ================================ โน้ต ================================
 * วางแบบเดียวกับแอปโน้ตบนเครื่อง — รายการทางซ้าย ที่เขียนทางขวา
 * บนมือถือแสดงทีละอย่าง เปิดโน้ตแล้วรายการหลบไป มีปุ่มย้อนกลับ
 */
.notewrap{display:grid;grid-template-columns:288px minmax(0,1fr);gap:16px;align-items:start;
  max-width:1180px;padding-top:14px}
.notelist{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  position:sticky;top:70px;max-height:calc(100vh - 96px);display:flex;flex-direction:column}
.notelist>header{display:flex;align-items:center;gap:8px;padding:11px 12px;border-bottom:1px solid var(--line-soft);
  background:var(--panel-2)}
.notelist>header b{flex:1;font-size:13.5px}
.notefind{margin:9px 12px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel-2);color:var(--text);font-size:12.5px}
.notefind:focus{outline:none;border-color:var(--accent);background:var(--panel)}
.noterows{overflow-y:auto;padding:0 8px 10px}
.notegroup{margin:8px 6px 4px;font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--muted);
  text-transform:uppercase}
.noterow{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:9px;background:none;
  border:0;cursor:pointer;color:inherit}
.noterow:hover{background:var(--panel-2)}
.noterow.on{background:var(--accent-soft)}
.noterow b{display:block;font-size:13.5px;font-weight:600;line-height:1.4;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.noterow small{display:flex;gap:7px;align-items:baseline;font-size:11.5px;color:var(--muted);margin-top:2px}
.noterow small i{font-style:normal;flex:none}
.noterow small span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.noterow small .blank{opacity:.55}
.noterow .pinned{display:inline-block;vertical-align:-1px;color:var(--accent)}
.noteempty{margin:16px 10px;font-size:12.5px;color:var(--muted);text-align:center}

.noteedit{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;min-height:calc(100vh - 96px)}
.noteedit>header{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line-soft);
  background:var(--panel-2)}
.notestamp{flex:1;font-size:11.5px;color:var(--muted)}
.noteedit .btn.on{color:var(--accent);border-color:var(--accent)}
.backnote{display:none}
#note-body{flex:1;width:100%;border:0;outline:none;resize:none;padding:22px 26px;background:none;
  color:var(--text);font-size:15.5px;line-height:1.85;font-family:inherit;min-height:60vh}
#note-body::placeholder{color:var(--muted);opacity:.6}
.notenone{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:var(--muted);font-size:13.5px}
.notenone p{margin:0}

@media (max-width:900px){
  .notewrap{grid-template-columns:minmax(0,1fr)}
  .notelist{position:static;max-height:none}
  .noteedit{min-height:auto}
  .backnote{display:inline-flex}
  /* เปิดโน้ตอยู่: ซ่อนรายการ เหลือที่เขียนเต็มจอ */
  .notewrap.reading .notelist{display:none}
  .notewrap:not(.reading) .noteedit{display:none}
  #note-body{padding:18px;min-height:56vh;font-size:16px}
}

/* ช่องเพิ่มไอเดีย — พิมพ์ให้เสร็จก่อนแล้วค่อยขึ้นกระดาน หลายคนคิดพร้อมกันได้โดยไม่ทับกัน */
.ideanew{display:flex;flex-direction:column;gap:9px;padding:14px 16px;margin:0 0 14px;
  border:1px solid var(--line);border-left:3px solid var(--accent)}
.ideanew>b{font-size:11.5px;font-weight:600;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.ideanew input,.ideanew textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel-2);color:var(--text);font-family:inherit;font-size:14.5px;line-height:1.6}
.ideanew textarea{resize:vertical;min-height:58px}
.ideanew input:focus,.ideanew textarea:focus{outline:none;border-color:var(--accent);background:var(--panel)}
.ideanew .btnrow{margin:0;justify-content:flex-start}
.opshead .btn.small.danger{margin-left:4px}

/* ======================= หน้าเขียน Outline และ Full Script =======================
 * จุดที่ต้องใช้สมาธิที่สุดของเว็บ กติกาที่ใช้กับหน้านี้:
 * บรรทัดต้องไม่ยาวเกินสายตา · ทุกหัวข้อมีกรอบของตัวเอง · ตัวหนังสือที่เขียนต้องโตกว่าป้ายชื่อหัวข้อ
 */
.writewrap{max-width:1120px}
.writehead{align-items:flex-start}
.wprog{color:var(--accent);font-weight:600}
.writecol{max-width:780px}
.wbox{display:block;margin:0 0 14px;padding:14px 16px 4px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel);transition:border-color .15s ease,box-shadow .15s ease}
.wbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.wbox.filled{border-left:3px solid var(--ok)}
.wlab{display:block;font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--text);margin-bottom:8px}
.wlab i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);font-weight:400;margin-top:2px}
.wbox textarea{width:100%;border:0;outline:none;resize:vertical;background:none;padding:0 0 12px;
  color:var(--text);font-family:inherit;font-size:16px;line-height:1.85}
.wbox textarea::placeholder{color:var(--muted);opacity:.5}
.wbox.read{padding-bottom:14px}
.wbox.read p{margin:0;font-size:16px;line-height:1.85;white-space:pre-wrap;word-break:break-word}
.wbox.read p.muted{color:var(--muted);font-size:14px}
/* ไดเร็กชั่นในหน้าเขียน — พับเก็บได้ และอยู่กับที่ ไม่ไหลตามจอมาบังช่องเขียน */
.dirfold{padding:0;overflow:hidden}
.dirbar{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;background:none;border:none;
  text-align:left;cursor:pointer;color:inherit}
.dirbar b{font-size:11.5px;font-weight:600;letter-spacing:.05em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
.dirbar .dirpeek{flex:1;min-width:0;font-size:13.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dirbar i{margin-left:auto;font-style:normal;font-size:12px;color:var(--accent);white-space:nowrap}
.dirfold .dirbody{padding:0 14px 13px}
.dirfold .dirbody p{margin:0;white-space:pre-wrap;word-break:break-word}
.dircard .dirtext{white-space:pre-wrap;word-break:break-word}
@media (max-width:640px){
  .wbox{padding:12px 13px 2px}
  .wbox textarea,.wbox.read p{font-size:16px;line-height:1.8}
}

/* =============== อ่านง่ายขึ้นทั้งเว็บ: ของที่ลอยอยู่บนพื้นหน้า ต้องมีพื้นและกรอบ ===============
 * แถวที่อยู่ในกล่องอยู่แล้วไม่ต้องแตะ ใช้เส้นคั่นเหมือนเดิม
 * ที่แก้คือแถวและตารางที่วางบนพื้นหน้าโดยตรง ซึ่งตัวหนังสือจะลอยและไล่สายตายาก
 */
.wrap>.row{background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-bottom:8px;
  box-shadow:var(--shadow)}
.wrap>.row:last-child{border-bottom:1px solid var(--line)}
.wrap>.row:hover{background:var(--panel-2);border-color:var(--muted)}
.wrap>.row.taskrow.isstuck{border-left:3px solid var(--danger)}

/* ตารางตัวชี้วัด ใส่กรอบให้เป็นก้อนเดียว ไล่สายตาข้ามคอลัมน์ได้ง่ายขึ้น */
.wrap>.tablewrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:6px 14px;box-shadow:var(--shadow)}
.metrics tr:last-child th,.metrics tr:last-child td{border-bottom:0}
.metrics tbody tr:hover{background:var(--panel-2)}

/* ข้อความอธิบายใต้หัวข้อ ให้มีที่ทางของตัวเอง ไม่ใช่ตัวเล็กจาง ๆ ลอยอยู่กลางหน้า */
.wrap>.hint{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:9px;
  padding:9px 12px;margin:-4px 0 14px;line-height:1.6}

/* ไดเร็กชั่นบนหน้าเขียน — เป็นกติกาของงานชิ้นนี้ ต้องเห็นชัดกว่าทุกอย่างบนหน้า ไม่ใช่กล่องจาง ๆ */
.dircard.small.stickydir{
  border:2px solid var(--accent);border-left-width:7px;border-radius:14px;
  background:var(--accent-soft);padding:14px 18px;margin-bottom:18px;
  box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 18%,transparent)}
.stickydir .dirhead{margin-bottom:10px;padding-bottom:9px;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.stickydir .dirhead b{color:var(--accent);font-size:12px;letter-spacing:.06em;font-weight:700}
.dirsay{margin-left:auto;font-style:normal;font-size:11px;font-weight:600;color:var(--accent-ink);
  background:var(--accent);border-radius:999px;padding:2px 10px}
.dircard.small.stickydir p{font-size:17px;font-weight:550;line-height:1.7;color:var(--text)}
@media (min-width:900px){
  .dircard.small.stickydir{background:color-mix(in srgb,var(--accent-soft) 94%,transparent)}
}

/* ============ แถบเครื่องมือช่วยเขียนบท — ต้องอยู่กับคนเขียนตลอดทั้งบท ============
 * อยู่เหนือช่องเขียนและตรึงไว้ด้านบนตอนเลื่อน (sticky) อยู่ได้ตลอดความยาวของคอลัมน์ที่เขียน
 * เดิมตรึงไว้ขอบล่างแบบลอยทับหน้า ซึ่งบังบรรทัดสุดท้ายที่กำลังพิมพ์ และบนมือถือโดนแป้นพิมพ์บัง
 * ระยะจากขอบบนต้องเผื่อแถบเมนูด้านบนที่ตรึงอยู่แล้ว ไม่งั้นสองแถบจะทับกัน
 */
.stools{position:sticky;top:58px;z-index:19;
  margin:0 0 14px;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--panel);
  box-shadow:0 6px 20px rgba(16,17,25,.10);overflow:hidden}
:root[data-theme="dark"] .stools{box-shadow:0 12px 32px rgba(0,0,0,.55)}
.stoolhead{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;background:var(--panel-2);
  border:0;border-bottom:1px solid var(--line-soft);cursor:pointer;color:inherit;text-align:left}
.stoolhead b{flex:1;font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.stoolhead i{font-style:normal;font-size:11.5px;color:var(--accent);font-weight:600}
.stoolbody{padding:10px 14px 12px;max-height:34vh;overflow-y:auto}
.stools.folded{width:auto;min-width:0}
.stools.folded .stoolbody{display:none}
.stools.folded .stoolhead{border-bottom:0;padding:7px 14px}
.stools.folded{width:100%}

@media (max-width:899px){
  .stools{top:52px}
  .stoolbody{max-height:40vh;padding:8px 10px 10px}
  .strow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .strow::-webkit-scrollbar{display:none}
  .strow>span{flex:0 0 auto}
  .stoolsay{display:none}
}

/* บัญชี Admin ถอดสิทธิ์ไม่ได้ — ทำให้เห็นว่ากดไม่ได้ ไม่ใช่กดแล้วเงียบ */
.mad.locked{opacity:.75;cursor:not-allowed}
.mad.locked input{cursor:not-allowed}

/* ฟอร์มในหน้าโปรเจ็ค — ช่องในแถวเดียวกันต้องกว้างเท่ากันและก้นตรงกัน
 * แม้คำอธิบายใต้หัวข้อจะยาวไม่เท่ากัน (ของเดิมช่องเลยเหลื่อมกันคนละระดับ) */
.dirform .frow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:18px;
  align-items:end;margin-bottom:16px}
.dirform .frow .field{margin-bottom:0}
.dirform .field span{line-height:1.35;color:var(--text);font-size:13px;font-weight:550}
.dirform .field span i{color:var(--muted);font-weight:400;margin-top:3px}
.dirform .field input,.dirform .field select{height:42px;font-size:14.5px}
@media (max-width:760px){
  .dirform .frow{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:14px}
}

/* หัวการ์ดสถานที่ มีปุ่มแก้อยู่ขวาสุด */
.briefhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.briefhead b{flex:1;display:block;font-size:11.5px;font-weight:600;letter-spacing:.05em;color:var(--muted);
  text-transform:uppercase;margin:0}
.blankline{color:var(--muted);font-weight:400;font-size:14.5px}
.briefdet{margin-top:12px;padding-top:4px;border-top:1px solid var(--line-soft)}

/* ---------- ช่องเขียนที่เน้นคำได้: ตัวหนา ขีดฆ่า ไฮไลต์ ---------- */
.richbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:7px}
.rbtn{padding:5px 11px;border:1px solid var(--line);border-radius:8px;background:var(--panel);
  color:var(--text);font-size:13px;line-height:1.4;cursor:pointer;min-width:34px}
.rbtn:hover{border-color:var(--accent);color:var(--accent)}
.rbtn.mark{background:#ffe58a;border-color:#e8c65a;color:#4a3a00}
.richbar i{font-style:normal;font-size:11.5px;color:var(--muted);margin-left:2px}
.richbox{width:100%;min-height:160px;max-height:50vh;overflow-y:auto;padding:12px 14px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel-2);color:var(--text);
  font-family:inherit;font-size:15px;line-height:1.8;white-space:pre-wrap;word-break:break-word}
.richbox:focus{outline:none;border-color:var(--accent);background:var(--panel);
  box-shadow:0 0 0 3px var(--accent-soft)}
.richbox:empty::before{content:attr(data-place);color:var(--muted);opacity:.55}
.richbox mark,.dircard mark{background:#ffe58a;color:#3a2f00;border-radius:3px;padding:0 3px}
:root[data-theme="dark"] .richbox mark,:root[data-theme="dark"] .dircard mark{background:#8a6d00;color:#fff6d8}
.dircard s,.richbox s{opacity:.7}
/* ลิงก์ที่ฝังใต้คำระหว่างแก้ข้อความ ให้เห็นว่าเป็นลิงก์ แต่กดไม่ได้เพราะกำลังพิมพ์อยู่ */
.richbox a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* ================================ จับเวลา ================================
 * ปุ่มนาฬิกาอยู่มุมขวาล่าง · กดแล้วเลือกเวลา · ระหว่างนับย่อเป็นเม็ดเล็ก ๆ
 * หลบปุ่มเลิกทำที่อยู่มุมซ้ายล่าง และหลบปุ่มสิ่งที่ต้องทำบนจอมือถือ
 */
/* ======= ปุ่มรวมเครื่องมือ มุมล่างขวา =======
 * รวมเกม นาฬิกาจับเวลา และสิ่งที่ต้องทำ ไว้ปุ่มเดียว
 * มีชื่อกำกับทุกอันตอนกาง เพราะสามอย่างนี้คนละเรื่องกันหมด ไอคอนล้วนเดาผิดง่าย
 * และปุ่มนี้อยู่บนมือถือด้วย ซึ่งไม่มีการเอาเมาส์ไปชี้ให้ชื่อโผล่
 */
.toolfab{position:fixed;right:18px;bottom:18px;z-index:57;width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line);background:var(--panel);color:var(--text);
  box-shadow:0 6px 18px rgba(0,0,0,.14);cursor:pointer;transition:transform .15s ease,border-color .15s ease}
.toolfab:hover{transform:translateY(-1px);border-color:var(--accent);color:var(--accent)}
.toolfab.on{position:static;border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.toolnum{position:absolute;right:-2px;top:-2px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;
  border-radius:999px;background:var(--accent);color:var(--accent-ink);
  font-style:normal;font-size:10.5px;font-weight:700;line-height:18px;text-align:center}
.toolwrap{position:fixed;inset:0;z-index:56}
.toolmenu{position:fixed;right:18px;bottom:18px;z-index:57;display:flex;flex-direction:column;
  align-items:flex-end;gap:9px}
.toolone{display:flex;align-items:center;gap:10px;padding:9px 15px 9px 11px;border:1px solid var(--line);
  border-radius:999px;background:var(--panel);color:var(--text);font-family:inherit;font-size:14.5px;
  font-weight:600;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.toolone:hover{border-color:var(--accent);color:var(--accent)}
.tooli{position:relative;flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent)}
@media (max-width:640px){
  .toolfab{right:12px;bottom:12px}
  .toolmenu{right:12px;bottom:12px}
}

.timerfab{position:fixed;right:18px;bottom:18px;z-index:55;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line);background:var(--panel);color:var(--text);
  box-shadow:0 5px 16px rgba(0,0,0,.12);cursor:pointer;transition:all .15s ease}
.timerfab:hover{transform:translateY(-1px);border-color:var(--accent);color:var(--accent);
  box-shadow:0 7px 18px rgba(0,0,0,.16)}
.timerfab.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
:root[data-theme="dark"] .timerfab{box-shadow:0 5px 16px rgba(0,0,0,.45)}

.timermenu{position:fixed;right:18px;bottom:76px;z-index:58;width:232px;padding:12px;
  border:1px solid var(--line);border-radius:14px;background:var(--panel);
  box-shadow:0 12px 32px rgba(16,17,25,.18);animation:sidein .16s ease-out}
:root[data-theme="dark"] .timermenu{box-shadow:0 12px 32px rgba(0,0,0,.55)}
.timermenu>b{display:block;font-size:11.5px;font-weight:600;letter-spacing:.05em;color:var(--muted);
  text-transform:uppercase;margin-bottom:9px}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.tpick{padding:9px 6px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);
  color:var(--text);font-size:13px;cursor:pointer}
.tpick:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

.timerpill{position:fixed;right:18px;bottom:18px;z-index:55;display:flex;align-items:center;
  border:1px solid var(--accent);border-radius:999px;background:var(--panel);overflow:hidden;
  box-shadow:0 5px 16px rgba(0,0,0,.14)}
.timerpill.held{border-color:var(--warn)}
.tleft{display:flex;align-items:center;gap:8px;padding:8px 6px 8px 14px;background:none;border:0;
  color:var(--text);cursor:pointer}
.tleft b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.timerpill.held .tleft{color:var(--warn)}
.timerpill .tx{padding:8px 12px 8px 8px;border:0;background:none;color:var(--muted);cursor:pointer;font-size:12px}
.timerpill .tx:hover{color:var(--danger)}

/* หมดเวลาแล้ว — เต็มจอ ปิดยาก ๆ หน่อยจะได้ไม่พลาด */
.timeupwrap{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:20px;
  background:rgba(16,17,25,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:toastin .16s ease-out}
.timeup{width:min(360px,100%);padding:26px 24px;border-radius:18px;background:var(--panel);
  border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.3);text-align:center;
  animation:cheerin .28s cubic-bezier(.2,1.4,.5,1)}
.timeicon{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 12px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent)}
.timeicon svg{width:26px;height:26px}
.timeup b{display:block;font-size:20px;margin-bottom:4px}
.timeup p{margin:0 0 18px;font-size:13.5px;color:var(--muted)}
.timeup .btnrow{justify-content:center;margin:0}

@media (max-width:820px){
  .timerfab,.timerpill{right:14px;bottom:14px}
  .timermenu{right:14px;bottom:70px;width:min(260px,calc(100vw - 28px))}
}

/* ================================ เกมไอเดีย ================================ */
.gamehome{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:8px}
.gamehome>.card>b{display:block;font-size:14px}
.gjoinrow{display:flex;gap:8px}
.gjoinrow input{flex:1;min-width:0;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel-2);color:var(--text);font-size:19px;font-weight:700;letter-spacing:.18em;text-align:center;
  text-transform:uppercase}
.gjoinrow input:focus{outline:none;border-color:var(--accent);background:var(--panel)}

.gcode{text-align:center;padding:22px}
.gcode>span{display:block;font-size:11.5px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.gcode>b{display:block;font-size:52px;font-weight:800;letter-spacing:.14em;margin:6px 0 4px;color:var(--accent)}
.gplayer.gone{opacity:.5}

/* ---- ระหว่างรอบ ---- */
.gameplay{max-width:680px}
.gbar{position:sticky;top:54px;z-index:20;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 14px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow)}
.gclock{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.gclock.warn{color:var(--danger)}
.ground{font-size:12.5px;color:var(--muted)}
.gsent{margin-left:auto;font-size:12.5px;color:var(--muted)}

/*
 * รูปทั้งกระดานเรียงแถวเดียว 6 ใบ กวาดตาทีเดียวเห็นครบ ไม่ต้องเทียบข้ามบรรทัด
 * จอแคบลงค่อยลดจำนวนต่อแถว เพราะ 6 ใบบนมือถือจะเหลือใบละไม่ถึงนิ้ว ดูรูปไม่ออก
 */
.gboard{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:14px}
.gpic{position:relative;padding:0;border:2px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--panel-2);aspect-ratio:4/3;cursor:pointer}
.gpic img{width:100%;height:100%;object-fit:cover;display:block}
.gpic.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.gnum{position:absolute;top:6px;left:6px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);font-style:normal;font-size:13px;font-weight:700}
.gslots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.gslot{aspect-ratio:1;border:2px dashed var(--line);border-radius:12px;display:grid;place-items:center;
  overflow:hidden;background:var(--panel-2);color:var(--muted);font-size:20px;font-weight:700}
.gslot.has{border-style:solid;border-color:var(--accent)}
.gslot img{width:100%;height:100%;object-fit:cover}

.gfield{display:block;margin-bottom:12px}
.gfield>span{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;
  font-weight:600;color:var(--text);margin-bottom:6px}
.gfield>span i{font-style:normal;font-size:11.5px;font-weight:400;color:var(--muted)}
.gfield input,.gfield textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel-2);color:var(--text);font-family:inherit;font-size:16px;line-height:1.7}
.gfield input:focus,.gfield textarea:focus{outline:none;border-color:var(--accent);background:var(--panel)}
.gsend{width:100%;margin-top:4px}
.gostrow{justify-content:center;margin-top:12px}
.gsentbox{padding:14px 16px;margin-bottom:14px;border:1px solid var(--ok);border-radius:12px;background:var(--ok-soft)}
.gsentbox b{display:block;font-size:14px;color:var(--ok)}
.gsentbox p{margin:4px 0 0;font-size:12.5px;color:var(--muted)}

/* ---- คลังรูป ---- */
.picadd{position:relative;overflow:hidden;cursor:pointer}
.picgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.piccard{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--panel)}
.piccard.off{opacity:.45}
.piccard img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
/* ติ๊กเลือกรูปเพื่อลบทีเดียวหลายใบ */
.picpick{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;position:relative}
.picmark{position:absolute;top:7px;left:7px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-size:14px;font-weight:700;line-height:1;
  background:var(--panel);border:2px solid var(--line);color:var(--accent-ink)}
.piccard.picchosen .picmark{background:var(--accent);border-color:var(--accent)}
/* ห้ามใช้ชื่อคลาสว่า pick ตรงนี้ มันชนกับปุ่มชิป .pick ที่มีอยู่แล้ว ซึ่งสั่ง display:flex */
.piccard.picchosen{outline:3px solid var(--accent);outline-offset:-1px}
.picbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.picbar b{font-size:14px}
.picfoot{display:flex;gap:4px;padding:6px;border-top:1px solid var(--line-soft);background:var(--panel-2)}
.picfoot .btn{flex:1;padding:4px 6px;font-size:11px}

@media (max-width:980px){
  .gboard{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .gboard{grid-template-columns:repeat(2,1fr)}
  .gclock{font-size:26px}
  .gcode>b{font-size:42px}
}

/* ---- ขั้นโหวต ---- */
.gamevote{max-width:900px}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:16px}
.gcard{border:2px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden;
  display:flex;flex-direction:column;cursor:pointer;transition:border-color .12s ease,transform .12s ease}
.gcard:hover{border-color:var(--accent)}
.gcard.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.gcard.own{cursor:default;border-style:dashed;opacity:.85}
.gcard.own:hover{border-color:var(--line)}
.gcardpics{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line-soft)}
.gcardpics img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.gcard>b{display:block;padding:11px 13px 4px;font-size:15px;line-height:1.5}
.gcard>p{margin:0;padding:0 13px 10px;font-size:13px;line-height:1.6;color:var(--muted)}
.gcard>footer{margin-top:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 13px;border-top:1px solid var(--line-soft);background:var(--panel-2)}
.gby{font-size:11.5px;color:var(--muted)}
.gownmark{font-style:normal;font-size:11px;color:var(--warn)}
.gvotes{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--accent)}
.gsend i{font-style:normal;margin-left:6px;opacity:.85}
.gcards.sum .gcard{cursor:default}
.gplace{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);
  color:var(--accent);font-size:12.5px;font-weight:700;flex:none}
.gscore{font-size:13px;color:var(--accent)}

/* ---- จอฉายขึ้นทีวี — อ่านจากระยะสามสี่เมตร ---- */
.tvwrap{position:fixed;inset:0;z-index:70;background:var(--bg);color:var(--text);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:34px;text-align:center}
.tvexit{position:absolute;top:16px;right:16px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel);color:var(--muted);font-size:12px;cursor:pointer}
.tvkick{margin:0;font-size:22px;color:var(--muted);letter-spacing:.04em}
.tvcode{margin:0;font-size:min(22vw,180px);font-weight:800;letter-spacing:.1em;line-height:1;color:var(--accent)}
.tvsub{margin:0;font-size:20px;color:var(--muted)}
.tvnames{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.tvname{padding:7px 18px;border:2px solid var(--line);border-radius:999px;font-size:22px;background:var(--panel)}
.tvname.on{border-color:var(--ok);color:var(--ok)}
.tvname.gone{opacity:.4}

.tvwrap.play{justify-content:flex-start;gap:14px}
.tvtop{display:flex;align-items:center;justify-content:center;gap:26px;width:100%;flex-wrap:wrap}
.tvround{font-size:26px;color:var(--muted)}
.tvclock{font-size:min(14vw,110px);font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.tvclock.warn{color:var(--danger)}
.tvsent{font-size:26px;color:var(--muted)}
.tvboard{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:1400px}
.tvboard img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;display:block;border:2px solid var(--line)}
.tvcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;width:100%;
  max-width:1500px;overflow-y:auto}
.tvcard{border:2px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden;text-align:left}
.tvcardpics{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.tvcardpics img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.tvcard b{display:block;padding:10px 14px 2px;font-size:22px;line-height:1.4}
.tvcard p{margin:0;padding:0 14px 8px;font-size:17px;line-height:1.5;color:var(--muted)}
.tvcard span{display:block;padding:0 14px 12px;font-size:15px;color:var(--muted)}
@media (max-width:820px){
  .tvboard{grid-template-columns:repeat(2,1fr)}
  .tvname{font-size:16px}
  .tvround,.tvsent,.tvsub{font-size:16px}
}

/* ---- รูปที่เลือกไว้ — แยกกรอบให้ชัดว่าคนละก้อนกับกระดาน ---- */
.gpicked{margin:0 0 18px;padding:12px 14px 14px;border:4px solid var(--line);border-radius:20px;
  background:rgba(255,255,255,.72)}
.gpickhead{display:block;margin-bottom:10px;font-size:15px}
.gpickhead i{font-style:normal}
.gslot{position:relative}
.gslot>u{position:absolute;top:6px;left:6px;z-index:1;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;text-decoration:none;font-size:13px;font-weight:700;
  background:var(--panel);color:var(--muted);border:1px solid var(--line)}
.gslot.has>u{background:#ffd54a;color:#2b1a3d}
.gslot>span{font-size:13px;font-weight:400;color:var(--muted)}

/* ---- ป้ายบอกว่าส่งครบแล้ว กำลังจะปิดรอบ ---- */
.grush{margin-left:10px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;
  background:var(--ok-soft);color:var(--ok)}
.tvrush{font-size:24px;color:#7ed957}
[data-grush][hidden]{display:none}

/* ---- กดการ์ดแล้วขยายเต็มจอ ---- */
.gzoom{position:absolute;right:8px;bottom:8px;z-index:2;padding:5px 12px;border-radius:999px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 88%,transparent);
  font-size:12px;font-weight:600;color:var(--text);cursor:pointer}
.gzoom:hover{background:var(--panel)}
.gcardpics{position:relative}
.gbig{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;
  background:rgba(12,10,20,.78);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.gbigbox{width:min(1100px,100%);max-height:92vh;overflow:auto;border-radius:20px;background:var(--panel);
  border:4px solid var(--line);box-shadow:0 18px 60px rgba(0,0,0,.45);position:relative;text-align:left}
.gbigx{position:absolute;top:12px;right:12px;z-index:2;padding:7px 16px;border-radius:999px;
  border:3px solid var(--line);background:#fff;font-size:14px;font-weight:600;cursor:pointer}
/* ในป๊อปอัปต้องเห็นรูปเต็มใบ ไม่ตัดขอบ เพราะเปิดมาเพื่อดูว่ารูปคืออะไรจริง ๆ */
.gbigpics{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:4px;background:#171320}
.gbigpics img{width:100%;height:min(56vh,440px);object-fit:contain;display:block;background:#171320}
.gbigtext{padding:18px 22px 22px}
.gbigtext b{display:block;font-size:26px;line-height:1.4}
.gbigtext p{margin:10px 0 0;font-size:17px;line-height:1.7;color:var(--text)}
.gbigtext footer{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:12px;
  border-top:2px dashed var(--line-soft);font-size:14px;color:var(--muted)}
.gbigtext footer i{margin-left:auto}
.gcards.sum .gcard{cursor:zoom-in}
@media (max-width:640px){
  .gbig{padding:12px}
  .gbigtext b{font-size:22px}
  .gbigpics{grid-template-columns:1fr}
  .gbigpics img{height:min(38vh,280px)}
}

/* ---- ปุ่มเปิดปิดเพลง อยู่มุมซ้ายล่าง ไม่ชนกับปุ่มจับเวลาที่อยู่ขวาล่าง ---- */
.soundfab{position:fixed;left:18px;bottom:18px;z-index:55;display:flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:999px;border:3px solid var(--line);background:var(--panel);
  color:var(--text);font-family:Inter,"Noto Sans Thai",sans-serif;font-size:15px;
  box-shadow:0 4px 0 rgba(43,26,61,.35);cursor:pointer}
.soundfab span{font-size:16px;line-height:1}
.soundfab i{font-style:normal}
.soundfab.on{background:linear-gradient(#ffc247,#ff7a18);color:#fff;
  text-shadow:0 2px 0 rgba(120,45,0,.45)}
.soundfab:active{transform:translateY(4px);box-shadow:0 0 0 var(--line)}
/*
 * เลิกเล่นกลางทาง · วางเหนือปุ่มเพลง มุมเดียวกัน
 * มุมขวาล่างเป็นของปุ่มจับเวลาอยู่แล้ว จึงไม่ไปแย่งที่
 * ทำให้เล็กและจืดกว่าปุ่มอื่น เพราะเป็นปุ่มที่ไม่ควรกดบ่อย
 */
/*
 * ปุ่มเลิกเล่นกับปุ่มเพลงเคยอยู่ชิดกันเกินไป กดพลาดกันบ่อยระหว่างเล่น
 * ตอนนี้เว้นระยะให้ห่างเกินนิ้วหนึ่งนิ้ว และให้ทั้งคู่สูงพอจะกดโดนง่ายบนมือถือ
 */
.quitfab{position:fixed;left:18px;bottom:104px;z-index:55;
  min-height:40px;padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:var(--panel);
  color:var(--muted);font-family:inherit;font-size:12.5px;cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.12)}
.quitfab:hover{border-color:var(--danger);color:var(--danger)}
.soundfab{min-height:44px}
@media (max-width:640px){
  .soundfab{left:12px;bottom:12px;padding:9px 14px;font-size:14px;min-height:44px}
  .quitfab{left:12px;bottom:96px;min-height:42px}
}

/* ---- หน้าตรวจรูปที่ดึงเข้ามา — ที่นี่ความชัดมาก่อนความสนุก ธีมต้องไม่บังรูป ---- */
.picreview{margin:18px 0 22px;padding:16px;border:2px solid var(--line);border-radius:16px;background:var(--panel)}
.picrevhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.picrevhead>div{flex:1;min-width:200px}
.picrevhead b{display:block;font-size:17px}
.picrevhead span{font-size:13px;color:var(--muted)}
.picrevgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.picrev{margin:0;border:2px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel-2)}
.picrev img{width:100%;height:230px;object-fit:contain;display:block;background:#15121c}
.picrev figcaption{padding:10px 12px 12px}
.picrev figcaption b{display:block;font-size:14px;line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picrev figcaption span{display:block;margin-top:3px;font-size:12px;color:var(--muted)}
.picrev figcaption a{margin-left:6px}
.picget{margin-top:18px}
.picget .gjoinrow input{text-align:left;letter-spacing:0;text-transform:none;font-size:15px;font-weight:400}
@media (max-width:640px){ .picrev img{height:180px} }

/* ---- หน้าที่ลูกค้าเปิดจากลิงก์พรีวิว ---- */
.pubwrap{max-width:760px}
.pubcard{margin-bottom:12px}
.pubcard b{display:block;font-size:17px;margin-bottom:6px}
.pubcard p{margin:0;font-size:15.5px;line-height:1.75;color:var(--text)}

/* ---- ช่องของทีมพร็อพ แบบกดเพิ่มทีละชิ้น ---- */
.propbox .proplist{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.proprow{display:flex;gap:8px;align-items:center}
.proprow input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--text);font-size:15px}
.proprow input[data-propprice]{flex:0 0 96px;text-align:right}
.proprow input:focus{outline:none;border-color:var(--accent)}
.proprow.read{justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line-soft)}
.proprow.read b{font-weight:550;flex:1;min-width:0}
.propprice{color:var(--muted);font-size:13.5px}
/*
 * ลิงก์สินค้า — โชว์เป็นคำเดียวสีฟ้า ลิงก์จริงยาวเกินกว่าจะเอามาวางในบรรทัดของของ
 * ตอนพิมพ์ใบไม่ต้องมี เพราะกระดาษกดลิงก์ไม่ได้อยู่แล้ว
 */
.proplink{flex:none;font-size:12.5px;font-weight:600;color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--accent-soft);white-space:nowrap}
.proplink:hover{border-bottom-color:var(--accent)}
.proprow input.linkin{flex:0 0 200px;font-size:13px}
@media print{ .proplink{display:none} }
@media (max-width:600px){
  .proprow{flex-wrap:wrap}
  .proprow input[data-propname]{flex:1 1 100%}
  .proprow input.linkin{flex:1 1 100%}
}
.proptools{margin:12px 0 0;align-items:center;gap:10px;display:flex;flex-wrap:wrap}
.proptotal{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--muted)}

/* ---- ตารางโพสต์: เลือกคอนเทนต์เข้าบิล ---- */
.pickbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:14px 0;padding:12px 16px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.pickbar b{display:block;font-size:14.5px}
.pickbar small{color:var(--muted);font-size:12.5px}
.pickbar>div{flex:1;min-width:200px}
.pickpanel{margin:14px 0;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.pickhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--line-soft);background:var(--panel-2)}
.pickproj{border-bottom:1px solid var(--line-soft)}
.pickproj:last-child{border-bottom:none}
.pickprow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px}
.pickprow b{font-size:14.5px}
.pickprow small{display:block;color:var(--muted);font-size:12.5px}
.pickclips{padding:0 16px 10px}
.pickclip{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px dashed var(--line-soft)}
.pickclip .main{flex:1;min-width:0}
.pickclip b{display:block;font-size:14px;font-weight:550}
.pickclip small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.pickclip.in{opacity:.6}

/* ---- แถวในตารางโพสต์ อ่านง่ายขึ้น กางรายละเอียดเมื่อต้องการ ---- */
.postrow .ptop{display:flex;align-items:center;gap:12px}
.postrow .ptitle{flex:1;min-width:0}
.postrow .ptitle b{display:block;font-size:14.5px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.postrow .ptitle small{display:block;color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.postrow .plinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;align-items:end;
  margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-soft)}

/* ---- แถบสถานะคอนเทนต์บนหน้าแรก ---- */
.stagestrip{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.stagechip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);font-size:13.5px;font-weight:550;color:var(--text)}
.stagechip i{font-style:normal;min-width:20px;padding:1px 6px;border-radius:999px;
  background:var(--line-soft);color:var(--muted);font-size:12px;font-weight:700}
.stagechip:hover{border-color:var(--muted)}
.stagechip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.stagechip.on i{background:var(--accent);color:var(--accent-ink)}
.stagechip.st-done i{background:var(--ok-soft);color:var(--ok)}
.stagechip.st-check i,.stagechip.st-review i{background:var(--warn-soft);color:var(--warn)}
.stagelist{margin-bottom:20px}

/* ---- ติ๊กเลือกคอนเทนต์ก่อนส่งเข้าคิวตัด ---- */
.sendpick{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel-2);font-size:13px;white-space:nowrap;cursor:pointer}
.sendpick input{width:16px;height:16px}
.sendpick.done{opacity:.6;cursor:default}
.uprow{align-items:flex-end;gap:12px;flex-wrap:wrap}

/* ---- ปฏิทินทีมตัด ---- */
.cchip.ok{background:var(--ok-soft);color:var(--ok)}
.cchip.bad{background:var(--danger-soft);color:var(--danger)}
.cchip.busy{background:var(--accent-soft);color:var(--accent)}
.cchip.warn{background:var(--warn-soft);color:var(--warn)}

/* ---- ตารางโพสต์: เวลา สถานะ แพลตฟอร์ม ---- */
.postrow .ptime{width:104px;flex:none;padding:7px 9px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--text);font-size:13px}
.postrow .pstate{flex:none;width:132px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--text);font-size:13px}
.postrow .pstate.ok{border-color:var(--ok);color:var(--ok)}
.postrow .pstate.bad{border-color:var(--danger);color:var(--danger)}
.postrow .pstate.warn{border-color:var(--warn);color:var(--warn)}
.plats{display:flex;gap:5px;flex:none}
.plat{width:34px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--panel);
  font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.plat:hover{border-color:var(--muted)}
.plat.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.postdone{flex:none;padding:7px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);font-size:12.5px;font-weight:600;color:var(--muted)}
.postdone.on{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.pdetail{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-soft)}
.plink.wide{display:block;margin-bottom:10px}
.plink.wide textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--text);font-family:inherit;font-size:14.5px;line-height:1.7}
@media (max-width:820px){
  .postrow .ptop{flex-wrap:wrap}
  .postrow .ptitle{flex:1 0 100%;order:-1}
}

/* ---- ตารางที่ลูกค้าเปิดจากลิงก์ — ลากสลับลำดับและติ๊กว่าโพสต์แล้วได้ ---- */
.publist{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.pubrow{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel)}
.pubrow.dragging{opacity:.5}
.pubrow .pubwhen{flex:none;width:130px}
.pubrow .pubwhen b{display:block;font-size:13.5px}
.pubrow .pubwhen small{display:block;color:var(--muted);font-size:12px}
.pubrow .pubmain{flex:1;min-width:0}
.pubrow .pubmain b{display:block;font-size:14.5px;font-weight:550}
.pubrow .pubmain small{display:block;color:var(--muted);font-size:12.5px;line-height:1.6;margin-top:2px}
.pubrow .pubnote{font-style:italic}
.pubrow .publinks{display:flex;gap:8px;flex:none;font-size:12.5px}
@media (max-width:820px){
  .pubrow{flex-wrap:wrap}
  .pubrow .pubmain{flex:1 0 100%;order:-1}
  .pubrow .pubwhen{width:auto}
}

/* ---- เวลาที่พิมพ์ไอเดีย ---- */
.ideawho{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.3}
.ideawho i{font-style:normal;font-size:11.5px;color:var(--muted);white-space:nowrap}

/* ---- คลิปที่ตัดเสร็จแล้ว อัปไว้ให้พรีวิวในเว็บ ---- */
.vidbox{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-soft)}
.vidrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.vidrow b{font-size:13.5px;font-weight:600}
.vidplay{width:100%;max-height:440px;border-radius:10px;background:#000;display:block;margin-bottom:8px}
.vidlist{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.vidline{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted)}
.vidup{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.vidbar{flex:1 0 140px;height:6px;border-radius:999px;background:var(--line-soft);overflow:hidden}
.vidbar u{display:block;height:100%;background:var(--accent);text-decoration:none;transition:width .2s ease}
.vidpick{cursor:pointer}

/* ---- รูปอ้างอิงที่วางไว้ในไดเร็กชั่น ---- */
.refpic{display:block;max-width:100%;max-height:420px;border-radius:10px;border:1px solid var(--line);margin:8px 0}
.richbox .refpic{max-height:320px}
.refwait{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--line-soft);
  color:var(--muted);font-size:12.5px}

/* ---- หน้ากำลังตัด — ทุกแผนกเปิดดูได้ ---- */
.cutlist{display:flex;flex-direction:column;gap:8px}
/*
 * แถวงานตัดเป็นตาราง ไม่ใช่ของเรียงชิดขวา — ชื่อยาวชื่อสั้นก็ไม่ทำให้หลักเลื่อน
 * ของที่กางออกมา (ปุ่มตรวจ ที่อยู่ไฟล์ ตัวเล่นคลิป) กินเต็มความกว้างของแถว
 */
.cutrow{display:grid;grid-template-columns:minmax(200px,1fr) 134px 116px 112px 108px;
  align-items:center;gap:9px 12px;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel)}
.cutrow>.cutacts,.cutrow>.cutcheck,.cutrow>.cutplaybox,.cutrow>.vidplay,.cutrow>.cmtwrap{grid-column:1 / -1}
.cutrow>.cmtwrap{margin:4px -14px -12px;border-radius:0 0 11px 11px}
.cutrow .cutstep,.cutrow .cutfile,.cutrow .cutcmt{display:flex;justify-content:flex-start}
.cutrow .cutfile .btn,.cutrow .cutcmt .btn{margin:0}
.cutrow .cutcmt .btn.wait{border-color:var(--warn);color:var(--warn)}
.cutrow .cutnone{font-style:normal;font-size:12.5px;color:var(--muted)}
.cutrow .cutmain{min-width:0}
.cutrow .cutmain b{display:block;font-size:14.5px;font-weight:550}
/* ชื่อคลิปกดเข้าไปดูตัวคอนเทนต์ได้ ไม่ใช่ตัวหนังสือเฉย ๆ */
.cutrow .ectitle{display:block;font-size:14.5px;font-weight:550;text-align:left;padding:0;background:none;color:var(--text)}
.cutrow .ectitle:hover{color:var(--accent)}
/* แถวที่ต้องลงมือ มีแถบสีซ้ายกับพื้นจาง ๆ ให้เห็นก่อนแถวอื่น */
.cutrow.tocheck{border-left:4px solid var(--warn);background:var(--warn-soft)}
.cutacts{display:flex;gap:8px;flex-wrap:wrap;flex:none}
.cutacts .btn.small{margin-top:0}
.cutcheck{display:grid;gap:8px;margin-top:4px;padding-top:10px;border-top:1px solid var(--line-soft)}
.cutcheck .fact code{word-break:break-all}
.stab.hot i{background:var(--warn);color:var(--warn-ink)}
.cutrow .cutmain small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.cutwho{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);flex:none}
.cutnone{font-size:12.5px;color:var(--muted);flex:none}
.cutrow .vidplay{max-height:420px;margin-top:8px;width:100%}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}

/* ---------- แถบพร้อมออกกอง ----------
 * หกช่องเรียงกัน ตอบคำถามเดียวว่ากองนี้ยังขาดอะไร กดช่องไหนก็ไปแก้ตรงนั้น
 */
.readybar{border-left:4px solid var(--warn)}
.readybar.ok{border-left-color:var(--ok)}
.readygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px;margin-top:10px}
.readycell{display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-rows:auto auto;gap:1px 8px;
  padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel);text-align:left}
.readycell i{grid-row:1/3;align-self:center;font-style:normal;font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:99px}
.readycell b{font-size:13.5px;font-weight:600}
.readycell span{font-size:12px;color:var(--muted);line-height:1.5}
.readycell.ok i{background:var(--ok-soft);color:var(--ok)}
.readycell.warn{border-color:var(--warn);background:var(--warn-soft)}
.readycell.warn i{background:var(--warn);color:var(--warn-ink)}
.readycell:hover{border-color:var(--accent)}
.callstate{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.fillplace{border-left:3px solid var(--accent);margin-bottom:12px}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:12px 0}
.pickcard{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);text-align:left}
.pickcard b{font-size:14.5px}
.pickcard small{color:var(--muted);font-size:12px;line-height:1.5}
.pickcard.on{border-color:var(--accent);background:var(--accent-soft)}
.pickcard.done{opacity:.55}
.pickcard .statusdone{margin-top:4px}

/* ---------- หน้ากองวันนี้ ----------
 * ใช้กลางแดด ถือมือถือเครื่องเดียว ปุ่มต้องใหญ่และตัวหนังสือต้องอ่านได้จากระยะแขน
 */
.tdnow{border-left:4px solid var(--accent)}
.tdnowhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tdclock{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.tdnowhead b{font-size:15px}
.tdnowhead i{font-style:normal;font-size:12.5px;color:var(--muted)}
.tdnowgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:10px}
.tdnowbox{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2)}
.tdnowbox span{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tdnowbox b{font-size:16px;line-height:1.4}
.tdnowbox small{font-size:12.5px;color:var(--muted)}
.tdquick{margin:0 0 14px;gap:10px;flex-wrap:wrap}
.tdquick .btn.big{flex:1;min-width:150px;justify-content:center;text-align:center}
.tdtick{flex:none;width:30px;height:30px;border-radius:99px;border:2px solid var(--line);background:var(--panel);
  font-size:15px;font-weight:700;color:var(--ok);display:flex;align-items:center;justify-content:center}
.tdtick.on{border-color:var(--ok);background:var(--ok-soft)}
.tdrunrow.done .main b{text-decoration:line-through;opacity:.6}
.tdrunrow.done{opacity:.85}
.tdcall{margin-left:8px;font-size:12px;font-weight:600;color:var(--accent);border:1px solid var(--accent);
  border-radius:99px;padding:2px 10px;text-decoration:none}
/* ปุ่มตัวใหญ่ให้มีผลทั้งหน้า ไม่ใช่แค่ส่วนบท */

/* ---------- ใบงานกอง แท็บทีม โลเคชั่น นักแสดง ---------- */
.crewnew{flex:none;font-size:11px;padding:2px 8px;border-radius:99px;background:var(--warn-soft);color:var(--warn)}
.crewrow .statusdone,.crewrow .statuswait,.crewrow .crewnew{align-self:center}
.placeclips{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft);display:grid;gap:2px}
.placeclips i{font-style:normal;font-size:11.5px;color:var(--muted)}
.placeclips span{font-size:13.5px;line-height:1.6}
.casthead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.casthead b{font-size:14.5px}
.casttime,.castclip{font-size:11.5px;color:var(--muted);background:var(--panel-2);border:1px solid var(--line);
  border-radius:99px;padding:2px 9px}
.castrow.lack{border-left:3px solid var(--warn)}
.hint.warnline{color:var(--warn)}

/* ---------- ของเข้าออฟฟิศ ---------- */
.officeform .frow{margin-bottom:10px}
.officepics{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:4px 0 14px}
.officepics label.btn{cursor:pointer}
.officepic{position:relative;display:inline-flex}
.officepic img{width:78px;height:78px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.officepic .del{position:absolute;top:-6px;right:-6px;background:var(--panel);border:1px solid var(--line);
  border-radius:99px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:12px}
.officerow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.officerow .main{flex:1;min-width:180px}
.officethumb{flex:none;padding:0;background:none;border:0}
.officethumb img{width:42px;height:42px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.officenone{flex:none;font-size:11.5px;color:var(--warn)}
.officeprice{flex:none;min-width:90px;text-align:right;font-variant-numeric:tabular-nums}
.officefind{max-width:420px;margin:12px 0}

/* โลโก้บนหัวหน้าที่ลูกค้าเปิดจากลิงก์ */
.pubhead .publogo{margin-bottom:10px}
.pubhead .publogo .brandmark{display:block}

/* ---------- แถบคั่นในลำดับถ่าย — ย้ายโลเคชั่น กับ ช่วงพัก ----------
 * ต้องสะดุดตากว่าแถวคอนเทนต์ เพราะเป็นจังหวะที่ทั้งกองต้องขยับพร้อมกัน
 */
.runbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 10px;padding:8px 12px;
  border-radius:10px;font-size:13.5px;break-inside:avoid}
.runbar b{font-weight:650;font-size:14.5px}
.runbar i{font-style:normal;color:var(--muted);font-size:12.5px}
.runmark{flex:none;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.runbar.move{background:#e7f1ff;border:1px solid #bcd8ff}
.runbar.move .runmark{background:#1c5fb8;color:#fff}
.runbar.rest{background:#fdf3e2;border:1px solid #f0d9ad}
/* ลิงก์แผนที่กับเบอร์ ติดอยู่กับแถบย้ายโลเคชั่น คนที่อ่านมาถึงตรงนี้จะได้กดได้เลย */
.runmap{margin-left:auto;flex:none;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:650;
  text-decoration:none;background:#fff;border:1px solid #bcd8ff;color:#1c5fb8}
.runmap + .runmap{margin-left:6px}
.runbar.move .runmap:hover{background:#1c5fb8;color:#fff}
/* หัวข้อคั่นวัน — กองที่ถ่ายหลายวันต้องแยกวันให้เห็นจากไกล */
.runbar.day{background:var(--accent-soft);border:1px solid var(--accent);margin:22px 0 12px}
.runbar.day .runmark{background:var(--accent);color:var(--accent-ink)}
.runbar.day b{font-size:16px}
.runbar.day:first-child{margin-top:0}
/* หัวข้อของทุกช่องต้องอยู่บรรทัดเดียวกัน ช่องกรอกจึงตรงกัน
   เดิมจัดชิดล่าง พอช่องวันที่มีบรรทัดวันไทยต่อท้าย ช่องมันเลยลอยสูงกว่าอีกช่อง */
/*
 * ช่องในแถบนี้มีคำอธิบายใต้หัวข้อยาวไม่เท่ากัน บางช่องสองบรรทัด บางช่องไม่มีเลย
 * ถ้าชิดบน ช่องกรอกจะลอยคนละระดับ จึงชิดล่างแทน ช่องกรอกจะได้อยู่ระนาบเดียวกันทุกช่อง
 */
.daycard{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.daycard .field{margin:0}
/* ช่องพิมพ์กับช่องเลือกสูงไม่เท่ากัน 2px ตั้งให้เท่ากันตรง ๆ ขอบล่างจะได้เสมอกันเป๊ะ */
.daycard .field input,.daycard .field select{height:45px;box-sizing:border-box}
.daycard .hint{flex:1 1 100%}
@media print{ .dayjump{break-before:page} .runbar.day{background:#eef0fb!important;border-color:#c5c9ee!important} }
.runbar.rest .runmark{background:#9a6b12;color:#fff}
:root[data-theme="dark"] .runbar.move{background:#12304f;border-color:#1f4a78}
:root[data-theme="dark"] .runbar.rest{background:#43330f;border-color:#6b5218}
:root[data-theme="dark"] .runmap{background:#0f243a;border-color:#2a5d93;color:#9ecbff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .runmap{
  background:#0f243a;border-color:#2a5d93;color:#9ecbff}}
.runbar .lnk{margin-left:auto}
.restin{flex:1;min-width:120px;padding:4px 9px;border:1px solid var(--line);border-radius:7px;
  background:var(--panel);font-size:13px;font-family:inherit}
.restin.short{flex:none;width:150px}
.orderrow .addrest{flex:none;font-size:11.5px;color:var(--muted)}
.orderrow .addrest:hover{color:var(--accent)}
@media print{
  .runbar{background:#eef3fb!important;border:1px solid #c9d8ef!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .runbar.rest{background:#fbf3e4!important;border-color:#e6d3ad!important}
  .runbar .lnk,.runbar .runmap{display:none}
}

/* ---------- Shotlist — ที่อ่านบทของทีมกล้องกับ Production support ----------
 * อ่านบนมือถือกลางกองเป็นหลัก ตัวหนังสือจึงต้องใหญ่พอ และแต่ละชิ้นต้องแยกกันชัด
 */
/* หน้าอ่านบทบนจอ — ใช้บล็อกเดียวกับใบที่พิมพ์ แต่ตัวหนังสือโตขึ้นเพราะอ่านบนมือถือกลางกอง */
.plandoc.onscreen{width:auto;max-width:none;box-shadow:none;border:0;background:transparent}
.onscreen .pitem{border-color:var(--line);background:var(--panel);margin-bottom:12px;padding:13px 15px;border-radius:12px}
.onscreen .pihead b{font-size:16px;color:var(--text)}
.onscreen .pitime{font-size:15px;color:var(--text)}
.onscreen .piwhere{font-size:12px;color:var(--muted)}
.onscreen .pifacts{gap:8px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.onscreen .pifact{background:var(--accent-soft);border-color:var(--line);border-left-color:var(--accent);padding:8px 11px}
.onscreen .pifact i{font-size:10.5px;color:var(--accent)}
.onscreen .pifact span{color:var(--text);font-size:14px}
.onscreen .pistory{font-size:15px;line-height:1.8;color:var(--text);font-weight:600;
  background:var(--accent-soft);border-color:var(--line);border-left-color:var(--accent);padding:9px 12px}
.onscreen .pistory i{font-size:11.5px}
.onscreen .planout{border-top-color:var(--line-soft);gap:8px 18px}
.onscreen .planoutlab{color:var(--accent)}
.onscreen .planpart i{font-size:11.5px;color:var(--accent)}
.onscreen .planpart span{font-size:15px;line-height:1.75;color:var(--text)}
.onscreen .planpart.full .scripted{font-size:15px;line-height:1.85;color:var(--text)}
.onscreen .piprops{font-size:13.5px;border-top-color:var(--line-soft);color:var(--text)}
.onscreen .piprops i{font-size:11.5px}
.onscreen .piprops span,.onscreen .piprops b{color:var(--text)}
.onscreen .pino{background:var(--accent)}
/*
 * สีบนจอกับสีบนกระดาษคนละหน้าที่กัน
 * สีหัวใบเอกสารตั้งไว้สำหรับกระดาษที่ส่งลูกค้า บางบริษัทเลือกดำหรือเทาเข้ม
 * ถ้าเอามาใช้บนจอด้วย หน้าอ่านบทจะดูทึบไม่มีสี จึงให้บนจอใช้สีของแอปเสมอ
 */
.plandoc.onscreen .scwho,.plandoc.onscreen .planoutlab,.plandoc.onscreen .planpart i,
.plandoc.onscreen .pistory i,.plandoc.onscreen .piprops i{color:var(--accent)}
.plandoc.onscreen .scscene{color:var(--text);border-bottom-color:var(--line)}
.plandoc.onscreen .pitem{border-left-color:var(--accent)}
.plandoc.onscreen .scmark{background:var(--warn-soft);color:var(--warn)}
@media (max-width:640px){ .onscreen .planout{grid-template-columns:1fr} }

@media print{
  .shotpage .head .btnrow,.shotpage .noprint{display:none!important}
  .shotitem{border-color:#ddd;box-shadow:none}
}

/* ---- คอมเมนต์ใต้คลิปพรีวิว ---- */
.cutplaybox{margin-top:8px}
.notebox{margin-top:10px}
.notelist{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.noteline{padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.noteline b{font-size:13px;font-weight:600}
.noteline i{font-style:normal;font-size:11.5px;color:var(--muted);margin-left:8px}
.noteline p{margin:4px 0 0;font-size:14px;line-height:1.65;white-space:pre-wrap}
.noteline .lnk{margin-top:4px;font-size:12px}
.noteadd{display:flex;gap:8px;align-items:flex-end}
.noteadd textarea{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--text);font-family:inherit;font-size:14.5px;line-height:1.65;resize:vertical}
.noteadd textarea:focus{outline:none;border-color:var(--accent)}
@media (max-width:640px){ .noteadd{flex-direction:column;align-items:stretch} }

/* ---- หน้าสำรับการ์ดของหมุนไอเดีย ---- */
.deckcard{margin-bottom:10px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.deckcard.off{opacity:.55}
.deckhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.deckhead b{font-size:15px}
.deckhead small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.deckbar{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--muted)}
.deckbar b{color:var(--text)}
.deckmeter{display:block;height:6px;border-radius:999px;background:var(--line-soft);margin-top:8px;overflow:hidden}
.deckmeter u{display:block;height:100%;background:var(--accent);text-decoration:none}
.deckedit{margin-top:18px}
.cardgrid{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cardchip{display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line);
  border-radius:999px;background:var(--panel-2);font-size:13.5px}
.cardchip.off{opacity:.5}
.cardchip i{font-style:normal;font-size:11.5px;color:var(--accent);background:var(--accent-soft);
  padding:1px 8px;border-radius:999px}
.cardchip .lnk{font-size:11.5px}

/* รอบนี้ใช้สำรับอะไร — บอกก่อนเปิดการ์ดเสมอ */
.spindeck{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 16px;padding:12px 18px;
  border:3px solid #0d0922;border-radius:14px;background:rgba(253,246,227,.94);box-shadow:0 5px 0 rgba(8,5,22,.5)}
.spindeck span{font-size:13px;color:var(--muted);letter-spacing:.06em}
.spindeck b{font-family:Inter,"Noto Sans Thai",sans-serif;font-size:24px;color:#1b1440}
.spindeck i{font-style:normal;font-size:13px;color:var(--muted)}

/* การ์ด — หน้ากระดาษเก่า พลิกเปิด */
.spinrow{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:18px}
.spinrow.small .spincard{width:150px;height:96px}
.spinrow.wide{margin-bottom:14px}
.spincard{position:relative;width:230px;height:150px;perspective:900px}
.spincard .spinface{position:absolute;inset:0;border:3px solid #0d0922;border-radius:14px;
  display:grid;place-items:center;text-align:center;padding:12px;backface-visibility:hidden;
  transition:transform .5s ease;box-shadow:0 6px 0 rgba(8,5,22,.45)}
.spincard .back{background:repeating-linear-gradient(135deg,#3b2b70 0 8px,#33266a 8px 16px);color:#ffd98a;
  font-family:Inter,"Noto Sans Thai",sans-serif;font-size:38px;transform:rotateY(0deg)}
.spincard .front{background:linear-gradient(#fdf6e3,#f0e2c2);color:#1b1440;transform:rotateY(180deg)}
.spincard.open .back{transform:rotateY(-180deg)}
.spincard.open .front{transform:rotateY(0deg)}
.spincard .front b{font-family:Inter,"Noto Sans Thai",sans-serif;font-size:20px;line-height:1.4}
.spinrow.small .spincard .front b{font-size:15px}
.spincard .front i{display:block;font-style:normal;font-size:11.5px;letter-spacing:.06em;color:#8a6f2e;margin-bottom:6px}
.spincard.format .front{background:linear-gradient(#fbf0dd,#eddcb6)}
.spincard.emotion .front{background:linear-gradient(#f9ecdf,#ebd6b8)}

/* เวทีหมุน — จอค้าง มีอะไรหมุน แล้วการ์ดเปิด */
.spinstage{display:flex;flex-direction:column;align-items:center;gap:14px;margin:10px 0 22px;
  padding:22px;border:4px solid #0d0922;border-radius:20px;background:rgba(20,14,50,.72);
  box-shadow:0 6px 0 rgba(8,5,22,.5)}
.spinsay{margin:0;font-family:Inter,"Noto Sans Thai",sans-serif;font-size:26px;color:#ffd98a;
  text-shadow:0 3px 0 rgba(0,0,0,.5)}
.spinfrom{margin:0;font-size:13px;color:#d8cdf5}
.spinwheel{display:flex;gap:10px;height:16px}
.spinwheel i{width:14px;height:14px;border-radius:50%;background:#ffd98a;opacity:.35}
.spinstage.turning .spinwheel i{animation:spinbeat .6s ease-in-out infinite}
.spinstage.turning .spinwheel i:nth-child(2){animation-delay:.15s}
.spinstage.turning .spinwheel i:nth-child(3){animation-delay:.3s}
.spinstage.done .spinwheel{opacity:0}
@keyframes spinbeat{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-8px)}}

/* ไอเดียที่ล็อกแล้ว — อ่านได้ แก้ไม่ได้ */
.spinlocked{margin:0 0 16px;padding:12px 16px;border:3px dashed #0d0922;border-radius:14px;
  background:rgba(253,246,227,.8)}
.spinlocked span{display:block;font-size:12px;letter-spacing:.05em;color:var(--muted);margin-bottom:4px}
.spinlocked p{margin:0;font-size:16px;line-height:1.7;color:#1b1440}

/* แถบสรุปการ์ดสำหรับจอแคบ */
.spinbrief{display:none}
.spinbriefbar{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border:3px solid #0d0922;
  border-radius:12px;background:rgba(253,246,227,.95);text-align:left}
.spinbriefbar span{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spinbriefbar i{font-style:normal;font-size:12px;color:var(--accent)}
.spinbriefbody{display:none}
.spinbrief.open .spinbriefbody{display:block;margin-top:10px}

@media (max-width:820px){
  .spinwrap.writing .spinrow.wide{display:none}
  .spinwrap.writing .spinbrief{display:block;position:sticky;top:56px;z-index:12;margin-bottom:14px}
  .spincard{width:calc(50% - 8px);height:120px}
  .spinrow.small .spincard{width:calc(50% - 8px)}
}

/* ---- หน้าเลือกเกม — ธีมกลางของเว็บ ไม่ใช่ธีมของเกมใดเกมหนึ่ง ---- */
/*
 * การ์ดเกมต้องมีขนาดเท่าการ์ด ไม่ใช่ยืดเต็มจอ
 * ของเดิมใช้ 1fr พอมีเกมเดียวมันเลยยืดยาวข้ามจอ ดูเป็นแบนเนอร์ ไม่ใช่ของให้เลือก
 */
.gamepick{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,340px));gap:14px;
  justify-content:start;margin-bottom:18px}
.gamecard{display:flex;flex-direction:column;gap:14px;padding:18px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow)}
/* ทั้งใบกดได้ ไม่ต้องเล็งปุ่มเล็ก ๆ ข้างใน */
.gamecard.tap{cursor:pointer;transition:border-color .18s,transform .18s,box-shadow .18s}
.gamecard.tap:hover{border-color:var(--accent);transform:translateY(-2px)}
.gamecard.tap:active{transform:none}
.gcgo{font-weight:700;font-size:14px;color:var(--accent)}
.gamehead{margin-top:0}
/* ช่องรหัสห้องบนสุด — ทางลัดของคนที่ถือรหัสมาอยู่แล้ว */
/* ห้ามตั้งชื่อคลาสว่า top ตรงนี้ กฎของแถบบน (.top .btn) จะเหมาเอาปุ่มในกล่องนี้ไปด้วย */
.gjoin.gjoinfirst{margin-bottom:18px}
.gjoinhead{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.gjoinhead b{font-size:15px}
.gjoin .gwatch{margin-top:10px}
.gamecard .gcmain b{display:block;font-size:19px;margin-bottom:6px}
.gamecard .gcmain p{margin:0;font-size:14px;line-height:1.7;color:var(--muted)}
.gcfacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.gcfacts span{padding:4px 10px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line-soft);
  font-size:12px;color:var(--muted)}
.gcacts{display:flex;gap:10px;align-items:center;margin-top:auto;flex-wrap:wrap}
.gcacts .btn{flex:0 0 auto}

/* ---- จอฉายทีวีของหมุนไอเดีย — ใหญ่และช้ากว่าบนมือถือ ---- */
.tvwrap.spingame{background:radial-gradient(circle at 50% 10%,#2c2062,#100d28 72%);color:#ffd98a;justify-content:flex-start;gap:18px}
.tvwrap.spingame .tvkick{font-family:Inter,"Noto Sans Thai",sans-serif;font-size:30px;color:#ffd98a}
.tvcards.spingame{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;width:100%}
.tvcards.spingame.small{gap:12px;opacity:.85}
.spincard.tv{width:280px;height:180px}
.spincard.tv.big{width:min(22vw,420px);height:min(15vw,260px)}
.spincard.tv .front b{font-size:26px}
.spincard.tv.big .front b{font-size:min(3.4vw,42px);line-height:1.35}
.spincard.tv.big .front i{font-size:min(1.4vw,18px)}
.tvspin{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}
.spinwheel.big i{width:22px;height:22px}
.tvwrap.spingame .tvclock{font-size:min(10vw,90px)}

/* ---- หน้าสรุปของหมุนไอเดีย — เห็นการ์ดของรอบ แล้วเห็นว่าไอเดียถูกดัดไปทางไหน ---- */
.sumdeal{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.sumdealhead{display:block;font-size:12.5px;color:var(--muted);margin-bottom:10px}
.sumturn{margin-bottom:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);cursor:zoom-in}
.sumwho{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sumwho b{font-size:15px}
.sumwho em{font-style:normal;font-size:12px;color:var(--muted)}
.sumflow{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.sumstep span{display:block;font-size:11.5px;letter-spacing:.04em;color:var(--muted);margin-bottom:4px}
.sumstep p{margin:0 0 8px;font-size:15px;line-height:1.7}
.sumstep.first{opacity:.85}
.sumstep.after{padding:10px 12px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 10px 10px 0}
.sumshoot{margin-top:6px}
.sumarrow{text-align:center;color:var(--muted)}
.sumarrow i{display:block;font-style:normal;font-size:12.5px;line-height:1.6;width:min(210px,24vw);margin:0 auto;text-wrap:balance}
.sumarrow u{display:block;text-decoration:none;font-size:24px;color:var(--accent)}
@media (max-width:820px){
  .sumflow{grid-template-columns:1fr}
  .sumarrow u{transform:none}
  .spincard.tv.big{width:min(70vw,420px);height:200px}
}

/* กล่องใหญ่ของหมุนไอเดีย · การ์ดของรอบอยู่บนสุด แล้วไล่ลงมาเป็นไอเดียก่อนและหลังหมุน */
.gbigbox.spinbig{max-width:820px;padding:20px}
.gbigbox.spinbig .spinrow.small{margin-bottom:16px;justify-content:center}
.gbigbox.spinbig .gbigtext{padding:0}
.gbigtext .sumhead{display:block;font-size:11.5px;letter-spacing:.04em;color:var(--muted);margin:14px 0 4px}
.gbigtext .sumhead:first-child{margin-top:0}
.gbigbox.spinbig .gbigtext b{display:block;font-size:19px;line-height:1.65}
.gbigbox.spinbig .gbigtext p{margin:0;font-size:15.5px;line-height:1.7}

/* ปุ่มข้ามจังหวะหมุน · ซ่อนไว้ระหว่างการ์ดยังหมุน กันกดข้ามก่อนใครได้เห็นหน้าการ์ด */
.gostrow.waiting{visibility:hidden;pointer-events:none}

/* ---- หมุนไอเดียกติกาใหม่ — การ์ดเป็นตัวเลือก ไม่ใช่โจทย์บังคับ ---- */
/* การ์ดที่แตะเลือกได้ · ไม่ต้องพลิกเปิดแล้ว เพราะเห็นทุกใบตั้งแต่ต้นรอบ */
.spinrow.pickrow{gap:12px;margin-bottom:10px}
.spincard.pick{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;width:200px;height:132px;padding:12px;border:3px solid #0d0922;border-radius:14px;
  background:linear-gradient(#fdf6e3,#f0e2c2);color:#1b1440;text-align:center;perspective:none;
  box-shadow:0 6px 0 rgba(8,5,22,.45);transition:transform .12s ease,box-shadow .12s ease}
.spincard.pick i{font-style:normal;font-size:11.5px;letter-spacing:.06em;color:#8a6f2e}
.spincard.pick b{font-family:Inter,"Noto Sans Thai",sans-serif;font-size:20px;line-height:1.35}
.spincard.pick .spintick{font-size:11.5px;color:var(--muted)}
.spincard.pick.on{background:linear-gradient(#fff3cd,#ffd98a);transform:translateY(-3px);
  box-shadow:0 9px 0 rgba(8,5,22,.5),0 0 0 4px rgba(255,217,138,.45)}
.spincard.pick.on .spintick{color:#7a5a00;font-weight:600}
.spincard.pick:disabled{opacity:.7}

/* แถบช่วยคิด — พับเก็บได้ ไม่แย่งที่กับช่องเขียน */
.spinhint{margin:0 0 16px}
.spinhintbar{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border:3px solid #0d0922;
  border-radius:12px;background:rgba(253,246,227,.95);text-align:left;color:#1b1440}
.spinhintbar span{flex:1;min-width:0;font-family:Inter,"Noto Sans Thai",sans-serif;font-size:17px}
.spinhintbar i{font-style:normal;font-size:12px;color:#8a6f2e}
.spinhintbody{display:none}
.spinhint.open .spinhintbody{display:block;margin-top:10px;padding:12px 14px;border:3px dashed #0d0922;
  border-radius:12px;background:rgba(253,246,227,.88)}
.spinhintdeck+.spinhintdeck{margin-top:12px}
.spinhintdeck>span{display:block;font-size:12px;letter-spacing:.05em;color:#8a6f2e;margin-bottom:6px}
.spinchips{display:flex;flex-wrap:wrap;gap:6px}
.spinchips i{font-style:normal;font-size:13px;padding:4px 10px;border-radius:99px;
  border:1px solid rgba(13,9,34,.25);background:#fffdf6;color:#1b1440}
.spinchips.used i{background:var(--accent-soft);border-color:transparent;color:var(--text)}
.spinchips.used.big i{font-size:15px;padding:6px 14px}

/* การ์ดตอนโหวตของหมุนไอเดีย — ไม่มีรูป มีแต่คำที่เลือกกับไอเดีย */
.gcard.spingame .spinchips{margin:11px 13px 0}
.gcard.spingame>b{font-size:17px;line-height:1.6}

/* หน้าสรุป — ใครใช้คำไหน */
.sumused{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.sumused>span{font-size:11.5px;letter-spacing:.04em;color:var(--muted)}
.sumused em{font-style:normal;font-size:13px;color:var(--muted)}
.sumidea{margin:0;font-size:16px;line-height:1.75}

@media (max-width:820px){
  .spincard.pick{width:calc(50% - 6px);height:112px}
  .spincard.pick b{font-size:17px}
}

/* ---- คลังไอเดีย ---- */
.bankrow{align-items:flex-start;flex-wrap:wrap;gap:10px}
.bankrow .main{min-width:0;flex:1}
.banknote{margin:4px 0 0;font-size:13.5px;line-height:1.7;color:var(--text);white-space:pre-wrap}
.bankrow small{display:block;margin-top:6px;font-size:11.5px;color:var(--muted)}
.bankgo{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.bankpick{flex-basis:100%;margin-top:8px;padding:12px;border:1px dashed var(--line);border-radius:12px;background:var(--panel-2)}
.bankpick>span{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}
.bankprojects{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.bankrow.on{border-color:var(--accent)}

/* ดาวเก็บไอเดียเข้าคลังในหน้าสรุปเกม */
.starbtn{white-space:nowrap}
.starbtn.on{border-color:var(--accent);color:var(--accent)}
.sumturn{position:relative}
.sumturn .starbtn{position:absolute;right:14px;bottom:12px}
.gcard .starbtn{margin:0 13px 10px}
@media (max-width:820px){
  .sumturn .starbtn{position:static;margin-top:10px}
}

/* ================= ธีมเกม · สติกเกอร์ =================
 * พื้นเหลืองจัด เส้นขอบดำหนา เงาทึบเป็นก้อนไม่ฟุ้ง ทุกอย่างดูกดได้เหมือนสติกเกอร์ที่แปะทับกัน
 * ชุดเดียวกันทุกเกม ต่างกันแค่สีประจำเกมซึ่งเป็นตัวแปรตัวเดียว เพิ่มเกมใหม่คือเพิ่มสีเดียว
 * ธีมนี้เหมือนกันทั้งโหมดสว่างและมืดของเว็บ เพราะทั้งวงเล่นพร้อมกันคนละเครื่อง หน้าจอต้องหน้าตาเดียวกัน
 */
#app.gtheme{
  --g-bg:#ffd93d;
  --g-card:#fffdf5;
  --g-card-2:#ffe9a8;
  --g-ink:#15110a;
  --g-ink-soft:#6b6151;
  /* พื้นเป็นสีสว่างแล้ว ตัวหนังสือบนพื้นจึงเป็นสีเข้มเหมือนบนการ์ด ไม่ใช่สีขาวแบบธีมเดิม */
  --g-head:#15110a;
  --g-head-soft:#6b6151;
  --g-line:#15110a;
  /* สีกลาง — ใช้กับหน้าเลือกเกมและหน้าตั้งค่า ไม่ใช่สีของเกมใดเกมหนึ่ง */
  --g-key:#2d6cff;
  --g-key-ink:#fffdf5;
  /* ความหนาของเส้นขอบ กับเงาทึบที่ทำให้ของดูลอยขึ้นมาเป็นชั้น */
  --g-edge:3px;
  --g-pop:6px 6px 0 var(--g-line);
  --g-pop-sm:4px 4px 0 var(--g-line);
  --g-ease:cubic-bezier(.34,1.56,.64,1);
  position:relative;
  min-height:100vh;
  background:var(--g-bg);
  color:var(--g-head);
}
#app.gtheme.key-idea{--g-key:#ff9c4d;--g-key-ink:#15110a}      /* เกมไอเดีย = ส้ม */
#app.gtheme.key-spy{--g-key:#2d6cff;--g-key-ink:#fffdf5}       /* Spyfall = น้ำเงิน */
#app.gtheme.key-spin{--g-key:#0fbf7a;--g-key-ink:#15110a}      /* หมุนไอเดีย = เขียว */
body.gthemeon{background:#ffd93d}

/* ======================= ธีมกระดาษ · ไอเดียห่วยสุดในโลก =======================
 * พื้นขาว เส้นดำ ฟอนต์ลายมือ กรอบเบี้ยวแบบวาดมือ ไม่มีเงาทึบ
 * ทับธีมสติกเกอร์ทั้งชุดเฉพาะเกมนี้เกมเดียว · ติดทั้งเกมตั้งแต่หน้าคิดถึงหน้าสรุป
 * กรอบเบี้ยวทำด้วย border-radius ค่าคู่แปลก ๆ ไม่ได้ใช้ไฟล์ภาพ จึงไม่มีอะไรต้องโหลดเพิ่ม
 */
body.drawnon{background:#fff}
#app.drawn{
  --g-bg:#fff; --g-card:#fff; --g-card-2:#fff;
  --g-ink:#111; --g-ink-soft:#555;
  --g-head:#111; --g-head-soft:#555; --g-line:#111;
  --g-key:#111; --g-key-ink:#fff;
  --g-pop:none; --g-pop-sm:none;
  font-family:Itim,"Noto Sans Thai",system-ui,sans-serif}
#app.drawn .gdoodle{display:none}
#app.drawn .head h2,#app.drawn .opshead,#app.drawn .gwbox>b,#app.drawn .onehook,
#app.drawn .cmidea,#app.drawn .spyaskq{font-family:Itim,"Noto Sans Thai",system-ui,sans-serif;font-weight:400}
#app.drawn .head h2{font-size:38px;letter-spacing:0}
#app.drawn .kicker{letter-spacing:.1em}
/* กรอบเบี้ยวสี่แบบ สลับกันไป ไม่ให้ทุกกล่องเบี้ยวทางเดียวกันจนดูเป็นลายซ้ำ */
#app.drawn .card,#app.drawn .rows,#app.drawn .gamecard,#app.drawn .gwmain,#app.drawn .onecard,
#app.drawn .spyitem,#app.drawn .gbar,#app.drawn .gsentbox,#app.drawn .spycount{
  border:3px solid #111;box-shadow:none;background:#fff;
  border-radius:255px 14px 225px 14px / 14px 225px 14px 255px}
#app.drawn .gwbox{border:3px solid #111;background:#fff;box-shadow:none;
  border-radius:14px 240px 18px 230px / 230px 16px 250px 16px}
#app.drawn .gwbox.warm,#app.drawn .gwbox.mine,#app.drawn .gwbox.got{background:#fff;color:#111}
#app.drawn .gwbox.mine>span,#app.drawn .gwbox.mine>i{color:#555;opacity:1}
#app.drawn .gwtext,#app.drawn .gwsentbox,#app.drawn .gfield input,#app.drawn .gfield textarea{
  border:3px solid #111;background:#fff;color:#111;
  border-radius:230px 16px 240px 16px / 16px 230px 16px 240px;font-family:inherit}
#app.drawn .gwsentbox{border-style:dashed}
#app.drawn .btn,#app.drawn .chip,#app.drawn .tpick{
  border:3px solid #111;background:#fff;color:#111;box-shadow:none;font-family:inherit;
  border-radius:240px 16px 230px 16px / 16px 240px 16px 230px}
#app.drawn .btn.primary{background:#111;color:#fff}
#app.drawn .btn:active{transform:translateY(1px)}
#app.drawn .gcfacts span,#app.drawn .spyitembox,#app.drawn .worstone{
  border:2px solid #111;background:#fff;color:#111;border-radius:200px 12px 210px 12px / 12px 210px 12px 200px}
#app.drawn .gwtick{background:#111;color:#fff}
#app.drawn .gwdot{background:#111}
#app.drawn .gclock{color:#111}
#app.drawn .onecard.on{background:#111;color:#fff}
#app.drawn .onecard.on .worstone{background:#fff;color:#111}
#app.drawn .quitfab,#app.drawn .soundfab{border:3px solid #111;background:#fff;color:#111;box-shadow:none;
  border-radius:230px 14px 240px 14px / 14px 240px 14px 230px}
#app.drawn .soundfab.on{background:#111;color:#fff}

/* ลายเส้นวาดมือบนพื้น — วาดด้วย SVG ในหน้าเลย ไม่มีไฟล์ภาพ และจางมากจนไม่แย่งสายตา */
.gdoodle{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.07;color:#cfdcff}
#app.gtheme .gdoodle,#app.gtheme ~ .gdoodle{color:#15110a;opacity:.1}
/*
 * แถบบนต้องอยู่เหนือเนื้อหา ไม่ใช่ระดับเดียวกัน
 * เมนูเครื่องมือเป็นกล่องลอยที่อยู่ข้างในแถบบน ถ้าสองอันอยู่ z-index เท่ากัน
 * เนื้อหาที่มาทีหลังใน DOM จะทับเมนูเสมอ เปิดเมนูแล้วเห็นการ์ดเกมทับอยู่ข้างหน้า
 */
#app.gtheme .wrap{position:relative;z-index:1}
#app.gtheme .top{position:relative;z-index:2}

#app.gtheme .top{background:var(--g-bg);border-bottom:var(--g-edge) solid var(--g-line);color:var(--g-head)}
#app.gtheme .top .logo,#app.gtheme .who,#app.gtheme .opsname{color:var(--g-head)}
#app.gtheme .navtab{color:var(--g-head-soft)}
#app.gtheme .navtab.on{background:rgba(255,255,255,.12);color:var(--g-head)}
/*
 * แถวเมนูต้องอยู่ในกรอบของแถบบน ไม่ใช่ล้นลงมา
 * สกิน Sheet ดึงแถวเมนูลงด้วย margin ติดลบ 12px ซึ่งพอมาเจอขอบล่างหนา 3px ของธีมเกม
 * เส้นขอบจะพาดกลางปุ่มเมนูพอดี และเส้นบนของแถวเมนูก็กลายเป็นเส้นแปลกปลอมอีกเส้น
 */
#app.gtheme .navtabs{background:transparent;border-top:0;margin-bottom:0}
#app.gtheme .top{padding-bottom:8px}
#app.gtheme .themebtn,#app.gtheme .langbtn,#app.gtheme .top .btn{
  background:var(--g-card);border:2px solid var(--g-line);color:var(--g-ink);box-shadow:2px 2px 0 var(--g-line)}

#app.gtheme .head h2{color:var(--g-head);font-size:33px;font-weight:700;letter-spacing:-.01em}
#app.gtheme .head p{color:var(--g-head-soft);font-size:15px;line-height:1.7}
#app.gtheme .kicker{color:var(--g-head-soft);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
#app.gtheme .opshead{color:var(--g-head);font-size:19px;font-weight:700;margin:26px 0 12px}

/* การ์ด — ครีมสว่าง ขอบมนใหญ่ เงานุ่ม ลอยอยู่บนพื้นเข้ม */
#app.gtheme .card,#app.gtheme .rows,#app.gtheme .gamecard{
  background:var(--g-card);color:var(--g-ink);border:var(--g-edge) solid var(--g-line);border-radius:22px;
  box-shadow:var(--g-pop)}
#app.gtheme .card>b,#app.gtheme .row b,#app.gtheme .main b{color:var(--g-ink)}
#app.gtheme .hint,#app.gtheme .row small,#app.gtheme .main small{color:var(--g-ink-soft)}
/* บรรทัดคำอธิบายที่วางบนพื้นเข้มตรง ๆ ไม่ใช่ในการ์ด — เป็นข้อความเปล่า ไม่ต้องมีกล่อง */
#app.gtheme .wrap>.hint{background:transparent;border:none;padding:0 4px;color:var(--g-head-soft)}
#app.gtheme .row{border-bottom:2px solid var(--g-line)}
#app.gtheme .rows .row:last-child{border-bottom:none}
#app.gtheme .empty{color:var(--g-ink-soft)}

/* ปุ่ม — ปุ่มหลักใช้สีประจำเกม ปุ่มรองเป็นสีกลางบนการ์ด */
#app.gtheme .btn{
  border-radius:999px;border:var(--g-edge) solid var(--g-line);background:var(--g-card);color:var(--g-ink);
  font-weight:600;padding:9px 17px;box-shadow:var(--g-pop-sm);
  transition:transform .14s var(--g-ease),box-shadow .14s var(--g-ease)}
#app.gtheme .btn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--g-line)}
#app.gtheme .btn:active:not(:disabled){transform:translate(4px,4px);box-shadow:0 0 0 var(--g-line)}
#app.gtheme .btn.primary{background:var(--g-key);color:var(--g-key-ink);border-color:var(--g-line)}
/* ปุ่มโปร่งบนพื้นเข้มต้องเป็นตัวอักษรสว่าง ส่วนปุ่มโปร่งที่อยู่บนการ์ดครีมยังเป็นตัวอักษรเข้ม */
#app.gtheme .btn.ghost{background:transparent;color:var(--g-ink);border-color:var(--g-line)}
#app.gtheme .card .btn.ghost,#app.gtheme .rows .btn.ghost,#app.gtheme .gamecard .btn.ghost,
#app.gtheme .sumturn .btn.ghost,#app.gtheme .gcard .btn.ghost,#app.gtheme .gbigbox .btn.ghost{
  color:var(--g-ink);border-color:var(--g-line)}
#app.gtheme .btn.small{padding:6px 13px;font-size:13px}
#app.gtheme .btn.danger{background:#fffdf5;color:#c0392b;border-color:var(--g-line)}
#app.gtheme .btn:disabled{opacity:.5}

/* การ์ดเกมบนหน้าเลือกเกม */
#app.gtheme .gamepick{gap:16px}
#app.gtheme .gamecard{padding:22px 22px 20px;gap:14px}
#app.gtheme .gamecard .gcmain b{font-size:22px;color:var(--g-ink);margin-bottom:8px}
#app.gtheme .gamecard .gcmain p{color:var(--g-ink-soft);font-size:14.5px;line-height:1.75}
#app.gtheme .gcfacts span{background:var(--g-card-2);border:2px solid var(--g-line);color:var(--g-ink);
  border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:500}

/* ช่องพิมพ์ — พื้นสว่าง ฟอนต์เดียวกับทั้งเว็บ ไม่ใช้ฟอนต์ตกแต่ง */
#app.gtheme input,#app.gtheme textarea,#app.gtheme select{
  background:#fff;color:var(--g-ink);border:var(--g-edge) solid var(--g-line);border-radius:14px;
  font-family:Mitr,"Noto Sans Thai",sans-serif}
#app.gtheme input:focus,#app.gtheme textarea:focus{outline:3px solid var(--g-key);outline-offset:2px;border-color:var(--g-line)}
#app.gtheme .gjoinrow input{text-align:center;letter-spacing:.22em;text-transform:uppercase;font-size:19px;font-weight:700;padding:13px}

#app.gtheme .error{border:var(--g-edge) solid var(--g-line);border-radius:16px;background:#ffd9d4;color:#8d2626;box-shadow:var(--g-pop-sm)}
#app.gtheme .error.notice{border-color:var(--g-line);background:#c9f0d8;color:#17512f}

/* ---- ธีมเกมชุดใหม่ · หน้าที่เหลือทั้งหมด ----
 * กฎเดียวกันทุกหน้า พื้นเข้ม เนื้อหาบนการ์ดครีม ตัวหนังสือเข้ม
 * สีประจำเกมใช้แค่สามที่ ปุ่มหลัก นาฬิกา และขอบของที่เลือกแล้ว
 */
#app.gtheme,#app.gtheme *{font-family:Mitr,"Noto Sans Thai",sans-serif}
#app.gtheme .wrap{max-width:900px}

/* แถบเวลา — ลอยอยู่บนพื้นเข้ม ไม่ใช่การ์ด เพราะต้องเห็นทะลุตลอดเวลาที่เลื่อนจอ */
#app.gtheme .gbar{background:var(--g-card);border:var(--g-edge) solid var(--g-line);
  border-radius:18px;color:var(--g-ink);padding:10px 16px;box-shadow:var(--g-pop-sm)}
#app.gtheme .gclock{color:var(--g-key);font-size:32px;font-weight:800}
#app.gtheme .gclock.warn{color:#c0392b}
#app.gtheme .ground,#app.gtheme .gsent,#app.gtheme .grush{color:var(--g-ink-soft);font-size:13.5px}
#app.gtheme .grush{color:var(--g-key)}

/* ห้องรอ — รหัสห้องต้องอ่านออกจากอีกฝั่งห้อง */
#app.gtheme .gcode{background:var(--g-card);color:var(--g-ink);text-align:center}
#app.gtheme .gcode>span{color:var(--g-ink-soft);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
#app.gtheme .gcode>b{display:block;margin:6px 0 4px;font-size:min(15vw,76px);font-weight:800;
  letter-spacing:.16em;color:var(--g-ink);line-height:1.1}

/* กระดานรูปของเกมไอเดีย · รูปวางบนแผ่นครีมเหมือนวางรูปบนโต๊ะ */
#app.gtheme .gboard{background:var(--g-card);padding:12px;border-radius:22px;gap:10px;
  box-shadow:0 16px 38px rgba(2,6,20,.42)}
#app.gtheme .gpic{border:3px solid transparent;border-radius:14px;background:#fff}
#app.gtheme .gpic.on{border-color:var(--g-key)}
#app.gtheme .gnum{background:var(--g-key);color:var(--g-key-ink);border:none}
#app.gtheme .gpicked{background:var(--g-card);border:none;border-radius:22px;color:var(--g-ink);
  box-shadow:0 16px 38px rgba(2,6,20,.42)}
#app.gtheme .gpickhead{color:var(--g-ink)}
#app.gtheme .gpickhead i{color:var(--g-key-ink);background:var(--g-key);border-radius:999px;padding:1px 9px;font-style:normal}
#app.gtheme .gslot{border:2px dashed rgba(26,34,56,.22);background:#fff;color:var(--g-ink-soft)}
#app.gtheme .gslot u{color:var(--g-ink-soft)}

/* ช่องพิมพ์ — อยู่บนการ์ดครีม ตัวหนังสือเข้ม ไม่มีฟอนต์ตกแต่ง */
#app.gtheme .gfield{background:var(--g-card);border-radius:22px;padding:15px 17px;margin-bottom:14px;
  box-shadow:0 16px 38px rgba(2,6,20,.42)}
#app.gtheme .gfield>span{color:var(--g-ink);font-size:13px;font-weight:600}
#app.gtheme .gfield>span i{color:var(--g-ink-soft);font-weight:400}
#app.gtheme .gfield input,#app.gtheme .gfield textarea{background:#fff;border:1px solid var(--g-line);
  border-radius:14px;color:var(--g-ink);font-size:16px}
#app.gtheme .btn.big{font-size:17px;padding:15px 26px;border-radius:999px;width:auto}
/*
 * แถวปุ่มนอกการ์ดไม่เคยมีกฎระยะห่างมาก่อน ปุ่มเลยเรียงชิดกันตามค่าเริ่มต้นของเบราว์เซอร์
 * พอธีมนี้มีเงาทึบยื่นออกมา 4 จุด ปุ่มจึงดูทับกัน ต้องเว้นให้พ้นเงาทั้งแนวนอนและแนวตั้ง
 */
#app.gtheme .btnrow{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
#app.gtheme .gsend{width:100%}
#app.gtheme .gsend{width:100%;margin-bottom:6px}
#app.gtheme .gsentbox{background:var(--g-card);border:none;border-radius:22px;color:var(--g-ink);
  box-shadow:0 16px 38px rgba(2,6,20,.42)}
#app.gtheme .gsentbox b{color:#1f7a55}
#app.gtheme .gsentbox p{color:var(--g-ink-soft)}
#app.gtheme .gostrow .btn{background:var(--g-card);border-color:var(--g-line);color:var(--g-ink)}

/* การ์ดตอนโหวต */
#app.gtheme .gcard{background:var(--g-card);color:var(--g-ink);border:2px solid transparent;
  border-radius:20px;box-shadow:0 14px 32px rgba(2,6,20,.4)}
#app.gtheme .gcard.on{border-color:var(--g-key)}
#app.gtheme .gcard.own{border-style:dashed;border-color:rgba(26,34,56,.22);opacity:1}
#app.gtheme .gcard>b{color:var(--g-ink)}
#app.gtheme .gcard>p,#app.gtheme .gby{color:var(--g-ink-soft)}
#app.gtheme .gcard>footer{background:var(--g-card-2);border-top:none}
#app.gtheme .gvotes{color:var(--g-ink)}
#app.gtheme .gownmark{color:var(--g-ink-soft)}
#app.gtheme .gzoom{background:rgba(255,255,255,.92);color:var(--g-ink);border:none}

/* หน้าสรุป */
#app.gtheme .sumdeal,#app.gtheme .sumturn{background:var(--g-card);border:none;border-radius:20px;
  color:var(--g-ink);box-shadow:0 14px 32px rgba(2,6,20,.4)}
#app.gtheme .sumdealhead,#app.gtheme .sumused>span,#app.gtheme .sumstep span,#app.gtheme .sumhead{color:var(--g-ink-soft)}
#app.gtheme .sumidea,#app.gtheme .sumstep p{color:var(--g-ink)}
#app.gtheme .sumstep.after{background:var(--g-card-2);border-left-color:var(--g-key)}
#app.gtheme .sumarrow u{color:var(--g-key)}
#app.gtheme .gplace{background:var(--g-card-2);color:var(--g-ink)}
#app.gtheme .gscore{color:var(--g-ink)}
#app.gtheme .starbtn{background:#fff;border-color:var(--g-line);color:var(--g-ink)}
#app.gtheme .starbtn.on{background:var(--g-key);border-color:transparent;color:var(--g-key-ink)}

/* กล่องขยายเต็มจอ */
#app.gtheme .gbigbox{background:var(--g-card);color:var(--g-ink);border-radius:24px}
/* แถบรูปในกล่องใหญ่ ใช้พื้นครีมเข้มขึ้นนิดเดียว จะได้ไม่มีแถบดำคาดกลางการ์ด */
#app.gtheme .gbigpics{background:var(--g-card-2)}
#app.gtheme .gbigpics img{background:var(--g-card-2);border-radius:12px}
#app.gtheme .gbigtext b,#app.gtheme .gbigtext p{color:var(--g-ink)}
#app.gtheme .gbigx{background:#fff;border:1px solid var(--g-line);color:var(--g-ink);border-radius:999px}

/* หมุนไอเดีย — แถบสำรับ การ์ดคำ และแถบช่วยคิด */
#app.gtheme .spindeck{background:var(--g-card);border:none;border-radius:20px;color:var(--g-ink);
  box-shadow:0 14px 32px rgba(2,6,20,.4)}
#app.gtheme .spindeck span{color:var(--g-ink-soft)}
#app.gtheme .spindeck b{color:var(--g-ink);font-size:20px;font-weight:700}
#app.gtheme .spindeck i{color:var(--g-ink-soft)}
#app.gtheme .spincard.pick{background:var(--g-card);color:var(--g-ink);border:2px solid transparent;
  border-radius:20px;box-shadow:0 12px 26px rgba(2,6,20,.38)}
#app.gtheme .spincard.pick b{color:var(--g-ink);font-size:18px;font-weight:700}
#app.gtheme .spincard.pick i,#app.gtheme .spincard.pick .spintick{color:var(--g-ink-soft)}
#app.gtheme .spincard.pick.on{border-color:var(--g-key);background:#fff;transform:translateY(-3px);
  box-shadow:0 16px 30px rgba(2,6,20,.45)}
#app.gtheme .spincard.pick.on .spintick{color:var(--g-ink);font-weight:600}
#app.gtheme .spincard .spinface.front{background:var(--g-card);color:var(--g-ink);border:1px solid var(--g-line)}
#app.gtheme .spincard .spinface.back{background:#1b2440;color:var(--g-head-soft);border:1px solid rgba(255,255,255,.18)}
#app.gtheme .spincard .front b{color:var(--g-ink);font-weight:700}
#app.gtheme .spincard .front i{color:var(--g-ink-soft)}
#app.gtheme .spinhintbar{background:var(--g-card);color:var(--g-ink);border:none;border-radius:18px}
#app.gtheme .spinhintbar span{color:var(--g-ink);font-size:15px;font-weight:600}
#app.gtheme .spinhintbar i{color:var(--g-ink-soft)}
#app.gtheme .spinhint.open .spinhintbody{background:var(--g-card);border:none;border-radius:18px}
#app.gtheme .spinhintdeck>span{color:var(--g-ink-soft)}
#app.gtheme .spinchips i{background:var(--g-card-2);border-color:transparent;color:var(--g-ink)}
#app.gtheme .spinchips.used i{background:var(--g-key);color:var(--g-key-ink)}

/* จอฉายขึ้นทีวี — ตัวหนังสือใหญ่ อ่านจากอีกฝั่งห้อง */
/* จอฉายโปร่งใส เพื่อให้เห็นลายเส้นพื้นหลังชุดเดียวกับหน้าอื่น */
#app.gtheme .tvwrap{background:transparent;color:var(--g-head);gap:20px}
#app.gtheme .tvwrap.spingame{background:transparent}
#app.gtheme .tvclock{color:var(--g-key)}
#app.gtheme .tvclock.warn{color:#ff8080}
#app.gtheme .tvround,#app.gtheme .tvsent,#app.gtheme .tvsub{color:var(--g-head-soft)}
#app.gtheme .tvkick{color:var(--g-head);font-size:26px;font-weight:700}
#app.gtheme .tvname{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:var(--g-head)}
#app.gtheme .tvname.gone{opacity:.4}
#app.gtheme .tvcode{color:var(--g-key)}
#app.gtheme .tvexit{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:var(--g-head);border-radius:999px}
#app.gtheme .spincard.tv .spinface.front{background:var(--g-card)}

/* ---- ระหว่างจังหวะที่กำลังพิมพ์ ห้ามมีอะไรขยับนอกจากนาฬิกา ----
 * กฎเดิมจากธีมก่อน ย้ายมาอยู่กับธีมใหม่ทั้งชุด
 */
#app.gtheme.gplaying *,#app.gtheme.gplaying *::before,#app.gtheme.gplaying *::after{
  animation:none!important;transition:none!important}
#app.gtheme.gplaying .gpic:hover,#app.gtheme.gplaying .gcard:hover,
#app.gtheme.gplaying .spincard.pick:hover{transform:none}
#app.gtheme.gplaying .gclock.warn{animation:gwarnblink .8s steps(2) infinite!important}
/*
 * ข้อยกเว้นอีกตัวของกฎข้างบน · ตอนเฉลยจบแล้วค่อย ๆ จางมาเป็นหน้าคิดคอนเทนต์
 * จังหวะนั้นนับเป็นจังหวะพิมพ์แล้วก็จริง แต่ยังไม่มีใครเริ่มพิมพ์ และการจางคือตัวบอกว่าเปลี่ยนฉากแล้ว
 */
#app.gtheme.gplaying .spywrap.spyfade{animation:spyfadein .8s ease both!important}
@keyframes gwarnblink{50%{opacity:.4}}

/* ปุ่มเปิดปิดเพลง */
#app.gtheme .soundfab{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:var(--g-head)}

/* หน้าตั้งค่า คลังรูป และสำรับการ์ด — หน้ารวมของทุกเกม ใช้สีกลาง */
#app.gtheme .field span{color:var(--g-ink)}
/* ป้ายตัวเลขสรุปด้านบนของคลังรูป — เป็นการ์ดครีมเหมือนกัน ตัวเลขต้องเป็นสีเข้ม */
#app.gtheme .kpi{background:var(--g-card);border:none;border-radius:18px;box-shadow:0 12px 26px rgba(2,6,20,.35)}
#app.gtheme .kpi>b{color:var(--g-ink)}
#app.gtheme .kpi>span,#app.gtheme .kpi>i{color:var(--g-ink-soft)}
/* สำรับการ์ดกับคลังรูป — การ์ดทุกใบเป็นครีมชุดเดียวกับหน้าอื่น ปุ่มบนการ์ดเป็นตัวอักษรเข้ม */
#app.gtheme .picmark{background:var(--g-card);border-color:var(--g-line);color:var(--g-ink)}
#app.gtheme .piccard.picchosen{outline-color:var(--g-key)}
#app.gtheme .piccard.picchosen .picmark{background:var(--g-key);border-color:var(--g-line);color:var(--g-key-ink)}
#app.gtheme .deckcard,#app.gtheme .piccard{background:var(--g-card);color:var(--g-ink);border:none;
  border-radius:18px;box-shadow:0 12px 26px rgba(2,6,20,.35)}
#app.gtheme .deckcard b,#app.gtheme .deckbar b{color:var(--g-ink)}
#app.gtheme .deckcard small,#app.gtheme .deckbar{color:var(--g-ink-soft)}
#app.gtheme .deckcard .btn.ghost,#app.gtheme .piccard .btn.ghost,#app.gtheme .deckcard .btn,
#app.gtheme .piccard .btn{color:var(--g-ink);border-color:var(--g-line)}
#app.gtheme .deckcard .btn.primary,#app.gtheme .piccard .btn.primary{color:var(--g-key-ink)}
#app.gtheme .deckmeter{background:rgba(26,34,56,.14)}
#app.gtheme .deckmeter u{background:var(--g-key)}
#app.gtheme .btabs .btab{background:#fff;border:1px solid var(--g-line);color:var(--g-ink);border-radius:999px}
#app.gtheme .btabs .btab.on{background:var(--g-key);color:var(--g-key-ink);border-color:transparent}

/* ---- สติกเกอร์: ขอบดำหนา เงาทึบ และจังหวะเด้ง ----
 * ของที่เป็นแผ่นทุกชิ้นใช้กฎเดียวกันหมด ไม่ต้องไล่ตั้งค่าทีละอัน
 * เงาเป็นก้อนทึบไม่ฟุ้ง จึงดูเหมือนกระดาษที่แปะซ้อนกันจริง ๆ
 */
#app.gtheme .gcode,#app.gtheme .gboard,#app.gtheme .gpicked,#app.gtheme .gfield,
#app.gtheme .gsentbox,#app.gtheme .gcard,#app.gtheme .kpi,#app.gtheme .deckcard,
#app.gtheme .piccard,#app.gtheme .sumdeal,#app.gtheme .sumturn,#app.gtheme .gbigbox,
#app.gtheme .spindeck,#app.gtheme .spinhintbar,#app.gtheme .spinhint.open .spinhintbody{
  border:var(--g-edge) solid var(--g-line);box-shadow:var(--g-pop)}

/* ของที่เลือกได้ — กรอบหนาขึ้นตอนเลือก ไม่ใช่แค่เปลี่ยนสีขอบ */
#app.gtheme .gpic{border:var(--g-edge) solid var(--g-line);border-radius:14px;background:#fff;
  transition:transform .16s var(--g-ease),box-shadow .16s var(--g-ease)}
#app.gtheme .gpic.on{border-color:var(--g-line);box-shadow:var(--g-pop-sm);transform:translate(-2px,-2px)}
#app.gtheme .gnum{background:var(--g-key);color:var(--g-key-ink);border:2px solid var(--g-line)}
#app.gtheme .gslot{border:var(--g-edge) dashed var(--g-line);background:#fff;color:var(--g-ink-soft)}
#app.gtheme .gcard{transition:transform .16s var(--g-ease),box-shadow .16s var(--g-ease)}
#app.gtheme .gcard.on{border-color:var(--g-line);box-shadow:8px 8px 0 var(--g-key);transform:translate(-2px,-2px)}
#app.gtheme .gcard>footer{background:var(--g-card-2);border-top:2px solid var(--g-line)}
#app.gtheme .gzoom{background:var(--g-card);color:var(--g-ink);border:2px solid var(--g-line)}
#app.gtheme .gplace{background:var(--g-key);color:var(--g-key-ink);border:2px solid var(--g-line)}
#app.gtheme .starbtn.on{background:var(--g-key);border-color:var(--g-line);color:var(--g-key-ink)}
#app.gtheme .deckmeter{background:var(--g-card-2);border:2px solid var(--g-line)}
#app.gtheme .btabs .btab{border:2px solid var(--g-line)}
#app.gtheme .btabs .btab.on{border-color:var(--g-line)}
#app.gtheme .spincard .spinface.back{background:var(--g-ink);color:var(--g-bg);border:var(--g-edge) solid var(--g-line)}
#app.gtheme .spinchips i{background:var(--g-card-2);border:2px solid var(--g-line);color:var(--g-ink)}

/* จอฉายขึ้นทีวี — พื้นเหลืองเหมือนกัน ตัวหนังสือดำ ไม่ใช่ขาวบนดำแบบเดิม */
#app.gtheme .tvclock.warn{color:#c0392b}
#app.gtheme .tvround,#app.gtheme .tvsent,#app.gtheme .tvsub{color:var(--g-ink-soft)}
#app.gtheme .tvkick{color:var(--g-ink)}
#app.gtheme .tvname{background:var(--g-card);border:var(--g-edge) solid var(--g-line);color:var(--g-ink);
  box-shadow:var(--g-pop-sm)}
#app.gtheme .toolfab,#app.gtheme .toolone{background:var(--g-card);border:2px solid var(--g-line);color:var(--g-ink);box-shadow:var(--g-pop-sm)}
#app.gtheme .toolfab.on{background:var(--g-ink);color:var(--g-bg)}
#app.gtheme .tooli{background:var(--g-card-2);color:var(--g-ink)}
#app.gtheme .toolnum{background:var(--g-ink);color:var(--g-bg)}
#app.gtheme .quitfab{background:var(--g-card);border:2px solid var(--g-line);color:var(--g-ink-soft);box-shadow:var(--g-pop-sm)}
#app.gtheme .quitfab:hover{color:var(--g-ink)}
#app.gtheme .tvexit,#app.gtheme .soundfab{background:var(--g-card);border:var(--g-edge) solid var(--g-line);
  color:var(--g-ink);box-shadow:var(--g-pop-sm)}

/* หัวข้อตัวโต — จอนี้คนทั้งวงมองพร้อมกัน ตัวหนังสือต้องใหญ่กว่าหน้าทำงาน */
#app.gtheme .head h2{font-size:clamp(34px,5vw,46px);font-weight:700;line-height:1.08}
#app.gtheme .opshead{font-size:21px;font-weight:600}
#app.gtheme .kicker{font-weight:500;letter-spacing:.14em}

/*
 * จังหวะเด้ง — ใช้เฉพาะตอนของโผล่มาใหม่ ไม่ใช่เด้งตลอดเวลาจนลายตา
 * ปิดทั้งหมดให้คนที่ตั้งเครื่องว่าไม่เอาอนิเมชัน
 */
@keyframes gpop{0%{transform:scale(.86);opacity:0}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
#app.gtheme .gcode>b,#app.gtheme .spycount b,#app.gtheme .gsentbox,
#app.gtheme .spyenv .envletter{animation:gpop .42s var(--g-ease) both}
#app.gtheme .gamecard{transition:transform .18s var(--g-ease),box-shadow .18s var(--g-ease)}

/*
 * แต่ละเกมมีสีของตัวเองตั้งแต่หน้าเลือกเกม ไม่ใช่การ์ดขาวเหมือนกันหมด
 * เอียงคนละทางนิดเดียวให้ดูเหมือนสติกเกอร์สองใบที่แปะทับกัน
 */
#app.gtheme .gamecard[data-game="idea"]{background:#ff9c4d;--gc-bg:#ff9c4d;transform:rotate(-1deg)}
#app.gtheme .gamecard[data-game="spy"]{background:#2d6cff;--gc-bg:#2d6cff;color:#fffdf5;transform:rotate(.8deg)}
#app.gtheme .gamecard[data-game="spy"] .gcmain b,
#app.gtheme .gamecard[data-game="spy"] .gcmain p,
#app.gtheme .gamecard[data-game="spy"] .gcgo{color:#fffdf5}
#app.gtheme .gamecard[data-game="spy"] .gcfacts span{background:#fffdf5;color:#15110a}
#app.gtheme .gamecard[data-game="spy"] .btn{background:#ffd93d;color:#15110a}
#app.gtheme .gamecard[data-game="idea"] .gcgo{color:#15110a}

/*
 * สีประจำเกม · ทุกใบต้องแยกออกจากกันได้ตั้งแต่กวาดตาครั้งแรก
 * ใบพื้นเข้มกลับสีตัวหนังสือเป็นครีม และกลับสีป้ายกับปุ่มตาม ไม่งั้นอ่านไม่ออก
 */
#app.gtheme .gamecard[data-game="hook"]{background:#ff4d8d;--gc-bg:#ff4d8d;color:#fffdf5;transform:rotate(-.6deg)}
#app.gtheme .gamecard[data-game="cards"]{background:#3ec98b;--gc-bg:#3ec98b;transform:rotate(.7deg)}
#app.gtheme .gamecard[data-game="worst"]{background:#15110a;--gc-bg:#15110a;color:#fffdf5;transform:rotate(-.9deg)}
#app.gtheme .gamecard[data-game="comment"]{background:#7b5cff;--gc-bg:#7b5cff;color:#fffdf5;transform:rotate(.5deg)}
#app.gtheme .gamecard[data-game="hook"] .gcmain b,#app.gtheme .gamecard[data-game="hook"] .gcmain p,
#app.gtheme .gamecard[data-game="hook"] .gcgo,
#app.gtheme .gamecard[data-game="worst"] .gcmain b,#app.gtheme .gamecard[data-game="worst"] .gcmain p,
#app.gtheme .gamecard[data-game="worst"] .gcgo,
#app.gtheme .gamecard[data-game="comment"] .gcmain b,#app.gtheme .gamecard[data-game="comment"] .gcmain p,
#app.gtheme .gamecard[data-game="comment"] .gcgo{color:#fffdf5}
#app.gtheme .gamecard[data-game="cards"] .gcgo{color:#15110a}
#app.gtheme .gamecard[data-game="hook"] .gcfacts span,
#app.gtheme .gamecard[data-game="worst"] .gcfacts span,
#app.gtheme .gamecard[data-game="comment"] .gcfacts span{background:#fffdf5;color:#15110a}
#app.gtheme .gamecard[data-game="hook"] .btn,
#app.gtheme .gamecard[data-game="worst"] .btn,
#app.gtheme .gamecard[data-game="comment"] .btn{background:#ffd93d;color:#15110a}

/*
 * ตัวแทนของเกม · วางมุมบนขวาและเอียงนิดหน่อยให้เข้ากับการ์ดที่แปะเอียง ๆ
 * เว้นที่ให้มันด้วยการดันหัวเรื่องกับคำอธิบายเข้ามา ไม่ใช่ปล่อยให้ตัวหนังสือวิ่งทับ
 */
/* รูเจาะในตัวแทนเกมต้องเป็นสีพื้นของการ์ดใบนั้น ไม่งั้นบนการ์ดพื้นเข้มมันจะกลืนหายไปทั้งก้อน */
.gamecard{--gc-bg:var(--panel)}
.gcmascot{position:absolute;right:14px;top:12px;width:66px;height:66px;pointer-events:none;
  transform:rotate(-6deg);opacity:.92}
.gcmascot svg{width:100%;height:100%;display:block}
.gamecard{position:relative}
.gamecard .gcmain>b,.gamecard .gcmain>p{padding-right:76px}
@media (max-width:520px){
  .gcmascot{width:52px;height:52px;right:10px;top:10px}
  .gamecard .gcmain>b,.gamecard .gcmain>p{padding-right:60px}
}
#app.gtheme .gamecard.tap:hover{transform:translate(-3px,-3px) rotate(0deg);box-shadow:9px 9px 0 var(--g-line)}
@media (prefers-reduced-motion:reduce){
  #app.gtheme *{animation:none!important}
  #app.gtheme .btn,#app.gtheme .gpic,#app.gtheme .gcard,#app.gtheme .gamecard{transition:none}
}

/* ---- AI ถามกลับตอนกะราคาพร็อพ ---- */
.priceask .askbox{width:min(520px,100%);padding:22px 22px 18px;background:var(--panel);color:var(--text)}
.askstep{display:block;font-size:11.5px;letter-spacing:.05em;color:var(--muted);margin-bottom:8px}
.askname{display:block;font-size:19px;margin-bottom:6px}
.askq{margin:0 0 14px;font-size:15px;line-height:1.7;color:var(--text)}
.askrows{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.askpick{display:flex;align-items:center;gap:12px;justify-content:space-between;width:100%;text-align:left;padding:12px 14px}
.askpick i{font-style:normal;font-weight:600;color:var(--accent);white-space:nowrap}
.askpick span{min-width:0}

/* ---- หน้าส่งลูกค้า: รายการกองเรียงตามวันถ่าย ---- */
.sendlist{margin-bottom:18px}

/*
 * บอร์ดสี่ช่องของมุมมองตามสถานะ · ยังไม่ส่ง → ส่งแล้ว → มีตอบกลับ → ผ่านแล้ว
 *
 * ช่องว่างไม่ถูกซ่อน เพราะช่องว่างคือคำตอบว่าไม่มีอะไรค้างตรงนั้น
 * และตำแหน่งของทุกช่องคงที่ทุกครั้งที่เปิด คนจำได้ว่าต้องมองตรงไหน
 */
.sendboard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
.sendcol{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px;
  border:1px solid var(--line);border-radius:14px;background:var(--soft)}
/* ช่องที่มีของค้างอยู่ที่เรา ต้องสะดุดตากว่าช่องอื่น */
.sendcol.bad.has{border-color:var(--danger);background:var(--danger-soft,#fdecec)}
.sendcol.ok.has{border-color:var(--ok)}
.sendcolhead{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:700}
.sendcolhint{margin:0;font-size:11.5px;line-height:1.45;color:var(--muted)}
.sendcol .rows{display:flex;flex-direction:column;gap:8px;margin:0}
/* ในช่องแคบ ๆ ชื่อกองต้องได้ทั้งบรรทัด ปุ่มลงไปอยู่แถวล่าง */
.sendcol .sendrow{flex-wrap:wrap;gap:6px;padding:10px 12px}
.sendcol .sendrow .rowmain{flex:1 1 100%;min-width:0}
.sendcol .sendrow .btn{flex:0 0 auto}
.sendcolnone{margin:0;padding:16px 0;text-align:center;font-size:12px;color:var(--muted)}
/* กองที่กดกางจากบอร์ด · กางใต้บอร์ดเต็มความกว้าง ชื่อคอนเทนต์จะได้ไม่ถูกบีบจนอ่านไม่ออก */
.sendopenwide{margin-top:14px;padding:14px;border:1px solid var(--accent);border-radius:14px;background:var(--panel)}
.sendopenhead{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14px}
.sendopenhead b{flex:1}
.sendcol .sendbox.open .sendrow{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
@media (max-width:1180px){.sendboard{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.sendboard{grid-template-columns:1fr}}

.sendhead{display:flex;align-items:center;gap:8px}
.sendhead i{font-style:normal;font-size:12px;font-weight:600;color:var(--muted);
  background:var(--panel-2);border-radius:99px;padding:1px 8px}
.sendhead.warn{color:var(--danger)}
.sendhead.warn i{background:var(--danger-soft,#fdecec);color:var(--danger)}
.sendrow.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.sendrow .tag.wait{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}
.sendrow .tag.ok{border-color:var(--ok);color:var(--ok)}
.sendrow .tag.bad{border-color:var(--danger);color:var(--danger)}
.sendrow .tag.none{border-color:var(--line);color:var(--muted)}
/* ตัวเลขบอกว่าคอนเทนต์ในกองนี้ค้างอยู่ขั้นไหนบ้าง อ่านได้ตั้งแต่หน้ารายการ ไม่ต้องกดเข้าไปดู */
.sendbits{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.sendbits i{font-style:normal;font-size:11px;padding:2px 8px;border-radius:99px;
  background:var(--line-soft);color:var(--muted)}
/* กองที่ถ่ายไปแล้ว พับไว้ท้ายหน้า ยังเปิดดูได้เผื่อลูกค้าตอบกลับมาทีหลัง */
.senddone{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.senddone summary{cursor:pointer;font-size:13.5px;font-weight:650;color:var(--muted);padding:4px 0}
.senddone summary:hover{color:var(--text)}
.senddone .rows{margin-top:10px;opacity:.8}
.sendhead em{font-style:normal;font-size:12px;font-weight:400;color:var(--muted);margin-left:8px}

/* ---- หน้าโปรเจ็ค: แบ่งกลุ่มตามวันถ่าย สีกรอบไล่ตามความด่วน ---- */
.lanehead{display:flex;align-items:center;gap:8px}
.lanehead::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--lane,var(--line))}
.lanehead i{font-style:normal;font-size:12px;font-weight:600;color:var(--muted);
  background:var(--panel-2);border-radius:99px;padding:1px 8px}
.lanehead.lane-late{--lane:var(--danger);color:var(--danger)}
/* กองที่ลูกค้า HOLD ไว้ — แยกกลุ่มของตัวเอง ไม่ปนกับกองที่ยังไม่นัดวัน */
.lanehead.lane-hold{--lane:var(--warn);color:var(--warn)}
.projrow.lane-hold{border-left-color:var(--warn)}
.lanehead.lane-d3{--lane:#e2762b}
.lanehead.lane-d5{--lane:#d9a72b}
.lanehead.lane-d7{--lane:#2f9e6b}
.lanehead.lane-far,.lanehead.lane-none{--lane:#9aa3b2}

/* กรอบของแถวบอกความด่วนเหมือนกัน ขอบซ้ายหนาเพื่อให้กวาดตาเจอเร็ว */
.projrow[class*="lane-"]{border-left-width:4px;border-left-style:solid}
.projrow.lane-late{border-left-color:var(--danger)}
.projrow.lane-d3{border-left-color:#e2762b}
.projrow.lane-d5{border-left-color:#d9a72b}
.projrow.lane-d7{border-left-color:#2f9e6b}
.projrow.lane-far,.projrow.lane-none{border-left-color:#c9cedb}
:root[data-theme="dark"] .projrow.lane-far,:root[data-theme="dark"] .projrow.lane-none{border-left-color:#3a4254}

/* ---- หลอดความคืบหน้างานเขียนบนหน้าโปรเจ็ค ---- */
.writebar{margin:0 0 18px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.wbtop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:9px}
.wbtop b{font-size:15px}
.wbtop span{font-size:12.5px;color:var(--muted)}
.wbtrack{height:10px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.wbtrack i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .3s ease}
.writebar.full .wbtrack i{background:var(--ok)}
.wbfoot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--muted)}
.qdot{font-style:normal;font-size:11.5px;font-weight:700;background:var(--accent);color:var(--accent-ink);border-radius:99px;padding:0 7px;margin-left:5px}

/* ---- หน้าจัดลำดับ Content ---- */
.orderrow.fresh{border-left:3px solid var(--accent);background:var(--accent-soft)}
.orderrow .ordername{flex:1 1 170px;min-width:140px;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:inherit}
.orderrow .ordername b{display:block;font-size:15px}
.orderrow .ordername small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.sendall{margin-top:16px}
.row.dim{opacity:.62}
.tag.queue{border-color:var(--accent);color:var(--accent)}
@media (prefers-reduced-motion:reduce){.wbtrack i{transition:none}}

/* ---- บรีฟของโปรเจ็ค: ข้อความมีรูปแบบ ลิงก์แบบสั้น และไฟล์แนบ ---- */
.briefdoc{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.briefbody{font-size:15.5px;line-height:1.8;white-space:pre-wrap;word-break:break-word}
/*
 * บรีฟย่อ — เหลือความสูงพอเห็นหัวเรื่อง แล้วไล่สีจาง ๆ ที่ขอบล่างให้รู้ว่ายังมีต่อ
 * ไม่ตัดทิ้งด้วยการซ่อน เพราะคนต้องเห็นว่ามีอะไรอยู่ข้างใต้ถึงจะอยากกดกาง
 */
.briefdoc.fold .briefbody{max-height:110px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.briefmore{display:block;width:100%;margin-top:6px;padding:7px 0;border:1px dashed var(--line);
  border-radius:9px;background:none;color:var(--accent);font-size:13px;font-weight:600;cursor:pointer}
.briefmore:hover{border-color:var(--accent);background:var(--accent-soft)}
.briefdoc .briefhead{display:flex;align-items:center;gap:10px}
.briefdoc .briefhead b{flex:1}

/*
 * มุมมองอ่านบรีฟไปคิดไอเดียไป — บรีฟอยู่ซ้ายและค้างอยู่กับที่ตอนเลื่อนหน้า
 * จอแคบกว่านี้สองคอลัมน์จะแคบจนอ่านไม่ไหว จึงวางซ้อนกันเหมือนเดิม
 */

}

/* ชุดปุ่มเปลี่ยนมุมมอง — กรอบของตัวเอง มีไอคอนบอกหน้าตาที่จะได้ */
.headtools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.viewpick{display:inline-flex;align-items:center;gap:3px;padding:4px 4px 4px 10px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.viewlab{font-size:11.5px;letter-spacing:.04em;color:var(--muted);font-weight:650;margin-right:4px}
.viewpick .vbtn{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:9px;
  font-size:12.5px;font-weight:600;color:var(--muted);background:none;border:0;cursor:pointer}
.viewpick .vbtn:hover{background:var(--line-soft);color:var(--text)}
.viewpick .vbtn.on{background:var(--accent);color:var(--accent-ink,#fff)}
.viewpick .vbtn svg{flex:none}
@media (max-width:820px){
  .viewpick{width:100%;justify-content:space-between}
  .viewpick .vbtn span{display:none}
  .viewpick .vbtn.on span{display:inline}
}
.briefbody .refpic{max-width:100%;border-radius:10px;margin:8px 0;display:block}
/*
 * ลิงก์ในเนื้อความ — ต้องดูออกว่ากดได้ และนิ้วต้องกดโดนบนมือถือ
 * จึงขีดเส้นใต้ตลอดเวลา มีลูกศรเล็ก ๆ ปิดท้าย และมีพื้นที่รอบตัวอักษรเพิ่มอีกนิด
 */
.reflink{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;padding:2px 2px;border-radius:4px;word-break:break-all}
.reflink:hover{background:var(--accent-soft);text-decoration-thickness:2px}
.reflink .linkgo{font-style:normal;font-size:.85em;margin-left:2px;opacity:.75}
/* บนใบกระดาษสีต้องตายตัว และไม่ต้องมีลูกศรออกนอกเว็บ เพราะกระดาษกดไม่ได้อยู่แล้ว */
.plandoc .reflink{color:var(--pl);font-weight:600}
@media print{ .reflink .linkgo{display:none} }
/*
 * แถบลิงก์รวมบนหัวกล่องบรีฟและไดเร็กชั่น
 * เป็นที่กดที่แน่นอนบนไอโฟนไอแพด เพราะกดลิงก์ในเนื้อความระหว่างแก้ข้อความไม่ได้
 */
.linkstrip{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.linkchip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:6px 11px;border-radius:99px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--text);font-size:12.5px;font-weight:550;
  text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkchip:hover{border-color:var(--accent);color:var(--accent)}
.linkchip i{font-style:normal;color:var(--muted);flex:none}
.linkstrip .btn.small{margin-top:0}
@media (max-width:640px){.linkchip{padding:9px 13px;font-size:13px}}
.filerow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
/* ช่องแนบไฟล์บรีฟตอนสร้างโปรเจ็ค */
.briefpick2{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.briefpick2 label.btn{cursor:pointer}
.briefpick2 .filechip2 b{font-weight:600;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filechip2{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);
  border-radius:99px;background:var(--panel-2);font-size:13px}
.filechip2 a{color:var(--text);text-decoration:none;font-weight:550;max-width:220px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.filechip2 a:hover{color:var(--accent)}
.filechip2 small{color:var(--muted);font-size:11.5px}
.filechip2 .btn{padding:0 6px;line-height:1.4}
.filepick{cursor:pointer}

/* ---- หน้าจัดลำดับ Content: เวลา สถานที่ และเวอร์ชันพิมพ์ ---- */
.orderrow .oplace{min-width:150px;flex:0 1 190px}
/*
 * ช่องเวลากับช่องสถานที่ต้องสูงเท่ากันเป๊ะ ไม่งั้นทั้งคู่เยื้องกันเพราะแถวจัดกึ่งกลาง
 * ช่องเวลาของเบราว์เซอร์สูงกว่าช่องข้อความอยู่ไม่กี่พิกเซล จึงล็อกความสูงให้เท่ากันตรงนี้
 */
.orderrow .otime,.orderrow .oplace{margin-bottom:0;align-self:center}
.orderrow .otime>span,.orderrow .oplace>span{height:18px;line-height:18px;margin-bottom:5px;white-space:nowrap}
.orderrow .otime input,.orderrow .oplace input{width:100%;height:42px;padding:9px 12px;line-height:1.3}
.orderrow.draft{opacity:.72;border-style:dashed}
.oprint{display:none}
@media (max-width:820px){
  .orderrow{flex-wrap:wrap;row-gap:8px}
  .orderrow .ordername{flex:1 1 100%;order:3}
  .orderrow .otime,.orderrow .oplace{flex:1 1 45%;order:4}
}
@media print{
  .orderwrap .noprint{display:none !important}
  .orderwrap .orderrow{break-inside:avoid;border:0;border-bottom:1px solid #ddd;border-radius:0;background:none;opacity:1}
  .orderwrap .orderrow .omove,.orderwrap .orderrow .ogrip{display:none}
  .orderwrap .oprint{display:inline;font-size:13px;color:#333;white-space:nowrap}
  .orderwrap .orderrow .tag{border-color:#bbb;color:#444}
}

/* ---- ใบเรื่องย่อและแผนถ่าย: ใบเดียวกันทั้งหน้าส่งลูกค้าและตอนพิมพ์จากหน้าจัดลำดับ ---- */
/*
 * ใบนี้ลูกค้าเป็นคนอ่าน จึงไม่ใช่เอกสารขาวดำเรียงบรรทัด
 * หัวใบมีแถบสีของแบรนด์ แต่ละคอนเทนต์เป็นการ์ดของตัวเองพร้อมเลขคิวสีเข้ม
 * เวลา สถานที่ คนเขียน และสถานะเป็นป้ายสี อ่านจบได้ด้วยการกวาดตา ไม่ต้องไล่อ่านทุกบรรทัด
 *
 * สีทุกตัวในใบนี้ฝังเป็นค่าตายตัว ไม่ได้ใช้ตัวแปรธีม เพราะใบนี้เป็นกระดาษขาวเสมอ
 * ทั้งในโหมดมืดและตอนพิมพ์ ถ้าใช้ตัวแปรธีมสีจะพลิกจนอ่านไม่ออกบนพื้นขาว
 */
.plandoc{--pl:#3b3f8f;padding:0;overflow:hidden;border-radius:14px;border:1px solid #dfe2ee;
  print-color-adjust:exact;-webkit-print-color-adjust:exact}
.plandoc *{print-color-adjust:exact;-webkit-print-color-adjust:exact}

/*
 * หัวกระดาษ — บางและแน่น เพราะกระดาษทุกแผ่นต้องเหลือที่ให้เนื้องานมากที่สุด
 * ชื่อกองอยู่ซ้าย ชนิดของหน้าอยู่ขวา คนเปิดเจอกลางกองรู้ทันทีว่าถืออะไรอยู่
 */
.phead{display:flex;align-items:flex-end;gap:14px;background:var(--pl);color:var(--pl-ink);
  padding:11px 14px;border-radius:8px;margin-bottom:11px}
.pht{flex:1;min-width:0}
.pht b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--pl-ink)}
.pht small{display:block;margin-top:2px;font-size:11.5px;color:var(--pl-ink);opacity:.78}
.phr{text-align:right;font-size:10.5px;color:var(--pl-ink);opacity:.78;white-space:nowrap}
.phr b{display:block;font-size:13px;color:var(--pl-ink);opacity:1}
.phr i{font-style:normal}
.plandoc .planlogo{color:var(--pl-ink);margin-bottom:5px;line-height:0}

/* แต่ละวันขึ้นกระดาษแผ่นใหม่ ทั้งหน้าแผนถ่ายและหัวข้อรายละเอียด */
.ppage{padding:16px 20px 18px;background:#fff}
.ppage + .ppage{border-top:1px dashed #d8dbe6}

/* ---------- ตารางแผนถ่ายทั้งวัน ---------- */
.ptab{width:100%;border-collapse:collapse;font-size:11.5px}
.ptab th{text-align:left;font-size:9.5px;letter-spacing:.06em;color:var(--pl-text);font-weight:700;
  padding:5px 6px;background:var(--pl-soft);border-bottom:1px solid var(--pl-line)}
.ptab thead tr th:first-child{border-radius:6px 0 0 6px}
.ptab thead tr th:last-child{border-radius:0 6px 6px 0}
.ptab td{padding:6px;border-bottom:1px solid #eceef5;vertical-align:top;line-height:1.5;color:#4a5068}
.ptab .pno{width:22px;color:#7b8196;font-variant-numeric:tabular-nums}
.ptab .ptime{width:46px;font-weight:600;color:#1b2136;font-variant-numeric:tabular-nums}
.ptab .pname{font-weight:600;color:#1b2136}
.ptab .pname i{display:block;font-style:normal;font-weight:400;font-size:10.5px;color:#7b8196}
/*
 * ชื่อคลาสนี้เคยชนกับการ์ดโลเคชั่นด้านล่างที่เป็น display:flex
 * ช่องสถานที่ในตารางจึงกลายเป็นกล่อง flex กว้าง 38px ชื่อวัดเลยตกบรรทัดทีละคำ
 * แยกชื่อเป็น pwhere ไปเลย จะได้ไม่ชนกันอีก
 */
.ptab .pwhere{width:27%}
.ptab .pcast{width:20%}
/* ห้ามตัดคำกลางคัน ชื่อโลเคชั่นภาษาไทยจะกลายเป็นตัวละบรรทัด ปล่อยให้เบราว์เซอร์ตัดตามคำเอง */
/* ภาษาไทยไม่มีช่องว่างระหว่างคำ ถ้าหักคำได้ทุกจุดชื่อสถานที่จะกลายเป็นบรรทัดละสองสามตัวอักษร
   จึงให้หักเฉพาะตอนที่ยาวเกินช่องจริง ๆ และเพิ่มความสูงบรรทัดให้อ่านง่ายขึ้น */
.ptab .pwhere,.ptab .pcast,.ptab .pname{overflow-wrap:break-word;word-break:normal;line-break:normal;hyphens:none}
.ptab .pwhere{line-height:1.55}
.ptab .pprop{width:50px;text-align:right;font-variant-numeric:tabular-nums}
.pwait{display:inline-block;margin-left:5px;padding:0 6px;border-radius:99px;
  background:#fdf3e7;color:#b86a18;font-size:9.5px;font-weight:600;vertical-align:1px}

/* แถบย้ายโลเคชั่นกับพัก — อยู่ในตารางเป็นแถวเต็มความกว้าง ไม่แยกออกไปเป็นหน้าของตัวเอง */
.ptab .pbar td{padding:0;border-bottom:0}
.pbarin{display:flex;align-items:center;gap:8px;margin:4px 0;padding:4px 9px;border-radius:7px;font-size:11px}
.pbarin.move{background:var(--pl-soft);border:1px solid var(--pl-line)}
.pbarin.move b{color:var(--pl-text)}
.pbarin.rest{background:#fdf3e2;border:1px solid #f0d9ad}
.pbarin b{font-weight:600;font-size:11.5px;color:#1b2136}
.pbarin i{font-style:normal;color:#7b8196;font-size:10.5px}
.pbm{flex:none;padding:1px 7px;border-radius:99px;font-size:9.5px;font-weight:700;color:#fff}
.pbm.move{color:var(--pl-ink)}
.pbm.move{background:var(--pl)}
.pbm.rest{background:#8a5f10}
/* แถบเดียวกันตอนอยู่ในส่วนรายละเอียด ต้องเกาะกับคอนเทนต์ที่มันคั่นเสมอ */
.pbarin.solo{margin:9px 0 7px;break-after:avoid;break-inside:avoid}

/* ---------- กล่องสรุปท้ายหน้าแผนถ่าย ---------- */
.psum{display:flex;gap:9px;margin-top:11px;break-inside:avoid}
.psbox{flex:1;border:1px solid var(--pl-line);border-radius:8px;padding:8px 10px;background:var(--pl-soft)}
.psbox h3{margin:0 0 5px;font-size:9.5px;letter-spacing:.06em;color:var(--pl-text);font-weight:700}
.psbox p{margin:0;font-size:11px;line-height:1.65;color:#4a5068}
.psbox p b{color:#1b2136;font-weight:600}

/* ---------- รายละเอียดรายคอนเทนต์ ---------- */
.pdayhead{display:inline-block;margin:12px 0 8px;padding:3px 11px;border-radius:99px;
  background:var(--pl);color:var(--pl-ink);font-size:10px;letter-spacing:.06em;font-weight:700}
.pdayhead:first-child{margin-top:2px}
.pitem{border:1px solid #dfe2ec;border-left:3px solid var(--pl);border-radius:9px;
  padding:9px 11px 10px;margin-bottom:8px;break-inside:avoid}
.pihead{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pino{flex:none;min-width:19px;height:19px;padding:0 5px;border-radius:5px;background:var(--pl);color:var(--pl-ink);
  font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.pitime{font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px;color:#1b2136}
.pihead b{flex:1;min-width:120px;font-size:13.5px;font-weight:650;line-height:1.35;color:#1a1a1a}
.piwhere{font-size:10.5px;color:#7b8196;text-align:right}
.piwhere i{display:block;font-style:normal}
/*
 * หน้ากล้อง ชุด ตัวประกอบ คนเขียน ของที่ลูกค้าเตรียม
 * ห้าอย่างนี้คือสิ่งที่คนถือใบต้องเช็คก่อนกล้องเดิน จึงทำเป็นการ์ดเรียงกัน ไม่ใช่บรรทัดตัวเล็ก ๆ
 */
.pifacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:6px;margin:9px 0 0}
.pifact{display:block;border:1px solid var(--pl-line);border-left:2px solid var(--pl);border-radius:7px;
  padding:6px 9px;background:var(--pl-soft);break-inside:avoid}
.pifact i{display:block;font-style:normal;color:var(--pl-text);font-size:9px;letter-spacing:.06em;font-weight:700;margin-bottom:2px}
.pifact span{display:block;color:#1b2136;font-size:12px;font-weight:600;line-height:1.45;overflow-wrap:break-word}
/*
 * เรื่องย่อคือส่วนที่คนหยิบใบขึ้นมาอ่านก่อนเสมอ ต้องเด้งออกจากข้อความอื่นตั้งแต่กวาดตา
 * จึงใส่กรอบ พื้นสีอ่อน ขีดสีที่ขอบซ้าย และใช้ตัวหนา
 */
.pistory{margin:8px 0 0;padding:7px 10px;border:1px solid var(--pl-line);border-left:3px solid var(--pl);
  border-radius:7px;background:var(--pl-soft);font-size:11.5px;line-height:1.7;color:#1b2136;font-weight:600}
.pistory i{font-style:normal;color:var(--pl-text);font-weight:700;font-size:10px;letter-spacing:.05em;margin-right:6px}
/* รายการพร็อพ บรรทัดละชิ้น · บนกระดาษเรียงสองคอลัมน์เพื่อไม่ให้กินที่จนต้องย่อทั้งใบ */
.piprops{margin:7px 0 0;padding-top:6px;border-top:1px solid #eceef5;font-size:11px;line-height:1.6}
.propline{margin:3px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px 18px}
.propline li{color:#4a5068;padding:1px 0;border-bottom:1px dotted #e6e8f0}
.propclient{margin:5px 0 0;color:#4a5068}
.propclient i{font-style:normal;font-weight:600;color:var(--pl-text);margin-right:5px}
.onscreen .propline li{color:var(--text);border-bottom-color:var(--line-soft)}
.onscreen .propclient{color:var(--text)}
.piprops i{font-style:normal;color:var(--pl-text);font-weight:600;font-size:10px;letter-spacing:.05em;margin-right:6px}
.piprops span{color:#4a5068}
.piprops b{color:#1b2136;font-weight:600;font-variant-numeric:tabular-nums}
/* Outline สี่ช่องในบล็อกรายละเอียด — สองคอลัมน์ ตัวหนังสือเท่ากันทุกหน้า ไม่ย่อ */
/*
 * Outline ในใบ Shotlist เรียงลงเป็นคอลัมน์เดียวตามลำดับที่คนเขียน Hook → Conflict → Process → END
 * ของเดิมเป็นสองคอลัมน์ ท่อนสั้นกับท่อนยาวเลยสูงไม่เท่ากัน END ถูกดันไปอยู่ใต้ Hook
 * กลายเป็นช่องว่างใหญ่กลางใบ และคนอ่านไล่ลำดับฉากผิด
 */
.pitem .planout{margin:7px 0 0;padding-top:6px;border-top:1px solid #eceef5;
  display:grid;grid-template-columns:1fr;gap:7px}
.pitem .planoutlab{grid-column:1/-1;font-size:9.5px;letter-spacing:.06em;color:var(--pl-text);font-weight:600}
.pitem .planpart{display:block}
.pitem .planpart i{display:block;width:auto;font-size:9.5px;letter-spacing:.06em;color:var(--pl-text);
  font-weight:600;margin-bottom:1px}
.pitem .planpart span{font-size:11px;line-height:1.55;color:#4a5068}
.pitem .planpart.full{grid-column:1/-1}
.pitem .planpart.full .scripted{font-size:11.5px;line-height:1.7;color:#4a5068}
@media (max-width:640px){ .pitem .planout{grid-template-columns:1fr} }

/* ---- Outline ที่ส่งไปพร้อมเรื่องย่อ ----
 * อยู่ใต้เรื่องย่อในการ์ดเดียวกัน ลูกค้าจึงเห็นทั้งสองแบบโดยไม่ต้องเปิดใบที่สอง
 * ใช้ได้ทั้งบนใบกระดาษ (สีตายตัว) และบนหน้าลิงก์พรีวิว (สีตามธีม)
 */
.planout{margin-top:11px;padding-top:10px;border-top:1px dashed var(--line);
  display:flex;flex-direction:column;gap:7px;break-inside:avoid}
/*
 * บทเต็มยาวกว่าหนึ่งหน้ากระดาษได้เสมอ ห้ามสั่งห้ามตัด ไม่งั้นมันกระโดดไปทั้งก้อน
 * แล้วหน้าก่อนหน้าจะเหลือแค่หัวเรื่องกับเรื่องย่อ ที่เหลือว่างทั้งแผ่น
 */
.tallitem .planout.full{break-inside:auto}
.planoutlab{font-size:11px;letter-spacing:.07em;font-weight:700;color:var(--muted)}
.planpart{display:flex;gap:10px;align-items:baseline}
.planpart i{flex:none;width:66px;font-style:normal;font-size:11.5px;font-weight:700;color:var(--muted)}
.planpart span{flex:1;min-width:0;white-space:pre-wrap;font-size:14.5px;line-height:1.7}
.planpart.full{display:block}
.planpart.full .scripted{margin:0;font-size:14.5px;line-height:1.75}
@media (max-width:640px){
  .planpart{display:block}
  .planpart i{display:block;width:auto;margin-bottom:2px}
}

/* บนใบกระดาษสีต้องตายตัว เพราะใบนี้เป็นพื้นขาวเสมอทั้งในโหมดมืดและตอนพิมพ์ */
.plandoc .planout{border-top:1px solid #e9eaf1}
.plandoc .planoutlab{color:var(--pl-text)}
.plandoc .planpart i{color:#6a6f86}
.plandoc .planpart span{color:#2a2c33;font-size:13px}
.plandoc .planpart.full .scripted{color:#2a2c33;font-size:13px}
.plandoc .scwho{color:var(--pl-text)}
.plandoc .scline{gap:1px 9px;margin:4px 0}
.plandoc .scrow{margin:3px 0}
.plandoc .scripted{max-width:none;line-height:1.7}
.plandoc .scmark{background:#fdf3e7;color:#8a5b14}
.plandoc .scscene{border-bottom-color:#e0e2ea;color:#1a1a1a}

/*
 * แนวนอนมีที่กว้างขึ้น รายละเอียดคอนเทนต์จึงเรียงสองชิ้นต่อแถว
 * ถ้าปล่อยให้กว้างเต็มหน้ากระดาษแนวนอน บรรทัดจะยาวจนตาหาบรรทัดถัดไปไม่เจอ
 */
.plandoc.land .pdetail{column-count:2;column-gap:16px}
.plandoc.land .pitem,.plandoc.land .pbarin.solo,.plandoc.land .pdayhead{break-inside:avoid}
.plandoc.land .phead{column-span:all}

/* ---------- ชอปปิงลิสต์และภาพรวมของทีมพร็อพ ---------- */
/* สีบอกประเภทของ — เดินซื้อของแล้วกวาดตาเห็นทันทีว่าชิ้นไหนต้องซื้อจริง */
.prow.k-buy{border-left:4px solid #d97706}
.prow.k-have{border-left:4px solid #16a34a}
.prow.k-client,.prow.k-onsite{border-left:4px solid #ca8a04}
.prow .ptwin{font-style:normal;font-size:10.5px;color:#999}
.pshare{margin:2px 0 6px 26px;font-size:10.5px;color:#777;line-height:1.5}
/* หัวคอนเทนต์ในใบของทีมพร็อพ — กรอบชัด มีเลขลำดับถ่ายนำหน้า */
.csheethead{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:8px 11px;
  border:1px solid #d7dae4;border-left:4px solid #333;border-radius:8px;background:#f3f4f8}
.cshno{flex:none;min-width:22px;height:22px;padding:0 6px;border-radius:6px;background:#333;color:#fff;
  font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.csheethead b{flex:1;min-width:0;font-size:14.5px;line-height:1.3;color:#1a1a1a}
.cshwho{flex:none;font-size:11px;color:#666;text-align:right}
/* หัวข้อย่อยของแต่ละประเภท — บอกด้วยคำ ไม่ต้องจำสี */
.pkindhead{margin:9px 0 4px;font-size:11.5px;font-weight:700;color:#444;
  display:flex;align-items:baseline;gap:7px}
.pkindhead i{font-style:normal;font-weight:400;font-size:10.5px;color:#888}
.pkindhead.k-buy{color:#b45309}
.pkindhead.k-have{color:#15803d}
.pkindhead.k-client,.pkindhead.k-onsite{color:#a16207}
.sheetnote b.k-buy{color:#b45309}
.qcwho{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}

/* ================== หัวเรื่องของคอนเทนต์ที่ทีมพร็อพกำลังทำ ==================
 * อยู่เหนือแถบ 5 ขั้น จึงติดตาตลอดทุกขั้น ไม่ใช่เห็นแค่ตอนตรวจบท
 * ปุ่มลัดเป็นแถวเดียวเลื่อนซ้ายขวา เพราะกองหนึ่งมีได้สิบกว่าคอนเทนต์ ขึ้นหลายบรรทัดจะกินจอ
 */
.chead{margin:0 0 14px}
/* กรอบเด่น ๆ เพราะสองอย่างนี้คือสิ่งที่คนทำพร็อพต้องรู้ตลอดเวลา — ทำอันไหนอยู่ และถามใครได้ */
.cheadcard{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:14px;
  background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent)}
.cheadmain{flex:1;min-width:0}
.cheadmain h2{margin:0;font-size:26px;font-weight:700;line-height:1.25;
  overflow-wrap:break-word;word-break:normal}
.cheadwho{display:flex;align-items:center;gap:10px;margin-top:10px}
.cheadwho b{display:block;font-size:15px;font-weight:650;line-height:1.3}
.cheadwho i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:1px}
.cheadwho.none b{color:var(--muted);font-weight:600}
.cheadno{flex:none;text-align:center;padding:8px 14px;border-radius:12px;background:var(--accent-soft)}
.cheadno b{display:block;font-size:24px;font-weight:700;line-height:1.1;color:var(--accent)}
.cheadno i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px}
@media (max-width:560px){
  .cheadcard{padding:14px 16px;gap:12px}
  .cheadmain h2{font-size:21px}
  .cheadno{padding:6px 10px}
  .cheadno b{font-size:19px}
}
.cchips{display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.cchip{flex:0 0 auto;max-width:210px;text-align:left;padding:8px 12px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);color:var(--text);font:inherit}
.cchip b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cchip i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px}
.cchip:hover{border-color:var(--accent)}
.cchip.on{border-color:var(--accent);background:var(--accent-soft)}
.cchip.on b{color:var(--accent)}
.cchip.gone{opacity:.45}
@media print{.cchips{display:none}}
/* ป้ายสถานะต่อท้ายชื่อคอนเทนต์ในการ์ด Host — ต้องอ่านออกตั้งแต่กวาดตา ไม่ต้องอ่านบรรทัดรอง */
.rowflag{display:inline-block;margin-left:7px;padding:1px 8px;border-radius:99px;font-size:11px;font-weight:700;
  vertical-align:1px;white-space:nowrap}
.rowflag.fix{background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger)}
.rowflag.wait{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn)}
.rowflag.ok{background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok)}
/* โน้ตถึงทีมบนหน้าโปรเจ็ค — ต้องอ่านออกก่อนใครเพราะเป็นคำสั่งงานสั้น ๆ */
.notecard{border-left:3px solid var(--warn)}
.notewrite{margin-top:10px}
.notewrite textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel-2);font-family:inherit;font-size:14px;line-height:1.6;resize:vertical}
.noterow .main b{font-weight:600;font-size:14px;line-height:1.6;white-space:pre-wrap}
.noterow.off{opacity:.6}
.noterow.off .main b{text-decoration:line-through}
.notedone{margin-top:8px}
.notedone summary{cursor:pointer;font-size:12.5px;color:var(--muted);padding:4px 0}
/* หน้าอัพเดทงาน มุมมองจัดกลุ่ม — หนึ่งกล่องคือหนึ่งงาน ข้างในคือก้าวของมัน */
/* สองมุมมองของหน้าอัพเดทงาน — ความเคลื่อนไหว กับ สถานะทุกโปรเจ็ค (เดิมคือเมนูติดตามงาน) */
.uptabs{display:flex;gap:8px;margin:0 0 16px}
.uptabs .stab{flex:1}
.upgroups{display:flex;flex-direction:column;gap:10px}
.upgroup{padding:12px 14px}
.ughead{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--text)}
.ugmain{flex:1;min-width:0}
.ugmain b{display:block;font-size:14.5px;font-weight:600}
.ugmain small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.ugnow{flex:none;font-size:12px;font-weight:600;color:var(--accent);white-space:nowrap}
.ugmore{display:inline-block;margin-top:8px;font-size:12px}
.ugsteps{list-style:none;margin:10px 0 0;padding:0 0 0 4px;display:flex;flex-direction:column;gap:7px;
  border-left:2px solid var(--line-soft)}
.ugsteps li{display:flex;align-items:flex-start;gap:9px;padding-left:12px;position:relative}
.ugdot{position:absolute;left:-5px;top:6px;width:8px;height:8px;border-radius:99px;background:var(--line);
  border:2px solid var(--panel)}
.ugsteps li:last-child .ugdot{background:var(--accent)}
.ugtext{flex:1;min-width:0;font-size:13px;line-height:1.55}
.ugtext i{font-style:normal;color:var(--muted);font-size:12px}
.ugtext small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.ugat{flex:none;font-size:11.5px;color:var(--muted);white-space:nowrap}
@media (max-width:640px){ .ughead{flex-wrap:wrap} .ugnow{width:100%} }
/* งานที่จบแล้ว — ขีดฆ่า ทำให้จาง และยุบไว้ท้ายหน้า ไม่ให้บังงานที่ยังเดินอยู่ */
/* งานที่เพิ่งปิดไปหมาด ๆ — กรอบน้ำเงินให้รู้ว่าจบแล้ว แต่ยังอยู่ให้เห็นอีกชั่วโมงหนึ่ง */
.upgroup.justdone{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.jdbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-2px 0 10px;padding:6px 10px;
  border-radius:9px;background:var(--accent-soft)}
.jdflag{font-size:12.5px;font-weight:700;color:var(--accent)}
.jdbar i{flex:1;min-width:140px;font-style:normal;font-size:11.5px;color:var(--muted)}
/* งานที่ส่งออกไปแล้วในหน้าแรกของ Content — ยุบไว้ให้กดกางเอง หน้าตาเดียวกับกลุ่มจบแล้วในอัพเดทงาน */
.sentwork{margin-top:10px;border:1px dashed var(--line);border-radius:12px;background:var(--panel)}
.sentwork summary{cursor:pointer;padding:11px 14px;font-size:13px;color:var(--muted)}
.sentwork[open] summary{border-bottom:1px solid var(--line)}
.sentwork .rows{padding:8px}
.updone{margin-top:6px;border:1px dashed var(--line);border-radius:12px;background:var(--panel)}
.updone summary{cursor:pointer;padding:11px 14px;font-size:13px;color:var(--muted)}
.updonelist{display:flex;flex-direction:column;gap:2px;padding:0 14px 12px}
.ughead.ugdone{padding:8px 0;border-top:1px solid var(--line-soft);opacity:.65}
.ughead.ugdone .ugmain b{font-size:13.5px;font-weight:500;text-decoration:line-through}
.ugend{flex:none;font-size:11.5px;color:var(--ok);font-weight:600;white-space:nowrap}
/* แถบบอกว่าสองหน้านี้แก้ข้อมูลชุดเดียวกัน กันคนกรอกซ้ำสองที่ */
.samedata{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;padding:9px 12px;
  border:1px solid var(--accent);border-radius:10px;background:var(--accent-soft)}
.samedata span{flex:1;min-width:200px;font-size:12.5px;line-height:1.6;color:var(--text)}
.samedata .btn{flex:none}
.sheetnote b.k-have{color:#15803d}
.sheetnote b.k-client{color:#a16207}
/* ภาพรวมบทกับพร็อพ — บทฝั่งซ้าย ของฝั่งขวา อ่านคู่กันได้ในหน้าเดียว */
.allsec .allgrid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start}
.alllab{display:block;font-size:10.5px;letter-spacing:.06em;color:#777;margin-bottom:5px}
.allscript pre{margin:0;white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:12px;line-height:1.65}
.allsec{break-inside:auto}
@media (max-width:820px){ .allsec .allgrid{grid-template-columns:1fr} }

/* ---------- ส่วนที่มีเฉพาะใบที่ทีมถือเข้ากอง ---------- */
.pteamwrap{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.pblock{border:1px solid #dfe2ec;border-radius:8px;padding:9px 11px;break-inside:avoid}
.pblock h3{margin:0 0 7px;font-size:9.5px;letter-spacing:.06em;color:var(--pl-text);font-weight:700}
.pteam{display:flex;flex-wrap:wrap;gap:6px}
.pperson{border:1px solid var(--pl-line);border-radius:7px;padding:5px 9px;background:var(--pl-soft);min-width:110px}
.pperson i{display:block;font-style:normal;font-size:9.5px;color:#7b8196}
.pperson b{display:block;font-size:12px;color:#1b2136;margin-top:1px}
.pplace{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid #eceef5}
.pplace:last-child{border-bottom:0}
.pplaceno{flex:none;width:18px;height:18px;border-radius:99px;background:var(--pl);color:var(--pl-ink);
  font-size:10px;font-weight:700;line-height:18px;text-align:center}
.pplacemain{flex:1;min-width:0}
.pplacemain b{display:block;font-size:12px;color:#1b2136}
.pplacemain a{display:block;font-size:9.5px;color:var(--pl-text);word-break:break-all}
.pplacetime{display:flex;gap:14px;flex:none}
.pplacetime i{display:block;font-style:normal;font-size:9.5px;color:#7b8196}
.pplacetime b{display:block;font-size:12.5px;color:#1b2136;font-variant-numeric:tabular-nums}
.pcast .pname i{display:block;font-style:normal;font-size:10px;color:#7b8196}

/* แถบตั้งค่าใบ — อยู่เหนือใบ ไม่ติดไปกับกระดาษ */
.docopts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;
  padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel-soft,var(--panel))}
.docoptlab{font-size:11.5px;letter-spacing:.04em;color:var(--muted);font-weight:650}
.doccheck{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text);cursor:pointer}
.docopts .chip{font-size:12.5px;padding:4px 11px}
.docopthint{flex-basis:100%;font-style:normal;font-size:11.5px;color:var(--muted);line-height:1.6}
/* จุดสีเหนือใบ — กดแล้วใบข้างล่างเปลี่ยนสีทันที ไม่ต้องเข้าไปหน้าตั้งค่า */
.docdots{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.docdot{width:19px;height:19px;border-radius:99px;border:1px solid rgba(0,0,0,.18);cursor:pointer;padding:0}
.docdot:hover{transform:scale(1.12)}
.docdot.on{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent)}
.docdot:disabled{opacity:.5;cursor:default}
.printonly.peek{display:block}

/* กองที่ยังไม่มีคอนเทนต์ — ใบนี้เป็นกระดาษขาวเสมอ กล่องว่างจึงต้องไม่ใช้สีของธีมมืด */
.plandoc .empty{color:#7b8092;border-color:#dfe2ee;background:transparent}
/* จอแคบเท่านั้นที่ซ้อนกัน — ตอนพิมพ์ความกว้างกระดาษต่ำกว่า 900 แต่ยังต้องเป็นสองฝั่ง */
@media (max-width:640px){
  .ppage{padding:12px 12px 14px}
  .psum{flex-direction:column}
  /* ไม่ปล่อยให้ช่องแคบลงตามจอ ให้ตารางคงสัดส่วนไว้แล้วเลื่อนซ้ายขวาเอาแทน */
  .ptabwrap .ptab{min-width:560px}
}

/* ปุ่มเลือกสีหัวใบในหน้าตั้งค่า */
.swatchrow{display:flex;flex-wrap:wrap;gap:8px}
.swatch{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:99px;
  border:1px solid var(--line);background:var(--panel);font-size:12.5px;color:var(--text);cursor:pointer}
.swatch i{width:18px;height:18px;border-radius:99px;display:block;border:1px solid rgba(0,0,0,.12)}
.swatch:hover{border-color:var(--accent)}
.swatch.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);font-weight:650}

/*
 * บนจอให้ใบหน้าตาเหมือนกระดาษจริง ๆ — กว้างเท่า A4 และพอสลับเป็นแนวนอนก็กว้างขึ้นทันที
 * คนจึงเห็นตั้งแต่บนจอว่าพิมพ์ออกมากระดาษจะพลิกเป็นแนวนอนจริง ไม่ต้องกดพิมพ์ก่อนถึงจะรู้
 */
.docpage{max-width:1260px}
.plandoc{width:210mm;max-width:100%;margin:0 auto;box-shadow:0 10px 30px rgba(20,21,40,.10)}
.plandoc.land{width:297mm}

/* ใบพิมพ์ของหน้าจัดลำดับ — บนจอไม่ต้องโชว์ซ้ำกับแถวที่กำลังจัดอยู่ */
.printonly{display:none}
/* ตอนวัดความสูงก่อนพิมพ์ ต้องให้ใบมีตัวตนจริง แต่ไม่ให้คนเห็นบนจอ */
.printonly.measure{display:block;position:absolute;left:-10000px;top:0}
@media print{
  .printonly{display:block}
  /*
   * ตอนพิมพ์ให้เหลือแต่ตัวใบ — ทุกอย่างของหน้าเว็บในหน้านี้ไม่ต้องติดไปด้วย
   * เขียนเป็นกฎของหน้าที่มีใบโดยเฉพาะ (.docpage) จะได้ไม่ไปยุ่งกับใบพิมพ์แบบอื่นของเว็บ
   *
   * ห้ามเขียนเป็น "ซ่อนทุกอย่างที่ไม่ใช่ .wrap" เด็ดขาด
   * เพราะใบพิมพ์อีกหลายใบของเว็บ (ชอปปิงลิสต์ ใบสรุปส่งบัญชี ใบวางบิล บิลเงินสด ใบงานกอง)
   * วางตัวเองไว้ใน .sheetview ไม่ใช่ .wrap กฎแบบนั้นทำให้พิมพ์ออกมาได้กระดาษเปล่า
   */
  .top,.timerfab,.loadbar,.toast,.gbig,.backdrop{display:none!important}
  .docpage>*:not(.doc):not(.printonly){display:none!important}
  .docpage{padding:0!important;max-width:none!important;margin:0!important}
  /* ใบพิมพ์ต้องมีสีและขนาดตัวหนังสือเหมือนที่เห็นบนจอ ไม่งั้นกลายเป็นเอกสารขาวดำตัวจิ๋ว */
  .doc.plandoc{width:auto;max-width:none;margin:0;border:1px solid #dfe2ee;border-radius:14px;
    padding:0;font-size:13.5px;box-shadow:none;background:#fff!important;color:#1a1a1a!important}
  /*
   * ใบใหม่ไหลต่อเนื่อง ไม่บังคับหนึ่งคอนเทนต์ต่อหนึ่งแผ่น และไม่ย่อตัวหนังสืออีกแล้ว
   * สิ่งที่ต้องคุมมีแค่สามอย่าง — แต่ละวันขึ้นแผ่นใหม่ · บล็อกคอนเทนต์ห้ามถูกตัดกลาง
   * และแถบย้ายโลเคชั่นกับพัก ต้องเกาะไปกับคอนเทนต์ที่มันคั่น ไม่ตกค้างอยู่ท้ายหน้าคนเดียว
   */
  .ppage{break-before:page;padding:0}
  .ppage:first-child{break-before:auto}
  .ppage + .ppage{border-top:0}
  .phead{break-after:avoid}
  /*
   * บล็อกคอนเทนต์ยาวไม่เท่ากัน ถ้าสั่งห้ามตัดกลางทุกอัน ชิ้นที่ยาวเกินที่เหลือจะกระโดดไปทั้งก้อน
   * หน้าก่อนหน้าจึงเหลือข้อความนิดเดียวแล้วว่างครึ่งแผ่น · ยอมให้ตัดกลางได้ แต่ห้ามตัดในจุดที่อ่านแล้วขาดตอน
   * คือห้ามตัดใต้หัวเรื่องกับใต้แถวข้อมูล และห้ามตัดกลางก้อนย่อยอย่างพร็อพหรือ Outline ทีละช่อง
   */
  /*
   * หนึ่งคอนเทนต์จบในแผ่นเดียวเสมอ · บล็อกที่ยาวเกินหนึ่งหน้าถูกย่อให้พอดีก่อนพิมพ์แล้ว
   * เหลือเฉพาะบล็อกที่ย่อสุดแล้วยังไม่พอ (tallitem) ที่ยอมให้ไหลข้ามหน้าเป็นทางสุดท้าย
   */
  .pitem{break-inside:avoid}
  .pitem.tallitem{break-inside:auto}
  .tallitem .planout.full,.tallitem .planout.full .planpart.full,.tallitem .planout.full .scripted{break-inside:auto}
  .pitem .planout.full{display:block}
  .planoutlab{break-after:avoid}
  .scline,.scrow{break-inside:avoid}
  .pihead,.pifacts{break-after:avoid}
  .pistory,.piprops,.pisup,.pifact{break-inside:avoid}
  .pitem p,.pistory,.planpart span{orphans:3;widows:3}
  .pbarin.solo,.pdayhead{break-after:avoid;break-inside:avoid}
  .ptab .pbar,.ptab tr{break-inside:avoid}
  .psum{break-inside:avoid}
  /* บทเต็มยาวกว่าหน้ากระดาษได้ จึงห้ามสั่งห้ามตัดกับก้อนบท ไม่งั้นมันจะกระโดดไปทั้งก้อน */
  .planpart:not(.full),.pifact{break-inside:avoid}
  .scscene{break-after:avoid}
  .plandoc .planout{border-top-color:#e9eaf1}
  .plandoc .planoutlab{color:var(--pl)!important}
}
}

/* ลิงก์ที่วางไว้ในคำอธิบายไอเดีย — ปุ่มสั้น ๆ ข้างช่องพิมพ์ */
.refchips{display:flex;flex-direction:column;gap:4px;align-items:flex-start;flex:none}
.idearow .reflink{font-size:12.5px;white-space:nowrap}

/* ---- ป็อปอัปถามเรื่องบรีฟหลังสร้างโปรเจ็ค ---- */
.briefpick{width:min(760px,100%);max-height:92vh;overflow:auto;padding:26px 26px 24px;border-radius:20px;
  background:var(--panel);box-shadow:0 24px 60px rgba(12,18,38,.28);border:1px solid var(--line)}
/* กล่องถามทั้งหมดใช้พื้นขาวของระบบ ตัวหนังสือจึงต้องเป็นสีเข้มของระบบด้วย
 * ธีมเกมบางธีม เช่น สังเวียนของดวล Hook ตั้งสีตัวหนังสือรวมเป็นสีครีม
 * ถ้าปล่อยให้สืบทอดลงมา หัวข้อในกล่องจะจางจนอ่านไม่ออกบนพื้นขาว */
.briefpick{color:var(--text)}
.briefpick .askstep{display:block;font-size:11.5px;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.briefpick h3{font-size:22px;margin:0 0 6px}
.briefpick .picksub{margin:0 0 18px;font-size:14px;color:var(--muted);line-height:1.7}
.pickgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.picktile{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;
  padding:18px 16px 16px;border:1px solid var(--line);border-radius:16px;background:var(--panel-2);
  cursor:pointer;transition:border-color .12s ease,transform .12s ease,box-shadow .12s ease}
.picktile:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 10px 24px rgba(12,18,38,.12)}
.picktile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.picktile b{font-size:16px;color:var(--text)}
.picktile small{font-size:12.5px;color:var(--muted);line-height:1.6}
.picktile .pmark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line);color:var(--muted);margin-bottom:4px}
.picktile .pmark svg{width:20px;height:20px}
.picktile.main{background:var(--accent-soft);border-color:transparent}
.picktile.main .pmark{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.picktile.main b{color:var(--accent)}
.briefpick.note{width:min(560px,100%)}
.briefpick.note textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel-2);font-size:15px;line-height:1.7;resize:vertical}
.briefpick .btnrow{margin-top:14px}
@media (max-width:700px){
  .pickgrid{grid-template-columns:1fr}
  .picktile{flex-direction:row;align-items:center;gap:12px;padding:14px}
  .picktile .pmark{margin-bottom:0;flex:none}
  .picktile b{flex:none}
  .picktile small{flex:1 1 100%;margin-left:50px;margin-top:-4px}
}


/* ---- กองวันนี้: หน้าที่เปิดดูตอนกำลังจะออกจากบ้าน ---- */
/*
 * ตัวเลขเวลาต้องโตและอ่านจบด้วยตาเดียว เพราะคนเปิดหน้านี้มือหนึ่งถือของ อีกมือถือโทรศัพท์
 * ชื่อสถานที่เป็นลิงก์แผนที่ กดแล้วเปิดแอปแผนที่ได้เลย ไม่ต้องคัดลอกไปวาง
 */
.todaybtn{flex:none;white-space:nowrap;background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:650}
.todaybtn:hover{filter:brightness(1.06)}
/* วันไหนไม่มีกองปุ่มยังอยู่ที่เดิม แต่เป็นสีเทา กดแล้วไปดูกองถัดไปได้ */
.todaybtn.off{background:var(--panel-2);color:var(--muted);border-color:var(--line);font-weight:550}
.todaybtn.off:hover{filter:none;color:var(--text);border-color:var(--accent)}
.todaybtn i{font-style:normal;margin-left:5px;padding:0 6px;border-radius:99px;background:rgba(255,255,255,.22);font-size:11.5px}

.tdwrap .opshead{margin:22px 0 10px}
.tdwarn{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tdwarn span{flex:1;min-width:200px}
.tdnext b{display:block;font-size:15px;margin-bottom:2px}
.tdnext p{margin:0 0 12px;color:var(--muted);font-size:13px}

.tdplaces{display:flex;flex-direction:column;gap:10px}
.tdplace{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel)}
.tdno{flex:none;min-width:26px;height:26px;display:inline-grid;place-items:center;border-radius:8px;
  background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:700}
.tdplacemain{flex:1;min-width:0}
.tdplacename{display:block;font-size:16px;font-weight:650;color:var(--text);text-decoration:none;word-break:break-word}
a.tdplacename{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.tdplacemain small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.tdtimes{display:flex;gap:16px;flex:none}
.tdtimes span{display:block;font-size:11px;color:var(--muted)}
.tdtimes b{display:block;font-size:19px;font-variant-numeric:tabular-nums;line-height:1.2}
.tdplain p{margin:0 0 4px;white-space:pre-wrap}
.tdplain small{color:var(--muted);font-size:12px}

.tdpeople{display:flex;flex-wrap:wrap;gap:8px}
.tdperson{padding:8px 12px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line-soft);min-width:120px}
.tdperson span{display:block;font-size:11px;color:var(--muted)}
.tdperson b{display:block;font-size:14px}
.tdcast{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.tdcast>b{display:block;font-size:13px;margin-bottom:8px}
.tdcastrow{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-soft)}
.tdcastrow:last-child{border-bottom:0}
.tdcastrow .main{flex:1;min-width:0}
.tdcastrow .main b{display:block;font-size:13.5px}
.tdcastrow .main small{display:block;font-size:11.5px;color:var(--muted)}
.tdcalltime{font-variant-numeric:tabular-nums;font-size:14px;font-weight:600}

.tdrun{display:flex;flex-direction:column;gap:8px}
.tdrunrow{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel)}
/* เวลาเริ่มตัวโต เวลาจบตัวเล็กใต้กัน — ช่วงเวลาบรรทัดเดียวยาวเกินคอลัมน์ในมือถือ */
.tdtime{flex:none;width:64px;font-variant-numeric:tabular-nums;color:var(--accent);line-height:1.2}
.tdtime b{display:block;font-size:17px;font-weight:700}
.tdtime i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:1px}
.tdrunrow .main{flex:1;min-width:0}
.tdrunrow .main b{display:block;font-size:14.5px}
.tdrunrow .main small{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* ปุ่มอ่านบทกลางกอง — ต้องเห็นชัดเท่าปุ่มแผนที่ แต่คนละสี จะได้ไม่กดผิดกัน */
.btn.tdread{background:#1b2136;border-color:#1b2136;color:#fff}
.btn.tdread:hover{filter:brightness(1.15)}
:root[data-theme="dark"] .btn.tdread{background:#e8eaf3;border-color:#e8eaf3;color:#161a26}
.tdbtns{margin-top:22px}

@media (max-width:640px){
  .tdplace{flex-wrap:wrap}
  .tdtimes{width:100%;justify-content:flex-start;gap:24px;padding-left:38px}
  .tdrunrow{align-items:flex-start}
  .tdbtns .btn{flex:1 1 100%}
}

/* ใครเป็นคนกดเลือกไอเดียลงงาน และกดในฐานะอะไร — ตัวเล็กใต้ชื่อคนคิด ไม่แย่งสายตาจากตัวไอเดีย */
.ideawho .pickedby{display:block;font-size:10.5px;color:var(--accent);font-style:normal;margin-top:2px;white-space:nowrap}

/* ---- Rank ไอเดีย: สามอันดับแรกเป็นการ์ด ที่เหลือเป็นแถว ---- */
/*
 * ตั้งใจให้หน้าตาเป็นการชื่นชมคนที่ไอเดียได้ทำ ไม่ใช่กระดานไล่บี้
 * จึงไม่มีสีแดง ไม่มีคำว่าอันดับสุดท้าย และคนที่ยังไม่มีไอเดียผ่านอยู่แยกกลุ่มไว้ท้ายสุดแบบเงียบ ๆ
 */
.rankpodium{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:18px}
.rankcard{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:18px 18px 16px;text-align:center}
.rankcard.p1{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.rankmedal{font-size:30px;line-height:1;display:block;margin-bottom:6px}
.rankname{display:block;font-size:16px;margin-bottom:8px}
.rankbig{font-size:34px;font-weight:700;line-height:1.05;letter-spacing:-.02em}
.rankbig i{display:block;font-style:normal;font-size:12px;font-weight:500;color:var(--muted);margin-top:3px}
.rankcard small{display:block;margin-top:9px;font-size:12px;color:var(--muted)}
.rankrows .row{align-items:center}
.rankno{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;
  background:var(--panel-2);color:var(--muted);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.rankcount{flex:none;font-size:18px;font-variant-numeric:tabular-nums}

/* ---- หมวดหมู่ของไอเดียในคลัง ---- */
.topictag{display:inline-block;margin-left:7px;padding:2px 9px;border-radius:99px;background:var(--accent-soft);
  color:var(--accent);font-size:11px;font-weight:600;vertical-align:middle;white-space:nowrap}
.bankchips{margin:0 0 14px}
.banksort{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.banksort>div{flex:1;min-width:220px}
.banksort b{font-size:14px}

/* ช่องเลือกหมวดเองในแต่ละแถวของคลัง — เล็กและอยู่ใต้บรรทัดที่มา ไม่แย่งที่ตัวไอเดีย */
.banktopicpick{display:flex;align-items:center;gap:8px;margin-top:7px}
.banktopicpick span{font-size:11px;color:var(--muted);flex:none}
.banktopicpick select{max-width:210px;font-size:12.5px;padding:5px 9px}
@media (max-width:640px){.banktopicpick select{max-width:100%;flex:1}}

/* ของค้างจากรอบก่อน: ชั้นบนของคลัง และการ์ดในหน้าโปรเจ็ค */
.readytag{display:inline-block;margin-left:7px;padding:2px 9px;border-radius:99px;background:var(--ok-soft);
  color:var(--ok);font-size:11px;font-weight:600;vertical-align:middle;white-space:nowrap}
.chip.ready{border-color:var(--ok);color:var(--ok)}
.chip.ready.on{background:var(--ok);color:var(--ok-ink);border-color:var(--ok)}
.chip.ready.on i{background:rgba(255,255,255,.26);color:#fff}
.leftoverbox{border-color:var(--ok);margin-bottom:18px}
.leftoverbox .briefhead b{color:var(--ok)}

.bankbar{margin-bottom:16px}
.waitlist{display:flex;flex-direction:column;gap:6px;max-height:44vh;overflow:auto;margin-bottom:14px}
.waitlist .row{margin:0}

/* ช่องกรอกที่งอกตรงปุ่ม แทนกล่องถามของเบราว์เซอร์ที่ถูกปิดเงียบได้ */
.askinline{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.askinline input{width:min(230px,52vw);padding:5px 10px;font-size:12.5px;border:1px solid var(--accent);
  border-radius:8px;background:var(--panel);color:var(--text)}
.askinline .btn.small{padding:5px 10px}

/*
 * กล่องคอมเมนต์ยาว เช่น ขอให้แก้ และ ลูกค้าขอแก้
 * ของเดิมช่องพิมพ์แคบ ๆ เบียดอยู่บรรทัดเดียวกับปุ่ม เขียนสองบรรทัดก็เต็มแล้ว
 * ตอนนี้กินเต็มความกว้างของการ์ด ปุ่มลงไปอยู่ข้างล่าง
 */
.askinline.big{display:block;width:100%;flex:1 0 100%;margin-top:12px;padding:14px;border-radius:12px;
  border:1px solid var(--accent);background:var(--accent-soft)}
.askinline.big .asklabel{display:block;font-size:14px;font-weight:650;margin-bottom:8px;color:var(--text)}
.askinline.big textarea{display:block;width:100%;box-sizing:border-box;min-height:132px;resize:vertical;
  padding:11px 13px;font:inherit;font-size:14.5px;line-height:1.65;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);color:var(--text)}
.askinline.big textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
/* ตัวเลือกที่ต้องกดไปพร้อมกับพิมพ์ เช่น Host สั่งแก้แล้วเลือกว่าจะให้วนกลับมาไหม */
.askpicks{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.askpick{flex:1 1 220px;text-align:left;padding:10px 12px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);color:var(--text);font:inherit}
.askpick b{display:block;font-size:13.5px;font-weight:650}
.askpick i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px}
.askpick:hover{border-color:var(--accent)}
.askpick.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.askpick.on b{color:var(--accent)}
.askinline.big .askrow{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.askinline.big .askrow .btn{margin-top:0}
@media (max-width:560px){
  .askinline.big .askrow{flex-direction:column-reverse}
  .askinline.big .askrow .btn{width:100%;justify-content:center}
}

/* ปุ่มขอให้แก้ — เป็นทางเลือกคนละทางกับปุ่มผ่าน จึงต้องแยกสีให้เห็นชัดว่ากดคนละเรื่อง */
/* บรรทัดบอกว่าแก้เสร็จแล้วบทจะเดินไปทางไหน — อยู่ใต้ข้อความที่สั่งแก้ */
.fixroute{display:block;margin-top:6px;font-size:13px;font-weight:650;opacity:.9}
.btn.fixbtn{border-color:#d97706;color:#b45309;background:#fff8ed;font-weight:650}
.btn.fixbtn:hover{background:#d97706;border-color:#d97706;color:#fff}
:root[data-theme="dark"] .btn.fixbtn{background:#3a2a0d;border-color:#8a5e13;color:#f0b753}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.fixbtn{
  background:#3a2a0d;border-color:#8a5e13;color:#f0b753}}

/* ---- สีในบท: ชื่อคนพูด คำสั่งกอง และหัวฉาก ----
 * ใส่ตอนแสดงผลอย่างเดียว ตัวบทที่เก็บไว้ยังเป็นข้อความล้วน
 * บนใบออกกองใช้สีตายตัว เพราะใบนั้นเป็นกระดาษขาวเสมอทั้งบนจอและตอนพิมพ์
 */
/*
 * บทที่เอาไว้อ่าน — คนละเรื่องกับบทที่เอาไว้พิมพ์แก้
 * ทีมบอกว่าอ่านยาก เพราะเดิมเป็นข้อความไหลก้อนเดียว ชื่อคนพูดปนอยู่กลางบรรทัด
 * และบรรทัดยาวเต็มจอจนตากวาดกลับมาต้นบรรทัดไม่ถูก
 */
/* บทแสดงตามที่พิมพ์มา บรรทัดและย่อหน้าของต้นฉบับต้องอยู่ครบ */
.scripted{white-space:pre-wrap;word-break:break-word;max-width:74ch;line-height:1.8}
.scline{display:grid;grid-template-columns:minmax(58px,max-content) minmax(0,1fr);gap:2px 12px;margin:7px 0}
.scline .scwho{white-space:nowrap}
.sctext,.scrow{white-space:pre-wrap;word-break:break-word}
.scrow{display:block;margin:5px 0}
.scgap{display:block;height:.55em}
/* ปุ่มตัวใหญ่ สำหรับอ่านกลางกอง แดดจ้าและถือมือถือห่างตา */
@media (max-width:560px){
  .scline{grid-template-columns:minmax(0,1fr);gap:0;margin:9px 0}
  .scline .scwho{margin-bottom:1px}
}
.scwho{color:var(--accent);font-weight:700}
.scmark{display:inline-block;padding:1px 7px;border-radius:99px;background:var(--warn-soft);
  color:#8a5b14;font-size:.92em;font-weight:600;white-space:nowrap}
.scscene{display:block;font-weight:700;letter-spacing:.01em;margin:12px 0 4px;padding-bottom:4px;
  border-bottom:1px solid var(--line)}
.scscene:first-child{margin-top:0}

.calldoc .scwho{color:#4b4fbf}
.calldoc .scmark{background:#fdf3e7;color:#8a5b14}
.calldoc .scscene{border-bottom-color:#e0e2ea}
@media print{
  .calldoc .scwho{color:#3b3f8f}
  .calldoc .scmark{background:#fdf3e7;color:#7a4f11}
}

/* ---- ชั้นสีที่ซ้อนอยู่หลังช่องเขียนบทเต็ม ----
 * สองชั้นต้องมีฟอนต์ ขนาด ระยะบรรทัด การตัดคำ และขอบในเท่ากันเป๊ะ
 * ไม่งั้นสีจะเยื้องจากตัวอักษรทันทีที่บรรทัดยาวพอจะตัดคำ
 */
/*
 * ตัวหนังสือจริงอยู่ในช่องพิมพ์เหมือนเดิม ชั้นที่ซ้อนอยู่ข้างหลังมีแค่พื้นสี
 * ทำแบบนี้เพราะเคอร์เซอร์อยู่กับตัวหนังสือในช่องพิมพ์เสมอ จึงตรงกันแน่นอนไม่ว่าฟอนต์จะเป็นอะไร
 * ถ้าไปทำตัวหนังสือในช่องให้โปร่งใสแล้ววาดตัวหนาในชั้นหลัง ความกว้างจะไม่เท่ากันแล้วเคอร์เซอร์จะเพี้ยน
 */
.wstack{display:block;position:relative}
.wbox.live textarea,.scmirror{
  font-family:inherit;font-size:16px;line-height:1.85;padding:0 0 12px;margin:0;border:0;
  white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;letter-spacing:normal;
  font-weight:400;font-style:normal}
.wbox.live textarea{position:relative;z-index:1;background:transparent;color:var(--text);
  width:100%;outline:none;resize:none;overflow:hidden}
.scmirror{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;color:transparent}
/* พื้นสีเท่านั้น ห้ามมี padding หรือขนาดตัวอักษรที่ทำให้ความกว้างเปลี่ยน */
.scmirror .scwho,.scmirror .scmark,.scmirror .scscene{
  display:inline;padding:0;margin:0;border:0;border-radius:4px;font-size:inherit;font-weight:inherit;
  line-height:inherit;color:transparent;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.scmirror .scwho{background:var(--accent-soft)}
.scmirror .scmark{background:var(--warn-soft)}
.scmirror .scscene{background:var(--line-soft)}

/* แถบยืนยันที่งอกตรงปุ่ม แทนกล่องยืนยันของเบราว์เซอร์ */
.askyesno{display:inline-flex;align-items:center;gap:8px;vertical-align:middle;flex-wrap:wrap;
  padding:5px 8px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.askyesno i{font-style:normal;font-size:12.5px;color:var(--text);white-space:pre-line;max-width:min(420px,60vw)}
.askyesno .btn.small{padding:4px 10px;font-size:12px}
.btn.primary.danger{background:var(--danger);border-color:var(--danger);color:var(--danger-ink)}
.btn.primary.danger:hover{filter:brightness(1.05)}

/* กล่องยืนยันกลางจอ แทนกล่องของเบราว์เซอร์ */
.sureask{width:min(460px,100%);padding:24px 24px 20px}
.suretext{margin:0 0 18px;font-size:15px;line-height:1.7;white-space:pre-line;color:var(--text)}
.sureask .btnrow{margin:0;justify-content:flex-end}

/* ของที่ต้องเตรียมในหน้าที่ลูกค้าเปิดจากลิงก์ — ใช้สีของธีม จะได้อ่านได้ทั้งโหมดสว่างและมืด */
.pubprops{margin-top:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.pubprops>i{display:block;font-style:normal;font-size:11px;letter-spacing:.06em;font-weight:700;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.pubprop{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:3px 0;color:var(--text)}
.pubprop b{font-weight:600;font-variant-numeric:tabular-nums}
.pubprop.total{margin-top:5px;padding-top:6px;border-top:1px solid var(--line);font-weight:700}
.pubprop.own{margin-top:6px;padding-top:6px;border-top:1px dotted var(--line);color:var(--muted);font-size:13px}

/* รายการที่ยังไม่ผ่านด่านพร็อพ ในป๊อปอัพก่อนส่งให้ Host */
.asklist{margin:2px 0 14px;padding-left:18px;color:var(--text);font-size:14px;line-height:1.75}
.asktodo{display:grid;gap:8px;margin:2px 0 14px}
.asktodoline{display:grid;gap:2px;text-align:left;background:var(--panel-2);border:1px solid var(--line);
  border-radius:10px;padding:9px 12px;cursor:pointer;color:var(--text);font:inherit}
.asktodoline:hover{border-color:var(--accent);background:var(--accent-soft)}
.asktodoline b{font-size:14.5px}
.asktodoline small{color:var(--muted);font-size:12.5px}
.asktodoline i{font-style:normal;font-size:12.5px;color:var(--accent);font-weight:600}

/* แถวที่แจ้งเตือนพาเรามาหา — กะพริบสองสามวินาทีแล้วหายไปเอง ไม่ต้องกดปิด */
.spotlit{position:relative;z-index:2;animation:spotflash 2.8s ease-out 1}
@keyframes spotflash{
  0%{box-shadow:0 0 0 3px var(--accent);background:var(--accent-soft)}
  55%{box-shadow:0 0 0 3px var(--accent);background:var(--accent-soft)}
  100%{box-shadow:0 0 0 0 transparent;background:transparent}
}
@media (prefers-reduced-motion:reduce){ .spotlit{animation:none;box-shadow:0 0 0 2px var(--accent)} }

/* ลูกค้าพิมพ์กลับมาจากลิงก์ — ใช้ทั้งหน้าที่ลูกค้าเห็นและหน้าทีม */
.sayname{margin-bottom:12px}
.saybox{display:grid;gap:8px;margin-top:10px;justify-items:start}
.saybox textarea{width:100%;min-height:62px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--text);font:inherit;font-size:14.5px;resize:vertical}
.saybox textarea:focus{outline:none;border-color:var(--accent)}
.saidlist{display:grid;gap:8px;margin-top:12px}
.saidrow{background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:8px 11px}
.saidrow b{font-size:13.5px}
.saidrow small{color:var(--muted);font-size:12px;margin-left:7px}
.saidrow p{margin:4px 0 0;font-size:14px;line-height:1.65;white-space:pre-wrap}
.saidrow .lnk{float:right}
.saidcard .saidrow{margin-top:8px}
.saidmini{grid-column:1/-1;display:grid;gap:6px;margin-bottom:8px}
.saidmini .saidrow{background:var(--accent-soft);border-color:var(--accent)}
.saidmini .saidrow .btn{float:right}
.row.verdict.hassaid{display:grid;grid-template-columns:1fr auto auto;gap:8px 10px;align-items:center}

/* คอนเทนต์ที่ฝั่ง Content ยกเลิกไปแล้ว — ยังอยู่ในกองให้เห็น แต่ต้องไม่ดูเหมือนงานที่ต้องทำต่อ */
.content-row.gonerow{opacity:1;background:var(--danger-soft)}
.content-row.gonerow .rowmain b{text-decoration:line-through;text-decoration-color:var(--danger);
  text-decoration-thickness:2px}
.gonebar{margin-bottom:12px}
.gonebar.warn{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.newshoot.warnbox{border-color:var(--danger);background:var(--danger-soft)}
.tag.bad{border-color:var(--danger);color:var(--danger)}
.tag.ok{border-color:var(--ok);color:var(--ok)}
.kindcard.on{border-color:var(--accent);background:var(--accent-soft)}
.editbar{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}

/* ภาพรวมทั้งกองบนหัวหน้าส่งลูกค้า — บอกว่าคอนเทนต์ไหนค้างอยู่ที่ใคร */
.flowsum{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.fshead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.fshead b{font-size:14.5px}
.fshead small{color:var(--muted);font-size:12.5px}
.fsgroup{display:flex;align-items:flex-start;gap:10px;padding:6px 0;border-top:1px solid var(--line-soft)}
.fsgroup:first-of-type{border-top:0}
.fsgroup>i{flex:none;width:150px;font-style:normal;font-size:12.5px;font-weight:600;color:var(--muted);padding-top:5px}
.fsgroup.wait>i{color:var(--warn)}
.fsgroup.bad>i{color:var(--danger)}
.fsgroup.ok>i{color:var(--ok)}
.fschips{display:flex;flex-wrap:wrap;gap:6px}
.fschip{display:flex;align-items:baseline;gap:7px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  padding:5px 10px;font:inherit;font-size:13.5px;color:var(--text);cursor:pointer;text-align:left}
.fschip:hover{border-color:var(--accent);background:var(--accent-soft)}
.fschip small{color:var(--muted);font-size:11.5px}
@media (max-width:700px){ .fsgroup{flex-direction:column;gap:4px} .fsgroup>i{width:auto;padding-top:0} }

/* เลื่อนวันถ่าย */
.movecard b{font-size:14.5px}
.movequick{margin:2px 0 10px;flex-wrap:wrap}
.datewarn{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--warn-soft);border:1px solid var(--warn);
  color:var(--warn);border-radius:9px;padding:7px 10px;margin:6px 0 8px;font-size:13px}
.cshoot .movebtn{justify-self:start;margin-top:4px}
/* ปุ่มเลื่อนวันถ่ายในลิสต์โปรเจ็ค — อยู่ท้ายแถว ไม่ยืด ไม่ตัดคำ */
.projrow .movebtn{flex:none;white-space:nowrap;margin-top:0;font-size:12px;padding:5px 11px}
@media (max-width:640px){.projrow .movebtn{padding:6px 10px;font-size:12.5px}}

/* กระดานไอเดีย — เส้นคั่นระหว่างอันที่เลือกแล้วกับอันที่ยังไม่ได้เลือก */
.ideasplit{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  margin:14px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--line-soft)}
.ideasplit.ok{color:var(--ok);border-color:color-mix(in srgb, var(--ok) 35%, transparent);margin-top:2px}

/* แถบชื่อคอนเทนต์ — สีบอกว่าตอนนี้อันไหนค้างอยู่ตรงไหน */
.otab{display:inline-flex;align-items:center;gap:7px}
.otab .odot{width:7px;height:7px;border-radius:99px;background:var(--line);flex:none}
.otab.twait .odot{background:var(--warn)}
.otab.tfix .odot{background:var(--danger)}
.otab.tok .odot{background:var(--ok)}
.otab.tsent .odot{background:var(--accent)}
.otab.twait{border-color:var(--warn);color:var(--warn)}
.otab.tfix{border-color:var(--danger);color:var(--danger)}
.otab.tok{border-color:color-mix(in srgb, var(--ok) 55%, transparent)}

/* คิวงานของ Host */
.hostrow.late{border-color:var(--danger)}
.hostrow.late .rowmain small{color:var(--danger)}

/* แถบชื่อคอนเทนต์ในกองเดียวกัน — กรองตามสถานะ แล้วเขียนคำกำกับไว้ในชิป */
.ofilters{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px}
.ofilter{background:var(--panel-2);border:1px solid var(--line);border-radius:99px;padding:4px 11px;
  font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer}
.ofilter i{font-style:normal;font-weight:700;color:var(--text);margin-left:3px}
.ofilter:hover{border-color:var(--accent)}
.ofilter.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.ofilter.on i{color:var(--accent)}
.otab{align-items:center}
.otab .otabname{font-size:13.5px}
.otab small{color:var(--muted);font-size:11px;margin-left:7px;white-space:nowrap}
.otab.on small{color:inherit;opacity:.75}

/* ส่วนที่ทุกคนต้องอ่านก่อนเริ่มคิด — ต้องเด่นกว่าการ์ดอื่นในหน้าเดียวกัน */
.readcard{border-left:4px solid var(--accent);border-color:color-mix(in srgb, var(--accent) 28%, var(--line));
  border-left-color:var(--accent);background:color-mix(in srgb, var(--accent) 5%, var(--panel));
  padding:16px 20px 18px;box-shadow:0 1px 3px rgba(16,17,25,.06)}
.readhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.readhead b{font-size:16.5px;letter-spacing:-.01em}
.readsum{margin:2px 0 0;color:var(--muted);font-size:13px}
.readpart{padding:12px 0;border-top:1px solid var(--line-soft)}
.readpart:first-of-type{border-top:0;padding-top:6px}
.readlab{display:block;font-style:normal;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--muted);margin-bottom:6px}
.readlab.small{margin:10px 0 4px}
.readbody{font-size:15.5px;line-height:1.85;color:var(--text);max-width:70ch;
  white-space:pre-wrap;word-break:break-word}
.readbody p{margin:0 0 8px}
.readbody.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.readmore{display:inline-block;margin-top:4px;font-size:13.5px}
.readnone{color:var(--muted);font-size:14px;margin:0}
.rulelist{display:grid;gap:6px;margin-top:10px;max-width:70ch}
.rulerow{display:flex;gap:10px;align-items:baseline;border-radius:9px;padding:7px 11px;font-size:14.5px;line-height:1.7}
.rulerow i{font-style:normal;font-weight:700;font-size:12px;flex:none;min-width:52px}
.rulerow.yes{background:var(--ok-soft);color:var(--text)}
.rulerow.yes i{color:var(--ok)}
.rulerow.no{background:var(--danger-soft);color:var(--text)}
.rulerow.no i{color:var(--danger)}
.rulerow.must{background:var(--accent-soft);color:var(--text)}
.rulerow.must i{color:var(--accent)}
.placelist{display:grid;gap:5px;max-width:70ch}
.placerow{display:flex;gap:8px;align-items:baseline;font-size:15.5px;line-height:1.7}
.readwho{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.readwho .who1{display:flex;flex-direction:column;gap:2px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:10px;padding:7px 12px;min-width:120px}
.readwho .who1 i{font-style:normal;font-size:11px;color:var(--muted)}
.readwho .who1 b{font-size:14.5px}
.readwho .who1.miss b{color:var(--muted);font-weight:500}
@media (max-width:700px){ .readcard{padding:14px} .readbody{font-size:15px} }

/* กระดานไอเดียสองคอลัมน์ — ซ้ายคิด ขวาคือที่ Host เลือกผ่านแล้ว */
/* ฝั่งซ้ายคือที่ที่คนพิมพ์จริง จึงกว้างกว่า ฝั่งขวาเป็นของที่ตัดสินใจไปแล้ว ย่อไว้พอ */
.ideacols{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start}
.ideacol{display:grid;gap:8px;align-content:start}
.colhead{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:2px 2px 6px;border-bottom:1px solid var(--line)}
.colhead b{font-size:14.5px}
.colhead i{font-style:normal;font-weight:700;font-size:13px;color:var(--muted)}
.colhead small{color:var(--muted);font-size:12px;flex:1 1 100%}
.colhead.ok{border-bottom-color:color-mix(in srgb, var(--ok) 45%, transparent)}
.colhead.ok b{color:var(--ok)}
.colhead.ok i{color:var(--ok)}
.ideacol .ideanew{margin-top:4px}
.ideacol .idearow{margin:0}
@media (max-width:900px){
  .ideacols{grid-template-columns:1fr}
  .ideacol.done{order:-1}            /* บนมือถือ ของที่ผ่านแล้วอยู่บน */
}

/* กล่องกลางจอที่บอกว่าทำต่อไม่ได้เพราะอะไร */
.stopask{max-width:420px}
.stoptext{margin:8px 0 16px;font-size:15.5px;line-height:1.75;color:var(--text);white-space:pre-wrap}
.colhead .headgap{flex:1}
.colhead .btn{align-self:center}

/* จัดการกอง — แบบรายการ หนึ่งกองหนึ่งแถว */
.shootlist .shootrow{display:grid;grid-template-columns:120px minmax(0,1fr) auto auto auto auto auto;
  gap:12px;align-items:center}
.shootrow .srdate{display:grid;gap:1px;min-width:0}
.shootrow .srdate b{font-size:13.5px;white-space:nowrap}
.shootrow .srdate i{font-style:normal;font-size:11.5px;color:var(--muted)}
.shootrow .srfacts{display:flex;flex-wrap:wrap;gap:6px}
.shootrow .srfacts i{font-style:normal;font-size:11.5px;color:var(--muted);background:var(--panel-2);
  border:1px solid var(--line);border-radius:99px;padding:3px 9px;white-space:nowrap}
.shootrow .srfacts .warnnum{color:var(--warn);border-color:var(--warn)}
.shootrow .srfacts .oknum{color:var(--ok);border-color:color-mix(in srgb, var(--ok) 45%, transparent)}
.shootrow .srfacts .callnum{color:var(--accent);border-color:var(--accent)}
.shootrow select{max-width:150px}
/* แถวที่ลูกค้ายังไม่ผ่าน — จัดคิวไว้ก่อนได้ แต่ต้องดูออกว่ายังไม่นิ่ง */
.orderrow.notyet{border-style:dashed;background:var(--panel-2)}
.cwait{font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:99px;background:#fdf0d5;color:#8a5a00;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
/* ---------- ป้ายบอกว่ากองนี้ยังขาดอะไร ----------
 * เคยเป็นเม็ดสีหกเม็ด ซึ่งต้องจำว่าเม็ดไหนคือเรื่องอะไร และต้องเอาเมาส์ไปชี้ถึงจะรู้
 * เปลี่ยนเป็นป้ายคำอ่านออกทันที กดป้ายไหนก็เข้าไปแก้เรื่องนั้นเลย
 */
.srmiss{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.misslab{font-style:normal;font-size:11.5px;color:var(--muted);flex:none}
.misschip{flex:none;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;
  background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn)}
.misschip:hover{background:var(--warn);color:var(--warn-ink)}
.okchip{flex:none;padding:3px 11px;border-radius:99px;font-size:12px;font-weight:600;
  background:var(--ok-soft);color:var(--ok);border:1px solid color-mix(in srgb, var(--ok) 45%, transparent)}
.callnum.wait{color:var(--warn);border-color:var(--warn)}
.rowdots{flex:none;padding:4px 8px;font-size:15px;line-height:1}
.shootrow.menuon{border-color:var(--accent)}
.rowmenu{flex:1 0 100%;display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.rowmenu .field{margin:0}
.rowmenu .btn.small{margin-top:0}
.shootgroup h3 .warnnum{margin-left:8px;font-size:11.5px}
.shootrow.set{border-left:3px solid var(--ok)}
@media (max-width:900px){
  .shootlist .shootrow{grid-template-columns:1fr auto;gap:8px}
  .shootrow .srdate{grid-column:1/-1;display:flex;gap:8px;align-items:baseline}
  .shootrow .srfacts{grid-column:1/-1}
  .shootrow select{grid-column:1/-1;max-width:none}
}

/* การ์ดเรียกคนไปกอง และการ์ดเตือนกองที่ยังไม่มีทีม */
.callcard{border-left:4px solid var(--accent)}
.latecard{border-left:4px solid var(--warn);background:var(--warn-soft)}
.latecard .callhead b{color:var(--warn)}
.leadcard{border-left:4px solid var(--line)}
.leadcard .hint{margin:8px 0 0;display:block}
.warncard{border-left:4px solid var(--warn)}
/* การ์ดกองที่ยังไม่ใส่วันถ่าย — ปุ่มท้ายแถวไม่ยืดและไม่ตัดคำ */
.nodatecard .row{gap:10px}
.nodatecard .btn.small{flex:none;margin-top:0;white-space:nowrap}
.callhead{display:grid;gap:2px;margin-bottom:8px}
.callhead b{font-size:14.5px}
.callhead small{color:var(--muted);font-size:12.5px}

/* ---------- อัพเดทงาน — หน้าของหัวหน้า ----------
 * ป้ายแผนกต้องอ่านออกตั้งแต่เหลือบ เพราะคนเปิดหน้านี้กวาดตาหาว่าทีมไหนขยับ
 */
.upwho{flex:none;align-self:center;display:inline-flex;align-items:center;justify-content:center;min-width:64px;
  padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:600;
  background:var(--line-soft);color:var(--muted)}
.upwho.host{background:var(--accent-soft);color:var(--accent)}
.upwho.prop{background:#fdf0d5;color:#8a5a00}
.upwho.camera{background:#e2f0ff;color:#12559c}
.upwho.ae{background:#e7f6ec;color:#1c7a42}
.upwho.support{background:#f0e9ff;color:#5b3bb5}
.upwho.client{background:#ffe9e6;color:#c0392b}
.upwho.crew{background:#eef1f6;color:#4a5568}
:root[data-theme="dark"] .upwho.prop{background:#4a3400;color:#ffd98a}
:root[data-theme="dark"] .upwho.camera{background:#0f3560;color:#bcdcff}
:root[data-theme="dark"] .upwho.ae{background:#10402a;color:#b7f0cd}
:root[data-theme="dark"] .upwho.support{background:#332360;color:#dcd0ff}
:root[data-theme="dark"] .upwho.client{background:#5a1f18;color:#ffd0c9}
:root[data-theme="dark"] .upwho.crew{background:#2a3140;color:#c6cedd}
.uprow{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left}
.uprow .upmain{flex:1;min-width:0}
.uprow .upmain b{display:block;font-size:14.5px;font-weight:600}
.uprow .upmain small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.uprow .upat{flex:none;font-size:11.5px;color:var(--muted);white-space:nowrap;align-self:center}
.uplist .uprow:hover{background:var(--panel-2)}

/* หน้าแรกของ Content */
.chrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center}
.chrow.rush{border-left:3px solid var(--danger)}
.chrow.rush .rowmain small{color:var(--danger)}
.hostnote{display:grid;gap:2px;text-align:left;cursor:pointer;border-left:4px solid var(--warn);font:inherit;width:100%}
.hostnote b{font-size:14.5px}
.hostnote small{color:var(--muted);font-size:12.5px}
@media (max-width:700px){ .chrow{grid-template-columns:1fr auto} .chrow .btn{grid-column:1/-1;justify-self:start} }

/* การ์ดเป้าของเดือน บนสุดของหน้าแรก Content */
.monthcard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;
  border-left:4px solid var(--accent);background:color-mix(in srgb, var(--accent) 6%, var(--panel));padding:16px 20px}
.mcnum{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;min-width:150px}
.mcnum b{font-size:40px;line-height:1;letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums}
.mcnum span{font-size:19px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.mcnum i{flex-basis:100%;font-style:normal;font-size:12px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.mcbody{display:grid;gap:8px;min-width:0}
.mcbar{height:10px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.mcbar i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.mcbody p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.7}
@media (max-width:700px){ .monthcard{grid-template-columns:1fr;gap:12px} .mcnum b{font-size:34px} }

/* ============ กระดานงานรายวันของทีม Content ============ */
.dayboard{border-color:var(--accent)}
.dayhead{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.dayhead > div{flex:1;min-width:200px}
.dayhead b{font-size:15px}
.dayhead small{display:block;margin-top:3px;color:var(--muted);font-size:12.5px}
.daypickday{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.daypickday select{padding:6px 9px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text);font:inherit;font-size:13px}

.daypast{margin-bottom:12px;padding:11px 13px;border:1px dashed var(--line);border-radius:11px;background:var(--soft)}
.daypast > b{font-size:13.5px}
.daypastnote{margin:6px 0 0;font-size:13px;white-space:pre-wrap}
.daypastnote i{display:block;margin-top:3px;color:var(--muted);font-size:11.5px;font-style:normal}
.daycarry{margin-top:9px}
.daycarryhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px;
  font-size:12.5px;color:var(--muted)}

.daylist{display:flex;flex-direction:column;gap:7px}
/* หนึ่งงานคือหนึ่งกล่องที่เห็นชัด — เดิมเส้นบางและตัวหนังสือเท่ากันหมด กวาดตาแล้วไม่รู้ว่าแยกกันตรงไหน */
.dayrow{display:flex;align-items:center;gap:10px;padding:9px 12px;border:2px solid var(--line);
  border-radius:12px;background:var(--panel);box-shadow:var(--shadow)}
.dayrow:hover{border-color:var(--accent)}
.dayrow.dragging{opacity:.45}
.dayrow.done{background:var(--soft)}
.dayrow.done .daymain b{text-decoration:line-through;color:var(--muted)}
.dayrow.late{border-color:var(--danger)}
.daygrip{cursor:grab;color:var(--muted);font-size:13px;user-select:none}
.daymain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.daymain b{font-size:14px;font-weight:600}
.daymain small{color:var(--muted);font-size:11.5px}
.daystate{flex:none;min-width:84px;padding:5px 9px;border:1px solid var(--line);border-radius:99px;
  background:var(--panel);color:var(--muted);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.daystate.doing{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.daystate.done{border-color:transparent;background:var(--accent);color:var(--accent-ink)}
.dayx{flex:none;border:0;background:none;color:var(--muted);font-size:14px;cursor:pointer;padding:2px 4px}
.dayx:hover{color:var(--text)}

/* ช่องเขียนงานใหม่ ไล่ลงมาทีละบรรทัด ไม่ใช่เรียงต่อกันในแถวเดียว */
.dayadd{display:block;margin-top:11px}
.dayadd input#day-new{flex:1 1 240px;min-width:180px}
.dayadd input,.dayadd select{padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--text);font:inherit;font-size:14px}
.dayadd select{max-width:220px}

/* สรุปของวันนี้ — เป็นของที่คนวันถัดไปต้องอ่าน จึงต้องเห็นชัดว่าเป็นส่วนของมันเอง */
.daysum{margin-top:14px;padding:12px 14px;border:2px solid var(--accent);border-radius:12px;background:var(--accent-soft)}
.daysum summary{cursor:pointer;font-size:14.5px;font-weight:700;color:var(--text)}
.daysumauto{margin:8px 0 6px;font-size:12.5px;color:var(--muted)}
.daysum textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--text);font:inherit;font-size:14px;resize:vertical}
.daysum .hint{font-style:normal}

@media (max-width:700px){
  .dayrow{flex-wrap:wrap}
  .daymain{flex:1 1 100%;order:3}
  .dayadd select{max-width:none;flex:1 1 100%}
}

/*
 * เดิมที่นี่ขยายตัวหนังสือเฉพาะจอมือถือ เพราะยังไม่มีปุ่มปรับขนาด
 * ตอนนี้ขนาดปกติตั้งใหม่ให้อ่านง่ายทุกจอแล้ว และใครอยากใหญ่กว่านั้นกดปุ่มเอาเองได้
 * เหลือไว้แค่ระยะบรรทัด เพราะบรรทัดชิดกันบนจอแคบอ่านยากกว่าบนกระดาษจริง
 */
@media screen and (max-width:700px){
  .shotdoc .pistory{line-height:1.75}
  .shotdoc .planpart span,.shotdoc .planpart .scripted{line-height:1.8}
}

/* ---- กระดานวันนี้ — หนึ่งบรรทัดสองแถว แถวบนกวาดตา แถวล่างของรอบ ๆ งาน ---- */
.dayline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dayrow{flex-direction:column;align-items:stretch;gap:0}
.dayrow.focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.daytitle{flex:1 1 180px;min-width:0;font-size:15px;font-weight:700;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dayrow.done .daytitle{text-decoration:line-through;color:var(--muted)}
.dayrow.done{background:var(--soft)}

.daymeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:7px 0 0 24px}
.dayspace{flex:1}
.daykind{flex:none;padding:3px 10px;border-radius:99px;background:var(--accent-soft);color:var(--accent);
  font-size:11.5px;font-weight:700;white-space:nowrap}
.dayface{flex:none;padding:3px 11px;border:1.5px solid var(--line);border-radius:99px;background:var(--panel);
  color:var(--text);font:inherit;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.dayface:hover{border-color:var(--danger);color:var(--danger)}
.daywhoadd{flex:none;padding:2px 10px;border:1px dashed var(--line);border-radius:99px;background:none;
  color:var(--muted);font:inherit;font-size:11.5px;cursor:pointer;white-space:nowrap}
.daywhoadd:hover,.daywhoadd.on{border-color:var(--accent);color:var(--accent);border-style:solid}
.daychiplnk{flex:none;padding:2px 9px;border:0;border-radius:99px;background:var(--soft);color:var(--muted);
  font:inherit;font-size:11.5px;cursor:pointer;white-space:nowrap}
.daychiplnk:hover{color:var(--accent)}
/* ปุ่มกำหนดส่ง — ยังไม่ตั้งก็กดตั้งได้จากบรรทัดเลย */
/* กำหนดส่ง — ใส่กรอบแดงให้เห็นชัดว่าต้องส่งกี่โมง เพราะเป็นสิ่งที่พลาดไม่ได้ */
.daydue{flex:none;padding:3px 11px;border:2px solid var(--danger);border-radius:99px;background:var(--danger-soft);
  font:inherit;font-size:12px;font-weight:700;color:var(--danger);cursor:pointer;white-space:nowrap}
.daydue.off{border:1.5px dashed var(--line);background:none;font-weight:500;color:var(--muted)}
.daydue.off:hover{border-color:var(--accent);color:var(--accent)}
.daydue.late{background:var(--danger);color:var(--danger-ink);border-color:var(--danger)}
.dayfrom{flex:none;font-size:11.5px;color:var(--muted)}

.daygrip{cursor:grab;color:var(--muted);font-size:13px;user-select:none}
.daypickstate{flex:none;padding:6px 11px;border:1.5px solid var(--line);border-radius:99px;background:var(--panel);
  color:var(--text);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.dayrow.done .daypickstate{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.dayrow.doing .daypickstate,.dayrow.review .daypickstate,.dayrow.fix .daypickstate{
  border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.dayx{flex:none;border:0;background:none;color:var(--muted);font-size:14px;cursor:pointer;padding:2px 4px}
.dayx:hover{color:var(--text)}

.daywho{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0 0 24px;padding:8px 10px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.daywholab{font-size:12px;color:var(--muted);margin-right:2px}
.daydetail{margin:8px 0 0 24px;font-size:13.5px;line-height:1.7;color:var(--text);white-space:pre-wrap}
.daycarrynote{margin:7px 0 0 24px;padding:6px 10px;border-radius:8px;background:var(--warn-soft);
  color:var(--text);font-size:12.5px}
.daycarrynote i{font-style:normal;font-weight:700;color:var(--warn);margin-right:5px}
.dayedit,.daymovebox{margin:9px 0 2px 24px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.dayedit textarea,.daymovebox textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--text);font:inherit;font-size:13.5px;resize:vertical}
.dayedit .daykinds{margin-bottom:10px}

.daymine{margin-bottom:12px;padding:10px 12px;border:1px solid var(--accent);border-radius:11px;background:var(--accent-soft)}
.daymine > b{display:block;margin-bottom:7px;font-size:13.5px}
/* งานที่ถูกใส่ชื่อเราไว้ — ขึ้นชื่อกองก่อน เพราะคนอ่านต้องรู้ก่อนว่าเป็นงานของกองไหน */
.daymineone{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:6px;padding:11px 13px;border:1.5px solid var(--line);
  border-radius:10px;background:var(--panel);color:var(--text);font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.daymineone:hover{border-color:var(--accent)}
.daymineone .dmmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dmproj{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.dmtitle{font-size:15px;font-weight:700;line-height:1.4}
.daymineone small{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.daymineone .daykind{flex:none}
/* เวลาที่ต้องส่งในหน้างานของฉัน — กรอบแดงเหมือนกันกับบนกระดาน จะได้จำได้ว่าคืออันเดียวกัน */
.dmwhen{padding:2px 10px;border:2px solid var(--danger);border-radius:99px;background:var(--danger-soft);
  font-size:11.5px;font-weight:700;color:var(--danger)}
.daymineone > i{flex:none;font-style:normal;font-size:12px;font-weight:700;color:var(--muted)}

.daykinds{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:9px 0 0}
/* ช่องเขียนงานใหม่ — หัวข้อเต็มบรรทัดแรก แล้วค่อยไล่ลงมาทีละเรื่อง ปุ่มเพิ่มอยู่ท้ายสุด */
.dayaddmain{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);
  color:var(--text);font:inherit;font-size:15px}
.dayaddside{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.dayaddside .timein{min-width:120px}
.dayduerow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dayadd textarea{width:100%;margin-top:9px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--text);font:inherit;font-size:13.5px;resize:vertical}
.dayaddgo{width:100%;margin-top:10px}

@media (max-width:700px){
  .daymeta,.daywho,.daydetail,.daycarrynote,.dayedit,.daymovebox{margin-left:0}
  .dayaddside select{flex:1 1 100%}
}

/* ไอเดียที่ผ่านแล้ว — ย่อเหลือชื่อ กดกางอ่านได้ */
.ideashort{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:1px solid var(--accent);
  border-radius:9px;background:var(--accent-soft);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.ideashort:hover{filter:brightness(1.03)}
.ideashortmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ideashortmain b{font-size:13.5px;font-weight:600}
.ideashortmain small{font-size:11.5px;color:var(--muted)}
.ideashort i{flex:none;font-style:normal;font-size:11.5px;color:var(--accent)}
.ideashort .pickbox{width:20px;height:20px;font-size:12px;background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink);margin-top:0}
.ideaopen .ideashut{margin:4px 0 2px 34px;font-size:12px}

/* ไอเดียที่กางอ่านในคอลัมน์ขวา — คอลัมน์แคบกว่า จึงให้ชื่อคนกับปุ่มตกลงไปบรรทัดล่าง ข้อความจะได้เต็มความกว้าง */
.ideacol.done .idearow{flex-wrap:wrap}
.ideacol.done .idearow .who{width:100%;padding-top:2px}
.ideacol.done .idearow .reflink{white-space:normal}

/* ---- จัดลำดับถ่ายในหน้าส่งลูกค้า ---- */
.sendorder .sendrow{display:flex;align-items:center;gap:10px}
.sendorder .ordername{flex:1;min-width:0;text-align:left}
.aiorderbox{border-color:var(--accent);margin-bottom:12px}
.airows{margin:10px 0 12px;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.airows li b{font-size:13.5px}
.airows li i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:1px}

/* ป๊อปอัพอ่านบทของชิ้นเดียว */
.previewsheet{max-width:760px;width:100%;max-height:88vh;display:flex;flex-direction:column;padding:18px 20px}
.previewhead{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.previewhead > div{flex:1;min-width:0}
.previewhead b{font-size:17px}
.previewhead small{display:block;margin-top:3px;color:var(--muted);font-size:12.5px}
.previewbody{flex:1;overflow:auto;padding-right:4px}
.previewpart{margin-bottom:16px}
.previewpart > i{display:block;font-style:normal;font-size:11.5px;font-weight:700;color:var(--accent);margin-bottom:5px}
.previewpart p{margin:0 0 7px;font-size:14.5px;line-height:1.75;white-space:pre-wrap}
.previewpart p b{font-weight:700}
.previewsheet .scripted{font-size:14.5px;line-height:1.8;white-space:pre-wrap}

/* คอนเทนต์ที่ยังไม่มีคนเขียน — รับเองหรือมอบให้คนอื่นได้จากแถวนั้นเลย */
.nowriter .whopick{display:flex;align-items:center;gap:5px;flex-wrap:wrap;max-width:420px}

/* กองที่กดว่าถ่ายเสร็จแล้ว — จางหายก่อนย้ายไปกลุ่มถ่ายแล้ว */
.projrow.fading{opacity:.15;transform:translateX(14px);transition:opacity .4s ease,transform .4s ease}
.shotdone{margin-top:16px;border:1px dashed var(--line);border-radius:12px;background:var(--panel)}
.shotdone summary{cursor:pointer;padding:11px 14px;font-size:13px;color:var(--muted)}
.shotdone[open] summary{border-bottom:1px solid var(--line)}
.shotdone .rows{padding:8px}
.shotdone .projrow{opacity:.85}

/* ---- กองที่ผ่านมา ---- */
.monthcard{cursor:pointer}
.monthcard:hover{border-color:var(--accent)}
.pastshoot{margin-bottom:14px}
.pastclip .rowmain{flex:1;min-width:0}
.pastlog{align-items:flex-start;gap:10px}
.pastkind{flex:none;padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:700;white-space:nowrap;
  background:var(--soft);color:var(--muted)}
.pastkind.cancel{background:var(--danger-soft);color:var(--danger)}
.pastkind.later{background:var(--warn-soft);color:var(--warn)}
.pastkind.other{background:var(--accent-soft);color:var(--accent)}
.pastreason{margin:5px 0 0;font-size:13.5px;line-height:1.7;white-space:pre-wrap}
.pastsheet{max-width:520px;width:100%;padding:18px 20px}
.pastsheet > b{font-size:17px}
.pastsheet textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--text);font:inherit;font-size:14.5px;resize:vertical}

/* ข้อความแจ้งผลสำเร็จ ลอยกลางล่างจอ หายเองในสามวินาที */
.noticefloat{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:70;pointer-events:none;
  padding:11px 18px;border-radius:12px;font-size:14px;font-weight:600;line-height:1.4;max-width:86vw;text-align:center;
  color:var(--accent-ink);background:var(--accent);box-shadow:0 10px 30px rgba(0,0,0,.22);
  animation:noticein .18s ease-out, noticeout .6s ease-in 2.4s forwards}
@keyframes noticein{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes noticeout{to{opacity:0}}
@media print{.noticefloat{display:none!important}}

/* งานจากกระดานวันนี้ที่ยกมาโชว์ในหน้าโปรเจ็ค */
.daytaskcard{border-color:var(--accent)}
.daytaskrow{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer}
.daytaskrow .rowmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;background:none;border:0;padding:0}
.daytaskrow b{font-size:14.5px;font-weight:700}
.daytaskrow small{color:var(--muted);font-size:12px}
/* ชื่องานบนกระดานที่ผูกกับกอง กดแล้วไปหน้าโปรเจ็คนั้น */
.daytitle.golink{border:0;background:none;padding:0;color:var(--text);font:inherit;font-size:16px;font-weight:700;
  text-align:left;cursor:pointer}
.daytitle.golink:hover{color:var(--accent);text-decoration:underline}

/*
 * สถานที่ Vendor และ Extra ที่ขอผ่าน Production support
 * เป็นหัวข้อของตัวเองในบท ไม่ได้อยู่รวมกับพร็อพ เพราะวัดหรือโรงเรียนไม่ใช่ของที่หยิบไปกอง
 */
.pisup{margin:6px 0 0;padding-top:6px;border-top:1px solid #eceef5;font-size:11px;line-height:1.7}
.pisup>i{display:block;margin-bottom:3px;font-style:normal;color:var(--pl-text);
  font-weight:600;font-size:10px;letter-spacing:.05em}
.pisup b{color:#1b2136;font-weight:600;font-variant-numeric:tabular-nums}
.onscreen .pisup{font-size:13.5px;border-top-color:var(--line-soft);color:var(--text)}
.onscreen .pisup>i{font-size:11.5px;color:var(--accent)}
.onscreen .pisup b{color:var(--text)}
.suppline li{color:#3c4257}
.supmark{display:inline-block;margin-right:6px;padding:0 6px;border-radius:99px;background:var(--pl-soft,#eef2fb);
  color:var(--pl-text);font-size:9.5px;font-weight:700;letter-spacing:.03em}
.supwait{margin-left:5px;font-style:normal;font-size:9.5px;color:#a0451f}
/* หาไม่ได้ คือเรื่องที่ต้องสะดุดตาที่สุดในใบ เพราะวันถ่ายจะไม่มีของหรือไม่มีที่ */
.supwait.bad{font-weight:700;color:#b42318}
/* เบอร์ เวลานัด และสิ่งที่ทีมสั่งไว้ · เกาะอยู่กับบรรทัดเดียวกับชื่อ ไม่แตกเป็นแถวใหม่ */
.supbit{margin-left:6px;font-style:normal;font-size:10px;color:#5a6076}
.supbit.wide{display:block;margin:1px 0 0}
.onscreen .supbit{font-size:12px;color:var(--muted)}
.onscreen .suppline li{color:var(--text)}
.onscreen .supmark{background:var(--accent-soft);color:var(--accent)}
/* ฉบับที่ลูกค้าเปิดจากลิงก์ · หัวข้อเดียวกันแต่ไม่มีเบอร์ของใครอยู่ในนั้น */
.pubsuphead{display:block;margin:10px 0 4px;font-style:normal;font-weight:600;
  font-size:11.5px;letter-spacing:.04em;color:var(--muted)}
.pubprop.pubsup span{color:var(--text)}
/* ป้ายหน้าตัวเลขที่ยังเป็นราคากะไว้ · ลูกค้าต้องแยกออกจากราคาที่ตกลงแล้ว */
.pubguess{font-style:normal;font-weight:600;font-size:9.5px;letter-spacing:.03em;color:#a0451f}
.onscreen .pubguess{font-size:11px;color:var(--accent)}
/* บนจอมืด สีส้มเข้มของใบที่พิมพ์จะจมไปกับพื้น จึงใช้สีเดียวกันแต่สว่างขึ้น */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pubguess{color:#f0a07d}}
:root[data-theme="dark"] .pubguess{color:#f0a07d}

/* ---------- เช็คชื่อรายวัน ---------- */
.attendbtn{flex:none;font-weight:700}
.attendbtn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.standby{border-color:var(--line)}
.stfaces{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.stface{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;width:60px}
.stface i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-style:normal;font-size:17px;
  font-weight:700;background:var(--soft);color:var(--text);border:3px solid var(--line)}
.stface b{font-size:11px;font-weight:600;text-align:center;line-height:1.25;max-width:60px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.stface u{position:absolute;top:-3px;right:4px;font-size:13px;text-decoration:none;line-height:1}
/* สีกรอบคือแผนก · คนเดียวกันในทุกหน้าจะได้สีเดียวกันเสมอ */
.stface.dept-ops i{border-color:#5b5fc7}
.stface.dept-creative i{border-color:#2f9e6b}
.stface.dept-ae i{border-color:#d9822b}
.stface.dept-prop i{border-color:#c0392b}
.stface.dept-camera i{border-color:#1f8fd0}
.stface.dept-edit i{border-color:#8b5cf6}
.stface.dept-motion i{border-color:#db2777}
.stface.dept-support i{border-color:#0f766e}
.stface.dept-acct i{border-color:#8a6d00}
.stface.off i,.stface.none i,.stface.shoot i{opacity:.5}
.stothers{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:8px}
.stgroup .stname{font-size:12px;font-weight:700;color:var(--muted)}
.stgroup .stfaces{margin-top:6px}

.attendsheet{max-width:440px;width:100%;padding:18px 20px}
.attendsheet > b{font-size:17px}
.attendpick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.attendone{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px;border:2px solid var(--line);
  border-radius:12px;background:var(--panel);color:var(--text);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.attendone u{font-size:22px;text-decoration:none}
.attendone.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.attendsheet input,.attendsheet select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--text);font:inherit;font-size:14.5px}

.attendday{margin-bottom:12px}
.attendday.off{opacity:.75}
.attendrow{align-items:center;gap:10px}
.attendkind{flex:none;min-width:78px;text-align:center;padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:700;
  background:var(--soft);color:var(--muted)}
.attendkind.office{background:var(--accent-soft);color:var(--accent)}
.attendkind.wfh{background:var(--ok-soft);color:var(--ok)}
.attendkind.shoot{background:var(--warn-soft);color:var(--warn)}
.attendmiss{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.attendmiss i{font-style:normal;font-weight:700;color:var(--danger);margin-right:6px}
@media (max-width:640px){ .stname{flex:1 1 100%;padding-top:0} .attendpick{grid-template-columns:repeat(2,1fr)} }

/* ---------- แถบเมนู — คั่นกลุ่ม และลิ้นชักเครื่องมือ ---------- */
.navgap{flex:none;align-self:center;width:1px;height:18px;margin:0 6px;background:var(--line)}
.navtab.toolstab .navlab{white-space:nowrap}
.toolswrap{position:fixed;inset:0;z-index:60;background:rgba(15,17,26,.28)}
.toolspanel{position:absolute;left:50%;top:64px;transform:translateX(-50%);width:min(420px,92vw);
  padding:14px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:6px}
.toolspanel > b{font-size:14px;margin-bottom:4px}
.toolsone{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--text);font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer}
.toolsone:hover{border-color:var(--accent);color:var(--accent)}
.toolsone.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.toolsone .navico{display:block;width:18px;height:18px;flex:none;opacity:.8}
@media (max-width:820px){ .navgap{display:none} }

/* ---------- สามกล่องหลักของหน้าแรก Content ---------- */
.homegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}
.homebox{display:flex;flex-direction:column;border:2px solid var(--line);border-radius:14px;background:var(--panel);
  padding:13px 14px;min-height:150px}
.hbhead{margin-bottom:10px}
.hbhead b{display:block;font-size:15.5px;font-weight:700;line-height:1.35}
.hbhead small{display:block;margin-top:3px;font-size:11.5px;color:var(--muted)}
.hbrows{display:flex;flex-direction:column;gap:6px}
.hbrow{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel-2);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.hbrow:hover{border-color:currentColor}
.hbmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hbmain b{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbmain small{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbday,.hbcount{flex:none;padding:3px 9px;border-radius:99px;background:var(--soft);color:var(--muted);
  font-size:11.5px;font-weight:700}
.hbday.late{background:var(--danger);color:var(--danger-ink)}
.hbrow.late{border-color:var(--danger)}
.hbempty{flex:1;display:grid;place-items:center;padding:14px 8px;font-size:12.5px;color:var(--muted);text-align:center}
/* คนละสีต่อกล่อง จะได้รู้ว่ากำลังดูเรื่องไหนโดยไม่ต้องอ่านหัวข้อซ้ำ */
.homebox.chase{border-color:var(--warn)}
.homebox.chase .hbhead b{color:var(--warn)}
.homebox.wait{border-color:var(--accent)}
.homebox.wait .hbhead b{color:var(--accent)}
.homebox.idea{border-color:var(--ok)}
.homebox.idea .hbhead b{color:var(--ok)}
@media (max-width:1000px){ .homegrid{grid-template-columns:1fr} }

/* ปุ่มเปิดฟอร์มเพิ่มงาน — ฟอร์มเต็มยุบไว้ข้างหลัง เพราะคนเปิดกระดานเพื่ออ่าน ไม่ได้เพิ่มงานทุกครั้ง */
.dayaddopen{width:100%;margin-top:10px;font-weight:700}
/* ป้ายว่ามีรายละเอียดซ่อนอยู่ในบรรทัดนี้ */
.daymore{flex:none;border:0;background:none;color:var(--muted);font-size:13px;cursor:pointer;padding:2px 4px}
.daymore.on,.daymore:hover{color:var(--accent)}

/* ---------- เป้าของรอบ แบบแถบพลังในเกม ---------- */
/*
 * การ์ดนี้กว้างเต็มหน้า เนื้อหาจึงต้องกระจายให้เต็มด้วย ไม่ใช่กองอยู่ซ้ายแล้วปล่อยขวาว่าง
 * ซ้ายคือคะแนนของรอบ กลางคือหลอดพลังที่ยืดเต็มที่ว่าง ขวาคือตัวเลขสรุปสามช่อง
 */
.monthcard.quest{position:relative;overflow:hidden;display:flex;align-items:center;gap:22px;padding:16px 20px;
  border:0;border-radius:16px;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,#4c4fd1 0%,#6d5cf0 45%,#8b5cf6 100%);
  box-shadow:0 12px 30px rgba(76,79,209,.28)}
.monthcard.quest::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 90% -10%, rgba(255,255,255,.26), transparent 60%)}
.monthcard.quest:hover{transform:translateY(-1px);transition:transform .15s ease}
.qleft{position:relative;z-index:1;flex:none;min-width:190px}
.qlabel{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.qnum{display:flex;align-items:baseline;gap:8px;margin:2px 0 1px}
.qnum b{font-size:46px;font-weight:800;line-height:1;letter-spacing:-.02em}
.qnum span{font-size:19px;font-weight:700;opacity:.75}
.qwhen{display:block;font-size:12px;opacity:.8}
.qmid{position:relative;z-index:1;flex:1;min-width:160px}
.qbar{height:18px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.2)}
.qbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ffd166,#ff9f1c);
  box-shadow:0 0 16px rgba(255,190,80,.85);transition:width .6s cubic-bezier(.3,1.4,.5,1)}
.qfoot{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:12.5px;font-weight:600;opacity:.92}
.qpct{font-weight:800}
.qstats{position:relative;z-index:1;flex:none;display:flex;gap:10px}
.qstat{min-width:92px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.16);text-align:center}
.qstat b{display:block;font-size:22px;font-weight:800;line-height:1.1}
.qstat span{font-size:11px;opacity:.85}
.monthcard.quest.full .qbar i{background:linear-gradient(90deg,#8ef5b5,#37d67a);box-shadow:0 0 16px rgba(55,214,122,.9)}
@media (max-width:900px){
  .monthcard.quest{flex-wrap:wrap;gap:14px}
  .qleft{min-width:0;flex:1 1 100%}
  .qmid{flex:1 1 100%}
  .qstats{flex:1 1 100%;justify-content:space-between}
  .qstat{flex:1}
  .qnum b{font-size:38px}
}
@media print{ .monthcard.quest{display:none} }

/* ---------- กล่องต้อนรับหน้าแรก ---------- */
.hello{display:flex;align-items:center;gap:14px;margin:18px 0 16px;padding:14px 16px;border:1px solid var(--line);
  border-radius:14px;background:var(--panel)}
.hello .hface{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  font-size:22px;font-weight:800;color:var(--accent-ink);background:linear-gradient(135deg,#6d5cf0,#8b5cf6);
  box-shadow:0 6px 16px rgba(109,92,240,.35)}
.hello .hmain{flex:1;min-width:0}
.hello .kicker{display:block;font-size:10.5px;letter-spacing:.1em}
.hello h2{margin:1px 0 0;font-size:24px;line-height:1.25}
.hbits{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px}
.hbits span{padding:3px 10px;border-radius:99px;background:var(--soft);color:var(--muted);font-size:12px;font-weight:600}
.hbits span:first-child{background:var(--accent-soft);color:var(--accent)}
@media (max-width:640px){ .hello{gap:11px;padding:12px} .hello h2{font-size:20px} .hello .hface{width:44px;height:44px;font-size:19px} }

/* ---------- รูปพนักงาน ---------- */
.facepic{border-radius:50%;object-fit:cover;display:block;background:var(--soft)}
.faceletter{display:grid;place-items:center;border-radius:50%;font-style:normal;font-weight:800;
  background:var(--soft);color:var(--text)}
.stface .facepic,.stface .faceletter{border:3px solid var(--line);box-sizing:border-box}
.hello .hface .facepic,.hello .hface .faceletter{border:0;color:var(--accent-ink);
  background:linear-gradient(135deg,#6d5cf0,#8b5cf6)}
.hello .hface{background:none;box-shadow:none;width:auto;height:auto}
.mface{flex:none;cursor:pointer;display:block}
.mface .facepic,.mface .faceletter{border:2px solid var(--line);box-sizing:border-box}
.mface:hover .facepic,.mface:hover .faceletter{border-color:var(--accent)}
.mn .lnk.small{font-size:11px;margin-left:6px}

/* ---------- การ์ดขอรูปพนักงาน ---------- */
.faceask{display:flex;align-items:center;gap:14px;border:2px dashed var(--accent);background:var(--accent-soft)}
.faceask .fabig{flex:none}
.faceask .famain{flex:1;min-width:0}
.faceask .famain b{font-size:15.5px}
.faceask .famain p{margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.6}
.faceask .faceup{flex:none;cursor:pointer}

/* ---------- บอร์ดข้อความถึงทีม ---------- */
/* วางใต้แถบเมนู และเลี่ยงกล่องสิ่งที่ต้องทำที่ลอยอยู่มุมขวาบนของบางหน้า */
.shoutfab{position:fixed;right:18px;top:118px;z-index:55;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:20px;cursor:pointer;
  box-shadow:var(--shadow);display:grid;place-items:center}
.shoutfab:hover,.shoutfab.on{border-color:var(--accent);transform:translateY(-1px)}
.shoutfab i{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  background:var(--danger);color:var(--danger-ink);font-style:normal;font-size:11px;font-weight:800;line-height:19px}
.shoutwrap{position:fixed;inset:0;z-index:60;background:rgba(15,17,26,.3)}
/*
 * กล่องประกาศกับกองวันนี้ เว้นที่ด้านขวาให้พ้นรางไอคอนทั้งราง
 * ของเดิมกางลงมาทับปุ่มสิ่งที่ต้องทำที่อยู่ใต้มัน กดไม่ได้ทั้งที่ยังเห็นอยู่
 */
.shoutpanel{position:absolute;right:76px;top:172px;width:min(430px,92vw);max-height:72vh;overflow:auto;
  padding:14px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.25)}
.shouthead{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.shouthead b{font-size:15px}
.shouthead small{flex:1;color:var(--muted);font-size:12px}
.shoutnew textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);
  color:var(--text);font:inherit;font-size:14px;resize:vertical}
 /* ปุ่มของกล่องเขียนข้อความ อยู่บรรทัดเดียวกันทั้งหมด */
.shoutbar{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:nowrap}
.shoutbar .chip{flex:none;font-size:12px;padding:5px 10px}
.shoutbar .btn.small{flex:none;white-space:nowrap}
.shoutgap{flex:1}
.shoutlist{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.shoutitem{padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2)}
.shoutitem.fresh{border-color:var(--accent);background:var(--accent-soft)}
.shoutby{display:flex;align-items:center;gap:9px}
.shoutby span{flex:1;display:flex;flex-direction:column;line-height:1.3}
.shoutby small{color:var(--muted);font-size:11.5px}
.shoutitem p{margin:8px 0 0;font-size:14px;line-height:1.65;white-space:pre-wrap}
.shoutseen{display:block;margin-top:7px;font-size:11.5px;color:var(--muted)}

/* ป๊อปอัพข้อความใหม่ */
.shoutpopwrap{position:fixed;inset:0;z-index:75;background:rgba(15,17,26,.45);display:grid;place-items:center;padding:20px}
.shoutpop{width:min(460px,100%);padding:20px 22px;border-radius:18px;background:var(--panel);
  border:2px solid var(--accent);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.sptry{display:inline-block;margin-bottom:10px;padding:3px 10px;border-radius:99px;background:var(--warn-soft);
  color:var(--warn);font-size:11.5px;font-weight:700}
.spby{display:flex;align-items:center;gap:12px}
.spby span{display:flex;flex-direction:column;line-height:1.3}
.spby b{font-size:16px}
.spby small{color:var(--muted);font-size:12px}
.sptext{margin:14px 0;font-size:16px;line-height:1.7;white-space:pre-wrap}
.sptime{height:4px;border-radius:99px;background:var(--line-soft);overflow:hidden;margin-bottom:14px}
.sptime i{display:block;height:100%;background:var(--accent);animation:spdown 30s linear forwards}
@keyframes spdown{from{width:100%}to{width:0}}
.shoutpop .btn.big{width:100%}
@media print{ .shoutfab,.shoutpopwrap{display:none!important} }

/* ---------- ฟอร์มสร้างโปรเจ็คบนจอเล็ก ---------- */
@media (max-width:700px){
  /* ทุกช่องเต็มบรรทัด ไม่ต้องบีบให้อยู่แถวเดียวกันจนตัวหนังสือล้น */
  .newproj .frow{flex-direction:column;gap:2px}
  .newproj .frow .field,.newproj .field.wide{flex:1 1 100%;min-width:0;max-width:none;margin-bottom:12px}
  .newproj .field>input,.newproj .field>select,.newproj .field>textarea{width:100%}
  .newproj .field>span{font-size:13px}
  .newproj .field>span i{display:block;margin-top:2px;font-size:11.5px}
  .newproj .card{padding:13px}
  /* ปุ่มล่างสุดกดง่ายด้วยนิ้วโป้ง */
  .newproj .btnrow .btn{flex:1 1 100%}
  .briefbox.dirform .frow{flex-direction:column;gap:2px}
  .briefbox.dirform .frow .field{max-width:none !important}
}
.briefbox.dirform .filerow{display:flex;gap:7px;flex-wrap:wrap;align-items:center}

/* ---------- แถบบนและปุ่มลอยบนมือถือ ---------- */
@media (max-width:700px){
  /* ปุ่มที่ไม่ได้ใช้บนมือถือ ซ่อนไปก่อน แถบบนจะได้ไม่ล้นหลายบรรทัด */
  .top .widebtn{display:none}
  .top .who{font-size:12px}
  /* โทรโข่งไปอยู่มุมล่างขวาเหนือปุ่มจับเวลา ไม่ทับปุ่มบนแถบ */
  .shoutfab{top:auto;bottom:76px;right:18px;width:42px;height:42px;font-size:18px}
  .shoutpanel{top:auto;bottom:130px;right:12px;width:calc(100vw - 24px);max-height:62vh}  /* จอแคบกางเต็มกว้าง มีปุ่มปิดของตัวเอง */
}

/*
 * ช่องวันที่และเวลาบน iPhone
 * Safari ให้ช่องพวกนี้มีความกว้างขั้นต่ำของมันเอง และไม่ฟังคำสั่งความกว้างเต็มบรรทัด
 * ขอบขวาจึงล้นออกนอกการ์ด · ต้องปิดหน้าตาเริ่มต้นของเครื่องและปลดความกว้างขั้นต่ำออกก่อน
 */
input[type="date"],input[type="datetime-local"],input[type="month"],.timein{
  -webkit-appearance:none;appearance:none;
  width:100%;min-width:0;max-width:100%;box-sizing:border-box;text-align:left}
.field>input[type="date"],.field>.timein{display:block}

/*
 * ช่องเวลาแบบพิมพ์ได้ — กว้างพอดีกับ 00:00 และมีรายการเวลาให้กดเลือกจากแป้นของเบราว์เซอร์
 * ไม่ใช้ช่องเวลาของเบราว์เซอร์แล้ว เพราะมันกดเลือกได้อย่างเดียว บนมือถือเป็นวงล้อ
 */
.timein{font-variant-numeric:tabular-nums;letter-spacing:.3px}
.field>.timein,.cdedit .timein{max-width:140px}


/* ================== โลเคชั่น ==================
 * บล็อกโลเคชั่นในใบ Shotlist ขึ้นเสมอ ไม่ได้ซ่อนอยู่ใต้สวิตช์ทีมอีกแล้ว
 * จึงต้องอ่านง่ายทั้งบนจอและบนกระดาษ และห้ามขาดกลางหน้าตอนพิมพ์
 */
.pplaceblock{break-inside:avoid}
.pplacewho,.pplaceclips{display:block;font-size:9.5px;color:var(--pl-text);line-height:1.5}
.pplaceclips{color:#6b7280}
.pnomap{display:block;font-size:9.5px;font-style:normal;color:#b0453a}

/* กล่องเลือกโลเคชั่น — ขึ้นเมื่อกองมีหลายที่ กดการ์ดแล้วเปิดแผนที่ของที่นั้น */
.placesheet{max-width:520px}
.placecards{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.placecard{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel);text-decoration:none;color:inherit;
  transition:border-color .12s,transform .12s}
.placecard:hover{border-color:var(--accent);transform:translateY(-1px)}
.placecard.nomap{opacity:.72;cursor:default}
.placecard.nomap:hover{border-color:var(--line);transform:none}
.pcno{flex:none;width:32px;height:32px;border-radius:99px;background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
.pcmain{flex:1;min-width:0}
.pcmain b{display:block;font-size:20px;font-weight:700;line-height:1.3;overflow-wrap:break-word;word-break:normal}
/* เวลาสองตัวนี้คือสิ่งที่คนที่กองต้องอ่านจากไกล ตัวเลขจึงใหญ่กว่าคำกำกับมาก */
.pctimes{display:flex;gap:22px;margin-top:8px}
.pctimes span{display:block}
.pctimes i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.pctimes u{display:block;text-decoration:none;font-size:21px;font-weight:700;line-height:1.2;
  font-variant-numeric:tabular-nums}
.pcgo{flex:none;font-size:13.5px;font-weight:650;color:var(--accent)}
.placecard.nomap .pcgo{color:#b0453a;font-weight:500}
.placecalls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
@media (max-width:560px){
  .placecard{align-items:flex-start}
  .pcgo{align-self:flex-end}
}

/* ================== เตือนกองพรุ่งนี้ ==================
 * ไอคอนลอยอยู่ใต้ไอคอนโทรโข่ง เพื่อให้สองอันนี้อยู่เป็นชุดเดียวกัน ไม่กระจายคนละมุม
 * ป๊อปอัปเด้งเองครั้งเดียว กดรับทราบหรือกดปิดแล้วหุบเข้าไอคอน เปิดดูซ้ำได้ทั้งวัน
 */
.callfab{position:fixed;right:18px;top:174px;z-index:55;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:20px;cursor:pointer;
  box-shadow:var(--shadow);display:grid;place-items:center}
.callfab:hover,.callfab.on{border-color:var(--accent);transform:translateY(-1px)}
.callfab i{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  background:var(--danger);color:var(--danger-ink);font-style:normal;font-size:11px;font-weight:800;line-height:19px}
.callpanel{max-height:78vh}
.callpopwrap{position:fixed;inset:0;z-index:70;background:rgba(15,17,26,.45);display:grid;place-items:center;padding:18px}
.callpop{width:min(560px,96vw);max-height:86vh;display:flex;flex-direction:column;
  padding:18px 20px;border-radius:16px;background:var(--panel);border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.35)}
.calltop{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.calltop b{flex:1;font-size:19px;font-weight:700}
.callscroll{overflow:auto;display:flex;flex-direction:column;gap:14px}

.callbox{padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--bg)}
.callhead2{display:flex;align-items:flex-start;gap:12px}
.callhead2 b{display:block;font-size:16px;font-weight:650;line-height:1.35}
.callhead2 small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.callwhen{flex:none;text-align:center;padding:6px 12px;border-radius:10px;background:var(--accent-soft)}
.callwhen i{display:block;font-style:normal;font-size:10.5px;color:var(--muted)}
.callwhen u{display:block;text-decoration:none;font-size:20px;font-weight:700;color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1.15}
.callwarn{margin-top:10px;padding:7px 10px;border-radius:8px;font-size:12.5px;
  background:#fff4e5;border:1px solid #f0d9ad;color:#8a5a12}
.callrow{margin-top:12px}
.calllab{display:block;font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--muted);margin-bottom:6px}
.callplaces{display:flex;flex-wrap:wrap;gap:8px}
.callplace{flex:1 1 200px;padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--panel)}
.callplace b{display:block;font-size:13.5px;font-weight:600}
.callplace small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.callplace .lnk{font-size:12px;margin-right:10px}
.callcrew{display:flex;flex-wrap:wrap;gap:10px}
.callperson{display:flex;align-items:center;gap:7px}
.callperson i{font-style:normal}
.callperson b{display:block;font-size:13px;font-weight:600;line-height:1.25}
.callperson u{display:block;text-decoration:none;font-size:11.5px;color:var(--muted)}
.callclips{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.callclips li{display:flex;gap:10px;align-items:baseline}
.cctime{flex:none;width:52px;font-size:13px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--accent)}
.ccname{flex:1;font-size:13.5px;line-height:1.4}
.ccname i{display:block;font-style:normal;font-size:11.5px;color:var(--muted)}
.callseen{margin-top:12px;padding:8px 10px;border-radius:8px;font-size:12.5px;
  background:var(--line-soft);color:var(--muted)}
.callacts{display:flex;gap:8px;margin-top:14px;justify-content:flex-end}
@media (max-width:700px){
  .callfab{top:auto;bottom:128px;right:18px;width:42px;height:42px;font-size:18px}
  .callpop{padding:14px 15px}
  .callacts{flex-direction:column-reverse}
  .callacts .btn{width:100%;justify-content:center}
}
:root[data-theme="dark"] .callwarn{background:#3a2a0d;border-color:#6b5218;color:#f0c173}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .callwarn{
  background:#3a2a0d;border-color:#6b5218;color:#f0c173}}
.callread{flex:1;font-size:12.5px;font-weight:650;color:#16a34a;align-self:center}
.callacts .lnk{align-self:center;font-size:12.5px}

/* ================== ลูกค้าตัดสินจากในลิงก์ ==================
 * สองปุ่มเท่านั้น ผ่านกับขอแก้ · กดแล้วล็อก เพราะทีมเริ่มเตรียมของตามคำตอบนั้นไปแล้ว
 * ช่องพิมพ์คุยด้านล่างไม่ล็อก ใช้ถามเรื่องทั่วไปได้ตลอด
 */
.pubcard.pubok{border-left:4px solid var(--ok)}
.pubcard.pubask{border-left:4px solid var(--danger)}
.pubcard.pubnew{box-shadow:0 0 0 2px var(--accent-soft)}
.pubtag.new{margin-left:8px;font-size:11px;padding:2px 8px;border-radius:99px;
  background:var(--accent-soft);color:var(--accent);font-weight:650}
.verdictbox{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--line-soft)}
.verdictask{margin:0 0 10px;font-size:13.5px;color:var(--muted)}
.verdictrow{display:flex;gap:8px;justify-content:flex-end}
.verdictrow .btn{min-width:110px;justify-content:center}
/* ปุ่มยืนยันต้องดูเป็นปุ่มจริง ไม่ใช่ตัวหนังสือสีแดงบนพื้นขาว โดยเฉพาะบนมือถือที่กินเต็มบรรทัด */
.verdictrow .btn.danger{background:var(--danger);border-color:var(--danger);color:#fff;font-weight:650}
.verdictrow .btn.danger:hover{filter:brightness(1.06)}
/* ช่องนี้อยู่ใน .field ซึ่งบังคับสูง 230px สำหรับช่องเขียนบท · ของลูกค้าแค่สองสามบรรทัดพอ */
.verdictbox textarea,.verdictbox .field textarea{width:100%;box-sizing:border-box;min-height:104px;height:104px;
  padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text);
  font:inherit;font-size:14px;line-height:1.6;resize:vertical}
.verdictbox .field>span{font-size:13px}
.verdictdone{margin-top:14px;padding:11px 14px;border-radius:10px;font-size:13.5px;font-weight:600}
.verdictdone i{display:block;font-style:normal;font-size:12.5px;font-weight:400;color:var(--muted);margin-top:3px}
.verdictdone p{margin:6px 0 0;font-weight:400;font-size:13.5px;line-height:1.6}
.verdictdone.ok{background:var(--ok-soft,#e8f6ed);color:var(--ok)}
.verdictdone.ask{background:#fdeceb;color:#b0453a}
@media (max-width:560px){ .verdictrow{flex-direction:column} .verdictrow .btn{width:100%} }

/* การ์ดสรุปคำตอบลูกค้า ฝั่งทีม */
.verdictcard .vhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.verdictcard .vhead b{font-size:15.5px}
.verdictcard .vhead small{color:var(--muted);font-size:12.5px}
.vmore{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;border-radius:9px;
  background:var(--accent-soft);font-size:13px;margin-bottom:12px}
.vmore span{flex:1}
.vrows{display:flex;flex-direction:column;gap:8px}
.vrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel)}
.vrow.ask{border-color:var(--danger);background:#fdeceb}
.vrow.ok{opacity:.72}
.vrow .rowmain{flex:1;min-width:200px;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit}
.vrow .rowmain b{display:block;font-size:14px;font-weight:650}
.vrow .rowmain small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.vask{margin:7px 0 0;padding:8px 10px;border-radius:8px;background:var(--panel);
  font-size:13.5px;line-height:1.6;white-space:pre-wrap}
.vacts{display:flex;gap:6px;flex-wrap:wrap}
:root[data-theme="dark"] .vrow.ask{background:#3a1d1a}
:root[data-theme="dark"] .verdictdone.ask{background:#3a1d1a;color:#ffb2a7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vrow.ask{background:#3a1d1a}
  :root:not([data-theme="light"]) .verdictdone.ask{background:#3a1d1a;color:#ffb2a7}}

/* กรอบสีของกล่องกองในหน้ารายการ — บอกว่าตอนนี้งานอยู่ที่ใคร */
.sendrow.tone-sent{border-left:4px solid var(--accent)}
.sendrow.tone-bad{border-left:4px solid var(--danger)}
.sendrow.tone-ok{border-left:4px solid var(--ok)}
.sendrow.tone-none{border-left:4px solid var(--line)}
.sendrow .rowmain b .tag{margin-left:8px;vertical-align:middle}
.sendrow .tag.sent{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* ================== หน้าส่งลูกค้า จัดใหม่ ==================
 * รายการกองแบ่งกลุ่มตามว่าตอนนี้งานอยู่ที่ใคร ไม่ใช่ตามว่าใกล้ถ่ายแค่ไหน
 * แต่ละกลุ่มมีกรอบและพื้นสีของตัวเอง ให้กวาดตาแล้วรู้ทันทีว่ากองไหนยังไม่ส่ง
 */
.sendgroup{margin:0 0 20px;border-radius:14px;border:1px solid var(--line);overflow:hidden}
.sghead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:11px 16px}
.sghead b{font-size:15px;font-weight:700}
.sghead i{font-style:normal;font-size:12px;font-weight:700;padding:1px 9px;border-radius:99px;
  background:rgba(255,255,255,.65)}
.sghead small{flex:1 1 100%;font-size:12.5px;opacity:.75}
.sendgroup .rows{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
.sendgroup .sendrow{border-left:0;background:var(--panel);border-radius:10px}
.sendgroup.tone-bad{border-color:#e6b4ae;background:#fdeceb}
.sendgroup.tone-bad .sghead b{color:#b0453a}
.sendgroup.tone-none{border-color:var(--line);background:var(--line-soft)}
.sendgroup.tone-sent{border-color:#bcd0f5;background:#eef2fd}
.sendgroup.tone-sent .sghead b{color:var(--accent)}
.sendgroup.tone-ok{border-color:#b6ddc3;background:#eaf7ee}
.sendgroup.tone-ok .sghead b{color:#1a7f43}
.sendrow .soon{color:var(--danger);font-weight:650}
:root[data-theme="dark"] .sendgroup.tone-bad{background:#2d1715;border-color:#58302b}
:root[data-theme="dark"] .sendgroup.tone-sent{background:#161d33;border-color:#2c3a63}
:root[data-theme="dark"] .sendgroup.tone-ok{background:#122518;border-color:#27492f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sendgroup.tone-bad{background:#2d1715;border-color:#58302b}
  :root:not([data-theme="light"]) .sendgroup.tone-sent{background:#161d33;border-color:#2c3a63}
  :root:not([data-theme="light"]) .sendgroup.tone-ok{background:#122518;border-color:#27492f}}

/* การ์ดคำตอบลูกค้า — สามกลุ่ม เรียงตามสิ่งที่ต้องทำก่อน */
.vgroup{margin-top:14px;border-radius:12px;padding:10px 12px 12px}
.vgroup.ask{background:#fdeceb;border:1px solid #e6b4ae}
.vgroup.wait{background:var(--line-soft);border:1px solid var(--line)}
.vgroup.ok{background:#eaf7ee;border:1px solid #b6ddc3}
.vghead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.vghead b{font-size:14px;font-weight:700}
.vgroup.ask .vghead b{color:#b0453a}
.vgroup.ok .vghead b{color:#1a7f43}
.vghead small{flex:1 1 100%;font-size:12px;color:var(--muted)}
.vcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:8px}
.vcard:last-child{margin-bottom:0}
.vcard.ask{border-color:#e6b4ae}
.vtop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.vtop b,.vname{font-size:14.5px;font-weight:650;line-height:1.4}
.vname{background:none;border:0;padding:0;cursor:pointer;color:inherit;font-family:inherit;text-align:left}
.vname:hover{color:var(--accent)}
.vwho{flex:1;font-size:12.5px;color:var(--muted)}
.vsay{margin:8px 0 0;padding:9px 11px;border-radius:8px;background:#fdeceb;
  font-size:13.5px;line-height:1.65;white-space:pre-wrap}
.vacts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.vgap{flex:1}
.vacts .btn.small{margin-top:0}
:root[data-theme="dark"] .vgroup.ask,:root[data-theme="dark"] .vsay{background:#2d1715;border-color:#58302b}
:root[data-theme="dark"] .vgroup.ok{background:#122518;border-color:#27492f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vgroup.ask,
  :root:not([data-theme="light"]) .vsay{background:#2d1715;border-color:#58302b}
  :root:not([data-theme="light"]) .vgroup.ok{background:#122518;border-color:#27492f}}
.tabdot{font-style:normal;font-size:11px;font-weight:800;padding:1px 7px;border-radius:99px;
  background:var(--danger);color:var(--danger-ink);margin-left:5px}
@media (max-width:620px){ .vacts{flex-direction:column;align-items:stretch} .vacts .btn{width:100%;justify-content:center} .vgap{display:none} }

/* ข้อความบรรทัดรองของแถวกอง ต้องอยู่บรรทัดเดียวกันหมด ไม่ให้วันถ่ายหล่นลงบรรทัดใหม่ */
.sendrow .rowmain small{display:block;line-height:1.7}
.sendrow .rowmain small .soon{display:inline;white-space:nowrap;color:var(--danger);font-weight:650}

/* แถวในการ์ดคำตอบลูกค้า — ชื่อซ้าย ปุ่มขวา อยู่บรรทัดเดียวกันตราบที่จอกว้างพอ */
.vcard{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.vcard.ask{display:block}
.vmain{flex:1;min-width:220px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.vbtns{flex:none;display:flex;gap:8px;flex-wrap:wrap}
.vbtns .btn.small{margin-top:0;padding:8px 14px;font-size:13px;border-radius:9px;font-weight:650}
/* สองปุ่มนี้คือคนละทางกัน ต้องแยกสีให้เห็นตั้งแต่ยังไม่อ่านป้าย */
.btn.small.okbtn{border-color:#1a7f43;color:#1a7f43;background:#eaf7ee}
.btn.small.okbtn:hover{background:#1a7f43;border-color:#1a7f43;color:#fff}
.vbtns .btn.small.ghost{border:1px solid var(--line);color:var(--muted);background:var(--panel)}
.vbtns .btn.small.ghost:hover{border-color:var(--accent);color:var(--accent)}
:root[data-theme="dark"] .btn.small.okbtn{background:#12301d;border-color:#2f6b43;color:#79d79b}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.small.okbtn{
  background:#12301d;border-color:#2f6b43;color:#79d79b}}
@media (max-width:620px){
  .vcard{align-items:stretch}
  .vbtns{width:100%}
  .vbtns .btn.small{flex:1;justify-content:center}
}

/* ================== หัวหน้ารายละเอียดกองในหน้าส่งลูกค้า ==================
 * รวมชื่อกอง สถานะ ข้อมูลที่ต้องรู้ ปุ่มหลัก และแท็บ ไว้ในแถบเดียว
 * แถบเปลี่ยนสีตามสถานะ เปิดมาปุ๊บรู้ทันทีว่ากองนี้ไปถึงไหนแล้ว
 */
.csendhead{margin:0 0 18px;border-radius:16px;border:1px solid var(--line);background:var(--panel);
  padding:18px 20px 0;overflow:hidden}
.csendhead.tone-bad{border-color:#e6b4ae;background:linear-gradient(180deg,#fdeceb 0,var(--panel) 120px)}
.csendhead.tone-sent{border-color:#bcd0f5;background:linear-gradient(180deg,#eef2fd 0,var(--panel) 120px)}
.csendhead.tone-ok{border-color:#b6ddc3;background:linear-gradient(180deg,#eaf7ee 0,var(--panel) 120px)}
.chrow{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap}
.chmain{flex:1;min-width:260px}
.chkick{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.chmain h2{margin:4px 0 0;font-size:30px;font-weight:800;line-height:1.2;letter-spacing:-.01em}
.chtag{display:inline-block;vertical-align:middle;margin-left:10px;padding:4px 12px;border-radius:99px;
  font-size:13px;font-weight:650;letter-spacing:0;border:1px solid var(--line);color:var(--muted);background:var(--panel)}
.csendhead.tone-bad .chtag{border-color:#d9766b;color:#b0453a}
.csendhead.tone-sent .chtag{border-color:var(--accent);color:var(--accent)}
.csendhead.tone-ok .chtag{border-color:#51a771;color:#1a7f43}
.chbits{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:10px}
.chbits i{font-style:normal;font-size:12.5px;padding:3px 10px;border-radius:99px;
  background:var(--line-soft);color:var(--muted)}
.chbits i.soon{background:var(--danger-soft,#fdeceb);color:var(--danger);font-weight:650}
.chacts{flex:none;display:flex;gap:8px;flex-wrap:wrap}
.chacts .btn.big{width:auto;padding:12px 20px;font-size:15px}
.chsay{margin:14px 0 0;font-size:13.5px;color:var(--muted);line-height:1.6}
.chtabs{display:flex;gap:4px;margin:14px -20px 0;padding:0 20px;border-top:1px solid var(--line);
  overflow-x:auto}
.chtabs button{flex:none;padding:13px 16px;border:0;background:none;cursor:pointer;color:var(--muted);
  font:inherit;font-size:14.5px;font-weight:600;border-bottom:3px solid transparent;margin-bottom:-1px}
.chtabs button:hover{color:var(--text)}
.chtabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
:root[data-theme="dark"] .csendhead.tone-bad{border-color:#58302b;background:linear-gradient(180deg,#2d1715 0,var(--panel) 120px)}
:root[data-theme="dark"] .csendhead.tone-sent{border-color:#2c3a63;background:linear-gradient(180deg,#161d33 0,var(--panel) 120px)}
:root[data-theme="dark"] .csendhead.tone-ok{border-color:#27492f;background:linear-gradient(180deg,#122518 0,var(--panel) 120px)}
:root[data-theme="dark"] .chbits i.soon{background:#2d1715}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .csendhead.tone-bad{border-color:#58302b;background:linear-gradient(180deg,#2d1715 0,var(--panel) 120px)}
  :root:not([data-theme="light"]) .csendhead.tone-sent{border-color:#2c3a63;background:linear-gradient(180deg,#161d33 0,var(--panel) 120px)}
  :root:not([data-theme="light"]) .csendhead.tone-ok{border-color:#27492f;background:linear-gradient(180deg,#122518 0,var(--panel) 120px)}
  :root:not([data-theme="light"]) .chbits i.soon{background:#2d1715}}
@media (max-width:700px){
  .csendhead{padding:15px 16px 0}
  .chmain h2{font-size:23px}
  .chtag{display:block;margin:8px 0 0;width:fit-content}
  .chacts{width:100%}
  .chacts .btn{flex:1;justify-content:center}
  .chtabs{margin:12px -16px 0;padding:0 16px}
}

/* ================== กล่องกองในรายการ — สองบรรทัด สีประจำสถานะ ==================
 * ของเดิมสามบรรทัดและกล่องขาวหมดทุกใบ ต้องอ่านป้ายถึงจะรู้ว่าอันไหนเป็นอันไหน
 * ตอนนี้ทุกใบมีกรอบและพื้นสีของตัวเอง กวาดตาผ่านก็แยกออกโดยไม่ต้องอ่าน
 */
.sendgroup .rows{gap:10px}
.sendgroup .sendrow{display:flex;align-items:center;gap:12px;padding:12px 15px;
  border:1px solid var(--line);border-left-width:5px;border-radius:11px}
.sendrow .rowmain{flex:1;min-width:0;text-align:left}
.sendrow .rowmain b{display:block;font-size:15.5px;font-weight:700;line-height:1.35}
.sendrow .rowmain small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted);line-height:1.6}
.sendrow .sbit{font-style:normal;font-weight:600;color:var(--text);opacity:.75}
.sendrow .rowmain b .tag{font-size:11.5px;padding:2px 9px;font-weight:650}
/* สีประจำสถานะของแต่ละใบ ใช้ชุดเดียวกับหัวกลุ่ม */
.sendgroup.tone-bad .sendrow{border-color:#e6b4ae;border-left-color:var(--danger);background:#fff7f6}
.sendgroup.tone-sent .sendrow{border-color:#cdd9f7;border-left-color:var(--accent);background:#f7f9ff}
.sendgroup.tone-ok .sendrow{border-color:#c6e4d0;border-left-color:#1a7f43;background:#f6fcf8}
.sendgroup.tone-none .sendrow{border-color:var(--line);border-left-color:var(--muted);background:var(--panel)}
:root[data-theme="dark"] .sendgroup.tone-bad .sendrow{border-color:#4a2824;border-left-color:#c2564a;background:#241312}
:root[data-theme="dark"] .sendgroup.tone-sent .sendrow{border-color:#28345c;border-left-color:var(--accent);background:#141a2d}
:root[data-theme="dark"] .sendgroup.tone-ok .sendrow{border-color:#234029;border-left-color:#3f9a5f;background:#0f1f14}
:root[data-theme="dark"] .sendgroup.tone-none .sendrow{background:var(--panel)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sendgroup.tone-bad .sendrow{border-color:#4a2824;border-left-color:#c2564a;background:#241312}
  :root:not([data-theme="light"]) .sendgroup.tone-sent .sendrow{border-color:#28345c;border-left-color:var(--accent);background:#141a2d}
  :root:not([data-theme="light"]) .sendgroup.tone-ok .sendrow{border-color:#234029;border-left-color:#3f9a5f;background:#0f1f14}}

/* ================== การ์ดคำตอบลูกค้า ให้เด่นขึ้น ==================
 * หัวกลุ่มเป็นแถบสีทึบ ไม่ใช่ตัวหนังสือจาง ๆ และทุกใบมีขีดสีด้านซ้าย
 */
.vgroup{padding:0;overflow:hidden;border-width:2px}
.vghead{margin:0;padding:10px 14px;gap:8px}
.vghead b{color:#fff!important;font-size:14.5px}
.vghead small{color:rgba(255,255,255,.85)}
.vgroup.ask .vghead{background:#c2564a}
.vgroup.wait .vghead{background:#5b6680}
.vgroup.ok .vghead{background:#1a7f43}
.vgroup .vcard{margin:10px 12px;border-left-width:5px}
.vgroup.ask .vcard{border-color:#e6b4ae;border-left-color:#c2564a}
.vgroup.wait .vcard{border-left-color:#5b6680}
.vgroup.ok .vcard{border-color:#c6e4d0;border-left-color:#1a7f43}
.vgroup .vcard:last-child{margin-bottom:12px}
.verdictcard{border:1px solid var(--line)}

/* ================== หน้าส่งลูกค้า — แบบ A4 กับ B3 ==================
 * โจทย์คือเนื้อหาเรียบ หัวเรื่องเด่น สีจึงเหลือเฉพาะตรงที่บอกสถานะเท่านั้น
 * พื้นสีของกลุ่ม กรอบสีของการ์ด และแถบหัวสีทึบ ถูกเอาออกทั้งหมด
 */
.csendhead{background:var(--panel)!important;border-color:var(--line)!important}
.chmain h2{font-size:32px;font-weight:700}
.chbits{display:block;margin:10px 0 0;font-size:13.5px;color:var(--muted);line-height:1.7}
.chbits b{font-weight:650}
.chbits .soon{color:var(--danger)}
.chst{color:var(--muted)}
.chst.tone-bad{color:var(--danger)}
.chst.tone-sent{color:var(--accent)}
.chst.tone-ok{color:#1a7f43}
:root[data-theme="dark"] .chst.tone-ok{color:#6ccb95}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chst.tone-ok{color:#6ccb95}}

/* ---- ตารางคำตอบลูกค้า ---- */
.verdictcard .vhead{margin-bottom:4px}
.vtwrap{overflow-x:auto;margin-top:12px}
.vtable{width:100%;border-collapse:collapse;font-size:14.5px}
.vtable th{text-align:left;font-size:11.5px;letter-spacing:.08em;color:var(--muted);font-weight:700;
  padding:0 14px 9px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.vtable td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line-soft,var(--line));vertical-align:top}
.vtable th:last-child,.vtable td:last-child{padding-right:0;text-align:right}
.vt-open{background:none;border:0;padding:0;font:inherit;font-size:15px;font-weight:650;
  color:inherit;cursor:pointer;text-align:left;line-height:1.4}
.vt-open:hover{color:var(--accent)}
.vt-say{margin:6px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted);white-space:pre-wrap;max-width:46ch}
.vt-st{font-weight:650;font-size:13.5px;white-space:nowrap}
.vtable tr.ask .vt-st{color:var(--danger)}
.vtable tr.ok .vt-st{color:#1a7f43}
.vtable tr.wait .vt-st{color:var(--muted)}
:root[data-theme="dark"] .vtable tr.ok .vt-st{color:#6ccb95}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vtable tr.ok .vt-st{color:#6ccb95}}
.vt-when{font-size:13px;color:var(--muted);white-space:nowrap}
.vt-when i{display:block;font-style:normal;font-size:12px;opacity:.8;font-variant-numeric:tabular-nums}
.vt-acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.vt-acts .btn.small{margin-top:0}

/* ---- การ์ดกองเรียงแนวนอน ---- */
.sendgroup{margin:0 0 26px;border:0;background:none;border-radius:0;overflow:visible}
.sghead{padding:0 0 10px;gap:9px}
.sghead b{font-size:15px;font-weight:700;color:var(--text)}
.sghead i{background:var(--line-soft);color:var(--muted)}
.sghead small{flex:1 1 100%;color:var(--muted)}
.sqwrap{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.sqcard{position:relative;border:1px solid var(--line);border-radius:12px;background:var(--panel);
  transition:border-color .12s,transform .12s}
.sqcard:hover{border-color:var(--accent);transform:translateY(-1px)}
.sqcard.fading{opacity:.35}
.sqopen{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;
  background:none;border:0;padding:15px 16px;font:inherit;color:inherit;cursor:pointer}
.sqnum{flex:none;text-align:center;min-width:48px}
.sqnum u{display:block;text-decoration:none;font-size:30px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--muted)}
.sqnum em{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:4px}
.sqnum.tone-bad u{color:var(--danger)}
.sqnum.tone-sent u{color:var(--accent)}
.sqnum.tone-ok u{color:#1a7f43}
:root[data-theme="dark"] .sqnum.tone-ok u{color:#6ccb95}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sqnum.tone-ok u{color:#6ccb95}}
.sqbody{flex:1;min-width:0}
.sqbody b{display:block;font-size:16px;font-weight:700;line-height:1.3}
.sqbody small{display:block;font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.55}
.sqbody .sqst{font-weight:600;color:var(--text);opacity:.78}
.sqbody .soon{color:var(--danger);font-weight:650}
/* ปุ่มถ่ายเสร็จอยู่ในแถวของตัวเอง ไม่ลอยทับตัวหนังสือของการ์ด */
.senddone .sqwrap{margin-top:12px;opacity:.75}
@media (max-width:560px){ .sqwrap{grid-template-columns:1fr} }

/* ================== เปลี่ยนเป็นแบบ A2 กับ B4 ==================
 * A2 — การ์ดขาว ขีดสีเส้นเดียวด้านซ้าย หัวเรื่องมีขีดสั้นคั่น
 * B4 — การ์ดกองสองชั้น ชั้นบนขาวเก็บข้อมูล ชั้นล่างเป็นแถบสีเก็บสถานะ
 */
.chrule{display:block;width:52px;height:3px;border-radius:2px;margin:12px 0 0;background:var(--muted)}
.chrule.tone-bad{background:var(--danger)}
.chrule.tone-sent{background:var(--accent)}
.chrule.tone-ok{background:#1a7f43}
.chbits{margin-top:12px}

/* ---- การ์ดคำตอบลูกค้า ---- */
.vklabel{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:22px 0 9px}
.vklabel b{font-size:14px;font-weight:700}
.vklabel small{font-size:12.5px;color:var(--muted)}
.vk{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:9px;padding:13px 15px;
  border:1px solid var(--line);border-left:6px solid var(--muted);border-radius:10px;background:var(--panel)}
.vk.ask{border-left-color:var(--danger)}
.vk.ok{border-left-color:#1a7f43;opacity:.78}
.vkmain{flex:1;min-width:220px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.vkname{background:none;border:0;padding:0;font:inherit;font-size:15px;font-weight:650;
  color:inherit;cursor:pointer;text-align:left;line-height:1.4}
.vkname:hover{color:var(--accent)}
.vkwhen{flex:1;font-size:12.5px;color:var(--muted)}
.vksay{flex:1 1 100%;margin:7px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted);white-space:pre-wrap}
.vkacts{flex:none;display:flex;gap:7px;flex-wrap:wrap}
.vkacts .btn.small{margin-top:0}
:root[data-theme="dark"] .vk.ok{border-left-color:#3f9a5f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vk.ok{border-left-color:#3f9a5f}}
@media (max-width:620px){ .vkacts{width:100%} .vkacts .btn{flex:1;justify-content:center} }

/* ---- การ์ดกองสองชั้น ---- */
.sqcard{display:flex;flex-direction:column;overflow:hidden}
.sqopen{flex:1;display:block;width:100%;text-align:left;background:none;border:0;
  padding:15px 16px 13px;font:inherit;color:inherit;cursor:pointer}
.sqopen b{display:block;font-size:16.5px;font-weight:700;line-height:1.3}
.sqopen small{display:block;font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.55}
.sqopen .soon{color:var(--danger);font-weight:650}
.sqfoot{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 16px;font-size:12.5px;font-weight:650;
  border-top:1px solid var(--line);background:var(--line-soft);color:var(--muted);min-height:38px}
.sqfoot span{flex:1;min-width:0}
.sqfoot .sqshot{flex:none;margin:0;padding:5px 11px;font-size:12px}
.sqcard.tone-bad .sqfoot{background:#fdeceb;color:#b0453a;border-top-color:#e6b4ae}
.sqcard.tone-sent .sqfoot{background:var(--accent-soft);color:var(--accent);border-top-color:#cdd9f7}
.sqcard.tone-ok .sqfoot{background:#eaf7ee;color:#1a7f43;border-top-color:#c6e4d0}
:root[data-theme="dark"] .sqcard.tone-bad .sqfoot{background:#2d1715;color:#ef9c90;border-top-color:#4a2824}
:root[data-theme="dark"] .sqcard.tone-ok .sqfoot{background:#122518;color:#6ccb95;border-top-color:#234029}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sqcard.tone-bad .sqfoot{background:#2d1715;color:#ef9c90;border-top-color:#4a2824}
  :root:not([data-theme="light"]) .sqcard.tone-ok .sqfoot{background:#122518;color:#6ccb95;border-top-color:#234029}}

/* ---- หน้ารายการกอง เป็นตาราง ---- */
.sqtwrap{overflow-x:auto}
.sqtable{width:100%;border-collapse:collapse;font-size:14.5px}
.sqtable th{text-align:left;font-size:11.5px;letter-spacing:.08em;color:var(--muted);font-weight:700;
  padding:0 16px 9px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.sqtable td{padding:12px 16px 12px 0;border-bottom:1px solid var(--line-soft,var(--line));vertical-align:top}
.sqtable th:last-child,.sqtable td:last-child{padding-right:0;text-align:right}
.sqtable tr.fading{opacity:.35}
.sq-name button{background:none;border:0;padding:0;font:inherit;font-size:15.5px;font-weight:650;
  color:inherit;cursor:pointer;text-align:left;line-height:1.4}
.sq-name button:hover{color:var(--accent)}
.sq-n{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.sq-host{color:var(--muted);white-space:nowrap}
.sq-when{white-space:nowrap;color:var(--muted);font-size:13.5px}
.sq-when .soon{color:var(--danger);font-weight:650}
.sq-st{font-size:13.5px;font-weight:650;color:var(--muted);min-width:170px}
.sq-st i{display:block;font-style:normal;font-size:12.5px;font-weight:400;color:var(--muted);opacity:.85;margin-top:2px}
.sq-st.tone-bad{color:var(--danger)}
.sq-st.tone-sent{color:var(--accent)}
.sq-st.tone-ok{color:#1a7f43}
:root[data-theme="dark"] .sq-st.tone-ok{color:#6ccb95}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sq-st.tone-ok{color:#6ccb95}}
.sq-do .btn.small{margin-top:0;white-space:nowrap}
.senddone .sqtwrap{margin-top:10px;opacity:.78}

/* ================== ตารางของหน้าส่งลูกค้า ==================
 * ใช้ชุดเดียวกันทั้งหน้ารายการกองและหน้าข้างใน จะได้อ่านแบบเดียวกัน
 * มีกรอบรอบตาราง เส้นคั่นระหว่างคอลัมน์ แถวสูงเท่ากัน และสถานะเป็นแถบสีในคอลัมน์ของตัวเอง
 */
.otwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.optable{width:100%;border-collapse:collapse;font-size:15px}
.optable th{
  text-align:left;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted);
  padding:11px 16px;background:var(--line-soft);border-bottom:1px solid var(--line);white-space:nowrap;
}
.optable th + th,.optable td + td{border-left:1px solid var(--line)}
.optable td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle;height:56px}
.optable tbody tr:last-child td{border-bottom:0}
.optable tbody tr:hover{background:var(--line-soft)}
.optable tr.fading{opacity:.35}

.ot-name{min-width:230px}
.ot-name button{background:none;border:0;padding:0;font:inherit;font-size:15.5px;font-weight:650;
  color:inherit;cursor:pointer;text-align:left;line-height:1.4}
.ot-name button:hover{color:var(--accent)}
.ot-name i{display:block;font-style:normal;font-size:13.5px;line-height:1.6;color:var(--muted);
  margin-top:5px;white-space:pre-wrap;max-width:44ch}
.ot-num{width:64px;text-align:center;font-variant-numeric:tabular-nums;font-weight:650;color:var(--muted)}
.ot-who{white-space:nowrap;color:var(--muted);font-size:14px}
.ot-when{white-space:nowrap;color:var(--muted);font-size:13.5px;font-variant-numeric:tabular-nums}
.ot-when .soon{color:var(--danger);font-weight:700}
.ot-st{white-space:nowrap}
.ot-st i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:4px}
.otpill{display:inline-block;padding:4px 12px;border-radius:99px;font-size:12.5px;font-weight:700;
  border:1px solid var(--line);color:var(--muted);background:var(--panel)}
.otpill.tone-bad{border-color:#d9766b;color:#b0453a;background:#fdeceb}
.otpill.tone-sent{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.otpill.tone-ok{border-color:#51a771;color:#1a7f43;background:#eaf7ee}
:root[data-theme="dark"] .otpill.tone-bad{border-color:#7a3a33;color:#ef9c90;background:#2d1715}
:root[data-theme="dark"] .otpill.tone-ok{border-color:#2f6b43;color:#6ccb95;background:#122518}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .otpill.tone-bad{border-color:#7a3a33;color:#ef9c90;background:#2d1715}
  :root:not([data-theme="light"]) .otpill.tone-ok{border-color:#2f6b43;color:#6ccb95;background:#122518}}
.ot-do{text-align:right;white-space:nowrap}
.otacts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap}
.otacts .btn.small{margin-top:0;white-space:nowrap}
.senddone .otwrap{margin-top:10px;opacity:.8}

/* ================== รวมกองที่ถ่ายวันเดียวกัน ================== */
.mergebar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px;padding:12px 16px;
  border-radius:11px;border:1px solid var(--accent);background:var(--accent-soft);font-size:13.5px;line-height:1.6}
.mergebar span{flex:1;min-width:240px}
.mergebar b{display:block;font-weight:700;font-size:14.5px;margin-bottom:2px}
.mergebar .btn{flex:none;margin-top:0}
.mergebar.on{border-color:var(--line);background:var(--line-soft)}
/* ป้ายเล็ก ๆ บอกว่าคอนเทนต์ชิ้นนี้มาจากโปรเจ็คไหน เห็นเฉพาะกองที่รวมกันไว้ */
.fromtag{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:99px;font-style:normal;
  font-size:11px;font-weight:650;background:var(--accent-soft);color:var(--accent);vertical-align:middle}
@media (max-width:620px){ .mergebar .btn{width:100%;justify-content:center} }

/* คำเตือนในกล่องเลื่อนวันถ่าย — วันปลายทางมีกองของลูกค้าเจ้าเดียวกันรออยู่แล้ว */
.daterisk{margin:10px 0 2px;padding:11px 13px;border-radius:11px;
  border:1px solid var(--warn,#d97706);background:var(--warn-soft,rgba(217,119,6,.10));
  font-size:13px;line-height:1.6}
.daterisk b{display:block;font-weight:700;font-size:14px}
.daterisk p{margin:3px 0 0}
.daterisk .logotoggle{margin-top:8px}
.daterisk .dayload{margin-top:7px;padding-top:7px;border-top:1px solid var(--line);color:var(--muted)}
.daterisk .dayload.over{color:var(--danger,#dc2626);font-weight:650}

/* กล่องยกคอนเทนต์ไปกองอื่น */
.tonext{margin-left:8px;white-space:nowrap}
.toshootlist{display:flex;flex-direction:column;gap:8px;margin:4px 0 12px}
.toshootpick{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;
  border:1px solid var(--line);border-radius:11px;background:var(--panel-2)}
.toshootpick:hover{border-color:var(--muted)}
.toshootpick.on{border-color:var(--accent);background:var(--accent-soft)}
.toshootpick input{flex:none;margin:0}
.toshootpick span{display:flex;flex-direction:column;gap:2px;min-width:0}
.toshootpick b{font-size:14px}
.toshootpick i{font-style:normal;font-size:12.5px;color:var(--muted)}

/* ================== หน้าส่งลูกค้า ใช้หน้าตาเดียวกับหน้ารอฉันตรวจ ==================
 * หัวข้อกลุ่มลอย ๆ พร้อมจุดจำนวน แล้วใต้ลงมาเป็นแถวในกล่องเดียว
 * สถานะอยู่ที่หัวข้อกลุ่มแล้ว แถวจึงไม่มีแถบสี ไม่มีกรอบสี และไม่มีพื้นสี
 */
.vzone{display:block;margin-top:6px}
.vzone .vhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:18px 0 2px}
.vzone .vhead b{font-size:16px;font-weight:700}
.vzone .vhead small{color:var(--muted);font-size:13px}
.vzone .vmore{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 4px;
  padding:9px 12px;border-radius:9px;background:var(--accent-soft);font-size:13px}
.vzone .vmore span{flex:1}
/* ข้อความที่ลูกค้าพิมพ์มา ต้องขึ้นบรรทัดได้ ไม่ใช่ตัดท้ายเหมือนบรรทัดสรุป */
.rowmain .saymore{white-space:normal;line-height:1.6;margin-top:4px;color:var(--text);opacity:.85}
.sendrow.late{border-color:var(--danger)}
.sendrow.late .rowmain small{color:var(--danger)}
.sendrow .rowmain small{white-space:normal;line-height:1.6}
.sendrow.fading{opacity:.35}
.senddone .rows{margin-top:10px;opacity:.8}
.senddone summary{margin-top:8px}

/* ---- หน้าจัดการกอง แบ่งตามวันถ่าย ----
 * แถวเดิมเป็นตารางเจ็ดคอลัมน์ตายตัว ตอนนี้เหลือแค่ ชื่อ · ปุ่ม · จุดสามจุด จึงกลับไปเรียงแบบแถวธรรมดา
 */
.shootlist .shootrow{display:flex;align-items:center;gap:12px;grid-template-columns:none}
.shootlist .shootrow > .btn{flex:none}
@media (max-width:860px){ .shootlist .shootrow{flex-wrap:wrap} .shootlist .shootrow .rowmain{flex:1 1 100%} }
.shootrow .rowmain small{white-space:normal;line-height:1.6}
.shootrow .rowmain b{white-space:normal}
.shootrow .miss{color:var(--danger);font-weight:650}
.shootrow .okword{color:#1a7f43;font-weight:650}
:root[data-theme="dark"] .shootrow .okword{color:#6ccb95}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .shootrow .okword{color:#6ccb95}}
.opshead.past{margin-top:30px;color:var(--muted)}
/* ปุ่มชวนรวมกอง อยู่ใต้หัวข้อวัน ตรงจุดที่เห็นว่ามีสองกองของเจ้าเดียวกัน */
.mergehint{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;padding:10px 14px;
  border-radius:10px;border:1px solid var(--accent);background:var(--accent-soft);font-size:13.5px;line-height:1.6}
.mergehint span{flex:1;min-width:230px}
.mergehint .btn{flex:none;margin-top:0}
@media (max-width:620px){ .mergehint .btn{width:100%;justify-content:center} }

/*
 * สถานะของกองเป็นแถบของตัวเองในคอลัมน์ที่กว้างเท่ากันทุกแถว
 * ของเดิมเป็นตัวหนังสือต่อท้ายบรรทัดรายละเอียด พอยาวไม่เท่ากันก็ตกบรรทัดคนละที่จนดูไม่เรียบร้อย
 */
.shootrow .srpill{flex:none;width:132px;text-align:center;padding:5px 10px;border-radius:99px;
  font-size:12.5px;font-weight:650;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.shootrow .srpill.miss{border-color:#d9766b;color:#b0453a;background:#fdeceb}
.shootrow .srpill.okword{border-color:#51a771;color:#1a7f43;background:#eaf7ee}
.shootrow .srgo{flex:none;min-width:104px;justify-content:center;text-align:center}
.shootrow .rowdots{flex:none;min-width:34px}
:root[data-theme="dark"] .shootrow .srpill.miss{border-color:#7a3a33;color:#ef9c90;background:#2d1715}
:root[data-theme="dark"] .shootrow .srpill.okword{border-color:#2f6b43;color:#6ccb95;background:#122518}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .shootrow .srpill.miss{border-color:#7a3a33;color:#ef9c90;background:#2d1715}
  :root:not([data-theme="light"]) .shootrow .srpill.okword{border-color:#2f6b43;color:#6ccb95;background:#122518}}
@media (max-width:860px){ .shootrow .srpill{width:auto} }

/* ไม่มีกองวันนี้และพรุ่งนี้ — บอกตรง ๆ แทนที่จะซ่อนไอคอนไปเลย */
.callnone{padding:18px 16px;border-radius:12px;border:1px dashed var(--line);background:var(--line-soft);
  text-align:center;font-size:14.5px;font-weight:650;color:var(--muted)}
.callnone i{display:block;font-style:normal;font-size:13px;font-weight:400;margin-top:5px}
.callpanel .opshead{margin:4px 0 8px}
.callpanel .opshead:first-child{margin-top:0}

/* ---- งานของ Host คนอื่น ในหน้ารอฉันตรวจ ---- */
.otherhost{margin-top:26px;border-top:1px solid var(--line);padding-top:14px}
.otherhost summary{cursor:pointer;font-size:14px;font-weight:650;color:var(--muted);padding:4px 0}
.otherhost summary:hover{color:var(--text)}
.otherbody{opacity:.82;margin-top:6px}
.otherbody .opshead{font-size:14px}

/* ===== ปุ่มส่งลิงก์แล้ว / แถบลิงก์ที่ซ่อนอยู่ / การ์ดคอนเทนต์ใหม่ ===== */
/* ช่องสถานะข้างหัวข้อ — บอกว่ากองนี้ค้างอยู่ตรงไหน ไม่ใช่บอกว่าเคยกดส่ง */
.btn.sendstate{font-weight:650;cursor:pointer}
.btn.sendstate.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.btn.sendstate.wait{background:var(--panel-2);border-color:var(--line);color:var(--ink2)}
.btn.sendstate.ask{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}

/* ลิงก์เป็นขั้นที่สอง ขั้นแรกคือกดส่ง */
.sendstep{display:flex;gap:12px;align-items:flex-start;margin:0 0 12px;padding:13px 15px;
  border:1px solid var(--line);border-radius:11px;background:var(--card)}
.sendstep.wait1{border-style:dashed;background:transparent}
.sendstep.done{border-left:5px solid var(--ok)}
.sendstep.hid{border-left:5px solid var(--warn);background:var(--warn-soft)}
.sendstep .stepno{flex:none;display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--line);color:var(--ink2);font-style:normal;font-size:13px;font-weight:700}
.sendstep.done .stepno{background:var(--ok);color:#fff}
.sendstep.hid .stepno{background:var(--warn);color:#fff}
.stepsay{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.stepsay b{font-size:15.5px;line-height:1.45}
.stepsay small{font-size:12.5px;color:var(--ink2);line-height:1.55}
.linkbox{margin:5px 0 2px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);overflow-x:auto}
.linkbox span{font-size:14px;font-weight:600;white-space:nowrap}
.steptools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.newcard{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:10px 0 6px;padding:12px 14px;
  border:1px solid var(--line);border-left:5px solid var(--accent,#5b5fc7);border-radius:10px;background:var(--card)}
.newmain{flex:1;min-width:200px;display:flex;flex-direction:column;gap:3px}
.newmain b{font-size:15.5px;line-height:1.45}
.newmain small{font-size:13px;color:var(--ink2);line-height:1.5}
.newmain i{font-style:normal;font-size:12.5px;color:var(--ink2);line-height:1.5}
.pubclosed{margin-top:14vh;padding:30px 22px;text-align:center;border:1px solid var(--line);
  border-radius:14px;background:var(--card)}
.pubclosed b{display:block;margin-top:14px;font-size:17px;font-weight:600;line-height:1.75;color:var(--ink)}

/* ===== คอนเทนต์ที่เกิดหน้ากอง และปุ่มติ๊กที่เหลือทั้งหมด ===== */
.onsitetag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;font-style:normal;
  font-size:11px;font-weight:600;white-space:nowrap;color:var(--accent);border:1px solid var(--accent);
  background:var(--accent-soft)}
.tdwrap2{margin-top:14px;padding:0}
.tdallrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 15px;border-bottom:1px solid var(--line)}
.tdallrow span{flex:1;min-width:170px;display:flex;flex-direction:column;gap:2px}
.tdallrow b{font-size:15px}
.tdallrow small{font-size:12.5px;color:var(--muted);line-height:1.55}
.tdallrow.done{border-bottom:0}
.tdallrow.done b{color:var(--ok)}
.tdadd{display:flex;flex-direction:column;gap:8px;padding:13px 15px}
.tdadd label{display:flex;flex-direction:column;gap:2px}
.tdadd label b{font-size:15px}
.tdadd label small{font-size:12.5px;color:var(--muted);line-height:1.55}
.tdaddrow{display:flex;gap:8px;align-items:center}
.tdaddrow input{flex:1;min-width:0;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--text);font-family:inherit;font-size:15.5px}
.tdaddrow input:focus{outline:none;border-color:var(--accent)}
@media (max-width:640px){ .tdaddrow{flex-direction:column;align-items:stretch} .tdaddrow .btn{width:100%} }

/* ===== หน้ากองที่ผ่านมา — สรุปรอบ สถานะกอง และติ๊กรายชิ้น ===== */
.pastsum{display:flex;flex-wrap:wrap;gap:10px;padding:14px 16px;margin-bottom:14px}
/*
 * การ์ดตัวเลขในหน้ากองที่ผ่านมา — เคยใช้ชื่อ psum ซ้ำกับกล่องสรุปในใบ Shotlist
 * ชื่อซ้ำทำให้ตัวเลขใหญ่ 24px ไปโผล่ในใบ Shotlist ด้วย ชื่อคนหน้ากล้องกับยอดพร็อพเลยใหญ่ผิดปกติ
 */
.pastkpi{flex:1 1 130px;display:flex;flex-direction:column;gap:2px;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.pastkpi b{font-size:24px;line-height:1.2}
.pastkpi b i{font-style:normal;font-size:14px;color:var(--muted);font-weight:500}
.pastkpi span{font-size:12.5px;color:var(--muted)}
.pastkpi.warn{border-color:var(--warn)}
.pastkpi.warn b{color:var(--warn)}
.pasthead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pasthead b{flex:1 1 auto;min-width:160px}
.pastpill{flex:none;padding:3px 11px;border-radius:99px;font-size:12.5px;font-weight:600;white-space:nowrap}
.pastpill.ok{color:var(--ok);border:1px solid var(--ok);background:var(--ok-soft)}
.pastpill.warn{color:var(--warn);border:1px solid var(--warn);background:var(--warn-soft)}
.pastclip{align-items:center}
.pasttick{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  font-size:14px;font-weight:700;color:var(--ok);border:1px solid var(--ok);background:var(--ok-soft)}
.pastclip.noshot .pasttick{color:var(--muted);border-color:var(--line);background:transparent}
.pastclip.noshot{border-left:3px solid var(--warn)}
.pastnotes{padding:12px 15px 2px;border-top:1px solid var(--line)}
.pastnotes>b{display:block;margin-bottom:8px;font-size:13.5px;color:var(--muted)}
.opshead .btn{margin-left:10px;vertical-align:middle}
.pastpill.none{color:var(--muted);border:1px solid var(--line);background:var(--panel-2)}
.pasttick.miss{color:var(--muted);border-color:var(--line);background:transparent}
.pasttick.none{color:var(--muted);border-color:var(--line-soft);background:transparent;font-size:18px}

/* ===== ติ๊กและเลือกหลายรายการในหน้ากองที่ผ่านมา ===== */
.pasttick{cursor:pointer;transition:transform .1s}
.pasttick:hover{transform:scale(1.12)}
.pasttools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 15px 12px}
.pasttools small{flex:1 1 100%;font-size:12px;color:var(--warn);line-height:1.55}
.pastbox{flex:none;display:grid;place-items:center;width:30px;height:30px;cursor:pointer}
.pastbox input{width:18px;height:18px;cursor:pointer;accent-color:var(--accent)}
.pastclip.ison{background:var(--accent-soft)}
.pickbar{position:sticky;bottom:12px;z-index:30;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:14px 0 4px;padding:12px 15px;border:1px solid var(--accent);border-radius:12px;
  background:var(--panel);box-shadow:0 10px 30px rgba(20,21,40,.16)}
.pickbar>span{flex:1;min-width:150px;display:flex;flex-direction:column;gap:1px}
.pickbar b{font-size:15px}
.pickbar small{font-size:12px;color:var(--muted)}
@media (max-width:640px){ .pickbar .btn{flex:1 1 auto} }

/* ===== หน้ากองที่ผ่านมา — การ์ดภาพรวม รอบย้อนหลัง และกองแบบยุบได้ ===== */
.roundpick{flex:none;min-width:230px}
.roundcard{padding:0;overflow:hidden;margin-bottom:14px}
.rchead{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 20px;
  background:linear-gradient(135deg,var(--accent) 0%,#7a7ee0 100%);color:#fff}
.roundcard.full .rchead{background:linear-gradient(135deg,#2f9e6b 0%,#54c08c 100%)}
.rcbig{display:flex;flex-direction:column;gap:2px;min-width:160px}
.rcbig span{font-size:12.5px;opacity:.85}
.rcbig b{font-size:40px;line-height:1.05;font-weight:700}
.rcbig b i{font-style:normal;font-size:18px;opacity:.8;margin-left:6px;font-weight:500}
.rcbig small{font-size:12px;opacity:.85}
.rcbar{flex:1;min-width:160px;height:10px;border-radius:99px;background:rgba(255,255,255,.28);overflow:hidden}
.rcbar i{display:block;height:100%;border-radius:99px;background:#fff}
.rcpct{flex:none;font-size:13px;font-weight:600}
.rcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;padding:14px 16px}
.rcgrid .pastkpi{flex:none}
.pastkpi.side{border-style:dashed}
.pastkpi.bad{border-color:var(--danger)}
.pastkpi.bad b{color:var(--danger)}
.rcnote{margin:0;padding:0 16px 14px;font-size:12px;color:var(--muted)}
.pastbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.pastbar>span{flex:1;min-width:120px;font-size:13px;color:var(--muted)}
.pastbar .btn.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.pastshoot{padding:0;margin-bottom:10px}
button.pasthead{display:flex;align-items:center;gap:12px;width:100%;padding:13px 15px;text-align:left;
  background:transparent;border:0;cursor:pointer;color:inherit;font:inherit}
button.pasthead:hover{background:var(--panel-2)}
.pcar{flex:none;width:16px;color:var(--muted);font-size:12px}
.pmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pmain b{font-size:15px}
.pmain small{font-size:12.5px;color:var(--muted);line-height:1.5}
.pastclip.gone{opacity:.62}
.pastclip.gone .rowmain b{text-decoration:line-through}
.ejecttag{flex:none;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600;white-space:nowrap;
  color:var(--danger);border:1px solid var(--danger);background:var(--danger-soft)}
.ejectwhy{flex:1 1 100%;margin:4px 0 0;font-size:12.5px;color:var(--muted);line-height:1.55}
.ejectpicks{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 10px}
@media (max-width:640px){ .rcbig b{font-size:32px} .roundpick{min-width:0;width:100%} }

/* ===== มุมมองตามลูกค้าในหน้างานตัด และหน้าอัพโหลดที่อิงเช็คลิสต์ ===== */
.editclient{padding:0;margin-bottom:10px}
.naspath.none{color:var(--muted);font-style:italic}
.uprow.noshot{opacity:.6}
.uprow.noshot .rowmain b{color:var(--muted)}

/* ===== หน้าแรกทีมกล้อง ===== */
.camwait{padding:0;overflow:hidden;border-color:var(--warn)}
.cwhead{display:flex;flex-direction:column;gap:2px;padding:13px 15px;background:var(--warn-soft);
  border-bottom:1px solid var(--line)}
.cwhead b{font-size:15.5px;color:var(--warn)}
.cwhead small{font-size:12.5px;color:var(--muted);line-height:1.55}
.okline{margin-bottom:12px;padding:11px 14px;border:1px solid var(--ok);border-radius:10px;
  background:var(--ok-soft);color:var(--ok);font-size:14px;font-weight:600}
.oldwait{margin-top:14px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.oldwait>summary{padding:11px 14px;font-size:13.5px;color:var(--muted);cursor:pointer;list-style:none}
.oldwait>summary::-webkit-details-marker{display:none}
.oldwait>summary::before{content:"▸ ";color:var(--muted)}
.oldwait[open]>summary::before{content:"▾ "}
.oldwait .rows{padding:0 10px 10px}

/* ===== หน้าแรกทีมตัดต่อ และหน้าคิวงานที่เบาลง ===== */
.sronly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.foldhow>summary{font-size:15px;font-weight:650;cursor:pointer;list-style:none}
.foldhow>summary::-webkit-details-marker{display:none}
.foldhow>summary::before{content:"▸ ";color:var(--muted);font-weight:400}
.foldhow[open]>summary::before{content:"▾ "}
.foldhow>summary+b{display:none}
.nofile{display:block;margin-top:3px;font-size:12px;color:var(--warn)}
.ecstep.bad{color:var(--danger);border-color:var(--danger)}
.ecstep.gone{color:var(--muted);border-color:var(--line);text-decoration:line-through}

/* ===== รายการงานตัดแบบแถวเดียว ===== */
/* แถบเครื่องมือของหน้างานตัด — สามแถวในกรอบเดียว ชิปกว้างตามตัวหนังสือ ไม่ยืดเต็มจอ */
.edittools{display:flex;flex-direction:column;gap:9px;margin-bottom:16px;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.etline{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.etlabel{flex:none;width:56px;font-size:12px;color:var(--muted)}
.echip{padding:6px 13px;border:1px solid var(--line);border-radius:99px;background:var(--panel);
  color:var(--muted);font-size:13px;font-weight:550;white-space:nowrap;cursor:pointer}
.echip:hover{border-color:var(--accent);color:var(--accent)}
.echip.on{border-color:var(--accent);background:var(--accent);color:#fff;font-weight:650}
.echip i{font-style:normal;font-size:11.5px;opacity:.75;margin-left:4px}
@media (max-width:640px){ .etlabel{flex:1 1 100%;width:auto} }
.editgroup{margin-bottom:16px}
.editlines{display:flex;flex-direction:column;gap:6px}
.editline{border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden}
.editline.open{border-color:var(--accent)}
.editline.late{border-left:4px solid var(--danger)}
.elrow{display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;text-align:left;
  background:transparent;border:0;cursor:pointer;color:inherit;font:inherit}
.elrow:hover{background:var(--panel-2)}
.elcar{flex:none;width:14px;color:var(--muted);font-size:12px}
.elmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.elmain b{font-size:14.5px;line-height:1.45}
.elmain small{font-size:12px;color:var(--muted)}
.elwho{flex:none;width:110px;font-size:13px;font-weight:600}
.elfree{font-style:normal;font-weight:500;color:var(--warn)}
.elstep{flex:none;width:150px;font-size:12.5px;color:var(--muted)}
.elstep.warn{color:var(--warn);font-weight:600}
.elstep.ok{color:var(--ok);font-weight:600}
.elday{flex:none;width:92px;text-align:right;font-size:12.5px;color:var(--muted)}
.editline .editcard{border:0;border-top:1px solid var(--line);border-radius:0;margin:0}
@media (max-width:820px){
  .elwho,.elstep,.elday{width:auto}
  .elrow{flex-wrap:wrap}
  .elmain{flex:1 1 100%}
}
.elwait{display:block;margin-top:2px;font-size:11.5px;color:var(--warn)}
.ecrush{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 2px}
.ecrush>span{font-size:12.5px;color:var(--muted)}
.ecrush select{flex:1;min-width:180px;max-width:340px;padding:7px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel);color:var(--text);font-family:inherit;font-size:13.5px}
.sentlog{margin:6px 0 0;font-size:12.5px;color:var(--muted);line-height:1.55}
.sendpick.done{display:inline-flex;align-items:center;padding:6px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel-2);color:var(--muted);font-size:12.5px;white-space:nowrap}

/* ===== การ์ดประวัติการส่งให้ทีมตัด ===== */
.sentcard{padding:0;overflow:hidden;margin-bottom:14px;border-color:var(--warn)}
.sentcard.locked{border-color:var(--line)}
.schead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;background:var(--warn-soft)}
.sentcard.locked .schead{background:var(--panel-2)}
.scicon{flex:none;font-size:26px;line-height:1}
.scmain{flex:1;min-width:190px;display:flex;flex-direction:column;gap:2px}
.scmain b{font-size:17px;line-height:1.4}
.scmain small{font-size:12.5px;color:var(--muted);line-height:1.55}
.scrows{display:flex;flex-direction:column}
.scrow{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--line)}
.scrow b{flex:1;min-width:0;font-size:14px;font-weight:500}

/* ===== งานตัดแบบ 1 งาน 1 บรรทัด ===== */
.eltext{flex:1;min-width:0;max-width:100%;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.eltext>b{min-width:0;overflow-wrap:anywhere}
.eltext b{font-size:15px;font-weight:650}
.elmeta{font-size:13px;color:var(--muted)}
.elby{font-style:normal;font-size:11.5px;color:var(--accent);border:1px solid var(--accent);
  border-radius:99px;padding:1px 8px;white-space:nowrap}
/* คำท้ายงานเป็นกรอบสี อ่านง่ายกว่าวงเล็บ */
.elstate{flex:none;padding:3px 11px;border-radius:99px;font-size:12.5px;font-weight:650;white-space:nowrap;
  color:var(--muted);border:1px solid var(--line);background:var(--panel-2)}
.elstate.go{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.elstate.warn{color:var(--warn);border-color:var(--warn);background:var(--warn-soft)}
.elstate.ok{color:var(--ok);border-color:var(--ok);background:var(--ok-soft)}
.elread{padding:11px 15px;border-top:1px solid var(--line)}
.ecwho{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.ecwho>span{font-size:11.5px;color:var(--muted)}
.ecwho b{font-size:14px}
.ecstep.now{border-color:var(--warn);color:var(--warn);background:var(--warn-soft);cursor:default}
.elopen{border-top:1px solid var(--line)}
.elfile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 15px;background:var(--panel-2)}
.elfhead{flex:0 0 100%;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.elfile b{font-size:14px;word-break:break-all}
.elfile i.nofile,.elscript i.nofile{font-style:normal;font-size:13px;color:var(--warn)}
.elfile i.elwait{font-style:normal;font-size:12px;color:var(--warn)}
.elscript{display:flex;flex-direction:column;gap:9px;padding:13px 15px;border-top:1px solid var(--line)}
.elpart i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-bottom:3px}
.elpart p{margin:0 0 5px;font-size:14px;line-height:1.75;white-space:pre-wrap}
.elpart .scripted{font-size:14px;line-height:1.8}

/* ===== แนบเอกสารเพิ่มในบิลใบเดียว ===== */
.moreatt{margin:4px 0 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.moreatt>summary{padding:9px 12px;font-size:13px;color:var(--muted);cursor:pointer;list-style:none}
.moreatt>summary::-webkit-details-marker{display:none}
.moreatt>summary::before{content:"＋ ";font-weight:700}
.moreatt[open]>summary::before{content:"－ "}
.moreatt .attlist{padding:0 10px 10px}
.ecblock{margin:0 0 8px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel-2);font-size:12.5px;color:var(--muted);line-height:1.55}
.ecstep[disabled]{opacity:.42;cursor:not-allowed}
/* การ์ดที่กางจากแถว — เบากว่าการ์ดเต็ม ไม่มีหัวซ้ำ และของที่ไม่ได้ใช้ทุกวันพับไว้ */
.editcard.slim{border:0;border-radius:0;box-shadow:none;background:transparent;padding:10px 15px 14px;gap:14px}
.moreinfo{margin:0}
.moreinfo>summary{font-size:12.5px;color:var(--muted);cursor:pointer;list-style:none;padding:4px 0}
.moreinfo>summary::-webkit-details-marker{display:none}
.moreinfo>summary::before{content:"＋ "}
.moreinfo[open]>summary::before{content:"－ "}

/* ===== สี่ช่องภาพรวมของหน้างานตัด ===== */
.editkpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.editkpis .kpi{display:flex;flex-direction:column;gap:3px;min-height:104px;padding:13px 15px;text-align:left;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer;
  color:inherit;font:inherit;transition:border-color .12s,background .12s}
.editkpis .kpi:hover{border-color:var(--accent)}
.editkpis .kname{font-size:12.5px;color:var(--muted)}
.editkpis .kpi b{font-size:30px;line-height:1.15;font-weight:700}
.editkpis .kpi b i{font-style:normal;font-size:15px;font-weight:500;color:var(--muted);margin-left:3px}
.editkpis .kpi small{font-size:12px;color:var(--muted);line-height:1.5;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.editkpis .kpi.ok b{color:var(--ok)}
.editkpis .kpi.warn{border-color:var(--warn);background:var(--warn-soft)}
.editkpis .kpi.warn b{color:var(--warn)}
.editkpis .kpi.bad{border-color:var(--danger);background:var(--danger-soft)}
.editkpis .kpi.bad b{color:var(--danger)}
.editkpis .kpi.on{border-color:var(--accent);border-width:2px;background:var(--accent-soft)}
.backline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-2px 0 12px;padding:9px 13px;
  border:1px solid var(--accent);border-radius:10px;background:var(--accent-soft)}
.backline>span{flex:1;min-width:160px;font-size:13.5px}
@media (max-width:820px){ .editkpis{grid-template-columns:repeat(2,1fr)} }
/* แถวงานบนหน้าแรกของทีมตัด — กดแล้วไปเปิดในคิวงาน ไม่มีส่วนกางในตัวเอง */
.editline.flat{margin-bottom:6px}
.editline.flat .elrow{cursor:pointer}

/* ===== หน้าแรกของทีมตัด — ระยะห่างเท่ากันทุกก้อน ===== */
.ehwrap{display:flex;flex-direction:column;gap:18px}
.ehwrap>*{margin:0 !important}
.ehblock{padding:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.ehblock.warn{border-color:var(--warn)}
.ehblock.soon{border-style:dashed}
.ehhead{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--line)}
.ehblock.warn .ehhead{background:var(--warn-soft)}
.ehhead b{font-size:16.5px}
.ehblock.warn .ehhead b{color:var(--warn)}
.ehsub{margin:0;padding:10px 16px 0;font-size:12.5px;color:var(--muted);line-height:1.55}
.ehempty{margin:0;padding:16px;font-size:14px;color:var(--muted)}
.ehlist{display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px}
.ehlist .editline.flat{margin:0}

/* ===== แถวคนทำงานอยู่ในการ์ดทักทาย ===== */
.hello{align-items:flex-start}
button.hface{position:relative;flex:none;padding:0;border:0;background:none;cursor:pointer;border-radius:50%}
button.hface u{position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;width:21px;height:21px;
  border-radius:50%;background:var(--panel);border:1px solid var(--line);font-size:11px;text-decoration:none;line-height:1}
button.hface.unset .facetag,button.hface.unset img{outline:2px dashed var(--warn);outline-offset:2px}
button.hface.unset u{color:var(--warn);border-color:var(--warn);font-weight:700}
.hwhere{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.hattend{margin-left:auto;display:flex;flex-direction:column;gap:8px;align-items:flex-end;max-width:min(460px,52%)}
.hfaces{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.hface2{position:relative;display:inline-flex}
.hface2 u{position:absolute;right:-3px;bottom:-3px;font-size:10px;text-decoration:none;line-height:1;
  background:var(--panel);border-radius:50%;padding:1px}
.hface2.shoot{opacity:.9}
.hnone{font-size:12.5px;color:var(--muted)}
.hmore{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--line-soft);
  color:var(--muted);font-size:12.5px;font-weight:600}
.hsee{padding:5px 11px;border:1px solid var(--line);border-radius:99px;background:var(--panel);
  color:var(--muted);font-size:12px;cursor:pointer;white-space:nowrap}
.hsee:hover{border-color:var(--accent);color:var(--accent)}
.hall{display:flex;flex-direction:column;gap:7px;width:100%;padding-top:8px;border-top:1px solid var(--line)}
.hgroup{display:flex;align-items:center;gap:9px;justify-content:flex-end;flex-wrap:wrap}
.hgroup>span{font-size:11.5px;color:var(--muted)}
/*
 * จอแคบ แถวรูปต้องลงไปอยู่บรรทัดใหม่เต็มความกว้าง
 * ลำพัง width:100% ไม่พอ เพราะการ์ดเป็น flex แถวเดียวที่ไม่ยอมขึ้นบรรทัดใหม่
 * ต้องสั่งให้การ์ดห่อบรรทัดและให้แถวรูปกินเต็มบรรทัดด้วย ไม่งั้นมันจะไปเบียดคำทักทายจนอ่านไม่ออก
 */
@media (max-width:820px){
  .hello{flex-wrap:wrap}
  .hello .hmain{flex:1 1 60%}
  .hattend{flex:1 0 100%;margin-left:0;max-width:none;width:100%;align-items:flex-start;
    padding-top:10px;border-top:1px solid var(--line)}
  .hfaces,.hgroup{justify-content:flex-start}
  .hello>.btn{flex:1 0 100%}
}

/* ===== สมุดคอมเมนต์ของคอนเทนต์ ===== */
/*
 * คอมเมนต์กางอยู่ในแถวงาน ไม่ใช่หน้าต่างลอย — ขอบบนคั่นให้เห็นว่าเป็นส่วนของแถวนั้น
 * ชื่อคลาสต้องไม่ใช่ notewrap เพราะหน้าโน้ตใช้ชื่อนั้นเป็นตารางสองคอลัมน์อยู่แล้ว
 */
.cmtwrap{border-top:1px solid var(--line);background:var(--panel-2)}
/* ไม่ใส่กรอบเลื่อนซ้อนในหน้าที่เลื่อนอยู่แล้ว ปล่อยให้แถวยาวไปตามจำนวนคอมเมนต์ */
.notebody{padding:12px 15px;display:flex;flex-direction:column;gap:14px}
.notegroup h4{margin:0 0 4px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px;
  text-transform:none;letter-spacing:.01em}
/*
 * คอมเมนต์เป็นรายการอ่านยาว ไม่ใช่การ์ดซ้อนการ์ด
 * กรอบหนา ๆ รอบทุกข้อความทำให้ตาสะดุดทุกบรรทัด เลยเหลือแค่เส้นคั่นบาง ๆ กับแถบสีของฝั่งที่พูด
 */
.noterow{display:flex;align-items:flex-start;gap:12px;padding:9px 0 9px 12px;border-left:3px solid var(--line);
  border-bottom:1px solid var(--line-soft)}
.noterow:last-child{border-bottom:0}
.noterow.host{border-left-color:var(--accent)}
.noterow.client{border-left-color:var(--warn)}
.noterow.edit{border-left-color:var(--ok)}
.notemain{flex:1;min-width:0}
.notemain p{margin:0;font-size:15px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.notewho{flex:none;width:132px;padding-top:2px;text-align:right;font-size:12px;color:var(--muted);line-height:1.5}
.notewho i{display:block;font-style:normal;opacity:.8}
@media (max-width:640px){
  .noterow{flex-wrap:wrap}
  .notemain{flex:1 0 100%}
  .notewho{width:auto;text-align:left;padding-top:4px}
}
.noterow .btn{opacity:0;flex:none}
.noterow:hover .btn,.noterow:focus-within .btn{opacity:1}
@media (hover:none){ .noterow .btn{opacity:1} }
.noteadd2{padding:12px 15px 14px;border-top:1px solid var(--line)}
.notepicks{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.noteadd2 textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--text);font-family:inherit;font-size:14.5px;line-height:1.65;resize:vertical}
.noteadd2 textarea:focus{outline:none;border-color:var(--accent)}
.elread{display:flex;gap:8px;flex-wrap:wrap;align-items:center}


/* หน้างานตัดมีห้าขั้น จึงต้องการห้าช่อง · จอแคบลงมาเรียงสองแถวเองไม่ต้องบีบตัวเลขให้เล็ก */
.editkpis.five{grid-template-columns:repeat(5,1fr)}
.editkpis.five .kpi{min-height:98px}
@media (max-width:1100px){ .editkpis.five{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){ .editkpis.five{grid-template-columns:repeat(2,1fr)} }

/* แถวตัวกรองของหน้างานตัด — ลูกค้าเป็นช่องเลือก ที่เหลือเป็นปุ่มกดสลับ */
.cutfilters{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:12px 0}
.cutfilters .chiprow{margin:0}
.cutfilters .cutpickc{margin:0;max-width:220px}
.cutfilters .cutpickc span{font-size:12px;color:var(--muted)}
.cutfilters .cutpickc select{padding:7px 10px;font-size:13px}
.cutfilters .chip i{font-style:normal;margin-left:4px;color:var(--muted)}
.cutfilters .chip.on i{color:inherit}
/* จอแคบ แถวงานพับลงมาเป็นสองชั้น ชื่อเต็มความกว้างแล้วค่อยเรียงของที่เหลือ */
@media (max-width:860px){
  .cutrow{grid-template-columns:repeat(2,1fr)}
  .cutrow .cutmain{grid-column:1 / -1}
}

/* หัวแถวงานตัด — ปุ่มกางแถวกับปุ่มคอมเมนต์อยู่ข้างกัน ไม่ซ้อนกัน */
.elhead{display:flex;align-items:stretch}
.elhead .elrow{flex:1;min-width:0}
.elcmt{flex:none;display:flex;align-items:center;gap:5px;padding:0 13px;font-size:12.5px;font-weight:600;
  border:0;border-left:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;white-space:nowrap}
.elcmt:hover{background:var(--panel-2);color:var(--text)}
.elcmt i{font-style:normal;min-width:18px;padding:1px 6px;border-radius:99px;background:var(--panel-2);color:var(--text)}
.elcmt.wait{color:var(--warn)}
.elcmt.wait i{background:var(--warn-soft);color:var(--warn)}
@media (max-width:620px){ .elcmt{padding:0 10px} }

/* ช่องพิมพ์คอมเมนต์เรียงกันในกล่องเดียว หัวช่องบอกว่าเป็นของฝั่งไหน */
.notefield{margin:0 0 8px}
.notefield span{font-size:12.5px;color:var(--muted)}
.notefield textarea{min-height:52px}

/* ===== หน้าจัดการงานตัดของ AE — หนึ่งกองหนึ่งกล่อง ===== */
.etbatch{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:12px;overflow:hidden}
.etbatch.need{border-color:var(--warn)}
.etbatch.done{opacity:.72}
.ebhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 15px;border-bottom:1px solid var(--line)}
.ebmain{flex:1;min-width:180px}
.ebmain b{display:block;font-size:15px;font-weight:650}
.ebmain small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.ebtag{flex:none;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:650;
  background:var(--warn-soft);color:var(--warn)}
.ebpick{flex:none;margin:0;min-width:190px}
.ebpick span{font-size:12px;color:var(--muted)}
.ebpick select{padding:7px 10px;font-size:13px}
.ebfile{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 15px;background:var(--panel-2);
  border-bottom:1px solid var(--line);font-size:13px}
.ebfile code{word-break:break-all}
.ebfile i{font-style:normal;color:var(--muted)}
.ebfile.none{color:var(--warn)}
.ebrows{padding:4px 15px 10px}
.ebrows .etrow:last-child{border-bottom:0}
/* กองที่ถ่ายแล้วแต่ไฟล์ยังไม่มา — แค่รายการสั้น ๆ ให้ไล่ตามถูกกอง */
.ebwait{display:flex;flex-direction:column;gap:2px}
.ebwrow{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:9px 13px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);margin-bottom:6px}
.ebwrow b{flex:1;min-width:160px;font-size:14px;font-weight:600}
.ebwrow span{font-size:12.5px;color:var(--warn)}
@media (max-width:720px){ .ebpick{flex:1 0 100%} }

/*
 * งานของคนตัดแต่ละคนเป็นรายการ หนึ่งคนหนึ่งบรรทัด อยู่ในกรอบเดียวกันทั้งก้อน
 * สี่หลักตรงกันทุกบรรทัด — ชื่อ · จำนวนที่ถืออยู่ · ค้างอยู่ขั้นไหน · จบแล้ว
 */
.wklist{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden;margin-bottom:16px}
.wkhead,.wkrow{display:grid;grid-template-columns:minmax(140px,1.1fr) 76px minmax(200px,2fr) 80px;
  align-items:center;gap:10px;padding:10px 15px}
.wkhead{padding-top:11px;padding-bottom:11px;border-bottom:1px solid var(--line);background:var(--panel-2);
  font-size:12px;color:var(--muted)}
.wkhead span:nth-child(2),.wkhead span:last-child,.wkrow .wknum,.wkrow .wkdone{text-align:center}
.wkrow+.wkrow{border-top:1px solid var(--line-soft)}
.wkrow.free{color:var(--muted)}
.wkname{display:flex;align-items:center;gap:8px;min-width:0}
.wkname b{font-size:14.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wkrush{flex:none;font-style:normal;font-size:11.5px;font-weight:650;padding:2px 8px;border-radius:99px;
  background:var(--warn-soft);color:var(--warn)}
.wknum{font-size:20px;font-weight:700}
.wkrow.free .wknum{font-weight:500}
.wkdone{font-size:14px;color:var(--muted)}
.wksteps{display:flex;flex-wrap:wrap;gap:5px}
.wkchip{padding:2px 9px;border-radius:99px;font-size:12px;background:var(--panel-2);color:var(--muted);
  border:1px solid var(--line);white-space:nowrap}
.wkchip b{font-weight:700;color:var(--text)}
.wkchip.go{border-color:var(--accent);color:var(--accent)}
.wkchip.go b{color:var(--accent)}
.wkchip.warn{border-color:var(--warn);color:var(--warn)}
.wkchip.warn b{color:var(--warn)}
.wkchip.ok{border-color:var(--ok);color:var(--ok)}
@media (max-width:720px){
  .wkhead{display:none}
  .wkrow{grid-template-columns:1fr auto;gap:6px 10px}
  .wkrow .wksteps{grid-column:1 / -1}
  .wkrow .wkdone{display:none}
  .wknum::after{content:" ชิ้น";font-size:12px;font-weight:500;color:var(--muted)}
}

/* แถวในกล่องกอง — เป็นตารางหลักตรงกันทุกแถว ไม่ใช่ของเรียงชิดกันตามความยาวชื่อ */
.ebrows .etrow{display:grid;grid-template-columns:minmax(180px,1fr) 150px 130px 130px 118px;
  align-items:center;gap:9px 10px}
.ebrows .etrow .rowmain{min-width:0}
.ebrows .etpick{flex:none;width:100%}
.ebrows .etwho,.ebrows .etcheck{flex:none;width:auto}
@media (max-width:900px){
  .ebrows .etrow{grid-template-columns:repeat(2,1fr)}
  .ebrows .etrow .rowmain{grid-column:1 / -1}
}

/* เลือกภาษีตอนปิดเรื่อง Production support — ต้องกดเลือก ไม่มีค่าตั้งต้น */
.taxpick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 10px}
.taxnote{font-style:normal;font-size:12.5px;color:var(--muted)}
.taxnote.warn{color:var(--warn);font-weight:600}
/* บรรทัดภาษีใต้ค่าใช้จ่ายในใบงานกอง — คนหน้ากองอ่านยอดที่ต้องโอนจากตรงนี้ */
.taxbit{display:inline-block;margin-left:6px;font-style:normal;font-size:11.5px;color:var(--muted)}
.taxbit.none{color:var(--warn)}

/* แถบค้นหาโปรเจ็คที่ผ่านมา — ช่องค้นกับเดือนอยู่บรรทัดเดียวกัน */
.pastbar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.pastbar .field{margin:0;flex:1 1 260px}
.pastbar .field.narrow{flex:0 0 190px}
.pastbar .field span{font-size:12px;color:var(--muted)}

/* กล่องลิงก์ Shotlist สำหรับคนนอกทีม */
.sheetlink{border-color:var(--accent);margin-bottom:14px}
.slhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.slhead b{font-size:15px}
.slok{font-size:12.5px;color:var(--ok);font-weight:600}
.slwarn{font-size:12.5px;color:var(--warn);font-weight:600}
.slrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.slrow code{flex:1 1 260px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel-2);font-size:13px;word-break:break-all}
.pubsheet{padding-top:10px}

/* แถบกรองของหน้าอัพเดทงาน */
.upfilters{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:10px 0}
.upfilters .field{margin:0;flex:1 1 240px}
.upfilters .field span{font-size:12px;color:var(--muted)}
.upfilters .chiprow{margin:0}
/* ป้ายบนหัวกล่องว่าตอนนี้รอใคร */
.ugwait{flex:none;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:650;white-space:nowrap}
.ugwait.cli{background:var(--warn-soft);color:var(--warn)}
.ugwait.us{background:var(--accent-soft);color:var(--accent)}

/* แท็บในกล่องแจ้งเตือน */
.ntabs{display:flex;gap:7px;padding:10px 14px 4px;flex-wrap:wrap}
.ntabs .chip i{font-style:normal;margin-left:4px;opacity:.75}
/*
 * คำว่า อีก N เรื่องในกองนี้ · เป็นของที่กดได้ จึงต้องดูเหมือนกดได้ และแตะได้ถนัดบนมือถือ
 * วางเป็นบรรทัดของตัวเองใต้เนื้อความ ไม่ใช่ห้อยท้ายหัวข้อแบบเดิมที่กดยาก
 */
.nmore{display:inline-block;font-style:normal;font-size:11.5px;font-weight:600;
  margin-top:7px;padding:4px 10px;border-radius:99px;
  background:var(--accent-soft);color:var(--accent);cursor:pointer}
.nmore:hover{background:var(--accent);color:var(--accent-ink,#fff)}
/* ใบที่ถูกยุบ กางออกมาแล้วเยื้องเข้าไปหน่อย ให้เห็นว่าเป็นของที่อยู่ใต้ใบบน */
.notifykid{padding-left:34px;background:var(--soft)}
.notifykid b{font-weight:500}

/* กล่องเลือกว่าจะให้ Host ดูอีกรอบไหม */
.fixpicks{display:flex;flex-direction:column;gap:9px;margin:12px 0}
.fixpicks .btn.big{width:100%;justify-content:center;padding:13px 16px;font-size:15px}
/* เหตุผลที่คนเขียนบอกไว้ตอนเปิดแก้ */
.fixwhy{display:block;margin-top:3px;color:var(--muted)}

/* ===== หน้ารวมคนออกกอง ===== */
.cbload{margin-bottom:14px}
.cbloadhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.cbloadhead small{font-size:12.5px;color:var(--muted)}
.cbchips{display:flex;gap:7px;flex-wrap:wrap}
.cbchip{display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 4px;border-radius:99px;font-size:13px;
  border:1px solid var(--line);background:var(--panel-2)}
.cbchip .facepic,.cbchip .faceletter{border-radius:50%;object-fit:cover;flex:none}
/* ช่องเลือกเดือนต้องกว้างพอให้เห็นปีครบ ไม่ตัดเลขท้าย */
.cbmonth{flex:0 0 auto;min-width:190px}
.cbmonth select{width:100%}
.cbchip i{font-style:normal;font-weight:700}
.cbchip u{text-decoration:none;font-size:11.5px;color:var(--warn)}
.cbchip.hot{border-color:var(--warn);background:var(--warn-soft)}
.cbcard{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:10px;overflow:hidden}
.cbcard.none{border-style:dashed}
.cbhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 14px;border-bottom:1px solid var(--line)}
.cbmain{flex:1;min-width:180px}
.cbmain b{display:block;font-size:14.5px;font-weight:650}
.cbmain small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.cbnum{flex:none;font-size:12.5px;color:var(--muted)}
.cbnum.warn{color:var(--warn);font-weight:600}
.cbrows{display:flex;flex-direction:column;gap:6px;padding:10px 14px 4px}
.cbrow{display:grid;grid-template-columns:180px minmax(0,1fr) 34px;align-items:center;gap:8px}
.cbpick,.cbname{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--text);font:inherit;font-size:13.5px}
.cbx{width:34px;height:34px;border:0;border-radius:9px;background:none;color:var(--muted);cursor:pointer}
.cbx:hover{background:var(--danger-soft);color:var(--danger)}
.cbadd{display:inline-block;margin:2px 14px 12px}
@media (max-width:640px){ .cbrow{grid-template-columns:minmax(0,1fr) 34px} .cbpick{grid-column:1 / -1} }

/*
 * การ์ดออปชั่นสปอนเซอร์ที่ลูกค้าเลือกแล้ว — เป็นข่าวดีที่ต้องลงมือต่อ ใช้สีน้ำเงินของระบบ
 * ส่วนโน้ตถึงทีมใช้สีส้ม จะได้ไม่ซ้ำกันเวลาวางเรียงกันในหน้าเดียว
 */
.pickcard{border-color:var(--accent);border-left:4px solid var(--accent);margin:14px 0}
.pickcard .teamhead b{color:var(--accent)}
.notecard{border-left:4px solid var(--warn);margin:14px 0;background:var(--warn-soft)}
.notecard .teamhead b{color:var(--warn)}
.notecard .notewrite textarea,.notecard .noterow{background:var(--panel)}
.pickrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer}
.pickrow .rowmain{flex:1;min-width:0;padding:0;background:none}
.pickrow b{display:block;font-size:14.5px;font-weight:650}
.pickrow small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.pickrow .saymore{color:var(--warn)}
.pickrow .btn{flex:none;margin:0}

/* ปุ่มลบรายใบในกล่องแจ้งเตือน — จางไว้ โผล่ชัดตอนชี้ที่แถว */
.notifyrow{position:relative}
.notifyrow .nx{position:absolute;top:10px;right:10px;width:22px;height:22px;display:grid;place-items:center;
  border-radius:6px;color:var(--muted);font-size:12px;opacity:0}
.notifyrow:hover .nx,.notifyrow:focus-within .nx{opacity:1}
.notifyrow .nx:hover{background:var(--danger-soft);color:var(--danger)}
@media (hover:none){ .notifyrow .nx{opacity:.6} }

/* ===== คลังไอเดีย — หนึ่งไอเดียหนึ่งบรรทัด กดแล้วค่อยกาง ===== */
.bankbar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.bankbar input{flex:1 1 280px}
.bankbar .bankclient{flex:0 0 240px;margin:0}
.bankbar .bankclient span{font-size:12px;color:var(--muted)}
.bankrow{display:block;padding:0;overflow:hidden}
.bankrow.wide{border-color:var(--accent)}
.bankhead{display:flex;align-items:flex-start;gap:10px;width:100%;padding:11px 13px;text-align:left;
  background:none;border:0;cursor:pointer;color:inherit;font:inherit}
.bankhead:hover{background:var(--panel-2)}
.bankcar{flex:none;color:var(--muted);font-size:12px;line-height:1.7}
.bankmain{flex:1;min-width:0}
.bankmain b{display:block;font-size:14.5px;font-weight:650;line-height:1.5}
.bankmain small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.bankpeek{color:var(--muted);opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.banktag{flex:none;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600;
  background:var(--panel-2);color:var(--muted);border:1px solid var(--line);white-space:nowrap}
.banktag.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.bankbody{padding:2px 14px 13px 31px;border-top:1px solid var(--line-soft)}
.bankbody .banknote{margin:10px 0;font-size:14px;line-height:1.75;white-space:pre-wrap}
.bankbody .banknote.none{color:var(--muted)}
.bankbody .bankgo{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.bankbody .banktopicpick{margin:0;min-width:200px}
.bankbody .banktopicpick span{font-size:12px;color:var(--muted)}
@media (max-width:640px){ .bankbody{padding-left:14px} .bankbar .bankclient{flex:1 1 100%} }

/* ปุ่มทิ้งคอนเทนต์ — มีอยู่ทุกที่ที่ตัดสินใจเรื่องคอนเทนต์ชิ้นนั้น แต่ไม่เด่นกว่าปุ่มหลัก */
/* ปุ่มทิ้ง — ต้องเห็นว่าเป็นปุ่มทำลายตั้งแต่ยังไม่เอาเมาส์ไปชี้ ไม่งั้นคนหาไม่เจอ */
.btn.dropbtn,.btn.ghost.dropbtn{color:var(--danger);border-color:var(--danger);background:var(--danger-soft)}
.btn.dropbtn:hover,.btn.ghost.dropbtn:hover{color:#fff;background:var(--danger);border-color:var(--danger)}

/* ถังขยะในหน้าโปรเจ็ค — ปกติยุบไว้เป็นปุ่มเล็ก ๆ ท้ายหน้า ไม่ให้แย่งสายตากับงานที่ยังทำอยู่ */
.trashbtn{margin:18px auto 0;display:block;color:var(--muted)}
.trashbtn i{font-style:normal;background:var(--chip);border-radius:999px;padding:1px 7px;margin-left:4px}
.trashlist{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.trashrow{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel)}
.trashmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.trashmain b{font-size:14px}
.trashmain small{color:var(--muted);font-size:12px}
.trashlock{color:var(--muted);font-size:12px;text-align:right;max-width:170px}

/* ป๊อปอัปถามเหตุผลตอนลบ — ใช้โครงเดียวกับกล่องเลือกอื่น ๆ เพิ่มแค่แถวเหตุผลกับช่องพิมพ์ */
.killpick{max-width:460px}
.whygrid{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.whychip{border:1px solid var(--line);background:var(--panel);color:var(--text);
  border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer}
.whychip:hover{border-color:var(--accent)}
.whychip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.killnote{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  font:inherit;font-size:13px;background:var(--panel);color:var(--text);resize:vertical}
.btn.danger.solid{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.danger.solid:hover{opacity:.9}

/* คลังลิงก์อ้างอิง — วางลิงก์แล้วจบ ดูเป็นรูปปกเรียงกัน แล้วเปิดดูทีละอันเต็มจอได้ */
.refadd{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px}
.refadd textarea{flex:1;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;
  font-size:14px;background:var(--panel);color:var(--text);resize:vertical}
.refbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.refbar input,.refbar select{border:1px solid var(--line);border-radius:10px;padding:8px 12px;font:inherit;
  font-size:13px;background:var(--panel);color:var(--text)}
.refbar input{flex:1;min-width:180px}
.refgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.refcard{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);
  display:flex;flex-direction:column}
.refthumb{position:relative;display:block;width:100%;aspect-ratio:16/10;border:0;padding:0;cursor:pointer;
  background:var(--line-soft);overflow:hidden}
.refthumb img{width:100%;height:100%;object-fit:cover;display:block}
.refnone{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:13px}
.refbadge{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.62);color:#fff;border-radius:999px;
  padding:2px 9px;font-size:11px}
.refbody{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.refbody b{font-size:13.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.refbody small{color:var(--muted);font-size:11.5px}
.refnote{font-size:12.5px;color:var(--muted);margin:2px 0 0}
.refacts{display:flex;gap:6px;align-items:center;margin-top:auto;padding-top:8px;flex-wrap:wrap}
.refbig{align-items:center;justify-content:center}
.refstage{width:min(960px,94vw);background:var(--panel);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;max-height:92vh}
.reftop{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.reftop b{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.refcount{color:var(--muted);font-size:12px}
.refframe{width:100%;aspect-ratio:16/9;border:0;background:#000;flex:1;min-height:320px}
.refopen{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px}
.refopen img{max-width:320px;border-radius:12px}
.refnav{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px 14px;
  border-top:1px solid var(--line)}
@media (max-width:620px){.refgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}}
/* คลิปแนวตั้งอย่าง TikTok กับ Reel ถ้าบังคับเป็นจอกว้างจะเหลือขอบดำสองข้างจนคลิปเล็กนิดเดียว */
.refframe.tall{aspect-ratio:9/16;width:auto;max-width:100%;max-height:72vh;margin:0 auto;min-height:0}

/* คลังลิงก์จัดกลุ่มเป็นสัปดาห์ สัปดาห์ที่ดูจบแล้วจะยุบเก็บให้เอง */
.refweek{margin-bottom:20px}
.refwhead{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.refwname{flex:1;text-align:left;background:none;border:0;padding:0;cursor:pointer;display:flex;
  flex-direction:column;gap:1px;color:var(--text)}
.refwname b{font-size:15px}
.refwname small{color:var(--muted);font-size:12px}
.refweek.seen .refwname b{color:var(--muted)}
.refweek.seen .refwhead{border-left:3px solid var(--ok);padding-left:10px}

/* ของที่ครีเอทีฟกะราคาไว้ วางใต้บทในหน้าตรวจบท ให้ทีมพร็อพเทียบไปพร้อมกับอ่านบท */
.guessprops{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:12px 14px;margin-top:12px}
.guessprops header{font-size:13px;font-weight:600;margin-bottom:8px}
.guessprops small{color:var(--muted);font-size:11.5px;display:block;margin-top:8px}
.guesslist{display:flex;flex-direction:column;gap:4px}
.guessrow{display:flex;align-items:baseline;gap:10px;font-size:13px;padding:4px 0;border-bottom:1px solid var(--line-soft)}
.guessrow b{flex:1;font-weight:500}
.guessrow span{color:var(--muted);white-space:nowrap}

/* ค่าใช้จ่ายเพิ่มเติมนอกกอง */
.spendbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.spendbar select{border:1px solid var(--line);border-radius:10px;padding:8px 12px;font:inherit;font-size:13px;
  background:var(--panel);color:var(--text)}
.spendsum{margin-left:auto;font-weight:600}
.spendchips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.spendchips .chip i{font-style:normal;color:var(--muted);margin-left:4px}
.spendlist{display:flex;flex-direction:column;gap:8px}
.spendrow{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel)}
.spendmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.spendmain b{font-size:14px}
.spendmain small{color:var(--muted);font-size:12px}
.spendamt{white-space:nowrap}
/* คอลัมน์ซ้ายของหน้าตรวจบท — บทกับราคาที่ครีเอทีฟกะไว้ อยู่ซ้อนกันเป็นก้อนเดียว ตรวจรายการจึงยังอยู่ขวา */
.qcleft{display:flex;flex-direction:column;gap:12px;min-width:0;position:sticky;top:62px}
.qcleft .script{position:static}
.qcleft .guessprops{margin-top:0}
/*
 * จอแคบ คอลัมน์ซ้ายต้องไม่ล็อกค้างเอง ไม่งั้นมันลากทั้งก้อน (บท + ราคาที่ครีเอทีฟกะไว้)
 * ไปลอยทับรายการของที่กำลังติ๊ก แถมล็อกที่ 62px ทั้งที่แถบบนบนมือถือสูงกว่านั้น
 * display:contents = ยุบตัวห่อทิ้ง ให้บทกับกล่องราคาเป็นช่องของตารางตรง ๆ
 */
@media (max-width:820px){
  .qcleft{display:contents}
  .qcleft .script{position:sticky}
}

/* หน้ารวมบิลของบัญชี */
.billbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.billbar select{border:1px solid var(--line);border-radius:10px;padding:8px 12px;font:inherit;font-size:13px;
  background:var(--panel);color:var(--text)}
.billkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:12px}
.billkpi{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:10px 14px;
  display:flex;flex-direction:column;gap:2px}
.billkpi small{color:var(--muted);font-size:11.5px}
.billkpi b{font-size:17px}
.billkpi.warn{border-color:var(--warn);background:var(--warn-soft)}
.billrow{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel)}
.billmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.billmain b{font-size:14px}
.billmain small{color:var(--muted);font-size:12px}
.billfile{font-size:11px;color:var(--ok);white-space:nowrap}
.billfile.no{color:var(--warn)}
.billamt{white-space:nowrap}

/* ปุ่มท้ายแถวโปรเจ็ค — ล็อกเป็นสามช่องกว้างเท่ากันทุกแถว ไม่งั้นแถวที่ไม่มีปุ่มจะดันตัวอื่นเลื่อนไปมา */
/*
 * ปุ่มท้ายแถวโปรเจ็ค — ล็อกทั้งความกว้างและความสูงให้เท่ากันทั้งสามช่อง
 * ปุ่มเล็กในเว็บนี้มีระยะห่างบนติดมาด้วย ถ้าไม่ล้างทิ้ง ปุ่มกลางจะต่ำกว่าเพื่อนอยู่ไม่กี่จุด
 */
.projacts{display:grid;grid-template-columns:108px 104px 116px;gap:8px;align-items:center;flex:none}
.projacts .btn,.projacts .tag{margin:0;height:32px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center}
.projacts .btn{width:100%;justify-content:center;text-align:center}
/* ช่องว่างของแถวที่ไม่มีปุ่มนั้น ก็สูงเท่ากัน แถวจะได้ไม่ขยับ */
.projacts>span:empty{height:32px;display:block}
.projacts .tag{width:100%;margin:0;justify-self:stretch;box-sizing:border-box;text-align:center;justify-content:center}
@media (max-width:720px){.projacts{grid-template-columns:auto auto auto;gap:6px}}

/* การ์ดบนลิงก์ลูกค้า — บอกว่าทีมปรับให้ใหม่แล้ว ช่วยตรวจอีกรอบ */
.card.recheck{border-color:var(--warn);background:var(--warn-soft)}
.card.recheck b{display:block;font-size:15px;margin-bottom:4px}
.card.recheck p{margin:0 0 6px;font-size:14px;line-height:1.7}
.card.recheck small{color:var(--muted);font-size:12px}
.pubtag.fixed{margin-left:8px;font-size:11px;padding:2px 8px;border-radius:99px;
  background:var(--warn);color:#fff;white-space:nowrap;display:inline-block;vertical-align:middle}
.pubcard.pubfix{border-color:var(--warn)}
/* ปุ่มทิ้งคอนเทนต์ในหน้าเขียนบท — อยู่ล่างสุดชิดขวา ไม่ใช่ของที่ต้องเจอก่อนเริ่มอ่าน */
.dropfoot{display:flex;justify-content:flex-end;margin:26px 0 8px}

/* กล่องแจ้งลูกค้าว่ามีการปรับ — ติ๊กว่ารอบนี้แก้คอนเทนต์ไหนไปบ้าง */
.remarks{margin:12px 0 4px;text-align:left}
.remarks b{display:block;font-size:13px}
.remarks i{display:block;color:var(--muted);font-size:11.5px;font-style:normal;margin-bottom:8px}
.remark{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);
  border-radius:10px;margin-bottom:6px;cursor:pointer;background:var(--panel)}
.remark.on{border-color:var(--warn);background:var(--warn-soft)}
.remark span{flex:1;font-size:13px}
.remark small{color:var(--muted);font-size:11px}

/*
 * ขนาดตัวหนังสือในใบ Shotlist — ปรับได้ทั้งใบ และแยกได้สามกลุ่ม
 * ลูกค้าและทีมบางคนอ่านตัวเล็กไม่ไหว แต่ละคนจึงตั้งขนาดของตัวเองได้ เก็บไว้ในเครื่องคนนั้น
 * ขนาดฐานเก็บเป็นตัวแปร เพื่อให้จอมือถือที่เคยขยายไว้แล้วยังขยายต่อจากของเดิมได้ถูก
 */
/*
 * ขนาด "ปกติ" ตั้งใหม่ให้เป็นขนาดอ่านสบายจริง ๆ ชุดเดียวทั้งจอและกระดาษ
 * ของเดิมไซส์บนกระดาษเล็กมากเพราะวางไว้สำหรับ A4 แล้วไปขยายเฉพาะจอมือถือทีหลัง
 * ตอนนี้มีปุ่มปรับขนาดแล้ว จึงไม่ต้องมีขนาดพิเศษซ่อนไว้ตามจอ ใครอยากใหญ่กว่านี้กดเอาเองได้
 */
.shotdoc{
  --b-no:11.5px; --b-time:13px; --b-title:14.5px; --b-where:11px;
  --b-story:13px; --b-fact:12.5px; --b-part:12.5px; --b-script:13px;
  --b-props:12px; --b-person:12.5px; --b-place:12.5px; --b-ptime:13px; --b-tab:12.5px; --b-sub:11px;
  --b-sumhead:10px; --b-sum:12px;
  --f-all:1; --f-title:1; --f-body:1; --f-contact:1;
}
.shotdoc .pino{font-size:calc(var(--b-no) * var(--f-all) * var(--f-title))}
.shotdoc .pitime{font-size:calc(var(--b-time) * var(--f-all) * var(--f-title))}
.shotdoc .pihead b{font-size:calc(var(--b-title) * var(--f-all) * var(--f-title))}
.shotdoc .piwhere{font-size:calc(var(--b-where) * var(--f-all) * var(--f-title))}
.shotdoc .pistory{font-size:calc(var(--b-story) * var(--f-all) * var(--f-body))}
.shotdoc .pifact span{font-size:calc(var(--b-fact) * var(--f-all) * var(--f-body))}
.shotdoc .planpart span{font-size:calc(var(--b-part) * var(--f-all) * var(--f-body))}
.shotdoc .planpart .scripted,.shotdoc .planpart.full .scripted{font-size:calc(var(--b-script) * var(--f-all) * var(--f-body))}
.shotdoc .piprops,.shotdoc .pisup{font-size:calc(var(--b-props) * var(--f-all) * var(--f-contact))}
.shotdoc .pperson b{font-size:calc(var(--b-person) * var(--f-all) * var(--f-contact))}
.shotdoc .pplacemain b{font-size:calc(var(--b-place) * var(--f-all) * var(--f-contact))}
.shotdoc .pplacetime b{font-size:calc(var(--b-ptime) * var(--f-all) * var(--f-contact))}
.shotdoc .pplacewho,.shotdoc .pplacemain a{font-size:calc(var(--b-sub) * var(--f-all) * var(--f-contact))}
.shotdoc .ptab{font-size:calc(var(--b-tab) * var(--f-all) * var(--f-contact))}
.shotdoc .ptab .pname i{font-size:calc(var(--b-sub) * var(--f-all) * var(--f-contact))}
.shotdoc .psbox h3{font-size:calc(var(--b-sumhead) * var(--f-all))}
.shotdoc .psbox p{font-size:calc(var(--b-sum) * var(--f-all))}

/* แถบเลือกขนาด — อยู่เหนือใบ ไม่ติดไปกับกระดาษ */
.fontbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;
  padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}
.fontbar .docoptlab{white-space:nowrap}
.fontrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex-basis:100%}
.fontrow>span{font-size:12px;color:var(--muted);min-width:118px}
.fontbar .chip{font-size:12.5px;padding:4px 11px}

/*
 * ฟอร์มปิดเรื่องของ Production support
 * ห้าช่องอยู่ในตารางเดียว หัวข้อสูงเท่ากันทุกช่อง ช่องกรอกจึงอยู่ระนาบเดียวกันแม้หัวข้อจะยาวไม่เท่ากัน
 */
.supgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:4px 12px;margin-bottom:6px}
.supgrid .field{margin-bottom:10px;display:flex;flex-direction:column}
.supgrid .field.wide{grid-column:span 1}
.supgrid .field>span{min-height:40px;display:flex;flex-direction:column;justify-content:flex-end;margin-bottom:5px;line-height:1.35}
.supgrid .field span i{margin-top:0}
.supgrid .field input{height:42px}
/*
 * ช่องที่อยู่เป็นช่องพิมพ์หลายบรรทัด ถ้าปล่อยให้ยืดตามช่องแถวเดียวกันในตาราง
 * มันจะสูงเต็มแถวจนดูเหมือนฟอร์มเสีย · สูงพอพิมพ์ที่อยู่สองสามบรรทัดก็พอ
 */
.supgrid .field textarea{min-height:70px;max-height:120px;align-self:start;width:100%}
/* ปุ่มเลือกอย่างขออนุญาตแล้วหรือยัง ต้องเริ่มชิดบนเหมือนช่องพิมพ์ข้าง ๆ */
.supgrid .suppick .chipbar{align-content:flex-start}
@media (max-width:760px){.supgrid{grid-template-columns:1fr 1fr}.supgrid .field.wide{grid-column:span 2}}

/* หัก 3% กับ Net — เป็นกล่องให้ติ๊ก ไม่ใช่ปุ่ม จะได้รู้ว่าต้องเลือกหนึ่งอย่างก่อนปิดเรื่อง */
.taxbox{display:flex;align-items:flex-start;gap:9px;padding:9px 13px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);cursor:pointer;min-width:188px}
.taxbox.on{border-color:var(--accent);background:var(--accent-soft)}
.taxbox input{margin-top:2px;width:16px;height:16px;accent-color:var(--accent);flex:none}
.taxbox span{display:flex;flex-direction:column;font-size:13.5px;font-weight:600;color:var(--text)}
.taxbox span i{font-style:normal;font-size:11.5px;font-weight:400;color:var(--muted);margin-top:2px}

/*
 * การ์ดที่วางซ้อนกันในหน้าแรกของแต่ละแผนก เคยชิดกันจนดูเป็นก้อนเดียว
 * เว้นระยะเท่ากันทุกใบ และเว้นก่อนหัวข้อถัดไปด้วย เพื่อให้แยกออกว่าเรื่องไหนจบตรงไหน
 */
.wrap>.card+.card{margin-top:14px}
.wrap>.card+h3,.wrap>.card+.opshead,.wrap>.card+section{margin-top:18px}
.wrap>section.card+section.card{margin-top:14px}
/*
 * แท็บในเมนูจัดการบิล — ทำเป็นปุ่มกล่องเรียงกัน ไม่ใช่ข้อความขีดเส้นใต้บาง ๆ
 * เพราะนี่คือการสลับหน้าจริง ๆ ไม่ใช่ตัวกรองในหน้าเดียว คนต้องเห็นตั้งแต่เหลือบว่ามีกี่หน้าและอยู่หน้าไหน
 */
.moneytabs,.tabs.tabsbox{display:inline-flex;gap:4px;margin:0 0 16px;padding:4px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel-2);max-width:100%;overflow:auto}
.moneytabs button,.tabs.tabsbox button{padding:9px 16px;font-size:14px;font-weight:600;color:var(--muted);
  border:1px solid transparent;border-radius:9px;margin:0;white-space:nowrap}
.moneytabs button:hover,.tabs.tabsbox button:hover{color:var(--text)}
.moneytabs button.on,.tabs.tabsbox button.on{color:var(--accent);background:var(--panel);border-color:var(--line);
  box-shadow:0 1px 2px rgba(16,17,25,.06)}
.tabs.tabsbox .tabdot{background:var(--warn);color:var(--warn-ink);border-radius:99px;padding:1px 7px;
  font-size:11.5px;font-style:normal;margin-left:5px}
/* แถวเลือกค่าบริการเหนือใบแจ้งหนี้ */
.raterow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.raterow .hint{flex-basis:100%;margin:2px 0 0;font-style:normal}

/* หน้ารวมบิล — รายการกองของบัญชี */
.projbills{display:flex;flex-direction:column;gap:8px}
.projbill{display:grid;grid-template-columns:1fr 120px 150px;gap:12px;align-items:center;width:100%;text-align:left;
  padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer}
.projbill:hover{border-color:var(--accent)}
.pbname{display:flex;flex-direction:column;gap:2px;min-width:0}
.pbname b{font-size:14px}
.pbname small{color:var(--muted);font-size:12px}
.pbsum{text-align:right;font-weight:650;font-variant-numeric:tabular-nums}
.pbstate{text-align:center;font-size:12px;padding:4px 10px;border-radius:99px;background:var(--line-soft);color:var(--muted)}
.pbstate.warn{background:var(--warn-soft);color:var(--warn)}
.pbstate.ok{background:var(--ok-soft);color:var(--ok)}
@media (max-width:720px){.projbill{grid-template-columns:1fr auto}.pbstate{grid-column:1/-1;text-align:left}}

/* ข้างในกอง — เงินก้อนไหนหมดไปกับอะไร จัดกลุ่มตามบิลใบเดียวกัน */
.billjob{display:flex;flex-direction:column;gap:12px}
.billjobhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--line)}
.billjobhead>div:nth-child(2){flex:1;display:flex;flex-direction:column;gap:2px;min-width:160px}
.billjobhead small{color:var(--muted);font-size:12px}
.billmarks{display:flex;gap:8px;flex-wrap:wrap}
.billgroup{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.bghead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;background:var(--panel-2);
  border-bottom:1px solid var(--line)}
.bghead small{color:var(--muted);font-size:12px;flex:1}
.bgsum{margin-left:auto;font-variant-numeric:tabular-nums}
.bglist{display:flex;flex-direction:column}
.bgrow{display:grid;grid-template-columns:1fr 160px 110px auto;gap:10px;align-items:center;
  padding:8px 14px;border-bottom:1px solid var(--line-soft);font-size:13px}
.bgrow:last-child{border-bottom:none}
.bgrow i{font-style:normal;color:var(--muted);font-size:12px}
.bgrow b{text-align:right;font-variant-numeric:tabular-nums}
.billpics{display:flex;gap:6px}
.billpics .officethumb{width:38px;height:38px;border-radius:7px;overflow:hidden;border:1px solid var(--line);padding:0;cursor:pointer}
.billpics img{width:100%;height:100%;object-fit:cover}
@media (max-width:720px){.bgrow{grid-template-columns:1fr auto}.bgrow i{grid-column:1/-1}}

/*
 * แถบสลับหน้าแบบปุ่มกล่อง — ใช้ชุดเดียวกับแท็บในเมนูจัดการบิล
 * ของเดิมปุ่มยืดเต็มความกว้าง เลยดูเหมือนแถบขาวยาวอันเดียวมากกว่าเป็นปุ่มสองปุ่มให้เลือก
 */
.salesbar.tabsbox{display:inline-flex;flex-wrap:nowrap;gap:4px;margin:0 0 16px;padding:4px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel-2);max-width:100%;overflow:auto}
.salesbar.tabsbox .stab{flex:none;min-width:0;padding:9px 16px;font-size:14px;font-weight:600;
  border:1px solid transparent;border-radius:9px;color:var(--muted)}
.salesbar.tabsbox .stab:hover{color:var(--text)}
.salesbar.tabsbox .stab.on{color:var(--accent);background:var(--panel);border-color:var(--line);
  box-shadow:0 1px 2px rgba(16,17,25,.06)}
.salesbar.tabsbox .stab i{opacity:1;color:var(--muted);font-size:12px}
.salesbar.tabsbox .stab.on i{color:var(--accent)}
/* ปุ่มกดเร็วใต้ช่องค่าบริการในหน้าตั้งค่าบริษัท */
.ratequick{display:flex;gap:6px;margin-top:6px}
.ratequick .chip{font-size:12.5px;padding:4px 12px}

/*
 * ช่องกรอกที่อยู่แถวเดียวกัน ต้องอยู่ระนาบเดียวกันเสมอ
 * หัวข้อบางช่องมีคำอธิบายต่อท้ายทำให้สูงกว่าเพื่อน ช่องกรอกเลยเหลื่อมกันทั้งแถว
 * ล็อกความสูงหัวข้อขั้นต่ำไว้ แล้วดันหัวข้อไปชิดล่าง ช่องกรอกจึงเริ่มที่ระดับเดียวกัน
 */
.grid2>.field>span:first-child,.grid3>.field>span:first-child,.frow>.field>span:first-child{
  min-height:36px;display:flex;flex-direction:column;justify-content:flex-end;line-height:1.35}
.grid3,.grid2{align-items:start}

/* ---- กระดานผู้บริหาร: เงินที่คาดว่าจะเก็บได้ และโควตาลูกค้า ---- */
.moneycard{margin-bottom:14px}
.moneycard>b{display:block;margin-bottom:10px}
.moneyrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.moneybit{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel-2)}
.moneybit span{color:var(--muted);font-size:12px}
.moneybit b{font-size:20px;font-variant-numeric:tabular-nums}
.moneycard .hint{display:block;margin:10px 0 0}
.qboard{display:flex;flex-direction:column;gap:6px}
.qrow{display:grid;grid-template-columns:1fr 86px 150px 110px auto;gap:12px;align-items:center;width:100%;
  text-align:left;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer}
.qrow:hover{border-color:var(--accent)}
.qname{display:flex;flex-direction:column;gap:2px;min-width:0}
.qname b{font-size:14px}
.qname small{color:var(--muted);font-size:12px}
.qcount{text-align:right;font-variant-numeric:tabular-nums}
.qcount b{font-size:17px}
.qcount i{font-style:normal;color:var(--muted);font-size:13px;margin-left:3px}
.qline{display:block;height:8px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.qline i{display:block;height:100%;background:var(--accent);border-radius:99px}
.qline i.full{background:var(--ok)}
.qleftnum{font-size:12px;color:var(--warn);text-align:right}
.qleftnum.done{color:var(--ok)}
.qmoney{font-variant-numeric:tabular-nums;font-weight:600;text-align:right;white-space:nowrap}
@media (max-width:760px){.qrow{grid-template-columns:1fr auto}.qline{grid-column:1/-1}.qleftnum,.qmoney{text-align:left}}

/* ---- หน้าภาพรวม: ลูกค้าเป็นลิสต์บรรทัดเดียว กางดูรายละเอียดทีละเจ้า ---- */
.opslist{display:flex;flex-direction:column;gap:8px}
.opsline{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.opsline.open{border-color:var(--accent)}
.opsmain{display:grid;grid-template-columns:1.4fr 104px 1.1fr 130px 130px 110px 44px;gap:12px;align-items:center;
  width:100%;text-align:left;padding:11px 14px;background:none;cursor:pointer}
.opsmain:hover{background:var(--panel-2)}
.olname{display:flex;flex-direction:column;gap:2px;min-width:0}
.olname b{font-size:14px}
.olname small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.olshot{display:flex;flex-direction:column;gap:3px;min-width:0}
.olshot b{font-size:13.5px;font-variant-numeric:tabular-nums}
.olshot small{color:var(--muted);font-size:11.5px}
.olbar{display:block;height:6px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.olbar em{display:block;height:100%;background:var(--accent);border-radius:99px}
.olbill,.olowe,.olprop{display:flex;flex-direction:column;gap:2px;text-align:right}
.olbill b,.olowe b,.olprop b{font-size:14px;font-variant-numeric:tabular-nums}
.olbill small,.olowe small,.olprop small{color:var(--muted);font-size:11.5px}
.olbill.warn b{color:var(--warn)}
.olowe.bad b{color:var(--danger)}
.olmore{text-align:right;font-size:12px;color:var(--muted)}
.opsdetail{padding:12px 14px 14px;border-top:1px solid var(--line);background:var(--panel-2)}
@media (max-width:980px){
  .opsmain{grid-template-columns:1fr 1fr;gap:8px}
  .opsmain .statuschip{justify-self:start}
  .olbill,.olowe,.olprop{text-align:left}
  .olmore{display:none}
}

/* ท้ายแถวคอนเทนต์ในหน้าโปรเจ็ค — สี่ช่องกว้างคงที่ ทุกแถวตรงระนาบกัน */
.cliprow{align-items:center}
.clipacts{display:grid;grid-template-columns:150px 142px 82px 128px;gap:10px;align-items:center;flex:none}
.clipacts>*{margin:0;height:32px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}
/* กฎเก่าตั้งความกว้างช่องคนเขียนไว้ 170 จุด ซึ่งล้นช่องของตารางจนไปทับปุ่มข้าง ๆ */
.clipacts select[data-clipwriter],.clipacts select{width:100%;min-width:0;max-width:100%;flex:none;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);
  color:var(--text);font:inherit;font-size:13px}
.clipacts .btn{width:100%;min-width:0;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding-left:6px;padding-right:6px}
.clipacts .frametag,.clipacts .tag{width:100%;justify-content:center;text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){.clipacts{grid-template-columns:1fr 1fr;gap:6px}}

/* ปุ่มมุมมองในหน้าโปรเจ็ค ใช้หน้าตาเดียวกับแท็บอื่นทั้งเว็บ */
.viewpick.tabsbox{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel-2)}
.viewpick.tabsbox .vbtn{padding:9px 16px;font-size:14px;font-weight:600;color:var(--muted);background:none;
  border:1px solid transparent;border-radius:9px}
.viewpick.tabsbox .vbtn:hover{color:var(--text);background:none}
.viewpick.tabsbox .vbtn.on{color:var(--accent);background:var(--panel);border-color:var(--line);
  box-shadow:0 1px 2px rgba(16,17,25,.06)}

/*
 * แถบคอนเทนต์ในหน้าเขียนบท — ขึ้นบรรทัดใหม่แทนการเลื่อนซ้ายขวา
 * และมีลูกศรถอยหน้ากับตัวนับไว้ไล่อ่านทีละชิ้น
 */
.otabs.wrap{flex-wrap:wrap;overflow:visible;row-gap:6px}
/*
 * ชิปคอนเทนต์ — ตัดเฉพาะชื่อที่ยาวเกิน ส่วนคำบอกสถานะท้ายชิปต้องอ่านครบเสมอ
 * ของเดิมตัดทั้งชิป คำว่า ส่งลูกค้าแล้ว เลยขาดครึ่งคำ
 */
.otabs.wrap .otab{flex:0 1 auto;max-width:none;overflow:visible}
.otabs.wrap .otabname{display:inline-block;max-width:240px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;vertical-align:bottom}
.otabs.wrap .otab small{flex:none;white-space:nowrap}
.otab.more{color:var(--accent);border-style:dashed}
.onav{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ostep{width:32px;height:32px;border:1px solid var(--line);border-radius:9px;background:var(--panel);
  color:var(--text);font-size:14px;cursor:pointer}
.ostep:disabled{opacity:.4;cursor:default}
.ocount{font-size:12.5px;color:var(--muted)}

/* หน้าเขียนบทตอนฝังอยู่ในหน้าโปรเจ็ค — หัวเล็กลงหน่อย เพราะหัวของโปรเจ็คอยู่ข้างบนแล้ว */
.writehead.inpage{margin-top:6px}
.writehead.inpage .kicker{font-size:11px}
.writehead.inpage h2.namehead{font-size:19px}
.whopick{display:inline-flex;align-items:center;gap:6px}
.whopick select{border:1px solid var(--line);border-radius:8px;padding:3px 8px;font:inherit;font-size:12.5px;
  background:var(--panel-2);color:var(--text);max-width:150px}
.dropfoot{display:flex;justify-content:flex-end;gap:8px;margin:26px 0 8px}

/* หัวกระดานไอเดีย — ชื่อกระดาน ปุ่มจัดการ และแท็บกระดาน อยู่ในกรอบเดียว */
.boardhead{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:12px 14px;margin:14px 0 12px}
.bhtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.bhtop>b{font-size:16px}
.bhgap{flex:1}
.boardhead .btabs{margin:0}
.bhnote{color:var(--muted);font-size:11.5px;display:block;width:100%}

/* หัวของหน้าเขียนบท — รวมชื่อ คนเขียน ตัวกรอง และแถบชิป ไว้ในกรอบเดียว */
.writetop{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:14px 16px 12px;margin-bottom:14px}
.writetop .writehead{margin:0 0 10px;padding:0;border:0;background:none}
.writetop .ofilters{margin:0 0 8px}
.writetop .onav{margin-bottom:8px}
.writetop .otabs{margin-bottom:0}

/* ตัวเลือกวิธีเขียน Outline หรือ Full Script — คนกดบ่อย จึงทำเป็นปุ่มกล่องในกรอบเดียวกัน */
.modepick.tabsbox{display:inline-flex;gap:4px;margin:0 0 6px;padding:4px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel-2)}
.modepick.tabsbox .mchip{padding:9px 20px;border:1px solid transparent;border-radius:9px;font-size:14px;
  font-weight:600;color:var(--muted);background:none}
.modepick.tabsbox .mchip:hover{color:var(--text);border-color:transparent}
.modepick.tabsbox .mchip.on{color:var(--accent);background:var(--panel);border-color:var(--line);
  box-shadow:0 1px 2px rgba(16,17,25,.06)}
.modehint{margin:0 0 14px}

/* คอนเทนต์ที่ฝั่ง Content ยกเลิกแล้ว — ขีดฆ่าสีแดงให้เห็นตั้งแต่เหลือบ พร้อมป้ายหยุดหาของ */
.gonerow .rowmain b{text-decoration:line-through;text-decoration-color:var(--danger);
  text-decoration-thickness:2px;color:var(--muted)}
.gonerow .rowmain small{color:var(--muted)}
.tag.stopbuy{background:var(--danger);color:#fff;border-color:var(--danger);font-weight:600}

/* ไอเดียที่ถูกเก็บเข้าคลัง — คนละสีกับไอเดียปกติ และบอกว่าเก็บเข้าชั้นไหน */
.idearow.instock,.ideashort.instock{border-color:var(--warn);background:var(--warn-soft)}
.stockline{display:block;font-style:normal;font-size:11.5px;color:var(--warn);font-weight:600;margin-top:2px}

/*
 * แถวที่กำลังจะหายไป — จางและเลื่อนออกนิดหนึ่งก่อน แล้วค่อยหายจริง
 * ใช้ชุดเดียวทั้งเว็บ ปรับความเร็วที่เดียวเปลี่ยนทุกที่
 */
.row.fading,.trashrow.fading,.idearow.fading,.ideashort.fading,.refcard.fading,.spendrow.fading,
.billrow.fading,.noterow.fading,.supcard.fading,.officerow.fading,.nsrow.fading,.opsline.fading,
.cliprow.fading,.projbill.fading{
  opacity:.15;transform:translateX(14px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .row.fading,.trashrow.fading,.idearow.fading,.ideashort.fading,.refcard.fading,.spendrow.fading,
  .billrow.fading,.noterow.fading,.supcard.fading,.officerow.fading,.nsrow.fading,.opsline.fading,
  .cliprow.fading,.projbill.fading{transition:none}
}

/*
 * แท็บรอถ่ายในคลังไอเดีย — แถวของตัวเอง ไม่ใช้คลาสร่วมกับแถวแบบย่อของคลังรวม
 * ของเดิมใช้ชื่อคลาสเดียวกัน พอคลังรวมเปลี่ยนเป็นแถวย่อ ปุ่มในแท็บรอถ่ายเลยเบียดกันหมด
 */
.waitrow{display:grid;grid-template-columns:1fr 300px;gap:14px;align-items:start;padding:12px 14px}
.waitrow .main{min-width:0}
.waitrow .main b{font-size:14.5px}
.waitrow .banknote{margin:4px 0 0;font-size:13px;line-height:1.65;color:var(--muted);white-space:pre-wrap}
.waitrow small{display:block;margin-top:6px;font-size:11.5px;color:var(--muted)}
.waitrow .bankgo{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center}
.waitrow .bankgo .btn{width:100%;height:34px;margin:0;justify-content:center;white-space:nowrap}
/* แถบกรองของคลังไอเดีย — ช่องค้นหา ช่องเลือกลูกค้า และปุ่มกรอง สูงเท่ากันและขอบล่างตรงกัน */
.bankbar{align-items:flex-end}
.bankbar>input,.bankbar .bankclient select,.bankbar .chip{height:42px;box-sizing:border-box}
.bankbar .bankclient{margin:0}
.bankbar .chip{display:inline-flex;align-items:center;gap:6px;align-self:flex-end;padding:0 16px;margin:0}
.bankbar .chip i{font-style:normal;color:var(--muted)}
.bankbar .chip.on i{color:var(--accent-ink,#fff)}
@media (max-width:760px){
  .waitrow{grid-template-columns:1fr}
  .waitrow .bankgo{grid-template-columns:1fr 1fr}
}

/* ---------- กันลืมโพสต์ และคิวยิงแอด ---------- */
/* หัวการ์ดมีสามโทน — เตือนปกติ (เหลือง) เลยเวลาแล้ว (แดง) และเรียบร้อยแล้ว (เขียว) */
.cwhead.late{background:var(--danger-soft);border-bottom-color:var(--danger)}
.cwhead.late b{color:var(--danger)}
.cwhead.ok{background:var(--ok-soft);border-bottom-color:var(--ok)}
.cwhead.ok b{color:var(--ok)}

/* แถวต้องโพสต์ — เวลา ชื่อเรื่อง ช่องทาง แล้วปุ่ม ทุกช่องยึดเส้นกลางเดียวกัน */
.duepost{display:grid;grid-template-columns:86px 1fr auto auto;align-items:center;gap:12px;
  padding:11px 14px;border-bottom:1px solid var(--line-soft)}
.duepost:last-child{border-bottom:none}
.duepost:hover{background:var(--panel-2)}
.duetime{font-weight:700;font-size:15.5px;line-height:1.25;white-space:nowrap}
.duetime small{display:block;font-weight:500;font-size:11.5px;color:var(--muted)}
.duetime.late,.duetime.late small{color:var(--danger)}
.duename{min-width:0}
.duename b{display:block;font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duename small{display:block;color:var(--muted);font-size:12.5px}
.duelats{display:flex;gap:5px}
.duelats i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.3px;padding:4px 7px;
  border-radius:6px;border:1px solid var(--line);color:var(--muted);background:var(--panel-2)}
.duepost .btn.small{margin-top:0;white-space:nowrap;border:1px solid var(--line)}
.duepost .btn.primary.small{border-color:transparent}
.duefoot{display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px 15px;border-top:1px solid var(--line-soft);
  font-size:12.5px;color:var(--muted);background:var(--panel-2)}
.duefoot b{font-weight:650;color:var(--text)}
@media (max-width:640px){
  .duepost{grid-template-columns:76px 1fr;row-gap:8px}
  .duelats{grid-column:1/2}
  .duepost .btn.small{grid-column:2/3;justify-self:end}
}

/* ตัวเลขหัวหน้าคิวยิงแอดและหน้าค่าแอด */
.adkpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.adkpi{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.adkpi b{display:block;font-size:24px;line-height:1.15}
.adkpi small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px}
.adkpi.alert{border-color:var(--danger);background:var(--danger-soft)}
.adkpi.alert b{color:var(--danger)}

.adrow{display:grid;grid-template-columns:1fr 250px 96px 108px;align-items:center;gap:12px;
  padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.adrow:last-child{border-bottom:none}
.adrow.done{opacity:.6}
.adname{min-width:0}
.adname b{display:block;font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adname small{display:block;color:var(--muted);font-size:12.5px}
.adlink{display:flex;align-items:center;gap:8px;min-width:0}
.adlink .btn.small{margin-top:0;flex:none}
.adlink a,.adlink span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--muted)}
.admoney{font-size:14px;font-weight:650;white-space:nowrap}
.adrow .btn.small{margin-top:0;white-space:nowrap;border:1px solid var(--line)}
.adrow .btn.primary.small{border-color:transparent}
.adlate{display:inline-block;margin-left:7px;font-size:11px;font-weight:700;color:var(--danger);
  background:var(--danger-soft);border-radius:99px;padding:2px 8px}
@media (max-width:760px){
  .adrow{grid-template-columns:1fr auto;row-gap:8px}
  .adlink{grid-column:1/3}
  .adkpis{grid-template-columns:1fr}
}

/* แถวติ๊กเลือกของหน้าค่าแอด */
.adbrow{display:grid;grid-template-columns:24px 1fr 96px;align-items:center;gap:12px;
  padding:11px 14px;border-bottom:1px solid var(--line-soft)}
.adbrow:last-child{border-bottom:none}
.adbrow:hover{background:var(--panel-2)}
.adbrow.done{opacity:.6}
.adbrow input[type=checkbox]{width:18px;height:18px;margin:0}
.adsumbody{padding:14px 15px;display:grid;gap:10px}
.adsumbody .ratequick{align-items:center;flex-wrap:wrap}
.adsumbody .ratequick span{font-size:12.5px;color:var(--muted)}
.adsumbody .ratequick .btn.small{margin-top:0;border:1px solid var(--line)}
.adsumbody .ratequick .btn.primary.small{border-color:transparent}
.ratein{width:72px;height:32px;box-sizing:border-box;text-align:center}
.adsumbody .btn.primary{margin-top:4px;justify-self:start}
.adsumbody .qrow.total b{font-size:17px}

/* ช่องติ๊กในกล่องที่เด้งขึ้นมา */
.tickline{display:flex;align-items:center;gap:10px;font-size:13.5px;margin-bottom:12px;
  padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.tickline input[type=checkbox]{width:18px;height:18px;margin:0;flex:none}

/* ---------- ตารางโพสต์ — ทุกช่องในแถวอยู่ระนาบเดียวกัน ---------- */
/*
 * ของเดิมแถวทั้งแถวเป็น flex ที่ห่อบรรทัดได้ ตัวเนื้อในจึงกว้างตามข้อความ
 * แถวที่ชื่อสั้นเลยดึงปุ่มเข้ามาชิดซ้าย ไม่ตรงกับแถวอื่นสักแถว
 */
.postrow{display:block;flex-wrap:nowrap;cursor:default}
.postrow .ptop{display:flex;align-items:center;gap:12px}
.postrow .ogrip{cursor:grab}
/* ทุกช่องสูงเท่ากัน ขอบบนขอบล่างจึงตรงกันทั้งแถวและตรงกันทุกแถว */
.postrow .pdate input,.postrow .ptime,.postrow .pstate,.postrow .plat,.postrow .postdone,
.postrow .ptop .btn.small{height:36px;box-sizing:border-box;margin-top:0}
.postrow .pdate input{font-size:13px;padding:0 8px}
.postrow .plat{width:36px}
.postrow .postdone{padding:0 14px;display:inline-flex;align-items:center;justify-content:center}
.postrow .ptop .btn.small{display:inline-flex;align-items:center;white-space:nowrap}
.postrow .ptime{padding:0 9px}
.postrow .pstate{padding:0 9px}

/* รายชื่อลูกค้าของตารางโพสต์ — เป็นรายการแทนการ์ด */
.clilist .row.clirow{display:flex;align-items:center;gap:12px;cursor:pointer}
.clilist .cctags{flex:none}
.cliarrow{flex:none;color:var(--muted);font-size:18px;line-height:1}
@media (max-width:640px){
  .clilist .cctags{display:none}
}
/* จอแคบ — ชื่อเรื่องขึ้นบรรทัดของตัวเอง ปุ่มกับช่องไหลลงบรรทัดถัดไป ไม่ดันจนล้นขอบจอ */
@media (max-width:900px){
  .postrow .ptop{flex-wrap:wrap;row-gap:10px}
  .postrow .ptitle{flex:1 1 100%}
  .postrow .ptop .btn.small{margin-left:auto}
}
/* ส่งครบแล้วไม่ติดหนี้ใคร — โทนเขียวเหมือนที่ใช้อยู่ในหน้าอื่น */
.kpi.ok{border-color:var(--ok);background:var(--ok-soft)}
.kpi.ok b{color:var(--ok)}

/* ---------- ระนาบของแถบที่มีช่องกรอกกับปุ่มอยู่ด้วยกัน ----------
 * ปัญหาที่เจอซ้ำ ๆ คือในแถวเดียวกันมีช่องเลือกสูง 31 ปุ่มเล็กสูง 28 ปุ่มปกติสูง 40
 * สามความสูงในแถวเดียว ยังไงก็ไม่มีทางตรงกัน และป้ายที่ตกบรรทัดยังดันช่องให้เหลื่อมลงไปอีก
 * วิธีแก้คือยึดขอบล่างเป็นแนว แล้วบังคับความสูงให้เท่ากันทั้งแถบ
 */
.schedbill{align-items:flex-end}
.schedbill .field>span{min-height:16px}
.schedbill .field input,.schedbill>.btn{height:42px;box-sizing:border-box;margin-top:0;
  display:inline-flex;align-items:center}
.schedbill .billfile{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.schedbill .billfile .btn.small{margin-top:0}

/* แถบบนสุดของทุกหน้า — ปุ่มกับช่องเลือกสูงไม่เท่ากัน จึงไม่เคยอยู่แนวเดียวกันเลย */
.top select,.top .btn{height:36px;box-sizing:border-box;margin-top:0;
  display:inline-flex;align-items:center;justify-content:center}

/* แถวสิ่งที่ต้องทำในกระดานวันนี้ */
.dayline select,.dayline .btn{height:32px;box-sizing:border-box;margin-top:0;
  display:inline-flex;align-items:center;justify-content:center}
/* ปุ่มบนพื้นขาวของแถบบิล ต้องมีกรอบให้เห็นชัด ไม่งั้นดูเหมือนตัวหนังสือลอย ๆ */
.schedbill>.btn{border:1px solid var(--line);background:var(--panel)}
.schedbill>.btn.danger{border-color:var(--danger)}

/* ---------- บรรทัดช่องทางของแต่ละคลิปในตารางโพสต์ ----------
 * คลิปเดียวลงได้หลายช่องทาง คนละวันคนละเวลา
 * ทุกบรรทัดเยื้องเข้ามาใต้ชื่อคลิป จึงอ่านออกทันทีว่าเป็นคลิปเดียวกัน
 */
.plines{display:grid;gap:6px;padding:8px 0 2px 46px}
.pline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pchan{flex:none;width:38px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;background:var(--panel-2);
  font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.pchan.tiktok{border-color:var(--accent);color:var(--accent)}
.pline .pdate{flex:none;display:flex;align-items:center;gap:5px}
.pline .pdate input,.pline .ptime,.pline .postdone,.pline .btn.small{height:34px;box-sizing:border-box;margin-top:0}
.pline .ptime{width:92px}
.pline .postdone{display:inline-flex;align-items:center;padding:0 14px}
.pline .btn.small{display:inline-flex;align-items:center;border:1px solid var(--line)}
.plinkgap{flex:none;width:0}
.pline.addline{padding-top:2px}
.pchan.add{border-style:dashed;font-size:15px}
.pline.addline .hint{font-size:12px;color:var(--muted)}
/* ไฟล์เฉพาะช่องทาง อยู่ในแผงรายละเอียด */
.pfiles{margin-top:12px;display:grid;gap:8px}
.pfiles b{font-size:13px}
.pfiles small{color:var(--muted);font-size:12px}
.pfiles .plink input{width:100%}
/* ป้ายช่องทางในคิวยิงแอดและหน้าค่าแอด */
.adname .chan{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);
  border:1px solid var(--line);border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:middle}
@media (max-width:640px){
  .plines{padding-left:0}
}

/* เรื่องที่ขอ support ของคอนเทนต์ที่ถูกยกเลิกไปแล้ว — ขีดฆ่าไว้ ไม่ลบหายไปเฉย ๆ */
.supcard.clipoff .supmain b,.supcard.clipoff .supnote{text-decoration:line-through;color:var(--muted)}
.clipoffbar{margin:-2px 0 10px;padding:7px 11px;border-radius:8px;font-size:12.5px;font-weight:600;
  color:var(--danger);background:var(--danger-soft);border:1px solid var(--danger)}
/* ชุดที่ต้องใส่ ในตารางแผนถ่าย */
.ptab .pname .pwear{display:block;font-style:normal;font-size:11px;color:#555}
/* บอกพร็อพว่ากองนี้ติดอยู่ที่ขั้นไหน ในมือใคร และค้างมากี่วัน */
.statuswait.stuck{display:grid;gap:3px;text-align:right}
.statuswait.stuck i{font-style:normal;font-size:12px;line-height:1.5;color:var(--muted);white-space:normal}
.statuswait.stuck i:first-child{color:var(--warn);font-weight:600}

/* ---------- ค่าใช้จ่ายเพิ่มเติม — การ์ดเลือกหมวด และการแนบบิล ---------- */
.spendkinds{margin-bottom:14px}
.billpick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 12px;
  padding:11px 12px;border:1px dashed var(--line);border-radius:10px;background:var(--panel-2)}
.billpick .btn.small{margin-top:0}
.billpick .hint{font-size:12px;color:var(--muted)}
.billgot{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--ok);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spendrow .btn.small,.spendrow .nobill{margin-top:0;white-space:nowrap}
.spendrow .nobill{border-color:var(--warn);color:var(--warn)}
.nobilltag{font-size:12px;font-weight:600;color:var(--warn);background:var(--warn-soft);
  border:1px solid var(--warn);border-radius:99px;padding:4px 11px;white-space:nowrap}
/* กล่องถามว่าพร็อพพร้อมแบบไหน */
.prepkinds{grid-template-columns:1fr;margin-bottom:14px}
.statusdone.onsite{color:var(--warn)}
/* บรีฟให้คนตัดของงานคิด + ตัด */
.editbriefbox{padding:14px 16px;display:grid;gap:9px}
.editbriefbox b{font-size:15px}
.editbriefbox .hint{margin:0;font-size:12.5px;color:var(--muted);line-height:1.6}
.editbriefbox textarea{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel-2);color:var(--text);font-family:inherit;font-size:14.5px;line-height:1.75}
.editbriefbox textarea:focus{outline:none;border-color:var(--accent);background:var(--panel)}
.editbriefbox .btnrow{margin:0;justify-content:flex-end}
.editbriefbox.done{border-color:var(--ok)}
.editbriefbox.done b{color:var(--ok)}

/* ---------- กางแถวในหน้าส่งลูกค้า เห็นคอนเทนต์ทีละชิ้น ---------- */
.sendbox{border-bottom:1px solid var(--line-soft)}
.sendbox:last-child{border-bottom:none}
.sendbox > .row.sendrow{border-bottom:none}
.sendbox.open{border:1px solid var(--accent);border-radius:10px;background:var(--panel);
  box-shadow:0 0 0 3px var(--accent-soft);margin:6px 0}
.sendbox.open > .row.sendrow{background:var(--accent-soft)}
.sendopen{padding:2px 14px 12px}
.sendopen .flowsum{margin:0;border:0;box-shadow:none;background:none;padding:0}
.sendbox .row.sendrow .btn.small{margin-top:0;white-space:nowrap}
/* สลับมุมมองหน้าส่งลูกค้า — ตามสถานะ หรือ ตามสิ่งที่ต้องทำ */
.tabs.sendview{margin-bottom:16px}
.tabs.sendview .qdot{margin-left:6px}
.opshead.mineq{color:var(--danger)}
.opshead.mineq .qdot{background:var(--danger);color:#fff;border-color:var(--danger)}

/* ---------- กล่องติ๊กว่าถ่ายอะไรไปบ้าง ใช้ทั้งตอนปิดกองและตอนรับฟุตเทจ ---------- */
.shotsheet{max-width:520px}
.shotsheet > b{font-size:17px;display:block}
.shotsheet .hint{margin:4px 0 12px;font-size:13px;color:var(--muted);line-height:1.6}
.shotlistbox{display:grid;gap:4px;max-height:40vh;overflow:auto;margin-bottom:12px;
  border:1px solid var(--line);border-radius:10px;padding:6px;background:var(--panel-2)}
.shotpick{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px}
.shotpick:hover{background:var(--panel)}
.shotpick.done .main b{text-decoration:line-through;color:var(--muted)}
.shotpick .main{flex:1;min-width:0}
.shotpick .main b{display:block;font-size:14px;font-weight:600;line-height:1.45}
.shotpick .main small{display:block;color:var(--muted);font-size:12px}
.shotsheet .btn.small{margin-top:0;margin-bottom:12px}
.shotsheet .field{display:block;margin-bottom:8px}
.shotsheet .field span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.shotsheet .field input{width:100%;height:42px;box-sizing:border-box}
.shotsheet .btnrow{margin-top:6px;justify-content:flex-end}
/* กล่องส่งไฟล์ในลิงก์ของลูกค้า */
.pubwrap .footbox{display:grid;gap:9px;padding:15px 17px}
.pubwrap .footbox b{font-size:16px}
.pubwrap .footbox p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.65}
.pubwrap .footbox input{width:100%;height:44px;box-sizing:border-box;padding:0 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--text);font-size:15px}
.pubwrap .footbox input:focus{outline:none;border-color:var(--accent);background:var(--panel)}
.pubwrap .footbox .btn{justify-self:start;margin-top:2px}
.pubwrap .footbox.done{border-color:var(--ok)}
.pubwrap .footbox.done b{color:var(--ok)}

/*
 * ถามก่อนเริ่มเขียน — สามทางนี้เดินต่อไม่เหมือนกัน จึงต้องเห็นคำอธิบายของแต่ละทางพร้อมกัน
 * ไม่ใช่ปุ่มเรียงเฉย ๆ เพราะคนเลือกต้องอ่านก่อนว่าเลือกไปแล้วเกิดอะไรต่อ
 */
.planask{border:1px solid var(--accent);border-radius:14px;background:var(--accent-soft);
  padding:15px 16px;margin:4px 0 14px;display:flex;flex-direction:column;gap:11px}
.planask > b{font-size:16px}
.planask .hint{margin:0;font-style:normal}
.plankinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.plankind{text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--card);
  padding:13px 14px;display:flex;flex-direction:column;gap:4px;cursor:pointer}
.plankind:hover{border-color:var(--accent)}
.plankind.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.plankind b{font-size:14.5px}
.plankind i{font-style:normal;font-size:11.5px;color:var(--muted);line-height:1.55}
.planask .btnrow{margin:0}

/* ลูกค้าขอบทเต็มทีหลัง — ปุ่มอยู่ในหัวคอนเทนต์ชิ้นนั้น พร้อมบอกว่ากดแล้วเกิดอะไร */
.askfull{margin-top:9px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.askfull i{font-style:normal;font-size:11.5px;color:var(--muted);line-height:1.55}

/* ป้ายของทีมเท่านั้น — ลิงก์ที่ส่งลูกค้าและใบออกกองไม่มีป้ายนี้ */
.tag.needfull{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* เส้นทางการทำงานในแผงเครื่องมือ เป็นลิงก์ไม่ใช่ปุ่ม จึงต้องสั่งไม่ให้มีเส้นใต้เอง */
a.toolsone{text-decoration:none}

/*
 * ตารางในใบงานกองบนจอแคบ — เลื่อนซ้ายขวาในกล่องของตัวเอง ไม่ใช่บีบช่องให้แคบลง
 * ภาษาไทยไม่มีช่องว่างระหว่างคำ ช่องที่แคบเกินจะถูกตัดทีละคำจนอ่านเป็นชื่อไม่ออก
 */
.ptabwrap{overflow-x:auto}
.ptab .pfee{width:74px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ptab .pfeesum td{border-bottom:0;padding-top:8px;font-weight:700;color:#1b2136}
.ptab .pfeesum td:first-child{text-align:right;color:#4a5068;font-weight:600}
@media print{
  .ptabwrap{overflow:visible}
  .ptabwrap .ptab{min-width:0}
}

/* ประเภทกับคอนเทนต์ที่ย้ายมาอยู่ใต้ชื่อ — โผล่เฉพาะตอนจอแคบ กระดาษไม่เอา */
.ptab .ponly{display:none}
@media (max-width:640px){
  /* ตารางนักแสดงประกอบบนมือถือ เหลือสี่ช่องที่คนหน้ากองต้องใช้จริง จะได้ไม่ต้องเลื่อนหาชื่อ */
  .ptabwrap .ptab.pcast{min-width:0}
  .ptab.pcast .pkind,.ptab.pcast .pforclip{display:none}
  .ptab.pcast .ponly{display:block;font-style:normal;font-weight:400;font-size:10.5px;color:#7b8196}
  /*
   * ล็อกความกว้างแต่ละช่องเอง ไม่ปล่อยให้เบราว์เซอร์เกลี่ย
   * ไม่งั้นเบอร์โทรที่ห้ามตกบรรทัดจะกินที่ไปเกือบครึ่ง เหลือช่องชื่อแค่พอใส่สองตัวอักษร
   */
  .ptab.pcast{table-layout:fixed}
  .ptab.pcast .pname{width:auto}
  .ptab.pcast .pphone{width:76px;white-space:nowrap}
  .ptab.pcast .pwhen{width:46px;white-space:nowrap}
  .ptab.pcast .pfee{width:48px}
  .ptab.pcast td,.ptab.pcast th{padding:6px 4px}
  .ptab.pcast .pname span{overflow-wrap:break-word}
}

/* ปุ่มจ่ายเงินในแถวคนนอกของใบงานกอง */
.paybar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;
  padding-top:9px;border-top:1px solid var(--line-soft)}
.paybar i{font-style:normal;font-size:11.5px;color:var(--muted);line-height:1.55;flex:1;min-width:180px}

/* ต้องถือเงินสดไปเท่าไหร่ — คนไปกองต้องรู้ก่อนออกจากออฟฟิศ */
.cashline{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:10px 0 0;
  padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.cashline b{font-size:15px}
.cashline i{font-style:normal;font-size:12px;color:var(--muted)}
.cashline.owe{border-color:var(--warn);background:var(--warn-soft)}
.cashline.owe b{color:var(--warn)}
.cashline.done{border-color:var(--ok)}
.cashline.done b{color:var(--ok)}

/*
 * รายการที่จ่ายเงินไปแล้วแต่ยังไม่ได้ตอบว่าหักภาษีหรือเปล่า
 * ตอบตรงนี้ได้เลยทีละรายการ เพราะถ้าไม่ตอบ บิลลูกค้าคิดภาษีผิดทั้งใบ
 */
.taxsweep{border-color:var(--warn)}
.taxrows{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.taxrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  padding:9px 0;border-top:1px solid var(--line-soft)}
.taxrow:first-child{border-top:0}
.taxwho{flex:1;min-width:170px;display:flex;flex-direction:column;gap:2px}
.taxwho b{font-size:14.5px}
.taxwho small{font-size:12px;color:var(--muted)}
.taxbtns{display:flex;gap:7px;flex:none}
.taxbtns .btn{margin-top:0}

/* คลังรูปของเกม — ใครก็เติมได้ อยู่บนหน้าเลือกเกมเลย ไม่ต้องเข้าทางหน้าตั้งค่า */
.gpics .picadd{cursor:pointer}

/*
 * ต้องคิดเพิ่มอีกกี่ไอเดีย — อยู่บนสุดของคอลัมน์ที่ผ่านแล้ว
 * ตอบคำถามเดียวที่คนเปิดกระดานอยากรู้ ก่อนจะเลื่อนดูรายการ
 */
.needmore{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;
  padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.needmore b{font-size:15px}
.needmore i{font-style:normal;font-size:12px;color:var(--muted);line-height:1.6}
.needmore.warn{border-color:var(--warn);background:var(--warn-soft)}
.needmore.warn b{color:var(--warn)}
.needmore.ok{border-color:var(--ok)}
.needmore.ok b{color:var(--ok)}
.needmore.over{border-color:var(--accent);background:var(--accent-soft)}
.needmore.over b{color:var(--accent)}

/* ของที่ซื้อไว้แล้วแต่คอนเทนต์เลื่อนไปกองหน้า — หน้าแรกของทีมพร็อพ */
.heldbox{border-color:var(--warn)}
.heldbox .rows .row{align-items:flex-start}
.heldbox .main small{display:block;line-height:1.6}

/* เตือนตอนคอนเทนต์ที่เคยซื้อของไว้แล้วกลับเข้ากองใหม่ */
.boughtbefore{display:flex;flex-direction:column;gap:3px;margin-top:10px;
  padding:11px 13px;border:1px solid var(--warn);border-radius:12px;background:var(--warn-soft)}
.boughtbefore b{font-size:14.5px;color:var(--warn)}
.boughtbefore i{font-style:normal;font-size:12px;color:var(--muted);line-height:1.6}

/* บอกว่าทำไมหน้านี้ไม่มีปุ่มแก้ ไม่ใช่ปล่อยให้เดาว่าเว็บพัง */
.readonlynote{margin:12px 0 0;padding:10px 13px;border:1px dashed var(--line);border-radius:10px;
  color:var(--muted);font-size:12.5px;line-height:1.65}

/* การ์ดสรุปเงินของกอง แยกเป็นก้อน กดเพื่อกรองเหลือก้อนเดียว */
.billcats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.billcat{display:flex;flex-direction:column;gap:2px;text-align:left;padding:12px 14px;cursor:pointer;
  border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.billcat:hover{border-color:var(--accent)}
.billcat.on{border-color:var(--accent);background:var(--accent-soft)}
.billcat small{font-size:12px;color:var(--muted)}
.billcat b{font-size:19px;font-variant-numeric:tabular-nums}
.billcat i{font-style:normal;font-size:11.5px;color:var(--muted)}
.billcat.total{cursor:default;border-style:dashed;background:var(--panel-2)}
.billcat.total:hover{border-color:var(--line)}

/* จัดกลุ่มกองในหน้ารวมบิล ตามลูกค้าหรือตามเดือน */
.tabs.billgroups{margin:12px 0}
.billgroupbox{margin-bottom:18px}
.billgrouphead{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin:0 0 8px}
.billgrouphead span{font-size:12.5px;color:var(--muted);font-weight:400}
.billgrouphead em{margin-left:auto;font-style:normal;font-size:13.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}

/* ---- ค่าใช้จ่ายในกอง: เกิดตอนไหน (ก่อนกอง / หน้ากอง / หลังกอง) ---- */
/* ชื่อคลาส when- ไม่ใช่ stage- เพราะ .stagechip เป็นของสเตจคอนเทนต์ไปแล้ว */
.whenpick{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.whenlabel{font-size:.82rem;color:var(--muted)}
.whenrow{display:flex;gap:8px;flex-wrap:wrap}
.whenchip{flex:1;min-width:92px;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 8px;border:1px solid var(--line);border-radius:12px;background:var(--card);
  color:var(--text);font:inherit;font-size:.86rem;cursor:pointer}
.whenchip u{text-decoration:none;font-size:1.1rem;line-height:1}
.whenchip.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);font-weight:600}
.whentag{font-style:normal;font-size:.72rem;padding:1px 7px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);white-space:nowrap}
.whenfill{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;font-size:.78rem;color:var(--muted)}
.whenblock{margin:0 0 10px}
.whenblock h4{display:flex;align-items:baseline;gap:8px;margin:12px 14px 6px;font-size:.9rem}
.whenblock h4 em{margin-left:auto;font-style:normal;font-size:.8rem;color:var(--muted);white-space:nowrap}

/* ---- ดูหลักฐานทีละชุด เลื่อนซ้ายขวาได้ ---- */
.shotpane{position:relative;display:flex;align-items:center;justify-content:center;cursor:default;max-width:100%}
.shotarrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:none;background:rgba(0,0,0,.55);color:#fff;font-size:28px;line-height:1;cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(2px)}
.shotarrow:hover{background:rgba(0,0,0,.8)}
.shotarrow.left{left:-10px}
.shotarrow.right{right:-10px}
@media (max-width:680px){.shotarrow.left{left:4px}.shotarrow.right{right:4px}}
.shotfeet{display:flex;align-items:center;gap:12px;cursor:default}
.shotcount{color:#fff;font-size:13px;font-variant-numeric:tabular-nums}
.shotfeet .btn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff;text-decoration:none}

/* ---- หน้าบัญชี: ค่าใช้จ่ายรายคอนเทนต์ ---- */
.ctbox{border:1px solid var(--line);border-radius:12px;background:var(--card);margin:0 0 12px;overflow:hidden}
.cthead{display:flex;align-items:baseline;gap:10px;margin:0;padding:11px 14px;background:var(--panel);
  border-bottom:1px solid var(--line);font-size:.95rem}
.cthead span{font-size:.8rem;color:var(--muted)}
.cthead em{margin-left:auto;font-style:normal;font-weight:700;white-space:nowrap}
.ctlines{display:flex;flex-direction:column}
.ctline{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--line)}
.ctline:first-child{border-top:none}
.ctline.warn{background:color-mix(in srgb,var(--warn) 10%,transparent)}
.ctmain{flex:1;min-width:0;display:flex;flex-direction:column}
.ctmain small{color:var(--muted);font-size:.78rem}
.ctamt{white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .ctline{flex-wrap:wrap}
  .ctmain{flex:1 0 100%}
}

/* ---- ติ๊กว่าบิลใบนี้เป็นของคอนเทนต์ไหนบ้าง ---- */
.splitrows{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.splitrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.splitrow.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.splitrow b{flex:1;min-width:0;font-weight:550;font-size:.9rem}
.splitrow input{width:96px;text-align:right;font-variant-numeric:tabular-nums}
.splittick{border:none;background:none;font-size:18px;line-height:1;cursor:pointer;color:var(--text)}
.splitfoot{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;
  background:var(--panel);font-size:.85rem;margin-bottom:10px}
.splitfoot span{color:var(--muted)}
.splitfoot.warn{background:color-mix(in srgb,var(--warn) 14%,transparent)}

/* ---- ใบเบิกเงินคืน: ภาพรวมก่อน แล้วค่อยรายละเอียดรายคน ---- */
.rbsum{padding-bottom:14px}
.rbtitle{margin:0 0 2px;font-size:1.05rem}
.rbsub{margin:0 0 12px;color:var(--muted);font-size:.85rem}
.rbtable tr.rbdone{opacity:.55}
.rbtable tr.rbon{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.rbname{border:none;background:none;padding:0;font:inherit;font-weight:600;color:var(--text);
  cursor:pointer;text-align:left}
.rbname:hover{text-decoration:underline}
.rbnote{margin:10px 0 0;color:var(--muted);font-size:.8rem}

/* ---- ใบเบิกเงินคืน: สถานะคืนเงินเป็นคอลัมน์ของตัวเอง ---- */
.invtable .c-back{width:132px}
.backyes{color:var(--ok);font-weight:650;display:block}
.backno{color:var(--muted);display:block}
.invtable .c-back .backbtn{margin:4px 0 0}

/* ---- ลูกค้าพิมพ์คอมเมนต์มาแทนการกดปุ่ม ---- */
/* ไม่ใช้สีแดงแบบ .late เพราะยังไม่ใช่ของค้าง แต่ต้องสะดุดตากว่าแถวที่ยังไม่ตอบ */
.hostrow.saidwait{border-color:var(--accent)}
.hostrow.saidwait .rowmain small{color:var(--accent)}
.hostrow.saidwait .rowmain .saymore{color:var(--text)}

/* ---- หน้าเข้าใช้งาน: จอคอมแบ่งซ้ายขวา มือถือเหลือกล่องเดียว ---- */
.loginbox{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  padding:32px 16px;width:100%}
.loginbox .card{width:100%;max-width:380px;text-align:left}
.logintools{position:fixed;top:16px;right:16px;z-index:3;display:flex;gap:8px}
.passbox{position:relative;display:block}
.passbox input{width:100%;padding-right:42px}
.eyebtn{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:none;
  font-size:15px;line-height:1;cursor:pointer;padding:4px 6px;opacity:.7}
.eyebtn:hover{opacity:1}
@media (max-width:860px){
  .loginbox{padding:24px 16px 40px}
}

/* ---- ตั้งค่าของฉัน ---- */
.mewrap{max-width:720px}
.mecard{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.mebig{position:relative;display:grid;place-items:center;gap:6px;cursor:pointer}
.mebig i{font-style:normal;font-size:11px;color:var(--muted)}
.memain{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px}
.memain b{font-size:1.1rem}
.memain small{color:var(--muted)}
.mebtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.mesec{margin-top:12px;display:flex;flex-direction:column;gap:4px}
.mesec>b{font-size:1rem}
.merow{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.merow input{flex:1;min-width:180px}
.mepass{display:flex;flex-direction:column;gap:8px;margin-top:8px;max-width:380px}
.melist{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:10px}
.melist div{display:flex;flex-direction:column;gap:2px}
.melist small{color:var(--muted);font-size:.78rem}
.meage{font-style:normal;font-weight:500;font-size:.78rem;color:var(--muted);margin-left:6px}
.mesec.locked{opacity:.92}

/* ======================================================================
   สกิน Sheet — ถอดสูตรมาจากเว็บที่ทีมชอบ (brandsheet)
   สูตรมีสี่ข้อ หนึ่ง ไม่ใช้สีขาว ใช้เทาอมม่วงทั้งหน้า
   สอง หัวข้อใหญ่แต่บาง ไม่ใช้ตัวหนา และบีบระยะตัวอักษรเข้า
   สาม มุมมนใหญ่ ปุ่มเป็นแคปซูล เงานุ่มใหญ่เงาเดียวทั้งเว็บ
   สี่ จังหวะอนิเมชั่นเส้นเดียวทั้งเว็บ ท่าเข้าคือจางขึ้นพร้อมคลายเบลอ
   อยู่ในสกินแยก ไม่แตะของเดิม ใครไม่เปิดก็เห็นเหมือนเดิมทุกอย่าง
   ====================================================================== */
:root[data-skin="soft"]{
  --bg:#e9e9ee; --panel:#f6f6f9; --panel-2:#f0f0f4; --card:#f6f6f9;
  --line:#dadae0; --line-soft:#e6e6ec;
  --text:#121317; --muted:#45474d;
  --accent:#6b5cf6; --accent-ink:#fff; --accent-soft:#eceaff;
  --radius:18px;
  --shadow:0 18px 44px -28px rgba(18,19,23,.38);
  --ease:cubic-bezier(.2,.7,.2,1);
  --sheet-grad:linear-gradient(90deg,#3279f9 0%,#8b5cf6 55%,#e34ba9 100%);
}
@media (prefers-color-scheme:dark){
  :root[data-skin="soft"]:not([data-theme="light"]){
    --bg:#101014; --panel:#17171d; --panel-2:#1c1c23; --card:#17171d;
    --line:#2b2b34; --line-soft:#232329;
    --text:#ececf2; --muted:#9b9ba6; --accent:#9b8cff; --accent-soft:#232140;
    --shadow:0 18px 44px -26px rgba(0,0,0,.75);
  }
}
:root[data-skin="soft"][data-theme="dark"]{
  --bg:#101014; --panel:#17171d; --panel-2:#1c1c23; --card:#17171d;
  --line:#2b2b34; --line-soft:#232329;
  --text:#ececf2; --muted:#9b9ba6; --accent:#9b8cff; --accent-soft:#232140;
  --shadow:0 18px 44px -26px rgba(0,0,0,.75);
}

:root[data-skin="soft"] body{
  font-family:"Google Sans Flex","Google Sans","IBM Plex Sans Thai",Inter,"Noto Sans Thai",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* หัวข้อใหญ่ขึ้นแต่บางลง — นี่คือสิ่งที่ทำให้เว็บต้นแบบดูนิ่ง ไม่ใช่สีหรือเงา */
:root[data-skin="soft"] h1,
:root[data-skin="soft"] h2{font-weight:500;letter-spacing:-.03em;line-height:1.3}
:root[data-skin="soft"] .head h2,
:root[data-skin="soft"] .pagehead h2{font-size:clamp(22px,3.4vw,32px)}
:root[data-skin="soft"] .kicker{letter-spacing:.06em}

/* มุมมนใหญ่กับเงานุ่ม ใช้กับกล่องใหญ่เท่านั้น แถวในตารางยังแน่นเหมือนเดิม */
:root[data-skin="soft"] .card,
:root[data-skin="soft"] .billbox,
:root[data-skin="soft"] .extrabox,
:root[data-skin="soft"] .costbox,
:root[data-skin="soft"] .ctbox,
:root[data-skin="soft"] .billgroupbox,
:root[data-skin="soft"] .sheet,
:root[data-skin="soft"] .paper{border-radius:22px;box-shadow:var(--shadow)}
:root[data-skin="soft"] .kpi,
:root[data-skin="soft"] .billkpi,
:root[data-skin="soft"] .billcat,
:root[data-skin="soft"] .projbill,
:root[data-skin="soft"] .row{border-radius:14px}

/* ปุ่มเป็นแคปซูล · โฮเวอร์ขยับอย่างเดียว ไม่เปลี่ยนสีให้ตาสะดุด */
:root[data-skin="soft"] .btn,
:root[data-skin="soft"] .chip,
:root[data-skin="soft"] .navtab,
:root[data-skin="soft"] .tabs button{border-radius:999px}
:root[data-skin="soft"] .btn{transition:transform .25s var(--ease),border-color .25s var(--ease)}
:root[data-skin="soft"] .btn:not(:disabled):hover{transform:translateY(-1px)}
:root[data-skin="soft"] .btn.primary{box-shadow:0 12px 26px -16px color-mix(in srgb,var(--accent) 80%,transparent)}

/* ช่องกรอก: โฟกัสแล้วเส้นใต้ไล่สีวิ่งจากซ้ายไปขวา แทนกรอบเรืองแสง */
:root[data-skin="soft"] .field input,
:root[data-skin="soft"] .field select,
:root[data-skin="soft"] .field textarea{border-radius:12px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
:root[data-skin="soft"] .field input:focus,
:root[data-skin="soft"] .field textarea:focus,
:root[data-skin="soft"] .field select:focus{
  outline:none;border-color:transparent;
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--accent) 55%,transparent),0 8px 22px -14px color-mix(in srgb,var(--accent) 70%,transparent);
}
:root[data-skin="soft"] .field{position:relative}
:root[data-skin="soft"] .field::after{
  content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;
  background:var(--sheet-grad);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);pointer-events:none}
:root[data-skin="soft"] .field:focus-within::after{transform:scaleX(1)}

/* ท่าเข้าท่าเดียวทั้งเว็บ · ไล่ขึ้นมาทีละชิ้นเฉพาะหกชิ้นแรก ที่เหลือขึ้นพร้อมกัน
   ไม่ไล่ทั้งหน้า เพราะบางหน้ามีของเป็นร้อยแถว ไล่หมดจะรู้สึกว่าเว็บช้า */
@keyframes sheetin{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
:root[data-skin="soft"] .vin{animation:none}
:root[data-skin="soft"] .wrap.vin>*{animation:sheetin .5s var(--ease) both}
:root[data-skin="soft"] .wrap.vin>*:nth-child(1){animation-delay:.02s}
:root[data-skin="soft"] .wrap.vin>*:nth-child(2){animation-delay:.06s}
:root[data-skin="soft"] .wrap.vin>*:nth-child(3){animation-delay:.10s}
:root[data-skin="soft"] .wrap.vin>*:nth-child(4){animation-delay:.14s}
:root[data-skin="soft"] .wrap.vin>*:nth-child(5){animation-delay:.18s}
:root[data-skin="soft"] .wrap.vin>*:nth-child(n+6){animation-delay:.2s}
@media (prefers-reduced-motion:reduce){
  :root[data-skin="soft"] .wrap.vin>*{animation:none}
}

/* แถบบนเป็นกระจกฝ้า ให้เนื้อหาไหลผ่านข้างใต้ */
:root[data-skin="soft"] .top{
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* ประวัติการแก้ไข: บอกว่าเปลี่ยนจากอะไรเป็นอะไร ต่อท้ายชื่อการกระทำ */
.audchg{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px}

/* ---- สกิน Sheet รอบที่ 2: รายละเอียดที่เหลือจากเว็บต้นแบบ · แก้สไตล์อย่างเดียว ---- */

/* ตัวเลขความกว้างเท่ากันทั้งเว็บ ยอดเงินในตารางจะเรียงตรงกันทุกแถว */
:root[data-skin="soft"] body{font-variant-numeric:tabular-nums}

/* ลากคลุมข้อความได้สีฟ้าอ่อนแบบเขา */
:root[data-skin="soft"] ::selection{background:#d2e3fc;color:#121317}

/* คำอธิบายใต้หัวข้อ ตัวโตขึ้นและหายใจขึ้น */
:root[data-skin="soft"] .pagehead p,
:root[data-skin="soft"] .head p{font-size:16px;line-height:1.7}

/* ป้ายชื่อช่องกรอก ตัวหนาขึ้นและเข้มขึ้น อ่านง่ายกว่าเทาจาง */
:root[data-skin="soft"] .field span{font-size:13.5px;font-weight:600;color:var(--text)}

/* ป้ายแคปซูลจาง ๆ แบบเขา ใช้กับป้ายสถานะทุกตัว */
:root[data-skin="soft"] .tag,
:root[data-skin="soft"] .statuswait,
:root[data-skin="soft"] .statusdone,
:root[data-skin="soft"] .statusready,
:root[data-skin="soft"] .readytag{border-radius:999px;padding:4px 12px;font-size:12px}

/* ชิปที่เลือกอยู่เป็นสีทึบ เห็นชัดกว่าสีจางว่ากดอันไหนค้างไว้ */
:root[data-skin="soft"] .chip.on{background:var(--text);border-color:var(--text);color:var(--bg)}
:root[data-skin="soft"] .chip.on i{background:var(--bg);color:var(--text)}

/*
 * แถบโหลดด้านบนใช้ไล่สีชุดเดียวกับเว็บต้นแบบได้ เพราะมันอยู่บนพื้นหลังของหน้า
 * แต่หลอดเป้าของรอบอยู่บนการ์ดสีม่วง ไล่สีชุดนี้เป็นน้ำเงินม่วงชมพู มันจึงกลืนไปกับการ์ด
 * ปล่อยให้หลอดนั้นใช้สีส้มอำพันของเดิม ซึ่งตัดกับพื้นม่วงชัดที่สุด และเป็นสีเขียวเมื่อเต็มเป้า
 */
:root[data-skin="soft"] .loadbar::after{background:var(--sheet-grad)}

/* ตัวเลขไล่สีหนึ่งตัวต่อหน้า — เลือกยอดรวมทั้งกองในหน้าบัญชี */
:root[data-skin="soft"] .billcat.total b{
  background-image:var(--sheet-grad);background-clip:text;-webkit-background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}

/* จุดไล่สีเล็ก ๆ หน้าป้ายแผนก แบบปุ่มกลางบนของเขา */
:root[data-skin="soft"] .deptbadge::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--sheet-grad);flex:none}

/* แผงเครื่องมือเป็นกระจกฝ้ามนใหญ่ โครงเดียวกับเมนูป๊อปอัพของเขา */
:root[data-skin="soft"] .toolspanel{
  border-radius:20px;background:color-mix(in srgb,var(--panel) 95%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow)}

/* ปุ่มลอยมุมขวา ให้เป็นกระจกฝ้าและเงานุ่มแบบปุ่มเพลงของเขา */
:root[data-skin="soft"] .shoutfab,
:root[data-skin="soft"] .callfab{
  background:color-mix(in srgb,var(--panel) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow)}

/* ข้อความแจ้งเป็นแคปซูลทึบ ลอยอยู่ล่างจอแบบเขา ไม่ใช่กลางจอ */
:root[data-skin="soft"] .toast{
  top:auto;bottom:88px;transform:translate(-50%,0);border-radius:999px;
  background:var(--text);color:var(--bg);border:none;padding:10px 22px;font-size:14px}

/* ปุ่มหลักใบใหญ่ มีวงกลมลูกศรท้ายปุ่ม และลูกศรหมุนตอนเอาเมาส์ชี้
   ใส่เฉพาะปุ่มใบใหญ่ ปุ่มเล็กในตารางไม่แตะ ไม่งั้นแถวจะสูงขึ้นทั้งหน้า */
:root[data-skin="soft"] .btn.primary.big{padding:7px 7px 7px 24px;gap:14px;justify-content:space-between}
:root[data-skin="soft"] .btn.primary.big::after{
  content:"→";display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--accent-ink);color:var(--accent);font-size:15px;
  transition:transform .3s var(--ease)}
:root[data-skin="soft"] .btn.primary.big:not(:disabled):hover::after{transform:rotate(-45deg)}

/* ปุ่มลบท้ายแถว ซ่อนไว้ก่อน โผล่ตอนเอาเมาส์ชี้แถวนั้น แถวจะได้ไม่รก
   เฉพาะเครื่องที่มีเมาส์จริง บนมือถือไม่มีการชี้ ต้องเห็นตลอด */
@media (hover:hover){
  :root[data-skin="soft"] .row .dropbtn,
  :root[data-skin="soft"] .mrow .lnk.del{opacity:0;transition:opacity .2s var(--ease)}
  :root[data-skin="soft"] .row:hover .dropbtn,
  :root[data-skin="soft"] .mrow:hover .lnk.del,
  :root[data-skin="soft"] .row .dropbtn:focus-visible,
  :root[data-skin="soft"] .mrow .lnk.del:focus-visible{opacity:1}
}

/* ---- สกิน Sheet รอบที่ 3: จังหวะที่ต้องมีโค้ดช่วย ---- */

/* เคอร์เซอร์กะพริบไล่สีท้ายคำทักทาย · สกินอื่นไม่เห็น */
.caret{display:none}
:root[data-skin="soft"] .caret{
  display:inline-block;width:3px;height:.95em;vertical-align:-.08em;margin-left:4px;border-radius:9px;
  background-image:var(--sheet-grad);animation:caretblink 1.1s steps(1,end) infinite}
@keyframes caretblink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* สามจุดกระพริบตอน AI คิด · สกินอื่นยังเป็นวงหมุนเดิม
   ห้ามใช้ชื่อ .think ตรงนี้ คอลัมน์กระดานไอเดียใช้ชื่อนั้นอยู่ก่อนแล้ว */
.aidots{display:none}
:root[data-skin="soft"] .aib.work .spin{display:none}
:root[data-skin="soft"] .aidots{display:inline-flex;align-items:flex-end;gap:3px;height:12px;vertical-align:-1px}
:root[data-skin="soft"] .aidots span{
  width:5px;height:5px;border-radius:50%;background:var(--accent);
  animation:thinkdot 1.1s ease-in-out infinite}
:root[data-skin="soft"] .aidots span:nth-child(2){animation-delay:.15s}
:root[data-skin="soft"] .aidots span:nth-child(3){animation-delay:.3s}
@keyframes thinkdot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}

/* ท่าออกก่อนเปลี่ยนหน้า */
:root[data-skin="soft"] .wrap.fxout{
  opacity:0;transform:translateY(-14px);filter:blur(6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),filter .2s var(--ease)}
@media (prefers-reduced-motion:reduce){
  :root[data-skin="soft"] .wrap.fxout{transition:none;opacity:1;transform:none;filter:none}
  :root[data-skin="soft"] .caret,
  :root[data-skin="soft"] .aidots span{animation:none}
}

/* ---- หน้าล็อกอิน: อนุภาคลอยและวงแหวนตามเมาส์ · มีเฉพาะสกิน Sheet และเฉพาะหน้านี้ ---- */
#loginbg,.loginveil{display:none}
:root[data-skin="soft"] #loginbg{
  display:block;position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* ฝ้าไล่จากกลางออก ทำให้อนุภาคจางตรงกลางที่มีกล่องกรอก ตัวหนังสือจะได้ไม่ลาย */
:root[data-skin="soft"] .loginveil{
  display:block;position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,
    color-mix(in srgb,var(--bg) 92%,transparent) 0%,
    color-mix(in srgb,var(--bg) 55%,transparent) 42%,
    transparent 74%)}
:root[data-skin="soft"] .loginbox .card{position:relative;z-index:2}
:root[data-skin="soft"] .logintools{z-index:3}

/* ---- สกิน Sheet: แถบเมนูบน · ของเดิมเมนูชิดกันเป็นพืดและไม่มีกรอบ กดยาก ---- */
/*
 * ต้องเผื่อขอบจอ (safe area) ในบรรทัดนี้ด้วย เพราะเป็น padding แบบย่อ
 * มันจะล้างค่าที่เผื่อไว้ให้ไอโฟนจอมีติ่งข้างบนทิ้งทั้งหมด
 * ผลคือโลโก้กับปุ่มแถวบนไปอยู่ใต้นาฬิกาและ Dynamic Island จนกดไม่ได้
 */
:root[data-skin="soft"] .top{
  padding:calc(12px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-right,0px))
          12px calc(18px + env(safe-area-inset-left,0px));
  row-gap:10px;gap:14px}

/* เมนูหลัก: ห่างกันขึ้น มีกรอบจาง ๆ ตอนชี้ และตัวที่เปิดอยู่เป็นแคปซูลทึบ */
:root[data-skin="soft"] .navtabs{gap:6px}
:root[data-skin="soft"] .navtab{
  padding:7px 14px;font-size:13.5px;
  border:1px solid var(--line-soft);
  background:color-mix(in srgb,var(--panel) 60%,transparent);
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
:root[data-skin="soft"] .navtab:hover{
  background:var(--panel);border-color:var(--muted);color:var(--text)}
:root[data-skin="soft"] .navtab.on{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
:root[data-skin="soft"] .navtab.on:hover{background:var(--accent);color:var(--accent-ink)}

/* ปุ่มเล็กแถวล่าง: ใส่กรอบให้ดูเป็นปุ่ม ไม่ใช่ตัวหนังสือลอย ๆ */
:root[data-skin="soft"] .top .btn.ghost,
:root[data-skin="soft"] .top .themebtn,
:root[data-skin="soft"] .top .langbtn{
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 72%,transparent)}
:root[data-skin="soft"] .top .btn.ghost:hover,
:root[data-skin="soft"] .top .themebtn:hover,
:root[data-skin="soft"] .top .langbtn:hover{border-color:var(--muted);color:var(--text)}

/* ชื่อคนที่ล็อกอินอยู่ ไม่ใช่ปุ่ม ให้จางกว่าปุ่มรอบข้างชัด ๆ */
:root[data-skin="soft"] .top .who{padding:0 2px;opacity:.75}

/* ---- สกิน Sheet: แยกแถบเมนูออกจากแถบบัญชีให้เป็นคนละส่วน และเปิดไอคอน ---- */
/* เมนูกินเต็มความกว้างและลงไปอยู่แถวล่างเสมอ กลายเป็นแถบของตัวเอง */
:root[data-skin="soft"] .navtabs{
  flex:1 0 100%;order:9;
  margin:2px -18px -12px;padding:5px 18px;
  background:color-mix(in srgb,var(--panel) 55%,transparent);
  border-top:1px solid var(--line)}
/* แถวบนเป็นเรื่องตัวเอง โลโก้ แผนก และปุ่มบัญชี · แถวล่างเป็นเมนูงานล้วน ๆ */
:root[data-skin="soft"] .top{padding-bottom:0}

/* ไอคอนมีอยู่ในเมนูทุกอันอยู่แล้ว แค่เปิดให้เห็น ช่วยให้กวาดตาหาเร็วขึ้น */
:root[data-skin="soft"] .navico{display:none}
/*
 * ไอคอนอยู่บน ชื่ออยู่ล่าง · กินความกว้างน้อยกว่าวางเรียงข้างกัน
 * ของผู้บริหารมีเมนู 16 อัน แบบนี้เห็นพร้อมกันได้มากกว่าโดยไม่ต้องเลื่อน
 */
:root[data-skin="soft"] .navtab{
  display:inline-flex;flex-direction:row;align-items:center;gap:5px;
  padding:5px 11px;line-height:1.3}
:root[data-skin="soft"] .navtab .navlab{font-size:12.5px}

/* ---- เมนูแบ่งเป็นก้อน ---- */
/* สกินอื่นต้องเหมือนเดิมเป๊ะ · display:contents ทำให้กล่องก้อนไม่มีผลกับการจัดวางเลย */
.navset{display:contents}
.navsetname{display:none}

/* สกิน Sheet เห็นเป็นก้อนจริง มีชื่อก้อนกำกับ */
/* ก้อนยังอยู่เพื่อแยกเรื่องด้วยสายตา แต่ไม่ต้องมีชื่อกำกับแล้ว */
:root[data-skin="soft"] .navset{
  display:flex;align-items:stretch;gap:1px;flex:none;position:relative;
  padding:3px;border-radius:10px;
  background:color-mix(in srgb,var(--panel) 62%,transparent)}
/*
 * ทุกปุ่มสูงเท่ากันและจัดชื่อให้อยู่แนวเดียวกันทั้งแถว
 * ของเดิมปุ่มที่เปิดอยู่พองใหญ่กว่าเพื่อน แถวเลยดูเป๋
 */
:root[data-skin="soft"] .navset .navtab{
  min-height:28px;justify-content:center;padding:4px 11px;
  background:none;border-color:transparent}
:root[data-skin="soft"] .navset .navtab:hover{background:var(--panel);border-color:var(--line)}
:root[data-skin="soft"] .navset .navtab.on{background:var(--accent);border-color:var(--accent)}
/* ตัวเลขแจ้งเตือนเกาะมุมไอคอน ไม่ดันให้ปุ่มกว้างกว่าเพื่อน */
:root[data-skin="soft"] .navset .navtab{position:relative}
:root[data-skin="soft"] .navset .navtab .tabdot{
  position:static;font-size:10px;padding:0 5px;line-height:15px;min-width:15px;
  text-align:center;margin-left:4px}
:root[data-skin="soft"] .navgap{width:0;margin:0 4px;background:none}

/*
 * หน้าเกมใช้พื้นหลังมืดของตัวเอง แต่ก้อนเมนูของสกิน Sheet เป็นสีขาวโปร่ง 62%
 * พอมาทับแถบบนสีกรมท่า มันกลายเป็นแผ่นเทาอ่อน แล้วตัวหนังสือของธีมมืดซึ่งเป็นสีอ่อนก็จมหายไปหมด
 * บนหน้าเกมจึงให้ก้อนเป็นสีมืดโปร่งแทน ตัวหนังสือจะได้ลอยขึ้นมาอ่านออก
 */
/*
 * ปุ่มเมนูที่ไม่ได้อยู่ในกลุ่ม เช่น ตั้งค่า ต้องหน้าตาเหมือนกลุ่มอื่นในแถวเดียวกัน
 * ของเดิมมันตกไปใช้สีของสกิน Sheet คือขาวโปร่งขอบเทาอ่อน ซึ่งหลุดจากธีมเกมทันที
 * ตัวเลือกใช้ > เพราะปุ่มที่อยู่ในกลุ่มไม่ใช่ลูกตรงของแถวเมนู จะได้ไม่ไปทับของกลุ่ม
 */
#app.gtheme .navtabs>.navtab{background:var(--g-card);border:2px solid var(--g-line);color:var(--g-ink-soft)}
#app.gtheme .navtabs>.navtab:hover{background:var(--g-card-2);border-color:var(--g-line);color:var(--g-ink)}
#app.gtheme .navtabs>.navtab.on{background:var(--g-ink);border-color:var(--g-ink);color:var(--g-bg)}
#app.gtheme .navset{background:var(--g-card);box-shadow:none;border:2px solid var(--g-line)}
#app.gtheme .navset .navtab{color:var(--g-ink-soft)}
#app.gtheme .navset .navtab:hover{background:var(--g-card-2);border-color:transparent;color:var(--g-ink)}
#app.gtheme .navset .navtab.on{background:var(--g-ink);border-color:var(--g-ink);color:var(--g-bg)}
#app.gtheme .navsetname{color:var(--g-ink-soft)}
#app.gtheme .top .who{color:var(--g-ink-soft)}
#app.gtheme .deptbadge{background:var(--g-card);border:2px solid var(--g-line);color:var(--g-ink)}
#app.gtheme .deptbadge select{color:var(--g-ink)}
#app.gtheme .deptbadge span{color:var(--g-ink)}

/* ---- เลื่อนลงแล้วแถบบนซ่อนเอง คืนพื้นที่จอให้เนื้อหา ---- */
/* เผื่อระยะเกิน 100% เพราะเส้นขอบล่างกับเงาทำให้เหลือติ่งโผล่ออกมา */
:root[data-skin="soft"] .top{
  transition:transform .32s var(--ease),opacity .22s var(--ease);will-change:transform}
:root[data-skin="soft"][data-topaway="1"] .top{
  transform:translateY(calc(-100% - 12px));opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  :root[data-skin="soft"] .top{transition:none}
}

/* ---- สกิน Sheet: แท็บที่ยังไม่ได้เลือกต้องมีกรอบด้วย ----
   ของเดิมอันที่เลือกอยู่เป็นกล่องขาวมีกรอบ ส่วนอันที่ไม่ได้เลือกเป็นตัวหนังสือลอย ๆ
   มองแล้วไม่รู้ว่ากดได้ และไม่รู้ว่าขอบเขตของปุ่มถึงไหน
   แก้พร้อมกันทุกที่ที่ใช้รูปแบบนี้ · แท็บบนกล่อง แท็บ Sales แท็บเลือกมุมมอง แท็บเลือกโหมด
   และแท็บขีดเส้นใต้ในหน้ารวมบิล ซึ่งเป็นอีกแบบที่ไม่มีกรอบเหมือนกัน */
:root[data-skin="soft"] .moneytabs,
:root[data-skin="soft"] .tabs.tabsbox,
:root[data-skin="soft"] .salesbar.tabsbox,
:root[data-skin="soft"] .viewpick.tabsbox,
:root[data-skin="soft"] .modepick.tabsbox{
  border-color:transparent;background:none;padding:0;gap:6px;border-radius:999px}

:root[data-skin="soft"] .moneytabs button,
:root[data-skin="soft"] .tabs.tabsbox button,
:root[data-skin="soft"] .salesbar.tabsbox .stab,
:root[data-skin="soft"] .viewpick.tabsbox .vbtn,
:root[data-skin="soft"] .modepick.tabsbox .mchip,
:root[data-skin="soft"] .tabs.billgroups button,
:root[data-skin="soft"] .tabs.billviews button{
  border:1px solid var(--line);border-radius:999px;
  background:color-mix(in srgb,var(--panel) 60%,transparent);
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}

:root[data-skin="soft"] .moneytabs button:hover,
:root[data-skin="soft"] .tabs.tabsbox button:hover,
:root[data-skin="soft"] .salesbar.tabsbox .stab:hover,
:root[data-skin="soft"] .viewpick.tabsbox .vbtn:hover,
:root[data-skin="soft"] .modepick.tabsbox .mchip:hover,
:root[data-skin="soft"] .tabs.billgroups button:hover,
:root[data-skin="soft"] .tabs.billviews button:hover{
  background:var(--panel);border-color:var(--muted);color:var(--text)}

/* อันที่เลือกอยู่เป็นแคปซูลทึบสีหลัก ภาษาเดียวกับเมนูบนและชิปกรอง */
:root[data-skin="soft"] .moneytabs button.on,
:root[data-skin="soft"] .tabs.tabsbox button.on,
:root[data-skin="soft"] .salesbar.tabsbox .stab.on,
:root[data-skin="soft"] .viewpick.tabsbox .vbtn.on,
:root[data-skin="soft"] .modepick.tabsbox .mchip.on,
:root[data-skin="soft"] .tabs.billgroups button.on,
:root[data-skin="soft"] .tabs.billviews button.on{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:none}
:root[data-skin="soft"] .salesbar.tabsbox .stab.on i,
:root[data-skin="soft"] .tabs.tabsbox .on .tabdot{color:var(--accent-ink)}

/* แท็บขีดเส้นใต้ในหน้ารวมบิล ไม่ต้องมีเส้นใต้กับขีดสีอีกแล้ว เพราะกลายเป็นแคปซูลแล้ว */
:root[data-skin="soft"] .tabs.billgroups,
:root[data-skin="soft"] .tabs.billviews{border-bottom:none;gap:6px}
:root[data-skin="soft"] .tabs.billgroups button,
:root[data-skin="soft"] .tabs.billviews button{border-bottom-width:1px;margin-bottom:0;padding:7px 14px}

/* แท็บแบบ .stab ที่ใช้เดี่ยว ๆ ไม่ได้อยู่ในราง · ของเดิมไม่มีกรอบเลยทั้งตอนเลือกและไม่เลือก
   ใช้อยู่ 15 จุด เช่นหน้าอัพเดทงาน คลังไอเดีย ซื้อของเข้าคลัง ตารางโพสต์ มอชั่น Support */
:root[data-skin="soft"] .stab{
  border:1px solid var(--line);border-radius:999px;
  background:color-mix(in srgb,var(--panel) 60%,transparent)}
:root[data-skin="soft"] .stab:hover{background:var(--panel);border-color:var(--muted);color:var(--text)}
:root[data-skin="soft"] .stab.on{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:none}
:root[data-skin="soft"] .stab.on i{color:var(--accent-ink);opacity:.9}
/* ปุ่มเพิ่มบิลใหม่ ไม่ใช่แท็บ ใช้เส้นประให้รู้ว่าเป็นปุ่มสร้างของใหม่ */
:root[data-skin="soft"] .stab.add,
:root[data-skin="soft"] .salesbar.tabsbox .stab.add{
  border-style:dashed;border-color:var(--accent);color:var(--accent);background:none}

/* ---- แผงเครื่องมือ: ห้อยลงมาใต้ปุ่มเครื่องมือ ---- */
/*
 * รอบแรกผมตรึงไว้ที่ขอบขวาของจอ ซึ่งผิด เพราะปุ่มเครื่องมืออยู่กลางแถบเมนู
 * บนจอกว้างแผงเลยไปโผล่คนละมุมกับปุ่มที่เพิ่งกด · ตอนนี้ placeTools() วัดตำแหน่งปุ่มจริงแล้ววางให้ตรงกัน
 * ค่าข้างล่างนี้เป็นตำแหน่งสำรองสำหรับตอนที่ยังวัดไม่เสร็จ
 * และเงาต้องเบา ๆ แบบเมนู ไม่ใช่เงาหนาแบบกล่องเด้งกลางจอ
 */
:root[data-skin="soft"] .toolspanel{
  left:auto;right:16px;top:calc(var(--toph,98px) + 8px);transform:none;
  width:min(300px,92vw);padding:10px;border-radius:16px;gap:3px;
  border:1px solid var(--line-soft);
  box-shadow:0 10px 26px -18px rgba(16,17,25,.34)}
/* เมนูเล็ก ๆ ไม่ต้องหรี่ทั้งหน้า กดนอกแผงยังปิดได้เหมือนเดิม */
:root[data-skin="soft"] .toolswrap{background:transparent}
:root[data-skin="soft"] .toolspanel > b{font-size:12px;color:var(--muted);margin:2px 0 4px 6px;font-weight:600}
:root[data-skin="soft"] .toolsone{
  padding:8px 11px;font-size:13.5px;font-weight:550;border-color:transparent;border-radius:10px;background:none}
:root[data-skin="soft"] .toolsone:hover{background:var(--panel-2);border-color:var(--line)}
@media (max-width:640px){
  :root[data-skin="soft"] .toolspanel{left:12px;right:12px;width:auto}
}

/* ปุ่มสถานะลูกค้า: เอากรอบของกล่องออก ตัวที่เลือกอยู่จะได้เต็มถึงขอบมนจริง ๆ
   ของเดิมกล่องมีกรอบ 1 จุด สีพื้นของปุ่มจึงหยุดก่อนถึงขอบเสมอ เห็นเป็นเส้นอ่อนคาดอยู่ */
:root[data-skin="soft"] .statusset{border:0;background:var(--line-soft)}

/* หัวแผงเครื่องมือ มีปุ่มปิดมุมขวาบน เผื่อกดเปิดผิดแล้วอยากออก */
.toolshead{display:flex;align-items:center;gap:8px}
.toolshead > b{flex:1;min-width:0}
.toolsx{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel);color:var(--muted);font-size:12px;line-height:1;cursor:pointer;
  display:grid;place-items:center}
.toolsx:hover{border-color:var(--danger);color:var(--danger)}

/* ---- กล่องถามเงื่อนไขก่อนออกบิลเก็บเงินลูกค้า ---- */
.ratepick{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ratepick input{flex:1;min-width:120px}
.termsum{display:flex;flex-direction:column;gap:6px;margin:14px 0 4px;padding:12px 14px;
  border-radius:12px;background:var(--panel-2)}
.termsum div{display:flex;align-items:baseline;gap:10px;font-size:13.5px}
.termsum div span{flex:1;color:var(--muted)}
.termsum div b{font-variant-numeric:tabular-nums;white-space:nowrap}
.termsum .termnet{margin-top:4px;padding-top:8px;border-top:1px solid var(--line);font-size:15px}
.termsum .termnet span{color:var(--text);font-weight:600}
.termnow{color:var(--muted);font-size:13px}
/* ช่อง % ที่หัก เป็นลูกของช่องติ๊กด้านบน ย่อหน้าเข้าไปให้เห็นว่าคู่กัน */
.whtrate{margin:8px 0 0 26px;max-width:160px}

/* ---- ช่องสอบถามของลูกค้าในลิงก์ ---- */
.saylabel{font-size:12.5px;font-weight:600;color:var(--text)}
.sayrow{display:flex;gap:8px;align-items:center}
.saybox .sayrow .btn{min-width:104px;justify-content:center}

/* ---- ลูกค้าเลือกปลายทางตอนขอแก้ ---- */
.verdictpick{margin:12px 0 6px;font-size:12.5px;font-weight:600;color:var(--text)}
.verdictways{display:grid;gap:8px}
.verdictways .btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  width:100%;text-align:left;padding:10px 14px;line-height:1.35;white-space:normal}
.verdictways .btn i{font-style:normal;font-size:11.5px;font-weight:400;color:var(--muted)}
.verdictways .btn{border:1px solid var(--line);background:var(--panel-2);font-weight:600}
.verdictways .btn:hover{border-color:var(--accent)}
@media (min-width:620px){ .verdictways{grid-template-columns:1fr 1fr} }
.fixmode{display:block;margin-top:4px;font-size:11.5px;color:var(--muted)}
.fixmode.quick{color:var(--ok);font-weight:600}

/* ---- ตั้งค่าแจ้งเตือนของตัวเอง ---- */
.notepick{display:grid;gap:6px;margin-top:10px}
.notehead{font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--muted);margin-top:8px}
.notehead:first-child{margin-top:0}
.noteline{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel-2);font-size:13.5px;cursor:pointer}
.noteline input{width:16px;height:16px;accent-color:var(--accent);flex:none}
.noteline.off{opacity:.55}
.noteline.off span{text-decoration:line-through}

/* ---- ติ๊กว่าคลิปช่องทางนี้ต้องยิงแอดด้วย ---- */
.adwant{flex:none;height:28px;padding:0 11px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.adwant.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.adwant:disabled{opacity:.5;cursor:default}

/* ---- กองที่ลบไปแล้ว ---- */
.oldjobsbtn{margin:14px auto 0;display:block}
.oldjobs{margin-top:14px}

/* ---- อ่านบทของกองที่ลบไปแล้ว ---- */
.sheet.oldread{max-width:720px;max-height:86vh;overflow-y:auto}
.oldclip{padding:12px 0;border-top:1px solid var(--line-soft)}
.oldclip>b{display:block;font-size:15px}
.oldclip>small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.oldpart{margin-top:8px}
.oldpart i{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--muted)}
.oldpart p{margin:2px 0 0;white-space:pre-wrap;line-height:1.65}

/* ================== Spyfall ==================
 * ซองจดหมายของทุกคนหน้าตาเหมือนกันเป๊ะ ต่างกันแค่ข้างใน
 * แตะแล้วฝาซองเปิดขึ้น จดหมายเลื่อนออกมาพร้อมกาง เพื่อให้รู้สึกว่าเป็นของที่เปิดครั้งเดียว
 */
.spywrap{max-width:720px}
.spystage{display:flex;justify-content:center;padding:18px 0 10px}
.spyenv{position:relative;width:min(320px,86vw);aspect-ratio:3/2;border:0;background:none;padding:0;
  cursor:pointer;perspective:900px}
.spyenv:disabled{cursor:default}
.spyenv .envback{position:absolute;inset:0;border-radius:12px;background:var(--accent-soft);
  border:1px solid var(--accent);box-shadow:var(--shadow)}
.spyenv .envflap{position:absolute;left:0;right:0;top:0;height:52%;transform-origin:top center;
  background:color-mix(in srgb,var(--accent) 22%,var(--panel));
  border:1px solid var(--accent);border-bottom:0;border-radius:12px 12px 0 0;
  clip-path:polygon(0 0,100% 0,50% 100%);transition:transform .5s cubic-bezier(.2,.7,.2,1);z-index:3}
/*
 * ฝาซองใช้อนิเมชัน ไม่ใช่ transition
 * หน้าเว็บวาดใหม่ทั้งก้อนตอนกดเปิด ตัวซองจึงเป็นของใหม่เสมอ ซึ่ง transition ไม่ทำงานกับของที่เพิ่งเกิด
 * อนิเมชันทำงานตั้งแต่วินาทีที่ของเกิด จึงได้เห็นฝาเปิดจริง ๆ
 */
.spyenv.open .envflap{animation:spyflap .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes spyflap{from{transform:rotateX(0)}to{transform:rotateX(-170deg)}}
.spyenv .envbody{position:absolute;left:0;right:0;bottom:0;height:62%;border-radius:0 0 12px 12px;
  background:color-mix(in srgb,var(--accent) 14%,var(--panel));border:1px solid var(--accent);border-top:0;z-index:4}
.spyenv .envhint{position:absolute;left:0;right:0;bottom:14%;z-index:5;font-size:14px;font-weight:650;color:var(--accent)}
/*
 * จดหมายต้องลอยขึ้นมาอยู่หน้าตัวซอง ไม่ใช่ค้างอยู่ในกระเป๋า
 * รอบแรกผมวางไว้หลังตัวซอง คำเลยโดนบังครึ่งใบ
 */
.spyenv .envletter{position:absolute;left:6%;right:6%;bottom:16%;z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:74%;padding:16px 14px;border-radius:10px;background:var(--panel);border:1px solid var(--line);
  box-shadow:0 14px 30px -16px rgba(16,17,25,.55);
  animation:spyletter .55s .18s cubic-bezier(.2,.7,.2,1) both}
.spyenv .envletter b{font-size:clamp(20px,6vw,30px);line-height:1.2;text-align:center}
.spyenv .envletter i{font-style:normal;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.5}
.spyenv .envletter.isspy{border-color:var(--danger);background:var(--danger-soft)}
.spyenv .envletter.isspy b{color:var(--danger);letter-spacing:.04em}
@keyframes spyletter{from{transform:translateY(42%) scale(.9);opacity:0}to{transform:translateY(-6%);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .spyenv .envflap{transition:none}
  .spyenv.open .envflap{animation:none;transform:rotateX(-170deg)}
  .spyenv .envletter{animation:none;transform:translateY(-6%)}
  .spypeek .spypeekflap,.spypeek .spypeekpaper{transition:none}
  .spywrap.spyfade{animation:none}
}
.spywait{text-align:center;color:var(--muted);font-size:13.5px;margin:4px 0 0}
.spycount{display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 16px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.spycount b{font-size:clamp(44px,14vw,72px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
/* ยังไม่เริ่มนับ ช่องนี้เป็นข้อความไม่ใช่ตัวเลข ต้องเล็กลงไม่งั้นล้นกล่อง */
.spycount.soon b{font-size:clamp(20px,5vw,30px)}
.spycount span{color:var(--muted);font-size:13.5px;text-align:center}
.spymine{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:11px 14px;
  border:1px solid var(--accent);border-radius:12px;background:var(--accent-soft)}
.spymine span{font-size:12px;color:var(--muted)}
.spymine b{font-size:18px}
.spymine.isspy{border-color:var(--danger);background:var(--danger-soft)}
.spymine.isspy b{color:var(--danger)}
.spyvotes{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.spyvote{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
  padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);
  color:var(--text);font:inherit;cursor:pointer}
.spyvote b{font-size:15px}
.spyvote i{font-style:normal;font-size:12.5px;color:var(--muted)}
.spyvote .spyitemface{margin-bottom:4px}
.spyvote .spyitembox{width:100%;box-sizing:border-box;font-size:13.5px}
.spyvote:not(:disabled):hover{border-color:var(--accent)}
.spyvote.on{border-color:var(--accent);background:var(--accent-soft)}
.spyvote.self{opacity:.55;cursor:default}
.spyresult b{font-size:16px}

/*
 * หน้าเกมใช้ชุดสีของตัวเอง (gtheme) พื้นการ์ดเป็นสีครีม แต่ตัวหนังสือของธีมมืดเป็นสีอ่อน
 * ถ้าไม่กำหนดสีตรงนี้ จดหมายจะออกมาเป็นการ์ดขาวเปล่า ๆ อ่านไม่เห็นคำ
 */
/* ตัวซองในธีมสติกเกอร์ — ขอบดำหนา ฝาซองเป็นสีประจำเกม เงาทึบเหมือนของที่วางอยู่จริง */
#app.gtheme .spyenv .envback{background:var(--g-key);border:var(--g-edge) solid var(--g-line);box-shadow:var(--g-pop)}
#app.gtheme .spyenv .envflap{background:color-mix(in srgb,var(--g-key) 72%,#15110a);border:var(--g-edge) solid var(--g-line);border-bottom:0}
#app.gtheme .spyenv .envbody{background:var(--g-key);border:var(--g-edge) solid var(--g-line);border-top:0}
#app.gtheme .spyenv .envhint{color:var(--g-key-ink);font-weight:600}
#app.gtheme .spyenv .envletter{background:var(--g-card);border:var(--g-edge) solid var(--g-line);color:var(--g-ink);box-shadow:var(--g-pop-sm)}
#app.gtheme .spyenv .envletter b{color:var(--g-ink)}
#app.gtheme .spyenv .envletter i{color:var(--g-ink-soft)}
#app.gtheme .spyenv .envletter.isspy{background:var(--g-ink);color:var(--g-bg)}
#app.gtheme .spyenv .envletter.isspy b{color:#ff4d8d}
#app.gtheme .spyenv .envletter.isspy i{color:var(--g-bg)}
#app.gtheme .spymine{background:var(--g-card);border:var(--g-edge) solid var(--g-line);color:var(--g-ink);box-shadow:var(--g-pop-sm)}
#app.gtheme .spymine span{color:var(--g-ink-soft)}
#app.gtheme .spymine.isspy{background:var(--g-ink);color:var(--g-bg)}
#app.gtheme .spymine.isspy span{color:var(--g-bg)}
#app.gtheme .spymine.isspy b{color:#ff4d8d}
#app.gtheme .spycount{background:var(--g-card);border:var(--g-edge) solid var(--g-line);color:var(--g-ink);box-shadow:var(--g-pop)}
/* นับถอยหลังก่อนออกไปหยิบของ เป็นจอที่ทั้งวงมองพร้อมกัน ตัวเลขต้องโตกว่านาฬิกาปกติ */
#app.gtheme .spycount .gclock{font-size:clamp(56px,13vw,96px);line-height:1}
#app.gtheme .spycount.soon .gclock{font-size:clamp(22px,5.5vw,34px)}
#app.gtheme .spycount span{color:var(--g-ink-soft)}
#app.gtheme .spyvote{background:var(--g-card);border:var(--g-edge) solid var(--g-line);color:var(--g-ink);box-shadow:var(--g-pop-sm)}
#app.gtheme .spyvote i{color:var(--g-ink-soft)}
#app.gtheme .spyvote.on{background:var(--g-key);color:var(--g-key-ink);box-shadow:var(--g-pop)}
#app.gtheme .spyvote.on i{color:var(--g-key-ink)}
#app.gtheme .spywait{color:var(--g-ink-soft)}
/* สรุปผล Spyfall */
.spysum{margin-bottom:6px}
.spysumtop{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.spysumtop .kicker{display:block;margin-bottom:2px}
.spysumtop b{font-size:18px}
.gvotecount{flex:none;font-size:13px;color:var(--muted);white-space:nowrap}

/* ======= ซองเล็กที่ต้องชี้ถึงจะเห็นคำ · ใช้ในจังหวะไปหยิบของและจังหวะคุยกัน =======
 * เคยพิมพ์คำไว้โต้ง ๆ กลางหน้าจอ ใช้ไม่ได้ เพราะคนที่นั่งข้าง ๆ เหลือบเห็นได้ทั้งเกม
 * ซองของสายลับหน้าตาเหมือนกันทุกประการ ต่างกันแค่ข้างใน
 */
.spypeek{display:flex;align-items:center;gap:14px;width:100%;margin:0 0 14px;padding:11px 14px;
  border:1px solid var(--accent);border-radius:12px;background:var(--accent-soft);
  color:inherit;font:inherit;text-align:left;cursor:pointer}
.spypeekenv{position:relative;flex:none;width:60px;height:44px;perspective:420px}
/*
 * กระดาษต้องซ่อนมิดอยู่หลังตัวซองตอนปิด ไม่ใช่โผล่ขอบออกมาให้เห็นก่อน
 * ตัวเลขสองค่าล่างนี้คู่กัน ขยับค่าไหนต้องคิดอีกค่าด้วย ไม่งั้นคำจะแอบโผล่ตั้งแต่ยังไม่ได้ชี้
 */
.spypeekpaper{position:absolute;left:12%;right:12%;bottom:2%;height:60%;z-index:2;border-radius:3px;
  background:var(--panel);border:1px solid var(--line);
  transition:transform .42s cubic-bezier(.2,.7,.2,1)}
.spypeekbody{position:absolute;left:0;right:0;bottom:0;height:66%;z-index:4;border-radius:0 0 6px 6px;
  background:color-mix(in srgb,var(--accent) 16%,var(--panel));border:1px solid var(--accent);border-top:0}
.spypeekflap{position:absolute;left:0;right:0;top:0;height:56%;z-index:3;transform-origin:top center;
  background:color-mix(in srgb,var(--accent) 26%,var(--panel));border:1px solid var(--accent);border-bottom:0;
  border-radius:6px 6px 0 0;clip-path:polygon(0 0,100% 0,50% 100%);
  transition:transform .42s cubic-bezier(.2,.7,.2,1)}
.spypeektext{position:relative;display:grid;flex:1;min-width:0}
.spypeekhint,.spypeekword{grid-area:1/1;transition:opacity .18s}
.spypeekhint{font-size:12.5px;color:var(--muted);align-self:center}
.spypeekword{display:flex;flex-direction:column;gap:2px;opacity:0}
.spypeekword b{font-size:19px;line-height:1.25}
.spypeekword i{font-style:normal;font-size:12px;color:var(--muted);line-height:1.45}
.spypeek:hover .spypeekflap,.spypeek:focus-visible .spypeekflap,.spypeek.on .spypeekflap{transform:rotateX(-168deg)}
.spypeek:hover .spypeekpaper,.spypeek:focus-visible .spypeekpaper,.spypeek.on .spypeekpaper{transform:translateY(-52%)}
.spypeek:hover .spypeekhint,.spypeek:focus-visible .spypeekhint,.spypeek.on .spypeekhint{opacity:0}
.spypeek:hover .spypeekword,.spypeek:focus-visible .spypeekword,.spypeek.on .spypeekword{opacity:1}
.spypeek.isspy{border-color:var(--danger);background:var(--danger-soft)}
.spypeek.isspy .spypeekword b{color:var(--danger);letter-spacing:.03em}

/* ======= คอมเมนต์มาก่อน ======= */
/*
 * การ์ดคู่ของรอบ · ลูกค้าซ้าย คอมเมนต์เป้าหมายขวา
 * ฝั่งคอมเมนต์ทำให้เหมือนคอมเมนต์จริงบนโซเชียล กล่องดำตัดกับพื้นของเกม อ่านแล้วนึกออกทันทีว่าคืออะไร
 */
.cmpair{display:grid;grid-template-columns:5fr 7fr;gap:14px;margin:0 0 16px}
@media (max-width:760px){ .cmpair{grid-template-columns:1fr} }
.cmwho{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:14px 18px;
  border:1px solid var(--accent);border-radius:16px;background:var(--accent-soft)}
.cmwho span{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.cmwho b{font-size:clamp(22px,5vw,32px);line-height:1.15}
.cmwho i{font-style:normal;font-size:12.5px;color:var(--muted)}
.cmreal{display:flex;flex-direction:column;gap:9px;padding:14px 16px;
  border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.cmreallabel{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.cmrealrow{display:flex;align-items:flex-start;gap:11px;padding:12px 13px;border-radius:14px;background:#15110a}
.cmavatar{flex:none;width:36px;height:36px;border-radius:50%;background:#ff3b5c;display:grid;place-items:center;
  font-size:15px;font-weight:700;color:#fffdf5}
.cmrealtext{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cmuser,.cmtime{font-size:12px;color:#9a9387}
.cmrealtext b{font-size:clamp(17px,4.2vw,23px);line-height:1.3;color:#fffdf5}
.cmlike{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:3px}
.cmlike span{font-size:11.5px;color:#9a9387}
.cmlist{display:flex;flex-direction:column;gap:12px}
.cmcard{display:flex;flex-direction:column;gap:10px;padding:14px 16px;
  border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.cmcard.yes{border-color:var(--ok,var(--accent))}
.cmcard.no{opacity:.72}
.cmidea{margin:0;font-size:15px;line-height:1.6;white-space:pre-wrap}
.cmpick{display:flex;gap:10px;flex-wrap:wrap}
.cmalt{margin:0}
.cmby{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cmby b{font-size:14px}
.cmscore{font-size:13px;color:var(--muted);white-space:nowrap}
.cmalts{display:flex;flex-direction:column;gap:4px;padding-top:10px;border-top:1px solid var(--line)}
.cmalts span{font-size:12px;color:var(--muted)}
.cmalts ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.cmalts li{font-size:13.5px;line-height:1.5}

/* ======= ดวล Hook · สังเวียน =======
 * พื้นมืดแบบในตู้เกม มุมแดงคือลูกค้า มุมน้ำเงินคือโจทย์ เราเป็นผู้ประกาศ
 * โจทย์อยู่บนตัวนักชกเลย ไม่ใช่กล่องข้อความลอย ๆ ข้างจอ
 */
body.ringon{background:#1a1026}
#app.ring{
  --g-bg:#1a1026; --g-card:#1c1724; --g-card-2:#241a33;
  --g-ink:#fff6e5; --g-ink-soft:#a79db5;
  --g-head:#fff6e5; --g-head-soft:#a79db5; --g-line:#3a3345;
  --g-key:#ffc247; --g-key-ink:#241704;
  --g-edge:2px; --g-pop:none; --g-pop-sm:none}
#app.ring .gdoodle{display:none}
.ringstage{position:relative;margin-top:14px;height:clamp(340px,33vw,420px);
  border:2px solid #3a3345;border-radius:18px;overflow:hidden}
.ringart{position:absolute;inset:0;width:100%;height:100%;display:block}
/* ป้ายชื่ออยู่ล่างสุดหน้าตัวนักชก ตัวใหญ่กว่าทุกอย่างในจอ เพราะชื่อลูกค้ากับโจทย์คือสิ่งที่ต้องอ่านจริง ๆ */
.ringband{position:absolute;bottom:18px;width:min(452px,38%);display:flex;flex-direction:column;gap:6px;
  padding:14px 20px;border:4px solid #fff6e5;border-radius:16px;box-shadow:0 14px 30px rgba(10,6,16,.55)}
.ringband span{font-size:13px;font-weight:600;letter-spacing:.18em}
.ringband b{font-size:clamp(26px,3.6vw,46px);line-height:1.1;color:#fff6e5}
.ringband.red{left:26px;background:rgba(230,57,70,.95)}
.ringband.red span{color:#ffd9dc}
.ringband.blue{right:26px;background:rgba(45,108,255,.95);text-align:right}
.ringband.blue span{color:#cfe0ff}
.ringband.blue b{font-size:clamp(20px,2.8vw,36px)}
.ringvs{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);line-height:1;
  font-size:clamp(48px,7vw,92px);color:#ffc247;text-shadow:0 6px 0 #120b1b,0 0 36px rgba(255,194,71,.45)}
.ringdesk{display:flex;flex-direction:column;gap:11px;margin-top:14px;padding:16px 18px;
  border:2px solid #3a3345;border-radius:18px;background:#120b1b}
.ringask{display:flex;align-items:center;gap:10px}
.ringmic{display:inline-flex;color:#ffc247}
.ringsend{display:inline-flex;align-items:center;gap:9px}
/*
 * จอแคบวางป้ายซ้อนบนเวทีไม่ได้ · ป้ายสองอันกว้างเกินจะอยู่ข้างกัน และรูปเวทีจะโดนครอปจนเหลือแต่พื้น
 * จอแคบจึงคลี่ออกเป็นชั้น ๆ แทน รูปเวทีเต็มรูปอยู่บน แล้วป้ายแดง VS ป้ายน้ำเงินเรียงลงมา
 */
@media (max-width:760px){
  .ringstage{height:auto;display:flex;flex-direction:column}
  .ringart{position:static;width:100%;height:auto;order:1}
  .ringband{position:static;left:auto;right:auto;bottom:auto;width:auto;
    padding:11px 15px;gap:2px;border:0;border-radius:0;box-shadow:none;text-align:left}
  .ringband.red{order:2}
  .ringband.blue{order:4;text-align:left}
  .ringband span{font-size:10.5px;letter-spacing:.12em}
  .ringband b,.ringband.blue b{font-size:20px}
  .ringvs{position:static;order:3;align-self:center;transform:none;
    padding:3px 0;font-size:26px;text-shadow:0 3px 0 #120b1b}
}

/* ======= การ์ดคนดู · ห้องนั่งเล่น =======
 * จอทีวีคือช่องพิมพ์ โซฟาคือคนดูที่เราได้มา
 * เห็นหน้าคนที่ต้องทำให้เขาดูจนจบอยู่ตรงหน้า คิดออกง่ายกว่าอ่านชื่อการ์ดเฉย ๆ
 */
body.livingon{background:#f3e3c3}
#app.living{--g-bg:#f3e3c3;--g-key:#2f9e6b;--g-key-ink:#fffdf5}
/*
 * ห้องนั่งเล่นต้องเต็มจอเหมือนในตัวอย่าง ไม่ใช่กล่องเตี้ย ๆ ลอยอยู่ข้างบนแล้วเหลือที่ว่างครึ่งหน้า
 * ความสูงอิงจอจริง จอสูงก็ได้จอทีวีใหญ่ขึ้นตาม
 */
.tvroom{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;margin-top:14px;align-items:stretch;
  min-height:min(64vh,580px)}
@media (max-width:860px){ .tvroom{grid-template-columns:1fr} }
.tvside{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.tvant{width:60px;height:22px;border-left:3px solid var(--line);border-right:3px solid var(--line);
  border-radius:50% 50% 0 0/100% 100% 0 0;transform:scaleY(-1)}
.tvbox{flex:1;width:100%;display:flex;flex-direction:column;gap:11px;padding:16px;
  border:3px solid var(--line);border-radius:20px;background:var(--panel);min-height:0}
.tvside{flex:1}
.gwtext.tvscreen,.tvbox .gwsentbox{flex:1;min-height:220px;background:#bfe3d2;border-width:3px}
.tvlegs{width:120px;height:14px;border-bottom:3px solid var(--line);
  border-left:3px solid transparent;border-right:3px solid transparent}
.tvwho{display:flex;flex-direction:column;gap:12px;min-width:0}
.sofabox{flex:1;display:flex;flex-direction:column;gap:3px;padding:14px 16px 0;overflow:hidden;min-height:260px;
  border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.sofabox>span{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.sofabox>b{font-size:clamp(22px,4.6vw,30px);line-height:1.15}
.sofabox>i{font-style:normal;font-size:12.5px;color:var(--muted)}
.sofa{display:block;width:100%;margin-top:auto}

/* ======= คอมเมนต์มาก่อน · หน้าคิดไอเดียทำเป็นโพสต์จริง =======
 * บนสุดโปรไฟล์ลูกค้า ตรงกลางช่องพิมพ์ที่แทนตัวคลิป ล่างสุดคอมเมนต์ที่ต้องทำให้คนพิมพ์
 * เรียงแบบนี้เพราะอ่านจากบนลงล่างแล้วได้ลำดับความคิดของเกมพอดี
 */
.cmpost{display:flex;flex-direction:column;max-width:640px;margin:14px auto 0;
  border:1px solid var(--line);border-radius:18px;background:var(--panel);overflow:hidden}
.cmposthead{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.cmpostface{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);font-size:19px;font-weight:700}
.cmpostwho{flex:1;min-width:0;display:flex;flex-direction:column}
.cmpostwho b{font-size:18px;line-height:1.3}
.cmpostwho span{font-size:12.5px;color:var(--muted)}
.cmpostfollow{flex:none;padding:5px 14px;border:1px solid var(--line);border-radius:999px;
  background:var(--soft);font-size:12.5px;font-weight:600}
.cmpostbody{display:flex;flex-direction:column;gap:10px;padding:16px 18px}
.cmpostbody .gwtext,.cmpostbody .gwsentbox{min-height:150px}
.cmpostfoot{padding:14px 18px;border-top:1px solid var(--line);background:#15110a}
.cmpostlabel{display:block;margin-bottom:9px;font-size:12px;font-weight:600;letter-spacing:.08em;color:#9a9387}
.cmpostfoot .cmrealrow{padding:0;background:none}

/* ======= หน้าคิดคำตอบ ใช้ร่วมกันทุกเกมใหม่ =======
 * โจทย์อยู่คอลัมน์แคบทางซ้ายและยืดเต็มความสูง · ช่องพิมพ์กินที่ที่เหลือทั้งหมด
 * ของเดิมโจทย์กินความกว้างทั้งหน้าแล้วเหลือช่องพิมพ์เป็นแถบบาง ๆ ซึ่งกลับหัวกลับหาง
 */
.gwbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gwfill{flex:1}
.gwsent{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.gwdot{width:9px;height:9px;border-radius:50%;background:var(--accent);font-style:normal}
.gwround{font-size:13px;color:var(--muted)}
.gwgrid{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:14px;margin-top:14px;
  align-items:stretch}
@media (max-width:820px){ .gwgrid{grid-template-columns:1fr} }
.gwleft{display:flex;flex-direction:column;gap:12px;min-height:280px}
.gwbox{flex:1;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:15px 18px;
  border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.gwbox>span{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.gwbox>b{font-size:clamp(20px,4.4vw,28px);line-height:1.2}
.gwbox>i{font-style:normal;font-size:12.5px;color:var(--muted)}
.gwbox.warm{background:var(--accent-soft);border-color:var(--accent)}
.gwbox.mine{background:var(--ok-soft);border-color:var(--ok)}
.gwbox.got{background:var(--soft)}
.gwbox.got>b{font-size:16px;font-weight:500;line-height:1.6}
.gwmain{display:flex;flex-direction:column;gap:11px;padding:16px 18px;
  border:1px solid var(--line);border-radius:16px;background:var(--panel);min-height:280px}
.gwlabel{font-size:14px;font-weight:600}
.gwtext{flex:1;min-height:150px;box-sizing:border-box;padding:14px 16px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel-2);font-family:inherit;font-size:16px;line-height:1.7;
  color:var(--text);resize:none}
.gwtext.big{font-size:clamp(19px,3.4vw,25px);line-height:1.45;font-weight:600}
.gwfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.gwcount{flex:1;min-width:0;font-size:13px;color:var(--muted)}
.gwdonehead{display:flex;align-items:center;gap:9px;font-size:15px}
.gwtick{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--ok);color:var(--ok-ink);font-size:14px;font-weight:700}
.gwsentbox{flex:1;display:flex;align-items:center;padding:16px 18px;border:1px dashed var(--line);
  border-radius:12px;background:var(--soft);font-size:16px;line-height:1.7;white-space:pre-wrap}
.gwsentbox.big{font-size:clamp(19px,3.4vw,25px);line-height:1.45;font-weight:600}
.gwtail{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}

/* ======= สามเกมที่ใช้โครงเดียวกัน · ดวล Hook การ์ดคนดู ไอเดียห่วย ======= */
.onelist{display:flex;flex-direction:column;gap:12px}
.onecard{display:flex;flex-direction:column;gap:9px;width:100%;text-align:left;
  padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);
  color:inherit;font:inherit;cursor:pointer}
.onecard:not(:disabled):hover{border-color:var(--accent)}
.onecard.on{border-color:var(--accent);background:var(--accent-soft)}
.onecard.self{opacity:.6;cursor:default}
.onecard.done{cursor:default}
.onecard.won{border-color:var(--ok,var(--accent))}
.onehook{margin:0;font-size:clamp(17px,4.4vw,22px);line-height:1.4;font-weight:650}
.onemine{font-style:normal;font-size:12px;color:var(--muted)}
/* ไอเดียห่วยกับไอเดียที่พลิกแล้ว ต้องเห็นคู่กันเสมอ ไม่งั้นไม่รู้ว่าพลิกจากอะไร */
.worstpair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:640px){ .worstpair{grid-template-columns:1fr} }
.worstone{display:flex;flex-direction:column;gap:4px;padding:11px 13px;border-radius:12px;background:var(--soft)}
.worstone span{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.worstone p{margin:0;font-size:14px;line-height:1.55;white-space:pre-wrap}
.worstone.good{background:var(--accent-soft)}
.worstgot{display:flex;flex-direction:column;gap:5px;margin:0 0 14px;padding:14px 16px;
  border:1px dashed var(--line);border-radius:14px;background:var(--soft)}
.worstgot span{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.worstgot p{margin:0;font-size:16px;line-height:1.55;white-space:pre-wrap}

/* ======= กล่องคำถามของจังหวะคุยกัน ======= */
.spyask{display:flex;flex-direction:column;gap:9px;margin:0 0 16px;padding:14px 16px;
  border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.spyaskwho{font-size:12.5px;color:var(--muted)}
.spyaskwho b{color:var(--ink);font-size:14px}
.spyaskq{margin:0;font-size:clamp(17px,4.4vw,22px);line-height:1.4;font-weight:650}
.spyaskorder{font-size:12.5px;color:var(--muted);line-height:1.5}
.spyaskwait{font-size:13px;color:var(--muted)}
.spyasklist li.now{font-weight:700}
.spyasklist{display:flex;flex-direction:column;gap:6px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.spyasklist b{font-size:12.5px;letter-spacing:.04em;color:var(--muted)}
.spyasklist ol{margin:0 0 6px;padding-left:20px;display:flex;flex-direction:column;gap:5px}
.spyasklist li{font-size:13.5px;line-height:1.5}

/* ======= ใบของแต่ละคน รูปโปรไฟล์ ชื่อ แล้วของที่หยิบมาในกล่อง ======= */
.spyitems{display:flex;flex-direction:column;gap:10px}
.spyitem{display:flex;align-items:center;gap:12px;padding:10px 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.spyitemface{flex:none;display:block}
.spyitemface .facepic,.spyitemface .faceletter{border:1px solid var(--line);box-sizing:border-box}
.spyitemmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.spyitemmain>b{font-size:15px}
.spyitembox{display:block;padding:7px 11px;border:1px solid var(--line);border-radius:9px;
  background:var(--soft);font-size:14px;font-style:normal;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spyitemidea{font-size:12.5px;color:var(--muted)}

/* ======= ช่วงเฉลยว่าทีมไหนชนะ ======= */
.spywin{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 18px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  animation:spywinin .5s cubic-bezier(.2,.7,.2,1) both}
.spywin b{font-size:clamp(28px,8vw,46px);line-height:1.1;text-align:center}
.spywin span{color:var(--muted);font-size:14px;text-align:center}
.spywin.team-find b{color:var(--ok,var(--accent))}
.spywin.team-spy b{color:var(--danger)}
@keyframes spywinin{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.spywrap.spyfade{animation:spyfadein .8s ease both}
@keyframes spyfadein{from{opacity:0}to{opacity:1}}
#app.gtheme .spysum{background:var(--g-card);border:var(--g-edge) solid var(--g-line);color:var(--g-ink)}
#app.gtheme .spysum .kicker,#app.gtheme .spysum .hint{color:var(--g-ink-soft)}
#app.gtheme .gvotecount{color:var(--g-ink-soft)}
#app.gtheme .spypeek{background:var(--g-card);border:var(--g-edge) solid var(--g-line);color:var(--g-ink);box-shadow:var(--g-pop-sm)}
#app.gtheme .spypeekhint,#app.gtheme .spypeekword i{color:var(--g-ink-soft)}
#app.gtheme .spypeekword b{color:var(--g-ink)}
#app.gtheme .spypeekpaper{background:var(--g-card);border:2px solid var(--g-line)}
#app.gtheme .spypeekbody{background:var(--g-key);border:2px solid var(--g-line);border-top:0}
#app.gtheme .spypeekflap{background:color-mix(in srgb,var(--g-key) 72%,#15110a);border:2px solid var(--g-line);border-bottom:0}
#app.gtheme .spypeek.isspy{background:var(--g-ink)}
#app.gtheme .spypeek.isspy .spypeekhint,#app.gtheme .spypeek.isspy .spypeekword i{color:var(--g-bg)}
#app.gtheme .spypeek.isspy .spypeekword b{color:#ff4d8d}
#app.gtheme .cmreal,#app.gtheme .cmcard{background:var(--g-card);border:var(--g-edge) solid var(--g-line);color:var(--g-ink);box-shadow:var(--g-pop-sm)}
#app.gtheme .cmscore,#app.gtheme .cmalts span,#app.gtheme .cmwho span,#app.gtheme .cmwho i,
#app.gtheme .cmreallabel{color:var(--g-ink-soft)}
#app.gtheme .cmwho{background:var(--g-card-2);border:var(--g-edge) solid var(--g-line);color:var(--g-ink);box-shadow:var(--g-pop-sm)}
#app.gtheme .cmcard.yes{border-color:var(--g-line);background:var(--g-card-2)}
#app.gtheme .cmalts{border-top:2px solid var(--g-line)}
#app.gtheme .tvbox,#app.gtheme .sofabox{background:var(--g-card);border:var(--g-edge) solid var(--g-line);color:var(--g-ink);box-shadow:var(--g-pop)}
#app.gtheme .gwtext.tvscreen,#app.gtheme .tvbox .gwsentbox{background:#bfe3d2;border:var(--g-edge) solid var(--g-line);color:var(--g-ink)}
#app.gtheme .sofabox>span,#app.gtheme .sofabox>i{color:var(--g-ink-soft)}
#app.gtheme .tvant,#app.gtheme .tvlegs{border-color:var(--g-line)}
#app.gtheme .tvlegs{border-left-color:transparent;border-right-color:transparent}
#app.gtheme .cmpost{background:var(--g-card);border:var(--g-edge) solid var(--g-line);color:var(--g-ink);box-shadow:var(--g-pop)}
#app.gtheme .cmposthead{border-bottom:var(--g-edge) solid var(--g-line)}
#app.gtheme .cmpostface{background:var(--g-key);color:var(--g-key-ink);border:2px solid var(--g-line)}
#app.gtheme .cmpostwho span{color:var(--g-ink-soft)}
#app.gtheme .cmpostfollow{background:var(--g-card-2);border:2px solid var(--g-line);color:var(--g-ink)}
#app.gtheme .cmpostfoot{border-top:var(--g-edge) solid var(--g-line)}
#app.gtheme .gwbox,#app.gtheme .gwmain{background:var(--g-card);border:var(--g-edge) solid var(--g-line);color:var(--g-ink);box-shadow:var(--g-pop-sm)}
#app.gtheme .gwbox.warm{background:var(--g-card-2)}
#app.gtheme .gwbox.mine{background:var(--g-key);color:var(--g-key-ink)}
#app.gtheme .gwbox.mine>span,#app.gtheme .gwbox.mine>i{color:var(--g-key-ink);opacity:.8}
#app.gtheme .gwbox.got{background:var(--g-card-2)}
#app.gtheme .gwbox>span,#app.gtheme .gwbox>i,#app.gtheme .gwcount,
#app.gtheme .gwsent,#app.gtheme .gwround{color:var(--g-ink-soft)}
#app.gtheme .gwtext,#app.gtheme .gwsentbox{background:var(--g-card-2);border:2px solid var(--g-line);color:var(--g-ink)}
#app.gtheme .gwdot{background:var(--g-key)}
#app.gtheme .gwtick{background:var(--g-ink);color:var(--g-bg)}
#app.gtheme .onecard,#app.gtheme .worstgot{background:var(--g-card);border:var(--g-edge) solid var(--g-line);color:var(--g-ink);box-shadow:var(--g-pop-sm)}
#app.gtheme .onecard.on{background:var(--g-key);color:var(--g-key-ink);box-shadow:var(--g-pop)}
#app.gtheme .onecard.on .onehook,#app.gtheme .onecard.on .cmidea{color:var(--g-key-ink)}
#app.gtheme .onemine,#app.gtheme .worstone span,#app.gtheme .worstgot span{color:var(--g-ink-soft)}
#app.gtheme .worstone{background:var(--g-card-2);border:2px solid var(--g-line)}
#app.gtheme .worstone.good{background:var(--g-card)}
#app.gtheme .spyask{background:var(--g-card);border:var(--g-edge) solid var(--g-line);color:var(--g-ink);box-shadow:var(--g-pop-sm)}
#app.gtheme .spyaskwho,#app.gtheme .spyaskorder,#app.gtheme .spyaskwait{color:var(--g-ink-soft)}
#app.gtheme .spyaskwho b{color:var(--g-ink)}
#app.gtheme .spyasklist{border-top:2px solid var(--g-line)}
#app.gtheme .spyasklist b{color:var(--g-ink-soft)}
#app.gtheme .spyitem{background:var(--g-card);border:var(--g-edge) solid var(--g-line);color:var(--g-ink);box-shadow:var(--g-pop-sm)}
#app.gtheme .spyitembox{background:var(--g-card-2);border:2px solid var(--g-line);color:var(--g-ink)}
#app.gtheme .spyitemidea{color:var(--g-ink-soft)}
#app.gtheme .spyitemface .facepic,#app.gtheme .spyitemface .faceletter{border:2px solid var(--g-line)}
#app.gtheme .spywin{background:var(--g-card);border:var(--g-edge) solid var(--g-line);color:var(--g-ink);box-shadow:var(--g-pop)}
#app.gtheme .spywin span{color:var(--g-ink-soft)}
#app.gtheme .spywin.team-find b{color:var(--g-ink)}
#app.gtheme .spywin.team-spy b{color:#ff4d8d}
#app.gtheme .spyvote .spyitembox{background:var(--g-card-2);border:2px solid var(--g-line);color:var(--g-ink)}
#app.gtheme .spyvote.on .spyitembox{background:var(--g-card);color:var(--g-ink)}
/* กล่องเปิดวง Spyfall */
.spysetrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:4px}
@media (max-width:480px){ .spysetrow{grid-template-columns:1fr} }

/* ================== กล่องกำลังทำงาน ==================
 * ขึ้นเมื่อขั้นตอนไหนใช้เวลาเกิน 700 มิลลิวินาที
 * ของเดิมมีแค่แถบบาง 2 จุดด้านบนจอ ซึ่งแทบมองไม่เห็น คนเลยนึกว่าเว็บค้างแล้วกดซ้ำ
 */
.workwait{z-index:120}
.workbox{display:flex;flex-direction:column;align-items:center;gap:10px;
  width:min(330px,88vw);padding:26px 24px;border-radius:var(--radius);
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);text-align:center}
.workbox b{font-size:16px;line-height:1.5}
.workcount{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.workbar{display:block;width:100%;height:8px;border-radius:999px;background:var(--line-soft);overflow:hidden}
.workbar i{display:block;height:100%;background:var(--accent);transition:width .2s linear}
.workhint{font-style:normal;font-size:12.5px;color:var(--muted)}
.spin.big{width:28px;height:28px;border-width:3px}
#app.gtheme .workbox{background:var(--g-card);color:var(--g-ink);border:var(--g-edge) solid var(--g-line);
  box-shadow:var(--g-pop)}
#app.gtheme .workbox .workcount,#app.gtheme .workbox .workhint{color:var(--g-ink-soft)}
#app.gtheme .workbar{background:var(--g-card-2);border:2px solid var(--g-line)}
#app.gtheme .workbar i{background:var(--g-key)}

/* แถบบอกว่ากำลังดูหน้าตัวอย่างของทีม ไม่ใช่ลิงก์จริงของลูกค้า */
.peekbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;padding:12px 18px;background:var(--warn-soft);border-bottom:2px solid var(--warn);
  color:var(--text)}
.peekbar b{display:block;font-size:14.5px}
.peekbar span{font-size:13px;color:var(--muted)}
.peekbar .btn{flex:none;margin-top:0}

/* ประกาศถึงคนรายบุคคล — เลือกชื่อ และแยกประวัติสองแท็บ */
.shoutpick{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.shoutpick>b{display:block;font-size:13px;margin-bottom:7px}
.shoutnames{display:flex;flex-wrap:wrap;gap:6px}
.shoutnames .chip{font-size:12.5px;padding:5px 11px}
.shouthint{display:block;margin-top:8px;font-style:normal;font-size:12px;color:var(--muted)}
.shouttabs{display:flex;gap:6px;padding:10px 14px 0}
.shoutto{display:block;margin:2px 0 4px;font-size:12px;color:var(--muted)}

/* ---------- Spyfall: หมวดคำ วิธีหาของ และจังหวะคุยกันแบบเปิดคำ ---------- */
/*
 * สามก้อนนี้เพิ่มมาพร้อมกติกาใหม่
 * เลือกหมวดคำก่อนเปิดวง · เลือกว่าจะเดินหาของหรืออัปรูป · และจังหวะคุยกันที่เฉลยคำให้ทุกคนเห็น
 */
.spypacks{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.spypack{display:block;width:100%;text-align:left;padding:12px 14px;border-radius:12px;
  border:2px solid var(--line);background:var(--panel);color:var(--text);
  font-family:inherit;font-size:14px;cursor:pointer}
.spypack b{display:block;font-size:15px}
.spypack i{display:block;margin-top:3px;font-style:normal;font-size:12.5px;line-height:1.45;color:var(--muted)}
.spypack.on{border-color:var(--accent);background:var(--accent-soft)}
.spypack.on i{color:var(--text)}

.spyways{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 4px}
.spyway{flex:1 1 240px;min-height:96px;padding:16px;border-radius:16px;text-align:left;
  border:2px solid var(--line);background:var(--panel);color:var(--text);
  font-family:inherit;cursor:pointer}
.spyway:hover{border-color:var(--accent)}
.spyway b{display:block;font-size:17px}
.spyway i{display:block;margin-top:5px;font-style:normal;font-size:13px;line-height:1.5;color:var(--muted)}
.spywayhead{display:flex;align-items:center;gap:10px;margin:12px 0 8px;font-size:14px}
.spywayhead b{flex:1}

/* ช่องวางรูป · ก๊อปรูปจากเน็ตมาแล้วกดวางตรงนี้ได้เลย */
.spydrop{display:grid;place-items:center;min-height:170px;padding:16px;border-radius:16px;
  border:2px dashed var(--line);background:var(--panel-2);text-align:center;cursor:text}
.spydrop:focus{outline:none;border-color:var(--accent);background:var(--accent-soft)}
.spydrop span{font-size:14px;color:var(--muted)}
.spydrop span i{display:block;margin-top:5px;font-style:normal;font-size:12.5px}
.spydrop.has{padding:8px;border-style:solid}
.spydrop img{max-width:100%;max-height:260px;border-radius:12px;display:block}

/* คำของรอบนี้ · เปิดให้ทุกคนเห็นพร้อมกันในจังหวะคุยกัน */
.spyword{margin:14px 0 16px;padding:18px 20px;border-radius:18px;text-align:center;
  border:2px solid var(--accent);background:var(--accent-soft)}
.spyword .kicker{display:block;margin-bottom:4px}
.spyword b{display:block;font-size:30px;line-height:1.25;word-break:break-word}

/*
 * ซองเฉลยโจทย์ตอนเข้าหน้าคุยกัน — เปิดกลางจอ ค้างให้อ่าน แล้วลอยขึ้นไปเก็บ
 * ตัวจับเวลาใน app.js ยาวกว่าอนิเมชันชุดนี้เล็กน้อย ซองจึงหายตอนลอยพ้นจอไปแล้ว ไม่ใช่หายคาจอ
 */
/* แถบเลือกทีมบนใบงานกับ Shotlist · ขึ้นเฉพาะกองที่แยกสองทีม */
/* ป้ายบอกว่าช่องไหนเป็นเรื่องของฝ่ายไหน ใช้ตามตัวถูกคน · ปุ่มยืนยันลูกค้าอยู่ในช่องเลย */
.readywho{display:block;margin-top:3px;font-style:normal;font-size:11px;color:var(--muted);white-space:nowrap}
.readycell .readygo{margin-top:8px}
div.readycell{cursor:default}

.teambar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 10px}
.teambar .hint{margin:0;flex:1 1 220px;min-width:0}
.runbar.day.teamb .runmark{background:var(--warn-soft,var(--panel-2));color:var(--warn,var(--text))}

/* กล่องตั้งเวลาทั้งกอง — ช่องกรอกอยู่บนสุด ตัวอย่างตารางอยู่ล่าง เลื่อนได้ในตัว */
.tpbox{max-width:560px}
.tprow{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 14px}
.tprow .field{flex:1 1 120px;min-width:120px;margin:0}
.tphead{margin:0 0 8px;font-size:14px;font-weight:650}
.tplist{max-height:260px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.tpline{display:flex;align-items:baseline;gap:10px;padding:7px 12px;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.tpline:last-child{border-bottom:0}
.tpline>b{flex:none;width:112px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tpline>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpline.gap{color:var(--muted);background:var(--panel)}
.tpline.head{background:var(--accent-soft);font-weight:650}
/* บรรทัดสรุปใต้ตารางตัวอย่าง · ของเดิมติดขอบล่างของตารางจนตัวหนังสือทับเส้น */
.tpbox .tplist+.hint{margin:10px 0 4px}
.tpline.head>b{width:auto;font-size:13px}
.tpline.gap>b{font-weight:500}
.hint.tpover{color:var(--danger);font-weight:600}
@media (max-width:520px){
  .tprow .field{flex:1 1 calc(50% - 5px);min-width:0}
  /* จอแคบ ช่วงเวลา 13:00 – 13:30 ตกบรรทัดเพราะช่องแคบไป ย่อฟอนต์นิดเดียวแล้วขยายช่องให้พอดีบรรทัดเดียว */
  .tpline{font-size:13px}
  .tpline>b{width:104px;font-size:12.5px}
}

.spyreveal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;
  background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(7px);
  animation:spyrevealgo .7s 2.5s both}
.spyreveal .spyenv{width:min(380px,86vw);cursor:default;
  animation:spyrevealup .9s 2.3s cubic-bezier(.45,0,.2,1) both}
.spyreveal .spyenv .envletter b{font-size:clamp(22px,6.4vw,32px)}
/*
 * ธีมเกมสั่งห้ามทุกอย่างขยับระหว่างจังหวะพิมพ์ (#app.gtheme.gplaying *)
 * ซองเฉลยโจทย์เป็นข้อยกเว้นเดียว เพราะมันคือจังหวะเฉลยที่ต้องให้ทั้งวงเห็นพร้อมกัน
 * เล่นครั้งเดียวแล้วเก็บตัวเองออกไป ไม่ได้ขยับค้างอยู่ข้างคนที่กำลังพิมพ์
 */
#app.gtheme.gplaying .spyreveal{animation:spyrevealgo .7s 2.5s both!important}
#app.gtheme.gplaying .spyreveal .spyenv{
  animation:spyrevealup .9s 2.3s cubic-bezier(.45,0,.2,1) both!important}
#app.gtheme.gplaying .spyreveal .spyenv.open .envflap{
  animation:spyflap .5s cubic-bezier(.2,.7,.2,1) both!important}
#app.gtheme.gplaying .spyreveal .spyenv .envletter{animation:gpop .42s var(--g-ease) both!important}
@keyframes spyrevealup{from{transform:translateY(0) scale(1)}to{transform:translateY(-44vh) scale(.58)}}
@keyframes spyrevealgo{to{opacity:0;visibility:hidden}}

/* ใบของแต่ละคนตอนคุยกัน — รูปของนำ เพราะวงคุยกันจากรูป ไม่ได้คุยจากชื่อคน */
.spysaid{font-style:normal;font-weight:500;font-size:12.5px;color:var(--muted)}
.spybigs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.spybig{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:16px;
  border:1px solid var(--line);background:var(--panel)}
.spybig.said{border-color:var(--accent)}
.spybigwho{display:flex;align-items:center;gap:9px;min-width:0}
.spybigwho b{flex:1;min-width:0;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spybigwho i{flex:none;font-style:normal;font-size:11.5px;color:var(--muted)}
.spybig.said .spybigwho i{color:var(--accent)}
.spybigshot{display:grid;place-items:center;width:100%;aspect-ratio:4/3;padding:0;overflow:hidden;
  border:1px solid var(--line);border-radius:12px;background:var(--panel-2);cursor:pointer}
.spybigshot img{width:100%;height:100%;object-fit:cover;display:block}
.spybigshot.none{cursor:default}
.spybigshot.none span{font-size:12.5px;color:var(--muted);text-align:center;padding:0 10px}
.spybigname{font-size:16px;line-height:1.3;word-break:break-word}
.spybigpitch{margin:0;font-size:13px;line-height:1.5}
.spybigpitch.soon{color:var(--muted)}
.spymyshot{display:flex;align-items:center;gap:12px;margin:10px 0 14px}
.spymyshot .spybigshot{width:120px;flex:none}
.spymyshot span{font-size:13px;color:var(--muted)}
#app.gtheme .spybig{background:var(--g-card);border:var(--g-edge) solid var(--g-line);color:var(--g-ink);box-shadow:var(--g-pop-sm)}
#app.gtheme .spybigwho i,#app.gtheme .spybigpitch.soon,#app.gtheme .spysaid{color:var(--g-ink-soft)}
#app.gtheme .spybigshot{background:var(--g-card-2);border:2px solid var(--g-line)}
@media (prefers-reduced-motion:reduce){
  .spyreveal,.spyreveal .spyenv{animation-duration:.01s;animation-delay:2.8s}
}
@media (max-width:520px){
  .spybigs{grid-template-columns:1fr 1fr;gap:9px}
  .spybigname{font-size:14.5px}
}

.spyitemshot{flex:none;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:var(--panel-2);cursor:pointer}
.spyitemshot img{width:100%;height:100%;object-fit:cover;display:block}
.spyitempitch{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--text)}
.spylock{margin-top:12px;color:var(--muted)}
.spywon{margin-top:16px;padding:18px;border-radius:16px;border:2px solid var(--ok);background:var(--panel)}
.spywon b{display:block;font-size:19px}
.spywon p{margin:6px 0 12px;font-size:14px;color:var(--muted)}

/*
 * ปุ่มลอยมุมซ้ายล่างของหน้าเกม (เพลง กับ เลิกเล่น) ทับปุ่มท้ายหน้าอยู่
 * เว้นที่ด้านล่างของหน้าเกมไว้ให้พ้นปุ่มลอยทั้งสองอัน เนื้อหาจะได้ไม่ถูกบัง
 */
#app.gtheme .wrap{padding-bottom:172px}
@media (max-width:640px){ #app.gtheme .wrap{padding-bottom:162px} }

/*
 * สถานที่ของกองบนการ์ดงานของ Production support
 * ของเดิมคนรับงานเห็นแต่ข้อความที่ครีเอทีฟพิมพ์มา ซึ่งมักบอกว่ายังไม่มีสถานที่
 * ทั้งที่กองนั้นกรอกไว้แล้วอีกหน้าหนึ่ง จึงยกมาไว้ในการ์ดพร้อมลิงก์แผนที่ที่กดได้
 */
.supplace{margin:8px 0 2px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.supplace>i{display:block;font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--muted)}
.supplacelist{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.supplacerow{display:flex;gap:7px;font-size:13.5px;line-height:1.5}
.supplacerow span{flex:1;min-width:0;word-break:break-word}
.supplacenone{margin:6px 0 0;font-size:13px;color:var(--muted)}

/* แถวปุ่มบันทึกคำตอบใน Spyfall · ปุ่มกับคำบอกสถานะอยู่บรรทัดเดียวกัน */
.spysaverow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 4px}
.spysaverow .hint{margin:0}

/*
 * ปุ่มสิ่งที่ต้องทำในรางไอคอนขวา · ต่อจากโทรโข่งกับกองวันนี้
 * ย้ายออกมาจากปุ่มรวมเครื่องมือมุมล่างขวา เพราะเป็นของที่เปิดดูบ่อยที่สุดในวันหนึ่ง
 * แต่เดิมต้องกดสองครั้งถึงจะถึง และมุมนั้นกดยากบนมือถือ
 */
.todofab{position:fixed;right:18px;top:230px;z-index:55;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;
  box-shadow:var(--shadow);display:grid;place-items:center}
.todofab:hover,.todofab.on{border-color:var(--accent);transform:translateY(-1px)}
.todofab i{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  background:var(--danger);color:var(--danger-ink);font-style:normal;font-size:11px;font-weight:800;line-height:19px}

/*
 * บรรทัดบอกสิ่งที่ต้องทำในมุมมองตามสิ่งที่ต้องทำ
 * เขียนเป็นประโยค ไม่ใช่ตัวเลขสถานะ จึงให้เด่นกว่าบรรทัดวันถ่ายที่อยู่เหนือมัน
 */
.rowdo{display:block;font-size:12px;color:var(--muted)}
.rowtodo{display:block;margin-top:3px;font-size:13.5px;font-weight:650;line-height:1.45;color:var(--text)}

/*
 * จอแคบ: ชื่อกองกับบรรทัดสิ่งที่ต้องทำต้องได้เต็มบรรทัด ปุ่มลงไปอยู่แถวล่าง
 * ของเดิมปุ่มกินความกว้างไปหมด เหลือให้ข้อความเป็นคอลัมน์ผอม ๆ อ่านทีละสองคำ
 */
@media (max-width:720px){
  .sendrow{flex-wrap:wrap;gap:8px}
  .sendrow .rowmain{flex:1 1 100%;min-width:0}
  .sendrow .btn{flex:0 0 auto}
}

/*
 * ชิปบอกว่ากองนี้รออยู่ที่ใครบ้าง ในช่อง "รอคนอื่นอยู่"
 * แยกสีตามฝ่าย จะได้กวาดตาเจอว่าอันไหนต้องไปตาม Host อันไหนต้องไปตามลูกค้า
 */
.rowwait{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.rowwait i{font-style:normal;font-size:12px;font-weight:650;line-height:1.3;
  padding:3px 9px;border-radius:99px;border:1px solid var(--line)}
.rowwait .w-client{border-color:#B9B7E8;background:#EDECFB;color:#3A3D86}
.rowwait .w-host{border-color:#F0C8A8;background:#FDF3EC;color:#8A3C12}
.rowwait .w-writer{border-color:var(--line);background:var(--soft);color:var(--muted)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rowwait .w-client{background:#23234a;color:#c9c7ff;border-color:#3b3b72}
  :root:not([data-theme="light"]) .rowwait .w-host{background:#3a2415;color:#f3c7a4;border-color:#5d3a22}}
:root[data-theme="dark"] .rowwait .w-client{background:#23234a;color:#c9c7ff;border-color:#3b3b72}
:root[data-theme="dark"] .rowwait .w-host{background:#3a2415;color:#f3c7a4;border-color:#5d3a22}

.cbsumbar{margin:0 0 12px}
.cbsumtab{width:100%;border-collapse:collapse;margin-top:10px}
.cbsumtab th,.cbsumtab td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line,#e4e4ec)}
.cbsumtab th:nth-child(n+2),.cbsumtab td:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}
.cbsumtab tfoot td{font-weight:600;border-bottom:0}

.cambox{max-width:440px;width:100%;padding:14px}
.camvideo,.camshot{display:block;width:min(100%,calc(min(70vh,560px) * .75));height:auto;aspect-ratio:3/4;margin:0 auto;border-radius:12px;background:#000;object-fit:cover;transform:scaleX(-1)}
.camshot{transform:none}
.camvideo[hidden],.camshot[hidden]{display:none}
.camnote{margin:8px 0}
.attendphoto{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}
.attendphoto img{width:84px;height:84px;border-radius:10px;object-fit:cover}
.attendforgot{margin:12px 0 0;display:flex;flex-direction:column;gap:4px}
.forgotmine{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.forgotcard{margin-bottom:12px}
.forgotrow{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.forgotimg{width:96px;height:96px;border-radius:10px;object-fit:cover;flex:none;background:var(--soft)}
.forgotmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.forgotact{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.forgotact input{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit}

.attenddays{display:grid;gap:8px}
.attendday2{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);
  border-radius:14px;background:var(--panel);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.attendday2 span{font-size:13px;color:var(--muted)}
.attendday2.late{border-color:var(--danger)}
.attendday2.off{opacity:.7}
.attendredtext{color:var(--danger);font-style:normal;font-weight:700}
.attendgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.attendcard{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 10px;border:2px solid var(--line);
  border-radius:14px;background:var(--panel);color:var(--text);text-align:center;text-decoration:none}
.attendcard small{color:var(--muted);font-size:11.5px;line-height:1.4}
.attendcard.none{opacity:.55;border-style:dashed}
.attendcard.late{border-color:var(--danger);background:var(--danger-soft,rgba(220,60,60,.08))}
.attendtime{font-style:normal;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.attendcard.late .attendtime,.attendlate{color:var(--danger)}
.attendlate{text-decoration:none;font-size:12.5px;font-weight:700}
.attendseepic{text-decoration:underline}

.cyclecard{margin-bottom:12px}
.cyclehead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.cyclehead select{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit}
.notshot{display:flex;flex-wrap:wrap;gap:8px}
.notshotone{padding:7px 12px;border:1px dashed var(--line);border-radius:99px;background:var(--panel);color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
.notshotone i{font-style:normal;font-size:11.5px;margin-left:4px}

.hstory{align-self:flex-end;padding:7px 14px;border:1px solid var(--line);border-radius:99px;background:var(--panel);color:var(--text);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.storyover{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.92);display:grid;place-items:center}
.storybox{position:relative;width:min(420px,100vw);height:min(760px,100dvh);background:#000;border-radius:16px;overflow:hidden;color:#fff}
.storypic{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.storybars{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px;z-index:3}
.storybars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.storybars b{display:block;height:100%;width:0;background:#fff}
.storyhead{position:absolute;top:22px;left:12px;right:12px;display:flex;align-items:center;gap:10px;z-index:3;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.storywho{font-weight:700;flex:1}
.storyx{background:none;border:0;color:#fff;font-size:20px;cursor:pointer}
.storyfoot{position:absolute;left:0;right:0;bottom:0;padding:60px 14px 14px;z-index:4;display:flex;flex-direction:column;gap:8px;
  background:linear-gradient(transparent,rgba(0,0,0,.78))}
.storytime{display:flex;flex-direction:column;gap:2px}
.storytime b{font-size:34px;font-variant-numeric:tabular-nums}
.storytime span{font-size:13px;opacity:.85}
.storytap{position:absolute;inset:60px 0 260px;display:flex;z-index:2}
.storytap span{flex:1}

.storyreacts{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px}
.storyreacts span{background:rgba(255,255,255,.16);padding:3px 9px;border-radius:99px}
.storycomments p{margin:0 0 3px;font-size:13px;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.storycomments button{background:none;border:0;color:rgba(255,255,255,.6);cursor:pointer;font-size:11px}
.storyemoji{display:flex;gap:8px}
.storyemoji button{flex:1;padding:6px 0;font-size:22px;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(255,255,255,.08);cursor:pointer}
.storyemoji button.on{background:rgba(255,255,255,.3);border-color:#fff}
.storysend{display:flex;gap:8px}
.storysend input{flex:1;padding:9px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.4);color:#fff;font:inherit;font-size:14px}
.storysend button{padding:0 16px;border:0;border-radius:99px;background:#fff;color:#000;font:inherit;font-weight:700;cursor:pointer}

.chatfab{position:fixed;right:18px;bottom:82px;z-index:56;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  background:var(--accent);color:#fff;font-size:22px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.chatpanel{position:fixed;right:18px;bottom:140px;z-index:1500;width:min(380px,calc(100vw - 24px));height:min(520px,calc(100dvh - 170px));
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);
  box-shadow:0 16px 40px rgba(0,0,0,.3);overflow:hidden}
.chatpanel header{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line)}
.chatpanel header b{flex:1}
.chatpanel header button{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;font-size:13px}
.chatlist{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.chatmsg{max-width:88%;padding:8px 12px;border-radius:14px;font-size:14px;line-height:1.55;word-break:break-word}
.chatmsg.user{align-self:flex-end;background:var(--accent);color:#fff}
.chatmsg.assistant{align-self:flex-start;background:var(--soft)}
.chatwait{opacity:.7}
.chathello{display:flex;flex-direction:column;gap:8px;align-items:flex-start;font-size:13.5px}
.chathello span{color:var(--muted)}
.chatchip{padding:7px 12px;border:1px solid var(--line);border-radius:99px;background:var(--panel);color:var(--text);font:inherit;font-size:13px;cursor:pointer}
.chatgo{margin-left:6px;padding:1px 10px;border:1px solid var(--accent);border-radius:99px;background:none;color:var(--accent);font:inherit;font-size:12px;cursor:pointer}
.chatform{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.chatform input{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:99px;background:var(--panel);color:var(--text);font:inherit;font-size:14px}
.chatsend{padding:0 16px;border:0;border-radius:99px;background:var(--accent);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.chatsend:disabled{opacity:.5}

.supppl{display:flex;flex-direction:column;gap:8px}
.supperson{display:grid;grid-template-columns:minmax(120px,2fr) minmax(100px,1.4fr) minmax(86px,1fr) auto;gap:8px;align-items:center}
.supperson input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;min-width:0}
@media (max-width:640px){ .supperson{grid-template-columns:1fr 1fr} }

.leavewrap{overflow-x:auto}
.leavetable{width:100%;border-collapse:collapse;font-size:14px}
.leavetable th,.leavetable td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.leavetable td small{display:block;color:var(--muted);font-size:11.5px}
.leavetable tr.leaveflagrow td:first-child b{color:var(--danger)}
.leaveover{color:var(--danger)}
.leavegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:8px 0}
.leavetier{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.leavegrid input,.leaveswap input,.leaveswap select{padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;min-width:0}
.leaveoffrow{align-items:center;gap:10px;flex-wrap:wrap}
.weekchips{display:flex;gap:5px;flex-wrap:wrap}
.leaveswap{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.leaveswaphead{margin-top:16px}
.leaveswaplist{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.swapchip{padding:4px 10px;border-radius:99px;background:var(--soft);font-size:12.5px}
.leaveinfo{display:flex;flex-direction:column;gap:2px;margin:10px 0;padding:10px 12px;border-radius:12px;background:var(--soft);font-size:13px}
.leavenow{margin:4px 0 0;font-weight:700}
.leavenow.over{color:var(--danger)}
.attendcard.dayoff{opacity:.45}

.tenurecard{margin-bottom:12px}
.tenurerow{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.tenurerow small{color:var(--muted);margin-left:4px}
.tenurerow.soon{color:var(--accent)}
.tenurerow.now{font-weight:600}

.flexbox{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:4px 10px;border:1px solid var(--line);border-radius:99px;cursor:pointer}
.plantable td{padding:6px 5px;text-align:center;min-width:30px}
.plantable td:first-child,.plantable th:first-child{text-align:left;min-width:120px}
.plantable th{text-align:center;font-size:12px}
.plantable th small{display:block;font-weight:400;color:var(--muted)}
.plantable th.hol{color:var(--danger)}
.plantable td.off{background:var(--line)}
.plantable .coverrow td{font-weight:700}
.plantable .coverrow td.low{background:var(--danger-soft,rgba(220,60,60,.15));color:var(--danger)}
.weekplan{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:12px 0}
.weekday{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0;border:2px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);font:inherit;cursor:pointer}
.weekday span{font-size:18px;font-weight:700}
.weekday small{font-size:10.5px;color:var(--muted)}
.weekday.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.weekday.hol{opacity:.5}
.weekday:disabled{opacity:.4;cursor:not-allowed}

.leavebook{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--accent)}

.mcgrid{margin:10px 0}
.mchead,.mcdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.mchead span{text-align:center;font-size:12px;color:var(--muted);padding:4px 0}
.mccell{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:84px;padding:6px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--text);font:inherit;font-size:11px;text-align:left;cursor:pointer;overflow:hidden}
.mccell b{font-size:13px}
.mccell.out{opacity:.4}
.mccell.dayoff{background:var(--soft)}
.mccell.today{border-color:var(--accent);border-width:2px}
.mccell.sel{box-shadow:0 0 0 2px var(--accent)}
.mccell span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:1px 5px;border-radius:99px}
.mcshoot{background:var(--accent-soft);color:var(--accent)}
.mcleave{background:var(--ok-soft);color:var(--ok)}
.mcoff{color:var(--muted)}
.mcatt{color:var(--muted)}
.mcatt.late{color:var(--danger);font-weight:700}
.mcpost,.mcprop{color:var(--muted)}
.mcdetail{margin-top:12px}
.mcrow{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:14px;margin:0}
.mcrow small{display:block;color:var(--muted);font-size:12px}
.mcrow.off{color:var(--muted)}
.mcactions{margin-top:10px}
.mclegend{margin-top:8px}
@media (max-width:640px){ .mccell{min-height:66px;padding:4px;font-size:10px} .mccell span{padding:0 3px} }

.mctabs{margin:6px 0 10px}
.teamtable td.tc{min-width:26px;text-align:center;font-size:13px}
.teamtable td.tc.off,.teamtable td.tc.hol{background:var(--line)}
.teamtable td.tc.leave{background:var(--ok-soft)}
.teamtable td.tc.shoot{background:var(--accent-soft)}
.teamtable tr.me td:first-child b{color:var(--accent)}
.teamtable th.tdy{color:var(--accent)}
.mcdept{max-width:220px;margin-bottom:8px}

.caltip{position:fixed;z-index:3000;max-width:300px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);
  box-shadow:0 10px 28px rgba(0,0,0,.25);font-size:13px;line-height:1.55;white-space:pre-line;pointer-events:none}
.mccell[data-tip],.teamtable td[data-tip]{cursor:default}

.quickbar{margin:10px 0}
.qbgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 16px;margin-top:6px}
.qb{display:flex;flex-direction:column;gap:5px;font-size:14px}
.qb>label{font-size:12px;color:var(--muted);font-weight:600}
.qb small{color:var(--muted);font-size:11.5px}
.qb small.qbwarn{color:var(--danger);font-weight:600}
.qb select,.qb input{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;min-width:0;max-width:100%}
.qbstep{display:inline-flex;align-items:center;gap:6px}
.qbnum{width:72px;text-align:center;font-weight:700}
.qbday{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}

/* มือถือ: ปุ่มลอยเรียงเป็นแถวเดียวไม่ซ้อนกัน (ล่างขึ้นบน: เครื่องมือ · ประกาศ · กองวันนี้ · ถาม AI)
   และแชต AI เปิดเป็นหน้าเต็มจอแยกต่างหาก ไม่ใช่กล่องลอยทับหน้า */
@media (max-width:640px){
  .chatfab{bottom:180px;right:18px;width:42px;height:42px;font-size:19px}
  .chatpanel{inset:0;right:0;bottom:0;width:100%;height:100dvh;max-height:none;border-radius:0;border:0;z-index:3100}
  .chatpanel header{padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top))}
  .chatpanel header b{font-size:17px}
  .chatpanel header button{font-size:15px;padding:6px 4px}
  .chatform{padding:10px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .chatform input{font-size:16px}
}

/* วันกำหนดเขียนเสร็จ / ส่งลูกค้า บนแถวงานของคนเขียน */
.duerow{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 2px}
.duetag{font-size:13px;font-weight:600;padding:2px 10px;border-radius:999px;background:var(--panel-2,#eef0f6);color:var(--muted,#5d6180);border:1px solid var(--line,#dcdaf0)}
.duetag.warn{background:#fdf3ec;color:#a8521f;border-color:#f0c8a8}
.duetag.hot{background:#fdf0e3;color:#a8521f;border-color:#f0c8a8}
.duetag.bad{background:#fdeceb;color:#a8321a;border-color:#f0b9ae}
.duetag.shoot{background:#edecfb;color:#4044a8;border-color:#b9b7e8}
.duecard{display:flex;flex-direction:column;gap:6px}
.projrow .duerow{margin-top:6px}

/* ---- หน้าโปรเจ็ค: แท็บตามงาน + หน้าสรุป ---- */
.pjtabs{display:flex;gap:2px;overflow-x:auto;margin:6px 0 14px;border-bottom:1px solid var(--line);scrollbar-width:thin}
.pjtab{flex:none;border:0;background:none;color:var(--muted);padding:11px 14px;font-size:15px;font-weight:500;border-bottom:3px solid transparent;margin-bottom:-1px;cursor:pointer}
.pjtab[aria-selected="true"]{color:var(--text);font-weight:700;border-bottom-color:var(--accent,#5b5fc7)}
.pjtab i{font-style:normal;font-size:12px;font-weight:700;background:#b3361a;color:#fff;border-radius:999px;padding:0 7px;margin-left:6px}
.sumgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px;align-items:start}
.sumleft,.sumright{display:flex;flex-direction:column;gap:14px;min-width:0}
.todocard h3{display:flex;gap:8px;align-items:center;margin:0 0 8px;font-size:17px}
.todolist{display:flex;flex-direction:column;gap:8px}
.todorow{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--line);border-left:5px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--panel)}
.todorow.bad{border-left-color:#b3361a}.todorow.warn{border-left-color:#d9812a}
.todomain{flex:1 1 220px;min-width:0;text-align:left;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.todomain b{display:block;overflow-wrap:anywhere}
.todomain small{display:block;color:var(--muted);font-size:14px}
.todoact{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:860px){.sumgrid{grid-template-columns:minmax(0,1fr)}}
.todoact .btn,.todorow>.btn{font-size:14px;min-height:36px;padding:6px 12px}
.todorow .whopick .chip{font-size:14px;min-height:34px}
@media (max-width:560px){.pjtab{padding:12px 12px}.todorow{padding:10px}.todoact .btn,.todorow>.btn{min-height:40px}}

/* ---- หน้าเขียนบทแบบโฟกัส + หน้าสรุปแบบไปป์ไลน์ ---- */
.writetop2{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.pnav{display:flex;gap:8px;align-items:center}
.pnav .btn{flex:none;min-width:44px;min-height:44px;padding:8px 10px}
.pickbtn{flex:1 1 0;min-width:0;display:flex;gap:10px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:12px;padding:8px 12px;min-height:58px;cursor:pointer}
.pickmain{flex:1;min-width:0}
.pickmain b{display:block;line-height:1.35;overflow-wrap:anywhere;font-size:16px}
.pickmain small{display:block;color:var(--muted);font-size:13px;line-height:1.4}
.cpdot{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none;display:inline-block}
.cpdot.tdraft{background:var(--warn)}.cpdot.tfix{background:var(--danger)}.cpdot.twait,.cpdot.tsent{background:var(--accent)}.cpdot.tok{background:var(--ok)}
.cpstate{font-style:normal;font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--muted)}
.cpstate.tdraft{color:var(--warn)}.cpstate.tfix{color:var(--danger)}.cpstate.twait,.cpstate.tsent{color:var(--accent)}.cpstate.tok{color:var(--ok)}
.pmeta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pmeta .grow{flex:1}
.pmeta .whopick select{margin-left:6px}
.pmeta .chip{cursor:pointer;font-size:13px}
.track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.tk{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted)}
.tk i{display:block;height:6px;border-radius:999px;background:var(--line)}
.tk.done i{background:var(--ok)}.tk.now i{background:var(--accent);height:8px}.tk.now{color:var(--text);font-weight:700}.tk.fixnow i{background:var(--danger)}
.rcap{border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:12px;background:var(--panel-2)}
.rcap.rc-todo{border-left-color:var(--danger);background:var(--warn-soft)}
.rcap>summary{padding:10px 14px;cursor:pointer;display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;list-style:none}
.rcap>summary::-webkit-details-marker{display:none}
.rcap>div{padding:0 14px 12px}
.rcdue{display:flex;gap:8px;flex-wrap:wrap;font-size:14px;margin-bottom:6px}.rcdue .late{color:var(--danger);font-weight:700}
.rcquote{margin:0 0 6px;padding:8px 12px;border-left:3px solid var(--warn);background:var(--panel);border-radius:8px;font-size:15px}
.rcquote small{display:block;color:var(--muted);margin-top:4px}
.rclab{font-size:13px;font-weight:600;color:var(--muted);margin:6px 0 4px}
.rcsteps{margin:0;padding:0;list-style:none;display:flex;flex-direction:row;flex-wrap:wrap;gap:4px 18px}
.rcsteps li{display:flex;gap:8px}.rcsteps li span{width:18px;flex:none;color:var(--muted)}
.rcsteps li.ok{color:var(--ok)}.rcsteps li.ok span{color:var(--ok);font-weight:700}
.writegrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
.writemain{min-width:0}.writemain .writecol{max-width:none}
.ctxside{display:flex;flex-direction:column;gap:8px;position:sticky;top:8px;min-width:0}
.ctxside .acc{border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.ctxside .acc>summary{padding:10px 14px;cursor:pointer;font-weight:600}
.ctxside .acc>div{padding:0 14px 12px}
.rtext2{white-space:pre-line;line-height:1.7;overflow-wrap:anywhere}
.ctxplace{margin:0 0 4px;overflow-wrap:anywhere}
.ctxempty{padding:10px 14px}
.wgrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pipe{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.stg{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:12px;padding:10px 12px;text-align:left;cursor:pointer}
.stg b{display:block;font-size:24px;line-height:1.2}.stg span{font-size:13px;color:var(--muted)}
.stg.on{border-color:var(--accent);background:var(--accent-soft)}
.sumlist h3{margin:0 0 6px;font-size:17px}
.sumrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:9px 2px;border-bottom:1px solid var(--line)}
.sumrow:last-child{border-bottom:0}
.sumrowmain{flex:1 1 240px;min-width:0;text-align:left;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.sumrowmain b{display:block;overflow-wrap:anywhere}.sumrowmain small{display:block;color:var(--muted);font-size:14px}
.peekcard h3{margin:0}.peekhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}.peekhead h3{flex:1;font-size:17px}
.peekrow{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.peekrow i{font-style:normal;font-size:13px;font-weight:700;color:var(--muted)}
.peekrow span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}.peekrow em{font-style:normal}
.chips2{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.cpbox{width:min(520px,100%);max-height:80vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.35);padding:14px;display:flex;flex-direction:column;gap:8px;color:var(--text)}
.cphead{display:flex;justify-content:space-between;align-items:center;gap:8px}.cphead h3{margin:0;font-size:16px}
.cpsearch{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 12px;background:var(--bg);color:var(--text);font:inherit}
.cpchips{display:flex;gap:6px;flex-wrap:wrap}
.cpchips .chip{cursor:pointer;font-size:13px;padding:3px 11px}.cpchips .chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.cplist{display:flex;flex-direction:column;gap:6px}
.cpgroup{border-top:1px solid var(--line);padding-top:2px}.cpgroup:first-child{border-top:0}
.cpgroup>summary{display:flex;justify-content:space-between;gap:8px;padding:6px 10px 2px;cursor:pointer;list-style:none;font-size:12.5px;font-weight:600;color:var(--muted)}
.cpgroup>summary::-webkit-details-marker{display:none}
.cprow{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;border:0;background:none;color:var(--text);border-radius:8px;padding:7px 10px;cursor:pointer}
.cprow:hover{background:var(--panel-2)}.cprow.on{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.cptext{min-width:0}.cptext b{display:block;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.cptext small{display:block;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.readbox .readscroll{overflow:auto;max-height:56vh}
@media (max-width:1000px){.writegrid{grid-template-columns:minmax(0,1fr)}.ctxside{position:static;order:-1}}
@media (max-width:900px){.wgrid2{grid-template-columns:minmax(0,1fr)}.pipe{grid-template-columns:repeat(2,minmax(0,1fr))}.peekrow{grid-template-columns:minmax(0,1fr) auto}.peekrow i{grid-column:1/-1}}

/* ขัดเกลา: แถวในหน้าสรุป ป้ายกำหนดไม่ดันเป็นก้อนใหญ่ ปุ่มอ่านง่าย */
.sumrow .duerow{margin:3px 0 0}
.sumrow .btn.small,.sumrow .todoact .btn{font-size:14px;min-height:36px}
.sumrow .cpstate{min-width:74px;text-align:right}
.rcap{max-width:none}
.rcap[open]>summary{border-bottom:1px dashed var(--line);margin-bottom:8px}
.rcap>div{display:flex;flex-direction:column;gap:6px}
.rcdue{margin-bottom:0}
.pmeta select{min-height:36px}
.pickbtn:hover{border-color:var(--accent)}
.rchint{font-size:13px;color:var(--muted);flex:1 1 200px;text-align:right}
@media (max-width:560px){
  .rchint{text-align:left}
  .pickbtn .cpstate{display:none}
  .pickbtn{padding:8px 10px}
  .pickmain b{font-size:15px}
  .pmeta .grow{display:none}
}

/* การ์ดรูปเช็คชื่อเป็นปุ่ม (เปิดดูในเว็บ ไม่เปิดหน้าใหม่) */
button.attendcard{font:inherit;color:inherit;cursor:pointer;width:100%;background:var(--panel)}
/* หน้าสรุปของกอง: เว้นระยะระหว่างแถวไปป์ไลน์ รายการ และกล่องถัดไป */
.pipe{margin:0 0 14px}
.sumlist{margin:0 0 14px}
.peekcard{margin:0 0 14px}

/* ---- ขนาดปุ่มขั้นต่ำทั้งเว็บ: ตัวหนังสือ 14 พิกเซล และพื้นที่กดไม่เล็กเกินนิ้ว ---- */
.btn.small,.btn.small.ghost,.btn.ghost.small{font-size:14px;min-height:36px;padding-top:4px;padding-bottom:4px}
.lnk{font-size:14px;padding:6px 2px;min-height:32px;display:inline-flex;align-items:center}
.navtab,.navtab.toolstab{font-size:14px;min-height:40px}
.themebtn,.themebtn.langbtn{min-height:36px;min-width:36px;font-size:14px}
.mccell{font-size:11.5px}
@media (max-width:560px){
  .btn.small,.btn.small.ghost,.btn.ghost.small{min-height:40px}
  .navtab,.navtab.toolstab{min-height:44px}
  .themebtn,.themebtn.langbtn{min-height:40px;min-width:40px}
}
:root:not([data-skin="modern"]) .navtab,:root:not([data-skin="modern"]) .navtab.toolstab{font-size:14px;min-height:40px}
:root:not([data-skin="modern"]) .navtab .navlab{font-size:14px}
:root .chip,:root .stab{font-size:14px}
@media (max-width:560px){:root:not([data-skin="modern"]) .navtab{min-height:44px}}

/* ---- แชร์ช็อตหน้ากอง: Story วิดีโอสั้น 15 วินาที ---- */
.hbtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-self:flex-end}
.storyvid{background:#000}
.storyvid[hidden],.funplay[hidden],.funlive[hidden]{display:none}
.funcam .funbox{display:flex;flex-direction:column}
.funlive,.funplay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.funplay{object-fit:contain}
.funtop{position:absolute;top:12px;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;z-index:3;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.funclock{font-variant-numeric:tabular-nums;font-size:15px}
.funhint{position:absolute;left:14px;right:14px;top:52px;margin:0;font-size:12.5px;line-height:1.4;z-index:3;text-shadow:0 1px 4px rgba(0,0,0,.8);opacity:.9}
.funbar{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:20px 28px 28px;
  background:linear-gradient(transparent,rgba(0,0,0,.7))}
.funbar[hidden]{display:none}
.funflip{width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.2);color:#fff;font-size:22px;cursor:pointer}
.funspace{width:48px}
.funrec{width:72px;height:72px;border-radius:50%;border:4px solid #fff;background:transparent;display:grid;place-items:center;cursor:pointer;padding:0}
.funrec i{display:block;width:52px;height:52px;border-radius:50%;background:#e5484d;transition:all .15s ease}
.funrec.on i{width:28px;height:28px;border-radius:6px}
.funsend{flex-direction:column;align-items:stretch;gap:10px}
.funcap{padding:10px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);color:#fff;font:inherit;font-size:14px}
.funbtns{display:flex;gap:10px}
.funbtns .btn{flex:1}
.funmsg{position:absolute;left:14px;right:14px;top:50%;transform:translateY(-50%);z-index:5;padding:14px 16px;border-radius:12px;background:rgba(0,0,0,.8);color:#fff;text-align:center;font-size:14px;line-height:1.5}
.storydel{margin-right:2px}
.hstory.hasnew{position:relative}
.hstory.hasnew::after{content:"";position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:#e5484d;border:2px solid var(--panel)}
.cbsumtab td.cbdays{display:flex;flex-wrap:wrap;gap:4px 6px}
.cbsumtab td.cbdays span{padding:2px 8px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-size:13px;white-space:nowrap}
.cbsumtab td.cbdays span.late{background:var(--warn-soft);color:var(--warn)}
.cbmiss{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:14px}
.cbsumtab td.cbdays .cbx{margin-left:4px;font-size:12px}
.cbexempt{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin:14px 0 4px;padding:10px 12px;border:1px dashed var(--line);border-radius:10px;font-size:14px}
.cbexempt small{color:var(--muted);flex:1 1 220px}
.cbexchip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;background:var(--panel-2);border:1px solid var(--line)}
.cbexempt select{padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font:inherit;font-size:14px}
.cbnoallow{margin-left:6px;padding:1px 8px;border-radius:99px;background:var(--panel-2);color:var(--muted);font-size:12px}

/* ตอนพิมพ์/ทำ PDF ไม่เอาปุ่มลอยมุมจอและแผงแชตติดไปในกระดาษ */
@media print{
  .toolfab,.toolwrap,.toolmenu,.shoutfab,.callfab,.todofab,.chatfab,.chatpanel,.storyover,.funcam{display:none!important}
}

/* กล่องหน้าแรกบนมือถือต้องไม่ดันหน้าให้เลื่อนข้างได้ · 1fr เฉย ๆ ยอมให้ช่องกว้างตามข้อความที่ยาวที่สุด */
.homegrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.homebox,.hbrow,.hbrows,.hbhead{min-width:0}
@media (max-width:1000px){ .homegrid{grid-template-columns:minmax(0,1fr)} }

/* ---- โลเคชันลิสต์ ---- */
.locbar{display:flex;gap:10px;align-items:center;margin:0 0 12px}
.locbar input{flex:1;min-width:0;padding:10px 14px;border:1px solid var(--line);border-radius:99px;background:var(--panel);color:var(--text);font:inherit;font-size:15px}
.locgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:4px 0 24px}
.locgrid .empty{grid-column:1/-1}
.loccard{display:flex;flex-direction:column;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);
  font:inherit;padding:0;cursor:pointer;overflow:hidden;min-width:0}
.loccard:hover{border-color:var(--accent)}
.locpic{position:relative;display:block;aspect-ratio:4/3;background:var(--panel-2);overflow:hidden}
.locpic img{width:100%;height:100%;object-fit:cover;display:block}
.locpic i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:38px;opacity:.5}
.locpic b{position:absolute;right:8px;bottom:8px;padding:2px 9px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff;font-size:12.5px;font-weight:600}
.locbody{display:flex;flex-direction:column;gap:4px;padding:11px 13px 13px;min-width:0}
.locbody b{font-size:16px;line-height:1.35;overflow-wrap:anywhere}
.locbody small{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.locbody small.none{opacity:.7}
.loctag{align-self:flex-start;padding:1px 9px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-size:12.5px;font-weight:600}
.locover{position:fixed;inset:0;z-index:2100;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:14px;overflow:auto}
.locsheet{position:relative;width:min(560px,100%);max-height:calc(100dvh - 28px);overflow:auto;background:var(--panel);color:var(--text);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.locx{position:absolute;top:8px;right:8px;z-index:3;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:18px;cursor:pointer}
.locgal{position:relative;background:#000;aspect-ratio:4/3}
.locmain{width:100%;height:100%;object-fit:contain;display:block}
.locnav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:0;background:rgba(0,0,0,.5);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.locnav.prev{left:8px}.locnav.next{right:8px}
.locnum{position:absolute;left:10px;bottom:10px;padding:2px 9px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff;font-size:12.5px}
.locinfo{padding:16px 18px 18px}
.locinfo h3,.locform h3{margin:0 0 10px;font-size:19px;line-height:1.35;display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-right:40px}
.locinfo dl{display:grid;grid-template-columns:96px 1fr;gap:8px 12px;margin:0;font-size:15px}
.locinfo dt{color:var(--muted)}
.locinfo dd{margin:0;overflow-wrap:anywhere}
.locinfo dd a{color:var(--accent)}
.locnote{white-space:pre-wrap}
.locmeta{margin:14px 0 0;font-size:13px;color:var(--muted)}
.locbtns{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.locform{padding:18px}
.locform .field{display:flex;flex-direction:column;gap:5px;margin:0 0 12px}
.locform .field>span{font-size:14px;color:var(--muted)}
.locform input,.locform select,.locform textarea{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--text);font:inherit;font-size:15px;width:100%;box-sizing:border-box}
.locrow2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.locrow2{grid-template-columns:1fr}.locinfo dl{grid-template-columns:84px 1fr}}
.locthumbs{display:flex;gap:8px;flex-wrap:wrap}
.locthumb{position:relative;width:84px;height:84px;border-radius:10px;overflow:hidden;background:var(--panel-2)}
.locthumb img{width:100%;height:100%;object-fit:cover;display:block}
.locthumb button{position:absolute;top:3px;right:3px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;font-size:13px;cursor:pointer}
.locadd{align-self:flex-start;cursor:pointer}
.locuse{margin:16px 0 0;padding:12px 14px;border:1px dashed var(--line);border-radius:12px;background:var(--panel-2)}
.locuse>b{display:block;margin-bottom:8px;font-size:15px}
.locusepick{display:flex;gap:8px;flex-wrap:wrap}
.locusepick select{flex:1 1 200px;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;font-size:15px}
.locusemsg{display:block;margin-top:8px}
.locusemsg.bad{color:var(--danger)}
.stockq{width:100%;box-sizing:border-box;margin:0 0 10px;padding:10px 14px;border:1px solid var(--line);border-radius:99px;background:var(--panel);color:var(--text);font:inherit;font-size:15px}

/* ---- Shot List (สร้าง shooting list) ----
 * แยกสีตามชนิดข้อมูลให้ตาอ่านออกทันที: พร็อพ = ส้ม · นักแสดง = เขียว · ทีม A = ม่วง · ทีม B = ฟ้า
 * โทนสว่าง/มืดกำหนดผ่านตัวแปร --sb-* ชุดเดียว ไม่ใส่สีตรง ๆ ในตัวป้าย */
:root{
  --sb-prop-bg:#fdf0dc;--sb-prop-ink:#8a4b08;
  --sb-cast-bg:#e4f4ec;--sb-cast-ink:#1d6a47;
  --sb-a-bg:#eeeefb;--sb-a-ink:#4a4fb3;
  --sb-b-bg:#e1f1f8;--sb-b-ink:#16698f;
  --sb-note-bg:#f4f1ea;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --sb-prop-bg:#3a2a12;--sb-prop-ink:#f0b970;
    --sb-cast-bg:#16291f;--sb-cast-ink:#7fd9ac;
    --sb-a-bg:#23253a;--sb-a-ink:#a9abff;
    --sb-b-bg:#12303d;--sb-b-ink:#7cc8e8;
    --sb-note-bg:#24221d;
  }
}
:root[data-theme="dark"]{
  --sb-prop-bg:#3a2a12;--sb-prop-ink:#f0b970;
  --sb-cast-bg:#16291f;--sb-cast-ink:#7fd9ac;
  --sb-a-bg:#23253a;--sb-a-ink:#a9abff;
  --sb-b-bg:#12303d;--sb-b-ink:#7cc8e8;
  --sb-note-bg:#24221d;
}
.sbtop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.sbstat{font-size:12.5px;padding:4px 11px;border-radius:999px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);white-space:nowrap}
.sbstat.saving{color:var(--warn);border-color:var(--warn)}
.sbstat.saved{color:var(--ok);border-color:var(--ok)}
.sbstat.error{color:var(--danger);border-color:var(--danger);background:var(--danger-soft);white-space:normal;max-width:100%}
.sbnote{margin:0 0 10px}
.sbwrap{padding-right:56px}
@media (max-width:860px){.sbwrap{padding-right:0}}

/* แถบเครื่องมือ — เหลือแต่ที่ใช้บ่อย ที่เหลืออยู่ใน เพิ่มเติม */
.sbbar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:0 0 14px}
.sbprogress{flex:1 1 140px;min-width:120px;height:8px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.sbprogress i{display:block;height:100%;background:var(--ok);border-radius:99px}
.sbchips{display:inline-flex;gap:6px;flex-wrap:wrap}
.sbmore{position:relative}
.sbmore summary{list-style:none;cursor:pointer}
.sbmore summary::-webkit-details-marker{display:none}
.sbmenu{position:absolute;right:0;top:calc(100% + 4px);z-index:40;min-width:210px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.sbmenu button{text-align:left;padding:10px 14px;font-size:14px;border-bottom:1px solid var(--line-soft)}
.sbmenu button:last-child{border-bottom:none}
.sbmenu button:hover{background:var(--accent-soft);color:var(--accent)}
.sbmenu button.danger{color:var(--danger)}
.sbday{margin:0 0 14px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.sbday summary{cursor:pointer;font-weight:600}
.sbdayrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:8px 0 0}
.sbdayrow b{flex:0 0 100%;font-size:13px;color:var(--muted)}

/* ป้ายพร็อพ / นักแสดง */
.sbtag{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:99px;font-size:13px;font-style:normal;line-height:1.5}
.sbtag.k-prop{background:var(--sb-prop-bg);color:var(--sb-prop-ink)}
.sbtag.k-cast{background:var(--sb-cast-bg);color:var(--sb-cast-ink)}
.sbtag button{color:inherit;font-size:15px;line-height:1;padding:0 2px;opacity:.7}
.sbtag button:hover{opacity:1}

/* บล็อกคอนเทนต์ — หัวบล็อกย้อมสีตามทีม */
.sbblock{margin:0 0 20px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:var(--shadow);overflow:visible}
.sbhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;border-radius:12px 12px 0 0;background:var(--panel-2)}
.sbblock.tA .sbhead{background:var(--sb-a-bg)}
.sbblock.tB .sbhead{background:var(--sb-b-bg)}
.sbblock.folded .sbhead{border-radius:12px}
.sbfold{flex:0 0 auto;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:14px}
.sbfold:hover{color:var(--accent);border-color:var(--accent)}
.sbname{flex:1 1 220px;min-width:0;font-size:16px;font-weight:700;padding:6px 8px;border:1px solid transparent;border-radius:8px;background:transparent}
input.sbname:hover,input.sbname:focus{border-color:var(--line);background:var(--panel)}
.sbteamsel,.sbteam{font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:99px;border:none;background:var(--panel);color:var(--text)}
.sbblock.tA .sbteamsel,.sbblock.tA .sbteam{background:var(--sb-a-ink);color:var(--panel)}
.sbblock.tB .sbteamsel,.sbblock.tB .sbteam{background:var(--sb-b-ink);color:var(--panel)}
.sbprog{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.sbprog.all{color:var(--ok);font-weight:600}
.sbmini{display:inline-block;width:70px;height:5px;border-radius:9px;background:var(--line);overflow:hidden}
.sbmini i{display:block;height:100%;background:var(--ok)}
.sbfoldnote{padding:6px 14px 10px 52px;font-size:13px;color:var(--muted)}
.sbblock.folded{box-shadow:none}
.sbloc{display:flex;align-items:center;gap:8px;margin:0;padding:8px 14px 0;font-size:13px;color:var(--muted)}
.sbloc input{flex:1;min-width:0;padding:5px 8px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text);font-size:13px}
.sbloc input:hover,.sbloc input:focus{border-color:var(--line);background:var(--panel-2)}
.sbrows{display:flex;flex-direction:column;padding:6px 6px 0}

/* ช็อต — อ่านเป็นข้อความก่อน ช่องกรอกจะโผล่เมื่อชี้หรือคลิก */
.sbrow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;padding:12px 8px;border-bottom:1px solid var(--line-soft);border-radius:8px}
.sbrow:last-child{border-bottom:none}
.sbrow:hover{background:var(--panel-2)}
.sbrow.done .sbbody{opacity:.5}
.sbrow.done .sbtext{text-decoration:line-through}
.sbside{display:flex;flex-direction:column;align-items:center;gap:6px}
.sbck{position:relative;display:block;cursor:pointer}
.sbck.ro{cursor:default}
.sbck input{position:absolute;inset:0;opacity:0;margin:0;cursor:inherit}
.sbckc{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--line);color:var(--muted);font-size:13px;font-weight:600;background:var(--panel)}
.sbck:not(.ro):hover .sbckc{border-color:var(--ok)}
.sbck input:checked+.sbckc{background:var(--ok);border-color:var(--ok);color:#fff}
.sbck input:focus-visible+.sbckc{outline:2px solid var(--accent);outline-offset:2px}
.sbgrip{cursor:grab;color:var(--muted);letter-spacing:-2px;font-size:15px;line-height:1;user-select:none;touch-action:none;opacity:.5}
.sbrow:hover .sbgrip{opacity:1}
.sbgrip:active{cursor:grabbing}
.sbbody{display:flex;flex-direction:column;gap:8px;min-width:0}
.sbtext{width:100%;margin:0;padding:4px 8px;border:1px solid transparent;border-radius:8px;background:transparent;font-size:15.5px;line-height:1.55;resize:none;color:var(--text);white-space:pre-wrap;field-sizing:content}
textarea.sbtext:hover{border-color:var(--line)}
textarea.sbtext:focus{border-color:var(--accent);background:var(--panel);outline:none}
.sbtext.ro{padding-left:0}
.sbchips2{display:flex;gap:6px;flex-wrap:wrap;padding:0 8px}
.sbchip{font-size:12.5px;font-weight:600;padding:2px 10px;border-radius:7px;border:1px solid var(--line);background:transparent;color:var(--muted);-webkit-appearance:none;appearance:none;cursor:pointer;line-height:1.5}
.sbchip.has{border-color:var(--line);color:var(--text);background:var(--panel)}
.sbchip.empty{border-style:dashed;font-weight:400;color:var(--accent);border-color:var(--accent-soft)}
.sbchip.empty:hover{border-color:var(--accent)}
span.sbchip.ro{cursor:default}
.sbln{display:flex;align-items:flex-start;gap:8px;padding:0 8px}
.sbln .lb{flex:0 0 52px;padding-top:4px;font-size:12px;color:var(--muted)}
.sbtags{position:relative;display:flex;flex-wrap:wrap;gap:5px;align-items:center;flex:1;min-width:0}
.sbtags input{flex:0 1 150px;min-width:90px;border:none;background:transparent;padding:4px 6px;font-size:13px;outline:none;border-bottom:1px dashed transparent}
.sbtags input:hover,.sbtags input:focus{border-bottom-color:var(--line)}
.sbtagadd{flex:0 0 auto;padding:2px 10px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-size:12.5px;font-weight:600}
.sbquote{width:100%;margin:0 8px;padding:6px 12px;border:1px solid transparent;border-left:3px solid var(--accent);border-radius:0 8px 8px 0;background:transparent;font-size:14.5px;font-style:italic;line-height:1.55;resize:none;color:var(--text);field-sizing:content}
textarea.sbquote:focus{background:var(--panel);outline:none;border-color:var(--accent)}
.sbnotebox{width:100%;margin:0 8px;padding:7px 11px;border:1px solid transparent;border-radius:8px;background:var(--sb-note-bg);font-size:13px;line-height:1.55;resize:none;color:var(--muted);field-sizing:content}
textarea.sbnotebox:focus{background:var(--panel);color:var(--text);border-color:var(--accent);outline:none}
.sbquote,.sbnotebox{width:calc(100% - 16px)}
.sbaddrow{display:flex;gap:12px;padding:0 8px}
.sbadd{font-size:12.5px;color:var(--accent)}
.sbadd:hover{text-decoration:underline}
.sbact{display:flex;gap:2px;align-items:flex-start;opacity:.35}
.sbrow:hover .sbact,.sbact:focus-within{opacity:1}
.sbicon{width:28px;height:28px;border-radius:7px;color:var(--muted);font-size:14px}
.sbicon:hover:not(:disabled){background:var(--accent-soft);color:var(--accent)}
.sbicon:disabled{opacity:.3;cursor:default}
.sbask{display:flex;gap:4px;align-items:center;flex-wrap:wrap;font-size:13px}
.sbsum{display:flex;flex-direction:column;gap:8px;margin:6px 8px 0;padding:10px 12px;border-top:1px solid var(--line-soft)}
.sbsum>div{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.sbsum span{flex:0 0 100px;font-size:12px;color:var(--muted)}
.sbfoot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 14px 14px}
@media (max-width:860px){
  .sbrow{grid-template-columns:34px minmax(0,1fr);padding:12px 4px}
  .sbact{grid-column:2;opacity:1;flex-wrap:wrap}
  .sbask{grid-column:2}
  .sbgrip{display:none}
  .sbln .lb{flex-basis:46px}
  .sbsum span{flex-basis:100%}
  .sbhead{padding:10px}
}
@media print{.sbbar,.sbfoot,.sbact,.sbtop .btn,.sbgrip,.sbaddrow{display:none}}

/* ป๊อปอัปเพิ่มช็อตลิสต์ */
.sbmodal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,11,16,.55)}
.sbmodalbox{width:100%;max-width:520px;max-height:90vh;overflow:auto;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow)}
.sbmodalbox h3{margin:0 0 14px}
.sbpick{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.sbopt{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);cursor:pointer}
.sbopt.on{border-color:var(--accent);background:var(--accent-soft)}
.sbopt input{margin-top:4px}
.sbopt span{display:flex;flex-direction:column;gap:2px}
.sbopt small{color:var(--muted)}

/* รายการแนะนำพร็อพ + ลากสลับ */
.sbsug{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;display:flex;flex-direction:column;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:var(--shadow)}
.sbsug button{text-align:left;padding:9px 12px;font-size:14px;border-bottom:1px solid var(--line-soft)}
.sbsug button:last-child{border-bottom:none}
.sbsug button:hover,.sbsug button:focus-visible{background:var(--accent-soft);color:var(--accent)}
.sbrow.dragging{opacity:.4}
.sbrow.dropbefore{box-shadow:0 -3px 0 0 var(--accent)}
.sbrow.dropafter{box-shadow:0 3px 0 0 var(--accent)}

/* พิมพ์ Shot List — ซ่อนทั้งแอป เหลือแต่หน้าพิมพ์ที่สร้างตอนกดปุ่ม */
#sbprint{display:none}
@media print{
  body.sbprinting>*:not(#sbprint){display:none!important}
  body.sbprinting{background:#fff!important}
  body.sbprinting #sbprint{display:block;color:#000;font-size:11pt;line-height:1.45;font-family:inherit}
  @page{size:A4;margin:12mm}
  #sbprint .pr-head h1{font-size:18pt;margin:0 0 2px}
  #sbprint .pr-head p{margin:0 0 12px;font-size:10pt;color:#444}
  #sbprint .pr-block{margin:0 0 16px}
  #sbprint .pr-block h2{font-size:13pt;margin:0 0 3px;padding:4px 8px;background:#e9e9e9;border:1px solid #999;break-after:avoid}
  #sbprint .pr-team{display:inline-block;margin-right:8px;padding:0 6px;border:1px solid #000;font-size:10pt}
  #sbprint .pr-loc{margin:0 0 4px;font-size:10pt;color:#333}
  #sbprint table{width:100%;border-collapse:collapse;font-size:10.5pt}
  #sbprint th,#sbprint td{border:1px solid #888;padding:4px 6px;vertical-align:top;text-align:left}
  #sbprint th{background:#f2f2f2;font-weight:600;font-size:9.5pt}
  #sbprint thead{display:table-header-group}
  #sbprint tr{break-inside:avoid}
  #sbprint .c1{width:34px;text-align:center;font-size:13pt}
  #sbprint .c2{width:26px;text-align:center}
  #sbprint .c3{width:72px}
  #sbprint .c5{width:20%}
  #sbprint .c6{width:14%}
  #sbprint .pr-q{margin-top:3px;font-style:italic}
  #sbprint .pr-n{margin-top:3px;font-size:9.5pt;color:#333;white-space:pre-line}
  #sbprint .pr-sum{margin-top:4px;font-size:10pt}
  #sbprint .pr-sum div{margin:1px 0}
}

.sbxwrap{position:relative}
.sbxwrap .sbquote,.sbxwrap .sbnotebox{width:calc(100% - 16px);padding-right:34px}
.sbx{position:absolute;top:4px;right:14px;width:24px;height:24px;border-radius:6px;color:var(--muted);font-size:13px}
.sbx:hover{background:var(--danger-soft);color:var(--danger)}
.sbxask{position:absolute;top:4px;right:14px;padding:4px 8px;border-radius:8px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}

/* ชื่อช็อต — กรอบมีแถบเลขนำ (เลขช็อต/ติ๊กถ่ายแล้วอยู่ในแถบ) */
.sbrow{grid-template-columns:minmax(0,1fr) auto}
.sbtitle{display:flex;align-items:stretch;background:var(--panel);border:1.5px solid color-mix(in srgb,var(--text) 30%,transparent);border-radius:10px;overflow:hidden}
.sbtitle:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sbband{flex:0 0 46px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;background:var(--accent-soft);border-right:1.5px solid color-mix(in srgb,var(--text) 30%,transparent)}
.sbrow.done .sbband{background:var(--ok-soft)}
.sbband .sbckc{border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent)}
.sbband .sbck:not(.ro):hover .sbckc{border-color:var(--ok)}
.sbtitle .sbtext{flex:1;min-width:0;padding:10px 14px;border:none;border-radius:0;background:transparent;font-size:16px;font-weight:600;line-height:1.5}
.sbtitle textarea.sbtext:hover,.sbtitle textarea.sbtext:focus{border:none;background:transparent;outline:none}
.sbtitle .sbtext.ro{padding-left:14px}
.sbrow.done .sbtitle .sbtext{font-weight:500}
@media (max-width:860px){
  .sbrow{grid-template-columns:minmax(0,1fr)}
  .sbact,.sbask{grid-column:1}
  .sbband{flex-basis:40px}
}

/* ---- Digital Marketing ---- */
.dmtabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.dmchip{display:inline-flex;align-items:center;padding:2px 10px;border-radius:99px;font-size:12.5px;background:var(--panel-2);border:1px solid var(--line);color:var(--muted)}
.dmchip.ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.dmchip.bad{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.dmchip.ac{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.dmcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:0 0 14px}
.dmcard{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.dmcard span{font-size:12.5px;color:var(--muted)}
.dmcard b{font-size:20px;font-weight:700}
.dmcard small{font-size:12px;color:var(--muted)}
.dmcard.strong{border-color:var(--accent);background:var(--accent-soft)}
.dmcard.neg,.dmcard.neg b{color:var(--danger)}
.dmck{padding:12px 14px;margin:0 0 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel);display:flex;flex-direction:column;gap:8px}
.dmckhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dmckhead b{font-size:16px}
.dmoffer{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);padding:2px 8px;border:1px dashed var(--line);border-radius:8px;cursor:pointer}
.dmhandles{display:inline-flex;gap:6px;flex-wrap:wrap}
.dmplat{font-size:12.5px;padding:1px 8px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line-soft)}
.dmplat i{font-style:normal;font-weight:600;margin-right:5px;color:var(--muted)}
.dmprices{display:flex;gap:18px;flex-wrap:wrap}
.dmprices div{display:flex;flex-direction:column}
.dmprices span{font-size:12px;color:var(--muted)}
.dmprices b{font-size:17px}
.dmprices b small{font-weight:400;color:var(--muted)}
.dmprices .neg b{color:var(--danger)}
.dmchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.dmnote{font-size:13px;color:var(--muted);font-style:italic}
.dmckfoot{display:flex;gap:8px;flex-wrap:wrap}
.dmbrief,.dmshare{padding:12px 14px;margin:0 0 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.dmbrief p{margin:4px 0 0;white-space:pre-wrap}
.dmlink{display:flex;gap:8px;margin:8px 0}
.dmlink input{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2)}
.dmled{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.dmrow{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line-soft)}
.dmrow:last-child{border-bottom:none}
.dmrow.rev .dmrowmain{opacity:.5;text-decoration:line-through}
.dmrow.isrev{background:var(--warn-soft)}
.dmrowmain{display:flex;flex-direction:column;gap:2px;min-width:0}
.dmrowmain small{color:var(--muted)}
.dmamt{font-weight:700}
.dmrowact{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.dmbox{max-width:620px}
.dmgrid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dmgrid2 .field{margin-bottom:10px}
.dmmode{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.dmmode .sbopt{flex:1 1 150px;padding:8px 10px}
.dmpreview{padding:10px 12px;margin:0 0 12px;border-radius:10px;background:var(--accent-soft);font-size:14px}
.dmpreview.neg{background:var(--danger-soft);color:var(--danger)}
.dmpick{width:100%;padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2)}
.dmkols{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.dmkolcard{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.dmkolcard:hover{border-color:var(--accent)}
.dmkolcard.bl{opacity:.65}
.dmkn{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dmkn b{font-size:16px}
.dmstars{color:var(--warn);letter-spacing:1px}
.dmrate{grid-template-columns:2fr 1fr auto;margin-bottom:6px}
.dmbank{margin:12px 0 0;padding:12px;border:1px dashed var(--line);border-radius:10px}
.dmbl{display:flex;align-items:center;gap:6px;padding-top:24px}
.dmok{color:var(--ok)}
.dmpubnote{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2)}
@media (max-width:640px){.dmgrid2{grid-template-columns:1fr}.dmrate{grid-template-columns:1fr 1fr auto}}

/* Outreach Tracker */
.dmboard{display:flex;gap:10px;overflow-x:auto;padding:0 0 12px;align-items:flex-start}
.dmcol{flex:0 0 232px;min-height:140px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.dmcol.over{outline:2px dashed var(--accent);background:var(--accent-soft)}
.dmcol h4{margin:2px 4px 8px;font-size:14px;display:flex;justify-content:space-between;align-items:center}
.dmcol h4 i{font-style:normal;font-size:12px;padding:0 8px;border-radius:99px;background:var(--panel);border:1px solid var(--line);color:var(--muted)}
.dmcolbody{display:flex;flex-direction:column;gap:8px;min-height:60px}
.dmbc{padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);display:flex;flex-direction:column;gap:6px;cursor:grab}
.dmbc.dim{opacity:.55}
.dmbc.dragging{opacity:.4}
.dmbcname{text-align:left;font-weight:700;font-size:14.5px}
.dmbcname:hover{color:var(--accent)}
.dmbcmove{display:flex;gap:4px;justify-content:flex-end}
.dmhist{margin:6px 0 0;display:flex;flex-direction:column;gap:3px;font-size:13px}
.dmhist small{color:var(--muted)}

/* ---- Digital Marketing 1ค: ปฏิทิน · Brand Hub · อนุมัติ ---- */
.dmcalbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.dmcalbar select,.dmcalnav select{min-height:40px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text)}
.dmtabs{display:flex;gap:4px}
.dmtabs button{min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer}
.dmtabs button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.dmoverdue{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px;margin:0 0 12px;border-radius:12px;background:var(--danger-soft);border:1px solid var(--danger);color:var(--danger)}
.dmoverdue.calm{background:var(--warn-soft);border-color:var(--warn);color:var(--text)}
.dmcalnav{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.dmcalnav b{min-width:150px;text-align:center}
.dmcalnav .primary{margin-left:auto}
.dmdow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:12.5px;color:var(--muted);padding:0 0 4px}
.dmdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.dmday{min-height:92px;border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:4px;display:flex;flex-direction:column;gap:3px}
.dmday.pad{border:0;background:transparent}
.dmday.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.dmday>b{font-size:12px;color:var(--muted);font-weight:500}
.dmpost{display:block;text-align:left;width:100%;font-size:12px;line-height:1.3;padding:4px 6px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);cursor:pointer;overflow-wrap:anywhere}
.dmpost i{font-style:normal;font-weight:600;margin-right:3px}
.dmpost small{display:block;color:var(--muted);font-size:11px}
.dmpost.st-await_client{background:var(--warn-soft);border-color:var(--warn)}
.dmpost.st-shoot,.dmpost.st-edit{background:var(--accent-soft);border-color:var(--accent)}
.dmpost.st-posted{background:var(--ok-soft);border-color:var(--ok)}
.dmpost.late{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger) inset}
.dmchip.warn{background:var(--warn-soft);border-color:var(--warn);color:var(--text)}
.dmstats{display:grid;gap:12px;margin:14px 0}
.dmpillars{display:grid;gap:6px}
.dmbar{position:relative;display:grid;grid-template-columns:110px 1fr auto;gap:8px;align-items:center;font-size:13px}
.dmbar i{display:block;height:10px;border-radius:99px;background:var(--accent);min-width:4px}
.dmbar em{font-style:normal;color:var(--muted)}
.dmloose{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.dmhub{display:grid;gap:12px;max-width:760px}
.dmassetadd{display:grid;grid-template-columns:1fr 1.4fr auto;gap:8px}
.dmrow2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dmbanned{padding:8px 12px;border-radius:10px;background:var(--danger-soft);border:1px solid var(--danger);font-size:13.5px}
.dmappr{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;margin-top:10px}
.dmver{display:grid;gap:4px;padding:8px;border-radius:10px;background:var(--panel-2)}
.dmver.late{border:1px solid var(--danger)}
.dmcmt{font-size:13.5px;padding:6px 10px;border-radius:10px;background:var(--panel);border:1px solid var(--line)}
.dmcmt.client{border-color:var(--accent)}
.dmcmtadd,.dmsend{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.dmcmtadd input{flex:1;min-width:180px}
.dmscript{white-space:pre-wrap;font:inherit;padding:10px 12px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);margin:8px 0}
.dmapprcard.late{border-color:var(--danger)}
.dmlate{outline:1px solid var(--danger);border-radius:12px}
@media (max-width:640px){
  .dmdow{display:none}
  .dmdays{grid-template-columns:1fr}
  .dmday.pad,.dmday.empty{display:none}
  .dmday{min-height:0}
  .dmassetadd,.dmrow2{grid-template-columns:1fr}
  .dmcalnav .primary{margin-left:0}
}

/* ---- Digital Marketing 2ก: ผลโพสต์ ---- */
.dmlinks{display:grid;gap:10px}
.dmlink2{display:grid;gap:6px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.dmlinkhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dmlinkhead a{overflow-wrap:anywhere;font-size:13px;color:var(--accent)}
.dmmwrap{overflow-x:auto}
.dmmt{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:13.5px}
.dmmt th,.dmmt td{padding:5px 8px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.dmmt th:first-child,.dmmt td:first-child{text-align:left;color:var(--muted)}
.dmrow3{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
@media print{.noprint{display:none!important}.dmpub .dmck{break-inside:avoid}}