/* ═══════════════════════════════════════════════════════════
BookingTour — theme.css
source of truth ของ component ทั้งระบบ (prefix .bt-)
⚠️ ก่อนสร้าง class ใหม่ → หาของเดิมมาใช้ซ้ำก่อนเสมอ
═══════════════════════════════════════════════════════════ */
:root {
color-scheme: light; /* ⚠️ ไม่มี dark mode */
/* พื้นผิว */
--bg:#F6F7F9; --surface:#FFFFFF; --soft:#F1F3F6;
--line:#E4E7EC; --line-2:#D3D8E0;
/* ตัวอักษร — ⚠️ --muted ต้องผ่าน WCAG AA (≥4.5:1 บนพื้นขาว) เพราะใช้กับตัวเล็ก 11.5px */
--ink:#1B2028; --ink-2:#4A5260; --muted:#6A7383;
--muted-2:#8A93A2; /* ใช้ได้เฉพาะกับ icon/เส้น ไม่ใช่ตัวอักษรที่ต้องอ่าน */
/* แบรนด์ — ธีมของร้าน override ค่าพวกนี้ */
--brand:#0F7C74; --brand-rgb:15,124,116;
--brand-2:#0A5C56; --brand-3:#0A3E41;
--brand-soft:#CFE9E5; --brand-pale:#E6F4F2;
/* สถานะ — คงที่ ไม่เปลี่ยนตามธีม */
--ok:#1F7A48; --ok-bg:#E7F3EC;
--warn:#A96410; --warn-bg:#FBF1E2;
--bad:#A83A34; --bad-bg:#FAEBEA;
--gold:#B8862B;
/* รูปทรง */
--r:8px; /* หลังบ้าน */
--hr:10px; /* หน้าร้าน — ธีมเปลี่ยนค่านี้ */
--hd:600; /* น้ำหนักหัวข้อหน้าร้าน — ธีมเปลี่ยนค่านี้ */
/* เงา — กลาง ไม่ย้อมสีแบรนด์ (ธีมทอง/ส้มจะได้ไม่เห็นขอบเขียว) */
--sh:0 8px 30px rgba(16,24,32,.07);
--sh-2:0 14px 42px rgba(16,24,32,.12);
/* พื้นขาวอมเทา (ใช้แทนการ hardcode #FAFBFC ทั่วไฟล์) */
--alt:#FAFBFC;
}
/* ── reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0; background:var(--bg); color:var(--ink);
font-family:Prompt,system-ui,-apple-system,"Segoe UI",sans-serif;
font-size:14.5px; line-height:1.62; font-weight:400;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{margin:0; font-weight:600; line-height:1.32; text-wrap:balance}
p{margin:0}
b,strong{font-weight:500}
a{color:var(--brand-2); text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}
button{font-family:inherit}
/* ⚠️ กันตารางดัน layout จนเกิด horizontal scroll ที่ body */
.bt-main :where([class*="-grid"],[class*="-row"]) > *{min-width:0}
/* ── utility ───────────────────────────────────────────── */
.bt-num{font-variant-numeric:tabular-nums}
.bt-muted{color:var(--muted)}
.bt-sm{font-size:12.5px}
.bt-xs{font-size:11.5px}
.bt-eyebrow{font-size:11.5px; color:var(--muted); font-weight:500; display:flex; align-items:center; gap:6px}
.bt-fx{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.bt-between{display:flex; justify-content:space-between; align-items:center; gap:10px}
.bt-grid{display:grid; gap:11px}
.bt-mt{margin-top:18px}
.bt-mt-s{margin-top:8px}
.bt-right{text-align:right}
.bt-center{text-align:center}
[hidden]{display:none !important}
/* ── card ──────────────────────────────────────────────── */
.bt-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:13px}
.bt-card__head{display:flex; justify-content:space-between; align-items:center; gap:10px;
padding-bottom:11px; margin-bottom:11px; border-bottom:1px solid var(--line); font-weight:600; font-size:14px}
.bt-card__head i{color:var(--brand)}
.bt-card--flush{padding:0}
.bt-card--soft{background:var(--alt)}
/* ── button ────────────────────────────────────────────── */
.bt-btn{
display:inline-flex; align-items:center; justify-content:center; gap:6px;
padding:8px 15px; border-radius:7px; border:0; cursor:pointer;
background:var(--soft); color:var(--ink-2);
font-size:13.5px; font-weight:500; white-space:nowrap;
transition:background .15s, box-shadow .15s, transform .15s;
}
.bt-btn i{font-size:13px}
.bt-btn:hover{text-decoration:none}
.bt-btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.bt-btn:disabled,.bt-btn[aria-disabled="true"]{opacity:.55; cursor:not-allowed}
.bt-btn--primary{background:var(--brand); color:#fff}
.bt-btn--primary:hover{background:var(--brand-2)}
.bt-btn--ghost{background:var(--surface); color:var(--ink-2); border:1px solid var(--line-2)}
.bt-btn--ghost:hover{background:var(--soft)}
.bt-btn--danger{background:var(--bad); color:#fff}
.bt-btn--block{width:100%; padding:12px; font-size:15px}
.bt-btn--lg{padding:11px 22px; font-size:15px}
.bt-btn--pill{border-radius:999px}
/* ── tag / badge ───────────────────────────────────────── */
.bt-tag{
display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
font-size:11.5px; font-weight:500; line-height:1.75;
padding:1px 8px; border-radius:5px; background:var(--soft); color:var(--ink-2);
}
.bt-tag i{font-size:11px}
.bt-tag.is-ok{background:var(--ok-bg); color:var(--ok)}
.bt-tag.is-warn{background:var(--warn-bg); color:var(--warn)}
.bt-tag.is-bad{background:var(--bad-bg); color:var(--bad)}
.bt-tag.is-brand{background:var(--brand-pale); color:var(--brand-2)}
.bt-tag.is-line{background:transparent; border:1px solid var(--line-2); color:var(--ink-2)}
/* ── form ──────────────────────────────────────────────── */
.bt-field{display:grid; gap:4px; margin-bottom:11px}
.bt-label{font-size:12px; color:var(--ink-2); font-weight:500}
.bt-label .req{color:var(--bad)}
.bt-input,.bt-select,.bt-textarea{
width:100%; border:1px solid var(--line-2); border-radius:6px;
padding:9px 11px; background:var(--surface); color:var(--ink);
font-family:inherit; font-size:16px; /* ⚠️ 16px กัน iOS zoom */
transition:border-color .15s, box-shadow .15s;
}
@media (min-width:769px){ .bt-input,.bt-select,.bt-textarea{font-size:13.5px} }
.bt-input:focus,.bt-select:focus,.bt-textarea:focus{
outline:0; border-color:var(--brand); box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12);
}
.bt-input::placeholder{color:var(--muted)}
.bt-input:disabled,.bt-input[readonly]{background:var(--soft); color:var(--muted)}
.bt-textarea{min-height:88px; resize:vertical}
.bt-hint{font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:5px}
.bt-hint.is-ok{color:var(--ok)}
.bt-hint.is-bad{color:var(--bad)}
.bt-field.has-error .bt-input{border-color:var(--bad)}
.bt-check{display:flex; align-items:flex-start; gap:9px; font-size:13px; cursor:pointer}
.bt-check input{margin-top:3px; accent-color:var(--brand); width:16px; height:16px; flex:none}
/* ── table ─────────────────────────────────────────────── */
/* ⚠️ ตารางต้อง scroll ในกล่องตัวเอง ห้ามดัน body */
.bt-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.bt-table{width:100%; border-collapse:collapse; font-size:12.5px}
.bt-table th{
text-align:left; font-size:11px; color:var(--muted); font-weight:500;
padding:8px 11px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--alt);
}
.bt-table td{padding:9px 11px; border-bottom:1px solid var(--line); vertical-align:middle}
.bt-table tbody tr:last-child td{border-bottom:0}
.bt-table tbody tr:hover{background:var(--alt)}
.bt-table td.is-num{text-align:right; font-variant-numeric:tabular-nums}
.bt-table .is-dim{color:var(--muted)}
/* ── row (key–value) ───────────────────────────────────── */
.bt-row{display:flex; justify-content:space-between; align-items:center; gap:10px;
padding:7px 0; border-bottom:1px solid var(--line); font-size:13px}
.bt-row:last-child{border-bottom:0}
.bt-row__k{color:var(--muted)}
.bt-row__v{font-variant-numeric:tabular-nums; text-align:right}
.bt-row--total{border-top:1px solid var(--ink); border-bottom:0; margin-top:5px;
padding-top:9px; font-weight:600; font-size:15px}
/* ── alert / note ──────────────────────────────────────── */
.bt-alert{display:flex; align-items:flex-start; gap:9px; padding:10px 12px;
border:1px solid var(--line); border-radius:6px; font-size:12.5px; background:var(--surface)}
.bt-alert > i{font-size:14px; flex:none; margin-top:2px}
.bt-alert b{font-weight:500; display:block}
.bt-alert__why{color:var(--muted); font-size:11.5px; line-height:1.5}
.bt-alert.is-ok > i{color:var(--ok)}
.bt-alert.is-warn > i{color:var(--warn)}
.bt-alert.is-bad > i{color:var(--bad)}
.bt-alert.is-brand > i{color:var(--brand)}
.bt-note{border:1px solid var(--line); border-left:2px solid var(--warn); background:var(--warn-bg);
padding:10px 12px; border-radius:0 6px 6px 0; font-size:12.5px; color:var(--ink-2)}
.bt-note b{color:var(--warn); font-weight:500}
.bt-note.is-brand{border-left-color:var(--brand); background:var(--brand-pale)}
.bt-note.is-brand b{color:var(--brand-2)}
/* ── 📊 KPI cards (มาตรฐานเดียวทุกหน้า — ห้ามสร้างซ้ำ) ── */
.bt-kpi-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px}
@media (max-width:991px){ .bt-kpi-grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .bt-kpi-grid{grid-template-columns:1fr} }
.bt-stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:13px}
.bt-stat__head{display:flex; align-items:center; gap:9px; margin-bottom:6px}
.bt-stat__ic{width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-content:center;
background:var(--brand-pale); color:var(--brand); font-size:16px}
.bt-stat__lbl{font-size:11.5px; color:var(--muted); font-weight:500; line-height:1.35}
.bt-stat__lbl small{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.06em; opacity:.8}
.bt-stat__val{font-size:22px; font-weight:600; line-height:1.25; font-variant-numeric:tabular-nums}
.bt-stat__val .cur{font-size:14px; color:var(--muted); font-weight:400; margin-right:2px}
.bt-stat__meta{font-size:11.5px; color:var(--muted); line-height:1.5; display:flex; align-items:center; gap:5px}
.bt-stat.is-warn .bt-stat__ic{background:var(--warn-bg); color:var(--warn)}
.bt-stat.is-warn .bt-stat__val{color:var(--warn)}
.bt-stat.is-bad .bt-stat__ic{background:var(--bad-bg); color:var(--bad)}
.bt-stat.is-bad .bt-stat__val{color:var(--bad)}
.bt-stat.is-ok .bt-stat__val{color:var(--ok)}
/* ── 🎫 seat bar (component เฉพาะของระบบนี้) ──────────── */
/* ⚠️ ทุกที่ที่พูดถึงที่นั่งต้องใช้อันนี้ ห้ามเขียนตัวเลขเปล่า */
.bt-seat{display:flex; align-items:center; gap:8px}
.bt-seat__bar{flex:1; min-width:52px; height:5px; border-radius:3px;
background:var(--soft); overflow:hidden}
.bt-seat__bar > i{display:block; height:100%; background:var(--brand); transition:width .2s}
.bt-seat__bar > i.is-hot{background:var(--warn)}
.bt-seat__bar > i.is-full{background:var(--bad)}
.bt-seat__n{font-size:11.5px; white-space:nowrap; color:var(--ink-2); font-variant-numeric:tabular-nums}
/* ── bank card ─────────────────────────────────────────── */
.bt-bank{display:flex; gap:11px; align-items:center; padding:11px;
border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.bt-bank__logo{width:34px; height:34px; border-radius:6px; flex:none; color:#fff;
display:grid; place-content:center; font-size:11px; font-weight:600}
/* ── upload ────────────────────────────────────────────── */
/* ⚠️ ห้ามใช้ เปล่า ต้องห่อด้วยอันนี้ */
.bt-upload{position:relative; border:1px dashed var(--line-2); border-radius:var(--r);
padding:18px; text-align:center; color:var(--muted); font-size:13px; background:var(--alt); cursor:pointer}
.bt-upload:hover{border-color:var(--brand); background:var(--brand-pale)}
.bt-upload > i{font-size:20px; display:block; margin-bottom:5px; color:var(--brand)}
.bt-upload input[type="file"]{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%}
/* ── stepper (จำนวนคน) ─────────────────────────────────── */
.bt-spin{display:flex; align-items:center; gap:11px}
.bt-spin button{width:34px; height:34px; border-radius:6px; border:1px solid var(--line-2);
background:var(--surface); color:var(--ink-2); font-size:13px; cursor:pointer; display:grid; place-content:center}
.bt-spin button:hover{border-color:var(--brand); color:var(--brand)}
.bt-spin__n{font-size:15px; min-width:24px; text-align:center; font-variant-numeric:tabular-nums}
/* ── toast (แทน alert()) ───────────────────────────────── */
.bt-toasts{position:fixed; top:16px; right:16px; z-index:9999; display:grid; gap:9px;
max-width:min(380px, calc(100vw - 32px))}
.bt-toast{display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--brand);
border-radius:10px; box-shadow:var(--sh-2); font-size:13.5px;
animation:bt-slide-in .22s ease}
.bt-toast > i{font-size:16px; flex:none; margin-top:1px; color:var(--brand)}
.bt-toast.is-success{border-left-color:var(--ok)} .bt-toast.is-success > i{color:var(--ok)}
.bt-toast.is-error{border-left-color:var(--bad)} .bt-toast.is-error > i{color:var(--bad)}
.bt-toast.is-warning{border-left-color:var(--warn)} .bt-toast.is-warning > i{color:var(--warn)}
.bt-toast__x{margin-left:auto; background:0; border:0; color:var(--muted); cursor:pointer; font-size:13px; padding:0}
.bt-toast.is-leaving{animation:bt-slide-out .2s ease forwards}
@keyframes bt-slide-in{from{opacity:0; transform:translateX(18px)} to{opacity:1; transform:none}}
@keyframes bt-slide-out{to{opacity:0; transform:translateX(18px)}}
@media (prefers-reduced-motion:reduce){ .bt-toast,.bt-toast.is-leaving{animation:none} }
/* ── modal (แทน confirm()) ─────────────────────────────── */
.bt-modal{position:fixed; inset:0; z-index:9998; display:none; place-items:center; padding:16px;
background:rgba(16,24,32,.42); backdrop-filter:blur(3px)}
.bt-modal.is-open{display:grid}
.bt-modal__box{background:var(--surface); border-radius:14px; box-shadow:var(--sh-2);
width:100%; max-width:420px; padding:22px; animation:bt-pop .18s ease}
.bt-modal__ic{width:46px; height:46px; border-radius:14px; display:grid; place-content:center;
font-size:20px; background:var(--brand-pale); color:var(--brand); margin-bottom:13px}
.bt-modal__box.is-danger .bt-modal__ic{background:var(--bad-bg); color:var(--bad)}
.bt-modal__box h3{font-size:17px; margin-bottom:6px}
.bt-modal__box p{font-size:13.5px; color:var(--ink-2); line-height:1.7}
.bt-modal__actions{display:flex; gap:9px; margin-top:20px; justify-content:flex-end}
@keyframes bt-pop{from{opacity:0; transform:scale(.97)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .bt-modal__box{animation:none} }
/* ── auth pages ────────────────────────────────────────── */
.bt-auth{min-height:100dvh; display:grid; grid-template-columns:1fr 1fr}
@media (max-width:900px){ .bt-auth{grid-template-columns:1fr} }
/* คอลัมน์เดียว ไม่มีแผงข้าง (หน้าล็อกอินแอดมิน) — ห้ามใช้ inline style ทับ media query */
.bt-auth--solo{grid-template-columns:1fr}
.bt-auth__main--admin{
min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:22px; padding:34px 24px; position:relative; overflow:hidden;
background:
radial-gradient(560px 420px at 12% -8%, rgba(15,124,116,.28), transparent 62%),
radial-gradient(480px 360px at 108% 105%, rgba(27,42,74,.9), transparent 60%),
linear-gradient(165deg,#0B1424 0%,#0F1B33 55%,#132342 100%);
}
.bt-auth__main--admin::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
background-size:26px 26px; mask-image:radial-gradient(circle at 50% 35%, #000 0%, transparent 72%)}
.bt-auth__brand-mark{position:relative; z-index:1; display:flex; align-items:center; gap:8px;
color:rgba(255,255,255,.55); font-size:12.5px; font-weight:600; letter-spacing:.06em}
.bt-auth__brand-mark i{font-size:15px; color:rgba(255,255,255,.7)}
.bt-auth__main--admin .bt-auth__form{position:relative; z-index:1; background:var(--surface); border-radius:18px; padding:32px;
box-shadow:0 24px 70px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06)}
.bt-auth__mk--admin{width:52px; height:52px; border-radius:15px; color:#fff;
background:linear-gradient(135deg,#26406F,#0F1B33); box-shadow:0 10px 26px rgba(15,27,51,.4), 0 0 0 6px var(--brand-pale);
display:inline-grid; place-content:center; font-size:22px}
.bt-auth__title--admin{display:flex; align-items:center; justify-content:center; gap:8px;
font-size:19px; margin-top:13px}
.bt-auth__title--admin i{color:#26406F; font-size:16px}
.bt-field--ic .bt-input-ic{position:relative; display:flex; align-items:center}
.bt-field--ic .bt-input-ic i{position:absolute; left:13px; color:var(--muted); font-size:15px; pointer-events:none}
.bt-field--ic .bt-input{padding-left:37px}
.bt-btn--admin{background:linear-gradient(135deg,#26406F,#0F1B33); margin-top:6px}
.bt-btn--admin:hover{background:linear-gradient(135deg,#1B2A4A,#0B1424)}
.bt-auth__footnote{position:relative; z-index:1; color:rgba(255,255,255,.5); font-size:12px;
display:flex; align-items:center; gap:6px}
.bt-auth__footnote a{color:rgba(255,255,255,.75); text-decoration:underline}
.bt-auth__side{
position:relative; padding:38px 34px; color:#fff; display:flex; flex-direction:column;
justify-content:space-between; overflow:hidden;
background:linear-gradient(140deg, var(--brand-2) 0%, var(--brand) 62%, var(--brand-soft) 148%);
}
.bt-auth__side::before{content:""; position:absolute; width:320px; height:320px; border-radius:50%;
background:rgba(255,255,255,.07); top:-140px; right:-90px}
.bt-auth__side::after{content:""; position:absolute; width:220px; height:220px; border-radius:50%;
background:rgba(255,255,255,.05); bottom:-110px; left:-60px}
.bt-auth__side > *{position:relative; z-index:1}
@media (max-width:900px){ .bt-auth__side{padding:26px 20px; min-height:auto} }
.bt-auth__main{display:flex; align-items:center; justify-content:center; padding:34px 24px}
.bt-auth__form{width:100%; max-width:390px}
.bt-brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; letter-spacing:-.02em}
.bt-brand__mk{width:34px; height:34px; border-radius:11px; display:grid; place-content:center;
background:var(--brand); color:#fff; font-size:16px; flex:none}
.bt-auth__side .bt-brand__mk{background:rgba(255,255,255,.17)}
.bt-auth__points{display:grid; gap:11px; margin-top:26px; max-width:34ch}
.bt-auth__points div{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; opacity:.9}
.bt-auth__points i{opacity:.75; margin-top:3px; flex:none}
/* ── app shell (หลังบ้าน) ──────────────────────────────── */
.bt-app{display:grid; grid-template-columns:212px minmax(0,1fr); min-height:100dvh}
.bt-rail{border-right:1px solid var(--line); background:var(--alt); padding:14px 10px;
position:sticky; top:0; height:100dvh; overflow-y:auto}
.bt-rail__brand{padding:4px 8px 14px; border-bottom:1px solid var(--line); margin-bottom:11px}
.bt-rail__shop{padding:0 8px 12px; border-bottom:1px solid var(--line); margin-bottom:10px}
.bt-rail__shop b{font-size:13px; display:block; font-weight:500; line-height:1.4}
.bt-rail__shop span{font-size:11px; color:var(--muted)}
.bt-rail a{display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:6px;
font-size:12.5px; color:var(--ink-2); text-decoration:none}
.bt-rail a i{font-size:14px; color:var(--muted); width:15px; text-align:center; flex:none}
.bt-rail a:hover{background:var(--soft); color:var(--ink); text-decoration:none}
.bt-rail a.is-on{background:var(--surface); color:var(--ink); font-weight:500;
border:1px solid var(--line); padding:6px 9px}
.bt-rail a.is-on i{color:var(--brand)}
.bt-rail__badge{margin-left:auto; font-size:10px; padding:0 6px; border-radius:8px;
background:var(--warn-bg); color:var(--warn); font-weight:500}
.bt-rail__group{padding:14px 10px 5px; font-size:10px; color:var(--muted);
letter-spacing:.06em; text-transform:uppercase; font-weight:500}
/* ออกจากระบบเป็นปุ่มในฟอร์ม POST (GET /logout โดนยิงจากเว็บอื่นได้) */
.bt-rail__logout{display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:6px;
font-size:12.5px; color:var(--ink-2); background:0; border:0; width:100%; cursor:pointer;
font-family:inherit; text-align:left}
.bt-rail__logout i{font-size:14px; color:var(--muted); width:15px; text-align:center; flex:none}
.bt-rail__logout:hover{background:var(--soft); color:var(--ink)}
.bt-main{padding:20px 22px 34px; min-width:0}
.bt-page-head{display:flex; justify-content:space-between; align-items:flex-start;
gap:14px; margin-bottom:18px; flex-wrap:wrap}
.bt-page-head h1{font-size:19px; font-weight:600}
.bt-page-head p{font-size:12.5px; color:var(--muted); margin-top:2px}
/* มือถือ: rail → topbar + bottom tabs */
.bt-topbar,.bt-tabbar{display:none}
@media (max-width:900px){
.bt-app{grid-template-columns:1fr}
.bt-rail{display:none}
.bt-rail.is-open{display:block; position:fixed; inset:0 auto 0 0; width:250px; z-index:60; box-shadow:var(--sh-2)}
.bt-scrim{position:fixed; inset:0; background:rgba(16,24,32,.4); z-index:59; display:none}
.bt-scrim.is-open{display:block}
.bt-main{padding:14px 14px calc(70px + env(safe-area-inset-bottom))}
.bt-topbar{display:flex; align-items:center; gap:10px; padding:10px 14px;
border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:20}
.bt-topbar b{font-size:14px; font-weight:500; min-width:0; overflow:hidden;
text-overflow:ellipsis; white-space:nowrap}
.bt-tabbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
background:var(--surface); border-top:1px solid var(--line);
padding-bottom:env(safe-area-inset-bottom)}
.bt-tabbar a{flex:1; display:grid; justify-items:center; gap:2px; padding:8px 2px;
font-size:10px; color:var(--muted); text-decoration:none; min-height:52px}
.bt-tabbar a i{font-size:17px}
.bt-tabbar a.is-on{color:var(--brand)}
.bt-page-head .bt-fx{width:100%}
.bt-page-head .bt-btn{flex:1}
}
/* ปุ่มไอคอนกลม (tap target ≥44px) */
.bt-icon-btn{width:36px; height:36px; min-width:36px; border-radius:9px; border:1px solid var(--line-2);
background:var(--surface); color:var(--ink-2); display:grid; place-content:center;
font-size:15px; cursor:pointer; flex:none}
.bt-icon-btn:hover{border-color:var(--brand); color:var(--brand)}
@media (max-width:900px){ .bt-icon-btn{width:44px; height:44px; min-width:44px} }
/* ── error page (3 ชั้น: หัวข้ออังกฤษ / พังอะไร / ต้องทำอะไร) ── */
.bt-error{min-height:100dvh; display:grid; place-items:center; padding:24px; text-align:center}
.bt-error__code{font-size:64px; font-weight:700; letter-spacing:-.05em; color:var(--brand); line-height:1}
.bt-error__head{font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
color:var(--muted); margin-top:6px}
.bt-error h1{font-size:20px; margin:10px 0 6px}
.bt-error p{color:var(--ink-2); font-size:14px; max-width:44ch; margin-inline:auto}
.bt-error pre{text-align:left; background:var(--soft); border:1px solid var(--line); border-radius:8px;
padding:14px; font-size:11.5px; overflow:auto; max-width:820px; margin:20px auto 0; line-height:1.6}
/* ── empty state ───────────────────────────────────────── */
.bt-empty{text-align:center; padding:44px 20px; color:var(--muted)}
.bt-empty i{font-size:34px; color:var(--line-2); display:block; margin-bottom:11px}
.bt-empty b{display:block; color:var(--ink-2); font-weight:500; font-size:14.5px; margin-bottom:4px}
.bt-empty p{font-size:12.5px}
/* ── grid helpers ──────────────────────────────────────── */
.bt-g2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px}
.bt-g3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px}
.bt-g4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px}
@media (max-width:900px){ .bt-g3,.bt-g4{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .bt-g2,.bt-g3,.bt-g4{grid-template-columns:1fr} }
/* ═══════════════════════════════════════════════════════════
component เพิ่มเติม — ใช้ร่วมทุกหน้า (ห้ามสร้างซ้ำในไฟล์ view)
═══════════════════════════════════════════════════════════ */
/* ── ปุ่มเล็ก (ใช้แทนการเอา .bt-tag มาทำเป็นปุ่ม) ────────── */
.bt-btn--sm{padding:5px 10px; font-size:12px; border-radius:6px}
.bt-btn--sm i{font-size:12px}
.bt-btn--icon{padding:6px 9px}
/* ── dialog (ใช้กับ