: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; --teal-d:#3a6360; --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);
    --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 BG + TIME-OF-DAY TINT (เหมือนฝั่งลูกค้า) ===== */
  .page-bg {
    position:fixed; inset:0; z-index:0; overflow:hidden;
    background:var(--page-bg-image) center/cover no-repeat;
    filter:var(--bg-filter,none); transition:filter 1.4s ease;
  }
  .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;
  }
  .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;
  }
  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)); }
  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)); }
  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)); }
  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; }
  body.tone-night .page-tint { mix-blend-mode:multiply; }

  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 PANEL (กว้างกว่าฝั่งลูกค้า สำหรับ iPad) ===== */
  #app {
    max-width:760px; margin:26px auto; padding:22px 22px 60px;
    position:relative; z-index:1;
    background:var(--panel-bg, rgba(251,244,232,0.84));
    backdrop-filter:blur(12px) saturate(1.1);
    -webkit-backdrop-filter:blur(12px) 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);
  }
  /* Fail closed: keep the dashboard hidden and non-interactive until the
     authenticated owner has resolved to exactly one shop. */
  html:not(.cutqr-admin-ready) #app { display:none !important; }

  /* ===== HEADER ===== */
  .header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
  .brand { display:flex; align-items:center; gap:12px; }
  .brand-logo {
    width:48px; height:48px; border-radius:14px; 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:24px; height:24px; }
  .brand-logo img { width:100%; height:100%; object-fit:cover; }
  .brand-text h1 { font-family:'Mitr',sans-serif; font-weight:600; font-size:1.18rem; line-height:1.1; }
  .brand-text span { font-size:0.74rem; color:var(--muted); font-weight:300; letter-spacing:1px; }
  .pill-row { display:flex; gap:8px; }
  .pill {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--paper); border:1px solid var(--line);
    padding:7px 13px; border-radius:999px; font-size:0.76rem;
    color:var(--ink-soft); box-shadow:0 4px 10px var(--shadow);
  }
  .pill .dot { width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 3px rgba(78,128,121,0.18); }
  .pill .dot.busy { background:var(--terracotta); box-shadow:0 0 0 3px rgba(199,93,79,0.22); }
  .pill-btn { cursor:pointer; font-family:'Kanit',sans-serif; transition:all 0.2s; }
  .pill-btn:hover { border-color:var(--gold); }
  .pill-btn.on { background:linear-gradient(145deg,var(--gold),#c98a30); color:#fff; border-color:transparent; box-shadow:0 6px 14px rgba(224,164,78,0.4); }

  /* ===== HERO MEDIA (เล็กกว่า ผังบนสุดของ admin) ===== */
  .hero {
    position:relative; border-radius:20px; overflow:hidden;
    aspect-ratio:32/9; background:#1d1726; margin-bottom:18px;
    box-shadow:0 10px 22px var(--shadow-strong);
  }
  .hero-media {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    opacity:0; transition:opacity 0.6s ease;
  }
  .hero-media.active { opacity:1; }
  .hero-overlay {
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(90deg, rgba(20,12,24,0.55) 0%, transparent 40%);
  }
  .hero-info {
    position:absolute; top:50%; left:20px; transform:translateY(-50%); color:#fff8ee;
    text-shadow:0 2px 6px rgba(0,0,0,0.45);
  }
  .hero-info .lbl { font-size:0.7rem; letter-spacing:2px; opacity:0.85; text-transform:uppercase; font-weight:300; }
  .hero-info .big { font-family:'Mitr',sans-serif; font-weight:500; font-size:1.2rem; margin-top:2px; }
  .hero-tag {
    position:absolute; top:12px; right:12px; font-size:0.66rem; 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;
  }
  .hero-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[data-status="busy"]   { --tag-bg:rgba(120,40,40,0.6); --tag-dot:#ff7a6a; }
  .hero[data-status="free"]   { --tag-bg:rgba(38,90,70,0.6);  --tag-dot:#5fe0a0; }
  .hero[data-status="closed"] { --tag-bg:rgba(40,46,80,0.7);  --tag-dot:#9fb0e0; }

  /* ===== STATS ===== */
  .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
  .stat {
    background:var(--paper); border:1px solid var(--line); border-radius:18px;
    padding:14px; box-shadow:0 6px 16px var(--shadow); position:relative; overflow:hidden;
  }
  .stat .k { font-size:0.7rem; color:var(--muted); font-weight:300; letter-spacing:0.5px; display:flex; align-items:center; gap:6px; }
  .stat .k svg { width:14px; height:14px; }
  .stat .v { font-family:'Mitr',sans-serif; font-weight:600; font-size:1.6rem; margin-top:4px; line-height:1; }
  .stat.green .v { color:var(--teal); } .stat.green .k svg { color:var(--teal); }
  .stat.gold .v { color:var(--gold); } .stat.gold .k svg { color:var(--gold); }
  .stat.red .v { color:var(--terracotta); } .stat.red .k svg { color:var(--terracotta); }
  .stat.indigo .v { color:var(--indigo); } .stat.indigo .k svg { color:var(--indigo); }

  /* ===== TABS ===== */
  .tabs {
    display:flex; gap:6px; margin-bottom:16px;
    background:rgba(255,250,242,0.6); border:1px solid var(--line); border-radius:14px; padding:5px;
  }
  .tab {
    flex:1; border:none; background:transparent; padding:10px 12px; cursor:pointer;
    font-family:'Kanit',sans-serif; font-size:0.84rem; color:var(--ink-soft);
    border-radius:10px; transition:all 0.2s; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  }
  .tab:hover { background:rgba(0,0,0,0.04); }
  .tab.on { background:var(--ink); color:var(--paper); box-shadow:0 4px 12px rgba(58,42,30,0.3); }
  .tab svg { width:16px; height:16px; }

  /* ===== MODE TOGGLE (P36: หน้าคิว ⇄ Dashboard) ===== */
  .mode-toggle {
    display:inline-flex; gap:3px; margin:0 0 14px; padding:3px;
    background:rgba(58,42,30,0.06); border:1px solid var(--line); border-radius:12px;
  }
  .mode-seg {
    display:inline-flex; align-items:center; gap:6px; border:none; background:transparent; cursor:pointer;
    font-family:'Kanit',sans-serif; font-size:0.85rem; font-weight:500; color:var(--ink-soft);
    padding:8px 16px; border-radius:9px; transition:all 0.2s;
  }
  .mode-seg:hover { color:var(--ink); }
  .mode-seg.on { background:var(--ink); color:var(--paper); box-shadow:0 3px 10px rgba(58,42,30,0.25); }
  body.mode-dashboard #hero-stage,
  body.mode-dashboard .stats,
  body.mode-dashboard .tabs { display:none !important; }

  /* ===== PANEL ===== */
  .panel { display:none; animation:pf 0.3s ease; }
  .panel.on { display:block; }
  @keyframes pf { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

  /* ===== P12.A BILLING ===== */
  #billing-banner { margin:0 0 16px; }
  .billing-banner {
    position:relative; overflow:hidden; display:grid; grid-template-columns:auto 1fr auto;
    align-items:center; gap:14px; padding:15px 17px; border:1px solid rgba(185,118,90,.25);
    border-radius:19px; color:var(--ink); background:linear-gradient(135deg,#fff3df,#f3dcc2 58%,#ead0bc);
    box-shadow:0 12px 32px rgba(75,52,45,.12);
  }
  .billing-banner::after { content:""; position:absolute; right:-38px; top:-58px; width:150px; height:150px; border-radius:50%; background:rgba(70,82,122,.08); pointer-events:none; }
  .billing-banner.warn { background:linear-gradient(135deg,#fff0d1,#efc98f 58%,#dba27d); }
  .billing-banner.danger { color:#fff8ee; border-color:rgba(255,255,255,.16); background:linear-gradient(135deg,#6d3e4a,#9b514e 58%,#b9765a); }
  .billing-banner.info:not(.trial) { background:linear-gradient(135deg,#e4e8f1,#d7dced 58%,#c4cada); }
  .billing-banner-icon { position:relative; z-index:1; width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:rgba(255,255,255,.54); color:#8f4e3c; font-size:1.15rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); }
  .billing-banner.danger .billing-banner-icon { background:rgba(255,255,255,.12); color:#fff0dc; }
  .billing-banner-main { position:relative; z-index:1; min-width:0; }
  .billing-banner-kicker { font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#9b5a43; }
  .billing-banner.danger .billing-banner-kicker { color:#ffd8c9; }
  .billing-banner-title { margin-top:2px; font-family:'Mitr',sans-serif; font-weight:600; font-size:.97rem; line-height:1.35; }
  .billing-banner-detail { margin-top:3px; color:#6f5d62; font-size:.76rem; line-height:1.5; }
  .billing-banner.danger .billing-banner-detail { color:rgba(255,248,238,.78); }
  .billing-banner-cta { position:relative; z-index:1; border:0; border-radius:999px; padding:9px 15px; background:#2b2536; color:#fff8ee; font-family:'Mitr',sans-serif; font-weight:500; white-space:nowrap; cursor:pointer; box-shadow:0 8px 18px rgba(43,37,54,.18); }
  .billing-banner-cta:hover { transform:translateY(-1px); }
  .billing-banner.danger .billing-banner-cta { background:#fff3df; color:#70414a; }
  .bill-summary { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .bill-card { background:var(--paper); border:1px solid #e8ddcb; border-radius:14px; padding:14px 16px; box-shadow:0 2px 8px rgba(58,42,30,0.05); }
  .bill-card-k { font-size:0.8rem; color:var(--muted); margin-bottom:4px; }
  .bill-card-v { font-family:'Mitr',sans-serif; font-weight:600; font-size:1.5rem; color:var(--ink); line-height:1.15; }
  .bill-card-sub { font-size:0.74rem; color:var(--muted); margin-top:4px; }
  .plan-badge { display:inline-block; padding:2px 10px; border-radius:999px; font-size:0.74rem; font-weight:600; vertical-align:middle; }
  .plan-badge.pro { background:linear-gradient(135deg,#f0cf94,#c98a16); color:#3a2a1e; }
  .plan-badge.std { background:#ece3d4; color:#7a6650; }
  .pkg-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:12px; }
  .pkg-card { background:var(--paper); border:1.5px solid #e3d8c5; border-radius:14px; padding:16px 14px; text-align:center; cursor:pointer; transition:.18s; }
  .pkg-card:hover { border-color:#8a6fd6; box-shadow:0 6px 16px rgba(91,63,160,0.16); transform:translateY(-2px); }
  .pkg-cr { font-family:'Mitr',sans-serif; font-weight:600; font-size:1.6rem; color:#5b3fa0; line-height:1.1; }
  .pkg-cr small { font-size:0.78rem; color:var(--muted); font-weight:400; }
  .pkg-price { margin-top:6px; font-size:1.04rem; color:var(--ink); font-weight:600; }
  .pkg-per { font-size:0.72rem; color:var(--muted); margin-top:3px; }
  .pkg-card.plan .pkg-cr { color:#b9790f; font-size:1.25rem; }
  .bill-history { display:flex; flex-direction:column; gap:8px; }
  .bill-empty { text-align:center; color:var(--muted); font-size:0.86rem; padding:18px; }
  .bill-row { background:var(--paper); border:1px solid #ece3d4; border-radius:12px; padding:11px 14px; display:flex; align-items:center; gap:10px; }
  .bill-row .br-main { flex:1; min-width:0; }
  .bill-row .br-title { font-size:0.92rem; color:var(--ink); font-weight:500; }
  .bill-row .br-sub { font-size:0.75rem; color:var(--muted); margin-top:2px; }
  .br-status { font-size:0.74rem; font-weight:600; padding:3px 10px; border-radius:999px; white-space:nowrap; }
  .br-status.pending  { background:#fff3d6; color:#b07d12; }
  .br-status.approved { background:#e3f6ea; color:#1f9b54; }
  .br-status.rejected { background:#fbe4e4; color:#c0392b; }
  .br-status.grant    { background:#efe9fb; color:#5b3fa0; }
  /* payment modal */
  .pay-amount { text-align:center; font-family:'Mitr',sans-serif; font-weight:600; font-size:1.5rem; color:var(--ink); margin:4px 0 2px; }
  .pay-desc { text-align:center; color:var(--muted); font-size:0.86rem; margin-bottom:12px; }
  .pay-qr-wrap { text-align:center; margin:10px 0; }
  .pay-placeholder { background:#fff8ea; border:1px dashed #e0c98a; border-radius:12px; padding:14px; font-size:0.84rem; color:#8a6d2e; text-align:center; }
  .pay-slip-zone { border:1.5px dashed #cdbfa8; border-radius:12px; padding:16px; text-align:center; cursor:pointer; color:var(--muted); font-size:0.86rem; margin:10px 0; }
  .pay-slip-zone.required { border-color:var(--terracotta); color:var(--terracotta-d); background:#fff5f1; font-weight:500; }
  .pay-slip-zone.missing { box-shadow:0 0 0 3px rgba(199,93,79,0.16); }
  .pay-slip-zone img { max-width:100%; max-height:180px; border-radius:8px; }

  /* ===== PANEL HEAD (date control etc.) ===== */
  .phead { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:10px; flex-wrap:wrap; }
  .phead h2 { font-family:'Mitr',sans-serif; font-weight:500; font-size:1.04rem; color:var(--ink); }
  .date-input {
    background:var(--paper); border:1px solid var(--line); border-radius:12px;
    padding:9px 12px; font-family:'Kanit',sans-serif; font-size:0.86rem; color:var(--ink);
    cursor:pointer; box-shadow:0 4px 10px var(--shadow);
  }
  .icon-btn {
    width:38px; height:38px; border:1px solid var(--line); border-radius:12px;
    background:var(--paper); cursor:pointer; display:grid; place-items:center; color:var(--ink-soft);
    transition:all 0.2s; box-shadow:0 4px 10px var(--shadow);
  }
  .icon-btn:hover { color:var(--terracotta); border-color:var(--terracotta); }
  .icon-btn svg { width:18px; height:18px; }

  /* ===== BOOKING CARD ===== */
  .booking {
    background:var(--paper); border:1px solid var(--line); border-radius:18px;
    padding:14px 16px; margin-bottom:10px; display:flex; gap:14px;
    box-shadow:0 5px 14px var(--shadow); transition:all 0.2s;
    border-left:4px solid var(--line);
  }
  .booking:hover { transform:translateY(-2px); box-shadow:0 10px 22px var(--shadow-strong); }
  .booking.scan-hit { box-shadow:0 0 0 3px rgba(78,128,121,0.28), 0 12px 24px var(--shadow-strong); }
  .booking.pending { border-left-color:var(--gold); }
  .booking.confirmed { border-left-color:var(--teal); }
  .booking.rejected { border-left-color:var(--terracotta); opacity:0.7; }
  .booking.cancelled { opacity:0.4; }
  .booking.unlocked { border-left-color:var(--indigo); background:#f5f0ff; }

  .b-time {
    flex-shrink:0; width:78px; text-align:center;
    border-right:1px dashed var(--line); padding-right:14px;
  }
  .b-time .hr { font-family:'Mitr',sans-serif; font-weight:600; font-size:1.3rem; color:var(--ink); line-height:1; }
  .b-time .dur { font-size:0.7rem; color:var(--muted); margin-top:2px; }
  .b-queue-count {
    display:inline-flex; margin-top:7px; padding:2px 7px; border-radius:99px;
    background:#f0e6d4; color:var(--ink-soft); font-size:0.66rem; font-weight:500;
  }
  .b-main { flex:1; min-width:0; }
  .b-row1 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
  .b-name { font-weight:500; color:var(--ink); }
  .b-group-badge {
    display:inline-flex; align-items:center; padding:2px 8px; border-radius:99px;
    background:#eee7fb; color:#5d4a8a; font-size:0.68rem; font-weight:500;
  }
  .b-badge {
    font-size:0.68rem; padding:2px 8px; border-radius:99px;
    background:#f0e6d4; color:var(--ink-soft); font-weight:400;
  }
  .b-badge.pending { background:#fff1d2; color:#a17820; }
  .b-badge.confirmed { background:#dff3ec; color:var(--teal-d); }
  .b-badge.rejected { background:#fbdfdb; color:var(--terracotta-d); }
  .b-badge.cancelled { background:#eae3d3; color:var(--muted); }
  .b-badge.unlocked { background:#e3def8; color:#5d4a8a; }
  .b-meta { font-size:0.78rem; color:var(--muted); }
  .b-meta b { color:var(--ink); font-weight:500; }
  .b-group-slots { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  .b-group-slots span {
    display:inline-flex; align-items:baseline; gap:5px; padding:4px 9px;
    border:1px solid var(--line); border-radius:8px; background:#fffaf2;
    color:var(--ink); font-size:0.76rem; font-weight:500;
  }
  .b-group-slots small { color:var(--muted); font-size:0.62rem; font-weight:400; }
  .b-verify-note.is-success { color:#2f7d4f; font-weight:500; }
  .b-verify-note.is-failure { color:#c0392b; font-weight:500; }
  .b-actions { display:flex; flex-direction:column; gap:6px; align-items:flex-end; flex-shrink:0; }
  .b-thumbs { display:flex; gap:10px; margin-top:8px; }
  .b-slip {
    width:54px; height:54px; border-radius:10px; border:1px solid var(--line);
    object-fit:cover; cursor:pointer; background:#f5f0e6; transition:all 0.2s;
  }
  .b-slip:hover { border-color:var(--terracotta); transform:scale(1.05); }
  .b-ai-preview {
    width:54px; height:54px; border-radius:10px; border:2px solid #5b3fb6;
    object-fit:cover; cursor:pointer; background:#f5f0e6; transition:all 0.2s;
    box-shadow:0 0 0 2px rgba(94,63,182,0.18); position:relative;
  }
  .b-ai-preview:hover { transform:scale(1.05); box-shadow:0 4px 14px rgba(94,63,182,0.4); }
  @media (max-width:640px) {
    .booking { flex-wrap:wrap; }
    .b-main { flex-basis:calc(100% - 96px); }
    .b-actions { width:100%; flex-direction:row; justify-content:flex-end; }
  }
  .b-ai-wrap { position:relative; display:inline-block; }
  .b-ai-wrap::after {
    content:'🤖'; position:absolute; top:-6px; right:-6px;
    background:#5b3fb6; color:#fff; font-size:0.7rem; padding:1px 5px; border-radius:9px;
    pointer-events:none;
  }
  /* P19: การ์ดคิวที่ลูกค้าเลือก "ทรงเดิม" — badge + สี terracotta แทน AI */
  .b-past-wrap { position:relative; display:inline-block; }
  .b-past-wrap::after {
    content:'ทรงเดิม'; position:absolute; top:-6px; right:-6px;
    background:var(--terracotta,#c75d4f); color:#fff; font-size:0.62rem; padding:1px 6px; border-radius:9px;
    pointer-events:none; white-space:nowrap;
  }
  .b-past-wrap .b-ai-preview {
    border-color:var(--terracotta,#c75d4f);
    box-shadow:0 0 0 2px rgba(199,93,79,0.18);
  }
  .b-past-wrap .b-ai-preview:hover { box-shadow:0 4px 14px rgba(199,93,79,0.4); }

  /* P19: MYCUT SLIDER (ดูทรงเดิม 3 มุมใน admin — pattern เดียวหน้าลูกค้า) */
  .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 8px; }
  .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,#c75d4f); transform:scale(1.25); }
  .b-btn-row { display:flex; gap:6px; }
  .b-btn {
    border:none; border-radius:10px; padding:7px 12px; font-family:'Kanit',sans-serif;
    font-size:0.74rem; cursor:pointer; transition:all 0.2s; display:inline-flex; align-items:center; gap:4px;
  }
  .b-btn svg { width:14px; height:14px; }
  .b-btn.ok { background:var(--teal); color:#fff; }
  .b-btn.ok:hover { background:var(--teal-d); }
  .b-btn.no { background:var(--terracotta); color:#fff; }
  .b-btn.no:hover { background:var(--terracotta-d); }
  .b-btn.ghost { background:var(--paper); color:var(--ink-soft); border:1px solid var(--line); }
  .b-btn.ghost:hover { color:var(--terracotta); border-color:var(--terracotta); }

  .empty {
    text-align:center; padding:50px 20px; color:var(--muted);
    background:var(--paper); border:1px dashed var(--line); border-radius:18px;
  }
  .empty svg { width:42px; height:42px; color:var(--line); margin-bottom:10px; }

  /* ===== UNLOCK PANEL ===== */
  .info-card {
    background:#fff8e9; border:1px solid #f0c987; border-radius:14px;
    padding:14px; margin-bottom:18px; display:flex; gap:12px; align-items:flex-start;
  }
  .info-card svg { width:22px; height:22px; color:var(--gold); flex-shrink:0; }
  .info-card p { font-size:0.84rem; color:var(--ink-soft); line-height:1.55; }
  .info-card p b { color:#8a6a25; font-weight:500; }

  /* ===== Settings accordion ===== */
  .acc { border:1px solid var(--line); border-radius:14px; margin-bottom:12px; background:var(--paper); overflow:hidden; }
  .acc[open] { box-shadow:0 2px 10px rgba(0,0,0,0.04); }
  .acc-h { list-style:none; cursor:pointer; padding:14px 16px; display:flex; align-items:center; gap:10px; user-select:none; transition:background 0.15s; }
  .acc-h::-webkit-details-marker { display:none; }
  .acc-h:hover { background:#faf7f1; }
  .acc-h .acc-ico { width:22px; height:22px; flex-shrink:0; }
  .acc-h .acc-title { font-weight:500; font-size:0.94rem; color:var(--ink); flex:1; }
  .acc-h .acc-badge { font-size:0.72rem; padding:3px 10px; border-radius:999px; font-weight:500; white-space:nowrap; }
  .acc-h .acc-badge.ok  { background:#e3f6ea; color:#1f9b54; }
  .acc-h .acc-badge.warn{ background:#fff5e6; color:#9a6b14; }
  .acc-h .acc-badge.off { background:#efe9e0; color:#8b7a5c; }
  .acc-h .acc-chev { width:18px; height:18px; color:var(--muted); transition:transform 0.2s; }
  .acc[open] .acc-h .acc-chev { transform:rotate(180deg); }
  .acc-body { padding:6px 16px 16px; border-top:1px solid var(--line); }
  .acc-body > *:first-child { margin-top:12px; }

  .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
  .field label { display:block; font-size:0.76rem; color:var(--muted); margin-bottom:6px; }
  .field input, .field select, .field textarea {
    width:100%; background:var(--paper); border:1px solid var(--line); border-radius:12px;
    padding:11px 13px; font-family:'Kanit',sans-serif; font-size:0.86rem; color:var(--ink);
    transition:border-color 0.2s; box-sizing:border-box;
  }
  .field textarea { resize:vertical; min-height:64px; line-height:1.5; }
  .field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--terracotta); }
  .payment-method-switch { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin-bottom:16px; background:var(--cream); border-radius:12px; }
  .payment-method-switch input { position:absolute; opacity:0; pointer-events:none; }
  .payment-method-switch label { min-height:40px; display:grid; place-items:center; padding:8px 10px; border-radius:9px; color:var(--ink-soft); font-size:0.82rem; cursor:pointer; }
  .payment-method-switch input:checked + label { background:var(--paper); color:var(--ink); font-weight:500; box-shadow:0 2px 8px rgba(58,42,30,.12); }
  .merchant-qr-preview { width:180px; max-width:100%; aspect-ratio:1; object-fit:contain; display:block; margin:12px auto; border:1px solid var(--line); border-radius:8px; background:#fff; }

  .btn-action {
    border:none; border-radius:14px; padding:13px 18px;
    font-family:'Mitr',sans-serif; font-weight:500; font-size:0.9rem;
    cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    transition:transform 0.2s;
  }
  .btn-action:hover { transform:translateY(-1px); }
  .btn-action svg { width:18px; height:18px; }
  .btn-action.gold { background:linear-gradient(145deg, var(--gold), #c98a30); color:#fff; box-shadow:0 10px 22px rgba(224,164,78,0.4); }
  .btn-action.red { background:linear-gradient(145deg, var(--terracotta), var(--terracotta-d)); color:#fff8ee; box-shadow:0 10px 22px rgba(199,93,79,0.4); }
  .btn-action.full { width:100%; }

  /* ===== UNLOCKED LIST ===== */
  .unlocked-mini {
    background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:12px 14px;
    margin-bottom:8px; display:flex; align-items:center; justify-content:space-between;
  }
  .unlocked-mini .time-pill {
    background:#e3def8; color:#5d4a8a; padding:4px 10px; border-radius:8px; font-weight:500; font-size:0.86rem;
  }
  .unlocked-mini .btn-remove {
    background:transparent; border:none; cursor:pointer; color:var(--muted); padding:6px;
  }
  .unlocked-mini .btn-remove:hover { color:var(--terracotta); }
  .unlocked-mini .btn-remove svg { width:16px; height:16px; }

  /* ===== CALENDAR (HOLIDAY) ===== */
  .weekly-hours-card {
    border:1px solid var(--line); border-radius:12px; background:var(--paper);
    padding:16px; margin-bottom:14px;
  }
  .weekly-hours-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; }
  .weekly-hours-head h2 { font-family:'Mitr',sans-serif; font-size:0.96rem; font-weight:500; color:var(--ink); }
  .weekly-hours-head p { margin-top:2px; color:var(--muted); font-size:0.76rem; line-height:1.4; }
  .weekly-hours-head .btn-action { width:auto; min-width:112px; margin:0; padding:9px 14px; }
  .weekly-lead-setting { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
  .weekly-lead-copy label { display:block; color:var(--ink); font-size:0.88rem; font-weight:600; }
  .weekly-lead-copy p { margin-top:4px; color:var(--muted); font-size:0.76rem; line-height:1.45; }
  .weekly-lead-setting input { flex:0 0 180px; width:180px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#fffdf8; color:var(--ink); font:inherit; }
  .weekly-hours-list { display:grid; gap:7px; }
  .weekly-hours-row {
    display:grid; grid-template-columns:minmax(92px,1fr) auto minmax(104px,132px) auto minmax(104px,132px);
    align-items:center; gap:9px; min-height:48px; padding:7px 10px;
    border-top:1px solid var(--line); color:var(--ink-soft);
  }
  .weekly-hours-row:first-child { border-top:0; }
  .weekly-day-name { font-weight:500; color:var(--ink); }
  .weekly-open-toggle { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:0.76rem; white-space:nowrap; }
  .weekly-open-toggle input { width:17px; height:17px; accent-color:var(--teal); }
  .weekly-hours-row select {
    width:100%; border:1px solid var(--line); border-radius:8px; padding:8px 9px;
    background:#fffdf8; color:var(--ink); font-family:'Kanit',sans-serif; font-size:0.8rem;
  }
  .weekly-hours-row .weekly-separator { color:var(--muted); font-size:0.76rem; text-align:center; }
  .weekly-hours-row.is-closed select { opacity:0.45; pointer-events:none; }
  .weekly-hours-row.is-closed .weekly-separator { opacity:0.45; }
  .cal-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  @media (max-width:640px) { .cal-grid { grid-template-columns:1fr; } }
  .cal {
    background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:14px;
    box-shadow:0 5px 14px var(--shadow);
  }
  .cal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
  .cal-title { font-family:'Mitr',sans-serif; font-weight:500; font-size:0.94rem; color:var(--ink); }
  .cal-nav { display:flex; gap:4px; }
  .cal-nav button {
    width:28px; height:28px; border:1px solid var(--line); border-radius:8px;
    background:var(--paper); cursor:pointer; display:grid; place-items:center; color:var(--ink-soft);
    transition:all 0.2s;
  }
  .cal-nav button:hover { color:var(--terracotta); border-color:var(--terracotta); }
  .cal-nav button svg { width:14px; height:14px; }
  .cal-weeks { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
  .cal-wname { text-align:center; font-size:0.7rem; color:var(--muted); padding:4px 0; font-weight:400; }
  .cal-wname.sun { color:var(--terracotta); }
  .cal-day {
    aspect-ratio:1; display:grid; place-items:center; border-radius:10px;
    font-size:0.84rem; cursor:pointer; transition:all 0.18s; color:var(--ink);
    border:1px solid transparent; background:transparent; position:relative;
  }
  .cal-day:hover { background:var(--cream-soft); border-color:var(--line); }
  .cal-day.other { color:var(--line); cursor:default; }
  .cal-day.other:hover { background:transparent; border-color:transparent; }
  .cal-day.past { color:var(--muted); opacity:0.55; cursor:not-allowed; }
  .cal-day.past:hover { background:transparent; border-color:transparent; }
  .cal-day.today { border-color:var(--teal); font-weight:600; color:var(--teal-d); }
  .cal-day.holiday {
    background:linear-gradient(145deg, var(--terracotta), var(--terracotta-d));
    color:#fff8ee; font-weight:500;
    box-shadow:0 4px 10px rgba(199,93,79,0.35);
  }
  .cal-day.holiday::after {
    content:''; position:absolute; bottom:5px; width:4px; height:4px; border-radius:50%;
    background:#fff8ee;
  }
  .cal-day.holiday:hover { transform:scale(0.94); background:linear-gradient(145deg, var(--terracotta-d), #8a3a30); }
  .cal-day.weekly-closed { cursor:not-allowed; }

  .cal-legend {
    display:flex; gap:14px; justify-content:center; margin-top:10px;
    font-size:0.72rem; color:var(--muted);
  }
  .cal-legend i {
    display:inline-block; width:11px; height:11px; border-radius:4px; margin-right:4px; vertical-align:-1px;
  }
  .cal-legend .today-d { border:1.5px solid var(--teal); background:transparent; }
  .cal-legend .holiday-d { background:var(--terracotta); }

  .preset-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
  .preset {
    background:var(--paper); border:1px solid var(--line); border-radius:10px;
    padding:8px 12px; cursor:pointer; font-family:'Kanit',sans-serif; font-size:0.78rem;
    color:var(--ink-soft); transition:all 0.2s;
  }
  .preset:hover { border-color:var(--terracotta); color:var(--terracotta); }
  .preset svg { width:14px; height:14px; vertical-align:-3px; margin-right:4px; }

  @media (max-width:640px) {
    .weekly-hours-head { align-items:flex-start; }
    .weekly-hours-head .btn-action { min-width:96px; }
    .weekly-lead-setting { align-items:stretch; flex-direction:column; gap:10px; }
    .weekly-lead-setting input { width:100%; flex-basis:auto; }
    .weekly-hours-row { grid-template-columns:minmax(74px,1fr) auto minmax(76px,1fr) minmax(76px,1fr); gap:6px; }
    .weekly-hours-row .weekly-separator { display:none; }
  }

  .booking-message-settings {
    margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
  }
  .booking-message-heading { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
  .booking-message-heading strong { color:var(--ink); font-size:0.98rem; }
  .booking-message-heading span,
  .booking-message-label span { color:var(--muted); font-size:0.76rem; }
  .booking-message-row {
    display:grid; grid-template-columns:minmax(190px,0.75fr) minmax(220px,1fr) minmax(220px,1fr);
    gap:12px; align-items:end; padding:14px 0; border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  }
  .booking-message-row:last-child { border-bottom:0; padding-bottom:0; }
  .booking-message-label { display:flex; flex-direction:column; gap:3px; align-self:center; }
  .booking-message-label strong { color:var(--ink-soft); font-size:0.9rem; }
  .booking-message-row .field { margin:0; min-width:0; }
  @media (max-width:820px) {
    .booking-message-row { grid-template-columns:1fr 1fr; }
    .booking-message-label { grid-column:1/-1; }
  }
  @media (max-width:520px) {
    .booking-message-row { grid-template-columns:1fr; }
    .booking-message-label { grid-column:auto; }
  }

  .holiday-list { margin-top:16px; }
  .holiday-list h3 { font-family:'Mitr',sans-serif; font-weight:500; font-size:0.92rem; margin-bottom:10px; }
  .holiday-mini {
    background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:10px 14px;
    margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .holiday-mini .h-date {
    background:linear-gradient(145deg, var(--terracotta), var(--terracotta-d));
    color:#fff8ee; padding:4px 12px; border-radius:8px; font-weight:500; font-size:0.82rem;
  }
  .holiday-mini .h-note { color:var(--ink-soft); font-size:0.82rem; flex:1; }
  .holiday-mini .h-note input {
    border:none; background:transparent; font-family:'Kanit',sans-serif;
    font-size:0.82rem; color:var(--ink-soft); width:100%; outline:none;
  }
  .holiday-mini .h-note input:focus { color:var(--ink); }

  /* ===== BACKUP PANEL ===== */
  .danger-banner {
    background:linear-gradient(135deg, #fbdfdb, #f8c5be); border:1px solid #ed9b91;
    border-radius:14px; padding:14px 16px; margin-bottom:18px; display:flex; gap:12px; align-items:flex-start;
  }
  .danger-banner svg { width:22px; height:22px; color:var(--terracotta); flex-shrink:0; }
  .danger-banner h3 { font-family:'Mitr',sans-serif; font-weight:500; font-size:0.94rem; color:var(--terracotta-d); margin-bottom:4px; }
  .danger-banner p { font-size:0.82rem; color:var(--ink-soft); line-height:1.5; }
  .console {
    background:#1c1f2e; border-radius:14px; padding:14px;
    font-family:'Consolas','Menlo',monospace; font-size:0.78rem;
    color:#88dd88; height:220px; overflow-y:auto; margin-top:14px; line-height:1.6;
  }
  .console .ln { margin-bottom:4px; }
  .console .ln.sys { color:#8ac7ff; }
  .console .ln.warn { color:#ffd07a; }
  .console .ln.err { color:#ff8888; font-weight:500; }
  .console .ln.ok { color:#7fe899; }

  /* ===== THEME EDITOR (floating toggle + modal) ===== */
  .theme-fab {
    position:fixed; right:16px; bottom:16px; z-index:60;
    width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,0.6); cursor:pointer;
    background:var(--paper);
    display:grid; place-items:center;
    box-shadow:0 8px 22px rgba(58,37,25,0.42); transition:transform 0.2s;
  }
  .theme-fab svg { width:32px; height:32px; }
  .theme-fab:hover { transform:scale(1.06); }
  .theme-fab:active { transform:scale(0.96); }
  .tm-presets { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
  .tm-preset {
    border:1.5px solid var(--line); border-radius:14px; padding:10px 12px; cursor:pointer;
    background:var(--paper); text-align:left; transition:border-color 0.15s, box-shadow 0.15s;
  }
  .tm-preset:hover { border-color:var(--gold); }
  .tm-preset.on { border-color:var(--ink); box-shadow:0 4px 12px rgba(58,42,30,0.18); }
  .tm-preset-name { font-size:0.86rem; font-weight:500; color:var(--ink); margin-bottom:7px; }
  .tm-swatches { display:flex; gap:5px; }
  .tm-swatches span { width:20px; height:20px; border-radius:6px; border:1px solid rgba(0,0,0,0.08); }
  .tm-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; }
  .tm-row label { font-size:0.84rem; color:var(--ink-soft); }
  .tm-row input[type=color] {
    width:44px; height:30px; border:1px solid var(--line); border-radius:8px;
    background:var(--paper); cursor:pointer; padding:2px;
  }
  .tm-sub { font-size:0.74rem; color:var(--muted); font-weight:500; margin:14px 0 4px; letter-spacing:0.3px; }
  .tm-slider { width:100%; accent-color:var(--gold); }
  .tm-bg-row { display:flex; align-items:center; gap:12px; margin-top:6px; }
  .tm-bg-thumb {
    width:74px; height:52px; border-radius:10px; border:1px solid var(--line);
    background-size:cover; background-position:center; flex-shrink:0; background-color:#e9ddc9;
  }
  .tm-bg-btns { display:flex; flex-direction:column; gap:6px; }
  .tm-mini-btn {
    border:1px solid var(--line); background:var(--paper); border-radius:9px; padding:6px 12px;
    font-family:'Kanit',sans-serif; font-size:0.8rem; color:var(--ink-soft); cursor:pointer;
  }
  .tm-mini-btn:hover { border-color:var(--gold); }
  .tm-actions { display:flex; gap:10px; margin-top:18px; }
  .tm-actions button {
    flex:1; border:none; border-radius:12px; padding:11px; font-family:'Kanit',sans-serif;
    font-size:0.9rem; font-weight:500; cursor:pointer;
  }
  .tm-save { background:linear-gradient(145deg, var(--teal), var(--teal-d)); color:#fff; }
  .tm-reset { background:rgba(0,0,0,0.06); color:var(--ink-soft); }
  /* editor shield: freeze vars ในกล่อง theme เอง = อ่านออกเสมอ ไม่ว่า preview จะมืดแค่ไหน */
  #theme-modal .modal { --paper:#fffaf2; --panel-bg:#fffaf2; --ink:#3a2a1e; --ink-soft:#6b5444; --muted:#9c8472; --line:#e6d5bf; --gold:#e0a44e; --teal:#4e8079; --teal-d:#3a6360; }

  /* ===== SLIP MODAL ===== */
  .modal-bd {
    position:fixed; inset:0; background:rgba(20,12,8,0.7); 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; } }
  .modal {
    background:var(--paper); border-radius:22px; max-width:480px; width:100%;
    padding:22px; max-height:90vh; overflow-y:auto;
    box-shadow:0 30px 70px rgba(0,0,0,0.5);
  }
  .modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
  .modal-head h3 { font-family:'Mitr',sans-serif; font-weight:500; font-size:1.04rem; }
  .modal-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);
  }
  .modal-close svg { width:16px; height:16px; }
  .modal-slip {
    width:100%; max-height:340px; object-fit:contain; border:1px solid var(--line);
    border-radius:12px; background:var(--paper); margin-bottom:14px;
  }
  .modal-info {
    background:var(--paper); border:1px solid var(--line); border-radius:12px;
    padding:12px 14px; margin-bottom:14px; font-size:0.84rem;
  }
  .modal-info > div { display:flex; justify-content:space-between; padding:5px 0; }
  .modal-info > div + div { border-top:1px dashed var(--line); }
  .modal-info .k { color:var(--muted); } .modal-info .v { color:var(--ink); font-weight:500; }
  .modal-info .verify-result.is-success { color:#2f7d4f; }
  .modal-info .verify-result.is-failure { color:#c0392b; }
  .modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .modal-actions .b-btn { padding:13px; font-size:0.86rem; justify-content:center; }

  /* ===== TONE SWITCH (เก็บไว้สำหรับ demo) ===== */
  .switch-stack { position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:50;
    display:flex; 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; }
  .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; }

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

  @media (max-width:640px) {
    .stats { grid-template-columns:repeat(2,1fr); }
    .form-row { grid-template-columns:1fr; }
    .payment-method-switch { grid-template-columns:1fr; }
    .tab span { display:none; }
    /* header ล้นแนวนอนบนมือถือ (brand ยาว + pill 4 อัน ไม่ wrap) → ทั้งหน้า scroll ข้างได้ */
    html, body { overflow-x:hidden; }
    .header { flex-wrap:wrap; gap:10px; }
    .pill-row { flex-wrap:wrap; justify-content:flex-end; }
    .brand-text h1 { font-size:1.02rem; }
    #app { margin:14px 10px; padding:16px 14px 48px; }
  }

  /* ===== DATE INPUT dd/mm/yyyy overlay ===== */
  .date-field { position:relative; display:inline-block; }
  .date-field.full { display:block; }
  .date-field > input[type=date] { color:transparent; }
  .date-field > input[type=date]::-webkit-datetime-edit { color:transparent; }
  .date-field .date-show {
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    pointer-events:none; font-family:'Kanit',sans-serif; font-size:0.86rem; color:var(--ink); white-space:nowrap;
  }

  /* ===== SERVICE ROWS ===== */
  .service-row {
    background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:12px 14px;
    margin-bottom:8px; display:flex; align-items:center; gap:12px;
  }
  .service-row .sv-ic { width:38px; height:38px; border-radius:11px; background:#fbe4dd; color:var(--terracotta-d); display:grid; place-items:center; flex-shrink:0; }
  .service-row .sv-ic svg { width:20px; height:20px; }
  .service-row .sv-info { flex:1; min-width:0; }
  .service-row .sv-name { font-weight:500; color:var(--ink); }
  .service-row .sv-meta { font-size:0.8rem; color:var(--muted); }
  .service-row .sv-meta b { color:var(--terracotta); font-family:'Mitr',sans-serif; }
  .service-row input { border:1px solid var(--line); border-radius:8px; padding:7px 9px; font-family:'Kanit',sans-serif; font-size:0.84rem; width:100%; }
  .service-row .sv-edit-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:6px; flex:1; }
  .sv-btn { border:none; border-radius:9px; padding:8px 10px; cursor:pointer; font-family:'Kanit',sans-serif; font-size:0.76rem; transition:all 0.2s; display:inline-flex; align-items:center; gap:4px; }
  .sv-btn svg { width:14px; height:14px; }
  .sv-btn.edit { background:var(--paper); border:1px solid var(--line); color:var(--ink-soft); }
  .sv-btn.edit:hover { border-color:var(--gold); color:#a17820; }
  .sv-btn.del { background:var(--paper); border:1px solid var(--line); color:var(--ink-soft); }
  .sv-btn.del:hover { border-color:var(--terracotta); color:var(--terracotta-d); }
  .sv-btn.save { background:var(--teal); color:#fff; }
  .sv-btn.cancel { background:#f0e6d4; color:var(--ink); }

  .service-editor {
    background:var(--paper); border:1px solid var(--line); border-radius:14px;
    padding:16px; margin-bottom:24px;
  }
  .service-editor > h2 { font-family:'Mitr',sans-serif; font-weight:500; font-size:0.96rem; margin-bottom:14px; }
  .sv-program-grid { display:grid; grid-template-columns:180px minmax(0,1fr); gap:16px; align-items:start; }
  .sv-cover-upload {
    aspect-ratio:4/3; overflow:hidden; display:grid; place-items:center; cursor:pointer;
    background:#f3eadf; border:1.5px dashed var(--line); border-radius:12px; color:var(--muted);
  }
  .sv-cover-upload:hover { border-color:var(--gold); color:#a17820; }
  .sv-cover-upload img { width:100%; height:100%; object-fit:cover; }
  .sv-cover-upload span { display:grid; justify-items:center; gap:6px; text-align:center; font-size:0.76rem; }
  .sv-cover-upload svg { width:28px; height:28px; }
  .sv-cover-hint { color:var(--muted); font-size:0.7rem; text-align:center; margin-top:5px; }
  .sv-program-fields { display:grid; gap:10px; }
  .sv-variant-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
  .sv-variant-head > div { display:grid; gap:2px; }
  .sv-variant-head b { font-weight:500; }
  .sv-variant-head span { color:var(--muted); font-size:0.74rem; }
  .sv-variant-editor { padding:16px 0; border-bottom:1px solid var(--line); }
  .sv-variant-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
  .sv-variant-title b { font-weight:500; color:var(--ink-soft); }
  .sv-variant-title-actions { display:flex; align-items:center; gap:10px; }
  .sv-active-check { align-items:center; margin:0; }
  .sv-active-check input { margin-top:0; }
  .sv-variant-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px 12px; }
  .sv-options { display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; margin-top:10px; }
  .sv-check { display:flex; align-items:flex-start; gap:7px; color:var(--ink-soft); font-size:0.8rem; cursor:pointer; }
  .sv-check input { width:17px; height:17px; margin-top:2px; accent-color:var(--terracotta); }
  .sv-deposit-field { display:flex; align-items:center; gap:7px; }
  .sv-deposit-field input { width:92px; border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-family:inherit; }
  .sv-price-range { display:grid; grid-template-columns:auto minmax(72px,1fr) auto minmax(72px,1fr); gap:6px; align-items:center; margin-top:6px; font-size:0.72rem; color:var(--muted); }
  .sv-price-range input { min-width:0; }
  .sv-duration-parts { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:6px; }
  .sv-duration-parts label { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px; margin:0; color:var(--muted); font-size:0.72rem; }
  .sv-duration-parts input { min-width:0; }
  .sv-cutoff-option { display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; }
  .sv-cutoff-field { display:flex; align-items:center; gap:7px; font-size:0.78rem; color:var(--ink-soft); }
  .sv-cutoff-field input { width:78px; border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-family:inherit; }
  .sv-editor-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
  #btn-add-service .sv-save-spinner { display:none; }
  #btn-add-service.is-loading { cursor:wait; opacity:0.86; transform:none; }
  #btn-add-service.is-loading .sv-save-idle-icon { display:none; }
  #btn-add-service.is-loading .sv-save-spinner { display:block; animation:sv-save-spin 0.8s linear infinite; }
  @keyframes sv-save-spin { to { transform:rotate(360deg); } }
  .btn-action.outline { background:var(--paper); color:var(--ink-soft); border:1px solid var(--line); box-shadow:none; }
  .service-program-row { align-items:flex-start; }
  .service-program-row.inactive { opacity:0.58; }
  .service-program-row .sv-cover { width:76px; aspect-ratio:4/3; border-radius:9px; overflow:hidden; flex-shrink:0; background:#f3eadf; display:grid; place-items:center; color:var(--muted); }
  .service-program-row .sv-cover img { width:100%; height:100%; object-fit:cover; }
  .service-program-row .sv-cover svg { width:24px; height:24px; }
  .sv-variant-summary { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
  .sv-variant-chip { border:1px solid var(--line); border-radius:8px; padding:3px 7px; font-size:0.7rem; color:var(--ink-soft); background:#fffdf8; }
  .sv-variant-chip em { font-style:normal; color:var(--terracotta-d); }
  .sv-variant-chip.inactive { opacity:0.58; text-decoration:line-through; }

  @media (max-width:720px) {
    .sv-program-grid { grid-template-columns:1fr; }
    .sv-cover-column { max-width:240px; width:100%; }
    .sv-variant-fields { grid-template-columns:1fr 1fr; }
  }
  @media (max-width:480px) {
    .sv-variant-head { align-items:flex-start; flex-direction:column; }
    .sv-variant-fields { grid-template-columns:1fr; }
    .sv-options { display:grid; gap:10px; }
    .sv-editor-actions .btn-action { flex:1; }
    .service-program-row { flex-wrap:wrap; }
    .service-program-row .sv-info { min-width:calc(100% - 92px); }
  }

  /* ===== BARBER ROWS (P6) ===== */
  .barber-any-setting {
    display:flex; align-items:center; justify-content:space-between; gap:18px;
    margin-bottom:22px; padding:14px 16px; border:1px solid var(--line); border-radius:12px;
    background:var(--paper);
  }
  .barber-any-copy { display:grid; gap:3px; min-width:0; }
  .barber-any-copy strong { color:var(--ink); font-size:0.9rem; font-weight:500; }
  .barber-any-copy span { color:var(--muted); font-size:0.78rem; line-height:1.45; }
  .barber-any-switch { position:relative; width:46px; height:26px; flex:0 0 46px; cursor:pointer; }
  .barber-any-switch input { position:absolute; opacity:0; pointer-events:none; }
  .barber-any-switch span {
    position:absolute; inset:0; border-radius:13px; background:#cfc5b7;
    transition:background 0.18s ease; box-shadow:inset 0 0 0 1px rgba(58,42,30,0.08);
  }
  .barber-any-switch span::after {
    content:''; position:absolute; width:20px; height:20px; top:3px; left:3px;
    border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(58,42,30,0.24);
    transition:transform 0.18s ease;
  }
  .barber-any-switch input:checked + span { background:var(--teal); }
  .barber-any-switch input:checked + span::after { transform:translateX(20px); }
  .barber-any-switch input:focus-visible + span { outline:3px solid rgba(230,181,102,.45); outline-offset:2px; }
  .barber-any-switch input:disabled + span { opacity:0.55; cursor:wait; }
  .barber-row-adm {
    background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:12px 14px;
    margin-bottom:8px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  }
  .barber-row-adm.inactive { opacity:0.55; background:#faf6ec; }
  .barber-row-adm .br-av {
    width:46px; height:46px; border-radius:50%; flex-shrink:0;
    background:#fbe4dd center/cover no-repeat; display:grid; place-items:center;
    color:var(--terracotta-d); font-family:'Mitr',sans-serif; font-weight:600;
    border:1.5px solid var(--paper); box-shadow:inset 0 0 0 1px var(--line);
  }
  .barber-row-adm .br-info { flex:1; min-width:0; }
  .barber-row-adm .br-name { font-weight:500; color:var(--ink); }
  .barber-row-adm .br-meta { font-size:0.78rem; color:var(--muted); }
  .barber-row-adm .br-meta b { color:var(--ink); font-weight:500; }
  .barber-row-adm .br-meta .own { color:var(--terracotta-d); font-weight:500; }
  .barber-row-adm .br-edit { flex:1; min-width:180px; }
  .barber-row-adm .br-edit label { display:block; margin-bottom:4px; font-size:0.72rem; color:var(--muted); }
  .barber-row-adm .br-edit input {
    width:100%; border:1px solid var(--line); border-radius:9px; padding:8px 10px;
    background:#fffdf8; color:var(--ink); font-family:'Kanit',sans-serif; font-size:0.86rem;
  }
  .barber-row-adm .br-edit input:focus { outline:2px solid rgba(230,181,102,.38); border-color:var(--gold); }
  .barber-row-adm .br-edit-avatar {
    width:52px; height:52px; border-radius:50%; flex:0 0 52px; cursor:pointer;
    position:relative; overflow:hidden; border:2px solid var(--paper);
    box-shadow:0 0 0 1px var(--line); background:#fbe4dd;
  }
  .barber-row-adm .br-edit-avatar-preview {
    width:100%; height:100%; display:grid; place-items:center;
    background:#fbe4dd center/cover no-repeat; color:var(--terracotta-d);
    font-family:'Mitr',sans-serif; font-weight:600;
  }
  .barber-row-adm .br-edit-avatar-action {
    position:absolute; right:0; bottom:0; width:22px; height:22px; display:grid; place-items:center;
    border-radius:50% 0 50% 0; background:var(--ink); color:var(--paper);
  }
  .barber-row-adm .br-edit-avatar-action svg { width:12px; height:12px; }
  .barber-row-adm .br-edit-avatar:hover { box-shadow:0 0 0 2px var(--gold); }
  .br-form-row { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:10px; }
  .br-form-row .field { flex:1; min-width:180px; }
  .br-upload {
    width:46px; height:46px; border-radius:50%; border:1.5px dashed var(--line);
    background:#fbf3e3; display:grid; place-items:center; cursor:pointer; color:var(--muted);
    flex-shrink:0; overflow:hidden; position:relative;
  }
  .br-upload:hover { border-color:var(--terracotta); color:var(--terracotta); }
  .br-upload img { width:100%; height:100%; object-fit:cover; }
  .br-upload svg { width:18px; height:18px; }

  /* ===== P8: HAIRSTYLE upload + thumbnails (รูปต้องเห็นชัด) ===== */
  .hs-upload {
    width:100%; max-width:200px; aspect-ratio:1/1; border-radius:18px;
    border:2px dashed var(--line); background:#fbf3e3;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    cursor:pointer; color:var(--muted); overflow:hidden; position:relative;
    transition:all 0.2s;
  }
  .hs-upload:hover { border-color:var(--terracotta); color:var(--terracotta); background:#fcecdf; }
  .hs-upload img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .hs-upload .hs-up-ic { font-size:1.8rem; }
  .hs-upload .hs-up-lb { font-size:0.78rem; font-weight:500; text-align:center; padding:0 6px; }
  .hs-form-row { display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; margin-bottom:10px; }
  .hs-form-row .field { flex:1; min-width:200px; }

  .hs-row {
    display:flex; gap:12px; align-items:center; background:var(--paper);
    border:1px solid var(--line); border-radius:14px; padding:10px 12px; margin-bottom:8px;
    box-shadow:0 4px 10px var(--shadow);
  }
  .hs-row.inactive { opacity:0.55; background:#faf6ec; }
  .hs-thumb {
    width:88px; height:88px; border-radius:12px; flex-shrink:0; cursor:pointer;
    background:#e7d7be center/cover no-repeat; display:grid; place-items:center;
    color:var(--muted); font-size:2rem; border:1px solid var(--line);
    transition:transform 0.2s;
  }
  .hs-thumb:hover { transform:scale(1.04); border-color:var(--terracotta); }
  .hs-row .hs-info { flex:1; min-width:0; }
  .hs-row .hs-name { font-weight:500; color:var(--ink); font-size:0.96rem; }
  .hs-row .hs-meta { font-size:0.78rem; color:var(--muted); margin-top:2px; }
  .hs-row .hs-meta .own { color:var(--terracotta-d); font-weight:500; }

  /* Hairstyle modal — รูปใหญ่ + ปุ่ม AR (P9) */
  .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; animation:pf 0.25s ease; }
  .hair-modal {
    background:#fffaf2; border-radius:24px; max-width:520px; width:100%;
    max-height:92vh; overflow:hidden; display:flex; flex-direction:column;
    box-shadow:0 30px 80px rgba(0,0,0,0.55);
  }
  .hair-modal-img {
    width:100%; aspect-ratio:1/1; background:#1a1410 center/contain no-repeat;
    display:grid; place-items:center; color:#6b5444; font-size:3rem;
  }
  .hair-modal-body { padding:16px 22px 18px; }
  .hair-modal-title { font-family:'Mitr',sans-serif; font-weight:500; font-size:1.1rem; color:var(--ink); }
  .hair-modal-meta { font-size:0.84rem; color:var(--muted); margin-top:4px; }
  .hair-modal-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
  .hair-modal-tags span { font-size:0.74rem; background:#f0e6d8; border-radius:99px; padding:4px 10px; color:var(--ink-soft); }
  .hair-modal-actions { display:flex; gap:8px; margin-top:14px; }
  .hair-modal-actions button {
    flex:1; border:none; border-radius:14px; padding:12px; font-family:'Mitr',sans-serif;
    font-weight:500; font-size:0.92rem; cursor:pointer;
  }
  .hair-modal-actions .ar {
    background:linear-gradient(145deg,#7e5cdb,#5b3fb6); color:#fff;
    box-shadow:0 8px 18px rgba(94,63,182,0.35); display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .hair-modal-actions .ar:hover { transform:translateY(-1px); }
  .hair-modal-actions .ar svg { width:18px; height:18px; }
  .hair-modal-actions .close {
    background:transparent; color:var(--ink-soft); border:1px solid var(--line);
  }

  @media (max-width:640px) {
    .billing-banner { grid-template-columns:auto 1fr; align-items:start; padding:14px; }
    .billing-banner-icon { width:38px; height:38px; }
    .billing-banner-cta { grid-column:1/-1; width:100%; }
  }