@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* SMM24x7 brand kit — logo blue + lime green.
     Two-shade blue so colour passes WCAG AA in BOTH roles:
     --brand-blue (#2ba5ff) is the vibrant logo accent (focus ring, gradient,
     active highlights, big icons); --primary (#1577c5) is the accessible
     "action" blue used for buttons, links and coloured text on light
     surfaces (4.7:1 on white either as fg or bg). Lime is an accent/fill
     only — never small text (use --brand-green-ink for green text). */
  --brand-blue: #2ba5ff;
  --brand-blue-deep: #1577c5;
  --brand-green: #9be80f;
  --brand-green-ink: #4f7a00;
  --grad-brand: linear-gradient(135deg, #2ba5ff 0%, #9be80f 100%);
  --brand-ink: #0F172A;          /* legacy alias — dark text */
  --brand-page: #F6F8FB;         /* legacy alias — page bg */
  --brand-linen: #EEF2F7;
  --brand-slate: #64748B;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --bg: #F6F8FB;
  --bg-soft: #EEF2F7;
  --bg-muted: #E3E9F1;
  --surface: #ffffff;
  /* --card / --card-bg are legacy aliases used by several admin
     components (action menus, drag handles, sticky thead chrome,
     modal cards). Pointing them at --surface guarantees those
     components paint correctly in dark mode — previously
     `var(--card, #fff)` fell through to white because --card was
     never defined for either theme. */
  --card: var(--surface);
  --card-bg: var(--surface);
  --border: #E2E8F0;
  --border-soft: #EEF2F6;
  --text: #0F172A;
  --text-dim: #334155;
  --text-muted: #64748B;
  --primary: #1577c5;
  --primary-hover: #0f63a8;
  --primary-soft: rgba(43, 165, 255, 0.12);
  --accent: var(--primary);
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --warn: #ea580c;
  --warn-soft: #ffedd5;
  --info: #0284c7;
  --info-soft: #dbeafe;
  --success: #16a34a;
  --success-soft: rgba(22, 163, 74, 0.12);
  --sidebar: #0e1b2e;
  --sidebar-hover: #16263d;
  --sidebar-text: #C7D2DD;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(15, 23, 42, 0.05);
  --shadow-brand: 0 10px 24px -8px rgba(43, 165, 255, 0.38);
  --shadow-glow: 0 0 0 4px var(--primary-soft);
  --ring: 0 0 0 3px rgba(43, 165, 255, 0.32);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
}

/* ===== Dark theme ===== */
html[data-theme="dark"] {
  --bg: #0b1220;
  --bg-soft: #0f172a;
  --bg-muted: #1e293b;
  --surface: #111827;
  /* See note on --card / --card-bg in :root — explicit alias here so
     dark-mode dropdowns / cards inherit the proper dark surface
     instead of falling back to white. */
  --card: var(--surface);
  --card-bg: var(--surface);
  --border: #1f2a3c;
  --border-soft: #1e293b;
  --text: #f1f5f9;
  --text-dim: #cbd5e1;
  --text-muted: #64748b;
  --primary-soft: rgba(43, 165, 255, 0.20);
  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, 0.18);
  --warn-soft: rgba(234, 88, 12, 0.2);
  --danger-soft: rgba(220, 38, 38, 0.2);
  --info-soft: rgba(2, 132, 199, 0.2);
  --sidebar: #060b16;
  --sidebar-hover: #111827;
  --sidebar-text: #cbd5e1;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html, body { overflow-x: hidden; max-width: 100vw; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s, color 0.2s;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }

/* ===== Accessibility & polish (UI/UX Pro Max pass) ===== */
/* Visible keyboard focus on interactive elements that lack their own focus
   style (buttons/links). Inputs keep their box-shadow ring — their higher-
   specificity `:focus { outline:none }` wins, so no double ring. */
:where(a, button, .btn, [tabindex], [role="button"], .switch input):focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Tabular figures so prices / counts / IDs stay column-aligned and don't
   jitter as values change. */
table, td, th, .num, .price, .stat-value, .svc-price-sell { font-variant-numeric: tabular-nums; }
/* On-brand text selection. */
::selection { background: var(--primary-soft); color: var(--text); }

/* ===== Buttons ===== */
.btn, button {
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--primary);
  color: #fff;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s var(--ease-smooth), color 0.2s var(--ease-smooth);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
  will-change: transform;
}
.btn:hover, button:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand);
}
.btn:active, button:active { transform: translateY(0) scale(0.98); transition-duration: 0.08s; }
.btn.ghost, button.ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.btn.ghost:hover, button.ghost:hover { background: var(--bg-soft); color: var(--text); }
.btn.dark, button.dark { background: var(--text); color: var(--bg); }
.btn.dark:hover, button.dark:hover { background: var(--text-dim); }
.btn.danger, button.danger { background: var(--danger); }
.btn.danger:hover, button.danger:hover { background: #b91c1c; }
.btn.lg, button.lg { padding: 14px 28px; font-size: 16px; border-radius: 12px; }
.btn.sm, button.sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.btn.block, button.block { width: 100%; }

/* Shimmer effect on primary button */
.btn.lg::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.55s ease;
}
.btn.lg:hover::after { left: 100%; }

/* ===== Inputs ===== */
input, select, textarea {
  font-family: inherit;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}
input[disabled], input[readonly] { background: var(--bg-soft); color: var(--text-dim); }
input[type="checkbox"] { width: auto; }

label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--text-dim); }
.field { margin-bottom: 16px; }

/* ===== Layout helpers ===== */
.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.muted { color: var(--text-muted); font-size: 13px; }
.dim { color: var(--text-dim); }

/* ===== Cards ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.25s var(--ease-smooth);
  animation: cardFadeIn 0.55s var(--ease) backwards;
}
.card h3 { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.card:hover { box-shadow: var(--shadow); }

@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Stagger card entrance when in a grid */
.grid > .card:nth-child(1), .grid > .stat:nth-child(1) { animation-delay: 0.02s; }
.grid > .card:nth-child(2), .grid > .stat:nth-child(2) { animation-delay: 0.06s; }
.grid > .card:nth-child(3), .grid > .stat:nth-child(3) { animation-delay: 0.10s; }
.grid > .card:nth-child(4), .grid > .stat:nth-child(4) { animation-delay: 0.14s; }
.grid > .card:nth-child(5), .grid > .stat:nth-child(5) { animation-delay: 0.18s; }
.grid > .card:nth-child(6), .grid > .stat:nth-child(6) { animation-delay: 0.22s; }
.grid > .card:nth-child(7), .grid > .stat:nth-child(7) { animation-delay: 0.26s; }
.grid > .card:nth-child(8), .grid > .stat:nth-child(8) { animation-delay: 0.30s; }

/* ===== Badges ===== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-muted);
  color: var(--text-dim);
  white-space: nowrap;
}
.badge.ok { background: var(--primary-soft); color: #15803d; }
.badge.warn { background: var(--warn-soft); color: #c2410c; }
.badge.err { background: var(--danger-soft); color: #b91c1c; }
.badge.info { background: var(--info-soft); color: #1e40af; }
html[data-theme="dark"] .badge.ok { color: #86efac; }
html[data-theme="dark"] .badge.warn { color: #fdba74; }
html[data-theme="dark"] .badge.err { color: #fca5a5; }
html[data-theme="dark"] .badge.info { color: #93c5fd; }

/* ===== Tables ===== */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
th { color: var(--text-muted); font-weight: 500; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; background: var(--bg-soft); }
tbody tr { transition: background 0.1s; }
tbody tr:hover td { background: var(--bg-soft); }
/* Edge-bleed for a table that is the card's sole body: pull it out to
   the card edges so the header band/rows run full-width, then restore
   first/last-cell padding to align with the card's content.
   Scoped to DIRECT children only (`.card > table`) — a table wrapped in
   an inner scroll container (`<div style="overflow-x:auto">`, used by
   many admin tables) must NOT get the negative margin: inside a
   padding:0 card the -22px top margin pulls the header up out of the
   card (clipped by overflow:hidden) and the wrapper's computed
   overflow-y:auto adds a stray vertical scrollbar. */
.card > table { margin: -22px; width: calc(100% + 44px); }
.card > table th:first-child, .card > table td:first-child { padding-left: 22px; }
.card > table th:last-child, .card > table td:last-child { padding-right: 22px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===== Nav / Shell ===== */
.nav {
  background: var(--sidebar);
  color: var(--sidebar-text);
  padding: 20px 0;
  height: 100vh;
  width: 240px;
  position: fixed;
  left: 0; top: 0;
  overflow-y: auto;
  border-right: 1px solid rgba(0,0,0,0.5);
  transition: transform 0.22s ease;
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.nav h1 {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  padding: 0 22px 18px;
  margin: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 10px;
}
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  color: var(--sidebar-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all 0.1s;
}
.nav a:hover { background: var(--sidebar-hover); color: #fff; text-decoration: none; }
.nav a.active {
  background: var(--sidebar-hover);
  color: #fff;
  border-left-color: var(--primary);
}
.nav a .ico { font-size: 16px; width: 20px; text-align: center; }

.nav .theme-toggle {
  margin: 10px 18px 10px;
  background: var(--sidebar-hover);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.nav .theme-toggle:hover { background: #334155; transform: none; }

.main {
  margin-left: 240px;
  padding: 28px 32px;
  min-height: 100vh;
  background: var(--bg-soft);
  overflow-x: hidden;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 12px;
}
.topbar h2 { font-size: 24px; font-weight: 700; color: var(--text); }

/* Mobile hamburger for admin/dashboard */
.menu-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 60;
  background: var(--sidebar);
  color: #fff;
  border: 0;
  border-radius: 10px;
  width: 42px;
  height: 42px;
  padding: 0;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: var(--shadow);
}
.menu-toggle:hover { background: var(--sidebar-hover); transform: none; }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.55);
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.nav-backdrop.open { opacity: 1; pointer-events: auto; }

/* ===== Stat cards ===== */
.stat {
  background: var(--surface);
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.25s var(--ease-smooth);
  animation: cardFadeIn 0.55s var(--ease) backwards;
}
.stat:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -10px rgba(15, 23, 42, 0.15); border-color: var(--primary); }
.stat:hover .stat-icon { transform: scale(1.08) rotate(-6deg); }
.stat .stat-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.stat.blue .stat-icon { background: var(--info-soft); color: var(--info); }
.stat.orange .stat-icon { background: var(--warn-soft); color: var(--warn); }
.stat.red .stat-icon { background: var(--danger-soft); color: var(--danger); }
.stat.purple .stat-icon { background: rgba(124,58,237,0.15); color: #7c3aed; }
.stat .stat-body .label { font-size: 12px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; }
.stat .stat-body .value { font-size: 26px; font-weight: 700; color: var(--text); margin-top: 2px; }

/* ===== Auth / Modal ===== */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(ellipse at top, var(--primary-soft) 0%, var(--bg-soft) 40%, var(--bg) 100%);
}
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 32px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
  animation: cardFadeIn 0.55s ease-out;
}
.auth-card h1 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  text-align: center;
}
.auth-card .sub { text-align: center; color: var(--text-muted); margin-bottom: 26px; font-size: 14px; }

