/* Relinqo UI — light, plain, professional. No gradients, no glass, no glow. */

:root {
  --bg: #ffffff;
  --surface: #fafafa;
  --surface-2: #f4f4f5;
  --surface-hover: #f4f4f5;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --text: #18181b;
  --text-secondary: #3f3f46;
  --muted: #71717a;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #eff6ff;
  --accent-border: #bfdbfe;
  --success: #15803d;
  --success-soft: #f0fdf4;
  --success-border: #bbf7d0;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --danger-border: #fecaca;
  --warning: #b45309;
  --warning-soft: #fffbeb;
  --warning-border: #fde68a;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);

  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Compatibility aliases — legacy inline styles in some HTML/JS reference these
     names from the previous design. Map them onto the new neutral palette so
     anything we missed renders consistently rather than reverting to glass/neon. */
  --primary: var(--accent);
  --accent-cyan: var(--accent);
  --accent-blue: var(--accent);
  --accent-lilac: var(--accent);
  --accent-orange: var(--warning);
  --accent-pink: var(--danger);
  --accent-green: var(--success);
  --accent-yellow: var(--warning);
  --success-text: var(--success);
  --success-bg: var(--success-soft);
  --error-text: var(--danger);
  --error-bg: var(--danger-soft);
  --warning-text: var(--warning);
  --warning-bg: var(--warning-soft);
  --glass: #ffffff;
  --glass-border: var(--border);
  --bg-soft: var(--surface);
  --bg-elevated: var(--bg);
  --panel: var(--bg);
  --panel-hover: var(--surface);
  --panel-strong: var(--surface-2);
  --border-hover: var(--border-strong);
  --border-active: var(--accent);
  --shadow-glow: var(--shadow-sm);
  --shadow-glow-hover: var(--shadow-md);
  --radius-md: var(--radius-lg);
  --radius-xl: var(--radius-lg);
  --radius-full: 999px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.12s;
  --dur-normal: 0.2s;
  --dur-slow: 0.3s;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { color: var(--text); margin: 0 0 0.4em; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
h1 { font-size: 1.625rem; font-weight: 600; }
h2 { font-size: 1.125rem; }
h3 { font-size: 0.95rem; font-weight: 600; }
h4 { font-size: 0.85rem; }

p { margin: 0 0 0.75em; color: var(--text-secondary); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code { font-family: var(--font-mono); font-size: 0.85em; background: var(--surface-2); padding: 1px 5px; border-radius: 3px; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }

::selection { background: var(--accent-soft); color: var(--accent-hover); }

/* --- Layout shells --- */
.shell, .auth-shell, .settings-shell, .analytics-shell, .demo-shell, .book-shell, .tmpl-shell, .portal-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.shell-narrow { max-width: 760px; }

/* --- Topbar / header --- */
.topbar, .topbar-editorial, .analytics-header, .tmpl-header, .book-header, .demo-nav, .settings-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
  padding: 0 0 20px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--border);
}
.topbar-actions, .topbar-editorial .topbar-actions, .analytics-nav, .settings-hero-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.subhead { color: var(--muted); font-size: 0.875rem; max-width: 60ch; }

.eyebrow, .section-kicker, .demo-kicker, .proof-kicker, .step-label, .story-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}

.hero-badge, .section-chip, .featured {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0;
  text-transform: none;
}
.hero-badge-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }

/* --- Buttons --- */
.primary-btn, .demo-submit, .phone-provision-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
  text-decoration: none;
}
.primary-btn:hover, .demo-submit:hover, .phone-provision-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  text-decoration: none;
}
.primary-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.primary-btn-strong { font-weight: 600; }

.ghost-btn, .ghost-link, .compact-link, .demo-back, .lightbox-close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  text-decoration: none;
  white-space: nowrap;
}
.ghost-btn:hover, .ghost-link:hover, .compact-link:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
  text-decoration: none;
}
.compact-link { padding: 5px 9px; font-size: 0.82rem; }
.ghost-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cancel-btn { color: var(--danger); border-color: var(--danger-border); background: var(--danger-soft); }
.cancel-btn:hover { background: var(--danger-soft); border-color: var(--danger); }

.poll-toggle { gap: 6px; cursor: pointer; }
.poll-toggle input[type="checkbox"] { margin: 0; cursor: pointer; }

/* --- Cards --- */
.card, .editorial-card, .settings-card, .auth-card, .book-card, .demo-form-card, .stat-card, .chart-card, .priority-section, .workspace-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card.wide { grid-column: 1 / -1; }

