/* ============================================================
   ธีมมิดเซนจูรี่ของ Klong Pro — สไตล์

   ทุกกฎขึ้นต้นด้วย html[data-kmode] ซึ่ง klong-theme.js เป็นคนตั้ง
   ถ้าสคริปต์ธีมโหลดไม่ขึ้น โปรแกรมจะกลับไปหน้าตาเดิมทั้งหมด ไม่พัง

   ไม่แก้กฎเดิมของโปรแกรม แค่เขียนทับจากไฟล์นี้ (โหลดหลัง CSS ของโปรแกรม)
   ตัวแปรสีเดิมของโปรแกรม (--bg --panel --ink --ok ...) ถูกตั้งค่าใหม่
   ตามโหมด ส่วนไหนของโปรแกรมที่ใช้ตัวแปรอยู่แล้วจึงเปลี่ยนตามเอง
   ============================================================ */

html[data-kmode="day"]{
  --bg:#EFE6D2; --panel:#F4ECDC; --panel2:#E7DBC1; --line:#D2C1A0; --line2:#BBA67F;
  --ink:#33241A; --dim:#6B5747; --dimmer:#7A6452; --ok:#1F7A74; --warn:#B3261E; --soft:#A8741A;
  --k-wood-a:#6A4529; --k-wood-b:#4E321F; --k-wood-ink:#F3E8D2; --k-wood-dim:#D4BF9E;
  --k-brass:#C59A4E; --k-brass-hi:#E3C27F;
  --k-tray:rgba(0,0,0,.26); --k-tray-panel:rgba(91,58,36,.13);
  --k-sel-top:#2A8C85; --k-sel-edge:#155955; --k-sel-ink:#F6EEDD;
  --k-key-top:#F6EEDC; --k-key-bot:#E6D8BB; --k-key-border:#CDB993; --k-key-edge:#A88F66;
  --k-key-ink:#33241A; --k-key-hi:rgba(255,255,255,.5); --k-key-hover:#FBF5E8;
  --k-on-top:#D8C8A8; --k-on-bot:#E4D6BA; --k-on-ink:#155955; --k-lamp:#1F7A74;
  --k-lcd-bg:#2E1D11; --k-lcd-ink:#F2C14E; --k-vu-a:#F4E7C8; --k-vu-b:#E3CFA4; --k-vu-ink:#3B2A20;
  color-scheme:light;
}
html[data-kmode="night"]{
  --bg:#1E1611; --panel:#261C15; --panel2:#2E2219; --line:#3E2F24; --line2:#57432F;
  --ink:#EADBC0; --dim:#AE9880; --dimmer:#9A8470; --ok:#4FB3A8; --warn:#E0614F; --soft:#E2B54A;
  --k-wood-a:#3E2919; --k-wood-b:#2C1C11; --k-wood-ink:#EADBC0; --k-wood-dim:#B9A283;
  --k-brass:#A9813F; --k-brass-hi:#C9A15F;
  --k-tray:rgba(0,0,0,.36); --k-tray-panel:rgba(0,0,0,.28);
  --k-sel-top:#6CC3B8; --k-sel-edge:#2E7F77; --k-sel-ink:#10201E;
  --k-key-top:#3E3026; --k-key-bot:#30241C; --k-key-border:#4D3B2E; --k-key-edge:#140E0A;
  --k-key-ink:#EADBC0; --k-key-hi:rgba(255,255,255,.07); --k-key-hover:#463629;
  --k-on-top:#261D17; --k-on-bot:#2F241C; --k-on-ink:#6CC7BB; --k-lamp:#4FB3A8;
  --k-lcd-bg:#140D08; --k-lcd-ink:#F2C14E; --k-vu-a:#DCC59A; --k-vu-b:#C7AE82; --k-vu-ink:#2C1C11;
  color-scheme:dark;
}
html[data-kmode]{
  --k-depth:4px; --k-r:12px;
  --k-display:"Prompt", "IBM Plex Sans Thai", system-ui, -apple-system, sans-serif;
  --k-wood:
    repeating-linear-gradient(91deg, rgba(0,0,0,.07) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(89deg, rgba(255,255,255,.035) 0 1px, transparent 1px 17px),
    linear-gradient(180deg, var(--k-wood-a), var(--k-wood-b));
}

/* ---------- ตัวอักษร: Prompt สำหรับชื่อและตัวเลขใหญ่ ที่เหลือคงเดิม ---------- */
html[data-kmode] h1,
html[data-kmode] #topbar .tbL b{font-family:var(--k-display); font-weight:600; letter-spacing:.005em}

/* ---------- แถบบนและแถบล่างเป็นไม้วอลนัท ขอบทองเหลือง ---------- */
html[data-kmode] body.shell #topbar{
  background:var(--k-wood); color:var(--k-wood-ink);
  border-bottom:2px solid var(--k-brass);
  box-shadow:inset 0 -3px 0 -2px var(--k-brass-hi), 0 3px 10px rgba(30,15,5,.22)}
html[data-kmode] #topbar .tbL b{font-size:17px; color:var(--k-wood-ink)}
html[data-kmode] #topbar .tbL span,
html[data-kmode] #topbar .status{color:var(--k-wood-dim)}
html[data-kmode] #topbar .status.err{color:#FFB4A8}

html[data-kmode] #tp{
  background:var(--k-wood); color:var(--k-wood-ink); -webkit-backdrop-filter:none; backdrop-filter:none;
  border-top:2px solid var(--k-brass);
  box-shadow:inset 0 3px 0 -2px var(--k-brass-hi), 0 -3px 10px rgba(30,15,5,.2)}