.toast {
  position: fixed; bottom: 20px; right: 20px;
  background: #111827; color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  font-size: 14px;
  font-weight: 500;
  animation: slidein 0.2s ease-out;
}
.toast.ok { background: #15803d; }
.toast.err { background: #991b1b; }
@keyframes slidein { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal-bg {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 999;
  /* Safe-area-aware padding: respects iPhone home-indicator and
     notches. Falls back to a flat 16px on browsers without env(). */
  padding: max(16px, env(safe-area-inset-top, 0px))
           max(16px, env(safe-area-inset-right, 0px))
           max(16px, env(safe-area-inset-bottom, 0px))
           max(16px, env(safe-area-inset-left, 0px));
  /* Allow backdrop scroll when modal content is genuinely taller
     than the viewport — keeps the dismiss tap target reachable. */
  overflow-y: auto;
  /* Contain scroll so swiping the modal/backdrop doesn't move the
     underlying admin page on iOS. */
  overscroll-behavior: contain;
  animation: fadein 0.15s ease-out;
}
.modal {
  background: var(--surface);
  border-radius: 16px;
  padding: 28px;
  width: 100%;
  max-width: 520px;
  /* min() of vh + dvh: pick whichever is smaller. dvh (dynamic
     viewport) tracks the SHRINKING iOS Safari address bar so we
     never overflow visible area, even when the bar collapses on
     scroll. vh fallback keeps Chrome/Firefox happy. */
  max-height: min(90vh, 90dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--shadow-lg);
  animation: cardFadeIn 0.25s ease-out;
}
.modal h2 { font-size: 20px; font-weight: 700; margin-bottom: 18px; }
/* iOS Safari zooms a focused input when its computed font-size is
   under 16px. Bumping form controls inside modals stops the
   "tap-zoom" jank that throws layout off when typing. */
@media (max-width: 768px) {
  .modal input,
  .modal select,
  .modal textarea {
    font-size: 16px;
  }
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.blog-editor-bg {
  align-items: flex-start;
  padding: 28px;
  overflow-y: auto;
}
.blog-editor-modal {
  width: min(920px, 100%);
  max-width: 920px;
  max-height: none;
}
.blog-editor-modal textarea {
  min-height: 96px;
  resize: vertical;
}
.blog-editor-modal #bp_c {
  min-height: 220px;
}

/* ===== Marketing / Landing ===== */
.mk-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.mk-header .inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.mk-logo { font-size: 18px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.mk-nav-links { display: flex; gap: 26px; font-size: 14px; }
.mk-nav-links a { color: var(--text-dim); font-weight: 500; }
.mk-nav-links a:hover { color: var(--text); text-decoration: none; }

.mk-theme-btn {
  background: transparent !important;
  color: var(--text-dim) !important;
  border: 1px solid var(--border) !important;
  width: 36px; height: 36px;
  padding: 0 !important;
  border-radius: 10px;
  font-size: 18px;
}
.mk-theme-btn:hover { background: var(--bg-soft) !important; transform: none; }

.mk-menu-btn {
  display: none;
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  width: 40px; height: 40px;
  padding: 0 !important;
  border-radius: 10px;
  font-size: 20px;
}
.mk-menu-btn:hover { background: var(--bg-soft) !important; transform: none; }
.mk-mobile-menu {
  display: none;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 14px 20px;
}
.mk-mobile-menu.open { display: block; animation: slidein 0.18s ease-out; }
.mk-mobile-menu a { display: block; padding: 10px 0; color: var(--text-dim); font-weight: 500; border-bottom: 1px solid var(--border-soft); }
.mk-mobile-menu a:last-child { border-bottom: 0; }

.hero {
  position: relative;
  padding: 100px 20px 80px;
  text-align: center;
  background: linear-gradient(180deg, #f6f9f8 0%, #edf7f4 55%, var(--bg) 100%);
  overflow: hidden;
  isolation: isolate;
}
/* Grid-paper pattern, masked to fade at edges */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15, 118, 110, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 118, 110, 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center center;
  mask-image: radial-gradient(ellipse 90% 75% at center, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at center, #000 40%, transparent 90%);
  pointer-events: none;
  z-index: -1;
}
/* Animated teal + sky gradient mesh */
.hero::after {
  content: '';
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 640px 420px at 85% 18%, rgba(20, 184, 166, 0.28), transparent 65%),
    radial-gradient(ellipse 520px 360px at 8% 70%, rgba(59, 130, 246, 0.14), transparent 65%),
    radial-gradient(ellipse 420px 260px at 60% 85%, rgba(16, 163, 74, 0.12), transparent 65%);
  filter: blur(4px);
  animation: meshDrift 22s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -1;
}
@keyframes meshDrift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-2%, 2%) scale(1.04); }
  100% { transform: translate(2%, -1%) scale(0.98); }
}

html[data-theme="dark"] .hero {
  background: linear-gradient(180deg, #0b1220 0%, #0f1724 55%, var(--bg) 100%);
}
html[data-theme="dark"] .hero::before {
  background-image:
    linear-gradient(rgba(20, 184, 166, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 184, 166, 0.10) 1px, transparent 1px);
}
html[data-theme="dark"] .hero::after {
  background:
    radial-gradient(ellipse 640px 420px at 85% 18%, rgba(20, 184, 166, 0.24), transparent 65%),
    radial-gradient(ellipse 520px 360px at 8% 70%, rgba(59, 130, 246, 0.18), transparent 65%),
    radial-gradient(ellipse 420px 260px at 60% 85%, rgba(16, 163, 74, 0.16), transparent 65%);
}
.hero h1 {
  font-size: 54px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 820px;
  margin: 0 auto 20px;
  animation: fadeUp 0.7s ease-out;
}
.hero .sub {
  font-size: 18px;
  color: var(--text-dim);
  max-width: 620px;
  margin: 0 auto 32px;
  animation: fadeUp 0.7s ease-out 0.1s backwards;
}
.hero .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; animation: fadeUp 0.7s ease-out 0.2s backwards; }
.hero .trust { color: var(--text-muted); font-size: 13px; animation: fadeUp 0.7s ease-out 0.3s backwards; }
.hero .chat-mock { animation: fadeUp 0.8s ease-out 0.4s backwards; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.section { padding: 80px 20px; position: relative; }
.section.alt { background: var(--bg-soft); }

/* Scroll reveal for sections */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 42px; }
.section-head .eyebrow { color: var(--primary); font-weight: 600; font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 10px; }
.section-head h2 { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.section-head p { color: var(--text-dim); margin-top: 12px; font-size: 16px; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.25s var(--ease-smooth);
  animation: cardFadeIn 0.55s var(--ease) backwards;
}
.feature-grid .feature:nth-child(1) { animation-delay: 0.05s; }
.feature-grid .feature:nth-child(2) { animation-delay: 0.10s; }
.feature-grid .feature:nth-child(3) { animation-delay: 0.15s; }
.feature-grid .feature:nth-child(4) { animation-delay: 0.20s; }
.feature-grid .feature:nth-child(5) { animation-delay: 0.25s; }
.feature-grid .feature:nth-child(6) { animation-delay: 0.30s; }
.feature-grid .feature:nth-child(7) { animation-delay: 0.35s; }
.feature-grid .feature:nth-child(8) { animation-delay: 0.40s; }
.feature-grid .feature:nth-child(9) { animation-delay: 0.45s; }
.feature:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -14px rgba(15, 23, 42, 0.18), 0 6px 12px -6px rgba(16, 163, 74, 0.12);
  border-color: var(--primary);
}
html[data-theme="dark"] .feature:hover { box-shadow: 0 20px 40px -10px rgba(0,0,0,0.6); }
.feature:hover .f-ico { transform: scale(1.1) rotate(-8deg); }
.feature .f-ico {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.feature h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.feature p { color: var(--text-dim); font-size: 14px; line-height: 1.55; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  animation: cardFadeIn 0.5s ease-out backwards;
}
.steps .step:nth-child(1) { animation-delay: 0.1s; }
.steps .step:nth-child(2) { animation-delay: 0.2s; }
.steps .step:nth-child(3) { animation-delay: 0.3s; }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.step .step-num {
  position: absolute;
  top: -14px;
  left: 24px;
  background: var(--text);
  color: var(--bg);
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.step h3 { font-size: 17px; font-weight: 700; margin: 10px 0 8px; }
.step p { color: var(--text-dim); font-size: 14px; }

.chat-mock {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  max-width: 380px;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
}
.chat-mock .bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  margin-bottom: 8px;
  max-width: 80%;
  line-height: 1.5;
  animation: bubbleIn 0.4s ease-out backwards;
}
.chat-mock .bubble:nth-child(1) { animation-delay: 0.1s; }
.chat-mock .bubble:nth-child(2) { animation-delay: 0.2s; }
.chat-mock .bubble:nth-child(3) { animation-delay: 0.3s; }
.chat-mock .bubble:nth-child(4) { animation-delay: 0.4s; }
.chat-mock .bubble:nth-child(5) { animation-delay: 0.5s; }
.chat-mock .bubble:nth-child(6) { animation-delay: 0.6s; }
.chat-mock .bubble:nth-child(7) { animation-delay: 0.7s; }
.chat-mock .bubble:nth-child(8) { animation-delay: 0.8s; }
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-mock .bot { background: var(--bg-soft); color: var(--text); border-top-left-radius: 4px; }
.chat-mock .user { background: #dcf8c6; color: #111827; margin-left: auto; border-top-right-radius: 4px; }
html[data-theme="dark"] .chat-mock .user { background: #0e5034; color: #e6ffef; }

.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  animation: cardFadeIn 0.5s ease-out backwards;
}
.pricing .price:nth-child(1) { animation-delay: 0.1s; }
.pricing .price:nth-child(2) { animation-delay: 0.2s; }
.pricing .price:nth-child(3) { animation-delay: 0.3s; }
.price:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.price.featured {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
  transform: scale(1.02);
}
.price.featured:hover { transform: scale(1.02) translateY(-6px); }
.price .name { font-size: 14px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; }
.price .amount { font-size: 40px; font-weight: 800; margin: 8px 0; letter-spacing: -0.02em; }
.price .amount .per { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.price ul { list-style: none; margin: 18px 0 22px; }
.price li { padding: 6px 0; color: var(--text-dim); font-size: 14px; display: flex; gap: 8px; }
.price li::before { content: '✓'; color: var(--primary); font-weight: 700; }
.price .btn { margin-top: auto; }

.faq { max-width: 760px; margin: 0 auto; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
  animation: cardFadeIn 0.4s ease-out backwards;
}
.faq details:nth-child(1) { animation-delay: 0.05s; }
.faq details:nth-child(2) { animation-delay: 0.10s; }
.faq details:nth-child(3) { animation-delay: 0.15s; }
.faq details:nth-child(4) { animation-delay: 0.20s; }
.faq details:nth-child(5) { animation-delay: 0.25s; }
.faq details:nth-child(6) { animation-delay: 0.30s; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--text-muted); font-size: 20px; font-weight: 400; transition: transform 0.2s; }
.faq details[open] summary::after { content: '–'; }
.faq details[open] { border-color: var(--primary); box-shadow: var(--shadow); }
.faq p { color: var(--text-dim); margin-top: 12px; font-size: 14px; line-height: 1.6; }

.mk-footer {
  background: var(--text);
  color: var(--text-muted);
  padding: 50px 20px 30px;
}
html[data-theme="dark"] .mk-footer { background: #060b16; }
.mk-footer .inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.mk-footer h4 { color: var(--bg); font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 14px; }
html[data-theme="dark"] .mk-footer h4 { color: #fff; }
.mk-footer a { color: #94a3b8; display: block; padding: 4px 0; font-size: 14px; }
.mk-footer a:hover { color: #fff; }
.mk-footer .brand { font-size: 18px; font-weight: 700; color: var(--bg); margin-bottom: 12px; }
html[data-theme="dark"] .mk-footer .brand { color: #fff; }
.mk-footer .bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 40px; padding-top: 22px; font-size: 13px; color: #64748b; text-align: center; }

/* ===== Store ===== */
.store-wrap { max-width: 1040px; margin: 0 auto; padding: 30px 20px 80px; }
.store-head { text-align: center; margin-bottom: 36px; }
.store-head h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.store-head p { color: var(--text-dim); margin-top: 8px; }
.platform-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s, border-color 0.25s;
  animation: cardFadeIn 0.4s ease-out backwards;
}
.platform-card:hover { transform: translateY(-4px) scale(1.02); border-color: var(--primary); box-shadow: var(--shadow-lg); }
.platform-card:hover .emoji { transform: scale(1.15) rotate(-6deg); }
.platform-card .emoji { font-size: 32px; margin-bottom: 8px; transition: transform 0.3s; }
.platform-card .name { font-weight: 700; font-size: 16px; }
.platform-card .count { color: var(--text-muted); font-size: 12px; margin-top: 2px; }

.service-row {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background 0.1s, padding-left 0.15s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.service-row:hover { background: var(--bg-soft); padding-left: 22px; }
.service-row .meta { color: var(--text-muted); font-size: 12px; margin-top: 3px; }
.service-row .price { font-weight: 700; color: var(--primary); font-size: 15px; white-space: nowrap; }

/* ===== CTA card (theme-aware) ===== */
.cta-card {
  background: linear-gradient(135deg, #ecfdf5, #dbeafe);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 56px 30px;
  text-align: center;
  box-shadow: var(--shadow);
}
.cta-card h2 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: #0f172a;
  line-height: 1.2;
}
.cta-card p { color: #334155; margin-bottom: 26px; font-size: 16px; }
html[data-theme="dark"] .cta-card {
  background: linear-gradient(135deg, rgba(16, 163, 74, 0.18), rgba(37, 99, 235, 0.18));
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .cta-card h2 { color: #f1f5f9; }
html[data-theme="dark"] .cta-card p { color: #cbd5e1; }
@media (max-width: 768px) { .cta-card { padding: 40px 22px; } .cta-card h2 { font-size: 24px; } }

/* ===== Legal / content pages ===== */
.legal-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 32px 18px 56px;
  line-height: 1.6;
}
.legal-page h1 {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.legal-page .legal-meta { color: var(--text-muted); font-size: 12.5px; margin-bottom: 20px; }
.legal-page h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 24px 0 9px;
  letter-spacing: -0.01em;
}
.legal-page h3 { font-size: 15px; font-weight: 700; margin: 16px 0 6px; }
.legal-page p, .legal-page li { color: var(--text-dim); font-size: 14px; }
.legal-page p { margin-bottom: 10px; }
.legal-page ul, .legal-page ol { padding-left: 20px; margin-bottom: 11px; }
.legal-page li { margin-bottom: 5px; }
.legal-page strong { color: var(--text); }
.legal-page a { color: var(--primary); }
.legal-page hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }
@media (max-width: 768px) {
  .legal-page { padding: 22px 14px 44px; }
  .legal-page h1 { font-size: 23px; }
  .legal-page h2 { font-size: 17px; }
}

/* ===== Services group/rows ===== */
.svc-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  animation: cardFadeIn 0.4s ease-out backwards;
}
.svc-group-head {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  padding: 12px 18px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}
.svc-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-soft);
  align-items: center;
  transition: background 0.1s;
}
.svc-row:hover { background: var(--bg-soft); }
.svc-row:last-child { border-bottom: 0; }
.svc-row-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.svc-name { font-weight: 500; font-size: 14px; }
.svc-row-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; font-size: 12px; }
.svc-row-price { text-align: right; min-width: 110px; }
.svc-price-sell { font-weight: 700; font-size: 15px; color: var(--primary); }
.svc-price-cost { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.svc-row-actions { display: flex; align-items: center; gap: 6px; }

/* Toggle switch */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 22px; transition: background 0.2s; }
.switch .slider::before {
  position: absolute; content: '';
  height: 16px; width: 16px;
  left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider::before { transform: translateX(16px); }

/* Manual sync multi-select items */
.ms-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
  align-items: flex-start;
}
.ms-item:hover { background: var(--bg-soft); }
.ms-item input[type=checkbox] { margin-top: 3px; flex-shrink: 0; }
.ms-item-body { flex: 1; min-width: 0; }
.ms-item-body > div:first-child { font-size: 13px; line-height: 1.4; word-break: break-word; }

@media (max-width: 640px) {
  .svc-row { grid-template-columns: 1fr; }
  .svc-row-price { text-align: left; }
  .svc-row-actions { justify-content: flex-end; }
}

/* ===== Utility ===== */
.hide-mobile { display: block; }
.show-mobile { display: none; }

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ===== Tablet ===== */
@media (max-width: 1024px) {
  .main { padding: 24px 22px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  html, body { font-size: 14px; }

  .menu-toggle { display: flex; }

  .nav {
    transform: translateX(-100%);
    width: 260px;
    box-shadow: none;
  }
  .nav.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,0.35); }

  .main { margin-left: 0; padding: 66px 14px 24px; }
  .topbar { flex-wrap: wrap; margin-bottom: 18px; }
  .topbar h2 { font-size: 20px; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .feature-grid, .steps, .pricing { grid-template-columns: 1fr; }

  .card { padding: 16px; border-radius: 10px; }
  .card h3 { font-size: 15px; }
  .card table { margin: -16px; width: calc(100% + 32px); }
  .card table th:first-child, .card table td:first-child { padding-left: 16px; }
  .card table th:last-child, .card table td:last-child { padding-right: 16px; }

  /* Mobile-scrollable tables — the previous rule used `display:block`
     on <table> which broke <thead>/<tbody> column alignment (each
     child became its own block, columns drifted). The pattern below
     keeps columns aligned AND scrolls horizontally:
       <table>      → display:block (becomes the scroll container)
       <thead/tbody>→ display:table with min-width (re-forms the
                       table layout, forces overflow when narrower
                       than the screen)
       <tr>         → display:table-row
       <th>/<td>    → display:table-cell, nowrap so content doesn't
                       wrap inside narrow columns
     A subtle right-edge fade hints there's more content sideways.
     NOTE: selectors use `.card table` (descendant, not direct child)
     so this also catches admin tables that are wrapped in an inner
     `<div style="overflow-x:auto">` (older pattern still in use on
     a few pages). The `!important` is here to defeat a stray
     `.card table { min-width: max-content }` rule that lives in a
     later media block; without it the table grows to fit content,
     no overflow happens inside the card, and the page scrolls
     horizontally instead of the table itself. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card table {
    display: block !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Cancel the desktop edge-bleed margin so the table scroll-area
       sits flush inside the (smaller) mobile card padding. */
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    /* Soft fade on the right edge to hint at the scroll affordance.
       Falls back gracefully when the browser doesn't support mask. */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  }
  /* Re-establish table semantics so thead and tbody columns line up */
  .card table > thead,
  .card table > tbody,
  .card table > tfoot {
    display: table;
    table-layout: auto;
    width: 100%;
    min-width: 640px;
  }
  .card table > thead > tr,
  .card table > tbody > tr,
  .card table > tfoot > tr { display: table-row; }
  .card table > thead > tr > th,
  .card table > tbody > tr > td { display: table-cell; white-space: nowrap; }

  th, td { padding: 10px 10px; font-size: 13px; }
  th { font-size: 10px; }

  /* Topbar — buttons/inputs to the right of the title overflow on
     mobile. Let them wrap and shrink instead of pushing the title
     off-screen. */
  .topbar { flex-wrap: wrap; gap: 8px; }
  .topbar h2 { font-size: 18px; }
  .topbar > .row, .topbar > div { flex-wrap: wrap; }
  .topbar input, .topbar select { min-width: 0; max-width: 100%; }

  /* Modals — tighter padding on phones so the modal can use more
     of the small viewport. dvh-aware max-height set in the base
     rule above; this block just adjusts breathing room. */
  .modal-bg {
    padding: max(12px, env(safe-area-inset-top, 0px))
             max(12px, env(safe-area-inset-right, 0px))
             max(12px, env(safe-area-inset-bottom, 0px))
             max(12px, env(safe-area-inset-left, 0px));
  }
  .modal {
    /* Slightly tighter on phones so the bottom action row stays
       reachable above the home-indicator. */
    max-height: min(92vh, 92dvh);
  }

  .stat { padding: 14px; gap: 10px; }
  .stat .stat-icon { width: 38px; height: 38px; font-size: 18px; }
  .stat .stat-body .value { font-size: 21px; }
  .stat .stat-body .label { font-size: 11px; }

  .section { padding: 48px 16px; }
  .section-head { margin-bottom: 28px; }
  .section-head h2 { font-size: 26px; }
  .section-head p { font-size: 14px; }

  .hero { padding: 60px 18px 40px; }
  .hero h1 { font-size: 34px; }
  .hero .sub { font-size: 15px; }
  .hero .ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; margin: 0 auto 28px; }
  .hero .ctas .btn { justify-content: center; }
  .chat-mock { max-width: 100%; }

  .mk-header .inner { padding: 12px 14px; gap: 8px; }
  .mk-logo { font-size: 15px; }
  .mk-nav-links { display: none; }
  .mk-menu-btn { display: inline-flex; }

  .store-wrap { padding: 20px 14px 60px; }
  .store-head h1 { font-size: 24px; }
  .platform-card { padding: 14px; }
  .platform-card .emoji { font-size: 26px; }
  .platform-card .name { font-size: 14px; }
  #platforms.grid-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .auth-card { padding: 26px 20px; border-radius: 14px; }
  .auth-card h1 { font-size: 20px; }

  .modal { padding: 20px; border-radius: 14px; }
  .btn.lg { padding: 12px 22px; font-size: 15px; }

  .mk-footer { padding: 40px 18px 24px; }
  .mk-footer .inner { grid-template-columns: 1fr 1fr; gap: 24px; }

  .price { padding: 22px; }
  .price .amount { font-size: 32px; }
  .feature { padding: 20px; }
  .step { padding: 22px 20px; }

  .hide-mobile { display: none; }
  .show-mobile { display: block; }
}

/* ===== Small phone ===== */
@media (max-width: 480px) {
  .hero h1 { font-size: 28px; }
  .hero .sub { font-size: 14px; }
  .chat-mock { padding: 14px; }
  .chat-mock .bubble { font-size: 13px; padding: 8px 12px; }
  .section-head h2 { font-size: 22px; }
  .stat .stat-body .value { font-size: 19px; }
  .stat { padding: 12px; }
  #platforms.grid-4 { grid-template-columns: 1fr; }
  .mk-footer .inner { grid-template-columns: 1fr; }
  .mk-header .btn.sm { padding: 6px 10px; font-size: 11px; }
}

/* ============================================================
   Dashboard / Admin polish — animated gradient bg, command chips,
   nicer mobile nav, prettier topbar, subtle float-in on cards.
   Purely additive; existing layouts unaffected.
   ============================================================ */

/* Animated aurora background behind the main content */
.main {
  position: relative;
  isolation: isolate;
}
.main::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(34,197,94,0.10), transparent 60%),
    radial-gradient(700px 500px at -5% 110%, rgba(37,99,235,0.10), transparent 60%),
    radial-gradient(600px 400px at 50% 50%, rgba(168,85,247,0.06), transparent 60%);
  pointer-events: none;
  animation: aurora 22s ease-in-out infinite alternate;
  will-change: transform;
}
html[data-theme="dark"] .main::before {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(34,197,94,0.14), transparent 60%),
    radial-gradient(700px 500px at -5% 110%, rgba(37,99,235,0.16), transparent 60%),
    radial-gradient(600px 400px at 50% 50%, rgba(168,85,247,0.10), transparent 60%);
}
@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -1%, 0) scale(1.04); }
  100% { transform: translate3d(-2%, 1%, 0) scale(1); }
}

