:root {
  --bg: #0b0b0d;
  --border: rgba(255, 255, 255, 0.10);
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.60);
  --muted-2: rgba(255, 255, 255, 0.45);
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  --radius: 16px;

  --brand-highlight: #58d2f8;
  --brand-highlight-hover: #89e0ff;
  --brand-highlight-strong: #0082c8;
  --brand-highlight-rgb: 88, 210, 248;

  --primary: #ffffff;
  --primaryText: #0b0b0d;

  --dangerBg: rgba(220, 38, 38, 0.14);
  --okBg: rgba(34, 197, 94, 0.14);

  --ring: 0 0 0 4px rgba(255, 255, 255, 0.10);

  /* Compact desktop nav: 200px labeled drawer, 56px icon rail */
  --sidebarW: 200px;
  --sidebarWMinimized: 56px;
  --topbarH: 0px;
}

[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7fb;
  --border: rgba(0, 0, 0, 0.14);
  --text: rgba(10, 10, 12, 0.95);
  --muted: rgba(10, 10, 12, 0.65);
  --muted-2: rgba(10, 10, 12, 0.50);
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.10);

  --primary: #0b0b0d;
  --primaryText: #ffffff;

  --dangerBg: rgba(220, 38, 38, 0.12);
  --okBg: rgba(22, 163, 74, 0.12);

  --ring: 0 0 0 4px rgba(0, 0, 0, 0.08);
}

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

html, body { 
  height: 100%; 
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(255,255,255,0.10), transparent 60%),
    radial-gradient(900px 600px at 95% 0%, rgba(255,255,255,0.08), transparent 55%),
    radial-gradient(800px 600px at 30% 110%, rgba(255,255,255,0.06), transparent 60%),
    var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-theme="light"] body {
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(var(--brand-highlight-rgb), 0.08), transparent 60%),
    radial-gradient(900px 600px at 95% 0%, rgba(0, 130, 200, 0.06), transparent 55%),
    radial-gradient(800px 600px at 30% 110%, rgba(var(--brand-highlight-rgb), 0.04), transparent 60%),
    var(--bg);
}

a { color: inherit; text-decoration: none; }

.view { display: none; min-height: 100vh; }
.view-active { display: block; }

/* Instant first paint for public/auth routes (set by inline head script) */
html.boot-public #view-loading,
html.boot-auth #view-loading {
  display: none !important;
}
html.boot-public #view-public {
  display: block;
}
html.boot-auth #view-login {
  display: block;
}

/* Show only the hashed public page before app.js runs (avoids landing flash) */
html.boot-public .public-page {
  display: none !important;
}
html.boot-public[data-boot-page="landing"] #page-landing,
html.boot-public[data-boot-page="apps"] #page-apps,
html.boot-public[data-boot-page="apps/review-radar"] #page-apps-review-radar,
html.boot-public[data-boot-page="apps/price-pulse"] #page-apps-price-pulse,
html.boot-public[data-boot-page="apps/search-monitor"] #page-apps-search-monitor,
html.boot-public[data-boot-page="apps/bulk-data"] #page-apps-bulk-data,
html.boot-public[data-boot-page="apps/live-apis"] #page-apps-live-apis,
html.boot-public[data-boot-page="pricing"] #page-pricing,
html.boot-public[data-boot-page="contact"] #page-contact,
html.boot-public[data-boot-page="freebies"] #page-freebies,
html.boot-public[data-boot-page="retail-math"] #page-retail-math,
html.boot-public[data-boot-page="keyword-generator"] #page-keyword-generator,
html.boot-public[data-boot-page="walmart-calendar"] #page-walmart-calendar,
html.boot-public[data-boot-page="glossary"] #page-glossary {
  display: block !important;
}

/* After first public reveal, don't re-run entrance animations on nav */
#view-public.anims-done .hero-title-static,
#view-public.anims-done .hero-title-typed,
#view-public.anims-done .features-hero-title,
#view-public.anims-done .features-hero-subtitle,
#view-public.anims-done .features-hero-cta {
  animation: none !important;
}

/* Loading View */
.loading-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
}

.loading-spinner-large {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.8);
  animation: spin 800ms linear infinite;
}

[data-theme="light"] .loading-spinner-large {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: rgba(0, 0, 0, 0.6);
}

.loading-text {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

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

/* Login */
.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-card {
  width: min(440px, 100%);
  max-width: calc(100vw - 48px);
  background: linear-gradient(to bottom, rgba(255,255,255,0.07), rgba(255,255,255,0.05));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
  box-sizing: border-box;
  position: relative;
}

[data-theme="light"] .auth-card {
  background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0.98));
}

.auth-back-link {
  position: absolute;
  top: 32px;
  right: 32px;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  transition: color 150ms ease;
}

.auth-back-link:hover {
  color: var(--text);
}

.auth-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 28px;
  border-bottom: 1px solid var(--border);
}

.auth-tab {
  flex: 1;
  padding: 12px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
}

.auth-tab:hover {
  color: var(--text);
}

.auth-tab.active {
  color: var(--text);
  border-bottom-color: var(--primary);
}

.auth-form {
  display: grid;
  gap: 20px;
  margin-top: 0;
}

.auth-form[hidden] {
  display: none !important;
}

.auth-form .field {
  display: grid;
  gap: 8px;
}

.auth-form .btn {
  margin-top: 4px;
  width: 100%;
}

.auth-form .notice {
  margin-top: -8px;
}

.auth-form .fineprint {
  margin-top: -4px;
  text-align: center;
}

.signup-hero {
  margin: 0 0 18px;
}

.signup-eyebrow {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-highlight, #58d2f8);
}

.signup-title {
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

.signup-steps {
  margin: 0 0 12px;
  padding: 10px 12px 10px 28px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  background: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.06);
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.signup-steps li {
  margin: 0 0 4px;
}

.signup-steps li:last-child {
  margin-bottom: 0;
}

.signup-pricing-intent {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.35);
  background: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.1);
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.4;
}

.signup-pricing-intent strong {
  display: block;
  margin: 0 0 8px;
  font-size: 0.92rem;
}

.signup-pricing-intent-label {
  margin: 10px 0 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.signup-pricing-intent-list {
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--text);
}

.signup-pricing-intent-list li {
  margin: 0 0 3px;
}

.signup-pricing-intent-note,
.signup-pricing-intent-edit,
.signup-pricing-intent p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.signup-signin-link {
  margin: 10px 0 0;
}

.auth-subtitle {
  margin: 0 0 14px;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
}

.signup-turnstile {
  margin: 0 0 12px;
  min-height: 65px;
}

.billing-pending-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
}

.billing-pending-banner[hidden] {
  display: none !important;
}

.billing-pending-banner-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.billing-pending-banner-copy strong {
  font-size: 0.92rem;
  color: var(--text);
}

.billing-pending-banner-copy span {
  font-size: 0.8rem;
  color: var(--muted);
}

.billing-pending-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.billing-pending-interstitial {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
}

.billing-pending-interstitial[hidden] {
  display: none !important;
}

.billing-pending-interstitial-card {
  width: min(440px, 100%);
  padding: 22px;
  border-radius: 16px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.14));
  background: var(--surface, #121418);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.billing-pending-interstitial-card h2 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

.billing-pending-interstitial-card p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.billing-pending-interstitial-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.billing-pending-interstitial-actions .btn {
  min-width: 0;
  flex: 1;
}

.billing-return-toast {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1300;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(34, 197, 94, 0.4);
  background: var(--okBg, rgba(34, 197, 94, 0.15));
  color: var(--text);
  font-size: 0.9rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.billing-return-toast[hidden] {
  display: none !important;
}

.billing-return-toast.is-cancel {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.12);
}

@media (max-width: 640px) {
  .billing-pending-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .billing-pending-banner-actions .btn {
    flex: 1;
  }
}

.brand {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32px;
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background:
    radial-gradient(16px 16px at 30% 30%, rgba(255,255,255,0.65), transparent 60%),
    radial-gradient(18px 18px at 70% 70%, rgba(255,255,255,0.35), transparent 60%),
    rgba(255,255,255,0.10);
  border: 1px solid var(--border);
}

[data-theme="light"] .brand-mark {
  background:
    radial-gradient(16px 16px at 30% 30%, rgba(var(--brand-highlight-rgb), 0.15), transparent 60%),
    radial-gradient(18px 18px at 70% 70%, rgba(0, 130, 200, 0.10), transparent 60%),
    rgba(255,255,255,0.95);
}

.brand-title {
  font-size: 20px;
  margin: 0;
  letter-spacing: -0.02em;
}

.brand-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.auth-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.auth-logo-img {
  height: 38px;
  width: auto;
  object-fit: contain;
}

[data-theme="light"] .auth-logo .logo-dark {
  display: none;
}

[data-theme="light"] .auth-logo .logo-light {
  display: block;
}

[data-theme="dark"] .auth-logo .logo-light {
  display: none;
}

[data-theme="dark"] .auth-logo .logo-dark {
  display: block;
}

/* App shell */

.layout {
  display: block;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}

.layout.sidebar-minimized .topbar {
  left: var(--sidebarWMinimized);
}

.layout.sidebar-minimized .content {
  margin-left: var(--sidebarWMinimized);
}

.sidebar {
  border-right: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  padding: 0;
  position: fixed;
  left: 0;
  top: 0;
  width: var(--sidebarW);
  transition: width 200ms ease;
  display: flex;
  flex-direction: column;
  height: 100vh;
  z-index: 101;
}

[data-theme="light"] .sidebar {
  border-right: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.5);
}

.sidebar.minimized {
  width: var(--sidebarWMinimized);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.sidebar.minimized .sidebar-header {
  padding: 12px 6px;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

[data-theme="light"] .sidebar-header {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 150ms ease, transform 150ms ease;
  flex-shrink: 0;
  gap: 10px;
}

.sidebar-logo:hover {
  opacity: 0.9;
  transform: scale(1.05);
}

.sidebar-logo:active {
  transform: scale(0.98);
}

.sidebar.minimized .sidebar-logo {
  width: 100%;
}

/* Logo visibility based on sidebar state */
.sidebar-logo .logo-icon {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  transition: all 150ms ease;
}

.sidebar.minimized .sidebar-logo .logo-icon {
  width: 24px;
  height: 24px;
}

.sidebar-logo .logo-full {
  display: none;
  height: 28px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  transition: all 150ms ease;
}

/* Show icon when minimized */
.sidebar.minimized .sidebar-logo .logo-icon {
  display: block;
}

.sidebar.minimized .sidebar-logo .logo-full {
  display: none;
}

/* Show full logo when maximized */
.sidebar:not(.minimized) .sidebar-logo .logo-icon {
  display: none;
}

.sidebar:not(.minimized) .sidebar-logo .logo-full {
  display: block;
}

/* Theme-based logo switching - only applies when sidebar is not minimized */
[data-theme="light"] .sidebar:not(.minimized) .sidebar-logo .logo-dark {
  display: none;
}

[data-theme="light"] .sidebar:not(.minimized) .sidebar-logo .logo-light {
  display: block;
}

[data-theme="dark"] .sidebar:not(.minimized) .sidebar-logo .logo-light {
  display: none;
}

[data-theme="dark"] .sidebar:not(.minimized) .sidebar-logo .logo-dark {
  display: block;
}

/* Override for minimized state - always show icon, hide all full logos */
.sidebar.minimized .sidebar-logo .logo-icon {
  display: block !important;
}

.sidebar.minimized .sidebar-logo .logo-full {
  display: none !important;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 6px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.sidebar.minimized .nav {
  padding: 10px 6px;
}

.sidebar.minimized .nav-label {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.sidebar.minimized .nav-item {
  justify-content: center;
  padding: 8px;
  position: relative;
  gap: 0;
}

/* Body-level tooltip (CSS ::after tooltips are clipped by .nav overflow) */
.sidebar-nav-tooltip {
  position: fixed;
  z-index: 100000;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  background: rgba(20, 20, 24, 0.96);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  backdrop-filter: blur(8px);
  transform: translateY(-50%);
}

.sidebar-nav-tooltip::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: rgba(255,255,255,0.10);
}

[data-theme="light"] .sidebar-nav-tooltip {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(10,10,12,0.92);
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

[data-theme="light"] .sidebar-nav-tooltip::before {
  border-right-color: rgba(0,0,0,0.12);
}

.sidebar.minimized .nav-icon {
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
}

.sidebar.minimized .nav-chevron {
  display: none;
}

.sidebar.minimized .nav-submenu {
  display: none !important;
}

.sidebar.minimized .nav-parent {
  justify-content: center;
}

.sidebar.minimized .nav-parent.has-active-child {
  background: rgba(255,255,255,0.09);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.09);
}

.sidebar.minimized .nav-parent.has-active-child .nav-icon {
  color: rgba(255,255,255,0.95);
}

[data-theme="light"] .sidebar.minimized .nav-parent.has-active-child {
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.08);
}

[data-theme="light"] .sidebar.minimized .nav-parent.has-active-child .nav-icon {
  color: rgba(10,10,12,0.85);
}

.sidebar.minimized .nav-sep {
  margin: 8px 4px;
}

.sidebar.minimized .sidebar-header {
  flex-direction: column;
  gap: 8px;
  padding: 16px 8px;
}

.sidebar.minimized .sidebar-logo {
  width: 100%;
}

.sidebar-minimize-btn {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, border-color 150ms ease, transform 200ms ease;
  z-index: 10;
  flex-shrink: 0;
  padding: 3px;
}

.sidebar-minimize-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}

[data-theme="light"] .sidebar-minimize-btn {
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
}

[data-theme="light"] .sidebar-minimize-btn:hover {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.18);
}

.sidebar.minimized .sidebar-minimize-btn {
  width: 100%;
}

.sidebar-minimize-icon {
  width: 20px;
  height: 20px;
  transition: opacity 150ms ease, color 150ms ease;
  display: none;
  color: rgba(255,255,255,0.75);
  flex-shrink: 0;
}

.sidebar:not(.minimized) .sidebar-minimize-icon-collapse,
.sidebar.minimized .sidebar-minimize-icon-expand {
  display: block;
}

.sidebar-minimize-btn:hover .sidebar-minimize-icon {
  color: rgba(255,255,255,0.95);
}

[data-theme="light"] .sidebar-minimize-icon {
  color: rgba(10,10,12,0.65);
}

[data-theme="light"] .sidebar-minimize-btn:hover .sidebar-minimize-icon {
  color: rgba(10,10,12,0.85);
}

.app-mobile-bar {
  display: none;
  align-items: center;
  gap: 12px;
}

.app-sidebar-toggle,
.sidebar-close-btn {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: auto;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}

[data-theme="light"] .app-sidebar-toggle,
[data-theme="light"] .sidebar-close-btn {
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
}

.app-mobile-title-wrap {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.app-mobile-kicker {
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.app-mobile-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px;
  border-radius: 10px;
  color: var(--muted);
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, padding 200ms ease, justify-content 200ms ease;
  text-decoration: none;
  border: none;
  border-left: 3px solid transparent;
  background: none;
  width: 100%;
  text-align: left;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.nav-label {
  transition: opacity 200ms ease, width 200ms ease;
  white-space: nowrap;
}

.nav-item:hover {
  background: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.05);
  color: var(--text);
}

.nav-item.active {
  background: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.1);
  color: var(--text);
  border-left-color: var(--brand-highlight, #58d2f8);
  border-radius: 0 10px 10px 0;
}

.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.50);
  transition: color 150ms ease;
  stroke: currentColor;
  fill: none;
}

.nav-item.active .nav-icon {
  color: var(--brand-highlight, #58d2f8);
}

.nav-item:hover .nav-icon {
  color: rgba(255,255,255,0.80);
}

.nav-item.active:hover .nav-icon {
  color: var(--brand-highlight-hover, #89e0ff);
}

.nav-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 10px 10px; }

[data-theme="light"] .nav-icon {
  color: rgba(10,10,12,0.50);
}

[data-theme="light"] .nav-item.active .nav-icon {
  color: var(--brand-highlight-strong, #0082c8);
}

[data-theme="light"] .nav-item:hover .nav-icon {
  color: rgba(10,10,12,0.70);
}

[data-theme="light"] .nav-item.active:hover .nav-icon {
  color: var(--brand-highlight-strong, #0082c8);
}

[data-theme="light"] .nav-sep {
  background: rgba(0,0,0,0.08);
}

/* Sidebar user menu */
.sidebar-user-menu {
  margin-top: auto;
  padding: 8px;
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  position: relative;
}

[data-theme="light"] .sidebar-user-menu {
  border-top: 1px solid rgba(0,0,0,0.08);
}

.sidebar.minimized .sidebar-user-menu {
  padding: 8px 6px;
}

.sidebar-user-menu .pill-btn {
  width: 100%;
  justify-content: flex-start;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-user-menu .pill-btn.nav-item {
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
}

.sidebar-user-menu .pill-btn.nav-item:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}

[data-theme="light"] .sidebar-user-menu .pill-btn.nav-item {
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.10);
}

[data-theme="light"] .sidebar-user-menu .pill-btn.nav-item:hover {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.18);
}

.sidebar-user-menu .user-menu-icon {
  flex-shrink: 0;
}

.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.92);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
  user-select: none;
}

[data-theme="light"] .user-avatar {
  background: rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.12);
  color: rgba(10,10,12,0.85);
}

.sidebar-user-menu .user-chip {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.sidebar-user-menu .chev {
  width: 16px;
  height: 16px;
  opacity: 0.75;
  transition: transform 150ms ease;
  margin-left: auto;
  flex-shrink: 0;
  display: block;
  stroke: currentColor;
  fill: none;
}

.sidebar-user-menu .pill-btn[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

.sidebar.minimized .sidebar-user-menu .user-chip,
.sidebar.minimized .sidebar-user-menu .chev {
  display: none;
}

.sidebar.minimized .sidebar-user-menu .pill-btn {
  justify-content: center;
  padding: 8px;
  gap: 0;
}

.sidebar.minimized .sidebar-user-menu .user-menu-icon {
  margin: 0;
}

/* Navigation dropdown groups */
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-parent {
  justify-content: flex-start;
}

.nav-parent:focus-visible {
  outline: 2px solid rgba(99, 140, 255, 0.65);
  outline-offset: 1px;
}

.nav-chevron {
  margin-left: auto;
  transition: transform 150ms ease;
  width: 16px;
  height: 16px;
  opacity: 0.75;
  flex-shrink: 0;
  display: block;
  stroke: currentColor;
  fill: none;
}

.nav-parent[aria-expanded="true"] .nav-chevron {
  transform: rotate(180deg);
}

.nav-parent.has-active-child {
  color: var(--text);
}

.nav-parent.has-active-child .nav-icon {
  color: rgba(255,255,255,0.80);
}

[data-theme="light"] .nav-parent.has-active-child .nav-icon {
  color: rgba(10,10,12,0.70);
}

.nav-submenu {
  display: none;
  flex-direction: column;
  margin-left: 12px;
  margin-top: 2px;
  padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,0.08);
  gap: 2px;
}

[data-theme="light"] .nav-submenu {
  border-left-color: rgba(0,0,0,0.08);
}

.nav-group[data-expanded="true"] .nav-submenu {
  display: flex;
}

.nav-subitem {
  position: relative;
  padding-left: 12px;
  font-size: 13px;
}

/* Active sub-item: extend the highlight left so the cyan accent sits on the
   guide line and connects to the tinted background with no gap */
.nav-submenu .nav-subitem.active {
  /* pull across submenu padding (8px) + guide line (1px) */
  margin-left: -9px;
  /* keep content aligned: original 12px + 9px pulled */
  padding-left: 21px;
  border-left-color: var(--brand-highlight, #58d2f8);
  border-radius: 0 10px 10px 0;
}

.nav-subitem .nav-icon {
  width: 16px;
  height: 16px;
}

.content { 
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 100vh;
  margin-left: var(--sidebarW);
  transition: margin-left 200ms ease;
}

.content > * {
  padding: 18px;
}
.page { 
  max-width: 1120px; 
  margin: 0 auto; 
  width: 100%;
  box-sizing: border-box;
}

#view-app #page-location-viewer,
#view-app #page-comp-groups,
#view-app #page-groups,
#view-app #page-products,
#view-app #page-apis,
#view-app #page-api-detail,
#view-app #page-price-pulse,
#view-app #page-review-radar,
#view-app #page-usage,
#view-app #page-admin {
  max-width: min(1480px, calc(100vw - var(--sidebarW) - 48px));
}

#view-app .layout.sidebar-minimized #page-location-viewer,
#view-app .layout.sidebar-minimized #page-comp-groups,
#view-app .layout.sidebar-minimized #page-groups,
#view-app .layout.sidebar-minimized #page-products,
#view-app .layout.sidebar-minimized #page-apis,
#view-app .layout.sidebar-minimized #page-api-detail,
#view-app .layout.sidebar-minimized #page-price-pulse,
#view-app .layout.sidebar-minimized #page-review-radar,
#view-app .layout.sidebar-minimized #page-usage,
#view-app .layout.sidebar-minimized #page-admin {
  max-width: min(1560px, calc(100vw - var(--sidebarWMinimized) - 48px));
}

#view-app #page-api-detail,
#view-app #page-price-pulse,
#view-app #page-review-radar,
#view-app #page-admin {
  max-width: min(1680px, calc(100vw - var(--sidebarW) - 48px));
}

#view-app .layout.sidebar-minimized #page-api-detail,
#view-app .layout.sidebar-minimized #page-price-pulse,
#view-app .layout.sidebar-minimized #page-review-radar,
#view-app .layout.sidebar-minimized #page-admin {
  max-width: min(1760px, calc(100vw - var(--sidebarWMinimized) - 48px));
}

.page-header { 
  margin: 10px 0 16px; 
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}
.page-title { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.page-subtitle { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

.card {
  background: linear-gradient(to bottom, rgba(255,255,255,0.06), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.18);
  margin-bottom: 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

[data-theme="light"] .card {
  background: linear-gradient(to bottom, rgba(255,255,255,0.98), rgba(255,255,255,1));
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.card-header { margin-bottom: 12px; }
.card-title { margin: 0; font-size: 14px; }
.card-subtitle { margin: 6px 0 0; color: var(--muted); font-size: 12px; }

.form { display: grid; gap: 12px; }
.form-grid { grid-template-columns: 1fr 1fr; }

.field { display: grid; gap: 7px; }

.field label { font-size: 12px; color: var(--muted); }

.hint,
.field-hint {
  font-size: 12px;
  color: var(--muted-2);
  margin: 0;
  line-height: 1.45;
}

.hint {
  margin-top: -2px;
}

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  width: 100%;
  max-width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background-color: rgba(255,255,255,0.05);
  background-image: none;
  color: var(--text);
  outline: none;
  transition: box-shadow 150ms ease, border-color 150ms ease;
  box-sizing: border-box;
  font: inherit;
  font-size: 13px;
}

input:not([type="checkbox"]):not([type="radio"]),
textarea {
  cursor: text;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  height: auto;
  padding: 0;
  padding-right: 0;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.20);
  background-color: rgba(255,255,255,0.05);
  background-image: none;
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  flex-shrink: 0;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.35); }

input:focus, textarea:focus, select:focus {
  border-color: rgba(255,255,255,0.18);
  box-shadow: var(--ring);
}

[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] textarea,
[data-theme="light"] select {
  background-color: #ffffff;
  background-image: none;
  border-color: var(--border);
}

[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000000' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

[data-theme="light"] input[type="checkbox"],
[data-theme="light"] input[type="radio"] {
  background-color: #ffffff;
  background-image: none;
  border-color: rgba(0,0,0,0.20);
}

[data-theme="light"] input[type="checkbox"]:checked,
[data-theme="light"] input[type="radio"]:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

[data-theme="light"] textarea {
  background-image: none;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: rgba(10,10,12,0.45);
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: rgba(0,0,0,0.36);
  box-shadow: var(--ring);
}

[data-theme="dark"] .filter-select,
[data-theme="dark"] select,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]) {
  background-color: rgba(255,255,255,0.05);
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
  background-color: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.20);
}

/* Multi-select dropdown styling */
select[multiple] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select[multiple][size="1"] {
  height: auto;
  overflow: hidden;
}

/* Multi-select options - match existing filter-select styling */
select[multiple] option {
  padding: 10px 12px;
  border-radius: 12px;
  margin: 2px 0;
  background: rgba(255,255,255,0.05) !important;
  color: var(--text) !important;
}

select[multiple] option:checked {
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: var(--text) !important;
}

select[multiple] option:hover {
  background: rgba(255,255,255,0.10) !important;
}

/* Light theme multi-select options - match existing filter-select styling */
[data-theme="light"] select[multiple] option {
  background: #ffffff !important;
  color: var(--text) !important;
}

[data-theme="light"] select[multiple] option:checked {
  background: rgba(0,0,0,0.08) !important;
  border-color: rgba(0,0,0,0.20) !important;
  color: var(--text) !important;
}

[data-theme="light"] select[multiple] option:hover {
  background: rgba(0,0,0,0.04) !important;
}

/* Password input wrapper with visibility toggle */
.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-wrapper input[type="password"],
.password-input-wrapper input[type="text"] {
  padding-right: 48px;
  background-image: none;
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms ease;
  z-index: 1;
  border-radius: 6px;
}

.password-toggle:hover {
  color: var(--text);
  background-color: rgba(255, 255, 255, 0.05);
}

.password-toggle:focus {
  outline: none;
  color: var(--text);
  background-color: rgba(255, 255, 255, 0.08);
}

.password-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}

.password-toggle .icon-eye,
.password-toggle .icon-eye-off {
  transition: opacity 150ms ease;
}

.password-toggle[aria-pressed="true"] .icon-eye {
  display: none;
}

.password-toggle[aria-pressed="true"] .icon-eye-off {
  display: block !important;
}

.password-toggle:not([aria-pressed="true"]) .icon-eye-off {
  display: none !important;
}

/* Password validation messages */
.password-validation {
  font-size: 12px;
  margin-top: 4px;
  min-height: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.password-validation.error {
  color: #ef4444;
}

.password-validation.success {
  color: #10b981;
}

.password-validation::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-block;
}

.password-validation.error::before {
  content: "✕";
  color: #ef4444;
}

.password-validation.success::before {
  content: "✓";
  color: #10b981;
}

/* Light theme adjustments */
[data-theme="light"] .password-toggle {
  color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .password-toggle:hover {
  color: rgba(0, 0, 0, 0.8);
  background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .password-toggle:focus {
  color: rgba(0, 0, 0, 0.8);
  background-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .password-validation.error {
  color: #dc2626;
}

[data-theme="light"] .password-validation.success {
  color: #059669;
}

/* Invalid state for password inputs */
.password-input-wrapper input:invalid:not(:placeholder-shown) {
  border-color: #ef4444;
}

[data-theme="light"] .password-input-wrapper input:invalid:not(:placeholder-shown) {
  border-color: #dc2626;
}

input[readonly] { opacity: 0.85; cursor: not-allowed; }

.filter-dropdown-wrapper {
  position: relative;
}

.filter-select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background-color: rgba(255,255,255,0.05);
  background-image: none;
  color: var(--text);
  outline: none;
  transition: box-shadow 150ms ease, border-color 150ms ease;
  font-size: 13px;
}

select.filter-select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

input.filter-select,
textarea.filter-select {
  cursor: text;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.filter-select:focus {
  border-color: rgba(255,255,255,0.18);
  box-shadow: var(--ring);
}

.filter-select option,
select[multiple] option {
  color: var(--text);
}

.filter-select option {
  padding: 10px 12px;
  border-radius: 12px;
  margin: 2px 0;
  background: rgba(255,255,255,0.05);
}

.filter-select option:checked {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
}

.filter-select option:hover {
  background: rgba(255,255,255,0.10);
}

[data-theme="light"] .filter-select {
  background-color: #ffffff;
  background-image: none;
  border-color: var(--border);
}

[data-theme="light"] select.filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000000' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

[data-theme="light"] .filter-select option,
[data-theme="light"] select[multiple] option {
  color: var(--text);
}

[data-theme="light"] .filter-select option {
  background: #ffffff;
}

[data-theme="light"] .filter-select option:checked {
  background: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.20);
}

.filter-selected {
  margin-top: 6px;
  min-height: 20px;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.88);
}

.filter-chip-remove {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.70);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 150ms ease, color 150ms ease;
}

.filter-chip-remove:hover {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.95);
}

[data-theme="light"] select[multiple] option:checked {
  background: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.20);
}

[data-theme="light"] .filter-chip {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.14);
  color: var(--text);
}

[data-theme="light"] .filter-chip-remove {
  color: rgba(10,10,12,0.65);
}

[data-theme="light"] .filter-chip-remove:hover {
  background: rgba(0,0,0,0.10);
  color: rgba(10,10,12,0.95);
}

.actions { display: flex; align-items: center; gap: 12px; padding-top: 4px; flex-wrap: wrap; }
.span-2 { grid-column: span 2; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.07);
  color: var(--text);
  cursor: pointer;
  transition: transform 120ms ease, background 150ms ease, border-color 150ms ease;
  min-width: 160px;
}

.btn:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); }

[data-theme="light"] .btn {
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(0,0,0,0.04);
}

[data-theme="light"] .btn:hover {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.20);
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.65; cursor: not-allowed; }

.btn-primary {
  background: var(--primary);
  color: var(--primaryText);
  border-color: rgba(255,255,255,0.30);
}

.btn-primary:hover { background: rgba(255,255,255,0.92); }

.btn-secondary { 
  background: rgba(255,255,255,0.05);
  color: var(--text);
  border-color: rgba(255,255,255,0.12);
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: var(--text);
}

[data-theme="light"] .btn-primary {
  background: var(--primary);
  color: var(--primaryText);
  border-color: rgba(0,0,0,0.20);
}

[data-theme="light"] .btn-primary:hover {
  background: rgba(10,10,12,0.95);
  color: var(--primaryText);
}

[data-theme="light"] .btn-secondary {
  background: rgba(0,0,0,0.05);
  color: var(--text);
}

[data-theme="light"] .btn-secondary:hover {
  background: rgba(0,0,0,0.08);
  color: var(--text);
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border-color: rgba(255,255,255,0.10);
}

.btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
  color: var(--text);
}

[data-theme="light"] .btn-ghost {
  background: transparent;
  color: var(--muted);
  border-color: rgba(0,0,0,0.12);
}

[data-theme="light"] .btn-ghost:hover {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.18);
  color: var(--text);
}

.btn-danger,
.btn-secondary.danger,
.link-btn.danger {
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.3);
  color: rgba(255, 180, 180, 0.95);
}

.btn-danger:hover,
.btn-secondary.danger:hover,
.link-btn.danger:hover {
  background: rgba(220, 38, 38, 0.25);
  border-color: rgba(220, 38, 38, 0.4);
  color: rgba(255, 200, 200, 1);
}

[data-theme="light"] .btn-danger,
[data-theme="light"] .btn-secondary.danger,
[data-theme="light"] .link-btn.danger {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.25);
  color: rgba(185, 28, 28, 0.95);
}

[data-theme="light"] .btn-danger:hover,
[data-theme="light"] .btn-secondary.danger:hover,
[data-theme="light"] .link-btn.danger:hover {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(220, 38, 38, 0.35);
  color: rgba(185, 28, 28, 1);
}

.btn-sm {
  min-width: auto;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
}

.spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.18);
  border-top-color: rgba(0,0,0,0.55);
  animation: spin 800ms linear infinite;
}

[data-theme="light"] .spinner {
  border: 2px solid rgba(0,0,0,0.15);
  border-top-color: rgba(0,0,0,0.50);
}

.btn.loading .spinner { display: inline-block; }
.btn.loading .btn-label { opacity: 0.85; }

.notice {
  font-size: 12px;
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

[data-theme="light"] .notice {
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.02);
}

.notice-success { border-color: rgba(34, 197, 94, 0.35); background: var(--okBg); }
.notice-error { border-color: rgba(220, 38, 38, 0.35); background: var(--dangerBg); }

.fineprint { margin: 6px 0 0; color: var(--muted-2); font-size: 12px; }

.footer { padding: 8px 2px 14px; }
.muted { color: var(--muted-2); font-size: 12px; }

/* Menu + buttons */
.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  cursor: pointer;
}

.icon-btn:hover { background: rgba(255,255,255,0.08); }

/* Sidebar toggle button removed - topbar removed */

.icon-lines {
  display: inline-block;
  width: 18px;
  height: 14px;
  position: relative;
}

.icon-lines::before,
.icon-lines::after,
.icon-lines span {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,0.60);
  border-radius: 999px;
  transition: background 150ms ease;
}

.icon-lines::before { top: 0; }
.icon-lines span { top: 6px; }
.icon-lines::after { bottom: 0; }


.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  cursor: pointer;
}

.pill-btn:hover { background: rgba(255,255,255,0.08); }

.user-chip {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  max-width: min(210px, calc(100vw - 200px));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-theme="light"] .user-chip {
  color: var(--text);
}


.menu {
  position: fixed;
  width: 220px;
  background: rgba(20, 20, 24, 0.95);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 6px;
  backdrop-filter: blur(12px);
  z-index: 10000;
}

.menu-item {
  width: 100%;
  text-align: left;
  padding: 10px 10px;
  border-radius: 12px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.86);
  cursor: pointer;
  font-size: 13px;
}

