/* =====================================================================
   FEBC Voice Studio — dark theme
   ===================================================================== */

/* =====================================================================
   ฟอนต์ในตัว (ไม่ดึงจากอินเทอร์เน็ต — ใช้งานออฟไลน์ได้)
   Anuphan · Cadson Demak · SIL OFL 1.1 — ไทยไม่มีหัว วาดจากโครง IBM Plex
   IBM Plex Mono · IBM · SIL OFL 1.1 — ใช้กับชื่อไฟล์/ตัวเลข
   รายละเอียดและใบอนุญาตอยู่ใน assets/fonts/
   ===================================================================== */
@font-face{
  font-family:'Anuphan';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/anuphan-thai-400.woff2') format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:'Anuphan';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/anuphan-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Anuphan';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/anuphan-thai-600.woff2') format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:'Anuphan';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/anuphan-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Anuphan';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/anuphan-thai-700.woff2') format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:'Anuphan';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/anuphan-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/plexmono-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/plexmono-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


:root{
  --bg:#121212;
  --bg-2:#181818;
  --card:#1e1e1e;
  --card-2:#242424;
  --line:#2f2f2f;
  --line-2:#3a3a3a;
  --txt:#e8e8e8;
  --txt-2:#a3a3a3;
  --txt-3:#6f6f6f;
  --accent:#31b7e9;
  --accent-2:#0682b4;
  --accent-soft:rgba(49,183,233,.12);
  --ok:#3ecf8e;
  --warn:#f0b429;
  --err:#ef5b5b;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 8px 28px rgba(0,0,0,.45);
  /* ฟอนต์: UI ใช้ Anuphan (ไม่มีหัว) · ช่องพิมพ์ข้อความยาวใช้ฟอนต์มีหัว อ่านตรวจทานสบายตากว่า */
  --font-ui:"Anuphan","Noto Sans Thai","Sarabun",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --font-read:"Noto Sans Thai","Sarabun","Leelawadee UI",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:#5ccdf5}
h1,h2,h3,h4{margin:0 0 .6rem;line-height:1.35;font-weight:700}
h1{font-size:1.6rem}
h2{font-size:1.25rem}
h3{font-size:1.05rem}
p{margin:0 0 .8rem}
hr{border:none;border-top:1px solid var(--line);margin:1.4rem 0}
small{color:var(--txt-2)}

/* ---------------------------- layout ---------------------------- */
.topbar{
  display:flex;align-items:center;gap:1.2rem;
  padding:.7rem 1.4rem;
  background:var(--bg-2);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
  flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:.55rem;color:var(--txt);font-weight:700;letter-spacing:.2px}
.brand:hover{color:#fff}
.brand-mark{font-size:1.35rem}
.brand-text{font-size:1.02rem}
.nav{display:flex;align-items:center;gap:.25rem;flex:1;flex-wrap:wrap}
.nav a{
  color:var(--txt-2);padding:.42rem .8rem;border-radius:99px;font-size:.92rem;
  transition:.15s;
}
.nav a:hover{background:var(--card-2);color:var(--txt)}
.nav a.on{background:var(--accent-soft);color:var(--accent)}
.nav-sep{width:1px;height:20px;background:var(--line-2);margin:0 .5rem}

/* ---- เมนูบน: กลุ่มย่อย + ปุ่มแฮมเบอร์เกอร์ ---- */
.nav-toggle{
  display:none;order:3;cursor:pointer;
  background:var(--card-2);border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:.3rem .58rem;font-size:1.05rem;line-height:1.3;
}
.nav-toggle:hover{border-color:var(--line-2)}
.nav-group{position:relative}
.nav-btn{
  display:inline-flex;align-items:center;gap:.32rem;cursor:pointer;
  background:none;border:none;font:inherit;
  color:var(--txt-2);padding:.42rem .8rem;border-radius:99px;font-size:.92rem;transition:.15s;
}
.nav-btn:hover{background:var(--card-2);color:var(--txt)}
.nav-group.on > .nav-btn{background:var(--accent-soft);color:var(--accent)}
.nav-btn .caret{font-size:.62rem;opacity:.75;transition:transform .15s}
.nav-group.open > .nav-btn .caret{transform:rotate(180deg)}
.nav-menu{
  display:none;position:absolute;top:calc(100% + .4rem);left:0;min-width:186px;z-index:60;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:.32rem;box-shadow:0 14px 30px rgba(0,0,0,.45);
}
.nav-group.open > .nav-menu{display:block}
.nav-menu a{display:block;padding:.45rem .7rem;border-radius:8px;white-space:nowrap}
.icon-btn{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--card-2);border:1px solid var(--line);
  color:var(--txt-2);font-size:.9rem;font-weight:700;line-height:1;
}
.icon-btn:hover{color:var(--txt);border-color:var(--line-2)}
.icon-btn.on{background:var(--accent-soft);color:var(--accent);border-color:transparent}

/* ชื่อผู้ใช้ยาวได้ไม่จำกัด — ย่อก่อนถึงจุดยุบ จะได้ไม่ดันเมนูตกบรรทัด */
/* จุดยุบวัดจากหน้าจริงหลังเพิ่มเมนู "มิกซ์เพลง" (1.45.0): มีชื่อผู้ใช้ตกบรรทัดที่ 1330px · ไม่มีชื่อตกที่ 1192px
   เผื่อแถบเลื่อนของ Windows (~17px) ไว้อีก ~20px */
@media(max-width:1360px){ .user-box .uname{display:none} }

@media(max-width:1220px){
  .topbar{gap:.7rem;flex-wrap:wrap}
  .brand{order:1;flex:1;min-width:0}
  .user-box{order:2}
  .nav-toggle{display:block}
  .nav{
    order:4;display:none;flex:0 0 100%;flex-direction:column;align-items:stretch;gap:.12rem;
    margin-top:.15rem;padding:.5rem 0 .2rem;border-top:1px solid var(--line);
  }
  .nav.open{display:flex}
  .nav a,.nav-btn{width:100%;border-radius:10px}
  .nav-btn{justify-content:flex-start}
  .nav-btn .caret{margin-left:auto}
  .nav-sep{width:100%;height:1px;margin:.4rem 0}
  .nav-group{position:static}
  .nav-menu{
    position:static;min-width:0;border:none;box-shadow:none;background:none;
    padding:.1rem 0 .25rem .9rem;
  }
}
.user-box{display:flex;align-items:center;gap:.5rem}
.user-chip{display:flex;align-items:center;gap:.5rem;color:var(--txt-2);font-size:.9rem}
.user-chip:hover{color:var(--txt)}
.user-box .uname{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  color:#04222f;display:grid;place-items:center;font-weight:700;font-size:.85rem;
  overflow:hidden;flex:0 0 auto;line-height:1;user-select:none;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.avatar-sm{width:38px;height:38px;font-size:1.05rem}
.avatar-lg{width:104px;height:104px;font-size:2.6rem;box-shadow:0 0 0 3px var(--card-2),0 0 0 4px var(--line-2)}
.user-cell{display:flex;align-items:center;gap:.65rem}
.avatar-edit{display:flex;align-items:flex-start;gap:1.2rem;flex-wrap:wrap}
.avatar-form{flex:1;min-width:240px}
.avatar-form input[type=file]{font-size:.9rem}
.wrap{max-width:1100px;margin:0 auto;padding:1.6rem 1.2rem 3rem}
.wrap.wide{max-width:1400px}
.foot{
  text-align:center;color:var(--txt-3);font-size:.8rem;
  padding:1.2rem;border-top:1px solid var(--line);
}

/* ---------------------------- cards ---------------------------- */
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.2rem;margin-bottom:1.2rem;
}
.card.pad-sm{padding:.9rem}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem;flex-wrap:wrap}
.card-head h2,.card-head h3{margin:0}
.muted{color:var(--txt-2)}
.dim{color:var(--txt-3)}
.hint{font-size:.83rem;color:var(--txt-3);margin-top:.3rem}
.section-label{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--txt-3);margin:0 0 .6rem;font-weight:700;
}

/* ---------------------------- grid ---------------------------- */
.grid{display:grid;gap:.9rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:1.2rem;align-items:start}
@media(max-width:980px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr}
}
@media(max-width:560px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .wrap{padding:1rem .8rem 2.4rem}
}