/* Soft grain noise overlay — imperceptible but adds depth */
.main::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: multiply;
}
html[data-theme="dark"] .main::after { mix-blend-mode: screen; opacity: 0.35; }

/* Cards get a subtle frosted-glass feel in addition to the existing shadow */
.card {
  backdrop-filter: saturate(150%) blur(6px);
  -webkit-backdrop-filter: saturate(150%) blur(6px);
  border: 1px solid var(--border);
  transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth);
  overflow-wrap: anywhere;
  word-wrap: break-word;
  min-width: 0;
}
.card:hover { transform: translateY(-2px); }
/* Any long URL / email / hash inside a card — wrap instead of extending the row */
.card a, .card code, .card pre, .cmd-chip .cmd-name {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Inline invite/payment boxes use <a> heavily — never let them push the card */
.card input, .card textarea, .card select { max-width: 100%; }

/* Topbar: bigger, punchier h2 with a gradient underline accent */
.topbar h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

/* ============== Command chip list ============== */
/* Used for the .stats / .verify / etc. admin commands on the WA page */
.cmd-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.cmd-chip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  cursor: default;
}
.cmd-chip:hover { transform: translateY(-2px); border-color: var(--primary); background: var(--primary-soft); }
.cmd-chip .cmd-icon {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), #06b6d4);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  box-shadow: 0 4px 10px rgba(34,197,94,0.25);
}
.cmd-chip .cmd-body { flex: 1; min-width: 0; }
.cmd-chip .cmd-name {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-weight: 600;
  color: var(--text);
  font-size: 13.5px;
  letter-spacing: -0.01em;
}
.cmd-chip .cmd-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.45;
}

