/* ============================================================
   SEMS — ชั้นสีและพื้นผิว (โหลดท้ายสุด)
   ------------------------------------------------------------
   ไฟล์นี้ไม่ได้เพิ่มคลาสใหม่ แต่แทนค่าตัวแปรที่ทุกหน้าใช้อยู่แล้ว
   จึงเปลี่ยนหน้าตาได้ทั้งระบบโดยไม่ต้องแตะ CSS รายหน้าหรือ HTML

   สามอย่างที่ทำ
     1. พื้นหลังเป็นชั้น ๆ ชัดขึ้น เพื่อลดการพึ่งเส้นขอบ
     2. พื้นหลังไล่สี ตรึงกับจอ ไม่ไล่ซ้ำตอนเลื่อน
     3. แถบบนเป็นกระจกทึบแบบ iOS 27 (เบลอแต่ยังอ่านออก)

   ข้อควรระวังที่คุมไว้แล้ว
     ไล่สีต้องอยู่ "ใต้" ความสว่างของแผงตลอดทั้งไล่
     ไม่งั้นครึ่งบนจอแผงจะกลืนกับพื้นจนแยกไม่ออก
     ตอนนี้ต่างกันราว 4% ที่ยอดจอทั้งสองโหมด
   ============================================================ */

/* ---------- โหมดมืด ---------- */
:root{
  /* ---- มาตราส่วนความโค้ง 3 ระดับ ---- */
  --r-s:10px;      /* ปุ่ม ช่องกรอก ไทล์เล็ก */
  --r-m:16px;      /* การ์ด แผง กล่องโมดัล */
  --r-full:999px;  /* ชิป ป้าย แถบความคืบหน้า */
  /* ---- มาตราส่วนตัวอักษร 6 ระดับ ---- */
  --t-2xs:10.5px;  /* ป้ายจิ๋ว ตัวพิมพ์ใหญ่ */
  --t-xs:11.5px;   /* คำใบ้ หน่วย */
  --t-sm:13px;     /* เนื้อความ ปุ่ม */
  --t-md:15px;     /* หัวข้อย่อย */
  --t-lg:18px;     /* หัวข้อ */
  --t-xl:24px;     /* หัวเรื่อง */

  --bg:#0e1114;
  --bg-panel:#191d22;
  --bg-raised:#20252b;
  --line:#262b31;
  --line-strong:#333a41;

  --ink:#eef1f4;
  --ink-dim:#98a2ac;
  --ink-faint:#5e6871;

  --g1:#0f1216;
  --g2:#0c0f12;
  --g3:#090b0e;
  --glow:rgba(245,166,35,.07);

  --glass:rgba(22,25,29,.72);
  --glass-line:rgba(255,255,255,.06);
  --cap:rgba(255,255,255,.045);
  --cap-line:rgba(255,255,255,.09);
  --card-glass:rgba(24,28,33,.52);
  --card-line:rgba(255,255,255,.14);
  /* ภาพพื้นหลัง + ม่านบังให้ตัวหนังสือบนพื้นยังอ่านออก
     ต้องเขียนพาธเต็มจากรากเว็บ เพราะ url() ที่อยู่ในตัวแปร CSS
     เบราว์เซอร์คิดที่อยู่เทียบกับหน้าเอกสาร ไม่ใช่ไฟล์ CSS
     ถ้าเขียน 'sems-bg-dark.jpg' เฉย ๆ จะกลายเป็น /sems-bg-dark.jpg แล้ว 404 */
  --photo:url('/assets/sems-bg-dark.jpg');
  --scrim:linear-gradient(180deg, rgba(10,12,15,.42) 0%, rgba(10,12,15,.62) 55%, rgba(10,12,15,.80) 100%);
}