/* --- Stat cards --- */
.stats-bar, .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.stat-card { padding: 14px 16px; }
.stat-card .stat-label { display: block; font-size: 0.72rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.stat-card strong { font-size: 1.5rem; font-weight: 600; color: var(--text); display: block; }

/* --- Layout grids --- */
.layout {
  display: grid;
  grid-template-columns: minmax(320px, 380px) 1fr;
  gap: 20px;
  align-items: flex-start;
}
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 1180px) {
  .layout { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
}

/* --- Lead list / panels --- */
.list-panel, .detail-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.panel-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.detail-header { align-items: flex-start; }
.detail-topline { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }

.lead-list { display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow-y: auto; padding-right: 4px; }
.lead-item, .sender-row, .tmpl-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.lead-item:hover, .sender-row:hover, .tmpl-row:hover { background: var(--surface); border-color: var(--border-strong); }
.lead-item.active, .sender-row.active { border-color: var(--accent); background: var(--accent-soft); }
.lead-item.starred { border-left: 3px solid var(--warning); }

.sender-name { font-weight: 600; font-size: 0.9rem; color: var(--text); }
.sender-email, .sender-count { font-size: 0.78rem; color: var(--muted); }
.lead-count, .muted, .muted-strong { color: var(--muted); font-size: 0.82rem; }
.muted-strong { color: var(--text-secondary); }

/* --- Filter bar --- */
.filter-bar { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
@media (max-width: 720px) { .filter-bar { grid-template-columns: 1fr 1fr; } }

.filter-input, .filter-select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 10px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  font-family: var(--font-sans);
}
textarea { font-family: var(--font-sans); resize: vertical; min-height: 80px; }
.filter-input:focus, .filter-select:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

@media (max-width: 720px) {
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select {
    font-size: 16px;
  }
}

/* --- Pills, chips, badges --- */
.pill, .urgency-pill, .badge, .tag-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.urgency-pill { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.pill.medium, .urgency-pill.medium { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }
.pill.low, .urgency-pill.low { background: var(--surface-2); color: var(--muted); border-color: var(--border); }

.status-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.status-chip.success { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.status-chip.error { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.status-chip.warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }

.tag-pill { background: var(--accent-soft); color: var(--accent-hover); border-color: var(--accent-border); }

/* --- Lists / dl --- */
.info-list, .snapshot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0; }
.info-list > div, .snapshot-item { display: flex; flex-direction: column; gap: 1px; }
.info-list dt, .snapshot-label { font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.info-list dd, .snapshot-item strong { margin: 0; font-size: 0.875rem; color: var(--text); font-weight: 500; }

.prewrap { white-space: pre-wrap; word-wrap: break-word; color: var(--text-secondary); font-size: 0.875rem; line-height: 1.6; }

/* --- Reply editor / textarea --- */
.reply-editor { width: 100%; min-height: 140px; font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.55; }
.deal-value-row { display: flex; gap: 6px; align-items: center; }
.deal-value-input { width: 100px; }

/* --- Tag row --- */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); min-height: 36px; }
.tag-input { border: 0; outline: 0; padding: 2px 4px; min-width: 120px; flex: 1; box-shadow: none; background: transparent; }
.tag-input:focus { box-shadow: none; }

/* --- Actions row --- */
.actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.actions-inline { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

/* --- View toggle --- */
.view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.toggle-btn { padding: 6px 12px; font: inherit; font-size: 0.82rem; background: transparent; border: 0; color: var(--text-secondary); cursor: pointer; border-right: 1px solid var(--border); }
.toggle-btn:last-child { border-right: 0; }
.toggle-btn.active { background: var(--accent); color: #fff; }

/* --- Quick actions --- */
.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.quick-action-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; font: inherit; font-size: 0.85rem; font-weight: 500; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; text-decoration: none; }
.quick-action-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }

/* --- Outcome buttons --- */
.outcome-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.outcome-btn { padding: 7px 16px; font: inherit; font-size: 0.85rem; font-weight: 500; border: 1px solid var(--border); background: var(--bg); border-radius: var(--radius); cursor: pointer; color: var(--text); }
.outcome-btn:hover { background: var(--surface-2); }
.outcome-btn.outcome-won, .outcome-won.active { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.outcome-btn.outcome-lost, .outcome-lost.active { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.outcome-btn.outcome-no-response, .outcome-no-response.active { background: var(--surface-2); color: var(--text-secondary); }

/* --- Empty / loading states --- */
.empty-state, .state-empty, .state-loading, .state-error, .state-success {
  display: flex; align-items: center; justify-content: center;
  padding: 60px 24px;
  color: var(--muted);
  text-align: center;
}
.empty-state-content h2 { color: var(--text); margin-bottom: 6px; font-size: 1rem; }
.empty-state-content p { font-size: 0.875rem; }
.empty-state-icon { color: var(--muted); margin-bottom: 12px; }
.loading-spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 12px; }
@keyframes spin { to { transform: rotate(360deg); } }

.hidden { display: none !important; }

/* --- Send / undo bars --- */
.undo-bar, .send-status { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--radius); margin-bottom: 12px; font-size: 0.875rem; background: var(--warning-soft); color: var(--warning); border: 1px solid var(--warning-border); }
.send-status.success { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.send-status.error { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }

/* --- Thread info --- */
.thread-info { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 12px; }
.thread-history { display: flex; flex-direction: column; gap: 10px; }

/* --- Charts (kept simple — bars are just colored divs) --- */
.charts-section { margin-bottom: 24px; }
.charts-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.charts-grid, .charts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.chart-card-wide { grid-column: 1 / -1; }
@media (min-width: 1100px) { .chart-card-wide { grid-column: span 2; } }

.lead-map-section {
  margin-bottom: 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.lead-map-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.lead-map-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lead-map {
  width: 100%;
  height: 320px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}
.lead-map-marker {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.28);
}
.lead-map-marker.active { background: var(--accent); }
.lead-map-marker.urgent { background: var(--danger); }
.lead-map-marker.won { background: var(--success); }
.lead-map-marker.sent { background: var(--muted); }
.map-popup-btn {
  margin-top: 8px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.map-popup-btn:hover {
  background: var(--surface-2);
}

.bar-chart, .horiz-chart, .funnel-chart, .rt-chart, .cat-trend, .weekday-chart, .perf-table {
  display: flex; flex-direction: column; gap: 4px; min-height: 100px;
}
.bar-chart { flex-direction: row; align-items: flex-end; gap: 3px; height: 160px; padding: 10px 4px 0; }
.bar-chart > div { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0; min-width: 4px; }

.chart-legend, .cat-legend { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 8px; font-size: 0.78rem; color: var(--muted); }
.legend-item, .cat-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot, .cat-dot { width: 10px; height: 10px; border-radius: 2px; background: var(--accent); display: inline-block; }

/* --- Photos --- */
.photo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.photo-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); cursor: pointer; transition: opacity 0.12s ease; }
.photo-gallery img:hover { opacity: 0.85; }

.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.lightbox-content { max-width: 90vw; max-height: 90vh; background: var(--bg); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.lightbox-content img { max-width: 100%; max-height: 70vh; object-fit: contain; }
.lightbox-analysis { font-size: 0.85rem; color: var(--text-secondary); margin: 0; }
.lightbox-close { align-self: flex-end; }

/* --- Internal notes --- */
.note-composer { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; margin-bottom: 12px; }
.note-composer textarea { background: var(--bg); margin-bottom: 8px; min-height: 60px; }
.note-composer-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.note-pin-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--muted); cursor: pointer; }
.notes-list { display: flex; flex-direction: column; gap: 8px; }
.note-item { padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.note-item.pinned { background: var(--warning-soft); border-color: var(--warning-border); }
.note-meta { font-size: 0.75rem; color: var(--muted); margin-bottom: 4px; }

/* --- Templates page --- */
.tmpl-list { display: flex; flex-direction: column; gap: 6px; }
.tmpl-row-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tmpl-row-name { font-weight: 600; }
.tmpl-row-meta { font-size: 0.78rem; color: var(--muted); }
.template-picker { position: relative; }
.template-menu { position: absolute; right: 0; top: 100%; margin-top: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 6px; min-width: 240px; max-height: 300px; overflow-y: auto; z-index: 50; }
.template-menu button { display: block; width: 100%; text-align: left; padding: 6px 10px; font: inherit; font-size: 0.85rem; background: transparent; border: 0; color: var(--text); border-radius: 3px; cursor: pointer; }
.template-menu button:hover { background: var(--surface-2); }

/* --- Settings page --- */
.settings-page { background: var(--bg); }
.settings-shell { display: block; }
.settings-layout { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: flex-start; }
@media (max-width: 880px) { .settings-layout { grid-template-columns: 1fr; } }
.settings-sidebar { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 4px; }
.settings-sidebar a { padding: 6px 10px; font-size: 0.85rem; color: var(--text-secondary); border-radius: var(--radius); text-decoration: none; }
.settings-sidebar a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.settings-form-grid { display: flex; flex-direction: column; gap: 18px; }
.settings-card { padding: 20px; }
.section-heading-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.editorial-form, .section-fields { display: flex; flex-direction: column; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-size: 0.78rem; font-weight: 500; color: var(--text-secondary); }
.field-group { display: flex; gap: 12px; flex-wrap: wrap; }
.field-group-double { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-group-triple-desktop { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .field-group-double, .field-group-triple-desktop { grid-template-columns: 1fr; } }
.toggle-card { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); cursor: pointer; font-size: 0.875rem; color: var(--text-secondary); }
.toggle-card:hover { background: var(--surface); }
.toggle-card input[type="checkbox"] { margin: 0; cursor: pointer; }
.toggle-card-strong { font-weight: 500; color: var(--text); }
.settings-submit-row { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; }
.settings-steps { display: flex; gap: 12px; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.settings-steps li { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); flex: 1; min-width: 200px; }
.settings-steps li > span { background: var(--accent); color: #fff; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.78rem; font-weight: 600; flex-shrink: 0; }

.api-key-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.api-key-panel .section-kicker,
.api-key-panel .muted {
  margin: 0;
}
.api-key-display {
  display: block;
  max-width: 100%;
  min-height: 42px;
  padding: 10px 11px;
  border: 1px solid rgba(169,185,214,0.14);
  border-radius: 8px;
  background: rgba(6,10,18,0.46);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: normal;
}
.api-key-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.api-key-actions .ghost-btn {
  min-width: 0;
  justify-content: center;
}

/* --- Inline alerts --- */
.inline-alert, .demo-alert { padding: 10px 12px; border-radius: var(--radius); font-size: 0.875rem; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); margin-bottom: 12px; }
.inline-alert.success, .demo-alert-success { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.inline-alert.error, .demo-alert-error { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }

/* --- Auth pages --- */
.auth-page { background: var(--surface); min-height: 100vh; padding: 32px 16px; display: flex; align-items: flex-start; justify-content: center; }
.auth-grid, .auth-grid-centered, .auth-grid-register { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 960px; width: 100%; margin: 32px auto; }
.auth-grid-centered { grid-template-columns: 1fr; max-width: 460px; }
@media (max-width: 880px) { .auth-grid, .auth-grid-register { grid-template-columns: 1fr; max-width: 460px; } }
.auth-card { padding: 28px; background: var(--bg); }
.auth-card-header { margin-bottom: 18px; }
.auth-card-header h1 { font-size: 1.4rem; margin-bottom: 4px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form-footer { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding-top: 12px; }
.auth-links-row { display: flex; gap: 12px; font-size: 0.82rem; }
.auth-hero, .auth-hero-compact { padding: 28px; }
.auth-hero h1 { font-size: 1.5rem; margin-bottom: 8px; }
.auth-hero p { font-size: 0.95rem; }

/* --- Booking page --- */
.book-shell { max-width: 720px; }
.book-card { padding: 24px; }
.book-form { display: flex; flex-direction: column; gap: 12px; }
.slots-container { display: flex; flex-direction: column; gap: 10px; }
.day-slots { display: flex; flex-direction: column; gap: 4px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.day-slots strong { font-size: 0.85rem; color: var(--text); margin-bottom: 4px; }
.day-slots button { padding: 6px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 0.82rem; cursor: pointer; text-align: left; color: var(--text); }
.day-slots button:hover { background: var(--surface-2); border-color: var(--border-strong); }
.day-slots button.selected-slot { background: var(--accent); color: #fff; border-color: var(--accent); }

/* --- Demo / contact form --- */
.demo-shell { max-width: 880px; }
.demo-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: flex-start; }
@media (max-width: 880px) { .demo-grid { grid-template-columns: 1fr; } }
.demo-form-card { padding: 24px; }
.demo-form { display: flex; flex-direction: column; gap: 12px; }
.demo-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .demo-form-row { grid-template-columns: 1fr; } }
.demo-feature-cards { display: flex; flex-direction: column; gap: 10px; }
.demo-feature { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.demo-feature h3 { font-size: 0.9rem; margin-bottom: 4px; }
.demo-disclaimer { font-size: 0.75rem; color: var(--muted); }
.demo-logo { font-weight: 600; font-size: 1rem; color: var(--text); text-decoration: none; }

/* --- Setup wizard --- */
.setup-panel { padding: 28px; max-width: 640px; margin: 0 auto; }
.setup-progress { display: flex; gap: 8px; margin-bottom: 20px; }
.setup-step { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); font-size: 0.82rem; color: var(--muted); }
.setup-step.active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-hover); }
.setup-step.done { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.step-num { display: inline-block; font-weight: 600; margin-right: 6px; }

/* --- Workspaces / portal --- */
.workspace-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.workspace-card { padding: 18px; }
.workspace-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.workspace-title { font-weight: 600; font-size: 1rem; }
.workspace-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.workspace-meta-item { display: flex; flex-direction: column; }
.workspace-meta-item .field-label { font-size: 0.7rem; }
.workspace-actions, .workspace-actions-left { display: flex; gap: 6px; flex-wrap: wrap; }
.workspace-funnel-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; padding: 10px 0; border-top: 1px solid var(--border); margin-top: 8px; }
.workspace-funnel-item { padding: 6px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: center; font-size: 0.78rem; }
.workspace-funnel-item strong { display: block; font-size: 1rem; color: var(--text); }
.workspace-funnel-revenue { color: var(--success); font-weight: 600; }
.workspace-credentials { padding-top: 10px; border-top: 1px solid var(--border); margin-top: 10px; }
.workspace-credentials-toggle { font: inherit; font-size: 0.82rem; background: transparent; border: 0; color: var(--accent); cursor: pointer; padding: 0; }
.workspace-credentials-body { padding-top: 8px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-secondary); }

/* --- Analytics --- */
.analytics-shell { background: var(--bg); }
.analytics-shell h2 { margin-top: 18px; }
.weekday-chart { display: flex; flex-direction: column; gap: 6px; }
.wd-row { display: grid; grid-template-columns: 80px 1fr 40px; gap: 8px; align-items: center; font-size: 0.82rem; }
.wd-track { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.wd-fill { height: 100%; background: var(--accent); }
.perf-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.perf-table th, .perf-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); }
.perf-table th { font-weight: 600; color: var(--text-secondary); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.perf-rate { color: var(--success); font-weight: 600; }

.sender-list { display: flex; flex-direction: column; gap: 6px; }

/* --- Mobile bottom nav --- */
.mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg); border-top: 1px solid var(--border); padding: 6px 12px env(safe-area-inset-bottom); z-index: 40; justify-content: space-around; }
.mobile-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; font-size: 0.7rem; color: var(--muted); text-decoration: none; }
.mobile-nav-item.active, .mobile-nav-item:hover { color: var(--accent); text-decoration: none; }
@media (max-width: 720px) {
  .mobile-nav { display: flex; }
  .shell, .auth-shell, .settings-shell, .analytics-shell { padding-bottom: 80px; }
  .topbar-actions a, .topbar-actions button { font-size: 0.78rem; padding: 5px 8px; }
}
.back-to-list-btn { display: none; margin-bottom: 12px; }
@media (max-width: 1180px) {
  .back-to-list-btn { display: inline-flex; }
}