html[data-kmode] #tp .grpname,
html[data-kmode] #tp .mini,
html[data-kmode] #tp label.chk,
html[data-kmode] #tp #barHint{color:var(--k-wood-dim)}
html[data-kmode] #tp input[type=range]{accent-color:var(--k-brass)}
html[data-kmode] input[type=checkbox]{accent-color:var(--ok)}
html[data-kmode] #rowLive{border-top-color:rgba(0,0,0,.25)}

/* ---------- ปุ่ม: ยกขึ้น ยุบตามนิ้ว ค้างลงเมื่อเลือก ---------- */
html[data-kmode] .btn,
html[data-kmode] .seg button,
html[data-kmode] .valwrap button,
html[data-kmode] #genres button,
html[data-kmode] #tpToggle{
  position:relative; border:1px solid var(--k-key-border); border-radius:var(--k-r);
  background:linear-gradient(var(--k-key-top), var(--k-key-bot)); color:var(--k-key-ink);
  box-shadow:0 var(--k-depth) 0 var(--k-key-edge), 0 calc(var(--k-depth) + 3px) 6px rgba(0,0,0,.22), inset 0 1px 0 var(--k-key-hi);
  transform:translateY(0); transition:transform 70ms ease-out, box-shadow 70ms ease-out;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation}
html[data-kmode] .btn:hover,
html[data-kmode] .seg button:hover,
html[data-kmode] .valwrap button:hover{background:linear-gradient(var(--k-key-hover), var(--k-key-bot))}
html[data-kmode] .btn.primary{
  background:linear-gradient(var(--k-sel-top), var(--ok)); border-color:var(--k-sel-edge); color:var(--k-sel-ink); font-weight:600;
  box-shadow:0 var(--k-depth) 0 var(--k-sel-edge), 0 calc(var(--k-depth) + 3px) 6px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25)}
html[data-kmode] .btn.primary:hover{background:linear-gradient(var(--k-sel-top), var(--k-sel-top))}

/* เลือกอยู่ = ค้างลง มีไฟเขียวดวงเล็ก — บอกสถานะด้วยรูปทรง ไม่ได้พึ่งสีอย่างเดียว */
html[data-kmode] .seg button[aria-pressed="true"],
html[data-kmode] .valwrap button[aria-pressed="true"],
html[data-kmode] #genres button[aria-pressed="true"],
html[data-kmode] .btn[aria-pressed="true"]{
  transform:translateY(calc(var(--k-depth) - 1px));
  background:linear-gradient(var(--k-on-top), var(--k-on-bot)); color:var(--k-on-ink);
  border-color:var(--k-key-border); font-weight:600;
  box-shadow:0 1px 0 var(--k-key-edge), inset 0 2px 5px rgba(0,0,0,.3)}
html[data-kmode] .seg button[aria-pressed="true"]::before,
html[data-kmode] .valwrap button[aria-pressed="true"]::before,
html[data-kmode] #genres button[aria-pressed="true"]::before,
html[data-kmode] .btn[aria-pressed="true"]::before{
  content:""; position:absolute; left:50%; top:4px; width:14px; height:3px; margin-left:-7px;
  border-radius:2px; background:var(--k-lamp); box-shadow:0 0 6px var(--k-lamp); pointer-events:none}

/* กำลังกด (klong-theme.js ใส่ .k-down ตอน pointerdown) */
html[data-kmode] .k-down{
  transform:translateY(var(--k-depth)) !important;
  box-shadow:0 0 0 var(--k-key-edge), 0 1px 2px rgba(0,0,0,.2), inset 0 2px 4px rgba(0,0,0,.24) !important}
html[data-kmode] .btn:disabled,
html[data-kmode] .seg button:disabled{
  opacity:.45; transform:none; box-shadow:0 var(--k-depth) 0 var(--k-key-edge), inset 0 1px 0 var(--k-key-hi)}

/* ถาดปุ่ม: กลุ่มที่เลือกได้ทีละอัน */
html[data-kmode] .seg{
  gap:4px; padding:4px 4px calc(4px + var(--k-depth)); border:0; border-radius:calc(var(--k-r) + 4px);
  overflow:visible; background:var(--k-tray-panel); box-shadow:inset 0 2px 4px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.08)}
html[data-kmode] #topbar .seg,
html[data-kmode] #tp .seg{background:var(--k-tray)}
html[data-kmode] .seg button + button{border-left:1px solid var(--k-key-border)}
html[data-kmode] .valwrap{gap:6px; padding:4px 4px calc(4px + var(--k-depth)); border-radius:calc(var(--k-r) + 4px);
  background:var(--k-tray); box-shadow:inset 0 2px 4px rgba(0,0,0,.32)}
html[data-kmode] #topbar .seg button{min-height:38px}
html[data-kmode] #topbar .btn{min-height:40px}

/* ---------- นาฬิกาเป็นจอ LCD อำพัน ไฟจังหวะ มาตรวัด ---------- */
html[data-kmode] .clock{
  display:inline-flex; align-items:center; min-height:40px; padding:0 12px; border-radius:10px;
  background:var(--k-lcd-bg); color:var(--k-lcd-ink);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.1);
  font-family:"IBM Plex Sans Thai", system-ui, -apple-system, sans-serif; font-weight:600; font-size:14.5px;
  font-variant-numeric:tabular-nums; white-space:nowrap; justify-content:center; box-sizing:border-box}
