/* ============================================================================
   fable-ui.css — design system กลางของชุดหน้า 5D-live (สร้าง 2026-07-18)

   หน้าไหนอยากได้หน้าตาชุดนี้: <link rel="stylesheet" href="fable-ui.css" />
   (วาง <link> ก่อน <style> ของหน้า เพื่อให้ CSS เฉพาะหน้า override ได้)

   โครง 2 ชั้น:
     1) TOKENS  — สี/ฟอนต์/รัศมี/เงา ผูกธีมมืด-สว่างผ่าน html[data-theme]
     2) COMPONENTS — base, ฟอร์ม (input/select/checkbox/radio/switch),
        ปุ่ม (+variants), การ์ด .panel, ตาราง .ic-tbl, segmented .seg3

   กติกา: แก้ธีม/ทรงกลางที่ไฟล์นี้ที่เดียว → มีผลทุกหน้า
   ห้ามใส่ CSS ที่ผูกกับ id/layout เฉพาะหน้าลงไฟล์นี้ (ไว้ใน <style> ของหน้า)
   ============================================================================ */

/* icon (Font Awesome — vendor ไว้ local ไม่พึ่งเน็ต) + ฟอนต์ไทยไม่มีหัว */
@import url("vendor/fontawesome/css/all.min.css");
/* Noto Sans Thai — self-hosted (woff2 ใน vendor/noto-sans-thai/) · panel คุมไลฟ์ต้องรอดแม้เน็ตสะดุด · เดิมโหลดจาก Google Fonts (ตัดออกแล้ว) */
/* thai */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(vendor/noto-sans-thai/thai.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(vendor/noto-sans-thai/latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(vendor/noto-sans-thai/latin.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;
}
/* thai */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(vendor/noto-sans-thai/thai.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(vendor/noto-sans-thai/latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(vendor/noto-sans-thai/latin.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;
}
/* thai */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(vendor/noto-sans-thai/thai.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(vendor/noto-sans-thai/latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(vendor/noto-sans-thai/latin.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;
}
/* thai */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(vendor/noto-sans-thai/thai.woff2) format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(vendor/noto-sans-thai/latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(vendor/noto-sans-thai/latin.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;
}

/* ---------------------------------------------------------------- 1) TOKENS */
:root{
  color-scheme:dark;
  --ground:#0D0D0F; --panel:#1C1C1E; --raise:#2C2C2E; --field:#121214;
  --line:#3D3D41; --line-soft:#2B2B2E;
  --ink:#F5F5F7; --mute:#A1A1A8; --dim:#6E6E76;
  --live:#FF453A;
  --accent:#0A84FF;                    /* สีปุ่มหลัก/สถานะเลือก */
  --seg:#48484C;                       /* thumb ของ segmented control */
  --glass:rgba(255,255,255,.06);
  --warn:#FFB340; --switch-on:#30D158;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.3l3.5 3.5 3.5-3.5' fill='none' stroke='%23A1A1A8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --shadow:0 1px 2px rgba(0,0,0,.35);
  --shadow-card:0 1px 1px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.18);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Noto Sans Thai","Sukhumvit Set",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
html[data-theme="light"]{
  color-scheme:light;
  --ground:#F5F5F7; --panel:#FFFFFF; --raise:#EFEFF2; --field:#F4F4F6;
  --line:#D2D2D7; --line-soft:#E7E7EC;
  --ink:#1D1D1F; --mute:#6E6E73; --dim:#98989D;
  --live:#E5382E;
  --accent:#0071E3;
  --seg:#FFFFFF;
  --glass:rgba(0,0,0,.045);
  --warn:#B25A00; --switch-on:#34C759;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.3l3.5 3.5 3.5-3.5' fill='none' stroke='%236E6E73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --shadow:0 1px 2px rgba(0,0,0,.06);
  --shadow-card:0 1px 2px rgba(0,0,0,.05),0 6px 20px rgba(0,0,0,.05);
}
/* หน้าไม่ตั้ง data-theme (JS ยังไม่รัน) → ตามระบบ (ค่าซ้ำกับบล็อก light ด้านบน) */
@media (prefers-color-scheme: light){
  html:not([data-theme]){
    color-scheme:light;
    --ground:#F5F5F7; --panel:#FFFFFF; --raise:#EFEFF2; --field:#F4F4F6;
    --line:#D2D2D7; --line-soft:#E7E7EC;
    --ink:#1D1D1F; --mute:#6E6E73; --dim:#98989D;
    --live:#E5382E;
    --accent:#0071E3;
    --seg:#FFFFFF;
    --glass:rgba(0,0,0,.045);
    --warn:#B25A00; --switch-on:#34C759;
    --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.3l3.5 3.5 3.5-3.5' fill='none' stroke='%236E6E73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --shadow:0 1px 2px rgba(0,0,0,.06);
    --shadow-card:0 1px 2px rgba(0,0,0,.05),0 6px 20px rgba(0,0,0,.05);
  }
}

/* ------------------------------------------------------------ 2) COMPONENTS */
/* ---- base ---- */
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font:14px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:6px}
code{font-family:var(--mono);font-size:12px;background:var(--field);padding:1px 6px;border-radius:5px;border:1px solid var(--line-soft)}
i.fa-solid{font-size:.92em;line-height:1}

/* ---- ฟอร์ม: input / select (chevron เอง แบบ macOS popup) ---- */
input,select{font:14px var(--sans);color:var(--ink);background:var(--field);
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;
  transition:border-color .12s,box-shadow .12s}
select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:32px;min-height:38px;
  background-image:var(--chev);background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
select:disabled{opacity:.5;cursor:default}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--accent) 22%,transparent)}
input::placeholder{color:var(--dim)}

/* ---- checkbox / radio ทรงเดียวกันทุกที่ (macOS style) ---- */
input[type=checkbox],input[type=radio]{-webkit-appearance:none;appearance:none;margin:0;padding:0;flex-shrink:0;
  width:17px;height:17px;border:1.5px solid var(--line);border-radius:5px;cursor:pointer;vertical-align:-3.5px;
  background:var(--field) center/13px no-repeat;transition:background-color .15s,border-color .15s;box-shadow:none}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--dim)}
input[type=checkbox]:checked{background-color:var(--accent);border-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.3l2.5 2.5L11 4.2' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
input[type=radio]:checked{background-color:var(--accent);border-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='3' fill='white'/%3E%3C/svg%3E")}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.4;cursor:default}

/* ---- สวิตช์ iOS: ใส่ class="switch" ให้ checkbox (หน้าเดิมผูก id ไว้ใน CSS ของหน้า) ---- */
input[type=checkbox].switch{width:39px;height:23px;border:0;border-radius:999px;
  background-color:color-mix(in srgb,var(--dim) 42%,var(--field));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19'%3E%3Ccircle cx='9.5' cy='9.5' r='9' fill='white'/%3E%3C/svg%3E");
  background-size:19px 19px;background-position:2px center;background-repeat:no-repeat;
  transition:background-color .2s,background-position .2s}
input[type=checkbox].switch:checked{background-color:var(--switch-on);border-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19'%3E%3Ccircle cx='9.5' cy='9.5' r='9' fill='white'/%3E%3C/svg%3E");
  background-position:18px center}

/* ---- ช่องจิ้มสี ---- */
input[type=color]{width:46px;height:28px;padding:2px;border:1px solid var(--line);border-radius:7px;
  background:var(--field);cursor:pointer;flex-shrink:0;-webkit-appearance:none;appearance:none}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}
input[type=color]:disabled{opacity:.35;cursor:default}

/* ---- ปุ่ม ---- */
button{font:600 13px var(--sans);border-radius:10px;cursor:pointer;border:1px solid var(--line-soft);
  background:var(--raise);color:var(--ink);padding:9px 16px;box-shadow:var(--shadow);
  transition:background .12s,border-color .12s,color .12s}
button:hover{background:color-mix(in srgb,var(--ink) 7%,var(--raise))}
button:disabled{opacity:.55;cursor:default}
.btn-cue{background:var(--accent);border-color:transparent;color:#fff;padding:9px 22px}
.btn-cue:hover{background:color-mix(in srgb,#000 14%,var(--accent))}
.btn-green{background:var(--accent);border-color:transparent;color:#fff;flex:1}   /* JS หน้า console อ้าง class นี้ */
.btn-green:hover{background:color-mix(in srgb,#000 14%,var(--accent))}
.btn-red{background:color-mix(in srgb,var(--live) 12%,transparent);border-color:transparent;color:var(--live);box-shadow:none}
.btn-red:hover{background:color-mix(in srgb,var(--live) 20%,transparent)}
button.out{background:transparent;border-color:color-mix(in srgb,var(--live) 40%,var(--line-soft));color:var(--live);box-shadow:none}

/* ---- การ์ด ---- */
.panel{background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-card)}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.panel-head h4{margin:0;font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.panel-head .tag{font:500 10.5px var(--sans);color:var(--dim);letter-spacing:.04em}
.panel-body{padding:13px 16px}
.sub{font-size:12px;color:var(--dim)}

/* ---- ตาราง ---- */
.ic-tbl{width:100%;border-collapse:collapse;font-size:13px}
.ic-tbl th{text-align:left;padding:7px 8px;color:var(--dim);font:600 11px var(--sans);
  letter-spacing:.04em;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.ic-tbl td{padding:9px 8px;border-bottom:1px solid var(--line-soft);vertical-align:top;line-height:1.55}
.ic-tbl td.n,.ic-tbl td.dt{font:11px var(--mono);color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.ic-tbl td.dt{color:var(--mute)}
.ic-tbl tr.sel td{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.ic-tbl button{padding:4px 11px;font-size:11px;white-space:nowrap}
.ic-tbl button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.ic-tbl button.out{background:transparent;border-color:color-mix(in srgb,var(--live) 40%,var(--line-soft));color:var(--live);box-shadow:none}

/* ---- segmented control (iOS) ---- */
.seg3{display:flex;gap:2px;border:1px solid var(--line-soft);border-radius:10px;padding:3px;background:var(--field)}
.seg3 button{flex:1;padding:7px 6px;border:0;background:transparent;box-shadow:none;
  color:var(--mute);font:600 12px var(--sans);cursor:pointer;border-radius:7px}
.seg3 button:first-child{border-left:0}
.seg3 button:hover{color:var(--ink);background:transparent}
.seg3 button.on{background:var(--seg);color:var(--ink);box-shadow:var(--shadow)}