.menu-item:hover:enabled { background: rgba(255,255,255,0.08); }
.menu-item:disabled { opacity: 0.50; cursor: not-allowed; }
.menu-item.danger { color: rgba(255,180,180,0.95); }

.menu-sep { height: 1px; background: rgba(255,255,255,0.10); margin: 6px 8px; }

[data-theme="light"] .menu {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0,0,0,0.12);
}

[data-theme="light"] .menu-item {
  color: var(--text);
}

[data-theme="light"] .menu-item:hover:enabled {
  background: rgba(0,0,0,0.05);
}

[data-theme="light"] .menu-item.danger {
  color: rgba(220, 38, 38, 0.9);
}

[data-theme="light"] .menu-sep {
  background: rgba(0,0,0,0.10);
}

/* Overlays */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 20;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  /* Above the fixed sidebar (z-index: 101) so modals fully cover nav */
  z-index: 200;
}

[data-theme="light"] .overlay {
  background: rgba(0,0,0,0.40);
}

[data-theme="light"] .modal-overlay {
  background: rgba(0,0,0,0.50);
}

.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(980px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow: hidden;
  z-index: 205;
  border-radius: 18px;
  background: rgba(18, 18, 22, 0.98);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-sizing: border-box;
}

[data-theme="light"] .modal {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0,0,0,0.14);
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

[data-theme="light"] .modal-head {
  border-bottom: 1px solid rgba(0,0,0,0.10);
}

.modal-title {
  font-size: 15px;
  font-weight: 650;
  margin: 0;
  line-height: 1.3;
  color: var(--text);
}

.modal-subtitle {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.45;
}

.modal-body {
  padding: 16px;
  overflow: auto;
  max-height: calc(100vh - 220px);
  max-width: 100%;
  box-sizing: border-box;
}

.modal-body > p,
.modal-body .field-hint,
.modal-body .hint,
.modal-body .muted {
  font-size: 12px;
  line-height: 1.45;
}

.modal-body > p {
  margin: 0 0 10px;
  color: var(--muted-2);
}

.modal-body .field label {
  font-size: 12px;
  color: var(--muted);
}

.confirm-modal-message {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
}

/* Stacked confirmation dialog (sits above the main modal) */
.confirm-modal-overlay {
  z-index: 220;
}

.confirm-modal {
  z-index: 225;
  width: min(440px, calc(100vw - 24px));
}

/* Retail Math Modal Form Styling */
#modal-inputs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

#modal-inputs .field {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 150ms ease, background 150ms ease;
}

[data-theme="light"] #modal-inputs .field {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.10);
}

#modal-inputs .field:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] #modal-inputs .field:hover {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.04);
}

#modal-inputs .field .lbl {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#modal-inputs .field .lbl > span:first-child {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

#modal-inputs .field .hint {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.4;
}

#modal-inputs .inprow {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

#modal-inputs .prefix {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  color: var(--muted);
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  min-width: 50px;
  text-align: center;
  flex-shrink: 0;
  font-weight: 500;
}

[data-theme="light"] #modal-inputs .prefix {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}

#modal-inputs input {
  width: 100%;
  padding: 10px 14px;
  padding-right: 14px !important;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.05);
  background-image: none !important;
  color: var(--text);
  outline: none;
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

[data-theme="light"] #modal-inputs input {
  background-color: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.15);
}

#modal-inputs input:focus {
  border-color: rgba(var(--brand-highlight-rgb), 0.6);
  box-shadow: 0 0 0 3px rgba(var(--brand-highlight-rgb), 0.12);
  background-color: rgba(255, 255, 255, 0.08);
  outline: none;
}

[data-theme="light"] #modal-inputs input:focus {
  border-color: rgba(var(--brand-highlight-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--brand-highlight-rgb), 0.10);
  background-color: #ffffff;
}

#modal-inputs input::placeholder {
  color: var(--muted-2);
  opacity: 0.6;
}

/* Modal toggle styling */
#modal-body .toggle {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

[data-theme="light"] #modal-body .toggle {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.10);
}

#modal-body .toggle label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  padding: 8px;
  border-radius: 8px;
  transition: background 150ms ease;
}

#modal-body .toggle label:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] #modal-body .toggle label:hover {
  background: rgba(0, 0, 0, 0.04);
}

#modal-body .toggle input[type="radio"] {
  margin: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: rgba(var(--brand-highlight-rgb), 0.8);
}

.modal-foot {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

[data-theme="light"] .modal-foot {
  border-top: 1px solid rgba(0,0,0,0.10);
}

.modal-foot .btn {
  min-width: auto;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
}

/* Locations */
.locations-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 1024px) {
  .locations-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.locations-sidebar {
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}

[data-theme="light"] .locations-sidebar {
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}

.locations-sidebar .card {
  margin-bottom: 0;
}

.locations-sidebar .hint {
  font-size: 12px;
  margin-top: 4px;
}

/* Custom multi-select dropdown - matches Usage page styling (rounded corners, border) */
.custom-multi-select {
  position: relative;
  width: 100%;
}

.custom-multi-select-trigger {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  padding-right: 36px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background-color: rgba(255,255,255,0.05);
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  font-family: inherit;
}

.custom-multi-select-trigger:hover {
  border-color: rgba(255,255,255,0.18);
}

.custom-multi-select-trigger:focus {
  outline: none;
  border-color: rgba(255,255,255,0.18);
  box-shadow: var(--ring);
}

.custom-multi-select-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-multi-select-chevron {
  flex-shrink: 0;
  opacity: 0.8;
}

.custom-multi-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  background-color: rgba(20,22,26,0.98);
  box-shadow: var(--shadow);
  z-index: 100;
  padding: 8px 0;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}

.custom-multi-select-dropdown[hidden] {
  display: none !important;
}

.custom-multi-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background 120ms ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.custom-multi-select-option:hover {
  background-color: rgba(255,255,255,0.08);
}

.custom-multi-select-option input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

[data-theme="light"] .custom-multi-select-trigger {
  background-color: #ffffff;
  border-color: var(--border);
  color: var(--text);
}

[data-theme="light"] .custom-multi-select-chevron {
  color: rgba(10,10,12,0.7);
}

[data-theme="light"] .custom-multi-select-trigger:hover {
  border-color: rgba(0,0,0,0.3);
}

[data-theme="light"] .custom-multi-select-dropdown {
  background-color: #ffffff;
  border-color: var(--border);
  box-shadow: var(--shadow);
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}

[data-theme="light"] .custom-multi-select-option {
  color: var(--text);
}

[data-theme="light"] .custom-multi-select-option:hover {
  background-color: rgba(0,0,0,0.05);
}

/* Shared filter sidebar styling - Location Data and Usage page */
.filter-sidebar .filter-select,
.filter-sidebar select.filter-select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  padding-right: 36px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background-color: rgba(255,255,255,0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: var(--text);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 13px;
  cursor: pointer;
  box-sizing: border-box;
}

.filter-sidebar .filter-select:focus,
.filter-sidebar select.filter-select:focus {
  border-color: rgba(255,255,255,0.18);
  box-shadow: var(--ring);
}

[data-theme="light"] .filter-sidebar .filter-select,
[data-theme="light"] .filter-sidebar select.filter-select {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000000' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  border-color: var(--border);
}

.locations-results {
  min-width: 0;
}

/* Usage */
.usage-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 1024px) {
  .usage-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.usage-sidebar {
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
}

.usage-sidebar .card {
  margin-bottom: 0;
}

.usage-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.toolbar-right { display: flex; align-items: center; gap: 10px; }

.kpi {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

.kpi-label { font-size: 11px; color: var(--muted); }
.kpi-value { font-size: 13px; color: rgba(255,255,255,0.86); }

[data-theme="light"] .kpi {
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.02);
}

[data-theme="light"] .kpi-value {
  color: var(--text);
}

.table-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.table-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.view-toggle {
  display: flex;
  gap: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  padding: 2px;
}

.view-toggle-btn {
  min-width: auto;
  padding: 8px 14px;
  border: none;
  background: transparent;
  border-radius: 10px;
  transition: background 150ms ease;
  color: var(--muted);
}

.view-toggle-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}

.view-toggle-btn.active {
  background: rgba(255,255,255,0.12);
  color: var(--text);
}

.locations-view {
  margin-top: 12px;
}

.chip {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  padding: 8px 10px;
}

.chip-strong { color: rgba(255,255,255,0.88); font-weight: 600; }

[data-theme="light"] .chip {
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.02);
}

[data-theme="light"] .chip-strong {
  color: var(--text);
}

.input-compact {
  padding: 10px 10px;
  padding-right: 36px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background-color: rgba(255,255,255,0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

[data-theme="light"] .input-compact {
  border-color: var(--border);
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000000' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  color: var(--text);
}

.table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

[data-theme="light"] .table-wrap {
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.01);
}

.table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}

@media (max-width: 1024px) {
  .table {
    min-width: 800px;
  }
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

.pagination-left,
.pagination-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.table thead th {
  text-align: left;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}

[data-theme="light"] .table thead th {
  border-bottom: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
}

.th-sortable {
  cursor: pointer;
  user-select: none;
  transition: background 150ms ease, color 150ms ease;
}

.th-sortable:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text);
}

.th-sortable.th-sorted {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}

[data-theme="light"] .th-sortable:hover {
  background: rgba(0,0,0,0.04);
}

[data-theme="light"] .th-sortable.th-sorted {
  background: rgba(0,0,0,0.03);
}

.th-sortable-content {
  display: flex;
  align-items: center;
  gap: 4px;
}

.th-sort-indicator {
  font-size: 10px;
  visibility: hidden;
  color: rgba(255,255,255,0.7);
  transition: color 150ms ease;
}

.th-sortable.th-sorted .th-sort-indicator {
  color: rgba(255,255,255,0.9);
}

[data-theme="light"] .th-sort-indicator {
  color: rgba(10,10,12,0.6);
}

[data-theme="light"] .th-sortable.th-sorted .th-sort-indicator {
  color: rgba(10,10,12,0.8);
}

.table tbody td {
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  color: rgba(255,255,255,0.86);
  vertical-align: middle;
}

.table tbody tr:hover td {
  background: rgba(255,255,255,0.03);
}

[data-theme="light"] .table tbody td {
  border-bottom: 1px solid rgba(0,0,0,0.06);
  color: var(--text);
}

[data-theme="light"] .table tbody tr:hover td {
  background: rgba(0,0,0,0.02);
}

.th-check { width: 44px; }
.th-actions { 
  width: 250px; 
  min-width: 150px;
}

@media (max-width: 768px) {
  .th-actions {
    width: auto;
    min-width: 120px;
  }
}

.row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.link-btn {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
}

.link-btn:hover { 
  background: rgba(255,255,255,0.07);
  color: var(--text);
}

[data-theme="light"] .link-btn {
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
  color: var(--text);
}

[data-theme="light"] .link-btn:hover {
  background: rgba(0,0,0,0.05);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.80);
}

[data-theme="light"] .badge {
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
  color: var(--text);
}

.groups {
  display: grid;
  gap: 10px;
}

.tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
  flex-wrap: wrap;
}

.tab {
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.88);
  cursor: pointer;
  font-size: 13px;
}

.tab:hover { background: rgba(255,255,255,0.08); }
.tab.active, .tab[aria-selected="true"] {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.16);
}

[data-theme="light"] .tab {
  background: #eef1f7;
  border-color: rgba(0,0,0,0.14);
  color: var(--text);
}

[data-theme="light"] .tab:hover {
  background: #e5e9f2;
}

[data-theme="light"] .tab.active,
[data-theme="light"] .tab[aria-selected="true"] {
  background: #dbe2ee;
  border-color: rgba(0,0,0,0.28);
  color: var(--text);
}

[data-tab-panel][hidden] { display: none; }

.group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

.group-title { font-size: 13px; color: rgba(255,255,255,0.88); }
.group-description { font-size: 12px; color: rgba(255,255,255,0.75); margin-top: 6px; line-height: 1.5; }
.group-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.group-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

[data-theme="light"] .group {
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.02);
}

[data-theme="light"] .group-title {
  color: var(--text);
}

[data-theme="light"] .group-description {
  color: var(--muted);
}

.group-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Group Summary Styles */
.group-summary {
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

[data-theme="light"] .group-summary {
  background: rgba(0,0,0,0.02);
}

.group-summary-label {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 4px;
}

[data-theme="light"] .group-summary-label {
  color: var(--muted);
}

.group-summary-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.group-summary-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
}

[data-theme="light"] .group-summary-item {
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.1);
}

.group-summary-item-included {
  background: rgba(96, 165, 250, 0.2);
  border: 1px solid rgba(96, 165, 250, 0.4);
}

[data-theme="light"] .group-summary-item-included {
  background: rgba(96, 165, 250, 0.15);
  border: 1px solid rgba(96, 165, 250, 0.3);
}

.group-summary-item-text {
  color: rgba(255,255,255,0.7);
  font-size: 12px;
}

[data-theme="light"] .group-summary-item-text {
  color: var(--muted);
}

/* Tags Input Component */
.tags-input-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tags-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}

.tags-input-wrapper {
  position: relative;
}

.tags-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 200px;
  overflow-y: auto;
  background: rgba(18, 18, 22, 0.98);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
  z-index: 100;
  padding: 4px;
}

.tag-dropdown-item {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(255,255,255,0.88);
  transition: background 150ms ease;
}

.tag-dropdown-item:hover {
  background: rgba(255,255,255,0.08);
}

.tag-dropdown-create {
  color: rgba(96, 165, 250, 0.9);
  font-weight: 500;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.90);
  cursor: default;
}

.tag-chip-remove {
  background: none;
  border: none;
  color: rgba(255,255,255,0.70);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  margin-left: 2px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 150ms ease;
}

.tag-chip-remove:hover {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.95);
}

.tag-chip-small {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
}

[data-theme="light"] .tags-selected {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.12);
}

[data-theme="light"] .tags-dropdown {
  background: #ffffff;
  border-color: rgba(0,0,0,0.15);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

[data-theme="light"] .tag-dropdown-item {
  color: rgba(10,10,12,0.88);
}

[data-theme="light"] .tag-dropdown-item:hover {
  background: rgba(0,0,0,0.05);
}

[data-theme="light"] .tag-chip {
  border-color: rgba(0,0,0,0.15);
  background: rgba(0,0,0,0.05);
  color: rgba(10,10,12,0.90);
}

[data-theme="light"] .tag-chip-remove {
  color: rgba(10,10,12,0.70);
}

[data-theme="light"] .tag-chip-remove:hover {
  background: rgba(0,0,0,0.10);
  color: rgba(10,10,12,0.95);
}

[data-theme="light"] .tag-chip-small {
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
  color: rgba(10,10,12,0.85);
}

/* Empty state */
.empty {
  padding: 18px;
  text-align: center;
  color: var(--muted);
}

.empty-title { font-size: 13px; color: rgba(255,255,255,0.85); }
.empty-subtitle { margin-top: 6px; font-size: 12px; color: var(--muted); }

[data-theme="light"] .empty-title {
  color: var(--text);
}

/* Mobile */
@media (max-width: 920px) {
  .app-mobile-bar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: calc(56px + env(safe-area-inset-top));
    padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    background: rgba(11, 11, 13, 0.82);
    box-shadow: 0 10px 24px rgba(0,0,0,0.24);
    backdrop-filter: blur(18px);
    z-index: 24;
  }

  [data-theme="light"] .app-mobile-bar {
    border-bottom-color: rgba(0,0,0,0.10);
    background: rgba(246,247,251,0.86);
  }

  .app-sidebar-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
    min-height: 40px;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 650;
  }

  .sidebar-close-btn {
    display: inline-flex;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: min(336px, 88vw);
    transform: translateX(-110%);
    transition: transform 200ms ease, width 200ms ease;
    z-index: 40;
    box-shadow: 18px 0 36px rgba(0,0,0,0.34);
  }

  .sidebar.open { transform: translateX(0); }
  
  .sidebar.minimized {
    width: min(336px, 88vw);
  }

  .overlay {
    z-index: 35;
  }

  .sidebar-header,
  .sidebar.minimized .sidebar-header {
    flex-direction: row;
    align-items: center;
    min-height: calc(58px + env(safe-area-inset-top));
    padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  }

  .sidebar.minimized .sidebar-logo {
    width: auto;
  }

  .sidebar.minimized .sidebar-logo .logo-icon {
    display: none !important;
  }

  [data-theme="light"] .sidebar.minimized .sidebar-logo .logo-light,
  [data-theme="dark"] .sidebar.minimized .sidebar-logo .logo-dark {
    display: block !important;
  }

  .nav,
  .sidebar.minimized .nav {
    padding: 12px;
    gap: 6px;
  }

  .sidebar.minimized .nav-label {
    opacity: 1;
    width: auto;
    overflow: visible;
  }

  .sidebar.minimized .nav-chevron {
    display: inline;
  }

  .sidebar.minimized .nav-parent {
    justify-content: flex-start;
  }

  .sidebar.minimized .nav-group[data-expanded="true"] .nav-submenu {
    display: flex !important;
  }

  .nav-item,
  .sidebar.minimized .nav-item {
    justify-content: flex-start;
    gap: 12px;
    min-height: 46px;
    padding: 12px;
    border-radius: 14px;
    font-size: 14px;
  }

  .nav-subitem,
  .sidebar.minimized .nav-subitem {
    min-height: 42px;
    font-size: 13px;
  }

  .sidebar-nav-tooltip {
    display: none !important;
  }

  .sidebar.minimized .sidebar-user-menu .user-chip {
    display: inline;
  }

  .sidebar.minimized .sidebar-user-menu .chev {
    display: block;
  }

  .sidebar.minimized .sidebar-user-menu .pill-btn {
    justify-content: flex-start;
    gap: 12px;
    padding: 12px;
  }

  .sidebar-user-menu {
    padding: 12px;
  }
  
  .sidebar-minimize-btn {
    display: none;
  }

  .content {
    margin-left: 0;
  }

  .layout.sidebar-minimized .content {
    margin-left: 0;
  }

  .content > * {
    padding: 14px;
  }

  #view-app .content > .page {
    max-width: 100%;
    padding-top: calc(72px + env(safe-area-inset-top));
  }

  #view-app .page-header {
    padding-right: 0;
  }

  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  .actions { flex-direction: column; align-items: stretch; }
  .btn { min-width: 100%; }
  .table { min-width: 600px; }

  #view-app .toolbar .btn,
  #view-app .table-actions .btn,
  #view-app .row-actions .btn,
  #view-app .group-actions .btn,
  #view-app .price-pulse-report-actions .btn,
  #view-app .price-pulse-pairing-actions .btn,
  #view-app .review-radar-data-actions .btn,
  #view-app .review-radar-export-buttons .btn,
  #view-app .api-logs-filters .btn,
  #view-app .modal-foot .btn {
    min-width: auto;
  }
  
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .locations-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .locations-sidebar {
    position: static;
    max-height: none;
  }

  .usage-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .usage-sidebar {
    position: static;
    max-height: none;
  }
  
  .api-detail-layout {
    grid-template-columns: 1fr;
  }
  
  .api-playground {
    grid-template-columns: 1fr;
  }
  
  .api-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
}

/* Extra small screens */
@media (max-width: 480px) {
  .content > * {
    padding: 12px;
  }

  #view-app .content > .page {
    padding-top: 60px;
  }

  #view-app #sidebar-toggle span {
    display: none;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .api-metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .table-head {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .table-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  
  .pagination {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .pagination-left,
  .pagination-right {
    justify-content: center;
    width: 100%;
  }
  
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .toolbar-left,
  .toolbar-right {
    width: 100%;
    justify-content: flex-start;
  }
  
  .api-detail-header {
    flex-direction: column;
  }
  
  .api-detail-header-right {
    align-items: stretch;
  }
  
  .api-key-container {
    flex-direction: column;
  }
  
  .date-range-container {
    flex-direction: column;
  }
  
  .api-logs-filters {
    flex-direction: column;
  }
  
  .api-filter-select {
    width: 100%;
  }
  
  .modal {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
  }
  
  .auth-card {
    padding: 16px;
  }
  
  .auth-back-link {
    top: 16px;
    right: 16px;
  }
}

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

/* Leaflet Map Styles - Dark Mode */
#locations-map-container,
#group-map-container,
#comp-group-view-map {
  width: 100%;
  max-width: 100%;
  height: 600px;
  border-radius: 12px;
  overflow: hidden;
  background: #0b0b0d;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  #locations-map-container,
  #group-map-container,
  #comp-group-view-map {
    height: 400px;
  }
}

#locations-map-container .leaflet-container,
#group-map-container .leaflet-container,
#comp-group-view-map .leaflet-container {
  background: #0b0b0d;
  font-family: inherit;
}

[data-theme="light"] #locations-map-container,
[data-theme="light"] #group-map-container,
[data-theme="light"] #comp-group-view-map {
  background: #f6f7fb;
}

[data-theme="light"] #locations-map-container .leaflet-container,
[data-theme="light"] #group-map-container .leaflet-container,
[data-theme="light"] #comp-group-view-map .leaflet-container {
  background: #f6f7fb;
}

#locations-map-container .leaflet-popup-content-wrapper,
#group-map-container .leaflet-popup-content-wrapper,
#comp-group-view-map .leaflet-popup-content-wrapper {
  background: rgba(17, 17, 19, 0.95);
  color: #f9fafb;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

#locations-map-container .leaflet-popup-content,
#group-map-container .leaflet-popup-content,
#comp-group-view-map .leaflet-popup-content {
  margin: 12px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #ffffff;
  font-weight: 500;
}

#locations-map-container .leaflet-popup-tip,
#group-map-container .leaflet-popup-tip,
#comp-group-view-map .leaflet-popup-tip {
  background: rgba(17, 17, 19, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#locations-map-container .leaflet-popup-close-button,
#group-map-container .leaflet-popup-close-button,
#comp-group-view-map .leaflet-popup-close-button {
  color: #ffffff;
  font-size: 20px;
  padding: 4px 8px;
  transition: color 0.2s;
  opacity: 0.9;
}

#locations-map-container .leaflet-popup-close-button:hover,
#group-map-container .leaflet-popup-close-button:hover,
#comp-group-view-map .leaflet-popup-close-button:hover {
  color: #ffffff;
  opacity: 1;
}

#locations-map-container .leaflet-control-zoom a,
#group-map-container .leaflet-control-zoom a,
#comp-group-view-map .leaflet-control-zoom a {
  background-color: rgba(17, 17, 19, 0.9);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: all 0.2s;
}

#locations-map-container .leaflet-control-zoom a:hover,
#group-map-container .leaflet-control-zoom a:hover,
#comp-group-view-map .leaflet-control-zoom a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

#locations-map-container .leaflet-control-attribution,
#group-map-container .leaflet-control-attribution,
#comp-group-view-map .leaflet-control-attribution {
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 11px;
  padding: 4px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0.9;
}

#locations-map-container .leaflet-control-attribution a,
#group-map-container .leaflet-control-attribution a,
#comp-group-view-map .leaflet-control-attribution a {
  color: #60a5fa;
}

/* Light Mode Map Styles */
[data-theme="light"] #locations-map-container .leaflet-popup-content-wrapper,
[data-theme="light"] #group-map-container .leaflet-popup-content-wrapper,
[data-theme="light"] #comp-group-view-map .leaflet-popup-content-wrapper {
  background: rgba(255, 255, 255, 0.98);
  color: rgba(10, 10, 12, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] #locations-map-container .leaflet-popup-content,
[data-theme="light"] #group-map-container .leaflet-popup-content,
[data-theme="light"] #comp-group-view-map .leaflet-popup-content {
  color: rgba(10, 10, 12, 0.95);
}

[data-theme="light"] #locations-map-container .leaflet-popup-tip,
[data-theme="light"] #group-map-container .leaflet-popup-tip,
[data-theme="light"] #comp-group-view-map .leaflet-popup-tip {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.12);
}

[data-theme="light"] #locations-map-container .leaflet-popup-close-button,
[data-theme="light"] #group-map-container .leaflet-popup-close-button,
[data-theme="light"] #comp-group-view-map .leaflet-popup-close-button {
  color: rgba(10, 10, 12, 0.85);
}

[data-theme="light"] #locations-map-container .leaflet-popup-close-button:hover,
[data-theme="light"] #group-map-container .leaflet-popup-close-button:hover,
[data-theme="light"] #comp-group-view-map .leaflet-popup-close-button:hover {
  color: rgba(10, 10, 12, 0.95);
}

[data-theme="light"] #locations-map-container .leaflet-control-zoom a,
[data-theme="light"] #group-map-container .leaflet-control-zoom a,
[data-theme="light"] #comp-group-view-map .leaflet-control-zoom a {
  background-color: rgba(255, 255, 255, 0.95);
  color: rgba(10, 10, 12, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] #locations-map-container .leaflet-control-zoom a:hover,
[data-theme="light"] #group-map-container .leaflet-control-zoom a:hover,
[data-theme="light"] #comp-group-view-map .leaflet-control-zoom a:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: rgba(10, 10, 12, 0.95);
}

[data-theme="light"] #locations-map-container .leaflet-control-attribution,
[data-theme="light"] #group-map-container .leaflet-control-attribution,
[data-theme="light"] #comp-group-view-map .leaflet-control-attribution {
  background-color: rgba(255, 255, 255, 0.9);
  color: rgba(10, 10, 12, 0.7);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] #locations-map-container .leaflet-control-attribution a,
[data-theme="light"] #group-map-container .leaflet-control-attribution a,
[data-theme="light"] #comp-group-view-map .leaflet-control-attribution a {
  color: #2563eb;
}

/* Marker hover effect */
#locations-map-container .leaflet-interactive:hover {
  stroke-width: 3;
  fill-opacity: 1;
}

/* Popup styling for hover behavior */
#locations-map-container .location-popup {
  pointer-events: auto;
}

#locations-map-container .leaflet-popup-content-wrapper:hover {
  /* Keep popup open when hovering over it */
}

/* APIs Grid */
.apis-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding: 20px;
}

@media (max-width: 1400px) {
  .apis-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1100px) {
  .apis-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 800px) {
  .apis-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.api-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  transition: all 150ms ease;
  cursor: pointer;
  text-align: center;
}

.api-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.api-card-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background: transparent;
  border: none;
  overflow: hidden;
  flex-shrink: 0;
}

.api-card-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.api-card-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}

.api-card-description {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

[data-theme="light"] .api-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.14);
}

[data-theme="light"] .api-card:hover {
  background: #f8f9fa;
  border-color: rgba(0,0,0,0.20);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

[data-theme="light"] .api-card-logo {
  background: transparent;
  border: none;
}

/* API Detail Page */
.api-detail-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  min-height: calc(100vh - 80px);
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .api-detail-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .api-detail-sidebar {
    order: 2;
  }
  
  .api-detail-content {
    order: 1;
  }
}

.api-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.api-detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.api-detail-breadcrumb .breadcrumb-link {
  color: var(--muted);
  text-decoration: none;
  transition: color 150ms ease;
}

.api-detail-breadcrumb .breadcrumb-link:hover {
  color: var(--text);
}

.api-detail-breadcrumb .breadcrumb-separator {
  color: var(--muted-2);
}

.api-detail-breadcrumb .breadcrumb-current {
  color: var(--text);
  font-weight: 500;
}

.api-retailer-info {
  padding: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  text-align: center;
}

.api-retailer-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 16px;
  background: transparent;
  border: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.api-retailer-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.api-retailer-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
}

.api-retailer-description {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.api-endpoints-list {
  flex: 1;
  overflow-y: auto;
}

.api-endpoints-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.api-endpoint-card {
  padding: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  cursor: pointer;
  transition: all 150ms ease;
}

.api-endpoint-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
}

.api-endpoint-card.active {
  background: rgba(96, 165, 250, 0.15);
  border-color: rgba(96, 165, 250, 0.4);
}

.api-endpoint-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.api-endpoint-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

.api-endpoint-credits {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(22, 163, 74, 0.95);
}

.api-endpoint-description {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

.api-detail-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: visible;
  overflow-y: visible;
}

.api-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

.api-detail-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.api-credits-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(22, 163, 74, 0.95);
}

.api-detail-header-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .api-detail-header-right {
    align-items: stretch;
  }
  
  .api-key-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .api-key-input {
    width: 100%;
  }
  
  .date-range-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .date-input {
    width: 100%;
  }
}

.api-key-container {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
}

.api-key-label {
  font-size: 13px;
  color: var(--muted);
}

.api-key-input {
  padding: 8px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  font-family: 'Courier New', monospace;
  width: 280px;
  max-width: 100%;
  box-sizing: border-box;
}

.api-key-profile-status {
  margin-bottom: 16px;
}

.api-key-metadata {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.api-key-metadata > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-secondary);
}

.api-key-secret-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.api-key-secret-row code {
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
  user-select: all;
}

@media (max-width: 700px) {
  .api-key-metadata {
    grid-template-columns: 1fr;
  }

  .api-key-secret-row {
    align-items: stretch;
    flex-direction: column;
  }
}

.date-range-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}

.date-input {
  padding: 8px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  min-width: 0;
  flex: 1 1 auto;
  box-sizing: border-box;
}

.date-separator {
  color: var(--muted);
  font-size: 13px;
}

.api-utc-note {
  font-size: 11px;
  color: var(--muted-2);
  margin: 0;
}

.api-detail-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding-bottom: 0;
}

[data-theme="light"] .api-detail-tabs {
  border-bottom: 1px solid rgba(0,0,0,0.10);
}

.api-tab {
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  transition: all 150ms ease;
  margin-bottom: -1px;
}

.api-tab:hover {
  color: var(--text);
}

.api-tab.active {
  color: var(--text);
  border-bottom-color: var(--primary);
}

.api-tab-panel {
  padding-top: 24px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: visible;
}

.api-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1200px) {
  .api-metrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 800px) {
  .api-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .api-metrics-grid {
    grid-template-columns: 1fr;
  }
}

.api-metric-card {
  padding: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
}

.api-metric-label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.api-metric-value {
  font-size: 24px;
  font-weight: 600;
}

.api-metric-success {
  color: rgba(22, 163, 74, 0.95);
}

.api-metric-error {
  color: rgba(220, 38, 38, 0.95);
}

/* ========== Admin panel shared chrome ========== */

/* Temporary admin tools (File Cleanup + Brand Status) — remove with admin-legacy-tools.js */
.admin-temp-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--muted, #888);
  border: 1px solid var(--border);
  background: transparent;
}

.admin-legacy-form .field {
  margin-bottom: 12px;
}

.admin-legacy-result {
  margin-top: 12px;
}

.admin-legacy-debug-pre {
  margin: 0;
  padding: 12px;
  max-height: 420px;
  overflow: auto;
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  white-space: pre-wrap;
  word-break: break-word;
}

[data-theme="dark"] .admin-legacy-debug-pre,
:root:not([data-theme="light"]) .admin-legacy-debug-pre {
  background: rgba(255, 255, 255, 0.04);
}

.admin-legacy-help-list {
  margin: 0;
  padding-left: 1.2rem;
  line-height: 1.5;
}

.admin-legacy-log-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.admin-legacy-log-list {
  margin: 8px 0 0;
  padding-left: 1.2rem;
  font-size: 13px;
  line-height: 1.45;
}

.admin-legacy-log-list li {
  margin-bottom: 4px;
}

.admin-brand-status-dashboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 16px;
  padding: 4px 0 8px;
}

