/* ── Design System CSS Custom Properties ─────────────────────────────────── */

:root {
  /* Background layers */
  --color-bg-base:     #0A0C10;
  --color-bg-surface:  #111318;
  --color-bg-elevated: #1A1D24;
  --color-bg-subtle:   #22262F;

  /* Borders */
  --color-border:        #2A2E38;
  --color-border-strong: #3A3F4D;

  /* Blue */
  --color-blue-400: #60A5FA;
  --color-blue-500: #3B82F6;
  --color-blue-600: #2563EB;
  --color-blue-glow: rgba(59, 130, 246, 0.15);

  /* Green */
  --color-green-400:   #34D399;
  --color-green-500:   #10B981;
  --color-green-600:   #059669;
  --color-green-subtle: rgba(16, 185, 129, 0.12);

  /* Amber */
  --color-amber-400:   #FBBF24;
  --color-amber-500:   #F59E0B;
  --color-amber-subtle: rgba(245, 158, 11, 0.12);

  /* Red */
  --color-red-400:   #F87171;
  --color-red-500:   #EF4444;
  --color-red-subtle: rgba(239, 68, 68, 0.12);

  /* Text */
  --color-text-primary:   #F1F5F9;
  --color-text-secondary: #94A3B8;
  --color-text-tertiary:  #64748B;
  --color-text-inverse:   #0A0C10;

  /* Category colors */
  --color-cat-restaurant: #818CF8;
  --color-cat-cafe:       #34D399;
  --color-cat-bar:        #FB923C;
  --color-cat-bakery:     #F472B6;
  --color-cat-niche:      #60A5FA;

  /* Typography */
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Type scale */
  --text-display:    36px;
  --text-heading-1:  28px;
  --text-heading-2:  22px;
  --text-heading-3:  18px;
  --text-body-lg:    16px;
  --text-body:       14px;
  --text-body-sm:    13px;
  --text-caption:    12px;
  --text-data:       24px;
  --text-data-sm:    16px;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Border radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg:    0 12px 32px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.3);
  --shadow-xl:    0 24px 48px rgba(0,0,0,0.7);
  --shadow-focus: 0 0 0 3px rgba(59,130,246,0.35);
  --shadow-niche: 0 0 0 2px rgba(16,185,129,0.4), 0 4px 12px rgba(16,185,129,0.15);

  /* Motion */
  --duration-fast:   100ms;
  --duration-base:   200ms;
  --duration-slow:   350ms;
  --duration-enter:  400ms;
  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Skeleton */
  --skeleton-bg:        var(--color-bg-subtle);
  --skeleton-highlight: rgba(255,255,255,0.06);
}

/* ── Base Styles ─────────────────────────────────────────────────────────── */

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

body {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  overflow-x: hidden;
}


turbo-frame {
  display: contents;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text-primary);
}

h1 { font-size: var(--text-heading-1); line-height: 1.2; }
h2 { font-size: var(--text-heading-2); line-height: 1.25; }
h3 { font-size: var(--text-heading-3); line-height: 1.3; }

/* Global focus ring */
*:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}

/* ── Skeleton shimmer animation ──────────────────────────────────────────── */

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--skeleton-bg) 25%,
    var(--skeleton-highlight) 50%,
    var(--skeleton-bg) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
  border-radius: var(--radius-sm);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-body);
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-default),
              border-color var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
  text-decoration: none;
  border: 1px solid transparent;
}

.btn:focus-visible { box-shadow: var(--shadow-focus); }

.btn-primary {
  background-color: var(--color-blue-500);
  color: #ffffff;
}
.btn-primary:hover { background-color: var(--color-blue-600); }

.btn-secondary {
  background-color: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}
.btn-secondary:hover { background-color: var(--color-bg-subtle); }

.btn-danger {
  background-color: transparent;
  border-color: var(--color-red-500);
  color: var(--color-red-400);
}
.btn-danger:hover { background-color: var(--color-red-subtle); }

.btn-disabled,
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-sm {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--text-body-sm);
}

.btn-lg {
  height: 48px;
  padding: 0 var(--space-8);
  font-size: var(--text-body-lg);
}

/* ── Cards ───────────────────────────────────────────────────────────────── */

.card {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--duration-base) var(--ease-default);
}

.card:hover { background-color: var(--color-bg-elevated); }

/* ── Status badges ───────────────────────────────────────────────────────── */

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-caption);
  font-weight: 500;
}

.status-pending, .status-badge.status-pending {
  background: rgba(100,116,139,0.15);
  color: #94A3B8;
}
.status-aggregating, .status-analyzing, .status-computing,
.status-badge.status-aggregating, .status-badge.status-analyzing, .status-badge.status-computing {
  background: rgba(59,130,246,0.15);
  color: #60A5FA;
}
.status-complete, .status-badge.status-complete {
  background: rgba(16,185,129,0.15);
  color: #34D399;
}
.status-failed, .status-badge.status-failed {
  background: rgba(239,68,68,0.15);
  color: #F87171;
}

/* ── Tier badges ─────────────────────────────────────────────────────────── */

.tier-starter { background: rgba(100,116,139,0.15); color: #94A3B8; }
.tier-pro     { background: rgba(59,130,246,0.15);  color: #60A5FA; }
.tier-business { background: rgba(16,185,129,0.15); color: #34D399; }

/* ── Panels ──────────────────────────────────────────────────────────────── */

.panel {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

/* ── Banners ─────────────────────────────────────────────────────────────── */

.banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  margin-bottom: var(--space-4);
}

.banner-warning {
  background-color: var(--color-amber-subtle);
  border-left: 3px solid var(--color-amber-500);
  color: var(--color-amber-400);
}

.banner-error {
  background-color: var(--color-red-subtle);
  border-left: 3px solid var(--color-red-500);
  color: var(--color-red-400);
}

/* ── Dashboard status pills ──────────────────────────────────────────────── */

.dashboard-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.dashboard-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-caption);
  border: 1px solid transparent;
  white-space: nowrap;
}

.dashboard-pill a {
  font-weight: 500;
  text-decoration: underline;
  color: inherit;
}

.dashboard-pill--error {
  background-color: var(--color-red-subtle);
  border-color: rgba(239, 68, 68, 0.25);
  color: var(--color-red-400);
}

.dashboard-pill--warning {
  background-color: var(--color-amber-subtle);
  border-color: rgba(245, 158, 11, 0.25);
  color: var(--color-amber-400);
}

.dashboard-pill--muted {
  background-color: var(--color-bg-subtle);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

/* ── Panel error state ───────────────────────────────────────────────────── */

.panel-error {
  padding: var(--space-4);
  background-color: var(--color-red-subtle);
  border: 1px solid var(--color-red-500);
  border-radius: var(--radius-md);
  color: var(--color-red-400);
}

.panel-error-message { margin-bottom: var(--space-3); }

.panel-error-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.panel-error-support {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  text-decoration: underline;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--color-text-secondary);
}

.empty-state-message {
  font-size: var(--text-body-lg);
  color: var(--color-text-primary);
}

.empty-state-suggestions {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
}

.empty-state-suggestions li::before {
  content: "→ ";
  color: var(--color-blue-400);
}

.empty-state-support {
  font-size: var(--text-body-sm);
  color: var(--color-text-tertiary);
}

.empty-state-support a { color: var(--color-blue-400); text-decoration: underline; }

/* ── Loading skeleton ────────────────────────────────────────────────────── */

.loading-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.skeleton-line {
  height: 16px;
  border-radius: var(--radius-sm);
}

.skeleton-line-sm { height: 12px; }
.skeleton-line-lg { height: 20px; }

.skeleton-label {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  margin: var(--space-1) 0 0;
}

/* ── Dashboard layout ────────────────────────────────────────────────────── */

.dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.dashboard-actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--space-6);
}

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

.meta {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ── Niche list ──────────────────────────────────────────────────────────── */

.niche-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.niche-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-default),
              border-color var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
}
.niche-item:hover { background-color: var(--color-bg-elevated); }
.niche-underserved { border-color: var(--color-green-500); }

.niche-rank { font-size: var(--text-caption); color: var(--color-text-tertiary); width: 20px; }
.niche-category { flex: 1; font-weight: 500; }
.niche-score { font-family: var(--font-mono); font-size: var(--text-data-sm); color: var(--color-green-400); }

/* ── Upgrade prompt ──────────────────────────────────────────────────────── */

.upgrade-prompt {
  padding: var(--space-4);
  background-color: var(--color-amber-subtle);
  border-left: 3px solid var(--color-amber-500);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.upgrade-prompt-text { font-size: var(--text-body-sm); color: var(--color-amber-400); }
.upgrade-prompt-dismiss { background: none; border: none; cursor: pointer; color: var(--color-text-tertiary); }

/* ── Inputs ──────────────────────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea {
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  height: var(--input-height, 44px);
  padding: 0 var(--space-4);
  width: 100%;
  transition: border-color var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
}

input::placeholder, textarea::placeholder { color: var(--color-text-tertiary); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-blue-500);
  box-shadow: var(--shadow-focus);
}

/* ── Tables ──────────────────────────────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
}

th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-tertiary);
  font-weight: 500;
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-border);
}

td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

tr:last-child td { border-bottom: none; }

/* ── Links ───────────────────────────────────────────────────────────────── */

a { color: var(--color-blue-400); }
a:hover { color: var(--color-blue-500); }

/* ── Search history page ─────────────────────────────────────────────────── */

.history-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.history-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.history-title {
  font-size: var(--text-heading-2);
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0 0 var(--space-1) 0;
}

.history-subtitle {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.history-filter-bar {
  max-width: 360px;
}

.history-filter-input {
  height: 40px;
  font-size: var(--text-body-sm);
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
}

.history-no-results {
  font-size: var(--text-body-sm);
  color: var(--color-text-tertiary);
  text-align: center;
  padding: var(--space-8) 0;
}

.history-pagination {
  display: flex;
  justify-content: center;
  padding-top: var(--space-4);
}

.history-empty {
  background-color: var(--color-bg-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

/* Modal actions row */
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* ── Nav links ───────────────────────────────────────────────────────────── */

.app-nav-left {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.app-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.app-nav-link {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default);
}

.app-nav-link:hover {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.app-nav-link--active {
  color: var(--color-text-primary);
  background-color: var(--color-bg-subtle);
}

/* ── Top navigation ──────────────────────────────────────────────────────── */

.app-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
  height: 56px;
  display: flex;
  align-items: center;
}

.app-nav-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-nav-logo {
  color: var(--color-text-primary);
  text-decoration: none;
}
.app-nav-logo:hover { color: var(--color-text-primary); opacity: 0.8; }

.app-nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav-icon-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  transition: background-color var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default);
}
.nav-icon-btn:hover { background-color: var(--color-bg-subtle); color: var(--color-text-primary); }
.nav-icon-btn:focus-visible { box-shadow: var(--shadow-focus); }

.nav-unread-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: var(--color-blue-500);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border-radius: var(--radius-full);
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
}

.nav-avatar-btn {
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-full);
  padding: 0;
}
.nav-avatar-btn:focus-visible { box-shadow: var(--shadow-focus); }