/* --- Priority section --- */
.priority-section { padding: 16px; margin-bottom: 20px; border-color: var(--warning-border); background: var(--warning-soft); }
.priority-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.priority-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }

/* --- Availability grid --- */
.availability-grid { display: flex; flex-direction: column; gap: 6px; }
.avail-row { display: grid; grid-template-columns: 24px 100px 1fr 1fr; gap: 10px; align-items: center; padding: 6px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.avail-day { font-weight: 500; font-size: 0.85rem; }
.avail-active { display: inline-flex; align-items: center; }

/* --- Period selector --- */
.period-select { display: inline-flex; gap: 4px; }
.period-select button { padding: 5px 10px; font: inherit; font-size: 0.8rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary); }
.period-select button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* --- Cmd palette / shell.js notifications (basic) --- */
.toast { position: fixed; top: 20px; right: 20px; padding: 10px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); font-size: 0.875rem; z-index: 100; max-width: 320px; }
.toast.success { border-color: var(--success-border); background: var(--success-soft); color: var(--success); }
.toast.error { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger); }
.toast.warning { border-color: var(--warning-border); background: var(--warning-soft); color: var(--warning); }

/* --- Misc --- */
.success { color: var(--success); }
.error, .red { color: var(--danger); }
.solid { font-weight: 600; }
.outline { border: 1px solid var(--border); padding: 2px 6px; border-radius: var(--radius-sm); }

/* Hide scrollbars on overflow-x scroll containers but keep scrollable */
.scroll-x { overflow-x: auto; scrollbar-width: thin; }

/* --------------------------------------------------------------------------
   Relinqo Executive UI Overhaul
   A premium operations cockpit: high-contrast surfaces, animated ambient light,
   crisp density, and richer micro-interactions across the shared app shell.
---------------------------------------------------------------------------- */

:root {
  color-scheme: dark;
  --bg: #07090f;
  --surface: rgba(15, 19, 31, 0.82);
  --surface-2: rgba(26, 32, 49, 0.9);
  --surface-hover: rgba(37, 46, 67, 0.92);
  --bg-soft: #0b0f18;
  --bg-elevated: rgba(18, 23, 36, 0.96);
  --panel: rgba(12, 16, 27, 0.76);
  --panel-hover: rgba(20, 27, 42, 0.9);
  --panel-strong: rgba(28, 36, 55, 0.96);
  --glass: rgba(14, 19, 31, 0.68);
  --glass-border: rgba(161, 177, 205, 0.18);
  --border: rgba(154, 169, 196, 0.16);
  --border-strong: rgba(181, 199, 226, 0.28);
  --border-hover: rgba(77, 208, 225, 0.42);
  --border-active: #4dd0e1;
  --text: #f6f8fb;
  --text-secondary: #c2cede;
  --muted: #8290a5;
  --primary: #4dd0e1;
  --accent: #4dd0e1;
  --accent-hover: #7de7f0;
  --accent-soft: rgba(77, 208, 225, 0.13);
  --accent-border: rgba(77, 208, 225, 0.35);
  --accent-cyan: #4dd0e1;
  --accent-blue: #6ea8ff;
  --accent-lilac: #b69cff;
  --accent-orange: #ffb86b;
  --accent-pink: #ff6f91;
  --accent-green: #4ade80;
  --accent-yellow: #f8d66d;
  --success: #4ade80;
  --success-text: #4ade80;
  --success-soft: rgba(74, 222, 128, 0.12);
  --success-bg: rgba(74, 222, 128, 0.12);
  --success-border: rgba(74, 222, 128, 0.32);
  --danger: #ff6f91;
  --error-text: #ff6f91;
  --danger-soft: rgba(255, 111, 145, 0.12);
  --error-bg: rgba(255, 111, 145, 0.12);
  --danger-border: rgba(255, 111, 145, 0.32);
  --warning: #ffb86b;
  --warning-text: #ffb86b;
  --warning-soft: rgba(255, 184, 107, 0.12);
  --warning-bg: rgba(255, 184, 107, 0.12);
  --warning-border: rgba(255, 184, 107, 0.32);
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 8px;
  --radius-md: 8px;
  --radius-xl: 8px;
  --radius-full: 999px;
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.22);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 26px 80px rgba(0, 0, 0, 0.36);
  --shadow-glow: 0 0 0 1px rgba(77, 208, 225, 0.1), 0 22px 70px rgba(77, 208, 225, 0.08);
  --shadow-glow-hover: 0 0 0 1px rgba(77, 208, 225, 0.24), 0 28px 90px rgba(77, 208, 225, 0.14);
}

html {
  background: #07090f;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 16% 12%, rgba(77, 208, 225, 0.2), transparent 28vw),
    radial-gradient(circle at 82% 0%, rgba(255, 111, 145, 0.16), transparent 26vw),
    radial-gradient(circle at 78% 86%, rgba(255, 184, 107, 0.13), transparent 28vw),
    linear-gradient(135deg, #07090f 0%, #0b1020 46%, #090b12 100%);
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -25vmax;
  z-index: -2;
  pointer-events: none;
  background:
    conic-gradient(from 180deg at 50% 50%, rgba(77, 208, 225, 0), rgba(77, 208, 225, 0.16), rgba(255, 111, 145, 0.12), rgba(255, 184, 107, 0.1), rgba(77, 208, 225, 0));
  filter: blur(70px);
  opacity: 0.58;
  animation: ambientDrift 18s ease-in-out infinite alternate;
}

body::after {
  inset: 0;
  z-index: -1;
  opacity: 0.18;
  filter: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 10%, black, transparent 72%);
  animation: gridFloat 24s linear infinite;
}

@keyframes ambientDrift {
  0% { transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1); }
  100% { transform: translate3d(2%, 1%, 0) rotate(14deg) scale(1.08); }
}

