:root {
    --cream:#f6ead7; --cream-soft:#fbf4e8; --paper:#fffaf2;
    --wood-dark:#3a2519; --wood:#5c3a26; --wood-light:#8a5a3c;
    --indigo:#3f4a6b; --indigo-d:#2c3450;
    --terracotta:#c75d4f; --terracotta-d:#a8473b;
    --gold:#e0a44e; --gold-soft:#f0c987; --teal:#4e8079; --dusty-pink:#dba293;
    --ink:#3a2a1e; --ink-soft:#6b5444; --muted:#9c8472; --line:#e6d5bf;
    --shadow:rgba(90,58,38,0.18); --shadow-strong:rgba(58,37,25,0.28);

    /* 🔁 จุดสลับพื้นหลัง: path นี้ relative จาก assets/customer.css */
    --page-bg-image: url('background.avif');
  }

  * { margin:0; padding:0; box-sizing:border-box; }

  body {
    font-family:'Kanit', sans-serif; color:var(--ink);
    min-height:100vh; line-height:1.6; -webkit-font-smoothing:antialiased;
    background:#cdb89a;
  }

  /* ===== PAGE BACKGROUND (ภาพร้านญี่ปุ่น เต็มจอ) ===== */
  .page-bg {
    position:fixed; inset:0; z-index:0; overflow:hidden;
    background:var(--page-bg-image) center/cover no-repeat;
    /* color grading ตามเวลา — เปลี่ยนโทนภาพ ไม่แก้ตัวภาพ */
    filter:var(--bg-filter, none);
    transition:filter 1.4s ease;
  }
  .page-bg svg { width:100%; height:100%; display:block; }
  /* ถ้าตั้ง --page-bg-image เป็นรูปจริง ให้ซ่อน SVG ตัวอย่างอัตโนมัติ */
  .page-bg svg { opacity:0; }
  .page-bg::after {
    content:''; position:absolute; inset:0;
    background:var(--bg-overlay, linear-gradient(180deg, rgba(40,24,14,0.10), rgba(40,24,14,0.28)));
    transition:background 0.4s ease;
  }

  /* ===== TIME-OF-DAY TINT (ทับสีโทนตามเวลา) ===== */
  .page-tint {
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:var(--tint, transparent);
    mix-blend-mode:soft-light;
    opacity:var(--tint-opacity, 0.85);
    transition:background 1.4s ease, opacity 1.4s ease;
  }

  /* MORNING — เย็นสดชื่น ฟ้า/มิ้นต์ */
  body.tone-morning {
    --bg-filter:brightness(1.10) saturate(1.06) contrast(1.02) hue-rotate(-10deg);
    --tint:linear-gradient(180deg, rgba(150,210,232,0.55), rgba(196,228,214,0.30));
    --accent-now:#4e8079;
  }
  /* DAY — สว่างแอคทีฟ อิ่มสี */
  body.tone-day {
    --bg-filter:brightness(1.14) saturate(1.24) contrast(1.05);
    --tint:linear-gradient(180deg, rgba(255,242,200,0.30), rgba(150,205,235,0.22));
    --accent-now:#e0a44e;
  }
  /* EVENING — อุ่นทอง (โทนเดิม) */
  body.tone-evening {
    --bg-filter:brightness(1.02) saturate(1.10) sepia(0.10) hue-rotate(-6deg);
    --tint:linear-gradient(180deg, rgba(255,150,78,0.42), rgba(255,118,92,0.22));
    --accent-now:#c75d4f;
  }
  /* NIGHT — ครามมืดสงบ */
  body.tone-night {
    --bg-filter:brightness(0.72) saturate(0.92) contrast(1.06) hue-rotate(10deg);
    --tint:linear-gradient(180deg, rgba(44,54,98,0.62), rgba(28,28,56,0.48));
    --tint-opacity:1;
    --accent-now:#5d6aa6;
  }
  body.tone-night .page-tint { mix-blend-mode:multiply; }

  /* ===== DEMO SWITCHERS (สถานะร้าน + โทนสี) ===== */
  .switch-stack {
    position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:50;
    display:flex; flex-direction:column; gap:8px; align-items:center;
  }
  .switchbar {
    display:flex; align-items:center; gap:6px;
    background:rgba(28,20,16,0.62); backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.18); border-radius:999px;
    padding:6px 8px; box-shadow:0 10px 26px rgba(0,0,0,0.35);
  }
  .switchbar .sb-title { color:#f0e6d8; font-size:0.66rem; font-weight:300; padding:0 6px 0 4px; letter-spacing:0.5px; white-space:nowrap; }
  .switchbar button {
    border:none; cursor:pointer; font-family:'Kanit',sans-serif; font-size:0.7rem;
    color:#e9ddcb; background:transparent; padding:6px 11px; border-radius:999px; transition:all 0.2s;
  }
  .switchbar button:hover { background:rgba(255,255,255,0.12); }
  .switchbar button.on { background:#fff8ee; color:#3a2a1e; font-weight:500; }

  /* จุดสถานะเปลี่ยนสีตามโทนเวลา */
  .status-dot { background:var(--accent-now, var(--teal)) !important; }

  /* film grain */
  body::after {
    content:''; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:0.04;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ===== FLOATING CONTENT PANEL ===== */
  #app {
    max-width:460px; margin:26px auto; padding:20px 18px 40px;
    position:relative; z-index:1;
    background:var(--panel-bg, rgba(251,244,232,0.80));
    backdrop-filter:blur(10px) saturate(1.1);
    -webkit-backdrop-filter:blur(10px) saturate(1.1);
    border-radius:30px;
    border:1px solid rgba(255,255,255,0.45);
    box-shadow:0 30px 70px rgba(35,22,12,0.40);
  }

  /* ===== TOP BAR ===== */
  .topbar { display:flex; align-items:center; justify-content:space-between; padding:4px 4px 18px; }
  .brand { display:flex; align-items:center; gap:10px; }
  .brand-logo {
    width:42px; height:42px; border-radius:13px; overflow:hidden;
    background:linear-gradient(145deg, var(--indigo), var(--indigo-d));
    display:grid; place-items:center; box-shadow:0 6px 14px rgba(63,74,107,0.35);
  }
  .brand-logo svg { width:22px; height:22px; }
  .brand-logo img { width:100%; height:100%; object-fit:cover; }
  .brand-text h1 { font-family:'Mitr', sans-serif; font-weight:600; font-size:1.1rem; letter-spacing:0.3px; line-height:1.1; }
  .brand-text span { font-size:0.72rem; color:var(--muted); font-weight:300; letter-spacing:1px; }
  .status-pill {
    display:inline-flex; align-items:center; gap:6px; background:var(--paper);
    border:1px solid var(--line); padding:6px 12px; border-radius:999px;
    font-size:0.74rem; color:var(--ink-soft); box-shadow:0 4px 10px var(--shadow);
  }
  .status-dot { width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 3px rgba(78,128,121,0.18); }

  /* ===== VIDEO SLOT (พื้นที่วาง video anime) ===== */
  .video-slot {
    position:relative; border-radius:24px; overflow:hidden;
    aspect-ratio:16/10; background:#1d1726;
    box-shadow:0 14px 30px var(--shadow-strong);
  }
  /* สื่อ hero ทุกชั้นซ้อนกัน สลับด้วย .active (fade) */
  .hero-media {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
    opacity:0; transition:opacity 0.6s ease; z-index:0;
  }
  .hero-media.active { opacity:1; }
  .vs-overlay {
    position:absolute; inset:0; pointer-events:none; z-index:3;
    background:linear-gradient(180deg, rgba(20,12,24,0.18) 0%, transparent 30%, transparent 70%, rgba(20,12,24,0.25) 100%);
    box-shadow:inset 0 0 50px rgba(0,0,0,0.35);
  }
  .vs-tag {
    position:absolute; top:12px; left:12px; z-index:4; font-size:0.64rem; letter-spacing:1px;
    background:var(--tag-bg, rgba(0,0,0,0.45)); color:#fff; padding:5px 12px; border-radius:999px;
    backdrop-filter:blur(3px); display:inline-flex; align-items:center; gap:6px; font-weight:400;
  }
  .vs-tag::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--tag-dot,#fff); box-shadow:0 0 6px var(--tag-dot,#fff); }
  /* สีป้ายตามสถานะ */
  #hero-stage[data-status="free"]   { --tag-bg:rgba(38,90,70,0.6);  --tag-dot:#5fe0a0; }
  #hero-stage[data-status="busy"]   { --tag-bg:rgba(120,40,40,0.6); --tag-dot:#ff7a6a; }
  #hero-stage[data-status="closed"] { --tag-bg:rgba(40,46,80,0.7);  --tag-dot:#9fb0e0; }

  /* ===== CLOSED fallback card (ใช้เมื่อยังไม่มีรูปร้านปิด) ===== */
  .closed-card {
    position:absolute; inset:0; z-index:2; display:none;
    flex-direction:column; align-items:center; justify-content:center; gap:14px;
    background:linear-gradient(180deg, #1a2238 0%, #11182b 60%, #0c1020 100%);
  }
  #hero-stage[data-status="closed"].no-closed-img .closed-card { display:flex; }
  .cc-moon { width:54px; height:54px; border-radius:50%; background:radial-gradient(circle at 38% 38%, #fdf3c8, #e9d68a); box-shadow:0 0 30px rgba(245,230,160,0.5); }
  .cc-sign {
    font-family:'Mitr',sans-serif; font-weight:600; letter-spacing:3px; color:#3a2a1e;
    background:linear-gradient(#e9d9b8,#d8c39a); padding:8px 22px; border-radius:6px;
    border:2px solid #b89b6a; box-shadow:0 6px 14px rgba(0,0,0,0.4); transform:rotate(-3deg);
  }
  .cc-text { color:#c7d0e8; font-size:0.82rem; font-weight:300; }

  /* ===== SECTION ===== */
  .section { margin-top:26px; }
  .section-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; padding:0 2px; }
  .section-head h2 { font-family:'Mitr', sans-serif; font-weight:500; font-size:1rem; color:var(--ink); }
  .section-head .hint { font-size:0.74rem; color:var(--muted); font-weight:300; }

  .service-grid {
    display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; margin-bottom:14px;
    scroll-snap-type: x mandatory;
  }
  .service-grid::-webkit-scrollbar { height:5px; }
  .service-grid::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; }
  .svc {
    flex-shrink:0; width:135px; scroll-snap-align: start;
    background:var(--paper); border:1.5px solid var(--line); border-radius:20px;
    padding:16px 14px; cursor:pointer;
    transition:transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s, border-color 0.25s;
    box-shadow:0 6px 16px var(--shadow); position:relative; overflow:hidden;
  }
  .svc:hover { transform:translateY(-4px); box-shadow:0 14px 26px var(--shadow-strong); }
  .svc.active { border-color:var(--terracotta); box-shadow:0 12px 24px rgba(199,93,79,0.25); }
  .svc.active .check { position:absolute; top:12px; right:14px; width:22px; height:22px; background:var(--terracotta); border-radius:50%; display:grid; place-items:center; }
  .svc.active .check svg { width:12px; height:12px; }
  .svc-icon { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; margin-bottom:12px; }
  .svc-icon svg { width:26px; height:26px; }
  .svc:nth-child(4n+1) .svc-icon { background:#fbe4dd; color:var(--terracotta-d); }
  .svc:nth-child(4n+2) .svc-icon { background:#e2ecf0; color:var(--indigo); }
  .svc:nth-child(4n+3) .svc-icon { background:#f5e8cf; color:#a9772a; }
  .svc:nth-child(4n) .svc-icon { background:#dfeae6; color:var(--teal); }
  .svc-name { font-weight:500; font-size:0.92rem; height:2.6em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .svc-meta { display:flex; align-items:center; justify-content:space-between; margin-top:8px; flex-wrap:wrap; gap:4px; }
  .svc-price { font-family:'Mitr', sans-serif; font-weight:600; color:var(--terracotta); font-size:1.05rem; }
  .svc-dur { font-size:0.74rem; color:var(--muted); font-weight:300; display:inline-flex; align-items:center; gap:4px; }
  .svc-dur svg { width:13px; height:13px; }

  /* ===== BARBERS (P6) ===== */
  .barber-row { display:flex; gap:10px; overflow-x:auto; padding:4px 2px 10px; margin-bottom:4px; }
  .barber-row::-webkit-scrollbar { height:5px; }
  .barber-row::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; }
  .barber-card {
    flex-shrink:0; width:88px; background:var(--paper); border:1.5px solid var(--line);
    border-radius:16px; padding:10px 6px; text-align:center; cursor:pointer;
    transition:all 0.22s ease; box-shadow:0 5px 14px var(--shadow);
  }
  .barber-card:hover { transform:translateY(-3px); border-color:var(--terracotta); }
  .barber-card.on {
    border-color:var(--terracotta); background:linear-gradient(180deg,#fdeae4,var(--paper));
    box-shadow:0 12px 24px rgba(199,93,79,0.28); transform:translateY(-3px);
  }
  .barber-av {
    width:54px; height:54px; border-radius:50%; margin:0 auto 6px;
    background:#e7d7be center/cover no-repeat; display:grid; place-items:center;
    border:2px solid var(--paper); box-shadow:inset 0 0 0 1px var(--line);
    font-family:'Mitr',sans-serif; font-weight:500; color:var(--ink-soft); font-size:1.05rem;
  }
  .barber-card.on .barber-av { box-shadow:inset 0 0 0 2px var(--terracotta); }
  .barber-card .nm { font-size:0.78rem; font-weight:500; color:var(--ink); display:block; line-height:1.2; }
  .barber-card .ro { font-size:0.62rem; color:var(--muted); display:block; margin-top:2px; }
  .barber-any .barber-av { background:#f3ead7; color:var(--terracotta); font-weight:600; }

  /* ===== HAIRSTYLES (P8 — catalog) ===== */
  .hair-row { display:flex; gap:10px; overflow-x:auto; padding:4px 2px 10px; margin-bottom:4px; }
  .hair-row::-webkit-scrollbar { height:5px; }
  .hair-row::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; }
  .hair-card {
    flex-shrink:0; width:104px; background:var(--paper); border:1.5px solid var(--line);
    border-radius:16px; padding:8px 8px 10px; text-align:center; cursor:pointer;
    transition:all 0.22s ease; box-shadow:0 5px 14px var(--shadow); position:relative;
  }
  .hair-card:hover { transform:translateY(-3px); border-color:var(--terracotta); }
  .hair-card.on {
    border-color:var(--terracotta); background:linear-gradient(180deg,#fdeae4,var(--paper));
    box-shadow:0 12px 24px rgba(199,93,79,0.28); transform:translateY(-3px);
  }
  .hair-img {
    width:88px; height:88px; border-radius:12px; margin:0 auto 6px;
    background:#e7d7be center/cover no-repeat; display:grid; place-items:center;
    color:var(--muted); font-size:1.6rem;
  }
  .hair-card .nm { display:block; font-size:0.78rem; font-weight:500; color:var(--ink); line-height:1.2; }
  .hair-card .cat { display:block; font-size:0.62rem; color:var(--muted); margin-top:2px; }
  .hair-none .hair-img { background:#f3ead7; color:var(--terracotta); }

  /* P15: "ดูทั้งหมด" modal grid (รองรับทรงเยอะ) */
  .hairall-head { padding:14px 16px 8px; display:flex; gap:8px; align-items:center; border-bottom:1px solid var(--line); }
  .hairall-head input {
    flex:1; border:1.5px solid var(--line); border-radius:12px; padding:10px 13px;
    font-family:inherit; font-size:0.9rem; color:var(--ink); background:var(--paper); outline:none;
  }
  .hairall-head input:focus { border-color:var(--terracotta); }
  .hairall-head .close {
    background:transparent; color:var(--ink-soft); border:1px solid var(--line);
    border-radius:12px; padding:10px 16px; font-family:inherit; font-size:0.9rem; cursor:pointer; flex:0 0 auto;
  }
  .hairall-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
    padding:14px 16px 18px; overflow-y:auto;
  }
  .hairall-grid .hair-card { width:auto; }
  .hairall-grid .hair-img { width:100%; height:auto; aspect-ratio:1/1; }
  .hairall-empty { padding:30px 16px; text-align:center; color:var(--muted); font-size:0.9rem; }
  @media (max-width:360px){ .hairall-grid { grid-template-columns:repeat(2,1fr); } }

  /* Hairstyle zoom modal (P8) — แตะรูปเพื่อดูใหญ่ + AR (P9 stub) */
  .hair-modal-bd {
    position:fixed; inset:0; background:rgba(20,12,8,0.78); backdrop-filter:blur(6px);
    z-index:200; display:none; align-items:center; justify-content:center; padding:20px;
  }
  .hair-modal-bd.open { display:flex; }
  .hair-modal {
    background:#fffaf2; border-radius:24px; max-width:480px; width:100%;
    max-height:92vh; overflow:hidden; display:flex; flex-direction:column;
    box-shadow:0 30px 80px rgba(0,0,0,0.55); animation:hmIn 0.28s cubic-bezier(.2,.85,.25,1);
  }
  @keyframes hmIn { from { opacity:0; transform:translateY(20px) scale(0.96); } to { opacity:1; transform:none; } }
  .hair-modal-img {
    width:100%; aspect-ratio:1/1; background:#1a1410 center/contain no-repeat;
    display:grid; place-items:center; color:#6b5444; font-size:3.5rem;
  }
  .hair-modal-body { padding:16px 22px 20px; }
  .hair-modal-title { font-family:'Mitr',sans-serif; font-weight:500; font-size:1.15rem; color:var(--ink); }
  .hair-modal-meta { font-size:0.84rem; color:var(--muted); margin-top:4px; }
  .hair-modal-actions { display:flex; gap:8px; margin-top:16px; }
  .hair-modal-actions button {
    flex:1; border:none; border-radius:14px; padding:13px; font-family:'Mitr',sans-serif;
    font-weight:500; font-size:0.94rem; cursor:pointer;
  }
  .hair-modal-actions .ar {
    background:linear-gradient(145deg,#7e5cdb,#5b3fb6); color:#fff;
    box-shadow:0 8px 20px rgba(94,63,182,0.4); display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .hair-modal-actions .ar svg { width:18px; height:18px; }
  .hair-modal-actions .pick {
    background:linear-gradient(145deg,var(--terracotta),var(--terracotta-d)); color:#fff8ee;
    box-shadow:0 8px 20px rgba(199,93,79,0.4);
  }
  .hair-modal-actions .close {
    background:transparent; color:var(--ink-soft); border:1px solid var(--line); flex:0 0 auto; padding:13px 18px;
  }
  .hair-modal-actions button:disabled {
    opacity:0.45; cursor:not-allowed; box-shadow:none; filter:grayscale(0.4);
  }

  /* ===== P19: MYCUT SLIDER (ทรงเดิม 3 มุม) ===== */
  .mycut-slider {
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; background:#1a1410;
  }
  .mycut-slider::-webkit-scrollbar { display:none; }
  .mycut-slide {
    flex:0 0 100%; scroll-snap-align:center; aspect-ratio:1/1; position:relative;
    background:center/contain no-repeat; display:grid; place-items:center;
    color:#6b5444; font-size:3.5rem;
  }
  .mycut-slide .angle-chip {
    position:absolute; top:10px; left:10px; background:rgba(0,0,0,0.55); color:#fff;
    font-size:0.72rem; padding:3px 10px; border-radius:999px; backdrop-filter:blur(4px);
  }
  .mycut-dots { display:flex; justify-content:center; gap:6px; padding:10px 0 0; }
  .mycut-dots span {
    width:7px; height:7px; border-radius:50%; background:#d8cbb8; transition:background 0.2s, transform 0.2s;
  }
  .mycut-dots span.on { background:var(--terracotta); transform:scale(1.25); }

  /* ===== CHAIRS / TIME ===== */
  .month-nav { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:12px; }
  .month-nav span { font-family:'Mitr',sans-serif; font-weight:500; font-size:0.92rem; color:var(--ink); min-width:130px; text-align:center; }
  .month-nav button { width:34px; height:34px; border:1.5px solid var(--line); border-radius:11px; background:var(--paper); cursor:pointer; display:grid; place-items:center; color:var(--ink-soft); transition:all 0.2s; }
  .month-nav button:hover:not(:disabled) { border-color:var(--terracotta); color:var(--terracotta); }
  .month-nav button:disabled { opacity:0.35; cursor:not-allowed; }
  .month-nav button svg { width:18px; height:18px; }
  .date-row { display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; margin-bottom:14px; }
  .date-row::-webkit-scrollbar { height:5px; }
  .date-row::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; }
  .date-chip {
    flex-shrink:0; background:var(--paper); border:1.5px solid var(--line); border-radius:14px;
    padding:8px 12px; cursor:pointer; text-align:center; min-width:58px; transition:all 0.2s;
  }
  .date-chip:hover { border-color:var(--terracotta); }
  .date-chip.on { background:var(--terracotta); color:#fff; border-color:var(--terracotta); box-shadow:0 6px 14px rgba(199,93,79,0.3); }
  .date-chip.holiday { opacity:0.5; }
  .date-chip .dow { font-size:0.64rem; color:var(--muted); }
  .date-chip.on .dow { color:rgba(255,255,255,0.85); }
  .date-chip .d { font-family:'Mitr',sans-serif; font-weight:600; font-size:1.05rem; }
  .date-chip .mo { font-size:0.6rem; color:var(--muted); }
  .date-chip.on .mo { color:rgba(255,255,255,0.85); }
  .chairs-msg { grid-column:1/-1; text-align:center; padding:24px; color:var(--muted); font-size:0.9rem; }

  /* โปรแกรมพิเศษ (ยาวข้ามหลาย slot) — เส้นครอบเชื่อม */
  .chair.prog { position:relative; opacity:1; background:#efeefb; border-color:var(--indigo); color:var(--indigo); }
  .chair.prog .t { color:var(--indigo); }
  .chair.prog .s { color:var(--indigo); font-weight:500; font-size:0.6rem; }
  .chair.prog::before {
    content:''; position:absolute; left:-6px; right:-6px; top:-2px; height:3px;
    background:var(--indigo); z-index:1;
  }
  .chair.prog.prog-start::before { left:0; border-top-left-radius:3px; }
  .chair.prog.prog-end::before { right:0; border-top-right-radius:3px; }
  .chair.prog.prog-start { border-left:2px solid var(--indigo); border-top-left-radius:14px; border-bottom-left-radius:14px; }
  .chair.prog.prog-end { border-right:2px solid var(--indigo); border-top-right-radius:14px; border-bottom-right-radius:14px; }
  .chair.prog:not(.prog-start) { border-left:none; border-top-left-radius:0; border-bottom-left-radius:0; }
  .chair.prog:not(.prog-end) { border-right:none; border-top-right-radius:0; border-bottom-right-radius:0; }
  .chair.prog .ic { color:var(--indigo); }
  .chairs { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
  .chair {
    background:var(--paper); border:1.5px solid var(--line); border-radius:18px;
    padding:14px 6px 12px; text-align:center; cursor:pointer;
    transition:all 0.22s ease; box-shadow:0 5px 14px var(--shadow);
  }
  .chair:hover { transform:translateY(-3px); }
  .chair .ic { height:28px; display:grid; place-items:center; }
  .chair .ic svg { width:26px; height:26px; }
  .chair .t { display:block; margin-top:8px; font-size:0.82rem; font-weight:500; }
  .chair .s { display:block; font-size:0.64rem; font-weight:300; margin-top:2px; }
  .chair.free { color:var(--teal); } .chair.free .t { color:var(--ink); }
  .chair.free:hover { border-color:var(--teal); box-shadow:0 12px 22px rgba(78,128,121,0.22); }
  .chair.special { border-color:var(--gold); background:linear-gradient(180deg,#fff8e9,var(--paper)); color:var(--gold); }
  .chair.special .t { color:var(--ink); } .chair.special .s { font-weight:500; }
  .chair.taken { opacity:0.55; cursor:not-allowed; background:#efe6d8; color:var(--terracotta-d); }
  .chair.taken .t { color:var(--ink-soft); }
  .chair.sel { border-color:var(--terracotta); background:linear-gradient(180deg,#fdeae4,var(--paper)); box-shadow:0 12px 24px rgba(199,93,79,0.28); transform:translateY(-3px); color:var(--terracotta); }
  .chair.sel .t { color:var(--ink); } .chair.sel .s { font-weight:500; }

  /* ===== CTA ===== */
  .cta {
    margin-top:28px; width:100%; border:none; border-radius:18px; padding:16px;
    font-family:'Mitr', sans-serif; font-weight:500; font-size:1rem; color:#fff8ee;
    background:linear-gradient(145deg, var(--terracotta), var(--terracotta-d));
    cursor:pointer; box-shadow:0 12px 24px rgba(199,93,79,0.4);
    transition:transform 0.2s, box-shadow 0.2s; display:flex; align-items:center; justify-content:center; gap:8px;
  }
  .cta:hover { transform:translateY(-2px); box-shadow:0 16px 30px rgba(199,93,79,0.5); }
  .cta svg { width:18px; height:18px; }

  .legend { display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center; margin-top:14px; font-size:0.74rem; color:var(--muted); font-weight:300; }
  .legend i { display:inline-block; width:11px; height:11px; border-radius:4px; margin-right:5px; vertical-align:-1px; }
  .legend .g { background:var(--teal); } .legend .y { background:var(--gold); }
  .legend .r { background:var(--terracotta); } .legend .x { background:#cdbfac; }

  .note { margin-top:30px; background:var(--cream-soft); border:1px dashed var(--line); border-radius:16px; padding:14px 16px; font-size:0.78rem; color:var(--ink-soft); font-weight:300; }
  .note b { font-weight:500; color:var(--terracotta-d); }

  /* ===== BOTTOM SHEET ===== */
  .sheet-backdrop {
    position:fixed; inset:0; z-index:60; background:rgba(20,12,8,0.55);
    backdrop-filter:blur(4px); opacity:0; pointer-events:none;
    transition:opacity 0.3s ease;
  }
  .sheet-backdrop.open { opacity:1; pointer-events:auto; }
  .sheet {
    position:fixed; left:50%; bottom:0; transform:translate(-50%, 100%);
    width:100%; max-width:480px; z-index:70;
    background:linear-gradient(180deg, #fffaf2 0%, #fbf2e3 100%);
    border-radius:28px 28px 0 0; box-shadow:0 -20px 50px rgba(35,22,12,0.45);
    transition:transform 0.42s cubic-bezier(.2,.85,.25,1);
    max-height:90vh; overflow:hidden; display:flex; flex-direction:column;
  }
  .sheet.open { transform:translate(-50%, 0); }
  .sheet-handle {
    width:48px; height:5px; background:#d8c5a8; border-radius:99px;
    margin:10px auto 4px;
  }
  .sheet-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 22px 14px;
  }
  .sheet-title { font-family:'Mitr',sans-serif; font-weight:500; font-size:1rem; color:var(--ink); }
  .sheet-close {
    width:32px; height:32px; border-radius:50%; border:none; background:rgba(0,0,0,0.06);
    cursor:pointer; display:grid; place-items:center; color:var(--ink-soft);
  }
  .sheet-close:hover { background:rgba(0,0,0,0.1); }
  .sheet-close svg { width:16px; height:16px; }
  .sheet-body { padding:0 22px 24px; overflow-y:auto; flex:1; }

  /* steps */
  .step { display:none; animation:stepIn 0.35s ease; }
  .step.active { display:block; }
  @keyframes stepIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

  /* progress dots */
  .step-dots { display:flex; justify-content:center; gap:6px; margin-bottom:18px; }
  .step-dots i { width:8px; height:8px; border-radius:50%; background:var(--line); transition:all 0.3s; }
  .step-dots i.on { background:var(--terracotta); width:22px; border-radius:99px; }

  /* summary card */
  .sum-card {
    background:var(--paper); border:1px solid var(--line); border-radius:16px;
    padding:14px 16px; margin-bottom:16px;
  }
  .sum-row { display:flex; justify-content:space-between; padding:6px 0; font-size:0.86rem; }
  .sum-row + .sum-row { border-top:1px dashed var(--line); }
  .sum-row .lbl { color:var(--muted); }
  .sum-row .val { color:var(--ink); font-weight:500; }
  .sum-total .val { color:var(--terracotta); font-family:'Mitr',sans-serif; font-size:1.05rem; font-weight:600; }

  /* form input */
  .field { margin-bottom:14px; }
  .field label { display:block; font-size:0.74rem; color:var(--muted); margin-bottom:6px; }
  .field input {
    width:100%; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px;
    font-family:'Kanit',sans-serif; font-size:0.92rem; color:var(--ink); background:var(--paper);
    transition:border-color 0.2s;
  }
  .field input:focus { outline:none; border-color:var(--terracotta); }

  .btn-primary {
    width:100%; border:none; border-radius:16px; padding:14px;
    font-family:'Mitr',sans-serif; font-weight:500; font-size:0.95rem; color:#fff8ee;
    background:linear-gradient(145deg, var(--terracotta), var(--terracotta-d));
    cursor:pointer; box-shadow:0 10px 22px rgba(199,93,79,0.35);
    transition:transform 0.2s; display:flex; align-items:center; justify-content:center; gap:8px;
  }
  .btn-primary:hover { transform:translateY(-1px); }
  .btn-primary:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
  .btn-primary svg { width:18px; height:18px; }
  .btn-ghost {
    width:100%; border:1.5px solid var(--line); background:var(--paper); color:var(--ink-soft);
    border-radius:14px; padding:12px; font-family:'Kanit',sans-serif; font-size:0.86rem; cursor:pointer;
    margin-top:8px; transition:background 0.2s;
  }
  .btn-ghost:hover { background:var(--cream-soft); }
  .btn-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .btn-row button { margin-top:0; }

  /* PromptPay QR */
  .qr-wrap {
    background:var(--paper); border-radius:18px; padding:16px;
    text-align:center; margin-bottom:14px;
    box-shadow:0 6px 16px var(--shadow);
    border:1px solid var(--line);
  }
  .qr-brand { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px; }
  .qr-brand .pp-logo {
    background:#001489; color:#fff; padding:3px 8px; border-radius:4px;
    font-size:0.6rem; font-weight:600; letter-spacing:1px;
  }
  .qr-brand .pp-text { font-size:0.7rem; color:var(--ink-soft); }
  #qr-canvas { display:block; margin:0 auto; max-width:200px; height:auto; }
  .qr-amount { margin-top:10px; font-family:'Mitr',sans-serif; font-size:1.4rem; color:var(--terracotta); font-weight:600; }
  .qr-target { font-size:0.74rem; color:var(--muted); margin-top:2px; }

  /* slip upload */
  .slip-upload {
    border:2px dashed var(--line); border-radius:14px; padding:18px;
    text-align:center; cursor:pointer; transition:all 0.2s; background:var(--cream-soft);
  }
  .slip-upload:hover, .slip-upload.drag { border-color:var(--terracotta); background:var(--paper); }
  .slip-upload svg { width:32px; height:32px; color:var(--muted); margin-bottom:6px; }
  .slip-upload p { font-size:0.82rem; color:var(--ink-soft); }
  .slip-upload small { font-size:0.7rem; color:var(--muted); display:block; margin-top:2px; }
  .slip-preview {
    margin-top:12px; border-radius:12px; overflow:hidden;
    border:1px solid var(--line); display:none; position:relative;
  }
  .slip-preview.show { display:block; }
  .slip-preview img { width:100%; display:block; max-height:200px; object-fit:contain; background:#f5f0e6; }
  .slip-clear {
    position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%;
    background:rgba(0,0,0,0.6); color:#fff; border:none; cursor:pointer; display:grid; place-items:center;
  }
  .slip-clear svg { width:14px; height:14px; }

  /* ===== TOP BANNER (รอตรวจสลิป) ===== */
  .banner {
    position:fixed; top:0; left:0; right:0; z-index:55;
    background:linear-gradient(135deg, #e0a44e, #d68a35); color:#fff;
    padding:10px 18px; display:none; align-items:center; gap:10px;
    box-shadow:0 6px 18px rgba(224,164,78,0.4);
    transform:translateY(-100%); transition:transform 0.4s ease;
    font-family:'Kanit',sans-serif; font-size:0.86rem;
  }
  .banner.show { display:flex; transform:translateY(0); }
  .banner.success { background:linear-gradient(135deg, #4e8079, #3a6360); }
  .banner-icon { display:grid; place-items:center; }
  .banner-icon svg { width:20px; height:20px; }
  .banner-icon .spin { animation:spin 1.4s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .banner-text { flex:1; line-height:1.3; }
  .banner-text b { font-weight:500; display:block; }
  .banner-text small { font-size:0.74rem; opacity:0.9; }
  .banner-action {
    background:rgba(255,255,255,0.22); border:1px solid rgba(255,255,255,0.4);
    color:#fff; padding:6px 12px; border-radius:10px; cursor:pointer;
    font-family:'Kanit',sans-serif; font-size:0.74rem;
  }
  .banner-action:hover { background:rgba(255,255,255,0.32); }

  /* ===== CONFIRMED RECEIPT (Step 4) ===== */
  .receipt {
    background:var(--paper); border-radius:20px; padding:22px 20px; margin:0 auto;
    box-shadow:0 8px 22px var(--shadow); border:1px solid var(--line); position:relative;
  }
  .receipt::before, .receipt::after {
    content:''; position:absolute; width:18px; height:18px; border-radius:50%;
    background:var(--cream-soft); top:50%; transform:translateY(-50%);
  }
  .receipt::before { left:-9px; } .receipt::after { right:-9px; }
  .receipt-top {
    text-align:center; padding-bottom:14px; border-bottom:1.5px dashed var(--line); margin-bottom:14px;
  }
  .receipt-stamp {
    display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:99px;
    background:#dff3ec; color:#2c6a5e; font-size:0.72rem; font-weight:500;
  }
  .receipt-stamp svg { width:14px; height:14px; }
  .receipt h3 { font-family:'Mitr',sans-serif; font-weight:600; font-size:1.1rem; margin-top:8px; color:var(--ink); }
  .receipt-shop { font-size:0.74rem; color:var(--muted); margin-top:2px; }
  .receipt-grid { display:grid; grid-template-columns:auto 1fr; gap:8px 14px; font-size:0.86rem; }
  .receipt-grid .k { color:var(--muted); }
  .receipt-grid .v { color:var(--ink); font-weight:500; text-align:right; }
  .receipt-qr {
    margin-top:16px; padding-top:14px; border-top:1.5px dashed var(--line);
    display:flex; align-items:center; gap:14px;
  }
  .receipt-qr canvas { width:84px; height:84px; }
  .receipt-qr-text { font-size:0.72rem; color:var(--muted); line-height:1.4; }
  .receipt-qr-text b { color:var(--ink); font-weight:500; display:block; margin-bottom:2px; font-size:0.78rem; }

  /* ===== MY QUEUE (คิวของฉัน) ===== */
  .my-queue { margin-top:26px; }
  .my-queue h2 {
    font-family:'Mitr',sans-serif; font-weight:500; font-size:1rem;
    color:var(--ink); margin-bottom:12px; padding:0 2px;
    display:flex; align-items:center; gap:8px;
  }
  .my-queue h2 .badge-cnt {
    font-size:0.7rem; padding:2px 9px; background:var(--terracotta); color:#fff; border-radius:99px; font-weight:400;
  }
  .queue-item {
    background:linear-gradient(180deg,#fff,#fffaf0);
    border:1px solid var(--line); border-radius:18px; padding:14px 16px;
    box-shadow:0 6px 16px var(--shadow); margin-bottom:10px;
    border-left:4px solid var(--gold);
    animation:qf 0.4s ease;
  }
  @keyframes qf { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
  .queue-item.confirmed { border-left-color:var(--teal); }
  .queue-item.removing { animation:qo 0.35s ease forwards; }
  @keyframes qo { to { opacity:0; transform:translateX(20px); max-height:0; padding-top:0; padding-bottom:0; margin-bottom:0; border-width:0; } }

  .q-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .q-svc { font-weight:500; color:var(--ink); display:flex; align-items:center; gap:8px; }
  .q-svc svg { width:18px; height:18px; color:var(--terracotta); }
  .q-status {
    font-size:0.7rem; padding:3px 10px; border-radius:99px; font-weight:400;
  }
  .q-status.pending { background:#fff1d2; color:#a17820; }
  .q-status.confirmed { background:#dff3ec; color:var(--teal-d); }
  .q-info { display:grid; grid-template-columns:repeat(2,1fr); gap:6px 12px; font-size:0.82rem; margin-bottom:12px; }
  .q-info .row { display:flex; align-items:center; gap:6px; color:var(--ink-soft); }
  .q-info .row svg { width:14px; height:14px; color:var(--muted); }
  .q-info .row b { color:var(--ink); font-weight:500; }
  .q-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .q-btn {
    border:none; border-radius:11px; padding:10px; font-family:'Kanit',sans-serif; font-size:0.8rem;
    cursor:pointer; transition:all 0.2s; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  }
  .q-btn svg { width:14px; height:14px; }
  .q-btn.warn { background:var(--paper); color:var(--gold); border:1.5px solid var(--gold); }
  .q-btn.warn:hover { background:var(--gold); color:#fff; }
  .q-btn.no { background:var(--paper); color:var(--terracotta); border:1.5px solid var(--terracotta); }
  .q-btn.no:hover { background:var(--terracotta); color:#fff; }
  .q-empty {
    text-align:center; color:var(--muted); font-size:0.84rem; padding:24px 16px;
    background:var(--paper); border:1px dashed var(--line); border-radius:18px;
  }

  /* ===== CUSTOMER TOAST ===== */
  .ctoast {
    position:fixed; left:50%; bottom:80px; transform:translateX(-50%) translateY(120px);
    background:var(--paper); padding:12px 18px; border-radius:14px; z-index:90;
    box-shadow:0 12px 30px rgba(0,0,0,0.25); transition:transform 0.4s ease;
    display:flex; align-items:center; gap:10px; font-size:0.88rem; max-width:90vw;
  }
  .ctoast.show { transform:translateX(-50%) translateY(0); }
  .ctoast.ok { color:var(--teal-d); border-left:4px solid var(--teal); }
  .ctoast.warn { color:#a17820; border-left:4px solid var(--gold); }

  /* ===== MY BOOKINGS ===== */
  .my-list { display:flex; flex-direction:column; gap:12px; }
  .my-bk {
    background:var(--paper); border:1.5px solid var(--line); border-radius:18px;
    padding:14px 16px; position:relative; overflow:hidden;
    box-shadow:0 6px 16px var(--shadow); transition:all 0.2s;
    border-left:4px solid var(--gold);
  }
  .my-bk.confirmed { border-left-color:var(--teal); }
  .my-bk.cancelled { opacity:0.55; }
  .my-bk-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
  .my-bk-title { font-family:'Mitr',sans-serif; font-weight:500; font-size:0.95rem; }
  .my-bk-status { font-size:0.68rem; padding:3px 10px; border-radius:99px; font-weight:500; }
  .my-bk-status.pending { background:#fff1d2; color:#a17820; }
  .my-bk-status.confirmed { background:#dff3ec; color:var(--teal-d); }
  .my-bk-status.cancelled { background:#eae3d3; color:var(--muted); }
  .my-bk-status.hold { background:#fff5e6; color:#b9790f; }   /* P27: awaiting_slip */
  .my-bk-when {
    display:flex; align-items:center; gap:14px; padding:10px 0;
    border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); margin-bottom:12px;
  }
  .my-bk-when .when-block { flex:1; }
  .my-bk-when .when-block .k { font-size:0.7rem; color:var(--muted); margin-bottom:2px; }
  .my-bk-when .when-block .v { font-family:'Mitr',sans-serif; font-weight:500; font-size:0.95rem; color:var(--ink); }
  .my-bk-when .divider { width:1px; background:var(--line); align-self:stretch; }
  .my-bk-meta { display:flex; justify-content:space-between; align-items:center; font-size:0.78rem; color:var(--muted); margin-bottom:12px; }
  .my-bk-meta b { color:var(--terracotta); font-family:'Mitr',sans-serif; font-weight:600; }
  .my-bk-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .my-bk-actions.triple { grid-template-columns:1fr 1fr 1fr; }
  .my-bk-actions .btn-view-bk { background:linear-gradient(135deg,var(--gold),#d49642); color:#fff; border-color:transparent; }
  .my-bk-actions .btn-view-bk:hover { filter:brightness(1.06); }
  .my-bk-actions button {
    border:1px solid var(--line); background:var(--paper); cursor:pointer;
    padding:10px; border-radius:12px; font-family:'Kanit',sans-serif; font-size:0.82rem;
    color:var(--ink-soft); transition:all 0.2s; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  }
  .my-bk-actions button:hover { transform:translateY(-1px); }
  .my-bk-actions button svg { width:14px; height:14px; }
  .my-bk-actions .btn-resched:hover { border-color:var(--gold); color:#a17820; background:#fff8e9; }
  .my-bk-actions .btn-cancel-bk:hover { border-color:var(--terracotta); color:var(--terracotta-d); background:#fde9e6; }
  .my-bk-actions.single { grid-template-columns:1fr; }

  /* ===== FLEX MESSAGE PREVIEW ===== */
  .flex-preview {
    background:linear-gradient(180deg, #d8dee7 0%, #c5cdd9 100%);
    border-radius:18px; padding:16px; margin-top:14px;
  }
  .flex-preview-label {
    display:flex; align-items:center; gap:6px; font-size:0.72rem; color:#52606d; margin-bottom:10px; justify-content:center;
  }
  .flex-card {
    background:var(--paper); border-radius:14px; overflow:hidden; max-width:280px; margin:0 auto;
    box-shadow:0 4px 14px rgba(0,0,0,0.18);
  }
  .flex-hero {
    aspect-ratio:20/13; background:linear-gradient(135deg, #c75d4f, #a8473b);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:#fff; font-family:'Mitr',sans-serif; gap:4px;
  }
  .flex-hero svg { width:34px; height:34px; opacity:0.9; }
  .flex-hero .ft { font-weight:500; font-size:0.86rem; }
  .flex-body { padding:14px; }
  .flex-body h4 { font-family:'Mitr',sans-serif; font-weight:500; font-size:0.94rem; margin-bottom:4px; color:#333; }
  .flex-body .sub { font-size:0.72rem; color:#888; margin-bottom:10px; }
  .flex-row { display:flex; justify-content:space-between; padding:3px 0; font-size:0.76rem; border-top:1px solid #eee; }
  .flex-row:first-of-type { border-top:none; }
  .flex-row .k { color:#888; } .flex-row .v { color:#333; font-weight:500; }
  .flex-actions { padding:0 14px 14px; display:flex; flex-direction:column; gap:6px; }
  .flex-btn {
    border:1.5px solid var(--terracotta); border-radius:8px; padding:8px;
    text-align:center; font-size:0.78rem; cursor:pointer; transition:all 0.2s;
    color:var(--terracotta); background:var(--paper); font-family:'Kanit',sans-serif; font-weight:500;
  }
  .flex-btn.primary { background:var(--terracotta); color:#fff; }
  .flex-btn:hover { transform:translateY(-1px); }

  /* ===== CANCEL CONFIRM MODAL ===== */
  .modal-bd {
    position:fixed; inset:0; background:rgba(20,12,8,0.55); backdrop-filter:blur(6px);
    z-index:80; display:none; align-items:center; justify-content:center; padding:20px;
  }
  .modal-bd.open { display:flex; animation:mf 0.3s ease; }
  @keyframes mf { from { opacity:0; } to { opacity:1; } }
  .mini-modal {
    background:var(--paper); border-radius:20px; max-width:380px; width:100%;
    padding:24px 22px; box-shadow:0 30px 70px rgba(0,0,0,0.4); text-align:center;
    animation:mp 0.35s cubic-bezier(.2,.85,.25,1);
  }
  @keyframes mp { from { transform:scale(0.92); opacity:0; } to { transform:scale(1); opacity:1; } }
  .mini-icon {
    width:60px; height:60px; border-radius:50%; margin:0 auto 14px;
    display:grid; place-items:center;
    background:linear-gradient(145deg, #fde9e6, #f8c5be); color:var(--terracotta);
  }
  .mini-icon svg { width:28px; height:28px; }
  .mini-modal h3 { font-family:'Mitr',sans-serif; font-weight:500; font-size:1.04rem; margin-bottom:8px; }
  .mini-modal p { font-size:0.86rem; color:var(--ink-soft); margin-bottom:18px; line-height:1.5; }
  .mini-modal .btn-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .mini-modal button {
    border:none; border-radius:12px; padding:12px; cursor:pointer;
    font-family:'Kanit',sans-serif; font-size:0.86rem; font-weight:500;
    transition:transform 0.2s;
  }
  .mini-modal button:hover { transform:translateY(-1px); }
  .mini-modal .btn-keep { background:#f0e6d4; color:var(--ink); }
  .mini-modal .btn-confirm-cancel { background:var(--terracotta); color:#fff; }

  /* ===== RESCHEDULE SLOT GRID (ใน sheet) ===== */
  .rs-info { background:#fff8e9; border:1px solid #f0c987; border-radius:14px; padding:12px 14px; margin-bottom:14px; font-size:0.82rem; color:#8a6a25; }
  .rs-date-row { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:14px; }
  .rs-date-row::-webkit-scrollbar { height:5px; }
  .rs-date-row::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; }
  .rs-date {
    flex-shrink:0; background:var(--paper); border:1.5px solid var(--line); border-radius:12px;
    padding:8px 12px; cursor:pointer; text-align:center; min-width:62px; transition:all 0.2s;
  }
  .rs-date.on { background:var(--terracotta); color:#fff; border-color:var(--terracotta); }
  .rs-date .dow { font-size:0.66rem; color:var(--muted); margin-bottom:2px; }
  .rs-date.on .dow { color:rgba(255,255,255,0.85); }
  .rs-date .d { font-family:'Mitr',sans-serif; font-weight:600; font-size:1.1rem; }
  .rs-date .mo { font-size:0.62rem; color:var(--muted); margin-top:2px; }
  .rs-date.on .mo { color:rgba(255,255,255,0.85); }
  .rs-slots { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px; }
  .rs-slot {
    background:var(--paper); border:1.5px solid var(--line); border-radius:10px;
    padding:10px 4px; text-align:center; cursor:pointer; font-size:0.86rem; transition:all 0.2s;
  }
  .rs-slot:hover { border-color:var(--teal); }
  .rs-slot.taken { opacity:0.4; cursor:not-allowed; background:#f5f0e6; }
  .rs-slot.on { background:var(--terracotta); color:#fff; border-color:var(--terracotta); font-weight:500; }

  /* ===== SHOP-NOT-FOUND OVERLAY ===== */
  .err-overlay {
    position:fixed; inset:0; z-index:9999; display:none;
    background:linear-gradient(180deg, #2b1e15 0%, #1a120c 100%);
    align-items:center; justify-content:center; padding:24px;
  }
  .err-overlay.show { display:flex; animation:errIn 0.4s ease; }
  @keyframes errIn { from { opacity:0; } to { opacity:1; } }
  .err-card {
    width:min(420px, 100%); background:linear-gradient(180deg,#fffaf2 0%,#fbf2e3 100%);
    border-radius:24px; padding:36px 28px 28px; text-align:center;
    box-shadow:0 30px 80px rgba(0,0,0,0.5); border:1px solid rgba(199,93,79,0.2);
  }
  .err-icon {
    width:84px; height:84px; margin:0 auto 18px; border-radius:50%;
    background:linear-gradient(145deg,#fdeae4,#fbe4d6);
    display:grid; place-items:center; color:var(--terracotta-d);
    box-shadow:inset 0 0 0 2px rgba(199,93,79,0.18), 0 8px 24px rgba(199,93,79,0.2);
  }
  .err-icon svg { width:42px; height:42px; }
  .err-card h2 {
    font-family:'Mitr',sans-serif; font-weight:600; font-size:1.4rem;
    color:var(--ink); margin-bottom:6px; letter-spacing:-0.01em;
  }
  .err-card p { font-size:0.9rem; color:var(--ink-soft); font-weight:300; line-height:1.55; margin-bottom:6px; }
  .err-slug {
    display:inline-block; margin:14px 0 20px; padding:6px 14px;
    background:#fdeae4; border:1px dashed var(--terracotta);
    border-radius:99px; font-family:'Mitr',sans-serif; font-weight:500;
    color:var(--terracotta-d); font-size:0.85rem; max-width:100%; overflow-wrap:anywhere;
  }
  .err-slug i { font-style:normal; opacity:0.65; margin-right:6px; font-weight:300; }
  .err-actions { display:flex; flex-direction:column; gap:10px; }
  .err-btn {
    width:100%; border:none; border-radius:14px; padding:14px;
    font-family:'Kanit',sans-serif; font-size:0.94rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:transform 0.2s, box-shadow 0.2s;
  }
  .err-btn.primary { background:linear-gradient(145deg,var(--terracotta),var(--terracotta-d)); color:#fff8ee; box-shadow:0 10px 22px rgba(199,93,79,0.35); }
  .err-btn.primary:hover { transform:translateY(-2px); box-shadow:0 14px 26px rgba(199,93,79,0.45); }
  .err-btn.ghost { background:transparent; color:var(--ink-soft); border:1.5px solid var(--line); }
  .err-btn.ghost:hover { border-color:var(--terracotta); color:var(--terracotta); }
  .err-btn svg { width:16px; height:16px; }
  .err-hint { margin-top:18px; font-size:0.72rem; color:var(--muted); font-weight:300; }

/* ---- split style block ---- */


  .lang-toggle{
    position:fixed; top:10px; right:10px; z-index:120;
    display:inline-flex; background:rgba(255,255,255,0.86); backdrop-filter:blur(6px);
    border:1px solid rgba(125,90,60,0.18); border-radius:999px; padding:3px;
    box-shadow:0 4px 14px rgba(0,0,0,0.12); font-family:'Kanit',sans-serif;
  }
  .lang-toggle button{
    border:none; background:transparent; cursor:pointer; padding:5px 11px;
    font-size:0.78rem; color:#7a5a3a; border-radius:999px; font-weight:500;
    transition:background 0.2s, color 0.2s;
  }
  .lang-toggle button.on{ background:var(--terracotta, #c83a3a); color:#fff; }
  .lang-toggle button:not(.on):hover{ background:rgba(125,90,60,0.08); }

/* ---- split style block ---- */

@keyframes spinSlip { to { transform: rotate(360deg); } }