/* ============== Card entrance animation ============== */
@keyframes cardFloatIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.main > .card,
.main > .grid > .card,
.main > .grid > .stat {
  animation: cardFloatIn 0.45s var(--ease) both;
}

/* ============== Mobile nav polish ============== */
@media (max-width: 768px) {
  /* Larger tap targets in the sidebar */
  .nav a {
    padding: 14px 16px;
    font-size: 15px;
    border-radius: 10px;
    margin-bottom: 2px;
  }
  .nav a .ico { font-size: 20px; width: 26px; }
  .nav h1 { font-size: 18px; padding: 16px 16px 10px; }

  /* Menu button: more prominent + sits above glass */
  .menu-toggle {
    box-shadow: 0 6px 20px rgba(15,23,42,0.18);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    border: 1px solid var(--border);
  }

  /* Command chips: one per row on phones for readability */
  .cmd-list { grid-template-columns: 1fr; gap: 8px; }
  .cmd-chip { padding: 11px 12px; }

  /* Topbar stacks on mobile so titles don't collide with CTAs */
  .topbar { gap: 10px; }
  .topbar > * { min-width: 0; }

  /* Card rows with many inline action buttons — wrap instead of overflowing */
  .row { gap: 8px; }

  /* Slightly reduce the aurora scale so it doesn't feel busy on phones */
  .main::before { filter: saturate(80%); }
}

/* ============================================================
   Dashboard neon polish — soft coloured glow under every card,
   sheen-sweep on hover, stat-icon pulse, nav active indicator,
   mobile-specific niceties.
   ============================================================ */

/* Neon glow under cards — subtle green in light, stronger in dark.
   Keeps the existing shadow for contrast; adds a second coloured
   shadow below that fades in on hover. */
.card {
  box-shadow:
    var(--shadow-sm),
    0 0 0 0 rgba(34,197,94,0);
  transition:
    transform 0.2s var(--ease-smooth),
    box-shadow 0.25s var(--ease-smooth),
    border-color 0.2s var(--ease-smooth);
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow:
    var(--shadow-lg),
    0 12px 40px -12px rgba(34,197,94,0.35);
}
html[data-theme="dark"] .card:hover {
  box-shadow:
    0 10px 30px rgba(0,0,0,0.55),
    0 0 28px -4px rgba(34,197,94,0.45),
    0 0 60px -8px rgba(34,197,94,0.25);
}

/* Stat cards get a permanent accent glow so the top of each view pops */
.stat {
  position: relative;
  overflow: hidden;
  box-shadow:
    var(--shadow-sm),
    0 8px 24px -8px rgba(34,197,94,0.18);
  transition: transform 0.2s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth);
}
.stat:hover {
  transform: translateY(-3px);
  box-shadow:
    var(--shadow-lg),
    0 14px 36px -8px rgba(34,197,94,0.42);
}
html[data-theme="dark"] .stat {
  box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 24px -4px rgba(34,197,94,0.22);
}
html[data-theme="dark"] .stat:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.55), 0 0 40px -4px rgba(34,197,94,0.4);
}

/* Sheen sweep — a white gradient brushes across each card once on hover */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.08) 42%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
  transition: transform 0.9s var(--ease);
}
.card { position: relative; overflow: hidden; }
.card:hover::after { transform: translateX(120%); }

/* Stat icon — gentle floating pulse so the dashboard feels alive */
.stat-icon {
  animation: statPulse 3.2s ease-in-out infinite alternate;
}
@keyframes statPulse {
  0%   { transform: scale(1); filter: drop-shadow(0 2px 6px rgba(34,197,94,0.25)); }
  100% { transform: scale(1.04); filter: drop-shadow(0 6px 14px rgba(34,197,94,0.55)); }
}

/* Nav active item — glowing left edge + soft background */
.nav a.active {
  position: relative;
  background: linear-gradient(90deg, rgba(34,197,94,0.18), rgba(34,197,94,0));
  box-shadow: inset 3px 0 0 var(--primary), 0 0 18px -6px rgba(34,197,94,0.7);
}
.nav a.active::before {
  content: "";
  position: absolute;
  left: -3px; top: 8px; bottom: 8px; width: 3px;
  background: var(--primary);
  box-shadow: 0 0 10px var(--primary), 0 0 18px rgba(34,197,94,0.6);
  border-radius: 3px;
}

/* Primary / success buttons get a neon glow on hover */
.btn:not(.ghost):not(.dark):not(.danger):hover {
  box-shadow: 0 8px 24px -4px rgba(34,197,94,0.45);
}
html[data-theme="dark"] .btn:not(.ghost):not(.dark):not(.danger):hover {
  box-shadow: 0 0 18px rgba(34,197,94,0.6), 0 8px 24px -4px rgba(34,197,94,0.55);
}

/* Topbar h2 — gradient text accent (subtle, stays legible) */
.topbar h2 {
  background: linear-gradient(90deg, var(--text), var(--text) 60%, var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme="dark"] .topbar h2 {
  background: linear-gradient(90deg, var(--text), var(--text) 70%, #4ade80);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tables — zebra hover + smoother borders */
.card table tbody tr:hover {
  background: rgba(34,197,94,0.04);
}
html[data-theme="dark"] .card table tbody tr:hover {
  background: rgba(34,197,94,0.07);
}

/* Badges get a soft glow matching their colour */
.badge.ok   { box-shadow: 0 0 0 1px rgba(34,197,94,0.25); }
.badge.err  { box-shadow: 0 0 0 1px rgba(239,68,68,0.25); }
.badge.warn { box-shadow: 0 0 0 1px rgba(245,158,11,0.25); }
.badge.info { box-shadow: 0 0 0 1px rgba(37,99,235,0.25); }

/* Floating-in delay cascade — each card in a grid eases up ~40ms after the last */
@keyframes floatInSoft {
  0%   { opacity: 0; transform: translateY(14px) scale(0.985); filter: blur(2px); }
  100% { opacity: 1; transform: none; filter: none; }
}
.main > .card, .main > .grid > .card, .main > .grid > .stat {
  animation: floatInSoft 0.5s var(--ease) both;
}

/* Mobile niceties */
@media (max-width: 768px) {
  /* Bigger bottom margin so the floating animation doesn't clip under the screen edge */
  .main { padding-bottom: 32px; }
  /* Softer card glow on phones — don't drain the battery on a neon bloom */
  .card:hover { transform: translateY(-2px); box-shadow: var(--shadow), 0 6px 20px -6px rgba(34,197,94,0.3); }
  .stat-icon { animation-duration: 4s; }
  /* Bigger corner radius on the main content so it doesn't feel edge-to-edge */
  .card { border-radius: 14px; }
  /* Buttons a touch taller for thumb targets */
  .btn, button { min-height: 40px; }
  .btn.sm, button.sm { min-height: 32px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .main::before, .main::after, .stat-icon { animation: none; }
  .card:hover, .cmd-chip:hover, .stat:hover { transform: none; box-shadow: var(--shadow); }
  .card::after { display: none; }
}

/* Master Wallet widget on dashboard home — always looks good */
.master-wallet-card .mw-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
}
.master-wallet-card .mw-emoji { font-size: 34px; line-height: 1; }
.master-wallet-card .mw-title h3 { font-size: 16px; margin: 0; font-weight: 700; }
.master-wallet-card .mw-balance { text-align: right; }
.master-wallet-card .mw-amt { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; }
.master-wallet-card .mw-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.master-wallet-card .mw-actions button { flex: 1 1 auto; }
@media (max-width: 640px) {
  .master-wallet-card .mw-head {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "emoji title"
      "balance balance";
    row-gap: 10px;
  }
  .master-wallet-card .mw-emoji { grid-area: emoji; font-size: 28px; }
  .master-wallet-card .mw-title { grid-area: title; min-width: 0; }
  .master-wallet-card .mw-title h3 { font-size: 15px; }
  .master-wallet-card .mw-balance {
    grid-area: balance;
    text-align: left;
    border-top: 1px dashed rgba(139,92,246,0.25);
    padding-top: 10px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }
  .master-wallet-card .mw-balance .muted { font-size: 12px; }
  .master-wallet-card .mw-amt { font-size: 28px; }
}

/* ============================================================
   Dashboard mobile redesign — proper top app-bar, bottom-sheet
   style modals, tighter cards, 2-up stat grid, better tap targets.
   Purely additive + scoped to <= 768px.
   ============================================================ */
@media (max-width: 768px) {
  /* --- Root sizing --- */
  html, body { font-size: 14px; }
  body { overflow-x: hidden; }

  /* --- Shell: fixed app-bar with hamburger + brand visible always --- */
  .menu-toggle {
    display: flex;
    position: fixed;
    top: 10px; left: 10px;
    width: 42px; height: 42px;
    font-size: 20px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    box-shadow: 0 6px 18px rgba(15,23,42,0.12);
    z-index: 60;
  }
  html[data-theme="dark"] .menu-toggle {
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  }

  /* --- Main content: push below the app-bar --- */
  .main {
    margin-left: 0;
    padding: 62px 14px 28px;
  }

  /* --- Nav: slide-in drawer with smoother motion --- */
  .nav {
    width: 280px;
    max-width: 84vw;
    transform: translateX(-100%);
    border-right: 0;
    box-shadow: none;
    padding: 12px 0 18px;
    transition: transform 0.25s var(--ease-smooth);
  }
  .nav.open {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0,0,0,0.4);
  }
  .nav h1 {
    font-size: 17px;
    padding: 12px 18px 14px;
    margin-bottom: 6px;
  }
  .nav a {
    padding: 12px 16px;
    margin: 0 10px 3px;
    font-size: 14.5px;
    border-radius: 10px;
    border-left: 0;
  }
  .nav a .ico { font-size: 18px; width: 24px; }
  .nav a.active {
    background: linear-gradient(90deg, rgba(34,197,94,0.22), rgba(34,197,94,0.05));
    box-shadow: inset 3px 0 0 var(--primary), 0 4px 14px -4px rgba(34,197,94,0.5);
  }
  .nav .theme-toggle {
    margin: 12px 14px 6px;
    padding: 11px 14px;
    font-size: 13.5px;
  }

  /* --- Topbar: smart stacking --- */
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
  }
  .topbar h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; }
  .topbar > .row { width: 100%; flex-wrap: wrap; gap: 8px; }
  .topbar button, .topbar .btn {
    flex: 1 1 auto; min-width: auto;
  }
  /* When topbar has a single button on the right, keep it inline with heading */
  .topbar:has(> button:only-of-type),
  .topbar:has(> .btn:only-of-type) {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  /* --- Cards: tighter padding, softer corners --- */
  .card {
    padding: 14px;
    border-radius: 14px;
    margin-bottom: 12px;
  }
  .card h3 { font-size: 15px; margin: 0 0 10px; }

  /* --- Stat grid: 2 columns on phones (way more scannable than 1) --- */
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .grid-2 { grid-template-columns: 1fr; gap: 10px; }
  /* Below 400px (cramped phones) collapse to 1 col */
  @media (max-width: 399px) {
    .grid-3, .grid-4 { grid-template-columns: 1fr; }
  }

  /* --- Stat cards: compact but legible --- */
  .stat {
    padding: 12px 14px;
    border-radius: 12px;
    gap: 10px;
    align-items: center;
  }
  .stat .stat-icon {
    width: 40px; height: 40px;
    font-size: 18px;
    border-radius: 10px;
  }
  .stat .stat-body .value { font-size: 20px; font-weight: 700; }
  .stat .stat-body .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; }

  /* --- Inputs / selects / buttons: thumb-friendly --- */
  input, select, textarea {
    font-size: 16px !important;     /* ≥16px prevents iOS auto-zoom on focus */
    padding: 11px 12px;
    border-radius: 10px;
  }
  button, .btn {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 10px;
    touch-action: manipulation; /* removes 300ms tap delay on Android */
  }
  button.sm, .btn.sm { min-height: 36px; padding: 6px 12px; font-size: 12.5px; }
  a { touch-action: manipulation; }
  .field label { font-size: 12.5px; margin-bottom: 6px; }

  /* --- Row gaps: universal --- */
  .row { gap: 8px; flex-wrap: wrap; }

  /* --- Tables: horizontal scroll handled by the earlier `.card table`
     block (display:block + thead/tbody min-width:640px). The previous
     pattern here used `min-width: max-content` on the <table>, which
     made the table grow to fit its content — and because the table is
     `display:block`, it pushed the entire .card wider than the
     viewport. Result: the page scrolled horizontally, but the table
     itself didn't have an internal scroll. Removed.
     What stays: position:relative on .card (used by absolute children)
     and the cell-padding/font-size tweaks. */
  .card { position: relative; }
  .card table { font-size: 13px; }
  .card table th { font-size: 10.5px; padding: 8px 10px; }
  .card table td { padding: 10px; }

  /* --- Modals: bottom-sheet on phones --- */
  .modal-bg {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px 18px 0 0;
    padding: 18px 16px 28px !important;
    max-height: calc(92vh - env(safe-area-inset-bottom, 0px)) !important;
    overscroll-behavior: contain;
    animation: sheetSlideUp 0.28s var(--ease-smooth);
  }
  .modal h2 { font-size: 18px; margin-bottom: 6px; }
  .modal p { font-size: 13px; }
  /* Bottom action row stays anchored so user can tap without scrolling */
  .modal > .row:last-child {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    margin: 10px -16px 0 !important;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-soft);
  }
  .modal > .row:last-child button {
    flex: 1 1 0;
  }
  @keyframes sheetSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }

  /* --- Dashboard stat cards glow off on mobile (battery/readability) --- */
  .stat, .card { animation-duration: 0.4s; }
  .stat-icon { animation: none !important; }

  /* --- Pretty master-wallet / master-catalog cards on phones --- */
  /* These use `row` + right-aligned balance which wraps oddly; give them a dedicated stack layout */
  .card .row[style*="align-items:center"][style*="flex-wrap:wrap"] > div[style*="text-align:right"] {
    text-align: left !important;
    width: 100%;
    padding-top: 2px;
  }

  /* --- Toast higher so it doesn't collide with the bottom sheet --- */
  .toast { bottom: 72px; left: 14px; right: 14px; }

  /* --- Hide the "Resellers 🤝" text in nav (kept in desktop) — only icon --- */
  /* (Actually keep the labels — they're fine on mobile after our nav restyle) */

  /* --- Badges with long content wrap nicely --- */
  .badge { white-space: normal; }

  /* --- Service rows: tighter layout --- */
  .svc-row {
    flex-wrap: wrap;
    padding: 12px;
    gap: 8px;
  }
  .svc-row-info { flex: 1 1 100%; }
  .svc-row-price { order: 3; flex: 1 1 auto; }
  .svc-row-actions { order: 2; margin-left: auto; flex-wrap: wrap; gap: 6px; }

  /* --- Command chips --- */
  .cmd-list { grid-template-columns: 1fr !important; gap: 8px !important; }
  .cmd-chip { padding: 11px 12px; }
  .cmd-name { font-size: 13px; }
  .cmd-desc { font-size: 12px; }
}

