/* =====================================================================
 * ระบบนัดหมาย BSRacing · เดโม (เลย์เอาต์ 2.1 / 2.2 / 2.3)
 * ธีม A–H แต่ละธีมมีโหมดมืด/สว่าง · สีและเงาอยู่ในตัวแปรของธีม
 * ส่วนประกอบด้านล่างใช้ตัวแปรร่วมกัน
 * ===================================================================== */
:root{
  --f-display:"Kanit","IBM Plex Sans Thai",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Thai","Kanit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --h-style:normal; --h-weight:600;
  --r:14px; --r-sm:10px; --pill-r:999px;
  --edge-w:1px;
  --logo-d:block; --logo-l:none; --logo-filter:none;
  --seg-on-bd:transparent;
  --glass:none;
  --row:26px;
}

/* ===================== A · Carbon Depth ===================== */
html[data-skin="a"][data-mode="dark"]{
  color-scheme:dark;
  --bg:#0E1016;
  --bg-layer:radial-gradient(900px 440px at 88% -140px,rgba(239,85,39,.22),rgba(239,85,39,0) 70%),linear-gradient(180deg,#181B24 0,#0E1016 620px);
  --fg:#EDEDEF; --fg2:#C6CDDA; --muted:#9AA4B8;
  --surface:linear-gradient(180deg,#272B37 0%,#1B1E27 100%); --surface-flat:#1F222C;
  --surface-2:linear-gradient(180deg,#2D3241 0%,#21252F 100%); --surface-2-flat:#262A35;
  --well:#0A0C11; --well-soft:rgba(0,0,0,.22);
  --well-sh:inset 0 2px 6px rgba(0,0,0,.7),inset 0 -1px 0 rgba(255,255,255,.05);
  --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.16); --edge:rgba(255,255,255,.075);
  --hl:inset 0 1px 0 rgba(255,255,255,.08);
  --sh1:0 4px 12px rgba(0,0,0,.45); --sh2:0 16px 36px rgba(0,0,0,.55); --sh-chip:0 3px 8px rgba(0,0,0,.4);
  --seg-on-sh:inset 0 1px 0 rgba(255,255,255,.1),0 3px 8px rgba(0,0,0,.45);
  --accent:#EF5527; --accent-2:#FF7A4D; --on-accent:#14161D; --accent-ink:#FF8A60; --accent-soft:rgba(239,85,39,.16);
  --btn:linear-gradient(180deg,#FF7A4D 0%,#EF5527 100%);
  --btn-sh:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(0,0,0,.18),0 8px 20px rgba(239,85,39,.38);
  --btn-sh-sm:inset 0 1px 0 rgba(255,255,255,.35),0 4px 10px rgba(239,85,39,.32);
  --sel-bg:linear-gradient(180deg,rgba(239,85,39,.28) 0%,rgba(239,85,39,.05) 78%),#1B1E27;
  --sel-sh:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px #EF5527,0 12px 28px rgba(239,85,39,.3);
  --ok:#3DBE8B; --ok-ink:#62D6A6; --ok-soft:rgba(61,190,139,.15); --ok-btn:linear-gradient(180deg,#5AD39F,#34B07E);
  --ok-sh:inset 0 1px 0 rgba(255,255,255,.4),0 6px 16px rgba(61,190,139,.28);
  --wait:#F2B33D; --wait-ink:#F6C766; --wait-soft:rgba(242,179,61,.15);
  --bad:#E5646B; --bad-ink:#F2939A; --bad-soft:rgba(229,100,107,.14); --bad-btn:linear-gradient(180deg,#F07A80,#DC5259);
  --bad-sh:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px rgba(229,100,107,.28);
  --walk:#55658A; --on-walk:#FFFFFF;
  --bar-bg:rgba(15,17,23,.9); --demo-bg:rgba(0,0,0,.32);
  --con-bg:linear-gradient(180deg,#2C1E16 0%,#21160F 100%); --con-fg:#F3E6DE; --con-muted:#D2B7A6;
  --con-border:#EF5527; --con-shadow:0 5px 0 #8E2F0E,0 12px 20px rgba(0,0,0,.45);
  --con-sel-bg:linear-gradient(180deg,#FF8150 0%,#EF5527 100%); --con-sel-fg:#1A0E07; --con-sel-muted:#24100A;
  --con-sel-shadow:0 2px 0 #8E2F0E,0 6px 14px rgba(239,85,39,.35);
  --zone-con-shadow:2px 2px 0 #8E2F0E;
  --knob:#E8EAF0;
  --logo-filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));
}
html[data-skin="a"][data-mode="light"]{
  color-scheme:light;
  --bg:#ECEEF2;
  --bg-layer:radial-gradient(900px 420px at 88% -140px,rgba(239,85,39,.16),rgba(239,85,39,0) 70%),linear-gradient(180deg,#F7F8FA 0,#ECEEF2 560px);
  --fg:#14161D; --fg2:#2E3445; --muted:#566074;
  --surface:linear-gradient(180deg,#FFFFFF 0%,#F5F6F9 100%); --surface-flat:#FFFFFF;
  --surface-2:linear-gradient(180deg,#FFFFFF 0%,#F0F2F6 100%); --surface-2-flat:#F6F7FA;
  --well:#E1E4EA; --well-soft:rgba(20,22,29,.04);
  --well-sh:inset 0 2px 5px rgba(20,22,29,.16),inset 0 -1px 0 rgba(255,255,255,.8);
  --line:rgba(20,22,29,.09); --line-2:rgba(20,22,29,.2); --edge:rgba(20,22,29,.09);
  --hl:inset 0 1px 0 rgba(255,255,255,.9);
  --sh1:0 1px 2px rgba(20,22,29,.08),0 6px 16px rgba(20,22,29,.08);
  --sh2:0 2px 4px rgba(20,22,29,.08),0 18px 36px rgba(20,22,29,.16);
  --sh-chip:0 1px 2px rgba(20,22,29,.1),0 3px 8px rgba(20,22,29,.07);
  --seg-on-sh:0 1px 2px rgba(20,22,29,.14),0 3px 8px rgba(20,22,29,.1);
  --accent:#EF5527; --accent-2:#FF7A4D; --on-accent:#14161D; --accent-ink:#B8410F; --accent-soft:rgba(239,85,39,.12);
  --btn:linear-gradient(180deg,#FF7A4D 0%,#EF5527 100%);
  --btn-sh:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.14),0 8px 18px rgba(239,85,39,.32);
  --btn-sh-sm:inset 0 1px 0 rgba(255,255,255,.4),0 3px 8px rgba(239,85,39,.25);
  --sel-bg:linear-gradient(180deg,#FFF0E8 0%,#FFFFFF 80%);
  --sel-sh:0 0 0 2px #EF5527,0 12px 26px rgba(239,85,39,.22);
  --ok:#2F9E72; --ok-ink:#1D6E4E; --ok-soft:rgba(47,158,114,.13); --ok-btn:linear-gradient(180deg,#5AD39F,#34B07E);
  --ok-sh:inset 0 1px 0 rgba(255,255,255,.45),0 4px 12px rgba(47,158,114,.25);
  --wait:#D9971A; --wait-ink:#7A5200; --wait-soft:rgba(242,179,61,.2);
  --bad:#D2454D; --bad-ink:#A3262E; --bad-soft:rgba(210,69,77,.11); --bad-btn:linear-gradient(180deg,#F07A80,#DC5259);
  --bad-sh:inset 0 1px 0 rgba(255,255,255,.4),0 4px 12px rgba(210,69,77,.22);
  --walk:#55658A; --on-walk:#FFFFFF;
  --bar-bg:rgba(255,255,255,.93); --demo-bg:rgba(255,255,255,.55);
  --con-bg:linear-gradient(180deg,#FFF5EE 0%,#FFE8DA 100%); --con-fg:#2A140A; --con-muted:#6B3A1F;
  --con-border:#EF5527; --con-shadow:0 5px 0 #C2410C,0 10px 18px rgba(194,65,12,.16);
  --con-sel-bg:linear-gradient(180deg,#FF8150 0%,#EF5527 100%); --con-sel-fg:#1A0E07; --con-sel-muted:#24100A;
  --con-sel-shadow:0 2px 0 #9A3412,0 6px 12px rgba(239,85,39,.28);
  --zone-con-shadow:2px 2px 0 #FFD2BD;
  --knob:#FFFFFF;
  --logo-d:none; --logo-l:block;
}

/* ===================== B · Glass HUD ===================== */
html[data-skin="b"]{ --r:18px; --r-sm:12px; --glass:blur(16px) saturate(150%); }
html[data-skin="b"][data-mode="dark"]{
  color-scheme:dark;
  --bg:#090B11; --bg-layer:none;
  --fx:radial-gradient(520px 520px at 108% -6%,rgba(239,85,39,.5),rgba(239,85,39,0) 70%),radial-gradient(560px 560px at -18% 52%,rgba(52,86,170,.55),rgba(52,86,170,0) 70%),radial-gradient(420px 420px at 104% 104%,rgba(239,85,39,.3),rgba(239,85,39,0) 70%),#090B11;
  --fg:#F2F3F6; --fg2:#D3D8E2; --muted:#AAB2C2;
  --surface:rgba(255,255,255,.065); --surface-flat:#141824; --surface-2:rgba(255,255,255,.09); --surface-2-flat:#1C2130;
  --well:rgba(0,0,0,.3); --well-soft:rgba(255,255,255,.04); --well-sh:inset 0 1px 3px rgba(0,0,0,.45);
  --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.2); --edge:rgba(255,255,255,.16);
  --hl:inset 0 1px 0 rgba(255,255,255,.18);
  --sh1:0 10px 26px rgba(0,0,0,.35); --sh2:0 20px 44px rgba(0,0,0,.5); --sh-chip:0 4px 12px rgba(0,0,0,.25);
  --seg-on-sh:inset 0 1px 0 rgba(255,255,255,.25),0 4px 12px rgba(0,0,0,.3);
  --accent:#EF5527; --accent-2:#FF7A4D; --on-accent:#14161D; --accent-ink:#FF9A74; --accent-soft:rgba(239,85,39,.2);
  --btn:linear-gradient(180deg,#FF7A4D,#EF5527);
  --btn-sh:inset 0 1px 0 rgba(255,255,255,.5),0 0 26px rgba(239,85,39,.55);
  --btn-sh-sm:inset 0 1px 0 rgba(255,255,255,.45),0 0 16px rgba(239,85,39,.5);
  --sel-bg:rgba(239,85,39,.2); --sel-sh:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 3px rgba(239,85,39,.22),0 12px 30px rgba(239,85,39,.32);
  --ok:#3DBE8B; --ok-ink:#6FDCAE; --ok-soft:rgba(61,190,139,.18); --ok-btn:linear-gradient(180deg,#5AD39F,#34B07E); --ok-sh:inset 0 1px 0 rgba(255,255,255,.45),0 0 18px rgba(61,190,139,.35);
  --wait:#F2B33D; --wait-ink:#F6C766; --wait-soft:rgba(242,179,61,.18);
  --bad:#E5646B; --bad-ink:#F5A0A6; --bad-soft:rgba(229,100,107,.18); --bad-btn:linear-gradient(180deg,#F07A80,#DC5259); --bad-sh:inset 0 1px 0 rgba(255,255,255,.4),0 0 18px rgba(229,100,107,.35);
  --walk:#5A6C96; --on-walk:#FFFFFF;
  --bar-bg:rgba(14,17,26,.55); --demo-bg:rgba(0,0,0,.25);
  --con-bg:rgba(239,85,39,.13); --con-fg:#FBEDE6; --con-muted:#E5C7B8; --con-border:rgba(255,138,96,.9);
  --con-shadow:0 5px 0 rgba(142,47,14,.9),0 14px 26px rgba(0,0,0,.35);
  --con-sel-bg:linear-gradient(180deg,#FF8150,#EF5527); --con-sel-fg:#1A0E07; --con-sel-muted:#24100A; --con-sel-shadow:0 2px 0 #8E2F0E,0 0 22px rgba(239,85,39,.5);
  --zone-con-shadow:0 0 12px rgba(239,85,39,.6);
  --knob:#F2F3F6;
}
html[data-skin="b"][data-mode="light"]{
  color-scheme:light;
  --bg:#EDF0F6; --bg-layer:none;
  --fx:radial-gradient(520px 520px at 108% -6%,rgba(239,85,39,.32),rgba(239,85,39,0) 70%),radial-gradient(560px 560px at -18% 52%,rgba(80,120,210,.3),rgba(80,120,210,0) 70%),radial-gradient(420px 420px at 104% 104%,rgba(239,85,39,.2),rgba(239,85,39,0) 70%),#EDF0F6;
  --fg:#121521; --fg2:#2C3346; --muted:#4F586C;
  --surface:rgba(255,255,255,.6); --surface-flat:#FFFFFF; --surface-2:rgba(255,255,255,.72); --surface-2-flat:#F6F7FB;
  --well:rgba(20,30,60,.07); --well-soft:rgba(255,255,255,.5); --well-sh:inset 0 1px 3px rgba(20,30,60,.12);
  --line:rgba(20,30,60,.1); --line-2:rgba(20,30,60,.2); --edge:rgba(255,255,255,.9);
  --hl:inset 0 1px 0 rgba(255,255,255,.9);
  --sh1:0 8px 24px rgba(30,40,80,.12); --sh2:0 18px 40px rgba(30,40,80,.18); --sh-chip:0 3px 10px rgba(30,40,80,.08);
  --seg-on-sh:0 2px 8px rgba(30,40,80,.14);
  --accent:#EF5527; --accent-2:#FF7A4D; --on-accent:#14161D; --accent-ink:#B23C0E; --accent-soft:rgba(239,85,39,.14);
  --btn:linear-gradient(180deg,#FF7A4D,#EF5527);
  --btn-sh:inset 0 1px 0 rgba(255,255,255,.5),0 6px 20px rgba(239,85,39,.4);
  --btn-sh-sm:inset 0 1px 0 rgba(255,255,255,.45),0 3px 12px rgba(239,85,39,.35);
  --sel-bg:rgba(255,236,226,.78); --sel-sh:0 0 0 2px rgba(239,85,39,.85),0 12px 28px rgba(239,85,39,.22);
  --ok:#2F9E72; --ok-ink:#1D6E4E; --ok-soft:rgba(47,158,114,.15); --ok-btn:linear-gradient(180deg,#5AD39F,#34B07E); --ok-sh:0 4px 14px rgba(47,158,114,.3);
  --wait:#D9971A; --wait-ink:#6E4A00; --wait-soft:rgba(242,179,61,.24);
  --bad:#D2454D; --bad-ink:#9C2229; --bad-soft:rgba(210,69,77,.13); --bad-btn:linear-gradient(180deg,#F07A80,#DC5259); --bad-sh:0 4px 14px rgba(210,69,77,.28);
  --walk:#4F6290; --on-walk:#FFFFFF;
  --bar-bg:rgba(255,255,255,.62); --demo-bg:rgba(255,255,255,.4);
  --con-bg:rgba(255,240,230,.65); --con-fg:#2A140A; --con-muted:#6B3A1F; --con-border:#EF5527;
  --con-shadow:0 5px 0 #C2410C,0 12px 22px rgba(194,65,12,.15);
  --con-sel-bg:linear-gradient(180deg,#FF8150,#EF5527); --con-sel-fg:#1A0E07; --con-sel-muted:#24100A; --con-sel-shadow:0 2px 0 #9A3412,0 0 18px rgba(239,85,39,.35);
  --zone-con-shadow:0 0 10px rgba(239,85,39,.3);
  --knob:#FFFFFF;
  --logo-d:none; --logo-l:block;
}

/* ===================== D · Race Plate ===================== */
html[data-skin="d"],html:not([data-skin]){ --r:6px; --r-sm:4px; --pill-r:4px; --h-style:italic; --h-weight:700; }
html[data-skin="d"][data-mode="dark"]{
  color-scheme:dark;
  --bg:#111317;
  --bg-layer:repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 2px,rgba(255,255,255,0) 2px 16px),radial-gradient(700px 360px at 100% 0,rgba(239,85,39,.14),rgba(239,85,39,0) 70%);
  --fg:#F1F1F3; --fg2:#CDD2DC; --muted:#A3ABBA;
  --surface:#1B1E25; --surface-flat:#1B1E25; --surface-2:#242832; --surface-2-flat:#242832;
  --well:#0B0C0F; --well-soft:rgba(0,0,0,.25); --well-sh:inset 0 2px 5px rgba(0,0,0,.75);
  --line:#2A2F39; --line-2:#3C4250; --edge:#2E333E;
  --hl:inset 0 0 0 transparent;
  --sh1:0 3px 0 rgba(0,0,0,.45); --sh2:0 5px 0 rgba(0,0,0,.5),0 16px 30px rgba(0,0,0,.4); --sh-chip:0 2px 0 rgba(0,0,0,.45);
  --seg-on-sh:0 2px 0 rgba(0,0,0,.55);
  --accent:#EF5527; --accent-2:#FF7A4D; --on-accent:#111317; --accent-ink:#FF8A60; --accent-soft:rgba(239,85,39,.16);
  --btn:#EF5527; --btn-sh:0 3px 0 #9A3412; --btn-sh-sm:0 2px 0 #9A3412;
  --sel-bg:#1B1E25; --sel-sh:0 0 0 2px #EF5527,0 3px 0 #9A3412;
  --ok:#3DBE8B; --ok-ink:#62D6A6; --ok-soft:rgba(61,190,139,.15); --ok-btn:#3DBE8B; --ok-sh:0 3px 0 #1D6E4E;
  --wait:#F2B33D; --wait-ink:#F6C766; --wait-soft:rgba(242,179,61,.15);
  --bad:#E5646B; --bad-ink:#F2939A; --bad-soft:rgba(229,100,107,.14); --bad-btn:#E5646B; --bad-sh:0 3px 0 #9B2C33;
  --walk:#55658A; --on-walk:#FFFFFF;
  --bar-bg:rgba(17,19,23,.95); --demo-bg:rgba(0,0,0,.35);
  --plate-bg:#F4F4F2; --plate-fg:#111317; --plate-sel-bg:#EF5527; --plate-sel-fg:#111317;
  --con-bg:#211812; --con-fg:#F3E6DE; --con-muted:#D2B7A6; --con-border:#EF5527; --con-shadow:0 5px 0 #8E2F0E;
  --con-sel-bg:#EF5527; --con-sel-fg:#120A05; --con-sel-muted:#24100A; --con-sel-shadow:0 2px 0 #8E2F0E;
  --zone-con-shadow:2px 2px 0 #8E2F0E;
  --stripe:#EF5527; --stripe-2:rgba(255,255,255,.85);
  --knob:#E8EAF0;
}
html[data-skin="d"][data-mode="light"],html:not([data-skin]){
  color-scheme:light;
  --bg:#EFEDE9;
  --bg-layer:repeating-linear-gradient(135deg,rgba(17,19,23,.035) 0 2px,rgba(17,19,23,0) 2px 16px);
  --fg:#111317; --fg2:#2A2F3A; --muted:#545B69;
  --surface:#FFFFFF; --surface-flat:#FFFFFF; --surface-2:#FFFFFF; --surface-2-flat:#F6F4F0;
  --well:#E2DFD9; --well-soft:#F4F2EE; --well-sh:inset 0 2px 4px rgba(17,19,23,.18);
  --line:rgba(17,19,23,.13); --line-2:rgba(17,19,23,.3); --edge:#111317; --edge-w:1.5px;
  --hl:inset 0 0 0 transparent;
  --sh1:3px 3px 0 #111317; --sh2:4px 4px 0 #111317,0 16px 30px rgba(17,19,23,.14); --sh-chip:2px 2px 0 #111317;
  --seg-on-sh:2px 2px 0 #111317; --seg-on-bd:#111317;
  --accent:#EF5527; --accent-2:#FF7A4D; --on-accent:#111317; --accent-ink:#B8410F; --accent-soft:rgba(239,85,39,.12);
  --btn:#EF5527; --btn-sh:3px 3px 0 #111317; --btn-sh-sm:2px 2px 0 #111317;
  --sel-bg:#FFF2EA; --sel-sh:3px 3px 0 #EF5527;
  --ok:#2F9E72; --ok-ink:#1D6E4E; --ok-soft:rgba(47,158,114,.13); --ok-btn:#3DBE8B; --ok-sh:2px 2px 0 #111317;
  --wait:#D9971A; --wait-ink:#7A5200; --wait-soft:rgba(242,179,61,.22);
  --bad:#D2454D; --bad-ink:#A3262E; --bad-soft:rgba(210,69,77,.11); --bad-btn:#E5646B; --bad-sh:2px 2px 0 #111317;
  --walk:#4A5A7E; --on-walk:#FFFFFF;
  --bar-bg:rgba(255,255,255,.96); --demo-bg:rgba(255,255,255,.55);
  --plate-bg:#111317; --plate-fg:#FFFFFF; --plate-sel-bg:#EF5527; --plate-sel-fg:#111317;
  --con-bg:#FFF1E6; --con-fg:#2A140A; --con-muted:#6B3A1F; --con-border:#111317; --con-shadow:0 5px 0 #111317;
  --con-sel-bg:#EF5527; --con-sel-fg:#120A05; --con-sel-muted:#24100A; --con-sel-shadow:0 2px 0 #111317;
  --zone-con-shadow:2px 2px 0 #111317;
  --stripe:#EF5527; --stripe-2:#111317;
  --knob:#FFFFFF;
  --logo-d:none; --logo-l:block;
}

/* =====================================================================
 * พื้นฐาน
 * ===================================================================== */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%}
html.sheet-open{overflow:hidden}
body{position:relative;margin:0;min-height:100vh;color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.55;
  background:var(--bg-layer);background-repeat:no-repeat;-webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--fx,none)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,p{margin:0}
.page{padding:0 max(16px,env(safe-area-inset-right,0px)) 150px max(16px,env(safe-area-inset-left,0px))}
.cwrap{max-width:560px;margin:0 auto}
.awrap{max-width:1140px;margin:0 auto}
.muted{color:var(--muted)}
.hint{color:var(--muted);font-size:12.5px}
.center{text-align:center}
.err{color:var(--bad-ink);font-size:13.5px;margin-top:10px}
.foot{text-align:center;color:var(--muted);font-size:12px;margin-top:34px}
.minw0{min-width:0}
.loading{display:flex;gap:10px;align-items:center;justify-content:center;color:var(--muted);padding:30px 0;font-size:14px}
.loading::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--accent);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.empty{padding:18px;text-align:center;color:var(--muted);font-size:14px;border:1px dashed var(--line-2);border-radius:var(--r);background:var(--well-soft)}

/* ---------- หัวหน้า + โลโก้ ---------- */
.brandbar{padding:14px 0 10px}
.brand-in{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{height:44px;width:auto;filter:var(--logo-filter)}
.logo-d{display:var(--logo-d)}
.logo-l{display:var(--logo-l)}
.hello{font-size:13.5px;color:var(--muted)}
.hello b{color:var(--fg);font-weight:600}

/* ---------- ปุ่ม ---------- */
.btn{appearance:none;border:0;border-radius:12px;padding:12px 20px;font:var(--h-style) 600 16px/1.2 var(--f-display);letter-spacing:.2px;
  color:var(--btn-fg,var(--on-accent));background:var(--btn);box-shadow:var(--btn-sh);transition:transform .08s,box-shadow .15s,filter .15s}
.btn:hover:not(:disabled){filter:brightness(1.06)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{background:var(--surface-2-flat);color:var(--muted);box-shadow:none;opacity:.85}
.btn.ghost{background:var(--surface-2);color:var(--fg);border:var(--edge-w) solid var(--edge);box-shadow:var(--hl),var(--sh-chip)}
.btn.ghost.bad{color:var(--bad-ink)}
.btn.ok{background:var(--ok-btn);color:#0B1A13;box-shadow:var(--ok-sh)}
.btn.danger{background:var(--bad-btn);color:#1A0708;box-shadow:var(--bad-sh)}
.btn.sm{padding:8px 14px;font-size:14px;border-radius:10px}
.linkbtn{appearance:none;border:0;background:none;color:var(--accent-ink);font:600 13px var(--f-body);padding:4px 0;text-decoration:underline;text-underline-offset:3px}

/* ---------- ปุ่มกลุ่ม ---------- */
.seg{display:flex;gap:3px;padding:4px;border-radius:calc(var(--r) + 2px);background:var(--well);box-shadow:var(--well-sh)}
.seg button{flex:1;appearance:none;border:var(--edge-w) solid transparent;background:transparent;color:var(--muted);padding:9px 10px;border-radius:var(--r-sm);font:500 14px var(--f-body);white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--surface-2);color:var(--fg);font-weight:600;box-shadow:var(--seg-on-sh);border-color:var(--seg-on-bd)}
.seg.scroll{overflow-x:auto;scrollbar-width:none}
.seg.scroll::-webkit-scrollbar{display:none}
.seg.scroll button{flex:1 0 auto}
.ctabs{margin:6px 0 2px}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:5px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:600 12px/1 var(--f-body);vertical-align:1px}

/* ---------- การ์ด ---------- */
.card{background:var(--surface);border:var(--edge-w) solid var(--edge);border-radius:var(--r);box-shadow:var(--hl),var(--sh1)}
.list{display:grid;gap:10px}
@media (min-width:900px){.list.cols{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));align-items:start}}

/* ---------- ตัวบอกขั้นตอน (2.1) ---------- */
.prog{display:flex;align-items:center;gap:6px;margin:16px 0 2px}
.prog i{flex:1 1 0;height:6px;border-radius:999px;background:var(--well);box-shadow:var(--well-sh);transition:background .25s}
.prog i.on{background:var(--chip-on,var(--btn));box-shadow:0 0 10px rgba(239,85,39,.35)}
.prog.go i{background:var(--ok-btn);box-shadow:0 0 10px rgba(61,190,139,.4)}
.prog-l{flex:0 0 auto;margin-left:8px;font-size:12.5px;color:var(--muted)}

/* ---------- หัวข้อขั้นตอน ---------- */
.sh{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:26px 0 12px;font:var(--h-style) var(--h-weight) 18px/1.3 var(--f-display)}
.sh b{font:italic 700 14px/1 var(--f-display);color:var(--accent-ink)}
.sh small{font:400 12.5px var(--f-body);color:var(--muted)}
.sh.tight{margin:18px 0 10px}
.subh{margin:24px 0 9px;font-size:12.5px;color:var(--muted)}

/* ---------- โซนเครื่อง ---------- */
.zone{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:14px 0 9px;font:var(--h-style) 700 13px/1.2 var(--f-display);letter-spacing:1.6px;color:var(--fg2)}
.zone small{font:400 12px var(--f-body);letter-spacing:0;color:var(--muted);text-shadow:none}
.zone.sim::before{content:"";width:22px;height:6px;border-radius:1px;background:var(--accent);transform:skewX(-24deg)}
.zone.con{color:var(--accent-ink);font-size:15px;letter-spacing:1px;text-shadow:var(--zone-con-shadow)}
.stations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stations.compact{gap:8px}
.st{position:relative;appearance:none;text-align:left;display:flex;flex-direction:column;gap:1px;padding:12px;min-height:80px;min-width:0;
  border-radius:var(--r);font:inherit;color:var(--fg);transition:transform .08s,box-shadow .15s,background .15s}
.stations.compact .st{min-height:56px;padding:9px 11px}
.stations.compact .st-spec{display:none}
.stations.compact .st-price{margin-top:2px}
.st-name{font:var(--h-style) 600 16px/1.25 var(--f-display);padding-right:20px}
.st-spec{font-size:12px;line-height:1.35;color:var(--muted)}
.st-price{margin-top:5px;font-size:12.5px;color:var(--fg2);font-variant-numeric:tabular-nums}
.st-tag{align-self:flex-start;justify-self:start;margin-top:5px;padding:1px 7px;border-radius:999px;font-size:11px;background:var(--accent-soft);color:var(--accent-ink)}
.st-plate{display:none}
.st-check{position:absolute;top:9px;right:9px;width:20px;height:20px;border-radius:50%;display:none;place-items:center;background:var(--accent);color:var(--on-accent)}
.st[aria-pressed="true"] .st-check{display:grid}
.st-sim{background:var(--surface);border:var(--edge-w) solid var(--edge);box-shadow:var(--hl),var(--sh1)}
.st-sim[aria-pressed="true"]{background:var(--sel-bg);border-color:var(--accent);box-shadow:var(--sel-sh)}
.st-sim[aria-pressed="true"] .st-name{color:var(--accent-ink)}
.st-con{background:var(--con-bg);color:var(--con-fg);border:3px solid var(--con-border);border-radius:calc(var(--r) - 2px);box-shadow:var(--con-shadow);padding:10px 12px 12px}
.st-con .st-spec,.st-con .st-price{color:var(--con-muted)}
.st-ico{width:32px;height:32px;margin-bottom:7px;border-radius:8px;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);box-shadow:inset 0 -3px 0 rgba(0,0,0,.22)}
/* การ์ด CON แบบกะทัดรัด (2.2 / 2.3): ไอคอนเล็กมุมขวาบน เลือกแล้วเปลี่ยนเป็นเครื่องหมายถูก */
.stations.compact .st-con .st-ico,.st-con.mini .st-ico{position:absolute;top:8px;right:8px;width:22px;height:22px;margin:0;border-radius:6px}
.stations.compact .st-con .st-ico svg,.st-con.mini .st-ico svg{width:15px;height:15px}
.stations.compact .st-con[aria-pressed="true"] .st-ico,.st-con.mini[aria-pressed="true"] .st-ico{display:none}
.st-con[aria-pressed="true"]{background:var(--con-sel-bg);color:var(--con-sel-fg);transform:translateY(3px);box-shadow:var(--con-sel-shadow)}
.st-con[aria-pressed="true"] .st-spec,.st-con[aria-pressed="true"] .st-price,.st-con[aria-pressed="true"] .st-av{color:var(--con-sel-muted)}
.st-con[aria-pressed="true"] .st-ico{background:var(--con-sel-fg);color:var(--accent-2)}
.st-con .st-check{background:var(--con-sel-fg);color:var(--accent-2)}

/* ---------- ชิป ---------- */
.chip{appearance:none;border:var(--edge-w) solid var(--edge);background:var(--surface-2);color:var(--fg);box-shadow:var(--hl),var(--sh-chip);transition:transform .08s,background .15s}
.chip:active:not(:disabled){transform:translateY(1px)}
.chip[aria-pressed="true"]{background:var(--chip-on,var(--btn));color:var(--chip-on-fg,var(--on-accent));border-color:transparent;box-shadow:var(--chip-on-sh,var(--btn-sh-sm))}
.chip:disabled{opacity:.4;text-decoration:line-through;box-shadow:none}
.dates{display:flex;gap:7px;overflow-x:auto;padding:2px 3px 9px;scrollbar-width:none}
.dates::-webkit-scrollbar{display:none}
.date{flex:0 0 auto;width:56px;padding:7px 0;border-radius:var(--r-sm);display:flex;flex-direction:column;align-items:center}
.date .w{font-size:11.5px;white-space:nowrap}
.date .d{font:var(--h-style) 600 21px/1.15 var(--f-display)}
.date .m{font-size:10.5px;white-space:nowrap}
.date:not([aria-pressed="true"]) .w,.date:not([aria-pressed="true"]) .m{color:var(--muted)}
.slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.slots.dense{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.slot{padding:10px 0;border-radius:var(--r-sm);font:600 14.5px/1 var(--f-mono)}
.slots.dense .slot{padding:9px 0;font-size:14px}
.period{grid-column:1/-1;font-size:12px;color:var(--muted);margin-top:6px}
.period:first-child{margin-top:0}
.durs{display:flex;flex-wrap:wrap;gap:7px}
.dur{padding:9px 16px;border-radius:var(--pill-r);font:600 14px var(--f-body)}

/* ---------- ช่องกรอก ---------- */
.fields{display:grid;gap:10px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px}
.field label{display:block;margin-bottom:5px;font-size:13px;color:var(--muted)}
.reqtag{margin-left:5px;padding:0 6px;border-radius:4px;font-size:11px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft)}
.inp{width:100%;min-height:44px;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--well);color:var(--fg);font:16px var(--f-body);box-shadow:var(--well-sh)}
.inp.sm{min-height:40px;padding:7px 10px;font-size:15px}
.inp.w-auto{width:auto;max-width:100%}
.inp:disabled{opacity:.5}
.note{margin-top:12px;padding:10px 12px;border-radius:var(--r-sm);font-size:13px;color:var(--fg2);background:var(--accent-soft)}
.note.plain{background:var(--well-soft);border:1px solid var(--line)}
.note.warn{background:var(--wait-soft);color:var(--fg)}

/* ---------- แถบล่างจอ ---------- */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--bar-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:var(--edge-w) solid var(--edge);box-shadow:0 -10px 30px rgba(0,0,0,.25);
  padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.cbar-in{max-width:560px;margin:0 auto;display:flex;align-items:center;gap:10px}
.sum{flex:1;min-width:0;line-height:1.35}
.sum b{display:block;font:var(--h-style) 600 16px/1.3 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sum span{font-size:12.5px;color:var(--muted)}

/* ---------- หลังส่งคำขอ ---------- */
.done{text-align:center;padding:26px 0 14px}
.done-ic{width:70px;height:70px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:var(--wait-soft);color:var(--wait-ink)}
.done-ic.ok{background:var(--ok-soft);color:var(--ok-ink)}
.done h1{font:var(--h-style) 700 25px/1.25 var(--f-display)}
.done p{margin-top:6px;color:var(--muted)}
.done-acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}

/* ---------- รายการของลูกค้า ---------- */
.req{padding:13px 14px;display:grid;gap:9px}
.req-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.req-when{font:var(--h-style) 600 16px/1.3 var(--f-display)}
.req-id{font:500 12px var(--f-mono);color:var(--muted);white-space:nowrap}
.req-items{display:grid;gap:6px}
.req-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-sm);background:var(--well-soft);border:1px solid var(--line)}
.req-st{font-weight:600;font-size:14px}
.req-st small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.req-meta{font-size:13px;color:var(--muted)}
.req-foot{display:flex;justify-content:space-between;align-items:center;gap:6px 10px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}

/* ---------- ป้ายสถานะ ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.pending{background:var(--wait-soft);color:var(--wait-ink)}
.pill.approved{background:var(--ok-soft);color:var(--ok-ink)}
.pill.rejected,.pill.expired,.pill.cancelled{background:var(--bad-soft);color:var(--bad-ink)}
.pill.online{background:var(--accent-soft);color:var(--accent-ink)}
.pill.walkin{background:var(--well-soft);color:var(--fg2);border:1px solid var(--line)}

/* =====================================================================
 * หน้าแอดมิน
 * ===================================================================== */
.me{display:flex;align-items:center;gap:8px;font-size:14px}
.av{width:32px;height:32px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:var(--edge-w) solid var(--edge);box-shadow:var(--hl),var(--sh-chip);font-weight:600;font-size:13px}
.av.lg{width:58px;height:58px;font-size:22px}
.role{padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--well-soft);color:var(--fg2);border:1px solid var(--line);white-space:nowrap}
.role.ceo{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}
.lock{display:inline-grid;color:var(--muted)}
.lockt{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted)}
.atabs{margin:6px 0 12px;max-width:640px}
.kpis{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 2px}
.kpi{padding:9px 16px;display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--muted)}
.kpi b{font:var(--h-style) 600 22px/1 var(--f-display);color:var(--fg)}
.kpi.hot b{color:var(--wait-ink)}
.agrid{display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);gap:22px;align-items:start}
.h2{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:24px 0 10px;font:var(--h-style) var(--h-weight) 17px/1.3 var(--f-display)}
.h2 small{font:400 12.5px var(--f-body);color:var(--muted)}
.h2.first{margin-top:14px}
.pcard{padding:13px 14px;display:grid;gap:6px}
.pc-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pc-id{font:600 13px var(--f-mono);color:var(--fg2)}
.cd{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--wait-ink)}
.cd.urgent{color:var(--bad-ink)}
.when{font-size:14px;font-variant-numeric:tabular-nums}
.when b{font-weight:600}
.meta{font-size:13px;color:var(--muted)}
.mone{font:var(--h-style) 600 16px/1.3 var(--f-display);margin-top:2px}
.mlist{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.mitem{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:var(--r-sm);background:var(--well-soft);border:1px solid var(--line-2);font:600 13.5px var(--f-body);cursor:pointer;user-select:none}
.mitem input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.confirm{display:grid;gap:9px;margin-top:4px;padding:11px 12px;border-radius:var(--r-sm);background:var(--bad-soft)}
.confirm p{font-size:13.5px}
.confirm .hint{font-size:12.5px}
.by{font-size:12.5px;line-height:1.55;color:var(--fg2)}
.by b{font-weight:600;color:var(--fg)}
.lcard{padding:12px 14px;display:grid;gap:5px}
.lcard .head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.lcard.editing{box-shadow:var(--sel-sh);border-color:var(--accent);gap:10px}
.where{font:var(--h-style) 600 16px/1.3 var(--f-display)}
.form{padding:14px;display:grid;gap:11px}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--muted)}
.legend .lg{display:inline-block;width:12px;height:12px;margin-right:6px;border-radius:3px;vertical-align:-2px}
.legend .lg.online{background:var(--chip-on,var(--accent))}
.legend .lg.walkin{background:var(--walk)}
.legend .lg.pending{background:var(--wait-soft);outline:1px dashed var(--wait);outline-offset:-1px}
.legend .lg.closed{background:repeating-linear-gradient(135deg,var(--well-soft) 0 3px,var(--line) 3px 6px);outline:1px dashed var(--line-2);outline-offset:-1px}
.closed,.rows{margin-top:10px;overflow:hidden}
.closed summary{padding:11px 14px;font-size:13.5px;color:var(--muted);cursor:pointer}
.crow{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:9px 14px;border-top:1px solid var(--line);font-size:13px}
.rows .crow:first-child{border-top:0}
.split{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:22px;align-items:start}