/* ไม่ใช้ Prompt ที่นาฬิกา: ตัวเลขของ Prompt กว้างไม่เท่ากัน ("1" แคบกว่า "0" เกือบครึ่ง)
   และไม่มี tabular-nums ให้ใช้ กล่องจึงหดขยายทุกครั้งที่เลขเปลี่ยน ดันปุ่มทั้งแถวสั่น
   จนแถวตัดบรรทัดสลับไปมา ความกว้างขั้นต่ำตั้งจาก theme/klong-theme.js อีกชั้น */
#kLamp{display:none}
html[data-kmode] #kLamp{display:inline-block; flex:none; align-self:center; width:10px; height:10px; border-radius:50%;
  background:#5A3F1E; box-shadow:inset 0 1px 1px rgba(0,0,0,.5); transition:background-color 60ms, box-shadow 120ms}
html[data-kmode] #kLamp.on{background:#F2C14E; box-shadow:0 0 8px #F2C14E, 0 0 2px #FFE7A0}
html[data-kmode] #kLamp.on.bar{background:#FFE08A; box-shadow:0 0 14px #F2C14E, 0 0 3px #FFF2C6}
#kVu{display:none}
html[data-kmode] #kVu{display:inline-flex; flex:none; flex-direction:column; align-items:center; padding:3px 6px 2px; border-radius:9px;
  background:linear-gradient(var(--k-vu-a), var(--k-vu-b)); box-shadow:inset 0 1px 3px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.1)}
html[data-kmode] #kVu svg{width:62px; height:30px; display:block}
html[data-kmode] #kVu .kvu-arc{stroke:var(--k-vu-ink); stroke-width:1; opacity:.55}
html[data-kmode] #kVu .kvu-red{stroke:#B33A2C; stroke-width:2.4}
html[data-kmode] #kVu .kvu-ticks line{stroke:var(--k-vu-ink); stroke-width:1; opacity:.7}
html[data-kmode] #kVu #kNeedle line{stroke:var(--k-vu-ink); stroke-width:1.4; stroke-linecap:round}
html[data-kmode] #kVu #kNeedle{transition:transform 40ms linear}
html[data-kmode] #kVu circle{fill:var(--k-vu-ink)}
html[data-kmode] #kVu > span{font-size:10px; line-height:1.1; color:var(--k-vu-ink)}
@media (max-width:560px){ html[data-kmode] #kVu{display:none} }

/* สวิตช์แสงหน้าจอในแถบล่าง */
html[data-kmode] .kmode-wrap{display:flex; align-items:center; gap:8px; margin-left:auto}

/* ---------- วงล้อซูมเป็นปุ่มหมุนไม้ ---------- */
html[data-kmode] #zwheel .zslot{background:var(--k-tray-panel); border-color:var(--line)}
html[data-kmode] #zwheel .zknob{
  background-image:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,0) 0px, rgba(255,255,255,0) 17px,
      rgba(255,255,255,.14) 17px, rgba(255,255,255,.14) 18px,
      rgba(0,0,0,.30) 18px, rgba(0,0,0,.30) 19px,
      rgba(255,255,255,0) 19px, rgba(255,255,255,0) 36px),
    linear-gradient(90deg, #341F12 0%, #5A3A24 18%, #7E5636 40%, #946A45 50%, #74502F 64%, #4E321F 85%, #2E1B10 100%)}
html[data-kmode] #zwheel.act .zslot{border-color:var(--ok)}
html[data-kmode] #zwheel .zval{color:#F3E8D2}
html[data-kmode] #zwheel .zcap{color:var(--dim)}

/* ---------- รายละเอียดที่โปรแกรมใส่สีตรง ๆ ไว้ ---------- */
html[data-kmode] #labels{background:linear-gradient(90deg, var(--panel) 84%, transparent)}
html[data-kmode] #labels .r{border-bottom-color:var(--line)}
html[data-kmode] .grpname{color:var(--dim)}
html[data-kmode] #viol div{border-bottom-color:var(--line)}
html[data-kmode] .srow{border-bottom-color:var(--line); color:var(--dim)}

@media (prefers-reduced-motion: reduce){
  html[data-kmode] .btn, html[data-kmode] .seg button, html[data-kmode] .valwrap button,
  html[data-kmode] #kLamp, html[data-kmode] #kVu #kNeedle{transition:none}
}

/* ---------- แถบบนบน iPad แนวตั้ง: แบ่งสองแถว แทนการเลื่อนหาปุ่ม ----------
   รุ่น 11 ต้องการความกว้างราว 1,190px แต่ iPad แนวตั้งมี 834px
   แถวบน = ปุ่มสั่งงาน (นำเข้า ย้อนแก้ ข้อความสถานะ ส่งออก ตั้งค่า)
   แถวล่าง = ถาดเครื่องมือกับถาดโหมด ซึ่งเป็นกลุ่มที่เลือกทีละอันเหมือนกัน
   บนมือถือยังเลื่อนซ้ายขวาเหมือนเดิม เพราะถ้าแบ่งแถวบนจอแคบขนาดนั้นจะกินพื้นที่กริดมากเกินไป
   พื้นที่ทำงานกับแผงตั้งค่าขยับลงตามความสูงจริงของแถบ (klong-theme.js ตั้ง --kt-top) */
html[data-kmode] body.shell main.wrap{top:var(--kt-top, 60px)}
html[data-kmode] body.shell #insp{top:var(--kt-top, 60px)}

/* ---------- ขอบจอ iPad/iPhone ตอนเปิดจากหน้าโฮม ----------
   บน: แถบสถานะ (เวลา วันที่ แบต) โปร่งใสทับหน้าแอป ปุ่มกับชื่อโปรแกรมเลยโดนทับ
       ดันเนื้อแถบลงเท่า --sat แต่ไม้ยังเต็มถึงขอบบน แถบสถานะจึงอยู่บนพื้นไม้ อ่านง่าย
       ความสูงที่เพิ่มถูกวัดเป็น --kt-top อยู่แล้ว พื้นที่ทำงานจึงขยับตามเอง
   ล่าง: บาง iPadOS วางแถบล่างลอยเหนือขอบจอ (ดู --kt-gap ใน klong-theme.js)
       ขยายแถบล่างกับพื้นที่ทำงานลงไปถึงขอบจอจริง ปุ่มยังพ้นขีดโฮมเพราะเผื่อ --sab ไว้แล้ว
       และพื้นหลังสุดของหน้า (นอกตัวแอป) เป็นสีไม้ เผื่อเครื่องที่วัดช่องว่างไม่ได้
       จะเห็นเป็นแถบไม้ต่อกัน ไม่ใช่แถบสีครีมโหว่ ๆ */
html[data-kmode] body.shell #topbar{
  height:calc(60px + var(--sat, 0px)); padding-top:var(--sat, 0px);
  padding-left:calc(12px + var(--sal, 0px)); padding-right:calc(12px + var(--sar, 0px))}