.nav-avatar-initials {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background-color: var(--color-blue-500);
  color: #fff;
  font-size: var(--text-body-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Notification panel ──────────────────────────────────────────────────── */

.notifications-panel {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
}

.notifications-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-text-primary);
}

.notifications-empty {
  padding: var(--space-6);
  text-align: center;
  font-size: var(--text-body-sm);
  color: var(--color-text-tertiary);
}

/* ── Nav dropdown ────────────────────────────────────────────────────────── */

.nav-dropdown-inner {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  overflow: hidden;
}

.nav-dropdown-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.nav-dropdown-links {
  display: flex;
  flex-direction: column;
}

.nav-dropdown-links a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default);
}
.nav-dropdown-links a:hover {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

/* ── Main content ────────────────────────────────────────────────────────── */

.app-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-6);
}

/* ── Toast container ─────────────────────────────────────────────────────── */

#toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}

#toast-container > * {
  pointer-events: auto;
}

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

/* ── Home screen ─────────────────────────────────────────────────────────── */

.home-screen {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* ── Search section ──────────────────────────────────────────────────────── */

.home-search-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.home-title {
  font-size: var(--text-display);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.home-subtitle {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ── Search bar ──────────────────────────────────────────────────────────── */

.search-bar-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.search-input-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.search-input {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  height: 52px;
  padding: 0 var(--space-4);
  width: 100%;
  transition: border-color var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
}

.search-input::placeholder { color: var(--color-text-tertiary); }

.search-input:focus {
  outline: none;
  border-color: var(--color-blue-500);
  box-shadow: var(--shadow-focus);
}

.search-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.search-submit {
  height: 52px;
  padding: 0 var(--space-6);
  flex-shrink: 0;
  font-size: var(--text-body-lg);
  white-space: nowrap;
}

.search-hint {
  font-size: var(--text-body-sm);
  color: var(--color-text-tertiary);
  margin: 0;
}

.search-error {
  font-size: var(--text-body-sm);
  color: var(--color-red-400);
  margin: 0;
}

.search-info {
  font-size: var(--text-body-sm);
  color: var(--color-blue-400);
  margin: 0;
}

/* ── Autocomplete dropdown ───────────────────────────────────────────────── */

.autocomplete-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
  z-index: 30;
  overflow: hidden;
}

.autocomplete-item {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default);
}

.autocomplete-item:hover,
.autocomplete-item--active {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

/* ── Example chips ───────────────────────────────────────────────────────── */

.example-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.example-chips-label {
  font-size: var(--text-body-sm);
  color: var(--color-text-tertiary);
}

.example-chip {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--text-body-sm);
  font-family: var(--font-body);
  padding: var(--space-1) var(--space-3);
  transition: border-color var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default),
              background-color var(--duration-base) var(--ease-default);
}

.example-chip:hover {
  border-color: var(--color-blue-500);
  color: var(--color-blue-400);
  background-color: var(--color-blue-glow);
}

/* ── Quota bar ───────────────────────────────────────────────────────────── */

.quota-bar-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.quota-bar-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}

.quota-bar-track {
  height: 6px;
  background-color: var(--color-bg-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.quota-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--color-blue-500);
  transition: width var(--duration-slow) var(--ease-out);
}

.quota-bar-fill--warning { background-color: var(--color-amber-500); }
.quota-bar-fill--full    { background-color: var(--color-red-500); }

/* ── Analysis card grid ──────────────────────────────────────────────────── */

.home-analyses-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.home-analyses-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-analyses-header h2 {
  margin: 0;
}

.analysis-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

/* ── Analysis card ───────────────────────────────────────────────────────── */

.analysis-card {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: background-color var(--duration-base) var(--ease-default),
              border-color var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
}

.analysis-card:hover {
  background-color: var(--color-bg-elevated);
  box-shadow: var(--shadow-sm);
}

.analysis-card--expiring {
  border-color: var(--color-amber-500);
}

.analysis-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.analysis-card-title {
  font-size: var(--text-body-lg);
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-card-title a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.analysis-card-title a:hover { color: var(--color-blue-400); }

.analysis-card-niche {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-green-subtle);
  border-radius: var(--radius-sm);
}

.analysis-card-niche-label {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.analysis-card-niche-value {
  flex: 1;
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-green-400);
}

.analysis-card-niche-score {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  color: var(--color-green-400);
}

.analysis-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--color-text-tertiary);
}

.expiry-badge {
  color: var(--color-amber-400);
  font-weight: 500;
}

.analysis-card-warning {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-caption);
  color: var(--color-amber-400);
}

.analysis-card-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

/* ── Home empty section ──────────────────────────────────────────────────── */

.home-empty-section {
  background-color: var(--color-bg-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

/* ── Analysis page layout ────────────────────────────────────────────────── */

.analysis-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Top bar */

.analysis-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.analysis-topbar-left {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
}

.analysis-topbar-back {
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  text-decoration: none;
  white-space: nowrap;
  padding-top: 4px;
}
.analysis-topbar-back:hover { color: var(--color-text-primary); }

.analysis-topbar-title {
  font-size: var(--text-heading-2);
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0 0 var(--space-2) 0;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-topbar-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}

.analysis-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.quota-pill {
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 2px var(--space-3);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

/* Two-column layout */

.analysis-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--space-5);
  align-items: start;
}

.analysis-left-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.analysis-right-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

/* Panel component */

.analysis-panel {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  min-width: 0;
  overflow: hidden;
}

.analysis-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.analysis-panel-title {
  font-size: var(--text-body-lg);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.analysis-panel-subtitle {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  margin: var(--space-1) 0 0;
}

/* Hint tooltip */

.hint-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-tertiary);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: default;
  flex-shrink: 0;
  line-height: 1;
}

.hint-btn:hover { border-color: var(--color-blue-400); color: var(--color-blue-400); }

.hint-tooltip {
  display: none;
  position: fixed;
  width: 240px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-caption);
  line-height: 1.6;
  color: var(--color-text-secondary);
  font-weight: 400;
  text-align: left;
  z-index: 9999;
  pointer-events: none;
}

.hint-tooltip[data-position="above"]::after,
.hint-tooltip:not([data-position])::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-border-strong);
}

.hint-tooltip[data-position="below"]::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--color-border-strong);
}

.analysis-panel--map { padding: 0; overflow: hidden; }
.analysis-panel--map .analysis-panel-header { padding: var(--space-5) var(--space-5) var(--space-5) var(--space-5); margin-bottom: 0; }

/* Venue map */

.venue-map-container {
  height: 400px;
  width: 100%;
  display: block;
}

.venue-map-expand-btn {
  display: inline-flex;
}

/* Category chips */

.category-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.category-chip {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--text-body-sm);
  font-family: var(--font-body);
  padding: var(--space-1) var(--space-3);
  transition: border-color var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default),
              background-color var(--duration-base) var(--ease-default);
}

.category-chip:hover {
  border-color: var(--color-blue-400);
  color: var(--color-blue-400);
}

.category-chip--active {
  border-color: var(--color-blue-500);
  background-color: var(--color-blue-glow);
  color: var(--color-blue-400);
}

.category-chip--sm {
  font-size: var(--text-caption);
  padding: 1px var(--space-2);
}

/* ── Niche card list ─────────────────────────────────────────────────────── */

.niche-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.niche-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-default),
              border-color var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
}

.niche-card:hover {
  background-color: var(--color-bg-subtle);
  border-color: var(--color-border-strong);
}

.niche-card--underserved { border-color: var(--color-green-500); }

.niche-card--selected {
  background-color: var(--color-green-subtle);
  border-color: var(--color-green-500);
  box-shadow: var(--shadow-niche);
}

.niche-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.niche-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.niche-card-rank   { font-size: var(--text-caption); color: var(--color-text-tertiary); width: 24px; flex-shrink: 0; }
.niche-card-name   { flex: 1; font-size: var(--text-body); font-weight: 500; color: var(--color-text-primary); }
.niche-card-score  { font-family: var(--font-mono); font-size: var(--text-body-sm); color: var(--color-green-400); }
.niche-card-chevron { color: var(--color-text-tertiary); flex-shrink: 0; }

.niche-card-bar-track {
  height: 4px;
  background-color: var(--color-bg-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.niche-card-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-out);
}

.niche-card-bar-fill--green   { background-color: var(--color-green-500); }
.niche-card-bar-fill--amber   { background-color: var(--color-amber-500); }
.niche-card-bar-fill--neutral { background-color: var(--color-border-strong); }