/* ------------------------ template cards ------------------------ */
.tpl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
@media(max-width:1100px){.tpl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.tpl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.tpl-grid{grid-template-columns:1fr}}
.tpl{
  position:relative;text-align:left;cursor:pointer;
  background:var(--card-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:.8rem .85rem;transition:.15s;
  color:var(--txt);font-family:inherit;font-size:inherit;
}
.tpl:hover{border-color:var(--line-2);background:#292929}
.tpl.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset}
.tpl-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.4rem}
.tpl-icon{font-size:1.4rem;line-height:1}
.tpl-name{font-weight:700;font-size:.93rem;margin:.45rem 0 .2rem}
.tpl-desc{font-size:.8rem;color:var(--txt-2);line-height:1.45}
.tpl-voice{margin-top:.5rem;font-size:.72rem;color:var(--txt-3)}
.tpl-badge{
  font-size:.65rem;background:#2d2d2d;border:1px solid var(--line-2);
  border-radius:99px;padding:.1rem .45rem;color:var(--txt-2);
}

/* ---------------------------- forms ---------------------------- */
label{display:block;font-size:.85rem;color:var(--txt-2);margin-bottom:.3rem;font-weight:600}
input[type=text],input[type=password],input[type=email],input[type=number],
select,textarea{
  width:100%;background:#161616;color:var(--txt);
  border:1px solid var(--line-2);border-radius:var(--radius-sm);
  padding:.6rem .7rem;font-family:inherit;font-size:.93rem;
  transition:.15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
textarea{resize:vertical;min-height:90px;line-height:1.75}
textarea.big{min-height:260px;font-size:1rem}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23888' d='M2 4l4 4 4-4z'/></svg>");background-repeat:no-repeat;background-position:right .6rem center;padding-right:1.8rem}
.field{margin-bottom:.9rem}
.field-row{display:flex;gap:.7rem;flex-wrap:wrap}
.field-row>*{flex:1;min-width:150px}
.check{display:flex;align-items:center;gap:.5rem;font-weight:500;color:var(--txt)}
.check input{width:auto;margin:0}

/* range */
input[type=range]{
  width:100%;appearance:none;height:4px;border-radius:99px;
  background:var(--line-2);outline:none;margin:.55rem 0;
}
input[type=range]::-webkit-slider-thumb{
  appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--accent);cursor:pointer;border:2px solid #0f0f0f;
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--accent);
  cursor:pointer;border:2px solid #0f0f0f;
}
.range-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.range-val{font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--accent);min-width:56px;text-align:right}