.admin-brand-status-chart {
  position: relative;
  height: 300px;
  padding: 10px 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.admin-brand-status-chart:focus-visible {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
}

.admin-brand-status-chart-title {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 600;
}

.admin-brand-status-chart canvas {
  display: block;
  width: 100% !important;
  height: calc(100% - 28px) !important;
}

.admin-brand-status-modal-chart-wrap {
  position: relative;
  width: 100%;
  height: 400px;
}

.admin-brand-status-modal-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

.admin-brand-status-modal-table {
  margin-top: 8px;
  max-height: 400px;
  overflow: auto;
}

@media (max-width: 1200px) {
  .admin-brand-status-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .admin-brand-status-dashboard {
    grid-template-columns: 1fr;
  }
}

.admin-feedback-toast {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1300;
  max-width: min(380px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(20, 20, 24, 0.96);
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: var(--shadow);
}

.admin-feedback-toast[hidden] {
  display: none !important;
}

.admin-feedback-toast.is-success {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(12, 28, 18, 0.96);
}

.admin-feedback-toast.is-error {
  border-color: rgba(220, 38, 38, 0.4);
  background: rgba(36, 14, 14, 0.96);
}

[data-theme="light"] .admin-feedback-toast {
  background: #fff;
}

[data-theme="light"] .admin-feedback-toast.is-success {
  background: var(--okBg);
}

[data-theme="light"] .admin-feedback-toast.is-error {
  background: var(--dangerBg);
}

.admin-card-header,
.admin-api-usage-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-toolbar,
.admin-api-usage-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-section-title,
.admin-api-usage-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin: 18px 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-table-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 2px;
}

.admin-action-group-label {
  flex: 0 0 100%;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 2px;
}

.admin-org-manage-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

.admin-org-manage-summary .suite-wallet {
  min-width: 0;
}

.admin-org-manage-actions {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

/* Organizations list table — dense, no forced horizontal scroll */
.admin-orgs-wrap {
  overflow-x: visible;
}

.admin-orgs-table.table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.admin-orgs-table thead th {
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-orgs-table tbody td {
  vertical-align: middle;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 13px;
  line-height: 1.25;
}

.admin-orgs-table th:nth-child(1),
.admin-orgs-table td:nth-child(1) {
  width: 26%;
}

.admin-orgs-table th:nth-child(2),
.admin-orgs-table td:nth-child(2) {
  width: 9%;
}

.admin-orgs-table th:nth-child(3),
.admin-orgs-table td:nth-child(3) {
  width: 8%;
}

.admin-orgs-table th:nth-child(4),
.admin-orgs-table td:nth-child(4) {
  width: 10%;
}

.admin-orgs-table th:nth-child(5),
.admin-orgs-table td:nth-child(5) {
  width: 11%;
}

.admin-orgs-table th:nth-child(6),
.admin-orgs-table td:nth-child(6) {
  width: 11%;
}

.admin-orgs-table th:nth-child(7),
.admin-orgs-table td:nth-child(7) {
  width: 15%;
}

.admin-orgs-table th:nth-child(8),
.admin-orgs-table td:nth-child(8) {
  width: 10%;
}

.admin-org-primary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.admin-org-name {
  font-weight: 400;
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.admin-org-id {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.admin-org-plan {
  font-weight: 400;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}

.admin-orgs-table .suite-status-pill {
  font-size: 11px;
  padding: 2px 8px;
  font-weight: 600;
}

.admin-orgs-table .admin-suite-usage-mini {
  min-width: 0;
  max-width: 110px;
}

.admin-orgs-table .admin-suite-usage-mini-label {
  font-size: 12px;
  font-weight: 400;
}

.admin-org-cycle {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-org-cycle-remaining {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.admin-org-cycle-range {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.admin-org-cycle--warn .admin-org-cycle-remaining,
.admin-org-cycle--soon .admin-org-cycle-remaining {
  color: #d97706;
}

.admin-org-cycle--ended .admin-org-cycle-remaining {
  color: var(--muted);
}

.admin-org-cycle-empty {
  color: var(--muted);
}

.admin-orgs-table .td-actions {
  text-align: right;
  white-space: nowrap;
}

.admin-orgs-table .td-actions .btn {
  padding: 4px 10px;
  font-size: 12px;
}

/* Users list table — match Organizations density */
.admin-users-wrap {
  overflow-x: visible;
}

.admin-users-table.table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.admin-users-table thead th {
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-users-table tbody td {
  vertical-align: middle;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 13px;
  line-height: 1.25;
}

.admin-users-table th:nth-child(1),
.admin-users-table td:nth-child(1) {
  width: 25%;
}

.admin-users-table th:nth-child(2),
.admin-users-table td:nth-child(2) {
  width: 30%;
}

.admin-users-table th:nth-child(3),
.admin-users-table td:nth-child(3) {
  width: 15%;
}

.admin-users-table th:nth-child(4),
.admin-users-table td:nth-child(4) {
  width: 15%;
}

.admin-users-table th:nth-child(5),
.admin-users-table td:nth-child(5) {
  width: 15%;
}

.admin-users-org {
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-users-org--empty {
  color: var(--muted);
}

.admin-users-created {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}

.admin-users-table .suite-status-pill {
  font-size: 11px;
  padding: 2px 8px;
  font-weight: 400;
  letter-spacing: 0;
}

.admin-users-table .admin-suite-usage-mini {
  min-width: 0;
  max-width: 110px;
}

.admin-users-table .admin-suite-usage-mini-label {
  font-size: 12px;
  font-weight: 400;
}

.admin-users-table .td-actions {
  text-align: right;
  white-space: nowrap;
}

.admin-users-table .td-actions .btn {
  padding: 4px 10px;
  font-size: 12px;
}

.admin-modal-status {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.admin-modal-status.admin-modal-status--error {
  color: rgba(220, 38, 38, 0.95);
}

.admin-modal-status.admin-modal-status--ok {
  color: rgba(34, 197, 94, 0.95);
}

.admin-modal-status[hidden] {
  display: none;
}

.admin-detail-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.admin-detail-list dt {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0;
}

.admin-detail-list dd {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.suite-wallet-sub {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.35;
}

.admin-cogs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-cogs-hero {
  padding: 16px 18px;
}

.admin-cogs-total {
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
}

.admin-cogs-metrics {
  margin-top: 0;
}

.admin-cogs-metrics .suite-wallet-value {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.admin-cogs-rate {
  font-size: 0.95rem !important;
}

.admin-cogs-section-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin-cogs-users-wrap {
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.admin-cogs-users-table {
  margin: 0;
  width: 100%;
}

.admin-cogs-users-table th,
.admin-cogs-users-table td {
  font-size: 12px;
  padding: 8px 10px;
  font-variant-numeric: tabular-nums;
}

.admin-cogs-users-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2, var(--surface));
  z-index: 1;
}

.admin-log {
  max-height: 320px;
  overflow: auto;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface, rgba(255, 255, 255, 0.04));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}

[data-theme="light"] .admin-log {
  background: #fff;
}

.admin-sync-status {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 12px;
}

.admin-sync-status.admin-sync-status--error {
  color: rgba(220, 38, 38, 0.95);
}

.admin-sync-status.admin-sync-status--ok {
  color: rgba(34, 197, 94, 0.95);
}

.admin-grant-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
}

.admin-grant-mode-row label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.admin-packs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
}

.admin-pack-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface, rgba(255, 255, 255, 0.03));
  cursor: pointer;
}

.admin-pack-option.is-selected,
.admin-pack-option:has(input:checked) {
  border-color: var(--brand-highlight, rgba(59, 130, 246, 0.55));
  background: rgba(59, 130, 246, 0.08);
}

[data-theme="light"] .admin-pack-option {
  background: #fff;
}

[data-theme="light"] .admin-pack-option.is-selected,
[data-theme="light"] .admin-pack-option:has(input:checked) {
  background: rgba(59, 130, 246, 0.06);
}

.admin-rules-nlp-layout {
  display: grid;
  gap: 28px;
  max-width: 920px;
  padding: 4px 2px 12px;
}

.admin-rules-list {
  margin: 0;
  padding-left: 18px;
  line-height: 1.55;
}

.admin-rules-tax-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--surface, rgba(255, 255, 255, 0.03));
}

.admin-rules-tax-label {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

[data-theme="light"] .admin-rules-tax-card {
  background: #fff;
}

/* Admin API Usage dashboard (header/actions/section-title shared with Admin chrome above) */
.admin-api-usage-filter-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-api-usage-filter-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent, #3b82f6);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}

.admin-api-usage-chips {
  margin: 0 0 16px;
}

.admin-api-usage-metrics.api-metrics-grid,
#view-app .admin-api-usage-metrics.api-metrics-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1200px) {
  .admin-api-usage-metrics.api-metrics-grid,
  #view-app .admin-api-usage-metrics.api-metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .admin-api-usage-metrics.api-metrics-grid,
  #view-app .admin-api-usage-metrics.api-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .admin-api-usage-metrics.api-metrics-grid,
  #view-app .admin-api-usage-metrics.api-metrics-grid {
    grid-template-columns: 1fr;
  }
}

.admin-api-usage-origins-section {
  margin-top: 8px;
}

.admin-api-usage-origins {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
}

.admin-api-usage-origin-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-api-usage-origin-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-api-usage-origin-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.admin-api-usage-origin-stats {
  font-size: 12px;
}

.admin-api-usage-origin-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.admin-api-usage-origin-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.85), rgba(99, 102, 241, 0.95));
  min-width: 2px;
}

.admin-api-usage-origin-badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-api-usage-origin-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.88);
}

[data-theme="light"] .admin-api-usage-origins {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.14);
}

[data-theme="light"] .admin-api-usage-origin-bar {
  background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .admin-api-usage-origin-badge {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--text);
}

.api-metric-sublabel {
  font-size: 11px;
  color: var(--muted-2);
  margin-top: 4px;
}

.api-metric-success-bg {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.25);
}

.api-metric-error-bg {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.25);
}

.api-metric-muted {
  color: var(--muted);
  font-size: 18px;
}

.api-graph-section {
  margin-top: 24px;
}

.api-graph-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px;
}

.api-graph-container {
  min-height: 400px;
  padding: 40px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
}

@media (max-width: 768px) {
  .api-graph-container {
    padding: 20px;
    min-height: 300px;
  }
}

[data-theme="light"] .api-retailer-info,
[data-theme="light"] .api-endpoint-card,
[data-theme="light"] .api-metric-card,
[data-theme="light"] .api-graph-container {
  background: #ffffff;
  border-color: rgba(0,0,0,0.14);
}

[data-theme="light"] .api-endpoint-card:hover {
  background: #f8f9fa;
  border-color: rgba(0,0,0,0.20);
}

[data-theme="light"] .api-endpoint-card.active {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.3);
}

[data-theme="light"] .api-key-input,
[data-theme="light"] .date-input {
  background: #ffffff;
  border-color: rgba(0,0,0,0.14);
  color: var(--text);
}

/* API Playground */
.api-playground {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 1024px) {
  .api-playground {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.api-playground-request {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.api-request-method-url {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
}

.api-method-btn {
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: default;
  min-width: 60px;
}

.api-method-get {
  background: rgba(96, 165, 250, 0.15);
  border-color: rgba(96, 165, 250, 0.3);
  color: rgba(37, 99, 235, 0.95);
}

.api-url-input {
  flex: 1;
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  font-family: 'Courier New', monospace;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
}

.api-parameters-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.api-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
}

.api-param-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.api-param-field label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.api-param-input {
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.api-playground-response {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0; /* Allow flex item to shrink below content size */
  max-width: 100%;
  overflow: hidden;
}

.api-response-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding-bottom: 0;
}

[data-theme="light"] .api-response-tabs {
  border-bottom: 1px solid rgba(0,0,0,0.10);
}

.api-response-tab {
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: all 150ms ease;
  margin-bottom: -1px;
}

.api-response-tab:hover {
  color: var(--text);
}

.api-response-tab.active {
  color: var(--text);
  border-bottom-color: var(--primary);
}

.code-snippet-modal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: min(720px, 100%);
}

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

.code-snippet-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.code-snippet-tab {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: transparent;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}

.code-snippet-tab:hover {
  border-color: rgba(255,255,255,0.28);
}

.code-snippet-tab.active {
  border-color: var(--primary);
  color: var(--primary);
}

[data-theme="light"] .code-snippet-tab {
  border-color: rgba(0,0,0,0.14);
}

[data-theme="light"] .code-snippet-tab:hover {
  border-color: rgba(0,0,0,0.28);
}

.code-snippet-pre {
  margin: 0;
  padding: 16px;
  border-radius: 12px;
  background: #0b1220;
  border: 1px solid rgba(255,255,255,0.10);
  color: #e8eefc;
  overflow: auto;
  max-height: min(50vh, 420px);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

[data-theme="light"] .code-snippet-pre {
  background: #0b1220;
  color: #e8eefc;
}

.code-snippet-note {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.api-code-samples-panel .empty {
  padding: 24px 16px;
}

.api-response-content {
  min-height: 400px;
  max-height: 600px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

.api-response-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.api-response-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.api-json-content {
  margin: 0;
  padding: 16px;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 100%;
  max-width: 100%;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
  box-sizing: border-box;
}

.api-json-content code {
  color: inherit;
  background: transparent;
  padding: 0;
}

/* API Logs */
.api-logs {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.api-logs-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.api-logs-filters {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.api-filter-select {
  padding: 8px 12px;
  padding-right: 36px;
  background-color: rgba(255,255,255,0.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  min-width: 120px;
  flex: 1 1 auto;
  max-width: 100%;
  box-sizing: border-box;
  appearance: none;
  cursor: pointer;
}

.api-logs-table-container {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* API Documentation */
.api-documentation {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.api-doc-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.api-doc-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.api-doc-text {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.api-doc-code-block {
  position: relative;
  padding: 16px;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  margin-top: 8px;
}

.api-doc-code-block code {
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  max-width: 100%;
}

.api-code-copy-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: all 150ms ease;
}

.api-code-copy-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}

[data-theme="light"] .api-code-copy-btn {
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.12);
}

[data-theme="light"] .api-code-copy-btn:hover {
  background: rgba(0,0,0,0.05);
}

[data-theme="light"] .api-url-input,
[data-theme="light"] .api-param-input,
[data-theme="light"] .api-filter-select {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000000' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border-color: rgba(0,0,0,0.14);
  color: var(--text);
}

[data-theme="light"] .api-response-content,
[data-theme="light"] .api-logs-table-container,
[data-theme="light"] .api-doc-code-block {
  background: #ffffff;
  border-color: rgba(0,0,0,0.14);
}

[data-theme="light"] .api-json-content {
  background: rgba(0,0,0,0.03);
}

/* API Status and Method Badges */
.api-status-success {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: rgba(22, 163, 74, 0.95);
}

.api-status-error {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: rgba(185, 28, 28, 0.95);
}

.api-status-warning {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: rgba(217, 119, 6, 0.95);
}

.api-method-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.88);
}

[data-theme="light"] .api-method-badge {
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.14);
  color: var(--text);
}

.api-method-badge.api-method-get {
  background: rgba(96, 165, 250, 0.15);
  border-color: rgba(96, 165, 250, 0.3);
  color: rgba(37, 99, 235, 0.95);
}

.api-method-badge.api-method-post {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: rgba(22, 163, 74, 0.95);
}

.api-method-badge.api-method-put {
  background: rgba(255, 200, 100, 0.15);
  border-color: rgba(255, 200, 100, 0.3);
  color: rgba(255, 200, 100, 0.95);
}

.api-method-badge.api-method-delete {
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.3);
  color: rgba(185, 28, 28, 0.95);
}

[data-theme="light"] .api-status-success {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.25);
  color: rgba(22, 163, 74, 0.95);
}

[data-theme="light"] .api-status-error {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.25);
  color: rgba(185, 28, 28, 0.95);
}

[data-theme="light"] .api-status-warning {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.25);
  color: rgba(217, 119, 6, 0.95);
}

[data-theme="light"] .api-method-badge {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.14);
  color: var(--text);
}

[data-theme="light"] .api-method-badge.api-method-get {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.25);
  color: rgba(37, 99, 235, 0.95);
}

[data-theme="light"] .api-method-badge.api-method-post {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.25);
  color: rgba(22, 163, 74, 0.95);
}

[data-theme="light"] .api-method-badge.api-method-put {
  background: rgba(255, 200, 100, 0.12);
  border-color: rgba(255, 200, 100, 0.25);
  color: rgba(255, 200, 100, 0.95);
}

[data-theme="light"] .api-method-badge.api-method-delete {
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(220, 38, 38, 0.25);
  color: rgba(185, 28, 28, 0.95);
}

/* ==========
   PUBLIC SITE STYLES
   ========== */

:root {
  /* Public Site Color Palette */
  --public-bg: #0f0f11;
  --public-surface: #1a1a1d;
  --public-surface-alt: #222228;
  --public-text: rgba(255, 255, 255, 0.95);
  --public-muted: rgba(255, 255, 255, 0.65);
  --public-border: rgba(255, 255, 255, 0.12);
  --public-bg-hover: rgba(255, 255, 255, 0.08);
  
  --public-primary: var(--brand-highlight);
  --public-primary-hover: var(--brand-highlight-hover);
  --public-primary-strong: var(--brand-highlight-strong);
  --public-primary-rgb: var(--brand-highlight-rgb);
  --public-secondary: var(--brand-highlight-strong);
  --public-success: #10b981;
  --public-warning: #f59e0b;
  
  --public-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  --public-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);

  /* Public type + spacing scale */
  --public-text-hero: clamp(2rem, 4.5vw, 3.5rem);
  --public-text-h1: clamp(1.75rem, 3.5vw, 2.75rem);
  --public-text-h2: clamp(1.35rem, 2.5vw, 2rem);
  --public-text-body: 1.0625rem;
  --public-text-small: 0.875rem;
  --public-space-1: 8px;
  --public-space-2: 12px;
  --public-space-3: 16px;
  --public-space-4: 24px;
  --public-space-5: 40px;
  --public-space-6: 64px;
  --public-section-y: clamp(48px, 8vw, 96px);
}

[data-theme="light"] {
  /* Public Site Color Palette - Light Theme */
  --public-bg: #ffffff;
  --public-surface: #f6f7fb;
  --public-surface-alt: #eef0f6;
  --public-text: rgba(10, 10, 12, 0.95);
  --public-muted: rgba(10, 10, 12, 0.65);
  --public-border: rgba(0, 0, 0, 0.12);
  --public-bg-hover: rgba(0, 0, 0, 0.05);
  
  --public-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  --public-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* Skip link */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--public-primary);
  color: #0a0a0c;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip-to-content:focus {
  left: 0;
}

/* Public View */
#view-public {
  background: var(--public-bg);
  color: var(--public-text);
  --section-pad-y: var(--public-section-y);
}

#view-public .section {
  padding: var(--public-section-y) 0;
}

#view-public .section-title {
  font-size: var(--public-text-h2);
}

#view-public .public-page-title,
#view-public .features-hero-title {
  font-size: var(--public-text-h1);
}

#view-public .hero-title {
  font-size: var(--public-text-hero);
}

#view-public .btn-primary {
  background: rgba(var(--public-primary-rgb), 0.14);
  color: var(--public-primary);
  border-color: rgba(var(--public-primary-rgb), 0.55);
}

#view-public .btn-primary:hover {
  background: rgba(var(--public-primary-rgb), 0.24);
  border-color: var(--public-primary);
  color: var(--public-primary-hover);
}

[data-theme="light"] #view-public .btn-primary {
  background: rgba(var(--public-primary-rgb), 0.12);
  color: var(--public-primary-strong);
  border-color: rgba(var(--public-primary-rgb), 0.45);
}

[data-theme="light"] #view-public .btn-primary:hover {
  background: rgba(var(--public-primary-rgb), 0.2);
  border-color: var(--public-primary);
  color: var(--public-primary-strong);
}

#view-public .btn-secondary:hover {
  border-color: var(--public-primary);
  color: var(--public-primary);
}

#view-public .btn-lg {
  padding: 14px 22px;
  min-width: 168px;
  font-size: 16px;
  font-weight: 600;
}

@media (max-width: 920px) {
  #view-public .cta-button-row .btn,
  #view-public .hero-ctas .btn,
  #view-public .features-hero-cta .btn {
    min-width: 160px;
    width: auto;
  }
}

@media (max-width: 480px) {
  #view-public .cta-button-row,
  #view-public .hero-ctas,
  #view-public .features-hero-cta {
    flex-direction: column;
    align-items: stretch;
  }

  #view-public .cta-button-row .btn,
  #view-public .hero-ctas .btn,
  #view-public .features-hero-cta .btn {
    width: 100%;
    min-width: 0;
  }
}

/* Public Header */
.public-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: color-mix(in srgb, var(--public-bg) 80%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--public-border);
}

[data-theme="light"] .public-header {
  background: color-mix(in srgb, var(--public-bg) 80%, transparent);
}

.public-header-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.public-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--public-text);
  font-weight: 600;
  font-size: 18px;
  transition: opacity 150ms ease;
}

.public-logo:hover {
  opacity: 0.9;
}

.public-logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

/* Public logo full logo with text */
.public-logo-full {
  height: 32px;
  width: auto;
  object-fit: contain;
  transition: all 150ms ease;
}

/* Theme-based public logo switching */
[data-theme="light"] .public-logo .logo-dark {
  display: none;
}

[data-theme="light"] .public-logo .logo-light {
  display: block;
}

[data-theme="dark"] .public-logo .logo-light {
  display: none;
}

[data-theme="dark"] .public-logo .logo-dark {
  display: block;
}

.public-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.public-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--public-border);
  border-radius: 8px;
  padding: 8px;
  color: var(--public-text);
  cursor: pointer;
}

.public-nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
}

.public-nav-link {
  color: var(--public-muted);
  text-decoration: none;
  font-size: 15px;
  transition: color 150ms ease;
  position: relative;
}

.public-nav-link:hover {
  color: var(--public-primary);
}

.public-nav-link.active {
  color: var(--public-text);
  font-weight: 600;
}

.public-nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--public-primary);
  transform: scaleX(0);
  transition: transform 150ms ease;
}

.public-nav-link:hover::after,
.public-nav-link.active::after {
  transform: scaleX(1);
}

.public-nav-ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 16px;
}

.public-theme-toggle {
  background: none;
  border: 1px solid var(--public-border);
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--public-text);
  transition: all 150ms ease;
  width: 36px;
  height: 36px;
}

.public-theme-toggle:hover {
  background: var(--public-bg-hover);
  border-color: var(--public-primary);
}

.public-theme-toggle:focus {
  outline: 2px solid var(--public-primary);
  outline-offset: 2px;
}

.public-theme-toggle svg {
  width: 18px;
  height: 18px;
  transition: opacity 150ms ease, transform 150ms ease;
}

.public-theme-toggle .theme-icon-sun {
  display: block;
}

.public-theme-toggle .theme-icon-moon {
  display: none;
}

[data-theme="dark"] .public-theme-toggle .theme-icon-sun {
  display: none;
}

[data-theme="dark"] .public-theme-toggle .theme-icon-moon {
  display: block;
}

/* Public Navigation Dropdown */
.public-nav-dropdown {
  position: relative;
}

.public-nav-dropdown-toggle {
  background: none;
  border: none;
  color: var(--public-muted);
  text-decoration: none;
  font-size: 15px;
  transition: color 150ms ease;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-family: inherit;
}

.public-nav-dropdown-toggle:hover {
  color: var(--public-text);
}

.public-nav-dropdown-toggle::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--public-primary);
  transform: scaleX(0);
  transition: transform 150ms ease;
}

.public-nav-dropdown-toggle:hover::after,
.public-nav-dropdown[data-expanded="true"] .public-nav-dropdown-toggle::after {
  transform: scaleX(1);
}

.dropdown-chevron {
  transition: transform 150ms ease;
  opacity: 0.7;
}

.public-nav-dropdown[data-expanded="true"] .dropdown-chevron {
  transform: rotate(180deg);
}

.public-nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--public-surface);
  border: 1px solid var(--public-border);
  border-radius: 8px;
  padding: 8px;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 1000;
}

[data-theme="light"] .public-nav-dropdown-menu {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.public-nav-dropdown[data-expanded="true"] .public-nav-dropdown-menu {
  display: flex;
}

.public-nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--public-text);
  text-decoration: none;
  font-size: 14px;
  border-radius: 6px;
  transition: background-color 150ms ease, color 150ms ease;
}

.public-nav-dropdown-item:hover {
  background: var(--public-surface-alt);
  color: var(--public-primary);
}

.public-nav-dropdown-item .dropdown-icon {
  flex-shrink: 0;
  opacity: 0.8;
}

.public-nav-dropdown-item:hover .dropdown-icon {
  opacity: 1;
}

/* Public Pages */
.public-page {
  min-height: calc(100vh - 72px);
}

.public-page-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.public-page-header {
  text-align: center;
  padding: 80px 0 60px;
}

.public-page-title {
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--public-text), var(--public-muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.public-page-subtitle {
  font-size: 20px;
  color: var(--public-muted);
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Sections */
.section {
  padding: 80px 0;
}

/* Glossary Page Styles */
.glossary-header {
  display: block;
  padding: 60px 0 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.glossary-header-content {
  max-width: 720px;
}

.glossary-title {
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--public-text), var(--public-muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glossary-subtitle {
  font-size: 18px;
  color: var(--public-muted);
  margin: 0 0 24px;
  line-height: 1.6;
}

.glossary-search-container {
  position: relative;
  max-width: 500px;
}

.glossary-search-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--public-muted);
  pointer-events: none;
  z-index: 2;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.glossary-search-input {
  width: 100%;
  padding: 14px 48px 14px 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: right 0 center !important;
  color: var(--public-text);
  font-size: 16px;
  transition: border-color 0.2s ease, background 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  text-indent: 0;
  box-sizing: border-box;
}

.glossary-search-input::-webkit-search-decoration,
.glossary-search-input::-webkit-search-cancel-button,
.glossary-search-input::-webkit-search-results-button,
.glossary-search-input::-webkit-search-results-decoration {
  display: none;
  -webkit-appearance: none;
}

.glossary-search-input::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  position: absolute !important;
  right: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
}

.glossary-search-input::-ms-clear,
.glossary-search-input::-ms-reveal {
  display: none !important;
  width: 0;
  height: 0;
}

/* Remove any dropdown indicators */
.glossary-search-input::-webkit-list-button {
  display: none !important;
  -webkit-appearance: none;
}

.glossary-search-input[list]::-webkit-calendar-picker-indicator {
  display: none !important;
  opacity: 0;
}

/* Hide any autocomplete dropdown arrows */
.glossary-search-input::-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.05) inset;
}

/* Additional rules to hide dropdown indicators */
input.glossary-search-input::-webkit-credentials-auto-fill-button {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: -9999px;
}

/* Ensure no pseudo-elements create dropdown arrows */
.glossary-search-input::before,
.glossary-search-input::after {
  display: none !important;
  content: none !important;
}

.glossary-search-input::-webkit-input-placeholder {
  padding-left: 0;
}

.glossary-search-input::placeholder {
  padding-left: 0;
  margin-left: 0;
}

.glossary-search-input:focus {
  outline: none;
  border-color: var(--public-primary);
  background: rgba(255, 255, 255, 0.08);
}

.glossary-filters {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.glossary-tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.glossary-tag-pill {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--public-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.glossary-tag-pill:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
}

.glossary-tag-pill.active {
  border-color: var(--public-primary);
  background: rgba(59, 130, 246, 0.16);
}

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

.glossary-match-toggle {
  display: flex;
  gap: 8px;
  align-items: center;
}

.glossary-match-btn,
.glossary-clear-filters {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--public-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.glossary-match-btn:hover,
.glossary-clear-filters:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
}

.glossary-clear-filters:disabled,
.glossary-clear-filters[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.glossary-match-btn.active {
  border-color: var(--public-primary);
  background: rgba(59, 130, 246, 0.16);
}

[data-theme="light"] .glossary-tag-pill,
[data-theme="light"] .glossary-match-btn,
[data-theme="light"] .glossary-clear-filters {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .glossary-tag-pill:hover,
[data-theme="light"] .glossary-match-btn:hover,
[data-theme="light"] .glossary-clear-filters:hover {
  border-color: rgba(0, 0, 0, 0.22);
  background: rgba(255, 255, 255, 1);
}

.glossary-search-input::placeholder {
  color: var(--public-muted);
}

[data-theme="light"] .glossary-search-input {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .glossary-search-input:focus {
  border-color: var(--public-primary);
  background: rgba(255, 255, 255, 1);
}

.glossary-header-illustration {
  flex-shrink: 0;
  width: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glossary-illustration-placeholder {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--public-muted);
  opacity: 0.4;
}

.glossary-alphabet-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 40px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

[data-theme="light"] .glossary-alphabet-nav {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

.glossary-alphabet-btn {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--public-text);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  min-width: 40px;
  text-align: center;
}

.glossary-alphabet-btn:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--public-primary);
  color: var(--public-primary);
}

.glossary-alphabet-btn.active {
  background: var(--public-primary-strong);
  border-color: var(--public-primary-strong);
  color: white;
}
}

.glossary-alphabet-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

[data-theme="light"] .glossary-alphabet-btn {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .glossary-alphabet-btn:hover:not(.disabled) {
  background: rgba(0, 0, 0, 0.05);
  border-color: var(--public-primary);
}

.glossary-content {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 80px;
}

.glossary-back-to-top {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: var(--public-primary-strong) !important;
  color: var(--primaryText) !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
  z-index: 99999 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.glossary-back-to-top[hidden] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.glossary-back-to-top:not([hidden]),
.glossary-back-to-top.show {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.glossary-back-to-top:hover {
  background: var(--public-primary);
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.glossary-back-to-top::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 100000;
}

.glossary-back-to-top::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 100000;
}

.glossary-back-to-top:hover::before,
.glossary-back-to-top:hover::after {
  opacity: 1;
  visibility: visible;
}

.glossary-back-to-top:active {
  transform: translateY(-2px);
}

.glossary-back-to-top svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 768px) {
  .glossary-back-to-top {
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
  }
  
  .glossary-back-to-top svg {
    width: 18px;
    height: 18px;
  }
}

.glossary-letter-section {
  margin-bottom: 60px;
  scroll-margin-top: 100px;
}

/* Keyword Generator Styles */
.keyword-generator-container {
  max-width: 1120px;
  margin: 0 auto;
}

.keyword-generator-search-section {
  margin-bottom: 20px;
}

.keyword-retailer-tabs {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  max-width: none;
}

.keyword-retailer-tab {
  min-width: 120px;
  padding: 10px 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--public-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.keyword-retailer-tab:hover {
  color: var(--public-text);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

.keyword-retailer-tab.active {
  color: var(--public-text);
  border-color: var(--public-primary);
  background: rgba(255, 255, 255, 0.1);
}

.keyword-search-container {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: none;
  margin: 0 0 12px;
  padding: 0 12px 0 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
  cursor: text;
}

.keyword-search-container:focus-within {
  border-color: var(--public-primary);
  background: rgba(255, 255, 255, 0.08);
}

.keyword-search-icon {
  position: static;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: var(--public-muted);
  pointer-events: none;
  transform: none;
}

/* Override global `input:not(...)` padding — icon is outside the text field. */
#page-keyword-generator #keyword-search-input.keyword-search-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 14px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  background-color: transparent;
  background-image: none;
  color: var(--public-text);
  font-size: 16px;
  line-height: 1.4;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}

#page-keyword-generator #keyword-search-input.keyword-search-input:focus {
  outline: none;
  border: none;
  box-shadow: none;
  background: transparent;
  background-color: transparent;
}

#page-keyword-generator #keyword-search-input.keyword-search-input::placeholder {
  color: var(--public-muted);
  opacity: 1;
}

.keyword-clear-btn {
  position: static;
  flex: 0 0 auto;
  transform: none;
  background: transparent;
  border: none;
  color: var(--public-muted);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}

.keyword-clear-btn:hover {
  color: var(--public-text);
  background: rgba(255, 255, 255, 0.1);
}

.keyword-clear-btn[hidden] {
  display: none !important;
}

.keyword-loading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 0;
  color: var(--public-muted);
  font-size: 14px;
}

.keyword-loading[hidden] {
  display: none !important;
}

.loading-spinner-small {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--public-primary);
  animation: spin 800ms linear infinite;
}

[data-theme="light"] .loading-spinner-small {
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--public-primary);
}

.keyword-error {
  padding: 12px 14px;
  background: var(--dangerBg);
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 8px;
  color: #ef4444;
  font-size: 14px;
  text-align: left;
  margin-top: 8px;
}

.keyword-action-feedback {
  max-width: none;
  margin: 8px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.08);
  color: #22c55e;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

.keyword-action-feedback.warning {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.keyword-action-feedback[hidden] {
  display: none !important;
}

.keyword-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 20px;
  align-items: stretch;
}

.keyword-workspace.results-hidden {
  grid-template-columns: minmax(0, 1fr);
}

.keyword-results-pane {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  min-height: 360px;
}

.keyword-results-pane[hidden] {
  display: none !important;
}

.keyword-results-section {
  margin-top: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.keyword-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 16px;
}

.keyword-results-count {
  font-size: 14px;
  color: var(--public-muted);
  font-weight: 500;
}

.keyword-results-count span {
  color: var(--public-primary);
  font-weight: 600;
}

.keyword-selection-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.keyword-suggestions-list {
  display: grid;
  gap: 8px;
  flex: 1;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 8px;
}

.keyword-suggestion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.keyword-suggestion-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--public-primary);
}

.keyword-suggestion-item.added {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.08);
}

.keyword-suggestion-label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  cursor: pointer;
}

.keyword-suggestion-checkbox {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--public-primary);
}

.keyword-suggestion-checkbox:disabled {
  cursor: not-allowed;
}

.keyword-suggestion-text {
  color: var(--public-text);
  font-size: 15px;
  line-height: 1.5;
}

.keyword-suggestion-status {
  flex: 0 0 auto;
  color: var(--public-muted);
  font-size: 12px;
  font-weight: 600;
}

.keyword-suggestion-item.added .keyword-suggestion-status {
  color: #22c55e;
}

.keyword-saved-section {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  position: sticky;
  top: 96px;
  min-height: 360px;
}

.keyword-saved-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.keyword-saved-title {
  margin: 0 0 6px;
  color: var(--public-text);
  font-size: 20px;
}

.keyword-saved-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.keyword-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--public-muted);
  cursor: pointer;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.keyword-icon-btn:hover:not(:disabled) {
  color: var(--public-text);
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
}

.keyword-icon-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.keyword-icon-btn-label {
  line-height: 1;
}