.niche-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.niche-card-signal {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  margin: 0;
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.niche-card-density {
  flex-shrink: 0;
  font-size: var(--text-caption);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.niche-card-density--low {
  background: var(--color-green-subtle);
  color: var(--color-green-400);
}

.niche-card-density--mid {
  background: var(--color-amber-subtle);
  color: var(--color-amber-400);
}

.niche-card-density--high {
  background: var(--color-red-subtle);
  color: var(--color-red-400);
}

.niche-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.niche-card-badge {
  flex-shrink: 0;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-green-400);
  background-color: var(--color-green-subtle);
  border-radius: var(--radius-full);
  padding: 2px var(--space-2);
}

.niche-card-badge--concept {
  color: var(--color-green-600, #16a34a);
  background-color: var(--color-green-subtle);
  border: 1px solid var(--color-green-300, #86efac);
  font-weight: 600;
}

.niche-card-badge--cultural {
  color: var(--color-amber-600, #d97706);
  background-color: var(--color-amber-subtle, rgba(251,191,36,0.1));
  border: 1px solid var(--color-amber-300, #fcd34d);
}

.niche-card--concept-match {
  border-color: var(--color-green-400, #4ade80);
  background: var(--color-green-subtle);
  box-shadow: var(--shadow-niche, 0 2px 8px rgba(0,0,0,0.12));
}

/* Niche detail drawer body */

.niche-detail-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.niche-detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.niche-detail-row:last-child { border-bottom: none; }

.niche-detail-label {
  font-size: var(--text-body-sm);
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.niche-detail-value { font-size: var(--text-body-sm); color: var(--color-text-primary); text-align: right; }
.niche-detail-score { font-family: var(--font-mono); color: var(--color-green-400); font-size: var(--text-data-sm); }

/* ── Sentiment chart ─────────────────────────────────────────────────────── */

.sentiment-chart-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sentiment-chart-canvas-wrapper {
  position: relative;
}

/* ── Narrative panel ─────────────────────────────────────────────────────── */

.narrative-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.narrative-empty-text {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin: 0;
}

.narrative-pending {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.narrative-pending-text {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.narrative-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-blue-400);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

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

.narrative-prose {
  font-size: var(--text-body);
  color: var(--color-text-primary);
  line-height: 1.8;
}

.narrative-prose p {
  margin: 0 0 var(--space-5) 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-border-strong);
  color: var(--color-text-secondary);
}

.narrative-prose p:first-child {
  color: var(--color-text-primary);
  border-left-color: var(--color-blue-400);
  font-size: var(--text-body-lg);
}

.narrative-prose p:last-child { margin-bottom: 0; }

.narrative-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.narrative-meta {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

.narrative-failed {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.narrative-failed-text {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin: 0;
}

.narrative-failed-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.narrative-support-link {
  font-size: var(--text-body-sm);
  color: var(--color-text-tertiary);
  text-decoration: underline;
}

/* Structured narrative sections */
.narrative-section-heading {
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: var(--space-6) 0 var(--space-3) 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.narrative-section-heading:first-of-type { margin-top: 0; }

.narrative-section-para {
  margin: 0 0 var(--space-4) 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-border-strong);
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  line-height: 1.8;
}

/* Citation links inside narrative prose */
.narrative-citation-link {
  color: var(--color-blue-400);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
  cursor: pointer;
}
.narrative-citation-link:hover {
  color: var(--color-blue-500);
}

/* Table of contents */
.narrative-toc {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}

.narrative-toc-label {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-2) 0;
}

.narrative-toc-list {
  list-style: decimal;
  padding-left: var(--space-5);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.narrative-toc-link {
  font-size: var(--text-body-sm);
  color: var(--color-blue-400);
  text-decoration: none;
}
.narrative-toc-link:hover { text-decoration: underline; }

/* ── Report download modal ───────────────────────────────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.modal-backdrop .modal-content,
.modal-backdrop .reviews-modal-content {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-6);
}

.modal--hidden { display: none !important; }

body.modal-open { overflow: hidden; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.modal-title {
  font-size: var(--text-heading-3);
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0;
}

.modal-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
}
.modal-close-btn:hover { color: var(--color-text-primary); }

.modal-description {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-5) 0;
}

.report-format-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.report-format-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.report-format-card--locked {
  opacity: 0.6;
}

.report-format-icon {
  color: var(--color-blue-400);
  flex-shrink: 0;
}

.report-format-info {
  flex: 1;
  min-width: 0;
}

.report-format-name {
  display: block;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.report-format-desc {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.report-format-tier-note {
  display: inline-block;
  margin-top: var(--space-1);
  font-size: var(--text-caption);
  color: var(--color-amber-400);
  background-color: var(--color-amber-subtle);
  border-radius: var(--radius-full);
  padding: 1px var(--space-2);
}

/* ── Venue map controls ──────────────────────────────────────────────────── */

.venue-map-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-surface);
}

/* Upsell prompt for non-analysed venues */
.venue-upsell-prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
}

.venue-upsell-link {
  color: #60a5fa;
  text-decoration: underline;
  margin-left: auto;
  white-space: nowrap;
}

.venue-upsell-link:hover { color: #93c5fd; }

/* Tooltip note for non-analysed pins */
.map-tooltip-not-analysed {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
  display: block;
}

/* Fullscreen overlay */
.venue-map-fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.venue-map-fullscreen-inner {
  width: 96vw;
  height: 92vh;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.venue-map-fullscreen-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  flex-shrink: 0;
}
.venue-map-fullscreen-header .venue-map-search-input {
  flex: 1;
  min-width: 120px;
}
.venue-map-fullscreen-header #venue_map_fs_chips {
  flex: 1 0 100%;
  order: 3;
}

.venue-map-search-input {
  flex: 1;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  padding: var(--space-2) var(--space-3);
  outline: none;
  transition: border-color var(--duration-base) var(--ease-default);
}
.venue-map-search-input:focus {
  border-color: var(--color-blue-500);
}
.venue-map-search-input::placeholder {
  color: var(--color-text-tertiary);
}

.venue-map-fs-container {
  flex: 1;
  min-height: 0;
}

/* ── Venue map overlays ──────────────────────────────────────────────────── */

.map-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-tertiary);
  font-size: var(--text-body-sm);
}

/* Legend overlay (injected into Google Maps controls) */
.map-legend {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  box-shadow: var(--shadow-sm);
}

.map-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.map-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.map-legend-label {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
}

.map-legend-count {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  font-family: var(--font-body);
  margin-left: auto;
  padding-left: var(--space-2);
}

/* Fit to area button (injected into Google Maps controls) */
.map-fit-btn {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  cursor: pointer;
  font-size: var(--text-body-sm);
  font-family: var(--font-body);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) var(--space-3) 0 0;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--duration-base) var(--ease-default);
}
.map-fit-btn:hover { background: var(--color-bg-subtle); }

/* Colour-by segmented tabs inside the legend */
.map-legend-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-2) 0;
}

.map-legend-tabs {
  display: flex;
  gap: 2px;
  background: var(--color-bg-surface);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.map-legend-tab {
  flex: 1;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  font-size: 10px;
  font-family: var(--font-body);
  padding: 2px var(--space-2);
  transition: background-color var(--duration-base) var(--ease-default), color var(--duration-base) var(--ease-default);
  white-space: nowrap;
}

.map-legend-tab--active {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}

.map-legend-tab:not(.map-legend-tab--active):hover {
  color: var(--color-text-secondary);
}

/* InfoWindow tooltip */
.map-tooltip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0;
  font-family: var(--font-body);
}
.map-tooltip-name {
  font-size: 13px;
  font-weight: 600;
  color: #111318;
}
.map-tooltip-meta {
  font-size: 12px;
  color: #4B5563;
}
.map-tooltip-hours {
  font-size: 11px;
  color: #6B7280;
}

/* Venue detail drawer body */
.venue-drawer-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.venue-drawer-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-body-sm);
}
.venue-drawer-row:last-child { border-bottom: none; }

.venue-drawer-label { color: var(--color-text-tertiary); flex-shrink: 0; }
.venue-drawer-value { color: var(--color-text-primary); text-align: right; }

.venue-drawer-section {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.venue-drawer-section-title {
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3) 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.venue-drawer-theme-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}

.venue-drawer-theme-list li::before {
  content: "· ";
  color: var(--color-blue-400);
}

/* ── Progress Stepper ────────────────────────────────────────────────────── */

.progress-stepper {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.progress-stepper-steps {
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
}

/* Track row: circles alternating with connector lines */
.progress-stepper-track {
  display: flex;
  align-items: center;
}

/* Each step wrapper holds just the circle */
.progress-step {
  flex-shrink: 0;
}

.progress-step-circle {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
}

.progress-step-number {
  font-size: var(--text-body-sm);
  font-weight: 600;
  line-height: 1;
}

/* State: inactive */
.progress-step--inactive .progress-step-circle {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-tertiary);
}

/* State: active */
.progress-step--active .progress-step-circle {
  background-color: var(--color-blue-500);
  color: #fff;
  animation: pulse-ring 1.8s ease-out infinite;
}

/* State: complete */
.progress-step--complete .progress-step-circle {
  background-color: var(--color-green-subtle);
  color: var(--color-green-400);
}

/* State: failed */
.progress-step--failed .progress-step-circle {
  background-color: var(--color-red-subtle);
  color: var(--color-red-400);
}

/* Connector line between circles */
.progress-step-line {
  height: 2px;
  flex: 1;
  border-radius: var(--radius-full);
  transition: background-color var(--duration-slow) var(--ease-out);
}

.progress-step-line--empty  { background-color: var(--color-border); }
.progress-step-line--filled { background-color: var(--color-green-500); }

/* Labels row — 4 equally spaced labels aligned under each circle */
.progress-stepper-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--space-2);
}

.progress-step-label {
  font-size: var(--text-body-sm);
  text-align: center;
  white-space: normal;
  word-break: break-word;
  transition: color var(--duration-base) var(--ease-default);
}

.progress-step-label:first-child { text-align: left; }
.progress-step-label:last-child  { text-align: right; }

.progress-step-label--inactive { color: var(--color-text-tertiary); }
.progress-step-label--active   { color: var(--color-text-primary); font-weight: 500; }
.progress-step-label--complete { color: var(--color-green-400); }
.progress-step-label--failed   { color: var(--color-red-400); }

/* Error message row */
.progress-stepper-error {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-body-sm);
  color: var(--color-red-400);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

/* Done / collapse row */
.progress-stepper-done {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-body-sm);
  color: var(--color-green-400);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.progress-stepper-done-text {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.progress-done-icon { color: var(--color-green-400); }

.progress-stepper-timestamp {
  color: var(--color-text-tertiary);
  margin-left: auto;
}

/* Pulse animation for active step */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 var(--color-blue-glow); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── Onboarding ──────────────────────────────────────────────────────────── */

.onboarding-shell {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.onboarding-card {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  box-shadow: var(--shadow-md);
}

/* Step indicator */

.onboarding-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.onboarding-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
}

.onboarding-step-circle {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-body-sm);
  font-weight: 600;
  flex-shrink: 0;
  transition: background-color var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default);
}

.onboarding-step--active .onboarding-step-circle {
  background-color: var(--color-blue-500);
  color: #fff;
}

.onboarding-step--done .onboarding-step-circle {
  background-color: var(--color-green-subtle);
  color: var(--color-green-400);
}

