/* ============================================================
   GoElev8.ai Portal — 2026 design system
   Inspired by Linear / Vercel / Stripe dashboards
   ============================================================ */

:root {
  /* Surfaces */
  --bg-0: #07080d;
  --bg-1: #0b0c14;
  --bg-2: #11131c;
  --bg-3: #161924;
  --bg-elevated: rgba(22, 25, 36, 0.72);
  --bg-glass: rgba(255, 255, 255, 0.03);
  --bg-glass-strong: rgba(255, 255, 255, 0.05);

  /* Borders */
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.10);
  --border-accent: rgba(126, 87, 255, 0.35);

  /* Text */
  --text: #f0f1f5;
  --text-dim: #a8acbb;
  --text-mute: #6b6f80;

  /* Brand — electric violet → cyan gradient (premium AI feel) */
  --brand-1: #00CFFF;     /* violet */
  --brand-2: #00b8e6;     /* indigo */
  --brand-3: #00CFFF;     /* cyan  */
  --brand-grad: linear-gradient(135deg, #00CFFF 0%, #00b8e6 50%, #00CFFF 100%);
  --brand-grad-hover: linear-gradient(135deg, #9d72ff 0%, #7a7eff 50%, #1cc7e2 100%);
  --brand-glow: 0 0 0 1px rgba(0, 207, 255, 0.4), 0 8px 32px rgba(0, 184, 230, 0.25);

  /* Semantic */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #00CFFF;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.35);
  --shadow-glow: 0 0 80px -20px rgba(0, 207, 255, 0.5);

  /* Type */
  --font-sans: 'Inter', 'Outfit', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* iOS / Dynamic Island safe-area shortcuts. Used throughout the
     mobile layout so notch + home indicator never clip content. */
  --sat: env(safe-area-inset-top);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
  --sar: env(safe-area-inset-right);
}

input, textarea { touch-action: manipulation; }

* { box-sizing: border-box; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 10px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  letter-spacing: -0.01em;
}

/* Ambient background — animated radial gradients give the "AI infra" vibe */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 10%, rgba(0, 207, 255, 0.13) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 85% 20%, rgba(0, 207, 255, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(0, 184, 230, 0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: drift 24s ease-in-out infinite alternate;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, black 30%, transparent 80%);
}
@keyframes drift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-2%, 2%) scale(1.05); }
}

a { color: var(--brand-3); text-decoration: none; transition: color 0.15s; }
a:hover { color: #1cc7e2; }

button { font-family: inherit; cursor: pointer; }
input, textarea, select, button { font-family: inherit; }

h1, h2, h3 { letter-spacing: -0.02em; font-weight: 600; margin: 0; }
h1 { font-size: 28px; line-height: 1.15; }
h2 { font-size: 17px; font-weight: 600; }
.muted { color: var(--text-dim); font-size: 13px; }

/* ============================================================
   App layout
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* Sidebar */
.sidebar {
  background: linear-gradient(180deg, rgba(11,12,20,0.6) 0%, rgba(7,8,13,0.4) 100%);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-right: 1px solid var(--border);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 18px;
  margin-bottom: 8px;
}
.brand .logo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--brand-grad);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  color: white;
  box-shadow: var(--brand-glow);
  position: relative;
  overflow: hidden;
}
.brand .logo img {
  width: 85%;
  height: 85%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.brand .logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.25) 50%, transparent 60%);
  animation: shine 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shine {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}
.brand .name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.brand .name small {
  display: block;
  font-size: 11px;
  color: var(--text-mute);
  font-weight: 400;
  margin-top: 1px;
  letter-spacing: 0;
}