.keyword-clear-list-btn {
  border: none;
  background: transparent;
  color: var(--public-muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 8px;
  white-space: nowrap;
  border-radius: 8px;
}

.keyword-clear-list-btn:hover:not(:disabled) {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

.keyword-clear-list-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.keyword-saved-subtitle,
.keyword-saved-empty {
  margin: 0;
  color: var(--public-muted);
  font-size: 14px;
  line-height: 1.45;
}

.keyword-saved-empty {
  margin-top: 4px;
  margin-bottom: 12px;
}

.keyword-saved-subtitle span {
  color: var(--public-primary);
  font-weight: 700;
}

.keyword-saved-list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  flex: 1;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 0;
}

.keyword-saved-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.keyword-saved-text {
  color: var(--public-text);
  font-size: 14px;
}

.keyword-saved-retailer {
  color: var(--public-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.keyword-saved-remove {
  border: none;
  background: transparent;
  color: var(--public-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  padding: 0;
}

.keyword-saved-remove:hover {
  color: #ef4444;
}

/* Light theme adjustments */
[data-theme="light"] .keyword-retailer-tab {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.8);
  color: var(--public-muted);
}

[data-theme="light"] .keyword-retailer-tab:hover {
  color: var(--public-text);
  border-color: rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 1);
}

[data-theme="light"] .keyword-retailer-tab.active {
  color: var(--public-text);
  border-color: var(--public-primary);
  background: rgba(255, 255, 255, 1);
}

[data-theme="light"] .keyword-search-container {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .keyword-search-container:focus-within {
  border-color: var(--public-primary);
  background: rgba(255, 255, 255, 1);
}

[data-theme="light"] #page-keyword-generator #keyword-search-input.keyword-search-input,
[data-theme="light"] #page-keyword-generator #keyword-search-input.keyword-search-input:focus {
  background: transparent;
  background-color: transparent;
  border: none;
}

[data-theme="light"] .keyword-results-pane {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.75);
}

[data-theme="light"] .keyword-suggestion-item {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .keyword-suggestion-item:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--public-primary);
}

[data-theme="light"] .keyword-suggestion-item.added {
  border-color: rgba(22, 163, 74, 0.35);
  background: rgba(34, 197, 94, 0.12);
}

[data-theme="light"] .keyword-saved-section {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.75);
}

[data-theme="light"] .keyword-saved-item {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .keyword-icon-btn {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .keyword-icon-btn:hover:not(:disabled) {
  border-color: rgba(0, 0, 0, 0.22);
  background: rgba(255, 255, 255, 1);
}

[data-theme="light"] .keyword-action-feedback {
  background: rgba(34, 197, 94, 0.12);
}

[data-theme="light"] .keyword-action-feedback.warning {
  background: rgba(245, 158, 11, 0.14);
}

/* Responsive adjustments */
@media (max-width: 960px) {
  .keyword-workspace {
    grid-template-columns: 1fr;
  }

  .keyword-results-pane,
  .keyword-saved-section {
    min-height: 0;
  }

  .keyword-saved-section {
    position: static;
  }

  .keyword-saved-list {
    max-height: 260px;
  }
}

@media (max-width: 768px) {
  .keyword-retailer-tabs {
    width: 100%;
  }

  .keyword-retailer-tab {
    flex: 1;
    min-width: 0;
  }

  .keyword-results-pane,
  .keyword-saved-section {
    padding: 18px;
  }

  .keyword-results-header,
  .keyword-saved-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .keyword-saved-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .keyword-selection-actions {
    width: 100%;
  }

  .keyword-selection-actions .btn {
    flex: 1;
    min-width: 0;
  }

  .keyword-suggestion-item {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .keyword-suggestions-list {
    max-height: 360px;
  }
}

.glossary-letter-header {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 24px;
  color: var(--public-text);
  letter-spacing: -0.02em;
}

.glossary-terms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.glossary-term {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.2s ease;
  position: relative;
}

.glossary-term:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

[data-theme="light"] .glossary-term {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .glossary-term:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.glossary-term-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 12px;
}

.glossary-term-tag {
  padding: 4px 8px;
  background: var(--public-primary-strong);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
  white-space: nowrap;
}

.glossary-term-name {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--public-text);
  line-height: 1.3;
  padding-right: 0;
}

.glossary-term-definition {
  font-size: 15px;
  line-height: 1.6;
  color: var(--public-muted);
  margin: 0 0 12px;
}

.glossary-term-formula {
  font-size: 14px;
  line-height: 1.6;
  color: var(--public-text);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.glossary-term-formula strong {
  color: var(--public-primary);
  font-weight: 600;
}

[data-theme="light"] .glossary-term-formula {
  border-top-color: rgba(0, 0, 0, 0.1);
}

/* Responsive Design for Glossary */
@media (max-width: 1024px) {
  .glossary-header {
    flex-direction: column;
    gap: 30px;
  }

  .glossary-header-illustration {
    width: 100%;
    max-width: 400px;
  }

  .glossary-terms-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .glossary-title {
    font-size: 36px;
  }

  .glossary-subtitle {
    font-size: 16px;
  }

  .glossary-terms-grid {
    grid-template-columns: 1fr;
  }

  .glossary-alphabet-nav {
    gap: 6px;
  }

  .glossary-alphabet-btn {
    padding: 6px 10px;
    font-size: 13px;
    min-width: 36px;
  }

  .glossary-letter-header {
    font-size: 28px;
  }

  .glossary-term-name {
    padding-right: 0;
  }

  .glossary-term-tag {
    font-size: 9px;
    padding: 3px 6px;
  }
}

.section-alt {
  background: var(--public-surface);
}

.section-cta {
  background: linear-gradient(135deg, rgba(var(--brand-highlight-rgb), 0.1), rgba(0, 130, 200, 0.1));
  border-top: 1px solid var(--public-border);
  border-bottom: 1px solid var(--public-border);
}

.section-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-title {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 16px;
  text-align: center;
  letter-spacing: -0.02em;
}

.section-subtitle {
  font-size: 18px;
  color: var(--public-muted);
  text-align: center;
  margin: 0 0 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero Section */
.hero-section {
  padding: 120px 0 120px;
  overflow: visible;
  background: 
    radial-gradient(1200px 800px at 10% -10%, rgba(var(--brand-highlight-rgb), 0.15), transparent 60%),
    radial-gradient(900px 600px at 95% 0%, rgba(0, 130, 200, 0.12), transparent 55%),
    var(--public-bg);
  border-bottom: 1px solid var(--public-border);
}

.hero-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
  overflow: visible;
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 64px;
  font-weight: 800;
  margin: 0 0 24px;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.hero-eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--public-primary);
}

.hero-title-static {
  color: var(--public-text);
  animation: hero-static-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-title-typed {
  position: relative;
  display: inline-block;
  min-width: min(100%, 920px);
  line-height: 1.15;
  animation: hero-typed-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.hero-title-typed-sizer {
  visibility: hidden;
  display: block;
  min-height: 1.15em;
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.hero-title-typed-line {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.hero-title-typed-text {
  color: var(--public-primary);
}

.hero-title-cursor {
  display: inline-block;
  width: 3px;
  height: 0.82em;
  margin-left: 5px;
  border-radius: 2px;
  background: var(--public-primary);
  flex-shrink: 0;
  transform: translateY(0.06em);
  animation: hero-cursor-blink 1.05s step-end infinite;
}

.hero-title-cursor.is-typing {
  animation: none;
  opacity: 1;
}

.hero-title-cursor.is-hidden {
  opacity: 0;
}

@keyframes hero-static-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-typed-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title-static,
  .hero-title-typed {
    animation: none;
  }

  .hero-title-cursor {
    display: none;
  }
}

.hero-subtitle {
  font-size: 22px;
  color: var(--public-muted);
  margin: 0 auto 40px;
  line-height: 1.6;
  max-width: 760px;
}

.hero-section .hero-subtitle + .hero-tagline {
  margin-top: -20px;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

/* Hero product showcase (Price Pulse + Review Radar) */
.hero-showcase {
  --hero-mock-surface: var(--public-surface);
  --hero-mock-surface-alt: rgba(255, 255, 255, 0.06);
  --hero-mock-border: var(--public-border);
  --hero-mock-shadow: var(--public-shadow-lg);
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 56px;
  padding: 0 8px 48px;
}

[data-theme="light"] .hero-showcase {
  --hero-mock-surface-alt: rgba(0, 0, 0, 0.04);
}

.hero-showcase-glow {
  position: absolute;
  inset: 10% 5% 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, rgba(var(--public-primary-rgb), 0.14), transparent 70%),
    radial-gradient(ellipse 40% 35% at 15% 60%, rgba(0, 130, 200, 0.1), transparent 70%),
    radial-gradient(ellipse 35% 30% at 88% 55%, rgba(var(--public-primary-rgb), 0.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Real Review Radar screenshot gallery (kept unused; landing uses HTML mocks) */
.hero-product-shot { display: none; }

.hero-showcase-stage {
  position: relative;
  min-height: 560px;
  z-index: 1;
  margin-bottom: 24px;
}

.hero-showcase-main,
.hero-showcase-card {
  position: absolute;
  border-radius: 16px;
  border: 1px solid var(--hero-mock-border);
  background: var(--hero-mock-surface);
  box-shadow: var(--hero-mock-shadow);
  backdrop-filter: blur(12px);
}

.hero-showcase-main {
  left: 50%;
  top: 48px;
  transform: translateX(-50%);
  width: min(92%, 760px);
  z-index: 3;
}

.hero-showcase-card--kpi {
  left: 0;
  top: 24px;
  width: 210px;
  padding: 14px 16px;
  z-index: 4;
  animation: hero-float 6s ease-in-out infinite;
}

.hero-showcase-card--rr-sentiment {
  left: -8px;
  bottom: 36px;
  width: 230px;
  padding: 16px;
  z-index: 4;
  animation: hero-float 7s ease-in-out 0.8s infinite;
}

.hero-showcase-card--rr-themes {
  right: -8px;
  top: 72px;
  width: 220px;
  padding: 16px;
  z-index: 4;
  animation: hero-float 6.5s ease-in-out 0.4s infinite;
}

.hero-showcase-card--mobile {
  right: 12px;
  bottom: 20px;
  width: 148px;
  padding: 10px;
  z-index: 5;
  background: transparent;
  border: none;
  box-shadow: none;
  animation: hero-float 5.5s ease-in-out 1.2s infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .hero-showcase-card--kpi,
  .hero-showcase-card--rr-sentiment,
  .hero-showcase-card--rr-themes,
  .hero-showcase-card--mobile {
    animation: none;
  }
}

/* Mock window chrome */
.hero-mock-window {
  overflow: hidden;
  border-radius: 15px;
}

.hero-mock-window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--hero-mock-border);
}

[data-theme="light"] .hero-mock-window-bar {
  background: rgba(0, 0, 0, 0.03);
}

.hero-mock-window-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

[data-theme="light"] .hero-mock-window-dot {
  background: rgba(0, 0, 0, 0.12);
}

.hero-mock-window-dot:nth-child(1) { background: #ff5f57; opacity: 0.85; }
.hero-mock-window-dot:nth-child(2) { background: #febc2e; opacity: 0.85; }
.hero-mock-window-dot:nth-child(3) { background: #28c840; opacity: 0.85; }

.hero-mock-window-title {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--public-muted);
  letter-spacing: 0.01em;
}

.hero-mock-window-body {
  padding: 16px 18px 18px;
}

.hero-mock-rr-chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--public-border);
}

.hero-mock-rr-crumb {
  font-size: 11px;
  font-weight: 600;
  color: var(--public-muted);
}

.hero-mock-rr-crumb span {
  margin: 0 4px;
  opacity: 0.6;
}

.hero-mock-rr-periods {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.hero-mock-rr-periods span {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--public-muted);
  background: var(--hero-mock-surface-alt);
}

.hero-mock-rr-period--active {
  color: var(--public-primary) !important;
  background: rgba(var(--public-primary-rgb), 0.12) !important;
}

.hero-mock-situation {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--hero-mock-surface-alt);
  border: 1px solid var(--public-border);
}

.hero-mock-situation-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--public-muted);
  margin-bottom: 4px;
}

.hero-mock-situation-text {
  font-size: 12px;
  line-height: 1.4;
  color: var(--public-text);
  margin-bottom: 8px;
}

.hero-mock-situation-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hero-mock-situation-chips span {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(var(--public-primary-rgb), 0.1);
  color: var(--public-primary);
}

.hero-mock-metric-delta {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--public-success);
}

.hero-mock-badge--risk {
  background: rgba(220, 60, 80, 0.2);
  color: #ff7a8a;
}

.hero-mock-risk-drivers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.hero-mock-risk-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--public-muted);
}

.hero-mock-risk-row strong {
  color: #ff7a8a;
  font-weight: 700;
}

.hero-mock-product-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--hero-mock-surface-alt);
  border: 1px solid var(--public-border);
}

.hero-mock-product-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02)),
    radial-gradient(circle at 40% 35%, #f5f0e6 0 28%, transparent 29%),
    #2a2a2e;
}

.hero-mock-product-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--public-text);
  line-height: 1.3;
}

.hero-mock-product-sub {
  font-size: 11px;
  color: var(--public-muted);
  margin-top: 2px;
}

.hero-mock-at-risk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(180, 40, 55, 0.18);
  border: 1px solid rgba(220, 60, 80, 0.35);
}

.hero-mock-at-risk-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ff7a8a;
  background: rgba(220, 60, 80, 0.25);
  padding: 3px 8px;
  border-radius: 999px;
}

.hero-mock-at-risk-text {
  font-size: 11px;
  color: var(--public-text);
  line-height: 1.35;
  flex: 1 1 180px;
}

.hero-mock-action-card {
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 3px solid #e05264;
  background: var(--hero-mock-surface-alt);
}

.hero-mock-action-crit {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ff7a8a;
  margin-bottom: 4px;
}

.hero-mock-action-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--public-text);
  margin-bottom: 4px;
}

.hero-mock-action-desc {
  font-size: 11px;
  line-height: 1.4;
  color: var(--public-muted);
  margin-bottom: 8px;
}

.hero-mock-action-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hero-mock-action-tags span {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(var(--public-primary-rgb), 0.12);
  color: var(--public-primary);
}

.hero-mock-aspect-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-mock-aspect-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid var(--public-border);
  background: var(--hero-mock-surface-alt);
  color: var(--public-muted);
}

.hero-mock-aspect-row strong {
  font-weight: 700;
}

.hero-mock-aspect-row--neg {
  border-color: rgba(220, 60, 80, 0.35);
}

.hero-mock-aspect-row--neg strong {
  color: #ff7a8a;
}

.hero-mock-aspect-row--pos {
  border-color: rgba(60, 180, 110, 0.35);
}

.hero-mock-aspect-row--pos strong {
  color: var(--public-success);
}

.hero-mock-phone-metric-value.crit {
  font-size: 14px;
  color: #ff7a8a;
}

.fc-mock-action-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--public-text);
  margin: 0 0 10px;
  line-height: 1.35;
}

.hero-mock-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.hero-mock-tab {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--public-muted);
  background: var(--hero-mock-surface-alt);
  border: 1px solid transparent;
}

.hero-mock-tab--active {
  color: var(--public-primary);
  background: rgba(var(--public-primary-rgb), 0.12);
  border-color: rgba(var(--public-primary-rgb), 0.25);
}

.hero-mock-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.hero-mock-metric {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--hero-mock-surface-alt);
  border: 1px solid var(--hero-mock-border);
  text-align: left;
}

.hero-mock-metric-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--public-muted);
  margin-bottom: 4px;
}

.hero-mock-metric-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--public-text);
  line-height: 1.1;
}

.hero-mock-metric-value--warn {
  color: var(--public-warning);
}

.hero-mock-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.hero-mock-panel {
  padding: 12px;
  border-radius: 10px;
  background: var(--hero-mock-surface-alt);
  border: 1px solid var(--hero-mock-border);
  min-height: 120px;
}

.hero-mock-panel--wide {
  grid-column: 1 / -1;
  min-height: auto;
}

.hero-mock-panel-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--public-muted);
  margin-bottom: 10px;
}

.hero-mock-bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  height: 72px;
  padding-top: 4px;
}

.hero-mock-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}

.hero-mock-bar {
  display: block;
  width: 100%;
  max-width: 28px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--public-primary), rgba(var(--public-primary-rgb), 0.55));
}

.hero-mock-bar-label {
  font-size: 9px;
  color: var(--public-muted);
  white-space: nowrap;
}

.hero-mock-line-chart {
  display: block;
  width: 100%;
  height: 72px;
}

.hero-mock-chart-legend {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  font-size: 10px;
  color: var(--public-muted);
}

.hero-mock-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.hero-mock-legend-dot--primary { background: var(--public-primary); }
.hero-mock-legend-dot--warn { background: var(--public-warning); }

.hero-mock-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-mock-table-row {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr 0.8fr;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--public-text);
  padding: 6px 8px;
  border-radius: 6px;
}

.hero-mock-table-row:not(.hero-mock-table-head) {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="light"] .hero-mock-table-row:not(.hero-mock-table-head) {
  background: rgba(0, 0, 0, 0.02);
}

.hero-mock-table-head {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--public-muted);
  padding-top: 0;
}

.hero-mock-table-gap {
  font-weight: 600;
  color: var(--public-warning);
}

.hero-mock-table-badge {
  justify-self: start;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.15);
  color: var(--public-warning);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.hero-mock-table-badge--ok {
  background: rgba(16, 185, 129, 0.12);
  color: var(--public-success);
  border-color: rgba(16, 185, 129, 0.28);
}

/* Review Radar floating cards */
.hero-mock-card-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.hero-mock-badge {
  align-self: flex-start;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--public-primary);
  background: rgba(var(--public-primary-rgb), 0.12);
  border: 1px solid rgba(var(--public-primary-rgb), 0.22);
}

.hero-mock-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--public-text);
}

.hero-mock-insight-hero {
  text-align: center;
  padding: 12px;
  border-radius: 10px;
  background: rgba(var(--public-primary-rgb), 0.08);
  border: 1px solid rgba(var(--public-primary-rgb), 0.18);
  margin-bottom: 10px;
}

.hero-mock-insight-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--public-primary);
  line-height: 1;
}

.hero-mock-insight-label {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--public-muted);
}

.hero-mock-insight-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.hero-mock-insight-stat {
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  background: var(--hero-mock-surface-alt);
  border: 1px solid var(--hero-mock-border);
}

.hero-mock-insight-stat-value {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--public-text);
}

.hero-mock-insight-stat-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--public-muted);
  margin-top: 2px;
}

.hero-mock-sentiment-bar {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--hero-mock-surface-alt);
}

.hero-mock-sentiment-seg--pos { background: var(--public-success); }
.hero-mock-sentiment-seg--neu { background: rgba(255, 255, 255, 0.2); }
.hero-mock-sentiment-seg--neg { background: #ef4444; }

[data-theme="light"] .hero-mock-sentiment-seg--neu {
  background: rgba(0, 0, 0, 0.12);
}

.hero-mock-donut-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 12px;
}

.hero-mock-donut {
  width: 100%;
  height: 100%;
}

.hero-mock-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-mock-donut-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--public-text);
  line-height: 1;
}

.hero-mock-donut-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--public-muted);
  margin-top: 2px;
}

.hero-mock-theme-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero-mock-theme-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--public-muted);
}

.hero-mock-theme-row strong {
  margin-left: auto;
  color: var(--public-text);
}

.hero-mock-theme-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hero-mock-theme-dot--primary { background: var(--public-primary); }
.hero-mock-theme-dot--success { background: var(--public-success); }
.hero-mock-theme-dot--warn { background: var(--public-warning); }

/* KPI list card */
.hero-mock-kpi-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-mock-kpi-row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.hero-mock-kpi-icon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: rgba(var(--public-primary-rgb), 0.15);
  border: 1px solid rgba(var(--public-primary-rgb), 0.25);
}

.hero-mock-kpi-icon--coverage {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.25);
}

.hero-mock-kpi-icon--sentiment {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.25);
}

.hero-mock-kpi-label {
  color: var(--public-text);
  font-weight: 600;
}

.hero-mock-kpi-trend {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
}

.hero-mock-kpi-trend--up {
  color: var(--public-success);
  background: rgba(16, 185, 129, 0.12);
}

.hero-mock-kpi-trend--down {
  color: var(--public-warning);
  background: rgba(245, 158, 11, 0.12);
}

/* Mobile mock */
.hero-mock-phone {
  border-radius: 22px;
  border: 2px solid var(--hero-mock-border);
  background: var(--hero-mock-surface);
  box-shadow: var(--hero-mock-shadow);
  overflow: hidden;
  padding: 8px 8px 12px;
}

.hero-mock-phone-notch {
  width: 40%;
  height: 4px;
  border-radius: 999px;
  background: var(--hero-mock-border);
  margin: 0 auto 8px;
}

.hero-mock-phone-screen {
  border-radius: 14px;
  background: var(--hero-mock-surface-alt);
  border: 1px solid var(--hero-mock-border);
  padding: 10px;
}

.hero-mock-phone-header {
  font-size: 10px;
  font-weight: 700;
  color: var(--public-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.hero-mock-phone-metric-value {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--public-success);
  line-height: 1;
}

.hero-mock-phone-metric-label {
  display: block;
  font-size: 9px;
  color: var(--public-muted);
  margin-top: 2px;
}

.hero-mock-phone-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 36px;
  margin: 10px 0;
}

.hero-mock-phone-chart span {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--public-primary), rgba(var(--public-primary-rgb), 0.4));
}

.hero-mock-phone-flag {
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  padding: 5px 6px;
  border-radius: 6px;
  color: var(--public-warning);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
}

@media (max-width: 960px) {
  .hero-showcase-stage {
    min-height: 420px;
  }

  .hero-showcase-card--kpi,
  .hero-showcase-card--rr-sentiment {
    display: none;
  }

  .hero-showcase-card--rr-themes {
    right: 0;
    top: auto;
    bottom: 0;
    width: 180px;
    transform: scale(0.92);
    transform-origin: bottom right;
  }

  .hero-showcase-card--mobile {
    display: none;
  }

  .hero-showcase-main {
    top: 0;
    width: 100%;
  }

  .hero-mock-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-mock-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero-ctas {
    margin-bottom: 32px;
  }

  .hero-showcase-stage {
    min-height: 340px;
  }

  .hero-showcase-card--rr-themes,
  .hero-showcase-card--mobile {
    display: none;
  }

  .hero-showcase-main {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
  }

  .hero-mock-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-mock-panel:not(.hero-mock-panel--wide) {
    display: none;
  }
}

.cta-button {
  background: rgba(var(--public-primary-rgb), 0.14);
  color: var(--public-primary);
  border: 1.5px solid rgba(var(--public-primary-rgb), 0.55);
}

.cta-button:hover {
  background: rgba(var(--public-primary-rgb), 0.24);
  border-color: var(--public-primary);
  color: var(--public-primary-hover);
}

[data-theme="light"] .cta-button {
  background: rgba(var(--public-primary-rgb), 0.12);
  color: var(--public-primary-strong);
  border-color: rgba(var(--public-primary-rgb), 0.45);
}

[data-theme="light"] .cta-button:hover {
  background: rgba(var(--public-primary-rgb), 0.2);
  border-color: var(--public-primary);
  color: var(--public-primary-strong);
}

/* Feature Grid */
.section-features-deliver {
  padding-top: 96px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
  align-items: stretch;
}

.feature-card {
  --fc-mock-surface: var(--public-bg);
  --fc-mock-surface-alt: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  min-height: 460px;
  padding: 0;
  background: var(--public-bg);
  border: 1px solid var(--public-border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

[data-theme="light"] .feature-card {
  --fc-mock-surface-alt: rgba(0, 0, 0, 0.04);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--public-shadow);
  border-color: rgba(var(--public-primary-rgb), 0.35);
}

.feature-card-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 22px 24px;
  text-align: left;
}

.feature-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--public-text);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.feature-description {
  font-size: 14px;
  color: var(--public-muted);
  margin: 0;
  line-height: 1.55;
  flex: 1 1 auto;
}

.feature-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--public-text);
  text-decoration: none;
  transition: color 150ms ease, gap 150ms ease;
}

.feature-link:hover {
  color: var(--public-primary);
  gap: 8px;
}

.feature-card-visual {
  flex: 0 0 210px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--public-border);
  background:
    radial-gradient(ellipse 80% 70% at 20% 0%, rgba(var(--public-primary-rgb), 0.12), transparent 60%),
    var(--fc-mock-surface-alt);
}

.feature-card-visual .fc-mock-window {
  position: absolute;
  inset: 12px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--public-border);
  border-radius: 12px;
  background: var(--fc-mock-surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.feature-card-visual .fc-mock-body {
  padding: 14px;
  gap: 10px;
  justify-content: center;
}

/* Shared mock body */
.fc-mock-body {
  flex: 1 1 auto;
  position: relative;
  padding: 12px 14px 14px;
  overflow: hidden;
}

.fc-mock-body--flush {
  padding: 0;
}

.fc-mock-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--public-primary);
  background: rgba(var(--public-primary-rgb), 0.12);
  border: 1px solid rgba(var(--public-primary-rgb), 0.22);
  margin-bottom: 8px;
}

.fc-mock-badge--warn {
  color: var(--public-warning);
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.28);
}

.fc-mock-metrics-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.fc-mock-mini-metric {
  flex: 1;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--fc-mock-surface-alt);
  border: 1px solid var(--public-border);
}

.fc-mock-mini-metric span {
  display: block;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--public-muted);
}

.fc-mock-mini-metric strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--public-text);
  margin-top: 2px;
}

.fc-mock-trend {
  display: block;
  width: 100%;
  height: 56px;
}

.fc-mock-tooltip {
  position: absolute;
  left: 58%;
  top: 52%;
  transform: translate(-50%, -100%);
  font-size: 8px;
  font-weight: 600;
  padding: 4px 7px;
  border-radius: 6px;
  white-space: nowrap;
  color: #fff;
  background: rgba(10, 10, 12, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

[data-theme="light"] .fc-mock-tooltip {
  color: var(--public-text);
  background: #fff;
  border-color: var(--public-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.fc-mock-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: inherit;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

[data-theme="light"] .fc-mock-tooltip::after {
  border-color: var(--public-border);
  background: #fff;
}

.fc-mock-action {
  margin-top: 8px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-radius: 8px;
  text-align: center;
  color: var(--public-primary);
  background: rgba(var(--public-primary-rgb), 0.1);
  border: 1.5px solid rgba(var(--public-primary-rgb), 0.35);
}

/* Map visual */
.fc-mock-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fc-mock-map-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--public-primary-rgb), 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--public-primary-rgb), 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

.fc-mock-map-radius {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px dashed rgba(var(--public-primary-rgb), 0.35);
  background: rgba(var(--public-primary-rgb), 0.06);
}

.fc-mock-pin {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.fc-mock-pin--undercut {
  background: var(--public-warning);
}

.fc-mock-pin--ok {
  background: var(--public-success);
}

.fc-mock-map-legend {
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 8px;
  font-weight: 600;
  color: var(--public-muted);
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
}

[data-theme="light"] .fc-mock-map-legend {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--public-border);
}

.fc-mock-legend-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.fc-mock-legend-dot--warn { background: var(--public-warning); }
.fc-mock-legend-dot--ok { background: var(--public-success); }

.fc-mock-map-callout {
  position: absolute;
  right: 10px;
  bottom: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--fc-mock-surface);
  border: 1px solid var(--public-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.fc-mock-map-callout-title {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--public-text);
}

.fc-mock-map-callout-gap {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: var(--public-warning);
  margin-top: 2px;
}

/* API visual */
.fc-mock-api-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.fc-mock-api-status {
  font-size: 8px;
  font-weight: 600;
  color: var(--public-success);
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.fc-mock-api-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.fc-mock-api-metric {
  text-align: center;
  padding: 6px 4px;
  border-radius: 8px;
  background: var(--fc-mock-surface-alt);
  border: 1px solid var(--public-border);
}

.fc-mock-api-metric--success {
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(16, 185, 129, 0.08);
}

.fc-mock-api-metric-value {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--public-text);
  line-height: 1.1;
}

.fc-mock-api-metric-label {
  display: block;
  font-size: 7px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--public-muted);
  margin-top: 2px;
}

.fc-mock-api-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.fc-mock-api-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  align-items: center;
  font-size: 9px;
  padding: 5px 7px;
  border-radius: 6px;
  background: var(--fc-mock-surface-alt);
  border: 1px solid var(--public-border);
}

.fc-mock-api-method {
  font-weight: 700;
  color: var(--public-primary);
}

.fc-mock-api-path {
  color: var(--public-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-mock-api-code {
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
}

.fc-mock-api-code--ok {
  color: var(--public-success);
  background: rgba(16, 185, 129, 0.12);
}

.fc-mock-api-export {
  display: flex;
  gap: 6px;
}

.fc-mock-api-export span {
  flex: 1;
  text-align: center;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 4px;
  border-radius: 6px;
  color: var(--public-primary);
  background: rgba(var(--public-primary-rgb), 0.1);
  border: 1px solid rgba(var(--public-primary-rgb), 0.22);
}

/* Review Radar visual */
.fc-mock-rr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 64px;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}

.fc-mock-rr-stat {
  text-align: center;
  padding: 10px 6px;
  border-radius: 10px;
  background: var(--fc-mock-surface-alt);
  border: 1px solid var(--public-border);
}

.fc-mock-rr-stat-value {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--public-primary);
  line-height: 1;
}

.fc-mock-rr-stat-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--public-muted);
  margin-top: 4px;
}

.fc-mock-rr-donut {
  width: 64px;
  height: 64px;
}

.fc-mock-rr-donut svg {
  width: 100%;
  height: 100%;
}

.fc-mock-rr-themes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.fc-mock-rr-theme {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--public-muted);
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid var(--public-border);
  background: var(--fc-mock-surface-alt);
}

.fc-mock-rr-theme strong {
  margin-left: auto;
  color: var(--public-text);
}

.fc-mock-rr-theme--neg {
  border-color: rgba(220, 60, 80, 0.3);
}

.fc-mock-rr-theme--neg strong {
  color: #ff7a8a;
}

.fc-mock-rr-theme--pos {
  border-color: rgba(60, 180, 110, 0.3);
}

.fc-mock-rr-theme--pos strong {
  color: var(--public-success);
}

.fc-mock-theme-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fc-mock-theme-dot--primary { background: var(--public-primary); }
.fc-mock-theme-dot--success { background: var(--public-success); }

.fc-mock-rr-flag {
  font-size: 8px;
  font-weight: 700;
  text-align: center;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--public-warning);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
}

@media (max-width: 1100px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .feature-card {
    min-height: 420px;
  }

  .feature-card-content {
    min-height: 0;
  }

  .feature-description {
    min-height: 0;
  }
}

/* ==========
   FEATURES PAGE (Review Radar long-form)
   ========== */

.features-page {
  max-width: 100%;
  min-width: 0;
}

.features-hero {
  padding: 96px 0 64px;
  text-align: center;
  background:
    radial-gradient(1100px 700px at 12% -15%, rgba(var(--brand-highlight-rgb), 0.16), transparent 58%),
    radial-gradient(900px 560px at 92% 5%, rgba(0, 130, 200, 0.12), transparent 55%),
    var(--public-bg);
  border-bottom: 1px solid var(--public-border);
}

.features-hero-inner {
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  min-width: 0;
}

.features-eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--public-primary);
}

.features-hero-title {
  margin: 0 0 18px;
  max-width: 100%;
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--public-text);
  background: linear-gradient(135deg, var(--public-text), var(--public-muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  overflow-wrap: break-word;
  animation: features-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.features-hero-subtitle {
  margin: 0 auto 28px;
  max-width: 560px;
  width: 100%;
  font-size: 18px;
  line-height: 1.6;
  color: var(--public-muted);
  overflow-wrap: break-word;
  animation: features-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.features-hero-cta {
  justify-content: center;
  gap: 16px;
  animation: features-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both;
}

.features-jump-strip {
  position: sticky;
  top: 72px;
  z-index: 50;
  background: var(--public-bg);
  background: color-mix(in srgb, var(--public-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--public-border);
}

.features-jump-strip-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  scroll-padding-inline: 24px;
  box-sizing: border-box;
  min-width: 0;
}

.features-jump {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid var(--public-border);
  background: var(--public-surface);
  color: var(--public-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.features-jump:hover,
.features-jump:focus-visible,
.features-jump.active {
  color: var(--public-primary);
  border-color: rgba(var(--public-primary-rgb), 0.55);
  background: rgba(var(--public-primary-rgb), 0.1);
  outline: none;
}

.features-jump.active {
  box-shadow: 0 0 0 3px rgba(var(--public-primary-rgb), 0.1);
}

.features-band {
  padding: 80px 0;
  scroll-margin-top: 148px;
}

.features-band-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
  max-width: 100%;
  min-width: 0;
}

.features-band-copy,
.features-band-visual {
  min-width: 0;
  max-width: 100%;
}

.features-band-grid--reverse .features-band-copy {
  order: 2;
}

.features-band-grid--reverse .features-band-visual {
  order: 1;
}

.features-band-title {
  margin: 0 0 16px;
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--public-text);
  overflow-wrap: break-word;
}

.features-band-lead {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--public-muted);
  overflow-wrap: break-word;
}

.features-band-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.features-band-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--public-text);
  overflow-wrap: break-word;
}

.features-band-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--public-primary);
  box-shadow: 0 0 0 3px rgba(var(--public-primary-rgb), 0.18);
}

.features-band-list code {
  font-size: 0.92em;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(var(--public-primary-rgb), 0.12);
  color: var(--public-primary);
}

.features-shot {
  margin: 0;
  max-width: 100%;
  min-width: 0;
}

.features-shot-frame {
  background: var(--public-surface);
  border: 1px solid var(--public-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--public-shadow-lg);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
  max-width: 100%;
}

.features-shot-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .features-shot-frame:hover {
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.12);
}