/* Small phones — squeeze further */
@media (max-width: 420px) {
  .topbar h2 { font-size: 20px; }
  .main { padding: 58px 12px 22px; }
  .card { padding: 12px; }
  .stat { padding: 10px 12px; }
  .stat .stat-icon { width: 36px; height: 36px; font-size: 16px; }
  .stat .stat-body .value { font-size: 18px; }
  .modal { padding: 16px 14px 26px !important; }
  .modal h2 { font-size: 17px; }
  button, .btn { font-size: 13.5px; padding: 10px 14px; }
}

/* ===== WatShop brand additions ===== */
code, pre, .mono, kbd, samp { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.brand-lockup { height: 28px; width: auto; display: inline-block; vertical-align: middle; }
.brand-lockup-lg { height: 40px; width: auto; display: inline-block; vertical-align: middle; }

/* ===========================================================
   Bot auto-reply toggle — floating chip in the top-right of
   the dashboard / admin shell. Always visible regardless of
   which view is rendered, so the operator can mute the bot
   instantly when they want to chat with a customer themselves.
   =========================================================== */
.bot-chip {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  box-shadow: var(--shadow);
  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease), border-color 0.15s, background 0.15s;
}
/* Sidebar variant — when the chip lives inside the nav (not a
   fixed corner pill). Strips the `position: fixed` so it flows
   with sibling nav items, makes it full-width to match the menu
   columns, and trims the box-shadow so it doesn't look like a
   detached floating element. Used in admin + dashboard shells. */
.bot-chip.nav-chip {
  position: static;
  top: auto;
  right: auto;
  display: flex;
  width: 100%;
  justify-content: center;
  margin: 6px 0;
  padding: 9px 12px;
  border-radius: 10px;
  box-shadow: none;
  font-size: 13px;
}
.bot-chip.nav-chip:hover { transform: none; box-shadow: 0 0 0 2px var(--primary-soft, rgba(59,130,246,.15)); }
.bot-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.bot-chip:active { transform: translateY(0) scale(0.98); }
.bot-chip[disabled] { opacity: 0.6; cursor: progress; pointer-events: none; }
.bot-chip .bot-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
  transition: background 0.2s, box-shadow 0.2s;
}
.bot-chip.on {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}
.bot-chip.on .bot-dot {
  background: var(--primary);
  box-shadow: 0 0 0 0 var(--primary);
  animation: botDotPulse 1.8s ease-out infinite;
}
.bot-chip.off {
  border-color: var(--border);
  background: var(--bg-soft);
  color: var(--text-dim);
}
.bot-chip.off .bot-dot { background: var(--text-muted); }
@keyframes botDotPulse {
  0%   { box-shadow: 0 0 0 0 var(--primary); opacity: 1; }
  70%  { box-shadow: 0 0 0 6px transparent; opacity: 0.7; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}
/* Tooltip — explain what the toggle does without forcing a hover. */
.bot-chip .bot-chip-hint {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--text);
  color: var(--bg);
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}
.bot-chip:hover .bot-chip-hint { display: block; }
@media (max-width: 720px) {
  .bot-chip { top: 10px; right: 10px; padding: 6px 12px; font-size: 12px; }
  .bot-chip .bot-chip-label-long { display: none; }
}

/* ===========================================================
   Landing visual rebuild — device frames, build-step cards,
   storefront preview marquee, and shared reveal helpers.
   =========================================================== */

/* Hero "showcase": laptop frame holding the storefront preview, with
   a phone frame floating overlapped showing the WhatsApp chat. The
   single visual sells the entire pitch (online store + WhatsApp). */