.onboarding-step--upcoming .onboarding-step-circle {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-tertiary);
}

.onboarding-step-label {
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
}

.onboarding-step--active .onboarding-step-label  { color: var(--color-text-primary); font-weight: 500; }
.onboarding-step--done .onboarding-step-label    { color: var(--color-green-400); }
.onboarding-step--upcoming .onboarding-step-label { color: var(--color-text-tertiary); }

.onboarding-step-connector {
  height: 2px;
  width: 40px;
  background-color: var(--color-border);
  margin: 0 var(--space-2);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-base) var(--ease-default);
}

.onboarding-step-connector--done {
  background-color: var(--color-green-500);
}

/* Card content */

.onboarding-illustration {
  display: flex;
  justify-content: center;
}

.onboarding-svg {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: var(--radius-lg);
}

.onboarding-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.onboarding-title {
  font-size: var(--text-heading-2);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.onboarding-body {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.onboarding-plan-badge {
  margin-top: var(--space-2);
}

/* Actions */

.onboarding-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.onboarding-actions--secondary {
  justify-content: flex-end;
}

/* Panel preview list */

.onboarding-panel-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.onboarding-panel-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.onboarding-panel-item strong {
  display: block;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.onboarding-panel-item p {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

.onboarding-panel-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.onboarding-icon-map      { color: var(--color-cat-niche); }
.onboarding-icon-gap      { color: var(--color-green-400); }
.onboarding-icon-sentiment { color: var(--color-amber-400); }
.onboarding-icon-narrative { color: var(--color-blue-400); }

/* ── Responsive ──────────────────────────────────────────────────────────── */

.nav-dropdown-mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .app-nav-links {
    display: none;
  }

  .nav-dropdown-mobile-only {
    display: flex;
  }

  .app-nav-inner {
    padding: 0 var(--space-4);
  }

  .app-main {
    padding: var(--space-4);
  }

  /* ── Mobile layout: flatten two-column into single priority-ordered stream ── */
  .analysis-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  /* Make panel wrappers transparent to flex — their .mobile-panel-slot children
     become direct flex children of .analysis-layout for order to apply */
  .analysis-left-panel,
  .analysis-right-panel {
    display: contents;
  }

  /* Mobile panel slots are now direct flex children */
  .mobile-panel-slot {
    width: 100%;
    min-width: 0;
  }

  /* Lazy-loaded panels: hidden until IntersectionObserver reveals them */
  .mobile-panel-slot[data-lazy-hidden] {
    visibility: hidden;
    min-height: 80px;
  }



  .venue-map-container {
    height: 480px;
  }

  .venue-map-expand-btn {
    display: flex;
    width: 100%;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-top: 1px solid var(--color-border);
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  .analysis-topbar {
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
  }

  .analysis-topbar-left {
    width: 100%;
    min-width: 0;
  }

  .analysis-topbar-left > div {
    min-width: 0;
    flex: 1;
  }

  .analysis-topbar-title {
    font-size: var(--text-heading-3);
    white-space: normal;
    overflow-wrap: break-word;
  }

  .analysis-topbar-meta {
    font-size: var(--text-caption);
    gap: var(--space-1) var(--space-2);
  }

  .analysis-topbar-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .analysis-topbar-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  /* ── Panels ── */

  .analysis-panel {
    padding: var(--space-4);
  }

  .analysis-panel-header {
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }

  .analysis-panel--map .analysis-panel-header { padding: var(--space-4); }

  /* Category chips — allow wrapping */
  .category-chips {
    flex-wrap: wrap;
  }

  /* Niche cards */
  .niche-card {
    padding: var(--space-3);
  }

  /* ── Price gap grid — shrink label column ── */
  .price-gap-header-row,
  .price-gap-row {
    grid-template-columns: 72px repeat(4, 1fr);
    gap: var(--space-1);
  }

  .price-gap-cat-label {
    font-size: var(--text-caption);
    gap: var(--space-1);
  }

  /* ── Progress stepper — compact labels on mobile ── */
  .progress-stepper-labels {
    gap: var(--space-1);
  }

  .progress-step-label {
    font-size: var(--text-caption);
  }

  /* ── Peak hours grid — shrink label column ── */
  .peak-hours-header-row,
  .peak-hours-row {
    grid-template-columns: 68px repeat(6, 1fr);
    gap: var(--space-1);
  }

  .peak-hours-slot-head {
    font-size: 9px;
  }

  .peak-hours-cat-label {
    font-size: var(--text-caption);
    gap: var(--space-1);
  }

  /* ── Theme heatmap — smaller cells, scrollable ── */
  .thmap-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .thmap-theme-head {
    height: 72px;
    font-size: 9px;
  }

  .thmap-cat-label {
    font-size: var(--text-caption);
    padding-right: var(--space-1);
  }

  .thmap-cell {
    height: 26px;
    min-width: 26px;
  }

  /* ── Weakest competitors ── */
  .weakest-name {
    max-width: 130px;
  }

  /* ── Reviews modal ── */
  .reviews-modal-content {
    max-height: 90vh;
    padding: var(--space-4);
  }

  /* ── Citations panel chips ── */
  .citations-chips {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  /* Peak hours — horizontal scroll rather than crushing columns */
  .peak-hours-chart {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .peak-hours-header-row,
  .peak-hours-row {
    grid-template-columns: 64px repeat(6, 48px);
    min-width: max-content;
  }

  /* Price gap — same treatment */
  .price-gap-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .price-gap-header-row,
  .price-gap-row {
    grid-template-columns: 64px repeat(4, 48px);
    min-width: max-content;
  }
}

@media (max-width: 640px) {
  .home-screen {
    padding: var(--space-8) var(--space-4);
    gap: var(--space-8);
  }

  .home-title {
    font-size: var(--text-heading-1);
  }

  .search-input-group {
    flex-direction: column;
    align-items: stretch;
  }

  .search-submit {
    width: 100%;
  }

  .analysis-card-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Account page ───────────────────────────────────────────── */
.account-page {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.account-header { margin-bottom: var(--space-2); }
.account-title  { font-family: var(--font-heading); font-size: var(--text-heading-2); font-weight: 600; color: var(--color-text-primary); }

.account-section {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.account-section--danger {
  border-color: color-mix(in srgb, var(--color-red-500) 40%, transparent);
}

.account-section-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.account-section-title {
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-text-primary);
}

.account-section-title--danger { color: var(--color-red-400); }

.account-section-desc {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.account-section-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.account-field {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.account-field-label {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  min-width: 120px;
}

.account-field-value {
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
}

.account-subsection { display: flex; flex-direction: column; gap: var(--space-4); }

.account-subsection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.account-subsection-title {
  font-size: var(--text-body-md);
  font-weight: 600;
  color: var(--color-text-primary);
}

.account-form-fields { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-5); }

.account-form-group { display: flex; flex-direction: column; gap: var(--space-2); }

.account-form-label {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
}

.account-form-input {
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
  width: 100%;
  max-width: 360px;
  outline: none;
  transition: border-color 120ms;
}
.account-form-input:focus { border-color: var(--color-blue-400); }

.account-form-hint {
  font-size: var(--text-body-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Password feedback banner */
.feedback-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  margin-bottom: var(--space-4);
}

.feedback-banner--success {
  background: color-mix(in srgb, var(--color-green-500) 15%, transparent);
  color: var(--color-green-400);
  border: 1px solid color-mix(in srgb, var(--color-green-500) 30%, transparent);
}

.feedback-banner--error {
  background: color-mix(in srgb, var(--color-red-500) 15%, transparent);
  color: var(--color-red-400);
  border: 1px solid color-mix(in srgb, var(--color-red-500) 30%, transparent);
}

.feedback-error-list { margin: 0; padding-left: var(--space-4); }
.feedback-error-list li { margin-bottom: var(--space-1); }

/* Notification preference toggles */
.notification-pref-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.notification-pref-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.notification-pref-item:last-child { border-bottom: none; }

.notification-pref-item--always { opacity: 0.7; }

.notification-pref-info { display: flex; flex-direction: column; gap: var(--space-1); }

.notification-pref-name {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-text-primary);
}

.notification-pref-desc {
  font-size: var(--text-body-xs);
  color: var(--color-text-muted);
}

.notification-pref-badge {
  font-size: var(--text-body-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface-3);
  color: var(--color-text-secondary);
}

/* Toggle switch */
.notification-pref-toggle {
  all: unset;
  cursor: pointer;
  width: 40px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  position: relative;
  flex-shrink: 0;
  transition: background 150ms, border-color 150ms;
  display: flex;
  align-items: center;
  padding: 0 3px;
}

.notification-pref-toggle--on {
  background: var(--color-blue-500);
  border-color: var(--color-blue-500);
}

.notification-pref-toggle-knob {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  transition: transform 150ms, background 150ms;
  display: block;
  pointer-events: none;
}

.notification-pref-toggle--on .notification-pref-toggle-knob {
  transform: translateX(18px);
  background: #fff;
}

/* Subscription info */
.subscription-info { display: flex; flex-direction: column; gap: var(--space-4); }

.account-subscription-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.quota-bar-track {
  height: 6px;
  background: var(--color-surface-3);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.quota-bar-fill {
  height: 100%;
  background: var(--color-blue-500);
  border-radius: var(--radius-full);
  transition: width 300ms ease;
}

.quota-bar-fill--warning { background: var(--color-amber-500); }
.quota-bar-fill--full    { background: var(--color-red-500); }

/* Invoice list */
.invoice-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }

.invoice-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-body-sm);
}

.invoice-item:last-child { border-bottom: none; }

.invoice-date  { color: var(--color-text-secondary); min-width: 100px; }
.invoice-amount { color: var(--color-text-primary); font-weight: 500; flex: 1; }

.invoice-receipt-link {
  font-size: var(--text-body-xs);
  color: var(--color-blue-400);
  text-decoration: none;
}
.invoice-receipt-link:hover { text-decoration: underline; }

/* Danger zone */
.danger-zone-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}

.danger-zone-label {
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.danger-zone-desc {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

@media (max-width: 640px) {
  .account-page { padding: var(--space-6) var(--space-4); }
  .danger-zone-row { flex-direction: column; }
  .account-form-input { max-width: 100%; }
}

/* ── Plans comparison page ─────────────────────────────────── */
.plans-page {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
}

.plans-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.plans-title {
  font-family: var(--font-heading);
  font-size: var(--text-heading-1);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.plans-subtitle {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

/* Monthly/Annual toggle */
.billing-cycle-toggle {
  display: inline-flex;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 2px;
}

.billing-cycle-btn {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-body-sm);
  font-weight: 500;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  background: transparent;
  transition: background 150ms, color 150ms;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.billing-cycle-btn--active {
  background: var(--color-surface-3);
  color: var(--color-text-primary);
}

.billing-cycle-save {
  font-size: var(--text-body-xs);
  padding: 2px 6px;
  background: color-mix(in srgb, var(--color-green-500) 20%, transparent);
  color: var(--color-green-400);
  border-radius: var(--radius-full);
}

/* 3-column plans grid */
.plans-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: start;
}

/* ── Subscription page ───────────────────────────────────────────────────── */

.sub-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.sub-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.sub-page-title {
  font-size: var(--text-heading-md);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.sub-page-subtitle {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: var(--space-1) 0 0;
}

.sub-plan-card {
  padding: var(--space-5) var(--space-6);
}

.sub-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.sub-plan-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sub-plan-name {
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-right: var(--space-1);
}

.sub-plan-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.sub-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

.sub-meta-item--warning {
  color: var(--color-amber-400);
}

.sub-meta-item--error {
  color: var(--color-red-400);
}

.sub-empty {
  font-size: var(--text-body-sm);
  color: var(--color-text-tertiary);
  padding: var(--space-4) var(--space-6);
  margin: 0;
}

.sub-invoices-table {
  width: 100%;
  border-collapse: collapse;
}

.sub-invoices-table thead th {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  font-weight: 500;
  text-align: left;
  padding: var(--space-2) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sub-invoices-table tbody tr {
  border-bottom: 1px solid var(--color-border);
}

.sub-invoices-table tbody tr:last-child {
  border-bottom: none;
}

.sub-invoice-date,
.sub-invoice-amount,
.sub-invoice-action {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-body-sm);
}

.sub-invoice-date {
  color: var(--color-text-secondary);
}

.sub-invoice-amount {
  color: var(--color-text-primary);
  font-weight: 500;
}

.sub-invoice-action {
  text-align: right;
}

.sub-invoice-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-body-sm);
  color: var(--color-blue-400);
  text-decoration: none;
}

.sub-invoice-link:hover {
  text-decoration: underline;
}

.sub-invoice-none {
  color: var(--color-text-tertiary);
}

/* ── Plans page ──────────────────────────────────────────────────────────── */

.plan-col {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.plan-col--featured {
  border-color: var(--color-blue-500);
  box-shadow: 0 0 0 1px var(--color-blue-500);
}

.plan-col--current {
  border-color: var(--color-green-500);
}

.plan-col-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.plan-col-name {
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-text-primary);
}

.plan-col-badge {
  display: inline-flex;
  align-self: flex-start;
  font-size: var(--text-body-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-green-500) 20%, transparent);
  color: var(--color-green-400);
}

.plan-col-badge--popular {
  background: color-mix(in srgb, var(--color-blue-500) 20%, transparent);
  color: var(--color-blue-400);
}

.plan-col-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.plan-col-price-amount {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-text-primary);
  transition: none;
}

.plan-col-price-period {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}

.plan-col-desc {
  font-size: var(--text-body-xs);
  color: var(--color-text-muted);
}

.plan-col-features {
  list-style: none;
  padding: var(--space-6);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.plan-col-features li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
}

.plan-col-features li svg { flex-shrink: 0; color: var(--color-green-400); }

.plan-col-feature--missing {
  color: var(--color-text-muted) \!important;
}

.plan-col-feature--missing svg { color: var(--color-text-muted) \!important; }

.plan-col-cta {
  padding: var(--space-4) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
}
.plan-col-cta .btn,
.plan-col-cta a.btn,
.plan-col-cta button.btn {
  display: flex;
  width: 100%;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

.plan-col-cta--soon {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
  font-size: var(--text-body-sm);
}

.plans-downgrade {
  margin-top: var(--space-10);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}

/* ── Area Preview (task 33) ────────────────────────────────────── */

.area-preview-section {
  margin-top: var(--space-4);
}

.area-preview-map-wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.area-preview-map {
  width: 100%;
  height: 340px;
  background: var(--color-bg-elevated);
  position: relative;
}

.map-unavailable-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-text-tertiary);
  font-size: var(--text-body-sm);
}

.venue-preview-summary {
  margin-top: var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.venue-preview-count {
  font-family: var(--font-heading);
  font-size: var(--text-heading-3);
  color: var(--color-text-primary);
  margin: 0;
}

.preview-category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.preview-category-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}

.preview-category-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.preview-category-count {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-left: var(--space-1);
}

.venue-preview-warning {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--color-amber-400);
  background: var(--color-amber-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}

@media (max-width: 768px) {
  .area-preview-map { height: 240px; }
}

@media (max-width: 768px) {
  .plans-grid-3 {
    grid-template-columns: 1fr;
  }
  .plan-col--featured {
    order: -1;
  }
}

/* ── Two-state conversational dashboard ─────────────────────────────────── */

.home-state-a--centered {
  min-height: calc(100vh - 310px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-search-section--minimal {
  width: 100%;
  text-align: center;
  margin-top: -28px;
}

.home-search-section--minimal .home-title {
  margin-bottom: var(--space-4);
}

.home-search-input-wrap {
  position: relative;
  width: min(620px, 100%);
  margin: 0 auto;
}

.home-search-input-wrap .search-error {
  margin-top: var(--space-3);
}

/* Arrow-style input shell */
.arrow-input-shell {
  position: relative;
  width: 100%;
  min-height: 110px;
}

.arrow-input {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: 20px;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.5;
  min-height: 110px;
  height: auto;
  max-height: 240px;
  box-sizing: border-box;
  padding: var(--space-3) calc(var(--space-5) + 40px) 50px var(--space-5);
  resize: none;
  width: 100%;
  overflow-y: auto;
  transition: border-color var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
  display: block;
}

.arrow-input::placeholder { color: var(--color-text-tertiary); }

.arrow-input:focus {
  outline: none;
  border-color: var(--color-blue-500);
  box-shadow: var(--shadow-focus);
}

/* Arrow submit button — absolute inside the shell */
.arrow-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  margin: 0;
  transform: none;
  line-height: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-subtle);
  color: var(--color-text-tertiary);
  transition: background-color var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default);
  flex-shrink: 0;
  z-index: 2;
}

.arrow-btn-icon .lucide {
  transform: rotate(-90deg);
}

/* Active (has text) — green */
.arrow-btn:not(.arrow-btn--inactive):not([disabled]) {
  background-color: var(--color-green-500);
  color: #ffffff;
}

.arrow-btn:not(.arrow-btn--inactive):not([disabled]):hover {
  background-color: var(--color-green-600);
}

/* Inactive (no text yet) — grey, looks disabled but still clickable */
.arrow-btn--inactive {
  opacity: 0.4;
  cursor: default;
}

/* Truly disabled (quota exhausted) */
.arrow-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Loading spinner state */
.arrow-btn--loading .arrow-btn-icon { display: none; }

.arrow-btn--loading::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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

/* Mode badge inside the input, bottom-left */
.input-mode-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  right: auto;
  top: auto;
  margin: 0;
  transform: none;
  border-radius: var(--radius-md);
  z-index: 2;
  pointer-events: none;
}

/* Mode badges */
.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-caption);
  font-weight: 500;
}

.mode-badge--concept {
  background: rgba(59,130,246,0.15);
  color: #60A5FA;
}

.mode-badge--discovery {
  background: rgba(100,116,139,0.15);
  color: #94A3B8;
}

/* State B: map-centric full-width layout */
.dash-state-b {
  display: flex;
  flex-direction: column;
  margin-left: calc(-1 * var(--space-6));
  margin-right: calc(-1 * var(--space-6));
  margin-top: calc(-1 * var(--space-12));
}

/* Summary row — sticky below nav (56px) */
.summary-row {
  position: sticky;
  top: 56px;
  z-index: 15;
  flex-shrink: 0;
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-6);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  flex-wrap: wrap;
}