/* ---------- ตารางเวลาแนวนอน (2.1 / 2.2) ---------- */
.tl{overflow-x:auto;background:var(--surface-flat)}
.tl-in{position:relative}
.tl-row{display:grid;grid-template-columns:92px 1fr;min-height:42px;border-top:1px solid var(--line)}
.tl-row:first-child{border-top:0}
.tl-name{position:sticky;left:0;z-index:2;background:var(--surface-flat);padding:11px 10px;border-right:1px solid var(--line);font:600 12.5px var(--f-body);white-space:nowrap}
.tl-track{position:relative;background-image:repeating-linear-gradient(90deg,transparent 0 55px,var(--line) 55px 56px)}
.tl-hours .tl-track{background:none}
.tl-hours span{position:absolute;top:12px;padding-left:4px;font:500 11px var(--f-mono);color:var(--muted)}
.blk{position:absolute;top:6px;bottom:6px;appearance:none;border:0;border-radius:6px;padding:2px 7px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left;
  font:600 11.5px/1.3 var(--f-body);color:var(--chip-on-fg,var(--on-accent));background:var(--chip-on,var(--btn));box-shadow:var(--chip-on-sh,var(--btn-sh-sm))}
.blk:hover,.bblk:hover{filter:brightness(1.08)}
.blk.walkin,.bblk.walkin{background:var(--walk);color:var(--on-walk);box-shadow:none}
.blk.closed,.bblk.closed{background:repeating-linear-gradient(135deg,var(--well-soft) 0 6px,var(--line) 6px 12px);color:var(--muted);box-shadow:none;cursor:default;outline:1px dashed var(--line-2);outline-offset:-1px}
.blk.closed:hover{filter:none}
.pill.closed{background:var(--well-soft);color:var(--muted);border:1px dashed var(--line-2)}
.lcard.closedblk{border-style:dashed}
.banrow .who small{white-space:normal}
.confirm .field{display:grid;gap:4px}
.blk.pending,.bblk.pending{background:repeating-linear-gradient(135deg,var(--wait-soft) 0 6px,rgba(242,179,61,.32) 6px 12px);color:var(--wait-ink);outline:1px dashed var(--wait);outline-offset:-1px;box-shadow:none}
.now{position:absolute;top:0;bottom:0;width:2px;z-index:1;background:var(--accent);box-shadow:0 0 8px rgba(239,85,39,.7)}