.features-shot-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  min-width: 0;
  background: var(--public-bg);
  background: color-mix(in srgb, var(--public-bg) 70%, var(--public-surface));
  border-bottom: 1px solid var(--public-border);
}

.features-shot-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--public-border);
}

.features-shot-dot:nth-child(1) { background: #ff5f57; }
.features-shot-dot:nth-child(2) { background: #febc2e; }
.features-shot-dot:nth-child(3) { background: #28c840; }

.features-shot-chrome-title {
  margin-left: 8px;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--public-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.features-shot-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.features-mock-panel {
  padding: 28px;
  background: var(--public-surface);
  border: 1px solid var(--public-border);
  border-radius: 16px;
  box-shadow: var(--public-shadow);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.features-mock-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: var(--public-text);
  font-size: 15px;
  min-width: 0;
}

.features-mock-row strong {
  min-width: 0;
  overflow-wrap: break-word;
}

.features-mock-badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(var(--public-primary-rgb), 0.14);
  color: var(--public-primary);
}

.features-mock-progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(var(--public-primary-rgb), 0.12);
  overflow: hidden;
  margin-bottom: 14px;
}

.features-mock-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--public-primary), rgba(var(--public-primary-rgb), 0.65));
}

.features-mock-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--public-muted);
}

.features-mock-meta-ok {
  color: var(--public-success);
  font-weight: 600;
}

.features-mock-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.features-mock-chips span {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--public-border);
  color: var(--public-text);
  background: color-mix(in srgb, var(--public-bg) 55%, transparent);
}

.features-modes-cards {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.features-mode-card {
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--public-border);
  background: var(--public-bg);
  box-shadow: var(--public-shadow);
  min-width: 0;
}

.features-mode-card--accent {
  border-color: rgba(var(--public-primary-rgb), 0.45);
  background: linear-gradient(145deg, rgba(var(--public-primary-rgb), 0.12), var(--public-surface));
}

.features-mode-label {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--public-primary);
}

.features-mode-desc {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--public-text);
  overflow-wrap: break-word;
}

.features-mode-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.features-mode-stats span {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(var(--public-primary-rgb), 0.1);
  color: var(--public-muted);
}

@keyframes features-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .features-hero-title,
  .features-hero-subtitle,
  .features-hero-cta {
    animation: none;
  }

  .features-shot-frame {
    transition: none;
  }

  .features-shot-frame:hover {
    transform: none;
  }
}

@media (max-width: 1100px) {
  .features-band-grid,
  .features-band-grid--reverse {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .features-band-grid--reverse .features-band-copy,
  .features-band-grid--reverse .features-band-visual {
    order: initial;
  }

  .features-band {
    padding: 64px 0;
  }

  .features-hero {
    padding: 72px 0 48px;
  }
}

@media (max-width: 640px) {
  .features-hero-inner {
    padding: 0 20px;
  }

  .features-jump-strip-inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 14px 20px;
    scroll-padding-inline: 20px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .features-hero-subtitle {
    font-size: 16px;
    max-width: 100%;
  }
}

/* Legacy detailed grid (kept for any residual markup) */
.features-detailed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  margin-top: 48px;
}

.feature-detailed-card {
  padding: 40px;
  background: var(--public-surface);
  border: 1px solid var(--public-border);
  border-radius: 16px;
}

.feature-icon-large {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--brand-highlight-rgb), 0.1);
  border-radius: 16px;
  color: var(--public-primary);
  margin-bottom: 24px;
}

.feature-detailed-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 12px;
}

.feature-detailed-description {
  font-size: 16px;
  color: var(--public-muted);
  margin: 0;
  line-height: 1.6;
}

/* Testimonials */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  margin-top: 48px;
}

.testimonial-card {
  padding: 32px;
  background: var(--public-surface);
  border: 1px solid var(--public-border);
  border-radius: 16px;
}

.testimonial-text {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 24px;
  color: var(--public-text);
}

.testimonial-author-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.testimonial-author-title {
  font-size: 14px;
  color: var(--public-muted);
}

/* Coming soon strip */
.coming-soon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.coming-soon-card {
  padding: 28px 24px;
  background: var(--public-surface);
  border: 1px solid var(--public-border);
  border-radius: 12px;
}

.coming-soon-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--public-muted);
  margin-bottom: 12px;
}

.coming-soon-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--public-text);
}

.coming-soon-text {
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  color: var(--public-muted);
}

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

/* Platform hero */
.hero-title--platform {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.hero-tagline {
  margin: -16px auto 32px;
  max-width: 720px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--public-primary);
}

.hero-showcase--platform {
  max-width: 1120px;
  padding-bottom: 24px;
}

.platform-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.platform-signal-card {
  padding: 22px 20px;
  background: var(--public-surface);
  border: 1px solid var(--public-border);
  border-radius: 16px;
  box-shadow: var(--public-shadow-lg);
  text-align: left;
}

.platform-signal-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--public-primary);
  margin-bottom: 8px;
}

.platform-signal-title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  color: var(--public-text);
}

.platform-signal-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.platform-signal-metric-label {
  display: block;
  font-size: 12px;
  color: var(--public-muted);
  margin-bottom: 4px;
}

.platform-signal-metric-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--public-text);
}

.platform-signal-metric-value em {
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: var(--public-success);
  margin-left: 4px;
}

.platform-signal-metric-value em.down,
.platform-signal-metric-value--warn {
  color: var(--public-warning);
}

.platform-signal-row {
  font-size: 13px;
  line-height: 1.4;
  color: var(--public-muted);
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(var(--public-primary-rgb), 0.06);
  margin-top: 8px;
}

.platform-signal-row--warn {
  background: rgba(245, 158, 11, 0.12);
  color: var(--public-text);
}

.platform-signal-row--ok {
  background: rgba(34, 197, 94, 0.12);
  color: var(--public-text);
}

@media (max-width: 900px) {
  .platform-hero-grid {
    grid-template-columns: 1fr;
  }
}

/* Trust strip */
.trust-strip {
  padding: 28px 0 40px;
  border-bottom: 1px solid var(--public-border);
}

.trust-strip-label {
  margin: 0 0 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--public-muted);
}

.trust-strip-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
}

.trust-strip-logos span {
  font-size: 14px;
  font-weight: 600;
  color: var(--public-text);
  opacity: 0.72;
  padding: 8px 12px;
  border: 1px solid var(--public-border);
  border-radius: 999px;
  background: var(--public-surface);
}

.trust-strip-logos .trust-strip-more {
  opacity: 0.9;
  color: var(--public-primary);
  border-color: rgba(var(--public-primary-rgb), 0.35);
}

/* Why DSI */
.why-dsi-block {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

.why-dsi-lead {
  margin-bottom: 12px;
}

.why-dsi-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
  margin-top: 36px;
}

.why-dsi-copy {
  min-width: 0;
}

.why-dsi-body {
  margin: 0 0 12px;
  font-size: 18px;
  color: var(--public-muted);
}

.why-dsi-punch {
  margin: 0 0 28px;
  font-size: 20px;
  font-weight: 700;
  color: var(--public-text);
}

.why-dsi-stages {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 32px;
}

.why-dsi-stage {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.why-dsi-stage-num {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  color: var(--public-primary);
  background: rgba(var(--public-primary-rgb), 0.12);
  border: 1px solid rgba(var(--public-primary-rgb), 0.4);
}

.why-dsi-stage-title {
  margin: 4px 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--public-text);
}

.why-dsi-stage-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--public-muted);
}

.why-dsi-cta {
  gap: 16px;
}

.why-dsi-visual {
  min-width: 0;
}

.why-dsi-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.why-dsi-feed-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--public-border);
  background: rgba(var(--public-primary-rgb), 0.04);
}

.why-dsi-feed-badge {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  margin-top: 2px;
}

.why-dsi-feed-badge--review {
  color: var(--public-warning);
  background: rgba(245, 158, 11, 0.14);
}

.why-dsi-feed-badge--price {
  color: var(--public-primary);
  background: rgba(var(--public-primary-rgb), 0.14);
}

.why-dsi-feed-badge--search {
  color: var(--public-success);
  background: rgba(34, 197, 94, 0.14);
}

.why-dsi-feed-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.why-dsi-feed-copy strong {
  font-size: 14px;
  color: var(--public-text);
}

.why-dsi-feed-copy span {
  font-size: 12px;
  line-height: 1.45;
  color: var(--public-muted);
}

.why-dsi-feed-time {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--public-muted);
}

.why-dsi-insight {
  margin-top: 4px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(var(--public-primary-rgb), 0.45);
  background: rgba(var(--public-primary-rgb), 0.08);
}

.why-dsi-insight-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--public-primary);
  margin-bottom: 8px;
}

.why-dsi-insight-text {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--public-text);
}

.why-dsi-insight-action {
  font-size: 12px;
  font-weight: 600;
  color: var(--public-primary);
}

@media (max-width: 960px) {
  .why-dsi-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Apps hub cards */
.apps-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.apps-hub-grid--home {
  margin-top: 36px;
}

.apps-hub-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px 24px;
  background: var(--public-surface);
  border: 1px solid var(--public-border);
  border-radius: 16px;
  box-shadow: var(--public-shadow);
  min-width: 0;
}

.apps-hub-card--featured {
  padding: 32px 28px;
}

.apps-hub-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--public-primary);
}

.apps-hub-title {
  margin: 0;
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--public-text);
}

.apps-hub-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--public-muted);
}

.apps-hub-list {
  margin: 4px 0 8px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.apps-hub-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--public-text);
}

.apps-hub-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--public-primary);
}

.apps-hub-card .feature-link,
.apps-hub-card .btn {
  margin-top: auto;
}

@media (max-width: 960px) {
  .apps-hub-grid {
    grid-template-columns: 1fr;
  }
}

/* Signal groups + AI explain + teams */
.signal-groups-grid,
.teams-grid {
  display: grid;
  gap: 20px;
  margin-top: 36px;
}

.signal-groups-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.teams-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.signal-group-card,
.team-card {
  padding: 24px 22px;
  background: var(--public-surface);
  border: 1px solid var(--public-border);
  border-radius: 14px;
}

.signal-group-card--pillar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 26px 22px;
  min-width: 0;
  box-shadow: var(--public-shadow);
}

.signal-group-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--public-primary);
}

.signal-group-title,
.team-card-title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: var(--public-text);
}

.signal-group-card--pillar .signal-group-title {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.signal-group-list,
.team-card-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.signal-group-card--pillar .signal-group-list {
  width: 100%;
  margin-top: 4px;
}

.signal-group-list li,
.team-card-list li {
  font-size: 14px;
  color: var(--public-muted);
  padding-left: 14px;
  position: relative;
}

.signal-group-list li::before,
.team-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--public-primary-rgb), 0.7);
}

.signal-group-link {
  margin-top: auto;
  padding-top: 8px;
}

/* Signal pillar mini mocks */
.signal-mini-mock {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--public-border);
  background: rgba(var(--public-primary-rgb), 0.04);
  box-sizing: border-box;
}

.signal-mini-voice-top {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.signal-mini-rating {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.signal-mini-rating-stars {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--public-warning);
}

.signal-mini-rating strong {
  font-size: 22px;
  color: var(--public-text);
}

.signal-mini-rating em {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--public-success);
}

.signal-mini-sent-label {
  display: block;
  font-size: 11px;
  color: var(--public-muted);
  margin-bottom: 6px;
}

.signal-mini-sent-bar {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(var(--public-primary-rgb), 0.1);
}

.signal-mini-sent-pos {
  display: block;
  height: 100%;
  background: var(--public-success);
}

.signal-mini-sent-neg {
  display: block;
  height: 100%;
  background: var(--public-warning);
}

.signal-mini-sent-meta {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--public-muted);
}

.signal-mini-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.signal-mini-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--public-border);
  background: var(--public-surface);
  color: var(--public-muted);
}

.signal-mini-chip--pos {
  color: var(--public-success);
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.1);
}

.signal-mini-chip--neg,
.signal-mini-chip--warn {
  color: var(--public-warning);
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.1);
}

.signal-mini-price-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.signal-mini-price-stat span {
  display: block;
  font-size: 11px;
  color: var(--public-muted);
  margin-bottom: 2px;
}

.signal-mini-price-stat strong {
  font-size: 20px;
  color: var(--public-text);
}

.signal-mini-warn {
  color: var(--public-warning) !important;
}

.signal-mini-spark {
  display: block;
  width: 100%;
  height: 48px;
  margin-bottom: 10px;
}

.signal-mini-rank-badge {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.signal-mini-rank-badge span {
  font-size: 11px;
  color: var(--public-muted);
}

.signal-mini-rank-badge strong {
  font-size: 22px;
  color: var(--public-text);
}

.signal-mini-rank-badge em {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--public-warning);
  margin-left: 4px;
}

.signal-mini-sos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.signal-mini-sos-row {
  display: grid;
  grid-template-columns: 48px 1fr 36px;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--public-text);
}

.signal-mini-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(var(--public-primary-rgb), 0.12);
  overflow: hidden;
}

.signal-mini-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--public-primary);
}

.signal-platform-cta {
  margin-top: 28px;
  justify-content: center;
  gap: 16px;
}

/* AI That Explains Why */
.ai-explain-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.ai-explain-visual {
  min-width: 0;
}

.ai-explain-copy {
  min-width: 0;
}

.ai-explain-copy .section-title,
.ai-explain-copy .section-subtitle {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.ai-explain-copy .section-subtitle {
  margin-bottom: 16px;
  max-width: none;
}

.ai-explain-lead {
  margin: 0 0 28px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--public-muted);
}

.ai-anatomy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-anatomy-layer {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--public-border);
  background: rgba(var(--public-primary-rgb), 0.04);
}

.ai-anatomy-layer--action {
  border-color: rgba(var(--public-primary-rgb), 0.45);
  background: rgba(var(--public-primary-rgb), 0.1);
}

.ai-anatomy-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--public-primary);
  margin-bottom: 4px;
}

.ai-anatomy-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--public-text);
}

.ai-anatomy-evidence {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--public-border);
}

.ai-anatomy-evidence-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--public-muted);
  margin-bottom: 8px;
}

.ai-explain-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-explain-checklist li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.ai-explain-check-num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: var(--public-primary);
  background: rgba(var(--public-primary-rgb), 0.12);
  border: 1px solid rgba(var(--public-primary-rgb), 0.4);
}

.ai-explain-checklist strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--public-text);
  margin-bottom: 2px;
}

.ai-explain-checklist span:not(.ai-explain-check-num) {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--public-muted);
}

/* Built For Every Team */
.team-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px 22px;
  border-radius: 16px;
  box-shadow: var(--public-shadow);
  min-width: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.team-card:hover {
  border-color: rgba(var(--public-primary-rgb), 0.45);
  box-shadow: var(--public-shadow-lg);
  transform: translateY(-2px);
}

.team-card-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--public-primary);
}

.team-card-title {
  margin: 0;
}

.team-card-outcome {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--public-muted);
}

.team-card-list {
  width: 100%;
  margin-top: 4px;
}

.team-card-signals {
  width: 100%;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--public-border);
}

.team-card-signals-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--public-muted);
  margin-bottom: 8px;
}

@media (max-width: 960px) {
  .signal-groups-grid {
    grid-template-columns: 1fr;
  }

  .teams-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-explain-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .ai-explain-copy {
    order: -1;
  }
}

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

/* Why CPGHero comparison */
.why-compare-panels {
  margin-top: 36px;
  border: 1px solid var(--public-border);
  border-radius: 16px;
  background: var(--public-surface);
  overflow: hidden;
  box-shadow: var(--public-shadow);
}

.why-compare-headers {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.why-compare-header {
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.why-compare-header--typical {
  color: var(--public-muted);
  background: rgba(var(--public-primary-rgb), 0.03);
  border-right: 1px solid var(--public-border);
  border-bottom: 1px solid var(--public-border);
}

.why-compare-header--hero {
  color: var(--public-primary);
  background: rgba(var(--public-primary-rgb), 0.08);
  border-bottom: 1px solid rgba(var(--public-primary-rgb), 0.25);
}

.why-compare-rows {
  display: flex;
  flex-direction: column;
}

.why-compare-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--public-border);
}

.why-compare-pair:last-child {
  border-bottom: none;
}

.why-compare-side {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  min-width: 0;
}

.why-compare-side p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.why-compare-side--typical {
  color: var(--public-muted);
  border-right: 1px solid var(--public-border);
  background: rgba(var(--public-primary-rgb), 0.02);
}

.why-compare-side--hero {
  color: var(--public-text);
  font-weight: 600;
  background: rgba(var(--public-primary-rgb), 0.05);
}

.why-compare-marker {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  margin-top: 1px;
}

.why-compare-side--typical .why-compare-marker {
  color: var(--public-muted);
  background: rgba(var(--public-primary-rgb), 0.08);
  border: 1px solid var(--public-border);
}

.why-compare-side--hero .why-compare-marker {
  color: var(--public-primary);
  background: rgba(var(--public-primary-rgb), 0.14);
  border: 1px solid rgba(var(--public-primary-rgb), 0.45);
}

.why-compare-closing {
  margin: 24px 0 0;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--public-primary);
}

@media (max-width: 720px) {
  .why-compare-headers {
    display: none;
  }

  .why-compare-pair {
    grid-template-columns: 1fr;
  }

  .why-compare-side--typical {
    border-right: none;
    border-bottom: 1px dashed var(--public-border);
    padding-bottom: 10px;
  }

  .why-compare-side--hero {
    padding-top: 10px;
  }

  .why-compare-side {
    flex-wrap: wrap;
  }

  .why-compare-side--typical::before,
  .why-compare-side--hero::before {
    flex: 0 0 100%;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }

  .why-compare-side--typical::before {
    content: "Typical tools";
    color: var(--public-muted);
  }

  .why-compare-side--hero::before {
    content: "CPGHero";
    color: var(--public-primary);
  }
}

/* Enterprise features on Apps hub */
.enterprise-block {
  text-align: center;
}

.enterprise-features-list {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}

.enterprise-features-list li {
  font-size: 13px;
  font-weight: 600;
  color: var(--public-text);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--public-border);
  background: var(--public-surface);
}

/* App page CSS mocks (Price Pulse / Search Monitor) */
.app-mock-panel {
  border: 1px solid var(--public-border);
  border-radius: 16px;
  background: var(--public-surface);
  box-shadow: var(--public-shadow-lg);
  overflow: hidden;
}

.app-mock-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--public-border);
  background: rgba(var(--public-primary-rgb), 0.05);
}

.app-mock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--public-border);
}

.app-mock-chrome-title {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--public-muted);
}

.app-mock-body {
  padding: 18px;
}

.pp-mock-price-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.pp-mock-price-card {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--public-border);
  background: rgba(var(--public-primary-rgb), 0.04);
}

.pp-mock-label {
  display: block;
  font-size: 11px;
  color: var(--public-muted);
  margin-bottom: 4px;
}

.pp-mock-price-card strong {
  display: block;
  font-size: 22px;
  color: var(--public-text);
  margin-bottom: 4px;
}

.pp-mock-delta {
  font-size: 12px;
  color: var(--public-muted);
}

.pp-mock-delta--down,
.pp-mock-delta--ok {
  color: var(--public-success);
}

.pp-mock-delta--warn {
  color: var(--public-warning);
}

.pp-mock-spark svg {
  width: 100%;
  height: 64px;
  display: block;
}

.pp-mock-legend {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--public-muted);
}

.pp-mock-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pp-mock-table-row {
  display: grid;
  grid-template-columns: 1.2fr 0.7fr 0.8fr;
  gap: 8px;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(var(--public-primary-rgb), 0.04);
  color: var(--public-text);
}

.pp-mock-table-row--head {
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--public-muted);
  padding-top: 0;
}

.pp-mock-alerts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pp-mock-alert {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--public-border);
  background: rgba(var(--public-primary-rgb), 0.04);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pp-mock-alert strong {
  font-size: 14px;
  color: var(--public-text);
}

.pp-mock-alert span {
  font-size: 12px;
  color: var(--public-muted);
}

.pp-mock-alert--crit {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
}

.pp-mock-alert--warn {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.1);
}

.sm-mock-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.sm-mock-kpi {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--public-border);
  background: rgba(var(--public-primary-rgb), 0.04);
}

.sm-mock-kpi span {
  display: block;
  font-size: 11px;
  color: var(--public-muted);
  margin-bottom: 4px;
}

.sm-mock-kpi strong {
  font-size: 20px;
  color: var(--public-text);
}

.sm-mock-kpi em {
  font-style: normal;
  font-size: 12px;
  color: var(--public-warning);
  margin-left: 4px;
}

.sm-mock-rank-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sm-mock-rank-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(var(--public-primary-rgb), 0.04);
  font-size: 13px;
  color: var(--public-text);
}

.sm-mock-rank-row--you {
  border: 1px solid rgba(var(--public-primary-rgb), 0.45);
  background: rgba(var(--public-primary-rgb), 0.1);
}

.sm-mock-pos {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--public-border);
  color: var(--public-text);
}

.sm-mock-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--public-muted);
}

.sm-mock-tag--you {
  color: var(--public-primary);
}

.sm-mock-sos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sm-mock-sos-row {
  display: grid;
  grid-template-columns: 64px 1fr 40px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: var(--public-text);
}

.sm-mock-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(var(--public-primary-rgb), 0.12);
  overflow: hidden;
}

.sm-mock-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--public-primary);
}

@media (max-width: 640px) {
  .pp-mock-price-row,
  .sm-mock-kpis {
    grid-template-columns: 1fr;
  }
}

/* Bulk Data Services mocks */
.bd-mock-scope {
  margin-top: 14px;
}

.bd-mock-dest-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.bd-mock-dest {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px;
  border-radius: 12px;
  border: 1px solid var(--public-border);
  background: rgba(var(--public-primary-rgb), 0.04);
  min-width: 0;
}

.bd-mock-dest strong {
  font-size: 13px;
  color: var(--public-text);
  overflow-wrap: break-word;
}

.bd-mock-dest span {
  font-size: 11px;
  font-weight: 600;
  color: var(--public-success);
}

.bd-mock-dest .bd-mock-dest-idle {
  color: var(--public-muted);
}

@media (max-width: 640px) {
  .bd-mock-dest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Live APIs mocks */
.la-mock-code {
  margin: 0;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--public-border);
  background: rgba(var(--public-primary-rgb), 0.05);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--public-text);
  overflow-x: auto;
  white-space: pre;
}

.la-code-comment {
  color: var(--public-muted);
}

.la-code-key {
  color: var(--public-primary);
}

.la-mock-play {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.la-mock-play-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  align-items: center;
}

.la-mock-play-row span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--public-muted);
}

.la-mock-play-row em {
  font-style: normal;
  font-size: 13px;
  color: var(--public-text);
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--public-border);
  background: rgba(var(--public-primary-rgb), 0.04);
  min-width: 0;
  overflow-wrap: break-word;
}

.la-mock-play-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--public-border);
}

.la-mock-play-run {
  font-size: 13px;
  font-weight: 700;
  color: var(--public-primary);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(var(--public-primary-rgb), 0.55);
  background: rgba(var(--public-primary-rgb), 0.14);
}

.la-mock-play-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--public-success);
}

.features-mock-badge--soon {
  background: rgba(245, 158, 11, 0.14);
  color: var(--public-warning);
}

.features-soon-badge {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.1);
  color: var(--public-warning);
}

/* CTA Section */
.section-cta .section-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-title {
  font-size: 42px;
  font-weight: 700;
  margin: 0 0 16px;
  text-align: center;
}

.cta-subtitle {
  font-size: 20px;
  color: var(--public-muted);
  text-align: center;
  margin: 0 0 32px;
}

/* Pricing */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin-top: 48px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.pricing-grid-suite {
  max-width: 420px;
}

.pricing-card {
  position: relative;
  padding: 40px;
  background: var(--public-surface);
  border: 1px solid var(--public-border);
  border-radius: 16px;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--public-shadow);
}

.pricing-card-featured {
  border-color: var(--public-primary);
  background: linear-gradient(135deg, rgba(var(--brand-highlight-rgb), 0.05), rgba(0, 130, 200, 0.05));
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--public-primary-strong);
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pricing-header {
  margin-bottom: 32px;
}

.pricing-name {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 16px;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.pricing-amount {
  font-size: 32px;
  font-weight: 700;
  color: var(--public-primary);
  line-height: 1.2;
  transition: opacity 180ms ease, transform 180ms ease;
}

.pricing-period {
  font-size: 18px;
  color: var(--public-muted);
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}

.pricing-features li {
  padding: 12px 0;
  border-bottom: 1px solid var(--public-border);
  color: var(--public-text);
  position: relative;
  padding-left: 24px;
}

.pricing-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--public-success);
  font-weight: 600;
}

.pricing-features li:last-child {
  border-bottom: none;
}

.pricing-cta-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-meters {
  display: grid;
  gap: 48px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.pricing-meter .section-title {
  font-size: 1.35rem;
  margin-bottom: 8px;
}

.pricing-meter .section-subtitle {
  margin-bottom: 24px;
  text-align: left;
}

.pricing-addon-bands,
.pricing-volume-packs {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  border: 1px solid var(--public-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--public-bg, transparent);
}

.pricing-addon-bands li,
.pricing-volume-packs li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--public-border);
  color: var(--public-text);
}

.pricing-addon-bands li:last-child,
.pricing-volume-packs li:last-child {
  border-bottom: none;
}

.pricing-band-range,
.pricing-pack-credits {
  font-weight: 600;
}

.pricing-band-rate,
.pricing-pack-price {
  color: var(--public-muted);
  font-variant-numeric: tabular-nums;
}

.pricing-meter-note {
  margin: 0 0 20px;
  font-size: 0.95rem;
  color: var(--public-muted);
}

.btn-block {
  width: 100%;
  justify-content: center;
}

/* Pricing calculator */
#page-pricing .pricing-page-header {
  padding: 36px 0 16px;
}

#page-pricing .pricing-page-header .public-page-title {
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  margin-bottom: 8px;
}

#page-pricing .pricing-page-header .public-page-subtitle {
  font-size: 1.02rem;
  max-width: 34rem;
}

#page-pricing .pricing-page-section {
  padding: 0 0 48px;
}

#page-pricing .pricing-faq-section {
  padding: 40px 0 72px;
  border-top: 1px solid var(--public-border);
}

.pricing-calculator {
  max-width: 1040px;
  margin: 0 auto;
}

.pricing-calculator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}

.pricing-calculator-config {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.pricing-plan-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}

.pricing-plan-tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--public-border);
  border-radius: 12px;
  background: var(--public-surface);
  color: var(--public-text);
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.pricing-plan-tab:hover {
  border-color: rgba(var(--public-primary-rgb), 0.45);
}

.pricing-plan-tab.is-active {
  border-color: var(--public-primary);
  background: linear-gradient(135deg, rgba(var(--brand-highlight-rgb), 0.14), rgba(var(--brand-highlight-rgb), 0.04));
  box-shadow: 0 0 0 1px rgba(var(--public-primary-rgb), 0.25);
}

.pricing-plan-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(var(--public-primary-rgb), 0.12);
  color: var(--public-primary);
}

.pricing-plan-tab.is-active .pricing-plan-tab-icon {
  background: rgba(var(--public-primary-rgb), 0.22);
  color: var(--public-primary-hover);
}

.pricing-plan-tab-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pricing-plan-tab-label {
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.2;
}

.pricing-plan-tab-meta {
  font-size: 0.75rem;
  color: var(--public-muted);
  line-height: 1.35;
}

.pricing-config-panel {
  padding: 4px 4px 8px;
  border: 1px solid var(--public-border);
  border-radius: 16px;
  background: var(--public-surface);
  overflow: hidden;
}

.pricing-stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--public-border);
}

.pricing-stepper-row--with-hint {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.pricing-stepper-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.pricing-stepper-row--volume {
  align-items: center;
}

.pricing-stepper-copy {
  min-width: 0;
  flex: 1;
}

.pricing-stepper-title {
  margin: 0 0 4px;
  font-size: 0.98rem;
  font-weight: 650;
  color: var(--public-text);
}

.pricing-stepper-desc {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--public-muted);
}

.pricing-stepper {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: stretch;
  flex-shrink: 0;
  width: 148px;
  height: 40px;
  border: 1px solid var(--public-border);
  border-radius: 12px;
  background: var(--public-bg);
  overflow: hidden;
}

.pricing-stepper--wide {
  width: 168px;
}

.pricing-stepper-value-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  height: 100%;
  border-left: 1px solid var(--public-border);
  border-right: 1px solid var(--public-border);
  background: transparent;
}

.pricing-stepper-prefix {
  flex-shrink: 0;
  color: var(--public-muted);
  font-weight: 650;
  font-size: 0.92rem;
  line-height: 1;
}

.pricing-stepper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--public-text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.pricing-stepper-btn:hover:not(:disabled) {
  background: rgba(var(--public-primary-rgb), 0.12);
  color: var(--public-primary);
}

.pricing-stepper-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.pricing-stepper-value {
  width: 100%;
  min-width: 0;
  max-width: 4.5rem;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--public-text);
  font-size: 0.95rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.pricing-stepper--wide .pricing-stepper-value {
  max-width: 6rem;
}

.pricing-stepper-value::-webkit-outer-spin-button,
.pricing-stepper-value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pricing-stepper-value:focus {
  outline: none;
}

.pricing-stepper-value-wrap:focus-within {
  background: rgba(var(--public-primary-rgb), 0.08);
}

.pricing-stepper-hint {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--public-muted);
}

.pricing-stepper-hint.is-warn {
  color: var(--public-text);
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(var(--public-primary-rgb), 0.35);
  background: rgba(var(--brand-highlight-rgb), 0.08);
}

.pricing-pack-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 18px 14px;
}

.pricing-pack-chip {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--public-border);
  background: var(--public-bg);
  color: var(--public-text);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.pricing-pack-chip:hover {
  border-color: rgba(var(--public-primary-rgb), 0.5);
}

.pricing-pack-chip.is-active {
  border-color: var(--public-primary);
  background: rgba(var(--brand-highlight-rgb), 0.14);
  color: var(--public-primary-hover);
}

.pricing-info-box {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 4px 18px 16px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--public-border);
  background: rgba(var(--brand-highlight-rgb), 0.06);
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--public-muted);
}

.pricing-info-box a {
  color: var(--public-primary);
  font-weight: 600;
}

.pricing-summary-card {
  position: sticky;
  top: 88px;
  padding: 18px;
  border: 1px solid var(--public-border);
  border-radius: 16px;
  background: var(--public-surface);
  box-shadow: var(--public-shadow);
  overflow: hidden;
  min-width: 0;
}

.pricing-summary-eyebrow {
  margin: 0 0 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--public-primary);
}

.pricing-interval-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(var(--public-primary-rgb), 0.08);
  border: 1px solid var(--public-border);
}

.pricing-interval-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 8px 8px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--public-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.pricing-interval-btn.is-active {
  background: var(--public-bg);
  color: var(--public-text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(var(--public-primary-rgb), 0.35);
}

.pricing-interval-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--public-success);
}

.pricing-summary-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.pricing-summary-card .pricing-amount {
  font-size: 2.2rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.pricing-summary-note {
  margin: 0 0 14px;
  font-size: 0.82rem;
  color: var(--public-muted);
  line-height: 1.45;
}

.pricing-summary-note s {
  opacity: 0.65;
}

.pricing-summary-note strong {
  color: var(--public-text);
  font-weight: 650;
}

.pricing-summary-note-ai {
  display: block;
  margin-top: 4px;
}

.pricing-summary-note-ai--solo {
  margin-top: 0;
}

.pricing-summary-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(var(--public-primary-rgb), 0.06);
  border: 1px solid var(--public-border);
}

.pricing-summary-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--public-border);
  font-size: 0.84rem;
  color: var(--public-muted);
}

.pricing-summary-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pricing-summary-list li:first-child {
  padding-top: 0;
}

.pricing-summary-list strong {
  color: var(--public-text);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pricing-summary-volume-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--public-border);
  font-size: 0.82rem;
  color: var(--public-muted);
}

.pricing-summary-volume-line strong {
  color: var(--public-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pricing-enterprise-alert {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.1);
  color: var(--public-text);
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
}

.pricing-rollover-note {
  margin: 0 0 12px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--public-muted);
}

.pricing-ai-footnote {
  display: none;
}

#view-public .pricing-summary-card .btn-primary {
  background: var(--public-primary);
  color: #041018;
  border-color: var(--public-primary);
  font-weight: 700;
  min-width: 0;
}

#view-public .pricing-summary-card .btn-primary:hover {
  background: var(--public-primary-hover);
  color: #041018;
  border-color: var(--public-primary-hover);
}

[data-theme="light"] #view-public .pricing-summary-card .btn-primary {
  background: var(--public-primary-strong);
  color: #fff;
  border-color: var(--public-primary-strong);
}

[data-theme="light"] #view-public .pricing-summary-card .btn-primary:hover {
  background: var(--public-primary);
  color: #041018;
  border-color: var(--public-primary);
}

@media (max-width: 900px) {
  .pricing-calculator-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .pricing-calculator-config {
    order: 1;
  }

  /* Config first so steppers aren't buried; summary follows (not sticky — card is too tall). */
  .pricing-summary-card {
    order: 2;
    position: static;
    margin: 0;
  }
}