/* Unified area map wrapper — sits after summary-row in normal flow */
[data-controller~="unified-area-map"] {
  margin-top: var(--space-3);
}

/* Map fill wrapper — fills remaining viewport after nav (56) + summary-row (44) + gap (12) + bottom-bar (135) */
.map-fill-wrapper {
  position: relative;
  height: calc(100svh - 247px);
  min-height: 300px;
}

.map-fill-wrapper .area-preview-map {
  height: 100%;
  border-radius: 0;
}

/* Map geocoder overlay — top-left inside the map */
.map-geocoder-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  width: 280px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: visible;
}

.map-geocoder-input {
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  height: 32px;
  padding: 0 var(--space-3);
  width: 100%;
  border-radius: var(--radius-md);
}

.map-geocoder-input:focus {
  outline: none;
  box-shadow: none;
}

.map-geocoder-overlay .autocomplete-list {
  top: calc(100% + 4px);
  left: -1px;
  right: -1px;
  width: auto;
}

/* Venue list overlay — bottom-left inside the map */
.map-venue-list {
  position: absolute;
  bottom: 16px;
  left: 12px;
  z-index: 10;
  width: 220px;
  max-height: 220px;
  overflow-y: auto;
  background: rgba(12, 14, 20, 0.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}

.map-venue-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.map-venue-list details {
  display: block;
}

.map-venue-list summary {
  list-style: none;
}

.map-venue-list summary::-webkit-details-marker {
  display: none;
}

.map-venue-list__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 10px;
  cursor: default;
  transition: background 0.1s;
}

.map-venue-list__item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.map-venue-list__item--total {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 2px;
}