/* ---------- โหมดสว่าง ---------- */
html[data-theme="light"],
html[data-theme="light"] body{
  --bg:#eef2f7;
  --bg-panel:#ffffff;
  --bg-raised:#eef2f7;
  --line:#e2e8f0;
  --line-strong:#ccd7e3;

  --ink:#161b21;
  /* ม่านขาวบางลงมากแล้ว (ดู --scrim) เงาภูเขาในภาพจึงทะลุขึ้นมา
     วัดจากพิกเซลจริงที่จุดมืดที่สุด สีเดิม #4d5661 เหลือความต่างแค่ 2.1:1
     อ่านไม่ออก จึงเร่งให้เข้มขึ้นทั้งคู่ แต่ยังคุมให้ dim เข้มกว่า faint
     เพื่อไม่ให้ลำดับความสำคัญพัง */
  --ink-dim:#1f2831;
  --ink-faint:#2b343d;

  --g1:#f1f5fa;
  --g2:#eaeff5;
  --g3:#e4eaf1;
  --glow:rgba(21,101,192,.07);

  --glass:rgba(255,255,255,.76);
  --glass-line:rgba(0,0,0,.07);
  --cap:rgba(16,24,40,.035);
  --cap-line:rgba(16,24,40,.09);
  --card-glass:rgba(255,255,255,.26);
  --card-line:rgba(255,255,255,.72);
  --photo:url('/assets/sems-bg-light.jpg');
  /* ม่านขาวที่ทับภาพเนินทราย บางลงจาก .66-.84 เพื่อให้เห็นภาพจริง ๆ */
  --scrim:linear-gradient(180deg, rgba(244,247,251,.30) 0%, rgba(244,247,251,.38) 55%, rgba(244,247,251,.46) 100%);
}

/* ============================================================
   พื้นหลังไล่สี
   วางเป็นชั้นตรึงจอด้วย ::before แทน background-attachment:fixed
   เพราะ iOS Safari ยังกระตุกกับ fixed background อยู่
   ============================================================ */
html{ background:var(--bg); }

/* sems-theme.css มีกฎ html[data-theme="light"] body{ background:var(--bg) }
   ซึ่งเจาะจงกว่า body{} เฉย ๆ ถ้าไม่เขียนทับด้วยน้ำหนักเท่ากัน
   โหมดสว่างจะถูกทาพื้นเรียบทับจนไล่สีหายไปทั้งหน้า */
body,
html[data-theme="light"] body{ background:transparent; position:relative; }

/* พื้นหลังเป็นภาพถ่ายเนินทราย สลับตามโหมดสว่าง/มืด
   position:fixed แทน background-attachment:fixed เพราะ Safari บน iOS
   ไม่รองรับ attachment:fixed แล้วภาพจะกระตุกตอนเลื่อน
   ชั้นบนสุดเป็นม่านโปร่ง กันไม่ให้ตัวหนังสือบนพื้นกลืนกับภาพ
   ชั้นล่างสุดเป็นสีทึบ เผื่อภาพยังโหลดไม่เสร็จจะได้ไม่เห็นพื้นขาววาบ */
body::before{
  content:'';
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-color:var(--bg);
  background-image:
    radial-gradient(1200px 620px at 50% -12%, var(--glow), transparent 62%),
    var(--scrim),
    var(--photo);
  background-size:auto, auto, cover;
  background-position:center top, center, center center;
  background-repeat:no-repeat, no-repeat, no-repeat;
}

/* ============================================================
   แถบบน — กระจก
   iOS 27 ลดความโปร่งใสลงหลังคนบ่นว่าอ่านยาก จึงเอาแค่ทึบ ๆ
   ถ้าเบราว์เซอร์ไม่รองรับ backdrop-filter จะตกไปใช้พื้นทึบแทน
   ============================================================ */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  /* ต้องมีตัวเลือกสำหรับโหมดสว่างด้วย ไม่งั้นกฎเดิมใน sems-theme.css
     ที่ทาไล่เฉดขาวตายตัวจะชนะ กลายเป็นแถบบนทึบตัดกับพื้นหน้าเป็นเส้นตรง */
  .topbar,
  html[data-theme="light"] .topbar{
    background:var(--glass);
    backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%);
    border-bottom:1px solid var(--glass-line);
  }
}