/* ---------------------------- buttons ---------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  background:var(--card-2);color:var(--txt);
  border:1px solid var(--line-2);border-radius:var(--radius-sm);
  padding:.6rem 1rem;font-size:.92rem;font-family:inherit;font-weight:600;
  cursor:pointer;transition:.15s;text-decoration:none;
}
.btn:hover{background:#2f2f2f;color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:linear-gradient(135deg,var(--accent-2),var(--accent));border-color:transparent;color:#04222f}
.btn-primary:hover{filter:brightness(1.08);color:#04222f}
.btn-danger{border-color:#5a2b2b;color:#ff9a9a;background:#241717}
.btn-danger:hover{background:#331d1d;color:#ffb6b6}
.btn-ghost{background:transparent}
.btn-sm{padding:.35rem .7rem;font-size:.82rem}
.btn-lg{padding:.8rem 1.5rem;font-size:1rem}
.btn-block{width:100%}
.btn-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

/* ---------------------------- chips ---------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{
  background:#232323;border:1px solid var(--line-2);border-radius:99px;
  padding:.28rem .65rem;font-size:.78rem;color:var(--txt-2);
  cursor:pointer;transition:.15s;font-family:inherit;
}
.chip:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.chip-group{margin-bottom:.7rem}
.chip-group-title{font-size:.75rem;color:var(--txt-3);margin-bottom:.3rem}

/* ---------------------------- tables ---------------------------- */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:.6rem .55rem;text-align:left;border-bottom:1px solid var(--line)}
th{color:var(--txt-3);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
tr:hover td{background:#1b1b1b}
.table-wrap{overflow-x:auto}
.tag{
  display:inline-block;font-size:.72rem;padding:.12rem .5rem;border-radius:99px;
  background:#2a2a2a;border:1px solid var(--line-2);color:var(--txt-2);
}
.tag-admin{background:rgba(49,183,233,.15);border-color:var(--accent-2);color:var(--accent)}
.tag-ok{background:rgba(62,207,142,.14);border-color:#2b6b52;color:var(--ok)}
.tag-off{background:rgba(239,91,91,.13);border-color:#6b3030;color:var(--err)}

/* ---------------------------- alerts ---------------------------- */
.alert{
  border-radius:var(--radius-sm);padding:.7rem .9rem;margin-bottom:1rem;
  font-size:.9rem;border:1px solid;
}
.alert-ok{background:rgba(62,207,142,.1);border-color:#2b6b52;color:#9fe8c8}
.alert-err{background:rgba(239,91,91,.1);border-color:#6b3030;color:#ffb1b1}
.alert-warn{background:rgba(240,180,41,.1);border-color:#6b5522;color:#f4d58d}
.alert-info{background:var(--accent-soft);border-color:var(--accent-2);color:#a9e2f7}

/* ---------------------------- audio ---------------------------- */
audio{width:100%;height:38px;filter:invert(.92) hue-rotate(180deg);border-radius:8px}
.player-box{background:#161616;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.8rem}
.player-box .meta{display:flex;justify-content:space-between;font-size:.8rem;color:var(--txt-3);margin-top:.45rem;flex-wrap:wrap;gap:.5rem}

/* ------------------ ช่องรหัสผ่าน + ปุ่มลูกตา ------------------ */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:2.4rem}
.pw-eye{
  position:absolute;top:1px;right:1px;bottom:1px;
  display:grid;place-items:center;width:2.2rem;
  background:transparent;border:none;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--txt-3);cursor:pointer;padding:0;margin:0;transition:.15s;
}
.pw-eye:hover{color:var(--txt)}
.pw-eye.on{color:var(--accent)}
.pw-eye:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ---------------------------- login ---------------------------- */
.login-wrap{max-width:400px;margin:6vh auto;padding:0 1rem}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:2rem;box-shadow:var(--shadow)}
.login-logo{text-align:center;font-size:2.4rem;margin-bottom:.4rem}
.login-title{text-align:center;margin-bottom:.2rem}
.login-sub{text-align:center;color:var(--txt-3);font-size:.85rem;margin-bottom:1.6rem}

/* ---------------------------- misc ---------------------------- */
.spinner{
  width:15px;height:15px;border:2px solid rgba(255,255,255,.25);
  border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center;color:var(--txt-3);padding:2.2rem 1rem;font-size:.9rem}
.counter{font-size:.8rem;color:var(--txt-3);font-variant-numeric:tabular-nums}
.counter.over{color:var(--err)}
.stat-row{display:flex;gap:1.4rem;flex-wrap:wrap}
.stat{background:var(--card-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.8rem 1rem;flex:1;min-width:130px}
.stat b{display:block;font-size:1.5rem;line-height:1.2}
.stat span{font-size:.78rem;color:var(--txt-3)}
.sticky-side{position:sticky;top:72px}
.divider{height:1px;background:var(--line);margin:1rem 0}
.mono{font-family:var(--font-mono);font-size:.85rem}
.nowrap{white-space:nowrap}
.right{text-align:right}
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-1{margin-top:.6rem}.mb-1{margin-bottom:.6rem}
.mt-2{margin-top:1.2rem}.mb-2{margin-bottom:1.2rem}
.hidden{display:none !important}

/* progress */
.progress{height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.progress > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width .3s}

/* toggle group */
.seg{display:inline-flex;background:#161616;border:1px solid var(--line-2);border-radius:99px;padding:3px}
.seg button{
  background:transparent;border:none;color:var(--txt-2);cursor:pointer;
  padding:.35rem .9rem;border-radius:99px;font-family:inherit;font-size:.85rem;font-weight:600;
}
.seg button.on{background:var(--accent);color:#04222f}

/* ---------------------- โต๊ะผสมเสียง (desk) ---------------------- */
.desk-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:1rem;align-items:start}
@media (max-width:1100px){.desk-layout{grid-template-columns:1fr}}
.desk-src{position:sticky;top:64px;max-height:calc(100vh - 90px);overflow:auto}
.desk-main{min-width:0}
.warnTxt{color:var(--warn)}
.dim{color:var(--txt-3)}

.src-group{
  font-size:.78rem;font-weight:700;color:var(--txt-3);
  text-transform:none;letter-spacing:.3px;
  margin:.7rem 0 .3rem;padding-bottom:.2rem;border-bottom:1px solid var(--line);
}
.src-item{
  display:flex;align-items:center;gap:.35rem;
  padding:.25rem .3rem;border-radius:var(--radius-sm);
  cursor:grab;user-select:none;
}
.src-item:hover{background:var(--card-2)}
.src-item:active{cursor:grabbing}
.src-name{
  flex:1;min-width:0;font-size:.86rem;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.src-dur{color:var(--txt-3);font-size:.75rem;margin-left:.4rem}
.src-pv,.src-add{
  flex:none;width:1.5rem;height:1.5rem;padding:0;
  background:var(--card-2);border:1px solid var(--line-2);border-radius:6px;
  color:var(--txt-2);cursor:pointer;font-size:.75rem;line-height:1;
}
.src-pv:hover,.src-add:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-2)}
.src-pv.on{background:var(--accent);color:#04222f;border-color:var(--accent)}
.src-add{font-size:1rem;font-weight:700}

/* แถบควบคุมการเล่น */
.transport{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.5rem .6rem;margin-bottom:.6rem;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.transport .tc{font-size:1.05rem;font-variant-numeric:tabular-nums}
.transport .tsep{width:1px;height:1.6rem;background:var(--line-2);margin:0 .25rem}
.transport .mini{display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--txt-2)}
.transport .mini select,.transport .mini input[type=range]{margin:0}
.transport .mini select{padding:.15rem .4rem;font-size:.8rem;width:auto}

/* ไทม์ไลน์ */
.tl{display:flex;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:#161616}
.tl-heads{flex:none;width:250px;background:var(--bg-2);border-right:1px solid var(--line-2)}
.tl-scroll{flex:1;min-width:0;overflow-x:auto;overflow-y:hidden}
.tl-canvas-wrap{position:relative}
.tl-canvas-wrap.drop{outline:2px dashed var(--accent);outline-offset:-3px}
.tl-canvas-wrap canvas{display:block;position:sticky;left:0}
.playhead{
  position:absolute;top:0;left:0;width:2px;
  background:var(--err);pointer-events:none;
  box-shadow:0 0 6px rgba(239,91,91,.8);
}

.trk-head{
  padding:.3rem .45rem;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;gap:.25rem;
  cursor:pointer;
}
.trk-head.on{background:var(--accent-soft)}
.trk-top{display:flex;align-items:center;gap:.25rem}
.trk-name{
  flex:1;min-width:0;padding:.1rem .3rem;font-size:.85rem;font-weight:600;
  background:transparent;border:1px solid transparent;border-radius:5px;color:var(--txt);
}
.trk-name:hover{border-color:var(--line-2)}
.trk-name:focus{background:var(--card);border-color:var(--accent-2);outline:none}
.trk-x{
  flex:none;width:1.15rem;height:1.15rem;padding:0;line-height:1;font-size:.7rem;
  background:transparent;border:none;color:var(--txt-3);cursor:pointer;border-radius:4px;
}
.trk-x:hover{background:rgba(239,91,91,.18);color:var(--err)}
.trk-row{display:flex;align-items:center;gap:.2rem}
.trk-role{
  flex:none;width:3.9rem;padding:.05rem .2rem;font-size:.72rem;
  background:var(--card);border:1px solid var(--line-2);border-radius:5px;color:var(--txt-2);
}
.trk-vol{flex:1;min-width:34px;margin:0;height:14px}
.trk-db{flex:none;width:2.1rem;font-size:.68rem;color:var(--txt-3);text-align:right;font-variant-numeric:tabular-nums}
.trk-b{
  flex:none;width:1.35rem;height:1.25rem;padding:0;line-height:1;font-size:.68rem;
  background:var(--card);border:1px solid var(--line-2);border-radius:5px;
  color:var(--txt-3);cursor:pointer;
}
.trk-b:hover{color:var(--txt)}
.trk-b.on{background:var(--accent);border-color:var(--accent);color:#06222e;font-weight:700}

/* แผงคลิปที่เลือก */
.insp{
  margin-top:.8rem;padding:.7rem .8rem;
  background:var(--card-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);
}
.insp-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
.insp-head .btn-row{margin-left:auto}
.insp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:.5rem}
.insp-grid input[type=number]{padding:.3rem .4rem}
.insp-sec{margin-top:.7rem;padding-top:.6rem;border-top:1px dashed var(--line-2)}
.fx-row{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;align-items:center}
.fx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(198px,1fr));gap:.45rem .9rem;align-items:center}
.fx-item{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--txt-2);min-width:0}
.fx-item b{color:var(--txt);font-size:.85rem;white-space:nowrap}
.fx-item input[type=range]{flex:1;min-width:64px}
.fx-item select{padding:.25rem .4rem;font-size:.8rem;width:auto}
.fx-item i{font-style:normal;color:var(--accent);min-width:46px;text-align:right;font-variant-numeric:tabular-nums}
.btn.on{border-color:var(--accent);color:var(--accent);background:#12333d}

/* ---------------------- จัดรายการเพลง (ใบคิว) ---------------------- */
.tl-time{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.86rem}
#timeBar{position:sticky;top:0;z-index:6;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.tl-time .tc{font-size:1.05rem;font-variant-numeric:tabular-nums}
.tl-time .tsep{width:1px;height:1.3rem;background:var(--line-2);margin:0 .3rem}
/* ---- แถบขั้นตอนการทำงาน ---- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:.5rem}
/* กล่องถามให้เลือก (1.52.0) — ทำทั้งหมด / เฉพาะที่ยังไม่มี */
.ask-ov{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(0,0,0,.6)}
.ask-box{width:100%;max-width:480px;background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:1rem 1.1rem;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.ask-box h3{margin:0 0 .35rem}
.ask-box p{margin:0}
.ask-list{display:grid;gap:.5rem;margin-top:.85rem}
.ask-opt{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left;height:auto;
  padding:.6rem .8rem;white-space:normal}
.ask-sub{font-size:.85em;font-weight:400;opacity:.8}
.step{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:.5rem;row-gap:.1rem;
  align-items:center;text-align:left;
  padding:.6rem .7rem .65rem;border:1px solid var(--line-2);border-radius:var(--radius-sm);
  background:var(--card-2);color:var(--txt);font-family:inherit;font-size:.9rem;cursor:pointer;
  transition:.15s;position:relative;min-width:0}
.step:hover{border-color:var(--accent);background:#1b2b31}
.step .step-n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--line-2);color:var(--txt-2);font-size:.78rem;font-weight:700;flex:none}
.step .step-t{font-weight:600;line-height:1.3;grid-column:2}
.step .step-d{font-size:.76rem;color:var(--txt-3);line-height:1.35;grid-column:2}
.step.done .step-n{background:var(--ok);color:#06281a}
.step.done{border-color:#2b6b52}
.step.now{border-color:var(--accent);background:#12333d;box-shadow:0 0 0 1px var(--accent) inset}
.step.now .step-n{background:var(--accent);color:#04222f}
.step.now .step-t{color:#fff}
.step.wait{opacity:.45}
.step.wait:hover{opacity:.8}
.step:disabled{opacity:.35;cursor:not-allowed}
.step.off{opacity:.35;pointer-events:none}
.step .step-p{grid-column:2;display:flex;flex-direction:column;gap:.2rem;margin-top:.3rem;
  font-size:.76rem;color:var(--txt-2);line-height:1.3}
.step .step-p b{color:var(--txt);font-variant-numeric:tabular-nums}
.step .step-left{color:var(--warn);font-weight:600}
.step .step-p.full{color:var(--ok);font-weight:600}
.step .step-bar{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.step .step-bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:2px;transition:width .3s}
.step .step-p.full .step-bar i{background:var(--ok)}
@media(max-width:560px){ .steps{grid-template-columns:1fr} }

.show-item{margin-bottom:.7rem}
.show-item .card-head .mono{font-size:.9rem}
.show-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem}
.show-facts{background:var(--card-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:.5rem .6rem}
.show-fact{display:flex;align-items:center;gap:.5rem;font-weight:400;font-size:.86rem;margin-top:.35rem}
.show-fact span{flex:1;min-width:0}
.show-line{display:flex;align-items:flex-start;gap:.45rem;margin-bottom:.4rem}
.show-line select{width:auto;min-width:110px;padding:.3rem .4rem;font-size:.82rem}
.show-line textarea{flex:1;min-width:0;margin:0}
.show-line-t{min-width:44px;text-align:right;padding-top:.5rem;font-size:.8rem}
.show-talk{border-left:3px solid var(--accent-2)}
.bg-row{display:flex;align-items:flex-end;gap:.6rem;flex-wrap:wrap;margin-top:.55rem;
  padding:.55rem .6rem;background:var(--card-2);border:1px solid var(--line-2);border-radius:var(--radius-sm)}
.bg-row .field{min-width:150px}
.bg-row input[type=range]{width:100%}
.bg-note{flex:1;min-width:180px;margin-top:0;align-self:center}
/* 1.49.0 — ท่อนเพลงเปิดซ้ำก่อนพูด · เชื่อมเพลงกับพระคำ */
.rep-row,.faith-row{margin-top:.55rem;padding:.45rem .6rem;border:1px dashed var(--line-2);border-radius:var(--radius-sm)}
.rep-row.on,.faith-row.on{border-style:solid;border-color:var(--accent-2)}
.rep-head,.faith-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;font-size:.86rem}
.rep-head .btn-row,.faith-head .btn-row{flex:none}
.rep-box{margin-top:.45rem}
.rep-wave-wrap{position:relative;height:84px;background:#101010;border:1px solid var(--line);border-radius:6px;cursor:crosshair;touch-action:none;user-select:none}
.rep-wave{display:block;width:100%;height:100%}
.rep-sel{position:absolute;top:0;bottom:0;background:rgba(240,180,41,.18);border-left:2px solid #f0b429;border-right:2px solid #f0b429;cursor:grab;display:none}
.rep-sel.short{background:rgba(248,113,113,.18);border-color:#f87171}
.rep-ph{position:absolute;top:0;bottom:0;width:2px;background:#fff;display:none;pointer-events:none}
.rep-msg{position:absolute;left:.6rem;top:.5rem;font-size:.78rem;color:var(--txt-3);pointer-events:none}
.rep-ctl{display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:flex-end;margin-top:.45rem}
.rep-ctl label{display:flex;flex-direction:column;font-size:.74rem;color:var(--txt-3);gap:.15rem;margin:0;font-weight:400}
.rep-ctl input[type=number]{width:96px;padding:.3rem .4rem;font-size:.85rem}
.faith-list{display:flex;flex-direction:column;gap:.35rem;margin-top:.45rem}
.faith-opt{display:flex;gap:.5rem;align-items:flex-start;padding:.45rem .55rem;border:1px solid var(--line);border-radius:6px;cursor:pointer;font-weight:400;font-size:.85rem;line-height:1.55;margin:0}
.faith-opt.on{border-color:var(--accent-2);background:rgba(49,183,233,.07)}
.faith-opt input{margin-top:.3rem;flex:none}
.faith-ref{color:var(--txt)}
.faith-sub{display:block;color:var(--txt-3);font-size:.8rem;margin-top:.1rem}
.faith-edit{margin-top:.55rem;padding-top:.5rem;border-top:1px solid var(--line)}
.faith-edit .field-row{margin-top:.35rem}
.faith-edit textarea{min-height:0}
.faith-ok{margin-top:.5rem;display:inline-flex;gap:.35rem;align-items:center;font-size:.86rem}
.bg-db{font-variant-numeric:tabular-nums}
.show-ctx{margin-top:.45rem;line-height:1.5}
.show-ctx b{color:var(--txt)}
.show-ctx-part{white-space:normal}
.head-start{opacity:.7}
.show-item .head-dur{color:var(--txt)}
.show-item .head-dur::before{content:'·';margin:0 .35rem;opacity:.45;font-weight:400}

/* สถานะงานในการ์ด — เห็นว่ากำลังทำงาน / เสร็จ / ไม่สำเร็จ ตรงการ์ดนั้นเลย */
.work-slot:empty{display:none}
.show-work{display:flex;align-items:center;gap:.5rem;margin-top:.55rem;padding:.45rem .6rem;
  border-radius:var(--radius-sm);font-size:.86rem;border:1px solid var(--line-2);background:var(--card-2)}
.show-work span{min-width:0}
.show-work.run{border-color:#1d6b85;background:#10303a;color:#8fd7ea}
.show-work.ok{border-color:#2c6b3c;background:#122e1c;color:#8fe0a6}
.show-work.err{border-color:#7a3030;background:#341515;color:#f0a3a3}
.show-work .work-bar{flex:1;min-width:60px;height:4px;border-radius:99px;background:#0c2530;overflow:hidden}
.show-work .work-bar i{display:block;width:40%;height:100%;border-radius:99px;background:#3fb6d8;
  animation:workslide 1.1s ease-in-out infinite}
@keyframes workslide{0%{margin-left:-40%}100%{margin-left:100%}}
.spin{flex:none;width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.22);
  border-top-color:#3fb6d8;animation:spin1 .7s linear infinite}
@keyframes spin1{to{transform:rotate(360deg)}}
.show-item.working{border-color:#1d6b85;box-shadow:0 0 0 1px #1d6b85 inset}
@media (prefers-reduced-motion:reduce){
  .spin,.show-work .work-bar i{animation:none}
  .show-work .work-bar i{width:100%}
}
.tag-ai{display:inline-block;font-size:.7rem;font-weight:600;padding:.1rem .4rem;border-radius:99px;
  background:#4a3a12;color:#f0c469;border:1px solid #6b5418;vertical-align:middle;margin-left:.3rem}

/* ---------------- ช่องพิมพ์ข้อความยาว: ใช้ฟอนต์ไทยมีหัว ----------------
   สคริปต์ที่ต้องอ่านตรวจทานคำต่อคำ อ่านด้วยฟอนต์มีหัวสบายตากว่าไม่มีหัว
   (ถ้าอยากให้เป็น Anuphan ทั้งหมด เปลี่ยน var(--font-read) เป็น var(--font-ui)) */
textarea{font-family:var(--font-read)}

/* ---------------- หน้าวิธีใช้งาน ---------------- */
.help-toc ol{margin:.4rem 0 0;padding-left:1.4rem;columns:2;column-gap:2rem}
@media(max-width:760px){.help-toc ol{columns:1}}
.help-toc li{margin:.15rem 0}
.help-sec{scroll-margin-top:70px}
.help-h{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;font-size:1.2rem;margin-bottom:.8rem}
.help-num{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:0 0 auto;
          background:var(--accent-soft);color:var(--accent);font-size:.9rem;font-weight:700}
.help-body{line-height:1.75}
.help-body ol,.help-body ul{padding-left:1.35rem;margin:.5rem 0}
.help-body li{margin:.3rem 0}
.help-body ul ul,.help-body ol ul{margin:.25rem 0}
.help-body h4{margin:1rem 0 .3rem;font-size:1rem;color:var(--accent)}
.help-body code{background:var(--card-2);border:1px solid var(--line);border-radius:5px;
                padding:.05rem .35rem;font-family:var(--font-mono);font-size:.85em}
.help-note,.help-tip,.help-warn{border-left:3px solid var(--line-2);border-radius:var(--radius-sm);
                padding:.6rem .85rem;margin:.85rem 0 0;font-size:.9rem;background:var(--card-2)}
.help-tip{border-left-color:var(--ok)}
.help-warn{border-left-color:var(--warn)}
.help-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1rem}
.help-fig{margin:0}
.help-fig img{width:100%;border-radius:var(--radius-sm);border:1px solid var(--line-2);display:block}
.help-fig figcaption{font-size:.82rem;color:var(--txt-3);margin-top:.35rem}
.help-fig-tools{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;margin-top:.45rem}
.help-upload{margin-top:1rem;border-top:1px dashed var(--line);padding-top:.7rem}
.help-upload summary{cursor:pointer;color:var(--accent);font-size:.9rem}
@media print{
  .topbar,.help-upload,.help-fig-tools,.btn{display:none!important}
  .card{break-inside:avoid;border:1px solid #ccc;box-shadow:none}
  body{background:#fff;color:#000}
  a{color:#000;text-decoration:none}
}

/* ---------- คนที่พูดในรายการ (หน้าใบคิว) ---------- */
/* .field-row บังคับทุกคอลัมน์กว้างขั้นต่ำ 150px ซึ่งแถวนี้มีห้าคอลัมน์จึงเบียดกัน
   ปลดขั้นต่ำออก แล้วให้ช่องเลือกเสียง (ข้อความยาวสุด) ได้ที่เหลือทั้งหมด
   ช่องเสียงยังมีขั้นต่ำของตัวเอง จอแคบจะตกบรรทัดใหม่ ไม่ถูกบีบจนอ่านไม่ออก */
.cast-row { align-items: flex-end; }
.cast-row > * { min-width: 0; }
.cast-row .cast-voice { min-width: 240px; }
.cast-key {
  display: flex; align-items: center; justify-content: center;
  height: 38px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-2); color: var(--txt-3); font-weight: 600;
}
.who-pick { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-check {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-2); cursor: pointer; font-size: .85rem; user-select: none;
}
.chip-check:hover { border-color: var(--accent); }
.chip-check.on { border-color: var(--accent); background: var(--accent-soft); }
.chip-check input { margin: 0; }

/* ---------- ปุ่มฟังตัวอย่างเสียงข้างช่องเลือกเสียง ---------- */
.voice-pick { display: flex; gap: .35rem; align-items: stretch; }
.voice-pick select { flex: 1 1 auto; min-width: 0; }
.btn-pv {
  flex: 0 0 auto; width: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem; line-height: 1;
}
.btn-pv.on { border-color: var(--accent); color: var(--accent); }
.btn-pv:disabled { opacity: .45; }
/* ปุ่ม ⬆ อัปไฟล์ข้างช่องเลือก Intro/Outro/BG (1.77.0) */
.btn-up { cursor: pointer; }
.btn-up.busy { opacity: .5; pointer-events: none; }
.up-note { margin-top: .3rem; }
.up-note.up-ok { color: var(--ok); }
.up-note.up-warn { color: var(--warn); }
.up-note.up-err { color: var(--err); }

/* ---------- คลังตัวละคร ---------- */
.ch-card { margin-bottom: 0; }
.ch-foot {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  padding-top: .6rem; border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--txt-2);
}
.ch-foot .pill {
  padding: .12rem .5rem; border: 1px solid var(--line-2); border-radius: 999px;
  font-size: .78rem; color: var(--txt-3);
}
.ch-foot .btn-pv { width: 34px; }

/* ---- ทำละคร: ฉากและบรรทัด ---------------------------------------- */
.okTxt { color: var(--ok); }

.sc-card { margin-bottom: .8rem; }
.sc-card .card-head { flex-wrap: wrap; gap: .5rem; }
.sc-card .card-head h3 { flex: none; }
.sc-title {
  flex: 1 1 180px; min-width: 140px; margin: 0;
  font-weight: 600; padding: .3rem .5rem;
}
.sc-len { font-size: .82rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-card .card-head .btn-row { margin-left: auto; }
.sc-amb { margin-top: .5rem; }
.sc-amb > summary { cursor: pointer; color: var(--accent); font-size: .88rem; }
.sc-amb > summary::marker { color: var(--txt-3); }
.sc-lines { margin-top: .7rem; }

.dl {
  border-left: 3px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--card-2); padding: .45rem .55rem; margin-bottom: .4rem;
}
.dl.dl-narration { border-left-color: #6a5acd; }
.dl.dl-sfx       { border-left-color: var(--warn); }
.dl.dl-pause     { border-left-color: var(--line-2); opacity: .85; }
.dl.has          { border-left-color: var(--ok); }

.dl-main { display: flex; align-items: flex-start; gap: .45rem; }
.dl-who-box { flex: 0 0 auto; }
.dl-who-box select { width: auto; min-width: 96px; max-width: 150px; padding: .3rem .4rem; font-size: .82rem; }
.dl-badge {
  display: inline-block; padding: .3rem .45rem; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--line-2);
  font-size: .78rem; color: var(--txt-3); white-space: nowrap;
}
.dl-main textarea { flex: 1 1 auto; min-width: 0; margin: 0;
  /* บทละครส่วนใหญ่สั้นกว่าบทรายการ กล่องสูง 90px ทำให้หน้าจอยาวเกินจำเป็น */
  min-height: 3.4rem; line-height: 1.6; }
.dl-pausebox { flex: 1 1 auto; font-size: .85rem; padding-top: .35rem; }
.dl-pausebox input { width: 5rem; display: inline-block; margin: 0 .25rem; padding: .25rem .4rem; }
.dl-side { flex: 0 0 auto; display: flex; gap: .2rem; align-items: flex-start; }
.dl-side .btn { padding: .3rem .45rem; }

.dl-bot {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  margin-top: .35rem; font-size: .8rem;
}
.dl-bot select { width: auto; max-width: 190px; padding: .22rem .4rem; font-size: .78rem; margin: 0; }
.dl-bot .dl-type { max-width: 110px; }
.dl-bot .dl-str  { max-width: 104px; min-width: 96px; }
.dl-bot .dl-emo  { min-width: 124px; }
.dl-bot .dl-timing { min-width: 142px; }
.dl-gaplab { display: inline-flex; align-items: center; gap: .25rem; color: var(--txt-3); line-height: 1; }
.dl-gaplab input { width: 4.4rem; padding: .22rem .35rem; font-size: .78rem; margin: 0; }
.dl-sec { font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; }

@media (max-width: 720px) {
  .dl-main { flex-wrap: wrap; }
  .dl-who-box select { max-width: none; }
  .dl-main textarea { flex: 1 1 100%; }
}

/* จอแคบ: ช่องของตัวละครที่ถูกจำกัดความกว้างไว้ในบรรทัด ต้องยืดเต็มแถวได้
   ไม่งั้นปุ่มล็อกกับปุ่มลบจะล้นขอบจอ */
@media (max-width: 720px) {
  .cast-row > .field { max-width: none !important; min-width: 150px; }
  /* ใบคิว: ช่องเสียงยาว (ชื่อ + คำอธิบาย) ให้เต็มบรรทัด · เส้นคั่นระหว่างคน (1.76.0) */
  #castRows .cast-row > .cast-voice { flex: 1 1 100%; }
  #castRows .cast-row + .cast-row { border-top: 1px solid var(--line); padding-top: .6rem; }
}

/* แถวตัวละครในหน้าบท: ป้ายชื่อช่องซ้ำทุกแถวอ่านแล้วรก โชว์เฉพาะแถวแรกพอ
   (จอแคบยังโชว์ทุกแถว เพราะแต่ละช่องไปอยู่คนละบรรทัดแล้ว) */
@media (min-width: 721px) {
  #dCast .cast-row:not(:first-child) > .field > label { display: none; }
}


/* ===================================================================
   ใบคิวรายการ — แทรกการ์ดตรงไหนก็ได้ และลากย้าย
   =================================================================== */

/* แถบแทรกระหว่างการ์ด — จาง ๆ ไว้ก่อน ไม่ให้แย่งสายตาจากตัวใบคิว */
.ins-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  opacity: 0;
  transition: opacity .12s ease;
}
.ins-bar .ins-line {
  flex: 1;
  height: 1px;
  background: var(--line);
}
.ins-bar .ins-btns { display: flex; gap: 6px; flex: none; }
.ins-bar .btn {
  padding: 2px 10px;
  font-size: .78rem;
  line-height: 1.6;
}
.ins-bar:hover,
.ins-bar:focus-within { opacity: 1; }

/* จอสัมผัสไม่มี hover — แสดงไว้ตลอดแต่จางกว่าปกติ */
@media (hover: none) {
  .ins-bar { opacity: .55; }
}

/* ที่จับสำหรับลาก */
.drag-grip {
  cursor: grab;
  user-select: none;
  color: var(--txt-3);
  font-size: 1.05rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  flex: none;
}
.drag-grip:hover { color: var(--txt); background: var(--card-2); }
.drag-grip:active { cursor: grabbing; }
.drag-grip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.show-item.dragging { opacity: .45; }

/* เส้นบอกว่าจะไปวางตรงไหน */
.show-item.drop-before { box-shadow: 0 -3px 0 0 var(--accent); }
.show-item.drop-after  { box-shadow: 0  3px 0 0 var(--accent); }

/* ไฮไลต์สั้น ๆ หลังย้ายหรือแทรก จะได้เห็นว่าใบไหน */
.show-item.just-moved { animation: justMoved .9s ease; }
@keyframes justMoved {
  0%   { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .show-item.just-moved { animation: none; }
  .ins-bar { transition: none; }
}



/* =====================================================================
   กล่องถามแบบมีหลายทางเลือก (ใบคิว — เพลงซ้ำในคลัง)
   ===================================================================== */
.ask-dlg{
  background:var(--card);color:var(--txt);border:1px solid var(--line-2);
  border-radius:12px;padding:1.1rem 1.2rem;max-width:520px;width:calc(100% - 2rem);
  box-shadow:0 18px 50px rgba(0,0,0,.55);font:inherit;
}
.ask-dlg::backdrop{background:rgba(0,0,0,.6)}
.ask-dlg h3{margin:0 0 .7rem}
.ask-dlg p{margin:.35rem 0}
.ask-dlg .ask-body{font-size:.95rem;line-height:1.65}
.ask-dlg select.ask-pick{width:100%;margin-top:.6rem}
.ask-dlg .ask-btns{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end;margin-top:1.1rem}

/* ───────── มิกซ์เพลง (1.45.0) ───────── */
.sm-drop{border:1.5px dashed var(--line-2);border-radius:12px;padding:1.1rem;text-align:center;color:var(--txt-2);background:var(--card-2)}
.sm-drop.over{border-color:var(--accent);background:var(--accent-soft);color:var(--txt)}
.sm-drop-sm{padding:.8rem;display:flex;gap:.6rem;align-items:center;justify-content:center;flex-wrap:wrap}
.sm-transport{position:sticky;top:60px;z-index:5;padding-top:.7rem;padding-bottom:.7rem}
.sm-time{font-variant-numeric:tabular-nums;font-family:var(--font-mono,monospace);min-width:7.5rem}
.sm-ab{display:inline-flex;gap:.25rem}
.sm-meter{display:inline-flex;flex-direction:column;gap:3px;width:140px}
.sm-meter i{display:block;height:5px;width:0;border-radius:3px;background:linear-gradient(90deg,#3ecf8e 0,#3ecf8e 70%,#f0b429 88%,#ef5b5b 100%);background-size:140px 100%;transition:width .05s}
.sm-meter i.hot{box-shadow:0 0 0 1px #ef5b5b}
.sm-tracks{display:flex;flex-direction:column;gap:.45rem}
.sm-track{border:1px solid var(--line);border-radius:10px;background:var(--card-2);padding:.45rem .55rem}
.sm-track.sm-off{opacity:.55}
.sm-track.sm-missing{border-style:dashed}
.sm-head{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.sm-color{width:6px;align-self:stretch;min-height:26px;border-radius:3px}
.sm-name{width:170px;flex:0 1 170px;padding:.3rem .5rem;font-size:.86rem}
.sm-tag{width:auto;max-width:190px;padding:.3rem .4rem;font-size:.82rem}
.sm-ch{font-size:.68rem;font-family:var(--font-mono,monospace)}
.sm-head .btn-sm{padding:.25rem .5rem}
.sm-m.on{border-color:#ef5b5b;color:#ff9a9a;background:#2a1717}
.sm-s.on{border-color:#f0b429;color:#f4d58d;background:#2a2412}
.sm-ctl{display:inline-flex;align-items:center;gap:.35rem}
.sm-ctl input[type=range]{width:130px}
.sm-ctl-pan input[type=range]{width:80px}
.sm-ctl b{font-size:.75rem;font-weight:600;min-width:3.6rem;font-variant-numeric:tabular-nums;color:var(--txt-2)}
.sm-ctl-pan b{min-width:2.2rem}
.sm-wave-wrap{position:relative;margin-top:.35rem;height:40px;border-radius:6px;background:rgba(0,0,0,.25);overflow:hidden;cursor:pointer}
.sm-wave{display:block;width:100%;height:40px}
.sm-ph{position:absolute;top:0;bottom:0;left:0;width:1px;background:#fff;opacity:.8;pointer-events:none}
.sm-wave-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--txt-3);pointer-events:none;text-align:center;padding:0 .5rem}
.sm-strip{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;margin-top:.55rem;padding-top:.55rem;border-top:1px solid var(--line)}
.sm-grp{display:flex;flex-wrap:wrap;gap:.3rem .6rem;align-items:flex-end}
.sm-grp h4{width:100%;margin:0 0 .1rem;font-size:.78rem;color:var(--txt-2);font-weight:600}
.sm-grp label{display:flex;flex-direction:column;font-size:.72rem;color:var(--txt-3);gap:.15rem}
.sm-grp label.check{flex-direction:row;font-size:.78rem;color:var(--txt-2)}
.sm-grp input[type=number]{width:78px;padding:.25rem .35rem;font-size:.82rem}
.sm-grp input[type=range]{width:110px}
.sm-grp label b{font-size:.72rem;color:var(--txt-2);font-weight:600}
.sm-grp-act{align-items:center}
.sm-grp-act .hint{width:100%;margin:0}
/* 1.48.0 — EQ ละเอียด · de-esser · จูน */
.sm-grp.sm-grp-eq{display:block;width:100%}
.sm-grp-eq h4{margin-bottom:.3rem}
.sm-eqc-wrap{position:relative;width:100%}
.sm-eqc{display:block;width:100%;height:160px;background:var(--bg-2,#0d1117);border:1px solid var(--line);border-radius:6px}
.sm-eqc-leg{display:flex;flex-wrap:wrap;gap:.2rem .8rem;font-size:.7rem;color:var(--txt-3);margin-top:.2rem}
.sm-eqc-leg i{display:inline-block;width:12px;height:3px;margin-right:.3rem;vertical-align:middle;border-radius:2px}
.sm-eqc-leg .c1{background:rgba(125,133,144,.6);height:8px}.sm-eqc-leg .c2{background:#3ecf8e}.sm-eqc-leg .c3{background:#f0b429}
.sm-bands{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:.35rem .5rem;margin-top:.4rem;align-items:start}
.sm-band{display:flex;align-items:center;gap:.2rem;font-size:.72rem;color:var(--txt-3);background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:.2rem .4rem}
.sm-band b{width:1rem;color:var(--txt-2);flex:none}
.sm-band i{font-style:normal;margin-right:.2rem;flex:none}
.sm-grp .sm-band input[type=number]{width:auto;flex:1 1 0;min-width:0;margin:0;padding:.2rem .3rem}
.sm-band input[data-p=f]{flex-grow:1.5!important}
.sm-eq-act{display:flex;flex-wrap:wrap;gap:.35rem .5rem;align-items:flex-end;margin-top:.4rem}
.sm-eqn{margin:.25rem 0 0}
.sm-ds-gr{font-size:.74rem;color:#f0b429;min-width:6.5rem;align-self:center}
.sm-grp-tune{max-width:640px}
.sm-grp-tune .hint{width:100%;margin:.1rem 0 0}
.sm-grp select{padding:.25rem .35rem;font-size:.8rem}
@media (max-width:720px){ .sm-name{flex:1 1 100%;width:auto} }
.sm-grp label.btn{flex-direction:row;font-size:.82rem;color:var(--txt);gap:.3rem}
/* ปรับตามต้นแบบ (1.46.0) */
.sm-match h4{font-size:.9rem;color:var(--txt)}
.sm-chart{display:block;width:100%;height:150px;margin-top:.5rem;border-radius:8px;background:rgba(0,0,0,.25)}
.sm-sg{align-items:flex-start;margin-top:.45rem;font-weight:400;font-size:.86rem;line-height:1.45}
.sm-sg input{margin-top:.2rem}
.sm-sg-sum{margin:.6rem 0 .2rem;font-size:.88rem;color:var(--txt-2)}
/* เลื่อนตำแหน่ง · ซูมเส้นเวลา (1.47.0) */
.sm-zoom{margin-bottom:.3rem}
.sm-zoom input[type=range]{width:220px}
.sm-ruler{position:relative;height:18px;margin:0 calc(.55rem + 1px);cursor:pointer}
.sm-ruler canvas{display:block;width:100%;height:18px}
.sm-ph-r{position:absolute;top:0;bottom:0;left:0;width:1px;background:#fff;opacity:.8;pointer-events:none}
canvas.sm-wave{cursor:grab;touch-action:pan-y}
canvas.sm-wave.dragging{cursor:grabbing}
.sm-off-t{font-size:.72rem;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
.sm-nudge{display:inline-flex;gap:.2rem;flex-wrap:wrap}
.sm-nudge .btn-sm{padding:.2rem .4rem;font-size:.74rem}
.sm-grp-pos select{width:auto;max-width:180px;padding:.25rem .35rem;font-size:.8rem}
.sm-grp-pos .sm-al-note{width:100%;margin:0}

/* 1.54.0 — เพลงตามคำขอ (การ์ดเพลง) · ฝากประชาสัมพันธ์ (กล่อง 📢 + การ์ดช่วงพูด) */
.req-row,.pr-row{margin-top:.55rem;padding:.45rem .6rem;border:1px dashed var(--line-2);border-radius:var(--radius-sm)}
.req-row.on,.pr-row.on{border-style:solid;border-color:#f0b429}
.pr-row.pr-empty{border:0;padding:0;margin-top:.4rem}
.req-head,.pr-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.86rem}
.pr-head{margin-bottom:.4rem}
.req-toggle{margin:0;display:inline-flex;gap:.35rem;align-items:center;font-weight:400}
.req-person{margin-top:.5rem;padding-top:.45rem;border-top:1px solid var(--line)}
.req-head+.req-person{border-top:0;padding-top:0}
.req-person textarea,.pr-item textarea{min-height:0}
.field-row>.req-del{flex:0 0 auto;min-width:0;max-width:52px}
.req-warn:empty{display:none}
.pr-notes{margin-top:.4rem;line-height:1.6}
.chip-check.expired{opacity:.6}
.pr-item{padding:.6rem 0;border-top:1px solid var(--line)}
.pr-item:first-child{border-top:0;padding-top:0}
.pr-status{margin-top:.3rem}
/* ช่องวันที่ให้หน้าตาเหมือนช่องอื่น (เดิมไม่ได้กำหนด จึงเป็นกล่องสีขาวของเบราว์เซอร์บนพื้นมืด) */
input[type=date]{width:100%;background:#161616;color:var(--txt);border:1px solid var(--line-2);
  border-radius:var(--radius-sm);padding:.55rem .7rem;font-family:inherit;font-size:.93rem;color-scheme:dark}

/* 1.55.0 — ปกและแท็กไฟล์ในหน้าประกอบรายการ */
.tag-box{margin-top:1rem;padding:.8rem .9rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:#141414}
.tag-grid{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.tag-cover{flex:0 0 150px}
.tag-cover-pv{width:150px;height:150px;border:1px dashed var(--line-2);border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;overflow:hidden;background:#101010;color:var(--txt-3);font-size:.85rem}
.tag-cover-pv img{width:100%;height:100%;object-fit:cover;display:block}
.tag-cover-name{margin-top:.35rem;word-break:break-word}
.tag-fields{flex:1;min-width:260px;display:flex;flex-direction:column;gap:.6rem}
.tag-file{display:flex;align-items:center;gap:.4rem}
.tag-file input{flex:1}
.cover-lib summary{cursor:pointer;font-size:.88rem;color:var(--txt-2)}
.cover-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.5rem;margin-top:.6rem;
  max-height:280px;overflow:auto;padding:2px}
.cover-tile{position:relative;aspect-ratio:1/1;border:2px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;
  background:#101010;display:flex;align-items:center;justify-content:center;color:var(--txt-3);font-size:.8rem}
.cover-tile img{width:100%;height:100%;object-fit:cover;display:block}
.cover-tile:hover,.cover-tile:focus-visible{border-color:var(--accent);outline:none}
.cover-tile.on{border-color:#f0b429;box-shadow:0 0 0 2px rgba(240,180,41,.35)}
.cover-tile .cover-t{position:absolute;left:0;right:0;bottom:0;padding:.15rem .3rem;font-size:.68rem;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.8));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cover-del{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.65);
  color:#fff;font-size:.72rem;line-height:22px;padding:0;cursor:pointer;opacity:0;transition:.15s}
.cover-tile:hover .cover-del,.cover-del:focus{opacity:1}
@media (hover:none){.cover-del{opacity:1}}
label.btn.disabled{opacity:.5;pointer-events:none}
/* 1.55.1 — ติดแท็กให้ไฟล์ที่ Mix บันทึกไว้แล้ว */
.tag-old{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-top:.8rem;
  padding:.55rem .7rem;border:1px dashed #f0b429;border-radius:var(--radius-sm);font-size:.86rem;color:var(--txt-2)}
.tag-old.hidden{display:none}

/* ---------- คลังเสียง: หมวดใหญ่ · โฟลเดอร์แนวเพลง · เลือกหลายไฟล์ (1.57.0) ---------- */
.lib-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 1rem}
.lib-tab{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border-radius:99px;
  border:1px solid var(--line-2);background:var(--card-2);color:var(--txt-2);font:inherit;font-weight:600;cursor:pointer}
.lib-tab:hover{border-color:var(--accent);color:var(--txt)}
.lib-tab.on{background:var(--accent-soft);border-color:var(--accent);color:#fff}
.lib-tab .lib-n{font-size:.75rem;font-weight:700;color:var(--txt-3);font-variant-numeric:tabular-nums}
.lib-tab.on .lib-n{color:var(--accent)}
.lib-tab .lib-n:empty{display:none}
.lib-genre{border:1px solid var(--line-2);border-radius:var(--radius-sm);margin-bottom:.5rem;background:var(--card-2)}
.lib-genre>summary{cursor:pointer;padding:.55rem .8rem;font-weight:600;list-style:none}
.lib-genre>summary::-webkit-details-marker{display:none}
.lib-genre[open]>summary{border-bottom:1px solid var(--line-2)}
.lib-genre-body{padding:.6rem .6rem .1rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 .6rem}
.asset .as-head{display:flex;align-items:flex-start;gap:.5rem}
.asset .as-sel{width:auto;margin:.2rem 0 0;flex:none}
.asset.is-sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.chip-series{cursor:default}
.tag-dim{opacity:.7}
.chip-list{display:flex;flex-wrap:wrap;gap:.35rem;margin:.4rem 0}
.lib-sel{position:sticky;bottom:.8rem;z-index:50;display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  margin:1rem 0;padding:.6rem .9rem;border:1px solid var(--accent);border-radius:var(--radius);
  background:#10262e;box-shadow:0 8px 28px rgba(0,0,0,.45)}
.lib-sel select{width:auto;max-width:260px}
.lib-sel .tsep{width:1px;height:1.4rem;background:var(--line-2);margin:0 .2rem}
.lib-list-wide{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 .6rem}
.lib-list-wide>.empty{grid-column:1/-1}

/* ---------- จำงานที่ค้างไว้ในหน้า (1.58.0) ---------- */
.draft-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;
  margin:-.2rem 0 .9rem;padding:.4rem .5rem .4rem .75rem;border:1px dashed var(--line-2);
  border-radius:var(--radius-sm);font-size:.83rem;color:var(--txt-3)}
.draft-bar.restored{border-style:solid;border-color:var(--accent-2);background:var(--accent-soft);color:#a9e2f7}

/* ---------- เรื่องเล่า · ข้อคิด (1.61.0) ---------- */
.pr-row.story-row{border-color:var(--line-2)}
.pr-row.story-row.on{border-style:solid;border-color:#8b7cf6}
.story-row .pr-head{margin-bottom:0}
#stBody{min-height:120px}

/* ---------------- 1.64.1 ข้อความ "กำลัง…" เคลื่อนไหว ---------------- */
@keyframes busyPulse{0%,100%{opacity:1}50%{opacity:.45}}
.is-busy{color:#8fd7ea !important}
#aiState.is-busy,#saveState.is-busy,#castHint.is-busy,.show-work.run > span.is-busy,
#batchState .busy-t,#deskState.is-busy{animation:busyPulse 1.3s ease-in-out infinite}
#aiState.is-busy,#batchState.is-busy,#deskState.is-busy{display:inline-flex;align-items:center;gap:.45rem;font-weight:600}
.is-busy:not(.has-spin)::before{content:"";display:inline-block;flex:none;width:.85em;height:.85em;margin-right:.45em;
  vertical-align:-.12em;border-radius:50%;border:2px solid rgba(255,255,255,.22);border-top-color:#3fb6d8;
  animation:spin1 .7s linear infinite}
#aiState.is-busy::before{margin-right:0}
.alert.is-busy{color:#a9e2f7 !important}
#stepHint.busy-hide{display:none}
@media (prefers-reduced-motion:reduce){
  .is-busy,#batchState .busy-t,.is-busy::before{animation:none !important}
}


/* ---------- โครงรายการแบบย่อ ใต้แถบขั้นตอน (1.75.0) ---------- */
.flow-box{margin-top:.9rem;padding-top:.8rem;border-top:1px dashed var(--line)}
.flow-head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.45rem}
.flow-legend{font-size:.8rem;color:var(--txt-3)}
.flow-legend b{color:var(--txt-2);font-weight:600}
.flow-scroll{overflow-x:auto;padding:4px 2px 10px}
.flow-strip{display:flex;align-items:stretch;gap:0;min-width:max-content}
.fl-chip{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:64px;height:58px;
  padding:.3rem .5rem;border-radius:9px;border:1px solid var(--line-2);background:var(--card-2);cursor:pointer;
  font-size:.78rem;line-height:1.2;color:var(--txt);user-select:none;box-sizing:border-box;overflow:hidden}
.fl-chip:hover{border-color:var(--accent)}
.fl-chip .fl-t{font-size:.68rem;color:var(--txt-3);font-family:var(--font-mono);white-space:nowrap;overflow:hidden}
.fl-chip .fl-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.fl-chip .fl-s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.7rem;color:var(--txt-2)}
.fl-chip.song{background:rgba(49,183,233,.10);border-color:rgba(49,183,233,.35)}
.fl-chip.talk{background:rgba(62,207,142,.10);border-color:rgba(62,207,142,.35)}
.fl-chip.spot{background:rgba(180,120,255,.12);border-color:rgba(180,120,255,.40)}
/* 1.80.0 Title (หัว-ท้าย) · Jingle (ของรายการ) · Spot (โฆษณา/เทศกาล) คนละสี */
.fl-chip.spot.cat-title{background:rgba(245,166,35,.13);border-color:rgba(245,166,35,.50)}
.fl-chip.spot.cat-jingle{background:rgba(180,120,255,.12);border-color:rgba(180,120,255,.40)}
.fl-chip.spot.cat-spot{background:rgba(240,84,120,.13);border-color:rgba(240,84,120,.50)}
.show-item.cat-title{border-left:3px solid rgba(245,166,35,.75)}
.show-item.cat-jingle{border-left:3px solid rgba(180,120,255,.70)}
.show-item.cat-spot{border-left:3px solid rgba(240,84,120,.75)}
/* 1.81.0 คลัง: จัดหมวดให้ */
.tidy-list{max-height:55vh;overflow:auto;display:flex;flex-direction:column;gap:.45rem;margin-top:.4rem}
.tidy-row{align-items:flex-start;line-height:1.45}
.fl-chip.empty{border-style:dashed;opacity:.7}
.fl-chip.warn{box-shadow:inset 0 -3px 0 var(--warn)}
.fl-chip.cur{outline:2px solid var(--accent);outline-offset:1px}
.fl-chip.drag{opacity:.35}
.fl-chip.flash{animation:flFlash .9s ease}
/* ปุ่มลบบนกล่อง (1.75.3) — โผล่ตอนชี้/โฟกัส · จอสัมผัสเห็นตลอด */
.fl-chip .fl-x{position:absolute;top:3px;right:3px;width:18px;height:18px;padding:0;border:0;border-radius:5px;
  display:flex;align-items:center;justify-content:center;font-size:.95rem;line-height:1;cursor:pointer;
  background:var(--card);color:var(--txt-3);opacity:0;transition:opacity .12s}
.fl-chip:hover .fl-x,.fl-chip:focus .fl-x,.fl-chip:focus-within .fl-x{opacity:.9}
.fl-chip .fl-x:hover{opacity:1;background:var(--danger,#e5484d);color:#fff}
@media (hover:none){.fl-chip .fl-x{opacity:.75}}
.fl-chip.drag .fl-x{display:none}
@keyframes flFlash{0%{background:var(--accent-soft);border-color:var(--accent)}100%{}}
.fl-gap{position:relative;flex:0 0 14px;display:flex;align-items:center;justify-content:center}
.fl-gap>button{width:14px;height:22px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--txt-3);
  font-size:.85rem;line-height:1;cursor:pointer;opacity:.35}
.fl-gap:hover>button,.fl-gap>button:focus,.fl-gap.open>button{opacity:1;background:var(--card-2);color:var(--accent)}
.fl-gap.drop::after{content:"";position:absolute;top:2px;bottom:2px;left:5px;width:4px;border-radius:2px;background:var(--accent)}
/* เมนูแทรก — ลอยเหนือหน้า (position:fixed) ไม่ถูกแถบเลื่อนแนวนอนตัดขอบ (1.75.1) */
.fl-menu{position:fixed;z-index:200;display:flex;flex-direction:column;gap:.3rem;padding:.4rem;min-width:150px;
  border:1px solid var(--line-2);border-radius:10px;background:var(--card);box-shadow:var(--shadow)}
.fl-menu .fl-menu-h{font-size:.75rem;color:var(--txt-3);padding:.1rem .3rem .2rem}
.fl-menu button{justify-content:flex-start;text-align:left;width:100%}
.flow-notes{font-size:.82rem;color:var(--txt-2);display:flex;flex-direction:column;gap:.2rem}
.flow-notes .fn-warn{color:var(--warn)}
/* การ์ดรายละเอียดตอนชี้เมาส์บนแถวโครงรายการ (1.75.2) */
.fl-tip{position:fixed;z-index:210;width:340px;max-width:calc(100vw - 16px);padding:.65rem .8rem;border-radius:10px;
  border:1px solid var(--line-2);background:var(--card);box-shadow:var(--shadow);font-size:.84rem;line-height:1.45;pointer-events:none}
.fl-tip .ft-top{font-size:.72rem;color:var(--txt-3);font-family:var(--font-mono);margin-bottom:.2rem}
.fl-tip .ft-h{font-weight:700;font-size:.98rem;margin-bottom:.35rem;color:var(--txt)}
.fl-tip .ft-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:.4rem;padding:.08rem 0}
.fl-tip .ft-row span{color:var(--txt-3)}
.fl-tip .ft-row b{font-weight:500;color:var(--txt);overflow-wrap:anywhere}
.fl-tip .ft-p{margin-top:.4rem;padding-top:.4rem;border-top:1px dashed var(--line);color:var(--txt-2)}
.fl-tip .ft-p>span{display:block;font-size:.72rem;color:var(--txt-3);margin-bottom:.15rem}
.fl-tip .ft-line{margin:.1rem 0}
.fl-tip .ft-line b{color:var(--txt)}
.fl-tip .ft-warn{color:var(--warn);font-weight:500}
.fl-tip .ft-dim{color:var(--txt-3)}
.fl-tip .ft-foot{margin-top:.45rem;font-size:.7rem;color:var(--txt-3)}

/* ---------------- ส่งเข้า Google Drive (1.78.0) ---------------- */
.drive-box{margin-top:.6rem;font-size:.86rem}
.drive-list{list-style:none;margin:.35rem 0 0;padding:0}
.drive-list li{padding:.28rem 0;border-top:1px dashed var(--line);color:var(--txt-2);overflow-wrap:anywhere}
.drive-list li.err{color:var(--err)}
.drive-targets td{vertical-align:top}
.drive-targets td .hint{margin:.15rem 0 0}
.series-pick + input{margin-top:.4rem}   /* ชุดรายการ: dropdown + ช่องพิมพ์เอง (1.79.0) */
/* 1.84.0 เสียงประกอบในช่วงพูด */
.sfx-box .chips{margin-top:.35rem}
.sfx-sum{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin:.35rem 0}
.sfx-tag{display:inline-block;padding:.1rem .5rem;border-radius:999px;background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.45);font-size:.8rem}
.sfx-tag.miss{border-style:dashed;opacity:.8}
.sfx-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.5rem 0;border-top:1px dashed var(--line)}
.sfx-row .sfx-name{min-width:150px}
.sfx-row select{max-width:340px;width:auto}
.sfx-row audio{height:32px;max-width:260px}
.sfx-note{font-size:.8rem}
.sfx-voice-note{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.35rem}

/* 1.86.0 โทนเสียงพูด (EQ) — ใบคิว + ประกอบรายการ */
.veq-knobs{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:flex-end}
.veq-k{display:block;font-size:.8rem;font-weight:500;color:var(--txt-2);flex:1;min-width:150px}
.veq-k input[type=range]{display:block;width:100%;margin-top:.3rem}
.veq-k.veq-ds{display:flex;flex:0 0 auto;min-width:0;align-items:center;gap:.35rem;padding-bottom:.25rem}
.eq-pop .veq-k{margin-bottom:.5rem}
.veq-off .veq-k input[type=range]{opacity:.45}
.eq-pop{position:fixed;z-index:80;width:320px;max-width:calc(100vw - 24px);background:var(--card-2);border:1px solid var(--line-2);
  border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:.8rem .9rem;font-size:.85rem}
.eq-pop h4{margin:0 0 .5rem;font-size:.92rem}
.eq-pop select{width:100%;margin-bottom:.6rem}
.eq-pop .veq-k{min-width:100%}
.eq-pop .eq-foot{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.6rem}

/* 1.86.1 สถานะ จัดรอยต่อ / บาลานซ์เสียง (หน้าประกอบรายการ) */
.desk-chip{font-size:.78rem;color:var(--txt-3);white-space:nowrap}
.desk-chip:empty{display:none}
.desk-chip.ok{color:var(--ok)}
.desk-chip.warn{color:var(--warn)}

/* 1.86.2 ภาพรวมทั้งรายการ (หน้าประกอบรายการ) */
.tl-nav{display:flex;border:1px solid var(--line);border-radius:var(--radius-sm);background:#141414;margin-bottom:.4rem;overflow:hidden}
.tl-nav-lab{flex:none;width:250px;padding:.3rem .6rem;font-size:.75rem;line-height:1.25;color:var(--txt-2);border-right:1px solid var(--line-2);background:var(--bg-2)}
.tl-nav canvas{flex:1;min-width:0;height:40px;display:block;cursor:pointer;touch-action:none}