@media (max-width: 640px) {
  #page-pricing .pricing-page-header {
    padding: 28px 0 14px;
  }

  .pricing-plan-tabs {
    grid-template-columns: 1fr;
  }

  .pricing-stepper-row {
    flex-direction: column;
    align-items: stretch;
  }

  .pricing-stepper-row-main {
    flex-direction: column;
    align-items: stretch;
  }

  .pricing-stepper,
  .pricing-stepper--wide {
    width: 100%;
  }

  .pricing-stepper-value,
  .pricing-stepper--wide .pricing-stepper-value {
    max-width: none;
  }

  .pricing-summary-card .pricing-amount {
    font-size: 1.85rem;
  }

  .pricing-summary-list {
    margin-bottom: 10px;
    padding: 8px 10px;
  }

  .pricing-summary-list li {
    padding: 5px 0;
    font-size: 0.8rem;
  }
}

/* FAQ */
/* FAQ */
.faq-grid {
  display: grid;
  gap: 24px;
  margin-top: 48px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.faq-item {
  padding: 24px;
  background: var(--public-surface);
  border: 1px solid var(--public-border);
  border-radius: 12px;
}

.faq-question {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 12px;
}

.faq-answer {
  font-size: 15px;
  color: var(--public-muted);
  margin: 0;
  line-height: 1.6;
}

/* Contact */
.contact-action-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 32px 0 48px;
}

.contact-schedule-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 32px 28px;
  border-radius: 18px;
  border: 1px solid rgba(var(--public-primary-rgb), 0.28);
  background:
    radial-gradient(ellipse 120% 80% at 0% 0%, rgba(var(--public-primary-rgb), 0.14), transparent 60%),
    var(--public-surface);
  min-width: 0;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-schedule-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--public-primary-rgb), 0.45);
  box-shadow: var(--public-shadow);
}

.contact-schedule-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--public-primary);
  background: rgba(var(--public-primary-rgb), 0.12);
  border: 1px solid rgba(var(--public-primary-rgb), 0.22);
  flex-shrink: 0;
}

.contact-schedule-copy {
  width: 100%;
  min-width: 0;
}

.contact-schedule-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--public-text);
}

.contact-schedule-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--public-muted);
  overflow-wrap: break-word;
}

.contact-schedule-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  margin-top: auto;
}

.contact-form {
  max-width: none;
  width: 100%;
}

.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.contact-form-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.65);
  box-sizing: border-box;
}

[data-theme="light"] .contact-form-overlay {
  background: rgba(0, 0, 0, 0.50);
}

.contact-form-overlay[hidden] {
  display: none !important;
}

.contact-form-modal {
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: rgba(18, 18, 22, 0.98);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-sizing: border-box;
}

[data-theme="light"] .contact-form-modal {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0,0,0,0.14);
}

.contact-form-modal[hidden] {
  display: none !important;
}

.contact-form-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

[data-theme="light"] .contact-form-modal-head {
  border-bottom: 1px solid rgba(0,0,0,0.10);
}

.contact-form-modal-title {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--text);
}

.contact-form-modal-subtitle {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.contact-form-modal-body {
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.contact-form-modal .field {
  margin-bottom: 12px;
}

.contact-form-modal .field label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.contact-form-modal .field input,
.contact-form-modal .field textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  padding: 12px 12px;
  font: inherit;
  font-size: 13px;
}

[data-theme="light"] .contact-form-modal .field input,
[data-theme="light"] .contact-form-modal .field textarea {
  background: #ffffff;
  border-color: var(--border);
}

.contact-form-modal .field input:focus,
.contact-form-modal .field textarea:focus {
  outline: none;
  border-color: rgba(255,255,255,0.18);
  box-shadow: var(--ring);
}

[data-theme="light"] .contact-form-modal .field input:focus,
[data-theme="light"] .contact-form-modal .field textarea:focus {
  border-color: rgba(0,0,0,0.18);
}

.contact-form-modal .notice {
  margin-top: 14px;
}

.cta-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

@media (max-width: 720px) {
  .contact-schedule-card {
    padding: 24px 22px;
  }

  .contact-schedule-cta {
    width: 100%;
  }

  .contact-form-overlay {
    padding: 16px;
    align-items: flex-end;
  }

  .contact-form-modal {
    width: 100%;
    max-height: calc(100vh - 32px);
    border-radius: 16px 16px 12px 12px;
  }
}

/* Public Footer */
.public-footer {
  background: var(--public-surface);
  border-top: 1px solid var(--public-border);
  padding: 64px 0 32px;
  margin-top: 80px;
}

.public-footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.public-footer-content {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 64px;
  margin-bottom: 48px;
}

.public-footer-brand {
  max-width: 300px;
}

.public-footer-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  margin-bottom: 16px;
  transition: all 150ms ease;
}

/* Theme-based footer logo switching */
[data-theme="light"] .public-footer-logo.logo-dark {
  display: none;
}

[data-theme="light"] .public-footer-logo.logo-light {
  display: block;
}

[data-theme="dark"] .public-footer-logo.logo-light {
  display: none;
}

[data-theme="dark"] .public-footer-logo.logo-dark {
  display: block;
}

.public-footer-tagline {
  font-size: 15px;
  color: var(--public-muted);
  margin: 0;
  line-height: 1.6;
}

.public-footer-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 32px;
}

.public-footer-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.public-footer-heading {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.public-footer-link {
  font-size: 14px;
  color: var(--public-muted);
  text-decoration: none;
  transition: color 150ms ease;
}

.public-footer-link:hover {
  color: var(--public-text);
}

.public-footer-bottom {
  padding-top: 32px;
  border-top: 1px solid var(--public-border);
  text-align: center;
}

.public-footer-copyright {
  font-size: 14px;
  color: var(--public-muted);
  margin: 0;
}

.public-footer-muted {
  display: block;
  font-size: 14px;
  color: var(--public-muted);
  margin-top: 8px;
}

.public-footer-entity {
  max-width: 720px;
  margin: 0 auto 32px;
  padding: 0 24px;
  text-align: center;
  font-size: var(--public-text-small);
  color: var(--public-muted);
  line-height: 1.55;
}

.public-footer-entity strong {
  color: var(--public-text);
}

.public-breadcrumb-link {
  color: var(--public-primary);
  text-decoration: none;
}

.public-breadcrumb-link:hover {
  text-decoration: underline;
}

.apps-hub-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .apps-hub-grid--two {
    grid-template-columns: 1fr;
  }
}

.trust-strip-logos--compact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: center;
  align-items: center;
}

.freebie-coming-soon {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--public-space-5) var(--public-space-4);
  background: var(--public-surface);
  border: 1px solid var(--public-border);
  border-radius: 16px;
}

.freebie-coming-soon-badge {
  display: inline-block;
  margin: 0 0 16px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--public-primary);
  border: 1px solid rgba(var(--public-primary-rgb), 0.4);
  border-radius: 6px;
}

.freebie-upsell {
  text-align: center;
}

.freebie-upsell .cta-button-row {
  justify-content: center;
}

.freebies-hub-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .freebies-hub-grid {
    grid-template-columns: 1fr;
  }
}

.landing-data-lane,
.landing-freebies-teaser {
  text-align: center;
}

.landing-data-lane .cta-button-row,
.landing-freebies-teaser .cta-button-row {
  justify-content: center;
}

/* Public reduced-motion: kill hover lifts and transitions */
@media (prefers-reduced-motion: reduce) {
  #view-public *,
  #view-public *::before,
  #view-public *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  #view-public .feature-card:hover,
  #view-public .apps-hub-card:hover,
  #view-public .pricing-card:hover,
  #view-public .contact-schedule-card:hover,
  #view-public .platform-signal-card:hover {
    transform: none;
  }
}

/* Pricing FAQ details-friendly spacing */
.pricing-faq-section .faq-item {
  border: 1px solid var(--public-border);
  border-radius: 12px;
  padding: 20px 24px;
  background: var(--public-surface);
  margin-bottom: 12px;
}

@media (min-width: 900px) {
  .pricing-calculator-layout {
    align-items: start;
  }

  .pricing-summary-card {
    position: sticky;
    top: 96px;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .public-nav-toggle {
    display: block;
  }
  
  .public-nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--public-surface);
    border-top: 1px solid var(--public-border);
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
    gap: 16px;
    display: none;
  }
  
  .public-nav-menu.active {
    display: flex;
  }
  
  .public-nav-link {
    padding: 12px 0;
    border-bottom: 1px solid var(--public-border);
  }

  .public-nav-dropdown {
    width: 100%;
  }

  .public-nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--public-border);
  }

  .public-nav-dropdown-toggle::after {
    display: none;
  }

  .public-nav-dropdown-menu {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 8px;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--public-border);
    border-radius: 0;
    padding-left: 16px;
    background: transparent;
  }

  .public-nav-dropdown-item {
    padding: 10px 0;
  }
  
  .public-nav-ctas {
    margin-left: 0;
    flex-direction: column;
    width: 100%;
  }
  
  .public-nav-ctas .btn {
    width: 100%;
  }
  
  .hero-title {
    font-size: 36px;
  }

  .hero-title-typed {
    font-size: 0.78em;
    min-width: 100%;
  }
  
  .hero-subtitle {
    font-size: 18px;
  }
  
  .public-page-title {
    font-size: 36px;
  }
  
  .section-title {
    font-size: 28px;
  }
  
  .contact-action-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .public-footer-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  
  .feature-grid,
  .features-detailed-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========
   RETAIL MATH WIDGET STYLES
   ========== */

.retail-math-period-note {
  margin: 12px auto 0;
  max-width: 600px;
  font-size: 13px;
  font-weight: 600;
  color: var(--public-primary);
  letter-spacing: 0.02em;
}

.retail-math-section {
  padding-top: 24px;
  padding-bottom: 48px;
}

#retail-math-app {
  --rm-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  width: 100%;
  box-sizing: border-box;
  color: var(--public-text);
}

#retail-math-app *,
#retail-math-app *::before,
#retail-math-app *::after {
  box-sizing: border-box;
}

#retail-math-app .retail-math-layout {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

#retail-math-app .retail-math-inputs-col {
  position: sticky;
  top: 88px;
}

@media (min-width: 981px) {
  #retail-math-app .retail-math-inputs-summary {
    cursor: default;
    pointer-events: none;
  }

  #retail-math-app .retail-math-inputs-summary::after {
    display: none;
  }

  #retail-math-app .retail-math-inputs-details:not([open]) .retail-math-inputs {
    display: block;
  }
}

#retail-math-app .retail-math-inputs-details {
  border: 1px solid var(--public-border);
  border-radius: 16px;
  background: var(--public-surface);
  box-shadow: var(--public-shadow);
  overflow: hidden;
}

#retail-math-app .retail-math-inputs-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--public-text);
  border-bottom: 1px solid transparent;
  user-select: none;
}

#retail-math-app .retail-math-inputs-details[open] .retail-math-inputs-summary {
  border-bottom-color: var(--public-border);
}

#retail-math-app .retail-math-inputs-summary::-webkit-details-marker {
  display: none;
}

#retail-math-app .retail-math-inputs-summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--public-muted);
  border-bottom: 2px solid var(--public-muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: auto;
}

#retail-math-app .retail-math-inputs-details[open] .retail-math-inputs-summary::after {
  transform: rotate(225deg);
  margin-top: 4px;
}

#retail-math-app .retail-math-inputs-summary-meta {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--public-primary);
  margin-left: auto;
  margin-right: 10px;
}

#retail-math-app .retail-math-inputs {
  padding: 16px 18px 18px;
}

#retail-math-app .retail-math-inputs-intro {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--public-muted);
}

#retail-math-app .retail-math-fields {
  display: grid;
  gap: 10px;
}

#retail-math-app .retail-math-field {
  padding: 10px 12px;
  border: 1px solid var(--public-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.2s ease, background 0.2s ease;
}

[data-theme="light"] #retail-math-app .retail-math-field {
  background: rgba(255, 255, 255, 0.9);
}

#retail-math-app .retail-math-field:focus-within {
  border-color: rgba(var(--public-primary-rgb), 0.55);
  background: rgba(var(--public-primary-rgb), 0.06);
}

#retail-math-app .retail-math-field-lbl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

#retail-math-app .retail-math-field-lbl > span:first-child {
  font-size: 13px;
  font-weight: 700;
  color: var(--public-text);
}

#retail-math-app .retail-math-field-hint {
  font-size: 11px;
  color: var(--public-muted);
  font-weight: 500;
  line-height: 1.35;
}

#retail-math-app .retail-math-inprow {
  display: flex;
  gap: 8px;
  align-items: center;
}

#retail-math-app .retail-math-prefix {
  font-family: var(--rm-mono);
  font-size: 12px;
  color: var(--public-muted);
  padding: 8px 10px;
  border: 1px solid var(--public-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  min-width: 42px;
  text-align: center;
  flex-shrink: 0;
}

[data-theme="light"] #retail-math-app .retail-math-prefix {
  background: #f6f7fb;
}

#retail-math-app .retail-math-inprow input {
  width: 100%;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--public-border);
  background: rgba(2, 6, 23, 0.28);
  color: var(--public-text);
  outline: none;
  font-size: 13px;
  font-family: var(--rm-mono);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="light"] #retail-math-app .retail-math-inprow input {
  background: #ffffff;
}

#retail-math-app .retail-math-inprow input:focus {
  border-color: rgba(var(--public-primary-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--public-primary-rgb), 0.12);
}

#retail-math-app .retail-math-mm-toggle {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed rgba(var(--public-primary-rgb), 0.35);
  border-radius: 12px;
  background: rgba(var(--public-primary-rgb), 0.05);
}

#retail-math-app .retail-math-radio {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  color: var(--public-muted);
  font-weight: 600;
  cursor: pointer;
  line-height: 1.35;
}

#retail-math-app .retail-math-radio input {
  width: auto;
  margin-top: 2px;
  accent-color: var(--public-primary);
}

#retail-math-app .retail-math-radio em {
  font-style: normal;
  color: var(--public-primary);
  font-weight: 650;
}

#retail-math-app .retail-math-input-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 14px;
}

#retail-math-app .retail-math-results {
  min-width: 0;
}

#retail-math-app .retail-math-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

#retail-math-app .retail-math-tab {
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--public-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  text-align: center;
}

#retail-math-app .retail-math-tab:hover {
  color: var(--public-text);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

#retail-math-app .retail-math-tab.active,
#retail-math-app .retail-math-tab[aria-selected="true"] {
  color: var(--public-text);
  border-color: var(--public-primary);
  background: rgba(var(--public-primary-rgb), 0.12);
}

[data-theme="light"] #retail-math-app .retail-math-tab {
  background: #eef1f7;
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] #retail-math-app .retail-math-tab:hover {
  background: #e5e9f2;
}

[data-theme="light"] #retail-math-app .retail-math-tab.active,
[data-theme="light"] #retail-math-app .retail-math-tab[aria-selected="true"] {
  background: rgba(var(--public-primary-rgb), 0.12);
  border-color: var(--public-primary);
  color: var(--public-text);
}

#retail-math-app .retail-math-panel[hidden] {
  display: none;
}

#retail-math-app .retail-math-panel-header {
  margin-bottom: 16px;
}

#retail-math-app .retail-math-panel-header h2 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--public-text);
}

#retail-math-app .retail-math-panel-header p {
  margin: 0;
  font-size: 14px;
  color: var(--public-muted);
  line-height: 1.45;
}

#retail-math-app .retail-math-kpirow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  overflow: visible;
}

#retail-math-app .retail-math-kpi {
  position: relative;
  z-index: 0;
  padding: 16px 16px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  overflow: visible;
}

#retail-math-app .retail-math-kpi:has(.retail-math-kpi-info-wrap:hover),
#retail-math-app .retail-math-kpi:has(.retail-math-kpi-info-wrap:focus-within),
#retail-math-app .retail-math-kpi:has(.retail-math-kpi-info-wrap.is-open) {
  z-index: 5;
}

#retail-math-app .retail-math-kpi:hover,
#retail-math-app .retail-math-kpi:focus-within {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

#retail-math-app .retail-math-kpi:hover .retail-math-kpi-formula,
#retail-math-app .retail-math-kpi:focus-within .retail-math-kpi-formula {
  color: var(--public-primary);
}

[data-theme="light"] #retail-math-app .retail-math-kpi {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] #retail-math-app .retail-math-kpi:hover,
[data-theme="light"] #retail-math-app .retail-math-kpi:focus-within {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#retail-math-app .retail-math-kpi-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

#retail-math-app .retail-math-kpi-label {
  color: var(--public-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.35;
}

#retail-math-app .retail-math-abbr-link {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(var(--public-primary-rgb), 0.55);
  text-underline-offset: 2px;
  cursor: pointer;
}

#retail-math-app .retail-math-abbr-link:hover,
#retail-math-app .retail-math-abbr-link:focus-visible {
  color: var(--public-primary);
  outline: none;
}

#retail-math-app .retail-math-kpi-info-wrap {
  position: relative;
  flex-shrink: 0;
  z-index: 1;
}

#retail-math-app .retail-math-kpi-info-wrap:hover,
#retail-math-app .retail-math-kpi-info-wrap:focus-within,
#retail-math-app .retail-math-kpi-info-wrap.is-open {
  z-index: 6;
}

#retail-math-app .retail-math-kpi-info {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(var(--public-primary-rgb), 0.45);
  background: rgba(var(--public-primary-rgb), 0.1);
  color: var(--public-primary);
  font-size: 11px;
  font-weight: 800;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

#retail-math-app .retail-math-kpi-info:hover,
#retail-math-app .retail-math-kpi-info:focus-visible,
#retail-math-app .retail-math-kpi-info-wrap.is-open .retail-math-kpi-info {
  background: rgba(var(--public-primary-rgb), 0.2);
  border-color: var(--public-primary);
  outline: none;
}

#retail-math-app .retail-math-kpi-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 200px;
  max-width: min(280px, 70vw);
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(var(--public-primary-rgb), 0.45);
  background: var(--public-surface, #16161a);
  box-shadow: var(--public-shadow-lg, 0 16px 40px rgba(0, 0, 0, 0.35));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 8;
}

#retail-math-app .retail-math-kpi-popover::before {
  content: "";
  position: absolute;
  right: 8px;
  top: -6px;
  width: 10px;
  height: 10px;
  background: inherit;
  border-left: 1px solid rgba(var(--public-primary-rgb), 0.45);
  border-top: 1px solid rgba(var(--public-primary-rgb), 0.45);
  transform: rotate(45deg);
}

#retail-math-app .retail-math-kpi-info-wrap:hover .retail-math-kpi-popover,
#retail-math-app .retail-math-kpi-info-wrap:focus-within .retail-math-kpi-popover,
#retail-math-app .retail-math-kpi-info-wrap.is-open .retail-math-kpi-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

#retail-math-app .retail-math-kpi-popover-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--public-muted);
  margin-bottom: 6px;
}

#retail-math-app .retail-math-kpi-popover-formula {
  font-family: var(--rm-mono);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
  color: var(--public-primary);
  word-break: break-word;
}

#retail-math-app .retail-math-kpi-popover-example {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--public-border);
  font-family: var(--rm-mono);
  font-size: 12px;
  color: var(--public-muted);
}

[data-theme="light"] #retail-math-app .retail-math-kpi-popover {
  background: #ffffff;
  border-color: rgba(var(--public-primary-rgb), 0.4);
}

#retail-math-app .retail-math-kpi-value {
  font-family: var(--rm-mono);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--public-text);
  line-height: 1.2;
  margin-bottom: 8px;
}

#retail-math-app .retail-math-kpi-formula {
  font-family: var(--rm-mono);
  font-size: 11px;
  line-height: 1.4;
  color: var(--public-muted);
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.2s ease;
}

[data-theme="light"] #retail-math-app .retail-math-kpi-formula {
  border-top-color: rgba(0, 0, 0, 0.08);
}

#retail-math-app .retail-math-kpi-example {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  font-family: var(--rm-mono);
  color: var(--public-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] #retail-math-app .retail-math-kpi-example {
  background: #f0f2f7;
  border-color: rgba(0, 0, 0, 0.08);
}

#retail-math-app .retail-math-abbr-back {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(var(--public-primary-rgb), 0.4);
  background: rgba(var(--public-primary-rgb), 0.1);
  color: var(--public-primary);
  font-size: 13px;
  font-weight: 650;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

#retail-math-app .retail-math-abbr-back:hover,
#retail-math-app .retail-math-abbr-back:focus-visible {
  background: rgba(var(--public-primary-rgb), 0.18);
  border-color: var(--public-primary);
  outline: none;
}

#retail-math-app .retail-math-abbr-back[hidden] {
  display: none;
}

#retail-math-app .retail-math-abbr-search-wrap {
  position: relative;
  max-width: 420px;
  margin-bottom: 16px;
}

#retail-math-app .retail-math-abbr-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--public-muted);
  pointer-events: none;
}

#retail-math-app .retail-math-abbr-search {
  width: 100%;
  padding: 11px 12px 11px 38px;
  border-radius: 12px;
  border: 1px solid var(--public-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--public-text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="light"] #retail-math-app .retail-math-abbr-search {
  background: #ffffff;
}

#retail-math-app .retail-math-abbr-search:focus {
  border-color: rgba(var(--public-primary-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--public-primary-rgb), 0.12);
}

#retail-math-app .retail-math-abbr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#retail-math-app .retail-math-abbr-card {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#retail-math-app .retail-math-abbr-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="light"] #retail-math-app .retail-math-abbr-card {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] #retail-math-app .retail-math-abbr-card:hover {
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#retail-math-app .retail-math-abbr-term {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 750;
  color: var(--public-primary);
  letter-spacing: -0.01em;
}

#retail-math-app .retail-math-abbr-def {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--public-muted);
}

#retail-math-app .retail-math-abbr-empty {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--public-muted);
}

#retail-math-app .retail-math-abbr-card.retail-math-abbr-highlight {
  border-color: var(--public-primary);
  background: rgba(var(--public-primary-rgb), 0.12);
  box-shadow: 0 0 0 3px rgba(var(--public-primary-rgb), 0.15);
}

/* Motion */
@keyframes retail-math-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes retail-math-kpi-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.015); }
  100% { transform: scale(1); }
}

#retail-math-app .retail-math-panel-enter {
  animation: retail-math-panel-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#retail-math-app .retail-math-kpi-pulse .retail-math-kpi-value {
  animation: retail-math-kpi-pulse 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
  #retail-math-app .retail-math-panel-enter,
  #retail-math-app .retail-math-kpi-pulse .retail-math-kpi-value {
    animation: none;
  }

  #retail-math-app .retail-math-kpi,
  #retail-math-app .retail-math-abbr-card,
  #retail-math-app .retail-math-kpi-popover {
    transition: none;
  }

  #retail-math-app .retail-math-kpi:hover,
  #retail-math-app .retail-math-kpi:focus-within,
  #retail-math-app .retail-math-abbr-card:hover {
    transform: none;
  }
}

@media (max-width: 1100px) {
  #retail-math-app .retail-math-kpirow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  #retail-math-app .retail-math-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  #retail-math-app .retail-math-inputs-col {
    position: static;
  }

  #retail-math-app .retail-math-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  #retail-math-app .retail-math-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  #retail-math-app .retail-math-abbr-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .retail-math-section {
    padding-top: 8px;
  }

  #retail-math-app .retail-math-kpirow {
    grid-template-columns: 1fr;
  }

  #retail-math-app .retail-math-kpi-value {
    font-size: 20px;
  }

  #retail-math-app .retail-math-input-actions {
    justify-content: stretch;
  }

  #retail-math-app .retail-math-input-actions .btn {
    flex: 1;
  }
}

/* Price Pulse */
.price-pulse-upload-zone {
  border: 2px dashed var(--border, rgba(255, 255, 255, 0.2));
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

.price-pulse-upload-zone.dragover {
  border-color: var(--accent, var(--brand-highlight));
  background: rgba(79, 140, 255, 0.08);
}

.price-pulse-upload-text {
  margin: 0;
  color: var(--muted, rgba(255, 255, 255, 0.7));
}

.price-pulse-upload-progress {
  margin-top: 16px;
}

.price-pulse-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.price-pulse-progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent, var(--brand-highlight));
  transition: width 0.2s ease;
}

.price-pulse-upload-status {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted, rgba(255, 255, 255, 0.7));
}

.price-pulse-upload-meta {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  display: grid;
  gap: 12px;
}

.price-pulse-upload-meta .field {
  margin: 0;
}

.price-pulse-drilldown-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(79, 140, 255, 0.12);
  border: 1px solid rgba(79, 140, 255, 0.25);
  font-size: 13px;
}

.pill-muted {
  opacity: 0.85;
}

.price-pulse-trend-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.price-pulse-trend-chart-wrap {
  height: 320px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background: var(--panel, rgba(255, 255, 255, 0.02));
}

.price-pulse-product-row {
  cursor: pointer;
}

.price-pulse-product-row:hover td {
  background: rgba(79, 140, 255, 0.08);
}

.price-pulse-pairing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .price-pulse-pairing-grid {
    grid-template-columns: 1fr;
  }
}

.price-pulse-pairing-col {
  min-height: 240px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  padding: 12px;
}

.price-pulse-col-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
}

.price-pulse-product-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
}

.price-pulse-product-item {
  text-align: left;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  padding: 10px 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.price-pulse-product-item.selected {
  border-color: var(--accent, var(--brand-highlight));
  background: rgba(79, 140, 255, 0.12);
}

.price-pulse-product-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.price-pulse-product-meta {
  display: block;
  font-size: 12px;
  color: var(--muted, rgba(255, 255, 255, 0.65));
  margin-top: 4px;
}

.price-pulse-retailer-group + .price-pulse-retailer-group {
  margin-top: 12px;
}

.price-pulse-retailer-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  color: var(--muted, rgba(255, 255, 255, 0.65));
}

.price-pulse-competitor-option {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  margin-bottom: 6px;
}

.price-pulse-pairing-actions,
.price-pulse-report-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.price-pulse-report-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 16px;
}

.price-pulse-checkbox-field {
  display: flex;
  align-items: end;
}

.price-pulse-report-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.price-pulse-report-status {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  min-height: 1.25em;
}

.price-pulse-report-dashboard-tabs {
  margin-bottom: 16px;
}

.price-pulse-report-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.price-pulse-report-section-wide {
  grid-column: 1 / -1;
}

.price-pulse-report-section {
  padding: 14px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background: var(--panel, rgba(255, 255, 255, 0.02));
}

.price-pulse-section-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, rgba(255, 255, 255, 0.65));
}

.price-pulse-report-coverage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.price-pulse-coverage-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.price-pulse-coverage-label {
  color: var(--muted, rgba(255, 255, 255, 0.65));
}

.price-pulse-coverage-value {
  font-weight: 700;
}

.price-pulse-breakdown-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 2fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.price-pulse-breakdown-label {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price-pulse-breakdown-bar-wrap {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.price-pulse-breakdown-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.price-pulse-breakdown-stat {
  font-size: 12px;
  color: var(--muted, rgba(255, 255, 255, 0.65));
  white-space: nowrap;
}

.price-pulse-report-map-container {
  height: 480px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

.price-pulse-report-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--muted, rgba(255, 255, 255, 0.65));
}

.price-pulse-map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.price-pulse-map-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.price-pulse-map-dot-walmart {
  background: #3b82f6;
  box-shadow: 0 0 0 2px #60a5fa;
}

.price-pulse-map-dot-undercut {
  background: #ef4444;
  box-shadow: 0 0 0 2px #f87171;
}

.price-pulse-map-dot-comp {
  background: #22c55e;
  box-shadow: 0 0 0 2px #4ade80;
}

#price-pulse-report-map-container .leaflet-container {
  height: 100%;
  width: 100%;
  background: #0b0b0d;
}

[data-theme="light"] #price-pulse-report-map-container .leaflet-container {
  background: #f6f7fb;
}

@media (max-width: 900px) {
  .price-pulse-report-section-grid,
  .price-pulse-report-coverage-grid {
    grid-template-columns: 1fr;
  }

  .price-pulse-breakdown-row {
    grid-template-columns: 1fr;
  }
}

tr.price-pulse-undercut td {
  background: rgba(239, 68, 68, 0.12);
}

[data-theme="light"] tr.price-pulse-undercut td {
  background: rgba(239, 68, 68, 0.08);
}

/* Review Radar */
.review-radar-scope-card {
  margin-bottom: 12px;
}

.review-radar-scope-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
  margin-bottom: 12px;
}

.review-radar-scope-label {
  display: block;
  font-size: 12px;
  margin-bottom: 6px;
  opacity: 0.8;
}

.review-radar-workspace-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 0;
  padding: 0;
  min-height: 0;
  flex-wrap: wrap;
}

.review-radar-period-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.review-radar-period-chips,
.review-radar-pop-control {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.review-radar-period-chip,
.review-radar-pop-chip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted, #94a3b8);
  font: inherit;
  font-size: 11px;
  font-weight: 560;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 7px;
  cursor: pointer;
}

.review-radar-period-chip:hover,
.review-radar-pop-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text, #e2e8f0);
}

.review-radar-period-chip.is-active,
.review-radar-pop-chip.is-active {
  border-color: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.55);
  background: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.16);
  color: var(--brand-highlight, #58d2f8);
}

.review-radar-period-chip:disabled,
.review-radar-pop-chip:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.review-radar-pop-label {
  font-size: 11px;
  color: var(--muted, #94a3b8);
  margin-right: 2px;
}

.review-radar-kpi-delta {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 550;
  line-height: 1.2;
}

.review-radar-kpi-delta.is-up {
  color: #4ade80;
}

.review-radar-kpi-delta.is-down {
  color: #f87171;
}

.review-radar-kpi-delta.is-flat,
.review-radar-kpi-delta.is-na {
  color: var(--muted, #94a3b8);
}

[data-theme="light"] .review-radar-period-chip,
[data-theme="light"] .review-radar-pop-chip {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .review-radar-period-chip.is-active,
[data-theme="light"] .review-radar-pop-chip.is-active {
  background: rgba(14, 165, 233, 0.12);
}

.review-radar-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.2;
  color: var(--muted, #94a3b8);
}

.review-radar-breadcrumb-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--brand-highlight, #58d2f8);
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.review-radar-breadcrumb-link:hover {
  text-decoration: underline;
}

.review-radar-breadcrumb-sep {
  opacity: 0.55;
}

#rr-breadcrumb-mode {
  color: inherit;
  font-weight: 550;
}

.review-radar-toolbar-icon-btn {
  position: relative;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  cursor: pointer;
  flex: 0 0 auto;
  padding: 0;
}

.review-radar-workspace-chrome > .review-radar-toolbar-icon-btn {
  width: 30px;
  height: 30px;
}

.review-radar-toolbar-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.review-radar-filters-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--brand-highlight, #58d2f8);
  color: #0b0b0d;
  font-size: 10px;
  font-weight: 650;
  line-height: 16px;
  text-align: center;
}

.review-radar-scope-control {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.review-radar-scope-control label {
  font-size: 12px;
  color: var(--muted, #94a3b8);
}

.review-radar-scope-control .filter-select,
.review-radar-compare-selectors .filter-select {
  min-height: 38px;
  width: 100%;
}

/* Must beat global `.field { display: grid }` / compare grid for [hidden]. */
.review-radar-scope-control[hidden],
.review-radar-compare-selectors[hidden] {
  display: none !important;
}

.review-radar-compare-selectors:not([hidden]) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  margin: 0;
}

.review-radar-hub-progress {
  margin-top: 8px;
  height: 6px;
  background: var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 999px;
  overflow: hidden;
  max-width: 280px;
}

.review-radar-hub-progress > div {
  height: 100%;
  background: var(--brand-highlight, #58d2f8);
  transition: width 0.3s ease;
}

/* Use :not([hidden]) so display:grid does not override the hidden attribute. */
.review-radar-filters-host:not([hidden]),
.review-radar-filters-modal:not([hidden]) {
  display: grid;
  gap: 12px;
}

.review-radar-filters-host[hidden],
.review-radar-filters-modal[hidden] {
  display: none !important;
}

.review-radar-filters-modal .field-row,
.review-radar-filters-host .field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.review-radar-filter-chip {
  cursor: pointer;
  border: 0;
}

.review-radar-scope-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 4px;
}

.review-radar-product-hero {
  position: relative;
  margin: 4px 0 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(var(--brand-highlight-rgb, 96, 165, 250), 0.08), transparent 55%),
    rgba(255, 255, 255, 0.04);
}

.review-radar-product-hero-empty {
  margin: 0;
  padding: 4px 0;
  font-size: 13px;
}

.review-radar-product-hero-inner {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px 18px;
  align-items: center;
}

.review-radar-product-hero-image {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

.review-radar-product-hero-image-fallback {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

.review-radar-product-hero-copy {
  min-width: 0;
}

.review-radar-product-hero-title {
  margin: 0 0 4px;
  font-size: 1.2rem;
  line-height: 1.25;
  font-weight: 650;
}

.review-radar-product-hero-sub {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
}

.review-radar-product-hero-brand {
  color: inherit;
  opacity: 0.95;
}

.review-radar-product-hero-retailer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  color: inherit;
}

.review-radar-product-hero-retailer-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.review-radar-product-hero-sep {
  opacity: 0.55;
}

.review-radar-product-hero-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--brand-highlight, #58d2f8);
  text-decoration: none;
}

.review-radar-product-hero-link:hover {
  text-decoration: underline;
}

@media (max-width: 820px) {
  .review-radar-product-hero-inner {
    grid-template-columns: 64px minmax(0, 1fr);
  }
}

.review-radar-theme-drill-board {
  margin-bottom: 16px;
}

.review-radar-theme-drill-header {
  margin-bottom: 12px;
}

.review-radar-theme-drill-crumbs {
  margin-top: 10px;
}

.review-radar-theme-drill-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
}