.map-venue-list__item--disclaimer {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 2px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.map-venue-list__disclaimer-text {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

.map-venue-list__upgrade-link {
  font-size: var(--text-caption);
  color: var(--color-blue-400);
  text-decoration: none;
  font-weight: 500;
}

.map-venue-list__upgrade-link:hover {
  text-decoration: underline;
}

.map-venue-list__group-item {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.map-venue-list__group-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
}

.map-venue-list__group-summary:hover {
  background: rgba(255, 255, 255, 0.05);
}

.map-venue-list__children {
  list-style: none;
  margin: 0;
  padding: 0 0 4px 0;
}

.map-venue-list__child-item {
  display: block;
}

.map-venue-list__child-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  background: none;
  border: none;
  padding: 5px 10px 5px 24px;
  cursor: pointer;
  text-align: left;
  border-radius: 0;
  transition: background 0.1s;
  min-width: 0;
}

.map-venue-list__child-btn:hover {
  background: rgba(255, 255, 255, 0.07);
}

.map-venue-list__child-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.map-venue-list__child-name {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.map-venue-list__child-rating {
  font-size: 10px;
  color: #fbbf24;
  flex-shrink: 0;
  white-space: nowrap;
}

.map-venue-list__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 4px;
}

.map-venue-list__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.map-venue-list__name {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-venue-list__meta {
  font-size: 11px;
  color: var(--color-text-tertiary);
  display: flex;
  gap: 5px;
  align-items: center;
}

.map-venue-list__rating {
  color: #fbbf24;
}

/* Confirm location button — bottom-right inside the map */
.confirm-location-btn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 10;
}

/* Loading state for confirm button */
.confirm-location-btn.btn--loading {
  color: transparent;
  pointer-events: none;
  position: absolute; /* keep stacking context */
}
.confirm-location-btn.btn--loading .lucide { visibility: hidden; }
.confirm-location-btn.btn--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Run-analysis form sits in the same bottom-right slot */
.run-analysis-form-overlay {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 10;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  display: block;
}

/* Run analysis panel — empty anchor (button lives inside the map now) */
.run-analysis-panel { display: none; }

/* Bottom input bar — fixed at the bottom of the viewport */
.bottom-input-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-6);
}

/* Override .home-screen constraints when in State B */
.home-screen--active {
  max-width: none;
  padding: 0;
}

/* ── Concept fit panel ───────────────────────────────────────────────────── */

.concept-fit-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.concept-fit-concept {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.concept-fit-category {
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  font-family: var(--font-heading);
  text-transform: capitalize;
}

.concept-fit-description {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Rich concept dimension tags */

.concept-fit-dimensions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.concept-fit-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-caption);
  font-weight: 500;
  text-transform: capitalize;
}

.concept-fit-tag--size {
  background: rgba(100, 116, 139, 0.15);
  color: #94A3B8;
}

.concept-fit-tag--format {
  background: rgba(59, 130, 246, 0.12);
  color: var(--color-blue-400);
}

.concept-fit-tag--occasion {
  background: rgba(251, 191, 36, 0.12);
  color: var(--color-amber-400);
}

.concept-fit-tag--quality {
  background: rgba(16, 185, 129, 0.12);
  color: var(--color-green-400);
}

/* Gap score metrics */

.concept-fit-metrics {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.concept-fit-metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.concept-fit-metric-label {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.concept-fit-metric-value {
  font-size: var(--text-data-sm);
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-text-primary);
}

.concept-fit-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-caption);
  font-weight: 500;
  margin-left: auto;
}

.concept-fit-indicator--strong {
  background: var(--color-green-subtle);
  color: var(--color-green-400);
}

.concept-fit-indicator--moderate {
  background: var(--color-amber-subtle);
  color: var(--color-amber-400);
}

.concept-fit-no-data {
  font-size: var(--text-body-sm);
  color: var(--color-text-tertiary);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* Rank context row (Task 79) */
.concept-rank-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.concept-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-caption);
  font-weight: 700;
}

.concept-rank-badge--gold   { background: rgba(234,179,8,0.18);  color: #FBBF24; }
.concept-rank-badge--silver { background: rgba(148,163,184,0.18); color: #94A3B8; }
.concept-rank-badge--bronze { background: rgba(180,120,60,0.18);  color: #C97D40; }
.concept-rank-badge--default { background: var(--color-bg-subtle); color: var(--color-text-tertiary); }

.concept-rank-label {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

/* Differentiation hints (Task 80) */
.concept-differentiation {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.concept-differentiation-label {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  margin: 0;
}

.concept-differentiation-themes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.concept-differentiation-pill {
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-red-400);
  background: var(--color-red-subtle);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  text-transform: capitalize;
}

.concept-differentiation-hint {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  font-style: italic;
  margin: 0;
}

/* ── Marketing / Landing page ──────────────────────────────────────────────── */

.mkt-body {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
}

/* Nav */
.mkt-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 12, 16, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.mkt-nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mkt-nav-logo {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
}
.mkt-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.mkt-nav-link {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-default);
}
.mkt-nav-link:hover { color: var(--color-text-primary); }

/* Containers */
.mkt-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.mkt-container--narrow {
  max-width: 760px;
}

/* Sections */
.mkt-section {
  padding: var(--space-20) 0;
}
.mkt-section--alt {
  background-color: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.mkt-section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}
.mkt-section-label {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-blue-400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-3) 0;
}
.mkt-section-title {
  font-family: var(--font-heading);
  font-size: var(--text-heading-1);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

/* Hero */
.mkt-hero {
  position: relative;
  padding: calc(var(--space-20) * 1.5) 0 var(--space-20);
  text-align: center;
  overflow: hidden;
}
.mkt-hero-inner {
  position: relative;
  z-index: 1;
}
.mkt-hero-badge {
  display: inline-block;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: var(--color-blue-400);
  font-size: var(--text-body-sm);
  font-weight: 500;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}
.mkt-hero-headline {
  font-family: var(--font-heading);
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-6) 0;
}
.mkt-hero-sub {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  max-width: 580px;
  margin: 0 auto var(--space-8) auto;
  line-height: 1.6;
}
.mkt-hero-search {
  display: flex;
  align-items: center;
  max-width: 620px;
  margin: 0 auto var(--space-2) auto;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  transition: border-color var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
}
.mkt-hero-search:focus-within {
  border-color: var(--color-blue-500);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.mkt-hero-search-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  height: 44px;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}
.mkt-hero-search-input:focus { box-shadow: none !important; }
.mkt-hero-search-input::placeholder { color: var(--color-text-tertiary); }
.mkt-hero-search-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-blue-500);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  padding: 0 var(--space-5);
  height: 44px;
  font-size: var(--text-body);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-default);
}
.mkt-hero-search-btn:hover { background: #2563eb; }

.mkt-hero-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}
.mkt-hero-glow {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse at center top, rgba(59,130,246,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.mkt-hero-glow--bottom {
  top: auto;
  bottom: 0;
  background: radial-gradient(ellipse at center bottom, rgba(59,130,246,0.10) 0%, transparent 70%);
}

/* Problem section */
.mkt-problem-headline {
  font-family: var(--font-heading);
  font-size: var(--text-heading-2);
  font-weight: 600;
  color: var(--color-text-primary);
  text-align: center;
  margin: 0 0 var(--space-10) 0;
  line-height: 1.4;
}
.mkt-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}
.mkt-problem-item {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
}
.mkt-problem-icon {
  display: block;
  font-size: 32px;
  margin-bottom: var(--space-3);
}
.mkt-problem-item p {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}
.mkt-problem-close {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.6;
  margin: 0;
}
.mkt-problem-close strong { color: var(--color-text-primary); }

/* Steps */
.mkt-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.mkt-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}
.mkt-step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-blue-500);
  color: #fff;
  font-size: var(--text-body-lg);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mkt-step-connector {
  flex: 0 0 60px;
  height: 2px;
  background: var(--color-border);
  margin-top: 24px;
}
.mkt-step-title {
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}
.mkt-step-body {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
  max-width: 280px;
}

/* Features grid */
.mkt-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.mkt-feature-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mkt-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mkt-feature-icon--blue  { background: rgba(59,130,246,0.12);  color: var(--color-blue-400); }
.mkt-feature-icon--green { background: rgba(16,185,129,0.12);  color: var(--color-green-400); }
.mkt-feature-icon--amber { background: rgba(245,158,11,0.12);  color: var(--color-amber-400); }
.mkt-feature-icon--purple{ background: rgba(139,92,246,0.12);  color: #a78bfa; }
.mkt-feature-title {
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}
.mkt-feature-body {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Audience grid */
.mkt-audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.mkt-audience-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.mkt-audience-title {
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3) 0;
}
.mkt-audience-body {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Sample analysis card */
.mkt-sample-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.mkt-sample-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.mkt-sample-concept {
  font-family: var(--font-heading);
  font-size: var(--text-heading-3);
  font-weight: 600;
  color: var(--color-text-primary);
}
.mkt-sample-meta {
  font-size: var(--text-body-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1);
}
.mkt-sample-score {
  text-align: center;
  flex-shrink: 0;
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
}
.mkt-sample-score-number {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 600;
  color: var(--color-blue-400);
  line-height: 1;
}
.mkt-sample-score-label {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1);
}
.mkt-sample-verdict {
  font-size: var(--text-body-sm);
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
}
.mkt-sample-verdict--strong {
  background: rgba(16,185,129,0.10);
  color: var(--color-green-400);
  border: 1px solid rgba(16,185,129,0.2);
}
.mkt-sample-dims {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.mkt-sample-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
}
.mkt-sample-body p {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0;
}
.mkt-sample-watch {
  font-size: var(--text-body-sm);
  color: var(--color-amber-400);
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.2);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  line-height: 1.6;
}

/* Final CTA section */
.mkt-cta-section {
  position: relative;
  padding: var(--space-20) 0;
  text-align: center;
  overflow: hidden;
}
.mkt-cta-headline {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4) 0;
  position: relative;
  z-index: 1;
}
.mkt-cta-sub {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-8) 0;
  position: relative;
  z-index: 1;
}

/* Footer */
.mkt-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-8) 0;
}
.mkt-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.mkt-footer-brand {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--color-text-primary);
}
.mkt-footer-links {
  display: flex;
  gap: var(--space-5);
}
.mkt-footer-links a {
  font-size: var(--text-body-sm);
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color var(--duration-base);
}
.mkt-footer-links a:hover { color: var(--color-text-secondary); }
.mkt-footer-copy {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

/* Marketing responsive */
@media (max-width: 768px) {
  .mkt-nav-links .btn { display: none; }
  .mkt-problem-grid { grid-template-columns: 1fr; }
  .mkt-steps { flex-direction: column; align-items: center; }
  .mkt-step-connector { width: 2px; height: 32px; flex: 0 0 32px; margin: 0; }
  .mkt-features-grid { grid-template-columns: 1fr; }
  .mkt-audience-grid { grid-template-columns: 1fr; }
  .mkt-sample-header { flex-direction: column; }
  .mkt-footer-inner { flex-direction: column; text-align: center; }
  .mkt-footer-links { flex-wrap: wrap; justify-content: center; }
}

/* ── Negative citations panel ────────────────────────────────────────────── */

.citations-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.citation-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.citation-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  margin-top: 5px;
}