@keyframes gridFloat {
  from { background-position: 0 0; }
  to { background-position: 84px 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

h1, h2, h3, h4 {
  letter-spacing: 0;
}

h1 {
  font-size: clamp(1.75rem, 2.2vw, 2.45rem);
  font-weight: 750;
}

h2 {
  font-size: 1.12rem;
  font-weight: 720;
}

p,
.subhead {
  color: var(--text-secondary);
}

a {
  color: var(--accent-hover);
}

code {
  color: #d7fbff;
  background: rgba(77, 208, 225, 0.1);
  border: 1px solid rgba(77, 208, 225, 0.16);
}

.shell,
.auth-shell,
.settings-shell,
.analytics-shell,
.demo-shell,
.book-shell,
.tmpl-shell,
.portal-page,
.kanban-shell {
  max-width: 1500px;
  width: min(1500px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 72px;
}

.shell-narrow {
  max-width: 1320px;
}

.topbar,
.topbar-editorial,
.analytics-header,
.tmpl-header,
.book-header,
.demo-nav,
.settings-hero,
.kanban-header {
  position: sticky;
  top: 12px;
  z-index: 35;
  align-items: center;
  padding: 16px;
  margin: 0 0 20px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(12, 17, 29, 0.88), rgba(14, 21, 34, 0.72));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(22px) saturate(145%);
}

.topbar::before,
.analytics-header::before,
.tmpl-header::before,
.settings-hero::before,
.kanban-header::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg, rgba(77,208,225,0.45), transparent 35%, rgba(255,184,107,0.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.topbar-actions,
.analytics-nav,
.settings-hero-actions {
  gap: 8px;
}

.eyebrow,
.section-kicker,
.demo-kicker,
.proof-kicker,
.step-label,
.story-label {
  color: var(--accent-cyan);
  font-weight: 800;
  letter-spacing: 0.12em;
}

.hero-badge,
.section-chip,
.featured {
  color: #d9fbff;
  background: linear-gradient(135deg, rgba(77,208,225,0.16), rgba(182,156,255,0.12));
  border-color: rgba(77,208,225,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.gradient-text {
  color: var(--text);
  background: linear-gradient(90deg, #ffffff 0%, #9cf4ff 45%, #ffd9ad 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.primary-btn,
.demo-submit,
.phone-provision-btn {
  position: relative;
  isolation: isolate;
  min-height: 36px;
  border: 1px solid rgba(132, 242, 255, 0.44);
  color: #061014;
  background: linear-gradient(135deg, #8af3ff 0%, #4dd0e1 48%, #ffcf94 130%);
  box-shadow: 0 10px 28px rgba(77, 208, 225, 0.22), inset 0 1px 0 rgba(255,255,255,0.48);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), filter 0.18s var(--ease-out);
}

.primary-btn:hover,
.demo-submit:hover,
.phone-provision-btn:hover {
  background: linear-gradient(135deg, #a7f7ff 0%, #66ddea 48%, #ffdbad 130%);
  border-color: rgba(167, 247, 255, 0.7);
  transform: translateY(-1px);
  box-shadow: 0 16px 42px rgba(77, 208, 225, 0.3), inset 0 1px 0 rgba(255,255,255,0.55);
}

.primary-btn:active,
.ghost-btn:active,
.ghost-link:active,
.compact-link:active {
  transform: translateY(0);
}

.ghost-btn,
.ghost-link,
.compact-link,
.demo-back,
.lightbox-close,
.subnav-link,
.analytics-nav a {
  min-height: 34px;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: background 0.18s var(--ease-out), border-color 0.18s var(--ease-out), color 0.18s var(--ease-out), transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}

.ghost-btn:hover,
.ghost-link:hover,
.compact-link:hover,
.subnav-link:hover,
.analytics-nav a:hover,
.subnav-link.active,
.analytics-nav a.active {
  color: var(--text);
  text-decoration: none;
  background: rgba(77, 208, 225, 0.1);
  border-color: var(--accent-border);
  box-shadow: 0 10px 30px rgba(77, 208, 225, 0.1), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(-1px);
}

.cancel-btn {
  color: #ffd4dd;
  background: rgba(255, 111, 145, 0.1);
  border-color: rgba(255, 111, 145, 0.28);
}

.card,
.editorial-card,
.settings-card,
.auth-card,
.book-card,
.demo-form-card,
.stat-card,
.chart-card,
.priority-section,
.workspace-card,
.list-panel,
.detail-panel,
.chart-box,
.kpi-card,
.kanban-total-card,
.kanban-col {
  background: linear-gradient(180deg, rgba(18, 24, 39, 0.86), rgba(10, 14, 24, 0.78));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.055);
  backdrop-filter: blur(18px) saturate(135%);
}

.card,
.editorial-card,
.settings-card,
.auth-card,
.book-card,
.demo-form-card,
.chart-box {
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.card:hover,
.editorial-card:hover,
.settings-card:hover,
.auth-card:hover,
.book-card:hover,
.demo-form-card:hover,
.chart-box:hover {
  border-color: rgba(77, 208, 225, 0.28);
  box-shadow: var(--shadow-glow-hover);
}

.card h3,
.chart-box h3 {
  border-bottom: 1px solid rgba(154, 169, 196, 0.12);
  color: #f8fbff;
}

.stats-bar,
.stats-grid,
.kpi-row,
.kanban-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.stat-card,
.kpi-card,
.kanban-total-card {
  position: relative;
  overflow: hidden;
  padding: 16px;
  animation: riseIn 0.5s var(--ease-out) both;
}

.stat-card::after,
.kpi-card::after,
.kanban-total-card::after {
  content: "";
  position: absolute;
  inset: auto 12px 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-orange), var(--accent-pink));
  opacity: 0.75;
}

.stat-card .stat-label,
.kpi-label,
.ktc-label {
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.stat-card strong,
.kpi-value,
.ktc-value {
  color: var(--text);
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 790;
  letter-spacing: 0;
}

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

.layout {
  grid-template-columns: minmax(320px, 410px) minmax(0, 1fr);
  gap: 18px;
}

.list-panel,
.detail-panel {
  padding: 16px;
}

.list-panel {
  position: sticky;
  top: 118px;
  max-height: calc(100vh - 136px);
  overflow: hidden;
}

.lead-list {
  max-height: calc(100vh - 330px);
  gap: 8px;
  padding: 2px 4px 8px 2px;
}

.lead-list::-webkit-scrollbar,
.cmdk-results::-webkit-scrollbar,
.template-menu::-webkit-scrollbar,
.kanban-col-body::-webkit-scrollbar {
  width: 8px;
}

.lead-list::-webkit-scrollbar-thumb,
.cmdk-results::-webkit-scrollbar-thumb,
.template-menu::-webkit-scrollbar-thumb,
.kanban-col-body::-webkit-scrollbar-thumb {
  background: rgba(154,169,196,0.24);
  border-radius: 999px;
}

.lead-item,
.sender-row,
.tmpl-row,
.priority-card,
.thread-message,
.activity-item,
.note-item,
.convo-msg {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(154,169,196,0.13);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
  transition: transform 0.18s var(--ease-out), border-color 0.18s var(--ease-out), background 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}

.lead-item {
  color: var(--text);
  text-align: left;
}

.lead-item:hover,
.sender-row:hover,
.tmpl-row:hover,
.priority-card:hover {
  background: rgba(77, 208, 225, 0.08);
  border-color: rgba(77, 208, 225, 0.32);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.22);
}

.lead-item.active,
.sender-row.active {
  background: linear-gradient(135deg, rgba(77,208,225,0.17), rgba(182,156,255,0.09));
  border-color: rgba(77, 208, 225, 0.62);
  box-shadow: 0 0 0 1px rgba(77, 208, 225, 0.16), 0 18px 42px rgba(77,208,225,0.1);
}

.lead-item-top,
.lead-item-bottom,
.priority-card-top,
.priority-card-meta,
.tmpl-row-head,
.note-item-head,
.convo-header,
.thread-message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.lead-subject,
.priority-card-subject,
.kanban-card-subject {
  margin: 2px 0;
  color: #dde7f5;
  font-weight: 560;
}

.filter-bar {
  grid-template-columns: minmax(160px, 2fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);
  gap: 8px;
}

.filter-input,
.filter-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea {
  color: var(--text);
  background: rgba(5, 8, 15, 0.58);
  border: 1px solid rgba(154,169,196,0.2);
  border-radius: var(--radius);
  min-height: 38px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

select option {
  background: #101522;
  color: var(--text);
}

.filter-input:focus,
.filter-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(77,208,225,0.72);
  box-shadow: 0 0 0 4px rgba(77, 208, 225, 0.12), inset 0 1px 0 rgba(255,255,255,0.05);
}

.pill,
.urgency-pill,
.badge,
.tag-pill,
.status-chip,
.sla-badge,
.priority-tag,
.convo-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 760;
  color: #dbe9fb;
  background: rgba(154,169,196,0.1);
  border: 1px solid rgba(154,169,196,0.18);
  white-space: nowrap;
}

.tag-pill {
  color: #d9fbff;
  background: rgba(77,208,225,0.12);
  border-color: rgba(77,208,225,0.26);
}

.urgency-pill.high,
.urgency-pill:not(.med):not(.low),
.status-chip.error,
.priority-tag-urgent,
.status-send-failed,
.convo-status.pending {
  color: #ffd9e1;
  background: rgba(255,111,145,0.13);
  border-color: rgba(255,111,145,0.32);
}

.urgency-pill.med,
.pill.medium,
.urgency-pill.medium,
.status-chip.warning,
.priority-tag-pending {
  color: #ffe4bd;
  background: rgba(255,184,107,0.13);
  border-color: rgba(255,184,107,0.32);
}

.urgency-pill.low,
.pill.low,
.urgency-pill.low {
  color: #d8e2f1;
  background: rgba(154,169,196,0.09);
}

.status-chip.success,
.status-sent,
.delivery-ok,
.convo-status.sent,
.priority-tag-new {
  color: #cfffe0;
  background: rgba(74,222,128,0.13);
  border-color: rgba(74,222,128,0.32);
}

.sla-badge.fresh { color: #cfffe0; border-color: rgba(74,222,128,0.32); background: rgba(74,222,128,0.1); }
.sla-badge.warm { color: #ffe4bd; border-color: rgba(255,184,107,0.32); background: rgba(255,184,107,0.1); }
.sla-badge.cold { color: #ffd9e1; border-color: rgba(255,111,145,0.32); background: rgba(255,111,145,0.1); }
.sla-badge.done { color: #dbe9fb; }
.sla-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.view-toggle,
.period-select {
  background: rgba(5,8,15,0.55);
  border-color: rgba(154,169,196,0.18);
}

.toggle-btn,
.period-select button {
  color: var(--text-secondary);
}

.toggle-btn.active,
.period-select button.active {
  color: #061014;
  background: linear-gradient(135deg, var(--accent-cyan), #9ff5ff);
}

.bar-chart,
.rt-chart,
.hourly-chart,
.cat-trend {
  position: relative;
  overflow: hidden;
  padding-top: 8px;
}

.bar-chart > div,
.rt-bar,
.hourly-bar,
.wd-fill,
.funnel-fill {
  background: linear-gradient(180deg, var(--accent-cyan), var(--accent-blue));
  box-shadow: 0 0 22px rgba(77,208,225,0.18);
}

.horiz-chart,
.funnel-chart {
  gap: 10px;
}

.horiz-row,
.funnel-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.8fr) minmax(120px, 2fr) 48px;
  gap: 10px;
  align-items: center;
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.horiz-track,
.funnel-track {
  height: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(154,169,196,0.12);
  border-radius: 999px;
}

.horiz-fill {
  height: 100%;
  border-radius: inherit;
}

.funnel-count {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.priority-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,184,107,0.12), rgba(255,111,145,0.08), rgba(77,208,225,0.06));
  border-color: rgba(255,184,107,0.26);
}

.priority-cards {
  gap: 10px;
}

.priority-card {
  padding: 12px;
  cursor: pointer;
}

.reply-editor,
.prewrap {
  line-height: 1.65;
}

.note-composer,
.thread-info,
.tag-row,
.day-slots,
.api-key-panel,
.toggle-card,
.workspace-funnel-item {
  background: rgba(255,255,255,0.035);
  border-color: rgba(154,169,196,0.14);
}

.tag-row {
  min-height: 40px;
}

.tag-input {
  min-height: 28px;
}

.tag-x {
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  margin-left: 2px;
}

.quick-action-btn,
.outcome-btn {
  min-height: 40px;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.035);
  border-color: rgba(154,169,196,0.16);
  transition: transform 0.18s var(--ease-out), border-color 0.18s var(--ease-out), background 0.18s var(--ease-out), color 0.18s var(--ease-out);
}

.quick-action-btn:hover,
.outcome-btn:hover {
  color: var(--text);
  background: rgba(77,208,225,0.1);
  border-color: rgba(77,208,225,0.32);
  transform: translateY(-1px);
  text-decoration: none;
}

.activity-list,
.conversation-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activity-item,
.thread-message,
.convo-msg {
  padding: 12px;
}

.activity-item time,
.convo-time {
  color: var(--muted);
  font-size: 0.74rem;
}

.convo-msg.incoming {
  margin-right: 8%;
}

.convo-msg.outgoing {
  margin-left: 8%;
  background: rgba(77,208,225,0.09);
  border-color: rgba(77,208,225,0.24);
}

.template-menu {
  min-width: 280px;
  background: rgba(10, 14, 24, 0.97);
  border-color: rgba(154,169,196,0.22);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(20px);
}

.template-menu button,
.template-menu-item {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.template-menu button:hover,
.template-menu-item:hover {
  background: rgba(77,208,225,0.1);
}

.tmi-name {
  font-weight: 720;
}

.tmi-preview {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 2px;
}

.auth-page {
  align-items: center;
  background:
    radial-gradient(circle at 12% 18%, rgba(77,208,225,0.22), transparent 30vw),
    radial-gradient(circle at 85% 20%, rgba(255,111,145,0.14), transparent 28vw),
    #07090f;
}

.auth-grid,
.auth-grid-register {
  max-width: 1120px;
  align-items: stretch;
}

.auth-hero,
.auth-hero-compact {
  padding: 30px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(77,208,225,0.12), rgba(255,255,255,0.035));
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.06);
}

.hero-story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.hero-story-card,
.hero-proof-list > div {
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.04);
}

.hero-proof-list {
  margin-top: 14px;
}

.settings-layout {
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
}

.settings-sidebar {
  top: 118px;
}

.settings-steps {
  flex-direction: column;
}

.settings-steps li {
  background: rgba(255,255,255,0.035);
  border-color: rgba(154,169,196,0.14);
}

.settings-steps li > span {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
  color: #061014;
}

.inline-alert,
.demo-alert,
.undo-bar,
.send-status {
  border-color: rgba(154,169,196,0.16);
  background: rgba(255,255,255,0.045);
  color: var(--text-secondary);
}

.inline-alert.success,
.demo-alert-success,
.send-status.success {
  border-color: var(--success-border);
  background: var(--success-soft);
  color: #d4ffe2;
}

.inline-alert.error,
.demo-alert-error,
.send-status.error {
  border-color: var(--danger-border);
  background: var(--danger-soft);
  color: #ffdce4;
}

.mobile-nav {
  background: rgba(9,13,22,0.9);
  border-top-color: rgba(154,169,196,0.16);
  backdrop-filter: blur(18px);
}

.mobile-nav-item.active,
.mobile-nav-item:hover {
  color: var(--accent-cyan);
}

/* Pipeline */
.kanban-shell {
  max-width: none;
  width: min(1800px, calc(100% - 28px));
}

.kanban-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(250px, 1fr));
  gap: 12px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 10px;
}

.kanban-col {
  min-height: 560px;
  padding: 10px;
}

.kanban-col.drop-target {
  border-color: rgba(77,208,225,0.6);
  box-shadow: 0 0 0 1px rgba(77,208,225,0.18), 0 20px 80px rgba(77,208,225,0.12);
}

.kanban-col-header,
.kanban-card-top,
.kanban-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.kanban-col-header {
  padding: 4px 4px 10px;
  border-bottom: 1px solid rgba(154,169,196,0.12);
  margin-bottom: 10px;
}

.kanban-col-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 760;
}

.kanban-col-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 16px rgba(77,208,225,0.8);
}