.client-pill {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.client-pill::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,207,255,0.4), transparent);
}
.client-pill .name {
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.client-pill .name::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}
.client-pill .num {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 4px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav button {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid transparent;
  text-align: left;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 500;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav button::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: currentColor;
  opacity: 0.5;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.nav button:hover {
  background: var(--bg-glass);
  color: var(--text);
}
.nav button.active {
  background: var(--bg-glass-strong);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.nav button.active::after {
  content: '';
  margin-left: auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-1);
  box-shadow: 0 0 8px var(--brand-1);
}

.signout {
  background: transparent;
  color: var(--text-mute);
  border: 1px solid var(--border);
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  transition: all 0.15s;
}
.signout:hover { color: var(--text); border-color: var(--border-strong); background: var(--bg-glass); }

/* Main */
.main {
  padding: 32px 40px 60px;
  overflow-x: hidden;
  max-width: 1400px;
  width: 100%;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
}
.topbar h1 {
  background: linear-gradient(180deg, #ffffff 0%, #c0c4d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   Cards & panels — glassmorphism
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.card {
  background: var(--bg-elevated);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.card .label {
  color: var(--text-mute);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  font-weight: 500;
}
.card .value {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-feature-settings: "tnum";
  line-height: 1.1;
}
.card .sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 8px;
}
.card.accent {
  border-color: var(--border-accent);
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(0,207,255,0.15) 0%, transparent 60%),
    var(--bg-elevated);
}
.card.accent .value {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.card.warn {
  border-color: rgba(245, 158, 11, 0.35);
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(245,158,11,0.12) 0%, transparent 60%),
    var(--bg-elevated);
}

.panel {
  background: var(--bg-elevated);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 20px;
  position: relative;
}
.panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}
.panel h2 { margin-bottom: 14px; }

.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }

/* ============================================================
   Forms
   ============================================================ */
input, textarea, select {
  background: var(--bg-glass);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  font-size: 13.5px;
  width: 100%;
  transition: all 0.15s ease;
}
input::placeholder, textarea::placeholder { color: var(--text-mute); }
input:hover, textarea:hover, select:hover { border-color: var(--border-strong); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: rgba(0, 207, 255, 0.6);
  background: rgba(0, 207, 255, 0.04);
  box-shadow: 0 0 0 3px rgba(0, 207, 255, 0.12);
}
label {
  font-size: 11px;
  color: var(--text-mute);
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* Buttons */
.btn {
  background: var(--brand-grad);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 4px 12px rgba(0,184,230,0.25);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand-grad-hover);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 8px 24px rgba(0,184,230,0.4); }
.btn:hover::before { opacity: 1; }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn.ghost {
  background: var(--bg-glass);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn.ghost::before { display: none; }
.btn.ghost:hover { background: var(--bg-glass-strong); border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.btn.danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 4px 12px rgba(239,68,68,0.25);
}
.btn.danger::before { background: linear-gradient(135deg, #f87171 0%, #ef4444 100%); }

.btn.green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 4px 12px rgba(16,185,129,0.25);
}
.btn.green::before { background: linear-gradient(135deg, #34d399 0%, #10b981 100%); }

.btn.sm { padding: 6px 12px; font-size: 12px; }

/* ============================================================
   Tables
   ============================================================ */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
th {
  text-align: left;
  color: var(--text-mute);
  font-weight: 500;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
td {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
tr { transition: background 0.15s; }
tr:hover td { background: rgba(255,255,255,0.02); }
tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   Messages / chat
   ============================================================ */
.chat-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  height: calc(100vh - 160px);
}
.chat-list, .chat-pane {
  background: var(--bg-elevated);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  min-height: 0;
}
.chat-list { overflow-y: auto; padding: 6px; }
.chat-list .item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 2px;
  position: relative;
}
.chat-list .item:hover { background: var(--bg-glass); }
.chat-list .item.active {
  background: linear-gradient(135deg, rgba(0,207,255,0.12) 0%, rgba(0,184,230,0.06) 100%);
  border: 1px solid rgba(0,207,255,0.3);
  padding: 11px 13px;
}
.chat-list .item .item-main { flex: 1; min-width: 0; }
.chat-list .item .name-row {
  display: flex; align-items: baseline; gap: 8px; justify-content: space-between;
}
.chat-list .item .name { font-weight: 600; font-size: 13.5px; color: var(--text); }
.chat-list .item .time {
  font-size: 11px;
  color: var(--text-mute);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.chat-list .item .preview {
  color: var(--text-dim);
  font-size: 12px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-list .item.unread .name { color: #fff; }
.chat-list .item.unread .preview { color: var(--text); font-weight: 500; }
.chat-list .item .unread-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #00d4ff;
  box-shadow: 0 0 8px rgba(0,212,255,0.7);
  margin-top: 6px;
  flex-shrink: 0;
}
.chat-empty-side {
  padding: 14px;
  color: var(--text-dim);
  font-size: 13px;
}
.chat-empty {
  margin: auto;
  padding: 40px 30px;
  text-align: center;
  color: var(--text-dim);
}
.chat-empty-title { font-size: 15px; margin-bottom: 8px; color: var(--text); }
.chat-empty-sub { font-size: 13px; }
.chat-thread-empty {
  margin: auto;
  color: var(--text-dim);
  font-size: 13px;
}

.chat-pane { display: flex; flex-direction: column; }
.chat-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-header .chat-back {
  display: none; /* hidden on desktop, shown on mobile */
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text);
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-header .chat-back:hover {
  background: var(--bg-glass-strong);
  border-color: var(--border-strong);
}
.chat-header-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.chat-header-id strong {
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-header-id .muted {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}
.chat-header-stats {
  margin-left: auto;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(8, 10, 15, 0.35);
}
.bubble {
  max-width: 70%;
  padding: 11px 16px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.45;
  animation: bubble-in 0.3s ease;
}
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.bubble.in {
  background: #1a1f2e;
  border: 1px solid var(--border);
  color: #ffffff;
  align-self: flex-start;
  border-bottom-left-radius: 6px;
}
.bubble.out {
  background: #00d4ff;
  color: #07080d;
  align-self: flex-end;
  border-bottom-right-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 212, 255, 0.28);
}
.bubble .bubble-body { white-space: pre-wrap; word-wrap: break-word; }
.bubble .ts {
  font-size: 10px;
  margin-top: 5px;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 4px;
}
.bubble.in .ts { color: rgba(255, 255, 255, 0.55); }
.bubble.out .ts { color: rgba(7, 8, 13, 0.65); }
.msg-status {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(7, 8, 13, 0.18);
  color: rgba(7, 8, 13, 0.85);
  border: 1px solid rgba(7, 8, 13, 0.18);
}
.msg-status.delivered {
  background: rgba(0, 232, 154, 0.18);
  color: #007a4f;
  border-color: rgba(0, 232, 154, 0.4);
}
.msg-status.failed {
  background: rgba(255, 80, 90, 0.18);
  color: #b51020;
  border-color: rgba(255, 80, 90, 0.4);
}
.msg-status.sent {
  background: rgba(7, 8, 13, 0.20);
  color: rgba(7, 8, 13, 0.80);
}
.composer {
  border-top: 1px solid var(--border);
  padding: 16px;
  background: rgba(7,8,13,0.4);
}
.suggestions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.suggestions button {
  background: var(--bg-glass);
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  transition: all 0.15s;
}
.suggestions button:hover {
  background: rgba(0,207,255,0.1);
  border-color: rgba(0,207,255,0.4);
  color: var(--text);
}
.composer-row { display: flex; gap: 10px; align-items: flex-end; }
.composer-row textarea { resize: none; min-height: 50px; }

/* ============================================================
   Login screen
   ============================================================ */
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  position: relative;
  z-index: 1;
}
.login .box {
  background: var(--bg-elevated);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2xl);
  padding: 44px 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  position: relative;
  overflow: hidden;
}
.login .box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,207,255,0.6), rgba(0,207,255,0.6), transparent);
}
.login .login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.login .login-brand .logo {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--brand-grad);
  display: grid;
  place-items: center;
  box-shadow: var(--brand-glow);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.login .login-brand .logo img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.login .login-brand .logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%);
  animation: shine 5s ease-in-out infinite;
  pointer-events: none;
}
.login h1 {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.02em;
}
.login p {
  color: var(--text-dim);
  margin: 4px 0 28px;
  font-size: 13.5px;
}
.login .field { margin-bottom: 14px; }
.login .field label {
  /* cursor: pointer + explicit touch-action tells iOS PWA standalone
     WebView to treat the label as an immediately-clickable element.
     Without these hints, the first tap after a cold PWA launch is
     silently eaten on iOS while WKWebView decides whether the element
     is "interactive". */
  cursor: pointer;
  touch-action: manipulation;
}
.login .field input { touch-action: manipulation; }
.login .err {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  font-size: 13px;
  margin-bottom: 16px;
}
.login .btn { width: 100%; padding: 12px; margin-top: 8px; font-size: 14px; }
.login .footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ============================================================
   Modal
   ============================================================ */
.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
  animation: fade-in 0.2s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--bg-elevated);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: 28px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
  animation: modal-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal h2 { margin-bottom: 20px; font-size: 18px; }
.field { margin-bottom: 14px; }

/* ============================================================
   Contact Import modal
   ============================================================ */