html[data-kmode] body.shell #tp{bottom:calc(-1 * var(--kt-gap, 0px))}
html[data-kmode] body.shell main.wrap{bottom:calc(-1 * var(--kt-gap, 0px))}
/* จอแคบ: แผงตั้งค่าลอยทับกริด ให้จบที่ขอบบนของแถบล่าง (แถบล่างยื่นลงใต้จอ --kt-gap) ไม่งั้นท้ายแผงโดนบัง */
@media (max-width:900px){ html[data-kmode] body.shell #insp{bottom:calc(var(--kt-tp, 0px) - var(--kt-gap, 0px))} }
html[data-kmode]:has(> body.shell:not(.athome):not(.atexport):not(.ataudio):not(.atkfx)){background:var(--k-wood-b)}

@media (min-width:600px) and (max-width:1189px){
  html[data-kmode] body.shell #topbar{height:auto; flex-wrap:wrap; row-gap:6px;
    padding-block:calc(6px + var(--sat, 0px)) 4px; overflow:visible}
  html[data-kmode] #topbar > .tbL{order:1}
  html[data-kmode] #topbar > #pick{order:2}
  html[data-kmode] #topbar > #undoBtn{order:3}
  html[data-kmode] #topbar > .status{order:4; flex:1 1 0; min-width:60px}  /* ใช้แค่ที่เหลือ ไม่ดันปุ่มส่งออกตกแถว */
  html[data-kmode] #topbar > #toExport{order:5}
  html[data-kmode] #topbar > #moreBtn{order:6}
  html[data-kmode] #topbar > #tool{order:7}
  html[data-kmode] #topbar > #modeSeg{order:8}
}

/* ---------- มือถือ: ปุ่มตื้นลงและถาดบางลง เพื่อคืนพื้นที่ให้กริด ---------- */
@media (max-width:599px){
  html[data-kmode]{--k-depth:3px; --k-r:10px}
  html[data-kmode] .seg,
  html[data-kmode] .valwrap{gap:3px; padding:3px 3px calc(3px + var(--k-depth))}
}

/* ---------- แผงเขียนโน้ตลอย (#npal) กับปุ่มกลมเรียกแผง (#npPin) ----------
   ไม้เดียวกับแถบล่าง ขอบทองเหลือง ปุ่มข้างในเป็นปุ่มนูนชุดเดียวกับแถบล่างอยู่แล้ว
   (กฎ .seg button / .valwrap button ด้านบนไม่ได้ผูกกับ #tp) */
html[data-kmode] #npal{
  background:var(--k-wood); color:var(--k-wood-ink); border:2px solid var(--k-brass);
  box-shadow:inset 0 2px 0 -1px var(--k-brass-hi), 0 16px 36px rgba(30,15,5,.45), 0 2px 6px rgba(0,0,0,.25)}
html[data-kmode] #npal .np-head{background:var(--k-wood); border-bottom-color:rgba(0,0,0,.28)}
html[data-kmode] #npal .np-grip,
html[data-kmode] #npal .np-sec h4,
html[data-kmode] #npal .np-time{color:var(--k-wood-dim)}
html[data-kmode] #npal .np-head b{color:var(--k-wood-ink); font-family:var(--k-display); font-weight:600}
html[data-kmode] #npal .seg,
html[data-kmode] #npal .valwrap{background:var(--k-tray)}
html[data-kmode] #npal.all .np-sec + .np-sec{border-top-color:rgba(0,0,0,.25)}
/* แถบห้องท้ายแผง (คัดลอก / วาง / ซ้ำห้องก่อนหน้า) — ตัวหนังสือบนไม้ใช้สีเดียวกับหัวข้อหมวด ไม่ใช่ --dim ที่จมไม้ */
html[data-kmode] #npal .np-bar{background:var(--k-wood); border-top-color:rgba(0,0,0,.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
html[data-kmode] #npal .np-bar-i{color:var(--k-wood-dim)}
html[data-kmode] #npal .np-bar-i b{color:var(--k-wood-ink)}
html[data-kmode] #npal .np-bar-i.err{color:#FFB4A8}
html[data-kmode] #npPin{
  background:linear-gradient(var(--k-key-top), var(--k-key-bot)); color:var(--k-on-ink);
  border:2px solid var(--k-brass);
  box-shadow:0 var(--k-depth) 0 var(--k-key-edge), 0 10px 20px rgba(0,0,0,.35), inset 0 1px 0 var(--k-key-hi)}