.kanban-col-meta,
.kc-count {
  color: var(--muted);
  font-size: 0.76rem;
}

.kanban-col-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  padding: 2px;
}

.kanban-card {
  position: relative;
  padding: 12px;
  color: var(--text);
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(154,169,196,0.15);
  border-radius: var(--radius);
  cursor: grab;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform 0.18s var(--ease-out), border-color 0.18s var(--ease-out), background 0.18s var(--ease-out);
}

.kanban-card:hover {
  transform: translateY(-2px);
  border-color: rgba(77,208,225,0.34);
  background: rgba(77,208,225,0.075);
}

.kanban-card.dragging {
  opacity: 0.55;
  cursor: grabbing;
}

.kanban-card-star,
.star-toggle {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(154,169,196,0.16);
  border-radius: 999px;
  cursor: pointer;
}

.kanban-card-star {
  position: absolute;
  top: 9px;
  right: 9px;
}

.kanban-card-star.starred,
.star-toggle.starred,
#starToggleBtn.starred {
  color: #ffe4a6;
  border-color: rgba(255,216,113,0.36);
  background: rgba(255,216,113,0.12);
}

.kanban-card-name {
  font-weight: 760;
}

.kanban-card-value {
  color: #cfffe0;
  font-weight: 760;
}

.kanban-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

/* Shared shell overlays */
.toast-stack {
  position: fixed;
  top: 18px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1200;
  width: min(390px, calc(100vw - 32px));
}

.toast {
  position: static;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: start;
  max-width: none;
  margin: 0;
  padding: 12px;
  color: var(--text);
  background: rgba(10,14,24,0.94);
  border: 1px solid rgba(154,169,196,0.18);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px);
  animation: toastIn 0.28s var(--ease-out) both;
}

.toast.leaving {
  animation: toastOut 0.28s var(--ease-out) both;
}

.toast-icon svg {
  width: 20px;
  height: 20px;
}

.toast-title {
  font-weight: 760;
}

.toast-msg {
  color: var(--text-secondary);
}

.toast-close {
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(18px) scale(0.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toastOut {
  to { opacity: 0; transform: translateX(18px) scale(0.98); }
}

.cmdk-overlay,
.shortcuts-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 16px 16px;
  background: rgba(3, 5, 10, 0.62);
  backdrop-filter: blur(12px);
}

.cmdk-panel,
.shortcuts-panel {
  width: min(720px, 100%);
  overflow: hidden;
  border: 1px solid rgba(154,169,196,0.2);
  border-radius: var(--radius-lg);
  background: rgba(10,14,24,0.96);
  box-shadow: 0 40px 140px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.06);
}

.cmdk-input-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid rgba(154,169,196,0.14);
}

.cmdk-input {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 34px;
  font-size: 1rem;
}

.cmdk-kbd,
.shortcut-key {
  padding: 3px 7px;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(154,169,196,0.16);
  border-radius: 6px;
  font-size: 0.75rem;
}

.cmdk-results {
  max-height: 56vh;
  overflow-y: auto;
  padding: 8px;
}

.cmdk-section {
  padding: 10px 10px 6px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cmdk-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: var(--radius);
  color: var(--text-secondary);
  cursor: pointer;
}

.cmdk-item svg {
  width: 18px;
  height: 18px;
}

.cmdk-item.active,
.cmdk-item:hover {
  color: var(--text);
  background: rgba(77,208,225,0.11);
}

.cmdk-meta,
.cmdk-empty {
  color: var(--muted);
  font-size: 0.78rem;
}

.cmdk-empty {
  padding: 26px;
  text-align: center;
}

.shortcuts-panel {
  padding: 20px;
}

.shortcuts-grid {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.shortcut-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(154,169,196,0.1);
}

.shortcut-keys {
  display: inline-flex;
  gap: 5px;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 0 2px;
  color: var(--muted);
}

.pagination button {
  padding: 6px 10px;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(154,169,196,0.16);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.pagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lightbox {
  background: rgba(3,5,10,0.82);
  backdrop-filter: blur(12px);
}

.lightbox-content {
  background: rgba(10,14,24,0.96);
  border: 1px solid rgba(154,169,196,0.18);
}

@media (max-width: 1180px) {
  .layout,
  .settings-layout {
    grid-template-columns: 1fr;
  }

  .list-panel,
  .settings-sidebar {
    position: static;
    max-height: none;
  }

  .lead-list {
    max-height: 54vh;
  }

  .kanban-board {
    grid-template-columns: repeat(6, minmax(270px, 310px));
  }
}

@media (max-width: 720px) {
  .shell,
  .auth-shell,
  .settings-shell,
  .analytics-shell,
  .tmpl-shell,
  .kanban-shell {
    width: min(100% - 20px, 1500px);
    padding-top: 10px;
  }

  .topbar,
  .analytics-header,
  .tmpl-header,
  .settings-hero,
  .kanban-header {
    position: relative;
    top: 0;
    padding: 14px;
  }

  .filter-bar,
  .detail-grid,
  .field-group-double,
  .field-group-triple-desktop {
    grid-template-columns: 1fr;
  }

  .lead-item-top,
  .lead-item-bottom,
  .priority-card-top,
  .priority-card-meta,
  .tmpl-row-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .auth-grid,
  .auth-grid-register,
  .auth-grid-centered {
    margin: 0 auto;
  }

  .charts-row {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   2026 visual overhaul: dark operating-room UI with procedural depth.
   This block intentionally sits last so it normalizes older page styles.
---------------------------------------------------------------------------- */
:root {
  color-scheme: dark;
  --bg: #080909;
  --surface: rgba(17, 18, 18, 0.86);
  --surface-2: rgba(27, 29, 29, 0.84);
  --surface-hover: rgba(39, 42, 42, 0.86);
  --panel: rgba(13, 14, 14, 0.88);
  --panel-hover: rgba(28, 31, 31, 0.9);
  --panel-strong: rgba(38, 40, 40, 0.92);
  --glass: rgba(14, 15, 15, 0.78);
  --glass-border: rgba(190, 197, 193, 0.14);
  --border: rgba(190, 197, 193, 0.12);
  --border-strong: rgba(213, 219, 216, 0.2);
  --border-hover: rgba(143, 236, 246, 0.34);
  --border-active: #83edf7;
  --text: #f5f8fd;
  --text-secondary: #bec5c1;
  --muted: #858c89;
  --accent: #83edf7;
  --accent-hover: #b2f7ff;
  --accent-soft: rgba(131, 237, 247, 0.12);
  --accent-border: rgba(131, 237, 247, 0.34);
  --accent-cyan: #83edf7;
  --accent-blue: #7ca8ff;
  --accent-lilac: #b8a3ff;
  --accent-orange: #f6b66f;
  --accent-pink: #ff7d9d;
  --accent-green: #6ee7a0;
  --accent-yellow: #ffdc73;
  --success: #65d992;
  --success-text: #bffbd3;
  --success-soft: rgba(101, 217, 146, 0.12);
  --success-border: rgba(101, 217, 146, 0.32);
  --danger: #ff7d9d;
  --danger-soft: rgba(255, 125, 157, 0.12);
  --danger-border: rgba(255, 125, 157, 0.34);
  --warning: #f6b66f;
  --warning-soft: rgba(246, 182, 111, 0.13);
  --warning-border: rgba(246, 182, 111, 0.32);
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 0 rgba(255,255,255,0.035) inset, 0 18px 58px rgba(0,0,0,0.38);
  --shadow: 0 1px 0 rgba(255,255,255,0.045) inset, 0 32px 100px rgba(0,0,0,0.44);
  --shadow-md: 0 1px 0 rgba(255,255,255,0.055) inset, 0 44px 150px rgba(0,0,0,0.58);
  --shadow-glow: 0 20px 70px rgba(21, 185, 205, 0.1);
  --shadow-glow-hover: 0 28px 90px rgba(21, 185, 205, 0.16);
  --font-sans: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shuttle-scroll: 0;
  --augen-progress: 0;
}

html {
  background: #080909;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 46% 18%, rgba(131,237,247,0.055), transparent 30vw),
    radial-gradient(circle at 78% 8%, rgba(124,168,255,0.06), transparent 28vw),
    radial-gradient(circle at 16% 88%, rgba(246,182,111,0.07), transparent 32vw),
    linear-gradient(180deg, #111312 0%, #080909 38%, #0b0d0c 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent 82%);
  transform: perspective(900px) rotateX(62deg) translateY(-18vh) scale(1.42);
  transform-origin: top center;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.4;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.12) 0 1px, transparent 1.4px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.08) 0 1px, transparent 1.4px);
  background-size: 28px 28px, 36px 36px;
  mix-blend-mode: screen;
}

.lr-scene-texture {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    conic-gradient(from 180deg at 50% 18%, rgba(131,237,247,0.07), transparent 25%, rgba(246,182,111,0.045), transparent 70%, rgba(184,163,255,0.055)),
    linear-gradient(120deg, transparent 0 28%, rgba(255,255,255,0.035) 28% 28.3%, transparent 28.3% 100%);
  filter: blur(0.2px);
  opacity: 0.75;
}

body > *:not(.lr-scene-texture) {
  position: relative;
}

h1, h2, h3, h4 {
  color: var(--text);
  letter-spacing: 0;
}

p, .prewrap {
  color: var(--text-secondary);
}

a {
  color: var(--accent-cyan);
}

::selection {
  color: #051014;
  background: var(--accent-cyan);
}

.shell,
.auth-shell,
.settings-shell,
.analytics-shell,
.demo-shell,
.book-shell,
.tmpl-shell,
.portal-page {
  width: min(100% - 28px, 1500px);
  max-width: 1500px;
  padding-top: 22px;
}

.topbar,
.topbar-editorial,
.analytics-header,
.tmpl-header,
.book-header,
.demo-nav,
.settings-hero,
.kanban-header {
  position: sticky;
  top: 12px;
  z-index: 20;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(21,23,23,0.92), rgba(10,11,11,0.82));
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(22px) saturate(1.18);
}

