:root{
  --ink:#171A16;
  --ink-soft:#5A6156;
  --paper:#E6E8E0;
  --card:#FBFBF7;
  --moss:#3D5A38;
  --amber:#A9781A;
  --rust:#8C3324;
  --rule:rgba(23,26,22,.18);
  --rule-soft:rgba(23,26,22,.09);
  /* สลับชื่อตัวหน้าสุดได้ถ้าอยากใช้ Noto Sans Thai แทน */
  --display:"Sarabun","Noto Sans Thai",sans-serif;
  --body:"Sarabun","Noto Sans Thai",sans-serif;
  --mono:"Sarabun","Noto Sans Thai",sans-serif;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden}
a{color:inherit}
img{max-width:100%;display:block}
.sheet{max-width:1720px;margin:0 auto;padding:26px clamp(20px,3vw,48px) 64px}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule);padding-bottom:10px;margin-bottom:12px}
.masthead.compact{padding-bottom:14px}
.headrow{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.masthead h1{
  font-family:var(--display);font-weight:700;font-size:clamp(16px,1.7vw,19px);
  line-height:1.1;letter-spacing:-.01em;margin:0;color:#4AA8E8
}
.tally{font-family:var(--mono);font-size:13px;color:var(--ink-soft);margin:0}
.tally b{color:var(--ink);font-weight:500}
.tally .sep{margin:0 8px;opacity:.45}
.headlink{
  background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--body);font-size:13.5px;font-weight:500;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)
}
.headlink:hover{color:var(--moss);text-decoration-color:var(--moss)}
.spacer{flex:1 1 auto}
.logolink{display:inline-flex}
.logo{height:26px;width:auto}
.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px
}
.lede{margin:10px 0 0;color:var(--ink-soft);max-width:52ch}
.back{font-family:var(--mono);font-size:13px;text-decoration:none;color:var(--ink-soft);display:inline-block;margin-bottom:14px}
.back:hover{color:var(--moss)}

/* ---------- ปุ่มเลือกกลุ่ม ---------- */
.tabs{
  display:flex;flex-wrap:nowrap;gap:2px;margin-bottom:16px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-bottom:1px solid var(--rule);
  scrollbar-width:none
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  padding:10px 14px 11px;white-space:nowrap;flex:0 0 auto;
  border-bottom:3px solid transparent;margin-bottom:-1px;
  color:var(--ink-soft);transition:color .15s,border-color .15s
}
.tab:hover{color:var(--ink)}
.tab-name{font-family:var(--display);font-size:15.5px;font-weight:500}
.tab-n{font-family:var(--mono);font-size:11.5px;opacity:.75}
.tab.is-on{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}
.tab.is-on .tab-n{opacity:.7}

.quickadd{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--rule);padding:10px;margin-bottom:12px
}
.quickadd[hidden]{display:none}
.quickadd .qa-url{flex:3 1 320px;width:auto}
.quickadd .qa-name{flex:1 1 160px;width:auto}
.quickadd .qa-group{flex:0 1 170px;width:auto}
.findbar{display:flex;gap:8px;align-items:center;margin-bottom:26px}
.findbar input{flex:1 1 auto;max-width:420px}

.section-head{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
  color:var(--ink-soft);font-weight:600;margin:0 0 14px;
  padding-bottom:7px;border-bottom:1px solid var(--rule);
  display:flex;align-items:baseline;gap:10px
}
.section-head em{font-family:var(--body);font-style:normal;letter-spacing:0;text-transform:none;font-size:12px;opacity:.8}
.section-n{margin-left:auto;font-size:13px;color:var(--ink)}

/* ---------- ฟอร์ม ---------- */
.intake{margin-bottom:32px}
.intake-form{
  display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;
  background:var(--card);border:1px solid var(--rule);padding:18px
}
.field{display:flex;flex-direction:column;gap:6px}
.field.span2{grid-column:1 / -1}
.field > span{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;
  color:var(--ink-soft)
}
.field > span em{
  font-family:var(--body);font-style:normal;text-transform:none;
  letter-spacing:0;opacity:.75;margin-left:8px;font-size:11.5px
}
input,textarea,select{
  font-family:var(--body);font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--rule);padding:9px 11px;width:100%;border-radius:0
}
textarea{resize:vertical;line-height:1.5}
input:focus,textarea:focus,select:focus,button:focus-visible,a:focus-visible,summary:focus-visible{
  outline:2px solid var(--moss);outline-offset:2px
}