/* ============================================================
   ลดการตีกรอบ
   แผงกับการ์ดแยกตัวด้วยพื้นหลังและเงาบาง ๆ แทนเส้นขอบ
   ที่ไหนยังต้องใช้เส้น เช่นเส้นคั่นแถวตาราง ยังอยู่เหมือนเดิม
   ============================================================ */
.card, .panel, .box, .form-modal, .app-card{
  box-shadow:0 1px 2px rgba(0,0,0,.22);
}
html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .box,
html[data-theme="light"] .form-modal,
html[data-theme="light"] .app-card{
  box-shadow:0 1px 2px rgba(16,24,40,.07);
}

/* ============================================================
   แถบบนขวา — ทำให้ทุกปุ่ม/ชิปสูงเท่ากันและโค้งเท่ากัน
   เดิมแต่ละหน้ากำหนดเอง: status-pill โค้ง 999px สูง ~29,
   user-chip โค้ง 9px สูง ~44, btn.sm โค้ง 9px สูง ~28
   ทำให้แถบบนดูไม่เป็นระเบียบ  ที่นี่บังคับให้เป็นแคปซูลสูง 34px
   ทั้งหมด ใช้ selector สองคลาสเพื่อชนะกฎใน <style> ของแต่ละหน้า
   ============================================================ */
:root{ --ctl-h:34px; --ctl-r:var(--r-full,999px); }

.topbar-right .status-pill,
.topbar-right .cx-chip,
.topbar-right .user-chip,
.topbar-right .sems-user,
.topbar-right .sems-btn,
.topbar-right .btn,
.topbar-right .btn.sm,
.topbar-right .icon-btn,
.topbar-right select{
  height:var(--ctl-h);
  min-height:var(--ctl-h);
  box-sizing:border-box;
  border-radius:var(--ctl-r);
  padding:0 14px;
  font-size:var(--t-sm,13px);
  line-height:1;
  align-items:center;
}
.topbar-right .sems-btn,
.topbar-right .btn,
.topbar-right .btn.sm,
.topbar-right .icon-btn,
.topbar-right select{
  display:inline-flex;
  justify-content:center;
  font-weight:600;
}
/* select ในแคปซูล: เอาลูกศรของระบบออก ใส่ลูกศรเองให้เข้าชุด */
.topbar-right select{
  -webkit-appearance:none; appearance:none;
  padding-right:30px; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),
                   linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size:5px 5px, 5px 5px;
  background-position:calc(100% - 16px) center, calc(100% - 11px) center;
  background-repeat:no-repeat;
}
/* ปุ่มไอคอน (สลับธีม) เป็นวงกลมพอดีความสูงเดียวกัน */
.topbar-right .sems-btn.icon,
.topbar-right .icon-btn{
  width:var(--ctl-h);
  padding:0;
  border-radius:50%;
  font-size:15px;
}
/* ชิปผู้ใช้: รูปวงกลมชิดซ้าย ข้อความสองบรรทัดต้องพอดีใน 34px */
.topbar-right .user-chip,
.topbar-right .sems-user{
  padding:0 13px 0 3px;
  gap:8px;
}
.topbar-right .user-chip .avatar,
.topbar-right .sems-avatar{ width:26px; height:26px; flex:0 0 auto; font-size:var(--t-xs,11.5px); }
.topbar-right .user-chip .u-name,
.topbar-right .sems-uname{ font-size:var(--t-xs,11.5px); line-height:1.15; }
.topbar-right .user-chip .u-role,
.topbar-right .sems-urole{ font-size:var(--t-2xs,10.5px); line-height:1.15; }
.topbar-right .status-pill{ padding:0 13px; font-size:var(--t-xs,11.5px); }
.topbar-right .cx-chip{ padding:0 13px; }

@media (max-width:720px){
  :root{ --ctl-h:32px; }
  .topbar-right .user-chip,
  .topbar-right .sems-user{
    width:var(--ctl-h); padding:0; border-radius:50%; justify-content:center; gap:0;
  }
  .topbar-right .sems-btn,
  .topbar-right .btn,
  .topbar-right .btn.sm{ padding:0 12px; font-size:var(--t-xs,11.5px); }
}



