/* ═══════════════════════════════════════════════════════════════
   Zalo Scheduler SaaS — Premium Dark Design
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --bg:       #07090f;
  --bg1:      #0d1117;
  --bg2:      #131929;
  --bg3:      #1a2235;
  --border:   rgba(255,255,255,0.07);
  --border2:  rgba(255,255,255,0.12);

  --c-purple: #6366f1;
  --c-violet: #8b5cf6;
  --c-cyan:   #06b6d4;
  --c-green:  #10b981;
  --c-amber:  #f59e0b;
  --c-red:    #ef4444;

  --grad:     linear-gradient(135deg, #6366f1, #8b5cf6);
  --grad-glow:0 0 40px rgba(99,102,241,.3);

  --text:     #e8edf5;
  --c-muted:  #64748b;
  --c-sub:    #94a3b8;

  --sidebar-w: 230px;
  --topbar-h:  64px;
  --r:         10px;
  --r2:        16px;
  --trans:     0.18s ease;
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; overflow:hidden; }
body { font-family:'Inter',-apple-system,sans-serif; font-size:14px; background:var(--bg); color:var(--text); }
a { text-decoration:none; color:inherit; }
button { font-family:inherit; cursor:pointer; }
input,textarea,select { font-family:inherit; }
textarea { resize:vertical; }

/* ═══════════════════════════════════════════════════════════════
   AUTH PAGE
   ═══════════════════════════════════════════════════════════════ */
.auth-page {
  height:100vh; width:100vw;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); position:relative; overflow:hidden;
}
.auth-bg { position:absolute; inset:0; pointer-events:none; }
.auth-orb {
  position:absolute; border-radius:50%;
  filter:blur(80px); opacity:.35;
  animation:orb 8s ease-in-out infinite alternate;
}
.orb1 { width:500px;height:500px; background:var(--c-purple); top:-200px; left:-150px; animation-delay:0s; }
.orb2 { width:400px;height:400px; background:var(--c-violet); bottom:-150px; right:-100px; animation-delay:-3s; }
.orb3 { width:300px;height:300px; background:var(--c-cyan);   top:50%;   right:20%; animation-delay:-6s; opacity:.2; }
@keyframes orb { from { transform:scale(1) translate(0,0); } to { transform:scale(1.1) translate(20px,-20px); } }

.auth-card {
  width:100%; max-width:400px; position:relative; z-index:1;
  background:rgba(13,17,23,.85);
  border:1px solid var(--border2);
  border-radius:24px; padding:40px;
  backdrop-filter:blur(24px);
  box-shadow:0 32px 64px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
}

.auth-logo {
  width:64px; height:64px; border-radius:20px; margin:0 auto 20px;
  background:var(--bg3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}

.auth-title { text-align:center; font-size:22px; font-weight:700; }
.auth-sub   { text-align:center; color:var(--c-muted); font-size:13px; margin:6px 0 24px; }

.auth-tabs {
  display:flex; background:var(--bg2); border-radius:var(--r); padding:4px; gap:4px; margin-bottom:24px;
}
.auth-tab {
  flex:1; padding:8px; border:none; background:none; color:var(--c-muted);
  border-radius:7px; font-size:13px; font-weight:500; transition:var(--trans);
}
.auth-tab.active { background:var(--bg3); color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.3); }

.auth-error { text-align:center; color:var(--c-red); font-size:13px; margin-top:12px; min-height:18px; }