.topbar::after,
.analytics-header::after,
.settings-hero::after,
.kanban-header::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(131,237,247,0.18), transparent 38%, rgba(246,182,111,0.11));
  opacity: 0.55;
  mask-image: linear-gradient(to bottom, #000 0 1px, transparent 1px);
}

.eyebrow,
.section-kicker,
.demo-kicker,
.proof-kicker,
.step-label,
.story-label,
.mk-section-kicker,
.mk-hero-badge {
  color: var(--accent-cyan) !important;
  font-weight: 820;
  letter-spacing: 0.09em;
}

.subhead,
.lead-count,
.muted,
.muted-strong,
.sender-email,
.sender-count {
  color: var(--muted);
}

.primary-btn,
.demo-submit,
.phone-provision-btn,
.mk-btn-cta,
.mk-btn-hero-primary,
.mk-price-btn.solid,
.nav-cta,
.primary-btn:visited {
  color: #051014;
  background: linear-gradient(135deg, #b9fbff 0%, #83edf7 48%, #f8c884 135%);
  border: 1px solid rgba(185,251,255,0.62);
  box-shadow: 0 16px 42px rgba(57, 215, 236, 0.2);
  transition: transform 0.18s var(--ease-out), filter 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}

.primary-btn:hover,
.demo-submit:hover,
.phone-provision-btn:hover,
.mk-btn-cta:hover,
.mk-btn-hero-primary:hover,
.mk-price-btn.solid:hover,
.nav-cta:hover {
  color: #051014;
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 22px 62px rgba(57, 215, 236, 0.28);
}

.ghost-btn,
.ghost-link,
.compact-link,
.demo-back,
.lightbox-close,
.mk-btn-hero-secondary,
.mk-price-btn.outline,
.secondary-btn {
  color: var(--text-secondary);
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: transform 0.18s var(--ease-out), border-color 0.18s var(--ease-out), background 0.18s var(--ease-out), color 0.18s var(--ease-out);
}

.ghost-btn:hover,
.ghost-link:hover,
.compact-link:hover,
.demo-back:hover,
.mk-btn-hero-secondary:hover,
.mk-price-btn.outline:hover,
.secondary-btn:hover {
  color: var(--text);
  background: rgba(131,237,247,0.09);
  border-color: var(--border-hover);
  transform: translateY(-1px);
  text-decoration: none;
}

.card,
.editorial-card,
.settings-card,
.auth-card,
.book-card,
.demo-form-card,
.stat-card,
.chart-card,
.priority-section,
.workspace-card,
.list-panel,
.detail-panel,
.kanban-col,
.mk-demo-card,
.mk-price-card,
.mk-cta-box,
.demo-card,
.feature-card,
.step-card,
.pricing-card,
.faq-item,
.cta-box,
.mini-value-item,
.contact-card {
  position: relative;
  overflow: hidden;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(30,32,32,0.78), rgba(11,12,12,0.88)),
    radial-gradient(circle at 18% 0%, rgba(131,237,247,0.045), transparent 34%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px) saturate(1.12);
}

.card::before,
.stat-card::before,
.chart-card::before,
.list-panel::before,
.detail-panel::before,
.kanban-col::before,
.mk-demo-card::before,
.mk-price-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.08), transparent 22% 76%, rgba(131,237,247,0.05)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 10px);
  opacity: 0.65;
}

.card > *,
.stat-card > *,
.chart-card > *,
.list-panel > *,
.detail-panel > *,
.kanban-col > *,
.mk-demo-card > *,
.mk-price-card > * {
  position: relative;
}

.card:hover,
.stat-card:hover,
.chart-card:hover,
.list-panel:hover,
.detail-panel:hover,
.mk-demo-card:hover,
.mk-price-card:hover,
.kanban-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-glow-hover);
}

.card h3,
.chart-box h3 {
  border-bottom-color: rgba(169,185,214,0.12);
}

.stat-card strong,
.kpi-value,
.ktc-value {
  color: var(--text);
  text-shadow: 0 0 28px rgba(131,237,247,0.18);
}

.stat-card::after,
.kpi-card::after,
.kanban-total-card::after {
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue), var(--accent-orange));
}

.lead-item,
.sender-row,
.tmpl-row,
.priority-card,
.thread-message,
.activity-item,
.note-item,
.convo-msg,
.kanban-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(169,185,214,0.13);
  color: var(--text);
}

.lead-item:hover,
.sender-row:hover,
.tmpl-row:hover,
.priority-card:hover,
.kanban-card:hover {
  background: rgba(131,237,247,0.08);
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.lead-item.active,
.sender-row.active {
  background: linear-gradient(135deg, rgba(131,237,247,0.15), rgba(124,168,255,0.1));
  border-color: rgba(131,237,247,0.68);
  box-shadow: 0 0 0 1px rgba(131,237,247,0.16), 0 22px 68px rgba(21,185,205,0.12);
}

.sender-name,
.lead-subject,
.priority-card-subject,
.kanban-card-subject {
  color: #e9f1fb;
}

.filter-input,
.filter-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea {
  color: var(--text);
  background: rgba(7,8,8,0.72);
  border: 1px solid rgba(169,185,214,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

.filter-input::placeholder,
textarea::placeholder,
input::placeholder {
  color: rgba(185,197,216,0.55);
}

.filter-input:focus,
.filter-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(131,237,247,0.76);
  box-shadow: 0 0 0 4px rgba(131,237,247,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
}

select option {
  color: var(--text);
  background: #0d121d;
}

.pill,
.urgency-pill,
.badge,
.tag-pill,
.status-chip,
.sla-badge,
.priority-tag,
.convo-status,
.hero-badge,
.section-chip {
  border-radius: var(--radius-full);
  color: #deebfb;
  background: rgba(169,185,214,0.1);
  border: 1px solid rgba(169,185,214,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

.mk-price-card.featured {
  display: block;
  border-radius: 12px;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(34,36,36,0.9), rgba(10,11,11,0.92)),
    radial-gradient(circle at 70% 0%, rgba(131,237,247,0.12), transparent 36%);
  border-color: rgba(131,237,247,0.42);
  box-shadow: 0 34px 130px rgba(0,0,0,0.54), 0 0 0 1px rgba(131,237,247,0.1);
}

.tag-pill {
  color: #dffcff;
  background: rgba(131,237,247,0.12);
  border-color: rgba(131,237,247,0.28);
}

.urgency-pill.high,
.urgency-pill:not(.med):not(.low),
.status-chip.error,
.priority-tag-urgent,
.status-send-failed {
  color: #ffdbe4;
  background: var(--danger-soft);
  border-color: var(--danger-border);
}

.urgency-pill.med,
.pill.medium,
.urgency-pill.medium,
.status-chip.warning,
.priority-tag-pending {
  color: #ffe6c4;
  background: var(--warning-soft);
  border-color: var(--warning-border);
}

.status-chip.success,
.status-sent,
.delivery-ok,
.convo-status.sent,
.priority-tag-new {
  color: #d4ffe3;
  background: var(--success-soft);
  border-color: var(--success-border);
}

.toggle-btn.active,
.period-select button.active {
  color: #051014;
  background: linear-gradient(135deg, var(--accent-cyan), #b8fbff);
}

.bar-chart > div,
.rt-bar,
.hourly-bar,
.wd-fill,
.funnel-fill {
  background: linear-gradient(180deg, var(--accent-cyan), var(--accent-blue));
  box-shadow: 0 0 24px rgba(131,237,247,0.18);
}

.horiz-track,
.funnel-track {
  background: rgba(255,255,255,0.055);
  border-color: rgba(169,185,214,0.12);
}

.note-composer,
.thread-info,
.tag-row,
.day-slots,
.api-key-panel,
.toggle-card,
.workspace-funnel-item,
.inline-alert,
.demo-alert,
.undo-bar,
.send-status {
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
  border-color: rgba(169,185,214,0.14);
}

.mobile-nav {
  background: rgba(8,12,20,0.9);
  border-top-color: var(--border);
  backdrop-filter: blur(18px);
}

.mobile-nav-item.active,
.mobile-nav-item:hover {
  color: var(--accent-cyan);
}

.auth-page,
.mk-nav,
.site-header {
  background:
    linear-gradient(180deg, rgba(18,19,19,0.94), rgba(8,9,9,0.84)),
    rgba(8,9,9,0.9) !important;
  border-color: var(--border);
  backdrop-filter: blur(18px);
}

.mk-logo,
.brand,
.brand:visited,
.mk-nav-links a:hover,
.mk-btn-login:hover {
  color: var(--text);
}

.mk-nav-links a,
.mk-btn-login,
.nav-links a {
  color: var(--text-secondary);
}

.mk-nav {
  overflow: visible;
}

.mk-nav-inner {
  position: relative;
}

.mk-nav-links > li {
  position: relative;
}

.augen-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 4px;
}

.augen-nav-link::before {
  content: attr(data-index);
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 820;
  letter-spacing: 0.06em;
}

.augen-nav-link::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s var(--ease-out);
}

.mk-nav-links > li:hover .augen-nav-link::after,
.augen-nav-link:focus-visible::after {
  transform: scaleX(1);
}

.augen-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 80;
  width: min(520px, calc(100vw - 32px));
  padding: 12px;
  border: 1px solid rgba(169,185,214,0.18);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(14,18,27,0.96), rgba(7,10,17,0.94)),
    radial-gradient(circle at 20% 0%, rgba(131,237,247,0.11), transparent 36%);
  box-shadow: 0 34px 120px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(22px) saturate(1.18);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0.2s;
}

.mk-nav-links > li:hover .augen-dropdown,
.mk-nav-links > li:focus-within .augen-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}