.citation-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }

.citation-text {
  margin: 0;
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
  font-style: italic;
}

.citation-category {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

.citation-details { display: block; }

.citation-details summary { list-style: none; cursor: pointer; }
.citation-details summary::-webkit-details-marker { display: none; }

.citation-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.citation-expand-hint {
  font-size: var(--text-caption);
  color: var(--color-blue-400);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.citation-details[open] .citation-expand-hint { display: none; }

.citation-full {
  margin: var(--space-2) 0 0;
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  border-left: 2px solid var(--color-border-strong);
  padding-left: var(--space-3);
}

.citation-translated-badge {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 1px 6px;
}

.citation-original {
  margin-top: var(--space-3);
}

.citation-original-toggle {
  list-style: none;
  cursor: pointer;
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  user-select: none;
}

.citation-original-toggle::-webkit-details-marker { display: none; }

.citation-original-toggle::before {
  content: "↩";
  font-size: 10px;
}

.citation-original-text {
  margin-top: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--color-text-tertiary);
  line-height: 1.6;
  border-left: 2px solid var(--color-border);
  padding-left: var(--space-3);
  font-style: italic;
}

/* ── Citations panel — feed + chips + modal ─────────────────────────────── */

.citations-panel { /* no extra overrides needed; inherits .analysis-panel */ }

.citations-chips {
  margin-bottom: var(--space-4);
}

.citation-chip-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.citations-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Mobile: hide citation items beyond 3 when collapsed */
@media (max-width: 767px) {
  .citations-feed[data-mobile-collapsed="true"] .citations-list.citations-all-block .citation-item:nth-child(n+4) {
    display: none;
  }
}

.citations-mobile-view-all {
  display: none;
}

@media (max-width: 767px) {
  .citations-mobile-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--text-body-sm);
    font-family: var(--font-body);
    cursor: pointer;
    margin-top: var(--space-3);
    transition: background-color var(--duration-base) var(--ease-default);
  }
  .citations-mobile-view-all:hover {
    background: var(--color-bg-subtle);
  }
}

.citation-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.citation-venue {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

/* ── Reviews modal ────────────────────────────────────────────────────────── */

.reviews-modal-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: 82vh;
  overflow: hidden;
  width: min(680px, 95vw);
}

.reviews-modal-chips {
  flex-shrink: 0;
}

.reviews-modal-list {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-right: var(--space-1);
}

.reviews-modal-empty {
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--text-body-sm);
  padding: var(--space-8) 0;
}

.review-card {
  display: flex;
  gap: 0;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.review-card-bar {
  width: 4px;
  flex-shrink: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.review-card-body {
  flex: 1;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/* ── Reviews pagination ───────────────────────────────────────────────────── */

.reviews-modal-pagination {
  flex-shrink: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.reviews-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.reviews-pagination-info {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

.reviews-pagination-btns {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.reviews-pagination-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.reviews-pagination-btn:hover {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

.reviews-pagination-btn--active {
  background: var(--color-blue-600);
  color: #fff;
  border-color: var(--color-blue-600);
}

/* ── Reviews modal: counter + load more ──────────────────────────────────── */

.reviews-modal-counter {
  flex-shrink: 0;
}

.reviews-modal-counter-text {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

.reviews-load-more-btn {
  width: 100%;
  justify-content: center;
}

/* ── Review card metadata ────────────────────────────────────────────────── */

.review-card-meta-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
}

.review-card-rating {
  font-size: var(--text-caption);
  font-weight: 600;
  font-family: var(--font-mono);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

.review-card-rating--low  { color: var(--color-red-400);   background: rgba(248,113,113,0.12); }
.review-card-rating--mid  { color: var(--color-amber-400); background: rgba(251,191,36,0.12);  }
.review-card-rating--high { color: var(--color-green-400); background: rgba(52,211,153,0.12);  }

.review-card-date {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

.review-card-sentiment {
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.review-card-themes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.review-theme-pill {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 1px var(--space-2);
  white-space: nowrap;
}

/* ── Citation count badge (sentiment chip counts) ────────────────────────── */

.citation-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,0.15);
  margin-left: 2px;
}

.citations-negative-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-red-400);
  background: var(--color-red-subtle);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--radius-full);
  padding: 2px 10px;
  white-space: nowrap;
}

/* ── Weakest competitor panel ────────────────────────────────────────────── */

.weakest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.weakest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.weakest-item:last-child { border-bottom: none; }

.weakest-item-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.weakest-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

.weakest-name {
  margin: 0;
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.weakest-category {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

.weakest-item-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.weakest-rating {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  font-weight: 600;
}

.weakest-rating--poor { color: var(--color-red-400); }
.weakest-rating--mid  { color: var(--color-amber-400); }

.weakest-reviews {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

.weakest-avg-context {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  margin: 0;
}

/* ── Rating distribution panel ───────────────────────────────────────────── */

.rating-dist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.rating-dist-item { display: flex; flex-direction: column; gap: var(--space-2); }

.rating-dist-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.rating-dist-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

.rating-dist-label {
  flex: 1;
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-text-primary);
}

.rating-dist-total {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

.rating-dist-bar {
  display: flex;
  height: 8px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-bg-subtle);
}

.rating-dist-segment {
  height: 100%;
  transition: width 0.3s ease;
}

.rating-dist-segment--poor { background-color: var(--color-red-500); }
.rating-dist-segment--mid  { background-color: var(--color-amber-500); }
.rating-dist-segment--high { background-color: var(--color-green-500); }

.rating-dist-legend {
  display: flex;
  gap: var(--space-3);
}

.rating-dist-legend-item {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

.rating-dist-legend-item--poor { color: var(--color-red-400); }
.rating-dist-legend-item--mid  { color: var(--color-amber-400); }
.rating-dist-legend-item--high { color: var(--color-green-400); }

.rating-dist-badge {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-amber-400);
  background: var(--color-amber-subtle);
  border-radius: var(--radius-full);
  padding: 1px 7px;
}

.rating-dist-insight {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  font-style: italic;
  margin: var(--space-1) 0 0;
}

/* ── Demand signals panel ─────────────────────────────────────────────────── */

.dsignal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.dsignal-item { display: flex; flex-direction: column; gap: var(--space-2); }

.dsignal-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dsignal-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

.dsignal-label {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-text-primary);
}

.dsignal-rows { display: flex; flex-direction: column; gap: var(--space-1); }

.dsignal-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dsignal-row-label {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  width: 80px;
  flex-shrink: 0;
}

.dsignal-bar-track {
  flex: 1;
  height: 5px;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.dsignal-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.dsignal-bar-fill--complaints { background: var(--color-red-500); }
.dsignal-bar-fill--volume     { background: var(--color-blue-500); }
.dsignal-bar-fill--explicit   { background: var(--color-amber-500); }

.dsignal-row-value {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  width: 32px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Price gap panel ──────────────────────────────────────────────────────── */

.price-gap-table {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.price-gap-header-row,
.price-gap-row {
  display: grid;
  grid-template-columns: 100px repeat(4, 1fr);
  align-items: center;
  gap: var(--space-2);
}

.price-gap-tier-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  text-align: center;
  font-family: var(--font-mono);
}

.price-gap-tier-symbol {
  font-weight: 600;
  color: var(--color-text-secondary);
}

.price-gap-tier-range {
  font-size: 9px;
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.price-gap-cat-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
}

.price-gap-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

.price-gap-cell {
  position: relative;
  height: 36px;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.price-gap-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transition: height 0.3s ease;
}

.price-gap-count {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-text-primary);
  padding-bottom: 4px;
  z-index: 1;
}

/* Price gap bottom legend */
.price-gap-legend {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.price-gap-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-caption);
}

.price-gap-legend-symbol {
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-weight: 700;
}

.price-gap-legend-range {
  color: var(--color-text-tertiary);
}

/* ── Peak hours panel ─────────────────────────────────────────────────────── */

.peak-hours-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.peak-hours-header-row,
.peak-hours-row {
  display: grid;
  grid-template-columns: 90px repeat(6, 1fr);
  align-items: center;
  gap: var(--space-2);
}

.peak-hours-cat-col { /* spacer */ }

.peak-hours-slot-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}

.peak-hours-slot-start {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.peak-hours-slot-end {
  font-size: 9px;
  color: var(--color-text-tertiary);
}

.peak-hours-cat-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.peak-hours-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

.peak-hours-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: center;
}

.peak-hours-bar-bg {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  overflow: hidden;
}

.peak-hours-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.peak-hours-pct {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
}

/* Unknown hours row */
.peak-hours-unknown-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-body-sm);
}

.peak-hours-unknown-label {
  color: var(--color-text-tertiary);
  font-style: italic;
  flex-shrink: 0;
}

.peak-hours-unknown-count {
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
}

/* ── Language distribution panel ─────────────────────────────────────────── */

.lang-dist-warning {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}

.lang-dist-bar {
  display: flex;
  height: 10px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-bg-subtle);
  margin-bottom: var(--space-3);
}

.lang-dist-segment {
  height: 100%;
  transition: width 0.3s ease;
}

.lang-dist-segment--unknown {
  background: var(--color-surface-raised);
}

.lang-dist-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.lang-dist-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

.lang-dist-legend-item--unknown {
  color: var(--color-text-tertiary);
}

.lang-dist-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

.lang-dist-dot--unknown {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
}

/* ── Theme heatmap panel ──────────────────────────────────────────────────── */

.thmap-grid {
  display: grid;
  gap: var(--space-1);
  overflow-x: auto;
}

.thmap-origin { /* empty top-left corner */ }

.thmap-theme-head {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  text-align: left;
  padding-bottom: var(--space-2);
  white-space: nowrap;
  overflow: visible;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  height: 90px;
  display: flex;
  align-items: center;
}

.thmap-cat-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
  white-space: nowrap;
  padding-right: var(--space-2);
}

.thmap-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

.thmap-cell {
  position: relative;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-width: 32px;
}

.thmap-cell--empty { opacity: 0.4; }

.thmap-cell-fill {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
}

.thmap-cell-value {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-text-primary);
  z-index: 1;
}