/* ═══════════════════════════════════════════════════════════════
   APP LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.app-page { display:flex; height:100vh; overflow:hidden; }

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0; height:100%;
  background:var(--bg1); border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden;
}

.sidebar-header {
  display:flex; align-items:center; gap:10px;
  padding:18px 16px 12px; font-weight:700; font-size:15px;
  border-bottom:1px solid var(--border);
}
.sidebar-brand { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

.zalo-pill {
  margin:10px 12px; padding:8px 12px; border-radius:8px;
  background:var(--bg2); border:1px solid var(--border);
  display:flex; align-items:center; gap:8px; cursor:pointer;
  transition:var(--trans); font-size:12px; color:var(--c-sub);
}
.zalo-pill:hover { border-color:var(--border2); }

.dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dot.online  { background:var(--c-green); box-shadow:0 0 6px var(--c-green); }
.dot.offline { background:var(--c-muted); }
.dot.connecting { background:var(--c-amber); animation:pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.nav { flex:1; overflow-y:auto; padding:8px 8px; display:flex; flex-direction:column; gap:2px; }
.nav-item {
  display:flex; align-items:center; gap:10px; padding:9px 10px;
  border-radius:8px; color:var(--c-muted); font-size:13px; font-weight:500;
  transition:var(--trans); position:relative;
}
.nav-item svg { width:18px; height:18px; fill:currentColor; flex-shrink:0; }
.nav-item:hover { background:var(--bg2); color:var(--text); }
.nav-item.active { background:rgba(99,102,241,.12); color:var(--c-purple); }
.nav-item.active svg { fill:var(--c-purple); }

.badge {
  margin-left:auto; background:var(--c-purple); color:#fff;
  font-size:11px; font-weight:600; padding:1px 6px; border-radius:99px;
}
.nav-sep { height:1px; background:var(--border); margin:6px 0; }

.sidebar-footer {
  padding:12px; border-top:1px solid var(--border);
  display:flex; align-items:center; gap:8px;
}
.user-chip { flex:1; display:flex; align-items:center; gap:8px; overflow:hidden; }
.user-avatar {
  width:30px; height:30px; border-radius:8px;
  background:var(--grad); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; flex-shrink:0;
}
#usernameSidebar { font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.btn-icon-sm {
  width:30px; height:30px; border:none; background:var(--bg2);
  border-radius:6px; color:var(--c-muted); display:flex; align-items:center; justify-content:center;
  transition:var(--trans);
}
.btn-icon-sm:hover { background:var(--bg3); color:var(--c-red); }

/* ── Main ────────────────────────────────────────────────── */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; }

.topbar {
  height:var(--topbar-h); border-bottom:1px solid var(--border);
  padding:0 24px; display:flex; align-items:center; justify-content:space-between;
  background:var(--bg1); flex-shrink:0;
}
.page-title { font-size:18px; font-weight:700; }
.page-sub   { font-size:12px; color:var(--c-muted); margin-top:2px; }
.topbar-time { font-size:13px; color:var(--c-muted); }
.topbar-right { display:flex; align-items:center; gap:12px; }

/* ── Pages ───────────────────────────────────────────────── */
.page { display:none; flex:1; overflow-y:auto; padding:24px; }
.page.active { display:block; }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background:var(--bg1); border:1px solid var(--border);
  border-radius:var(--r2); padding:20px; margin-bottom:16px;
}
.card-head {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;
}
.card-head h3, .card-h3 { font-size:15px; font-weight:600; margin-bottom:16px; }
.card-head h3 { margin-bottom:0; }