.review-radar-theme-drill-crumb {
  border: 0;
  background: transparent;
  color: var(--brand-highlight);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.review-radar-theme-drill-crumb:hover {
  text-decoration: underline;
}

.review-radar-theme-drill-grid {
  margin-bottom: 12px;
}

#rr-theme-drill-detail {
  margin-top: 4px;
}

.review-radar-aspect-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.review-radar-aspect-card {
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
}

.review-radar-aspect-card.aspect-neg {
  border-color: rgba(239, 68, 68, 0.45);
}

.review-radar-aspect-card.aspect-pos {
  border-color: rgba(34, 197, 94, 0.45);
}

.review-radar-aspect-card-label {
  font-weight: 650;
  font-size: 13px;
}

.review-radar-aspect-card-owner {
  font-size: 11px;
  margin: 2px 0 8px;
}

.review-radar-aspect-owner-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.12);
  color: var(--accent, #0ea5e9);
}

.review-radar-aspect-drill-highlight {
  outline: 2px solid var(--accent, #0ea5e9);
  outline-offset: 2px;
}

.review-radar-kpi-grid-primary {
  margin-bottom: 0.75rem;
}

.review-radar-trust-details,
.review-radar-more-charts,
.review-radar-more-actions {
  margin: 0.75rem 0 1rem;
}

.review-radar-trust-details > summary,
.review-radar-more-charts > summary,
.review-radar-more-actions > summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.review-radar-situation {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0 0 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(34, 197, 94, 0.28);
  background: var(--okBg);
  color: var(--text);
}

.review-radar-situation-main {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.review-radar-situation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.review-radar-situation-clickable .review-radar-situation-main {
  cursor: pointer;
  border-radius: 8px;
  outline: none;
}

.review-radar-situation-clickable .review-radar-situation-main:hover,
.review-radar-situation-clickable .review-radar-situation-main:focus-visible {
  background: rgba(255, 255, 255, 0.04);
}

.review-radar-situation-detail-btn {
  appearance: none;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.review-radar-situation-detail-btn:hover {
  border-color: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.5);
  background: rgba(255, 255, 255, 0.12);
}

.review-radar-verdict-detail {
  display: grid;
  gap: 1.1rem;
}

.review-radar-verdict-summary {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.review-radar-verdict-counts {
  margin: 0;
  font-size: 13px;
}

.review-radar-verdict-section-title {
  margin: 0 0 0.55rem;
  font-size: 14px;
  font-weight: 650;
}

.review-radar-verdict-list {
  display: grid;
  gap: 0.7rem;
}

.review-radar-verdict-item {
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}

.review-radar-verdict-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}

.review-radar-verdict-item-kind {
  display: inline-flex;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.review-radar-verdict-why {
  margin: 0.45rem 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.review-radar-verdict-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.review-radar-verdict-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
}

.review-radar-verdict-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.review-radar-verdict-owner,
.review-radar-verdict-score {
  font-size: 12px;
}

.review-radar-situation-watch {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
}

.review-radar-situation-at_risk {
  background: var(--dangerBg);
  border-color: rgba(239, 68, 68, 0.35);
}

.review-radar-situation-insufficient {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}

.review-radar-situation-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}

.review-radar-situation-story {
  margin: 0;
  width: 100%;
  font-size: 14px;
  line-height: 1.45;
}

.review-radar-situation-ai-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0.02em;
  color: var(--muted);
  line-height: 1.3;
}

.review-radar-situation-ai-meta.is-fresh {
  color: var(--brand-highlight, #58d2f8);
}

.review-radar-situation-ai-pending {
  box-shadow: inset 0 0 0 1px rgba(88, 210, 248, 0.22);
}

.review-radar-situation-drivers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.review-radar-situation-driver {
  appearance: none;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.28rem 0.55rem;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.2;
  cursor: pointer;
  text-align: left;
}

.review-radar-situation-driver:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.45);
}

span.review-radar-situation-driver {
  cursor: default;
}

.review-radar-situation-driver-aspect {
  border-color: rgba(239, 68, 68, 0.28);
}

.review-radar-situation-driver-grudging,
.review-radar-situation-driver-leading,
.review-radar-situation-driver-anomaly {
  border-color: rgba(245, 158, 11, 0.3);
}

.review-radar-top-actions {
  margin: 0 0 1rem;
}

.review-radar-top-actions > .review-radar-chart-title {
  margin-bottom: 0.55rem;
}

.review-radar-top-actions-list,
.review-radar-actions-list,
.review-radar-actions-grid {
  display: grid;
  gap: 0.75rem;
}

.review-radar-product-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}

.review-radar-action-card {
  border-left: 4px solid var(--border);
  color: var(--text);
}

.review-radar-action-card.severity-critical {
  border-left-color: #ef4444;
}

.review-radar-action-card.severity-watch {
  border-left-color: #f59e0b;
}

.review-radar-action-card.severity-healthy {
  border-left-color: #22c55e;
}

.review-radar-action-card-compact {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0;
  border-left-width: 4px;
  padding: 12px 14px;
}

.review-radar-action-card-compact .review-radar-action-body {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
}

.review-radar-action-title {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--text);
  letter-spacing: -0.01em;
}

.review-radar-action-description {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.review-radar-action-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-top: 8px;
}

.review-radar-action-sev {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  flex-shrink: 0;
  padding-top: 3px;
  min-width: 3.4rem;
}

.review-radar-action-card.severity-critical .review-radar-action-sev {
  color: #f87171;
}

.review-radar-action-card.severity-watch .review-radar-action-sev {
  color: #fbbf24;
}

.review-radar-action-card.severity-healthy .review-radar-action-sev {
  color: #4ade80;
}

.review-radar-action-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.review-radar-action-head .review-radar-signal-link {
  margin-left: auto;
}

.review-radar-action-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
}

.review-radar-chip-delta {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  margin-left: 0.15rem;
}

.review-radar-chip-delta.is-up {
  color: #4ade80;
}

.review-radar-chip-delta.is-down {
  color: #f87171;
}

.review-radar-chip-delta.is-flat,
.review-radar-chip-delta.is-na {
  color: var(--muted, #94a3b8);
}

[data-theme="light"] .review-radar-chip-delta.is-up {
  color: #15803d;
}

[data-theme="light"] .review-radar-chip-delta.is-down {
  color: #b91c1c;
}

.review-radar-chart-delta-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.8rem;
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 11px;
}

.review-radar-chart-delta-summary span {
  white-space: nowrap;
}

.review-radar-chart-delta-summary .is-up {
  color: #4ade80;
}

.review-radar-chart-delta-summary .is-down {
  color: #f87171;
}

.review-radar-chart-delta-summary .is-flat {
  color: var(--muted, #94a3b8);
}

[data-theme="light"] .review-radar-chart-delta-summary .is-up {
  color: #15803d;
}

[data-theme="light"] .review-radar-chart-delta-summary .is-down {
  color: #b91c1c;
}

.review-radar-signal-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--brand-highlight);
  cursor: pointer;
}

.review-radar-signal-link:hover,
.review-radar-signal-link:focus-visible {
  background: rgba(var(--brand-highlight-rgb), 0.14);
  border-color: rgba(var(--brand-highlight-rgb), 0.35);
  outline: none;
}

.review-radar-signal-link-icon {
  display: block;
}

.review-radar-signals-pills {
  margin-bottom: 1rem;
}

.review-radar-evidence-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.75rem;
  border-radius: 8px;
  color: var(--text);
  background: rgba(var(--brand-highlight-rgb), 0.1);
  border: 1px solid rgba(var(--brand-highlight-rgb), 0.28);
}

.review-radar-evidence-bar-actions {
  display: flex;
  gap: 0.5rem;
}

.review-radar-share-packs {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: 0.75rem;
}

.review-radar-share-pack {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  padding: 0.85rem;
  display: grid;
  gap: 0.5rem;
  color: var(--text);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.04));
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.review-radar-share-pack h4 {
  margin: 0;
  color: var(--text);
}

.review-radar-share-receipt {
  margin: 0.5rem 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* Review Radar light-mode surfaces (match app .card / api-metric-card) */
[data-theme="light"] .review-radar-situation-insufficient {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .review-radar-situation-chip {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .review-radar-share-pack {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 1));
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .review-radar-situation-driver {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .review-radar-action-metric,
[data-theme="light"] .review-radar-signal-link,
[data-theme="light"] .review-radar-kpi,
[data-theme="light"] .review-radar-aspect-card,
[data-theme="light"] .review-radar-product-hero,
[data-theme="light"] .review-radar-cohort-card,
[data-theme="light"] .review-radar-metric-formula {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .review-radar-signal-link:hover,
[data-theme="light"] .review-radar-signal-link:focus-visible {
  background: rgba(var(--brand-highlight-rgb), 0.12);
}

[data-theme="light"] .review-radar-product-hero {
  background:
    linear-gradient(135deg, rgba(var(--brand-highlight-rgb, 96, 165, 250), 0.1), transparent 55%),
    #ffffff;
}

[data-theme="light"] .review-radar-product-hero-image,
[data-theme="light"] .review-radar-product-hero-image-fallback {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .review-radar-action-card.severity-critical .review-radar-action-sev {
  color: #dc2626;
}

[data-theme="light"] .review-radar-action-card.severity-watch .review-radar-action-sev {
  color: #d97706;
}

[data-theme="light"] .review-radar-action-card.severity-healthy .review-radar-action-sev {
  color: #16a34a;
}

[data-theme="light"] .pill-success {
  color: #15803d;
}

[data-theme="light"] .pill-danger {
  color: #b91c1c;
}

.review-radar-compare-overview,
.review-radar-compare-actions {
  margin: 0.75rem 0 1rem;
}

.review-radar-aspect-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}

.review-radar-aspects-drill {
  display: grid;
  gap: 12px;
}

.review-radar-aspect-samples {
  display: grid;
  gap: 8px;
}

.review-radar-cohorts-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.review-radar-cohort-card {
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 10px;
  padding: 12px 14px;
}

.review-radar-cohort-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.review-radar-compare-exemplars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.pill-success {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(34, 197, 94, 0.18);
  color: #16a34a;
}

.pill-danger {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(239, 68, 68, 0.18);
  color: #dc2626;
}

.review-radar-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
}

.review-radar-filters .field {
  min-width: 140px;
  flex: 1 1 140px;
}

.review-radar-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding-bottom: 8px;
}

.review-radar-upload-zone {
  border: 2px dashed var(--border, rgba(255, 255, 255, 0.15));
  border-radius: 12px;
  padding: 28px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

.review-radar-upload-zone.dragover {
  border-color: var(--brand-highlight);
  background: rgba(var(--brand-highlight-rgb), 0.08);
}

.review-radar-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.review-radar-kpi {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.review-radar-kpi-label {
  font-size: 12px;
  color: var(--muted, rgba(255, 255, 255, 0.65));
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.review-radar-metric-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted, rgba(255, 255, 255, 0.55));
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.review-radar-metric-help-btn:hover,
.review-radar-metric-help-btn:focus-visible {
  color: var(--brand-highlight, #58d2f8);
  background: rgba(var(--brand-highlight-rgb), 0.15);
  outline: none;
}

.review-radar-chart-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.review-radar-metric-help-body p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
}

.review-radar-metric-help-heading {
  font-size: 13px;
  font-weight: 600;
  margin: 16px 0 8px;
  color: var(--text, #fff);
}

.review-radar-metric-help-heading:first-child {
  margin-top: 0;
}

.review-radar-metric-help-list {
  margin: 0 0 12px;
  padding-left: 1.25rem;
  font-size: 14px;
  line-height: 1.55;
}

.review-radar-metric-help-list li {
  margin-bottom: 6px;
}

.review-radar-metric-help-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 12px;
  font-size: 13px;
}

.review-radar-metric-help-table th,
.review-radar-metric-help-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

.review-radar-metric-help-table th {
  font-weight: 600;
  color: var(--muted, rgba(255, 255, 255, 0.65));
}

.review-radar-metric-help-context,
.review-radar-metric-help-note {
  font-size: 13px;
  color: var(--muted, rgba(255, 255, 255, 0.75));
  margin: 0 0 12px;
  line-height: 1.5;
}

.review-radar-metric-formula {
  font-size: 13px;
  color: var(--muted, rgba(255, 255, 255, 0.7));
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

.review-radar-export-buttons .btn {
  gap: 6px;
}

.review-radar-kpi-value {
  font-size: 22px;
  font-weight: 600;
}

.review-radar-kpi-warn {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.08);
}

.review-radar-insights-intro {
  margin: 0 0 16px;
}

.review-radar-insights-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.review-radar-insights-grid .review-radar-chart-wide {
  grid-column: 1 / -1;
}

.review-radar-insight-card {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.review-radar-insight-visual {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.review-radar-insight-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  border-radius: 12px;
  background: rgba(var(--brand-highlight-rgb), 0.08);
  border: 1px solid rgba(var(--brand-highlight-rgb), 0.18);
  text-align: center;
}

.review-radar-insight-hero-warn {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.35);
}

.review-radar-insight-hero-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.review-radar-insight-hero-label {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted, rgba(255, 255, 255, 0.65));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.review-radar-insight-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

.review-radar-insight-stat-row .review-radar-insight-hero {
  padding: 12px 10px;
}

.review-radar-insight-stat-row .review-radar-insight-hero-value {
  font-size: 22px;
}

.review-radar-insight-chart-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.review-radar-insight-chart-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}

.review-radar-insight-chart-panel-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, rgba(255, 255, 255, 0.7));
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.review-radar-insight-chart-sm {
  position: relative;
  min-height: 200px;
}

.review-radar-insight-chart-sm canvas {
  height: 200px !important;
  max-height: 200px;
}

.review-radar-insight-chart-md {
  position: relative;
  min-height: 280px;
}

.review-radar-insight-chart-md canvas {
  height: 260px !important;
  max-height: 260px;
}

.review-radar-insight-chart-donut {
  position: relative;
  min-height: 220px;
  max-width: 280px;
  margin: 0 auto;
}

.review-radar-insight-chart-donut canvas {
  height: 220px !important;
  max-height: 220px;
}

.review-radar-insight-polarization {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 1.4fr);
  gap: 16px;
  align-items: center;
}

.review-radar-insight-cohort-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.review-radar-cohort-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

.review-radar-cohort-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.review-radar-cohort-divergent .review-radar-cohort-dot {
  background: var(--brand-highlight);
}

.review-radar-cohort-grudging .review-radar-cohort-dot {
  background: var(--public-warning, #f59e0b);
}

.review-radar-cohort-aligned .review-radar-cohort-dot {
  background: var(--public-success, #10b981);
}

.review-radar-insight-flags {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-radar-insight-flag {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.review-radar-insight-flag-icon {
  flex-shrink: 0;
  font-size: 14px;
}

.review-radar-insight-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 160px;
  padding: 24px;
  border-radius: 10px;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--border, rgba(255, 255, 255, 0.12));
}

.review-radar-insight-empty-icon {
  font-size: 28px;
  opacity: 0.5;
}

.review-radar-insight-empty p {
  margin: 0;
  font-size: 13px;
  color: var(--muted, rgba(255, 255, 255, 0.6));
  max-width: 36ch;
}

.review-radar-insight-compare-guide {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.review-radar-compare-guide-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  background: rgba(var(--brand-highlight-rgb), 0.06);
  border: 1px solid rgba(var(--brand-highlight-rgb), 0.15);
}

.review-radar-compare-guide-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  background: var(--brand-highlight);
  color: #fff;
  flex-shrink: 0;
}

.review-radar-insight-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.review-radar-insight-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.review-radar-insight-table {
  font-size: 12px;
}

.review-radar-compare-adv-title {
  margin: 20px 0 10px;
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .review-radar-insights-grid {
    grid-template-columns: 1fr;
  }

  .review-radar-insight-chart-grid-2,
  .review-radar-insight-polarization {
    grid-template-columns: 1fr;
  }
}

.review-radar-divergence-panel {
  margin-bottom: 16px;
}

.review-radar-divergence-insight {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
  background: rgba(var(--brand-highlight-rgb), 0.08);
  border: 1px solid rgba(var(--brand-highlight-rgb), 0.2);
}

.review-radar-divergence-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.review-radar-divergence-body,
.review-radar-divergence-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.review-radar-divergence-chart-wrap {
  min-height: 240px;
  min-width: 0;
}

.review-radar-divergence-chart-wrap canvas {
  height: 220px !important;
  max-height: 220px;
}

.review-radar-divergence-matrix-wrap {
  min-width: 0;
  overflow: visible;
}

.review-radar-divergence-matrix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.review-radar-divergence-star-card {
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  min-width: 0;
}

.review-radar-divergence-star-high {
  border-color: rgba(var(--brand-highlight-rgb), 0.25);
}

.review-radar-divergence-star-warn {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.06);
}

.review-radar-divergence-star-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
}

.review-radar-divergence-star-label {
  font-size: 18px;
  font-weight: 700;
}

.review-radar-divergence-star-high .review-radar-divergence-star-label {
  color: var(--brand-highlight, #58d2f8);
}

.review-radar-divergence-star-count {
  font-size: 11px;
  color: var(--muted, rgba(255, 255, 255, 0.6));
}

.review-radar-divergence-star-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.review-radar-divergence-mini-bar {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 6px;
}

.review-radar-divergence-mini-label {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.review-radar-divergence-mini-label.pos { color: var(--public-success, #10b981); }
.review-radar-divergence-mini-label.neu { color: #94a3b8; }
.review-radar-divergence-mini-label.neg { color: #ef4444; }

.review-radar-divergence-mini-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.review-radar-divergence-mini-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.review-radar-divergence-mini-fill.pos { background: var(--public-success, #10b981); }
.review-radar-divergence-mini-fill.neu { background: #94a3b8; }
.review-radar-divergence-mini-fill.neg { background: #ef4444; }

.review-radar-divergence-mini-pct {
  font-size: 11px;
  text-align: right;
  color: var(--muted, rgba(255, 255, 255, 0.75));
}

.review-radar-divergence-star-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.06));
  font-size: 11px;
  color: var(--muted, rgba(255, 255, 255, 0.65));
}

.review-radar-divergence-samples-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.review-radar-divergence-sample-card {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

.review-radar-divergence-sample-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
}

.review-radar-divergence-sample-rating {
  font-weight: 600;
}

.review-radar-divergence-sample-retailer {
  color: var(--muted, rgba(255, 255, 255, 0.6));
  font-size: 11px;
}

.review-radar-divergence-sample-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text, inherit);
  word-break: break-word;
}

.review-radar-divergence-matrix th,
.review-radar-divergence-matrix td {
  font-size: 12px;
  white-space: normal;
}

.review-radar-divergence-cell-pos {
  background: rgba(34, 197, 94, 0.1);
}

.review-radar-divergence-cell-neu {
  background: rgba(148, 163, 184, 0.12);
}

.review-radar-divergence-cell-neg {
  background: rgba(239, 68, 68, 0.1);
}

.review-radar-divergence-cell-warn {
  background: rgba(239, 68, 68, 0.18);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.35);
}

.review-radar-divergence-cell-caution {
  background: rgba(245, 158, 11, 0.15);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.35);
}

.review-radar-divergence-row-high td:first-child {
  color: var(--brand-highlight, #58d2f8);
}

.review-radar-divergence-footnote {
  margin: 8px 0 0;
  font-size: 11px;
}

.review-radar-divergence-subheading {
  margin: 16px 0 10px;
  font-size: 13px;
  font-weight: 600;
}

.review-radar-divergence-theme-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.review-radar-divergence-samples {
  margin-top: 4px;
  min-width: 0;
}

@media (max-width: 900px) {
  .review-radar-divergence-body,
  .review-radar-divergence-stack {
    gap: 12px;
  }

  .review-radar-divergence-matrix-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .review-radar-divergence-matrix-grid {
    grid-template-columns: 1fr;
  }
}

.review-radar-chart-empty {
  margin: 0;
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--muted, rgba(255, 255, 255, 0.6));
}

.review-radar-chart-empty[hidden],
.review-radar-insight-chart-md[hidden] {
  display: none !important;
}

.review-radar-kpi-help {
  cursor: help;
  opacity: 0.6;
  margin-left: 4px;
}

.review-radar-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.review-radar-chart-card {
  min-height: 280px;
}

.review-radar-chart-card canvas {
  height: 220px !important;
  max-height: 220px;
}

.review-radar-chart-wide {
  grid-column: 1 / -1;
}

.review-radar-dataset-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}

.review-radar-dataset-row.active {
  background: rgba(var(--brand-highlight-rgb), 0.06);
  margin: 0 -12px;
  padding: 12px;
  border-radius: 8px;
}

.review-radar-dataset-actions {
  display: flex;
  gap: 8px;
}

.review-radar-data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.review-radar-progress-panel {
  margin-top: 12px;
}

.review-radar-progress-panel[hidden] {
  display: none !important;
}

.review-radar-progress-bar {
  height: 8px;
  background: var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 999px;
  overflow: hidden;
}

.review-radar-progress-fill {
  height: 100%;
  width: 0;
  background: var(--brand-highlight);
  transition: width 0.2s ease;
}

.review-radar-progress-status {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted, rgba(255, 255, 255, 0.7));
}

.review-radar-page-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(var(--brand-highlight-rgb), 0.25);
  background: rgba(var(--brand-highlight-rgb), 0.08);
}

.review-radar-page-loading[hidden] {
  display: none !important;
}

.review-radar-page-loading-text {
  margin: 0;
  font-size: 13px;
  color: var(--muted, rgba(255, 255, 255, 0.75));
}

.review-radar-upload-zone.is-busy {
  opacity: 0.65;
  pointer-events: none;
}

.review-radar-log {
  margin-top: 12px;
  max-height: 160px;
  overflow: auto;
  font-size: 12px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  white-space: pre-wrap;
}

.review-radar-enrich-stats {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
}

.review-radar-insight-samples {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.review-radar-insight-sample {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  font-size: 13px;
}

.review-radar-insight-sample blockquote {
  margin: 6px 0 0;
  padding-left: 10px;
  border-left: 3px solid rgba(239, 68, 68, 0.5);
  color: var(--muted, #94a3b8);
  font-style: italic;
}

.review-radar-mc-max-pages {
  max-width: 120px;
}

.review-radar-field-hint {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.review-radar-radio-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.review-radar-sentiment {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}

.review-radar-sentiment.sent-pos {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.review-radar-sentiment.sent-neg {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.review-radar-sentiment.sent-neu {
  background: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}

.review-radar-text-cell {
  max-width: 280px;
}

.review-radar-export-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.review-radar-banner {
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.25);
  margin-bottom: 12px;
  font-size: 13px;
}

.review-radar-retailer-block {
  margin-bottom: 12px;
  font-size: 13px;
}

.review-radar-retailer-block ul {
  margin: 4px 0 0 18px;
}

@media (max-width: 900px) {
  .review-radar-chart-grid {
    grid-template-columns: 1fr;
  }

  .review-radar-compare-selectors:not([hidden]) {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

.permission-grid {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.permission-group {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

.permission-parent {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.permission-children {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding-left: 24px;
}

.permission-child {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

/* Authenticated app responsive hardening */
#view-app .card,
#view-app .tab-panel,
#view-app .api-tab-panel,
#view-app .locations-results,
#view-app .usage-content,
#view-app .api-detail-content,
#view-app .api-playground-request,
#view-app .api-playground-response,
#view-app .price-pulse-report-dashboard-panel,
#view-app .review-radar-chart-card,
#view-app .review-radar-insight-chart-panel {
  min-width: 0;
}

#view-app .table-wrap,
#view-app .api-logs-table-container,
#view-app .api-response-content,
#view-app .api-doc-code-block,
#view-app .admin-reviews-ccf-log,
#view-app .review-radar-log {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#view-app .api-url-input,
#view-app .api-key-input,
#view-app .api-json-content,
#view-app .api-doc-code-block code,
#view-app .review-radar-text-cell,
#view-app .review-radar-divergence-sample-text,
#view-app textarea {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#view-app .tabs,
#view-app .api-detail-tabs,
#view-app .api-response-tabs,
#view-app .price-pulse-report-dashboard-tabs {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

#view-app .api-tab,
#view-app .api-response-tab,
#view-app .tab {
  white-space: nowrap;
}

body[data-active-view="app"] .modal {
  width: min(1040px, calc(100vw - 24px));
}

body[data-active-view="app"] .modal-body > *,
body[data-active-view="app"] #modal-body > * {
  max-width: 100%;
}

body[data-active-view="app"] .modal-foot {
  flex-wrap: wrap;
}

@media (min-width: 1400px) {
  #view-app .content > * {
    padding-left: 24px;
    padding-right: 24px;
  }

  #view-app .api-detail-layout {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  }

  #view-app .locations-layout {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  }

  #view-app .usage-layout {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  }

  #view-app .review-radar-chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1700px) {
  #view-app .price-pulse-report-map-container {
    height: 560px;
  }

  #view-app #locations-map-container,
  #view-app #group-map-container,
  #view-app #comp-group-view-map {
    height: 680px;
  }
}

@media (max-width: 920px) {
  #view-app #page-location-viewer,
  #view-app #page-comp-groups,
  #view-app #page-groups,
  #view-app #page-products,
  #view-app #page-apis,
  #view-app #page-api-detail,
  #view-app #page-price-pulse,
  #view-app #page-review-radar,
  #view-app #page-usage,
  #view-app #page-admin {
    max-width: 100%;
  }

  #view-app .tabs,
  #view-app .api-detail-tabs,
  #view-app .api-response-tabs,
  #view-app .price-pulse-report-dashboard-tabs {
    flex-wrap: nowrap;
    padding-bottom: 4px;
    margin: 6px -2px 14px;
    scroll-snap-type: x proximity;
  }

  #view-app .tab,
  #view-app .api-tab,
  #view-app .api-response-tab {
    flex: 0 0 auto;
    min-height: 40px;
    scroll-snap-align: start;
  }

  #view-app .page-header {
    gap: 8px;
    margin: 0 0 14px;
  }

  #view-app .page-title {
    font-size: 21px;
    line-height: 1.15;
  }

  #view-app .page-subtitle,
  #view-app .card-subtitle {
    font-size: 12px;
    line-height: 1.45;
  }

  #view-app .card-header {
    margin-bottom: 10px;
  }

  #view-app .toolbar,
  #view-app .table-head,
  #view-app .api-logs-header,
  #view-app .price-pulse-trend-header {
    gap: 10px;
  }

  #view-app .page-header > .field,
  #view-app .page-header [style*="min-width"],
  #view-app .page-header [style*="width: 250px"] {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #view-app .toolbar-right,
  #view-app .table-actions,
  #view-app .price-pulse-report-actions,
  #view-app .price-pulse-pairing-actions,
  #view-app .review-radar-data-actions,
  #view-app .review-radar-export-buttons,
  #view-app .api-logs-filters {
    align-items: stretch;
  }

  #view-app .price-pulse-report-form,
  #view-app .review-radar-filters {
    grid-template-columns: 1fr;
  }

  #view-app .review-radar-filters {
    display: grid;
    gap: 10px;
  }

  #view-app .review-radar-filters .field,
  #view-app .review-radar-check {
    min-width: 0;
  }

  #view-app .review-radar-check {
    min-height: 42px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
  }

  #view-app .price-pulse-product-list {
    max-height: min(420px, 55vh);
  }

  #view-app .api-request-method-url {
    flex-wrap: wrap;
  }

  #view-app .api-method-btn {
    flex: 0 0 auto;
  }

  #view-app .api-url-input {
    flex: 1 1 260px;
    min-width: 0;
  }

  #view-app .api-detail-sidebar {
    position: static;
    max-height: none;
  }

  #view-app .api-endpoints-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #view-app .filter-sidebar .card,
  #view-app .locations-sidebar .card,
  #view-app .usage-sidebar .card {
    border-radius: 18px;
  }

  body[data-active-view="app"] .modal {
    width: min(720px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  body[data-active-view="app"] .modal-body {
    max-height: calc(100dvh - 170px);
  }
}

@media (max-width: 768px) {
  #view-app .card {
    padding: 14px;
  }

  #view-app .table {
    min-width: 560px;
  }

  #view-app #locations-map-container,
  #view-app #group-map-container,
  #view-app #comp-group-view-map,
  #view-app .price-pulse-report-map-container {
    height: min(420px, 62vh);
  }

  #view-app .review-radar-kpi-grid,
  #view-app .review-radar-insight-stats,
  #view-app .api-metrics-grid:not(.admin-api-usage-metrics) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-app .api-detail-header,
  #view-app .api-detail-header-right,
  #view-app .api-key-container,
  #view-app .date-range-container,
  #view-app .api-logs-filters,
  #view-app .price-pulse-trend-header,
  #view-app .review-radar-dataset-row {
    align-items: stretch;
    flex-direction: column;
  }

  #view-app .api-key-container,
  #view-app .date-range-container,
  #view-app .api-logs-filters {
    width: 100%;
  }

  #view-app .review-radar-dataset-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  #view-app .review-radar-workspace-chrome {
    align-items: flex-start;
  }

  #view-app .review-radar-period-bar {
    width: 100%;
    justify-content: flex-start;
    order: 3;
  }

  #view-app .review-radar-compare-selectors:not([hidden]) {
    width: 100%;
  }
}

@media (max-width: 520px) {
  #view-app .table {
    min-width: 520px;
  }

  #view-app .card {
    border-radius: 14px;
    padding: 12px;
  }

  #view-app .review-radar-kpi-grid,
  #view-app .review-radar-insight-stats,
  #view-app .api-metrics-grid:not(.admin-api-usage-metrics) {
    grid-template-columns: 1fr;
  }

  #view-app .row-actions,
  #view-app .group-actions,
  #view-app .review-radar-dataset-actions,
  #view-app .price-pulse-report-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  #view-app .row-actions .btn,
  #view-app .row-actions .link-btn,
  #view-app .group-actions .btn,
  #view-app .review-radar-dataset-actions .btn,
  #view-app .price-pulse-report-pagination .btn {
    width: 100%;
  }

  body[data-active-view="app"] .modal-head,
  body[data-active-view="app"] .modal-foot {
    padding-left: 12px;
    padding-right: 12px;
  }

  body[data-active-view="app"] .modal-body {
    padding: 12px;
  }
}

/* Search Monitor */
.sm-job-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin-bottom: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.sm-job-row:hover,
.sm-job-row.sm-job-active {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.04);
}

.sm-job-name {
  font-weight: 650;
  font-size: 14px;
}

.sm-job-meta {
  color: var(--muted-2);
  font-size: 12px;
}

.sm-status-error {
  color: var(--danger, #e55);
}

.sm-status-warn {
  color: var(--warning, #b8860b);
  font-weight: 600;
}

.sm-job-status-warn {
  color: var(--warning, #b8860b);
}

.sm-failures-error {
  display: inline-block;
  max-width: 28rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.sm-view-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}

.sm-view-job-field {
  flex: 1 1 240px;
  min-width: 200px;
  margin: 0;
}

.sm-view-summary {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
}

.sm-view-empty {
  margin: 0 0 14px;
}

.sm-view-config-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
}

.sm-view-saved-field {
  min-width: 10rem;
  flex: 0 1 12rem;
}

.sm-view-saved-field label {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
}

.sm-view-columns-summary {
  flex: 1 1 160px;
  font-size: 13px;
}

.sm-column-chooser-intro {
  margin: 0 0 8px;
  font-size: 13px;
}

.sm-column-chooser-count {
  margin: 0 0 10px;
  font-size: 12px;
}

.sm-column-chooser-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.sm-column-chooser-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(420px, 50vh);
  overflow: auto;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
}

.sm-column-chooser-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}

.sm-column-chooser-row:last-child {
  border-bottom: none;
}

.sm-column-chooser-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  font-size: 13px;
}

.sm-column-chooser-key {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.sm-column-chooser-actions {
  display: flex;
  gap: 4px;
}

.sm-column-chooser-foot {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sm-view-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.sm-view-filter-field {
  flex: 1 1 200px;
  min-width: 160px;
  margin: 0;
}

.sm-view-table-wrap {
  max-height: min(560px, 60vh);
  overflow: auto;
  margin-bottom: 12px;
}

.sm-view-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card, var(--surface));
}

.sm-view-table th.sm-view-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.sm-view-table th.sm-view-sortable:hover {
  background: var(--surface-hover, rgba(127, 127, 127, 0.08));
}

.sm-view-page-size-label {
  margin-left: 8px;
  font-size: 12px;
}

.sm-view-page-size {
  width: auto;
  min-width: 4.5rem;
  padding: 4px 8px;
  font-size: 13px;
}

.sm-view-title {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.sm-view-json {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  vertical-align: bottom;
}

.sm-view-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.sm-view-page-label {
  flex: 1 1 auto;
  min-width: 140px;
  font-size: 13px;
}

#sm-view-download-btn {
  margin-left: auto;
}

@media (max-width: 920px) {
  #page-search-monitor .sm-view-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  #page-search-monitor #sm-view-download-btn {
    margin-left: 0;
    width: 100%;
  }

  #page-search-monitor .sm-view-title {
    max-width: 160px;
  }
}