.import-modal { max-width: 600px; }
.import-steps {
  display: flex; gap: 4px; margin-bottom: 20px;
  border-bottom: 1px solid var(--border, #2a3a5c); padding-bottom: 14px;
}
.import-step {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8rem; color: var(--text-mute, #666);
  flex: 1; justify-content: center;
}
.import-step.active { color: var(--brand-1, #00CFFF); font-weight: 600; }
.import-step.done { color: var(--success, #27ae60); }
.import-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-glass-strong, rgba(255,255,255,0.06));
  font-size: 0.7rem; font-weight: 700;
}
.import-step.active .import-step-num { background: var(--brand-1, #00CFFF); color: #000; }
.import-step.done .import-step-num { background: var(--success, #27ae60); color: #fff; }

.import-dropzone {
  border: 2px dashed var(--border, #2a3a5c); border-radius: var(--r-md, 12px);
  padding: 32px 20px; text-align: center; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.import-dropzone:hover, .import-dropzone.dragover {
  border-color: var(--brand-1, #00CFFF);
  background: rgba(0, 207, 255, 0.04);
}

.import-map-table { width: 100%; }
.import-map-table select {
  width: 100%; padding: 6px 8px;
  background: var(--bg-1, #0d1117); border: 1px solid var(--border, #2a3a5c);
  border-radius: 6px; color: var(--text, #e0e0e0); font-size: 0.8rem;
}

.import-review-list {
  max-height: 300px; overflow-y: auto;
  border: 1px solid var(--border, #2a3a5c); border-radius: var(--r-sm, 8px);
}
.import-review-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--border, #2a3a5c);
  font-size: 0.85rem;
}
.import-review-row:last-child { border-bottom: none; }

.import-footer {
  display: flex; gap: 12px; justify-content: flex-end; margin-top: 16px;
}

/* ============================================================
   Leads metrics — horizontal stat strip
   ============================================================ */
.leads-metrics { margin-bottom: 16px; }
.leads-metrics-strip {
  display: flex; align-items: center; gap: 0;
  background: var(--bg-elevated, #141c2e);
  border: 1px solid var(--border, #2a3a5c);
  border-radius: var(--r-md, 12px);
  padding: 16px 0;
}
.metric-stat {
  flex: 1; display: flex; align-items: baseline; gap: 8px;
  justify-content: center; padding: 0 20px;
}
.metric-stat-value {
  font-size: 1.6rem; font-weight: 700; color: var(--text, #e0e0e0);
}
.metric-stat.accent .metric-stat-value { color: var(--brand-1, #00CFFF); }
.metric-stat-label {
  font-size: 0.8rem; color: var(--text-mute, #666); white-space: nowrap;
}
.metric-divider {
  width: 1px; height: 32px; background: var(--border, #2a3a5c); flex-shrink: 0;
}
@media (max-width: 600px) {
  .leads-metrics-strip { flex-direction: column; gap: 12px; padding: 16px; }
  .metric-divider { width: 100%; height: 1px; }
  .metric-stat { justify-content: flex-start; padding: 0; }
}

/* ============================================================
   Integration status rows
   ============================================================ */
.integration-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--border, #2a3a5c);
}
.integration-row:last-child { border-bottom: none; }
.integration-label { font-weight: 600; font-size: 0.9rem; min-width: 160px; }
.integration-status { font-size: 0.85rem; text-align: right; }

/* ============================================================
   Road To The Stage ebook panel (Flex Facility only)
   ============================================================ */
.r2s-ebook-panel { border: 1px solid rgba(0, 207, 255, 0.25); }
.r2s-ebook-header {
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border, #2a3a5c);
}
.r2s-ebook-header h2 {
  background: linear-gradient(90deg, var(--brand-1, #00CFFF), #7dd3fc);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; font-size: 1.15rem;
}
.r2s-chart-panel {
  background: rgba(0, 207, 255, 0.03);
  border: 1px solid var(--border, #2a3a5c);
  border-radius: var(--r-sm, 8px);
  padding: 14px; margin: 12px 0;
}
.r2s-chart {
  display: flex; align-items: flex-end; gap: 3px;
  height: 110px; padding-top: 8px;
}
.r2s-chart-bar {
  flex: 1; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center;
  min-width: 0; cursor: default;
}
.r2s-chart-fill {
  width: 100%;
  background: linear-gradient(180deg, var(--brand-1, #00CFFF), rgba(0, 207, 255, 0.4));
  border-radius: 3px 3px 0 0; min-height: 2px;
  transition: opacity 0.15s;
}
.r2s-chart-bar:hover .r2s-chart-fill { opacity: 0.75; }
.r2s-chart-label {
  font-size: 0.65rem; color: var(--text-mute, #666); margin-top: 4px;
}
.r2s-link-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0; margin-bottom: 4px;
}
.r2s-link {
  color: var(--brand-1, #00CFFF); font-weight: 600;
  text-decoration: none; font-size: 0.9rem;
}
.r2s-link:hover { text-decoration: underline; }
.r2s-cta-card {
  background: rgba(0, 207, 255, 0.06);
  border: 1px solid rgba(0, 207, 255, 0.3);
  border-radius: var(--r-md, 12px);
  padding: 16px; margin: 12px 0;
}
.r2s-manual-form {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border, #2a3a5c);
}
.r2s-manual-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.r2s-manual-grid label { display: flex; flex-direction: column; gap: 4px; }
.r2s-manual-grid input {
  width: 100%; padding: 8px 10px;
  background: var(--bg-1, #0d1117);
  border: 1px solid var(--border, #2a3a5c);
  border-radius: 6px;
  color: var(--text, #e0e0e0); font-size: 0.85rem;
}
.r2s-manual-grid input:focus {
  outline: none;
  border-color: var(--brand-1, #00CFFF);
}
@media (max-width: 600px) {
  .r2s-manual-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Activity tab (admin-only cross-tenant feed)
   ============================================================ */
.activity-filters { padding: 14px; }
.activity-filter-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
}
.activity-filter-row label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.7rem; min-width: 140px;
}
.activity-filter-row select, .activity-filter-row input[type="date"] {
  padding: 6px 8px;
  background: var(--bg-1, #0d1117);
  border: 1px solid var(--border, #2a3a5c);
  border-radius: 6px;
  color: var(--text, #e0e0e0);
  font-size: 0.85rem;
}
.activity-live {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-size: 0.75rem;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warning, #f0ad4e);
  box-shadow: 0 0 6px rgba(240, 173, 78, 0.6);
}
.live-dot.on {
  background: var(--success, #27ae60);
  box-shadow: 0 0 8px rgba(39, 174, 96, 0.7);
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.activity-feed .event-row {
  display: grid;
  grid-template-columns: 130px 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--border, #2a3a5c);
  transition: background 0.3s;
}
.activity-feed .event-row:last-child { border-bottom: none; }
.activity-feed .event-new {
  background: rgba(0, 207, 255, 0.12);
  animation: event-flash 3s ease-out;
}
@keyframes event-flash {
  0%   { background: rgba(0, 207, 255, 0.25); }
  100% { background: transparent; }
}
.event-type.ev-lead {
  background: rgba(0, 207, 255, 0.12);
  color: #7dd3fc;
  padding: 4px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; text-align: center;
  border: 1px solid rgba(0, 207, 255, 0.3);
}
.event-type.ev-booking {
  background: rgba(39, 174, 96, 0.12);
  color: #86efac;
  padding: 4px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; text-align: center;
  border: 1px solid rgba(39, 174, 96, 0.3);
}
@media (max-width: 600px) {
  .activity-feed .event-row {
    grid-template-columns: 1fr; gap: 6px;
  }
  .activity-live { margin-left: 0; }
}

/* ============================================================
   Master Admin — Client management cards
   ============================================================ */
.client-mgmt-panel {
  border: 1px solid rgba(0, 207, 255, 0.25);
}
.client-mgmt-panel h2 {
  color: var(--brand-1, #00CFFF);
}
.client-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.client-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px;
  background: var(--bg-elevated, #141c2e);
  border: 1px solid var(--border, #2a3a5c);
  border-radius: var(--r-md, 12px);
  transition: border-color 0.15s, transform 0.15s;
}
.client-card:hover {
  border-color: var(--brand-1, #00CFFF);
  transform: translateY(-2px);
}
.client-card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.client-card-name {
  font-size: 1.05rem; font-weight: 700;
  color: var(--text, #e0e0e0);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.client-card-slug {
  font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
  margin-top: -4px;
}
.client-card-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--border, #2a3a5c);
  border-bottom: 1px solid var(--border, #2a3a5c);
}
.client-card-stat-value {
  font-size: 1.05rem; font-weight: 700; color: var(--text, #e0e0e0);
}
.client-card-stat-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
  margin-top: 2px;
}
.client-card-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.client-card-actions .btn { flex: 1; min-width: fit-content; }

/* Horizontal scroll wrapper so the full admin table (including the
   actions column with GA4/Stripe/credit inputs) stays reachable. */
.admin-table-scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px; /* bleed so scrollbar doesn't hug the panel edge */
}
.admin-table-scroller .admin-table {
  min-width: 960px; /* forces side-scroll until every column fits */
}
.admin-table-scroller::-webkit-scrollbar { height: 8px; }
.admin-table-scroller::-webkit-scrollbar-thumb {
  background: var(--border, #2a3a5c); border-radius: 4px;
}
.admin-table-scroller::-webkit-scrollbar-thumb:hover {
  background: var(--brand-1, #00CFFF);
}

/* ============================================================
   Master Admin — "Take Over a Client Portal" tabs (legacy)
   ============================================================ */
.takeover-panel {
  border: 1px solid rgba(0, 207, 255, 0.3);
  background: linear-gradient(180deg, rgba(0, 207, 255, 0.04), transparent);
}
.takeover-panel h2 {
  color: var(--brand-1, #00CFFF);
}
.takeover-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.takeover-tab {
  display: flex; flex-direction: column; gap: 4px;
  text-align: left;
  padding: 16px;
  background: var(--bg-elevated, #141c2e);
  border: 1px solid var(--border, #2a3a5c);
  border-radius: var(--r-md, 12px);
  color: var(--text, #e0e0e0);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.takeover-tab:hover {
  transform: translateY(-2px);
  border-color: var(--brand-1, #00CFFF);
  background: rgba(0, 207, 255, 0.06);
}
.takeover-tab-name {
  font-size: 1rem; font-weight: 700;
}
.takeover-tab-slug {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
}
.takeover-tab-cta {
  margin-top: 6px;
  color: var(--brand-1, #00CFFF);
  font-size: 0.8rem; font-weight: 600;
}

/* ============================================================
   Impersonation switcher (admin-only)
   ============================================================ */
.impersonate-switcher {
  margin: 16px 12px;
  padding: 12px;
  background: rgba(0, 207, 255, 0.04);
  border: 1px solid rgba(0, 207, 255, 0.2);
  border-radius: var(--r-sm, 8px);
}
.impersonate-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brand-1, #00CFFF);
  margin-bottom: 8px;
}
.impersonate-tabs { display: flex; flex-direction: column; gap: 4px; }
.impersonate-tab {
  text-align: left;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid var(--border, #2a3a5c);
  border-radius: 6px;
  color: var(--text, #e0e0e0);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.impersonate-tab:hover {
  background: rgba(0, 207, 255, 0.08);
  border-color: var(--brand-1, #00CFFF);
}
.impersonate-tab.active {
  background: var(--brand-1, #00CFFF);
  color: #000;
  border-color: var(--brand-1, #00CFFF);
  font-weight: 600;
}

/* ============================================================
   Badges & toasts
   ============================================================ */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  background: var(--bg-glass-strong);
  color: var(--text-dim);
  border: 1px solid var(--border);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.badge.green {
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.3);
}
.badge.red {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.3);
}
.badge.info {
  background: rgba(0, 207, 255, 0.12);
  color: #7dd3fc;
  border-color: rgba(0, 207, 255, 0.3);
}
.badge.warn {
  background: rgba(245, 158, 11, 0.12);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.3);
}

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-elevated);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--border-strong);
  padding: 14px 20px;
  border-radius: var(--r-md);
  z-index: 100;
  box-shadow: var(--shadow-lg);
  font-size: 13.5px;
  animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.toast::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 0 0 8px var(--success);
}
.toast.err { border-color: rgba(239, 68, 68, 0.4); }
.toast.err::before { background: var(--danger); box-shadow: 0 0 8px var(--danger); }

/* ============================================================
   Pack cards (credits) — premium pricing tiles
   ============================================================ */
.pack-card {
  background: var(--bg-elevated);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}
.pack-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}
.pack-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-accent);
  box-shadow: var(--shadow-md), 0 0 60px -20px rgba(0,207,255,0.4);
}
.pack-card.featured {
  border-color: rgba(0, 207, 255, 0.5);
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(0,207,255,0.15) 0%, transparent 60%),
    var(--bg-elevated);
}
.pack-card .pack-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  font-weight: 600;
  margin-bottom: 8px;
}
.pack-card .pack-price {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-feature-settings: "tnum";
}
.pack-card .pack-credits {
  color: var(--text-dim);
  font-size: 13px;
  margin-top: 4px;
}
.pack-card .pack-rate {
  color: var(--brand-3);
  font-size: 12px;
  margin-top: 2px;
  font-family: var(--font-mono);
}
.pack-card .btn { width: 100%; margin-top: 18px; }

/* ============================================================
   Mobile header + drawer (hidden on desktop)
   ============================================================ */
.mobile-header { display: none; }
.nav-backdrop { display: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 880px) {
  .app { grid-template-columns: 1fr; }

  /* Sidebar → slide-in drawer */
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 84%;
    max-width: 300px;
    height: 100vh;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    padding: 20px 16px;
    background: linear-gradient(180deg, rgba(11,12,20,0.98) 0%, rgba(7,8,13,0.98) 100%);
    overflow-y: auto;
  }
  body.nav-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

  /* Bigger tap targets inside drawer */
  .nav button { padding: 12px 14px; font-size: 15px; }
  .nav button::before { width: 16px; height: 16px; }
  .signout { padding: 12px 14px; font-size: 14px; }

  /* Mobile top header bar — sticky so the hamburger never scrolls away.
     Without this users would lose access to the full nav (Messages,
     Credits, Connect, Settings) the moment they scrolled down.
     The top padding honors env(safe-area-inset-top) so the hamburger
     + brand sit *below* the iPhone notch/dynamic island instead of
     being occluded by it. */
  .mobile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(10px + var(--sat)) 4px 14px;
    margin: calc(-16px - var(--sat)) -16px 24px;
    padding-left: calc(16px + var(--sal));
    padding-right: calc(16px + var(--sar));
    position: sticky;
    top: 0;
    z-index: 40;
    background: linear-gradient(180deg, rgba(10,14,26,0.96) 0%, rgba(10,14,26,0.85) 100%);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
  }
  /* Ensure topbar never scrolls under the sticky mobile header */
  .topbar {
    scroll-margin-top: 80px;
    padding-top: 4px;
  }
  .mobile-header .nav-toggle {
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    width: 42px;
    height: 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 0;
    flex-shrink: 0;
  }
  .mobile-header .nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
  }
  .mobile-header .mobile-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
  }
  .mobile-header .mobile-brand .logo {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--brand-grad);
    display: grid;
    place-items: center;
    box-shadow: var(--brand-glow);
    flex-shrink: 0;
  }
  .mobile-header .mobile-brand .logo img { width: 88%; height: 88%; object-fit: contain; }

  /* Main content. Padding honors safe-area insets so nothing sits under
     the notch in landscape / the home indicator at the bottom. */
  .main {
    padding:
      16px
      calc(16px + var(--sar))
      calc(80px + var(--sab))
      calc(16px + var(--sal));
    max-width: 100%;
  }
  .topbar { margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
  h1 { font-size: 22px; }
  h2 { font-size: 15px; }

  /* Cards & panels */
  .cards { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 16px; }
  .card .value { font-size: 26px; }
  .panel { padding: 16px; border-radius: var(--r-md); }
  .pack-card { padding: 18px; }
  .pack-card .pack-price { font-size: 30px; }

  /* Forms — prevent iOS zoom */
  input, textarea, select {
    font-size: 16px;
    padding: 12px 13px;
  }
  .btn { padding: 12px 18px; font-size: 14px; min-height: 44px; }
  .btn.sm { padding: 8px 12px; font-size: 12px; min-height: 0; }

  /* Tables — horizontal scroll */
  .panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 560px; font-size: 13px; }
  th, td { padding: 10px 10px; }

  /* Chat — mobile slide layout. The list and the chat pane each take
     the full viewport width and we toggle between them with the
     .show-pane modifier on .chat-layout. The back button on
     .chat-header pops back to the list. */
  .chat-layout {
    grid-template-columns: 1fr;
    height: calc(100vh - 140px);
    gap: 0;
    position: relative;
  }
  .chat-layout .chat-list,
  .chat-layout .chat-pane {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    border-radius: var(--r-lg);
  }
  .chat-layout .chat-pane { display: none; }
  .chat-layout.show-pane .chat-list { display: none; }
  .chat-layout.show-pane .chat-pane { display: flex; }

  .chat-list { max-height: none; }
  .chat-body { padding: 16px; }
  .bubble { max-width: 85%; font-size: 14px; }
  .chat-header { padding: 14px 16px; flex-wrap: nowrap; }
  .chat-header .chat-back { display: inline-flex; }
  .chat-header-stats { font-size: 10px; }
  .composer { padding: 12px; }
  .composer-row { flex-direction: column; align-items: stretch; }
  .composer-row .btn { width: 100%; }

  /* Event feed */
  .event-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px;
  }
  .event-time { grid-column: 1; }
  .event-payload { margin: 0 0 14px; }

  /* Admin table → horizontal scroll wrapper */
  .admin-table { min-width: 620px; }
  .admin-table .actions { flex-wrap: wrap; }

  /* Misc */
  .grid-2 { grid-template-columns: 1fr; }
  .row { gap: 8px; }
  .modal { padding: 20px; border-radius: var(--r-lg); }
  .modal-bg { padding: 12px; }
  .login .box { padding: 32px 24px; }
  .login h1 { font-size: 20px; }
  .toast {
    left: 12px;
    right: 12px;
    bottom: 12px;
    text-align: center;
  }
  .impersonation-banner { flex-wrap: wrap; font-size: 12px; }
}

@media (max-width: 480px) {
  .main { padding: 14px 12px 80px; }
  h1 { font-size: 20px; }
  .card .value { font-size: 24px; }
  .topbar h1 { flex: 1 1 100%; }
}

/* ============================================================
   Activity / event feed
   ============================================================ */
.event-list { display: flex; flex-direction: column; }
.event-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.event-row:last-child { border-bottom: none; }
.event-row:hover { background: var(--surface-hover); }
.event-type {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-3);
  background: rgba(0,184,230,0.12);
  padding: 4px 10px;
  border-radius: 999px;
  text-align: center;
  border: 1px solid rgba(0,207,255,0.25);
  width: fit-content;
}
.event-title { font-weight: 600; font-size: 14px; color: var(--text); }
.event-meta { font-size: 12px; margin-top: 2px; }
.event-time { font-size: 12px; font-family: var(--font-mono); white-space: nowrap; }
.event-payload {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 16px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
}

/* Settings — welcome SMS */
.toggle-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0; cursor: pointer;
}
.toggle-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--brand-3); }
.field-label {
  display: block; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-2); margin-bottom: 6px;
}
.panel textarea {
  width: 100%; min-height: 110px; resize: vertical;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; font: inherit; font-size: 14px;
}
.panel textarea:focus { outline: none; border-color: var(--brand-3); }
.panel code {
  font-family: var(--font-mono); font-size: 11px;
  background: rgba(0,184,230,0.12); color: var(--brand-3);
  padding: 2px 6px; border-radius: 4px;
  border: 1px solid rgba(0,207,255,0.25);
}
.sms-preview {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px;
  font-size: 14px; color: var(--text); white-space: pre-wrap;
  max-width: 420px;
}

/* ============================================================
   Master admin
   ============================================================ */
.admin-section {
  border-top: 1px solid var(--border);
  margin-top: 14px;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-label {
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--brand-3);
  padding: 0 6px 4px;
}
.btn-stop-impersonate {
  background: rgba(239,68,68,0.12);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
}
.btn-stop-impersonate:hover { background: rgba(239,68,68,0.2); }

.impersonation-banner {
  background: linear-gradient(135deg, rgba(0,207,255,0.18), rgba(0,207,255,0.18));
  border: 1px solid rgba(0,207,255,0.4);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 12px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.impersonation-banner .link {
  background: none; border: none; color: var(--brand-3);
  cursor: pointer; text-decoration: underline; font: inherit; margin-left: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-table th, .admin-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.admin-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2);
  font-weight: 600;
}
.admin-table .actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.admin-table .actions input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  color: var(--text);
  font-size: 12px;
}
.btn.sm { padding: 6px 10px; font-size: 12px; }
.btn-warn  { background: rgba(245,158,11,0.18); border-color: rgba(245,158,11,0.4); color: #fbbf24; }
.btn-success { background: rgba(34,197,94,0.18); border-color: rgba(34,197,94,0.4); color: #86efac; }
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pill.ok   { background: rgba(34,197,94,0.15);  color: #86efac; border: 1px solid rgba(34,197,94,0.3); }
.pill.warn { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mono { font-family: var(--font-mono); font-size: 12px; }

/* ============================================================
   © 2026 GoElev8.ai | Aaron Bryant. All rights reserved.
   PWA additions: bottom nav, dashboard feed, leads, calls,
   skeletons, install banner, status badges (yellow alias).
   ============================================================ */
.badge.yellow {
  background: rgba(245, 158, 11, 0.12);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.3);
}

/* Bottom nav (mobile only) */
.bottom-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  /* Below the slide-in sidebar drawer (z-index 60) and its backdrop (55),
     so the drawer fully covers it when opened via the hamburger. */
  z-index: 50;
  background: rgba(10, 14, 26, 0.92);
  backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  padding:
    8px
    calc(4px + var(--sar))
    calc(8px + var(--sab))
    calc(4px + var(--sal));
}
.bottom-nav .bnav-btn {
  flex: 1;
  background: none;
  border: 0;
  color: var(--text-dim, #94a3b8);
  font-size: 11px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.bottom-nav .bnav-btn .bnav-icon {
  font-size: 20px;
  line-height: 1;
}
.bottom-nav .bnav-btn.active { color: #C9A84C; }
.bottom-nav .bnav-btn.active .bnav-icon { transform: scale(1.15); }

/* "Menu" button: 3-line hamburger so users can see it opens a menu. */
.bottom-nav .bnav-menu { color: #2D9CDB; }
.bottom-nav .bnav-menu .bnav-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 18px;
  height: 12px;
}
.bottom-nav .bnav-menu .bnav-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
body.nav-open .bottom-nav .bnav-menu { color: #93c5fd; }
@media (max-width: 820px) {
  .bottom-nav { display: flex; }
  .app.has-bottom-nav .main { padding-bottom: 84px; }
  /* NOTE: do NOT hide .sidebar here — it's already a slide-in drawer on
     mobile (toggled by the hamburger in .mobile-header). Hiding it kills
     access to Messages / Contacts / Billing / Connect / Activity. */
}

/* Install prompt banner */
.install-banner {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 70;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(10, 14, 26, 0.95);
  border: 1px solid rgba(45, 156, 219, 0.4);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  color: #fff;
  font-size: 14px;
}
.install-banner span { flex: 1; }

/* Funnel views chart (analytics) */
.view-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 180px;
  padding: 16px 0 8px;
  margin-top: 12px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.view-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  cursor: pointer;
  position: relative;
}
.view-bar-fill {
  width: 100%;
  background: linear-gradient(180deg, #C9A84C 0%, rgba(201,168,76,0.4) 100%);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: opacity 0.15s;
}
.view-bar:hover .view-bar-fill { opacity: 0.7; }
.view-bar-label {
  font-size: 9px;
  color: var(--text-dim, #94a3b8);
  margin-top: 4px;
}

/* Credits ticker (Settings page) */
.credits-ticker {
  background: linear-gradient(135deg, rgba(45,156,219,0.12), rgba(201,168,76,0.08)) !important;
  border: 1px solid rgba(45,156,219,0.3) !important;
  margin-bottom: 20px !important;
}
.credits-ticker.low {
  background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(245,158,11,0.08)) !important;
  border-color: rgba(239,68,68,0.4) !important;
}
.credits-ticker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.credits-ticker-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-dim, #94a3b8);
  text-transform: uppercase;
}
.credits-ticker-value {
  font-size: 2.5rem;
  font-weight: 800;
  color: #C9A84C;
  line-height: 1;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.credits-ticker.low .credits-ticker-value {
  color: #ef4444;
}
.credits-ticker-icon {
  font-size: 2.5rem;
  opacity: 0.6;
}

/* Global portal footer */
.portal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 16px 24px;
  margin-top: 32px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.06));
  opacity: 0.85;
}
.portal-footer img {
  height: 36px;
  width: auto;
}
.portal-footer span {
  font-size: 0.75rem;
  color: var(--text-dim, #94a3b8);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}
@media (max-width: 768px) {
  .portal-footer { padding-bottom: 100px; }
}

/* Skeleton loaders */
.skeleton-wrap { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
.skel-row {
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
}
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Empty states */
.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-dim, #94a3b8);
}
.empty-state .empty-icon { font-size: 32px; margin-bottom: 8px; }
.empty-state .empty-msg { font-size: 14px; max-width: 360px; margin: 0 auto; }

/* Dashboard feed */
.feed { display: flex; flex-direction: column; }
.feed-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
}
.feed-row:last-child { border-bottom: 0; }
.feed-type {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(45, 156, 219, 0.15);
  color: #93c5fd;
  min-width: 60px;
  text-align: center;
}
.feed-type.booking { background: rgba(16,185,129,0.15); color: #6ee7b7; }
.feed-type.call    { background: rgba(168,85,247,0.15); color: #d8b4fe; }
.feed-body { flex: 1; min-width: 0; }
.feed-label { font-size: 14px; color: var(--text, #fff); }
.feed-sub { font-size: 12px; }
.feed-time { font-size: 11px; }

/* Leads */
.filter-bar { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; }
.chip {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  color: var(--text-dim, #94a3b8);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.chip.active { background: rgba(45, 156, 219, 0.18); color: #93c5fd; border-color: rgba(45,156,219,0.5); }
.lead-list, .call-list { display: flex; flex-direction: column; }
.lead-row, .call-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
  cursor: pointer;
}
.lead-row:hover, .call-row:hover { background: rgba(255,255,255,0.02); }
.lead-main, .call-main { flex: 1; min-width: 0; }
.lead-name, .call-phone { font-size: 15px; color: var(--text, #fff); font-weight: 500; }
.lead-meta, .call-meta { font-size: 12px; margin-top: 2px; }
.lead-side, .call-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.lead-time { font-size: 11px; }
.lead-detail, .call-transcript {
  padding: 12px 14px;
  margin: 0 0 8px;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid #2D9CDB;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: var(--text-dim, #94a3b8);
  white-space: pre-wrap;
}

/* ============================================================
   © 2026 GoElev8.ai | Aaron Bryant. All rights reserved.
   Mobile polish: install pill, iOS bottom sheet, admin cards.
   ============================================================ */

/* Install pill button — lives in the mobile header next to the brand.
   Hidden on desktop since .mobile-header itself is display:none there. */
.install-pill {
  margin-left: auto;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(0, 207, 255, 0.14);
  border: 1px solid rgba(0, 207, 255, 0.5);
  color: #93e3ff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.1s ease;
}
.install-pill:hover { background: rgba(0, 207, 255, 0.22); }
.install-pill:active { transform: scale(0.96); }
.install-pill::before { content: '+ '; opacity: 0.8; }

/* iOS "Add to Home Screen" bottom sheet */
.ios-sheet-bg {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: ge8FadeIn 0.2s ease;
}
@keyframes ge8FadeIn { from { opacity: 0; } to { opacity: 1; } }
.ios-sheet {
  width: 100%;
  max-width: 520px;
  background: linear-gradient(180deg, #13161f 0%, #0b0c14 100%);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 0;
  padding:
    28px
    calc(24px + env(safe-area-inset-right))
    calc(28px + env(safe-area-inset-bottom))
    calc(24px + env(safe-area-inset-left));
  box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.6);
  animation: ge8SlideUp 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ge8SlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.ios-sheet .handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  margin: -10px auto 18px;
}
.ios-sheet h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
  color: #f0f1f5;
}
.ios-sheet p {
  color: #a8acbb;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 18px;
}
.ios-sheet ol {
  margin: 0 0 22px;
  padding-left: 22px;
  color: #d1d5db;
  font-size: 14px;
}
.ios-sheet ol li { margin-bottom: 10px; line-height: 1.5; }
.ios-sheet ol li strong { color: #f0f1f5; }
.ios-sheet .share-glyph {
  display: inline-flex;
  width: 22px;
  height: 22px;
  vertical-align: -6px;
  margin: 0 3px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(0, 207, 255, 0.15);
  border: 1px solid rgba(0, 207, 255, 0.4);
  color: #93e3ff;
  font-size: 14px;
  font-weight: 700;
}
.ios-sheet .close {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f0f1f5;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.ios-sheet .close:hover { background: rgba(255, 255, 255, 0.08); }

/* Admin client cards — stacked layout for <=767px, hidden on desktop. */
.admin-cards { display: none; }
@media (max-width: 767px) {
  .admin-table-wrap { display: none; }
  .admin-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
}
.admin-card {
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}
.admin-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.admin-card-head strong {
  font-size: 15px;
  color: #f0f1f5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  border-top: 1px dashed rgba(255, 255, 255, 0.04);
}
.admin-card-row:first-of-type { border-top: 0; padding-top: 0; }
.admin-card-row > span:first-child {
  color: var(--text-dim, #a8acbb);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-card-row > :last-child {
  color: #f0f1f5;
  font-weight: 500;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.admin-card-row code {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: #d1d5db;
}
.admin-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-card-actions .btn { flex: 1 1 auto; }
.admin-card-credits {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}
.admin-card-credits input[type="number"] {
  width: 80px;
  flex: 0 0 80px;
}
.admin-card-credits input[type="text"] {
  flex: 1 1 120px;
  min-width: 0;
}

/* ============================================================
   © 2026 GoElev8.ai | Aaron Bryant. All rights reserved.
   5-tab navigation: shared tab-btn, sidebar-tab variant, bnav-btn
   variant. Plus powered-footer + client-logo overrides.
   ============================================================ */

/* Generic tab button (used in both desktop sidebar and mobile bottom-nav) */
.tab-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: none;
  border: 0;
  border-radius: 10px;
  color: var(--text-dim, #a8acbb);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.tab-btn svg { flex-shrink: 0; opacity: 0.85; }
.tab-btn:hover { background: rgba(255, 255, 255, 0.04); color: #f0f1f5; }
.tab-btn.active {
  color: #00CFFF;
  background: rgba(0, 207, 255, 0.10);
}
.tab-btn.active svg { opacity: 1; }

/* Sidebar variant */
.tab-btn.sidebar-tab { width: 100%; }
.sidebar .nav { display: flex; flex-direction: column; gap: 4px; }

/* Bottom-nav variant — column layout, label below icon, full width split */
.bottom-nav .tab-btn.bnav-btn {
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  width: auto;
  min-width: 0;
}
.bottom-nav .tab-btn.bnav-btn .tab-label {
  font-size: 11px;
  line-height: 1;
}
.bottom-nav .tab-btn.bnav-btn:hover { background: none; color: #f0f1f5; }
.bottom-nav .tab-btn.bnav-btn.active {
  background: none;
  color: #00CFFF;
}
.bottom-nav .tab-btn.bnav-btn svg { width: 22px; height: 22px; }
.bottom-nav .tab-btn.bnav-btn.active svg {
  filter: drop-shadow(0 0 6px rgba(0, 207, 255, 0.6));
}

/* Admin Master button has the same look as a tab-btn */
.tab-btn.admin-master { width: 100%; }

/* Powered-by footer — appears at the bottom of every page inside .main,
   plus at the bottom of the sidebar on desktop. Small, gray, link tints
   on hover. */
.powered-footer {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.05));
  text-align: center;
  font-size: 11px;
  color: #6b6f80;
  letter-spacing: 0.02em;
}
.powered-footer a {
  color: #6b6f80;
  text-decoration: none;
  border-bottom: 1px dotted #6b6f80;
}
.powered-footer a:hover { color: #00CFFF; border-bottom-color: #00CFFF; }

.sidebar-footer {
  margin-top: auto;
  padding: 14px 6px 4px;
  text-align: center;
  font-size: 11px;
  color: #6b6f80;
}
.sidebar-footer a {
  color: #6b6f80;
  text-decoration: none;
  border-bottom: 1px dotted #6b6f80;
}
.sidebar-footer a:hover { color: #00CFFF; border-bottom-color: #00CFFF; }

/* Client logo override — a client logo is usually full-color/photo, so
   strip the brand gradient background and let it sit on a neutral pad.
   Selectors are made extra-specific (matching .mobile-header explicitly
   for the mobile-brand variant) so these rules reliably beat the
   gradient-background rule in the @media (max-width: 880px) block. */
.brand .logo.client-logo,
.mobile-header .mobile-brand .logo.client-logo {
  background: #000 !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
  /* Make sure a zero-width image child can't collapse the parent before
     the cross-origin client logo finishes loading on a cold PWA start. */
  min-width: 48px;
  min-height: 48px;
}
.brand .logo.client-logo img,
.mobile-header .mobile-brand .logo.client-logo img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  filter: none;
  display: block;
}

/* Panel head: title + small right-aligned hint */
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  gap: 12px;
}
.panel-head h2 { margin: 0; }
.muted.small { font-size: 11px; }

/* ============================================================
   SALES TRACKER
   ============================================================ */

/* Products grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.product-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 0.15s;
}
.product-card:hover {
  border-color: var(--border-strong);
}
.product-img {
  height: 100px;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-img.placeholder {
  color: var(--text-mute);
  font-size: 36px;
  font-weight: 600;
}
.product-info {
  padding: 14px;
}
.product-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.product-name {
  font-weight: 600;
  font-size: 15px;
}
.product-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-1);
  margin-bottom: 4px;
}
.product-stats {
  font-size: 13px;
  margin-bottom: 4px;
}
.product-funnel {
  font-size: 12px;
  margin-bottom: 8px;
}
.product-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Sales filters */
.sales-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.sales-select {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 13px;
  font-family: var(--font-sans);
}
.sales-search {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 13px;
  font-family: var(--font-sans);
  flex: 1;
  min-width: 150px;
}

/* Sales table */
.sales-table {
  width: 100%;
  border-collapse: collapse;
}
.sales-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-mute);
  padding: 8px;
  border-bottom: 1px solid var(--border);
}
.sales-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.sale-row {
  cursor: pointer;
  transition: background 0.1s;
}
.sale-row:hover {
  background: var(--bg-glass-strong);
}
.sale-customer {
  font-weight: 500;
}
.sale-paid { color: var(--success); font-weight: 600; }
.sale-failed { color: var(--danger); font-weight: 600; }
.sale-amount { font-size: 16px; }
.source-badge {
  font-size: 11px;
  text-transform: capitalize;
}
.sale-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 0;
  font-size: 13px;
}
.sale-detail-row td {
  background: var(--bg-glass);
}

/* Mobile sale cards */
.sales-cards-mobile { display: none; }

@media (max-width: 767px) {
  .sales-table { display: none; }
  .sales-cards-mobile { display: block; }
  .products-grid { grid-template-columns: 1fr; }
}

.sale-card-mobile {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px;
  margin-bottom: 8px;
}
.sale-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.sale-card-bottom {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
}

/* Pagination */
.pagination {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* ============================================================
   ADD PRODUCT MODAL
   ============================================================ */
.product-modal {
  max-width: 520px;
}
.step-indicator {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  justify-content: center;
}
.step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mute);
  transition: all 0.2s;
}
.step-dot.active {
  background: var(--brand-1);
  border-color: var(--brand-1);
  color: #000;
}
.step-dot.done {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.funnel-checks {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-review {
  background: var(--bg-3);
  border-radius: var(--r-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

/* ============================================================
   ANALYTICS
   ============================================================ */

/* Mini bar chart */
.mini-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: 100%;
}
.chart-col {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  height: 100%;
}
.chart-bar {
  width: 100%;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  transition: height 0.3s ease;
}
.chart-bar:hover {
  opacity: 0.8;
}
.chart-legend {
  text-align: center;
  margin-top: 8px;
  font-size: 12px;
}

/* Line chart */
.line-chart-wrap {
  width: 100%;
}
.line-chart-svg {
  width: 100%;
  height: 100%;
}

/* Source labels */
.source-labels {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.source-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.source-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.source-label-row .muted {
  margin-left: auto;
}

/* Funnel grid */
.funnel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.funnel-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 14px;
}
.funnel-card-path {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 10px;
  color: var(--brand-1);
}
.funnel-card-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.funnel-card-row:last-child {
  border-bottom: none;
  font-weight: 600;
}
.conversion-green { color: var(--success); }
.conversion-yellow { color: var(--warning); }
.conversion-red { color: var(--danger); }

/* Top sources list */
.top-sources-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.top-source-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.top-source-row:last-child { border-bottom: none; }
.top-source-rank {
  color: var(--brand-1);
  font-weight: 700;
  font-size: 13px;
  min-width: 24px;
}
.top-source-name {
  flex: 1;
}

/* Activity feed dot colors for analytics */
.feed-type.sale {
  background: #F5C518;
  color: #000;
}

@media (max-width: 767px) {
  .funnel-grid { grid-template-columns: 1fr; }
  .sales-filters { flex-direction: column; }
  .sales-search { min-width: unset; }
}

/* ============================================================
   TIER FEATURE LOCKING (Part 12)
   ============================================================ */
.tier-lock {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--bg-glass);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  margin-bottom: 16px;
}
.tier-lock-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.tier-lock-text { flex: 1; }
.tier-lock-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.tier-lock-desc {
  font-size: 13px;
  color: var(--text-dim);
}
.tier-lock-btn {
  flex-shrink: 0;
  background: var(--brand-grad) !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  text-decoration: none;
}
@media (max-width: 600px) {
  .tier-lock { flex-direction: column; text-align: center; }
  .tier-lock-btn { width: 100%; text-align: center; }
}

/* ============================================================
   ARTIST CONVERSION PIPELINE (Part 4)
   ============================================================ */
.pipeline {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.pipeline-stage {
  min-width: 200px;
  flex: 1;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  transition: border-color 0.2s;
}
.pipeline-stage.drag-over {
  border-color: var(--brand-1);
  background: rgba(0, 207, 255, 0.05);
}
.pipeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.pipeline-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}
.pipeline-count { display: flex; align-items: baseline; gap: 4px; }
.pipeline-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.pipeline-value { font-size: 12px; }
.pipeline-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 40px;
}

/* Stage header color accents */
.stage-new .pipeline-title { color: var(--info); }
.stage-contacted .pipeline-title { color: var(--warning); }
.stage-booked .pipeline-title { color: #a855f7; }
.stage-in-studio .pipeline-title { color: var(--brand-1); }
.stage-converted .pipeline-title { color: var(--success); }
.stage-lost .pipeline-title { color: var(--danger); }

/* Artist cards */
.artist-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  cursor: grab;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.artist-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.artist-card:active { cursor: grabbing; }
.artist-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.artist-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.artist-card-service,
.artist-card-budget {
  font-size: 12px;
  margin-bottom: 2px;
}
.artist-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.artist-card-actions {
  display: flex;
  gap: 4px;
}
.artist-card-actions .btn {
  font-size: 11px !important;
  padding: 3px 8px !important;
}

/* Genre badges */
.genre-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

/* Artist detail grid */
.artist-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 14px;
  margin-top: 12px;
}
@media (max-width: 600px) {
  .artist-detail-grid { grid-template-columns: 1fr; }
}

/* Booking total display */
.booking-total {
  font-size: 24px;
  font-weight: 700;
  color: var(--success);
  padding: 8px 0;
}

/* Pipeline panel */
.pipeline-panel { overflow: visible; }

@media (max-width: 767px) {
  .pipeline {
    flex-direction: column;
  }
  .pipeline-stage {
    min-width: unset;
  }
}

/* ============================================================
   Nudge Sequence Editor
   ============================================================ */
.nudge-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 16px;
  transition: opacity 0.2s, border-color 0.2s;
}
.nudge-card:hover { border-color: rgba(0, 207, 255, 0.3); }
.nudge-inactive { opacity: 0.5; }
.nudge-inactive:hover { opacity: 0.7; }

.nudge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.nudge-badge {
  font-family: 'Bebas Neue', var(--font-sans);
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--brand-1);
}
.nudge-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-2);
}
.nudge-toggle-row input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-3);
}

.nudge-delay-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.nudge-delay-label {
  font-size: 13px;
  color: var(--text-2);
  min-width: 48px;
}
.nudge-delay {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 13px;
  font-family: var(--font-sans);
}
.nudge-delay:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nudge-tag-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.nudge-tag-hint {
  font-size: 12px;
  color: var(--text-2);
}
.nudge-tag-btn {
  background: rgba(0, 207, 255, 0.08);
  border: 1px solid rgba(0, 207, 255, 0.2);
  border-radius: 6px;
  color: var(--brand-1);
  font-size: 12px;
  font-family: var(--font-mono);
  padding: 3px 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.nudge-tag-btn:hover {
  background: rgba(0, 207, 255, 0.18);
  border-color: var(--brand-1);
}

.nudge-textarea {
  width: 100%;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font-sans);
  line-height: 1.5;
  resize: vertical;
  min-height: 72px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.nudge-textarea:focus {
  outline: none;
  border-color: var(--brand-1);
  box-shadow: 0 0 0 2px rgba(0, 207, 255, 0.15);
}

.nudge-char-count {
  font-size: 12px;
  color: var(--text-2);
  text-align: right;
  margin-top: 4px;
  font-family: var(--font-mono);
}
.nudge-char-count.nudge-warn { color: var(--warning); }
.nudge-char-count.nudge-over { color: var(--danger); font-weight: 600; }

.nudge-errors {
  margin-top: 6px;
}
.nudge-err-line {
  font-size: 12px;
  color: var(--danger);
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nudge-err-line::before {
  content: '\26A0';
  font-size: 13px;
}
.nudge-opt-notice {
  font-size: 12px;
  color: var(--brand-1);
  padding: 3px 0;
  font-style: italic;
}

.nudge-preview {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.nudge-preview-label {
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 8px;
}
.nudge-preview-bubble {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text);
  white-space: pre-wrap;
  max-width: 400px;
  line-height: 1.45;
}

.nudge-save-one {
  margin-top: 12px;
}

.nudge-bulk-bar {
  display: flex;
  justify-content: flex-end;
  padding: 16px 0 24px;
  position: sticky;
  bottom: 0;
  z-index: 5;
}
.nudge-bulk-bar .btn {
  min-width: 180px;
}

@media (max-width: 768px) {
  .nudge-card { padding: 14px; }
  .nudge-tag-bar { gap: 4px; }
  .nudge-tag-btn { font-size: 11px; padding: 2px 6px; }
  .nudge-bulk-bar { justify-content: stretch; }
  .nudge-bulk-bar .btn { width: 100%; min-width: unset; }
  .nudge-preview-bubble { max-width: 100%; }
}