@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800;900&display=swap");

:root {
  --bg: #07111f;
  --surface: #0c1a2d;
  --surface-2: #122640;
  --line: rgba(147, 197, 253, 0.16);
  --text: #eef8ff;
  --muted: #9cb2c8;
  --primary: #18c7e8;
  --primary-2: #3b82f6;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius: 22px;
  --shadow: 0 18px 50px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Kanit", "Leelawadee UI", Tahoma, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 0%, rgba(24,199,232,.15), transparent 30%),
    radial-gradient(circle at 95% 10%, rgba(59,130,246,.17), transparent 26%),
    linear-gradient(145deg, #050b14, var(--bg) 45%, #08172a);
}

button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }

.app-shell { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding: 18px 0 42px; }
.app-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0 20px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  width: 46px; height: 46px; border-radius: 15px;
  background: linear-gradient(145deg, var(--primary), var(--primary-2));
  display: grid; place-items: center; box-shadow: 0 12px 28px rgba(24,199,232,.22);
  font-weight: 900; font-size: 21px; letter-spacing: -2px;
}
.brand-text strong { display:block; font-size: 18px; letter-spacing: .3px; }
.brand-text span { color: var(--muted); font-size: 12px; }
.header-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.card {
  background: linear-gradient(180deg, rgba(18,38,64,.94), rgba(8,22,39,.94));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-pad { padding: 22px; }
.panel-title { margin:0 0 6px; font-size: 22px; }
.panel-subtitle { margin:0; color: var(--muted); line-height:1.6; }

.hero {
  min-height: 470px; padding: clamp(26px, 6vw, 70px);
  display:grid; grid-template-columns: 1.08fr .92fr; gap:34px; align-items:center;
  overflow:hidden; position:relative;
}
.hero::after {
  content:""; position:absolute; width:420px; height:420px; border-radius:50%;
  right:-180px; bottom:-230px; border:55px solid rgba(24,199,232,.09);
}
.kicker {
  display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border-radius:999px;
  border:1px solid rgba(24,199,232,.26); background:rgba(24,199,232,.08);
  color:#baf4ff; font-size:13px; font-weight:700;
}
.hero h1 { margin:18px 0 12px; font-size:clamp(38px,7vw,72px); line-height:1.02; letter-spacing:-2px; }
.gradient-text { background:linear-gradient(90deg,#dffbff,var(--primary),#7aa7ff); background-clip:text; -webkit-background-clip:text; color:transparent; }
.hero p { color:var(--muted); font-size:18px; line-height:1.75; max-width:650px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.hero-visual { display:grid; place-items:center; min-height:330px; }
.queue-preview {
  width:min(100%,390px); border-radius:30px; padding:22px;
  background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.16); transform:rotate(2deg);
  box-shadow:0 30px 80px rgba(0,0,0,.38);
}
.queue-preview .screen { background:#f4fbff; color:#07111f; border-radius:22px; padding:24px; text-align:center; }
.queue-preview .screen small { color:#4c6479; }
.queue-preview .ticket-number { font-size:72px; line-height:1; font-weight:900; color:#0a8fca; margin:15px 0; }
.queue-preview .mini-row { display:flex; justify-content:space-between; background:#e7f6fc; border-radius:13px; padding:11px 13px; margin-top:8px; font-size:13px; }

.grid { display:grid; gap:16px; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.feature-grid { margin-top:18px; }
.feature { padding:20px; min-height:145px; }
.feature-icon { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:rgba(24,199,232,.11); color:#8befff; font-size:22px; }
.feature h3 { margin:14px 0 6px; font-size:17px; }
.feature p { margin:0; color:var(--muted); line-height:1.6; font-size:14px; }

.btn {
  border:0; border-radius:14px; padding:12px 17px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .15s ease, filter .15s ease, opacity .15s ease;
}
.btn:hover { transform:translateY(-1px); filter:brightness(1.05); }
.btn:disabled { cursor:not-allowed; opacity:.45; transform:none; }
.btn-primary { color:#00121a; background:linear-gradient(135deg,var(--primary),#7cecff); }
.btn-secondary { color:var(--text); background:#183251; border:1px solid rgba(255,255,255,.1); }
.btn-success { color:white; background:linear-gradient(135deg,#16a34a,#22c55e); }
.btn-warning { color:#1b1000; background:linear-gradient(135deg,#f59e0b,#fcd34d); }
.btn-danger { color:white; background:linear-gradient(135deg,#dc2626,#ef4444); }
.btn-ghost { color:var(--muted); background:transparent; border:1px solid var(--line); }
.btn-sm { padding:8px 11px; border-radius:11px; font-size:13px; }
.btn-lg { padding:15px 21px; font-size:17px; }
.btn-block { width:100%; }
.icon-btn { width:44px; height:44px; padding:0; border-radius:14px; }

.form-group { display:grid; gap:7px; }
.form-group label { font-weight:700; font-size:14px; color:#d7e9f7; }
.input, .select, .textarea {
  width:100%; border-radius:14px; border:1px solid var(--line);
  background:#071727; color:var(--text); padding:13px 14px; outline:none;
}
.input:focus, .select:focus, .textarea:focus { border-color:rgba(24,199,232,.7); box-shadow:0 0 0 3px rgba(24,199,232,.1); }
.textarea { min-height:90px; resize:vertical; }
.form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }

.page-title { margin:20px 0 18px; }
.page-title h1 { margin:0; font-size:clamp(28px,5vw,44px); }
.page-title p { color:var(--muted); margin:7px 0 0; }

.service-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:18px; }
.service-card {
  border:1px solid var(--line); background:#0a1c30; color:var(--text); border-radius:18px; padding:20px;
  text-align:left; min-height:145px; position:relative; overflow:hidden;
}
.service-card::after { content:attr(data-prefix); position:absolute; right:10px; bottom:-17px; font-size:80px; font-weight:900; color:rgba(24,199,232,.07); }
.service-card.selected { border-color:var(--primary); box-shadow:0 0 0 3px rgba(24,199,232,.12); background:#0d2941; }
.service-card strong { display:block; font-size:18px; margin-bottom:8px; }
.service-card span { color:var(--muted); font-size:13px; }

.ticket { max-width:560px; margin:18px auto 0; text-align:center; padding:30px; }
.ticket-number { font-size:clamp(70px,18vw,120px); line-height:1; font-weight:950; letter-spacing:-4px; margin:18px 0; color:#83f0ff; text-shadow:0 0 28px rgba(24,199,232,.25); }
.ticket-status { display:inline-flex; padding:8px 14px; border-radius:999px; font-weight:800; background:rgba(245,158,11,.14); color:#ffd889; }
.ticket-status.calling { background:rgba(24,199,232,.16); color:#8ef1ff; animation:pulse 1.2s infinite; }
.ticket-status.serving { background:rgba(34,197,94,.15); color:#9bf8b9; }
.ticket-status.done { background:rgba(148,163,184,.15); color:#d7e0e9; }
.ticket-meta { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:22px 0; }
.meta-box { background:#071727; border:1px solid var(--line); border-radius:15px; padding:14px; }
.meta-box strong { display:block; font-size:24px; }
.meta-box span { color:var(--muted); font-size:12px; }

.stat-card { padding:18px; }
.stat-card span { color:var(--muted); font-size:13px; }
.stat-card strong { display:block; font-size:32px; margin-top:8px; }

.counter-layout { display:grid; grid-template-columns:1fr 1.1fr; gap:16px; }
.current-card { padding:24px; text-align:center; min-height:430px; display:flex; flex-direction:column; justify-content:center; }
.current-code { font-size:clamp(72px,14vw,132px); line-height:1; font-weight:950; color:#83f0ff; letter-spacing:-5px; margin:18px 0; }
.current-counter { color:var(--muted); }
.action-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:22px; }
.waiting-list { padding:18px; max-height:600px; overflow:auto; }
.queue-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px; border-bottom:1px solid var(--line); }
.queue-row:last-child { border-bottom:0; }
.queue-row .code { font-size:21px; font-weight:900; color:#8eefff; min-width:72px; }
.queue-row .detail { flex:1; min-width:0; }
.queue-row .detail strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.queue-row .detail span { color:var(--muted); font-size:12px; }

.display-body { overflow:hidden; }
.display-shell { min-height:100vh; display:grid; grid-template-rows:auto 1fr auto; padding:20px; gap:18px; }
.display-header { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.display-title h1 { margin:0; font-size:clamp(28px,4vw,52px); }
.display-title p { color:var(--muted); margin:4px 0 0; }
.display-main { display:grid; grid-template-columns:1.5fr .75fr; gap:18px; min-height:0; }
.call-board { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-content:start; }
.call-card { padding:22px; text-align:center; min-height:210px; display:flex; flex-direction:column; justify-content:center; }
.call-card:first-child { grid-column:1/-1; min-height:300px; border-color:rgba(24,199,232,.5); background:linear-gradient(180deg,rgba(15,67,91,.95),rgba(8,22,39,.95)); }
.call-card .call-code { font-size:clamp(66px,9vw,132px); line-height:1; font-weight:950; color:#9cf4ff; }
.call-card .call-counter { margin-top:14px; font-size:clamp(20px,3vw,38px); font-weight:850; }
.call-card .call-service { color:var(--muted); margin-top:5px; }
.sidebar-board { display:grid; grid-template-rows:auto 1fr; gap:14px; min-height:0; }
.waiting-summary { padding:20px; }
.waiting-chip { display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.waiting-chip:last-child { border-bottom:0; }
.waiting-chip strong { font-size:22px; color:#8befff; }
.recent-board { padding:20px; overflow:auto; min-height:0; }
.recent-row { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
.display-footer { text-align:center; color:var(--muted); font-size:14px; }

.login-box { max-width:440px; margin:70px auto 0; padding:26px; }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.small { font-size:12px; }
.center { text-align:center; }
.flex { display:flex; }
.flex-wrap { flex-wrap:wrap; }
.gap-8 { gap:8px; }
.gap-12 { gap:12px; }
.between { justify-content:space-between; }
.items-center { align-items:center; }
.mt-12 { margin-top:12px; }
.mt-18 { margin-top:18px; }
.mt-24 { margin-top:24px; }
.mb-0 { margin-bottom:0; }
.section { margin-top:18px; }
.badge { display:inline-flex; padding:5px 9px; border-radius:999px; font-size:12px; font-weight:800; background:#17324f; color:#cde8f8; }
.badge.active { background:rgba(34,197,94,.15); color:#a6f8bd; }
.badge.inactive { background:rgba(239,68,68,.13); color:#ffb0b0; }
.table-wrap { overflow:auto; }
.table { width:100%; border-collapse:collapse; min-width:650px; }
.table th, .table td { padding:12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
.table th { color:var(--muted); font-size:12px; }
.qr-box { width:220px; min-height:220px; margin:16px auto; padding:10px; display:grid; place-items:center; background:white; border-radius:18px; }
.qr-box img, .qr-box canvas { max-width:100%; height:auto !important; }
.url-box { overflow-wrap:anywhere; color:#a9eefd; font-size:12px; }

.toast {
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(30px);
  background:#e9faff; color:#07111f; padding:12px 16px; border-radius:13px; font-weight:800;
  opacity:0; pointer-events:none; transition:.2s ease; z-index:50; box-shadow:var(--shadow);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.error { background:#fee2e2; color:#7f1d1d; }

.loader { width:28px; height:28px; border:3px solid rgba(255,255,255,.2); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; }
.empty-state { padding:34px 18px; text-align:center; color:var(--muted); }

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse { 50% { box-shadow:0 0 0 9px rgba(24,199,232,0); } 0%,100% { box-shadow:0 0 0 0 rgba(24,199,232,.22); } }

@media (max-width: 900px) {
  .hero, .counter-layout, .display-main { grid-template-columns:1fr; }
  .hero-visual { min-height:260px; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3, .service-list { grid-template-columns:repeat(2,1fr); }
  .display-body { overflow:auto; }
  .display-shell { min-height:auto; }
}

@media (max-width: 600px) {
  .app-shell { width:min(100% - 18px,1180px); padding-top:8px; }
  .app-header { align-items:flex-start; }
  .brand-text span { display:none; }
  .hero { padding:24px; min-height:auto; }
  .hero h1 { letter-spacing:-1px; }
  .hero p { font-size:16px; }
  .hero-visual { display:none; }
  .grid-2, .grid-3, .grid-4, .service-list, .form-row, .ticket-meta, .call-board { grid-template-columns:1fr; }
  .call-card:first-child { grid-column:auto; }
  .card-pad { padding:17px; }
  .action-grid { grid-template-columns:1fr; }
  .header-actions .btn span { display:none; }
}

/* BOMBY Queue V1.3 voice reliability */
.voice-gate{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px;background:rgba(2,8,18,.92);backdrop-filter:blur(12px)}
.voice-gate.hidden{display:none}
.voice-gate-card{width:min(560px,100%);padding:28px;text-align:center;border:1px solid rgba(124,236,255,.22);box-shadow:0 24px 80px rgba(0,0,0,.45)}
.voice-gate-icon{font-size:58px;line-height:1;margin-bottom:10px}
.voice-gate h2{font-size:clamp(25px,5vw,38px);margin:8px 0 10px}
.voice-gate p{color:var(--muted);font-size:16px;line-height:1.7;margin:0 0 20px}
.voice-gate small{display:block;margin-top:14px}
.voice-status{display:flex;align-items:center;padding:10px 13px;border-radius:12px;font-size:13px;font-weight:800;border:1px solid var(--line);white-space:nowrap}
.voice-status-on{background:rgba(34,197,94,.14);color:#86efac;border-color:rgba(34,197,94,.35)}
.voice-status-speaking{background:rgba(56,189,248,.13);color:#7dd3fc;border-color:rgba(56,189,248,.32)}
.voice-status-warn{background:rgba(245,158,11,.13);color:#fcd34d;border-color:rgba(245,158,11,.32)}
.voice-status-off{background:rgba(148,163,184,.1);color:var(--muted)}
@media(max-width:720px){.voice-status{width:100%;justify-content:center}.display-header{align-items:flex-start;flex-direction:column}.header-actions{width:100%;justify-content:flex-start}}


/* BOMBY Queue V1.4 - Kanit + advertising media */
html, body, button, input, select, textarea, table { font-family:"Kanit","Leelawadee UI",Tahoma,Arial,sans-serif; }

.display-main-media {
  grid-template-columns:minmax(330px,.9fr) minmax(420px,1.35fr) minmax(270px,.68fr);
  align-items:stretch;
}
.display-main-media.media-disabled { grid-template-columns:minmax(0,1.5fr) minmax(280px,.75fr); }
.queue-board-column { min-width:0; display:flex; flex-direction:column; gap:10px; }
.section-caption { color:var(--muted); font-size:13px; font-weight:700; letter-spacing:.2px; padding:0 4px; }
.display-main-media .call-board { grid-template-columns:1fr; align-content:start; overflow:auto; min-height:0; }
.display-main-media .call-card:first-child { grid-column:auto; min-height:310px; }
.display-main-media .call-card:not(:first-child) { min-height:145px; }
.display-main-media .call-card:not(:first-child) .call-code { font-size:clamp(46px,5vw,76px); }
.display-main-media .call-card:not(:first-child) .call-counter { font-size:clamp(17px,2vw,25px); }

.media-board { min-width:0; min-height:0; padding:14px; display:grid; grid-template-rows:auto 1fr auto; gap:12px; overflow:hidden; }
.media-board-header { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:2px 5px; }
.media-board-header h2 { margin:2px 0 0; font-size:clamp(22px,2.2vw,34px); }
.media-kicker { font-size:10px; font-weight:800; letter-spacing:1.6px; color:#8befff; }
.media-counter { color:var(--muted); font-size:12px; font-weight:700; }
.media-stage { min-height:360px; height:100%; border-radius:17px; overflow:hidden; position:relative; display:grid; place-items:center; background:#030a12; border:1px solid rgba(147,197,253,.12); }
.media-image, .media-video, .media-frame { width:100%; height:100%; position:absolute; inset:0; border:0; display:block; background:#030a12; }
.media-image, .media-video { object-fit:contain; }
.media-frame { object-fit:cover; }
.media-placeholder { padding:30px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; color:var(--muted); }
.media-placeholder strong { color:var(--text); font-size:22px; }
.media-placeholder span { max-width:480px; line-height:1.6; font-size:13px; }
.media-placeholder-icon { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; padding-left:4px; font-size:26px; color:#07111f; background:linear-gradient(135deg,var(--primary),#7cecff); box-shadow:0 14px 40px rgba(24,199,232,.22); }
.media-error { color:#fecaca; padding:24px; text-align:center; }
.media-dots { min-height:8px; display:flex; justify-content:center; align-items:center; gap:6px; }
.media-dot { width:6px; height:6px; border-radius:99px; background:rgba(156,178,200,.38); transition:.2s; }
.media-dot.active { width:22px; background:#79e9fb; }
.display-actions { align-items:center; }
.media-admin-note { min-height:48px; display:flex; align-items:center; border:1px solid var(--line); border-radius:14px; padding:10px 12px; color:var(--muted); background:#071727; font-size:12px; line-height:1.5; }
.media-playlist-input { min-height:150px; font-family:"Kanit","Leelawadee UI",Tahoma,Arial,sans-serif; line-height:1.65; }

@media (max-width: 1380px) {
  .display-main-media { grid-template-columns:minmax(300px,.92fr) minmax(360px,1.2fr) minmax(250px,.7fr); gap:12px; }
  .display-shell { padding:14px; gap:12px; }
  .display-header { align-items:flex-start; }
  .display-actions { max-width:58%; }
  .media-stage { min-height:300px; }
}

@media (max-width: 1080px) {
  .display-main-media { grid-template-columns:1fr 1.2fr; overflow:visible; }
  .display-main-media .sidebar-board { grid-column:1/-1; grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .display-body { overflow:auto; }
  .display-shell { min-height:100vh; }
  .display-actions { max-width:none; }
}

@media (max-width: 760px) {
  .display-main-media, .display-main-media.media-disabled { grid-template-columns:1fr; }
  .display-main-media .sidebar-board { grid-column:auto; grid-template-columns:1fr; }
  .display-main-media .call-card:first-child { min-height:220px; }
  .media-stage { min-height:260px; aspect-ratio:16/9; }
  .media-board { min-height:360px; }
  .display-actions .btn { flex:1 1 180px; }
}


/* BOMBY Queue V1.5 - Promotion Banner */
.media-board { grid-template-rows:auto auto 1fr auto; }
.promo-banner {
  position:relative;
  min-height:116px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  border-radius:20px;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.22), transparent 30%),
    linear-gradient(120deg,#0ea5e9 0%,#22d3ee 42%,#67e8f9 100%);
  color:#031321;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 18px 45px rgba(14,165,233,.18), inset 0 1px 0 rgba(255,255,255,.24);
}
.promo-banner::after {
  content:"";
  position:absolute;
  width:190px;height:190px;border-radius:50%;right:-88px;bottom:-118px;
  border:28px solid rgba(255,255,255,.12);
  pointer-events:none;
}
.promo-banner-icon {
  width:68px;height:68px;border-radius:19px;
  display:grid;place-items:center;
  font-size:36px;font-weight:900;line-height:1;
  color:white;
  background:rgba(3,19,33,.92);
  box-shadow:0 12px 28px rgba(3,19,33,.22);
  transform:rotate(-6deg);
}
.promo-banner-copy { min-width:0; position:relative; z-index:1; }
.promo-banner-badge {
  display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.2px;
  background:rgba(3,19,33,.13);border:1px solid rgba(3,19,33,.13);
  margin-bottom:5px;
}
.promo-banner-headline {
  font-size:clamp(21px,2.2vw,35px);
  font-weight:900;line-height:1.12;letter-spacing:-.25px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.promo-banner-subtext {
  margin-top:5px;font-size:clamp(12px,1.08vw,17px);font-weight:600;opacity:.78;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.promo-banner-dots { display:flex;flex-direction:column;gap:5px;position:relative;z-index:1; }
.promo-dot { width:6px;height:6px;border-radius:99px;background:rgba(3,19,33,.25);transition:.2s; }
.promo-dot.active { height:22px;background:#031321; }
.promo-changing .promo-banner-copy { animation:promoSlideIn .38s ease both; }
@keyframes promoSlideIn { from { opacity:0;transform:translateY(7px); } to { opacity:1;transform:translateY(0); } }

.promo-admin-chip {
  display:inline-flex;padding:7px 11px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.8px;
  color:#07111f;background:linear-gradient(135deg,#22d3ee,#67e8f9);
}
.promo-messages-input { min-height:135px; line-height:1.7; }
.promo-admin-preview {
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;
  padding:16px 18px;border-radius:18px;color:#031321;
  background:linear-gradient(120deg,#0ea5e9,#67e8f9);
  border:1px solid rgba(255,255,255,.2);
}
.promo-admin-preview-icon {
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:29px;font-weight:900;
  color:white;background:#071727;
}
.promo-admin-preview small,.promo-admin-preview strong,.promo-admin-preview span { display:block; }
.promo-admin-preview small { font-weight:800;opacity:.7; }
.promo-admin-preview strong { font-size:20px;line-height:1.25;margin-top:1px; }
.promo-admin-preview span { font-size:13px;opacity:.75;margin-top:3px; }

@media (max-width:1380px) {
  .promo-banner { min-height:102px;padding:14px 16px;gap:13px; }
  .promo-banner-icon { width:58px;height:58px;border-radius:17px;font-size:31px; }
}
@media (max-width:760px) {
  .promo-banner { grid-template-columns:auto 1fr;padding:13px 14px;min-height:94px; }
  .promo-banner-dots { display:none; }
  .promo-banner-headline,.promo-banner-subtext { white-space:normal; }
  .promo-banner-icon { width:48px;height:48px;border-radius:14px;font-size:26px; }
}

/* BOMBY Queue V1.5.1 - Responsive Fit */
:root {
  --display-fit-gap: clamp(8px, 0.95vw, 18px);
  --display-fit-pad: clamp(8px, 1vw, 20px);
  --display-fit-radius: clamp(14px, 1.1vw, 22px);
}

.display-body {
  min-height: 100dvh;
}

.display-shell {
  min-height: 100dvh;
  height: 100dvh;
  padding: var(--display-fit-pad);
  gap: var(--display-fit-gap);
  overflow: hidden;
}

.display-header {
  gap: clamp(8px, .9vw, 14px);
}

.display-title h1 {
  font-size: clamp(24px, 2.6vw, 52px);
  line-height: 1.05;
}

.display-title p {
  font-size: clamp(14px, 1.05vw, 20px);
}

.display-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  max-width: min(56vw, 820px);
}

.display-actions .btn,
.display-actions .voice-status {
  min-height: clamp(38px, 4.2vh, 48px);
  padding-top: clamp(8px, 1vh, 12px);
  padding-bottom: clamp(8px, 1vh, 12px);
  font-size: clamp(12px, .9vw, 16px);
}

.display-main,
.display-main-media {
  min-height: 0;
  height: 100%;
  align-items: stretch;
}

.display-main-media {
  grid-template-columns: minmax(240px, .92fr) minmax(420px, 1.45fr) minmax(230px, .72fr);
  gap: var(--display-fit-gap);
}

.queue-board-column,
.sidebar-board,
.media-board,
.waiting-summary,
.recent-board {
  min-height: 0;
}

.card,
.call-card,
.media-board,
.waiting-summary,
.recent-board,
.promo-banner {
  border-radius: var(--display-fit-radius);
}

.display-main-media .call-board {
  gap: var(--display-fit-gap);
  overflow: auto;
  padding-right: 2px;
}

.display-main-media .call-card,
.display-main-media .call-card:first-child,
.display-main-media .call-card:not(:first-child) {
  min-height: auto;
}

.display-main-media .call-card:first-child {
  min-height: clamp(200px, 34vh, 320px);
}

.display-main-media .call-card:not(:first-child) {
  min-height: clamp(110px, 16vh, 156px);
}

.call-card {
  padding: clamp(14px, 1.2vw, 22px);
}

.call-card .call-code {
  font-size: clamp(48px, 7.4vw, 124px);
  line-height: .92;
}

.call-card .call-counter {
  margin-top: clamp(8px, .9vw, 14px);
  font-size: clamp(18px, 2.2vw, 36px);
  line-height: 1.05;
}

.call-card .call-service {
  font-size: clamp(12px, .95vw, 16px);
}

.media-board {
  padding: clamp(10px, .95vw, 14px);
  gap: clamp(10px, .8vw, 12px);
}

.media-board-header h2 {
  font-size: clamp(18px, 1.7vw, 34px);
  line-height: 1.05;
}

.promo-banner {
  min-height: clamp(80px, 14vh, 116px);
  padding: clamp(12px, 1vw, 20px);
  gap: clamp(10px, .9vw, 16px);
}

.promo-banner-icon {
  width: clamp(44px, 4vw, 68px);
  height: clamp(44px, 4vw, 68px);
  border-radius: clamp(12px, 1vw, 19px);
  font-size: clamp(24px, 2vw, 36px);
}

.promo-banner-headline {
  font-size: clamp(18px, 1.9vw, 35px);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.promo-banner-subtext {
  font-size: clamp(11px, .92vw, 17px);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.media-stage {
  min-height: 0;
  height: 100%;
  aspect-ratio: 16 / 10;
}

.media-stage .media-image,
.media-stage .media-video,
.media-stage .media-frame {
  width: 100%;
  height: 100%;
}

.sidebar-board {
  display: grid;
  grid-template-rows: minmax(0, auto) minmax(0, 1fr);
  gap: var(--display-fit-gap);
}

.waiting-summary,
.recent-board {
  padding: clamp(14px, 1vw, 20px);
}

.waiting-chip,
.recent-row {
  padding: clamp(8px, .75vw, 12px) 0;
}

.waiting-chip strong {
  font-size: clamp(18px, 1.7vw, 22px);
}

.panel-title {
  font-size: clamp(18px, 1.7vw, 24px);
}

.display-footer {
  font-size: clamp(11px, .85vw, 14px);
}

@media (min-width: 1600px) {
  .display-main-media {
    grid-template-columns: minmax(320px, .9fr) minmax(520px, 1.55fr) minmax(270px, .65fr);
  }
}

@media (max-width: 1366px) {
  .display-actions {
    max-width: 62vw;
  }
  .display-main-media {
    grid-template-columns: minmax(220px, .86fr) minmax(360px, 1.35fr) minmax(220px, .7fr);
  }
}

@media (max-width: 1180px) {
  .display-shell {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  .display-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .display-actions {
    max-width: none;
    width: 100%;
    justify-content: flex-start;
  }
  .display-main-media {
    grid-template-columns: minmax(240px, .9fr) minmax(320px, 1.1fr);
  }
  .display-main-media .sidebar-board {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }
}

@media (max-width: 860px) {
  .display-main-media,
  .display-main-media.media-disabled {
    grid-template-columns: 1fr;
  }
  .display-main-media .sidebar-board {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
  .media-stage {
    aspect-ratio: 16 / 9;
  }
}

@media (max-height: 900px) and (min-width: 861px) {
  .display-shell {
    padding: 10px;
    gap: 10px;
  }
  .display-title h1 {
    font-size: clamp(22px, 2.4vw, 40px);
  }
  .display-main-media .call-card:first-child {
    min-height: clamp(170px, 29vh, 250px);
  }
  .display-main-media .call-card:not(:first-child) {
    min-height: clamp(96px, 13.5vh, 125px);
  }
  .call-card .call-code {
    font-size: clamp(42px, 6.5vw, 96px);
  }
  .call-card .call-counter {
    font-size: clamp(16px, 1.9vw, 28px);
  }
  .promo-banner {
    min-height: 76px;
  }
  .promo-banner-headline {
    font-size: clamp(17px, 1.7vw, 28px);
  }
  .media-board-header h2,
  .panel-title {
    font-size: clamp(18px, 1.45vw, 24px);
  }
  .media-stage {
    aspect-ratio: 16 / 9.5;
  }
}

@media (max-height: 760px) and (min-width: 861px) {
  .display-shell {
    padding: 8px;
    gap: 8px;
  }
  .display-title h1 {
    font-size: clamp(20px, 2.1vw, 34px);
  }
  .display-title p {
    margin-top: 2px;
  }
  .display-actions {
    gap: 8px;
  }
  .display-actions .btn,
  .display-actions .voice-status {
    min-height: 34px;
    font-size: 12px;
  }
  .section-caption,
  .media-kicker,
  .media-counter,
  .display-footer,
  .call-card .call-service {
    font-size: 11px;
  }
  .display-main-media .call-card:first-child {
    min-height: 150px;
  }
  .display-main-media .call-card:not(:first-child) {
    min-height: 86px;
  }
  .call-card .call-code {
    font-size: clamp(38px, 5.8vw, 76px);
  }
  .call-card .call-counter {
    font-size: clamp(15px, 1.5vw, 22px);
  }
  .media-board {
    padding: 10px;
  }
  .promo-banner {
    min-height: 66px;
    padding: 10px 12px;
  }
  .promo-banner-icon {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }
  .promo-banner-badge {
    font-size: 10px;
    padding: 3px 8px;
    margin-bottom: 2px;
  }
  .promo-banner-headline {
    font-size: clamp(15px, 1.35vw, 22px);
  }
  .promo-banner-subtext {
    font-size: 11px;
    margin-top: 2px;
  }
  .media-stage {
    aspect-ratio: 16 / 8.6;
  }
  .waiting-chip strong {
    font-size: 16px;
  }
}

/* BOMBY Queue V1.6 - direct media file upload */
.media-upload-box {
  border:1px solid rgba(56,189,248,.28);
  border-radius:20px;
  padding:18px;
  background:linear-gradient(180deg,rgba(8,34,55,.88),rgba(5,23,39,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.media-upload-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.media-upload-head strong { display:block;font-size:18px;color:#eafaff; }
.media-upload-head span { display:block;margin-top:3px;color:var(--muted);font-size:13px; }
.media-upload-actions { display:flex;gap:10px;flex-wrap:wrap; }
.media-upload-list { display:grid;gap:9px;margin-top:14px; }
.media-upload-empty {
  min-height:60px;display:grid;place-items:center;text-align:center;
  border:1px dashed rgba(125,211,252,.24);border-radius:14px;color:var(--muted);font-size:13px;
  background:rgba(2,12,23,.28);
}
.media-upload-row {
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:11px 12px;border:1px solid var(--line);border-radius:14px;background:#071727;
}
.media-upload-file-icon {
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,#0ea5e9,#67e8f9);color:#031321;font-weight:900;
}
.media-upload-file-copy { min-width:0; }
.media-upload-file-copy strong { display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px; }
.media-upload-file-copy span { display:block;color:var(--muted);font-size:11px;margin-top:2px; }
.media-upload-state { color:#8befff;font-size:12px;font-weight:700;text-align:right;max-width:210px; }
.media-upload-foot { margin-top:11px;padding-top:11px;border-top:1px solid var(--line);color:var(--muted);font-size:12px; }
@media (max-width:700px) {
  .media-upload-actions { width:100%; }
  .media-upload-actions .btn { flex:1 1 180px; }
  .media-upload-row { grid-template-columns:auto minmax(0,1fr); }
  .media-upload-state { grid-column:2;text-align:left;max-width:none; }
}


/* BOMBY Queue V1.7 - Push notifications */
.notification-card {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  align-items:center;
  padding:16px;
  border:1px solid rgba(34,211,238,.28);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(14,165,233,.13),rgba(34,211,238,.06));
  text-align:left;
}
.notification-card-icon {
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  background:#0b2941;border:1px solid rgba(125,211,252,.2);font-size:23px;
}
.notification-card-copy strong { display:block;font-size:16px; }
.notification-card-copy span { display:block;color:var(--muted);font-size:12px;line-height:1.55;margin-top:3px; }
.notification-card-actions { grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:9px; }
.notification-help { padding:13px 15px;border-radius:15px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25);text-align:left; }
.notification-help strong,.notification-help span { display:block; }
.notification-help strong { color:#fcd34d;margin-bottom:3px; }
.notification-help span { color:var(--muted);font-size:12px;line-height:1.55; }
@media(max-width:600px){
  .notification-card { grid-template-columns:auto 1fr;padding:14px; }
  .notification-card-actions { grid-template-columns:1fr; }
}

/* BOMBY Queue V1.8 - Android Voice App */
.android-voice-card {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(34,211,238,.28);
  background:linear-gradient(135deg,rgba(8,47,73,.96),rgba(8,28,48,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.android-voice-icon {
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  font-size:27px;background:linear-gradient(135deg,#22d3ee,#67e8f9);color:#06111f;
}
.android-voice-copy { min-width:0; }
.android-voice-copy strong { display:block;font-size:17px; }
.android-voice-copy span { display:block;margin-top:3px;color:var(--muted);font-size:12px;line-height:1.55; }
.android-voice-actions { display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end; }
@media(max-width:720px){
  .android-voice-card{grid-template-columns:auto 1fr;}
  .android-voice-actions{grid-column:1/-1;justify-content:stretch;}
  .android-voice-actions .btn{flex:1 1 180px;}
}

/* =========================================================
   BOMBY QUEUE V3.0 — NEON SMART DISPLAY + BRAND SYSTEM
   ========================================================= */
:root {
  --bq-bg-0:#030914;
  --bq-bg-1:#061525;
  --bq-bg-2:#0a2035;
  --bq-panel:rgba(7,26,45,.88);
  --bq-panel-2:rgba(10,34,57,.92);
  --bq-cyan:#2ddaf5;
  --bq-cyan-2:#8df7ff;
  --bq-blue:#2d7cf6;
  --bq-red:#ff3b5c;
  --bq-line:rgba(45,218,245,.38);
  --bq-line-soft:rgba(91,184,255,.17);
  --bq-white:#f4fbff;
  --bq-muted:#9eb9cf;
  --bq-glow:0 0 24px rgba(45,218,245,.14), inset 0 0 24px rgba(45,218,245,.035);
}

/* New reusable brand lockup */
.brand-v3 { display:flex; align-items:center; gap:12px; min-width:0; }
.brand-v3-logo { width:48px; height:48px; flex:0 0 auto; filter:drop-shadow(0 8px 22px rgba(45,218,245,.18)); }
.brand-v3-copy { min-width:0; line-height:1.02; }
.brand-v3-copy strong { display:block; color:var(--bq-white); font-size:18px; font-weight:850; letter-spacing:.6px; }
.brand-v3-copy b { color:var(--bq-cyan); }
.brand-v3-copy span { display:block; margin-top:5px; color:var(--bq-muted); font-size:11px; letter-spacing:.7px; }
.voice-gate-logo { width:74px; height:74px; margin:0 auto 6px; display:block; filter:drop-shadow(0 0 20px rgba(45,218,245,.22)); }

/* Full-screen display */
.display-v3-body {
  margin:0;
  width:100%;
  min-height:100dvh;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 43%, rgba(19,118,184,.13), transparent 30%),
    radial-gradient(circle at 8% 6%, rgba(45,218,245,.09), transparent 22%),
    radial-gradient(circle at 92% 4%, rgba(45,124,246,.09), transparent 24%),
    linear-gradient(160deg,var(--bq-bg-0),var(--bq-bg-1) 48%,#04101e);
}
.display-v3-body::before,
.display-v3-body::after {
  content:"";
  position:fixed;
  pointer-events:none;
  inset:auto;
  opacity:.28;
  z-index:0;
}
.display-v3-body::before {
  left:-90px; bottom:-90px; width:390px; height:390px;
  background:repeating-radial-gradient(circle at center, rgba(45,218,245,.16) 0 1px, transparent 1px 18px);
  mask-image:linear-gradient(135deg,black,transparent 72%);
}
.display-v3-body::after {
  right:-120px; top:0; width:420px; height:320px;
  background:linear-gradient(145deg,transparent 45%,rgba(45,218,245,.11) 46% 46.5%,transparent 47%),
             linear-gradient(160deg,transparent 60%,rgba(45,124,246,.12) 61% 61.5%,transparent 62%);
}

.queue-display-v3 {
  position:relative;
  z-index:1;
  width:100%;
  height:100dvh;
  min-height:620px;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(10px,1.15vh,18px);
  padding:clamp(12px,1.15vw,22px) clamp(14px,1.5vw,30px) clamp(12px,1.15vw,22px);
  color:var(--bq-white);
}

.queue-v3-header {
  display:grid;
  grid-template-columns:minmax(280px,.85fr) minmax(320px,1.3fr) minmax(250px,.72fr);
  align-items:center;
  gap:clamp(12px,1.5vw,28px);
  min-height:clamp(84px,11vh,120px);
}
.queue-v3-brand { display:flex; align-items:center; min-width:0; }
.queue-v3-brand img { width:min(100%,310px); height:auto; max-height:82px; object-fit:contain; object-position:left center; filter:drop-shadow(0 10px 28px rgba(0,0,0,.34)); }
.queue-v3-heading { text-align:center; min-width:0; align-self:center; }
.queue-v3-heading h1 { margin:0; font-size:clamp(32px,4vw,72px); line-height:.98; font-weight:850; letter-spacing:-1.7px; text-shadow:0 0 28px rgba(255,255,255,.06); }
.queue-v3-heading-line { margin:9px auto 0; width:min(88%,540px); height:10px; display:flex; align-items:center; gap:7px; }
.queue-v3-heading-line span { height:2px; flex:1; background:linear-gradient(90deg,transparent,var(--bq-cyan)); box-shadow:0 0 12px rgba(45,218,245,.35); }
.queue-v3-heading-line span:last-child { background:linear-gradient(90deg,var(--bq-cyan),transparent); }
.queue-v3-heading-line i { width:7px; height:7px; border-radius:50%; background:var(--bq-cyan); box-shadow:0 0 16px var(--bq-cyan); }
.queue-v3-clock-wrap { display:flex; justify-content:flex-end; align-items:center; gap:14px; text-align:right; }
.queue-v3-clock-icon { width:58px; height:58px; border:2px dotted var(--bq-cyan); border-radius:50%; display:grid; place-items:center; font-size:35px; color:var(--bq-cyan); box-shadow:0 0 20px rgba(45,218,245,.09); }
.queue-v3-clock { font-size:clamp(30px,3.6vw,62px); font-weight:850; line-height:.95; letter-spacing:.5px; }
.queue-v3-date { margin-top:7px; color:#d6e5ef; font-size:clamp(12px,1.15vw,20px); white-space:nowrap; }

.queue-v3-grid {
  min-height:0;
  display:grid;
  grid-template-columns:minmax(225px,.7fr) minmax(430px,1.5fr) minmax(260px,.82fr);
  gap:clamp(12px,1.2vw,22px);
  align-items:stretch;
}
.queue-v3-panel,
.queue-v3-hero {
  min-width:0;
  min-height:0;
  background:linear-gradient(155deg,rgba(7,29,49,.92),rgba(4,15,29,.94));
  border:1px solid var(--bq-line);
  box-shadow:var(--bq-glow),0 18px 48px rgba(0,0,0,.22);
  border-radius:clamp(18px,1.4vw,28px);
  overflow:hidden;
  position:relative;
}
.queue-v3-panel::before,
.queue-v3-hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg,rgba(45,218,245,.06),transparent 22%,transparent 78%,rgba(45,124,246,.04));
}
.queue-v3-panel-title {
  position:relative; z-index:1;
  display:flex; align-items:center; gap:10px;
  padding:clamp(13px,1.05vw,19px) clamp(14px,1.15vw,21px) 8px;
  color:var(--bq-cyan);
  font-size:clamp(17px,1.5vw,25px);
}
.queue-v3-panel-icon { font-size:32px; font-weight:900; line-height:.7; }
.queue-v3-people-icon,.queue-v3-phone-icon { display:inline-grid; place-items:center; width:30px; height:30px; color:var(--bq-cyan-2); }

.queue-v3-next-panel { padding-bottom:12px; }
.queue-v3-next-list { position:relative; z-index:1; display:grid; gap:clamp(9px,1.15vh,14px); padding:8px clamp(13px,1vw,19px) 4px; height:calc(100% - 55px); align-content:start; }
.queue-v3-next-item {
  position:relative;
  border:1px solid rgba(85,195,255,.25);
  background:linear-gradient(150deg,rgba(8,36,60,.96),rgba(6,22,39,.92));
  border-radius:18px;
  padding:clamp(13px,1.15vw,20px);
  min-height:clamp(104px,15.5vh,145px);
  display:flex; flex-direction:column; justify-content:center;
  box-shadow:inset 0 0 22px rgba(45,218,245,.025);
}
.queue-v3-next-item::after { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(var(--bq-cyan),transparent); border-radius:18px 0 0 18px; opacity:.65; }
.queue-v3-next-code { text-align:center; font-size:clamp(38px,4.1vw,67px); font-weight:900; line-height:.95; letter-spacing:1px; }
.queue-v3-next-meta { margin-top:10px; display:flex; justify-content:space-between; gap:8px; align-items:center; color:var(--bq-cyan); font-size:clamp(11px,1vw,16px); }
.queue-v3-next-meta span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.queue-v3-next-meta b { color:#82edff; white-space:nowrap; }
.queue-v3-empty { color:var(--bq-muted); text-align:center; display:grid; place-items:center; min-height:95px; font-size:15px; }

.queue-v3-hero {
  border-color:rgba(45,218,245,.7);
  box-shadow:0 0 0 1px rgba(45,218,245,.07),0 0 30px rgba(45,218,245,.12),inset 0 0 44px rgba(26,143,205,.055),0 22px 55px rgba(0,0,0,.28);
}
.queue-v3-hero::after {
  content:""; position:absolute; left:4%; right:4%; top:50%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(45,218,245,.12),transparent); pointer-events:none;
}
.queue-v3-hero-queue { height:100%; min-height:0; position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(16px,1.8vw,34px); text-align:center; }
.queue-v3-status-pill { display:inline-flex; align-items:center; justify-content:center; min-width:150px; padding:8px 21px; border-radius:999px; background:linear-gradient(135deg,var(--bq-cyan),#7defff); color:#042032; font-size:clamp(14px,1.25vw,20px); font-weight:850; box-shadow:0 0 22px rgba(45,218,245,.2); }
.queue-v3-status-pill.serving { background:linear-gradient(135deg,#2ad680,#8ff2b6); color:#082517; }
.queue-v3-code {
  margin-top:clamp(10px,1.5vh,20px);
  font-size:clamp(104px,15vw,250px);
  font-weight:950;
  line-height:.82;
  letter-spacing:-5px;
  color:#f9fdff;
  text-shadow:0 0 9px rgba(255,255,255,.4),0 0 28px rgba(47,183,255,.38),0 0 60px rgba(45,218,245,.16);
}
.queue-v3-pulse { width:min(83%,620px); display:flex; align-items:center; gap:0; margin:clamp(10px,1.6vh,19px) 0 clamp(9px,1.2vh,15px); }
.queue-v3-pulse span { flex:1; height:2px; background:linear-gradient(90deg,transparent,var(--bq-cyan)); box-shadow:0 0 9px rgba(45,218,245,.35); }
.queue-v3-pulse span:last-child { background:linear-gradient(90deg,var(--bq-cyan),transparent); }
.queue-v3-pulse i { width:28px; height:14px; border-left:3px solid var(--bq-cyan); border-top:3px solid var(--bq-cyan); transform:rotate(45deg) translate(4px,4px); box-shadow:-4px -4px 8px rgba(45,218,245,.1); }
.queue-v3-counter-line { font-size:clamp(27px,3.4vw,58px); font-weight:850; line-height:1.05; }
.queue-v3-counter-line strong { color:var(--bq-cyan); font-size:1.18em; margin-left:7px; text-shadow:0 0 22px rgba(45,218,245,.22); }
.queue-v3-service { margin-top:8px; color:#b8c9d7; font-size:clamp(15px,1.35vw,24px); }

.queue-v3-idle-media { height:100%; min-height:0; position:relative; z-index:2; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:10px; padding:clamp(11px,1vw,16px); }
.queue-v3-idle-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 5px; }
.queue-v3-idle-head h2 { margin:1px 0 0; font-size:clamp(20px,1.8vw,30px); }
.queue-v3-media-stage { min-height:0; height:100%; aspect-ratio:auto; border-radius:17px; background:#02070c; }
.queue-v3-media-stage .media-image,.queue-v3-media-stage .media-video,.queue-v3-media-stage .media-frame { width:100%; height:100%; object-fit:contain; border:0; background:#000; }
.queue-v3-idle-logo { width:90px; height:90px; margin-bottom:8px; opacity:.9; }
.queue-v3-hero.is-idle { border-color:rgba(45,218,245,.34); }

.queue-v3-right-stack { min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:clamp(12px,1.2vw,20px); }
.queue-v3-waiting-panel { min-height:0; }
.queue-v3-waiting-list { position:relative; z-index:1; padding:2px clamp(14px,1vw,19px) 13px; overflow:auto; }
.queue-v3-waiting-row { min-height:clamp(61px,8.5vh,82px); display:grid; grid-template-columns:clamp(42px,3.2vw,58px) minmax(0,1fr) auto auto; gap:10px; align-items:center; border-bottom:1px solid rgba(128,190,234,.19); }
.queue-v3-waiting-row:last-child { border-bottom:0; }
.queue-v3-service-badge { width:clamp(40px,3.1vw,56px); height:clamp(40px,3.1vw,56px); border-radius:10px; display:grid; place-items:center; font-size:clamp(20px,1.8vw,30px); font-weight:900; color:white; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 6px 15px rgba(0,0,0,.18); }
.service-a { background:linear-gradient(145deg,#2f8dfb,#205ad6); }
.service-b { background:linear-gradient(145deg,#2ad47e,#129355); }
.service-c { background:linear-gradient(145deg,#8a65f2,#5d3cc9); }
.service-x { background:linear-gradient(145deg,#2bbbcf,#196984); }
.service-x-1 { background:linear-gradient(145deg,#ee8b32,#b25212); }
.service-x-2 { background:linear-gradient(145deg,#db567c,#9a264c); }
.service-x-3 { background:linear-gradient(145deg,#6c8cf5,#4156b5); }
.queue-v3-waiting-name { font-size:clamp(12px,1.05vw,18px); line-height:1.2; overflow:hidden; }
.queue-v3-waiting-row strong { color:var(--bq-cyan); font-size:clamp(25px,2.4vw,42px); line-height:1; }
.queue-v3-waiting-row small { color:#d9e7f1; font-size:clamp(10px,.8vw,14px); }

.queue-v3-qr-panel { padding-bottom:13px; }
.queue-v3-qr-content { position:relative; z-index:1; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:clamp(12px,1vw,18px); padding:4px clamp(13px,1vw,18px); }
.queue-v3-qr { width:clamp(118px,9.2vw,164px); height:clamp(118px,9.2vw,164px); background:white; border-radius:11px; padding:7px; display:grid; place-items:center; color:#07111f; overflow:hidden; }
.queue-v3-qr img,.queue-v3-qr canvas { max-width:100%; height:auto!important; }
.queue-v3-qr-copy { min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; }
.queue-v3-phone-card { width:52px; height:62px; border:1px solid var(--bq-cyan); border-radius:10px; display:grid; place-items:center; color:var(--bq-cyan); font-size:24px; }
.queue-v3-qr-copy p { margin:8px 0 0; color:#d6e6f0; line-height:1.35; font-size:clamp(10px,.85vw,14px); }
.queue-v3-qr-copy strong { color:var(--bq-cyan-2); }

.queue-v3-announcement {
  min-height:clamp(65px,9vh,92px);
  display:grid;
  grid-template-columns:auto auto auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(12px,1.3vw,22px);
  padding:clamp(9px,.85vw,14px) clamp(18px,1.4vw,28px);
  border-radius:999px;
  border:1px solid rgba(45,218,245,.5);
  background:linear-gradient(90deg,rgba(6,31,51,.94),rgba(8,26,46,.98),rgba(5,22,39,.96));
  box-shadow:0 0 20px rgba(45,218,245,.08), inset 0 0 24px rgba(45,218,245,.03);
}
.queue-v3-announcement-icon { width:clamp(46px,4vw,66px); height:clamp(46px,4vw,66px); border-radius:50%; display:grid; place-items:center; font-size:clamp(24px,2vw,34px); border:1px solid var(--bq-line); color:var(--bq-cyan); }
.queue-v3-announcement > strong { color:var(--bq-cyan); font-size:clamp(18px,1.8vw,30px); }
.queue-v3-announcement-divider { width:1px; height:46%; background:rgba(116,188,236,.38); }
.queue-v3-announcement-text { min-width:0; overflow:hidden; white-space:nowrap; font-size:clamp(20px,2.4vw,40px); font-weight:700; text-align:center; }
.queue-v3-marquee { position:relative; width:100%; mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%); }
.queue-v3-marquee-track { --bq-marquee-duration:18s; display:flex; align-items:center; width:max-content; min-width:100%; gap:clamp(70px,7vw,150px); will-change:transform; animation:bq-marquee-left var(--bq-marquee-duration) linear infinite; }
.queue-v3-marquee-copy { display:block; flex:none; min-width:max-content; padding-inline:2vw; }
.queue-v3-marquee.is-static { mask-image:none; -webkit-mask-image:none; }
.queue-v3-marquee.is-static .queue-v3-marquee-track { width:100%; min-width:100%; justify-content:center; gap:0; animation:none; transform:none; }
.queue-v3-marquee.is-static .queue-v3-marquee-copy:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; padding-inline:0; }
.queue-v3-marquee.is-static .queue-v3-marquee-copy:nth-child(2) { display:none; }
@keyframes bq-marquee-left { from { transform:translateX(0); } to { transform:translateX(calc(-50% - clamp(35px,3.5vw,75px))); } }
.queue-v3-chevrons { color:#268cd3; font-size:clamp(25px,2.6vw,42px); letter-spacing:-5px; }

.queue-v3-controls {
  position:fixed; z-index:25; right:14px; top:10px;
  display:flex; gap:6px; align-items:center;
  opacity:.12; transition:opacity .2s ease;
}
.queue-v3-controls:hover,.queue-v3-controls:focus-within { opacity:1; }
.queue-v3-control-btn { border:1px solid rgba(130,199,240,.22); background:rgba(6,23,40,.87); color:#d9e9f4; border-radius:10px; padding:7px 10px; font:600 11px/1 "Kanit",sans-serif; cursor:pointer; }
.queue-v3-controls .voice-status { min-height:auto; padding:7px 9px; font-size:10px; border-radius:10px; }
.queue-v3-branch-label { position:fixed; left:14px; bottom:4px; z-index:5; color:rgba(165,203,226,.32); font-size:9px; letter-spacing:1px; pointer-events:none; }

/* Keep promo compact inside idle media */
.display-v3-body .promo-banner { min-height:74px; padding:9px 12px; border-radius:16px; }
.display-v3-body .promo-banner-icon { width:44px; height:44px; font-size:23px; border-radius:12px; }
.display-v3-body .promo-banner-badge { font-size:9px; }
.display-v3-body .promo-banner-headline { font-size:clamp(14px,1.35vw,22px); }
.display-v3-body .promo-banner-subtext { font-size:clamp(10px,.8vw,13px); }

/* Responsive: laptop / low-height TV */
@media (max-height:820px) and (min-width:901px) {
  .queue-display-v3 { min-height:540px; padding:8px 12px 9px; gap:8px; }
  .queue-v3-header { min-height:68px; grid-template-columns:minmax(250px,.8fr) minmax(300px,1.2fr) minmax(220px,.7fr); }
  .queue-v3-brand img { max-height:62px; width:min(100%,260px); }
  .queue-v3-heading h1 { font-size:clamp(29px,3.5vw,52px); }
  .queue-v3-heading-line { margin-top:5px; }
  .queue-v3-clock-icon { width:44px; height:44px; font-size:28px; }
  .queue-v3-grid { grid-template-columns:minmax(205px,.68fr) minmax(410px,1.52fr) minmax(245px,.82fr); gap:9px; }
  .queue-v3-panel-title { padding:10px 12px 5px; font-size:16px; }
  .queue-v3-next-list { gap:7px; padding:5px 10px; }
  .queue-v3-next-item { min-height:86px; padding:9px 12px; }
  .queue-v3-next-code { font-size:clamp(34px,3.6vw,52px); }
  .queue-v3-code { font-size:clamp(92px,13.2vw,180px); margin-top:7px; }
  .queue-v3-counter-line { font-size:clamp(24px,3vw,40px); }
  .queue-v3-service { font-size:14px; }
  .queue-v3-waiting-row { min-height:52px; }
  .queue-v3-service-badge { width:38px; height:38px; font-size:20px; }
  .queue-v3-qr { width:105px; height:105px; }
  .queue-v3-phone-card { width:42px; height:48px; }
  .queue-v3-announcement { min-height:56px; padding:6px 15px; }
  .queue-v3-announcement-icon { width:40px; height:40px; }
  .queue-v3-controls { top:4px; right:5px; }
}

/* Responsive: tablets / narrow screens */
@media (max-width:1100px) {
  .display-v3-body { overflow:auto; }
  .queue-display-v3 { height:auto; min-height:100dvh; overflow:visible; }
  .queue-v3-header { grid-template-columns:1fr auto; }
  .queue-v3-brand { grid-column:1; }
  .queue-v3-heading { grid-column:1/-1; grid-row:2; }
  .queue-v3-clock-wrap { grid-column:2; grid-row:1; }
  .queue-v3-grid { grid-template-columns:minmax(220px,.7fr) minmax(420px,1.35fr); }
  .queue-v3-right-stack { grid-column:1/-1; grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .queue-v3-announcement { border-radius:22px; }
}

@media (max-width:780px) {
  .queue-display-v3 { padding:10px; gap:10px; }
  .queue-v3-header { grid-template-columns:1fr; gap:8px; }
  .queue-v3-brand,.queue-v3-clock-wrap,.queue-v3-heading { grid-column:1; grid-row:auto; justify-self:stretch; }
  .queue-v3-brand { justify-content:center; }
  .queue-v3-brand img { object-position:center; }
  .queue-v3-clock-wrap { justify-content:center; text-align:center; }
  .queue-v3-grid { grid-template-columns:1fr; }
  .queue-v3-next-panel { order:2; }
  .queue-v3-hero { min-height:410px; order:1; }
  .queue-v3-right-stack { grid-column:1; grid-template-columns:1fr; order:3; }
  .queue-v3-next-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .queue-v3-next-item { min-height:105px; }
  .queue-v3-next-code { font-size:38px; }
  .queue-v3-next-meta { display:block; text-align:center; }
  .queue-v3-next-meta b { display:block; margin-top:4px; }
  .queue-v3-code { font-size:clamp(88px,30vw,170px); }
  .queue-v3-waiting-row { min-height:62px; }
  .queue-v3-qr-content { grid-template-columns:auto 1fr; }
  .queue-v3-announcement { grid-template-columns:auto auto 1fr; border-radius:20px; }
  .queue-v3-announcement-divider,.queue-v3-chevrons { display:none; }
  .queue-v3-announcement-text { grid-column:1/-1; white-space:normal; font-size:20px; padding-bottom:3px; }
  .queue-v3-controls { position:static; opacity:1; flex-wrap:wrap; justify-content:center; margin-top:2px; }
  .queue-v3-branch-label { display:none; }
}

.queue-v3-grid.no-next { grid-template-columns:minmax(520px,1.55fr) minmax(270px,.72fr); }
.queue-v3-grid.no-right { grid-template-columns:minmax(235px,.7fr) minmax(520px,1.6fr); }
.queue-v3-grid.only-hero { grid-template-columns:minmax(0,1fr); }
.queue-v3-grid.no-next .queue-v3-hero { grid-column:1; }
.queue-v3-grid.no-next .queue-v3-right-stack { grid-column:2; }
.queue-v3-grid.no-right .queue-v3-hero { grid-column:2; }
.queue-v3-grid.only-hero .queue-v3-hero { grid-column:1; }
.queue-v3-grid.only-hero .queue-v3-right-stack { display:none; }

.display-v3-admin-card { border-color:rgba(45,218,245,.28); background:linear-gradient(180deg,rgba(11,37,61,.96),rgba(6,22,39,.96)); }
.display-setting-toggle {
  display:flex; gap:11px; align-items:flex-start; min-height:88px; padding:14px;
  border:1px solid rgba(45,218,245,.16); background:#081b2e; border-radius:16px; cursor:pointer;
}
.display-setting-toggle input { margin-top:4px; accent-color:var(--bq-cyan); width:18px; height:18px; flex:0 0 auto; }
.display-setting-toggle span { display:grid; gap:3px; }
.display-setting-toggle strong { color:#eaf9ff; font-size:15px; }
.display-setting-toggle small { color:var(--muted); line-height:1.45; }
.display-v3-admin-note { padding:13px 15px; border-radius:14px; color:#bed4e3; background:rgba(45,218,245,.06); border:1px solid rgba(45,218,245,.13); line-height:1.6; }

@media (max-width:1100px) {
  .queue-v3-grid.no-next,.queue-v3-grid.no-right,.queue-v3-grid.only-hero { grid-template-columns:1fr; }
  .queue-v3-grid.no-next .queue-v3-hero,.queue-v3-grid.no-next .queue-v3-right-stack,
  .queue-v3-grid.no-right .queue-v3-hero,.queue-v3-grid.only-hero .queue-v3-hero { grid-column:1; }
}
.queue-v3-grid.no-right .queue-v3-right-stack { display:none; }

/* =========================================================
   BOMBY QUEUE V3.1.0 — CUSTOMER APP UI OVERHAUL
   ========================================================= */
.customer-v31-body {
  --cq-navy:#03101d; --cq-navy-2:#071b2f; --cq-panel:#08233a; --cq-cyan:#25d8f4;
  --cq-cyan-2:#75efff; --cq-yellow:#ffd84c; --cq-green:#20e58f; --cq-red:#ff4d62;
  min-height:100dvh; background:#020812; color:#f5fbff; overflow-x:hidden;
}
.customer-v31-phone-shell {
  width:min(100%,680px); min-height:100dvh; margin:0 auto; position:relative; padding-bottom:96px;
  background:
    radial-gradient(circle at 72% 0%,rgba(37,216,244,.12),transparent 30%),
    radial-gradient(circle at 0% 28%,rgba(24,199,232,.08),transparent 25%),
    linear-gradient(180deg,#04111f 0%,#061526 48%,#03101d 100%);
  box-shadow:0 0 70px rgba(0,0,0,.55); border-inline:1px solid rgba(74,199,236,.08);
}
.customer-v31-header {
  position:sticky; top:0; z-index:30; display:grid; grid-template-columns:48px 1fr 48px; align-items:center;
  gap:10px; padding:max(14px,env(safe-area-inset-top)) 18px 13px;
  background:linear-gradient(180deg,rgba(3,16,29,.98),rgba(3,16,29,.91));
  border-bottom:1px solid rgba(65,201,235,.1); backdrop-filter:blur(18px);
}
.customer-v31-brand { display:flex; align-items:center; justify-content:center; gap:10px; min-width:0; }
.customer-v31-brand img { width:48px; height:48px; flex:0 0 auto; filter:drop-shadow(0 0 10px rgba(37,216,244,.18)); }
.customer-v31-brand > span { display:flex; flex-direction:column; line-height:1; min-width:0; }
.customer-v31-brand strong { font-size:20px; letter-spacing:1.7px; }
.customer-v31-brand b { color:var(--cq-cyan); font-size:18px; letter-spacing:5px; margin-top:5px; }
.customer-v31-brand small { color:#6d8da4; font-size:6px; letter-spacing:2px; margin-top:5px; }
.customer-v31-icon-btn { position:relative; width:44px; height:44px; border:0; background:transparent; color:#edfaff; font-size:26px; display:grid; place-items:center; border-radius:14px; }
.customer-v31-icon-btn:active { background:rgba(37,216,244,.1); }
.customer-v31-bell i,.customer-v31-bottom-nav i { position:absolute; width:9px; height:9px; border-radius:50%; background:#ff3b4d; box-shadow:0 0 8px rgba(255,59,77,.65); }
.customer-v31-bell i { top:7px; right:7px; }
.customer-v31-main { padding:18px 18px 24px; }
.customer-v31-loading { min-height:55vh; display:grid; place-items:center; align-content:center; gap:14px; color:#9bb3c5; }
.customer-v31-welcome { text-align:center; padding:8px 4px 18px; }
.customer-v31-welcome h1 { margin:0; font-size:clamp(28px,7.2vw,42px); line-height:1.12; letter-spacing:-.5px; }
.customer-v31-welcome p { margin:7px 0 10px; color:#9bb3c5; }
.customer-v31-branch-chip { display:inline-flex; padding:6px 10px; border-radius:999px; background:rgba(32,229,143,.09); border:1px solid rgba(32,229,143,.18); color:#7df1b8; font-size:12px; }
.customer-v31-section-head { display:flex; justify-content:space-between; align-items:center; margin:7px 2px 10px; }
.customer-v31-section-head strong { font-size:16px; }
.customer-v31-section-head span { color:#6f91a9; font-size:12px; }
.customer-v31-service-list { display:grid; gap:10px; }
.customer-v31-service-choice {
  --accent:#25d8f4; width:100%; display:grid; grid-template-columns:54px 40px 1fr 22px; align-items:center; gap:9px;
  min-height:96px; padding:13px 15px; border-radius:22px; color:#eefaff; text-align:left;
  border:1px solid rgba(57,186,224,.22); background:linear-gradient(145deg,rgba(8,35,58,.98),rgba(5,23,40,.98));
  box-shadow:inset 0 0 24px rgba(37,216,244,.018); transition:.18s ease;
}
.customer-v31-service-choice.service-a { --accent:#20e58f; }
.customer-v31-service-choice.service-b { --accent:#29b9ff; }
.customer-v31-service-choice.service-c { --accent:#9b63ff; }
.customer-v31-service-choice.service-x { --accent:#ffd84c; }
.customer-v31-service-choice.selected { border-color:var(--accent); transform:translateY(-1px); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent),0 12px 28px rgba(0,0,0,.2); }
.service-choice-icon { width:52px; height:52px; border-radius:17px; display:grid; place-items:center; background:color-mix(in srgb,var(--accent) 24%,#071827); border:1px solid color-mix(in srgb,var(--accent) 60%,transparent); font-size:25px; box-shadow:0 0 18px color-mix(in srgb,var(--accent) 15%,transparent); }
.service-choice-prefix { color:var(--accent); font-size:34px; font-weight:900; }
.service-choice-copy { min-width:0; display:grid; gap:4px; }
.service-choice-copy strong { font-size:18px; line-height:1.2; }
.service-choice-copy small { color:#91a9ba; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.customer-v31-service-choice > b { font-size:35px; font-weight:300; color:#dff8ff; }
.customer-v31-selected-card { margin-top:11px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid rgba(255,216,76,.24); background:rgba(255,216,76,.07); padding:13px 15px; border-radius:17px; }
.customer-v31-selected-card div { display:grid; gap:2px; }
.customer-v31-selected-card small,.customer-v31-selected-card span { color:#bea94e; font-size:11px; }
.customer-v31-selected-card strong { color:#ffe778; }
.customer-v31-selected-card button { border:1px solid rgba(255,216,76,.25); color:#ffe778; background:transparent; border-radius:10px; padding:7px 10px; }
.customer-v31-details { margin-top:11px; border:1px solid rgba(95,168,211,.14); border-radius:16px; background:rgba(5,24,41,.72); overflow:hidden; }
.customer-v31-details summary { padding:12px 14px; cursor:pointer; font-weight:700; }
.customer-v31-details summary span { color:#7897aa; font-weight:400; font-size:12px; }
.customer-v31-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 13px 13px; }
.customer-v31-form-grid label { font-size:12px; color:#acc3d2; display:grid; gap:6px; }
.customer-v31-primary-cta,.customer-v31-secondary-cta,.customer-v31-mini-cta { width:100%; border:0; display:grid; align-items:center; text-align:left; }
.customer-v31-primary-cta { grid-template-columns:58px 1fr 38px; gap:10px; margin-top:13px; min-height:108px; padding:16px; border-radius:23px; color:#07111f; background:linear-gradient(135deg,#ffe36c,#ffc928); box-shadow:0 11px 34px rgba(255,201,40,.18); }
.customer-v31-primary-cta:disabled { filter:saturate(.35); opacity:.48; }
.customer-v31-primary-cta.is-loading { animation:pulse 1.1s infinite; }
.customer-v31-cta-icon { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.24); font-size:27px; }
.customer-v31-primary-cta span:nth-child(2),.customer-v31-secondary-cta span:nth-child(2),.customer-v31-mini-cta span:nth-child(2) { display:grid; gap:2px; }
.customer-v31-primary-cta strong { font-size:25px; }
.customer-v31-primary-cta small { font-size:12px; opacity:.74; }
.customer-v31-primary-cta > b,.customer-v31-secondary-cta > b { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#07111f; color:white; font-size:30px; }
.customer-v31-secondary-cta { grid-template-columns:58px 1fr 38px; gap:10px; margin-top:10px; min-height:90px; padding:14px 16px; border-radius:20px; color:white; background:#09223a; border:1px solid rgba(55,180,222,.22); }
.customer-v31-secondary-cta strong { font-size:20px; }
.customer-v31-secondary-cta small,.customer-v31-mini-cta small { color:#88a4b8; }
.customer-v31-mini-cta { grid-template-columns:44px 1fr 40px; gap:10px; margin-top:10px; padding:13px 15px; min-height:76px; border-radius:19px; color:white; background:rgba(5,24,41,.82); border:1px solid rgba(46,189,227,.16); }
.customer-v31-mini-cta > span:first-child { color:var(--cq-cyan); font-size:25px; }
.customer-v31-alert { padding:15px; border-radius:17px; display:grid; gap:4px; margin-bottom:12px; }
.customer-v31-alert-danger { background:rgba(255,77,98,.1); border:1px solid rgba(255,77,98,.28); }
.customer-v31-alert-danger strong { color:#ff8a99; }

.customer-v31-queue-frame { --state:#25d8f4; --state-soft:rgba(37,216,244,.1); display:grid; gap:11px; }
.customer-v31-queue-frame.state-near { --state:#20e58f; --state-soft:rgba(32,229,143,.12); }
.customer-v31-queue-frame.state-called,.customer-v31-queue-frame.state-serving { --state:#20e58f; --state-soft:rgba(32,229,143,.16); }
.customer-v31-queue-frame.state-done { --state:#7fd6ff; --state-soft:rgba(127,214,255,.1); }
.customer-v31-queue-frame.state-problem { --state:#ff5d72; --state-soft:rgba(255,93,114,.11); }
.customer-v31-queue-head { display:flex; justify-content:space-between; align-items:center; color:#8aa8bb; padding:0 2px; }
.customer-v31-share { border:1px solid rgba(41,190,232,.2); background:rgba(10,40,65,.8); color:#9aefff; padding:7px 11px; border-radius:11px; }
.customer-v31-state-banner { display:grid; grid-template-columns:48px 1fr; align-items:center; gap:12px; padding:14px; border:1px solid color-mix(in srgb,var(--state) 48%,transparent); background:linear-gradient(90deg,var(--state-soft),rgba(4,25,40,.84)); border-radius:19px; box-shadow:0 0 24px color-mix(in srgb,var(--state) 9%,transparent); }
.customer-v31-state-icon { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb,var(--state) 20%,#061828); color:var(--state); box-shadow:0 0 20px color-mix(in srgb,var(--state) 18%,transparent); }
.customer-v31-state-banner div { display:grid; gap:2px; }
.customer-v31-state-banner strong { color:var(--state); font-size:18px; }
.customer-v31-state-banner small { color:#bfd0dc; }
.customer-v31-myqueue-card { position:relative; display:grid; grid-template-columns:62px 1fr; align-items:center; gap:12px; border-radius:25px; padding:18px; overflow:hidden; background:linear-gradient(135deg,#ffe86f,#ffcb2f); color:#06111b; box-shadow:0 15px 40px rgba(255,203,47,.14); }
.state-near .customer-v31-myqueue-card,.state-called .customer-v31-myqueue-card,.state-serving .customer-v31-myqueue-card { background:linear-gradient(135deg,#f6fffb,#e9fff4); border:2px solid rgba(32,229,143,.86); box-shadow:0 0 28px rgba(32,229,143,.19); }
.customer-v31-ticket-icon { width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.28); font-size:29px; }
.customer-v31-myqueue-copy { min-width:0; display:grid; }
.customer-v31-myqueue-copy small { font-weight:700; font-size:17px; }
.customer-v31-myqueue-copy > strong { font-size:clamp(68px,20vw,116px); line-height:.95; letter-spacing:-4px; font-weight:950; }
.customer-v31-waitline { display:flex; align-items:center; gap:7px; padding-top:12px; margin-top:10px; border-top:1px solid rgba(6,17,27,.16); font-size:14px; flex-wrap:wrap; }
.customer-v31-waitline i { font-style:normal; opacity:.55; }
.customer-v31-calling-card { display:grid; grid-template-columns:68px 1fr auto; align-items:center; gap:12px; min-height:130px; padding:16px; border-radius:23px; border:1px solid rgba(50,190,230,.21); background:linear-gradient(145deg,#09233b,#06192b); }
.customer-v31-sound-orb { width:66px; height:66px; border-radius:50%; display:grid; place-items:center; font-size:31px; background:rgba(37,216,244,.12); border:1px solid rgba(37,216,244,.36); box-shadow:0 0 23px rgba(37,216,244,.1); }
.customer-v31-calling-copy { display:grid; min-width:0; }
.customer-v31-calling-copy small { color:var(--cq-cyan); font-size:16px; font-weight:700; }
.customer-v31-calling-copy strong { font-size:clamp(45px,13vw,72px); line-height:1; }
.customer-v31-calling-copy span { color:#92aabc; font-size:12px; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.customer-v31-near-badge { text-align:center; min-width:88px; color:var(--cq-green); display:grid; justify-items:center; gap:2px; }
.customer-v31-near-badge > span { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:rgba(32,229,143,.12); border:1px solid rgba(32,229,143,.36); box-shadow:0 0 22px rgba(32,229,143,.19); }
.customer-v31-near-badge strong { font-size:12px; }
.customer-v31-near-badge small { color:#9bb7aa; font-size:9px; }
.customer-v31-service-card-live { display:grid; grid-template-columns:54px 1fr 20px; align-items:center; gap:12px; padding:13px 15px; border-radius:19px; border:1px solid rgba(58,183,221,.18); background:rgba(6,26,44,.92); }
.customer-v31-service-square { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:27px; font-weight:900; background:#2d75ee; }
.customer-v31-service-square.service-b { background:#21bc80; }.customer-v31-service-square.service-c { background:#7c4de2; }.customer-v31-service-square.service-x { background:#c49823; }
.customer-v31-service-card-live > div { display:grid; gap:3px; }
.customer-v31-service-card-live strong { font-size:18px; }.customer-v31-service-card-live small { color:#8ba5b7; }
.customer-v31-service-card-live > b { font-size:30px; color:#d8f5ff; font-weight:300; }
.customer-v31-called-instructions { padding:16px; border-radius:23px; border:1px solid rgba(32,229,143,.3); background:rgba(8,68,54,.26); box-shadow:0 0 28px rgba(32,229,143,.07); }
.customer-v31-counter-target { display:grid; grid-template-columns:45px 1fr; align-items:center; gap:10px; }
.customer-v31-counter-target > span { font-size:35px; color:var(--cq-green); }
.customer-v31-counter-target div { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.customer-v31-counter-target small { color:#cfefe0; font-size:16px; }.customer-v31-counter-target strong { color:var(--cq-green); font-size:48px; line-height:1; }
.customer-v31-called-instructions p { text-align:center; color:#86d9b3; border-top:1px dashed rgba(32,229,143,.2); padding-top:12px; }
.customer-v31-arrived-btn { width:100%; min-height:58px; border:0; border-radius:17px; background:linear-gradient(135deg,#24e8a0,#19c981); color:#03170f; font-weight:900; font-size:18px; box-shadow:0 12px 25px rgba(32,229,143,.14); }
.customer-v31-queue-tools { display:grid; border:1px solid rgba(56,184,224,.18); border-radius:21px; overflow:hidden; background:rgba(5,24,41,.92); }
.customer-v31-tool-row { display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:11px; min-height:80px; padding:12px 14px; border:0; border-bottom:1px solid rgba(87,154,194,.12); background:transparent; color:#edfaff; text-align:left; }
.customer-v31-tool-row:last-child { border-bottom:0; }
.tool-orb { width:45px; height:45px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(37,216,244,.24); background:rgba(37,216,244,.08); }
.customer-v31-tool-row > span:nth-child(2) { display:grid; gap:2px; }.customer-v31-tool-row strong { font-size:15px; }.customer-v31-tool-row small { color:#7f9bad; font-size:11px; line-height:1.35; }
.customer-v31-tool-row > i { color:#cbe9f5; font-style:normal; font-size:26px; }
.customer-v31-toggle { width:50px; height:28px; border-radius:999px; background:#29445a; position:relative; transition:.2s ease; }
.customer-v31-toggle::after { content:""; width:22px; height:22px; border-radius:50%; background:#d7e7f0; position:absolute; left:3px; top:3px; transition:.2s ease; }
.customer-v31-toggle.on { background:var(--cq-cyan); }.customer-v31-toggle.on::after { left:25px; background:white; }
.customer-v31-qr-sheet { text-align:center; padding:16px; border-radius:20px; background:#071b2e; border:1px solid rgba(42,190,230,.16); }
.customer-v31-qr-sheet .qr-box { margin:auto; }
.customer-v31-qr-sheet p { color:#82a0b3; font-size:12px; margin-bottom:0; }
.customer-v31-help { padding:13px 15px; border-radius:15px; background:rgba(255,216,76,.07); border:1px solid rgba(255,216,76,.18); display:grid; gap:4px; color:#ffe878; }
.customer-v31-help span { color:#c6b96f; font-size:12px; }
.customer-v31-page-simple { padding:6px 2px 14px; }.customer-v31-page-simple h2 { margin:0; font-size:28px; }.customer-v31-page-simple p { color:#839eb0; margin:4px 0 0; }
.customer-v31-history-list { display:grid; gap:10px; }
.customer-v31-history-row { display:grid; grid-template-columns:78px 1fr 20px; align-items:center; gap:10px; width:100%; text-align:left; padding:14px; border:1px solid rgba(53,181,221,.16); background:#061a2c; color:white; border-radius:18px; }
.customer-v31-history-code { font-size:23px; font-weight:900; color:var(--cq-cyan); }.customer-v31-history-row > span:nth-child(2) { display:grid; gap:2px; }.customer-v31-history-row small { color:#7795a9; }
.customer-v31-empty { min-height:120px; display:grid; place-items:center; color:#718ea2; border:1px dashed rgba(70,157,195,.2); border-radius:18px; }
.customer-v31-notification-hub { display:grid; gap:12px; }.customer-v31-notification-hero { min-height:230px; display:grid; place-items:center; align-content:center; gap:8px; text-align:center; border-radius:24px; background:linear-gradient(145deg,rgba(9,39,63,.96),rgba(6,24,41,.96)); border:1px solid rgba(41,195,232,.18); }
.customer-v31-notification-hero span { width:78px; height:78px; border-radius:50%; display:grid; place-items:center; font-size:38px; background:rgba(32,229,143,.12); border:1px solid rgba(32,229,143,.28); box-shadow:0 0 28px rgba(32,229,143,.12); }
.customer-v31-notification-hero strong { font-size:25px; }.customer-v31-notification-hero small { max-width:320px; color:#89a7ba; }
.customer-v31-bottom-nav { position:fixed; z-index:40; left:50%; bottom:0; transform:translateX(-50%); width:min(100%,680px); height:84px; padding:8px 12px max(8px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(4,1fr); background:rgba(3,15,27,.96); border-top:1px solid rgba(62,178,215,.14); backdrop-filter:blur(18px); }
.customer-v31-bottom-nav button { position:relative; border:0; background:transparent; color:#718a9d; display:grid; justify-items:center; align-content:center; gap:3px; border-radius:14px; }
.customer-v31-bottom-nav button::before { content:""; position:absolute; top:-8px; left:25%; right:25%; height:2px; background:transparent; }
.customer-v31-bottom-nav button.active { color:var(--cq-cyan); }.customer-v31-bottom-nav button.active::before { background:var(--cq-cyan); box-shadow:0 0 10px rgba(37,216,244,.65); }
.customer-v31-bottom-nav button > span { font-size:25px; line-height:1; }.customer-v31-bottom-nav button > b { font-size:11px; }.customer-v31-bottom-nav button > i { top:8px; right:25%; }
.customer-v31-overlay { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:18px; background:rgba(0,7,13,.78); backdrop-filter:blur(10px); }
.customer-v31-overlay-card { width:min(100%,480px); border:1px solid rgba(32,229,143,.55); border-radius:28px; padding:26px 22px 22px; text-align:center; background:linear-gradient(160deg,#064634,#04251f 58%,#051a25); box-shadow:0 0 55px rgba(32,229,143,.18); position:relative; }
.customer-v31-overlay-close { position:absolute; right:13px; top:11px; border:0; background:rgba(255,255,255,.07); color:#ccebdd; width:34px; height:34px; border-radius:50%; font-size:24px; }
.customer-v31-overlay-bell { width:72px; height:72px; border-radius:50%; display:grid; place-items:center; margin:0 auto; background:rgba(32,229,143,.14); border:1px solid rgba(32,229,143,.5); font-size:37px; box-shadow:0 0 30px rgba(32,229,143,.25); animation:pulse 1.2s infinite; }
.customer-v31-overlay-card h2 { color:#38f0a6; font-size:31px; margin:15px 0 2px; }.customer-v31-overlay-card p { color:#c5e5d7; margin:0; }
.customer-v31-overlay-code { margin:16px 0 8px; padding:12px; border-radius:20px; background:#effff8; color:#031b12; font-size:78px; line-height:1; font-weight:950; letter-spacing:-3px; }
.customer-v31-overlay-meta { color:#adcfbe; margin-bottom:15px; }

@media (max-width:420px) {
  .customer-v31-header { padding-inline:10px; grid-template-columns:42px 1fr 42px; }
  .customer-v31-brand img { width:40px; height:40px; }.customer-v31-brand strong { font-size:17px; }.customer-v31-brand b { font-size:14px; letter-spacing:4px; }
  .customer-v31-main { padding-inline:12px; }.customer-v31-service-choice { grid-template-columns:48px 32px 1fr 18px; padding-inline:11px; }
  .service-choice-icon { width:46px; height:46px; }.service-choice-prefix { font-size:29px; }.service-choice-copy strong { font-size:16px; }
  .customer-v31-form-grid { grid-template-columns:1fr; }
  .customer-v31-calling-card { grid-template-columns:56px 1fr; }.customer-v31-sound-orb { width:54px; height:54px; }.customer-v31-near-badge { grid-column:1/-1; grid-template-columns:42px 1fr; justify-items:start; text-align:left; }
  .customer-v31-near-badge > span { grid-row:1/3; width:40px; height:40px; }.customer-v31-near-badge strong,.customer-v31-near-badge small { grid-column:2; }
}

/* =========================================================
   BOMBY QUEUE V3.1.0 — STAFF DASHBOARD
   ========================================================= */
.staff-v31-body { min-height:100vh; background:#03101d; color:#edf8ff; }
.staff-v31-login-wrap { min-height:100vh; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 50% 20%,rgba(37,216,244,.14),transparent 30%),#03101d; }
.staff-v31-login { width:min(100%,430px); padding:28px; text-align:center; }
.staff-v31-login img { width:min(100%,270px); height:auto; margin:auto; }.staff-v31-login h1 { margin:20px 0 4px; }.staff-v31-login p { color:#88a5b8; margin:0 0 18px; }.staff-v31-login .input { margin-bottom:12px; }
.staff-v31-shell { min-height:100vh; display:grid; grid-template-columns:230px 1fr; background:linear-gradient(135deg,#04101d,#06182a 62%,#04111e); }
.staff-v31-sidebar { position:sticky; top:0; height:100vh; padding:20px 16px; border-right:1px solid rgba(55,178,217,.15); background:linear-gradient(180deg,#04101d,#061524); display:flex; flex-direction:column; }
.staff-v31-side-brand img { width:100%; max-width:190px; height:auto; }.staff-v31-sidebar nav { display:grid; gap:7px; margin-top:26px; }
.staff-v31-sidebar nav a { display:flex; align-items:center; gap:11px; min-height:48px; padding:10px 13px; border-radius:13px; color:#9db3c3; border:1px solid transparent; }
.staff-v31-sidebar nav a span { width:27px; text-align:center; font-size:20px; }.staff-v31-sidebar nav a:hover,.staff-v31-sidebar nav a.active { color:#f4fbff; background:linear-gradient(90deg,rgba(37,216,244,.22),rgba(37,216,244,.06)); border-color:rgba(37,216,244,.34); box-shadow:inset 0 0 20px rgba(37,216,244,.05); }
.staff-v31-system-card { margin-top:auto; display:grid; gap:3px; padding:14px; border-radius:15px; background:#081f34; border:1px solid rgba(54,177,217,.16); }.staff-v31-system-card .online-dot { width:8px; height:8px; border-radius:50%; background:#27df87; box-shadow:0 0 9px #27df87; }.staff-v31-system-card strong { color:#6ef2ad; }.staff-v31-system-card small { color:#7f9aab; line-height:1.45; }
.staff-v31-content { min-width:0; padding:22px 24px 32px; }.staff-v31-topbar { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }.staff-v31-topbar h1 { margin:0; font-size:31px; }.staff-v31-topbar p { margin:2px 0 0; color:#8aa4b6; }.staff-v31-topbar p b { color:#74edaa; }
.staff-v31-top-meta { display:flex; align-items:center; gap:14px; color:#a8bbc8; font-size:13px; flex-wrap:wrap; justify-content:flex-end; }.staff-v31-top-meta span { padding-left:13px; border-left:1px solid rgba(118,176,207,.17); }
.staff-v31-filters { margin-top:18px; display:grid; grid-template-columns:minmax(180px,260px) minmax(190px,280px) auto; gap:10px; align-items:end; }.staff-v31-filters label { display:grid; gap:5px; color:#b6cbd8; font-size:12px; }
.staff-v31-service-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; }
.staff-v31-stat { --tone:#25d8f4; min-height:150px; position:relative; overflow:hidden; display:grid; grid-template-columns:1fr auto; gap:10px; padding:18px; border-radius:19px; border:1px solid color-mix(in srgb,var(--tone) 32%,transparent); background:linear-gradient(145deg,rgba(8,33,55,.98),rgba(4,20,35,.98)); box-shadow:inset 0 0 25px color-mix(in srgb,var(--tone) 3%,transparent); }.staff-v31-stat.tone-a { --tone:#ffd83f; }.staff-v31-stat.tone-b { --tone:#25d8f4; }.staff-v31-stat.tone-c { --tone:#29df8c; }.staff-v31-stat.tone-x { --tone:#9b63ff; }
.staff-v31-stat div { display:grid; align-content:start; gap:3px; }.staff-v31-stat small { color:var(--tone); font-weight:800; }.staff-v31-stat strong { font-size:17px; }.staff-v31-stat span { margin-top:13px; color:#8aa5b7; }.staff-v31-stat > b { align-self:end; color:var(--tone); font-size:55px; line-height:1; }.staff-v31-stat > i { position:absolute; right:14px; top:14px; width:52px; height:52px; border-radius:11px; display:grid; place-items:center; background:var(--tone); color:#03101d; font-style:normal; font-size:29px; font-weight:950; }
.staff-v31-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(330px,.75fr); gap:14px; margin-top:14px; }.staff-v31-maincol,.staff-v31-previewcol { display:grid; gap:14px; align-content:start; }.staff-v31-card-title { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }.staff-v31-card-title h2 { margin:0; font-size:20px; }.staff-v31-card-title p { margin:3px 0 0; color:#7896aa; font-size:12px; }.live-chip,.online-chip { display:inline-flex; padding:6px 9px; border-radius:999px; font-size:11px; border:1px solid rgba(37,216,244,.2); background:rgba(37,216,244,.07); color:#7befff; }.online-chip { color:#72efaa; border-color:rgba(40,224,139,.2); background:rgba(40,224,139,.06); }
.staff-v31-current { padding:18px; }.staff-v31-current-body { margin-top:14px; min-height:215px; display:grid; grid-template-columns:90px 1fr 120px; align-items:center; gap:17px; padding:20px; border-radius:19px; background:linear-gradient(145deg,#071d31,#061727); border:1px solid rgba(49,180,221,.16); }.staff-v31-current.has-current .staff-v31-current-body { border-color:rgba(37,216,244,.42); box-shadow:inset 0 0 32px rgba(37,216,244,.035); }
.staff-v31-speaker { width:82px; height:82px; border-radius:50%; display:grid; place-items:center; font-size:38px; background:rgba(37,216,244,.11); border:1px solid rgba(37,216,244,.35); box-shadow:0 0 26px rgba(37,216,244,.1); }.staff-v31-current-copy { min-width:0; text-align:center; display:grid; }.staff-v31-current-copy small { color:#25d8f4; font-size:15px; font-weight:700; }.staff-v31-current-copy strong { font-size:clamp(76px,8.5vw,138px); line-height:.92; letter-spacing:-5px; }.staff-v31-current-copy span { color:#a6bac7; font-size:15px; margin-top:7px; }.staff-v31-ready { display:grid; justify-items:center; text-align:center; gap:3px; color:#35e997; }.staff-v31-ready > span { width:60px; height:60px; border-radius:50%; display:grid; place-items:center; font-size:29px; background:rgba(40,224,139,.12); border:1px solid rgba(40,224,139,.32); box-shadow:0 0 24px rgba(40,224,139,.14); }.staff-v31-ready small { color:#8ab3a0; }
.staff-v31-action-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:11px; }.staff-action { min-height:72px; padding:10px 12px; border-radius:13px; border:1px solid rgba(77,153,194,.16); background:#0a2239; color:#eaf8ff; display:flex; align-items:center; justify-content:center; gap:8px; }.staff-action > span { display:grid; text-align:left; }.staff-action strong { font-size:14px; }.staff-action small { color:#7794a9; font-size:10px; }.staff-action.primary { background:linear-gradient(135deg,#20cce9,#49e0f4); color:#03151d; }.staff-action.primary small { color:#145767; }.staff-action.warning { border-color:rgba(255,202,47,.3); color:#ffe264; }.staff-action.success { border-color:rgba(40,224,139,.28); color:#62efaa; }.staff-action.danger { border-color:rgba(255,75,94,.27); color:#ff6f80; }.staff-action:disabled { opacity:.32; }
.staff-v31-waiting { padding:18px; }.staff-v31-wait-row { display:grid; grid-template-columns:42px 90px minmax(130px,1fr) 80px minmax(80px,.7fr); align-items:center; gap:10px; min-height:55px; padding:9px 10px; border-bottom:1px solid rgba(80,151,188,.1); }.staff-v31-wait-row:last-child { border-bottom:0; }.wait-index { width:29px; height:29px; display:grid; place-items:center; border-radius:9px; background:#0b2943; color:#77dbf2; }.staff-v31-wait-row > strong { font-size:22px; }.wait-service { color:#9fb4c2; }.wait-service.tone-a { color:#ffe36a; }.wait-service.tone-b { color:#68e9ff; }.wait-service.tone-c { color:#67e9aa; }.staff-v31-wait-row > span:nth-last-child(2),.staff-v31-wait-row small { color:#7995a8; }
.staff-v31-preview-card { padding:16px; }.staff-v31-preview-frame { margin:12px 0; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#020912; border:1px solid rgba(45,179,219,.14); }.staff-v31-preview-frame iframe { width:1600px; height:900px; border:0; transform:scale(.245); transform-origin:top left; pointer-events:none; }.staff-v31-tip { padding:16px; display:grid; grid-template-columns:44px 1fr; gap:10px; }.staff-v31-tip > span { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:rgba(255,214,57,.08); }.staff-v31-tip strong { color:#ffe477; }.staff-v31-tip p { color:#819bad; font-size:12px; margin:3px 0 0; line-height:1.55; }
@media (max-width:1120px) { .staff-v31-shell { grid-template-columns:82px 1fr; }.staff-v31-sidebar { padding-inline:10px; }.staff-v31-side-brand img { content:url('/icons/bomby-queue-mark.svg'); width:55px; }.staff-v31-sidebar nav a { justify-content:center; padding:10px; font-size:0; }.staff-v31-sidebar nav a span { font-size:22px; }.staff-v31-system-card { display:none; }.staff-v31-grid { grid-template-columns:1fr; }.staff-v31-previewcol { grid-template-columns:1fr 1fr; }.staff-v31-preview-frame iframe { transform:scale(.32); } }
@media (max-width:760px) { .staff-v31-shell { display:block; }.staff-v31-sidebar { position:static; height:auto; display:flex; flex-direction:row; align-items:center; gap:10px; overflow:auto; }.staff-v31-side-brand img { width:48px; }.staff-v31-sidebar nav { margin:0; display:flex; }.staff-v31-sidebar nav a { min-width:48px; }.staff-v31-content { padding:14px; }.staff-v31-topbar { display:grid; }.staff-v31-top-meta { justify-content:flex-start; }.staff-v31-filters { grid-template-columns:1fr; }.staff-v31-service-stats { grid-template-columns:1fr; }.staff-v31-current-body { grid-template-columns:60px 1fr; }.staff-v31-ready { grid-column:1/-1; grid-template-columns:45px 1fr; justify-items:start; text-align:left; }.staff-v31-ready > span { grid-row:1/3; width:44px; height:44px; }.staff-v31-ready strong,.staff-v31-ready small { grid-column:2; }.staff-v31-action-grid { grid-template-columns:1fr 1fr; }.staff-v31-wait-row { grid-template-columns:35px 70px 1fr; }.staff-v31-wait-row > span:nth-last-child(2),.staff-v31-wait-row small { display:none; }.staff-v31-previewcol { grid-template-columns:1fr; }.staff-v31-preview-frame iframe { transform:scale(.22); } }

/* =========================================================
   BOMBY QUEUE V3.1.0 — ADMIN CONTROL CENTER
   ========================================================= */
.admin-v31-body { min-height:100vh; background:#03101d; color:#eef9ff; }
.admin-v31-shell { min-height:100vh; display:grid; grid-template-columns:230px 1fr; background:linear-gradient(135deg,#04101d,#06182a 62%,#04111e); }
.admin-v31-sidebar { position:sticky; top:0; height:100vh; padding:20px 16px; border-right:1px solid rgba(55,178,217,.15); background:linear-gradient(180deg,#04101d,#061524); display:flex; flex-direction:column; }
.admin-v31-side-brand img { width:100%; max-width:190px; height:auto; }.admin-v31-sidebar nav { display:grid; gap:7px; margin-top:26px; }
.admin-v31-sidebar nav a { display:flex; align-items:center; gap:11px; min-height:48px; padding:10px 13px; border-radius:13px; color:#9db3c3; border:1px solid transparent; }
.admin-v31-sidebar nav a span { width:27px; text-align:center; font-size:20px; }.admin-v31-sidebar nav a:hover,.admin-v31-sidebar nav a.active { color:#f4fbff; background:linear-gradient(90deg,rgba(37,216,244,.22),rgba(37,216,244,.06)); border-color:rgba(37,216,244,.34); }
.admin-v31-side-actions { margin-top:auto; display:grid; gap:8px; }.admin-v31-side-actions a,.admin-v31-side-actions button { border:1px solid rgba(70,166,205,.18); background:#082039; color:#9fc0d2; border-radius:12px; padding:10px; text-align:center; }
.admin-v31-content { min-width:0; padding:22px 24px 40px; }.admin-v31-topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }.admin-v31-topbar h1 { margin:0; font-size:31px; }.admin-v31-topbar p { color:#8ca7b8; margin:3px 0 0; }.admin-v31-toplinks { display:flex; gap:8px; flex-wrap:wrap; }
.admin-v31-overview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:16px; }.admin-v31-stat-card { --tone:#25d8f4; min-height:122px; display:grid; align-content:center; gap:2px; padding:17px; border-radius:18px; border:1px solid color-mix(in srgb,var(--tone) 28%,transparent); background:linear-gradient(145deg,#082139,#051625); box-shadow:inset 0 0 24px color-mix(in srgb,var(--tone) 3%,transparent); }.admin-v31-stat-card.tone-yellow { --tone:#ffd83f; }.admin-v31-stat-card.tone-green { --tone:#28df8b; }.admin-v31-stat-card.tone-purple { --tone:#9664ff; }.admin-v31-stat-card small { color:#8ea9ba; }.admin-v31-stat-card strong { color:var(--tone); font-size:36px; line-height:1.1; }.admin-v31-stat-card span { color:#6f8c9f; font-size:11px; }
.admin-v31-dashboard-grid { display:grid; grid-template-columns:1fr 1fr minmax(310px,.9fr); gap:12px; margin-top:12px; }.admin-v31-card { padding:18px; border-color:rgba(56,184,224,.16); background:linear-gradient(180deg,rgba(9,32,52,.96),rgba(5,20,35,.96)); }.admin-v31-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }.admin-v31-card-head h2 { margin:0; font-size:20px; }.admin-v31-card-head p { color:#7896aa; margin:3px 0 0; font-size:12px; line-height:1.45; }
.admin-v31-qr-wrap { display:grid; justify-items:center; gap:10px; margin-top:14px; }.admin-v31-preview-frame { margin-top:12px; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#020912; border:1px solid rgba(45,179,219,.14); }.admin-v31-preview-frame iframe { width:1600px; height:900px; border:0; transform:scale(.215); transform-origin:top left; pointer-events:none; }
.admin-v31-card .table { min-width:720px; }.admin-v31-card .table th { color:#77dff4; font-size:12px; }.admin-v31-card .table td { background:rgba(3,18,31,.25); }.admin-v31-card .input,.admin-v31-card .textarea,.admin-v31-card .select { background:#06192a; }
@media (max-width:1200px) { .admin-v31-shell { grid-template-columns:82px 1fr; }.admin-v31-sidebar { padding-inline:10px; }.admin-v31-side-brand img { content:url('/icons/bomby-queue-mark.svg'); width:55px; }.admin-v31-sidebar nav a { justify-content:center; padding:10px; font-size:0; }.admin-v31-sidebar nav a span { font-size:22px; }.admin-v31-side-actions { display:none; }.admin-v31-overview-grid { grid-template-columns:repeat(2,1fr); }.admin-v31-dashboard-grid { grid-template-columns:1fr 1fr; }.admin-v31-preview-card { grid-column:1/-1; }.admin-v31-preview-frame iframe { transform:scale(.45); } }
@media (max-width:760px) { .admin-v31-shell { display:block; }.admin-v31-sidebar { position:static; height:auto; display:flex; flex-direction:row; gap:10px; overflow:auto; align-items:center; }.admin-v31-side-brand img { width:48px; }.admin-v31-sidebar nav { margin:0; display:flex; }.admin-v31-sidebar nav a { min-width:48px; }.admin-v31-content { padding:14px; }.admin-v31-topbar { display:grid; }.admin-v31-overview-grid,.admin-v31-dashboard-grid { grid-template-columns:1fr; }.admin-v31-preview-card { grid-column:auto; }.admin-v31-preview-frame iframe { transform:scale(.23); }.admin-v31-card .grid-3,.admin-v31-card .grid-2 { grid-template-columns:1fr; } }
.display-v3-embed .queue-v3-controls,.display-v3-embed .queue-v3-branch-label { display:none!important; }
.display-v3-embed .queue-display-v3 { pointer-events:none; }
/* Strong green state when the customer's queue is actually called */
.customer-v31-queue-frame.state-called,.customer-v31-queue-frame.state-serving {
  padding:12px; margin:-6px; border-radius:28px;
  background:linear-gradient(180deg,rgba(5,72,53,.36),rgba(3,31,28,.12));
  box-shadow:0 0 40px rgba(32,229,143,.09); border:1px solid rgba(32,229,143,.16);
}
.customer-v31-queue-frame.state-called .customer-v31-myqueue-card {
  background:linear-gradient(135deg,#5af0b8,#20d78f); border:1px solid rgba(113,255,201,.9);
  box-shadow:0 0 34px rgba(32,229,143,.23); color:#03170f;
}
.customer-v31-queue-frame.state-serving .customer-v31-myqueue-card {
  background:linear-gradient(135deg,#dffff2,#a9f8d2); color:#03170f;
}


/* BOMBY QUEUE V3.2.1 - two-way customer feedback */
.customer-v32-response-panel{margin:16px 0;padding:16px;border:1px solid rgba(36,213,245,.28);border-radius:22px;background:linear-gradient(145deg,rgba(9,37,61,.96),rgba(4,25,43,.96));box-shadow:0 12px 32px rgba(0,0,0,.18)}
.customer-v32-response-head{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}.customer-v32-response-head>div{display:grid;gap:3px}.customer-v32-response-head strong{font-size:18px}.customer-v32-response-head small{color:#8ca6ba;font-size:12px}.customer-v32-response-state{font-size:12px;font-weight:800;color:#73e9ff;background:rgba(31,199,235,.12);border:1px solid rgba(31,199,235,.28);border-radius:999px;padding:7px 10px;white-space:nowrap}
.customer-v32-response-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.customer-v32-response-btn{appearance:none;border:1px solid rgba(255,255,255,.10);border-radius:17px;background:#09243b;color:#f4fbff;padding:12px;display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;text-align:left;gap:0 8px;min-height:76px;cursor:pointer}.customer-v32-response-btn>span{grid-row:1/3;align-self:center;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.08);font-weight:900}.customer-v32-response-btn strong{font-size:15px;align-self:end}.customer-v32-response-btn small{font-size:10px;color:#8fa8bb;line-height:1.25}.customer-v32-response-btn.going{border-color:rgba(32,212,246,.3)}.customer-v32-response-btn.arrived{border-color:rgba(44,218,139,.36)}.customer-v32-response-btn.delay{border-color:rgba(255,190,61,.36)}.customer-v32-response-btn.cancel{border-color:rgba(255,86,104,.30)}.customer-v32-response-btn:disabled{opacity:.48;cursor:default}.customer-v32-delay-notice{margin-top:10px;border-radius:14px;padding:10px 12px;background:rgba(255,183,48,.11);border:1px solid rgba(255,183,48,.3);color:#ffd98b;font-size:12px;line-height:1.45}
.staff-v32-response-chip,.staff-v32-wait-response{display:inline-flex;align-items:center;width:max-content;max-width:100%;border-radius:999px;padding:5px 9px;font-style:normal;font-size:12px;font-weight:800;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05)}.staff-v32-response-chip.going,.staff-v32-wait-response.going{color:#66e9ff;border-color:rgba(47,207,239,.35)}.staff-v32-response-chip.arrived,.staff-v32-wait-response.arrived{color:#6ff0ad;border-color:rgba(65,222,142,.35)}.staff-v32-response-chip.delay,.staff-v32-wait-response.delay{color:#ffd36e;border-color:rgba(255,194,70,.35)}
.staff-v32-feedback{margin-bottom:16px}.staff-v32-feedback-feed{display:grid;gap:8px;margin-top:12px}.staff-v32-feedback-row{display:grid;grid-template-columns:88px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(4,24,40,.72);border:1px solid rgba(42,197,232,.12)}.staff-v32-feedback-row strong{font-size:16px}.staff-v32-feedback-row span{font-weight:700}.staff-v32-feedback-row small{color:#7f9bb0}.staff-v32-feedback-row.arrived{border-color:rgba(56,222,141,.28)}.staff-v32-feedback-row.delay{border-color:rgba(255,194,70,.28)}.staff-v32-feedback-row.cancel{border-color:rgba(255,82,100,.28)}
.staff-v31-wait-row{grid-template-columns:40px 90px minmax(130px,1fr) 90px minmax(80px,.7fr) auto!important}
@media(max-width:640px){.customer-v32-response-grid{grid-template-columns:1fr}.customer-v32-response-head{align-items:flex-start;flex-direction:column}.staff-v32-feedback-row{grid-template-columns:70px 1fr}.staff-v32-feedback-row small{grid-column:2}.staff-v31-wait-row{grid-template-columns:36px 80px 1fr!important}.staff-v31-wait-row>span:nth-of-type(3),.staff-v31-wait-row>small{display:none}.staff-v32-wait-response{grid-column:2/4}}


/* BOMBY QUEUE V3.2.1 - staff feedback sound + cancelled queue hard lock */
.staff-v321-sound-toggle{border-color:rgba(53,211,242,.35)!important;white-space:nowrap}.staff-v321-sound-toggle:not(.is-off){box-shadow:0 0 0 1px rgba(53,211,242,.08),0 0 18px rgba(53,211,242,.12);color:#72e9ff}.staff-v321-sound-toggle.is-off{opacity:.7;color:#8da2b4;border-color:rgba(255,255,255,.12)!important}
@media(max-width:820px){.staff-v31-top-meta{flex-wrap:wrap}.staff-v321-sound-toggle{order:3;width:100%}}

/* =========================================================
   BOMBY QUEUE V3.2.3 — STAFF VIEWPORT / RESPONSIVE FIX
   Fixes the "เรียกคิว" and "จัดการคิว" staff views so the
   application stays inside one browser viewport without page-wide
   horizontal scrolling. Preview iframes are removed from layout flow
   and resized by JavaScript to fill their cards.
   ========================================================= */
html:has(body.staff-v31-body), body.staff-v31-body {
  width:100%; max-width:100%; height:100%; overflow:hidden;
}
.staff-v31-shell {
  width:100%; max-width:100vw; height:100dvh; min-height:0;
  overflow:hidden; grid-template-columns:clamp(82px,14vw,220px) minmax(0,1fr);
}
.staff-v31-sidebar { min-width:0; max-width:100%; overflow-x:hidden; }
.staff-v31-content {
  width:100%; max-width:100%; min-width:0; height:100dvh; min-height:0;
  overflow-y:auto; overflow-x:hidden; box-sizing:border-box; scrollbar-gutter:stable;
  scroll-behavior:smooth;
}
.staff-v31-topbar,.staff-v31-top-meta,.staff-v31-filters,.staff-v31-service-stats,
.staff-v31-grid,.staff-v31-maincol,.staff-v31-previewcol,.staff-v31-current,
.staff-v31-waiting,.staff-v32-feedback,.staff-v31-preview-card,.staff-v31-tip {
  min-width:0; max-width:100%; box-sizing:border-box;
}
.staff-v31-grid {
  width:100%; grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);
}
.staff-v31-preview-frame,.admin-v31-preview-frame {
  position:relative; width:100%; max-width:100%; min-width:0; overflow:hidden;
}
.staff-v31-preview-frame iframe,.admin-v31-preview-frame iframe {
  position:absolute; left:0; top:0; width:1600px; height:900px;
  max-width:none; border:0; transform-origin:top left; pointer-events:none;
}
#currentPanel,#waitingPanelStaff { scroll-margin-top:12px; }
.staff-v31-wait-row { min-width:0; width:100%; }
.staff-v31-wait-row > * { min-width:0; overflow-wrap:anywhere; }
.staff-v32-feedback-row { min-width:0; }
.staff-v32-feedback-row > * { min-width:0; overflow-wrap:anywhere; }

/* Compact desktop layout on shorter screens while keeping controls readable. */
@media (min-width:1121px) and (max-height:900px) {
  .staff-v31-content { padding:14px 18px 22px; }
  .staff-v31-topbar h1 { font-size:27px; }
  .staff-v31-filters { margin-top:10px; }
  .staff-v31-service-stats { margin-top:10px; gap:9px; }
  .staff-v31-stat { min-height:106px; padding:13px; border-radius:15px; }
  .staff-v31-stat > b { font-size:42px; }
  .staff-v31-stat > i { width:42px; height:42px; font-size:24px; }
  .staff-v31-grid { margin-top:10px; gap:10px; }
  .staff-v31-maincol,.staff-v31-previewcol { gap:10px; }
  .staff-v31-current,.staff-v31-waiting,.staff-v32-feedback,.staff-v31-preview-card { padding:14px; }
  .staff-v31-current-body { min-height:150px; padding:14px; margin-top:10px; }
  .staff-v31-current-copy strong { font-size:clamp(58px,7vw,108px); }
  .staff-v31-action-grid { gap:7px; margin-top:8px; }
  .staff-action { min-height:58px; padding:8px 10px; }
  .staff-v32-feedback-feed { max-height:152px; overflow:auto; }
  #waitingList { max-height:260px; overflow:auto; }
}

@media (max-width:1320px) {
  .staff-v31-shell { grid-template-columns:82px minmax(0,1fr); }
  .staff-v31-sidebar { padding-inline:10px; }
  .staff-v31-side-brand img { content:url('/icons/bomby-queue-mark.svg'); width:55px; }
  .staff-v31-sidebar nav a { justify-content:center; padding:10px; font-size:0; }
  .staff-v31-sidebar nav a span { font-size:22px; }
  .staff-v31-system-card { display:none; }
  .staff-v31-grid { grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); }
}

@media (max-width:980px) {
  .staff-v31-grid { grid-template-columns:1fr; }
  .staff-v31-previewcol { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .staff-v31-service-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:760px) {
  html:has(body.staff-v31-body), body.staff-v31-body { height:auto; overflow:auto; }
  .staff-v31-shell { display:block; height:auto; min-height:100dvh; overflow:visible; }
  .staff-v31-content { height:auto; min-height:0; overflow:visible; padding:14px; }
  .staff-v31-sidebar { position:static; height:auto; overflow-x:auto; overflow-y:hidden; }
  .staff-v31-service-stats { grid-template-columns:1fr; }
  .staff-v31-previewcol { grid-template-columns:1fr; }
  .staff-v31-current-body { grid-template-columns:56px minmax(0,1fr); }
  .staff-v31-current-copy strong { font-size:clamp(54px,20vw,88px); letter-spacing:-3px; }
}

/* Admin/manage-queue tables must scroll inside their own card, not enlarge the page. */
.admin-v31-shell,.admin-v31-content,.admin-v31-card,.table-wrap { min-width:0; max-width:100%; }
.admin-v31-content { overflow-x:hidden; }
.admin-v31-card .table-wrap,.table-wrap { overflow-x:auto; overscroll-behavior-x:contain; }

/* BOMBY QUEUE V3.2.7 - staff customer alert reliability */
.staff-v321-sound-toggle.needs-unlock{border-color:rgba(255,191,71,.72)!important;color:#ffd37a!important;box-shadow:0 0 0 1px rgba(255,191,71,.12),0 0 18px rgba(255,191,71,.12)!important}
.staff-v327-sound-unlock{position:fixed;z-index:10020;left:50%;top:14px;transform:translateX(-50%);width:min(760px,calc(100vw - 28px));display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid rgba(255,191,71,.5);border-radius:16px;background:rgba(26,20,5,.96);box-shadow:0 18px 50px rgba(0,0,0,.42);backdrop-filter:blur(14px)}
.staff-v327-sound-unlock>div{display:flex;align-items:center;gap:12px;min-width:0}.staff-v327-sound-unlock .staff-v327-bell{font-size:28px}.staff-v327-sound-unlock strong{display:block;color:#fff2c8;font-size:15px}.staff-v327-sound-unlock small{display:block;color:#d9c99a;margin-top:2px;line-height:1.35}.staff-v327-sound-unlock .btn{white-space:nowrap}
.staff-v327-customer-alert{position:fixed;z-index:10030;right:22px;top:22px;width:min(430px,calc(100vw - 32px));display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;padding:16px 16px;border:1px solid rgba(53,211,242,.52);border-radius:18px;background:rgba(5,24,38,.97);box-shadow:0 22px 60px rgba(0,0,0,.5),0 0 28px rgba(53,211,242,.12);backdrop-filter:blur(16px);animation:staffV327AlertIn .22s ease-out}
.staff-v327-customer-alert .staff-v327-alert-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(53,211,242,.14);font-size:24px}.staff-v327-customer-alert small{display:block;color:#80dff0;font-weight:700}.staff-v327-customer-alert strong{display:block;color:#fff;font-size:18px;margin-top:2px}.staff-v327-customer-alert span:not(.staff-v327-alert-icon){display:block;color:#b9cad4;font-size:13px;margin-top:3px;line-height:1.35}.staff-v327-customer-alert>button{border:0;background:transparent;color:#9fb0bc;font-size:26px;line-height:1;cursor:pointer;padding:4px 6px}
.staff-v327-customer-alert.arrived{border-color:rgba(78,225,160,.58)}.staff-v327-customer-alert.arrived .staff-v327-alert-icon{background:rgba(78,225,160,.14)}.staff-v327-customer-alert.cancel{border-color:rgba(255,101,120,.62)}.staff-v327-customer-alert.cancel .staff-v327-alert-icon{background:rgba(255,101,120,.14)}.staff-v327-customer-alert.delay{border-color:rgba(255,191,71,.62)}.staff-v327-customer-alert.delay .staff-v327-alert-icon{background:rgba(255,191,71,.14)}
@keyframes staffV327AlertIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:820px){.staff-v327-sound-unlock{top:8px;align-items:stretch;flex-direction:column}.staff-v327-sound-unlock .btn{width:100%}.staff-v327-customer-alert{left:12px;right:12px;top:12px;width:auto}}


/* BOMBY QUEUE V3.3.3 - STAFF CUSTOMER MESSAGE: VISUAL ONLY */
.staff-v333-visual-mode{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid rgba(86,230,239,.28);border-radius:999px;color:#78eaf1;background:rgba(37,180,199,.08);font-size:12px;font-weight:800;white-space:nowrap}
.staff-v333-customer-message{position:fixed;inset:0;z-index:10040;display:grid;place-items:center;padding:24px;background:rgba(0,8,16,.82);backdrop-filter:blur(12px);animation:staffV333BackdropIn .18s ease-out}
.staff-v333-customer-message.hidden{display:none!important}
.staff-v333-message-card{position:relative;width:min(860px,94vw);min-height:min(590px,86vh);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:42px 42px 34px;border:2px solid rgba(70,218,242,.72);border-radius:34px;background:radial-gradient(circle at 50% 0%,rgba(39,176,208,.20),transparent 42%),linear-gradient(155deg,#0b2940,#061725 62%,#04111c);box-shadow:0 35px 100px rgba(0,0,0,.62),0 0 60px rgba(49,204,234,.17);animation:staffV333CardIn .22s cubic-bezier(.2,.9,.2,1)}
.staff-v333-message-close{position:absolute;right:22px;top:18px;width:48px;height:48px;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.06);color:#b8cad7;font-size:32px;line-height:1;cursor:pointer}
.staff-v333-message-icon{width:92px;height:92px;display:grid;place-items:center;border-radius:28px;background:rgba(67,213,237,.13);border:1px solid rgba(67,213,237,.34);font-size:48px;margin-bottom:14px}
.staff-v333-message-eyebrow{color:#7eeaf5;font-size:18px;font-weight:900;letter-spacing:.03em;text-transform:uppercase}
.staff-v333-message-queue{margin:10px 0 6px;color:#fff;font-size:clamp(72px,10vw,132px);line-height:.95;font-weight:1000;letter-spacing:-.055em;text-shadow:0 8px 35px rgba(0,0,0,.35)}
.staff-v333-message-title{color:#6be7f5;font-size:clamp(30px,4.1vw,52px);line-height:1.08;font-weight:950;margin:8px 0 10px}
.staff-v333-message-note{max-width:720px;color:#e5f3f7;font-size:clamp(18px,2.1vw,28px);line-height:1.35;font-weight:650;min-height:1.35em}
.staff-v333-message-time{margin-top:15px;color:#91aabb;font-size:15px;font-weight:700}
.staff-v333-message-ack{min-width:220px;margin-top:24px;font-size:20px!important;padding:14px 28px!important;border-radius:16px!important}
.staff-v333-customer-message.arrived .staff-v333-message-card{border-color:rgba(74,229,157,.8);box-shadow:0 35px 100px rgba(0,0,0,.62),0 0 70px rgba(74,229,157,.16)}
.staff-v333-customer-message.arrived .staff-v333-message-icon{background:rgba(74,229,157,.13);border-color:rgba(74,229,157,.36)}
.staff-v333-customer-message.arrived .staff-v333-message-title,.staff-v333-customer-message.arrived .staff-v333-message-eyebrow{color:#69efa9}
.staff-v333-customer-message.delay .staff-v333-message-card{border-color:rgba(255,194,70,.82);box-shadow:0 35px 100px rgba(0,0,0,.62),0 0 70px rgba(255,194,70,.14)}
.staff-v333-customer-message.delay .staff-v333-message-icon{background:rgba(255,194,70,.13);border-color:rgba(255,194,70,.38)}
.staff-v333-customer-message.delay .staff-v333-message-title,.staff-v333-customer-message.delay .staff-v333-message-eyebrow{color:#ffd06b}
.staff-v333-customer-message.cancel .staff-v333-message-card{border-color:rgba(255,94,117,.82);box-shadow:0 35px 100px rgba(0,0,0,.62),0 0 70px rgba(255,94,117,.16)}
.staff-v333-customer-message.cancel .staff-v333-message-icon{background:rgba(255,94,117,.13);border-color:rgba(255,94,117,.38)}
.staff-v333-customer-message.cancel .staff-v333-message-title,.staff-v333-customer-message.cancel .staff-v333-message-eyebrow{color:#ff8294}
@keyframes staffV333BackdropIn{from{opacity:0}to{opacity:1}}
@keyframes staffV333CardIn{from{opacity:0;transform:scale(.94) translateY(14px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media(max-width:700px){.staff-v333-customer-message{padding:12px}.staff-v333-message-card{width:100%;min-height:76vh;padding:34px 18px 26px;border-radius:26px}.staff-v333-message-icon{width:74px;height:74px;font-size:39px}.staff-v333-message-close{right:14px;top:12px}.staff-v333-message-ack{width:100%}.staff-v333-visual-mode{display:none}}

/* BOMBY QUEUE V3.4.0 - ADVANCE BOOKING */
.booking-v340-body{min-height:100dvh;margin:0;background:radial-gradient(circle at 70% -10%,rgba(27,164,205,.18),transparent 36%),linear-gradient(160deg,#06111f 0%,#071827 46%,#030b13 100%);color:#eefaff;font-family:"Kanit","Leelawadee UI",Tahoma,Arial,sans-serif}
.booking-v340-shell{width:min(1480px,calc(100% - 28px));margin:0 auto;padding:18px 0 48px}
.booking-v340-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 2px 18px}.booking-v340-back{color:#9ed5e3;text-decoration:none;font-weight:800;font-size:14px}.booking-v340-back:hover{color:#62ebf4}
.booking-v340-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;padding:26px 30px;border:1px solid rgba(63,207,235,.24);border-radius:28px;background:linear-gradient(135deg,rgba(7,29,47,.94),rgba(4,19,32,.86));box-shadow:0 22px 70px rgba(0,0,0,.28)}
.booking-v340-hero h1{font-size:clamp(34px,5vw,66px);line-height:1;margin:8px 0 10px;letter-spacing:-.04em}.booking-v340-hero p{margin:0;color:#9bb6c5;font-size:16px}.booking-v340-kicker{color:#62e9f3;font-weight:900;font-size:13px}
.booking-v340-steps{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.booking-v340-steps span{padding:9px 12px;border:1px solid rgba(112,198,221,.18);border-radius:999px;background:rgba(255,255,255,.025);color:#8da6b4;font-size:12px;font-weight:800;white-space:nowrap}.booking-v340-steps span.active{border-color:rgba(74,223,242,.5);color:#68ecf5;background:rgba(42,194,217,.1)}.booking-v340-steps i{color:#416474;font-style:normal}
.booking-v340-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,.62fr);gap:16px;margin-top:16px}.booking-v340-main,.booking-v340-side{display:grid;gap:16px;align-content:start}.booking-v340-card{border:1px solid rgba(76,183,212,.22);border-radius:24px;background:linear-gradient(155deg,rgba(8,31,50,.96),rgba(4,18,31,.94));box-shadow:0 18px 55px rgba(0,0,0,.24);padding:22px;min-width:0}.booking-v340-cardhead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.booking-v340-cardhead small{display:block;color:#55ddea;font-weight:900;margin-bottom:2px}.booking-v340-cardhead h2{margin:0;font-size:22px}.booking-v340-cardhead>span{color:#7796a6;font-size:12px;font-weight:800}
.booking-v340-services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.booking-v340-service{display:grid;grid-template-columns:48px minmax(0,1fr) 24px;gap:12px;align-items:center;text-align:left;border:1px solid rgba(106,174,195,.19);border-radius:18px;background:#071a2a;color:#eaf8fc;padding:14px;cursor:pointer;transition:.16s ease}.booking-v340-service>span{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:rgba(49,199,224,.1);color:#58e8f2;font-size:22px}.booking-v340-service strong{display:block;font-size:15px}.booking-v340-service small{display:block;color:#7796a6;margin-top:4px}.booking-v340-service>b{opacity:0;color:#63f1d0}.booking-v340-service:hover{transform:translateY(-1px);border-color:rgba(78,214,235,.42)}.booking-v340-service.selected{border-color:#42deee;background:linear-gradient(145deg,rgba(30,179,203,.17),rgba(7,30,48,.95));box-shadow:0 0 0 1px rgba(66,222,238,.18),0 0 30px rgba(52,198,221,.12)}.booking-v340-service.selected>b{opacity:1}
.booking-v340-dates{display:flex;gap:8px;overflow-x:auto;padding-bottom:5px;scrollbar-width:thin}.booking-v340-dates button{flex:0 0 76px;border:1px solid rgba(94,164,187,.18);border-radius:16px;background:#071a2a;color:#dceef5;padding:10px 8px;cursor:pointer}.booking-v340-dates small,.booking-v340-dates span{display:block;color:#718f9f;font-size:11px}.booking-v340-dates strong{display:block;font-size:24px;margin:2px 0}.booking-v340-dates button.selected{border-color:#4ae4f1;color:#fff;background:rgba(37,187,209,.15);box-shadow:0 0 25px rgba(48,207,230,.12)}.booking-v340-dates button.selected small,.booking-v340-dates button.selected span{color:#6fe9f2}
.booking-v340-slot-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 10px}.booking-v340-legend{display:flex;gap:10px;flex-wrap:wrap;color:#7e9aa9;font-size:11px}.booking-v340-legend span{display:inline-flex;align-items:center;gap:5px}.booking-v340-legend i{width:8px;height:8px;border-radius:50%;display:inline-block}.booking-v340-legend i.free{background:#56dfa1}.booking-v340-legend i.selected{background:#4ee4ef}.booking-v340-legend i.full{background:#ff6c86}
.booking-v340-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.booking-v340-slot{min-height:66px;border:1px solid rgba(86,160,184,.2);border-radius:15px;background:#071a2a;color:#ecfbff;cursor:pointer;padding:10px}.booking-v340-slot strong{display:block;font-size:18px}.booking-v340-slot small{display:block;color:#6ea3b2;margin-top:3px}.booking-v340-slot:hover:not(:disabled){border-color:rgba(75,225,239,.5)}.booking-v340-slot.selected{border-color:#49e3f0;background:rgba(36,182,205,.16);box-shadow:0 0 22px rgba(49,205,228,.12)}.booking-v340-slot.selected small{color:#6feaf3}.booking-v340-slot.full{opacity:.48;cursor:not-allowed}.booking-v340-slot.full small{color:#ff8395}.booking-v340-note{margin-top:12px;border:1px solid rgba(82,166,190,.14);border-radius:14px;background:rgba(38,141,170,.06);color:#86a9b8;padding:11px 13px;font-size:12px;line-height:1.45}
.booking-v340-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.booking-v340-form label{display:grid;gap:6px}.booking-v340-form label.wide{grid-column:1/-1}.booking-v340-form label>span{font-size:12px;color:#8fb0bf;font-weight:800}.booking-v340-form textarea.input{resize:vertical;min-height:86px}
.booking-v340-summary{position:sticky;top:16px}.booking-v340-summary dl{margin:0 0 18px}.booking-v340-summary dl>div{display:grid;grid-template-columns:84px 1fr;gap:10px;padding:13px 0;border-bottom:1px solid rgba(123,190,208,.1)}.booking-v340-summary dt{color:#7292a2;font-size:12px}.booking-v340-summary dd{margin:0;text-align:right;font-weight:900;color:#e9f9fc}.booking-v340-policy{display:block;color:#7896a5;line-height:1.45;margin-top:12px}.booking-v340-benefit{display:flex;gap:14px;align-items:flex-start}.booking-v340-benefit>span{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:rgba(40,201,224,.12);font-size:24px;color:#5de5ee}.booking-v340-benefit strong{display:block}.booking-v340-benefit p{color:#83a0af;line-height:1.55;margin:5px 0 0;font-size:13px}
.booking-v340-modal{position:fixed;inset:0;z-index:11000;display:grid;place-items:center;padding:18px;background:rgba(0,8,14,.84);backdrop-filter:blur(14px)}.booking-v340-modal.hidden{display:none!important}.booking-v340-success-card{width:min(520px,96vw);padding:34px;text-align:center;border:1px solid rgba(71,231,238,.58);border-radius:30px;background:radial-gradient(circle at 50% 0%,rgba(32,197,211,.2),transparent 42%),#071a2a;box-shadow:0 35px 100px rgba(0,0,0,.62),0 0 55px rgba(48,209,229,.14)}.booking-v340-check{width:74px;height:74px;display:grid;place-items:center;margin:0 auto 12px;border:2px solid #55f0d2;border-radius:50%;color:#55f0d2;font-size:40px;font-weight:1000}.booking-v340-success-card>small{color:#63e5ef;font-weight:900}.booking-v340-success-card h2{font-size:20px;margin:6px 0}.booking-v340-success-card>strong{display:block;font-size:clamp(42px,9vw,68px);color:#5cebf3;letter-spacing:.04em;margin:8px 0}.booking-v340-qr{width:206px;min-height:206px;margin:12px auto;padding:8px;border-radius:18px;background:#fff;display:grid;place-items:center}.booking-v340-qr canvas,.booking-v340-qr img{max-width:190px!important;max-height:190px!important}.booking-v340-success-card p{color:#9cb5c2;line-height:1.45}.booking-v340-success-actions{display:flex;gap:10px;justify-content:center;margin-top:16px}.booking-v340-build{position:fixed;right:8px;bottom:6px;z-index:100;font:800 10px/1 "Kanit","Leelawadee UI",Tahoma,Arial,sans-serif;color:#56e6ef;background:#071827d9;padding:4px 7px;border-radius:7px;pointer-events:none}
.staff-v340-bookings .staff-v31-card-title{margin-bottom:12px}.staff-v340-booking-list{display:grid;gap:8px;max-height:300px;overflow:auto}.staff-v340-booking-row{display:grid;grid-template-columns:84px 100px minmax(130px,1fr) minmax(110px,.8fr) auto;gap:10px;align-items:center;padding:11px 12px;border:1px solid rgba(90,170,194,.15);border-radius:14px;background:#071a2a}.staff-v340-booking-row .time{color:#5ce6ef;font-size:17px;font-weight:950}.staff-v340-booking-row .code{font-weight:950}.staff-v340-booking-row .name{min-width:0}.staff-v340-booking-row .name strong,.staff-v340-booking-row .name small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.staff-v340-booking-row .name small{color:#7796a6;margin-top:2px}.staff-v340-booking-row .service{color:#97b3c0;font-size:12px}.staff-v340-booking-row.is-checked{opacity:.62}.staff-v340-booking-row .btn{white-space:nowrap}
@media(max-width:1000px){.booking-v340-layout{grid-template-columns:1fr}.booking-v340-summary{position:static}.booking-v340-hero{align-items:flex-start;flex-direction:column}.booking-v340-steps{justify-content:flex-start}.staff-v340-booking-row{grid-template-columns:72px 90px 1fr auto}.staff-v340-booking-row .service{display:none}}
@media(max-width:700px){.booking-v340-shell{width:min(100% - 16px,1480px);padding-top:8px}.booking-v340-header{padding-inline:4px}.booking-v340-header .brand-v3-copy span{display:none}.booking-v340-hero{padding:20px;border-radius:22px}.booking-v340-steps span{font-size:10px;padding:7px 9px}.booking-v340-services{grid-template-columns:1fr}.booking-v340-slots{grid-template-columns:repeat(2,minmax(0,1fr))}.booking-v340-form{grid-template-columns:1fr}.booking-v340-card{padding:16px;border-radius:20px}.booking-v340-cardhead{align-items:flex-start}.booking-v340-cardhead>span{display:none}.booking-v340-success-actions{flex-direction:column}.staff-v340-booking-row{grid-template-columns:66px 80px 1fr}.staff-v340-booking-row .service,.staff-v340-booking-row .btn{grid-column:1/-1}.staff-v340-booking-row .btn{width:100%}}

.booking-v340-customer-link{text-decoration:none!important;box-sizing:border-box}