/* ============================================================
   วงกลมครอบกลุ่มปุ่มมุมขวาบน
   ตัวคุมทุกตัวสูง var(--ctl-h) เท่ากันอยู่แล้ว จึงครอบด้วยแคปซูล
   ที่คำนวณความโค้งจากความสูงจริง ปรับ --ctl-h เมื่อไรกรอบก็ตามไปเอง
   ============================================================ */
body .topbar-right{
  display:flex; align-items:center; justify-content:center;
  gap:8px; flex-wrap:nowrap;
  padding:6px;
  background:var(--cap);
  border:1px solid var(--cap-line);
  border-radius:calc(var(--ctl-h) / 2 + 6px);
  max-width:100%;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
body .topbar-right::-webkit-scrollbar{ display:none; }

/* ข้อความในชิปต้องไม่ตัดบรรทัด ไม่งั้นความสูงจะเพี้ยนทั้งแถว */
.topbar-right .status-pill,
.topbar-right .sems-btn,
.topbar-right .btn,
.topbar-right .user-chip,
.topbar-right .sems-user{ white-space:nowrap; flex:none; }
.topbar-right .status-pill > span,
.topbar-right .sems-uname,
.topbar-right .sems-urole,
.topbar-right .user-chip .u-name,
.topbar-right .user-chip .u-role{ white-space:nowrap; }
.topbar-right .sems-nav{ flex:none; flex-wrap:nowrap; }
/* ชิปบริบทยาวได้แต่ต้องยอมหดและตัดท้ายด้วย … */
.topbar-right .cx-chip{ flex:0 1 auto; min-width:0; }

.topbar-right .sems-btn,
.topbar-right .btn,
.topbar-right .user-chip,
.topbar-right .sems-user,
.topbar-right .status-pill,
.topbar-right .cx-chip{ transition:transform .15s ease, border-color .15s ease, color .15s ease; }
.topbar-right .sems-btn:active,
.topbar-right .btn:active:not(:disabled){ transform:scale(.96); }

/* จอแคบ: ให้กลุ่มปุ่มเลื่อนแนวนอนในกรอบแทนการตัดบรรทัด */
@media (max-width:720px){
  body .topbar-right{ gap:6px; padding:5px; }
}

/* หน้าเข้าสู่ระบบมีแค่นาฬิกากับการ์ดกระจก ไม่มีตัวหนังสือเล็ก ๆ บนพื้น
   จึงลดม่านลงให้เห็นภาพชัดกว่าหน้าอื่น (JS ใส่คลาสนี้ตอนหน้าล็อกโชว์อยู่) */
/* ต้องประกาศที่ body ด้วย เพราะโหมดสว่างมีกฎ html[data-theme="light"] body
   ที่ตั้ง --scrim ไว้บน body โดยตรง ค่าที่ตั้งบน html จะไม่ตกทอดมาทับ */
html.lock-page,
html.lock-page body{
  --scrim:linear-gradient(180deg, rgba(10,12,15,.24) 0%, rgba(10,12,15,.40) 55%, rgba(10,12,15,.54) 100%);
}
html.lock-page[data-theme="light"],
html.lock-page[data-theme="light"] body{
  /* ต้องบางกว่าค่าปกติเสมอ ไม่งั้นหน้าล็อกอินจะทึบกว่าหน้าเมนู ซึ่งกลับด้านกับที่ตั้งใจ
     นาฬิกาบนหน้านี้มีเส้นขอบกับแสงเรืองของตัวเองอยู่แล้ว จึงทนม่านบางได้ */
  --scrim:linear-gradient(180deg, rgba(244,247,251,.16) 0%, rgba(244,247,251,.24) 55%, rgba(244,247,251,.34) 100%);
}



/* ---- แถบบนทุกหน้า ----
   ตัดโลโก้กับชื่อหน้าออก เหลือกลุ่มปุ่มอย่างเดียวจัดไว้กลางแถบ
   ทำที่นี่ที่เดียวมีผลครบทั้ง 20 หน้า ไม่ต้องแก้ HTML รายหน้า */
body .topbar{ justify-content:center; }
body .topbar .brand{ display:none; }

/* แถบพื้นหลังทึบเต็มความกว้างไม่จำเป็นแล้ว เพราะกลุ่มปุ่มมีกรอบกระจกของตัวเอง
   เอาพื้น เส้นคั่น และเงาออก ให้เหลือแคปซูลลอยอยู่กลางจอเหนือวอลเปเปอร์

   เขียนชื่อคลาสซ้ำ + นำด้วย html เพื่อให้น้ำหนักเป็น (0,2,2)
   ชนะกฎมุมมองสว่าง html[data-theme="light"] .topbar ที่เป็น (0,2,1) ขาด ๆ
   ถ้าเสมอกันจะต้องไปลุ้นลำดับการโหลดไฟล์ ซึ่งเปราะเกินไป
   ไม่งั้นสลับเป็นมุมมองสว่างแล้วแถบขาวทึบจะกลับมา */
html body .topbar.topbar{
  background:none; border-bottom:none; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}

/* ============================================================
   จอสัมผัส — แถบบนต้องเลื่อนหายไปกับหน้า ไม่ใช่ค้างอยู่กับที่
   ------------------------------------------------------------
   บนคอมแถบซ่อนตัวเองอยู่แล้ว จึงไม่เคยบังอะไร
   แต่จอสัมผัสไม่มีการเอาเมาส์เข้าใกล้ แถบจึงโผล่ค้างตลอดเวลา
   พอเราเอาพื้นทึบออกไปแล้ว (ดูกฎด้านบน) มันเลยกลายเป็นกลุ่มปุ่ม
   ลอยทับเนื้อหาที่เลื่อนผ่านข้างหลัง อ่านก็ยาก กดก็ชนกัน

   ให้มันเลื่อนไปกับหน้าเลย อยากใช้เมนูก็เลื่อนขึ้นไปบนสุด
   ซึ่งเป็นท่าที่คุ้นมืออยู่แล้วบนมือถือ
   ============================================================ */
@media (hover:none), (pointer:coarse){
  html body .topbar.topbar{ position:relative; top:auto; }
}

/* ชิปชื่อผู้ใช้เอาออกจากแถบบนทุกหน้า
   ซ่อนด้วย CSS ไม่ได้ลบอิลิเมนต์ทิ้ง เพราะโค้ดหลายที่ยังเขียนชื่อกับบทบาท
   ลงไปในนั้นอยู่ ถ้าลบจะต้องไล่แก้ทุกจุดและเสี่ยงพังโดยไม่จำเป็น
   .sems-user = หน้าโมดูล (สร้างจาก sems-auth.js) · .user-chip = หน้าเมนู */
.topbar-right .sems-user,
.topbar-right .user-chip{ display:none !important; }


/* ============================================================
   กันหน้าจอซูมเองตอนแตะช่องกรอกบน iPhone
   ------------------------------------------------------------
   Safari บน iOS จะซูมเข้าอัตโนมัติเมื่อโฟกัสช่องกรอกที่ตัวอักษร
   เล็กกว่า 16px แล้ว "ไม่ซูมกลับให้" ผู้ใช้ต้องถ่างนิ้วออกเอง
   (meta viewport user-scalable=no ก็ไม่ช่วย iOS 10 ขึ้นไปเลิกสนใจแล้ว)
   ทางแก้เดียวที่ได้ผลคือทำให้ตัวอักษรในช่องกรอก >= 16px

   ระบบมีกฎตั้งขนาดช่องกรอกกระจายอยู่ 31 จุดใน 15 ไฟล์
   ไล่แก้ทีละจุดจะหลุดง่ายและกลับมาพังอีกเมื่อเพิ่มหน้าใหม่
   จึงคุมที่นี่ที่เดียวด้วย !important เฉพาะอุปกรณ์สัมผัสเท่านั้น
   จอคอมยังใช้ขนาดเดิม ไม่กระทบเลย์เอาต์
   ============================================================ */
@media (pointer:coarse){
  input[type=text],
  input[type=password],
  input[type=search],
  input[type=number],
  input[type=tel],
  input[type=email],
  input[type=url],
  input[type=date],
  input[type=time],
  input[type=datetime-local],
  input:not([type]),
  select,
  textarea{
    font-size:16px !important;
  }
}


/* ============================================================
   เปลี่ยนหน้าแบบ progressive blur — อ้างอิงอนิเมชันกางจอของ iPhone Duo
   ------------------------------------------------------------
   ออกจากหน้า  : ม่านเบลอไหลเข้าจากขวา กวาดไปซ้าย ความเบลอไล่จากน้อยไปมาก
   เข้าหน้าใหม่ : เริ่มเบลอทั้งจอ แล้วความคมไหลจากซ้ายไปขวา

   เคล็ดคือ "progressive blur" — ซ้อนแผ่นเบลอหลายชั้น ชั้นละความแรง
   แต่ละชั้นมี mask ไล่เฉดเริ่มไม่พร้อมกัน พอซ้อนกันจึงได้ความเบลอที่
   ค่อย ๆ เข้มขึ้นตามแนวนอน แทนที่จะเป็นขอบเบลอตัดกันชั้นเดียว
   เลื่อนทั้งชุดด้วย transform ซึ่งวิ่งบน compositor ไม่ต้องวาดใหม่ทุกเฟรม
   ============================================================ */
.sems-pw{
  position:fixed; top:0; left:0; width:200vw; height:100%;
  z-index:9999; pointer-events:none; will-change:transform;
  /* ค่าตั้งต้นคืออยู่นอกจอทางขวา
     ถ้าด้วยเหตุใดก็ตาม animation ไม่ทำงาน (แท็บถูกซ่อน / เบราว์เซอร์ throttle)
     ม่านจะไม่ค้างคลุมจอ เพราะค่าเริ่มต้นไม่บังอะไรอยู่แล้ว */
  transform:translateX(100vw);
}
.sems-pw i{ position:absolute; inset:0; display:block; }

.sems-pw i:nth-child(1){
  backdrop-filter:blur(2px);  -webkit-backdrop-filter:blur(2px);
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 8%,  #000 20%);
          mask-image:linear-gradient(90deg, rgba(0,0,0,0) 8%,  #000 20%);
}
.sems-pw i:nth-child(2){
  backdrop-filter:blur(5px);  -webkit-backdrop-filter:blur(5px);
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 15%, #000 28%);
          mask-image:linear-gradient(90deg, rgba(0,0,0,0) 15%, #000 28%);
}
.sems-pw i:nth-child(3){
  backdrop-filter:blur(11px); -webkit-backdrop-filter:blur(11px);
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 23%, #000 38%);
          mask-image:linear-gradient(90deg, rgba(0,0,0,0) 23%, #000 38%);
}
.sems-pw i:nth-child(4){
  backdrop-filter:blur(20px) saturate(115%); -webkit-backdrop-filter:blur(20px) saturate(115%);
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 32%, #000 50%);
          mask-image:linear-gradient(90deg, rgba(0,0,0,0) 32%, #000 50%);
}

/* ออก: ชุดม่านอยู่นอกจอทางขวา แล้วกวาดมาทางซ้ายจนคลุมทั้งจอ */
.sems-pw.out{ animation:sems-pw-out .52s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes sems-pw-out{
  from{ transform:translateX(100vw); }
  to  { transform:translateX(-60vw); }
}
/* เข้า: เริ่มคลุมทั้งจอ แล้วกวาดออกไปทางขวา ความคมจึงไล่จากซ้ายไปขวา */
.sems-pw.in{ animation:sems-pw-in .68s cubic-bezier(.32,.72,0,1) forwards; }
@keyframes sems-pw-in{
  from{ transform:translateX(-60vw); }
  to  { transform:translateX(100vw); }
}
@media (prefers-reduced-motion:reduce){
  .sems-pw{ display:none !important; }
}


/* ============================================================
   วิทยุออนไลน์ในแถบบน
   ------------------------------------------------------------
   ปุ่มเล็กในแคปซูล กดแล้วเปิดแผงเลือกสถานี
   สถานะ (สถานีที่เลือก / กำลังเล่น / ระดับเสียง) เก็บในเครื่อง
   เปลี่ยนหน้าแล้วจะพยายามเล่นต่อให้เอง
   ============================================================ */
.radio-wrap{ position:relative; flex:none; display:flex; }

.radio-btn{
  width:var(--ctl-h,34px); height:var(--ctl-h,34px); padding:0; flex:none;
  border-radius:50%; cursor:pointer;
  background:var(--bg-raised); border:1px solid var(--line-strong); color:var(--ink-dim);
  display:inline-flex; align-items:center; justify-content:center;
  transition:color .15s, border-color .15s, transform .15s;
}
.radio-btn svg{ width:16px; height:16px; }
.radio-btn:hover{ color:var(--ink); }
.radio-btn.on{ color:var(--ok); border-color:var(--ok); }
/* เต้นเบา ๆ ตอนกำลังเล่น จะได้รู้ว่าเปิดอยู่ */
.radio-btn.on svg{ animation:radio-beat 1.6s ease-in-out infinite; }
@keyframes radio-beat{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.16); } }
@media (prefers-reduced-motion:reduce){ .radio-btn.on svg{ animation:none; } }

/* แผงลอยออกนอกแคปซูล เพราะแคปซูลตั้ง overflow-y:hidden ไว้ ถ้าวางไว้ข้างในจะโดนตัด
   จึงย้ายไปแปะที่ body แล้วคำนวณตำแหน่งจากปุ่มตอนเปิด */
.radio-pop{
  position:fixed; top:0; left:0;
  width:270px; max-width:82vw; z-index:1200; display:none;
  background:var(--card-glass, var(--bg-panel));
  border:1px solid var(--card-line, var(--line-strong));
  border-radius:20px; padding:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.34);
  text-align:left;
}
html[data-theme="light"] .radio-pop{ box-shadow:0 18px 44px rgba(16,24,40,.18); }
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .radio-pop{ backdrop-filter:blur(30px) saturate(170%); -webkit-backdrop-filter:blur(30px) saturate(170%); }
}
.radio-pop.on{ display:block; }

.radio-pop h4{
  margin:0 0 8px; font-size:var(--t-2xs,10.5px); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim);
}
.radio-list{ max-height:184px; overflow-y:auto; margin:0 -4px 10px; }
.radio-list .st{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:8px 10px; border-radius:11px; cursor:pointer;
  background:none; border:none; color:var(--ink);
  font-family:var(--sans); font-size:var(--t-sm,13px); text-align:left;
}
.radio-list .st:hover{ background:rgba(127,127,127,.14); }
.radio-list .st.on{ background:var(--info, #4aa3f0); color:#fff; }
.radio-list .st .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.radio-list .st .rm{
  flex:none; width:22px; height:22px; padding:0; border:none; border-radius:50%;
  background:none; color:inherit; opacity:.45; cursor:pointer; font-size:13px; line-height:1;
}
.radio-list .st .rm:hover{ opacity:1; color:var(--danger); }

.radio-bar{ display:flex; align-items:center; gap:9px; }
.radio-bar .play{
  flex:none; width:36px; height:36px; border-radius:50%; padding:0; cursor:pointer;
  background:var(--info, #4aa3f0); border:none; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
}
.radio-bar .play svg{ width:15px; height:15px; }
.radio-bar input[type=range]{ flex:1; min-width:0; accent-color:var(--info, #4aa3f0); }
.radio-auto{
  display:flex; align-items:center; gap:8px; margin-top:10px; cursor:pointer;
  font-size:var(--t-xs,11.5px); color:var(--ink-dim);
}
.radio-auto input{ accent-color:var(--info,#4aa3f0); width:15px; height:15px; flex:none; margin:0; }

.radio-add{
  display:grid; grid-template-columns:1fr auto; gap:6px; margin-top:10px; padding-top:10px;
  border-top:1px solid var(--line);
}
.radio-add input{ grid-column:1; }
.radio-add button{ grid-column:2; grid-row:1 / span 2; }
.radio-add input{
  flex:1; min-width:0; padding:7px 10px; border-radius:10px;
  background:rgba(127,127,127,.12); border:1px solid rgba(127,127,127,.2);
  color:var(--ink); font-family:var(--sans); font-size:var(--t-xs,11.5px);
}
.radio-add button{
  flex:none; padding:0 12px; border-radius:10px; cursor:pointer;
  background:rgba(127,127,127,.14); border:1px solid rgba(127,127,127,.24);
  color:var(--ink); font-family:var(--sans); font-size:var(--t-xs,11.5px); font-weight:600;
}
.radio-note{ margin:8px 0 0; font-size:var(--t-2xs,10.5px); color:var(--ink-faint); line-height:1.7; }

/* ============================================================
   แถบบนแบบย่ออัตโนมัติ — เลียนแบบ Dock ของ macOS
   ------------------------------------------------------------
   ปกติแถบจะหลบขึ้นไปพ้นจอ เหลือไว้แค่ขีดเล็ก ๆ บอกตำแหน่ง
   เลื่อนเมาส์ขึ้นไปชิดขอบบนเมื่อไหร่ แถบจะไหลลงมาเอง
   เปิดใช้เฉพาะเครื่องที่มีเมาส์จริงและจอกว้าง จอสัมผัสไม่เปลี่ยนพฤติกรรม
   คลาส tb-auto = โหมดนี้เปิดอยู่ · tb-hide = ตอนนี้ซ่อนอยู่
   ============================================================ */
html.tb-auto body .topbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  transition:transform .30s cubic-bezier(.32,.72,0,1);
  will-change:transform;
}
/* เลื่อนขึ้นเกิน 100% เผื่อเงาที่ตกลงมาใต้แถบไม่ให้โผล่ค้าง
   ไม่ไล่ opacity ด้วยแล้ว เพราะถ้าจังหวะสลับชนกันจะค้างครึ่ง ๆ กลาง ๆ
   กลายเป็นแถบจาง ๆ ที่ดูเหมือนเสีย เลื่อนอย่างเดียวจบกว่า */
html.tb-auto.tb-hide body .topbar{
  transform:translateY(-124%); pointer-events:none;
}

/* พื้นที่รับเมาส์ที่ขอบบน มองไม่เห็นแต่กว้างพอให้ปัดขึ้นไปโดน */
/* เลิกใช้อิลิเมนต์รับเมาส์ที่ขอบบนแล้ว เพราะมันไปแย่งคลิกของกล่องข้อความ
   ที่มีปุ่มอยู่ใกล้ขอบบน และตัวมันเองก็โดน overlay ของบางหน้าทับจนใช้ไม่ได้
   ตอนนี้ใช้ตำแหน่งเมาส์จาก window ขั้น capture แทน ซึ่งไม่มีอะไรมาขวางได้ */
/* จองที่ไว้เท่าความสูงโซนรับเมาส์พอดี เนื้อหาจะได้ไม่ไปอยู่ใต้โซนแล้วกดไม่โดน */
html.tb-auto body{ padding-top:var(--tb-h, 22px); }

/* ขีดบอกตำแหน่ง โผล่เฉพาะตอนแถบซ่อนอยู่ */
.tb-grab{
  position:fixed; top:8px; left:50%; margin-left:-27px;
  width:54px; height:5px; border-radius:99px; z-index:58;
  background:var(--ink); opacity:0; pointer-events:none;
  transition:opacity .25s ease;
  display:none;
}
html.tb-auto .tb-grab{ display:block; }
html.tb-auto.tb-hide .tb-grab{ opacity:.26; }


@media (prefers-reduced-motion:reduce){
  html.tb-auto body .topbar{ transition:opacity .2s ease; }
}