html[data-kmode] #npal .np-time select{
  background:linear-gradient(var(--k-key-top), var(--k-key-bot)); color:var(--k-key-ink);
  border:1px solid var(--k-key-border); border-radius:10px; opacity:1;
  box-shadow:0 2px 0 var(--k-key-edge), inset 0 1px 0 var(--k-key-hi)}

/* ---------- เป้าแตะ 44px บนจอสัมผัส: ปุ่มแถบบน (เดิม 38–40px) · ป้ายมาตรวัดเสียง 12px ---------- */
@media (pointer:coarse){
  html[data-kmode] #topbar .seg button,
  html[data-kmode] #topbar .btn{min-height:44px}
}
html[data-kmode] #kVu > span{font-size:12px}

/* ==================== มือถือ (data-kphone="port" | "land" — klong-theme.js ตั้งให้) ====================
   ผู้ใช้เขียนโน้ตด้วยปากกาบนมือถือทั้งสองแนว (Galaxy S26 Ultra + S Pen) สิ่งที่ต้องเห็นตลอดคือกริด
   วัดก่อนแก้ที่จอ 384×784: แถบล่างเต็มกินจอ 408px (52%) กริดเหลือแค่ 3 แถว · ย่อแล้วแผงลอยสูง 534px
   บังกริดเกือบหมด · แนวนอน 784×352 แถบบนสองชั้นกับแถบล่างกินจนเห็นแค่ไม้บรรทัด
   เรียงความสำคัญตามความถี่ตอนเขียน: กริด > ค่าโน้ต > เล่น/หยุด > ย้อนแก้/เครื่องมือ > ลูกเล่น/ห้อง > ที่เหลือ
   แถบบนเหลือแถวเดียว · แผงเขียนโน้ตเกาะขอบจอแทนการลอยทับกริด (กริดหดหลบให้)
   ใต้กริดตอนแนวตั้ง (หมวดเดียว แถวเดียว ปัดซ้ายขวา) · ขวาจอตอนแนวนอน (รวมปุ่มเล่นไว้ในคอลัมน์เดียวกัน)
   iPad ไม่โดนกฎในส่วนนี้เลย (ไม่มี data-kphone) */
#kTbMore{display:none}

/* ---------- แถบบน: ย้อนแก้ · เครื่องมือ · ⋯ ---------- */
html[data-kmode][data-kphone] body.shell #topbar{height:auto; min-height:calc(52px + var(--sat, 0px));
  flex-wrap:wrap; column-gap:6px; row-gap:6px; overflow:visible;
  padding-block:calc(5px + var(--sat, 0px)) 5px}
html[data-kphone] #topbar > .tbL{display:none}
html[data-kphone] #topbar > #kTbMore{display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; padding:0 10px; font-size:22px; line-height:1}
html[data-kphone].k-tbx #topbar::after{content:""; flex-basis:100%; height:0}   /* ขึ้นแถวใหม่ */
/* ลำดับ: แถว 1 ย้อนแก้ · เครื่องมือ · ⋯   แถว 2 (กด ⋯) นำเข้า · ส่งออก · ตั้งค่า · โหมด
   แนวนอนปุ่มเล่น/หยุด/นาฬิกาของแถบล่างขึ้นมาอยู่ในที่ว่างของแถว 1 (ดูส่วนแนวนอนด้านล่าง) */
html[data-kphone] #topbar > #undoBtn{order:1}
html[data-kphone] #topbar > #tool{order:2}
html[data-kphone] #topbar > #kTbMore{order:3; margin-left:auto}
html[data-kphone] #topbar::after{order:4}
html[data-kphone] #topbar > #pick{order:5}
html[data-kphone] #topbar > #toExport{order:6}
html[data-kphone] #topbar > #moreBtn{order:7}
html[data-kphone] #topbar > #modeSeg{order:8}
html[data-kphone]:not(.k-tbx) #topbar > :is(#pick, #modeSeg, #toExport, #moreBtn){display:none}
html[data-kphone].k-tbx #topbar > #kTbMore{transform:translateY(calc(var(--k-depth) - 1px));
  background:linear-gradient(var(--k-on-top), var(--k-on-bot)); color:var(--k-on-ink); box-shadow:0 1px 0 var(--k-key-edge), inset 0 2px 5px rgba(0,0,0,.3)}
/* ปุ่มตื้นลง ถาดบางลงเหมือนจอแคบ (แนวนอนกว้างเกิน 599px จึงไม่โดนกฎนั้น) — แถบบนเตี้ยลงราว 8px */
html[data-kmode][data-kphone]{--k-depth:3px; --k-r:10px}
html[data-kmode][data-kphone] #topbar .seg{gap:3px; padding:2px 2px calc(2px + var(--k-depth))}
/* จอมือถือ: ย้อนแก้เป็นลูกศร ชื่อเครื่องมือสั้นลง (ชื่อเต็มยังเป็นข้อความของปุ่ม ตัวอ่านหน้าจออ่านได้) */
html[data-kphone] #topbar > #undoBtn{font-size:0; min-width:44px; padding:0 10px}
html[data-kphone] #topbar > #undoBtn::after{content:"↶"; font-size:22px; line-height:1}
html[data-kphone] #topbar #tool button{padding:6px 8px; font-size:0}
html[data-kphone] #topbar #tool button::after{font-size:13.5px}
html[data-kphone] #topbar #tool button[data-v="pan"]::after{content:"เลื่อน"}
html[data-kphone] #topbar #tool button[data-v="draw"]::after{content:"วาง"}
html[data-kphone] #topbar #tool button[data-v="select"]::after{content:"เลือก"}
html[data-kphone] #topbar #tool button[data-v="erase"]::after{content:"ลบ"}
html[data-kphone] #topbar #tool button[data-v="vel"]::after{content:"น้ำหนัก"}