/* ── Stats Grid ──────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.stat-card {
  border-radius:var(--r2); padding:20px; position:relative; overflow:hidden;
  border:1px solid var(--border);
}
.stat-card::before { content:''; position:absolute; inset:0; opacity:.06; border-radius:inherit; }
.stat-card.purple::before { background:var(--c-purple); }
.stat-card.amber::before  { background:var(--c-amber); }
.stat-card.green::before  { background:var(--c-green); }
.stat-card.red::before    { background:var(--c-red); }
.stat-card.purple { background:rgba(99,102,241,.08); border-color:rgba(99,102,241,.2); }
.stat-card.amber  { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.2); }
.stat-card.green  { background:rgba(16,185,129,.08); border-color:rgba(16,185,129,.2); }
.stat-card.red    { background:rgba(239,68,68,.08);  border-color:rgba(239,68,68,.2); }
.stat-icon { font-size:22px; margin-bottom:8px; }
.stat-val  { font-size:32px; font-weight:800; line-height:1; }
.stat-lbl  { font-size:12px; color:var(--c-sub); margin-top:4px; }
.stat-card.purple .stat-val { color:var(--c-purple); }
.stat-card.amber .stat-val  { color:var(--c-amber); }
.stat-card.green .stat-val  { color:var(--c-green); }
.stat-card.red .stat-val    { color:var(--c-red); }

/* ── Upcoming List ───────────────────────────────────────── */
.upcoming-list { display:flex; flex-direction:column; gap:8px; }
.upcoming-item {
  display:grid; grid-template-columns:140px 1fr auto;
  gap:12px; align-items:center; padding:10px 14px;
  background:var(--bg2); border-radius:8px; border:1px solid var(--border);
}
.upcoming-time { font-size:12px; color:var(--c-sub); }
.upcoming-name { font-weight:500; font-size:13px; }
.upcoming-msg  { font-size:12px; color:var(--c-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Form ────────────────────────────────────────────────── */
.form-card { max-width:700px; }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label { font-size:13px; font-weight:500; color:var(--c-sub); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }
/* ── Contact Picker (searchable dropdown) ── */
.contact-picker { position: relative; }

.contact-search-wrap { position: relative; }
.contact-search-wrap .input { width: 100%; padding-right: 32px; }

/* X clear button inside input */
.contact-clear-btn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--c-muted); font-size: 16px; line-height: 1;
  display: none; padding: 2px 4px;
  transition: color .15s;
}
.contact-clear-btn:hover { color: var(--c-red, #ef4444); }
.contact-clear-btn.visible { display: block; }

.contact-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #131929;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.7);
  max-height: 280px; overflow-y: auto;
  z-index: 200;
  animation: dropIn .12s ease;
}
@keyframes dropIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

.contact-option {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; cursor: pointer;
  transition: background .1s;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.contact-option:last-child { border-bottom: none; }
.contact-option:hover, .contact-option.focused { background: rgba(99,102,241,.18); }
.contact-option-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.contact-option-info { flex: 1; min-width: 0; }
.contact-option-name {
  font-size: 13px; font-weight: 600; color: #e8edf5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.contact-option-type { font-size: 11px; color: #64748b; margin-top: 1px; }
.contact-option-mark { font-size: 12px; color: #6366f1; font-weight: 700; flex-shrink: 0; }

.contact-empty { padding: 20px; text-align: center; color: #64748b; font-size: 13px; }

.template-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }

.tpl-pill {
  padding:4px 10px; border-radius:99px; font-size:12px; cursor:pointer;
  background:rgba(99,102,241,.12); color:var(--c-purple); border:1px solid rgba(99,102,241,.2);
  transition:var(--trans);
}
.tpl-pill:hover { background:rgba(99,102,241,.22); }

/* ── Table ───────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; border-radius:8px; border:1px solid var(--border); }
.table { width:100%; border-collapse:collapse; }
.table th { background:var(--bg2); padding:10px 14px; font-size:12px; font-weight:600; color:var(--c-sub); text-align:left; white-space:nowrap; }
.table td { padding:10px 14px; font-size:13px; border-top:1px solid var(--border); }
.table tr:hover td { background:rgba(255,255,255,.02); }

.filter-row { display:flex; gap:6px; }

/* ── Contacts Grid ───────────────────────────────────────── */
.contacts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.contact-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:10px;
  padding:14px; display:flex; align-items:center; gap:10px; transition:var(--trans);
}
.contact-card:hover { border-color:var(--border2); }
.c-avatar {
  width:38px; height:38px; border-radius:10px; background:var(--grad);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0;
}
.c-info h4 { font-size:13px; font-weight:600; }
.c-info p  { font-size:11px; color:var(--c-muted); margin-top:2px; }
.c-actions { margin-left:auto; }

/* ── Templates Grid ──────────────────────────────────────── */
.templates-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
.tpl-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:10px;
  padding:16px; cursor:pointer; transition:var(--trans); position:relative;
}
.tpl-card:hover { border-color:var(--c-purple); background:rgba(99,102,241,.06); }
.tpl-card h4 { font-size:13px; font-weight:600; margin-bottom:6px; }
.tpl-card p  { font-size:12px; color:var(--c-muted); line-height:1.6; }
.tpl-del { position:absolute; top:10px; right:10px; background:none; border:none; color:var(--c-muted); font-size:14px; cursor:pointer; padding:2px 6px; border-radius:4px; }
.tpl-del:hover { color:var(--c-red); background:rgba(239,68,68,.1); }

/* ── Settings ────────────────────────────────────────────── */
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.zalo-status-row { display:flex; align-items:center; gap:8px; margin-bottom:16px; font-size:14px; }

.qr-box {
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  min-height:180px; display:flex; align-items:center; justify-content:center; padding:20px;
}
.qr-placeholder { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; color:var(--c-muted); font-size:13px; }
.qr-loading { display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--c-sub); font-size:13px; }
.qr-img { max-width:200px; border-radius:8px; }
.details-block { margin-top:20px; }
.details-block summary { cursor:pointer; font-size:14px; font-weight:500; color:var(--c-sub); }
.info-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); font-size:13px; }
.info-row span:first-child { color:var(--c-sub); }
.chip-green { background:rgba(16,185,129,.12); color:var(--c-green); padding:2px 8px; border-radius:99px; font-size:12px; }
.divider { border:none; border-top:1px solid var(--border); margin:16px 0; }