.hero-showcase {
  position: relative;
  max-width: 920px;
  margin: 56px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeUp 0.9s var(--ease) 0.35s backwards;
}
.device-laptop {
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, #1a2832, #0F1F1A);
  border-radius: 18px 18px 6px 6px;
  padding: 16px 16px 14px;
  box-shadow:
    0 30px 60px -20px rgba(15, 31, 26, 0.35),
    0 12px 24px -8px rgba(15, 31, 26, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  animation: floatY 6.5s ease-in-out infinite;
}
.device-laptop::after {
  /* The base "stand" / lid hinge */
  content: '';
  position: absolute;
  left: -4%; right: -4%;
  bottom: -10px;
  height: 12px;
  background: linear-gradient(180deg, #0F1F1A, #050a08);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 14px 24px -10px rgba(0,0,0,0.4);
}
.device-laptop .screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
.device-laptop .screen img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Browser-chrome strip across the laptop screenshot */
.device-laptop .chrome {
  position: absolute; top: 0; left: 0; right: 0;
  height: 22px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px;
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid rgba(15,31,26,0.08);
  z-index: 1;
}
html[data-theme="dark"] .device-laptop .chrome { background: rgba(15,23,42,0.92); border-bottom-color: rgba(255,255,255,0.05); }
.device-laptop .chrome .dot { width: 8px; height: 8px; border-radius: 50%; background: #ddd; }
.device-laptop .chrome .dot:nth-child(1) { background: #ff5f57; }
.device-laptop .chrome .dot:nth-child(2) { background: #febc2e; }
.device-laptop .chrome .dot:nth-child(3) { background: #28c840; }
.device-laptop .chrome .url {
  flex: 1; height: 14px; border-radius: 4px;
  background: rgba(15,31,26,0.07);
  margin-left: 6px;
  font-size: 9px; color: var(--text-muted);
  display: flex; align-items: center; padding: 0 6px;
  letter-spacing: 0.02em;
}
html[data-theme="dark"] .device-laptop .chrome .url { background: rgba(255,255,255,0.07); }

.device-phone {
  position: absolute;
  right: -2%; bottom: -18px;
  width: 32%;
  max-width: 210px;
  aspect-ratio: 9 / 18;
  background: linear-gradient(180deg, #0F1F1A, #050a08);
  border-radius: 26px;
  padding: 10px 8px;
  box-shadow:
    0 24px 48px -16px rgba(15, 31, 26, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  animation: floatY 5s ease-in-out infinite reverse;
  z-index: 2;
}
.device-phone .screen {
  width: 100%; height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg);
  position: relative;
}
.device-phone .screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.device-phone .notch {
  position: absolute; top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 36%; height: 12px;
  background: #0F1F1A;
  border-radius: 0 0 8px 8px;
  z-index: 1;
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (max-width: 720px) {
  .hero-showcase { margin-top: 40px; }
  .device-phone { right: -4%; width: 36%; }
}
@media (max-width: 480px) {
  .device-laptop { padding: 10px 10px 8px; border-radius: 12px 12px 4px 4px; }
  .device-laptop .chrome { height: 18px; }
  .device-phone { width: 42%; bottom: -10px; border-radius: 18px; padding: 6px 5px; }
  .device-phone .screen { border-radius: 12px; }
}

/* "Build your store in 3 steps" — visual card row with mockup thumbnails */
.build-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.build-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.25s var(--ease-smooth);
  animation: cardFadeIn 0.55s var(--ease) backwards;
  display: flex; flex-direction: column;
}
.build-step:hover { transform: translateY(-6px); border-color: var(--primary); box-shadow: var(--shadow-lg); }
.build-step .thumb {
  aspect-ratio: 16 / 10;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.build-step .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.build-step:hover .thumb img { transform: scale(1.06); }
.build-step .thumb .badge-num {
  position: absolute; top: 12px; left: 12px;
  background: var(--text); color: var(--bg);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
  box-shadow: 0 6px 14px -4px rgba(0,0,0,0.3);
}
.build-step .body { padding: 18px 20px 20px; }
.build-step .body h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.build-step .body p { color: var(--text-dim); font-size: 14px; line-height: 1.55; }

.build-steps .build-step:nth-child(1) { animation-delay: 0.05s; }
.build-steps .build-step:nth-child(2) { animation-delay: 0.15s; }
.build-steps .build-step:nth-child(3) { animation-delay: 0.25s; }

@media (max-width: 920px) { .build-steps { grid-template-columns: 1fr; } }

/* Storefront preview marquee — three mockups scrolling so the visitor
   sees what their own store will look like. Pure CSS, no JS. */
.preview-strip {
  position: relative;
  overflow: hidden;
  margin: 0 -20px;
  padding: 20px 0;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.preview-track {
  display: flex; gap: 22px;
  animation: marquee 28s linear infinite;
  width: max-content;
}
.preview-track:hover { animation-play-state: paused; }
.preview-track > .preview-card {
  flex: 0 0 320px;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.preview-track > .preview-card img { width: 100%; height: 100%; object-fit: cover; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* "Six simple things you can do" feature tiles — trimmed from 9 → 6,
   visual icons up front. */
.feature-grid.six { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 920px) { .feature-grid.six { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid.six { grid-template-columns: 1fr; } }

/* Pill row under the hero CTAs — three tiny "what you get" tags */
.hero-pills {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin: -16px auto 32px;
  animation: fadeUp 0.7s ease-out 0.25s backwards;
}
.hero-pills .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12.5px; color: var(--text-dim);
  box-shadow: var(--shadow-sm);
}
.hero-pills .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }

/* Reduced motion respect — every animated bit pauses. */
@media (prefers-reduced-motion: reduce) {
  .device-laptop, .device-phone, .preview-track, .hero::after,
  .feature, .build-step, .price, .step, .card, .stat, .faq details,
  .chat-mock .bubble, .hero h1, .hero .sub, .hero .ctas, .hero .trust,
  .channel-card, .flow-node, .flow-arrow,
  .dual-hero .laptop, .dual-hero .phone, .dual-hero .panel-bridge {
    animation: none !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ===========================================================
   DUAL-CHANNEL LANDING — built around the "website + WhatsApp,
   one panel" pitch. Hero pairs a laptop and phone with a glowing
   bridge that visually unites them; the flow diagram shows both
   channels merging into one admin dashboard.
   =========================================================== */

/* Hero: split visual — laptop (left) + phone (right) + bridge */
.dual-hero {
  position: relative;
  max-width: 1040px;
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 24px;
  align-items: center;
  animation: fadeUp 0.9s var(--ease) 0.35s backwards;
}
.dual-hero .laptop, .dual-hero .phone {
  position: relative;
}
.dual-hero .laptop {
  background: linear-gradient(180deg, #1a2832, #0F1F1A);
  border-radius: 18px 18px 6px 6px;
  padding: 14px 14px 12px;
  aspect-ratio: 16 / 10;
  box-shadow: 0 30px 60px -20px rgba(15, 31, 26, 0.35), 0 12px 24px -8px rgba(15, 31, 26, 0.25);
  animation: floatY 6.5s ease-in-out infinite;
}
.dual-hero .laptop::after {
  content: ''; position: absolute; left: -3%; right: -3%; bottom: -8px; height: 10px;
  background: linear-gradient(180deg, #0F1F1A, #050a08);
  border-radius: 0 0 12px 12px;
}
.dual-hero .laptop .screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 8px; overflow: hidden; background: var(--surface);
}
.dual-hero .laptop .screen img { width: 100%; height: 100%; object-fit: cover; }
.dual-hero .laptop .chrome {
  position: absolute; top: 0; left: 0; right: 0; height: 22px; z-index: 1;
  display: flex; align-items: center; gap: 6px; padding: 0 10px;
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid rgba(15,31,26,0.08);
}
html[data-theme="dark"] .dual-hero .laptop .chrome { background: rgba(15,23,42,0.92); }
.dual-hero .laptop .chrome .dot { width: 8px; height: 8px; border-radius: 50%; background: #ddd; }
.dual-hero .laptop .chrome .dot:nth-child(1) { background: #ff5f57; }
.dual-hero .laptop .chrome .dot:nth-child(2) { background: #febc2e; }
.dual-hero .laptop .chrome .dot:nth-child(3) { background: #28c840; }
.dual-hero .laptop .chrome .url {
  flex: 1; height: 14px; border-radius: 4px;
  background: rgba(15,31,26,0.07);
  margin-left: 6px; font-size: 9px; color: var(--text-muted);
  display: flex; align-items: center; padding: 0 6px;
}

.dual-hero .laptop-tag, .dual-hero .phone-tag {
  position: absolute;
  top: -12px;
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  letter-spacing: 0.04em; text-transform: uppercase;
  z-index: 3;
  box-shadow: 0 6px 14px -4px rgba(15, 31, 26, 0.3);
}
.dual-hero .laptop-tag { left: 16px; background: var(--primary); color: #fff; }
.dual-hero .phone-tag  { left: 50%; transform: translateX(-50%); background: #25d366; color: #fff; }
.dual-hero .laptop-tag::before, .dual-hero .phone-tag::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.85); margin-right: 6px;
  vertical-align: middle;
  animation: tagDot 1.6s ease-in-out infinite;
}
@keyframes tagDot { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

.dual-hero .phone {
  width: 100%; max-width: 220px; margin: 0 auto;
  background: linear-gradient(180deg, #0F1F1A, #050a08);
  border-radius: 26px;
  padding: 10px 8px;
  aspect-ratio: 9 / 18;
  box-shadow: 0 24px 48px -16px rgba(15, 31, 26, 0.45);
  animation: floatY 5s ease-in-out infinite reverse;
}
.dual-hero .phone .screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 18px; overflow: hidden; background: var(--bg);
}
.dual-hero .phone .screen img { width: 100%; height: 100%; object-fit: cover; }
.dual-hero .phone .notch {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 36%; height: 10px;
  background: #0F1F1A; border-radius: 0 0 8px 8px; z-index: 1;
}

/* Bridge between laptop and phone: glowing dotted line + central
   "panel" pill labelled "Your panel" — visual unification. */
.dual-hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 35%; right: 35%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--primary) 0 6px, transparent 6px 12px);
  background-size: 200% 100%;
  animation: bridgeFlow 1.4s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes bridgeFlow { from { background-position: 0 0; } to { background-position: 200% 0; } }
.dual-hero .panel-bridge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface);
  border: 2px solid var(--primary);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px; font-weight: 700;
  color: var(--text);
  box-shadow: 0 8px 20px -6px rgba(43, 165, 255, 0.4), 0 0 0 6px var(--primary-soft);
  white-space: nowrap;
  z-index: 1;
  animation: panelGlow 2.4s ease-in-out infinite;
}
.dual-hero .panel-bridge::before {
  content: '🎛️'; margin-right: 6px;
}
@keyframes panelGlow {
  0%, 100% { box-shadow: 0 8px 20px -6px rgba(43, 165, 255, 0.4), 0 0 0 6px var(--primary-soft); }
  50%      { box-shadow: 0 8px 30px -4px rgba(43, 165, 255, 0.55), 0 0 0 14px transparent; }
}

@media (max-width: 820px) {
  .dual-hero { grid-template-columns: 1fr; gap: 60px; }
  .dual-hero::before { left: 50%; right: auto; top: 48%; bottom: 48%; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, var(--primary) 0 6px, transparent 6px 12px);
    background-size: 100% 200%;
    animation: bridgeFlowV 1.4s linear infinite;
  }
  @keyframes bridgeFlowV { from { background-position: 0 0; } to { background-position: 0 200%; } }
  .dual-hero .panel-bridge { top: 50%; }
  .dual-hero .phone { max-width: 200px; }
}

/* ═══════════════════════════════════════════════════════════════════
   LIVE STOREFRONT MOCKUPS — pure HTML/CSS recreations of what the
   customer's panel actually looks like (storefront / customer portal /
   admin dashboard). These replace the static mockup-*.png images so
   visitors see a faithful, themed, scalable preview of what they're
   building, not a stale screenshot.

   Three mockups:
     .live-store    — public storefront (3 service cards + header)
     .live-portal   — customer's "My account" view (balance + tx list)
     .live-admin    — owner's admin dashboard (sidebar + stats + table)

   They all share .mockup-frame as the outer browser-chrome wrapper so
   the laptop and channel-card frames can drop any of them in.
   ══════════════════════════════════════════════════════════════════ */

.mockup-frame {
  position: relative;
  width: 100%;
  background: var(--surface);
  border-radius: 8px;
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  color: var(--text);
  line-height: 1.35;
}

/* ─── Live Storefront — replicates /store/<slug> ────────────────── */
.live-store {
  display: flex; flex-direction: column;
  height: 100%;
  background: linear-gradient(180deg, #fff7f0 0%, #ffeede 100%);
}
html[data-theme="dark"] .live-store {
  background: linear-gradient(180deg, #0b1220 0%, #0f1a2e 100%);
}
.live-store .ls-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(15,23,42,0.06);
}
html[data-theme="dark"] .live-store .ls-header {
  background: rgba(15,23,42,0.7);
  border-bottom-color: rgba(255,255,255,0.06);
}
.live-store .ls-logo {
  display: flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: 12px; color: var(--text);
}
.live-store .ls-logo::before {
  content: '🏪';
  font-size: 14px;
}
.live-store .ls-actions {
  display: flex; gap: 4px; align-items: center;
}
.live-store .ls-pill {
  background: rgba(15,23,42,0.06);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 9px; font-weight: 600;
  color: var(--text);
}
html[data-theme="dark"] .live-store .ls-pill {
  background: rgba(255,255,255,0.08);
}
.live-store .ls-shop {
  background: var(--primary);
  color: #fff;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 9px; font-weight: 700;
}
.live-store .ls-hero {
  padding: 14px 14px 10px;
  text-align: center;
}
.live-store .ls-hero h1 {
  font-size: 14px; font-weight: 800;
  margin: 0 0 4px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.live-store .ls-hero p {
  font-size: 9.5px; color: var(--text-muted);
  margin: 0;
}
.live-store .ls-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 6px 12px 12px;
}
.live-store .ls-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 8px 10px;
  position: relative;
  display: flex; flex-direction: column;
  box-shadow: 0 4px 12px -6px rgba(15,23,42,0.08);
  animation: lsCardFloat 4s ease-in-out infinite;
}
.live-store .ls-card:nth-child(2) { animation-delay: 0.5s; }
.live-store .ls-card:nth-child(3) { animation-delay: 1s; }
@keyframes lsCardFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.live-store .ls-thumb {
  aspect-ratio: 4 / 3;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
}
.live-store .ls-card:nth-child(1) .ls-thumb {
  background: radial-gradient(circle at 30% 30%, #fce7f3, #fbcfe8);
}
.live-store .ls-card:nth-child(2) .ls-thumb {
  background: radial-gradient(circle at 30% 30%, #fee2e2, #fecaca);
}
.live-store .ls-card:nth-child(3) .ls-thumb {
  background: radial-gradient(circle at 30% 30%, #dbeafe, #bfdbfe);
}
.live-store .ls-tag {
  position: absolute; top: 4px; left: 4px;
  background: rgba(15,23,42,0.78); color: #fff;
  font-size: 7px; font-weight: 700;
  padding: 2px 5px; border-radius: 999px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.live-store .ls-ribbon {
  position: absolute; top: 4px; right: 4px;
  background: linear-gradient(135deg, #f97316, #ef4444);
  color: #fff;
  font-size: 7px; font-weight: 800;
  padding: 2px 5px; border-radius: 999px;
  letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: 0 2px 6px -1px rgba(239,68,68,0.5);
}
.live-store .ls-stars {
  font-size: 8px; color: #f59e0b; letter-spacing: 1px;
  margin-bottom: 2px;
}
.live-store .ls-name {
  font-size: 10px; font-weight: 700; color: var(--text);
  line-height: 1.2;
  /* clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
  min-height: 24px;
}
.live-store .ls-price-row {
  display: flex; align-items: baseline; gap: 4px;
  margin-top: auto;
  margin-bottom: 6px;
}
.live-store .ls-price {
  font-size: 12px; font-weight: 800; color: var(--primary);
  letter-spacing: -0.02em;
}
.live-store .ls-mrp {
  font-size: 8.5px; color: var(--text-muted);
  text-decoration: line-through;
}
.live-store .ls-btn {
  display: block; width: 100%;
  background: var(--primary); color: #fff;
  border-radius: 5px;
  padding: 4px 0;
  font-size: 9px; font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ─── Live Customer Portal — replicates /store/<slug>/my ─────── */
.live-portal {
  display: flex; flex-direction: column;
  height: 100%;
  padding: 12px;
  background: linear-gradient(180deg, #fdf8f3 0%, #f9eedf 100%);
  gap: 10px;
}
html[data-theme="dark"] .live-portal {
  background: linear-gradient(180deg, #0b1220 0%, #1a1d3a 100%);
}
.live-portal .lp-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.live-portal .lp-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 8px;
  position: relative;
  overflow: hidden;
}
.live-portal .lp-stat::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #22c55e, #06b6d4, #6366f1);
}
.live-portal .lp-stat:nth-child(2)::before { background: linear-gradient(90deg, #f59e0b, #ec4899); }
.live-portal .lp-stat:nth-child(3)::before { background: linear-gradient(90deg, #06b6d4, #3b82f6); }
.live-portal .lp-stat .lbl {
  font-size: 7.5px; color: var(--text-muted);
  letter-spacing: 0.06em; font-weight: 700; text-transform: uppercase;
}
.live-portal .lp-stat .val {
  font-size: 13px; font-weight: 800; color: var(--text);
  letter-spacing: -0.02em;
  margin-top: 2px;
  background: linear-gradient(135deg, #22c55e, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.live-portal .lp-stat:nth-child(2) .val { background: linear-gradient(135deg, var(--brand-blue,#2ba5ff), var(--brand-green,#9be80f)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.live-portal .lp-stat:nth-child(3) .val { background: linear-gradient(135deg, var(--brand-green,#9be80f), var(--brand-blue,#2ba5ff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.live-portal .lp-tabs {
  display: flex; gap: 4px;
  flex-wrap: wrap;
}
.live-portal .lp-tab {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 9px; font-weight: 600;
  color: var(--text-muted);
}
.live-portal .lp-tab.active {
  background: linear-gradient(135deg, #22c55e, #10b981);
  color: #fff;
  border-color: transparent;
}
.live-portal .lp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
  overflow: hidden;
}
.live-portal .lp-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #ec4899, #8b5cf6, #3b82f6, #06b6d4, #22c55e);
}
.live-portal .lp-card-h {
  font-size: 10px; font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.live-portal .lp-tx {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-soft, var(--border));
  gap: 8px;
  min-height: 0;
}
.live-portal .lp-tx:last-child { border-bottom: none; }
.live-portal .lp-tx .ttl {
  font-size: 9.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-portal .lp-tx .tm {
  font-size: 8px; color: var(--text-muted);
  margin-top: 1px;
}
.live-portal .lp-tx .amt {
  font-size: 10px; font-weight: 800;
  white-space: nowrap;
}
.live-portal .lp-tx .amt.cr { color: #16a34a; }
.live-portal .lp-tx .amt.dr { color: #dc2626; }

/* ─── Live Admin Dashboard — replicates the owner-side panel ───── */
.live-admin {
  display: grid;
  grid-template-columns: 80px 1fr;
  height: 100%;
  background: var(--bg-soft, #f8fafc);
}
html[data-theme="dark"] .live-admin {
  background: #0a1020;
}
.live-admin .la-side {
  background: linear-gradient(180deg, #0F1F1A, #08120D);
  padding: 8px 6px;
  display: flex; flex-direction: column; gap: 3px;
}
.live-admin .la-brand {
  color: #fff; font-weight: 800; font-size: 10px;
  padding: 6px 8px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 6px;
}
.live-admin .la-nav {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  font-size: 8.5px; color: rgba(255,255,255,0.65); font-weight: 600;
  border-radius: 5px;
  white-space: nowrap;
}
.live-admin .la-nav.active {
  background: rgba(34,197,94,0.18);
  color: #4ade80;
}
.live-admin .la-main {
  padding: 10px 12px;
  overflow: hidden;
}
.live-admin .la-stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.live-admin .la-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 7px;
}
.live-admin .la-stat .lbl {
  font-size: 7px; color: var(--text-muted);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.live-admin .la-stat .val {
  font-size: 12px; font-weight: 800; color: var(--text);
  margin-top: 1px;
}
.live-admin .la-stat .delta {
  font-size: 7.5px; color: #16a34a; font-weight: 700;
  margin-top: 1px;
}
.live-admin .la-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}
.live-admin .la-card-h {
  font-size: 9px; font-weight: 700; color: var(--text);
  margin-bottom: 6px;
  display: flex; align-items: center; justify-content: space-between;
}
.live-admin .la-card-h .pill {
  background: rgba(34,197,94,0.15);
  color: #16a34a;
  font-size: 7px; font-weight: 800;
  padding: 1px 5px; border-radius: 999px;
}
.live-admin .la-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
  font-size: 8.5px;
  border-bottom: 1px dashed var(--border);
}
.live-admin .la-row:last-child { border-bottom: none; }
.live-admin .la-row .who { color: var(--text); font-weight: 600; }
.live-admin .la-row .amt { color: var(--primary); font-weight: 800; }
.live-admin .la-row .badge {
  font-size: 7px; font-weight: 700;
  padding: 1px 5px; border-radius: 999px;
  background: rgba(34,197,94,0.15); color: #16a34a;
}
.live-admin .la-row .badge.warn { background: rgba(245,158,11,0.18); color: #d97706; }

/* When a mockup is dropped inside .channel-card .preview, fade-in
   gently and clamp height so the card stays compact. */
.channel-card .preview .mockup-frame { aspect-ratio: 16 / 11; }

/* When dropped into the laptop/phone screen, pin the inner content
   to the device aspect ratio (the screen is already aspect-ratio:
   16/10 or 9/18 from the .laptop / .phone parent, and the mockup-
   frame just fills 100% × 100%). */
.dual-hero .laptop .screen .mockup-frame,
.dual-hero .phone .screen .mockup-frame {
  width: 100%; height: 100%;
  border-radius: 0;
}
.dual-hero .laptop .screen .mockup-frame {
  /* The chrome bar (height:22px) is drawn by .dual-hero .laptop .chrome
     which is positioned absolutely on top — push the mockup down
     under it so the storefront header sits below the URL bar. */
  padding-top: 22px;
}

/* Smaller fixed-size variant used inside the build-step thumbnails */
.build-step .thumb .mockup-frame {
  width: 100%; height: 100%;
}

/* Smaller font scale for very small previews (build-step thumbs) */
.build-step .thumb .live-store .ls-grid { gap: 5px; padding: 4px 6px 6px; }
.build-step .thumb .live-store .ls-card { padding: 5px 5px 6px; }
.build-step .thumb .live-store .ls-name { font-size: 8.5px; min-height: 18px; -webkit-line-clamp: 2; }
.build-step .thumb .live-store .ls-price { font-size: 10px; }
.build-step .thumb .live-store .ls-btn { font-size: 8px; padding: 3px 0; }
.build-step .thumb .live-store .ls-hero h1 { font-size: 11px; }
.build-step .thumb .live-store .ls-hero p { font-size: 8px; }

@media (max-width: 600px) {
  .mockup-frame { font-size: 10px; }
  .live-store .ls-grid { gap: 6px; padding: 4px 8px 8px; }
  .live-store .ls-card { padding: 6px; }
  .live-store .ls-name { font-size: 9px; min-height: 22px; }
  .live-store .ls-price { font-size: 11px; }
  .live-admin { grid-template-columns: 60px 1fr; }
  .live-admin .la-stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* ===== "Two ways to sell" channel cards ===== */
.channels {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.channel-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
  animation: cardFadeIn 0.55s var(--ease) backwards;
  overflow: hidden;
}
.channel-card::before {
  /* coloured top stripe — green for website, WhatsApp green for chat */
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent-band, var(--primary));
}
.channel-card.web   { --accent-band: linear-gradient(90deg, var(--primary), #14b8a6); }
.channel-card.chat  { --accent-band: linear-gradient(90deg, #25d366, #128c7e); }
.channel-card:hover { transform: translateY(-6px); border-color: var(--primary); box-shadow: var(--shadow-lg); }
.channel-card .ico {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--primary-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin-bottom: 16px;
}
.channel-card.chat .ico { background: rgba(37, 211, 102, 0.16); }
.channel-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.channel-card p  { color: var(--text-dim); font-size: 14.5px; line-height: 1.6; margin-bottom: 18px; }
.channel-card .preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16 / 10;
  background: var(--bg-soft);
}
.channel-card .preview img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.channel-card:hover .preview img { transform: scale(1.05); }
.channel-card .features-mini {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.channel-card .features-mini li {
  font-size: 13.5px; color: var(--text-dim);
  display: flex; align-items: center; gap: 8px;
}
.channel-card .features-mini li::before {
  content: '✓';
  color: var(--primary);
  font-weight: 800;
}

@media (max-width: 820px) { .channels { grid-template-columns: 1fr; } }

/* "vs" badge between the two cards on desktop */
.channels-wrap { position: relative; }
.channels-wrap .both-badge {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--text);
  color: var(--bg);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 8px 20px -4px rgba(15, 31, 26, 0.3);
}
.channels-wrap .both-badge::before { content: '＋ '; color: var(--primary); }
@media (max-width: 820px) { .channels-wrap .both-badge { display: none; } }

/* ===== Flow diagram: "One panel, both channels" ===== */
.flow {
  display: grid;
  grid-template-columns: 1fr 0.6fr 1fr 0.6fr 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 12px;
}
.flow-node {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 16px;
  text-align: center;
  transition: transform 0.3s, border-color 0.25s;
  animation: cardFadeIn 0.55s var(--ease) backwards;
}
.flow-node.center {
  background: linear-gradient(135deg, var(--primary-soft), transparent);
  border-color: var(--primary);
  box-shadow: 0 0 0 6px var(--primary-soft);
  transform: scale(1.04);
}
.flow-node:hover { transform: translateY(-4px); }
.flow-node.center:hover { transform: scale(1.04) translateY(-4px); }
.flow-node .ico {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bg-soft);
  margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.flow-node.center .ico { background: var(--primary); color: #fff; }
.flow-node.chat .ico   { background: rgba(37, 211, 102, 0.16); }
.flow-node.web  .ico   { background: rgba(20, 184, 166, 0.16); }
.flow-node h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.flow-node p  { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }

.flow-arrow {
  position: relative;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--primary) 0 6px, transparent 6px 12px);
  background-size: 200% 100%;
  animation: bridgeFlow 1.4s linear infinite;
}
.flow-arrow::after {
  content: '›';
  position: absolute;
  right: -2px; top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 28px; font-weight: 800;
  line-height: 0;
}

@media (max-width: 820px) {
  .flow { grid-template-columns: 1fr; gap: 8px; }
  .flow-arrow {
    width: 2px; height: 28px; margin: 0 auto;
    background: repeating-linear-gradient(180deg, var(--primary) 0 6px, transparent 6px 12px);
    background-size: 100% 200%;
    animation: bridgeFlowV 1.4s linear infinite;
  }
  .flow-arrow::after {
    content: '⌄'; right: 50%; top: auto; bottom: -10px; transform: translateX(50%);
  }
}

/* "One dashboard" composite mockup card — admin panel preview with
   small badges showing mixed orders (some from website, some from chat). */
.unified-dash {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items: center;
}
.unified-dash .copy h2 { font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 14px; }
.unified-dash .copy p  { color: var(--text-dim); font-size: 15.5px; line-height: 1.65; margin-bottom: 18px; max-width: 480px; }
.unified-dash .copy .pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.unified-dash .copy .pill-row .pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 13px;
  font-size: 12.5px; font-weight: 600;
}
.unified-dash .frame {
  position: relative;
  background: linear-gradient(180deg, #1a2832, #0F1F1A);
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow: 0 30px 60px -20px rgba(15, 31, 26, 0.35);
  aspect-ratio: 16 / 10;
}
.unified-dash .frame img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 6px;
  display: block;
}
.unified-dash .frame .chip {
  position: absolute;
  background: var(--surface);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; gap: 4px;
  box-shadow: 0 8px 16px -4px rgba(15,31,26,0.3);
  animation: chipFloat 4s ease-in-out infinite;
}
.unified-dash .frame .chip.web  { top: 14%; right: -10px; color: var(--primary); border: 1px solid var(--primary); animation-delay: 0s; }
.unified-dash .frame .chip.chat { bottom: 16%; left: -10px; color: #128c7e; border: 1px solid #25d366; animation-delay: 1.2s; }
@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (max-width: 820px) {
  .unified-dash { grid-template-columns: 1fr; }
  .unified-dash .frame .chip.chat { left: 8px; }
  .unified-dash .frame .chip.web  { right: 8px; }
}

/* ═════════════════════════════════════════════════════════════════
   Sidebar group labels + separators
   Used by /dashboard and /admin to break the menu into named
   clusters (OVERVIEW / CATALOG / SALES / STOREFRONT / ACCOUNT).
═════════════════════════════════════════════════════════════════ */
.nav-group { display: block; }
.nav-group-label {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; box-sizing: border-box;
  background: none; border: none; text-align: left; font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  font-weight: 700;
  padding: 12px 16px 4px;
  user-select: none; cursor: pointer;
  transition: color .15s;
}
.nav-group-label:hover { color: rgba(255,255,255,0.74); }
.nav-group-label .nav-chev { font-size: 11px; opacity: .6; transition: transform .2s ease; }
.nav-group.collapsed .nav-chev { transform: rotate(-90deg); }
.nav-group-items { overflow: hidden; max-height: 1200px; transition: max-height .28s ease; }
.nav-group.collapsed .nav-group-items { max-height: 0; }
.nav-sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  margin: 8px 12px 0;
}

/* ═════════════════════════════════════════════════════════════════
   Mobile top app-bar for /dashboard and /admin
   • Hidden on desktop (≥ 769 px)
   • Replaces the floating ☰ on mobile — bnav "More" tab is the
     new way to access the full sidebar drawer
   • Sticky at top, shows brand name (tap → home)
═════════════════════════════════════════════════════════════════ */
.mobile-topbar {
  display: none;
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 52px;
  z-index: 55;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--border, #e5e7eb);
  padding: 0 14px;
  padding-top: env(safe-area-inset-top, 0);
  align-items: center;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 4px 12px -8px rgba(0,0,0,0.18);
}
.mobile-topbar .mt-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text, #0f172a);
  font-weight: 700;
  font-size: 16px;
  min-width: 0;
  flex: 1;
}
.mobile-topbar .mt-emoji { font-size: 22px; line-height: 1; flex-shrink: 0; }
.mobile-topbar .mt-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
[data-theme="dark"] .mobile-topbar {
  background: #0f172a;
  border-bottom-color: rgba(255,255,255,0.08);
  color: #e2e8f0;
}
[data-theme="dark"] .mobile-topbar .mt-brand { color: #e2e8f0; }
@media (max-width: 768px) {
  .mobile-topbar { display: flex; }
  /* Hide the floating ☰ — bnav "More" tab replaces it on mobile.
     Use !important to defeat the .menu-toggle { display: flex }
     rule that lives in an earlier @media block. */
  .menu-toggle { display: none !important; }
  /* Push .main down so content clears both the new top app-bar
     (52 px) AND the bottom-nav (64 px). 60 px top is enough to
     account for safe-area + a comfortable gap; 84 px bottom was
     already set by the v38 bnav patch. */
  .main { padding-top: 60px !important; }
}

/* ═════════════════════════════════════════════════════════════════
   Mobile bottom-nav for /dashboard and /admin
   • Hidden on desktop (≥ 769 px)
   • Fixed bottom, 5 tabs, thumb-reach friendly
   • Adds padding-bottom to .main on mobile so content isn't
     hidden behind it
═════════════════════════════════════════════════════════════════ */
.dash-bnav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--surface, #fff);
  border-top: 1px solid var(--border, #e5e7eb);
  /* z-index 40 — below .nav-backdrop (45) and .nav (50), so when
     the user taps "More" the drawer's backdrop covers the bnav. */
  z-index: 40;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -4px 18px -8px rgba(0,0,0,0.18);
  justify-content: space-around;
  align-items: stretch;
  gap: 2px;
}
.dash-bnav .bnav-item {
  flex: 1 1 0;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 8px 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--text-dim, #5A6B66);
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.15s, color 0.15s;
}
.dash-bnav .bnav-item:hover { background: var(--bg-soft, rgba(0,0,0,0.04)); }
.dash-bnav .bnav-item.active {
  color: var(--primary, #22c55e);
  background: var(--primary-soft, rgba(34,197,94,0.10));
}
.dash-bnav .bnav-ico { font-size: 18px; line-height: 1; }
.dash-bnav .bnav-lbl {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
[data-theme="dark"] .dash-bnav {
  background: #0f172a;
  border-top-color: rgba(255,255,255,0.08);
}
@media (max-width: 768px) {
  .dash-bnav { display: flex; }
  /* Push the main content up so the bottom-nav doesn't cover the
     footer of long pages. 64 px = bnav height + safe-area cushion. */
  .main { padding-bottom: 84px !important; }
  /* Theme toggle / logout already handled by the nav drawer; keep
     them out of the way under the chip on mobile. */
  .nav .nav-group-label { padding: 10px 14px 2px; font-size: 9.5px; }
}

/* ═════════════════════════════════════════════════════════════════
   Mobile-friendly Providers table (and any table with a long URL)
   Ensures the "API URL" column truncates with ellipsis instead of
   forcing the table wider than the viewport. Tap-to-copy via the
   `data-truncate-url` attribute (wired by the Providers view).
═════════════════════════════════════════════════════════════════ */
.url-cell {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
}
.url-cell.copyable {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.url-cell.copyable:hover { color: var(--primary, #22c55e); }
@media (max-width: 768px) {
  .url-cell { max-width: 140px; font-size: 11.5px; }
}

/* ═════════════════════════════════════════════════════════════════
   Orders rich-grid + per-row Actions dropdown
   • .orders-grid   — wider table layout for the new column set
   • .order-actions-btn — the ⋮ Actions trigger
   • .order-actions-menu — floating menu opened by the trigger
═════════════════════════════════════════════════════════════════ */
/* Wrapper around .orders-grid that turns on horizontal scrolling so the
   table doesn't get clipped by the card / viewport on narrow screens.
   The grid totals ~1492 px of column widths; without this the Actions
   column on the right gets cut off at any zoom level under ~1500 px
   of available width inside the sidebar layout. */
.orders-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.orders-grid { min-width: 960px; }
.orders-grid th, .orders-grid td { vertical-align: top; padding: 10px 8px; font-size: 12.5px; }
.orders-grid thead th {
  background: var(--bg-soft, rgba(0,0,0,0.03));
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim, #5A6B66);
}
.orders-grid tbody tr:hover { background: var(--bg-soft, rgba(0,0,0,0.02)); }
/* Per-column widths — sized to fit a 1366 px laptop with 240 px
   sidebar + 64 px main padding (~1050 px available).
   With `table-layout: fixed` below, these widths are RESPECTED — the
   browser no longer expands the Link column to fit long URLs (which
   was crushing the Service column and forcing "Premium" to wrap
   mid-word). Anything that doesn't fit truncates per the .url-cell
   ellipsis rule, and the table-wrap container scrolls horizontally if
   the operator wants to see overflow. */
.orders-grid {
  table-layout: fixed;
  min-width: 1100px;            /* preserve readable layout below ~1100 viewport */
}
.orders-grid col.col-check    { width: 40px; }    /* was 24 — checkbox was getting clipped at 100% zoom */
.orders-grid col.col-id       { width: 92px; }
.orders-grid col.col-seller   { width: 90px; }
.orders-grid col.col-user     { width: 110px; }
.orders-grid col.col-service  { width: 200px; }   /* fits "✨ Premium" + name without breaking mid-word */
.orders-grid col.col-link     { width: 110px; }   /* long URLs truncate with ellipsis */
.orders-grid col.col-price    { width: 80px; }
.orders-grid col.col-qty      { width: 92px; }
.orders-grid col.col-status   { width: 130px; }   /* fits 2 badges (status + payment_status) without clipping */
.orders-grid col.col-when     { width: 110px; }
.orders-grid col.col-actions  { width: 82px; }
/* Checkbox cells: explicit centering + bigger visual target. Native
   checkboxes at default size (~13px) on a dark background were
   visually swallowed — accent-color paints the tick green in dark
   mode and a 16px square gives a real click target. */
.orders-grid th input[type="checkbox"],
.orders-grid td input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary, #22c55e);
}
.orders-grid th:first-child,
.orders-grid td:first-child {
  text-align: center;
  vertical-align: middle;
  padding-left: 6px;
  padding-right: 6px;
}
/* Force every inner block in a grid cell to respect the cell's
   width — the parent td may have max-width but inner <div>s with
   inherited `white-space: nowrap` (from the mobile-table rule)
   will spill out unless we explicitly clip them. */
.orders-grid td > div {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Service column wraps to two lines instead of truncating, so the
   operator can actually read the service name. The inline 80-char
   slice in JS keeps it bounded; CSS handles the visual wrap. */
.orders-grid .col-service ~ * { /* placeholder to anchor the rule */ }
.orders-grid td.svc-cell > div:first-child,
.orders-grid td:nth-child(5) > div:first-child {
  white-space: normal;
  /* overflow-wrap: break-word only breaks unbreakable strings (long
     URLs, hashes); word-break: break-word would split short words
     like "Premium" mid-letter — exactly the regression that prompted
     this fix. */
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.35;
}
/* Ensure .url-cell inside the orders grid clips properly even
   when the existing nowrap rule from elsewhere applies. */
.orders-grid .url-cell {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Mobile override: bump the orders-grid's tbody min-width so all
   11 columns have room to breathe. The grid scrolls horizontally
   inside its card container — better than collapsing columns into
   each other. The earlier 640 px rule was tuned for 6-7 column
   tables and is too narrow here. */
@media (max-width: 768px) {
  .card .orders-grid { min-width: 0; }
  .card .orders-grid > thead,
  .card .orders-grid > tbody {
    min-width: 1280px;
  }
}
.order-actions-btn {
  font-size: 13px !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
}
.order-actions-menu {
  position: absolute;
  z-index: 200;
  width: 240px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 10px 30px -8px rgba(15,23,42,0.25), 0 4px 12px rgba(15,23,42,0.08);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: oamFadeIn 0.12s ease-out;
}
@keyframes oamFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.order-actions-menu button {
  background: transparent;
  border: 0;
  padding: 9px 12px;
  text-align: left;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text, #0f172a);
  cursor: pointer;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.12s;
}
.order-actions-menu button:hover { background: var(--bg-soft, rgba(0,0,0,0.04)); }
.order-actions-menu button.danger { color: #dc2626; }
.order-actions-menu button.danger:hover { background: rgba(239,68,68,0.08); }
.order-actions-menu .oam-sep {
  height: 1px;
  background: var(--border, #e5e7eb);
  margin: 4px 4px;
}
[data-theme="dark"] .order-actions-menu {
  background: #1f2937;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
}
[data-theme="dark"] .order-actions-menu button { color: #e2e8f0; }
[data-theme="dark"] .order-actions-menu button:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .order-actions-menu .oam-sep { background: rgba(255,255,255,0.08); }

/* ═════════════════════════════════════════════════════════════════
   Mobile catch-all wrap rules
   • Topbars and inline button rows that didn't get explicit
     flex-wrap fixes get one here.
   • <code> blocks containing long domains/emails wrap onto
     multiple lines instead of forcing horizontal scroll.
   • Inputs / textareas inside cards never exceed parent width.
═════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .card .row { flex-wrap: wrap; gap: 8px; }
  .card code,
  .card pre {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
  }
  .card input[type="text"],
  .card input[type="url"],
  .card input[type="email"],
  .card input[type="tel"],
  .card textarea {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Action button clusters in tables — keep them on one row but
     allow horizontal scroll within the cell so they don't push
     the page wider than the viewport. */
  td[style*="white-space:nowrap"] { padding-right: 8px; }
}