/* ── Legal pages (Privacy, Terms) ────────────────────────────────────────── */

.legal-page {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-10);
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
  align-items: start;
}

.legal-sidebar {
  position: sticky;
  top: var(--space-8);
}

.legal-toc {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}

.legal-toc-heading {
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-3);
}

.legal-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  counter-reset: none;
}

.legal-toc-list a {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  display: block;
  padding: 2px 0;
  transition: color var(--duration-fast);
}

.legal-toc-list a:hover { color: var(--color-text-primary); }

.legal-content {
  min-width: 0;
}

.legal-header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.legal-title {
  font-family: var(--font-heading);
  font-size: var(--text-display-sm);
  font-weight: 600;
  margin: 0 0 var(--space-2);
  color: var(--color-text-primary);
}

.legal-meta {
  font-size: var(--text-body-sm);
  color: var(--color-text-tertiary);
  margin: 0;
}

.legal-prose {
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-text-secondary);
}

.legal-prose section {
  margin-bottom: var(--space-10);
  scroll-margin-top: var(--space-8);
}

.legal-prose h2 {
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.legal-prose h3 {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: var(--space-5) 0 var(--space-2);
}

.legal-prose p {
  margin: 0 0 var(--space-4);
}

.legal-prose ul,
.legal-prose ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}

.legal-prose li {
  margin-bottom: var(--space-2);
}

.legal-prose a {
  color: var(--color-blue-400);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-prose a:hover { color: var(--color-blue-300); }

.legal-back-top {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.legal-back-top-link {
  font-size: var(--text-body-sm);
  color: var(--color-text-tertiary);
  text-decoration: none;
}

.legal-back-top-link:hover { color: var(--color-text-secondary); }

/* ── Contact page ─────────────────────────────────────────────────────────── */

.contact-page {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-12);
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
  align-items: start;
}

.contact-title {
  font-family: var(--font-heading);
  font-size: var(--text-display-sm);
  font-weight: 600;
  margin: 0 0 var(--space-3);
  color: var(--color-text-primary);
}

.contact-subtitle {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-6);
}

.contact-channels {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
}

.contact-channel dt {
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.contact-channel dd {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.contact-channel dd a { color: var(--color-blue-400); text-decoration: none; }
.contact-channel dd a:hover { text-decoration: underline; }

.contact-channel-note {
  font-size: var(--text-caption) \!important;
  color: var(--color-text-tertiary) \!important;
}

.contact-form-wrapper {
  min-width: 0;
}

.contact-success {
  background: var(--color-green-subtle);
  border: 1px solid var(--color-green-500);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-body-sm);
  color: var(--color-green-400);
  margin-bottom: var(--space-5);
}

.contact-errors {
  background: var(--color-red-subtle);
  border: 1px solid var(--color-red-400);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-body-sm);
  color: var(--color-red-400);
  margin-bottom: var(--space-5);
}

.contact-errors p { margin: 0 0 4px; }
.contact-errors p:last-child { margin: 0; }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-label {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
}

.contact-input {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--duration-fast);
}

.contact-input:focus {
  outline: none;
  border-color: var(--color-blue-500);
  box-shadow: var(--shadow-focus);
}

.contact-input--error {
  border-color: var(--color-red-400);
}

.contact-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
  cursor: pointer;
}

.contact-textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-field-error {
  font-size: var(--text-caption);
  color: var(--color-red-400);
}

.contact-submit {
  align-self: flex-start;
}

/* ── App footer (authenticated layout) ───────────────────────────────────── */

.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-8);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

.app-footer-links {
  display: flex;
  gap: var(--space-5);
}

.app-footer-links a {
  font-size: var(--text-body-sm);
  color: var(--color-text-tertiary);
  text-decoration: none;
}

.app-footer-links a:hover { color: var(--color-text-secondary); }

.app-footer-copy {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

/* ── Legal & contact responsive ──────────────────────────────────────────── */

@media (max-width: 767px) {
  .legal-page {
    grid-template-columns: 1fr;
    padding: var(--space-8) var(--space-4);
    gap: var(--space-6);
  }

  .legal-sidebar {
    position: static;
    order: 2;
  }

  .legal-content {
    order: 1;
  }

  .contact-page {
    grid-template-columns: 1fr;
    padding: var(--space-8) var(--space-4);
    gap: var(--space-8);
  }

  .app-footer {
    flex-direction: column;
    text-align: center;
    padding: var(--space-5) var(--space-4);
    gap: var(--space-3);
  }
}

/* ── Language toggle ─────────────────────────────────────────────────────── */

.lang-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-caption);
  font-weight: 500;
}

.lang-toggle-link {
  color: var(--color-text-tertiary);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color 0.15s;
}

.lang-toggle-link:hover { color: var(--color-text-primary); }

.lang-toggle-link--active {
  color: var(--color-text-primary);
  cursor: default;
}

.lang-toggle-sep {
  color: var(--color-text-tertiary);
}

/* ── About page ──────────────────────────────────────────────────────────── */

.mkt-hero--about {
  padding-bottom: var(--space-16);
}

.about-story {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.about-story p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin: 0;
}

.mkt-features-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.about-values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.about-value-title {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

.about-value-body {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
}

.about-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.about-contact-item {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
}

.about-contact-label {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 120px;
  flex-shrink: 0;
}

.about-contact-value {
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
  text-decoration: none;
}

a.about-contact-value:hover { color: var(--color-green-400); }

@media (max-width: 640px) {
  .about-values { grid-template-columns: 1fr; }
  .mkt-features-grid--3 { grid-template-columns: 1fr; }
  .about-contact-item { flex-direction: column; gap: var(--space-1); }
  .about-contact-label { min-width: unset; }
}

/* ── Neighborhood search ──────────────────────────────────────────────────── */

.search-mode-toggle {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.search-mode-btn {
  font-size: var(--text-body-sm);
  font-weight: 500;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.search-mode-btn:hover { color: var(--color-text-primary); }

.search-mode-btn--active {
  background: var(--color-green-subtle);
  border-color: var(--color-green-400);
  color: var(--color-green-400);
}

.neighborhood-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.nbhd-map-container {
  width: 100%;
  height: 300px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.nbhd-selected-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nbhd-selected-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
}

.nbhd-selected-empty {
  font-size: var(--text-body-sm);
  color: var(--color-text-tertiary);
}

.nbhd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-green-400);
  flex-shrink: 0;
}

.nbhd-remove-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  font-size: 12px;
  padding: 0 var(--space-1);
  line-height: 1;
}

.nbhd-remove-btn:hover { color: var(--color-red-400); }

.nbhd-area-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-body-sm);
}

.nbhd-area-label { color: var(--color-text-tertiary); }

.nbhd-area-value { font-weight: 600; color: var(--color-text-primary); }

.nbhd-area-warning {
  font-size: var(--text-body-sm);
  color: var(--color-red-400);
  display: none;
}

/* ── Search area pill in analysis topbar ─────────────────────────────────── */

.search-area-pill {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  background: var(--color-elevation-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 2px var(--space-2);
}

.search-area-pill--neighborhoods {
  color: var(--color-green-400);
  background: var(--color-green-subtle);
  border-color: var(--color-green-300, #86efac);
}

/* ── Unified Area Map (Phase 21) ─────────────────────────────────────────── */

/* Mode toggle button — injected into Google Maps TOP_RIGHT controls */
.unified-map-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--color-bg-elevated, #1A1D24);
  border: 1px solid var(--color-border, #2A2E38);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  padding: 7px 9px;
  font-family: var(--font-body, Inter, sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary, #94A3B8);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}

.unified-map-toggle:hover {
  background: var(--color-bg-subtle, #22262F);
  border-color: var(--color-border-strong, #3A3F4D);
  color: var(--color-text-primary, #F1F5F9);
}

.unified-map-toggle--loading { opacity: 0.5; cursor: wait; }

.unified-map-toggle-label { line-height: 1; }

@keyframes unified-map-toggle-spin {
  to { transform: rotate(360deg); }
}
.unified-map-toggle-spinner {
  animation: unified-map-toggle-spin 0.8s linear infinite;
  color: var(--color-text-secondary, #94A3B8);
}

/* Legend overlay — injected into Google Maps LEFT_BOTTOM controls */
.unified-map-legend {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 16px 16px;
}

.uml-legend-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Compact legend bar */
.uml-bar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--color-text-primary);
  white-space: nowrap;
  min-width: 0;
  max-width: 520px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.uml-bar-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.uml-bar-fill-wrap {
  display: inline-block;
  flex: 0 0 48px;
  height: 4px;
  background: var(--color-bg-subtle);
  border-radius: 2px;
  overflow: hidden;
}

.uml-bar-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  transition: width 0.2s, background 0.2s;
}

.uml-bar-radius-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.uml-radius-btn {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  color: var(--color-text-primary);
}

.uml-radius-btn:hover {
  background: var(--color-bg-surface);
}

.uml-radius-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.uml-radius-slider {
  width: 80px;
  accent-color: #2563eb;
  cursor: pointer;
}

.uml-radius-slider:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.uml-analyze {
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: 0;
}

.uml-upgrade-link {
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
}
.uml-upgrade-link:hover { text-decoration: underline; }

.uml-analyze-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: uml-spin 0.7s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}

@keyframes uml-spin {
  to { transform: rotate(360deg); }
}

/* Selections modal */
.uml-selections-modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uml-selections-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

.uml-selections-dialog {
  position: relative;
  z-index: 1;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px;
  min-width: 260px;
  max-width: 360px;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  color: var(--color-text-primary);
}

.uml-selections-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.uml-selections-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.uml-selections-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--color-text-tertiary);
  line-height: 1;
  padding: 0;
}

.uml-selections-close:hover {
  color: var(--color-text-primary);
}

.uml-selections-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.uml-selections-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.uml-selections-name {
  flex: 1;
  color: var(--color-text-secondary);
}

.uml-selections-area {
  color: var(--color-text-tertiary);
  font-size: 12px;
  flex-shrink: 0;
}

.uml-selections-remove {
  background: none;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  padding: 0;
}

.uml-selections-remove:hover {
  color: #ef4444;
}


@media (max-width: 640px) {
  .uml-bar { max-width: 95vw; }
  .uml-radius-slider { width: 60px; }
  .unified-map-toggle { font-size: 11px; padding: 4px 7px; }
}