.btn{
  font-family:var(--body);font-size:14px;font-weight:500;background:transparent;
  color:var(--ink);border:1px solid var(--ink);padding:9px 18px;cursor:pointer;
  transition:background .15s,color .15s
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.primary{background:var(--moss);border-color:var(--moss);color:#fff;grid-column:1 / -1;justify-self:start}
.btn.primary:hover{background:var(--ink);border-color:var(--ink)}
.btn.tiny{padding:6px 12px;font-size:13px}
.btn.danger{border-color:var(--rust);color:var(--rust)}
.btn.danger:hover{background:var(--rust);color:#fff}

.pane{margin:32px 0}
.pane h2{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
  color:var(--ink-soft);font-weight:600;margin:0 0 12px;
  padding-bottom:7px;border-bottom:1px solid var(--rule)
}
.row-form{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.row-form input{flex:1 1 200px;width:auto}
.empty{color:var(--ink-soft);font-size:14.5px;margin:8px 0;grid-column:1 / -1}
.hint{font-size:12.5px;color:var(--ink-soft);margin:10px 0 0}

/* ---------- รายการกลุ่มในหน้า setup ---------- */
.glist{list-style:none;margin:0;padding:0}
.glist li{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 0;border-bottom:1px solid var(--rule-soft)
}
.glist-num{font-family:var(--mono);font-size:13px;color:var(--ink-soft);min-width:24px}
.glist-form{display:flex;gap:8px;flex:1 1 380px;flex-wrap:wrap}
.glist-form input{flex:1 1 150px;width:auto;font-size:14px;padding:7px 9px}
.glist-count{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);min-width:60px;text-align:right}
.glist-tools{display:flex;gap:4px}
.glist-tools button{
  background:none;border:1px solid var(--rule-soft);cursor:pointer;
  color:var(--ink-soft);font-size:12px;line-height:1;padding:6px 8px
}
.glist-tools button:hover{color:var(--moss);border-color:var(--moss)}
.glist-tools button.danger:hover{color:var(--rust);border-color:var(--rust)}

/* ---------- ตารางรายการ ---------- */
.tablewrap{overflow-x:auto;margin-bottom:32px;border:1px solid var(--rule);background:var(--card)}
table.list{width:100%;border-collapse:collapse;font-size:14.5px}
table.list th{
  text-align:left;font-weight:600;font-size:12.5px;color:var(--ink-soft);
  padding:11px 12px;border-bottom:1px solid var(--rule);white-space:nowrap;background:#F2F3EE
}
table.list td{padding:11px 12px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
table.list tbody tr:hover{background:#F4F5F0}
table.list tbody tr.erow:hover{background:transparent}
table.list tr:last-child td{border-bottom:none}

.c-no{width:38px;color:var(--ink-soft);font-size:12.5px;text-align:right}
.c-num{width:60px;text-align:right;color:var(--ink-soft);font-size:13px}
.c-date{width:92px;color:var(--ink-soft);font-size:13px;white-space:nowrap}
.c-group{width:150px;color:var(--ink-soft);font-size:13.5px}
.c-act{width:150px;white-space:nowrap;text-align:right}
.c-act .linky{margin-left:12px}

.c-name{min-width:260px}
.c-name .name{
  text-decoration:none;font-weight:500;
  overflow-wrap:anywhere;border-bottom:1px solid transparent
}
.c-name .name:hover{color:var(--moss);border-bottom-color:var(--moss)}
.rownote{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:3px}
.badge{
  display:inline-block;font-size:10px;letter-spacing:.08em;padding:2px 5px;margin-right:8px;
  background:var(--ink);color:var(--paper);vertical-align:2px
}
.badge.b-tiktok{background:var(--amber);color:#fff}
.badge.b-youtube{background:var(--rust);color:#fff}
.badge.b-map{background:var(--moss);color:#fff}
.linky.go{color:var(--moss);font-weight:600}
.linky.go:hover{color:var(--ink)}

.erow td{background:#F2F3EE;border-bottom:1px solid var(--rule)}
.prow td.playcell{background:#F2F3EE;border-bottom:1px solid var(--rule);padding:14px 12px}
.player{margin:0 auto 8px}
.player{background:#000}
.player iframe{width:100%;height:100%;border:0;display:block}
.player.is-wide{width:min(720px,100%);aspect-ratio:16/9}
.player.is-tall{width:min(330px,100%);height:min(72vh,590px)}
.erow-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.erow-form input{flex:1 1 200px;width:auto;font-size:14px;padding:7px 9px}
.erow-form select{flex:0 1 180px;width:auto;font-size:14px;padding:7px 9px}
.erow-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:9px;font-size:12px}
.erow-foot .url{color:var(--ink-soft);overflow-wrap:anywhere;flex:1 1 200px}
.linky{
  background:none;border:none;padding:0;cursor:pointer;font-family:var(--body);
  font-size:12.5px;color:var(--ink-soft);text-decoration:none
}
.linky:hover{color:var(--moss)}
.linky.danger:hover{color:var(--rust)}
.stamp{color:var(--ink-soft);opacity:.7}

/* ---------- บิล ---------- */
.billform .qa-amt{flex:0 1 120px;width:auto}
.billform .qa-date{flex:0 1 150px;width:auto}
.billform .qa-note{flex:1 1 160px;width:auto}
.filepick{position:relative;display:inline-flex}
.filepick input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.filepick span{
  display:inline-block;border:1px dashed var(--ink);padding:8px 14px;
  font-size:13.5px;font-weight:500;background:#fff
}
.filepick:hover span{background:var(--ink);color:var(--paper)}
.filepick.small span{padding:6px 10px;font-size:12.5px;border-style:solid;border-color:var(--rule)}
.c-amt{width:110px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.badge.b-bill{background:var(--moss);color:#fff}
.billimg{max-width:min(480px,92vw);max-height:70vh;width:auto;display:block;border:1px solid var(--rule);background:#fff;margin-bottom:8px}
.glist-name{font-weight:500;flex:1 1 160px}

/* ---------- รายงาน ---------- */
.report .c-month{width:70px;white-space:nowrap}
.report .c-num{width:60px;text-align:right;color:var(--ink-soft)}
.report .c-pct{width:64px;text-align:right;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.report .c-bar{min-width:120px}
.report .bar{
  display:block;height:14px;min-width:2px;background:var(--moss);opacity:.85
}
.report tr.is-zero td{color:var(--rule)}
.report tr.is-zero .bar{display:none}
.report .sumrow td{font-weight:600;border-top:2px solid var(--ink);background:#F2F3EE}

/* ---------- login ---------- */
.loginwrap{min-height:70vh;display:flex;align-items:center;justify-content:center}
.loginbox{
  width:min(380px,100%);background:var(--card);border:1px solid var(--rule);
  padding:34px 30px;text-align:center
}
.loginbox .logo{height:34px;margin:0 auto 14px}
.loginbox h1{margin:0 0 4px}
.loginbox .lede{margin:0 0 20px;font-size:14px}
.loginform{display:flex;flex-direction:column;gap:14px;text-align:left}
.loginform .btn.primary{width:100%;justify-self:stretch}
.loginerr{
  background:#F7EBE8;border-left:3px solid var(--rust);color:var(--rust);
  font-size:13.5px;padding:8px 12px;margin:0 0 16px;text-align:left
}

/* ---------- ปุ่มติดตั้ง ---------- */
.headlink.can-install{color:var(--moss);font-weight:600;text-decoration-color:var(--moss)}
.biginstall{margin:4px 0 14px;padding:12px 26px;font-size:15px;display:inline-block;text-decoration:none}
.apkbox{
  background:var(--card);border:2px solid var(--moss);padding:16px 20px;margin:4px 0 18px
}
.apkbox p{margin:0 0 10px}
.apkbox .hint{margin:10px 0 0}

/* ---------- หน้า install ---------- */
.osguides{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px;margin-top:8px}
.osguide{background:var(--card);border:1px solid var(--rule);padding:18px 20px}
.steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.steps b{font-weight:600}
.kbd{display:inline-block;border:1px solid var(--rule);padding:0 6px;background:#fff;font-size:13px}
.urlcopy{
  display:inline-block;font-family:var(--mono);font-size:13px;background:#fff;
  border:1px solid var(--rule);padding:4px 8px;margin:0 6px 4px 0;overflow-wrap:anywhere
}
.installnote{margin:16px 0 0;font-size:13px;text-align:center}
.installnote a{color:var(--ink-soft)}
.installnote a:hover{color:var(--moss)}

/* ---------- flash ---------- */
.flash{list-style:none;padding:0;margin:0 0 18px}
.flash li{border-left:3px solid var(--moss);background:var(--card);padding:9px 13px;font-size:14px;margin-bottom:6px}
.flash-warn{border-left-color:var(--rust)}

/* ---------- viewer ---------- */
.viewer{position:fixed;inset:0;background:rgba(20,22,19,.9);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.viewer[hidden]{display:none}
.viewer-inner{position:relative;width:100%;max-width:900px}
.viewer-close{
  position:absolute;right:0;top:-34px;background:none;border:none;cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--paper)
}
.viewer-frame{background:#000;margin:0 auto}
.viewer-frame iframe{width:100%;height:100%;border:0;display:block}
.viewer-frame.is-wide{width:100%;aspect-ratio:16/9}
.viewer-frame.is-tall{width:min(340px,90vw);height:min(75vh,600px)}

/* ---------- footer ---------- */
.colophon{
  margin-top:48px;padding-top:14px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;color:var(--ink-soft)
}

@media (max-width:620px){
  .intake-form{grid-template-columns:1fr}
  .headrow{gap:12px}
  .logo{height:20px}

  .tab{padding:9px 11px 10px}
  .tab-name{font-size:14.5px}
  .glist-count{text-align:left}
  .c-group,.c-date,.c-no{display:none}
  .c-amt{width:auto}
  .c-name{min-width:0}
  .c-act{white-space:normal}
  .playcell{padding:10px 8px}
  /* ตารางอาจกว้างกว่าจอ — ตรึงเครื่องเล่นไว้ในส่วนที่มองเห็นเสมอ */
  .playcell .player,.playcell .js-closeplay{position:sticky;left:8px}
  .player{margin-left:0;margin-right:0}
  .player.is-tall{width:min(300px,92vw);height:min(70vh,540px)}
  .player.is-wide{width:min(92vw,720px)}
  .c-act{width:auto}
  table.list{font-size:14px}
  table.list th,table.list td{padding:9px 8px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}