.augen-dropdown-title {
  padding: 8px 8px 12px;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(169,185,214,0.12);
}

.augen-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 6px;
  padding-top: 8px;
}

.augen-drop-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 2px 10px;
  padding: 10px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  transition: background 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}

.augen-drop-item:hover {
  background: rgba(131,237,247,0.08);
  transform: translateY(-1px);
  text-decoration: none;
}

.augen-drop-item span {
  grid-row: span 2;
  color: var(--accent-cyan);
  font-size: 0.72rem;
  font-weight: 820;
}

.augen-drop-item strong {
  color: var(--text);
  font-size: 0.86rem;
}

.augen-drop-item small {
  color: var(--muted);
  line-height: 1.45;
}

.augen-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 12px;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(169,185,214,0.16);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  transition: background 0.18s var(--ease-out), border-color 0.18s var(--ease-out), color 0.18s var(--ease-out);
}

.augen-search-btn span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 820;
}

.augen-search-btn:hover {
  color: var(--text);
  background: rgba(131,237,247,0.08);
  border-color: var(--border-hover);
}

.augen-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: calc(var(--augen-progress) * 100%);
  height: 2px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-orange));
  box-shadow: 0 0 20px rgba(131,237,247,0.55);
  pointer-events: none;
}

.augen-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1900;
  display: grid;
  place-items: start center;
  padding: 12vh 18px 18px;
  background: rgba(3,5,10,0.68);
  backdrop-filter: blur(18px);
  animation: augenOverlayIn 0.2s var(--ease-out) both;
}

.augen-search-panel {
  width: min(720px, 100%);
  overflow: hidden;
  border: 1px solid rgba(169,185,214,0.2);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(15,20,31,0.98), rgba(7,10,17,0.97)),
    radial-gradient(circle at 20% 0%, rgba(131,237,247,0.14), transparent 36%);
  box-shadow: 0 40px 150px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.07);
  animation: augenPanelIn 0.28s var(--ease-out) both;
}

.augen-search-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 820;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(169,185,214,0.12);
}

.augen-search-top button {
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(169,185,214,0.16);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.25rem;
}

.augen-search-panel input {
  width: 100%;
  min-height: 82px;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid rgba(169,185,214,0.12);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  box-shadow: none;
}

.augen-search-panel input:focus {
  box-shadow: none;
}

.augen-search-suggestions {
  display: grid;
  padding: 10px;
}

.augen-search-suggestions a {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  min-height: 48px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out);
}

.augen-search-suggestions a:hover {
  color: var(--text);
  background: rgba(131,237,247,0.08);
}

.augen-search-suggestions span {
  color: var(--accent-cyan);
  font-size: 0.72rem;
  font-weight: 820;
}

.augen-tilt-card {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(0);
  transition: transform 0.22s var(--ease-out), border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}

.augen-tilt-card:hover {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-4px);
}

.mk-section {
  position: relative;
}

.mk-section::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 56px;
  bottom: 56px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(131,237,247,0.28), transparent);
  opacity: 0.55;
}

.mk-section-title {
  transform: translateY(calc((1 - var(--augen-progress)) * 8px));
}

@keyframes augenOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes augenPanelIn {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.mk-hero h1 {
  color: var(--text);
  background: linear-gradient(90deg, #ffffff 0%, #c9fbff 52%, #ffd9a8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mk-hero-shuttle {
  position: relative;
  min-height: 86vh;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.78fr);
  gap: clamp(28px, 5vw, 78px);
  align-items: center;
  overflow: hidden;
  perspective: 1400px;
}

.mk-hero-shuttle::before {
  content: "";
  position: absolute;
  inset: 18px 0 8%;
  z-index: 0;
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(8,9,9,0.94) 0%, rgba(8,9,9,0.74) 42%, rgba(8,9,9,0.26) 100%),
    radial-gradient(circle at 72% 30%, rgba(131,237,247,0.1), transparent 36%);
  pointer-events: none;
}

.recovery-photo {
  position: absolute;
  z-index: 0;
  top: clamp(46px, 9vh, 110px);
  right: 0;
  width: min(58vw, 920px);
  height: min(68vh, 620px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(210, 216, 213, 0.12);
  border-radius: 30px;
  background: #151716;
  box-shadow: 0 44px 160px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.06);
  transform:
    translateY(calc(var(--shuttle-scroll) * -34px))
    scale(calc(1.02 - (var(--shuttle-scroll) * 0.035)));
  transform-origin: center;
}

.recovery-photo::before,
.recovery-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.recovery-photo::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,9,9,0.94), rgba(8,9,9,0.5) 46%, rgba(8,9,9,0.18)),
    linear-gradient(0deg, rgba(8,9,9,0.82), transparent 48%),
    radial-gradient(circle at 74% 18%, rgba(131,237,247,0.22), transparent 28%);
}

.recovery-photo::after {
  z-index: 2;
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 58px 58px;
  mix-blend-mode: overlay;
}

.recovery-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) saturate(0.7) contrast(1.08) brightness(0.62);
  transform: scale(1.08) translateY(calc(var(--shuttle-scroll) * 28px));
}

.recovery-photo figcaption {
  position: absolute;
  z-index: 3;
  right: 22px;
  bottom: 22px;
  width: min(320px, calc(100% - 44px));
  padding: 15px;
  border: 1px solid rgba(210,216,213,0.14);
  border-radius: 16px;
  color: var(--text);
  background: rgba(12,13,13,0.72);
  box-shadow: 0 22px 70px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(18px);
}

.recovery-photo figcaption span {
  display: block;
  margin-bottom: 6px;
  color: var(--accent-orange);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.recovery-photo figcaption strong {
  display: block;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.35;
}

.mk-hero-shuttle .mk-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  transform: translateY(calc(var(--shuttle-scroll) * -18px));
}

.shuttle-stage {
  position: relative;
  z-index: 1;
  width: min(42vw, 620px);
  min-width: 420px;
  aspect-ratio: 1 / 1;
  justify-self: end;
  margin-top: 38px;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(55deg - (var(--shuttle-scroll) * 12deg)))
    rotateZ(calc(-21deg + (var(--shuttle-scroll) * 16deg)))
    translateY(calc(var(--shuttle-scroll) * -48px));
  transition: transform 0.16s linear;
}

.shuttle-stage::before {
  content: "";
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(131,237,247,0.18), transparent 54%),
    conic-gradient(from 90deg, transparent, rgba(131,237,247,0.24), transparent 36%, rgba(246,182,111,0.18), transparent 68%);
  filter: blur(1px);
  transform: translateZ(-80px);
  animation: shuttlePulse 6s ease-in-out infinite;
}

.shuttle-orbit {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(169,185,214,0.18);
  border-radius: 50%;
  transform-style: preserve-3d;
  box-shadow: 0 0 80px rgba(131,237,247,0.08);
}

.shuttle-orbit-one {
  animation: shuttleSpin 26s linear infinite;
}

.shuttle-orbit-two {
  inset: 23%;
  border-color: rgba(246,182,111,0.18);
  transform: rotateX(68deg) rotateZ(18deg) translateZ(44px);
  animation: shuttleSpinReverse 22s linear infinite;
}

.shuttle-core {
  position: absolute;
  inset: 18% 10% 18% 14%;
  border: 1px solid rgba(200,215,240,0.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035)),
    linear-gradient(180deg, rgba(17,24,38,0.92), rgba(7,10,17,0.86));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 34px 120px rgba(0,0,0,0.48),
    0 0 70px rgba(131,237,247,0.12);
  transform: translateZ(90px);
  transform-style: preserve-3d;
  overflow: hidden;
}

.shuttle-core::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.52;
  transform: translateZ(-1px);
}

.shuttle-window-bar {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid rgba(169,185,214,0.12);
}

.shuttle-window-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(169,185,214,0.34);
}

.shuttle-window-bar span:first-child {
  background: var(--accent-pink);
}

.shuttle-window-bar span:nth-child(2) {
  background: var(--accent-orange);
}

.shuttle-window-bar span:nth-child(3) {
  background: var(--accent-cyan);
}

.shuttle-file {
  position: absolute;
  display: grid;
  gap: 8px;
  min-width: 210px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(169,185,214,0.16);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)),
    rgba(11,16,26,0.82);
  box-shadow: 0 24px 70px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.08);
  transform-style: preserve-3d;
  animation: shuttleFloat 7.8s ease-in-out infinite;
}

.shuttle-file-kicker {
  color: var(--accent-cyan);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shuttle-file strong {
  color: var(--text);
  font-size: 0.92rem;
  letter-spacing: 0;
}

.shuttle-file i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: rgba(185,197,216,0.18);
}

.shuttle-file i:nth-of-type(2) {
  width: 74%;
}

.shuttle-file i:nth-of-type(3) {
  width: 48%;
}

.shuttle-file-main {
  top: 78px;
  left: 36px;
  width: 260px;
  transform: translateZ(122px) translateY(calc(var(--shuttle-scroll) * -34px));
}

.shuttle-file-reply {
  right: 34px;
  bottom: 72px;
  width: 235px;
  border-color: rgba(131,237,247,0.3);
  transform: translateZ(176px) translateY(calc(var(--shuttle-scroll) * -58px));
  animation-delay: -1.8s;
}

.shuttle-file-alert {
  right: 52px;
  top: 92px;
  width: 210px;
  border-color: rgba(246,182,111,0.32);
  transform: translateZ(228px) translateY(calc(var(--shuttle-scroll) * -84px));
  animation-delay: -3.2s;
}

.shuttle-rail {
  position: absolute;
  left: 46px;
  right: 46px;
  bottom: 34px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  transform: translateZ(55px);
}