/* ── Inputs ──────────────────────────────────────────────── */
.input {
  background:var(--bg2); border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:9px 12px; font-size:14px; width:100%; outline:none;
  transition:var(--trans);
}
.input:focus { border-color:var(--c-purple); box-shadow:0 0 0 3px rgba(99,102,241,.15); }
select.input { cursor:pointer; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary {
  padding:9px 20px; border:none; border-radius:8px;
  background:var(--grad); color:#fff; font-size:14px; font-weight:600;
  cursor:pointer; transition:var(--trans);
}
.btn-primary:hover { opacity:.88; transform:translateY(-1px); box-shadow:var(--grad-glow); }
.btn-primary:active { transform:translateY(0); }
.btn-primary.full { width:100%; padding:12px; }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; }

.btn-ghost-sm {
  padding:6px 14px; border:1px solid var(--border); border-radius:7px;
  background:none; color:var(--c-sub); font-size:13px; font-weight:500; cursor:pointer; transition:var(--trans);
}
.btn-ghost-sm:hover { background:var(--bg2); color:var(--text); border-color:var(--border2); }

.btn-danger {
  padding:8px 16px; border:1px solid rgba(239,68,68,.3); border-radius:8px;
  background:rgba(239,68,68,.08); color:var(--c-red); font-size:13px; font-weight:500; cursor:pointer; transition:var(--trans);
}
.btn-danger:hover { background:rgba(239,68,68,.15); }

.chip {
  padding:4px 12px; border-radius:99px; font-size:12px; font-weight:500; cursor:pointer;
  background:none; border:1px solid var(--border); color:var(--c-muted); transition:var(--trans);
}
.chip.active, .chip:hover { background:rgba(99,102,241,.12); color:var(--c-purple); border-color:rgba(99,102,241,.3); }

/* ── Status Pills ────────────────────────────────────────── */
.pill {
  display:inline-flex; align-items:center; gap:4px; padding:3px 9px;
  border-radius:99px; font-size:12px; font-weight:500;
}
.pill.pending  { background:rgba(245,158,11,.1); color:var(--c-amber); }
.pill.sending  { background:rgba(6,182,212,.1);  color:var(--c-cyan); }
.pill.sent     { background:rgba(16,185,129,.1); color:var(--c-green); }
.pill.failed   { background:rgba(239,68,68,.1);  color:var(--c-red); }