/* ข้อความสถานะ → ป้ายลอยใต้แถบบน (klong-theme.js ใส่ .k-show 3 วิ) ไม่รับการแตะ จึงไม่บังการเขียน */
html[data-kmode][data-kphone] #topbar > .status{position:fixed; z-index:60; top:calc(var(--kt-top, 52px) + 8px);
  left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 32px); box-sizing:border-box;
  margin:0; padding:8px 14px; border-radius:12px; white-space:normal; text-align:center; font-size:13.5px; line-height:1.4;
  background:var(--k-lcd-bg); color:var(--k-lcd-ink); box-shadow:0 6px 18px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s, visibility 0s .18s}
html[data-kmode][data-kphone] #topbar > .status.k-show{opacity:1; visibility:visible; transition:opacity .18s}
html[data-kmode][data-kphone] #topbar > .status.err{color:#FFB4A8}

/* ---------- แผงเขียนโน้ตเกาะขอบจอ (#npal.docked — NP ใน index.html ใส่คลาสนี้) ---------- */
html[data-kmode][data-kphone] #npal.docked{left:0 !important; top:auto !important; right:0; width:auto; max-height:none;
  bottom:calc(var(--kt-tp, 60px) - var(--kt-gap, 0px)); overflow:visible; z-index:11;
  border-width:2px 0 0; border-radius:14px 14px 0 0;
  padding:6px calc(8px + var(--sar, 0px)) 6px calc(8px + var(--sal, 0px));
  box-shadow:inset 0 2px 0 -1px var(--k-brass-hi), 0 -4px 14px rgba(30,15,5,.25)}
html[data-kphone] #npal.docked .np-head{display:none}
html[data-kphone] #npal.docked .np-tabs{margin:0 0 6px}
html[data-kphone] #npal.docked .np-tabs button{min-height:38px; font-size:13px}
html[data-kphone] #npal.docked .np-sec h4{display:none}
html[data-kphone] #npal.docked .np-bar-i{display:none}           /* ผลการกดขึ้นที่ป้ายลอยแทน */
html[data-kphone] #npal.docked .np-bar:not([hidden]){position:static; margin:0; padding:0; border:0;
  background:none; box-shadow:none; border-radius:0}
/* แนวตั้ง: หมวดละหนึ่งแถว สูงเท่ากันทุกหมวด กริดไม่กระตุกตอนสลับหมวด · ค่าโน้ตปัดซ้ายขวา ปุ่มประจุดติดขวา */
html[data-kphone="port"] #npal.docked .np-sec:not([hidden]),
html[data-kphone="port"] #npal.docked .np-bar:not([hidden]){display:flex; align-items:center; gap:6px;
  height:64px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none}
html[data-kphone="port"] #npal.docked .np-sec::-webkit-scrollbar{display:none}
html[data-kphone="port"] #npal.docked .np-m{flex:none}
html[data-kphone="port"] #npal.docked .np-vals{flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none}
html[data-kphone="port"] #npal.docked .np-vals::-webkit-scrollbar{display:none}
html[data-kphone="port"] #npal.docked .np-m .valwrap{display:flex; flex-wrap:nowrap; width:max-content}
html[data-kphone="port"] #npal.docked .np-m .valwrap button{flex:none; min-width:62px; min-height:52px}
html[data-kphone="port"] #npal.docked .np-m .seg{flex-wrap:nowrap; width:max-content}
html[data-kphone="port"] #npal.docked .np-m .seg button{flex:none; min-height:48px}
html[data-kphone="port"] #npal.docked .np-row{margin:0; flex:none}
html[data-kphone="port"] #npal.docked .np-row .btn{min-height:52px; padding:0 10px}
html[data-kphone="port"] #npal.docked .np-bar-b{flex:1; grid-template-columns:repeat(3, 1fr)}
html[data-kphone="port"] #npal.docked .np-bar-b .btn{min-height:52px}

/* ---------- แนวนอน: คอลัมน์ขวา = แผงเขียนโน้ต + ปุ่มเล่น · กริดได้ความสูงเต็มใต้แถบบน ---------- */
html[data-kphone="land"]{--k-dock:232px}
html[data-kphone="land"] body.np-docked main.wrap{right:calc(var(--k-dock) + var(--sar, 0px)); padding-bottom:6px !important}
html[data-kmode][data-kphone="land"] #npal.docked{left:auto !important; top:var(--kt-top, 52px) !important;
  width:calc(var(--k-dock) + var(--sar, 0px)); overflow-y:auto; overscroll-behavior:contain;
  border-width:0 0 0 2px; border-radius:0; padding:6px calc(8px + var(--sar, 0px)) 8px 8px;
  box-shadow:inset 2px 0 0 -1px var(--k-brass-hi), -4px 0 14px rgba(30,15,5,.25)}
/* หมวดเป็นแถบตั้งชิดซ้ายของคอลัมน์ ปุ่มในหมวดสองคอลัมน์ทางขวา — หมวดเรียงแถวเดียวจะกินความสูงที่มีน้อยอยู่แล้ว */
html[data-kphone="land"] #npal.docked:not([hidden]){display:grid; grid-template-columns:62px minmax(0, 1fr);
  grid-auto-rows:min-content; column-gap:6px; align-content:start}
