/* ----- Reset / base ----- */
/* Scoped reset — do NOT use a universal selector, it breaks Google Maps internals */
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote {
  margin: 0;
  padding: 0;
}
*, *::before, *::after { box-sizing: border-box; }
.gm-style *, .gm-style *::before, .gm-style *::after { box-sizing: content-box; }

[hidden] { display: none !important; }

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  color: #1a1f36;
  background: #f5f7fa;
  font-size: 14px;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ----- Layout ----- */
.layout {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ----- Sidebar ----- */
.sidebar {
  width: 333px;
  background: white;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  padding: 16px 12px 12px;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 16px;
}
.brand-logo { display: flex; align-items: center; }
.brand-line1 {
  font-weight: 700;
  font-size: 18px;
  color: #1a1f36;
  letter-spacing: -0.3px;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f9fafb;
  border-radius: 10px;
  margin-bottom: 16px;
}
.user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #dbeafe;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.user-name { flex: 1; font-weight: 500; }
.user-menu { color: #6b7280; padding: 4px 6px; font-size: 16px; }

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #4b5563;
  font-weight: 500;
  position: relative;
  transition: background 0.15s, color 0.15s;
}
.nav-item:hover { background: #f3f4f6; color: #1a1f36; }
.nav-item .nav-icon { width: 20px; text-align: center; font-size: 16px; opacity: 0.75; display: inline-flex; align-items: center; justify-content: center; }
.nav-item .nav-icon svg { display: block; }
.nav-item .nav-label { flex: 1; }
.nav-item .nav-caret { color: #9ca3af; font-size: 14px; }

.nav-active {
  background: #eff6ff;
  color: #2563eb;
}
.nav-active:hover { background: #eff6ff; color: #2563eb; }
.nav-active .nav-icon { opacity: 1; }

.nav-disabled { opacity: 0.55; pointer-events: none; }

/* Popout submenu (Grid Scan). Positioned by JS next to the sidebar item. */
.nav-popout {
  position: fixed;
  z-index: 100;
  min-width: 200px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
}
.nav-popout-header,
.nav-popout-item {
  display: block;
  text-decoration: none;
  border-radius: 6px;
}
.nav-popout-header {
  padding: 10px 12px 8px;
  font-size: 14px;
  font-weight: 700;
  color: #1a1f36;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 4px;
}
.nav-popout-header:hover { background: #f9fafb; }
.nav-popout-item {
  padding: 8px 12px;
  font-size: 13px;
  color: #4b5563;
  font-weight: 500;
}
.nav-popout-item:hover { background: #f3f4f6; color: #1a1f36; }
.nav-popout-item.active,
.nav-popout-header.active {
  color: #2563eb;
  background: #eff6ff;
  font-weight: 600;
}
/* Rotate the parent's caret when the popout is open */
.nav-item.popout-open .nav-caret {
  display: inline-block;
  transform: rotate(90deg);
}
.nav-caret {
  display: inline-block;
  transition: transform 0.15s ease;
}

.badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.badge-trial { background: #e5e7eb; color: #6b7280; }
.badge-new { background: #d1fae5; color: #047857; }
/* Numeric overdue/due-today count on the Todo Lists nav item — same pill
   shape as .badge-new, red instead of green since this is a "needs
   attention" count, not a feature-announcement label. */
.badge-count { background: #fee2e2; color: #b91c1c; margin-left: auto; }

.sidebar-spacer { flex: 1; min-height: 12px; }

.sidebar-secondary { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.nav-secondary { color: #6b7280; }

/* Credits card */
.credits-card {
  position: relative;
  background: linear-gradient(135deg, #dbeafe, #e0f2fe);
  border-radius: 12px;
  padding: 14px 14px 12px;
  margin-bottom: 10px;
}
.credits-rocket {
  position: absolute;
  top: -6px; right: 8px;
  font-size: 22px;
  transform: rotate(-20deg);
}
.credits-amount { font-size: 22px; font-weight: 700; color: #1a1f36; }
.credits-link {
  display: block;
  font-size: 12px;
  color: #4b5563;
  text-decoration: underline;
  margin-bottom: 10px;
}
.credits-cta {
  width: 100%;
  padding: 8px 12px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #1a1f36;
}
.credits-cta:hover { background: #f9fafb; }

.sidebar-footer {
  font-size: 11px;
  color: #9ca3af;
  text-align: left;
  padding: 4px 8px;
}

/* ----- Main / views ----- */
.main {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.view {
  display: none;
  width: 100%;
  height: 100%;
}
.view-active { display: block; }

/* Topical Map is a top-level .view whose content (.cg-page/.bg-page)
   can genuinely run longer than the viewport (many silo cards). Every
   other tool gets its own scroll container for free — Grid Scan/SERP
   Tracker via .list-page's overflow-y, Content Generator tools via
   .cb-page's — but Topical Map lives directly under .main (which itself
   is overflow:hidden, see below), so without this it just gets clipped
   with no way to scroll to the rest of the output. Client Management is
   the same case: a Backlink Priority Report with several page cards
   routinely runs taller than the viewport, and #view-client-management
   also lives directly under .main with nothing else providing scroll. */
#view-topical-map, #view-keyword-finder, #view-client-management { overflow-y: auto; overflow-x: hidden; }

.coming-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #6b7280;
  font-size: 18px;
}

/* ─────────────────────── SEO Free Tools Kit ─────────────────────── */
.seo-kit-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 32px 64px;
}
.seo-kit-header {
  text-align: center;
  margin-bottom: 32px;
}
.seo-kit-title {
  font-size: 32px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
  letter-spacing: -0.5px;
}
.seo-kit-subtitle {
  font-size: 15px;
  color: #6b7280;
  margin: 0;
}

/* Toolbar with view-toggle on the right */
.seo-kit-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}
.seo-kit-view-toggle {
  display: inline-flex;
  background: #f3f4f6;
  border-radius: 10px;
  padding: 4px;
  gap: 2px;
}
.seo-kit-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.seo-kit-view-btn:hover { color: #1a1f36; }
.seo-kit-view-btn.active {
  background: white;
  color: #1a1f36;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* GRID layout */
.seo-kit-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Individual tool card */
.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 22px 22px 24px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.12s;
  min-height: 196px;
}
.tool-card[data-status="active"]:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
  transform: translateY(-1px);
}
.tool-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #eef2ff;
  color: #4f46e5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  flex: 0 0 auto;
}
.tool-name {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
  line-height: 1.3;
}
.tool-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: #6b7280;
}

/* Coming-soon variant */
.tool-card[data-status="coming-soon"] {
  cursor: default;
  background: #fafbfc;
}
.tool-card[data-status="coming-soon"]:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transform: none;
  border-color: #e5e7eb;
}
.tool-card[data-status="coming-soon"] .tool-icon {
  background: #f1f5f9;
  color: #9ca3af;
}
.tool-card[data-status="coming-soon"] .tool-name { color: #9ca3af; }
.tool-card[data-status="coming-soon"] .tool-desc { color: #b6bcc6; }
.tool-coming-soon {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.2px;
}

/* LIST layout (toggled via .view-list on the grid wrapper) */
.seo-kit-tools.view-list {
  grid-template-columns: 1fr;
  gap: 10px;
}
.seo-kit-tools.view-list .tool-card {
  flex-direction: row;
  align-items: center;
  gap: 18px;
  min-height: 0;
  padding: 16px 20px;
}
.seo-kit-tools.view-list .tool-icon {
  margin: 0;
  width: 40px;
  height: 40px;
}
.seo-kit-tools.view-list .tool-name { margin-bottom: 2px; font-size: 15px; }
.seo-kit-tools.view-list .tool-desc {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seo-kit-tools.view-list .tool-card > div:not(.tool-icon) { min-width: 0; flex: 1; }
.seo-kit-tools.view-list .tool-coming-soon {
  position: static;
  margin-left: auto;
  flex: 0 0 auto;
  padding: 4px 10px;
  background: #f1f5f9;
  border-radius: 999px;
}

/* Responsive */
@media (max-width: 1024px) {
  .seo-kit-tools { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .seo-kit-page { padding: 32px 16px 48px; }
  .seo-kit-title { font-size: 26px; }
  .seo-kit-tools { grid-template-columns: 1fr; }
  .seo-kit-tools.view-list .tool-desc { white-space: normal; }
}

/* ───────────────────── GBP Category Discovery tool ───────────────── */
.seo-kit-tool-view { width: 100%; height: 100%; overflow-y: auto; }
.gbp-tool-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  /* Light blue page background — applied to the whole tool view, including
     the navbar, hero, and audit results area. The white audit card sits
     on top of this. */
  background: #eff6ff;
}

/* Top navbar — inherits the page's blue background */
.gbp-tool-navbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: #eff6ff;
  border-bottom: 1px solid #dbeafe;
}
.gbp-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: white;
  color: #1a1f36;
  border: 1px solid #e5e7eb;
  text-decoration: none;
  transition: background 0.12s;
}
.gbp-back-btn:hover { background: #eef2ff; color: #4f46e5; }
.gbp-tool-navbar-title {
  font-weight: 700;
  font-size: 15px;
  color: #1a1f36;
}
.gbp-version-badge {
  background: #eaf6ff;
  color: #1d70b8;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Hero */
.gbp-tool-hero {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 24px 24px;
  text-align: center;
}
.gbp-tool-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 18px;
  letter-spacing: -0.5px;
  color: #0f172a;
}
.gbp-title-line-1 { display: block; }
.gbp-title-line-2 {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 14px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 10px;
}
.gbp-tool-subtitle {
  max-width: 760px;
  margin: 0 auto;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.6;
}

/* Search bar */
.gbp-search-wrap { margin: 28px auto 0; max-width: 720px; }
.gbp-search-bar {
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  gap: 6px;
}
.gbp-search-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  color: #1a1f36;
  padding: 12px 14px;
}
.gbp-search-input::placeholder { color: #9ca3af; }
.gbp-discover-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #2563eb;
  color: white;
  border: 0;
  border-radius: 10px;
  padding: 12px 22px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.12s;
}
.gbp-discover-btn:hover:not(:disabled) { background: #1d4ed8; }
.gbp-discover-btn:disabled { background: #93c5fd; cursor: progress; }

/* Wrapper is position:relative so the dropdown can anchor to it. */
.gbp-search-wrap { position: relative; }

/* Spinner inside the input, just before the Discover button. */
.gbp-search-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: gbp-spin 0.8s linear infinite;
  margin: 0 8px 0 4px;
  flex: 0 0 auto;
}
@keyframes gbp-spin { to { transform: rotate(360deg); } }

/* Autocomplete dropdown */
.gbp-suggest-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 6px 0;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  max-height: 320px;
  overflow-y: auto;
  text-align: left;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
}
.gbp-suggest-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid #f3f4f6;
}
.gbp-suggest-item:last-child { border-bottom: 0; }
.gbp-suggest-item:hover,
.gbp-suggest-item.is-focused { background: #eff6ff; }
.gbp-suggest-name {
  font-weight: 700;
  font-size: 14px;
  color: #0f172a;
  margin-bottom: 2px;
}
.gbp-suggest-addr {
  font-size: 12.5px;
  color: #6b7280;
  margin-bottom: 4px;
}
.gbp-suggest-rating {
  font-size: 12px;
  color: #4b5563;
}
.gbp-suggest-rating .star { color: #f59e0b; margin-right: 4px; }
.gbp-suggest-main { flex: 1; min-width: 0; }
.gbp-suggest-pin {
  color: #9ca3af;
  font-size: 16px;
  flex: 0 0 auto;
  padding-top: 2px;
}
.gbp-suggest-empty,
.gbp-suggest-loading {
  padding: 16px 18px;
  color: #6b7280;
  font-size: 13px;
  text-align: center;
}
.gbp-suggest-loading::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: gbp-spin 0.8s linear infinite;
  vertical-align: -2px;
  margin-right: 8px;
}

/* Status / error */
.gbp-status {
  max-width: 720px;
  margin: 16px auto 0;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  text-align: left;
}
.gbp-status.error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.gbp-status.loading { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }

/* ─── GMB Audit results page ─── */
/* The page background is already #eff6ff (set on .gbp-tool-page above).
   The audit card sits on top of that, keeping its own white background. */

.gbp-audit {
  max-width: 1100px;
  margin: 32px auto 64px;
  padding: 28px 32px 32px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
.gbp-audit-title {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}

.gbp-audit-section { margin-bottom: 32px; }
.gbp-audit-section:last-child { margin-bottom: 0; }
.gbp-audit-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #2563eb;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid #eff6ff;
}
.gbp-audit-section-title.plain {
  color: #0f172a;
  border-bottom-color: #f1f5f9;
}
.gbp-audit-section-ico { font-size: 14px; }

.gbp-audit-disclaimer {
  font-size: 12px;
  color: #9ca3af;
  margin: -8px 0 16px;
  font-style: italic;
}
.gbp-audit-subsection { margin-top: 22px; }
.gbp-audit-subtitle {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 12px;
}

/* 3-column grid for all audit sections */
.gbp-audit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 26px;
}

/* One data field (label + value) */
.gbp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
  min-width: 0;
}
.gbp-field-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 500;
}
.gbp-field-ico {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}
.gbp-info-tip {
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 9px;
  font-weight: 700;
  cursor: help;
}
.gbp-field-value {
  color: #0f172a;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.gbp-field-value ul {
  margin: 4px 0 0;
  padding-left: 18px;
}
.gbp-field-value li { padding: 1px 0; }
.gbp-field-value.dim { color: #9ca3af; font-style: italic; }
.gbp-field-value a { color: #c2410c; text-decoration: none; }
.gbp-field-value a:hover { text-decoration: underline; }
.gbp-claim-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.gbp-claim-pill.claimed { background: #d1fae5; color: #047857; }
.gbp-claim-pill.unclaimed { background: #fee2e2; color: #b91c1c; }
.gbp-stars { color: #f59e0b; }

/* Link fields (Maps / External / Audit) */
.gbp-audit-links .gbp-field-value a {
  color: #c2410c;
  font-size: 12px;
  display: inline-block;
  word-break: break-all;
}

@media (max-width: 900px) {
  .gbp-audit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gbp-tool-title { font-size: 30px; }
  .gbp-discover-btn span { display: none; }
  .gbp-audit { padding: 18px 16px; }
  .gbp-audit-grid { grid-template-columns: 1fr; }
}

/* Sub-views inside Grid Scan */
.sub-view {
  width: 100%;
  height: 100%;
}
.sub-view[hidden] { display: none; }

/* Grid Scans LIST page */
.list-page {
  padding: 22px 28px;
  height: 100%;
  overflow-y: auto;
  background: #f5f7fa;
}

/* HEADER */
.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.list-header h2 { font-size: 20px; font-weight: 700; color: #1a1f36; }
.list-actions { display: flex; gap: 8px; align-items: center; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #d1d5db;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  color: #4b5563;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.icon-btn:hover { background: #f3f4f6; color: #1a1f36; border-color: #9ca3af; }
.btn-outlined {
  background: white;
  color: #1a1f36;
  border: 1px solid #d1d5db;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
}
.btn-outlined:hover:not(:disabled) { background: #f9fafb; border-color: #9ca3af; }
.btn-primary { padding: 8px 14px; font-size: 13px; font-weight: 600; }

/* TABS + DATE RANGE row */
.list-tabs-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 14px;
}
.list-tabs {
  display: flex;
  gap: 24px;
  margin-bottom: -1px;
}
.list-tab {
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.list-tab-active { color: #2563eb; border-bottom-color: #2563eb; }
.list-tab-disabled { cursor: not-allowed; opacity: 0.5; }

.list-date-range {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  font-size: 13px;
  color: #4b5563;
}
.list-date-range-text { color: #6b7280; }
.date-range-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #1a1f36;
  cursor: pointer;
  font-family: inherit;
}
.date-range-btn:hover { background: #f9fafb; }
.dropdown-caret { font-size: 10px; color: #6b7280; }

/* GENERIC DROPDOWN */
.dropdown-wrap { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
  min-width: 200px;
  padding: 6px;
}
.dropdown-menu-right { left: auto; right: 0; }
.dropdown-menu-wide { min-width: 260px; }
.dropdown-menu-filter { min-width: 240px; padding: 12px; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: #1a1f36;
  cursor: pointer;
  user-select: none;
}
.dropdown-item:hover { background: #f3f4f6; }
.dropdown-item-active { color: #2563eb; font-weight: 600; }
.dropdown-item-danger { color: #b91c1c; }
.dropdown-item-danger:hover { background: #fef2f2; }
.dropdown-item-disabled { color: #9ca3af; cursor: default; }
.dropdown-item-disabled:hover { background: transparent; }
.dropdown-divider { height: 1px; background: #f1f5f9; margin: 6px 4px; }

/* User menu (sidebar "Hi, there!" chip) */
.user-chip-wrap { position: relative; }
.user-chip {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: #f9fafb;
  border-radius: 10px;
  margin-bottom: 16px;
  font-family: inherit; font-size: 14px; color: inherit;
  cursor: pointer;
}
.user-chip:hover { background: #f1f5f9; }
.user-avatar-lg { width: 44px; height: 44px; flex-shrink: 0; }
.user-menu-dropdown { top: calc(100% - 12px); left: 12px; right: 12px; width: auto; padding: 10px; }
.user-menu-profile { display: flex; align-items: center; gap: 10px; padding: 4px 6px 10px; }
.user-menu-profile-name { font-weight: 700; font-size: 14px; color: #1a1f36; }
.user-menu-profile-email { font-size: 12px; color: #6b7280; margin-top: 1px; }

.account-avatar-row { display: flex; align-items: center; gap: 14px; }
.account-avatar-upload-btn { display: inline-flex; cursor: pointer; }

.billing-plan-card {
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
  padding: 16px; margin-bottom: 16px; text-align: center;
}
.billing-plan-name { font-size: 12px; font-weight: 700; color: #1e40af; text-transform: uppercase; letter-spacing: 0.4px; }
.billing-plan-days { font-size: 20px; font-weight: 700; color: #1a1f36; margin: 4px 0 12px; }
.billing-empty { font-size: 12.5px; color: #6b7280; padding: 8px 0; }
.row-menu-ico {
  display: inline-flex;
  width: 16px;
  font-size: 13px;
  opacity: 0.8;
}

.dropdown-btn { padding: 7px 12px; font-size: 13px; }
.dropdown-search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  margin-bottom: 8px;
}
.dropdown-meta { font-size: 11px; color: #9ca3af; padding: 0 4px; margin-bottom: 8px; }
.dropdown-empty {
  padding: 20px 8px;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
}

/* FILTER PANEL */
.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f3f4f6;
}
.filter-clear-btn {
  background: none;
  border: none;
  color: #2563eb;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.filter-clear-btn:hover { text-decoration: underline; }
.filter-section { margin-bottom: 10px; }
.filter-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.filter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  font-size: 13px;
  color: #1a1f36;
  cursor: pointer;
  border-radius: 4px;
}
.filter-check:hover { background: #f9fafb; }
.filter-check input { margin: 0; }

/* TOOLBAR */
.list-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 10px;
  flex-wrap: wrap;
}
.list-toolbar-left { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.list-toolbar-right { display: flex; gap: 6px; align-items: center; font-size: 13px; color: #6b7280; }
.list-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 6px 10px;
  width: 260px;
}
.list-search-wrap:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.list-search-wrap input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
  min-width: 0;
}
.pagination-count { font-variant-numeric: tabular-nums; }
.pagination-arrow {
  width: 26px;
  height: 26px;
  border: 1px solid #d1d5db;
  background: white;
  border-radius: 6px;
  font-size: 14px;
  color: #4b5563;
  cursor: pointer;
}
.pagination-arrow:hover:not(:disabled) { background: #f3f4f6; }
.pagination-arrow:disabled { opacity: 0.4; cursor: not-allowed; }

.list-table-wrap {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  overflow: hidden;
  margin-bottom: 12px;
}
.col-check { width: 38px; }
.col-check input { margin: 0; cursor: pointer; }
.col-sortable { cursor: pointer; user-select: none; }
.col-sortable:hover { color: #2563eb; }
.col-actions { width: 130px; text-align: right; }
.sort-arrows { color: #9ca3af; margin-left: 4px; font-size: 11px; }
.col-sortable.sort-asc .sort-arrows::before { content: '↑'; color: #2563eb; }
.col-sortable.sort-desc .sort-arrows::before { content: '↓'; color: #2563eb; }
.col-sortable .sort-arrows::before { content: '↕'; }

/* Header in "selected" mode: turns blue, shows "Selected (N)" */
#list-thead-row.selected-mode { background: #dbeafe; }
#list-thead-row.selected-mode th {
  background: #dbeafe;
  color: #1a1f36;
  font-weight: 600;
}
.thead-selected-label {
  font-size: 13px;
  color: #1d4ed8;
  font-weight: 600;
}

/* Footer */
.list-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
  font-size: 13px;
  color: #4b5563;
}
.list-footer select {
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  background: white;
  font-family: inherit;
  margin: 0 6px;
}

/* Row hover action icons (inline before ⋮) */
.list-row-hover-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s;
  margin-right: 6px;
}
.list-table tbody tr:hover .list-row-hover-actions {
  visibility: visible;
  opacity: 1;
}
.list-row-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: #6b7280;
  cursor: pointer;
  font-size: 14px;
}
.list-row-icon-btn:hover { background: #eff6ff; color: #2563eb; }

/* Row selected highlight */
.list-table tbody tr.row-selected td { background: #eff6ff; }
.list-table tbody tr.row-selected:hover td { background: #dbeafe !important; }

/* Floating ⋮ row context menu */
.row-menu {
  position: fixed;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  z-index: 200;
  min-width: 180px;
  padding: 4px;
}
.row-menu .dropdown-item { padding: 8px 10px; font-size: 13px; }

/* Scheduled-tab row visuals */
.list-schedule-cell {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.schedule-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 50%;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}
.schedule-text-main { font-weight: 600; color: #1a1f36; font-size: 13px; }
.schedule-text-sub { font-size: 11px; color: #6b7280; }
.schedule-text-next { font-size: 11px; color: #2563eb; font-weight: 500; margin-top: 2px; }

.list-time.stopped {
  color: #b91c1c;
  font-weight: 700;
}

/* Inline row tooltip — appears above the hover icon button */
.list-row-icon-btn { position: relative; }
.list-row-icon-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1f36;
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.list-row-icon-btn[data-tooltip]:hover::after { opacity: 1; }

/* SCHEDULE MODAL */
.schedule-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.schedule-modal[hidden] { display: none; }
.schedule-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.4);
}
.schedule-modal-card {
  position: relative;
  background: white;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
}
.schedule-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}
.schedule-modal-header h3 { font-size: 16px; font-weight: 700; color: #1a1f36; }
.schedule-modal-close {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: #6b7280;
  border-radius: 6px; font-size: 14px; cursor: pointer;
}
.schedule-modal-close:hover { background: #f3f4f6; color: #1a1f36; }
.schedule-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.schedule-target {
  padding: 10px 12px;
  background: #f9fafb;
  border-radius: 8px;
  font-size: 12px;
  color: #4b5563;
}
.schedule-target strong { display: block; color: #1a1f36; font-size: 13px; margin-bottom: 2px; }
.schedule-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.schedule-field > span {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.schedule-field input,
.schedule-field select {
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: white;
  outline: none;
}
.schedule-field input:focus,
.schedule-field select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.schedule-row-fields { display: flex; gap: 10px; }
.schedule-status-row { padding-top: 4px; }
.schedule-next-info {
  padding: 10px 12px;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
}
.schedule-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid #e5e7eb;
}

/* Empty state with CTA */
.list-empty-cta {
  text-align: center;
  padding: 72px 16px;
}
.list-empty-cta .list-empty-msg {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 18px;
}
.list-empty-cta .btn-primary {
  padding: 9px 20px;
  white-space: nowrap;
}
.list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.list-table thead {
  background: #eff6ff;
}
.list-table th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 12px;
  color: #1a1f36;
}
.list-table td {
  padding: 14px 16px;
  border-top: 1px solid #f3f4f6;
  vertical-align: middle;
}
.list-table tbody tr:hover { background: #fafbff; }
.list-table .list-empty td {
  text-align: center;
  color: #9ca3af;
  padding: 40px 16px;
  border-top: none;
}

.list-business-name { font-weight: 600; color: #1a1f36; }
.list-business-addr { font-size: 12px; color: #6b7280; margin-top: 2px; }
.list-business-badge {
  display: inline-block;
  background: #d1fae5;
  color: #047857;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 8px;
  margin-left: 6px;
  vertical-align: middle;
}
.list-keyword-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.list-rank {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.list-rank-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.list-rank.high { color: #047857; }
.list-rank.med  { color: #b45309; }
.list-rank.low  { color: #b91c1c; }
.list-rank.out  { color: #ef4444; }
.list-rank.high .list-rank-dot { background: #10b981; }
.list-rank.med .list-rank-dot  { background: #f59e0b; }
.list-rank.low .list-rank-dot  { background: #ef4444; }
.list-rank.out .list-rank-dot  { background: #374151; }

.list-grid-size { font-size: 12px; }
.list-grid-pins { color: #6b7280; font-size: 11px; }
.list-time { font-size: 12px; color: #6b7280; }
.list-time strong { color: #1a1f36; font-weight: 500; }
.list-row-actions {
  text-align: right;
}
.list-row-menu {
  color: #9ca3af;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.list-row-menu:hover { color: #1a1f36; background: #f3f4f6; }

.list-row-running { background: #fefce8; }
.list-row-running:hover td { background: #fefce8 !important; }
.list-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fef3c7;
  color: #92400e;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: lowercase;
}
.list-status-badge.failed { background: #fee2e2; color: #b91c1c; }
.list-status-badge .spinner {
  display: inline-block;
  width: 9px; height: 9px;
  border: 1.5px solid #d97706;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.list-rank.running {
  color: #92400e;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Map area */
.map-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

#map {
  position: absolute;
  inset: 0;
  background: #ffffff;
}

/* Flat dim overlay. No mask, no gradient — uniform 42% black. The selected
   pin sits ABOVE this layer (rendered as a sibling DOM element at higher
   z-index), so no halo, no glow, no light bleeding. */
.map-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.25s ease-out;
}
.map-dim.active { opacity: 1; }

/* Selected-pin overlay — a separate DOM element layered on top of .map-dim,
   carrying the pin icon so it remains fully bright. Position updated live
   from Google Maps' projection. */
.selected-pin-overlay {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  left: -100px;
  top: -100px;
}
.selected-pin-overlay img { display: block; width: 100%; height: 100%; }

.map-boot-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: #1f2937;
  font-size: 14px;
  background: #ffffff;
  z-index: 5;
}
.map-boot-msg.error { color: #b91c1c; }

/* Left panel — stacks the target card and scan config above the map */
.left-panel {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 4;
  width: 380px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100% - 40px);
  overflow-y: auto;
}

/* Target card */
.target-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 14px 16px;
}
.target-card-header {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600;
  margin-bottom: 10px;
}
.info-icon { color: #9ca3af; font-size: 14px; cursor: help; }
.target-card-search {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 10px;
}
.target-card-search:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.target-card-search input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  background: transparent;
  min-width: 0;
}
.search-icon { display: flex; flex-shrink: 0; }

.search-spinner {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 2px solid #dbeafe;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Autocomplete dropdown */
.autocomplete-list {
  list-style: none;
  margin-top: 8px;
  max-height: 320px;
  overflow-y: auto;
  border-top: 1px solid #f3f4f6;
}
.autocomplete-list li {
  padding: 10px 6px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.autocomplete-list li:hover, .autocomplete-list li.active {
  background: #f9fafb;
}
.autocomplete-list li:last-child { border-bottom: none; }
.autocomplete-pin {
  flex-shrink: 0;
  color: #ef4444;
  font-size: 14px;
  margin-top: 1px;
}
.autocomplete-text { flex: 1; min-width: 0; }
.autocomplete-main {
  font-weight: 500;
  font-size: 13px;
  color: #1a1f36;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.autocomplete-secondary {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.autocomplete-status {
  padding: 12px 6px;
  color: #6b7280;
  font-size: 13px;
  text-align: center;
}


/* Selected business display */
.target-selected-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.target-pin { color: #ef4444; font-size: 16px; }
.target-name {
  flex: 1;
  font-weight: 700;
  font-size: 15px;
  color: #1a1f36;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.target-link {
  color: #6b7280;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
}
.target-link:hover { color: #2563eb; background: #eff6ff; }
.target-clear {
  color: #9ca3af;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
}
.target-clear:hover { color: #ef4444; background: #fef2f2; }
.target-address {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 8px;
  padding-left: 22px;
}
.target-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 22px;
  margin-top: 4px;
}
.target-badge {
  display: inline-block;
  background: #d1fae5;
  color: #047857;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 10px;
}
.target-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #1a1f36;
  font-weight: 600;
}
.target-rating-stars { color: #f59e0b; }
.target-rating-count { color: #6b7280; font-weight: 500; }

.target-extra {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.target-extra-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.target-extra-row a {
  color: #2563eb;
  text-decoration: none;
}
.target-extra-row a:hover { text-decoration: underline; }
.target-extra-ico { font-size: 12px; width: 14px; text-align: center; }

.target-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.target-cat-chip {
  display: inline-block;
  padding: 2px 8px;
  background: #f3f4f6;
  color: #4b5563;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
}

/* Scan summary inside the target card */
.scan-summary {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f3f4f6;
}
.summary-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.stat-label {
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 4px;
}
.stat-avg {
  flex-shrink: 0;
}
.stat-avg-display {
  position: relative;
  width: 56px;
  height: 56px;
}
.stat-avg-number {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #1a1f36;
}
.ring { transform: rotate(-90deg); display: block; }
.ring-bg {
  fill: none;
  stroke: #e5e7eb;
  stroke-width: 3;
}
.ring-fg {
  fill: none;
  stroke: #9ca3af;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100, 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.4s, stroke 0.2s;
}
.ring-fg.high { stroke: #10b981; }
.ring-fg.med  { stroke: #f59e0b; }
.ring-fg.low  { stroke: #ef4444; }
.ring-fg.out  { stroke: #374151; }

.stat-avg-number.high { color: #047857; }
.stat-avg-number.med  { color: #b45309; }
.stat-avg-number.low  { color: #b91c1c; }
.stat-avg-number.out  { color: #ef4444; }

.stat-buckets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  flex: 1;
}
.stat-bucket {
  text-align: left;
}
.stat-bucket-label {
  font-size: 11px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 4px;
}
.stat-bucket-value {
  font-size: 14px;
  font-weight: 700;
  color: #1a1f36;
  margin-top: 2px;
}
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.dot-high { background: #10b981; }
.dot-med  { background: #f59e0b; }
.dot-low  { background: #ef4444; }
.dot-out  { background: #374151; }

.summary-keywords {
  margin-top: 4px;
}
.keyword-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.keyword-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.keyword-chip-caret { font-size: 10px; opacity: 0.7; }

/* Scan config card */
.scan-config-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 16px;
}
.scan-config-header {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 14px;
}
.scan-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  flex: 1;
}
.scan-field-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}
.scan-field input, .scan-field select {
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: white;
  outline: none;
}
.scan-field input:focus, .scan-field select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.keyword-hint {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 400;
}
.keyword-input-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: white;
  min-height: 38px;
  align-items: center;
}
.keyword-input-wrap:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.keyword-chips-input {
  display: contents;
}
.keyword-chip-input {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 10px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
}
.keyword-chip-x {
  cursor: pointer;
  padding: 0 4px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: #6b7280;
}
.keyword-chip-x:hover { color: #ef4444; background: #fee2e2; }
.keyword-input-wrap input {
  flex: 1;
  min-width: 100px;
  border: none !important;
  padding: 4px 6px !important;
  font-size: 13px;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
}
.scan-row {
  display: flex;
  gap: 10px;
  margin-bottom: 4px;
}

.scan-grid-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.unit-toggle {
  display: inline-flex;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  overflow: hidden;
}
.unit-btn {
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  background: white;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.unit-btn:not(:first-child) { border-left: 1px solid #d1d5db; }
.unit-btn.unit-active {
  background: #2563eb;
  color: white;
}
.scan-grid-row {
  display: flex;
  gap: 8px;
}
.scan-grid-row select {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: white;
  outline: none;
}
.scan-grid-row select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.scan-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  line-height: 1.2;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: #2563eb;
  color: white;
}
.btn-primary:hover:not(:disabled) { background: #1d4ed8; }
.btn-secondary {
  background: white;
  color: #1a1f36;
  border-color: #d1d5db;
}
.btn-secondary:hover:not(:disabled) { background: #f9fafb; }
.btn-full { width: 100%; }

.scan-meta {
  margin-top: 12px;
  padding: 10px 12px;
  background: #f9fafb;
  border-radius: 8px;
  font-size: 12px;
  color: #4b5563;
  line-height: 1.7;
}

/* Scheduled-only sections: visible only when body has .mode-scheduled */
.scheduled-only { display: none; }
body.mode-scheduled .scheduled-only { display: block; }
.scan-section-divider {
  height: 1px;
  background: #f3f4f6;
  margin: 14px 0 10px;
}
.scan-schedule-block { margin-bottom: 4px; }
.scan-schedule-row select,
.scan-schedule-row input[type="time"] {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: white;
  outline: none;
}
.scan-schedule-row select:focus,
.scan-schedule-row input[type="time"]:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.scan-schedule-checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.scan-meta strong { color: #1a1f36; }

.scan-progress {
  margin-top: 12px;
}
.scan-progress-bar {
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}
.scan-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  width: 0%;
  transition: width 0.2s ease-out;
}
.scan-progress-text {
  margin-top: 6px;
  font-size: 11px;
  color: #6b7280;
  text-align: center;
}

/* "Your map" mini thumbnail (shown when viewing a competitor overlay) */
.your-map-badge {
  position: absolute;
  top: 12px;
  left: 410px; /* sit right of the left-panel column (380 + 30 margin) */
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  cursor: pointer;
  font-family: inherit;
}
.your-map-badge:hover { border-color: #2563eb; background: #f9fafb; }
.your-map-thumb {
  width: 56px;
  height: 56px;
  background: #e8eef4;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.your-map-meta { text-align: left; }
.your-map-label { font-size: 11px; color: #2563eb; font-weight: 600; }
.your-map-name {
  font-size: 12px;
  font-weight: 600;
  color: #1a1f36;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Highlighted competitor row in the results sidebar */
.result-row.is-selected {
  background: #dbeafe;
  border-left: 3px solid #2563eb;
  padding-left: 13px;
}
.result-row.is-selected:hover { background: #bfdbfe; }
.result-row.is-selected .result-rank { background: #2563eb; color: white; }

/* Brief flash + outline when sidebar scrolls to the row matching a clicked pin. */
@keyframes pinFocusFlash {
  0%   { background-color: #fef3c7; }
  100% { background-color: transparent; }
}
.result-row.is-pin-focus {
  animation: pinFocusFlash 1.6s ease-out;
  box-shadow: inset 0 0 0 2px #f59e0b;
}

/* Subtle prefetch progress bar — top edge of the map area */
.prefetch-bar {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  font-size: 12px;
}
.prefetch-bar-track {
  width: 90px;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
}
.prefetch-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  width: 0%;
  transition: width 0.25s ease-out;
}
.prefetch-bar-text { color: #6b7280; font-weight: 500; }

/* Skeleton loader for the per-pin sidebar */
@keyframes skel-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.skel-block {
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
  background-size: 400px 100%;
  animation: skel-shimmer 1.2s linear infinite;
  border-radius: 4px;
}
.skel-circle { width: 26px; height: 26px; border-radius: 50%; }
.skel-line { height: 10px; margin-top: 4px; }
.skel-line-name { width: 70%; height: 12px; margin-top: 2px; }
.skel-line-addr { width: 90%; }
.skel-line-meta { width: 50%; }
.skeleton-row .result-content { width: 100%; }

/* Per-pin results sidebar (right side) */
.results-sidebar {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: 380px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
  z-index: 5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.results-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
}
.results-sidebar-title {
  font-size: 14px;
  font-weight: 700;
  color: #1a1f36;
}
.results-sidebar-coords {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}
.results-sidebar-close {
  width: 28px; height: 28px;
  border-radius: 6px;
  color: #6b7280;
  font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.results-sidebar-close:hover { background: #f3f4f6; color: #1a1f36; }
.results-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.results-loading, .results-empty {
  padding: 24px 16px;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
}
.result-row {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  align-items: flex-start;
}
.result-row.is-target {
  background: #ecfdf5;
  border-left: 3px solid #10b981;
  padding-left: 13px;
}
.result-row:hover { background: #fafbff; }
.result-row.is-target:hover { background: #d1fae5; }
.result-rank {
  width: 26px;
  height: 26px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.result-row.is-target .result-rank { background: #10b981; color: white; }
.result-content { flex: 1; min-width: 0; }
.result-name {
  font-size: 13px;
  font-weight: 600;
  color: #1a1f36;
  display: flex;
  align-items: center;
  gap: 6px;
}
.result-name a {
  color: #9ca3af;
  font-size: 12px;
  text-decoration: none;
}
.result-name a:hover { color: #2563eb; }
.result-addr {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.result-rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: #1a1f36;
  font-weight: 600;
}
.result-rating .star { color: #f59e0b; }
.result-reviews { font-size: 11px; color: #6b7280; }
.result-scan-btn {
  margin-left: auto;
  padding: 4px 12px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #2563eb;
  cursor: pointer;
  font-family: inherit;
}
.result-scan-btn:hover { background: #eff6ff; border-color: #2563eb; }
.result-row.is-target .result-scan-btn { display: none; }

/* Competitors widget — anchored to the LOWER-LEFT of the map area, with
   `top` set dynamically by JS so there's always a visible gap below the
   business info card above it. Two display modes share the container:
   collapsed pill OR expanded list. */
.competitors-widget {
  position: absolute;
  left: 20px;
  bottom: 20px;
  width: 380px;          /* matches .left-panel width */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 4;
  pointer-events: none;  /* let children re-enable, so the empty area above
                            the collapsed pill doesn't block map clicks */
}
.competitors-widget > * { pointer-events: auto; }

/* COLLAPSED state: slim pill bar */
.competitors-collapsed-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #1a1f36;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.competitors-collapsed-bar:hover { background: #f9fafb; }
.competitors-collapsed-label { flex: 0 0 auto; }
.competitors-collapsed-count { color: #6b7280; font-weight: 600; }
.competitors-collapsed-arrow {
  margin-left: auto;
  color: #9ca3af;
  font-size: 18px;
  line-height: 1;
}
.competitors-icon { font-size: 16px; }

/* EXPANDED state: full panel with header + scrollable rows */
.competitors-panel {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 65vh;
  overflow: hidden;
}
.competitors-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #f3f4f6;
}
.competitors-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #1a1f36;
}
.competitors-panel-count { color: #6b7280; font-weight: 500; }
.competitors-panel-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.competitors-panel-actions button {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: #6b7280;
  border-radius: 6px;
  padding: 4px 8px;
}
.competitors-panel-actions button:hover { background: #f3f4f6; color: #1a1f36; }
.competitors-more-btn { font-size: 18px; line-height: 1; padding: 4px 6px; }
.competitors-sort-btn {
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.competitors-collapse-btn {
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
}

/* The scrollable list */
.competitors-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 4px 8px;
}

/* Individual competitor row */
.comp-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  padding: 12px 12px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  align-items: start;
}
.comp-row:last-child { border-bottom: 0; }
.comp-row:hover { background: #fafbff; }
.comp-row.is-selected { background: #eff6ff; }

.comp-rank-cell {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 13px;
  padding-top: 1px;
  white-space: nowrap;
}
.comp-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
/* Bucket colors mirror the rest of the app's rank palette */
.comp-rank-cell.high, .comp-dot.high { color: #047857; }
.comp-rank-cell.med,  .comp-dot.med  { color: #b45309; }
.comp-rank-cell.low,  .comp-dot.low  { color: #b91c1c; }
.comp-rank-cell.out,  .comp-dot.out  { color: #6b7280; }
.comp-dot.high { background: #10b981; }
.comp-dot.med  { background: #f59e0b; }
.comp-dot.low  { background: #ef4444; }
.comp-dot.out  { background: #374151; }

.comp-info { min-width: 0; }
.comp-business-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.comp-business {
  font-weight: 700;
  font-size: 13px;
  color: #1a1f36;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comp-link {
  color: #6b7280;
  text-decoration: none;
  font-size: 12px;
  flex: 0 0 auto;
}
.comp-link:hover { color: #2563eb; }
.comp-address {
  margin-top: 2px;
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comp-rating-row {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}
.comp-rating-stars {
  letter-spacing: 1px;
  color: #d1d5db;
  font-size: 12px;
}
.comp-rating-stars .filled { color: #f59e0b; }
.comp-rating-value { color: #1a1f36; font-weight: 600; }
.comp-list-empty {
  text-align: center;
  padding: 24px 12px;
  color: #9ca3af;
  font-size: 13px;
}

/* ───────────────────── Cloud Backlinks secondary sidebar ────────────── */
/* Content Generator secondary sidebar — flat list of the 10 tools,
   no section headers, no business switcher. Same width/border/slide-in
   as .cb-sidebar so switching between the two feels seamless. */
.cg-sidebar {
  width: 286px;
  flex: 0 0 286px;
  background: white;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px 24px;
  overflow-y: auto;
  animation: cb-slide 0.18s ease-out;
}
.cg-sub-link {
  display: block;
  padding: 9px 10px;
  font-size: 14px;
  color: #2563eb;
  border-radius: 6px;
  text-decoration: none;
}
.cg-sub-link:hover { background: #f3f4f6; color: #1d4ed8; }
.cg-sub-link.cb-active {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}
.cg-sidebar-title {
  font-weight: 700;
  font-size: 18px;
  color: #1a1f36;
  letter-spacing: -0.3px;
  padding: 4px 10px 12px;
}
.cg-sidebar-divider { height: 1px; background: #e5e7eb; margin: 8px 4px; }
.cg-sub-link-history { display: flex; align-items: center; gap: 8px; color: #475569; }
.cg-sub-link-history:hover { color: #1e293b; }
.cg-sub-link-history.cb-active { color: #1d4ed8; }
.cg-history-ico { font-size: 14px; }

.cb-sidebar {
  width: 286px;
  flex: 0 0 286px;
  background: white;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 12px 24px;
  overflow-y: auto;
  animation: cb-slide 0.18s ease-out;
}
@keyframes cb-slide {
  from { transform: translateX(-12px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* Business switcher card */
.cb-business-switcher {
  position: relative;
  margin-bottom: 12px;
}
.cb-business-card {
  width: 100%;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.cb-business-card:hover { background: #f3f4f6; }
.cb-business-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #eef2ff;
  color: #4f46e5;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 16px;
}
.cb-business-info { min-width: 0; }
.cb-business-name {
  font-weight: 700;
  color: #0f172a;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-business-rating {
  font-size: 11px;
  color: #f59e0b;
}
.cb-business-rating:empty { display: none; }
.cb-business-address {
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-business-caret { color: #9ca3af; font-size: 10px; }

/* Dropdown */
.cb-business-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  z-index: 50;
  padding: 8px;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cb-business-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.cb-business-search-ico {
  position: absolute;
  left: 10px;
  color: #9ca3af;
  font-size: 12px;
  pointer-events: none;
}
.cb-business-search-wrap input {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 7px 10px 7px 28px;
  font-size: 13px;
  outline: 0;
}
.cb-business-search-wrap input:focus { border-color: #2563eb; }
.cb-business-all {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 8px 8px;
  color: #2563eb;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  text-align: left;
}
.cb-business-all:hover { background: #eff6ff; }
.cb-business-all-ico { font-size: 13px; }
.cb-business-list { overflow-y: auto; min-height: 0; }
.cb-business-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  padding: 8px;
  cursor: pointer;
  border-radius: 6px;
}
.cb-business-row:hover { background: #f9fafb; }
.cb-business-row.is-active { background: #eff6ff; }
.cb-business-row-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #eef2ff;
  color: #4f46e5;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 13px;
}
.cb-business-row-name { font-weight: 600; font-size: 13px; color: #0f172a; }
.cb-business-row-meta { font-size: 11px; color: #6b7280; margin-top: 2px; }
.cb-business-row-rating { color: #f59e0b; }
.cb-business-empty { padding: 18px 10px; text-align: center; color: #9ca3af; font-size: 12px; }

/* Section header / link */
.cb-section { margin: 4px 0; }
.cb-section-header,
.cb-section-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: transparent;
  border: 0;
  color: #6b7280;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  cursor: pointer;
  border-radius: 8px;
  text-decoration: none;
}
.cb-section-header:hover,
.cb-section-link:hover { background: #f3f4f6; color: #1a1f36; }
.cb-section-link.cb-active {
  background: #eff6ff;
  color: #2563eb;
}
.cb-section-ico { font-size: 13px; }
.cb-section-chevron {
  margin-left: auto;
  font-size: 10px;
  color: #9ca3af;
  transition: transform 0.15s;
}
.cb-section.is-collapsed .cb-section-chevron { transform: rotate(-90deg); }
.cb-section.is-collapsed .cb-section-body { display: none; }
.cb-section-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 6px 6px;
  padding-left: 16px;
  border-left: 1px solid #f3f4f6;
}
.cb-sub-link {
  display: block;
  padding: 7px 10px;
  font-size: 13px;
  color: #4b5563;
  border-radius: 6px;
}
.cb-sub-link:hover { background: #f3f4f6; color: #1a1f36; }
.cb-sub-link.cb-active {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 600;
}

/* Cloud Backlinks pages */
/* .cb-page is the scroll container for ALL Cloud Backlinks sub-pages.
   It fills the height of the active .view and scrolls when the visible
   .cb-sub-view inside it overflows. */
.cb-page {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
/* "Simple" sub-views (Backlinks Builder, Local Backlink
   Builder) want the old centered-with-padding look. The richer sub-views
   (Web Backlinks Builder, Web 2.0, Cloud Connectivity, Managed GMB) bring
   their own layout containers and span full width. */
.cb-sub-view[data-cb-page="backlinks-builder"],
.cb-sub-view[data-cb-page="local-backlink-builder"],
.cb-sub-view[data-cb-page="home"] {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 48px;
}
.cb-page-title {
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
}
.cb-page-subtitle {
  color: #6b7280;
  font-size: 14px;
  margin: 0 0 28px;
}
.cb-page-placeholder {
  background: white;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  padding: 60px;
  text-align: center;
  color: #9ca3af;
  font-size: 14px;
}
.cb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 80px 24px;
}
.cb-empty-ico { font-size: 48px; margin-bottom: 12px; opacity: 0.6; }
.cb-empty-title { font-size: 24px; font-weight: 700; color: #0f172a; margin: 0 0 8px; }
.cb-empty-text { color: #6b7280; font-size: 14px; margin: 0; }
/* Each .cb-sub-view is just a content container. The scroll lives on the
   parent .cb-page (above), so sub-views can flow to their natural height
   and the page scrolls when they exceed the viewport. */
.cb-sub-view { width: 100%; }

/* ─── Managed GMB · Location List page ───────────────────────────────── */
.ll-page { padding: 28px 32px 40px; max-width: 1500px; }
.ll-title { font-size: 22px; font-weight: 700; color: #0f172a; margin: 0 0 18px; }

.ll-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.ll-tabs { display: flex; align-items: center; gap: 8px; }
.ll-tab {
  background: #0f172a;
  color: white;
  border: 0;
  padding: 8px 18px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.ll-tab.is-active { background: #0f172a; }
.ll-add-view, .ll-all-views {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: 1px solid #e5e7eb;
  color: #1a1f36;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.ll-add-view:hover, .ll-all-views:hover { background: #f3f4f6; }

.ll-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ll-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.ll-btn-primary { background: #10b981; color: white; border-color: #10b981; }
.ll-btn-primary:hover:not(:disabled) { background: #059669; border-color: #059669; }
.ll-btn-primary:disabled { background: #6ee7b7; cursor: progress; }
.ll-btn-outline { background: white; color: #047857; border-color: #6ee7b7; }
.ll-btn-outline:hover { background: #ecfdf5; }

/* Filter / columns / search */
.ll-filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.ll-filter-btn, .ll-columns-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: 1px solid #e5e7eb;
  color: #1a1f36;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.ll-filter-btn:hover, .ll-columns-btn:hover { background: #f3f4f6; }
.ll-search-row { margin-bottom: 14px; }
.ll-search {
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  outline: 0;
  background: white;
}
.ll-search:focus { border-color: #2563eb; }

/* Table */
.ll-table-wrap {
  background: white;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  overflow-x: auto;
}
.ll-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ll-table thead {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.ll-table th {
  text-align: left;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.ll-table th:hover { background: #f3f4f6; }
.ll-col-check { width: 40px; }
.ll-sort { color: #cbd5e1; margin-left: 4px; font-size: 10px; }
.ll-table th.sort-asc .ll-sort::before  { content: '▲'; color: #2563eb; }
.ll-table th.sort-desc .ll-sort::before { content: '▼'; color: #2563eb; }
.ll-table th.sort-asc .ll-sort,
.ll-table th.sort-desc .ll-sort { font-size: 9px; }
.ll-table th.sort-asc .ll-sort,
.ll-table th.sort-desc .ll-sort { color: transparent; }

.ll-table td {
  padding: 14px;
  border-top: 1px solid #f3f4f6;
  vertical-align: middle;
}
.ll-table tbody tr:hover td { background: #fafbff; }

/* Location-name cell */
.ll-name-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ll-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #eef2ff;
  color: #4f46e5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
}
.ll-name-link {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ll-name-link:hover { text-decoration: underline; }
.ll-activate-badge {
  display: inline-block;
  padding: 2px 9px;
  border: 1px dashed #9ca3af;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
}
.ll-activate-badge:hover { border-color: #2563eb; color: #2563eb; }
.ll-place-id {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 11px;
  color: #4b5563;
}
.ll-website a { color: #c2410c; }
.ll-website a:hover { text-decoration: underline; }
.ll-tags {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ll-tag-chip {
  background: #eef2ff;
  color: #3730a3;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
}
.ll-add-tag {
  background: transparent;
  border: 1px dashed #d1d5db;
  border-radius: 6px;
  color: #9ca3af;
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  font-family: inherit;
}
.ll-rating-cell { white-space: nowrap; }
.ll-rating-stars { color: #f59e0b; letter-spacing: 1px; }
.ll-rating-stars .empty { color: #d1d5db; }
.ll-rating-count { color: #6b7280; font-size: 12px; margin-left: 4px; }
.ll-empty {
  text-align: center;
  padding: 40px;
  color: #9ca3af;
  font-size: 13px;
}

/* Footer (pagination) */
.ll-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  gap: 16px;
  flex-wrap: wrap;
}
.ll-page-size, .ll-pagination, .ll-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
}
.ll-page-size select {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 4px 8px;
  background: white;
  font-family: inherit;
  font-size: 12px;
}
.ll-page-arrow {
  width: 28px; height: 28px;
  border: 1px solid #e5e7eb;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  color: #6b7280;
}
.ll-page-arrow:hover:not(:disabled) { background: #f3f4f6; }
.ll-page-arrow:disabled { opacity: 0.4; cursor: not-allowed; }
.ll-page-num {
  display: inline-block;
  min-width: 28px;
  height: 28px;
  line-height: 26px;
  text-align: center;
  border: 1px solid #2563eb;
  border-radius: 6px;
  color: #2563eb;
  font-weight: 600;
}

/* Add-GMB modal */
.ll-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.ll-modal {
  background: white;
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.ll-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
}
.ll-modal-header h3 { font-size: 16px; font-weight: 700; color: #0f172a; }
.ll-modal-close {
  background: transparent;
  border: 0;
  font-size: 18px;
  cursor: pointer;
  color: #6b7280;
}
.ll-modal-close:hover { color: #0f172a; }
.ll-modal-body { padding: 18px 20px; }
.ll-modal-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
}
.ll-modal-input {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  outline: 0;
}
.ll-modal-input:focus { border-color: #2563eb; }
.ll-modal-hint { font-size: 11px; color: #9ca3af; margin-top: 6px; }
.ll-modal-status {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
}
.ll-modal-status.error   { background: #fef2f2; color: #b91c1c; }
.ll-modal-status.loading { background: #eff6ff; color: #2563eb; }
.ll-modal-status.success { background: #d1fae5; color: #065f46; }
.ll-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid #f3f4f6;
}

/* Columns show/hide popup */
.ll-cols-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.35);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.ll-cols-card {
  background: white;
  border-radius: 10px;
  padding: 16px 18px;
  min-width: 240px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.ll-cols-title { font-weight: 700; margin-bottom: 10px; font-size: 13px; }
.ll-cols-list { display: flex; flex-direction: column; gap: 6px; }
.ll-cols-list label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #1a1f36;
  cursor: pointer;
}

/* ─── Cloud Connectivity page ─────────────────────────────────────────── */
.cc-page {
  padding: 28px 32px 48px;
  background: #f8fafc;
  min-height: 100%;
}
.cc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.cc-title {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}
.cc-breadcrumb { color: #64748b; font-size: 13px; }
.cc-bc-sep { margin: 0 4px; color: #94a3b8; }

/* Banner + search row */
.cc-banner-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}

.cc-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 320px;
}
.cc-search-ico {
  position: absolute;
  left: 12px;
  color: #94a3b8;
  pointer-events: none;
  font-size: 13px;
}
.cc-search-input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px 10px 34px;
  font-size: 13px;
  background: white;
  outline: 0;
}
.cc-search-input:focus { border-color: #2563eb; }

/* 6-column provider grid */
.cc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
@media (max-width: 1280px) { .cc-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .cc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .cc-grid { grid-template-columns: repeat(2, 1fr); } }

.cc-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s, transform 0.12s, border-color 0.12s;
  min-height: 96px;
}
.cc-card:hover {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.cc-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cc-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: white;
  flex: 0 0 36px;
}
.cc-card-name {
  font-weight: 600;
  font-size: 14px;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-card-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.cc-action-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #2563eb;
  font-weight: 600;
  font-family: inherit;
  font-size: 13px;
}
.cc-action-link:hover { text-decoration: underline; }
.cc-action-sep { color: #cbd5e1; }
.cc-check {
  color: #16a34a;
  font-weight: 700;
  margin-left: 4px;
}

.cc-empty {
  text-align: center;
  padding: 48px 16px;
  color: #94a3b8;
  font-size: 14px;
}

/* Modal */
.cc-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 20px;
}
.cc-modal {
  background: white;
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.cc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
}
.cc-modal-title-wrap { display: flex; align-items: center; gap: 12px; }
.cc-modal-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: white;
  flex: 0 0 36px;
}
.cc-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
}
.cc-modal-sub { color: #64748b; font-size: 12px; }
.cc-modal-close {
  background: transparent;
  border: 0;
  font-size: 18px;
  color: #94a3b8;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 6px;
}
.cc-modal-close:hover { background: #f1f5f9; color: #1e293b; }
.cc-modal-body {
  padding: 18px 20px;
  overflow-y: auto;
}
.cc-modal-field { margin-bottom: 14px; }
.cc-modal-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 6px;
}
.cc-modal-field input,
.cc-modal-field textarea,
.cc-modal-field select {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: 0;
  background: white;
}
.cc-modal-field input:focus,
.cc-modal-field textarea:focus,
.cc-modal-field select:focus { border-color: #2563eb; }
.cc-modal-field textarea {
  min-height: 100px;
  resize: vertical;
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 12px;
}
.cc-modal-field-row { display: flex; gap: 12px; }
.cc-modal-field-row .cc-modal-field { flex: 1; }
.cc-modal-field-divider { height: 1px; background: #f1f5f9; margin: 16px 0; }
.cc-modal-oauth-note {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 12px 14px;
  color: #1e40af;
  font-size: 12.5px;
  line-height: 1.5;
}
.cc-modal-status {
  margin: 0 20px 14px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12.5px;
}
.cc-modal-status.error   { background: #fef2f2; color: #b91c1c; }
.cc-modal-status.loading { background: #eff6ff; color: #2563eb; }
.cc-modal-status.success { background: #d1fae5; color: #065f46; }

.cc-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid #f1f5f9;
}
.cc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
}
.cc-btn-primary { background: #2563eb; color: white; border-color: #2563eb; }
.cc-btn-primary:hover:not(:disabled) { background: #1d4ed8; }
.cc-btn-primary:disabled { background: #93c5fd; cursor: progress; }
.cc-btn-ghost { background: white; color: #1e293b; border-color: #e2e8f0; }
.cc-btn-ghost:hover { background: #f8fafc; }
.cc-btn-danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.cc-btn-danger:hover { background: #fee2e2; }
/* The "Remove Key" button sits on the LEFT of the modal footer while
   Cancel / Test / Save stay on the right. */
#ac-remove { margin-right: auto; }

/* Connected-account "View" body */
.cc-view-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 14px;
  font-size: 13px;
}
.cc-view-key   { color: #64748b; }
.cc-view-value { color: #1e293b; word-break: break-all; }

/* ── Web 2.0 — per-business connection extras ─────────────────────── */
.w2-biz-ctx {
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.w2-biz-ctx-active { background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; }
.w2-biz-ctx-warn   { background: #fef9c3; color: #713f12; border: 1px solid #fde68a; }

/* Dim cards a touch when no business is selected (Connect is gated). */
.cc-card.cc-card-dim { opacity: 0.7; }
.cc-card.cc-card-dim:hover { transform: none; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }

/* Red "Connect with Google" button (full-width inside the modal). */
.w2-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: #ea4335;
  color: white;
  border: 0;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s;
}
.w2-google-btn:hover { background: #d33a2c; }
.w2-google-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  color: #ea4335;
  font-weight: 800;
  font-size: 13px;
}

/* Generic "Connect with X" button used for non-Google OAuth platforms. */
.w2-oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: #1e293b;
  color: white;
  border: 0;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s;
}
.w2-oauth-btn:hover { background: #0f172a; }

/* The little "Connected as ..." pill below the OAuth buttons. */
.w2-oauth-result {
  margin-top: 12px;
  padding: 10px 12px;
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  color: #065f46;
  border-radius: 8px;
  font-size: 13px;
}

/* ───────────────── Web Backlinks Builder ─────────────────── */
.wbb-page {
  /* Plain block layout — the sticky top bar stays at the top, the two-column
     builder takes its own bounded height (with each side scrolling
     internally), and the Publish + History sections flow naturally below.
     The outer .cb-sub-view scrolls when total content exceeds the viewport. */
  padding: 0;
  max-width: 1500px;
  /* No flex — block layout. Adding flex previously made the children's
     auto sizes interact in ways that hid the history beneath the fold. */
}
.wbb-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  padding: 18px 28px;
  border-bottom: 1px solid #e5e7eb;
  background: white;
  /* No sticky — the top bar scrolls away with the rest of the page. */
}
.wbb-title { font-size: 22px; font-weight: 700; color: #0f172a; margin: 0; }

.wbb-platform-pick {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 280px;
}
.wbb-platform-label {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.wbb-platform-pick select {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  background: white;
  font-family: inherit;
  outline: 0;
}
.wbb-platform-pick select:focus { border-color: #2563eb; }
.wbb-platform-account {
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wbb-platform-account::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #16a34a;
}
.wbb-platform-account.muted::before { background: #cbd5e1; }
.wbb-platform-account.muted { color: #94a3b8; }

/* Two-column layout — Article Generator as a STICKY sidebar on the left
   (always visible while the right column scrolls). The right column holds
   the article preview + publish + history, all in normal flow. */
.wbb-cols {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items: start;
  padding: 18px 28px 0;
}
@media (max-width: 1100px) {
  .wbb-cols { grid-template-columns: 1fr; }
}

/* LEFT panel — Article Generator as a STICKY sidebar. It stays visible as
   the user scrolls through the article + publish + history on the right.
   When the form gets very tall, the sidebar itself scrolls internally so
   the Generate button is always reachable. */
.wbb-left {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
@media (max-width: 1100px) {
  .wbb-left {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}
.wbb-panel-head { margin-bottom: 12px; }
.wbb-panel-title { font-size: 15px; font-weight: 700; color: #0f172a; margin: 0; }
.wbb-panel-sub { font-size: 12px; color: #6b7280; margin-top: 2px; }

.wbb-section { border-top: 1px solid #f1f5f9; }
.wbb-section:first-of-type { border-top: 0; }
.wbb-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 10px 4px;
  text-align: left;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #475569;
  cursor: pointer;
}
.wbb-section-header:hover { color: #0f172a; }
.wbb-section-count {
  background: #eff6ff;
  color: #2563eb;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 700;
}
.wbb-chev {
  margin-left: auto;
  font-size: 10px;
  color: #94a3b8;
  transition: transform 0.15s;
}
.wbb-section.is-collapsed .wbb-chev { transform: rotate(-90deg); }
.wbb-section.is-collapsed .wbb-section-body { display: none; }
.wbb-section-body { padding: 4px 4px 12px; display: flex; flex-direction: column; gap: 10px; }

.wbb-field { display: flex; flex-direction: column; gap: 4px; }
.wbb-field label {
  font-size: 11px;
  color: #1e293b;
  font-weight: 600;
}
.wbb-field input,
.wbb-field textarea,
.wbb-field select {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  background: white;
  outline: 0;
}
.wbb-field input:focus,
.wbb-field textarea:focus,
.wbb-field select:focus { border-color: #2563eb; }
.wbb-field textarea { resize: vertical; min-height: 60px; }
.wbb-required { color: #b91c1c; font-weight: 700; }
.wbb-slug-preview {
  font-size: 12px;
  color: #2563eb;
  background: #eff6ff;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  display: inline-block;
  width: fit-content;
  margin-top: 4px;
}
.wbb-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #1e293b;
  cursor: pointer;
}
.wbb-helper {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
  font-style: italic;
}
.wbb-actions { margin-top: 14px; }
.wbb-generate-btn {
  width: 100%;
  background: #2563eb;
  color: white;
  border: 0;
  border-radius: 8px;
  padding: 11px 16px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}
.wbb-generate-btn:hover:not(:disabled) { background: #1d4ed8; }
.wbb-generate-btn:disabled { background: #93c5fd; cursor: progress; }

/* RIGHT panel — matches the height of the sticky Article Generator
   sidebar on the left so the two cards look balanced. Grows beyond
   this when a long article is rendered. */
.wbb-right {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 80px);
}
@media (max-width: 1100px) {
  /* When the sidebar drops to a single column, don't force a tall right
     panel — let it sit at a reasonable empty-state height. */
  .wbb-right { min-height: 480px; }
}
.wbb-right-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.wbb-right-title { font-weight: 700; color: #0f172a; }
.wbb-right-meta { display: flex; align-items: center; gap: 10px; }
.wbb-word-pill {
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.wbb-status {
  font-size: 12px;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wbb-status.writing::before {
  content: '';
  width: 10px; height: 10px;
  border: 2px solid #cbd5e1;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: gbp-spin 0.8s linear infinite;
}
.wbb-status.complete { color: #16a34a; font-weight: 600; }
.wbb-right-url {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: #475569;
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  margin-bottom: 12px;
}
.wbb-article {
  flex: 1 1 auto;
  background: #fafbfc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 18px 22px;
  font-size: 14px;
  line-height: 1.6;
  color: #1e293b;
  min-height: 0;
}
.wbb-article h1, .wbb-article h2, .wbb-article h3 {
  color: #0f172a;
  margin: 18px 0 8px;
  line-height: 1.3;
}
.wbb-article h2 { font-size: 18px; font-weight: 700; }
.wbb-article h3 { font-size: 15px; font-weight: 600; }
.wbb-article p  { margin: 0 0 12px; }
.wbb-article ul, .wbb-article ol { margin: 0 0 12px 22px; }
.wbb-article a  { color: #c2410c; text-decoration: underline; }
/* Data tables — used when the user enables "Include data tables" in the
   Formatting panel. White background by request, with a soft border and
   a tinted header row so the table reads cleanly inside the article
   canvas (which has a #fafbfc panel background). */
.wbb-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
}
.wbb-article thead { background: #f3f4f6; }
.wbb-article th {
  text-align: left;
  font-weight: 700;
  color: #111827;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  background: #f3f4f6;
}
.wbb-article td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #1f2937;
  background: #ffffff;
  vertical-align: top;
}
.wbb-article tr:last-child td { border-bottom: 0; }
.wbb-article tbody tr:hover td { background: #f9fafb; }
.wbb-article-empty {
  color: #94a3b8;
  text-align: center;
  padding: 40px 16px;
  font-size: 13px;
}

/* Loading state shown in the article canvas while we fetch FAQs +
   stream the AI article — replaces the previous "Fetching…" / FAQ
   preview rendering with a clean centred spinner. */
.wbb-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 80px 20px;
  color: #64748b;
  text-align: center;
}
.wbb-loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: wbb-spin 0.9s linear infinite;
}
.wbb-loading-text {
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
}
@keyframes wbb-spin {
  to { transform: rotate(360deg); }
}
/* Rich-text editor toolbar — dark band glued to the top of the article. */
.wbb-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #0f172a;
  border: 1px solid #0f172a;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  padding: 6px 10px;
  flex-wrap: wrap;
}
.wbb-editor-toolbar select {
  background: #1e293b;
  color: white;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  min-width: 110px;
}
.wbb-editor-toolbar select:focus { outline: 1px solid #60a5fa; }
.wbb-editor-toolbar button {
  background: transparent;
  color: white;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 9px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  min-width: 28px;
  line-height: 1.4;
}
.wbb-editor-toolbar button:hover {
  background: #1e293b;
  border-color: #334155;
}
.wbb-editor-toolbar button b,
.wbb-editor-toolbar button i,
.wbb-editor-toolbar button u { font-weight: 700; font-style: italic; }
.wbb-editor-toolbar button i { font-style: italic; font-weight: 500; }
.wbb-editor-toolbar button u { font-weight: 500; text-decoration: underline; }
.wbb-editor-sep {
  width: 1px;
  height: 18px;
  background: #334155;
  margin: 0 4px;
}

/* Floating selection toolbar — pops up next to highlighted text. */
.wbb-float-toolbar {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 4px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 6px 10px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.32);
  z-index: 200;
  /* Smooth fade-in */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}
.wbb-float-toolbar.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.wbb-float-toolbar select,
.wbb-float-toolbar button {
  background: transparent;
  color: white;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 9px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  min-width: 28px;
}
.wbb-float-toolbar select {
  background: #1e293b;
  border-color: #334155;
  font-size: 12px;
  padding: 4px 8px;
  min-width: 110px;
}
.wbb-float-toolbar select:focus { outline: 1px solid #60a5fa; }
.wbb-float-toolbar button:hover {
  background: #1e293b;
  border-color: #334155;
}
/* Little down-pointing tail under the toolbar */
.wbb-float-toolbar::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #0f172a;
}
/* When toolbar is visible, kill the article's top-rounded corners so
   it visually attaches to the toolbar above. */
.wbb-editor-toolbar:not([hidden]) + .wbb-article {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 0;
}

/* Article is editable in place — a subtle focus outline appears while
   the user is typing so they know it's a live editor. */
.wbb-article[contenteditable="true"]:focus { outline: 2px solid #bfdbfe; background: white; }
/* Hover state — hint that it's clickable / editable. */
.wbb-article[contenteditable="true"]:hover { background: #ffffff; }
.wbb-article[contenteditable="true"] { cursor: text; }

/* Live "Saving…" / "Saved ✓" indicator next to the toolbar buttons. */
.wbb-save-status {
  font-size: 12px;
  color: #94a3b8;
  margin-left: 4px;
  min-width: 70px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wbb-save-status.saving  { color: #2563eb; }
.wbb-save-status.saved   { color: #16a34a; }
.wbb-save-status.error   { color: #b91c1c; }
.wbb-article-toolbar {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.wbb-tool-btn {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  color: #1e293b;
}
.wbb-tool-btn:hover { background: #f3f4f6; }
/* Primary "Publish" CTA — pushed to the right of the toolbar. */
.wbb-tool-btn.wbb-tool-publish {
  margin-left: auto;
  background: #2563eb;
  border-color: #2563eb;
  color: white;
}
.wbb-tool-btn.wbb-tool-publish:hover { background: #1d4ed8; }

/* PUBLISH section */
.wbb-publish {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  margin-top: 18px;
}
.wbb-publish-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 14px;
}
.wbb-publish-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-bottom: 16px;
}
@media (max-width: 760px) { .wbb-publish-grid { grid-template-columns: 1fr; } }
.wbb-pub-when {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wbb-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #1e293b;
}
.wbb-pub-when input[type="datetime-local"] {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
}
.wbb-publish-actions {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}
.wbb-publish-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* Inline variant of the platform picker — used inside .wbb-publish-actions
   so it can sit beside the Preview / Draft / Publish buttons. Slightly
   narrower than the original full-width variant and a bit more compact. */
.wbb-platform-pick-inline { min-width: 260px; max-width: 320px; }
.wbb-platform-pick-inline select { padding: 7px 10px; font-size: 13px; }
.wbb-platform-pick-inline .wbb-platform-label { margin-bottom: 2px; }
.wbb-platform-pick-inline .wbb-platform-account { font-size: 11px; }
.wbb-publish-status {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
}
.wbb-publish-status.success { background: #d1fae5; border: 1px solid #6ee7b7; color: #065f46; }
.wbb-publish-status.error   { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.wbb-publish-status.loading { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }

/* Publish + History blocks flow naturally in normal block order. */
.wbb-publish, .wbb-history { margin: 18px 28px; }
.wbb-history:last-child { margin-bottom: 32px; }

/* FAQ pre-generation banner (shown briefly between FAQ fetch and AI call). */
.wbb-faq-preview {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #1e3a8a;
}
.wbb-faq-preview-title { font-weight: 700; margin-bottom: 6px; }
.wbb-faq-preview ol { margin: 4px 0 0 22px; padding: 0; }
.wbb-faq-preview li { margin: 2px 0; line-height: 1.45; }
.wbb-faq-preview-foot {
  margin-top: 8px;
  font-style: italic;
  color: #2563eb;
}

/* Image suggestion block — rendered as <span>s so the AI placing the
   marker inside a <p> doesn't auto-close the paragraph (which would
   collapse the article layout and shove the toolbar into the middle). */
.wbb-img-sugg {
  display: block;
  background: #f8fafc;
  border-left: 3px solid #94a3b8;
  border-radius: 6px;
  padding: 12px 14px;
  margin: 14px 0;
  font-size: 13px;
  color: #475569;
  line-height: 1.55;
}
.wbb-img-sugg-row  { display: flex; gap: 8px; align-items: flex-start; }
.wbb-img-sugg-ico  { font-size: 18px; flex: 0 0 auto; }
.wbb-img-sugg-body { display: block; flex: 1; min-width: 0; }
.wbb-img-sugg-desc { display: block; font-style: italic; margin-bottom: 6px; }
.wbb-img-sugg-prompt {
  display: block;
  background: white;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 8px 10px;
  font-style: italic;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}
.wbb-img-sugg-prompt-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
  font-style: normal;
}
.wbb-img-sugg-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.wbb-img-sugg-btn {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  color: #1e293b;
}
.wbb-img-sugg-btn:hover { background: #f1f5f9; }
.wbb-img-sugg-btn.copied { background: #d1fae5; border-color: #6ee7b7; color: #047857; }

/* While an image is being generated, show a subtle shimmer overlay so
   the user knows something's happening. */
.wbb-img-sugg.wbb-img-loading {
  position: relative;
  overflow: hidden;
}
.wbb-img-sugg.wbb-img-loading::after {
  content: 'Generating image…';
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  background: rgba(248, 250, 252, 0.85);
  color: #2563eb;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.3px;
  animation: wbb-shimmer 1.4s ease-in-out infinite;
}
@keyframes wbb-shimmer {
  0%,100% { opacity: 0.65; }
  50%     { opacity: 1; }
}

/* Real generated image (replaces the suggestion block after NanoBanana
   returns). Centered, rounded, with a caption underneath. */
.wbb-img-row {
  display: block;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px;
  margin: 14px 0;
}
.wbb-img-generated {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 0 auto 8px;
}
.wbb-img-caption {
  display: block;
  font-size: 12px;
  color: #475569;
  text-align: center;
  font-style: italic;
}

/* History section */
.wbb-history-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px 20px;
}
.wbb-history-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.wbb-history-title { font-size: 16px; font-weight: 700; color: #0f172a; margin: 0; }
.wbb-history-sub { font-size: 12px; color: #6b7280; margin-top: 2px; }
.wbb-history-filter {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  background: white;
  font-family: inherit;
}
.wbb-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.wbb-history-table thead {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.wbb-history-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.wbb-history-table td {
  padding: 12px;
  border-top: 1px solid #f3f4f6;
  vertical-align: middle;
}
.wbb-history-table tbody tr:hover td { background: #fafbff; }
.wbb-history-platform {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wbb-history-logo {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: #eef2ff;
  color: #4f46e5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
}
.wbb-history-title-link {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.wbb-history-title-link:hover { text-decoration: underline; }
.wbb-history-title-link[data-load-post]:hover { color: #1d4ed8; }
.wbb-history-status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.wbb-history-status-published { background: #d1fae5; color: #047857; }
.wbb-history-status-draft     { background: #f3f4f6; color: #4b5563; }
.wbb-history-status-failed    { background: #fee2e2; color: #b91c1c; }
.wbb-history-status-scheduled { background: #dbeafe; color: #1d4ed8; }
.wbb-history-actions {
  position: relative;
}
.wbb-history-menu-btn {
  background: none;
  border: 0;
  font-size: 18px;
  color: #6b7280;
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 8px;
}
.wbb-history-menu-btn:hover { background: #f3f4f6; }
.wbb-history-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  min-width: 140px;
  padding: 4px 0;
  z-index: 30;
}
/* When the menu would be clipped by the bottom edge of the viewport,
   the JS adds .opens-up — we anchor it to the BOTTOM of the button so
   the menu opens UPWARD and stays fully visible. */
.wbb-history-menu.opens-up {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 4px;
}
.wbb-history-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  color: #1e293b;
}
.wbb-history-menu button:hover { background: #f1f5f9; }
.wbb-history-menu button.danger { color: #b91c1c; }
.wbb-history-empty {
  text-align: center;
  padding: 32px;
  color: #94a3b8;
  font-size: 13px;
}

/* ───────────────── API Connectivity page ──────────────────── */
/* The view container scrolls so all 6 cards are reachable on short
   screens — without this, anything past the fold gets clipped by
   .main's overflow:hidden. */
#view-api-connectivity { overflow-y: auto; }
.ac-page {
  padding: 28px 32px 48px;
  background: #f8fafc;
  min-height: 100%;
}
.ac-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.ac-title { font-size: 24px; font-weight: 700; color: #1e293b; margin: 0; }
.ac-breadcrumb { color: #64748b; font-size: 13px; }
.ac-bc-sep { color: #94a3b8; margin: 0 4px; }

.ac-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) { .ac-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .ac-grid { grid-template-columns: 1fr; } }

.ac-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.15s, transform 0.12s, border-color 0.12s;
}
.ac-card:hover {
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
  transform: translateY(-1px);
}
.ac-banner {
  background: #0f172a;
  color: white;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  position: relative;
}
.ac-banner-text {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-align: center;
}
.ac-banner-text small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  opacity: 0.75;
  margin-top: 4px;
  text-transform: uppercase;
}
.ac-status-dot {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.7);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
}
.ac-status-dot::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: #94a3b8;
}
.ac-status-dot.connected::before { background: #16a34a; }
.ac-status-dot.failed::before    { background: #ef4444; }
.ac-status-dot.untested::before  { background: #facc15; }
.ac-status-dot.connected { color: #d1fae5; }
.ac-status-dot.failed    { color: #fee2e2; }
.ac-status-dot.untested  { color: #fef3c7; }
.ac-status-dot.empty     { color: #cbd5e1; }

.ac-body {
  padding: 18px 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ac-desc { color: #64748b; font-size: 13px; line-height: 1.5; }
.ac-note {
  background: #fef9c3;
  border-left: 3px solid #fde68a;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  color: #713f12;
  line-height: 1.5;
}
.ac-note ol { margin: 4px 0 0 18px; padding: 0; }
.ac-manage-btn {
  margin-top: auto;
  background: white;
  color: #2563eb;
  border: 1px solid #2563eb;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  width: fit-content;
}
.ac-manage-btn:hover { background: #eff6ff; }
.ac-manage-btn.is-connected { background: #2563eb; color: white; }
.ac-manage-btn.is-connected:hover { background: #1d4ed8; }

/* Model picker rows inside the manage modal */
.ac-model-list { display: flex; flex-direction: column; gap: 6px; }
.ac-model-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  background: white;
}
.ac-model-row.is-selected { border-color: #2563eb; background: #eff6ff; }
.ac-model-row input { margin: 0; }
.ac-model-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 11px;
  color: #64748b;
}
.ac-model-name { font-weight: 700; font-size: 13px; color: #1e293b; }
.ac-model-desc { font-size: 11.5px; color: #64748b; }
.ac-pill {
  display: inline-block;
  background: #f1f5f9;
  color: #1e293b;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.ac-pill.fast    { background: #d1fae5; color: #065f46; }
.ac-pill.medium  { background: #fef3c7; color: #92400e; }
.ac-pill.slow    { background: #fee2e2; color: #b91c1c; }
.ac-pill.cheap   { background: #d1fae5; color: #065f46; }
.ac-pill.mid     { background: #fef3c7; color: #92400e; }
.ac-pill.pricey  { background: #fee2e2; color: #b91c1c; }

.ac-range {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ac-range input[type=range] { flex: 1; }
.ac-range-value {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-weight: 600;
  font-size: 12px;
  color: #1e293b;
  min-width: 44px;
  text-align: right;
}
.cm-ecommerce-detected {
  font-weight: 500; text-transform: none; letter-spacing: normal;
  color: #2563eb; font-size: 11.5px; margin-left: 4px;
}

.ac-helper {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}
.ac-input-with-eye { position: relative; }
.ac-input-with-eye input { padding-right: 36px; }
.ac-eye-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: #94a3b8;
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
}
.ac-eye-btn:hover { color: #1e293b; }
.ac-checklist label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #1e293b;
  padding: 2px 0;
}
.ac-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
}
.ac-instructions-link {
  display: inline-block;
  margin-top: 6px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════
   LOCAL BACKLINK BUILDER — listicle generator for competitor pages
   Style: clean white cards on a #F8FAFC background, blue section
   headers, padded sections, sticky bottom action bar.
   ════════════════════════════════════════════════════════════════════ */
.lbb-page {
  width: 100%;
  height: 100%;
  background: #F8FAFC;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 100px; /* room for the sticky bottom bar */
}
.lbb-header {
  padding: 22px 28px 6px;
}
.lbb-crumbs {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 6px;
}
.lbb-crumb-sep { margin: 0 6px; color: #cbd5e1; }
.lbb-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.lbb-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: #64748b;
}
.lbb-biz-ctx { margin: 12px 28px 0; }

/* Section card — every section is a white card on the slate background. */
.lbb-section {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin: 22px 28px 0;
  overflow: hidden;
}
.lbb-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 700;
  color: #1d4ed8;             /* app primary blue */
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.lbb-emo { font-size: 17px; }
.lbb-section-body { padding: 18px 24px; }

/* ── Section 1: Template horizontal scroll row ─────────────────── */
.lbb-template-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.lbb-template-row::-webkit-scrollbar { height: 8px; }
.lbb-template-row::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.lbb-template-card {
  flex: 0 0 200px;
  position: relative;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.lbb-template-card:hover {
  border-color: #93c5fd;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.lbb-template-card.is-selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.lbb-template-thumb {
  width: 100%;
  height: 110px;
  border-radius: 8px;
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin-bottom: 10px;
  overflow: hidden;
}
.lbb-template-name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}
.lbb-template-desc {
  font-size: 11.5px;
  color: #64748b;
  margin-bottom: 10px;
  min-height: 28px;
}
.lbb-template-btn {
  width: 100%;
  background: #2563eb;
  color: white;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.lbb-template-btn:hover { background: #1d4ed8; }
.lbb-template-card.is-selected .lbb-template-btn { background: #16a34a; }
.lbb-template-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2563eb;
  color: white;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.lbb-template-card.is-selected .lbb-template-check { display: inline-flex; }

/* ── Generic field / row layouts ───────────────────────────────── */
.lbb-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.lbb-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  margin-bottom: 16px;
}
.lbb-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lbb-field-full { grid-column: 1 / -1; }
.lbb-field label {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}
.lbb-field .lbb-req { color: #dc2626; }
.lbb-field input[type="text"],
.lbb-field input[type="number"],
.lbb-field input[type="url"],
.lbb-field textarea,
.lbb-field select {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  background: white;
  color: #0f172a;
  outline: 0;
  transition: border-color 100ms ease, box-shadow 100ms ease;
}
.lbb-field input:focus,
.lbb-field textarea:focus,
.lbb-field select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.lbb-field textarea { resize: vertical; min-height: 70px; font-family: inherit; }
.lbb-helper {
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 2px;
}

/* ── Section 3: Target Business ───────────────────────────────── */
.lbb-fetch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #2563eb;
  color: white;
  border: 0;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 16px;
  transition: background 100ms ease;
}
.lbb-fetch-btn:hover { background: #1d4ed8; }
.lbb-fetch-btn:disabled { background: #93c5fd; cursor: progress; }
.lbb-target-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px 18px;
}

/* ── Section 4: Competitor settings ────────────────────────────── */
.lbb-comp-toggle {
  display: flex;
  gap: 22px;
  margin-bottom: 14px;
}
.lbb-comp-toggle-stack { flex-direction: column; gap: 8px; }
.lbb-comp-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #1e293b;
  cursor: pointer;
}
.lbb-comp-opt input[type="radio"] { accent-color: #2563eb; }
.lbb-comp-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.lbb-comp-dot-green { background: #16a34a; }
.lbb-comp-dot-amber { background: #f59e0b; }
.lbb-comp-dot-blue  { background: #2563eb; }
.lbb-find-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  color: #2563eb;
  border: 1.5px solid #2563eb;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 14px;
}
.lbb-find-btn:hover { background: #eff6ff; }
.lbb-find-btn:disabled { opacity: 0.65; cursor: progress; }
.lbb-spinner {
  width: 14px; height: 14px;
  border: 2px solid #93c5fd;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: lbb-spin 0.7s linear infinite;
}
@keyframes lbb-spin { to { transform: rotate(360deg); } }

.lbb-comp-results { display: flex; flex-direction: column; gap: 8px; }
.lbb-comp-empty {
  padding: 18px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  background: #f8fafc;
  border: 1px dashed #e2e8f0;
  border-radius: 8px;
}
/* Stale-results banner shown above the competitor list when the GBP
   term is edited after a search has been run. Slightly more vibrant
   than the regular warning so it draws the eye. */
.lbb-comp-stale {
  background: #fef3c7;
  border-left: 4px solid #f59e0b !important;
  margin-bottom: 10px;
  animation: lbb-stale-pulse 1500ms ease-in-out;
}
@keyframes lbb-stale-pulse {
  0%   { background: #fde68a; }
  50%  { background: #fef3c7; }
  100% { background: #fef3c7; }
}
.lbb-comp-stale strong { font-weight: 700; }
.lbb-comp-warn {
  padding: 12px 14px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  color: #92400e;
  font-size: 13px;
}
.lbb-comp-card {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 100ms ease, background 100ms ease;
}
.lbb-comp-card:hover { border-color: #93c5fd; background: #f8fafc; }
.lbb-comp-card.is-selected {
  border-color: #2563eb;
  background: #eff6ff;
}
.lbb-comp-avatar {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: #eef2ff;
  color: #4f46e5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.lbb-comp-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lbb-comp-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lbb-comp-meta { font-size: 12px; color: #64748b; }
.lbb-comp-addr {
  font-size: 11.5px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lbb-comp-check {
  width: 22px; height: 22px;
  border: 2px solid #cbd5e1;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  font-size: 14px;
  color: white;
}
.lbb-comp-card.is-selected .lbb-comp-check {
  background: #2563eb;
  border-color: #2563eb;
}
.lbb-comp-card.is-selected .lbb-comp-check::after { content: '✓'; }

/* ── Section 6: Image options ──────────────────────────────────── */
.lbb-switch {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
}
.lbb-switch input { display: none; }
.lbb-switch-track {
  width: 38px; height: 22px;
  background: #cbd5e1;
  border-radius: 999px;
  position: relative;
  transition: background 120ms ease;
}
.lbb-switch-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: white;
  border-radius: 50%;
  transition: left 120ms ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.lbb-switch input:checked + .lbb-switch-track { background: #2563eb; }
.lbb-switch input:checked + .lbb-switch-track .lbb-switch-knob { left: 18px; }

.lbb-dropzone {
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  padding: 22px 18px;
  text-align: center;
  background: #f8fafc;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.lbb-dropzone:hover, .lbb-dropzone.is-drag {
  border-color: #2563eb;
  background: #eff6ff;
}
.lbb-dropzone-ico { font-size: 28px; margin-bottom: 6px; }
.lbb-dropzone-main { font-size: 13px; color: #334155; font-weight: 600; }
.lbb-dropzone-browse { color: #2563eb; text-decoration: underline; }
.lbb-logo-preview {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #475569;
}
.lbb-logo-preview img { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; background: white; border: 1px solid #e2e8f0; padding: 4px; }
.lbb-logo-remove {
  background: none;
  border: 0;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* ── Section 7: Publish platform cards ─────────────────────────── */
.lbb-publish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.lbb-pub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 12px;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: border-color 120ms ease, background 120ms ease;
}
.lbb-pub-card:hover { border-color: #93c5fd; }
.lbb-pub-card.is-selected { border-color: #2563eb; background: #eff6ff; }
.lbb-pub-card.is-disconnected { opacity: 0.55; cursor: not-allowed; }
.lbb-pub-logo {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #2563eb;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lbb-pub-name { font-size: 13px; font-weight: 700; color: #0f172a; }
.lbb-pub-state { font-size: 11px; color: #94a3b8; }
.lbb-pub-card.is-selected .lbb-pub-state { color: #2563eb; font-weight: 600; }
.lbb-pub-check {
  position: absolute;
  top: 8px; right: 8px;
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 2px solid #cbd5e1;
  background: white;
  font-size: 12px;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lbb-pub-card.is-selected .lbb-pub-check { background: #2563eb; border-color: #2563eb; }
.lbb-pub-card.is-selected .lbb-pub-check::after { content: '✓'; }

/* ── Sticky bottom action bar ──────────────────────────────────── */
.lbb-bottom-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 22px 28px 0;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Only the Generate button remains — right-aligned */
  gap: 18px;
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06);
  z-index: 5;
}
.lbb-cost {
  font-size: 13px;
  color: #475569;
}
.lbb-cost-ico { margin-right: 4px; }
.lbb-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #2563eb;
  color: white;
  border: 0;
  border-radius: 10px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 100ms ease, transform 100ms ease;
}
.lbb-generate-btn:hover:not(:disabled) { background: #1d4ed8; transform: translateY(-1px); }
.lbb-generate-btn:disabled { background: #cbd5e1; color: #f1f5f9; cursor: not-allowed; }

/* ── Preview panel (revealed after generation) ─────────────────── */
.lbb-preview-panel {
  margin: 22px 28px 0;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}
.lbb-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  gap: 14px;
  flex-wrap: wrap;
}
.lbb-preview-title { margin: 0; font-size: 16px; font-weight: 700; color: #0f172a; }
.lbb-preview-status {
  font-size: 12px;
  color: #16a34a;
  font-weight: 600;
  margin-top: 2px;
}
.lbb-preview-status.is-loading { color: #2563eb; }
.lbb-preview-status.is-error { color: #b91c1c; }
.lbb-preview-device { display: flex; gap: 4px; }
.lbb-device-btn {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
}
.lbb-device-btn.is-active { border-color: #2563eb; color: #2563eb; background: #eff6ff; }

.lbb-preview-tabs {
  display: flex;
  border-bottom: 1px solid #e2e8f0;
  padding: 0 22px;
  gap: 4px;
  background: white;
}
.lbb-tab {
  background: transparent;
  border: 0;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-family: inherit;
}
.lbb-tab.is-active { color: #2563eb; border-bottom-color: #2563eb; }

.lbb-preview-body { padding: 18px 22px; background: #f8fafc; }
.lbb-tab-pane { display: none; }
.lbb-tab-pane.is-active { display: block; }
.lbb-frame-wrap {
  margin: 0 auto;
  background: white;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  height: 70vh;
  transition: width 200ms ease;
}
.lbb-frame-wrap[data-device="desktop"] { width: 100%; }
.lbb-frame-wrap[data-device="tablet"]  { width: 820px; max-width: 100%; }
.lbb-frame-wrap[data-device="mobile"]  { width: 420px; max-width: 100%; }
.lbb-frame-wrap iframe {
  width: 100%; height: 100%; border: 0; display: block; background: white;
}

.lbb-code-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.lbb-code-view {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12.5px;
  line-height: 1.55;
  max-height: 60vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.lbb-pub-list { display: flex; flex-direction: column; gap: 10px; }
.lbb-pub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.lbb-pub-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}
.lbb-pub-row-state {
  font-size: 12px;
  color: #64748b;
  margin-left: auto;
}
.lbb-pub-row-state.is-success { color: #16a34a; }
.lbb-pub-row-state.is-error { color: #b91c1c; }
.lbb-pub-row-link {
  font-size: 12px;
  color: #2563eb;
  text-decoration: underline;
}
.lbb-pub-row-btn {
  background: #2563eb;
  color: white;
  border: 0;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.lbb-pub-row-btn:hover { background: #1d4ed8; }
.lbb-pub-row-btn:disabled { background: #cbd5e1; cursor: progress; }

/* ════════════════════════════════════════════════════════════════════
   MY WEBSITES — dashboard of all generated pages.
   Style: white card sections on slate background, clean table, soft
   coloured type-badge pills, ⋮ row-action menu.
   ════════════════════════════════════════════════════════════════════ */
.mw-page {
  width: 100%;
  height: 100%;
  background: #F8FAFC;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 22px 28px 60px;
}
.mw-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.mw-title { margin: 0; font-size: 22px; font-weight: 800; color: #0f172a; letter-spacing: -0.01em; }
.mw-subtitle { margin: 4px 0 0; font-size: 13px; color: #64748b; }
.mw-head-actions { display: flex; gap: 8px; }
.mw-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #2563eb;
  color: white;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 100ms ease;
}
.mw-cta-btn:hover { background: #1d4ed8; }

/* Filter row */
.mw-filters {
  display: grid;
  grid-template-columns: 1fr 200px 240px;
  gap: 10px;
  margin-bottom: 14px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
}
.mw-search {
  position: relative;
  display: flex;
  align-items: center;
}
.mw-search-ico { position: absolute; left: 12px; color: #94a3b8; pointer-events: none; }
.mw-search input {
  flex: 1;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 9px 12px 9px 34px;
  font-size: 13px;
  font-family: inherit;
  background: white;
  color: #0f172a;
  outline: 0;
}
.mw-search input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.mw-select {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  background: white;
  color: #0f172a;
  font-family: inherit;
  outline: 0;
}
.mw-select:focus { border-color: #2563eb; }
@media (max-width: 720px) { .mw-filters { grid-template-columns: 1fr; } }

/* Table */
.mw-table-wrap {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  min-height: 200px;
}
.mw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mw-table thead th {
  background: #f8fafc;
  color: #475569;
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
}
.mw-table .mw-th-num { width: 50px; }
.mw-table .mw-th-actions { width: 90px; }
.mw-table tbody tr {
  border-bottom: 1px solid #f1f5f9;
  transition: background 100ms ease;
}
.mw-table tbody tr:last-child { border-bottom: 0; }
.mw-table tbody tr {
  cursor: pointer;  /* Rows are clickable — open the saved page in a new tab */
}
.mw-table tbody tr:hover { background: #f8fafc; }
.mw-table tbody tr:hover .mw-biz-name { color: #2563eb; }
.mw-table td {
  padding: 14px 16px;
  vertical-align: middle;
  color: #1e293b;
}
.mw-num-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.mw-biz-name {
  font-weight: 700;
  color: #0f172a;
}
.mw-biz-count {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}
.mw-target-url {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #2563eb;
  text-decoration: none;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
}
.mw-target-url:hover { text-decoration: underline; }

/* Type badges — coloured pills */
.mw-type-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.mw-type-local      { background: #dbeafe; color: #1d4ed8; }
.mw-type-ai         { background: #f3e8ff; color: #6b21a8; }

/* Status badges for rows that are still being generated, or that
   failed during generation. Shown alongside the type pill. */
.mw-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  margin-left: 6px;
}
.mw-status-generating { background: #fef3c7; color: #92400e; }
.mw-status-failed     { background: #fee2e2; color: #991b1b; }
/* When the Failed badge is rendered as a <button> ("⚠ Failed — Retry"),
   make it look obviously clickable without disrupting the pill shape. */
button.mw-status-badge {
  border: none;
  cursor: pointer;
  font-family: inherit;
}
button.mw-status-retry:hover {
  background: #fecaca;
  box-shadow: 0 1px 3px rgba(153, 27, 27, 0.25);
}
button.mw-status-retry:active { transform: translateY(1px); }
.mw-mini-spinner {
  width: 10px; height: 10px;
  border: 2px solid #fcd34d;
  border-top-color: #92400e;
  border-radius: 50%;
  animation: mw-spin 0.8s linear infinite;
}
@keyframes mw-spin { to { transform: rotate(360deg); } }
/* Generating rows get a subtle yellow tint so they stand out in the list */
.mw-table tbody tr.is-generating { background: #fffbeb; }
.mw-table tbody tr.is-generating:hover { background: #fef3c7; }

.mw-date { color: #64748b; font-size: 12px; }

/* Action buttons cell */
.mw-actions-cell {
  position: relative;
  text-align: right;
  white-space: nowrap;
}
.mw-cloud-btn,
.mw-menu-btn {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 4px;
  font-size: 14px;
  color: #475569;
  transition: background 100ms ease, border-color 100ms ease;
}
.mw-cloud-btn:hover,
.mw-menu-btn:hover { background: #f8fafc; border-color: #93c5fd; color: #2563eb; }
/* Active state for the cloud button while its picker panel is open —
   matches the blue ring of the menu button so the user can see at a
   glance which row owns the expanded grid. */
tr.mw-cloud-open .mw-cloud-btn {
  background: #eff6ff;
  border-color: #2563eb;
  color: #2563eb;
}

/* ── Inline cloud-picker panel (toggled by the ☁️ button) ──────────── */
/* Rendered as a full-width <tr> inserted directly after the data row.
   colspan=table-width so the panel spans every column. The grid of
   provider tiles mirrors the look of cloud-connectivity but the tiles
   are smaller (this is a quick picker, not the full management UI). */
tr.mw-cloud-panel-row > td {
  padding: 0;
  background: #f8fafc;
  border-top: none;
}
.mw-cloud-panel {
  padding: 18px 22px 22px;
  border-bottom: 1px solid #e2e8f0;
  animation: mw-cloud-slide 180ms ease-out;
}
@keyframes mw-cloud-slide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mw-cloud-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.mw-cloud-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}
.mw-cloud-panel-title strong { color: #0f172a; }
.mw-cloud-panel-close {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
}
.mw-cloud-panel-close:hover { background: #e2e8f0; color: #0f172a; }
.mw-cloud-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 900px) { .mw-cloud-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mw-cloud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mw-cloud-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
  text-align: left;
  font-family: inherit;
}
.mw-cloud-tile:hover {
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
}
.mw-cloud-tile:active { transform: translateY(1px); }
.mw-cloud-tile-logo {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.mw-cloud-tile-name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Per-provider upload view (rendered inside .mw-cloud-panel) ────── */
.mw-up-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}
.mw-up-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.mw-up-head-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mw-up-head-logo {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
}
.mw-up-head-name {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}
.mw-up-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mw-up-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
}
.mw-up-btn-ghost {
  background: white;
  border-color: #2563eb;
  color: #2563eb;
}
.mw-up-btn-ghost:hover { background: #eff6ff; }
.mw-up-btn-warn {
  background: #f97316;
  color: white;
}
.mw-up-btn-warn:hover { background: #ea580c; }
.mw-up-btn-icon {
  width: 34px;
  padding: 0;
  background: white;
  border-color: #e2e8f0;
  color: #475569;
  font-size: 18px;
  justify-content: center;
}
.mw-up-btn-icon:hover { background: #f1f5f9; color: #0f172a; }

/* Platform-switcher dropdown */
.mw-up-platform-switcher {
  position: relative;
}
.mw-up-switcher-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  padding: 6px;
  z-index: 20;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
}
.mw-up-switcher-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #0f172a;
  text-align: left;
  font-family: inherit;
}
.mw-up-switcher-item:hover { background: #f1f5f9; }

/* Form */
.mw-up-body {
  padding: 22px 24px 6px;
  background: white;
}
.mw-up-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.mw-up-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.mw-up-select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: white;
  font-size: 13px;
  color: #0f172a;
  font-family: inherit;
}
.mw-up-select:disabled { background: #f8fafc; color: #94a3b8; cursor: not-allowed; }
.mw-up-input-add {
  display: flex;
  gap: 6px;
}
.mw-up-input-add .mw-up-select { flex: 1; }
.mw-up-add-btn {
  width: 38px;
  height: 38px;
  background: #1e293b;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mw-up-add-btn:hover { background: #0f172a; }
.mw-up-add-btn:disabled { background: #cbd5e1; cursor: not-allowed; }

/* URL structure radios */
.mw-up-url-structure {
  margin: 4px 0 18px;
}
.mw-up-url-label {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.mw-up-url-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #0f172a;
}
.mw-up-url-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mw-up-url-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fde68a;
  border: 2px solid #fde68a;
  flex: 0 0 auto;
}
.mw-up-url-option input[type="radio"]:checked + .mw-up-url-dot {
  background: #f59e0b;
  border-color: #f59e0b;
}
.mw-up-url-pattern {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: transparent;
  color: #2563eb;
  font-size: 12px;
}
.mw-up-url-note {
  color: #38bdf8;
  font-size: 12px;
}

/* Upload button */
.mw-up-actions {
  display: flex;
  justify-content: center;
  padding: 14px 0 26px;
}
.mw-up-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px;
  height: 42px;
  border-radius: 999px;
  background: #2563eb;
  color: white;
  border: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: inherit;
}
.mw-up-upload-btn:hover { background: #1d4ed8; }
.mw-up-upload-ico { font-size: 16px; }

/* Upload History */
.mw-up-history {
  background: white;
  border-top: 1px solid #e2e8f0;
  padding: 18px 24px 22px;
}
.mw-up-history-head {
  margin-bottom: 14px;
  font-size: 14px;
}
.mw-up-history-head strong { color: #0f172a; }
.mw-up-history-sub {
  color: #f97316;
  font-size: 13px;
  margin-left: 6px;
}
.mw-up-history-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 13px;
  color: #475569;
}
.mw-up-select-sm { width: 70px; height: 30px; display: inline-block; margin: 0 6px; }
.mw-up-history-search input {
  height: 30px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  margin-left: 6px;
  font-family: inherit;
  font-size: 13px;
}
.mw-up-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mw-up-history-table thead {
  background: #0f172a;
  color: white;
}
.mw-up-history-table th {
  padding: 12px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.mw-up-history-empty {
  padding: 22px;
  text-align: center;
  color: #94a3b8;
}
.mw-up-history-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-size: 13px;
  color: #475569;
}
.mw-up-history-pager button {
  border: none;
  background: transparent;
  color: #2563eb;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
}
.mw-up-history-pager button:disabled { color: #cbd5e1; cursor: not-allowed; }

@media (max-width: 900px) {
  .mw-up-row { grid-template-columns: 1fr; }
}

/* Success toast for upload confirmations. Slides in from the bottom-
   right and stays for ~4.5s so the user has time to read the URL. */
.mw-up-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  max-width: 480px;
  padding: 12px 18px;
  background: #0f172a;
  color: white;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.35);
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 200ms ease, transform 200ms ease;
  word-break: break-all;
}
.mw-up-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.mw-row-menu {
  /* Anchored to the viewport with position:fixed so it can never be
     clipped by the table wrapper's overflow:hidden / border-radius.
     The JS sets top + left explicitly relative to the trigger button. */
  position: fixed;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.15);
  min-width: 200px;
  padding: 6px;
  z-index: 9999;
}
.mw-row-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  color: #1e293b;
  border-radius: 6px;
  cursor: pointer;
}
.mw-row-menu button:hover { background: #f1f5f9; }
.mw-row-menu button.danger { color: #b91c1c; }
.mw-row-menu button.danger:hover { background: #fee2e2; }
.mw-row-menu-ico { width: 16px; display: inline-flex; justify-content: center; }

/* Empty state */
.mw-empty {
  text-align: center;
  padding: 56px 24px;
  color: #64748b;
}
.mw-empty-ico { font-size: 56px; margin-bottom: 12px; opacity: 0.5; }
.mw-empty-text { font-size: 14px; margin-bottom: 18px; }
.mw-empty-btn {
  display: inline-block;
  background: #2563eb;
  color: white;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.mw-empty-btn:hover { background: #1d4ed8; }

/* Pagination */
.mw-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding: 0 4px;
  flex-wrap: wrap;
  gap: 10px;
}
.mw-pag-info { font-size: 12px; color: #64748b; }
.mw-pag-controls { display: flex; gap: 4px; }
.mw-pag-btn {
  border: 1px solid #e2e8f0;
  background: white;
  border-radius: 6px;
  min-width: 32px;
  height: 32px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  padding: 0 8px;
}
.mw-pag-btn:hover { background: #f8fafc; border-color: #93c5fd; }
.mw-pag-btn.is-active { background: #2563eb; color: white; border-color: #2563eb; }
.mw-pag-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Highlight a row that was just created (used by the success toast →
   View it →). Glows blue for ~2 seconds then fades back to normal. */
.mw-table tbody tr.is-highlight {
  background: #eff6ff !important;
  box-shadow: inset 4px 0 0 #2563eb;
  animation: mw-highlight-fade 2400ms ease forwards;
}
@keyframes mw-highlight-fade {
  0%, 70% { background: #eff6ff; }
  100% { background: white; }
}

/* Success toast — shown after Local Backlink Builder saves a page. */
.mw-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: #0f172a;
  color: white;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.3);
  z-index: 9000;
  animation: mw-toast-in 250ms ease forwards;
}
.mw-toast a {
  color: #93c5fd;
  text-decoration: underline;
  font-weight: 700;
}
.mw-toast-close {
  background: transparent;
  border: 0;
  color: #94a3b8;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
@keyframes mw-toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════
   MY WEBSITES — Edit Content full-PAGE editor (no longer a modal).
   Layout: dark top navbar + main scrollable editor on the LEFT +
   sticky right action panel + fixed bottom action bar.
   ════════════════════════════════════════════════════════════════════ */
.mw-editor-backdrop {
  /* No longer used — the editor now lives in-flow inside the main
     content area, with all app chrome (left sidebar, cb-sidebar, top
     nav) staying visible around it. */
  display: none;
}
.mw-editor {
  /* In-flow inside the My Websites cb-sub-view. Flex column so the
     navbar stays on top, the body grows, and the foot-bar sticks to
     the bottom of THIS container (not the viewport). */
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

/* BREADCRUMB — sits above the dark editor navbar so the user can see
   they're still inside the My Websites view, just on the edit sub-route. */
.mw-ed-crumbs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px 8px;
  background: #f8fafc;
  flex-shrink: 0;
}
.mw-ed-crumb-trail {
  font-size: 12.5px;
  color: #64748b;
}
.mw-ed-crumb-trail a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}
.mw-ed-crumb-trail a:hover { text-decoration: underline; }
.mw-ed-crumb-sep { margin: 0 8px; color: #cbd5e1; }
.mw-ed-crumb-current { color: #0f172a; font-weight: 600; }
.mw-ed-crumb-back {
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 6px;
}
.mw-ed-crumb-back:hover { background: #f1f5f9; color: #0f172a; }

/* DARK TOP NAVBAR */
.mw-ed-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 22px;
  background: #0f172a;
  color: white;
  flex-shrink: 0;
}
.mw-ed-nav-left { display: flex; align-items: center; gap: 14px; }
.mw-ed-back {
  background: transparent;
  border: 0;
  color: #cbd5e1;
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}
.mw-ed-back:hover { background: rgba(255,255,255,0.10); color: white; }
.mw-ed-title-block { line-height: 1.2; }
.mw-ed-title-main { font-size: 14px; font-weight: 700; color: white; }
.mw-ed-title-sub { font-size: 11.5px; color: #94a3b8; margin-top: 2px; }
.mw-ed-nav-right { display: flex; align-items: center; gap: 8px; }
.mw-ed-btn {
  background: white;
  color: #1e293b;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.mw-ed-btn:hover { background: #f1f5f9; }
.mw-ed-btn-primary { background: #2563eb; color: white; border-color: #2563eb; }
.mw-ed-btn-primary:hover { background: #1d4ed8; }
.mw-ed-btn-primary:disabled { background: #64748b; border-color: #64748b; cursor: progress; }
.mw-ed-btn-ghost-dark {
  background: transparent; color: white; border: 1px solid rgba(255,255,255,0.30);
}
.mw-ed-btn-ghost-dark:hover { background: rgba(255,255,255,0.10); }

/* BODY — left scrollable main + right sticky panel */
.mw-ed-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 300px;
  overflow: hidden;
}
.mw-ed-main {
  overflow-y: auto;
  padding: 24px 32px 100px;
  background: #f8fafc;
}
.mw-ed-side {
  border-left: 1px solid #e2e8f0;
  background: white;
  overflow-y: auto;
  padding: 22px 20px 100px;
}

/* SHARED SECTION CARDS */
.mw-ed-section {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 22px 26px;
  margin-bottom: 18px;
}
.mw-ed-section-h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}
.mw-ed-section-h-ico { font-size: 18px; }

/* RIGHT PANEL — sticky info card stacks */
.mw-ed-side-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.mw-ed-side-h {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin: 0 0 10px;
}
.mw-ed-side-readonly {
  font-size: 12px;
  color: #475569;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 8px;
}
.mw-ed-side-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 4px 0;
}
.mw-ed-side-stat-row > span:first-child { color: #64748b; }
.mw-ed-side-stat-row > span:last-child { color: #0f172a; font-weight: 700; }

/* FIELDS — used in both main and side */
.mw-ed-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.mw-ed-field label { font-size: 12px; font-weight: 600; color: #334155; }
.mw-ed-field input,
.mw-ed-field select,
.mw-ed-field textarea {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  color: #0f172a;
  background: white;
  outline: 0;
}
.mw-ed-field input:focus, .mw-ed-field select:focus, .mw-ed-field textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.mw-ed-field textarea { resize: vertical; min-height: 70px; }
.mw-ed-field-input-large input { font-size: 16px; font-weight: 600; padding: 10px 12px; }
.mw-ed-field-helper { font-size: 11.5px; color: #94a3b8; }
.mw-ed-field-charcount { font-size: 11px; color: #94a3b8; text-align: right; }
.mw-ed-field-charcount.is-over { color: #b91c1c; font-weight: 700; }

.mw-ed-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mw-ed-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* IMAGE WIDGET */
.mw-ed-image {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}
.mw-ed-image-thumb {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  background: #e2e8f0;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #94a3b8;
}
.mw-ed-image-controls { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.mw-ed-image-controls input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
}
.mw-ed-image-mini-btn {
  align-self: flex-start;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
}
.mw-ed-image-mini-btn.danger { color: #b91c1c; }

/* SECTION 2 — YOUR BUSINESS (highlighted in blue) */
.mw-ed-brand-card {
  background: linear-gradient(0deg, #eff6ff, #eff6ff), white;
  border: 2px solid #93c5fd;
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 18px;
}
.mw-ed-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #2563eb;
  color: white;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* SECTION 3 — COMPETITOR CARDS */
.mw-ed-comp-list { display: flex; flex-direction: column; gap: 10px; }
.mw-ed-comp-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}
.mw-ed-comp-card.is-dragging { opacity: 0.4; }
.mw-ed-comp-card.is-drag-over { border-color: #2563eb; box-shadow: 0 0 0 2px #93c5fd; }
.mw-ed-comp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #f8fafc;
  cursor: pointer;
  user-select: none;
}
.mw-ed-comp-card.is-collapsed .mw-ed-comp-body { display: none; }
.mw-ed-comp-card.is-collapsed .mw-ed-comp-head { border-bottom: 0; }
.mw-ed-comp-card:not(.is-collapsed) .mw-ed-comp-head { border-bottom: 1px solid #e2e8f0; }
.mw-ed-drag-handle {
  cursor: grab;
  color: #94a3b8;
  font-size: 16px;
  padding: 2px 4px;
  line-height: 1;
}
.mw-ed-drag-handle:active { cursor: grabbing; }
.mw-ed-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  color: #475569;
  font-weight: 700;
  font-size: 12px;
  border-radius: 6px;
  padding: 3px 10px;
}
.mw-ed-comp-name-readonly {
  flex: 1;
  font-weight: 700;
  color: #0f172a;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mw-ed-comp-toggle {
  background: transparent;
  border: 0;
  font-size: 14px;
  cursor: pointer;
  color: #64748b;
  padding: 4px;
  line-height: 1;
}
.mw-ed-comp-card.is-collapsed .mw-ed-comp-toggle { transform: rotate(180deg); }
.mw-ed-comp-delete {
  background: transparent;
  border: 0;
  font-size: 14px;
  cursor: pointer;
  color: #b91c1c;
  padding: 4px 6px;
  line-height: 1;
}
.mw-ed-comp-delete:hover { background: #fee2e2; border-radius: 4px; }
.mw-ed-comp-body { padding: 18px 20px; }

.mw-ed-add-comp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: 1.5px dashed #93c5fd;
  color: #2563eb;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 12px;
}
.mw-ed-add-comp:hover { background: #eff6ff; }

/* STAR RATING DISPLAY */
.mw-ed-stars { display: inline-flex; gap: 2px; align-items: center; font-size: 16px; }
.mw-ed-stars-row { display: flex; align-items: center; gap: 8px; }
.mw-ed-stars-row input { width: 90px; }
.mw-ed-star { color: #fbbf24; }
.mw-ed-star.is-empty { color: #e2e8f0; }
.mw-ed-star.is-half {
  background: linear-gradient(90deg, #fbbf24 50%, #e2e8f0 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* FOOTER LINKS */
.mw-ed-link-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr 32px;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.mw-ed-link-row input {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-family: inherit;
}
.mw-ed-link-row button {
  background: transparent;
  border: 0;
  color: #b91c1c;
  cursor: pointer;
  font-size: 14px;
}

/* BOTTOM ACTION BAR — sticky to the bottom of the editor container
   (NOT the viewport) so the app's left sidebar + secondary sidebar
   remain unobstructed. */
.mw-ed-footbar {
  flex-shrink: 0;
  background: white;
  border-top: 1px solid #e2e8f0;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.06);
}
.mw-ed-foot-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: inherit;
}
.mw-ed-foot-link:hover { background: #f1f5f9; color: #0f172a; }
.mw-ed-status {
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
}
.mw-ed-status.is-dirty { color: #ea580c; }
.mw-ed-status.is-saving { color: #ca8a04; }
.mw-ed-status.is-saved { color: #16a34a; }
.mw-ed-status.is-error { color: #b91c1c; }
.mw-ed-foot-right { display: flex; gap: 8px; }

/* ARTICLE CONTENT EDITOR — full editable body per business */
.mw-ed-article {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed #cbd5e1;
}
.mw-ed-article-h {
  font-size: 12px;
  font-weight: 800;
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mw-ed-article textarea {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
  min-height: 90px;
}
/* Services bullet list */
.mw-ed-services-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.mw-ed-service-row {
  display: grid;
  grid-template-columns: 1fr 28px;
  gap: 6px;
  align-items: center;
}
.mw-ed-service-row input {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  background: white;
  color: #0f172a;
}
.mw-ed-service-row input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.mw-ed-service-remove {
  background: white;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  height: 32px;
}
.mw-ed-service-remove:hover { background: #fee2e2; }
.mw-ed-service-add {
  background: white;
  border: 1.5px dashed #93c5fd;
  color: #2563eb;
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.mw-ed-service-add:hover { background: #eff6ff; }
/* Word-count pill */
.mw-ed-wordcount-wrap { margin-top: 10px; }
.mw-ed-wordcount {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.mw-ed-wordcount-low  { background: #fef3c7; color: #92400e; }
.mw-ed-wordcount-ok   { background: #dcfce7; color: #166534; }
.mw-ed-wordcount-high { background: #dbeafe; color: #1d4ed8; }

/* EDITOR — Spotlight / Brand Highlight stats row + FAQ rows */
.mw-ed-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.mw-ed-stat-pair {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mw-ed-stat-pair input {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  background: white;
  color: #0f172a;
}
.mw-ed-faq-row {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.mw-ed-faq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.mw-ed-faq-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}
.mw-ed-faq-remove {
  background: transparent;
  border: 0;
  color: #b91c1c;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.mw-ed-faq-remove:hover { text-decoration: underline; }
.mw-ed-faq-add {
  background: #16a34a;
  color: white;
  border: 0;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.mw-ed-faq-add:hover { background: #15803d; }

/* Toast for "Content updated successfully" */
.mw-ed-toast {
  position: fixed;
  top: 76px;
  right: 28px;
  background: #16a34a;
  color: white;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.25);
  z-index: 8500;
  animation: mw-ed-toast-in 200ms ease forwards;
}
@keyframes mw-ed-toast-in {
  from { transform: translateY(-10px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@media (max-width: 1000px) {
  .mw-ed-body { grid-template-columns: 1fr; }
  .mw-ed-side { border-left: 0; border-top: 1px solid #e2e8f0; }
}

/* ── Social Media — Create Posts + Accounts Connectivity ─────────── */
/* Shared shell mirroring the .lbb-page pattern so the two pages feel
   visually consistent with Local Backlink Builder and Backlinks Builder. */
.sm-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 24px 80px;
}
.sm-header { margin-bottom: 22px; }
.sm-crumbs { font-size: 12px; color: #64748b; margin-bottom: 6px; }
.sm-crumb-sep { color: #cbd5e1; margin: 0 4px; }
.sm-title { font-size: 26px; font-weight: 800; color: #0f172a; margin: 0 0 4px; }
.sm-subtitle { color: #475569; font-size: 14px; margin: 0; }

.sm-section {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 18px;
  overflow: hidden;
}
.sm-section-header {
  padding: 14px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 700;
  font-size: 14px;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sm-emo { font-size: 16px; }
.sm-section-body { padding: 20px; }

.sm-field { margin-bottom: 14px; }
.sm-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.sm-field input[type="text"],
.sm-field input[type="password"],
.sm-field input[type="datetime-local"],
.sm-field textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: #0f172a;
  font-family: inherit;
}
.sm-field textarea { resize: vertical; }
.sm-helper { font-size: 12px; color: #64748b; margin-top: 6px; }
.sm-req { color: #dc2626; }
.sm-link { color: #2563eb; text-decoration: underline; }
.sm-empty { padding: 18px; text-align: center; color: #64748b; font-size: 14px; }

/* Image dropzone (same look as the LBB logo dropzone) */
.sm-dropzone {
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  background: #f8fafc;
  transition: border-color 120ms ease, background 120ms ease;
}
.sm-dropzone:hover, .sm-dropzone.is-drag {
  border-color: #2563eb;
  background: #eff6ff;
}
.sm-dropzone-ico { font-size: 28px; margin-bottom: 6px; }
.sm-dropzone-main { font-size: 14px; color: #475569; }
.sm-dropzone-browse { color: #2563eb; text-decoration: underline; }
.sm-image-preview { margin-top: 10px; }

/* Target chips (Publish To) */
.sm-targets { display: flex; flex-wrap: wrap; gap: 10px; }
.sm-target-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  user-select: none;
}
.sm-target-chip:has(input:checked) {
  border-color: #2563eb;
  background: #eff6ff;
}
.sm-target-chip input[type="checkbox"] { accent-color: #2563eb; }
.sm-target-label { white-space: nowrap; }

/* Schedule row */
.sm-schedule-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.sm-radio { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: #0f172a; cursor: pointer; }

/* Sticky bottom bar (matches LBB) */
.sm-bottom-bar {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, white 80%, transparent);
  padding: 18px 0 6px;
  margin-top: 18px;
  display: flex;
  justify-content: center;
}
.sm-publish-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}
.sm-publish-btn:hover:not(:disabled) { background: #1d4ed8; }
.sm-publish-btn:disabled { background: #cbd5e1; cursor: not-allowed; box-shadow: none; }

/* Platform grid (Accounts Connectivity) */
.sm-platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.sm-platform-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.sm-platform-card:hover {
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
}
.sm-platform-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  font-weight: 800;
  flex: 0 0 auto;
}
.sm-platform-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sm-platform-name { font-size: 14px; font-weight: 700; color: #0f172a; }
.sm-platform-status { font-size: 12px; color: #94a3b8; }
.sm-platform-status.is-connected { color: #16a34a; font-weight: 600; }

/* Connected accounts list */
.sm-connected-list { display: flex; flex-direction: column; gap: 8px; }
.sm-connected-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.sm-connected-meta { flex: 1; min-width: 0; }
.sm-connected-name { font-size: 14px; font-weight: 600; color: #0f172a; }
.sm-connected-sub { font-size: 12px; color: #64748b; }

.sm-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
}
.sm-btn-ghost { background: white; border-color: #e2e8f0; color: #475569; }
.sm-btn-ghost:hover { background: #f1f5f9; color: #0f172a; }
.sm-btn-primary { background: #2563eb; color: white; }
.sm-btn-primary:hover:not(:disabled) { background: #1d4ed8; }
.sm-btn-primary:disabled { background: #cbd5e1; cursor: not-allowed; }

/* Connect modal */
.sm-modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.sm-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.5);
}
.sm-modal-panel {
  position: relative;
  background: white;
  border-radius: 14px;
  width: min(540px, calc(100% - 32px));
  max-height: calc(100vh - 64px);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.3);
}
.sm-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex; align-items: center; justify-content: space-between;
}
.sm-modal-header h2 { margin: 0; font-size: 17px; color: #0f172a; }
.sm-modal-x {
  background: none; border: none; font-size: 22px; cursor: pointer; color: #94a3b8;
  width: 32px; height: 32px; border-radius: 8px;
}
.sm-modal-x:hover { background: #f1f5f9; color: #0f172a; }
.sm-modal-body { padding: 20px; overflow-y: auto; }
.sm-modal-intro { font-size: 13px; color: #475569; margin: 0 0 16px; }
.sm-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid #e2e8f0;
  display: flex; justify-content: flex-end; gap: 8px;
}

/* ── Social — Create Posts (compose layout) ─────────────────────────
   Two-column grid: ~2/3 left (platform picker + body) + 1/3 right
   (Post-now / Schedule panel). Matches the reference design the user
   shared with platform-icon grid, rich-text editor, and calendar. */
.sc-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 24px 60px;
}
.sc-page-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.sc-page-title { font-size: 22px; font-weight: 800; color: #0f172a; margin: 0; }
.sc-page-crumbs { font-size: 13px; color: #94a3b8; }
.sc-page-crumb-sep { margin: 0 6px; color: #cbd5e1; }

.sc-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1000px) {
  .sc-grid { grid-template-columns: 1fr; }
}

.sc-left, .sc-right { display: flex; flex-direction: column; gap: 14px; }

.sc-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px;
}

.sc-label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sc-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

/* Platform picker icons (row of 7) */
.sc-platform-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sc-platform-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: white;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: white;
  font-weight: 800;
  font-size: 15px;
  position: relative;
  transition: transform 90ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.sc-platform-icon:hover { transform: translateY(-1px); }
.sc-platform-icon.is-selected {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.sc-platform-icon.is-disabled {
  filter: grayscale(0.7);
  opacity: 0.55;
  cursor: not-allowed;
}
.sc-platform-icon-check {
  position: absolute;
  bottom: -4px; right: -4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #16a34a;
  color: white;
  font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid white;
}

/* Preselected platforms */
.sc-preselect {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}
.sc-preselect-label { font-size: 11px; font-weight: 700; color: #94a3b8; letter-spacing: 0.06em; text-transform: uppercase; }
.sc-preselect-select {
  height: 32px; padding: 0 10px;
  border: 1px solid #cbd5e1; border-radius: 8px;
  background: white; font-size: 13px; color: #0f172a; font-family: inherit;
}
.sc-preselect-save {
  height: 32px; padding: 0 12px;
  background: white; border: 1px solid #cbd5e1; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
.sc-preselect-save:hover { background: #f1f5f9; }

/* Author + title row */
.sc-author-row {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 14px;
}
.sc-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #0f172a;
  color: white;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.sc-author-fields { flex: 1; min-width: 0; }
.sc-field { margin-bottom: 8px; }
.sc-field label {
  display: block;
  font-size: 11px; font-weight: 700; color: #94a3b8;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 4px;
}
.sc-field input[type="text"],
.sc-field input[type="number"],
.sc-field select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px; color: #0f172a; font-family: inherit;
  background: white;
}

/* Rich-text editor */
.sc-editor-wrap {
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  overflow: hidden;
}
.sc-editor-toolbar {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.sc-tool {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 8px;
  height: 28px;
  min-width: 28px;
  font-family: inherit;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
}
.sc-tool:hover { background: #eff6ff; color: #2563eb; border-color: #93c5fd; }
.sc-tool-select { padding: 0 8px; }
.sc-tool-sep {
  width: 1px; height: 18px; background: #e2e8f0; margin: 0 4px;
}
.sc-editor {
  min-height: 140px;
  padding: 14px 16px;
  font-size: 14px;
  color: #0f172a;
  outline: none;
  line-height: 1.5;
  cursor: text;
}
.sc-editor:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
  pointer-events: none;
}
.sc-editor p { margin: 0 0 10px; }
.sc-editor h1 { font-size: 22px; font-weight: 800; margin: 12px 0 6px; }
.sc-editor h2 { font-size: 18px; font-weight: 800; margin: 10px 0 6px; }
.sc-editor h3 { font-size: 16px; font-weight: 700; margin: 8px 0 4px; }
.sc-editor ul, .sc-editor ol { padding-left: 22px; margin: 6px 0; }

/* Bottom toolbar */
.sc-bottom-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.sc-bottom-left, .sc-bottom-right {
  display: flex; align-items: center; gap: 10px;
}
.sc-icon-btn {
  width: 32px; height: 32px;
  border: none; background: transparent;
  border-radius: 8px;
  font-size: 18px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #64748b;
}
.sc-icon-btn:hover { background: #f1f5f9; color: #0f172a; }

/* "Edit Content/Image Per Platform" toggle switch */
.sc-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; color: #475569; cursor: pointer; user-select: none;
}
.sc-toggle-track {
  position: relative; display: inline-block;
  width: 38px; height: 22px; border-radius: 999px;
  background: #cbd5e1;
  transition: background 150ms ease;
}
.sc-toggle-track input { position: absolute; opacity: 0; pointer-events: none; }
.sc-toggle-knob {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: white;
  transition: transform 150ms ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}
.sc-toggle-track:has(input:checked) { background: #2563eb; }
.sc-toggle-track:has(input:checked) .sc-toggle-knob { transform: translateX(16px); }

.sc-counter { font-size: 12px; color: #94a3b8; }
.sc-counter.is-over { color: #dc2626; font-weight: 600; }

.sc-publish-btn {
  height: 38px;
  padding: 0 20px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.02em;
}
.sc-publish-btn:hover:not(:disabled) { background: #1d4ed8; }
.sc-publish-btn:disabled { background: #cbd5e1; cursor: not-allowed; }

.sc-image-preview { margin-top: 12px; }
.sc-image-preview img { max-height: 200px; border-radius: 10px; }

/* ── Schedule panel (right column) ───────────────────────────────── */
.sc-schedule-card { padding: 16px; }
.sc-when-tabs {
  display: flex; gap: 0;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 16px;
}
.sc-when-tab {
  flex: 1;
  height: 34px;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  font-family: inherit;
}
.sc-when-tab.is-active {
  background: #2563eb;
  color: white;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.sc-apply-pills { display: flex; gap: 6px; }
.sc-apply-pill {
  height: 30px;
  padding: 0 14px;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  font-family: inherit;
}
.sc-apply-pill.is-active {
  background: #eff6ff;
  border-color: #2563eb;
  color: #2563eb;
}

/* Mini calendar */
.sc-calendar { margin: 12px 0; }
.sc-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.sc-cal-title { font-size: 14px; font-weight: 700; color: #0f172a; }
.sc-cal-nav { display: flex; gap: 4px; }
.sc-cal-nav-btn {
  width: 24px; height: 24px;
  border: none; background: transparent; cursor: pointer;
  border-radius: 6px; color: #475569; font-size: 14px;
}
.sc-cal-nav-btn:hover { background: #f1f5f9; }
.sc-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.sc-cal-dow {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
  padding: 6px 0;
}
.sc-cal-day {
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 50%;
  font-size: 13px;
  color: #0f172a;
  cursor: pointer;
  font-family: inherit;
}
.sc-cal-day:hover { background: #f1f5f9; }
.sc-cal-day.is-other { color: #cbd5e1; }
.sc-cal-day.is-today { font-weight: 700; }
.sc-cal-day.is-selected {
  background: #2563eb;
  color: white;
  font-weight: 700;
}
.sc-cal-day.is-disabled { color: #cbd5e1; cursor: not-allowed; }

/* Time picker row */
.sc-time-row {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  margin: 10px 0 14px;
}
.sc-time-input {
  width: 70px;
  height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  color: #0f172a;
  font-family: inherit;
}
.sc-time-sep { font-size: 18px; color: #64748b; font-weight: 700; }

.sc-sched-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px; border-top: 1px solid #e2e8f0;
  font-size: 13px;
}
.sc-sched-current { color: #475569; }
.sc-sched-clear {
  background: none; border: none; cursor: pointer;
  color: #dc2626; font-weight: 600; font-family: inherit; font-size: 13px;
}
.sc-sched-clear:hover { text-decoration: underline; }
.sc-sched-status {
  margin-top: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 12px;
  color: #475569;
  text-align: center;
}

/* Schedule panel disabled state (when "Post now" is active, hide
   the calendar / time pickers — they're meaningless without scheduling). */
.sc-schedule-card.is-now .sc-calendar,
.sc-schedule-card.is-now .sc-time-row,
.sc-schedule-card.is-now .sc-sched-foot {
  opacity: 0.5; pointer-events: none;
}





/* ── Content Generator (shared view) ─────────────────────────────── */
.cg-page { max-width: 980px; margin: 0 auto; padding: 28px 24px 60px; }
.cg-header { margin-bottom: 22px; }
.cg-crumbs { font-size: 12px; color: #64748b; margin-bottom: 6px; }
.cg-crumb-sep { color: #cbd5e1; margin: 0 4px; }
.cg-title { font-size: 26px; font-weight: 800; color: #0f172a; margin: 0 0 4px; }
.cg-subtitle { color: #475569; font-size: 14px; margin: 0; }
.cg-placeholder { background: white; border: 1px solid #e2e8f0; border-radius: 14px; padding: 56px 24px; text-align: center; }
.cg-placeholder-ico { font-size: 40px; margin-bottom: 12px; }
.cg-placeholder-title { font-size: 18px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.cg-placeholder-text { font-size: 14px; color: #64748b; }

/* ── Blog Generator (Content Generator tool) ─────────────────────────
   Reuses the exact .wbb-* card/section/field/toggle classes from the
   Article Generator page (.wbb-cols / .wbb-left / .wbb-right / .wbb-section
   etc.) for full visual consistency, plus a small set of "bg-" prefixed
   additions for the pieces the Article Generator didn't have (badge +
   info bar, pill toggles, radio-card size picker). */
.bg-page { max-width: 1180px; }
.bg-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bg-title-row .cg-title { margin: 0; }
.bg-cols { padding: 0; margin-top: 16px; }

.bg-htu { margin-top: 14px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; }
.bg-htu-header {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: 0; padding: 10px 14px; text-align: left;
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.4px;
  color: #1d4ed8; cursor: pointer;
}
.bg-htu-body { padding: 0 14px 12px; font-size: 13px; color: #1e40af; line-height: 1.5; }
.bg-htu.is-collapsed .bg-htu-body { display: none; }
.bg-htu.is-collapsed .wbb-chev { transform: rotate(-90deg); }

/* Pill toggle switch — matches the size/behavior of .sc-toggle-track. */
.bg-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bg-toggle-label { font-size: 13px; color: #1e293b; font-weight: 600; }
.bg-toggle-track {
  position: relative; display: inline-block; flex: 0 0 auto;
  width: 38px; height: 22px; border-radius: 999px; background: #cbd5e1;
  transition: background 150ms ease; cursor: pointer;
}
.bg-toggle-track input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.bg-toggle-knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: white; transition: transform 150ms ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2); pointer-events: none;
}
.bg-toggle-track:has(input:checked) { background: #2563eb; }
.bg-toggle-track:has(input:checked) .bg-toggle-knob { transform: translateX(16px); }

.bg-subfield { padding-left: 2px; border-left: 2px solid #eff6ff; margin-left: 2px; padding-top: 2px; }
.bg-subfield > label { display: block; margin: 10px 0 4px; font-size: 11px; color: #1e293b; font-weight: 600; }
.bg-subfield > label:first-child { margin-top: 0; }
.bg-subfield > select {
  width: 100%; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px;
  font-size: 13px; font-family: inherit; background: white; outline: 0;
}
.bg-subfield > select:focus { border-color: #2563eb; }
.bg-subfield > select:disabled { background: #f8fafc; color: #94a3b8; cursor: not-allowed; }
.bg-no-image-api {
  font-size: 11.5px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 8px; padding: 8px 10px; margin-top: 6px; line-height: 1.4;
}
.bg-no-image-api a { color: #2563eb; font-weight: 700; text-decoration: none; }
.bg-no-image-api a:hover { text-decoration: underline; }

.bg-generated-image { margin: 16px 0; }
.bg-generated-image img { width: 100%; height: auto; border-radius: 10px; display: block; }
.bg-image-prompt-toggle { margin-top: 6px; font-size: 12px; color: #64748b; }
.bg-image-prompt-toggle summary {
  cursor: pointer; font-weight: 600; color: #2563eb; list-style: none; user-select: none;
}
.bg-image-prompt-toggle summary::-webkit-details-marker { display: none; }
.bg-image-prompt-toggle summary::before { content: '▸ '; }
.bg-image-prompt-toggle[open] summary::before { content: '▾ '; }
.bg-image-prompt-toggle p { margin: 6px 0 0; color: #475569; }

.bg-stepper { display: flex; align-items: center; gap: 8px; }
.bg-stepper button {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid #e2e8f0;
  background: white; font-size: 14px; font-weight: 700; color: #1e293b; cursor: pointer;
}
.bg-stepper button:hover { background: #f3f4f6; }
.bg-stepper-val { font-size: 13px; font-weight: 700; color: #0f172a; min-width: 14px; text-align: center; }

.bg-upload-link { font-size: 11px; color: #2563eb; font-weight: 600; text-decoration: none; cursor: pointer; }
.bg-upload-link:hover { text-decoration: underline; }
.bg-field-head { display: flex; align-items: center; justify-content: space-between; }

.bg-size-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bg-size-card {
  border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 8px; text-align: center;
  cursor: pointer; background: white;
}
.bg-size-card:hover { border-color: #93c5fd; }
.bg-size-card.is-active { border-color: #2563eb; background: #eff6ff; }
.bg-size-card-name { font-size: 12.5px; font-weight: 700; color: #0f172a; }
.bg-size-card-meta { font-size: 11px; color: #64748b; margin-top: 2px; }

.bg-faq-list { display: flex; flex-direction: column; gap: 6px; }
.bg-faq-list input { border: 1px solid #e2e8f0; border-radius: 8px; padding: 7px 10px; font-size: 12.5px; font-family: inherit; }

.bg-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; }
.bg-empty-ico { font-size: 38px; opacity: 0.6; }
.bg-empty-title { font-size: 15px; font-weight: 700; color: #475569; }
.bg-empty-text { font-size: 13px; color: #94a3b8; max-width: 260px; }

/* ── AI Image Generator ──────────────────────────────────────────── */
/* .wbb-right's shared min-height: calc(100vh - 80px) exists for Blog
   Generator/Article Rewriter, where the output eventually IS a full
   article — here the output is a small image (or an empty state), so
   that same rule left a mostly-empty box towering far past the Settings
   panel. align-items: stretch (overriding .wbb-cols's own "start") makes
   both columns match whatever height Settings naturally reaches instead. */
[data-cb-page="content-image-generator"] .wbb-cols { align-items: stretch; }
[data-cb-page="content-image-generator"] .wbb-right { min-height: 0; }

.ig-tips-link {
  background: none; border: 0; padding: 0; font-size: 11.5px; font-weight: 600;
  color: #2563eb; cursor: pointer; font-family: inherit;
}
.ig-tips-link:hover { text-decoration: underline; }
.ig-tips-body {
  margin-top: 6px; font-size: 12px; color: #64748b; line-height: 1.5;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px;
}

.ig-loading {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 100%; font-size: 13.5px; color: #64748b;
}

.ig-error {
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; margin: 0 0 12px;
}
.ig-error:has(+ .ig-grid:not([hidden])) { margin-bottom: 12px; }
.ig-error-ico { font-size: 18px; line-height: 1; }
.ig-error-text { font-size: 13px; color: #b91c1c; font-weight: 600; }

.ig-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;
}
.ig-tile {
  border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: white;
}
.ig-tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #f1f5f9; }
.ig-tile-actions { display: flex; gap: 6px; padding: 8px; }
.ig-tile-actions .wbb-tool-btn { flex: 1; text-align: center; }

/* ── SEO Score panel (shown above the generated article once a blog
   has been generated) ──────────────────────────────────────────── */
.bg-seo-card { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; margin-bottom: 14px; }

.bg-seo-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bg-seo-bar-label { font-size: 13px; font-weight: 700; color: #475569; }
.bg-score-badge { font-size: 13px; font-weight: 800; padding: 4px 14px; border-radius: 999px; }
.bg-score-badge.good { background: #d1fae5; color: #047857; }
.bg-score-badge.ok   { background: #fef3c7; color: #92400e; }
.bg-score-badge.bad  { background: #fee2e2; color: #b91c1c; }

/* Internal Links QA card — deterministic post-generation check (see
   server/routes/ai.js's enforceInternalLinksInserted) shown right below
   the SEO Score card, same visual language. */
.ch-links-card { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.ch-links-bar { display: flex; align-items: center; justify-content: space-between; }
.ch-links-bar-label { font-size: 13px; font-weight: 700; color: #475569; }
.ch-links-badge { font-size: 13px; font-weight: 800; padding: 4px 14px; border-radius: 999px; }
.ch-links-badge.is-good { background: #d1fae5; color: #047857; }
.ch-links-badge.is-warn { background: #fef3c7; color: #92400e; }
.ch-links-unplaced {
  margin-top: 10px; font-size: 12.5px; color: #92400e; background: #fffbeb;
  border: 1px solid #fde68a; border-radius: 8px; padding: 10px 12px;
}
.ch-links-unplaced ul { margin: 6px 0 0; padding-left: 18px; }

.bg-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 700px) { .bg-check-grid { grid-template-columns: 1fr; } }
.bg-check-card {
  display: flex; align-items: flex-start; gap: 8px;
  border-radius: 8px; padding: 10px 12px; font-size: 12.5px;
  border: 1px solid transparent;
}
.bg-check-card.pass { background: #f0fdf4; border-color: #bbf7d0; }
.bg-check-card.warn { background: #fffbeb; border-color: #fde68a; }
.bg-check-ico { flex: 0 0 auto; font-size: 13px; line-height: 1.3; }
.bg-check-card.pass .bg-check-ico { color: #16a34a; }
.bg-check-card.warn .bg-check-ico { color: #d97706; }
.bg-check-label { font-weight: 700; color: #0f172a; display: block; }
.bg-check-detail { color: #475569; margin-top: 1px; }

/* ── Generated content bar ──────────────────────────────────────── */
.bg-content-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.bg-content-bar-left { display: flex; align-items: center; gap: 10px; }
.bg-content-bar-title { font-weight: 700; color: #0f172a; font-size: 14px; }
.bg-word-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #eff6ff; color: #2563eb; }
.bg-word-badge.warn { background: #fef3c7; color: #92400e; }
.bg-history-note { font-size: 12px; color: #16a34a; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.bg-history-note.is-error { color: #b91c1c; }
.bg-content-bar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── SEO Preview (collapsible) ──────────────────────────────────── */
.bg-preview { border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 16px; }
.bg-preview-header {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: #f8fafc; border: 0; border-radius: 10px 10px 0 0; padding: 10px 14px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.4px; color: #475569;
  cursor: pointer; text-align: left; font-family: inherit;
}
.bg-preview.is-collapsed .bg-preview-header { border-radius: 10px; }
.bg-preview.is-collapsed .bg-preview-body { display: none; }
.bg-preview.is-collapsed .wbb-chev { transform: rotate(-90deg); }
.bg-preview-body { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.bg-preview-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; color: #94a3b8; margin-bottom: 4px; }
.bg-preview-url {
  background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 12px;
  font-size: 12.5px; color: #2563eb; font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
}
.bg-preview-meta-head { display: flex; align-items: center; justify-content: space-between; }
.bg-preview-meta {
  width: 100%; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 12px;
  font-size: 13px; font-family: inherit; resize: vertical; min-height: 50px; color: #1e293b;
}
.bg-char-counter { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #eff6ff; color: #2563eb; }
.bg-char-counter.warn { background: #fef3c7; color: #92400e; }
.bg-preview-note { font-size: 11px; color: #94a3b8; font-style: italic; margin-top: 4px; }

/* ── Per-section blocks + image suggestions inside the article ──── */
.bg-section-block { position: relative; padding-top: 8px; }
.bg-section-block + .bg-section-block { margin-top: 4px; border-top: 1px solid #f1f5f9; }
.bg-section-head { display: flex; justify-content: flex-end; }
.bg-regen-btn {
  background: transparent; border: 0; color: #2563eb; font-size: 11.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; padding: 2px 6px; border-radius: 6px;
}
.bg-regen-btn:hover { background: #eff6ff; }
.bg-regen-btn:disabled { color: #94a3b8; cursor: progress; }

.bg-image-suggestion {
  background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 10px;
  padding: 12px 14px; margin: 12px 0; font-size: 13px; color: #4c1d95; line-height: 1.5;
}
.bg-image-suggestion p { margin: 0 0 4px; }
.bg-image-suggestion p:last-child { margin-bottom: 0; }

/* ── Content Generator: History ─────────────────────────────────── */
.ch-filters { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.ch-search {
  flex: 1 1 220px; min-width: 180px; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 9px 12px; font-size: 13px; font-family: inherit; outline: 0;
}
.ch-search:focus { border-color: #2563eb; }
.ch-select, .ch-date {
  border: 1px solid #e2e8f0; border-radius: 8px; padding: 9px 10px;
  font-size: 13px; font-family: inherit; background: white; outline: 0; color: #1e293b;
}
.ch-select:focus, .ch-date:focus { border-color: #2563eb; }
.ch-date-sep { font-size: 12px; color: #94a3b8; }

/* Table/list pages (History, Schedule Posts queue) sit in a wider shell
   than the writing-tool pages .cg-page is normally used for — matches the
   1500px convention already used by Managed GMB (.ll-page) and Web
   Backlinks Builder (.wbb-page) rather than the 980px article-editing
   width, since a data table benefits from the extra horizontal room a
   two-line-clamped title needs to actually fit on 1-2 lines. */
.ch-page { max-width: 1500px; }

.ch-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ch-row-header {
  margin-top: 18px; background: transparent; border: 0; padding: 0 14px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: #94a3b8;
}
/* Column widths: Tool is sized to its badge, Meta (Date + Words + Tokens,
   now combined into one column — see renderMetaCell in content-history.js)
   to its stacked text, and Actions is a FIXED width (not auto) so it
   lines up at the same x position on every row regardless of how many
   buttons that particular row shows (2 on a failed row, 4 on a normal
   one — auto sizing per-row was the cause of the actions column
   drifting row to row). Title/Keyword (the 1fr track) absorbs
   everything left over.
   This table always renders inside Cloud Backlinks, next to BOTH the
   app's primary sidebar and Cloud Backlinks' own secondary sidebar —
   two fixed-width sidebars, not one, so the content area shrinks
   roughly 1:1 with the window below ~1300px rather than gracefully
   scaling down, and a "medium" 4-column tier that looked fine on paper
   (assuming a normal single-sidebar layout) actually had nowhere near
   enough room in practice. Below the single breakpoint, stack to one
   column per row instead of trying to keep a cramped 4-up grid alive. */
.ch-row {
  display: grid;
  grid-template-columns: 102px minmax(0, 1fr) 152px 248px;
  align-items: center;
  gap: 16px;
  background: white; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 14px;
}
@media (max-width: 1300px) {
  .ch-row-header { display: none; }
  .ch-row { grid-template-columns: 1fr; align-items: start; gap: 8px; }
  .ch-row-actions { justify-content: flex-start; }
  /* Stacked layout has no neighboring columns to stay aligned with, so
     the 2-line clamp (needed to keep a 4-column row's height sane) only
     costs readability here — let the title wrap naturally instead. */
  .ch-row-title { -webkit-line-clamp: unset; }
}
.ch-tool-badge {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: #eff6ff; color: #2563eb; width: fit-content;
}
.ch-row-title {
  font-size: 13.5px; font-weight: 700; color: #0f172a;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.ch-row-keyword {
  font-size: 12px; color: #64748b; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-row-meta { min-width: 0; }
.ch-row-date { font-size: 12px; color: #64748b; }
.ch-row-tokens { font-size: 12px; color: #475569; font-weight: 600; margin-top: 2px; }
.ch-row-tokens-cost { font-size: 11px; color: #94a3b8; margin-top: 1px; }
.ch-row-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.ch-action-btn {
  background: transparent; border: 1px solid #e5e7eb; border-radius: 6px;
  padding: 5px 10px; font-size: 11.5px; font-weight: 600; color: #1e293b;
  cursor: pointer; font-family: inherit;
}
.ch-action-btn:hover { background: #f3f4f6; }
.ch-action-btn.ch-danger { color: #b91c1c; border-color: #fecaca; }
.ch-action-btn.ch-danger:hover { background: #fef2f2; }
.ch-action-btn:disabled {
  color: #94a3b8; border-color: #e5e7eb; background: #f8fafc;
  cursor: progress; opacity: 0.7;
}
.ch-action-btn:disabled:hover { background: #f8fafc; }

.ch-row.is-generating { background: #fffdf5; border-color: #fde68a; }
.ch-row.is-failed { background: #fef2f2; border-color: #fecaca; }
.ch-row-error { font-size: 11px; color: #b91c1c; margin-top: 3px; }
.ch-status-pill {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
.ch-status-pill.generating { background: #fef9c3; color: #854d0e; }
.ch-status-pill.failed { background: #fee2e2; color: #b91c1c; }
.ch-status-pill.complete { background: #f0fdf4; color: #16a34a; }

.ch-empty { text-align: center; padding: 60px 16px; color: #94a3b8; }
.ch-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.ch-page-indicator { font-size: 12.5px; color: #64748b; }

/* Topical Map's in-page History tab — same visual language as the global
   Content Generator History rows (.ch-row/.ch-status-pill/.ch-action-btn
   etc, reused directly), but its own grid since the column set here
   (Pillar Topic / Date / Target Pages / Status / Credits / Actions) is
   different from the global page's (Tool / Title / Meta / Actions). */
.kfh-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 90px 130px 90px 160px;
  align-items: center;
  gap: 14px;
  background: white; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 14px;
}
.kfh-row-header {
  margin-top: 18px; background: transparent; border: 0; padding: 0 14px;
  font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em;
}
.kfh-row.is-generating { background: #fffdf5; border-color: #fde68a; }
.kfh-row.is-failed { background: #fef2f2; border-color: #fecaca; }
@media (max-width: 1300px) {
  .kfh-row-header { display: none; }
  .kfh-row { grid-template-columns: 1fr; align-items: start; gap: 8px; }
  .kfh-row .ch-row-actions { justify-content: flex-start; }
}

.ch-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: #0f172a; color: white; font-size: 13px; font-weight: 600;
  padding: 10px 18px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 1000;
}
.ch-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.ch-scheduled-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: #ecfdf5; color: #047857; vertical-align: middle;
}

/* ── Content Generator: Schedule Posts ─────────────────────────────── */
.sp-card {
  background: white; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 6px 18px 16px; margin-top: 18px;
}
.sp-card:first-of-type { margin-top: 22px; }
.sp-card > .wbb-section-header { padding: 16px 4px 10px; }

.sp-status-badge {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
.sp-status-badge.is-connected { background: #ecfdf5; color: #047857; }
.sp-status-badge.is-failed { background: #fef2f2; color: #b91c1c; }

.sp-manage-link {
  font-size: 11.5px; color: #2563eb; text-decoration: none; font-weight: 600;
  width: fit-content; margin-top: 2px;
}
.sp-manage-link:hover { text-decoration: underline; }

.sp-connections-list {
  display: flex; flex-direction: column; gap: 6px; border: 1px solid #eef2f7;
  border-radius: 10px; padding: 8px; margin-top: 2px;
}
.sp-connection-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 8px; border-radius: 7px; font-size: 12.5px;
}
.sp-connection-item:hover { background: #f8fafc; }
.sp-connection-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sp-connection-site { font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-connection-meta { font-size: 11px; color: #64748b; }
.sp-connection-delete {
  background: transparent; border: 1px solid #fecaca; color: #b91c1c; border-radius: 6px;
  padding: 4px 8px; font-size: 12px; cursor: pointer; font-family: inherit; flex-shrink: 0;
}
.sp-connection-delete:hover { background: #fef2f2; }
.sp-connections-empty { font-size: 12px; color: #94a3b8; padding: 6px 8px; }

.sp-wp-form {
  border: 1px dashed #e2e8f0; border-radius: 10px; padding: 14px; margin-top: 4px;
  display: flex; flex-direction: column; gap: 12px;
}
.sp-wp-form-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
}
@media (max-width: 900px) { .sp-wp-form-grid { grid-template-columns: 1fr; } }
.sp-wp-connect-row { display: flex; align-items: center; gap: 12px; }
.sp-connect-msg { font-size: 12px; color: #64748b; }
.sp-connect-msg.is-error { color: #b91c1c; }
.sp-connect-msg.is-ok { color: #047857; }

.sp-primary-btn {
  background: #2563eb !important; color: white !important; border-color: #2563eb !important;
}
.sp-primary-btn:hover { background: #1d4ed8 !important; }
.sp-primary-btn:disabled { opacity: 0.6; cursor: progress; }

.sp-checkbox-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 2px; }
.sp-checkbox { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #1e293b; font-weight: 500; cursor: pointer; }
.sp-checkbox input { margin: 0; }

.sp-bulk-actions { display: flex; gap: 10px; }
.sp-bulk-paste-wrap {
  display: flex; flex-direction: column; gap: 10px; border: 1px dashed #e2e8f0;
  border-radius: 10px; padding: 14px; margin-top: 4px;
}
.sp-bulk-paste-wrap textarea {
  min-height: 100px; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px;
  font-size: 13px; font-family: inherit; resize: vertical; outline: 0;
}
.sp-bulk-paste-wrap textarea:focus { border-color: #2563eb; }

.sp-site-context-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.sp-viewing-site-field, .sp-viewing-category-field { flex: 1 1 260px; max-width: 420px; margin-bottom: 0; }
.sp-viewing-site-field select {
  border: 1px solid #bfdbfe; background: #eff6ff; font-weight: 700; color: #1d4ed8;
}
.sp-viewing-site-field select:focus { border-color: #2563eb; }
.sp-viewing-category-field select:disabled { background: #f8fafc; color: #94a3b8; cursor: not-allowed; }

.sp-rows-table { margin-top: 6px; }
.sp-rows-header, .sp-row {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1.2fr 110px 32px;
  align-items: center;
  gap: 10px;
}
.sp-rows-header {
  padding: 0 4px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: #94a3b8;
}
@media (max-width: 900px) { .sp-rows-header { display: none; } }
.sp-row {
  background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px;
  padding: 10px; margin-bottom: 8px;
}
@media (max-width: 900px) { .sp-row { grid-template-columns: 1fr; } }
.sp-row input, .sp-row select {
  width: 100%; border: 1px solid #e2e8f0; border-radius: 7px; padding: 7px 9px;
  font-size: 12.5px; font-family: inherit; background: white; outline: 0;
}
/* Keyword + optional Blog Title stacked in the same grid cell — keeps
   the row's 5-column layout unchanged while giving the title its own
   line, smaller and muted, right under the keyword it belongs to. */
.sp-row-keyword-stack { display: flex; flex-direction: column; gap: 4px; }
.sp-row-blog-title { font-size: 11.5px !important; color: #64748b; }
.sp-row-blog-title::placeholder { color: #b0b8c4; }
.sp-row input:focus, .sp-row select:focus { border-color: #2563eb; }
.sp-row-remove {
  background: transparent; border: 0; color: #94a3b8; font-size: 16px; cursor: pointer;
  justify-self: center;
}
.sp-row-remove:hover { color: #b91c1c; }

.sp-queue-site-badge {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
}

.sp-warning-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  border-radius: 10px; padding: 12px 16px; margin-top: 16px; font-size: 13px; font-weight: 600;
}
.sp-warning-banner a {
  color: #2563eb; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.sp-warning-banner a:hover { text-decoration: underline; }

.sp-seo-plugin-info {
  font-size: 12px; font-weight: 600; padding: 8px 12px; border-radius: 8px;
  margin-bottom: 14px; width: fit-content;
}
.sp-seo-plugin-info.is-ok {
  background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0;
}
.sp-seo-plugin-info.is-warning {
  background: #fffbeb; color: #92400e; border: 1px solid #fde68a;
}
.sp-seo-plugin-info a { color: #2563eb; font-weight: 700; text-decoration: none; }
.sp-seo-plugin-info a:hover { text-decoration: underline; }

.sp-status-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  text-align: center; text-transform: uppercase; letter-spacing: 0.3px;
}
.sp-status-pill.pending    { background: #f1f5f9; color: #475569; }
.sp-status-pill.generating { background: #fef9c3; color: #854d0e; }
.sp-status-pill.publishing { background: #ede9fe; color: #5b21b6; }
.sp-status-pill.verifying  { background: #ede9fe; color: #5b21b6; }
.sp-status-pill.ready      { background: #e0f2fe; color: #0369a1; }
.sp-status-pill.published  { background: #ecfdf5; color: #047857; }
/* Distinct from .failed — the write to WordPress succeeded, but a
   follow-up check of the live page couldn't confirm it actually shows
   the update (see wordpress.js's verifyLiveTitleMatches). Amber, not
   red: this isn't a hard error, it's "needs a look," and often just
   needs the site's cache cleared or a page-builder edit, not a retry
   of the whole pipeline. */
.sp-status-pill.verify_failed { background: #fffbeb; color: #92400e; }
.sp-status-pill.failed     { background: #fef2f2; color: #b91c1c; }

/* Spinner — matches the app's blue accent (same blue as .sp-primary-btn). */
.sp-spinner {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid rgba(37, 99, 235, 0.25); border-top-color: #2563eb;
  animation: sp-spin 0.7s linear infinite; vertical-align: middle; flex-shrink: 0;
}
.sp-status-pill.generating .sp-spinner {
  border-color: rgba(133, 77, 14, 0.3); border-top-color: #854d0e;
}
.sp-status-pill.publishing .sp-spinner,
.sp-status-pill.verifying .sp-spinner {
  border-color: rgba(91, 33, 182, 0.3); border-top-color: #5b21b6;
}
.sp-spinner-lg { width: 18px; height: 18px; border-width: 2.5px; }
.sp-spinner-btn { border-color: rgba(255, 255, 255, 0.4); border-top-color: #fff; margin-right: 2px; }
@keyframes sp-spin { to { transform: rotate(360deg); } }

.sp-row-spinner-wrap {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  color: #64748b; font-size: 11.5px; font-weight: 600;
}
.sp-row-spinner-label { white-space: nowrap; }

/* Service Area Page — Single Page / Bulk Generate mode toggle. Same
   visual language as .seo-kit-view-toggle (pill track, active tab lifted
   with a white background + shadow), but sized for text labels instead
   of fixed-width icon buttons. */
.sap-mode-toggle {
  display: inline-flex; background: #f3f4f6; border-radius: 10px; padding: 4px; gap: 2px;
  margin-bottom: 16px;
}
.sap-mode-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 18px; background: transparent; border: 0; border-radius: 7px;
  color: #6b7280; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.sap-mode-btn:hover { color: #1a1f36; }
.sap-mode-btn.active { background: white; color: #1a1f36; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }

/* Service Area Page — Bulk Generate location queue. Same visual
   language as Schedule Posts' .sp-rows-table/.sp-row/.sp-status-pill
   (reused directly for the status pill colors), just a 4-column layout
   (City, State, Status, Remove) instead of that table's 5. */
.sap-rows-table { margin-top: 6px; }
.sap-rows-header, .sap-row {
  display: grid; grid-template-columns: 1.2fr 1fr 130px 32px; align-items: center; gap: 10px;
}
.sap-rows-header {
  padding: 0 4px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: #94a3b8;
}
@media (max-width: 900px) { .sap-rows-header { display: none; } }
.sap-row {
  background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px;
  padding: 10px; margin-bottom: 8px;
}
@media (max-width: 900px) { .sap-row { grid-template-columns: 1fr; } }
.sap-row input {
  width: 100%; border: 1px solid #e2e8f0; border-radius: 7px; padding: 7px 9px;
  font-size: 12.5px; font-family: inherit; background: white; outline: 0;
}
.sap-row input:focus { border-color: #2563eb; }

.wbb-field-label-standalone {
  display: block; font-size: 11px; color: #1e293b; font-weight: 600; margin-bottom: 6px;
}

.sap-bulk-results { margin-bottom: 20px; }

/* Title & Meta Generator — bulk queue row (Keyword, Page Type, Remove)
   and result cards. Reuses .sap-rows-table/.sap-row/.sp-row-remove for
   the input queue, and .bg-score-badge good/ok/bad for char-count
   color coding, matching the SEO Score panel's visual language. */
.tm-rows-header, .tm-row {
  display: grid; grid-template-columns: 1fr 160px 32px; align-items: center; gap: 10px;
}
.tm-rows-header {
  padding: 0 4px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: #94a3b8;
}
@media (max-width: 900px) { .tm-rows-header { display: none; } }
.tm-row {
  background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px;
  padding: 10px; margin-bottom: 8px;
}
@media (max-width: 900px) { .tm-row { grid-template-columns: 1fr; } }
.tm-row input, .tm-row select {
  width: 100%; border: 1px solid #e2e8f0; border-radius: 7px; padding: 7px 9px;
  font-size: 12.5px; font-family: inherit; background: white; outline: 0;
}
.tm-row input:focus, .tm-row select:focus { border-color: #2563eb; }

.tm-batch-actions {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; margin-bottom: 14px;
}
.tm-batch-actions-right { display: flex; gap: 8px; }

.tm-card {
  background: white; border: 1px solid #eef2f7; border-radius: 12px;
  padding: 16px; margin-bottom: 14px;
}
.tm-card-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 8px; margin-bottom: 12px;
}
.tm-card-keyword { font-size: 14px; font-weight: 800; color: #0f172a; }
.tm-card-pagetype {
  font-size: 11px; font-weight: 700; color: #64748b; background: #f1f5f9;
  padding: 3px 9px; border-radius: 999px; margin-left: 8px;
}
.tm-card-actions { display: flex; gap: 6px; }
.tm-card-error {
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
  border-radius: 8px; padding: 10px 12px; font-size: 12.5px;
}

.tm-field-block { margin-bottom: 14px; }
.tm-field-block:last-child { margin-bottom: 0; }
.tm-field-label-row {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
}
.tm-field-label-row label { font-size: 11px; color: #1e293b; font-weight: 600; }
.tm-variant-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.tm-variant-btn {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid #e2e8f0;
  background: white; color: #64748b; font-size: 11px; font-weight: 700; cursor: pointer;
}
.tm-variant-btn.active { background: #2563eb; border-color: #2563eb; color: white; }
.tm-field-text {
  width: 100%; border: 1px solid #e2e8f0; border-radius: 8px; padding: 9px 11px;
  font-size: 13px; font-family: inherit; background: #f8fafc; color: #1e293b;
  resize: vertical; min-height: 44px; outline: 0;
}
.tm-field-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.tm-slug-text {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 9px 11px; font-size: 13px; color: #1e293b; font-family: monospace;
  word-break: break-all;
}
.tm-banned-note { font-size: 11px; color: #b91c1c; margin-top: 4px; }

/* Small inline "ⓘ" tooltip icon next to a field label — native title
   attribute provides the tooltip text, this just styles the glyph. */
.wbb-helper-ico {
  display: inline-block; margin-left: 4px; color: #94a3b8; font-size: 11px;
  cursor: help; font-weight: 400;
}
.wbb-helper-ico:hover { color: #64748b; }

/* Reddit Post Generator — result card (Title/Body/Suggested Comment),
   reuses .tm-field-block/.tm-field-text/.tm-field-actions for visual
   consistency with Title & Meta Generator's result cards. */
.rp-card { background: white; border: 1px solid #eef2f7; border-radius: 12px; padding: 16px; }
.rp-subreddit-badge {
  display: inline-block; font-size: 11px; font-weight: 700; color: #64748b;
  background: #f1f5f9; padding: 3px 9px; border-radius: 999px; margin-bottom: 12px;
}

/* GMB Post Generator — warning banner (date/CTA validation) and a
   read-only CTA button preview matching the selected type. */
.gmb-warnings {
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  border-radius: 10px; padding: 12px 16px; font-size: 12.5px; font-weight: 600;
  margin-bottom: 14px;
}
.gmb-warnings ul { margin: 0; padding-left: 18px; }
.gmb-warnings li { margin-bottom: 2px; }
.gmb-cta-preview { margin-top: 14px; }
.gmb-cta-preview-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: #2563eb; color: white; font-size: 13px; font-weight: 700;
  padding: 9px 20px; border-radius: 8px;
}
.gmb-cta-preview-label { font-size: 11px; color: #94a3b8; margin-bottom: 6px; }

.sp-shared-toggle { margin-top: 14px; }
.sp-settings-panel { margin-top: 6px; border: 1px solid #eef2f7; border-radius: 10px; padding: 0 12px; }
.sp-settings-panel.is-disabled { opacity: 0.5; pointer-events: none; }
.sp-auto-posting-row { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #eef2f7; }
.sp-auto-posting-row.is-disabled { opacity: 0.5; pointer-events: none; }
.sp-settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .sp-settings-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sp-settings-grid { grid-template-columns: 1fr; } }

.sp-save-btn { margin-top: 16px; }

.sp-queue-header { grid-template-columns: 1.2fr 1fr 1fr 100px 90px 170px; }
/* Sort buttons reset to look like the plain uppercase header text they
   replace — only a pointer cursor + hover/active color give away that
   they're clickable. .is-active (set in updateQueueSortHeader) marks the
   current sort column; the ▲/▼ glyph itself is appended to the label text
   in JS, not drawn via CSS, so it sorts/wraps naturally with the text. */
.sp-queue-sort-btn {
  background: none; border: none; padding: 0; margin: 0; text-align: left;
  font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: #94a3b8; cursor: pointer;
}
.sp-queue-sort-btn:hover { color: #475569; }
.sp-queue-sort-btn.is-active { color: #2563eb; }
.sp-queue-pagination-info { font-size: 12.5px; color: #64748b; margin-right: 4px; }
.sp-queue-row {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 100px 90px 170px;
  align-items: center; gap: 12px; background: white; border: 1px solid #e5e7eb;
  border-radius: 10px; padding: 12px 14px;
}
@media (max-width: 900px) { .sp-queue-row { grid-template-columns: 1fr; gap: 6px; } }
.sp-queue-keyword { font-size: 13.5px; font-weight: 700; color: #0f172a; }
.sp-queue-custom-title { font-size: 11.5px; color: #94a3b8; margin-top: 2px; font-style: italic; }
.sp-queue-meta { font-size: 12px; color: #64748b; }
.sp-queue-error { font-size: 11px; color: #b91c1c; margin-top: 2px; }

/* UPDATE badge — flags a queued job as tool = 'content-update-existing'
   (revises a live post in place) so it reads distinctly at a glance from
   the far more common CREATE jobs in the same table, mirroring the
   🔄 REFRESH tag already used for the same concept in Keyword Planning. */
.sp-badge-update {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  color: #92400e; background: #fef3c7; border: 1px solid #fde68a;
  border-radius: 5px; padding: 1px 6px; margin-right: 6px; vertical-align: middle;
}
.sp-queue-target-url { font-size: 11px; color: #64748b; margin-top: 2px; word-break: break-all; }

/* Per-row Notes — a small icon next to the keyword (shown only when a
   note exists) with a native tooltip for a quick hover-read, plus a
   click-to-expand block below for notes too long to comfortably read in
   a tooltip. Notes stays per-row even for a batch saved from the shared
   Content Settings textarea — see collectSharedNotes in content-schedule.js. */
.sp-queue-keyword-row { display: flex; align-items: center; gap: 6px; }
.sp-queue-note-icon {
  background: none; border: none; cursor: pointer; padding: 0; font-size: 12px;
  opacity: 0.7; line-height: 1;
}
.sp-queue-note-icon:hover { opacity: 1; }
.sp-queue-note-preview {
  font-size: 11.5px; color: #475569; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 6px;
  padding: 6px 8px; margin-top: 4px; white-space: pre-wrap; max-width: 320px;
}
/* ----- Login screen ----- */
.auth-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  z-index: 1000;
}
.auth-card {
  width: 100%;
  max-width: 360px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 32px 28px;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}
.auth-logo { font-size: 15px; font-weight: 700; color: #2563eb; margin-bottom: 18px; }
.auth-title { font-size: 20px; font-weight: 700; color: #0f172a; margin: 0 0 18px; }
.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 12.5px;
}
.auth-remember { display: flex; align-items: center; gap: 6px; color: #475569; cursor: pointer; }
.auth-forgot { color: #2563eb; text-decoration: none; }
.auth-forgot:hover { text-decoration: underline; }
.auth-submit { width: 100%; justify-content: center; padding: 10px 12px; }

/* ----- Manage Users modal ----- */
.cc-modal-lg { max-width: 806px; width: 100%; }
.users-table-wrap { border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; margin-bottom: 4px; }
.users-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.users-table thead { background: #f8fafc; }
.users-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #e2e8f0;
}
.users-table td { padding: 9px 12px; border-bottom: 1px solid #f1f5f9; color: #1e293b; vertical-align: middle; }
.users-table tbody tr:last-child td { border-bottom: none; }
.users-table tbody tr:hover td { background: #fafbff; }
.users-empty { text-align: center; color: #94a3b8; padding: 18px 12px !important; }
.users-status-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.users-status-badge.active   { background: #d1fae5; color: #065f46; }
.users-status-badge.disabled { background: #fee2e2; color: #b91c1c; }
.users-role-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.users-role-badge.primary_admin { background: #ede9fe; color: #5b21b6; }
.users-role-badge.admin         { background: #dbeafe; color: #1e40af; }
.users-role-badge.user          { background: #f1f5f9; color: #475569; }
.users-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.users-row-actions button {
  border: 1px solid #e2e8f0;
  background: white;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  color: #475569;
}
.users-row-actions button:hover { background: #f1f5f9; }
.users-row-actions button.danger { color: #b91c1c; border-color: #fecaca; }
.users-row-actions button.danger:hover { background: #fef2f2; }
.users-row-actions button:disabled { color: #cbd5e1; border-color: #f1f5f9; cursor: not-allowed; }
.users-row-actions button:disabled:hover { background: white; }
.users-add-row-title { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 10px; }

/* Manage Users modal tabs (Users / Board Access) — sits between the
   modal header and body, same visual language as Todo Lists' own
   .tl-view-toggle (light gray track, white active pill). */
.um-tabs { display: flex; gap: 2px; padding: 0 20px; border-bottom: 1px solid #f1f5f9; }
.um-tab-btn {
  border: none; background: transparent; padding: 10px 14px; margin-bottom: -1px;
  font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.um-tab-btn.is-active { color: #1d4ed8; border-bottom-color: #1d4ed8; }

/* Board Access tab — one card per board, each with a mini table of
   {user, permission select}. Same table look as .users-table, scaled
   down since it repeats once per board. */
.um-board-access-card {
  border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
}
.um-board-access-card:last-child { margin-bottom: 0; }
.um-board-access-card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.um-board-access-name { font-size: 13.5px; font-weight: 700; color: #0f172a; }
.um-board-access-owner { font-size: 11.5px; color: #94a3b8; }
.um-board-access-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.um-board-access-table td { padding: 6px 0; border-top: 1px solid #f8fafc; color: #334155; }
.um-board-access-table tr:first-child td { border-top: none; }
.um-board-access-table td:last-child { text-align: right; }
.um-board-access-empty { font-size: 12px; color: #94a3b8; font-style: italic; }
.um-permission-select {
  font-size: 12px; padding: 4px 8px; border-radius: 6px; border: 1px solid #e2e8f0;
  background: white; color: #334155; font-family: inherit;
}

/* Share Board modal's "+ Add person" row and its collapsible new-account
   mini-form — public/js/todo-lists.js. */
.tl-share-add-row { display: flex; gap: 8px; align-items: center; }
.tl-share-add-row input[type="email"] {
  flex: 1; font-size: 13px; padding: 8px 12px; border-radius: 8px; border: 1px solid #e2e8f0;
}
.tl-share-add-row select {
  font-size: 13px; padding: 8px 10px; border-radius: 8px; border: 1px solid #e2e8f0; background: white;
}
.tl-share-add-note { font-size: 12px; margin-top: 6px; }
.tl-share-add-note.error { color: #b91c1c; }
.tl-share-new-account {
  margin-top: 12px; padding: 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
}
.tl-share-new-account-title { font-size: 12.5px; font-weight: 600; color: #334155; margin-bottom: 10px; }
.tl-share-new-account-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* ----- Public homepage ----- */
.home-screen {
  background: white;
  min-height: 100vh;
  overflow-y: auto;
}
.home-nav {
  position: sticky;
  top: 0;
  background: white;
  border-bottom: 1px solid #f1f5f9;
  z-index: 10;
}
.home-nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.home-logo { font-size: 16px; font-weight: 700; color: #2563eb; text-decoration: none; }
.home-nav-links { display: flex; gap: 24px; flex: 1; }
.home-nav-links a { color: #475569; text-decoration: none; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.home-nav-links a:hover { color: #1e293b; }
.home-nav-login { text-decoration: none; }

.home-hero {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 24px 64px;
  text-align: center;
}
.home-hero h1 { font-size: 36px; font-weight: 800; color: #0f172a; line-height: 1.25; margin: 0 0 16px; }
.home-hero p { font-size: 16px; color: #64748b; line-height: 1.6; margin: 0 0 28px; }
.home-hero-cta { padding: 12px 28px; font-size: 14px; }

.home-tools, .home-pricing {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 24px;
}
.home-tools h2, .home-pricing h2 { font-size: 26px; font-weight: 800; color: #0f172a; text-align: center; margin: 0 0 8px; }
.home-section-sub { text-align: center; color: #64748b; font-size: 14px; margin: 0 0 36px; }

.home-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.home-tool-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  background: white;
}
.home-tool-ico { font-size: 22px; margin-bottom: 10px; }
.home-tool-name { font-size: 14.5px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.home-tool-desc { font-size: 12.5px; color: #64748b; line-height: 1.5; }

.home-pricing { background: #f8fafc; border-radius: 24px; }
.home-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  align-items: start;
}
.home-price-card {
  position: relative;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 28px 24px;
}
.home-price-card.is-popular { border: 2px solid #2563eb; box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12); }
.home-price-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #2563eb;
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.home-price-name { font-size: 15px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.home-price-amount { font-size: 32px; font-weight: 800; color: #0f172a; margin-bottom: 18px; }
.home-price-amount span { font-size: 14px; font-weight: 500; color: #64748b; }
.home-price-features { list-style: none; margin: 0 0 22px; padding: 0; }
.home-price-features li {
  font-size: 13px;
  color: #475569;
  padding: 7px 0;
  border-bottom: 1px solid #f1f5f9;
}
.home-price-features li:last-child { border-bottom: none; }
.home-price-btn { width: 100%; justify-content: center; }

.home-footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 24px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #94a3b8;
  font-size: 12px;
  border-top: 1px solid #f1f5f9;
}
.home-footer-links { display: flex; gap: 16px; }
.home-footer-links a { color: #64748b; text-decoration: none; }
.home-footer-links a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .home-nav-links { display: none; }
  .home-hero h1 { font-size: 28px; }
  .home-footer { flex-direction: column; gap: 10px; text-align: center; }
}

/* ── SERP Tracker ─────────────────────────────────────────────────── */
/* Toolbar controls reuse .list-toolbar/.date-range-btn/.dropdown-menu/
   .btn as-is (Grid Scan's own classes). The site selector is a plain
   <select> styled to match everything else in that toolbar row. */
#st-site-select {
  border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 12px;
  font-size: 13px; font-family: inherit; background: white; color: #1a1f36;
  min-width: 180px;
}

.st-alerts-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  border-radius: 10px; padding: 10px 16px; margin: 0 0 14px; font-size: 13px; font-weight: 600;
}
.st-alerts-banner button {
  border: 0; background: transparent; color: #92400e; font-weight: 700;
  text-decoration: underline; cursor: pointer; font-size: 12.5px; white-space: nowrap;
}

.st-table td { white-space: nowrap; }
.st-keyword-cell { display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.st-keyword-name { font-weight: 700; color: #1a1f36; }
.st-keyword-device { font-size: 11px; color: #94a3b8; }
.st-rank-value { font-weight: 700; font-size: 14px; color: #1a1f36; }
.st-rank-none { color: #9ca3af; font-weight: 400; }

.st-change { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 12.5px; }
.st-change.up { color: #16a34a; }
.st-change.down { color: #dc2626; }
.st-change.flat { color: #9ca3af; }

.st-url-cell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: #2563eb; font-size: 12px; }
.st-url-none { color: #9ca3af; }

.st-last-checked { display: flex; flex-direction: column; gap: 3px; }
.st-last-checked-time { font-size: 12.5px; color: #475569; }
.st-check-failed { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #b91c1c; font-weight: 600; }
.st-retry-link { border: 0; background: transparent; color: #2563eb; font-weight: 700; cursor: pointer; text-decoration: underline; font-size: 11.5px; padding: 0; }

.st-remove-btn {
  border: 0; background: transparent; color: #94a3b8; font-size: 15px; cursor: pointer;
}
.st-remove-btn:hover { color: #b91c1c; }

/* Hand-rolled inline SVG sparkline — no charting library in this
   codebase, so both the table's small trend cell and the detail
   modal's larger chart are built the same way (see serp-tracker.js). */
.st-sparkline { display: block; }
.st-sparkline-empty { color: #d1d5db; font-size: 11px; }

.st-detail-card { max-width: 640px; }
.st-detail-subhead { font-size: 13px; font-weight: 700; color: #1a1f36; margin: 18px 0 10px; }
.st-detail-chart-wrap { background: #fafbff; border: 1px solid #eef2f7; border-radius: 10px; padding: 14px; }
.st-competitor-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 4px; border-bottom: 1px solid #f3f4f6; font-size: 13px;
}
.st-competitor-row:last-child { border-bottom: none; }
.st-competitor-rank { width: 28px; font-weight: 700; color: #64748b; flex: 0 0 auto; }
.st-competitor-domain { flex: 1; color: #1a1f36; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-competitor-known {
  font-size: 10.5px; font-weight: 700; color: #b91c1c; background: #fef2f2;
  padding: 2px 8px; border-radius: 999px; flex: 0 0 auto;
}

.st-sites-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 4px; border-bottom: 1px solid #f3f4f6; font-size: 13px;
}
.st-sites-row-name { font-weight: 700; color: #1a1f36; }
.st-sites-row-domain { color: #64748b; font-size: 12px; margin-left: 8px; }

/* ── Topical Map (Keyword Finder) ─────────────────────────────────── */

.kf-summary-bar {
  display: flex; gap: 16px; align-items: center; font-size: 13px; font-weight: 600;
  color: #475569; margin-bottom: 14px;
}
.kf-summary-existing { color: #16a34a; }
.kf-summary-gap { color: #d97706; }

/* Hand-rolled inline SVG hub-and-spoke diagram — no charting/diagram
   library in this codebase (same rationale as SERP Tracker's sparkline/
   detail chart), so the pillar sits as a hub circle with one spoke per
   silo fanned around it. Hover highlight is plain CSS on the grouped
   <g>, no JS needed for that part. Below a certain viewport width the
   SVG wrap is hidden and the always-rendered list wrap shows instead —
   two parallel renders rather than a JS resize listener, since CSS
   media queries already do this reliably. */
.kf-diagram-wrap { margin-bottom: 20px; }
.kf-diagram-svg-wrap { display: flex; justify-content: center; }
.kf-diagram-list-wrap { display: none; }
@media (max-width: 720px) {
  .kf-diagram-svg-wrap { display: none; }
  .kf-diagram-list-wrap { display: block; }
}
.kf-spoke-group { cursor: pointer; }
.kf-spoke-line { stroke: #cbd5e1; stroke-width: 2; transition: stroke 0.15s, stroke-width 0.15s; }
.kf-spoke-group:hover .kf-spoke-line { stroke: #2563eb; stroke-width: 3; }
.kf-spoke-node { fill: white; stroke: #e2e8f0; stroke-width: 1.5; transition: stroke 0.15s; }
.kf-spoke-group:hover .kf-spoke-node { stroke: #2563eb; }
.kf-spoke-label { font-size: 12px; font-weight: 700; fill: #1a1f36; pointer-events: none; }
.kf-spoke-count { font-size: 11px; font-weight: 700; pointer-events: none; }
.kf-hub-circle { fill: #2563eb; }
.kf-hub-label { font-size: 13px; font-weight: 800; fill: white; pointer-events: none; }

.kf-diagram-list-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px;
  padding: 8px 12px; margin-bottom: 6px; font-size: 13px; cursor: pointer;
}
.kf-diagram-list-name { font-weight: 700; color: #1a1f36; }
.kf-diagram-list-counts { font-size: 11.5px; font-weight: 700; }

.kf-section-actions { display: flex; gap: 8px; margin-bottom: 14px; }

.kf-silo-card {
  background: white; border: 1px solid #eef2f7; border-radius: 12px;
  padding: 16px; margin-bottom: 14px; scroll-margin-top: 20px;
}
.kf-silo-card.kf-silo-highlight { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); }
.kf-silo-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.kf-silo-name { font-size: 14px; font-weight: 800; color: #0f172a; }
.kf-silo-counts { font-size: 11.5px; font-weight: 700; color: #64748b; }
.kf-silo-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.kf-silo-table th {
  text-align: left; padding: 6px 8px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.3px; text-transform: uppercase; color: #94a3b8;
  border-bottom: 1px solid #f1f5f9;
}
.kf-silo-table td { padding: 7px 8px; border-bottom: 1px solid #f8fafc; vertical-align: top; }
.kf-status-pill {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
}
.kf-status-pill.existing { background: #f0fdf4; color: #16a34a; }
.kf-status-pill.gap { background: #fffbeb; color: #d97706; }
.kf-volume { color: #94a3b8; font-size: 11.5px; }

.kf-subhead { font-size: 13px; font-weight: 700; color: #1a1f36; margin: 18px 0 10px; }
.kf-priority-list { margin: 0; padding-left: 20px; font-size: 13px; color: #1e293b; }
.kf-priority-list li { margin-bottom: 4px; }
.kf-linking-list { margin: 0; padding-left: 20px; font-size: 13px; color: #1e293b; }
.kf-linking-list li { margin-bottom: 4px; }

/* Reddit Post Generator — Bulk mode result cards. Reuses .rp-card/
   .rp-subreddit-badge/.tm-field-block/.tm-field-text/.tm-field-actions
   as-is for each individual card; these are the only genuinely new
   pieces (stacking margin, a card number, and the self-promo warning). */
.rp-card.rp-batch-card { margin-bottom: 14px; }
.rp-batch-number { font-size: 11.5px; font-weight: 700; color: #94a3b8; margin-bottom: 8px; }
.rp-batch-promo-warning {
  display: flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 11.5px; font-weight: 600; color: #b45309;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 6px 10px;
}

/* Download HTML — a single-action utility (no results panel like most
   Content Generator tools), so just one centered card rather than the
   usual .wbb-cols two-column layout. */
.dh-card {
  max-width: 560px;
  background: white; border: 1px solid #eef2f7; border-radius: 12px;
  padding: 24px; margin-top: 8px;
}
.dh-status { margin-top: 14px; font-size: 13px; }
.dh-status.dh-error { color: #b91c1c; }
.dh-status.dh-success { color: #16a34a; }

/* Client Management secondary sidebar — same structural family as
   .cg-sidebar/.cb-sidebar (own flex column, fixed width, own scroll),
   shown/hidden the same way (aside[hidden] toggled from app.js). */
.cm-sidebar {
  width: 270px;
  flex: 0 0 270px;
  background: white;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  padding: 16px 12px 12px;
  overflow: hidden;
  animation: cb-slide 0.18s ease-out;
}
.cm-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 12px; flex: 0 0 auto; }
.cm-sidebar-title { font-weight: 700; font-size: 18px; color: #1a1f36; letter-spacing: -0.3px; }
.cm-sidebar-add-btn {
  background: #2563eb; color: white; border: none; border-radius: 7px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.cm-sidebar-add-btn:hover { background: #1d4ed8; }

.cm-sidebar-search-wrap { padding: 0 4px 10px; flex: 0 0 auto; }
.cm-sidebar-search-wrap input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e2e8f0; border-radius: 7px;
  font-size: 12.5px; font-family: inherit;
}

.cm-sidebar-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.cm-sidebar-no-match { padding: 12px 8px; font-size: 12.5px; color: #94a3b8; }

.cm-sidebar-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
.cm-sidebar-row:hover { background: #f3f4f6; }
.cm-sidebar-row.is-active { background: #eff6ff; }
.cm-sidebar-row.is-active .cm-sidebar-row-name { color: #1d4ed8; }
.cm-sidebar-row-text { min-width: 0; }
.cm-sidebar-row-name {
  font-weight: 600; font-size: 13.5px; color: #1e293b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-sidebar-row-domain {
  font-size: 11.5px; color: #94a3b8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Same pill as API Connectivity's .ac-status-dot, just smaller/inline
   (not absolutely positioned over a banner) for a sidebar row. */
.ac-status-dot.cm-sidebar-status { position: static; flex: 0 0 auto; padding: 2px 7px; font-size: 10px; }

.cm-sidebar-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 20px 10px;
}
.cm-sidebar-empty-text { font-size: 13px; color: #94a3b8; }
.cm-sidebar-empty-btn {
  background: #2563eb; color: white; border: none; border-radius: 7px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.cm-sidebar-empty-btn:hover { background: #1d4ed8; }

/* Responsive collapse — below this width a fixed 3rd column competes too
   hard with the main sidebar + content, so the client list becomes a
   toggleable overlay instead of a static column. */
.cm-sidebar-toggle-btn { display: none; }
@media (max-width: 900px) {
  .cm-sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 200;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.35);
    transform: translateX(-100%);
    transition: transform 0.18s ease-out;
  }
  .cm-sidebar.is-open { transform: translateX(0); }
  .cm-sidebar-toggle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: white; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: #1e293b;
    cursor: pointer; font-family: inherit; margin-bottom: 14px;
  }
}

/* Main content — Ahrefs dashboard for the selected client (or the
   "nothing selected yet" prompt). */
.cm-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed #e2e8f0; border-radius: 12px;
}
.cm-sync-error { font-size: 12px; color: #b91c1c; }
.cm-pages-stale-note {
  font-size: 12.5px; color: #92400e; background: #fffbeb;
  border: 1px solid #fde68a; border-radius: 8px;
  padding: 8px 12px; margin-bottom: 16px;
}
.cm-pages-stale-link {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; font-weight: 700; color: #92400e; text-decoration: underline;
  cursor: pointer;
}

.cm-detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.cm-detail-title { display: flex; flex-direction: column; }
.cm-detail-name { font-size: 20px; font-weight: 700; color: #1e293b; }
.cm-detail-domain { font-size: 13px; color: #64748b; }
.cm-detail-actions { display: flex; gap: 10px; flex: 0 0 auto; }

.cm-metric-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 900px) { .cm-metric-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cm-metric-tiles { grid-template-columns: 1fr; } }
/* Only the dashboard's own tiles (not .cm-comp-detail-tiles inside the
   fixed-max-width competitor modal) get the 6-in-a-row treatment — a
   modal stays the same width regardless of viewport, so 6 columns there
   would just cram the tiles instead of genuinely using extra space. */
@media (min-width: 1500px) {
  .cm-dashboard-main .cm-metric-tiles { grid-template-columns: repeat(6, 1fr); }
}
.cm-tile {
  background: white; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 20px;
}
.cm-tile-value { font-size: 28px; font-weight: 800; color: #1e293b; }
.cm-tile-label { font-size: 12px; color: #94a3b8; margin-top: 4px; }

/* Client Management overrides .cg-page's shared 980px reading-width cap
   — that's the right width for a single-column tool form (Blog
   Generator, Article Rewriter, etc.) but leaves a huge empty gray gap
   next to a genuine two-column dashboard. Fluid up to a generous cap so
   it doesn't stretch into unreadably wide cards on an ultrawide monitor. */
.cm-page { max-width: 1800px; }

/* Client dashboard two-column layout — Top Competitors panel (left) +
   the client's own header/metrics (right, .cm-dashboard-main wraps the
   markup that used to be the whole of #cm-detail-body). Grid with a
   proportional (%) left column + 1fr right column, NOT fixed pixel
   widths, so both columns scale together as the window resizes instead
   of the panel staying a fixed size while only the gap grows. minmax()
   keeps the panel from getting too cramped on a narrower laptop screen.
*/
.cm-dashboard-cols {
  display: grid;
  grid-template-columns: minmax(300px, 28%) 1fr;
  gap: 24px;
  align-items: start;
}
.cm-dashboard-main { min-width: 0; }
/* Wraps Top Competitors + Content Pipeline into ONE grid item occupying
   the left minmax(300px,28%) track — .cm-dashboard-cols only defines 2
   template columns, so without this wrapper a second top-level panel
   would become an (undefined) 3rd grid item instead of stacking under
   the first. */
.cm-dashboard-left { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
@media (max-width: 1100px) {
  .cm-dashboard-cols { grid-template-columns: 1fr; }
  .cm-comp-panel, .cm-pipeline-panel { width: 100%; max-height: none; }
}

.cm-comp-panel {
  width: 100%;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  max-height: 640px; /* a long competitor list scrolls internally rather than stretching the whole dashboard */
}
.cm-comp-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.cm-comp-panel-title { font-size: 15px; font-weight: 700; color: #1e293b; }
.cm-comp-counter { font-size: 11.5px; color: #94a3b8; margin-top: 2px; }
.cm-comp-panel-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.cm-comp-add-btn {
  background: #2563eb; color: white; border: none; border-radius: 7px;
  padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.cm-comp-add-btn:hover { background: #1d4ed8; }
.cm-comp-menu-btn {
  background: none; border: 1px solid #e2e8f0; border-radius: 7px;
  width: 28px; height: 28px; cursor: pointer; color: #64748b; font-size: 14px;
}
.cm-comp-menu-btn:hover { background: #f8fafc; }

.cm-comp-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }

.cm-comp-card {
  border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px;
  cursor: pointer; position: relative;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.cm-comp-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); }
.cm-comp-card.is-loading { cursor: default; }
.cm-comp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cm-comp-domain { font-weight: 700; font-size: 13.5px; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-comp-row-menu-btn { background: none; border: none; cursor: pointer; color: #94a3b8; font-size: 15px; padding: 2px 6px; line-height: 1; }
.cm-comp-row-menu-btn:hover { color: #1e293b; }

.cm-comp-stats { display: flex; gap: 20px; margin-bottom: 10px; }
.cm-comp-stat { display: flex; flex-direction: column; }
.cm-comp-stat-value { font-size: 15px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 4px; }
.cm-comp-stat-label { font-size: 10.5px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.3px; }
.cm-comp-delta { font-size: 11px; }
.cm-comp-delta.up { color: #16a34a; }
.cm-comp-delta.down { color: #dc2626; }

.cm-comp-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cm-comp-synced { font-size: 11px; color: #94a3b8; }

.cm-comp-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 30px 10px;
}
.cm-comp-empty-text { font-size: 13px; color: #94a3b8; max-width: 220px; }
.cm-comp-empty-btn {
  background: #2563eb; color: white; border: none; border-radius: 7px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.cm-comp-empty-btn:hover { background: #1d4ed8; }

/* ═══════════════════════════════════════════════════════════════════════
   Content Pipeline panel — public/js/client-content-pipeline.js. Sits
   directly beneath Top Competitors in .cm-dashboard-left (same column,
   same width) — reuses .cm-comp-panel-header/.cm-comp-panel-title/
   .cm-comp-counter verbatim so the two panels' headers read as one
   family; only the card container gets its own class since it needs a
   shorter max-height (it's the second panel in the column, not the
   first) and a plain row list rather than Top Competitors' card grid.
   ═══════════════════════════════════════════════════════════════════════ */
.cm-pipeline-panel {
  width: 100%;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  max-height: 420px;
}
/* Always clips/scrolls internally, same as .cm-comp-list above it — not
   conditional on a row count threshold, since tall (two-line) rows can
   overflow the panel's max-height even at exactly MAX_VISIBLE_BEFORE_SCROLL
   items, and without this the overflow used to spill outside the panel's
   rounded border instead of scrolling (visible as a "ghost" corner peeking
   out from behind the card). */
.cm-pipeline-list { display: flex; flex-direction: column; gap: 8px; flex: 1; overflow-y: auto; }

.cm-pipeline-row {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px;
  cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s;
}
.cm-pipeline-row:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); }
/* Same light-green "this is live" treatment as Keyword Planning's own
   .cm-kw-topic-card.is-published, exact same color tokens, so the visual
   language for "published" stays consistent across both surfaces. */
.cm-pipeline-row.is-published { background: #ecfdf5; border-color: #6ee7b7; }
.cm-pipeline-row.is-published:hover { border-color: #34d399; }
.cm-pipeline-row-main { flex: 1; min-width: 0; }
.cm-pipeline-row-title {
  font-size: 13px; font-weight: 600; color: #1e293b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-pipeline-row-date { font-size: 11px; color: #94a3b8; margin-top: 2px; }
/* Stacks the status pill above the Indexed checkbox (published rows
   only) so the row doesn't need extra horizontal width for both. */
.cm-pipeline-row-status { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }
.cm-pipeline-row-link {
  flex: 0 0 auto; background: none; border: 1px solid #e2e8f0; border-radius: 6px;
  width: 24px; height: 24px; cursor: pointer; color: #64748b; font-size: 13px; line-height: 1;
}
.cm-pipeline-row-link:hover { background: #f8fafc; color: #1e293b; }

/* Status pills — exact color values already established elsewhere for
   each of these four states (Content Generator queue's "PUBLISHED" pill,
   Keyword Planning's own dark "Scheduled" status-select, its amber
   "🔄 REFRESH" badge, and the same neutral gray used for pending/low-
   priority states throughout), reused verbatim rather than a new
   palette. */
.cm-pipeline-status-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.2px; white-space: nowrap;
}
.cm-pipeline-status-pill.is-planned   { background: #f1f5f9; color: #475569; }
.cm-pipeline-status-pill.is-scheduled { background: #0f172a; color: #d1fae5; }
.cm-pipeline-status-pill.is-published { background: #ecfdf5; color: #047857; }
.cm-pipeline-status-pill.is-update    { background: #92400e; color: #fef3c7; }

/* "Indexed" checkbox — published rows only. Reuses the exact checkbox
   sizing/accent-color already established by the Backlink Priority
   Report's built/not-built checklist (.cm-report-link-row input), and the
   same green used for its "✓ Built" state, so both checklist-style
   affordances in Client Management read as one visual language. Manual-
   only for now (no GSC connection exists in this app to auto-verify) —
   see server/lib/db.js's client_keyword_topics indexed/indexed_source
   migration and server/routes/client-keyword-reports.js's
   PATCH /topics/:id/indexed.
   */
.cm-pipeline-indexed {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 10.5px; color: #94a3b8; user-select: none;
}
.cm-pipeline-indexed input[type="checkbox"] { width: 13px; height: 13px; accent-color: #2563eb; cursor: pointer; }
.cm-pipeline-indexed.is-checked { color: #047857; font-weight: 600; }
/* Amber dot — published 30+ days ago and still not marked indexed. Not an
   error state (new posts can normally take days/weeks), just a nudge that
   this one is worth a manual check. */
.cm-pipeline-indexed-warning {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #f59e0b; flex: 0 0 auto;
}

.cm-pipeline-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 30px 14px; font-size: 13px; color: #94a3b8;
}

/* Brief highlight when "Content Pipeline" scrolls a Keyword Planning
   card into view (see handleRowClick's jump-to-topic path) — same idea
   as a "flash of unstyled attention," just enough to catch the eye
   without a jarring page-wide effect. */
.cm-kw-topic-flash { animation: cm-kw-topic-flash-anim 1.5s ease; }
@keyframes cm-kw-topic-flash-anim {
  0%, 100% { box-shadow: none; }
  15%, 60% { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35); }
}

/* Loading skeleton — shown on a card mid-sync (single "Refresh Data" or
   a bulk "Refresh All Competitors"), instead of stale numbers sitting
   there looking current while a new fetch is in flight. */
.cm-comp-skeleton-line {
  height: 12px; border-radius: 4px; margin: 6px 0;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
  background-size: 400% 100%;
  animation: cm-skeleton 1.4s ease infinite;
}
@keyframes cm-skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Competitor detail modal (reuses .cc-modal-lg + .cm-metric-tiles/.cm-tile) */
.cm-comp-detail-tiles { margin-bottom: 20px; }
.cm-comp-pages-title { font-size: 13px; font-weight: 700; color: #1e293b; margin-bottom: 10px; }
.cm-comp-pages-loading { font-size: 12.5px; color: #94a3b8; padding: 14px 0; }
.cm-comp-pages-table-wrap { max-height: 320px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 8px; }
.cm-comp-pages-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cm-comp-pages-table th {
  position: sticky; top: 0; background: #f8fafc; text-align: left;
  padding: 8px 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.3px; color: #94a3b8;
  border-bottom: 1px solid #e2e8f0;
}
.cm-comp-pages-table td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; color: #334155; }
.cm-comp-pages-url { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Backlink Priority Report — full-width section below the 6 metric
   tiles, inside .cm-dashboard-main (not spanning the competitors panel
   too — "full width" here means the dashboard column's own width). */
.cm-report-section {
  background: white; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 20px;
}
.cm-report-header { margin-bottom: 18px; }
.cm-report-title { font-size: 17px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cm-report-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #0f172a; color: #e0e7ff;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
}
.cm-report-subtitle { font-size: 13px; color: #64748b; margin-top: 4px; }

/* Historical trend chart — sits above .cm-report-controls, independent of
   the report generation controls below it (own data load, never reloads
   when Report Month/Links-to-build change). */
.cm-history-chart-wrap {
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid #f1f5f9;
}
.cm-history-checkboxes {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-bottom: 12px;
}
.cm-history-checkbox {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: #475569;
  cursor: pointer; user-select: none;
}
.cm-history-checkbox input[type="checkbox"] {
  width: 14px; height: 14px; margin: 0; cursor: pointer;
  accent-color: #2563eb;
}
.cm-history-swatch {
  width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
}
.cm-history-canvas-wrap {
  position: relative; width: 100%; height: 200px;
}
.cm-history-empty {
  display: flex; align-items: center; justify-content: center;
  height: 200px; font-size: 13px; color: #94a3b8;
  background: #f8fafc; border: 1px dashed #e2e8f0; border-radius: 10px;
  text-align: center; padding: 0 20px;
}

.cm-report-controls {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 20px;
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid #f1f5f9;
}
.cm-report-field { display: flex; flex-direction: column; gap: 6px; }
.cm-report-field label { font-size: 11.5px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.3px; }
.cm-report-action-field { margin-left: auto; align-items: flex-end; }

.cm-report-stepper { display: flex; align-items: center; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; width: fit-content; }
.cm-report-stepper button {
  background: #f8fafc; border: none; width: 32px; height: 34px; cursor: pointer; font-size: 15px; color: #475569;
}
.cm-report-stepper button:hover { background: #f1f5f9; }
.cm-report-stepper input {
  width: 56px; height: 34px; border: none; border-left: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0;
  text-align: center; font-size: 13.5px; font-family: inherit; font-weight: 600; color: #1e293b;
  -moz-appearance: textfield;
}
.cm-report-stepper input::-webkit-outer-spin-button,
.cm-report-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cm-report-controls select {
  padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: 13px; font-family: inherit; color: #1e293b; min-width: 180px;
}
.cm-report-last-generated { font-size: 11.5px; color: #94a3b8; }

.cm-report-empty { font-size: 13.5px; color: #64748b; padding: 20px 0; }

/* Loading state — a real (if indeterminate) progress bar plus rotating
   status text, not just a bare spinner, since this can take several
   seconds (an Ahrefs data pull followed by a Claude call). */
.cm-report-loading { padding: 30px 10px; text-align: center; }
.cm-report-loading-bar { height: 6px; border-radius: 999px; background: #f1f5f9; overflow: hidden; margin-bottom: 16px; }
.cm-report-loading-bar-fill {
  height: 100%; width: 40%; border-radius: 999px;
  background: #2563eb;
  animation: cm-report-indeterminate 1.3s ease-in-out infinite;
}
@keyframes cm-report-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
.cm-report-loading-text { font-size: 13px; color: #64748b; }

.cm-report-summary { display: flex; gap: 32px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid #f1f5f9; }
.cm-report-summary-stat { display: flex; flex-direction: column; }
.cm-report-summary-value { font-size: 22px; font-weight: 800; color: #1e293b; }
.cm-report-summary-label { font-size: 11.5px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; }

.cm-report-pages { display: flex; flex-direction: column; gap: 12px; }
.cm-report-page-card { border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px; }
.cm-report-page-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.cm-report-rank { font-size: 13px; font-weight: 800; color: #2563eb; }
.cm-report-type-badge {
  display: inline-flex; align-items: center;
  background: #0f172a; color: #cbd5e1;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
  padding: 3px 9px; border-radius: 999px;
}
/* Per-page-type color coding — same pill shape, distinct accent per type
   so a report is scannable at a glance (e.g. spotting the rare Product
   Page exception on an e-commerce client's report). */
.cm-report-type-badge.is-homepage  { background: #1e3a8a; color: #dbeafe; }
.cm-report-type-badge.is-service   { background: #14532d; color: #dcfce7; }
.cm-report-type-badge.is-location  { background: #78350f; color: #fef3c7; }
.cm-report-type-badge.is-collection{ background: #4c1d95; color: #ede9fe; }
.cm-report-type-badge.is-product   { background: #831843; color: #fce7f3; }
.cm-report-type-badge.is-money     { background: #164e63; color: #cffafe; }
.cm-report-type-badge.is-other     { background: #0f172a; color: #cbd5e1; }
.cm-report-link-count { font-size: 12px; font-weight: 600; color: #475569; margin-left: auto; }

.cm-report-ecommerce-note {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #6d28d9;
  background: #f5f3ff; border: 1px solid #ddd6fe;
  padding: 5px 10px; border-radius: 8px; margin-top: 8px; width: fit-content;
  cursor: help;
}
.cm-report-page-url {
  font-size: 13px; font-weight: 700; color: #1e293b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 6px;
}
.cm-report-reasoning { font-size: 13px; color: #475569; line-height: 1.5; margin-bottom: 10px; }
.cm-report-anchors { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-report-anchor-chip {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 999px;
  padding: 5px 12px; font-size: 12px; font-family: inherit; color: #334155; cursor: pointer;
}
.cm-report-anchor-chip:hover { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.cm-report-anchor-chip.is-copied { background: #d1fae5; border-color: #a7f3d0; color: #065f46; }

.cm-report-footer-actions { display: flex; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #f1f5f9; }

/* Backlink build-status tracking (per-link checklist inside each
   recommended page card) + the report's Show All/Not Built/Built Only
   filter. */
.cm-report-filter-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.cm-report-filter-btn {
  background: white; border: 1px solid #e2e8f0; border-radius: 999px;
  padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: #64748b;
  cursor: pointer; font-family: inherit;
}
.cm-report-filter-btn:hover { border-color: #cbd5e1; color: #334155; }
.cm-report-filter-btn.is-active { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }

.cm-report-links { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.cm-report-link-row {
  display: flex; align-items: center; gap: 4px;
  border-radius: 6px;
}
.cm-report-link-row:hover { background: #f8fafc; }
.cm-report-link-row-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; cursor: pointer;
}
.cm-report-link-row input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; accent-color: #2563eb; cursor: pointer; }
.cm-report-link-anchor {
  flex: 1; min-width: 0; font-size: 13px; color: #334155;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-report-link-anchor:hover { text-decoration: underline; }
.cm-report-link-status { flex: 0 0 auto; font-size: 11.5px; color: #94a3b8; white-space: nowrap; }
.cm-report-link-delete {
  flex: 0 0 auto;
  background: none; border: none; cursor: pointer;
  font-size: 13px; padding: 6px 8px; border-radius: 6px;
  color: #94a3b8; opacity: 0; transition: opacity 0.12s;
}
.cm-report-link-row:hover .cm-report-link-delete { opacity: 1; }
/* "+ Task" — only rendered for not-yet-built links (see renderLinkRow),
   same hover-to-reveal treatment as the delete button next to it. */
.cm-report-link-task-btn {
  flex: 0 0 auto;
  background: none; border: 1px solid #e2e8f0; cursor: pointer;
  font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 6px;
  color: #475569; opacity: 0; transition: opacity 0.12s;
}
.cm-report-link-row:hover .cm-report-link-task-btn { opacity: 1; }
.cm-report-link-task-btn:hover { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.cm-report-link-delete:hover { background: #fef2f2; color: #b91c1c; }
/* Built rows fade slightly and lose the blue anchor-hover affordance —
   the checkbox + green "✓ Built <date>" text are the whole point once
   it's done, not the anchor text anymore. */
.cm-report-link-row.is-built .cm-report-link-row-main { opacity: 0.6; }
.cm-report-link-row.is-built .cm-report-link-anchor { text-decoration: line-through; }
.cm-report-link-row.is-built .cm-report-link-status { color: #16a34a; font-weight: 600; }

/* "Keyword Planning for Blogs" — sits directly below the Backlink
   Priority Report on the client dashboard; deliberately matched to
   .cm-report-* card/typography/spacing so the two read as a pair.
   Reuses .cm-report-loading/-empty, .cm-sync-error, and
   .cm-report-footer-actions as-is rather than duplicating them. */
.cm-kw-section {
  background: white; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 20px; margin-top: 20px;
}
.cm-kw-header { margin-bottom: 18px; }
.cm-kw-title { font-size: 17px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cm-kw-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #0f172a; color: #e0e7ff;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
}
.cm-kw-subtitle { font-size: 13px; color: #64748b; margin-top: 4px; }

.cm-kw-controls {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 20px;
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid #f1f5f9;
}
.cm-kw-controls .wbb-generate-btn { width: auto; padding: 11px 20px; }
.cm-kw-last-generated { font-size: 11.5px; color: #94a3b8; }

.cm-kw-note {
  font-size: 12.5px; color: #64748b; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 8px 12px; margin-bottom: 16px;
}

.cm-kw-summary { display: flex; gap: 32px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid #f1f5f9; }
.cm-kw-summary-stat { display: flex; flex-direction: column; }
.cm-kw-summary-value { font-size: 22px; font-weight: 800; color: #1e293b; }
.cm-kw-summary-label { font-size: 11.5px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; }

/* Shortfall transparency note — distinct from .cm-kw-note (which frames
   the WHOLE report as starter/mature) since this is about one specific
   generation run falling short of what was requested, not the report as
   a whole. */
.cm-kw-shortfall-note {
  font-size: 12px; color: #92400e; background: #fffbeb;
  border: 1px solid #fde68a; border-radius: 8px;
  padding: 8px 12px; margin: -4px 0 20px;
}

/* Push to Schedule modal — Internal Links section (Core vs Outer topical
   map suggestions). Reuses .cm-report-type-badge's color-coded page-type
   pills as-is so a Service/Collection/Money page reads the same way here
   as it does on the Backlink Priority Report. */
.cm-kw-badge-inline { font-size: 10px; padding: 2px 8px; }
.cm-kw-links-ecommerce-note {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: #6d28d9;
  background: #f5f3ff; border: 1px solid #ddd6fe;
  padding: 5px 10px; border-radius: 8px; margin-bottom: 8px; width: fit-content;
}
.cm-kw-links-status { font-size: 12.5px; color: #64748b; padding: 6px 0; }
.cm-kw-links-list { display: flex; flex-direction: column; gap: 8px; }
.cm-kw-links-empty {
  font-size: 12.5px; color: #64748b; background: #f8fafc;
  border: 1px dashed #e2e8f0; border-radius: 8px;
  padding: 10px 12px;
}
.cm-kw-link-row {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px;
}
.cm-kw-link-check { flex: 0 0 auto; padding-top: 2px; }
.cm-kw-link-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: #2563eb; cursor: pointer; }
.cm-kw-link-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cm-kw-link-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-kw-link-url {
  font-size: 12.5px; color: #475569; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.cm-kw-link-manual-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
  color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 2px 8px;
}
/* Edit Scheduled Post modal's Internal Links rows have no site-page pool
   to select from (an arbitrary scheduled_posts row has no client tie), so
   each row gets an outright remove button instead of just a checkbox. */
.cm-kw-link-remove {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-size: 12px; color: #94a3b8; padding: 2px 6px; border-radius: 4px;
}
.cm-kw-link-remove:hover { background: #fef2f2; color: #b91c1c; }
/* Anchor Text Diversity — static "used Nx" tag (informational, computed
   once at render) vs. the reactive warning below (updates live as the
   user types, advisory only, never blocks scheduling). */
.cm-kw-link-usage-tag {
  font-size: 10.5px; font-weight: 600; color: #64748b;
  cursor: help; margin-left: auto;
}
.cm-kw-link-anchor-input {
  width: 100%; padding: 7px 10px; border: 1px solid #e2e8f0; border-radius: 6px;
  font-size: 13px; font-family: inherit; color: #1e293b;
}
.cm-kw-link-anchor-warning {
  font-size: 11.5px; color: #92400e; background: #fffbeb;
  border: 1px solid #fde68a; border-radius: 6px; padding: 5px 9px;
}
.cm-kw-link-reasoning { font-size: 12px; color: #64748b; line-height: 1.4; }
.cm-kw-links-add-btn {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 600; color: #2563eb;
  padding: 6px 0; text-align: left;
}
.cm-kw-links-add-btn:hover { text-decoration: underline; }
.cm-kw-links-manual-row {
  display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap;
}
.cm-kw-links-manual-row select {
  flex: 1 1 220px; min-width: 0; padding: 7px 10px;
  border: 1px solid #e2e8f0; border-radius: 6px; font-size: 12.5px; font-family: inherit; color: #1e293b;
}
.cm-kw-links-manual-row input[type="text"] {
  flex: 1 1 160px; min-width: 0; padding: 7px 10px;
  border: 1px solid #e2e8f0; border-radius: 6px; font-size: 12.5px; font-family: inherit; color: #1e293b;
}

.cm-kw-topics { display: flex; flex-direction: column; gap: 12px; }
.cm-kw-topic-card { border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 16px; }
.cm-kw-topic-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cm-kw-rank { font-size: 13px; font-weight: 800; color: #2563eb; flex: 0 0 auto; }
.cm-kw-topic-title { font-size: 14.5px; font-weight: 700; color: #1e293b; flex: 1; }
.cm-kw-topic-delete {
  flex: 0 0 auto;
  background: none; border: none; cursor: pointer;
  font-size: 13px; padding: 6px 8px; border-radius: 6px;
  color: #94a3b8; opacity: 0; transition: opacity 0.12s;
}
.cm-kw-topic-card:hover .cm-kw-topic-delete { opacity: 1; }
.cm-kw-topic-delete:hover { background: #fef2f2; color: #b91c1c; }

.cm-kw-keyword-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.cm-kw-target-keyword { font-size: 13px; font-weight: 600; color: #334155; }
.cm-kw-volume-badge {
  display: inline-flex; align-items: center;
  background: #ecfdf5; color: #047857;
  font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
}
.cm-kw-reasoning { font-size: 13px; color: #475569; line-height: 1.5; margin-bottom: 10px; }

/* Core-page tie-in (new topics) — which specific service/collection/
   product/location page this topic is meant to support via internal
   linking, or an explicit "no tie-in" flag when none genuinely fits. */
.cm-kw-tie-in {
  font-size: 12px; color: #475569; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 8px 10px; margin-bottom: 12px;
}
.cm-kw-tie-in-label { font-weight: 700; color: #334155; }
.cm-kw-tie-in-url { font-weight: 600; color: #1d4ed8; word-break: break-all; }
.cm-kw-tie-in-reasoning { margin-top: 4px; color: #64748b; }
.cm-kw-tie-in.is-standalone { color: #94a3b8; font-style: italic; }

/* Overlap confidence check callout (new topics) — surfaces a borderline
   judgment call: this topic was kept as NEW despite notable keyword/title/
   slug overlap with a real existing post. Amber, not red/blue, to read as
   "worth a second look" rather than an error or a neutral fact. */
.cm-kw-overlap-callout {
  font-size: 12px; color: #78350f; background: #fffbeb;
  border: 1px solid #fde68a; border-radius: 8px;
  padding: 8px 10px; margin-bottom: 12px;
}
.cm-kw-overlap-label { font-weight: 700; color: #92400e; }
.cm-kw-overlap-url { font-weight: 600; color: #b45309; word-break: break-all; }
.cm-kw-overlap-reasoning { margin-top: 4px; color: #92400e; }

/* "Update Existing Post" recommendations — visually distinct via the
   🔄 REFRESH tag (a different color language than the plain #-ranked new-
   topic cards) so a refresh task is never mistaken for new content. */
.cm-kw-topic-card.is-update { background: #fffbeb; border-color: #fde68a; }

/* Published — a light green wash so completed/live content reads as
   "done" while scrolling, without needing to read the STATUS dropdown.
   Applies to BOTH plain new-topic cards and REFRESH/update cards once
   their status is 'published' — the compound .is-update.is-published
   selector exists purely so this wins over the amber .is-update
   background above regardless of source order, since a card can carry
   both classes at once (see renderUpdateExistingCard in client-keyword-
   planning.js). Driven entirely by topic.status at render time, so a
   manual status change back to Not Planned/Planned reverts this on the
   next re-render — nothing here persists past what's currently true. */
.cm-kw-topic-card.is-published,
.cm-kw-topic-card.is-update.is-published {
  background: #ecfdf5;
  border-color: #6ee7b7;
}
.cm-kw-refresh-badge {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  background: #92400e; color: #fef3c7;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
  padding: 3px 9px; border-radius: 999px;
}
.cm-kw-refresh-row-spacer { flex: 1; }
.cm-kw-current-title-row { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.cm-kw-current-title-label { font-size: 10px; font-weight: 700; color: #94a3b8; letter-spacing: 0.3px; flex: 0 0 auto; }
.cm-kw-current-title-text { font-size: 13px; color: #94a3b8; text-decoration: line-through; }
.cm-kw-existing-url { font-size: 12px; margin-bottom: 4px; word-break: break-all; }
.cm-kw-existing-url a { color: #1d4ed8; }
.cm-kw-suggested-title-row { margin: 8px 0 10px; }
.cm-kw-suggested-title-label {
  display: block; font-size: 10px; font-weight: 700; color: #7c3aed; letter-spacing: 0.3px; margin-bottom: 3px;
}
.cm-kw-suggested-title-text { font-size: 15px; font-weight: 700; color: #1e293b; line-height: 1.3; }
.cm-kw-underperforming, .cm-kw-improvement {
  font-size: 13px; color: #475569; line-height: 1.5; margin-bottom: 8px;
}
.cm-kw-underperforming-label, .cm-kw-improvement-label { font-weight: 700; color: #92400e; }

.cm-kw-secondary-wrap { margin-bottom: 12px; }
.cm-kw-secondary-label { font-size: 10.5px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; }
.cm-kw-secondary-list { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-kw-secondary-chip {
  display: inline-flex; align-items: center;
  background: #f1f5f9; color: #475569;
  font-size: 11.5px; font-weight: 500;
  padding: 4px 10px; border-radius: 999px;
}
.cm-kw-secondary-chip.has-warning {
  background: #fffbeb; color: #92400e; cursor: help;
}
.cm-kw-secondary-volume { color: #94a3b8; }
.cm-kw-secondary-chip.has-warning .cm-kw-secondary-volume { color: #b45309; }

.cm-kw-status-row {
  display: flex; align-items: center; gap: 10px;
  padding-top: 10px; border-top: 1px solid #f1f5f9;
}
.cm-kw-status-label { font-size: 11.5px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.3px; }
.cm-kw-status-select {
  padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: 12.5px; font-family: inherit; color: #1e293b;
}
/* "Scheduled" pill look — same dark-pill/light-text language as the
   client dashboard's own "Synced" badge (.ac-status-dot.connected),
   just applied to the <select> itself rather than a separate element,
   since this control needs to stay a real dropdown (the user can still
   pick a different status, which unschedules the linked queue row). */
.cm-kw-status-select[data-status="scheduled"] {
  background: #0f172a; color: #d1fae5; border-color: #0f172a; font-weight: 600;
}
.cm-kw-schedule-btn { font-size: 12px; padding: 6px 12px; }
.cm-kw-task-btn { font-size: 12px; padding: 6px 12px; }
.cm-kw-schedule-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Collapsed-state summary on the Push to Schedule modal's own "CONTENT
   SETTINGS ▾" header — sits between the label and the chevron, so a
   collapsed section still shows what's actually configured. */
.cm-kw-schedule-settings-summary {
  flex: 1; text-align: left;
  font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: normal;
  color: #94a3b8;
}

/* Sitemap checklist (Connect/Edit Client modal) */
.cm-sitemap-input-row { display: flex; gap: 8px; }
.cm-sitemap-input-row input { flex: 1; }
.cm-sitemap-status { margin-top: 8px; font-size: 12.5px; color: #64748b; }
.cm-sitemap-status.error { color: #b91c1c; }
.cm-sitemap-status.success { color: #16a34a; }
.cm-sitemap-status.loading { color: #2563eb; }

.cm-sitemap-checklist-wrap {
  margin: -4px 0 16px;
  border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 12px;
}
.cm-sitemap-checklist-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; font-size: 12px; color: #64748b;
}
.cm-sitemap-checklist-actions { display: flex; gap: 12px; }
.cm-sitemap-checklist { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.cm-sitemap-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 6px; cursor: pointer;
}
.cm-sitemap-row:hover { background: #f8fafc; }
.cm-sitemap-row input[type="checkbox"] { flex: 0 0 auto; width: 15px; height: 15px; accent-color: #2563eb; }
.cm-sitemap-row-url {
  flex: 1; min-width: 0; font-size: 12.5px; color: #334155;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Toast stack (public/js/toast.js) */
.lx-toast-stack {
  position: fixed; bottom: 20px; right: 20px; z-index: 500;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.lx-toast {
  background: #0f172a; color: white;
  font-size: 13px; padding: 11px 16px; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  max-width: 360px;
}
.lx-toast.is-visible { opacity: 1; transform: translateY(0); }
.lx-toast-error { background: #7f1d1d; }
.lx-toast-success { background: #14532d; }

/* Client Management bottom scroll-fade cue (public/js/client-management.js
   toggles .is-visible). position:sticky within #view-client-management
   (its actual scroll container) rather than position:fixed with a
   hardcoded left offset — sticky naturally spans this container's own
   width regardless of how wide the sidebars next to it are, no
   viewport-coordinate math needed. */
.cm-scroll-fade {
  position: sticky;
  bottom: 0;
  height: 48px;
  margin-top: -48px;
  background: linear-gradient(to bottom, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.95) 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.cm-scroll-fade.is-visible { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   Todo Lists — public/js/todo-lists.js
   Reuses .cm-sidebar (boards roster), .cc-modal-* (task/board modals),
   and the same white-card/light-border/rounded-corner/blue-accent
   language as the rest of the app throughout.
   ═══════════════════════════════════════════════════════════════════════ */

.tl-sidebar-count {
  font-size: 11px; font-weight: 700; color: #64748b; background: #f1f5f9;
  border-radius: 999px; padding: 1px 7px; flex-shrink: 0;
}

.tl-sidebar-header-actions { display: flex; align-items: center; gap: 6px; }
.tl-gear-btn {
  border: 1px solid #e2e8f0; background: white; border-radius: 6px;
  width: 26px; height: 26px; font-size: 13px; cursor: pointer; color: #64748b;
  display: inline-flex; align-items: center; justify-content: center;
}
.tl-gear-btn:hover { background: #f1f5f9; color: #334155; }

.tl-share-btn {
  border: 1px solid #e2e8f0; background: white; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: #475569; padding: 4px 12px; cursor: pointer;
}
.tl-share-btn:hover { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }

/* .tl-page shares the base .cg-page class (padding, centering) with every
   other tool page, but .cg-page's own max-width: 980px (sized for a
   single-column form layout) would cram a 4-column board into less than
   a quarter of a typical desktop viewport — the exact cause of the
   cramped/clipped columns this overrides. Same fix Client Management
   already applies for its own wide dashboard via .cm-page. */
.tl-page {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 1800px;
  padding: 20px 24px;
}

/* .tl-board-wrap had no layout rule at all until now — its children (the
   toolbar, the filters panel, the quick-add bar, the kanban/list view)
   were plain stacked blocks with zero margin between them (this app's
   global reset zeroes all margins), which is why the quick-add bar and
   the columns below it read as touching. */
.tl-board-wrap { display: flex; flex-direction: column; gap: 20px; }

.tl-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 80px 20px; gap: 8px;
}
.tl-empty-icon { font-size: 40px; margin-bottom: 8px; }
.tl-empty-title { font-size: 18px; font-weight: 700; color: #0f172a; }
.tl-empty-sub { font-size: 14px; color: #64748b; max-width: 420px; margin-bottom: 12px; }

.tl-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.tl-toolbar-left { display: flex; align-items: center; gap: 10px; }
.tl-board-title { font-size: 20px; font-weight: 700; color: #0f172a; margin: 0; }
.tl-board-client-badge {
  font-size: 12px; font-weight: 600; color: #1d4ed8; background: #eff6ff;
  border: 1px solid #bfdbfe; border-radius: 999px; padding: 2px 10px;
}
.tl-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.tl-view-toggle {
  display: inline-flex; background: #f1f5f9; border-radius: 8px; padding: 3px; gap: 2px;
}
.tl-view-toggle-btn {
  border: none; background: transparent; padding: 6px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer;
}
.tl-view-toggle-btn.is-active { background: white; color: #1d4ed8; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }

.tl-filters-panel {
  display: flex; gap: 10px; flex-wrap: wrap; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px;
}
.tl-filters-panel select {
  font-size: 13px; padding: 6px 10px; border-radius: 6px; border: 1px solid #e2e8f0; background: white;
}

.tl-quick-add-row input {
  width: 100%; font-size: 14px; padding: 10px 14px; border-radius: 8px;
  border: 1px dashed #cbd5e1; background: #f8fafc;
}
.tl-quick-add-row input:focus { outline: none; border-color: #93c5fd; background: white; }

/* Board (Kanban) — columns split the available width evenly (flex: 1 1 0
   means every column starts from a 0 basis and grows by the same share,
   so 4 columns land at exactly 25% each minus gaps) down to a 220px
   floor. Only once columns WOULD go narrower than that floor (more than
   ~4-5 columns, or a genuinely narrow viewport) does flexbox stop
   shrinking them and the container's own overflow-x kicks in — the
   default 4-column board never scrolls on a normal desktop width. */
.tl-kanban { display: flex; gap: 24px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
/* White against the page's #f5f7fa background — same convention as
   Client Management's .cm-tile metric cards — is what actually reads as
   a distinct card; the previous #f8fafc was so close to the page
   background that even a real 24px gap and hairline border read as one
   continuous strip in practice. The shadow is the same subtle depth cue
   already used on .tl-task-card, just slightly stronger since a column
   is a bigger, more prominent container than a card inside it. */
.tl-kanban-col {
  flex: 1 1 0; min-width: 220px; background: white; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  display: flex; flex-direction: column; max-height: calc(100vh - 260px);
}
@media (max-width: 640px) {
  /* Below tablet width, even a 220px-floor column is too cramped to
     read comfortably against the rest of the app's mobile layout —
     stack columns full-width instead of shrinking them further. */
  .tl-kanban { flex-direction: column; overflow-x: visible; }
  .tl-kanban-col { min-width: 0; max-height: none; }
}
.tl-kanban-col-header {
  display: flex; align-items: center; gap: 8px;
  padding: 16px; font-size: 13px; font-weight: 700; color: #334155;
  border-bottom: 1px solid #e2e8f0;
}
.tl-kanban-col-count {
  font-size: 11px; font-weight: 700; color: #64748b; background: white;
  border-radius: 999px; padding: 1px 8px;
  margin-left: auto; /* pushes the count to the right now that the header is a plain gap-flex row (dot, label, count) instead of space-between */
}
/* Status color mapping — same 4 colors reused across the column header
   dot, the column's own top-border accent, the task card's left-border
   accent, and List view's status dot, so the mapping is learnable once
   and recognizable everywhere (see statusAccentClass in todo-lists.js).
   Never the ONLY signal — the column/status text label is always shown
   alongside every one of these. */
.tl-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tl-status-dot.tl-status-todo       { background: #64748b; }
.tl-status-dot.tl-status-inprogress { background: #2563eb; }
.tl-status-dot.tl-status-review     { background: #d97706; }
.tl-status-dot.tl-status-done       { background: #16a34a; }

.tl-kanban-col.tl-status-todo       { border-top: 3px solid #64748b; }
.tl-kanban-col.tl-status-inprogress { border-top: 3px solid #2563eb; }
.tl-kanban-col.tl-status-review     { border-top: 3px solid #d97706; }
.tl-kanban-col.tl-status-done       { border-top: 3px solid #16a34a; }
.tl-kanban-col-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 60px; }
.tl-kanban-col-body.is-drag-over { background: #eff6ff; border-radius: 8px; }
.tl-kanban-col-empty { font-size: 12px; color: #94a3b8; text-align: center; padding: 16px 0; font-style: italic; }

.tl-task-card {
  background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px;
  cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.tl-task-card:hover { border-color: #bfdbfe; }
.tl-task-card.is-dragging { opacity: 0.4; }
/* A Viewer's cards render with draggable="false" (see todo-lists.js's
   taskCard()) — this just swaps the cursor so it doesn't invite a drag
   that would do nothing, and drops the hover lift a Viewer can't act on. */
.tl-kanban.is-read-only .tl-task-card { cursor: default; }
.tl-kanban.is-read-only .tl-task-card:hover { border-color: #e5e7eb; }
.tl-task-card-title { font-size: 13.5px; font-weight: 600; color: #0f172a; margin-bottom: 6px; }
.tl-task-card-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.tl-task-card-subtasks { font-size: 11px; color: #64748b; margin-top: 6px; }

/* Status accent — a 4px solid left border, distinct from the priority
   pill (a separate signal entirely; see .tl-pill-priority-* below) so
   the two never read as the same thing. The left corners are squared
   off (radius 0) so the accent reads as a flat vertical bar rather than
   curving into the card's own rounded corner — only the right two
   corners keep the card's normal 10px radius. Re-rendered fresh every
   time a card's status changes (drag-drop, the task modal's Save), so
   the accent always matches the card's CURRENT column with no extra
   wiring needed beyond the existing full re-render. */
.tl-task-card.tl-status-todo       { border-left: 4px solid #64748b; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tl-task-card.tl-status-inprogress { border-left: 4px solid #2563eb; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tl-task-card.tl-status-review     { border-left: 4px solid #d97706; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tl-task-card.tl-status-done       { border-left: 4px solid #16a34a; border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Priority / status / client / source pills — same color-coded pill
   pattern as Synced/Published elsewhere (client-management.js's
   .ac-status-dot, content-schedule.js's .sp-status-pill). */
.tl-pill {
  display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; letter-spacing: 0.2px;
}
.tl-pill-priority-low     { background: #f1f5f9; color: #475569; }
.tl-pill-priority-medium  { background: #dbeafe; color: #1d4ed8; }
.tl-pill-priority-high    { background: #fef3c7; color: #92400e; }
.tl-pill-priority-urgent  { background: #fee2e2; color: #b91c1c; }
.tl-pill-client  { background: #ede9fe; color: #5b21b6; }
.tl-pill-source  { background: #f1f5f9; color: #475569; font-weight: 600; }
.tl-pill-status  { background: #f1f5f9; color: #334155; }
.tl-status-cell { display: inline-flex; align-items: center; gap: 6px; }

.tl-due-badge {
  display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; background: #f1f5f9; color: #64748b;
}
.tl-due-badge.is-today   { background: #fef3c7; color: #92400e; }
.tl-due-badge.is-overdue { background: #fee2e2; color: #b91c1c; }

/* List view */
.tl-list-view { background: white; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.tl-list-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tl-list-table th {
  text-align: left; font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase;
  letter-spacing: 0.3px; padding: 10px 14px; background: #f8fafc; border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
}
.tl-list-table td { padding: 10px 14px; border-bottom: 1px solid #f1f5f9; color: #334155; }
.tl-list-table tr:last-child td { border-bottom: none; }
.tl-list-title-cell { font-weight: 600; color: #0f172a; }
.tl-list-row-open {
  border: 1px solid #e2e8f0; background: white; border-radius: 6px; padding: 4px 10px;
  font-size: 12px; font-weight: 600; color: #1d4ed8; cursor: pointer;
}
.tl-list-empty { text-align: center; padding: 30px; color: #94a3b8; font-size: 13px; }

/* Task modal — checklist + comments (extends the shared .cc-modal-field) */
.tl-subtask-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.tl-subtask-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.tl-subtask-row span { flex: 1; }
.tl-subtask-row span.is-done { color: #94a3b8; text-decoration: line-through; }
.tl-subtask-remove { border: none; background: transparent; color: #cbd5e1; cursor: pointer; font-size: 12px; }
.tl-subtask-remove:hover { color: #b91c1c; }
.tl-subtask-empty { font-size: 12.5px; color: #94a3b8; font-style: italic; margin-bottom: 8px; }
.tl-subtask-add-row input {
  width: 100%; font-size: 13px; padding: 8px 12px; border-radius: 8px; border: 1px solid #e2e8f0;
}
.tl-task-source-badge {
  font-size: 12px; font-weight: 600; color: #1d4ed8; background: #eff6ff;
  border: 1px solid #bfdbfe; border-radius: 8px; padding: 6px 10px; display: inline-block;
}
.tl-comment-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; max-height: 160px; overflow-y: auto; }
.tl-comment-row {
  display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px;
  background: #f8fafc; border-radius: 8px; padding: 8px 10px;
}
.tl-comment-body { color: #334155; }
.tl-comment-time { color: #94a3b8; white-space: nowrap; font-size: 11px; }
.tl-comment-empty { font-size: 12.5px; color: #94a3b8; font-style: italic; margin-bottom: 8px; }
.tl-comment-add-row input {
  width: 100%; font-size: 13px; padding: 8px 12px; border-radius: 8px; border: 1px solid #e2e8f0;
}
.cc-modal-footer-spacer { flex: 1; }