/* Cohort product picker + assortment callouts */
.rr-cohort-picker-list {
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  border-radius: 8px;
  margin-top: 8px;
}
.rr-cohort-picker-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
  cursor: pointer;
}
.rr-cohort-picker-row:last-child { border-bottom: 0; }
.rr-cohort-picker-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: rgba(0,0,0,0.04);
}
.rr-cohort-picker-thumb-empty { display: inline-block; }
.rr-cohort-picker-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rr-cohort-picker-name {
  font-weight: 600;
  font-size: 13px;
}
.rr-cohort-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.rr-cohort-picker-selected { margin: 8px 0; }
.review-radar-cohort-callouts-inner {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.review-radar-cohort-callout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.review-radar-cohort-callout.muted { cursor: default; opacity: 0.85; }
.review-radar-cohort-rank-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.review-radar-cohort-rank-grid .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 900px) {
  .review-radar-cohort-rank-grid { grid-template-columns: 1fr; }
}
.review-radar-cohort-rank-heading {
  margin: 0 0 8px;
  font-size: 14px;
}

/* Review Radar — Executive Brief + AI status */
.review-radar-ai-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
  align-self: center;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-radar-ai-status.is-pending {
  color: var(--text);
  opacity: 0.92;
}
.review-radar-ai-status.is-error {
  color: var(--danger, #ef4444);
  white-space: normal;
  max-width: 280px;
}
.review-radar-ai-status.is-ok {
  color: var(--muted);
}
.review-radar-ai-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--brand-highlight, #58d2f8);
  animation: spin 800ms linear infinite;
  vertical-align: -1px;
}
[data-theme="light"] .review-radar-ai-spinner {
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-top-color: var(--brand-highlight, #0b7ea4);
}
.review-radar-ai-pending-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(88, 210, 248, 0.28);
  background: rgba(88, 210, 248, 0.08);
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}
[data-theme="light"] .review-radar-ai-pending-bar {
  border-color: rgba(11, 126, 164, 0.22);
  background: rgba(11, 126, 164, 0.06);
}
.review-radar-ai-copy-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin: 8px 0 0;
}
#rr-ai-refresh-btn.is-loading {
  opacity: 0.85;
}
.review-radar-brief-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.review-radar-brief {
  display: grid;
  gap: 16px;
  max-width: 960px;
}
.review-radar-brief-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 800px) {
  .review-radar-brief-grid { grid-template-columns: 1fr; }
}
.review-radar-brief-section .card-title {
  font-size: 14px;
  margin: 0;
}
.review-radar-brief-urgency {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(0,0,0,0.12));
}
.review-radar-brief-urgency-critical {
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.06);
}
.review-radar-brief-urgency-watch {
  border-color: rgba(217, 119, 6, 0.35);
  background: rgba(217, 119, 6, 0.06);
}
.review-radar-brief-urgency-healthy {
  border-color: rgba(22, 163, 74, 0.35);
  background: rgba(22, 163, 74, 0.06);
}
.review-radar-brief-risks {
  display: grid;
  gap: 10px;
}
.review-radar-brief-risk {
  display: grid;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}
.review-radar-brief-risk:last-child { border-bottom: none; padding-bottom: 0; }
.review-radar-brief-risk-label { font-weight: 600; font-size: 14px; }
.review-radar-brief-badge-critical { background: rgba(220, 38, 38, 0.12); }
.review-radar-brief-badge-watch { background: rgba(217, 119, 6, 0.12); }
.review-radar-brief-bar-row {
  display: grid;
  grid-template-columns: minmax(80px, 140px) 1fr 48px;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}
.review-radar-brief-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--border, rgba(0,0,0,0.1));
  overflow: hidden;
}
.review-radar-brief-bar > span {
  display: block;
  height: 100%;
  background: var(--accent, #2563eb);
  border-radius: 999px;
}
.review-radar-brief-quotes {
  margin: 0;
  padding-left: 18px;
  line-height: 1.5;
}
.review-radar-brief-quotes li { margin-bottom: 8px; }
.review-radar-brief-status {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.review-radar-brief-actions li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}
.review-radar-brief-retailers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.review-radar-brief-bottom {
  border-left: 3px solid var(--accent, #2563eb);
}

/* Review Radar create-project wizard steps — brand highlight (Hero Text blue) */
.rr-wizard-foot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  width: 100%;
}
.rr-wizard-error {
  width: 100%;
  margin: 0 0 0.65rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  font-size: 0.92rem;
  line-height: 1.35;
}
.rr-wizard-error[hidden] {
  display: none !important;
}
[data-theme="light"] .rr-wizard-error {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(185, 28, 28, 0.35);
}
.rr-wizard-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
}
.rr-wizard-step-pill {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted, rgba(255, 255, 255, 0.6));
}
.rr-wizard-step-pill.active {
  border-color: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.55);
  background: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.18);
  color: var(--brand-highlight, #58d2f8);
  box-shadow: 0 0 0 3px rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.1);
}
.rr-wizard-step-pill.done {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.14);
  color: #4ade80;
}
[data-theme="light"] .rr-wizard-step-pill {
  background: rgba(10, 10, 12, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--muted, rgba(10, 10, 12, 0.55));
}
[data-theme="light"] .rr-wizard-step-pill.active {
  border-color: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.65);
  background: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.16);
  color: var(--brand-highlight-strong, #0082c8);
}
[data-theme="light"] .rr-wizard-step-pill.done {
  border-color: rgba(22, 163, 74, 0.35);
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}
.rr-wizard-empty-hint {
  margin: 0.35rem 0 0;
  font-size: 13px;
  color: var(--muted, rgba(255, 255, 255, 0.6));
}
.rr-wizard-empty-hint.is-error {
  color: #f87171;
}

/* Wizard layout rows */
.rr-wizard-field-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.rr-wizard-field-row .field {
  flex: 1 1 140px;
  min-width: 140px;
}
.rr-wizard-inline-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.rr-wizard-inline-row .filter-select {
  flex: 1;
  min-width: 0;
}
.rr-wizard-search-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: stretch;
}
.rr-wizard-search-bar .filter-select {
  flex: 1 1 180px;
  min-width: 180px;
}

/* Live search results list */
.rr-wizard-results {
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.02);
}
[data-theme="light"] .rr-wizard-results {
  background: rgba(10, 10, 12, 0.02);
}
.rr-search-result-row {
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  transition: background 120ms ease;
}
.rr-search-result-row:last-child {
  border-bottom: none;
}
.rr-search-result-row:hover {
  background: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.06);
}
.rr-search-result-row input[type="checkbox"] {
  margin-top: 4px;
  accent-color: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.8);
}
.rr-search-result-thumb {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.rr-search-result-thumb--empty {
  display: inline-block;
}
[data-theme="light"] .rr-search-result-thumb {
  background: rgba(10, 10, 12, 0.05);
}
.rr-search-result-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rr-search-result-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, rgba(255, 255, 255, 0.92));
  line-height: 1.35;
}
.rr-search-result-meta {
  font-size: 12px;
  color: var(--muted, rgba(255, 255, 255, 0.6));
  overflow-wrap: anywhere;
}

/* Advanced paste-IDs block */
.rr-wizard-advanced {
  margin-top: 0.75rem;
}
.rr-wizard-advanced summary {
  cursor: pointer;
}
.rr-wizard-advanced textarea {
  margin-top: 0.5rem;
  width: 100%;
  resize: vertical;
}
.rr-wizard-advanced .btn {
  margin-top: 0.4rem;
}

/* Schedule day checkboxes */
.rr-wizard-day-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.rr-wizard-day-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text, rgba(255, 255, 255, 0.92));
  cursor: pointer;
}
.rr-wizard-day-check input[type="checkbox"] {
  accent-color: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.8);
}

/* Step 5 review summary */
.rr-wizard-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  background: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.05);
}
.rr-wizard-summary dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, rgba(255, 255, 255, 0.6));
  margin: 0 0 2px;
}
.rr-wizard-summary dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, rgba(255, 255, 255, 0.92));
  overflow-wrap: anywhere;
}
.rr-wizard-review-list {
  max-height: 180px;
  overflow: auto;
  margin: 0 0 12px;
  padding: 4px 12px;
  list-style: none;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
}
.rr-wizard-review-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}
.rr-wizard-review-item:last-child {
  border-bottom: none;
}
.rr-wizard-review-name {
  color: var(--text, rgba(255, 255, 255, 0.92));
  min-width: 0;
}
.rr-wizard-review-item code {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--muted, rgba(255, 255, 255, 0.6));
}

/* Dark-mode secondary/ghost buttons need a light spinner stroke. */
.btn-secondary .spinner,
.btn-ghost .spinner {
  border-color: rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.75);
}
[data-theme="light"] .btn-secondary .spinner,
[data-theme="light"] .btn-ghost .spinner {
  border-color: rgba(0, 0, 0, 0.15);
  border-top-color: rgba(0, 0, 0, 0.5);
}

/* Wizard loading placeholder */
.rr-wizard-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 120px;
  padding: 24px;
  font-size: 13px;
  color: var(--muted, rgba(255, 255, 255, 0.6));
}
.rr-wizard-loading-spinner {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.25);
  border-top-color: var(--brand-highlight, #58d2f8);
  animation: spin 800ms linear infinite;
}

/* ---------- My Products (Input Manager) master–detail ---------- */
#page-products .page-title {
  font-size: clamp(18px, 1.45vw, 21px);
}
#page-products .page-subtitle {
  max-width: 760px;
  font-size: clamp(11.5px, 0.85vw, 12.5px);
  line-height: 1.45;
}
.my-products-page-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 340px;
  width: min(100%, 340px);
  margin-left: auto;
}
.my-products-page-search .input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  font-size: clamp(12px, 0.85vw, 13px);
}
.my-products-filter-btn {
  position: relative;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.my-products-filter-btn.active {
  color: var(--brand-highlight, #58d2f8);
  border-color: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.55);
  background: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.12);
}
[data-theme="light"] .my-products-filter-btn.active {
  color: var(--brand-highlight-strong, #0082c8);
}
.my-products-filter-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  border: 2px solid var(--bg);
  background: var(--brand-highlight, #58d2f8);
  color: #07151c;
  font-size: 10px;
  font-weight: 800;
  line-height: 13px;
  text-align: center;
}
.my-products-filter-count[hidden] {
  display: none !important;
}
#page-products .api-metric-card {
  padding: clamp(13px, 1.25vw, 18px);
}
#page-products .api-metric-label {
  font-size: clamp(11.5px, 0.85vw, 12.5px);
}
#page-products .api-metric-value {
  font-size: clamp(18px, 1.55vw, 22px);
}
#page-products .api-metric-card {
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
#page-products .api-metric-card.is-filtered {
  border-color: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.5);
  background: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.08);
}
[data-theme="light"] #page-products .api-metric-card.is-filtered {
  background: rgba(var(--brand-highlight-rgb, 0, 130, 200), 0.08);
}
.my-products-summary-filters:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.my-products-summary-filters[hidden] {
  display: none !important;
}
.my-products-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.4);
  border-radius: 999px;
  background: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.1);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}
.my-products-summary-pill > span {
  color: var(--brand-highlight, #58d2f8);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
[data-theme="light"] .my-products-summary-pill > span {
  color: var(--brand-highlight-strong, #0082c8);
}
.my-products-app-tabs {
  margin: 0 0 16px;
}
.my-products-app-tabs .tab {
  font-size: clamp(11.5px, 0.85vw, 12.5px);
}
.my-products-app-tabs .tab:disabled,
.my-products-app-tabs .tab[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}
.my-products-coming-soon {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.my-products-filter-form {
  display: grid;
  gap: 16px;
}
.my-products-filter-form .filter-select {
  width: 100%;
}
.my-products-card {
  padding: 0;
  overflow: hidden;
}
.my-products-card > .empty {
  padding: 32px 20px;
}
.my-products-loading:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 140px;
  font-size: 13px;
  color: var(--muted);
}
.my-products-loading[hidden],
.my-products-layout[hidden],
#my-products-pagination[hidden],
#my-products-empty[hidden] {
  display: none !important;
}
.my-products-loading-spinner {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.25);
  border-top-color: var(--brand-highlight, #58d2f8);
  animation: spin 800ms linear infinite;
}
.my-products-layout:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  min-height: 480px;
}
.my-products-list {
  border-right: 1px solid var(--border);
  overflow-y: auto;
  max-height: 70vh;
}
.mp-list-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background 120ms ease, border-color 120ms ease;
}
.mp-list-row:hover {
  background: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.05);
}
.mp-list-row.selected {
  background: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.1);
  border-left-color: var(--brand-highlight, #58d2f8);
}
.mp-thumb {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
}
.mp-thumb--empty {
  display: inline-block;
}
[data-theme="light"] .mp-thumb {
  background: rgba(10, 10, 12, 0.04);
}
.mp-list-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mp-list-topline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.mp-stars {
  color: #f5b301;
  font-size: 11px;
  letter-spacing: 1px;
  white-space: nowrap;
}
.mp-rating-count {
  font-size: 11px;
  color: var(--muted-2);
}
.mp-list-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mp-list-retailer {
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--brand-highlight, #58d2f8);
}
[data-theme="light"] .mp-list-retailer {
  color: var(--brand-highlight-strong, #0082c8);
}

/* Detail panel */
.my-products-detail {
  padding: 20px 24px;
  min-width: 0;
  overflow-y: auto;
  max-height: 70vh;
}
.mp-detail-header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.mp-detail-img {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
}
[data-theme="light"] .mp-detail-img {
  background: rgba(10, 10, 12, 0.04);
}
.mp-detail-heading {
  flex: 1;
  min-width: 0;
}
.mp-detail-brand {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2px;
}
.mp-detail-name {
  margin: 0 0 8px;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.mp-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 12px;
  color: var(--muted);
}
.mp-detail-retailer {
  font-weight: 700;
  text-transform: capitalize;
  color: var(--text);
}
.mp-detail-link {
  color: var(--brand-highlight, #58d2f8);
  text-decoration: none;
  font-weight: 600;
}
.mp-detail-link:hover {
  color: var(--brand-highlight-hover, #89e0ff);
  text-decoration: underline;
}
[data-theme="light"] .mp-detail-link {
  color: var(--brand-highlight-strong, #0082c8);
}
.mp-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}
[data-theme="light"] .mp-badge {
  background: rgba(10, 10, 12, 0.04);
}
.mp-badge--ok {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.35);
  color: #4ade80;
}
[data-theme="light"] .mp-badge--ok {
  background: rgba(22, 163, 74, 0.12);
  border-color: rgba(22, 163, 74, 0.3);
  color: #15803d;
}
.mp-badge--danger {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.35);
  color: #f87171;
}
[data-theme="light"] .mp-badge--danger {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.3);
  color: #dc2626;
}

/* Tabs (Summary only for now) */
.mp-tabs {
  display: flex;
  gap: 18px;
  margin: 18px 0 0;
  border-bottom: 1px solid var(--border);
}
.mp-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 2px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.mp-tab.active {
  color: var(--brand-highlight, #58d2f8);
  border-bottom-color: var(--brand-highlight, #58d2f8);
}
[data-theme="light"] .mp-tab.active {
  color: var(--brand-highlight-strong, #0082c8);
  border-bottom-color: var(--brand-highlight-strong, #0082c8);
}

/* Summary stats */
.mp-summary {
  padding-top: 18px;
}
.mp-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px 24px;
}
.mp-stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.mp-stat-value {
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
}
.mp-stat-value--price {
  color: #34d399;
}
[data-theme="light"] .mp-stat-value--price {
  color: #0f9d76;
}
.mp-stat-value--warn {
  color: #fbbf24;
}
[data-theme="light"] .mp-stat-value--warn {
  color: #b45309;
}
.mp-detail-desc {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.mp-detail-error {
  margin: 12px 0 0;
  font-size: 12px;
  color: #f87171;
}
.mp-detail-projects {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.mp-detail-projects .mp-stat-label {
  margin: 0;
}

@media (max-width: 860px) {
  .my-products-layout {
    grid-template-columns: 1fr;
  }
  .my-products-list {
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 40vh;
  }
  .my-products-detail {
    max-height: none;
  }
}

@media (max-width: 600px) {
  .my-products-page-search {
    flex-basis: 100%;
    width: 100%;
    margin-left: 0;
  }
  .my-products-detail {
    padding: 16px;
  }
  .mp-detail-img {
    flex-basis: 72px;
    width: 72px;
    height: 72px;
  }
  .mp-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
  }
}

/* Organization management */
.org-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.org-metric {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--surface-2, transparent);
}
.org-metric-label {
  font-size: 0.8rem;
  color: var(--muted, #6b7280);
  margin-bottom: 4px;
}
.org-metric-value {
  font-size: 1.25rem;
  font-weight: 650;
}
.org-invite-list,
.org-audit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.org-invite-list li,
.org-audit-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.org-audit-list time {
  font-variant-numeric: tabular-nums;
  color: var(--muted, #6b7280);
}

/* Suite usage (tenant Usage tab + admin Suite Usage) */
.suite-usage {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.suite-usage-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
}
.suite-usage-header-main {
  min-width: 0;
  flex: 1;
}
.suite-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.suite-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
}
.suite-status-pill--active {
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.35);
  background: rgba(22, 163, 74, 0.12);
}
.suite-status-pill--pending,
.suite-status-pill--past_due,
.suite-status-pill--unpaid {
  color: #d97706;
  border-color: rgba(217, 119, 6, 0.35);
  background: rgba(217, 119, 6, 0.12);
}
.suite-status-pill--canceled,
.suite-status-pill--none {
  color: var(--muted);
}
.suite-status-pill--role {
  color: var(--text);
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .suite-status-pill--role {
  background: rgba(0, 0, 0, 0.03);
}
.suite-status-pill--suspended {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.12);
}
[data-theme="light"] .suite-status-pill--suspended {
  color: #b91c1c;
}
.suite-health-line {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.suite-health-line--warn {
  color: #d97706;
}
.suite-health-line--critical {
  color: #dc2626;
}
.suite-meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.suite-meter {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  min-width: 0;
}
[data-theme="light"] .suite-meter {
  border-color: var(--border);
  background: var(--surface, #fff);
}
.suite-meter--warn {
  border-color: rgba(217, 119, 6, 0.4);
}
.suite-meter--critical {
  border-color: rgba(220, 38, 38, 0.45);
}
.suite-meter-label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}
.suite-meter-value {
  font-size: 1.35rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.suite-meter-value span {
  font-size: 0.95rem;
  font-weight: 550;
  color: var(--muted);
}
.suite-meter-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.suite-meter-bar {
  margin-top: 12px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
[data-theme="light"] .suite-meter-bar {
  background: rgba(0, 0, 0, 0.08);
}
.suite-meter-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.suite-meter--warn .suite-meter-fill {
  background: linear-gradient(90deg, #d97706, #fbbf24);
}
.suite-meter--critical .suite-meter-fill {
  background: linear-gradient(90deg, #dc2626, #f87171);
}
.suite-meter--skeleton {
  min-height: 110px;
  animation: suite-pulse 1.2s ease-in-out infinite;
}
@keyframes suite-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.85;
  }
}
.suite-wallets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.suite-wallet {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2, transparent);
}
.suite-wallet-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.suite-wallet-value {
  font-size: 1.15rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.suite-usage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.suite-usage-hints {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.admin-suite-usage-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
  margin: 16px 0 12px;
}
.admin-suite-usage-filters .field {
  margin: 0;
  min-width: 140px;
}
.admin-suite-usage-mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 72px;
}
.admin-suite-usage-mini-label {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.admin-suite-usage-mini-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
[data-theme="light"] .admin-suite-usage-mini-bar {
  background: rgba(0, 0, 0, 0.08);
}
.admin-suite-usage-mini-fill {
  height: 100%;
  border-radius: inherit;
  background: #2563eb;
}
.admin-suite-usage-mini--warn .admin-suite-usage-mini-fill {
  background: #d97706;
}
.admin-suite-usage-mini--critical .admin-suite-usage-mini-fill {
  background: #dc2626;
}
.admin-suite-usage-table td {
  vertical-align: middle;
}

/* Billing flow modals (capacity / volume / AI / calculator) */
.billing-flow {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.billing-flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.billing-flow-form .field {
  margin: 0;
}
.billing-flow-balance {
  max-width: 280px;
}
.billing-quote-card {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-theme="light"] .billing-quote-card {
  background: var(--surface, #fff);
}
.billing-quote-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  font-size: 14px;
}
.billing-quote-row span {
  color: var(--muted);
}
.billing-quote-row--accent {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 15px;
}
.billing-quote-bands {
  margin: 4px 0 0;
}
.billing-packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.billing-pack-card {
  text-align: left;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
[data-theme="light"] .billing-pack-card {
  border-color: var(--border);
  background: var(--surface, #fff);
}
.billing-pack-card:hover {
  border-color: rgba(37, 99, 235, 0.45);
}
.billing-pack-card.is-selected {
  border-color: rgba(37, 99, 235, 0.7);
  background: rgba(37, 99, 235, 0.12);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
}
.billing-pack-name {
  font-size: 13px;
  font-weight: 650;
  margin-bottom: 6px;
}
.billing-pack-credits {
  font-size: 1.1rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.billing-pack-price {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
}
.billing-pack-unit {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}
.billing-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.billing-preset-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.billing-preset-chip:hover {
  border-color: rgba(37, 99, 235, 0.45);
}
.billing-preset-chip.is-selected {
  border-color: rgba(37, 99, 235, 0.7);
  background: rgba(37, 99, 235, 0.14);
}
.billing-flow-status {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.billing-flow-status--error {
  color: #dc2626;
}
.billing-flow-status--warn {
  color: #d97706;
}
.billing-flow-status--ok {
  color: #16a34a;
}
.billing-envelope--inside {
  color: #16a34a;
}
.billing-envelope--outside {
  color: #d97706;
}

/* ========== PDP Backfill workbench (admin temp tool) ========== */
.pdp-backfill-workbench {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pdp-bf-header {
  margin-bottom: 0;
}

.pdp-bf-command {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 20px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="light"] .pdp-bf-command {
  background: rgba(0, 0, 0, 0.02);
}

.pdp-bf-command-status {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1 1 280px;
}

.pdp-bf-command-copy {
  min-width: 0;
}

.pdp-bf-config {
  margin: 0 0 4px;
}

.pdp-bf-eligible {
  margin: 0;
  font-size: 13px;
}

.pdp-bf-run-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.pdp-bf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.pdp-bf-field input[type="number"] {
  width: 92px;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface, rgba(255, 255, 255, 0.04));
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

[data-theme="light"] .pdp-bf-field input[type="number"] {
  background: #fff;
}

.pdp-bf-field--check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  text-transform: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  padding-bottom: 6px;
}

.pdp-bf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 14px;
}

@media (max-width: 960px) {
  .pdp-bf-grid {
    grid-template-columns: 1fr;
  }
}

.pdp-bf-panel {
  padding: 14px 16px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  min-width: 0;
}

[data-theme="light"] .pdp-bf-panel {
  background: #fff;
}

.pdp-bf-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.pdp-bf-panel-title {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.pdp-bf-panel-meta {
  font-size: 12px;
  text-align: right;
}

.pdp-bf-progress-wrap {
  margin-bottom: 12px;
}

.pdp-bf-progress-bar {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin: 0 0 8px;
}

.pdp-bf-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: var(--brand-highlight, #58d2f8);
  transition: width 0.35s ease;
}

.pdp-bf-progress-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.pdp-bf-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 700px) {
  .pdp-bf-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pdp-bf-stat {
  padding: 10px 11px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  min-width: 0;
}

[data-theme="light"] .pdp-bf-stat {
  background: rgba(0, 0, 0, 0.02);
}

.pdp-bf-stat-label {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

.pdp-bf-stat-value {
  font-size: 18px;
  font-weight: 650;
  line-height: 1.15;
  color: var(--text);
}

.pdp-bf-stat-sub {
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
}

.pdp-bf-sched-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.pdp-bf-fact {
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="light"] .pdp-bf-fact {
  background: rgba(0, 0, 0, 0.02);
}

.pdp-bf-fact-label {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 3px;
}

.pdp-bf-fact-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}

.pdp-bf-sched-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 8px;
}

.pdp-bf-sched-meta {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.pdp-bf-kpi-block,
.pdp-bf-jobs-block {
  padding-top: 2px;
}

.pdp-bf-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1100px) {
  .pdp-bf-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .pdp-bf-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pdp-bf-kpi {
  padding: 12px 13px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  min-width: 0;
}

[data-theme="light"] .pdp-bf-kpi {
  background: #fff;
}

.pdp-bf-kpi-label {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}

.pdp-bf-kpi-value {
  font-size: 20px;
  font-weight: 650;
  line-height: 1.15;
  color: var(--text);
}

.pdp-bf-kpi-sub {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

.pdp-bf-table-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: auto;
}

.pdp-bf-jobs-table .suite-status-pill {
  text-transform: none;
}

.pdp-bf-activity {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 14px;
}

@media (max-width: 960px) {
  .pdp-bf-activity {
    grid-template-columns: 1fr;
  }
}

.pdp-bf-panel--failures[hidden] {
  display: none !important;
}

.suite-status-pill--running,
.suite-status-pill--queued {
  color: var(--brand-highlight-strong, #0082c8);
  border-color: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.4);
  background: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.12);
}

.suite-status-pill--succeeded,
.suite-status-pill--ok,
.suite-status-pill--idle {
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.35);
  background: rgba(22, 163, 74, 0.12);
}

.suite-status-pill--failed,
.suite-status-pill--error,
.suite-status-pill--stale_cron,
.suite-status-pill--no_ticks,
.suite-status-pill--cron_secret_missing,
.suite-status-pill--overdue,
.suite-status-pill--not_configured {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.12);
}

.suite-status-pill--cancelled,
.suite-status-pill--disabled {
  color: var(--muted);
}

[data-theme="light"] .suite-status-pill--running,
[data-theme="light"] .suite-status-pill--queued {
  color: #0369a1;
}

/* ==========
   DATA SOURCES PAGE
   ========== */

.data-sources-page {
  max-width: 100%;
  min-width: 0;
}

.data-sources-page .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.data-sources-hero .features-hero-subtitle {
  max-width: 42rem;
}

.data-sources-hero .features-hero-subtitle a {
  color: var(--brand-highlight, #58d2f8);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.data-sources-overview {
  padding-top: 8px;
  padding-bottom: 8px;
}

.data-sources-type-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.data-sources-type-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 20px 18px 22px;
  border: 1px solid var(--public-border);
  border-radius: 14px;
  background: var(--public-surface);
  text-align: left;
  color: inherit;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.data-sources-type-card:hover {
  border-color: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.45);
  background: color-mix(in srgb, var(--public-surface) 88%, rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.18));
  transform: translateY(-1px);
}

.data-sources-type-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--public-muted);
}

.data-sources-type-count {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--brand-highlight, #58d2f8);
  font-variant-numeric: tabular-nums;
}

.data-sources-type-name {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 650;
  color: var(--public-text);
}

.data-sources-type-copy {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--public-muted);
}

.data-sources-explore {
  padding-top: 48px;
}

.data-sources-explore-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.data-sources-explore-intro {
  text-align: center;
  margin: 0 auto 28px;
  max-width: 36rem;
}

.data-sources-explore-intro .section-title {
  margin-bottom: 8px;
  text-align: center;
}

.data-sources-explore-intro .section-subtitle {
  margin: 0 auto;
  text-align: center;
  max-width: none;
}

.data-sources-toolbar {
  position: sticky;
  top: 72px;
  z-index: 40;
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px;
  border: 1px solid var(--public-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--public-bg) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.data-sources-search {
  position: relative;
  display: block;
}

.data-sources-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--public-muted);
  pointer-events: none;
  z-index: 1;
}

.data-sources-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px 13px 48px;
  border: 1px solid var(--public-border);
  border-radius: 10px;
  background: var(--public-surface);
  color: var(--public-text);
  font-size: 15px;
  line-height: 1.3;
  outline: none;
}

.data-sources-search-input::placeholder {
  color: var(--public-muted);
  opacity: 1;
}

.data-sources-search-input:focus {
  border-color: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.55);
}

.data-sources-filter-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.data-sources-category-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding-top: 2px;
}

.data-sources-pill,
.data-sources-category-pill {
  appearance: none;
  border: 1px solid var(--public-border);
  background: transparent;
  color: var(--public-muted);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.data-sources-category-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.data-sources-category-pill span {
  min-width: 24px;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--public-border) 55%, transparent);
  color: var(--public-muted);
  font-size: 11px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.data-sources-pill:hover,
.data-sources-category-pill:hover {
  color: var(--public-text);
  border-color: rgba(var(--brand-highlight-rgb, 88, 210, 248), 0.4);
}

.data-sources-pill.is-active,
.data-sources-category-pill.is-active {
  color: var(--primaryText, #0b0b0d);
  background: var(--brand-highlight, #58d2f8);
  border-color: var(--brand-highlight, #58d2f8);
}

.data-sources-category-pill.is-active span {
  color: inherit;
  background: rgba(255, 255, 255, 0.18);
}

[data-theme="light"] .data-sources-pill.is-active,
[data-theme="light"] .data-sources-category-pill.is-active {
  color: #fff;
}

.data-sources-match {
  margin: 0;
  min-height: 1.2em;
  font-size: 13px;
  color: var(--public-muted);
  text-align: center;
}

.data-sources-table-wrap {
  max-height: min(70vh, 640px);
  overflow: auto;
  border: 1px solid var(--public-border);
  border-radius: 14px;
  background: var(--public-surface);
  -webkit-overflow-scrolling: touch;
}

.data-sources-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 840px;
}

.data-sources-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 14px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--public-muted);
  background: var(--public-surface);
  border-bottom: 1px solid var(--public-border);
  box-shadow: 0 1px 0 var(--public-border);
}

.data-sources-table thead th.data-sources-col-check {
  text-align: left;
}

.data-sources-table .data-sources-col-check {
  text-align: left;
  width: 14.5%;
}

.data-sources-table .data-sources-col-retailer {
  text-align: left;
}

.data-sources-table tbody th,
.data-sources-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--public-border) 75%, transparent);
  vertical-align: middle;
}

.data-sources-table tbody th.data-sources-col-retailer {
  text-align: left;
  font-weight: 600;
}

.data-sources-table tbody tr:last-child th,
.data-sources-table tbody tr:last-child td {
  border-bottom: none;
}

.data-sources-table tbody tr:hover th,
.data-sources-table tbody tr:hover td {
  background: color-mix(in srgb, var(--public-bg-hover) 70%, transparent);
}

.data-sources-table tbody tr[hidden] {
  display: none;
}

.data-sources-row-action {
  opacity: 0.55;
  margin-left: auto;
  color: var(--public-muted);
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.data-sources-table tbody tr:hover .data-sources-row-action {
  opacity: 1;
  color: var(--public-primary);
  transform: translateX(2px);
}

.data-sources-retailer-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.data-sources-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  flex-shrink: 0;
}

.data-sources-logo--empty {
  display: inline-block;
  background: var(--public-border);
}

.data-sources-retailer-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--public-text);
  text-align: left;
}

.data-sources-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.data-sources-check--yes {
  color: #7ee787;
  border: 1px solid rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.12);
}

.data-sources-check--store {
  color: var(--public-primary);
  border: 1px solid rgba(var(--public-primary-rgb), 0.28);
  background: rgba(var(--public-primary-rgb), 0.12);
}

.data-sources-check--no {
  color: var(--public-muted);
  border: 1px solid color-mix(in srgb, var(--public-border) 65%, transparent);
  background: color-mix(in srgb, var(--public-bg-hover) 42%, transparent);
  opacity: 0.7;
}

[data-theme="light"] .data-sources-check--yes {
  color: #15803d;
}

.data-sources-empty {
  margin: 20px 0 0;
  padding: 18px 20px;
  border: 1px dashed var(--public-border);
  border-radius: 12px;
  color: var(--public-muted);
  font-size: 14px;
  text-align: center;
}

.data-sources-explain {
  padding-top: 56px;
  padding-bottom: 24px;
}

.data-sources-explain-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 36px;
  align-items: start;
}

.data-sources-explain .features-band-title {
  margin: 0 0 14px;
  max-width: 22ch;
}

.data-sources-explain .features-band-lead {
  margin: 0;
  max-width: 38rem;
}

.data-sources-explain-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.data-sources-explain-list li {
  padding: 16px 18px;
  border-left: 3px solid var(--brand-highlight, #58d2f8);
  background: var(--public-surface);
  border-radius: 0 10px 10px 0;
  color: var(--public-muted);
  font-size: 14px;
  line-height: 1.5;
}

.data-sources-explain-list strong {
  color: var(--public-text);
}

.data-sources-disclaimer {
  padding-top: 8px;
  padding-bottom: 48px;
}

.data-sources-disclaimer-text {
  margin: 0;
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
  font-size: 12px;
  line-height: 1.55;
  color: var(--public-muted);
}

@media (max-width: 1200px) {
  .data-sources-type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .data-sources-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .data-sources-explain-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .data-sources-type-grid {
    grid-template-columns: 1fr;
  }

  .data-sources-toolbar {
    top: 64px;
  }

  .data-sources-table .data-sources-col-check {
    width: auto;
  }
}