html[data-kphone="land"] #npal.docked .np-tabs{grid-column:1; grid-row:1 / span 8; position:sticky; top:0; align-self:start;
  flex-direction:column; width:auto; margin:0; gap:4px}
/* 7 หมวด (เพิ่ม "ไดนามิก") ต้องอยู่ในความสูงจอแนวนอนทั้งหมด: สูง 40px ถ้าพอ ไม่พอหดเท่ากันทุกหมวด (จอเตี้ย 352px ≈ 35px) */
html[data-kphone="land"] #npal.docked .np-tabs button{flex:none; min-height:min(40px, calc((100dvh - var(--kt-top, 52px) - 44px) / 7)); padding:2px; font-size:12.5px;
  border-radius:var(--k-r) !important; border-left:1px solid var(--k-key-border)}
html[data-kphone="land"] #npal.docked .np-sec,
html[data-kphone="land"] #npal.docked .np-bar{grid-column:2}
html[data-kphone="land"] #npal.docked .np-m .valwrap{grid-template-columns:repeat(2, 1fr); gap:5px}
html[data-kphone="land"] #npal.docked .np-m .valwrap button{min-height:50px}
html[data-kphone="land"] #npal.docked .np-sec h4{display:block; margin:2px 0 4px}
html[data-kphone="land"] #npal.docked .np-sec h4:first-child{display:none}
html[data-kphone="land"] #npal.docked .np-m .seg{display:grid; grid-template-columns:1fr 1fr; gap:4px}
html[data-kphone="land"] #npal.docked .np-m .seg button{min-height:44px; padding:4px 2px; border-radius:var(--k-r) !important;
  border-left:1px solid var(--k-key-border)}
html[data-kphone="land"] #npal.docked .np-row{margin-top:6px}
html[data-kphone="land"] #npal.docked .np-row .btn{width:100%}
html[data-kphone="land"] #npal.docked .np-bar-b{grid-template-columns:1fr; gap:6px}
html[data-kphone="land"] #npal.docked .np-bar-b .btn{min-height:46px; flex-direction:row; gap:8px}
/* ป้ายสถานะลอยกลางพื้นที่กริด ไม่ทับคอลัมน์ขวา */
html[data-kmode][data-kphone="land"] body.np-docked #topbar > .status{left:calc((100vw - var(--k-dock)) / 2); max-width:calc(100vw - var(--k-dock) - 32px)}
/* แถบล่างแบบย่อขึ้นไปอยู่บนแถบบน ทางซ้ายของ ⋯ (ที่ว่างหลังย่อชื่อเครื่องมือ) คอลัมน์ขวาจึงเป็นแผงเขียนโน้ตทั้งความสูง
   กดขยายแถบล่าง (▴) แล้วกลับไปเป็นแผงเต็มด้านล่างตามเดิม */
html[data-kmode][data-kphone="land"] #npal.docked{bottom:0; padding-bottom:calc(8px + var(--sab, 0px))}
html[data-kmode][data-kphone="land"] body.np-docked #tp.min{top:0; bottom:auto; left:auto; right:calc(62px + var(--sar, 0px));
  width:auto; max-height:none; overflow:visible; z-index:26; padding:calc(5px + var(--sat, 0px)) 0 0;
  background:none; border:0; box-shadow:none}
html[data-kphone="land"] body.np-docked #tp.min #rowLive{padding:0 52px 0 0; gap:6px; flex-wrap:nowrap}
html[data-kphone="land"] body.np-docked #tp.min .clock{font-size:12.5px; padding:0 8px}
html[data-kphone="land"] body.np-docked #tp.min #tpToggle{top:calc(5px + var(--sat, 0px)); margin-top:0; right:0}
/* แผงตั้งค่าเปิดอยู่: แผงเขียนโน้ตหลบไปก่อน — แผงตั้งค่าอยู่ในพื้นที่ทำงาน (ชั้นต่ำกว่า) จึงโดนแผงเขียนโน้ตบัง
   (แนวตั้งบังท้ายแผง แนวนอนบังเกือบทั้งแผง) ปิดตั้งค่าแล้วแผงเขียนโน้ตกลับมาเอง */
html[data-kphone] body.inspOn #npal.docked{display:none !important}
html[data-kphone="land"] body.np-docked.inspOn main.wrap{right:0}
html[data-kmode][data-kphone="land"] body.np-docked #insp{bottom:0}   /* แถบล่างอยู่บนแถบบนแล้ว แผงตั้งค่ายาวถึงขอบจอได้ */

/* ---------- การ์ด "ติดตั้งลงมือถือ" บนหน้าแรก (klong-theme.js สร้าง) ---------- */
#kInstall[hidden], #kInstall [hidden]{display:none !important}   /* .hcard ตั้ง display:block ไว้ ชนะ hidden */
#kInstall{border-color:var(--ok)}
#kInstall > b{color:var(--ok)}
#kInstall .kinst-how{color:var(--ink); margin-top:-4px}
#kInstall p b{display:inline; font-size:inherit; margin:0}