/* ── Spinner ─────────────────────────────────────────────── */
.spinner {
  width:32px; height:32px; border:3px solid var(--border);
  border-top-color:var(--c-purple); border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Empty ───────────────────────────────────────────────── */
.empty { text-align:center; color:var(--c-muted); padding:40px 20px; font-size:13px; }
.empty a { color:var(--c-purple); }

/* ── Toast ───────────────────────────────────────────────── */
.toasts { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:var(--bg3); border:1px solid var(--border2); border-radius:10px;
  font-size:13px; max-width:340px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  animation:slideIn .25s ease;
}
.toast.out { animation:slideOut .25s ease forwards; }
.toast.success { border-color:rgba(16,185,129,.3); }
.toast.error   { border-color:rgba(239,68,68,.3); }
.toast.warning { border-color:rgba(245,158,11,.3); }
@keyframes slideIn  { from { transform:translateX(110%); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes slideOut { from { transform:translateX(0);    opacity:1; } to { transform:translateX(110%); opacity:0; } }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:99px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .settings-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}

/* ── Desktop defaults: hide mobile-only elements ──
   MUST be before @media (max-width: 640px) so mobile can override */
.bottom-nav         { display: none; }
.queue-cards-mobile { display: none; }

/* ════════════════════════════════════════════════════════════
   MOBILE  (≤ 640px) — Bottom-nav layout like a mobile app
   ════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Global tweaks ── */
  :root {
    --topbar-h: 52px;
    --bn-h: 62px;
  }
  /* Auth page: allow scroll so QR code fits */
  .auth-page {
    align-items: flex-end; padding-bottom: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .auth-card {
    width: 100%; max-width: 100%;
    border-radius: 24px 24px 0 0;
    padding: 28px 20px 36px;
    min-height: auto;
  }
  .orb1, .orb2, .orb3 { filter: blur(60px); opacity: .2; }

  /* ── App layout: sidebar gone, bottom-nav added ── */
  .app-page {
    flex-direction: row;
    height: 100vh;
    overflow: hidden;
  }
  .sidebar { display: none !important; }

  /* ── Bottom Navigation ── */
  .bottom-nav {
    display: flex !important;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--bn-h);
    background: var(--bg1);
    border-top: 1px solid var(--border);
    z-index: 500;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bn-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px; padding: 6px 4px;
    color: var(--c-muted); font-size: 10px; font-weight: 500;
    text-decoration: none; position: relative;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .bn-item svg { width: 22px; height: 22px; fill: currentColor; }
  .bn-item.active { color: var(--c-purple); }
  .bn-item.active svg { fill: var(--c-purple); }
  .bn-item.active::before {
    content: ''; position: absolute; top: 0; left: 20%; right: 20%;
    height: 2px; background: var(--c-purple); border-radius: 0 0 3px 3px;
  }
  .bn-badge {
    position: absolute; top: 5px; right: calc(50% - 18px);
    background: var(--c-purple); color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 1px 5px; border-radius: 99px; min-width: 16px; text-align: center;
  }

  /* ── Topbar ── */
  .topbar {
    height: var(--topbar-h);
    padding: 0 14px;
    position: sticky; top: 0; z-index: 100;
  }
  .page-title { font-size: 16px; }
  .page-sub   { font-size: 11px; }
  .topbar-time { font-size: 11px; }

  /* Zalo status pill in topbar (mobile) */
  .mobile-zalo-pill {
    display: flex !important;
    padding: 4px 10px; border-radius: 20px;
    background: var(--bg2); border: 1px solid var(--border);
    font-size: 11px; gap: 5px; align-items: center;
    cursor: pointer;
  }
  /* Hide the dot dot label — just show icon + dot */
  #zaloLabelMobile { display: none; }

  /* ── Main content area ── */
  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--bn-h));
    overflow: hidden;
  }
  .page {
    display: none;
    padding: 14px 12px 80px;   /* 80px = bottom-nav + extra breathing room */
    height: calc(100vh - var(--topbar-h) - var(--bn-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .page.active { display: block; }

  /* ── Stats ── */
  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 12px; }
  .stat-card  { padding: 14px 12px; }
  .stat-icon  { font-size: 18px; margin-bottom: 4px; }
  .stat-val   { font-size: 26px; }
  .stat-lbl   { font-size: 11px; }

  /* ── Cards ── */
  .card { padding: 14px 12px; border-radius: 12px; margin-bottom: 12px; }
  .card-head { margin-bottom: 12px; }
  .card-head h3, .card-h3 { font-size: 14px; }

  /* ── Upcoming list ── */
  .upcoming-item {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 8px;
  }
  .upcoming-time { grid-column: 1; grid-row: 2; font-size: 11px; }
  .upcoming-name { font-size: 13px; }

  /* ── Forms ── */
  .field-row { grid-template-columns: 1fr; gap: 10px; }
  .input {
    font-size: 16px !important; /* prevent iOS zoom on focus */
    padding: 11px 12px;
    border-radius: 10px;
  }
  textarea.input { font-size: 15px !important; }
  .btn-primary, .btn-ghost {
    padding: 12px 18px; font-size: 14px;
    border-radius: 10px; min-height: 46px;
  }
  .btn-primary.full { width: 100%; }
  .form-actions { flex-direction: column; }
  .form-actions button { width: 100%; }

  /* ── Contact picker dropdown ── */
  .contact-dropdown { max-height: 200px; }
  .contact-option   { padding: 12px 12px; }

  /* ── Template pills ── */
  .tpl-pill { font-size: 12px; padding: 6px 12px; }

  .queue-cards-mobile { display: flex !important; flex-direction: column; gap: 10px; }
  .table-wrap         { display: none !important; }

  .qcard {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
  }
  .qcard-top {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px 8px;
  }
  .qcard-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #fff;
  }
  .qcard-info { flex: 1; min-width: 0; }
  .qcard-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .qcard-time { font-size: 11px; color: var(--c-muted); margin-top: 2px; }
  .qcard-msg {
    font-size: 13px; color: var(--c-sub);
    padding: 0 14px 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
  }
  .qcard-footer {
    display: flex; justify-content: flex-end;
    padding: 8px 12px;
  }
  .qcard-del {
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.25);
    color: var(--c-red); border-radius: 8px;
    font-size: 12px; padding: 6px 14px;
    min-height: 36px;
  }

  /* ── Contact table → card style ── */
  table { display: none; }    /* hide desktop table */
  .contact-cards { display: flex !important; flex-direction: column; gap: 8px; }
  .contact-card-m {
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: 10px; padding: 12px 14px;
    display: flex; align-items: center; gap: 12px;
  }
  .contact-card-m-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--grad); display: flex; align-items: center;
    justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0;
  }
  .contact-card-m-info { flex: 1; min-width: 0; }
  .contact-card-m-name { font-weight: 600; font-size: 13px; }
  .contact-card-m-type { font-size: 11px; color: var(--c-muted); margin-top: 2px; }
  .contact-card-m-del  { color: var(--c-red); background: none; border: none; font-size: 18px; padding: 4px 8px; }

  /* ── Settings ── */
  .settings-grid { grid-template-columns: 1fr; gap: 12px; }

  /* ── QR section ── */
  .qr-img { width: 180px !important; height: 180px !important; }

  /* ── Admin user list ── */
  .admin-user-item {
    flex-direction: column; align-items: flex-start; gap: 6px;
  }
  .admin-user-item button { width: 100%; }

  /* ── Toast ── */
  .toasts { bottom: calc(var(--bn-h) + 8px); right: 10px; left: 10px; }
  .toast  { max-width: 100%; }
}