.shuttle-rail span {
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(169,185,214,0.13);
  background: linear-gradient(180deg, rgba(131,237,247,0.14), rgba(255,255,255,0.035));
  animation: shuttleMeter 2.8s ease-in-out infinite;
}

.shuttle-rail span:nth-child(2) { animation-delay: -0.5s; }
.shuttle-rail span:nth-child(3) { animation-delay: -1s; }
.shuttle-rail span:nth-child(4) { animation-delay: -1.5s; }

.shuttle-node {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 0 8px rgba(131,237,247,0.08), 0 0 28px rgba(131,237,247,0.7);
  transform-style: preserve-3d;
}

.shuttle-node-one {
  top: 19%;
  left: 26%;
  transform: translateZ(190px);
  animation: shuttleNode 7s ease-in-out infinite;
}

.shuttle-node-two {
  top: 67%;
  left: 16%;
  background: var(--accent-orange);
  box-shadow: 0 0 0 8px rgba(246,182,111,0.08), 0 0 28px rgba(246,182,111,0.62);
  transform: translateZ(150px);
  animation: shuttleNode 6.4s ease-in-out infinite -1.4s;
}

.shuttle-node-three {
  top: 35%;
  right: 13%;
  background: var(--accent-lilac);
  box-shadow: 0 0 0 8px rgba(184,163,255,0.08), 0 0 28px rgba(184,163,255,0.62);
  transform: translateZ(220px);
  animation: shuttleNode 7.6s ease-in-out infinite -2.2s;
}

.relay-core-3d {
  position: absolute;
  inset: 30%;
  transform-style: preserve-3d;
  transform: translateZ(14px) rotateX(54deg) rotateY(calc(var(--augen-progress) * 120deg));
  animation: relayCoreTurn 20s linear infinite;
}

.relay-core-3d span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(131,237,247,0.22);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(131,237,247,0.12), rgba(255,255,255,0.025)),
    radial-gradient(circle at 50% 50%, rgba(131,237,247,0.12), transparent 45%);
  box-shadow: 0 0 45px rgba(131,237,247,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
}

.relay-morph-svg {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 0 34px rgba(131,237,247,0.18));
  transform-style: preserve-3d;
}

.relay-morph-hero {
  inset: 10%;
  transform: translateZ(12px) rotateX(58deg) rotateZ(-18deg);
  opacity: 0.42;
}

.relay-morph-section {
  inset: -8% auto auto -6%;
  width: 220px;
  height: 220px;
  opacity: 0.34;
  transform: translateZ(28px) rotateX(62deg);
}

.relay-morph-path {
  fill: rgba(131,237,247,0.07);
  stroke: rgba(131,237,247,0.42);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  animation: relayPathMorph 9s var(--ease-out) infinite alternate, relayPathSpin 18s linear infinite;
}

.relay-core-3d span:nth-child(1) { transform: rotateY(0deg) translateZ(82px); }
.relay-core-3d span:nth-child(2) { transform: rotateY(60deg) translateZ(82px); }
.relay-core-3d span:nth-child(3) { transform: rotateY(120deg) translateZ(82px); }
.relay-core-3d span:nth-child(4) { transform: rotateY(180deg) translateZ(82px); }
.relay-core-3d span:nth-child(5) { transform: rotateY(240deg) translateZ(82px); }
.relay-core-3d span:nth-child(6) { transform: rotateY(300deg) translateZ(82px); }

@keyframes shuttleSpin {
  to { transform: rotateZ(360deg); }
}

@keyframes shuttleSpinReverse {
  to { transform: rotateX(68deg) rotateZ(-342deg) translateZ(44px); }
}

@keyframes shuttlePulse {
  0%, 100% { opacity: 0.55; transform: translateZ(-80px) scale(0.96); }
  50% { opacity: 0.9; transform: translateZ(-80px) scale(1.04); }
}

@keyframes shuttleFloat {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -12px; }
}

@keyframes shuttleMeter {
  0%, 100% { opacity: 0.38; transform: scaleY(0.72); transform-origin: bottom; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: bottom; }
}

@keyframes shuttleNode {
  0%, 100% { translate: 0 0; opacity: 0.76; }
  50% { translate: 12px -18px; opacity: 1; }
}

@keyframes relayCoreTurn {
  to { rotate: 0 1 0 360deg; }
}

.mk-stats,
.mk-section,
.mk-footer {
  border-top-color: rgba(169,185,214,0.14);
}

.mk-benefit,
.mk-step,
.mk-faq {
  padding: 0;
}

.mk-step-num,
.step-number {
  color: #051014;
  background: linear-gradient(135deg, var(--accent-cyan), #b8fbff);
}

.lr-reveal {
  opacity: 0;
  transform: translateY(42px) rotateX(12deg) scale(0.96);
  transform-origin: center bottom;
  filter: blur(10px);
  transition:
    opacity 0.7s var(--ease-out) var(--reveal-delay, 0ms),
    transform 0.7s var(--ease-out) var(--reveal-delay, 0ms),
    filter 0.7s var(--ease-out) var(--reveal-delay, 0ms),
    border-color 0.18s var(--ease-out),
    background 0.18s var(--ease-out);
}

.lr-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.mk-section {
  overflow: visible;
  perspective: 1100px;
}

.interactive-tile {
  cursor: pointer;
  outline: none;
  isolation: isolate;
  transform-style: preserve-3d;
}

.interactive-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(120deg, transparent 0 32%, rgba(255,255,255,0.09) 44%, transparent 56% 100%),
    radial-gradient(circle at 20% 0%, rgba(131,237,247,0.12), transparent 36%);
  opacity: 0;
  transform: translateX(-24%) skewX(-10deg);
  transition: opacity 0.24s var(--ease-out), transform 0.5s var(--ease-out);
}

.interactive-tile:hover::after,
.interactive-tile:focus-visible::after,
.interactive-tile.tile-expanded::after {
  opacity: 1;
  transform: translateX(18%) skewX(-10deg);
}

.interactive-tile:hover,
.interactive-tile:focus-visible {
  border-color: rgba(131,237,247,0.36);
  box-shadow: 0 28px 95px rgba(0,0,0,0.48), 0 0 0 1px rgba(131,237,247,0.12);
}

.interactive-tile.tile-expanded {
  border-color: rgba(246,182,111,0.42);
  background:
    linear-gradient(180deg, rgba(37,39,38,0.88), rgba(12,13,13,0.92)),
    radial-gradient(circle at 75% 12%, rgba(246,182,111,0.12), transparent 34%);
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-5px) scale(1.015);
}

.interactive-tile.tile-expanded::before {
  opacity: 0.88;
}

.phone-rescue-steps,
.phone-rescue-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}

.phone-rescue-steps div,
.phone-rescue-stats div {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.phone-rescue-steps strong {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  color: #fff;
  background: var(--accent);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}

.phone-rescue-steps span,
.phone-rescue-stats span {
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.phone-rescue-stats strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 1.45rem;
}

.advanced-phone-setup {
  margin-top: 18px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.advanced-phone-setup summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
}

.forwarding-card {
  display: grid;
  gap: 10px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.forwarding-card h3 {
  margin: 0;
  padding: 0;
  border: 0;
}

.forwarding-code {
  display: block;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: normal;
}

.phone-health-panel {
  display: grid;
  gap: 12px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.phone-health-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.phone-health-header h3 {
  margin: 0;
  padding: 0;
  border: 0;
}

.phone-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.phone-health-item {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.phone-health-item span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.phone-health-item strong {
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

@keyframes relayPathMorph {
  0% {
    d: path("M130 13 C190 20 247 68 240 132 C233 196 184 247 121 239 C59 232 16 184 18 124 C20 64 70 6 130 13 Z");
  }
  33% {
    d: path("M127 24 C178 -5 238 55 227 118 C260 178 179 216 132 242 C76 223 12 196 28 127 C-1 66 75 47 127 24 Z");
  }
  66% {
    d: path("M136 8 C199 35 224 66 245 126 C222 185 193 236 127 232 C66 254 37 188 16 136 C37 74 67 24 136 8 Z");
  }
  100% {
    d: path("M130 32 C176 17 238 73 220 134 C237 204 174 232 116 220 C56 235 19 177 37 116 C22 57 83 14 130 32 Z");
  }
}

@keyframes relayPathSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .lr-reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .relay-core-3d {
    display: none;
  }
}

@media (max-width: 720px) {
  .shell,
  .auth-shell,
  .settings-shell,
  .analytics-shell,
  .demo-shell,
  .book-shell,
  .tmpl-shell,
  .portal-page {
    width: min(100% - 18px, 1500px);
    padding-bottom: 88px;
  }

  .topbar,
  .topbar-editorial,
  .analytics-header,
  .tmpl-header,
  .book-header,
  .demo-nav,
  .settings-hero,
  .kanban-header {
    position: relative;
    top: 0;
  }

  body::before {
    opacity: 0.45;
    transform: perspective(760px) rotateX(64deg) translateY(-24vh) scale(1.7);
  }

  .mk-hero-shuttle {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .shuttle-stage {
    order: -1;
    width: min(92vw, 420px);
    min-width: 0;
    justify-self: center;
    margin-top: 12px;
    transform:
      rotateX(calc(56deg - (var(--shuttle-scroll) * 12deg)))
      rotateZ(calc(-22deg + (var(--shuttle-scroll) * 18deg)))
      translateY(calc(var(--shuttle-scroll) * -32px));
  }

  .recovery-photo {
    position: relative;
    order: -2;
    top: auto;
    right: auto;
    width: 100%;
    height: 320px;
    border-radius: 22px;
  }

  .recovery-photo figcaption {
    right: 14px;
    bottom: 14px;
    width: min(280px, calc(100% - 28px));
  }

  .shuttle-file {
    min-width: 150px;
    padding: 12px;
  }

  .shuttle-file-main {
    width: 205px;
    left: 20px;
  }

  .shuttle-file-reply {
    width: 188px;
    right: 18px;
  }

  .shuttle-file-alert {
    width: 168px;
    right: 25px;
  }

  .augen-search-btn {
    display: none;
  }

  .augen-dropdown {
    display: none;
  }

  .mk-section::before {
    display: none;
  }

  .relay-core-3d {
    display: none;
  }
}