/* ---------- แถบเสียงเพลง/กลองตอนย่อแถบล่าง (#tpMix) และหมวด "เสียง" ในแผงมือถือ ---------- */
html[data-kmode] .tpmix label{color:var(--k-wood-dim)}
html[data-kmode] #npal .np-mix label{color:var(--k-wood-ink)}
html[data-kmode] #npal .np-mix input[type=range]{accent-color:var(--k-brass)}
html[data-kphone] .tpmix{display:none !important}          /* มือถือ: แถวเล่นไม่มีที่ ใช้หมวด "เสียง" ในแผงแทน */
html[data-kphone="port"] #npal.docked .np-mix{padding:0 6px}
html[data-kphone="land"] #npal.docked .np-mix{flex-direction:column; align-items:stretch; gap:14px; padding-top:6px}
html[data-kphone="land"] #npal.docked .np-mix label{flex:none}

/* ---------- แถบล่างเต็มถึงขอบจอ (ผู้ใช้เจอบน iPad Pro 11 นิ้ว M4 · iPadOS 26 แบบเปิดจากหน้าโฮม) ----------
   ใต้แถบล่างมีแถบสีพื้นหน้ากว้างราว 30px โผล่ (หน้าเว็บยาวกว่ากรอบที่แถบล่างเกาะ) และปุ่ม ▴ ถูกตัดครึ่ง
   เพราะจัดไว้กึ่งกลางกล่องทั้งกล่องรวมขอบล่าง (ลงต่ำกว่าแถวปุ่มเล่น 10px) แล้วกล่องตัดส่วนที่ล้น
   1) ต่อเนื้อไม้ลงไปใต้แถบ 200px ด้วยเงาทึบ (ขยาย 100 เลื่อนลง 100 จึงเริ่มที่ขอบล่างแถบพอดี) (ไม่เปลี่ยนเลย์เอาต์ ไม่ต้องวัดจอ) — ตรงไหนของหน้าโผล่ใต้แถบก็เป็นไม้ต่อกัน
      นอกจอก็มองไม่เห็น · 2) ปุ่ม ▴ ตรงแถวปุ่มเล่น · 3) แถบแบบย่อไม่ตัดของที่ล้น (เงาปุ่ม) */
html[data-kmode] #tp{
  box-shadow:inset 0 3px 0 -2px var(--k-brass-hi), 0 -3px 10px rgba(30,15,5,.2), 0 100px 0 100px var(--k-wood-b)}
html[data-kmode] #tp.min{overflow:visible}
html[data-kmode] #tp.min #tpToggle{top:10px; margin-top:0}
/* iPad (iPadOS 26) เพิ่งเปิดแอปจากหน้าโฮม: ระบบปิดขอบล่างของจอ ~34px ด้วยแผ่นของมันเอง ย้อมสีตามพื้นของหน้า
   ทุกอย่างที่หน้าเว็บวาด (แถบล่าง เงาต่อเนื้อไม้ การ์ดหน้าแรก) ถูกบังที่เส้นเดียวกัน ~800 จาก 834px หมุนจอแล้วหาย
   (ผู้ใช้ถ่ายภาพยืนยัน · วัดสีแผ่นนั้นได้ตรงกับพื้นของ body #1E1611 ทุกพิกเซล ไม่ใช่ theme-color หรือพื้นของ html)
   จึงให้พื้นของ html/body เป็นสีไม้ของแถบล่าง แผ่นของระบบจะเป็นไม้ต่อจากแถบ · พื้นที่ทำงาน (main.wrap) ทาสีพื้นเดิมแทน
   หน้าตาที่เห็นจึงไม่เปลี่ยน · หน้าแรก/หน้าส่งออกมีพื้นของตัวเองอยู่แล้ว (ตอนแผ่นนั้นโผล่ที่หน้าแรกจะเห็นเป็นขอบไม้) */
html[data-kmode], html[data-kmode] body{background-color:var(--k-wood-b)}
html[data-kmode] body.shell main.wrap{background-color:var(--bg)}

/* ---------- ใช้พื้นที่บน-ล่างให้คุ้ม (ผู้ใช้ทักจากภาพ iPad Pro 11 นิ้ว ตอนเปิด "ล็อกจอ") ----------
   บน: ชั้นเว็บแอปเว้น --sat ให้พื้นที่ทำงานตอนล็อกจอ (สมัยยังไม่มีแถบบน) แต่แถบบนเผื่อแถบสถานะให้แล้ว
       จึงเว้นซ้ำ ~32px ว่างเหนือกริดบน iPad
   ล่าง: เหนือแถบล่างเหลือที่ว่าง 18px (fitBottom ใน index.html ลดเหลือ 6) · ใต้ปุ่มในแถบล่างเผื่อขีดโฮมเต็ม 6+--sab
       ลดเป็น --sab − 10 (ไม่น้อยกว่า 6) ปุ่มยังพ้นขีดโฮม (ขีดอยู่ราว 8px จากขอบล่าง) */
html[data-kmode] body.shell.locked main.wrap{padding-top:0}
html[data-kmode] #tp.min{padding-bottom:max(6px, calc(var(--sab, 0px) - 10px))}
/* หมวด "เสียง" แนวตั้ง: สามแถบ (เพลง กลอง เมโทรนอม) ป้ายอยู่บนแถบ ไม่งั้นไม่พอความกว้าง 384px */
html[data-kphone="port"] #npal.docked .np-mix{gap:10px}
html[data-kphone="port"] #npal.docked .np-mix label{flex-direction:column; align-items:stretch; gap:2px; font-size:12px}

/* แถบบนสุด (#swbar — มีรุ่นใหม่ / ใช้สำเนาในเครื่อง · เข้าสู่ระบบ): ปุ่มแตะง่ายตามเกณฑ์ 44px */
#swbar button{min-height:44px; min-width:44px}