/* ---------- ตั้งค่า ---------- */
.setgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:6px}
.setcard{padding:2px 16px 10px}
.setcard.wide{grid-column:1/-1}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.h2 + .setrow{border-top:0}
.lbl{display:grid;gap:1px}
.lbl span,.lbl label{font-weight:600;font-size:14.5px;color:var(--fg);margin:0}
.lbl small{font-size:12.5px;color:var(--muted)}
.autorow{display:grid;grid-template-columns:minmax(110px,1fr) auto auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.h2 + .autorow{border-top:0}
.autorow .an{font-weight:600;font-size:14.5px}
.times{display:flex;align-items:center;gap:8px}
.sw{position:relative;flex:0 0 auto;width:50px;height:30px;border-radius:999px;border:0;padding:0;background:var(--well);box-shadow:var(--well-sh);transition:background .18s}
.sw::after{content:"";position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:var(--knob);box-shadow:0 2px 5px rgba(0,0,0,.4);transition:transform .18s}
.sw[aria-checked="true"]{background:var(--accent)}
.sw[aria-checked="true"]::after{transform:translateX(20px);background:#FFFFFF}
.savebar{position:sticky;bottom:12px;z-index:5;margin-top:14px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px}
.savebar .acts{margin-top:0}

/* ---------- ผู้ใช้ ---------- */
.urow{display:flex;align-items:center;gap:10px;padding:10px 12px;flex-wrap:wrap}
.urow .who{flex:1 1 150px;min-width:0;display:grid}
.urow .who span{font-weight:600}
.urow small{font-size:12.5px;color:var(--muted)}
.uctrl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.perm{overflow-x:auto}
.perm table{width:100%;border-collapse:collapse;font-size:13.5px}
.perm th,.perm td{padding:9px 12px;text-align:center;border-top:1px solid var(--line)}
.perm th:first-child,.perm td:first-child{text-align:left}
.perm thead th{border-top:0;font-size:12.5px;font-weight:600;color:var(--muted)}
.perm .yes{color:var(--ok-ink);font-weight:700}
.perm .no{color:var(--muted)}
.log{max-height:640px;overflow:auto}
.log div{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:9px 14px;border-top:1px solid var(--line);font-size:13px}
.log div:first-child{border-top:0}
.log time{padding-top:1px;font:500 12px var(--f-mono);color:var(--muted)}
.gate{max-width:420px;margin:30px auto 0;padding:26px 20px;display:grid;gap:12px;justify-items:center;text-align:center}
.gate h1{font:var(--h-style) 700 22px/1.3 var(--f-display)}
.blockedgate p{margin:0;color:var(--muted);font-size:14px;max-width:32ch}

/* ---------- ข้อความเด้ง (จำลอง LINE) ---------- */
.toasts{position:fixed;z-index:60;top:calc(10px + env(safe-area-inset-top,0px));left:12px;right:12px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
.toast{pointer-events:auto;width:min(390px,100%);display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;cursor:pointer;
  background:#FFFFFF;color:#15171C;box-shadow:0 14px 34px rgba(0,0,0,.32),0 0 0 1px rgba(0,0,0,.06);font:14px/1.45 var(--f-body)}
.toast p{white-space:pre-line}
.t-ic{flex:0 0 30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#06C755;color:#FFFFFF}
.t-tt{margin-bottom:1px;font-size:12px;font-weight:600;color:#5A606C}
.toast.ok,.toast.err{background:var(--surface-flat);color:var(--fg);box-shadow:var(--sh2),0 0 0 1px var(--ok)}
.toast.err{box-shadow:var(--sh2),0 0 0 1px var(--bad)}

/* =====================================================================
 * ลายเฉพาะธีม
 * ===================================================================== */

/* ---------- B · Glass HUD ---------- */
html[data-skin="b"] :is(.card,.st-sim,.st-con,.seg,.hello,.brandbar .me,.date,.sheet){-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass)}
html[data-skin="b"] .tl,html[data-skin="b"] .board-wrap{-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-skin="b"] .hello,html[data-skin="b"] .brandbar .me{padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--edge)}
html[data-skin="b"] .sh b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--btn);color:var(--on-accent);font-size:12px;box-shadow:var(--btn-sh-sm)}
html[data-skin="b"] .zone.sim::before{width:8px;height:8px;border-radius:50%;transform:none;box-shadow:0 0 10px var(--accent)}
html[data-skin="b"] .cbar{-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}

/* ---------- D · Race Plate ---------- */
html[data-skin="d"] .brandbar{position:relative;overflow:hidden;margin:0 -16px 4px;padding:14px 16px 12px;border-bottom:3px solid var(--accent)}
html[data-skin="d"] .brandbar::after{content:"";position:absolute;top:-30px;bottom:-30px;right:-46px;width:160px;pointer-events:none;transform:skewX(-24deg);
  background:repeating-linear-gradient(90deg,var(--stripe) 0 16px,transparent 16px 24px,var(--stripe-2) 24px 30px,transparent 30px 44px)}
html[data-skin="d"] .brand-in{position:relative;z-index:1}
html[data-skin="d"] .hello,html[data-skin="d"] .brandbar .me{padding:5px 10px;border-radius:4px;background:var(--surface);border:var(--edge-w) solid var(--edge);box-shadow:var(--sh-chip)}
html[data-skin="d"] .btn{font-weight:700;letter-spacing:.3px}
html[data-skin="d"] .sh b{padding:4px 6px 3px;border-radius:3px;background:var(--plate-bg);color:var(--plate-fg);font-size:13px}
html[data-skin="d"] .zone.sim::before{width:30px;height:8px;background:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 11px)}
html[data-skin="d"] .st-sim{display:grid;grid-template-columns:50px minmax(0,1fr);column-gap:11px;row-gap:0;align-content:center;padding:10px}
html[data-skin="d"] .st-plate{position:relative;display:grid;grid-row:span 4;align-self:stretch;place-items:center;min-height:58px;padding-top:5px;overflow:hidden;
  border-radius:4px;background:var(--plate-bg);color:var(--plate-fg);font:italic 800 23px/1 var(--f-display)}
html[data-skin="d"] .st-plate::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--accent)}
html[data-skin="d"] .st-sim[aria-pressed="true"] .st-plate{background:var(--plate-sel-bg);color:var(--plate-sel-fg)}
html[data-skin="d"] .st-sim[aria-pressed="true"] .st-plate::before{background:var(--plate-fg)}
html[data-skin="d"] .stations.compact .st-sim,html[data-skin="d"] .st-sim.mini{grid-template-columns:42px minmax(0,1fr);column-gap:9px}
html[data-skin="d"] .stations.compact .st-plate,html[data-skin="d"] .st-sim.mini .st-plate{min-height:46px;font-size:19px}
html[data-skin="d"] .st-name{padding-right:18px}
html[data-skin="d"] .st-check{border-radius:3px}
html[data-skin="d"] .st-ico{border-radius:4px}
html[data-skin="d"] .prog{gap:9px;margin:14px 0 2px;padding:9px 12px;border-radius:6px;background:#0B0C0F;box-shadow:inset 0 2px 6px rgba(0,0,0,.8)}
html[data-skin="d"] .prog i{flex:0 0 18px;height:18px;border-radius:50%;background:#262932;box-shadow:inset 0 2px 3px rgba(0,0,0,.7)}
html[data-skin="d"] .prog i.on{background:radial-gradient(circle at 38% 34%,#FFC2A8 0,#FF6A33 45%,#C23B0E 100%);box-shadow:0 0 10px rgba(239,85,39,.85)}
html[data-skin="d"] .prog.go i{background:radial-gradient(circle at 38% 34%,#C9F7E1 0,#3DBE8B 50%,#1D6E4E 100%);box-shadow:0 0 10px rgba(61,190,139,.85)}
html[data-skin="d"] .prog-l{margin-left:auto;color:#C9CDD6;font:italic 600 13px var(--f-display)}
html[data-skin="d"] .wz i{height:8px;border-radius:2px;transform:skewX(-20deg)}
html[data-skin="d"] .wz button{font-style:italic;font-family:var(--f-display);font-weight:600}
html[data-skin="d"] .done-ic{border-radius:6px}
html[data-skin="d"] .cbar{border-top-width:3px;border-top-color:var(--accent)}
html[data-skin="d"] .bblk,html[data-skin="d"] .blk{border-radius:3px}
html[data-skin="d"] .sheet{border-radius:8px 8px 0 0}
html[data-skin="d"] .sheet-h{border-bottom:3px solid var(--accent)}
@media (min-width:900px){html[data-skin="d"] .sheet{border-radius:0}}

/* ---------- จอเล็ก / จอใหญ่ ---------- */
@media (max-width:900px){.agrid,.split{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .setgrid{grid-template-columns:minmax(0,1fr)}
  .autorow{grid-template-columns:minmax(0,1fr) auto}
  .autorow .times{order:3;grid-column:1/-1}
}
@media (max-width:420px){.row3{grid-template-columns:1fr 1fr}.row3>:first-child{grid-column:1/-1}}
@media (max-width:370px){.slots{grid-template-columns:repeat(3,minmax(0,1fr))}.slots.dense{grid-template-columns:repeat(4,minmax(0,1fr))}.row2{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){
  .toast{animation:tin .28s ease-out}
  @keyframes tin{from{opacity:0;transform:translateY(-8px)}}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* =====================================================================
 * ดราฟ 2.1.2 · ปุ่มสลับมืด/สว่าง · ธีมของฉัน · เลือกธีมในตั้งค่า
 * ===================================================================== */
.bb-side{display:flex;align-items:center;gap:8px;min-width:0}
.modebtn{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;border:var(--edge-w) solid var(--edge);background:var(--surface-2);color:var(--fg);box-shadow:var(--hl),var(--sh-chip)}
.modebtn:hover{filter:brightness(1.08)}
.mebtn{appearance:none;border:0;background:none;padding:0;color:inherit;font:inherit;border-radius:999px;cursor:pointer}
/* ปุ่มธีมของฉัน: วงกลมแปรงทาสีขนาดเท่าปุ่มสลับมืด/สว่าง · เปิดกล่องธีมอยู่ = สีส้ม · ไม่มีลูกศร */
.av.brush{width:38px;height:38px}
.av.brush svg{width:20px;height:20px}
.mebtn[aria-expanded="true"] .av.brush,
html[data-skin="d"][data-mode="light"] .brandbar .mebtn[aria-expanded="true"] .me .av.brush,
html[data-fest="x"][data-skin] .brandbar .mebtn[aria-expanded="true"] .me .av.brush{background:var(--btn);color:var(--on-accent);border-color:transparent;box-shadow:var(--btn-sh-sm)}
.mypanel{max-width:460px;margin:0 0 12px auto;padding:12px 14px;display:grid;gap:4px}
.mp-h{display:flex;justify-content:space-between;align-items:center;font-size:15px}
.myrow{display:grid;gap:8px;padding:10px 0;border-top:1px solid var(--line)}
.myrow .seg{flex-wrap:wrap}
.now-on{font-size:12px;font-weight:500;color:var(--accent-ink)}
.themerow .seg{flex:0 1 auto;min-width:0}
.themerow .seg button{padding:8px 14px}
@media (max-width:640px){.themerow{flex-direction:column;align-items:stretch}}

/* ---------- 2.1.2D สว่าง: แถบโลโก้พื้นดำเต็มความกว้างจอ ---------- */
html[data-skin="d"][data-mode="light"] .brandbar{
  --stripe-2:rgba(255,255,255,.88);
  background:#111317;color:#FFFFFF;
  /* พื้นดำ + เส้นส้มด้านล่าง ยืดเต็มจอซ้าย-ขวา */
  border-image:linear-gradient(#111317 calc(100% - 3px),#EF5527 0) 0 fill / 0 / 0 100vmax}
html[data-skin="d"][data-mode="light"] .brandbar .logo-d{display:block}
html[data-skin="d"][data-mode="light"] .brandbar .logo-l{display:none}
html[data-skin="d"][data-mode="light"] .brandbar :is(.hello,.me,.modebtn){background:#FFFFFF;color:#111317;border-color:transparent;box-shadow:2px 2px 0 #EF5527}
html[data-skin="d"][data-mode="light"] .brandbar .hello b{color:#111317}
html[data-skin="d"][data-mode="light"] .brandbar .me .av{background:#F1F1EF;border-color:#D5D5D2;box-shadow:none}

/* ---------- ธีม D: ไฟออกตัวแบบ F1 · ติดขอบบนจอตอนเลื่อน ---------- */
html[data-skin="d"] .prog{position:sticky;top:calc(8px + env(safe-area-inset-top,0px));z-index:15;gap:7px;padding:8px 12px;border-radius:8px;
  background:linear-gradient(180deg,#22252c 0%,#0b0c0f 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 2px #2a2d34,0 8px 18px rgba(17,19,23,.35)}
html[data-skin="d"] .prog i,html[data-skin="d"] .prog i.on,html[data-skin="d"] .prog.go i{
  flex:0 0 26px;height:48px;border-radius:6px;display:grid;align-content:space-evenly;justify-items:center;
  background:linear-gradient(180deg,#30333b 0%,#16181c 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 -3px 4px rgba(0,0,0,.6),0 2px 0 #050607}
html[data-skin="d"] .prog i::before,html[data-skin="d"] .prog i::after{content:"";width:17px;height:17px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#454a55 0,#1c1e23 58%,#0c0d10 100%);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.85),0 0 0 1.5px #0a0b0d}
html[data-skin="d"] .prog i.on::before,html[data-skin="d"] .prog i.on::after{
  background:radial-gradient(circle at 35% 30%,#ffd9cf 0,#ff4a3a 30%,#d4140b 68%,#6e0703 100%);
  box-shadow:0 0 0 1.5px #3a0602,0 0 8px 2px rgba(255,45,30,.75),0 0 20px 5px rgba(255,45,30,.32)}
html[data-skin="d"] .prog.go i::before,html[data-skin="d"] .prog.go i::after{
  background:radial-gradient(circle at 35% 30%,#e4ffef 0,#3cf08c 30%,#10a552 68%,#04502a 100%);
  box-shadow:0 0 0 1.5px #032d17,0 0 8px 2px rgba(40,230,120,.75),0 0 20px 5px rgba(40,230,120,.3)}
html[data-skin="d"] .prog-l{color:#D9DCE3}
html[data-skin="d"] .prog.go .prog-l{color:#7CF2AE}
@keyframes bulb-on{0%{filter:brightness(.2) saturate(.4)}55%{filter:brightness(1.45)}100%{filter:none}}
html[data-skin="d"] .prog i.new::before,html[data-skin="d"] .prog.fresh i::before{animation:bulb-on .5s ease-out both}
html[data-skin="d"] .prog i.new::after,html[data-skin="d"] .prog.fresh i::after{animation:bulb-on .5s ease-out .08s both}
html[data-skin="d"] .prog.fresh i:nth-child(2)::before,html[data-skin="d"] .prog.fresh i:nth-child(2)::after{animation-delay:.06s}
html[data-skin="d"] .prog.fresh i:nth-child(3)::before,html[data-skin="d"] .prog.fresh i:nth-child(3)::after{animation-delay:.12s}
html[data-skin="d"] .prog.fresh i:nth-child(4)::before,html[data-skin="d"] .prog.fresh i:nth-child(4)::after{animation-delay:.18s}
html[data-skin="d"] .prog.fresh i:nth-child(5)::before,html[data-skin="d"] .prog.fresh i:nth-child(5)::after{animation-delay:.24s}

/* =====================================================================
 * 2.1.2D สว่าง · แผงดำเดียว + เส้นความเร็วบาง + ไฟออกตัวจุดเดี่ยว
 * ===================================================================== */
html[data-skin="d"][data-mode="light"] .brandbar::after{display:none}
/* เส้นบาง 4 เส้น จากข้างโลโก้ วิ่งผ่านหลังปุ่ม/ชื่อ ไปจางที่ขอบขวา */
html[data-skin="d"][data-mode="light"] .brandbar::before{content:"";position:absolute;left:0;right:0;top:50%;height:26px;margin-top:-13px;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 104px,#EF5527 116px,#EF5527 calc(100% - 30px),transparent 100%) 0 0/100% 2px no-repeat,
    linear-gradient(90deg,transparent 110px,rgba(255,255,255,.8) 124px,rgba(255,255,255,.8) calc(100% - 40px),transparent calc(100% - 6px)) 0 8px/100% 1.5px no-repeat,
    linear-gradient(90deg,transparent 106px,rgba(239,85,39,.85) 118px,rgba(239,85,39,.85) calc(100% - 34px),transparent calc(100% - 2px)) 0 16px/100% 2px no-repeat,
    linear-gradient(90deg,transparent 114px,rgba(255,255,255,.45) 128px,rgba(255,255,255,.45) calc(100% - 46px),transparent calc(100% - 10px)) 0 24px/100% 1.5px no-repeat}
/* ด้านบนเรียบ: ไม่มีกล่องขาว · มีพื้นดำบังเส้นให้อ่านชัด */
html[data-skin="d"][data-mode="light"] .brandbar .hello{background:#111317;color:#C9CDD6;border:0;box-shadow:-6px 0 8px #111317;padding:2px 0 2px 8px;border-radius:0}
html[data-skin="d"][data-mode="light"] .brandbar .hello b{color:#FFFFFF}
html[data-skin="d"][data-mode="light"] .brandbar .modebtn{background:#111317;color:#FFFFFF;border:1px solid rgba(255,255,255,.35);box-shadow:none}
html[data-skin="d"][data-mode="light"] .brandbar .me{background:#111317;color:#FFFFFF;border:1px solid rgba(255,255,255,.35);box-shadow:none;padding:4px 10px 4px 4px;border-radius:999px}
html[data-skin="d"][data-mode="light"] .brandbar .me .av{background:#2A2D34;color:#FFFFFF;border-color:rgba(255,255,255,.2)}
html[data-skin="d"][data-mode="light"] .brandbar .me .role{background:rgba(239,85,39,.2);color:#FFB596;border-color:transparent}
html[data-skin="d"][data-mode="light"] .brandbar .lock,html[data-skin="d"][data-mode="light"] .brandbar .mebtn .me::after{color:#C9CDD6;border-color:#C9CDD6}
/* ไฟออกตัว: แคปซูลลอยบนพื้นสว่าง แยกจากป้ายด้านบน · ติดขอบบนจอตอนเลื่อน · หลอดจุดเดี่ยวขนาดเล็ก */
html[data-skin="d"][data-mode="light"] .prog{position:sticky;top:calc(12px + env(safe-area-inset-top,0px));z-index:15;margin:8px 0 12px;gap:7px;
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 14px 6px 10px;
  background:linear-gradient(180deg,#2E3139 0%,#1A1C21 55%,#121317 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.5),0 8px 14px rgba(17,19,23,.35),0 18px 30px rgba(17,19,23,.22)}
html[data-skin="d"][data-mode="light"] .prog i{flex:0 0 22px;height:22px;border-radius:6px;align-content:center}
html[data-skin="d"][data-mode="light"] .prog i::after{display:none}
html[data-skin="d"][data-mode="light"] .prog i::before{width:13px;height:13px}
html[data-skin="d"][data-mode="light"] .prog-l{font-size:12.5px}

/* =====================================================================
 * ธีมเทศกาล X · ใช้หน้าตา 2.1.2D (แผงดำ ไฟแคปซูล) ทั้งสองโหมด
 * ===================================================================== */
/* ---------- 2.1.2D สว่าง: แถบโลโก้พื้นดำเต็มความกว้างจอ ---------- */
html[data-fest="x"][data-skin] .brandbar{
  --stripe-2:rgba(255,255,255,.88);
  background:#111317;color:#FFFFFF;
  /* พื้นดำ + เส้นส้มด้านล่าง ยืดเต็มจอซ้าย-ขวา */
  border-image:linear-gradient(#111317 calc(100% - 3px),#EF5527 0) 0 fill / 0 / 0 100vmax}
html[data-fest="x"][data-skin] .brandbar .logo-d{display:block}
html[data-fest="x"][data-skin] .brandbar .logo-l{display:none}
html[data-fest="x"][data-skin] .brandbar :is(.hello,.me,.modebtn){background:#FFFFFF;color:#111317;border-color:transparent;box-shadow:2px 2px 0 #EF5527}
html[data-fest="x"][data-skin] .brandbar .hello b{color:#111317}
html[data-fest="x"][data-skin] .brandbar .me .av{background:#F1F1EF;border-color:#D5D5D2;box-shadow:none}

/* =====================================================================
 * 2.1.2D สว่าง · แผงดำเดียว + เส้นความเร็วบาง + ไฟออกตัวจุดเดี่ยว
 * ===================================================================== */
html[data-fest="x"][data-skin] .brandbar::after{display:none}
/* เส้นบาง 4 เส้น จากข้างโลโก้ วิ่งผ่านหลังปุ่ม/ชื่อ ไปจางที่ขอบขวา */
html[data-fest="x"][data-skin] .brandbar::before{content:"";position:absolute;left:0;right:0;top:50%;height:26px;margin-top:-13px;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 104px,#EF5527 116px,#EF5527 calc(100% - 30px),transparent 100%) 0 0/100% 2px no-repeat,
    linear-gradient(90deg,transparent 110px,rgba(255,255,255,.8) 124px,rgba(255,255,255,.8) calc(100% - 40px),transparent calc(100% - 6px)) 0 8px/100% 1.5px no-repeat,
    linear-gradient(90deg,transparent 106px,rgba(239,85,39,.85) 118px,rgba(239,85,39,.85) calc(100% - 34px),transparent calc(100% - 2px)) 0 16px/100% 2px no-repeat,
    linear-gradient(90deg,transparent 114px,rgba(255,255,255,.45) 128px,rgba(255,255,255,.45) calc(100% - 46px),transparent calc(100% - 10px)) 0 24px/100% 1.5px no-repeat}
/* ด้านบนเรียบ: ไม่มีกล่องขาว · มีพื้นดำบังเส้นให้อ่านชัด */
html[data-fest="x"][data-skin] .brandbar .hello{background:#111317;color:#C9CDD6;border:0;box-shadow:-6px 0 8px #111317;padding:2px 0 2px 8px;border-radius:0}
html[data-fest="x"][data-skin] .brandbar .hello b{color:#FFFFFF}
html[data-fest="x"][data-skin] .brandbar .modebtn{background:#111317;color:#FFFFFF;border:1px solid rgba(255,255,255,.35);box-shadow:none}
html[data-fest="x"][data-skin] .brandbar .me{background:#111317;color:#FFFFFF;border:1px solid rgba(255,255,255,.35);box-shadow:none;padding:4px 10px 4px 4px;border-radius:999px}
html[data-fest="x"][data-skin] .brandbar .me .av{background:#2A2D34;color:#FFFFFF;border-color:rgba(255,255,255,.2)}
html[data-fest="x"][data-skin] .brandbar .me .role{background:rgba(239,85,39,.2);color:#FFB596;border-color:transparent}
html[data-fest="x"][data-skin] .brandbar .lock,html[data-fest="x"][data-skin] .brandbar .mebtn .me::after{color:#C9CDD6;border-color:#C9CDD6}
/* ไฟออกตัว: แคปซูลลอยบนพื้นสว่าง แยกจากป้ายด้านบน · ติดขอบบนจอตอนเลื่อน · หลอดจุดเดี่ยวขนาดเล็ก */
html[data-fest="x"][data-skin] .prog{position:sticky;top:calc(12px + env(safe-area-inset-top,0px));z-index:15;margin:8px 0 12px;gap:7px;
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 14px 6px 10px;
  background:linear-gradient(180deg,#2E3139 0%,#1A1C21 55%,#121317 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.5),0 8px 14px rgba(17,19,23,.35),0 18px 30px rgba(17,19,23,.22)}
html[data-fest="x"][data-skin] .prog i{flex:0 0 22px;height:22px;border-radius:6px;align-content:center}
html[data-fest="x"][data-skin] .prog i::after{display:none}
html[data-fest="x"][data-skin] .prog i::before{width:13px;height:13px}
html[data-fest="x"][data-skin] .prog-l{font-size:12.5px}

/* ที่ว่างใต้ป้ายสำหรับไฟประดับและของห้อย */
html[data-fest="x"][data-skin][data-skin][data-mode] .brandbar{overflow:visible;margin-bottom:48px}
html[data-fest="x"][data-skin][data-skin][data-mode] .prog{margin-top:6px}
.fdeco{position:absolute;left:0;right:0;top:100%;height:48px;pointer-events:none;z-index:3}
.fwire,.fbulbs{position:absolute;left:-16px;right:-16px;top:-2px;height:22px;background-repeat:repeat-x;background-size:92px 22px}
.fwire{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='22'%3E%3Cpath d='M0 2Q46 22 92 2' stroke='%23222' stroke-width='1.6' fill='none'/%3E%3C/svg%3E")}
html[data-mode="dark"] .fwire{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='22'%3E%3Cpath d='M0 2Q46 22 92 2' stroke='%23555B66' stroke-width='1.6' fill='none'/%3E%3C/svg%3E")}
.fbulbs.a{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='22'%3E%3Cg%3E%3Cellipse cx='14' cy='11' rx='3.2' ry='4.4' fill='%23FF7A3A'/%3E%3Cellipse cx='46' cy='15.5' rx='3.2' ry='4.4' fill='%23FFE7A8'/%3E%3Cellipse cx='78' cy='11' rx='3.2' ry='4.4' fill='%23E2263A'/%3E%3C/g%3E%3C/svg%3E");filter:drop-shadow(0 0 4px rgba(255,170,90,.9));animation:twa 2.6s ease-in-out infinite}
.fbulbs.b{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='22'%3E%3Cg%3E%3Cellipse cx='30' cy='14.5' rx='3.2' ry='4.4' fill='%23F2C14E'/%3E%3Cellipse cx='62' cy='14.5' rx='3.2' ry='4.4' fill='%23FF7A3A'/%3E%3C/g%3E%3C/svg%3E");filter:drop-shadow(0 0 4px rgba(255,200,90,.9));animation:twb 2.6s ease-in-out infinite}
@keyframes twa{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes twb{0%,100%{opacity:.35}50%{opacity:1}}
.forn{position:absolute;top:4px;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;animation:swing 3.2s ease-in-out infinite;filter:drop-shadow(0 3px 3px rgba(0,0,0,.28))}
.forn i{display:block;width:1.2px;height:var(--len);background:#8A8F99}
@keyframes swing{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
/* หิมะ */
canvas.snow{position:fixed;inset:0;width:100vw;height:100vh;z-index:30;pointer-events:none}
.toasts{z-index:45}
@media (prefers-reduced-motion:reduce){.fbulbs,.forn{animation:none}}
/* ตั้งค่า: ปุ่มธีม 3 ตัวเลือก ขึ้นบรรทัดใหม่ได้ */
.themerow{flex-direction:column;align-items:stretch}
.themerow .seg{flex-wrap:wrap}
.themerow .seg button{flex:1 1 auto}

/* หิมะที่กอง: ชั้นติดขอบบนของแต่ละชิ้น เลื่อนไปพร้อมการ์ด · รูปกองนูนนุ่ม 3 แบบสลับกัน */
html.snowing :is(.seg.ctabs,.chip.date,.chip.slot,.chip.dur,.pcard,.lcard,.req,.kpi,.form,.setcard){position:relative}
html.snowing :is(.prog,.seg.ctabs,.st,.chip.date,.chip.slot,.chip.dur,.pcard,.lcard,.req,.kpi,.form,.setcard,.cbar)::after{
  content:"";position:absolute;left:3px;right:3px;bottom:calc(100% - 3px);height:calc(var(--snow,0px) + 3px);pointer-events:none;z-index:4;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C4 14 10 10 22 11 C34 12 40 6 54 7 C70 8 76 12 92 10 C108 8 116 4 132 6 C150 8 158 12 172 10 C184 9 194 12 200 24Z' fill='%23FFFFFF'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;transition:height .6s ease-out,opacity .2s}
html.snowing .sv1::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C6 13 14 8 28 9 C44 10 50 13 66 11 C82 9 90 5 106 6 C124 7 132 11 148 10 C164 9 176 6 188 9 C196 11 199 16 200 24Z' fill='%23FFFFFF'/%3E%3C/svg%3E")}
html.snowing .sv2::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C3 15 12 11 24 12 C38 13 46 8 60 8 C76 8 84 12 100 11 C116 10 122 6 138 7 C154 8 162 12 178 11 C190 10 197 15 200 24Z' fill='%23FFFFFF'/%3E%3C/svg%3E")}
html.snowing .cbar::after{left:-2px;right:-2px;top:auto}
html.snowing[data-mode="light"] :is(.prog,.seg.ctabs,.st,.chip,.pcard,.lcard,.req,.kpi,.form,.setcard,.cbar)::after{filter:drop-shadow(0 -1px 1.2px rgba(20,24,32,.35))}
html.snowing .snow-off::after{transition:none;opacity:0}
/* ปุ่มเปลี่ยนภาษา (หน้าลูกค้า) */
.langbtn{flex:0 0 auto;min-width:38px;height:38px;padding:0 10px;border-radius:999px;border:var(--edge-w) solid var(--edge);background:var(--surface-2);color:var(--fg);box-shadow:var(--hl),var(--sh-chip);font:600 13px var(--f-body)}
html[data-skin="d"][data-mode="light"] .brandbar .langbtn,html[data-fest="x"][data-skin] .brandbar .langbtn{background:#111317;color:#FFFFFF;border:1px solid rgba(255,255,255,.35);box-shadow:none}
/* ธีม X: สายไฟประดับยื่นเกินขอบจอ ไม่ให้เกิดเลื่อนซ้าย-ขวา (clip ไม่ทำให้ไฟ sticky เสีย) */
html[data-fest="x"] .page{overflow-x:clip}
/* คำทักทายยาว (เช่น Happy New Year 2027) ขึ้นสองบรรทัดได้อย่างเรียบร้อย */
.brandbar .hello{line-height:1.25;text-align:right}


/* =====================================================================
 * ระบบจริง 2.0 · แจ้งเตือนระบบในหน้าแอดมิน + คิวที่ยังไม่อยู่ในปฏิทิน
 * ===================================================================== */
.sysalert{display:grid;gap:4px;margin:6px 0 10px;font-size:13px}
.sysalert b{display:inline-flex;align-items:center;gap:6px}
.sysalert time{font:500 12px var(--f-mono);color:var(--muted);margin-right:6px}
.cal-miss{color:var(--wait-ink);font-weight:600}
.gate .btn{justify-self:center}

/* ---------- การแจ้งเตือน (ตั้งค่า) ---------- */
.notirow{flex-wrap:wrap}
.notirow .lbl{flex:1 1 220px;min-width:0}
.notirow .seg{flex:0 0 auto}
.notikey{display:flex;gap:14px;flex-wrap:wrap;padding:10px 0 2px;font-size:12px;color:var(--muted)}
.notikey .lg,.legend .lg.group{display:inline-block;width:12px;height:12px;margin-right:6px;border-radius:3px;vertical-align:-2px;background:var(--walk)}
.notikey .lg.owner,.legend .lg.rq{background:var(--ok)}
.legend .lg.group{background:var(--walk)}
.legend .lg.rq{background:transparent;outline:2px solid var(--ok);outline-offset:-2px;border-radius:50%}

/* ---------- มอนิเตอร์ ---------- */
.mon-kpis .kpi{flex:1 1 150px}
.mon-kpis .kpi b{white-space:nowrap}
.mon-kpis .kpi b.txt{font-size:17px}
.mon-kpis .kpi small{font:400 12px var(--f-body)}
.setgrid.mon .setcard{min-width:0}
@media (max-width:760px){.setgrid,.setgrid.mon{grid-template-columns:minmax(0,1fr)}}
.qrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:end;padding:12px 0;border-top:1px solid var(--line)}
.h2 + .qrow{border-top:0}
.qval{font:var(--h-style) 600 20px/1 var(--f-display);font-variant-numeric:tabular-nums}
.qval small{font:500 12.5px var(--f-mono);color:var(--muted);margin-left:3px}
.meter{grid-column:1/-1;position:relative;height:10px;border-radius:999px;background:var(--well);box-shadow:var(--well-sh);overflow:hidden}
.meter i{display:block;height:100%;border-radius:999px;background:var(--ok);transition:width .3s}
.meter.warn i{background:var(--wait)}
.meter.bad i{background:var(--bad)}
.meter em{position:absolute;top:0;bottom:0;width:2px;background:var(--surface);opacity:.9}
.bars{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:4px;height:150px;align-items:end;padding:22px 0 0}
.bar{display:grid;grid-template-rows:1fr auto;height:100%;min-width:0;position:relative}
.bar .rq{position:absolute;top:-20px;left:0;right:0;text-align:center;font:600 11px var(--f-mono);color:var(--ok-ink)}
.bar .stack{display:flex;flex-direction:column-reverse;justify-content:start;height:100%;border-radius:4px 4px 0 0;overflow:hidden;background:var(--well-soft)}
.bar .stack i{display:block;width:100%;min-height:0}
.bar .stack i.shop{background:var(--chip-on,var(--accent))}
.bar .stack i.admin{background:var(--walk)}
.bar small{text-align:center;font:500 10.5px var(--f-mono);color:var(--muted);padding-top:4px;border-top:1px solid var(--line)}
.mtable table{width:100%;border-collapse:collapse;font-size:13.5px}
.mtable td,.mtable th{padding:9px 6px;border-top:1px solid var(--line);text-align:left;vertical-align:middle}
.mtable thead th{border-top:0;font-size:12.5px;font-weight:600;color:var(--muted)}
.mtable tr:first-child td{border-top:0}
.mtable td .av{width:26px;height:26px;font-size:11px;display:inline-grid;margin-right:8px;vertical-align:middle}
.mtable .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mtable .pbar{width:36%}
.mtable .pbar i{display:block;height:8px;border-radius:999px;background:var(--chip-on,var(--accent));min-width:4px}
.mtable tr.muted td{color:var(--muted)}
.log.mini{max-height:220px;margin-top:4px;font-size:12.5px}
.log.mini div{grid-template-columns:84px 1fr;padding:7px 0}

/* ---------- ราคาและโปรโมชั่น (ตั้งค่า · พับไว้) ---------- */
.pricecard summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;padding-block:2px}
.pricecard summary::-webkit-details-marker{display:none}
.pricecard summary .h2{flex:1;margin-bottom:8px}
.pricecard summary .pshow{flex:0 0 auto;margin-bottom:8px}
.pricecard .setrow.first{border-top:0;padding-top:4px}
.pricecard .chev{width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:0 6px 6px 0;transition:transform .18s}
.pricecard[open] .chev{transform:rotate(-135deg);margin:6px 6px 0 0}
.prow{padding:10px 0;border-top:1px solid var(--line)}
.prow-h{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:10px 14px}
.prow-h .an{min-width:0;font-weight:600;font-size:14.5px;padding-bottom:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pfield{display:grid;grid-template-columns:auto minmax(0,1fr);justify-content:start;align-items:center;gap:3px 6px;font-size:12.5px;color:var(--muted);min-width:0}
.pfield>span{grid-column:1/-1;font-weight:500}
.pfield small{font-weight:400}
.pfield em{font-style:normal;font-size:12px;line-height:1.3}
.pfield .inp{min-width:0}
.pfield .inp.num{width:96px;text-align:right;font-variant-numeric:tabular-nums}
.pfield.grow{flex:1 1 160px}
.pswitch{display:grid;gap:5px;font-size:12.5px;color:var(--muted);justify-items:center}
.prow-promo{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:10px;padding:10px 12px;border-radius:var(--r-sm);background:var(--accent-soft)}
.prow-promo .pfield{color:var(--accent-ink)}
.prow.promo-on .an{color:var(--accent-ink)}
.pprice{font-variant-numeric:tabular-nums;white-space:nowrap}
.pprice s{color:var(--muted);font-size:12.5px}
.pprice b{font:var(--h-style) 600 17px var(--f-display)}
.pprice small{font-size:12px;color:var(--muted)}

/* ---------- โปรบนการ์ดเครื่อง (หน้าลูกค้า) ---------- */
.st-price.promo{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.st-price.promo s{font-size:11.5px;opacity:.75}
.st-price.promo b{font-weight:700;color:var(--accent-ink)}
.st-con .st-price.promo b{color:inherit}
.st-tag.promo{background:var(--accent);color:var(--on-accent)}
.pricenote{margin-top:10px;padding:10px 12px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent-ink);font-size:13px;display:grid;gap:4px}
.pricenote div{display:flex;justify-content:space-between;gap:10px}
.pricenote s{opacity:.7;margin-right:6px}
.st[aria-pressed="true"] .st-tag.promo{background:var(--on-accent);color:var(--accent-ink)}

/* ---------- รายการโปร (ตั้งค่า) ---------- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 14px;padding:4px 0 6px}
.pq{border-top:1px solid var(--line);padding:10px 0}
.pq-h{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 10px;align-items:center}
.pq-h .pq-name{font-weight:600;font-size:14.5px}
.pq-h small{grid-column:1/-1;font-size:12.5px;line-height:1.4}
.pq-body{display:grid;gap:12px;margin-top:10px;padding:12px;border-radius:var(--r-sm);background:var(--accent-soft)}
.pq-body .row2{gap:10px 14px;align-items:end;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.pq-body .seg.mini{flex-wrap:wrap}
.pq-body .pfield{color:var(--accent-ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip.sm{padding:5px 10px;font-size:13px;min-width:0;border-radius:8px}
.pay{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:2px;padding:7px 10px;border-radius:var(--r-sm);background:var(--well-soft);border:1px solid var(--line);font-size:13px;font-variant-numeric:tabular-nums}
.pay.promo{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}
.pay .pay-l{font-weight:700;margin-right:2px}
.pay .sep{color:var(--muted)}
.pay .pill{padding:0 7px;font-size:11px}
.st-cond{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.3}
.st-con .st-cond{color:var(--con-muted)}
.st[aria-pressed="true"] .st-cond{color:inherit;opacity:.85}

.ownerid{display:grid;gap:8px;text-align:left;margin:0}
.ownerid code,.tgcode{display:block;padding:8px 10px;border-radius:var(--r-sm);background:var(--well);font:600 13px var(--f-mono);word-break:break-all;user-select:all}
.tgcode{font-size:22px;letter-spacing:.2em;text-align:center;margin-top:6px}
.tglink{align-items:flex-end}
/* ปิดรับจองชั่วคราว */
.pausenote{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:6px 0 10px;font-size:13px}
.pausenote b{display:inline-flex;align-items:center;gap:6px}
.setrow.pauserow.on .lbl>span{color:var(--bad-ink);font-weight:700}