/* Prevent a flash of protected app content on load: pages that require auth
   stay hidden until shared.js confirms a signed-in user (or redirects to
   login). This rule lives in the head-loaded stylesheet, so it applies before
   the first paint — no flash of the dashboard before the redirect. */
body[data-require-auth] { visibility: hidden; }
body[data-require-auth].auth-ready { visibility: visible; }

:root {
  --bg: #ffffff;
  --bg-soft: #f5f6fb;
  --card: #ffffff;
  --card-border: #e7e8f2;
  --text: #14151f;
  --muted: #5c6072;
  /* Brand: ink navy + warm gold, matching the ProWebSurf logo. */
  --primary: #0c1320;
  --primary-2: #223252;
  --accent: #c98a3a;
  --ok: #16a34a;
  --err: #dc2626;
  --radius: 16px;
  --maxw: 1080px;
  --shadow: 0 1px 2px rgba(20,20,45,0.05), 0 10px 28px rgba(20,20,45,0.05);
  --shadow-sm: 0 1px 2px rgba(20,20,45,0.06);
}

* { box-sizing: border-box; }

/* The [hidden] attribute must win over component display rules. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(1000px 520px at 82% -12%, rgba(201, 138, 58, 0.10), transparent 60%),
              radial-gradient(820px 500px at -6% 2%, rgba(12, 19, 32, 0.06), transparent 55%),
              var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.15; margin: 0 0 0.5em; }
a { color: inherit; text-decoration: none; }
code {
  background: var(--bg-soft);
  padding: 0.1em 0.4em;
  border-radius: 6px;
  font-size: 0.9em;
}

.grad {
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.muted { color: var(--muted); }
.center { text-align: center; }

/* Nav */
.nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { font-weight: 800; font-size: 1.3rem; display: flex; align-items: center; gap: 8px; }
.brand-logo { height: 60px; width: auto; max-width: 190px; object-fit: contain; vertical-align: middle; border-radius: 6px; display: block; }
.auth-logo { height: 76px; }
.footer .brand-logo { height: 30px; display: inline-block; }
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-size: 0.9rem;
}
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { color: var(--muted); font-weight: 500; }
.nav-links a:hover { color: var(--text); }
.nav-call { color: var(--text) !important; font-weight: 800 !important; white-space: nowrap; letter-spacing: .01em; }
.nav-call:hover { color: var(--primary) !important; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.06s ease, opacity 0.15s ease, background 0.15s ease;
  font-family: inherit;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: 0 4px 14px rgba(106, 92, 255, 0.28);
}
.btn-primary:hover { opacity: 0.94; }
.btn-ghost {
  background: #fff;
  border-color: var(--card-border);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { background: var(--bg-soft); }
.btn-lg { padding: 14px 26px; font-size: 1.05rem; }
.btn-sm { padding: 6px 12px; font-size: 0.85rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Hero */
.hero { padding: 60px 24px 30px; }
.hero-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.badge {
  display: inline-block;
  background: rgba(124, 92, 255, 0.15);
  border: 1px solid rgba(124, 92, 255, 0.4);
  color: var(--primary);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  margin-bottom: 20px;
}
.hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; letter-spacing: -0.02em; }
.sub { font-size: 1.2rem; color: var(--muted); max-width: 620px; margin: 0 auto 28px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 22px; font-size: 0.9rem; color: var(--muted); }

/* Cards & sections */
.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
section { max-width: var(--maxw); margin: 0 auto; padding: 40px 24px; }
.section-title { text-align: center; font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: 32px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }

/* Publish widget */
.publish-card { max-width: 560px; margin: 0 auto; }
.dropzone {
  display: block;
  border: 2px dashed var(--card-border);
  border-radius: 14px;
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin: 18px 0;
}
.dropzone:hover, .dropzone.drag {
  border-color: var(--primary);
  background: rgba(124, 92, 255, 0.08);
}
.dropzone-inner { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.dropzone-icon { font-size: 2.4rem; }
.dropzone-text { font-weight: 600; }
.dropzone-text u { color: var(--primary-2); }
.dropzone-hint { font-size: 0.85rem; color: var(--muted); }
.dropzone.has-file { border-color: var(--ok); background: rgba(46, 204, 113, 0.08); }

.field { display: block; margin-bottom: 18px; }
.field span { display: block; font-size: 0.9rem; margin-bottom: 6px; color: var(--muted); }
.field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: var(--bg-soft);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
}
.field input:focus { outline: none; border-color: var(--primary); }

.result { margin-top: 20px; }
.result-success {
  display: flex; gap: 14px; align-items: center;
  background: rgba(46, 204, 113, 0.1);
  border: 1px solid rgba(46, 204, 113, 0.4);
  border-radius: 12px;
  padding: 16px;
}
.result-icon { font-size: 1.8rem; }
.result-link-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.result-link-row a { color: var(--primary-2); font-weight: 600; word-break: break-all; }
.error {
  margin-top: 18px;
  background: rgba(255, 92, 92, 0.1);
  border: 1px solid rgba(255, 92, 92, 0.4);
  color: #ffb3b3;
  border-radius: 12px;
  padding: 14px 16px;
}

/* Sites grid */
.sites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.site-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.site-card h4 { margin: 0; font-size: 1.05rem; }
.site-card .site-url { color: var(--primary-2); font-size: 0.85rem; word-break: break-all; }
.site-card .site-meta { font-size: 0.8rem; color: var(--muted); }
.site-card .site-actions { display: flex; gap: 8px; margin-top: 6px; }

/* Features */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.feature .feature-icon { font-size: 1.8rem; display: block; margin-bottom: 10px; }
.feature h3 { font-size: 1.15rem; }
.feature p { color: var(--muted); margin: 0; }

/* How */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.step {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 26px;
  text-align: center;
}
.step-num {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; font-weight: 800; font-size: 1.2rem;
  margin-bottom: 12px;
}
.step h3 { font-size: 1.15rem; }
.step p { color: var(--muted); margin: 0; }

/* Pricing */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; max-width: 720px; margin: 0 auto 18px; }
.price { display: flex; flex-direction: column; position: relative; }
.price h3 { font-size: 1.3rem; }
.price-amount { font-size: 2.4rem; font-weight: 800; margin: 6px 0 14px; }
.price-amount span { font-size: 1rem; font-weight: 500; color: var(--muted); }
.price ul { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.price ul li::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.price-featured { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), 0 12px 40px rgba(124, 92, 255, 0.2); }
.price-tag {
  position: absolute; top: -12px; right: 18px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; font-size: 0.75rem; font-weight: 700;
  padding: 4px 12px; border-radius: 999px;
}

/* Footer */
.footer {
  max-width: var(--maxw);
  margin: 40px auto 0;
  padding: 30px 24px 50px;
  border-top: 1px solid var(--card-border);
  text-align: center;
}
.footer p { margin: 4px 0; }
/* App pages get a slim footer; the builder hides it to maximize the preview. */
.has-sidebar > .footer { margin-top: 16px; padding: 12px 24px; font-size: 0.78rem; }
.has-sidebar > .footer p { margin: 1px 0; }
.has-sidebar > .footer .brand-logo { height: 20px; }
.builder-page > .footer { display: none; }
.footer .brand-mark { width: 22px; height: 22px; font-size: 0.75rem; }

/* Left sidebar (app pages) */
.sidebar {
  position: fixed; top: 0; left: 0; width: 236px; height: 100vh;
  background: #fff; border-right: 1px solid var(--card-border); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; padding: 16px 14px; z-index: 20; overflow-y: auto;
}
.has-sidebar main, .has-sidebar > .footer { margin-left: 236px; }
/* Sticky footer without touching the layout model: make main tall enough that a
   short page (e.g. an empty pipeline) still pushes the footer to the bottom.
   Builder opts out (it hides the footer and fills its own height). */
.has-sidebar:not(.builder-page) main { min-height: calc(100vh - 86px); }
/* Center the footer under the content the same way the pages center. */
.has-sidebar > .footer { margin-left: max(236px, calc((100% - var(--maxw)) / 2)); margin-right: auto; }
/* `.page` is the <main> itself, so the fixed left margin above kills its
   `margin: 0 auto` centering (auto needs BOTH sides). Re-center the content
   column in the viewport whenever there's room to clear the 236px sidebar;
   below that it falls back to sitting just past the sidebar. (The builder's
   <main> is `.builder`, not `.page`, so it keeps the plain 236px offset.) */
.has-sidebar main.page:not(.lead-finder) { margin-left: max(236px, calc((100% - var(--maxw)) / 2)); margin-right: auto; }
.side-brand { display: flex; align-items: center; padding: 6px 10px 16px; }
.side-brand .brand-logo { height: 58px; max-width: 200px; }
.side-links { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.side-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; color: var(--muted); font-weight: 600; font-size: 0.94rem; }
.side-link .ico { width: 20px; text-align: center; }
.side-link:hover { background: var(--bg-soft); color: var(--text); }
.side-link.active { background: linear-gradient(135deg, rgba(106,92,255,0.12), rgba(18,182,240,0.12)); color: var(--primary); }
.side-foot { border-top: 1px solid var(--card-border); padding-top: 12px; margin-top: 8px; }
.side-user { font-weight: 700; font-size: 0.9rem; padding: 0 12px 8px; }
.side-logout { display: block; padding: 9px 12px; border-radius: 10px; color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.side-logout:hover { background: var(--bg-soft); color: var(--text); }
@media (max-width: 860px) {
  .sidebar { position: static; width: auto; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--card-border); }
  .side-brand { padding: 6px 10px; }
  .side-links { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 4px; }
  .side-foot { border-top: 0; padding-top: 0; margin-top: 0; margin-left: auto; display: flex; align-items: center; gap: 8px; }
  .side-user { padding: 0 6px; }
  .has-sidebar main, .has-sidebar > .footer, .has-sidebar main.page { margin-left: 0; margin-right: 0; }
  .lead-finder > * { margin-left: auto; }
}

.nav-links a.active { color: var(--text); }
.nav-links a.active::after {
  content: ""; display: block; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
}

/* Generic page wrapper */
.page { max-width: var(--maxw); margin: 0 auto; padding: 30px 24px 0; }
.page-head { margin-bottom: 24px; }
.page-head.center { text-align: center; }
.page-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.page-head p { color: var(--muted); max-width: 680px; }
.page-head.center p { margin: 0 auto; }
.field-inline {
  padding: 11px 14px; border-radius: 10px; border: 1px solid var(--card-border);
  background: var(--bg-soft); color: var(--text); font-size: 0.95rem; font-family: inherit;
}
.field-inline:focus { outline: none; border-color: var(--primary); }
.field-narrow { max-width: 140px; }

/* Pillars */
.pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.pillar { display: flex; flex-direction: column; gap: 8px; transition: transform 0.1s, border-color 0.15s; }
.pillar:hover { transform: translateY(-3px); border-color: var(--primary); }
.pillar h3 { font-size: 1.2rem; margin: 0; }
.pillar p { color: var(--muted); margin: 0; flex: 1; }
.pillar-go { color: var(--primary-2); font-weight: 600; font-size: 0.9rem; }

.cta-band { text-align: center; padding: 60px 24px; }
.cta-band h2 { font-size: 2rem; }
#result-domain { margin-top: 6px; font-size: 0.85rem; }

/* Builder — <main> itself is .builder, so .has-sidebar main forces its left
   margin. Let main span the full content area and center its children instead,
   so the builder is centered like the Lead Finder (not pinned left). */
.builder { padding: 6px 24px 8px; }
.builder > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
/* No page title — the sidebar's "AI Web Builder" names the page. The listing
   bar and grid are plain centered children (see `.builder > *`). */
.from-listing { margin-bottom: 10px; }
.ai-badge { font-size: 0.8rem; padding: 3px 10px; border-radius: 999px; margin-left: 6px; }
.ai-badge.ai-on { background: rgba(46, 204, 113, 0.15); color: #7ef0b0; }
.ai-badge.ai-off { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.from-listing { padding: 10px 16px; margin-bottom: 10px; }
/* Fill the viewport: no title row, footer hidden, so the grid gets most height.
   Centered via `.builder > *` (max-width 1200, margin auto). */
.builder-grid { display: grid; grid-template-columns: 360px 1fr; gap: 16px; height: calc(100vh - 92px); min-height: 520px; }
/* AI Designer mode: swap the template tools for a clear note (never a silent
   vanish, which read as "the toggle turned things off"). */
.designer-note { display: none; font-size: 0.85rem; color: var(--muted); padding: 6px 2px; line-height: 1.5; width: 100%; }
/* In AI-Designer mode the controls stay VISIBLE and functional (they apply as an
   AI edit to the custom page). Only show the explanatory note on top. */
.design-bar.designer-mode .designer-note { display: block; }
/* Collapse the chat column to give the preview full width while editing. */
.builder-grid.chat-collapsed { grid-template-columns: 1fr; }
.builder-grid.chat-collapsed .chat { display: none; }
/* Collapse the design-tools bar to hand its height to the preview. */
.design-bar.tools-hidden { display: none; }
#tools-toggle.on { color: var(--primary); border-color: var(--primary); }
/* Logo version history: flip between generated logos (GPT / Nano Banana / …). */
.logo-versions { display: flex; align-items: center; gap: 8px; width: 100%; padding-top: 6px; }
.lv-label { font-size: 0.8rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.lv-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
/* Bottom row of the design bar: the "Logos:" strip on the left, the Rebuild
   button pinned to the right. Full width so it always sits on its own line. */
.db-bottom { display: flex; align-items: center; gap: 8px; width: 100%; padding-top: 6px; }
.db-bottom .logo-versions { width: auto; flex: 1 1 auto; min-width: 0; padding-top: 0; }
#rebuild-builder { margin-left: auto; flex: none; }
/* Keep Rebuild reachable even in AI-Designer mode (which hides the template tools). */
.design-bar.designer-mode > .db-bottom { display: flex; }
/* The logo switcher works on designer pages too (surgical swap), so keep it visible. */
.design-bar.designer-mode > .db-bottom .logo-versions { display: flex; }
/* Busy state for long-running action buttons (Rebuild, etc.): a spinner + a
   clearly non-interactive look so it's obvious work is underway and re-clicks
   are ignored. */
.btn.is-busy { opacity: 0.9; cursor: progress; pointer-events: none; }
.btn.is-busy::before {
  content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 7px;
  vertical-align: -2px; border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-busy::before { animation: none; } }
.lv-thumb { flex: none; position: relative; width: 54px; height: 54px; padding: 3px; border: 2px solid var(--card-border); border-radius: 10px; background: #fff; cursor: pointer; }
.lv-thumb:hover { border-color: var(--primary); }
.lv-thumb.active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(106,92,255,0.25); }
.lv-thumb img { width: 100%; height: 100%; object-fit: contain; }
.lv-tag { position: absolute; left: 0; right: 0; bottom: -14px; text-align: center; font-size: 0.62rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.lv-thumb.lv-original { display: grid; place-items: center; background: var(--card, #f7f7fb); }
.lv-orig-mark { font-size: 1.3rem; color: var(--muted); line-height: 1; }
/* Chat panel header with an obvious collapse control. */
.chat-head-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--card-border); font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.chat-hide { background: none; border: 1px solid var(--card-border); border-radius: 7px; cursor: pointer; font-size: 0.78rem; padding: 3px 9px; color: var(--muted); font-weight: 600; }
.chat-hide:hover { border-color: var(--primary); color: var(--primary); }
.chat-toggle { background: none; border: 1px solid var(--card-border); border-radius: 7px; cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 3px 7px; color: var(--muted); white-space: nowrap; flex: none; }
.chat-toggle:hover { border-color: var(--primary); color: var(--primary); }
.chat-collapsed .chat-toggle { color: var(--primary); border-color: var(--primary); }
.chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.chat-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.msg { padding: 11px 14px; border-radius: 12px; max-width: 90%; font-size: 0.95rem; line-height: 1.45; }
.msg.bot { background: var(--bg-soft); border: 1px solid var(--card-border); align-self: flex-start; }
.msg.user { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; align-self: flex-end; }
.msg.msg-error { background: rgba(255, 92, 92, 0.12); border-color: rgba(255, 92, 92, 0.4); }
.examples { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.chip {
  text-align: left; background: rgba(124, 92, 255, 0.1); border: 1px solid var(--card-border);
  color: var(--text); padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 0.85rem; font-family: inherit;
}
.chip:hover { border-color: var(--primary); }
.chat-form { display: flex; gap: 8px; padding: 14px; border-top: 1px solid var(--card-border); }
.chat-form input {
  flex: 1; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--card-border);
  background: var(--bg-soft); color: var(--text); font-size: 0.95rem; font-family: inherit;
}
.chat-form input:focus { outline: none; border-color: var(--primary); }
.preview { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
/* nowrap keeps the whole action strip on the same row as the Tools button; the
   Site name field is the flexible element that shrinks when space is tight. */
.preview-bar { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--card-border); background: var(--bg-soft); flex-wrap: nowrap; }
.dots { display: none; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--card-border); }
/* Hidden by default (the "Live preview" label wasted a whole row); the business
   name still lives in the Site name field. */
.preview-title { display: none; }
/* The top action strip (style/scheduler/name/share/publish) sits inline to the
   right of the Tools button on the same row, never wrapping below it. */
.preview-actions { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; justify-content: flex-start; flex: 1 1 auto; min-width: 0; }
/* Site name is the flexible element that gives up width first so the row fits. */
#publish-name { flex: 1 1 80px; min-width: 64px; width: auto; }
.mini-input { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--card-border); background: var(--card); color: var(--text); font-size: 0.85rem; width: 120px; }
.sched-toggle { display: flex; align-items: center; gap: 5px; font-size: 0.82rem; color: var(--muted); white-space: nowrap; cursor: pointer; }
.sched-toggle input[type=checkbox] { accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer; }
/* AI Designer as an unambiguous On/Off switch. The visual is driven purely by
   the checkbox's :checked state, so it can never get out of sync or read
   inverted, and a literal "On/Off" word removes any doubt. */
.ai-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--muted); white-space: nowrap; padding: 5px 12px; border: 1px solid var(--card-border); border-radius: 999px; transition: border-color .15s; }
.ai-switch:hover { border-color: var(--primary); }
.ai-switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.ai-switch-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--card-border); transition: background .18s; flex: none; }
.ai-switch-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform .18s; }
.ai-switch-input:checked ~ .ai-switch-track { background: var(--primary); }
.ai-switch-input:checked ~ .ai-switch-track .ai-switch-knob { transform: translateX(16px); }
.ai-switch-input:focus-visible ~ .ai-switch-track { outline: 2px solid var(--primary); outline-offset: 2px; }
.ai-switch-state { font-weight: 700; min-width: 20px; }
.ai-switch-state::after { content: 'Off'; }
.ai-switch-input:checked ~ .ai-switch-text,
.ai-switch-input:checked ~ .ai-switch-state { color: var(--primary); }
.ai-switch-input:checked ~ .ai-switch-state::after { content: 'On'; }
.ai-switch.disabled { opacity: .5; cursor: not-allowed; }
.ai-switch.disabled .ai-switch-track { cursor: not-allowed; }

/* Bookings dashboard */
.filter-tabs { display: flex; gap: 6px; }
.filter-tab { background: var(--bg-soft); border: 1px solid var(--card-border); color: var(--muted); padding: 7px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.85rem; font-family: inherit; }
.filter-tab.active { background: var(--card); color: var(--text); border-color: var(--primary); }
.bookings-list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 30px; }
.booking-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 16px 18px; }
.bc-main { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.bc-main strong { font-size: 1.05rem; margin-right: 8px; }
.bc-when { color: var(--primary-2); font-weight: 600; font-size: 0.9rem; }
.bc-detail { font-size: 0.85rem; margin-top: 6px; }
.bc-notes { font-size: 0.85rem; margin-top: 8px; padding: 8px 12px; background: var(--bg-soft); border-radius: 8px; }
.bc-cal { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.bc-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.bk-status-new { background: rgba(18,182,240,0.14); color: #0e7490; }

/* Admin */
.admin-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.admin-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 14px 16px; flex-wrap: wrap; }
.admin-row strong { margin-right: 8px; }
.admin-actions { display: flex; gap: 8px; }
.design-bar { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--card-border); background: var(--bg-soft); flex-wrap: wrap; }
/* A single forced line break splits the design tools into two fixed rows:
   row 1 = Palette·Theme·Fonts·Upload logo·Chatbot, row 2 = format·AI hero·Build
   logo. The break sits right before the format bar. */
.design-bar .row-break { flex-basis: 100%; height: 0; margin: 0; padding: 0; }
.design-bar.designer-mode .row-break { display: none; }
/* Per-element formatting toolbar */
.fmt-bar { display: flex; align-items: center; gap: 8px; }
.fmt-bar .fmt-controls { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fmt-bar[data-empty="1"] .fmt-controls { opacity: 0.4; pointer-events: none; }
.fmt-bar[data-empty="1"] .fmt-hint { display: inline; }
.fmt-bar[data-empty="0"] .fmt-hint { display: none; }
.fmt-hint { font-size: 0.78rem; color: var(--muted); }
.fmt-bar.flash .fmt-hint { color: var(--primary); font-weight: 700; }
.fmt-btn { min-width: 30px; height: 30px; padding: 0 7px; border: 1px solid var(--card-border); background: var(--card); color: var(--text); border-radius: 8px; cursor: pointer; font-size: 0.85rem; font-family: inherit; line-height: 1; }
.fmt-btn:hover { border-color: var(--primary); }
.fmt-btn.on { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; border-color: transparent; }
.fmt-btn.fmt-sm { font-size: 0.72rem; } .fmt-btn.fmt-lg { font-size: 0.95rem; }
.fmt-color { display: inline-flex; width: 30px; height: 30px; border: 1px solid var(--card-border); border-radius: 8px; overflow: hidden; cursor: pointer; padding: 0; }
.fmt-color input { width: 140%; height: 140%; margin: -20%; border: 0; padding: 0; background: none; cursor: pointer; }
.fmt-sep { width: 1px; height: 20px; background: var(--card-border); margin: 0 2px; }
.fmt-font { height: 30px; border: 1px solid var(--card-border); border-radius: 8px; background: var(--card); color: var(--text); font-size: 0.8rem; font-family: inherit; padding: 0 6px; }
#embed-btn.on { border-color: var(--primary); color: var(--primary); font-weight: 700; }
.db-label { font-size: 0.8rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.db-palette { display: flex; align-items: center; gap: 8px; }
.db-theme { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.db-theme select { font-weight: 500; }
.palette-row { display: flex; gap: 4px; flex: 1; flex-wrap: nowrap; overflow-x: auto; }
.swatch { width: 28px; height: 20px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.08); cursor: pointer; padding: 0; transition: transform 0.1s; flex: none; }
.swatch:hover { transform: scale(1.12); }
.preview-frame { flex: 1; border: 0; background: #fff; width: 100%; }
.builder-result { padding: 12px 16px; border-top: 1px solid var(--card-border); font-size: 0.9rem; }
.builder-result a { color: var(--primary-2); }

/* Email templates page */
/* Templates page runs wider than the default 1080 column so three cards fit
   across on a roomy screen. Setting --maxw feeds both the max-width (via .page)
   and the centering formula above, so it stays centered. Drops to 2/1 narrower. */
.tpl-page { --maxw: 1420px; }
.tpl-page .page-head p { max-width: 720px; }
.tpl-toolbar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
/* Centered, wide cards so the full email body is readable without truncation. */
.tpl-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding-bottom: 30px; }
.tpl-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; flex: 1 1 400px; max-width: 448px; }
.tpl-name { font-weight: 700; font-size: 1.02rem; padding: 8px 10px; border: 1px solid var(--card-border); border-radius: 10px; background: var(--bg-soft); color: var(--text); font-family: inherit; }
.tpl-name:focus { outline: none; border-color: var(--primary); }
.tpl-card .tpl-body { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--card-border); background: var(--bg-soft); color: var(--text); font-family: inherit; font-size: 0.95rem; line-height: 1.5; resize: vertical; min-height: 240px; }
.tpl-card .tpl-body:focus { outline: none; border-color: var(--primary); }
.tpl-actions { display: flex; align-items: center; gap: 8px; }
.tpl-msg { margin-left: auto; }

/* Client preview share panel */
.share-panel { padding: 14px 16px; border-top: 1px solid var(--card-border); background: var(--bg-soft); }
.share-head { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; margin-bottom: 10px; }
.share-collapse { margin-left: auto; background: none; border: 0; cursor: pointer; font-size: 1rem; color: var(--muted); padding: 2px 6px; border-radius: 6px; line-height: 1; }
.share-collapse:hover { background: rgba(0,0,0,0.06); color: var(--text); }
/* Collapsed: keep just the header so the preview above gets the space back. */
.share-panel.collapsed { margin-bottom: 0; }
.share-panel.collapsed > :not(.share-head) { display: none; }
.share-panel.collapsed .share-head { margin-bottom: 0; }
.share-panel.collapsed .share-collapse { transform: rotate(-90deg); }
.share-ico { width: 30px; height: 30px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; border-radius: 9px; }
.share-linkrow { display: flex; gap: 8px; align-items: center; }
.share-linkrow input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--card-border); border-radius: 10px; background: var(--card); color: var(--text); font-size: 0.88rem; font-family: inherit; }
.share-note { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 9px 12px; border: 1px solid var(--card-border); border-radius: 10px; background: var(--card); color: var(--text); font-size: 0.88rem; font-family: inherit; resize: vertical; }
.share-note:focus { outline: none; border-color: var(--primary); }
.share-sendrow { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.share-sendrow input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--card-border); border-radius: 10px; background: var(--card); color: var(--text); font-size: 0.88rem; font-family: inherit; }
.share-sendrow input:focus { outline: none; border-color: var(--primary); }
.share-send-msg { font-size: 0.82rem; margin-top: 6px; min-height: 1em; }
.share-send-msg.ok { color: #16a34a; }
.share-send-msg.err { color: #dc2626; }
.share-status { margin: 10px 0 6px; }
.share-live { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.share-live.live-on { color: #16a34a; }
.share-domain { margin: 0 0 8px; padding: 8px 12px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 10px; font-size: 0.85rem; color: #047857; }
.share-comments { display: flex; flex-direction: column; gap: 8px; max-height: 180px; overflow-y: auto; }
.share-cmt { background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; padding: 8px 11px; }
.sc-who { font-weight: 700; font-size: 0.85rem; }
.sc-when { color: var(--muted); font-size: 0.72rem; margin-left: 6px; }
.sc-body { font-size: 0.88rem; margin-top: 3px; white-space: pre-wrap; word-break: break-word; }

/* Leads */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.filters .field-inline { flex: 1; min-width: 140px; }
.check { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.results-meta { color: var(--muted); margin-bottom: 12px; font-size: 0.9rem; }
.lf-controls { display: inline-flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 14px auto 4px; padding: 10px 18px; background: var(--card); border: 1px solid var(--card-border); border-radius: 999px; box-shadow: 0 6px 18px rgba(20,20,45,0.06); }
.lf-ctl-div { width: 1px; align-self: stretch; background: var(--card-border); }
.lf-ctl-toggle { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; cursor: pointer; user-select: none; }
.lf-ctl-toggle input { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.lf-ctl-rpp { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.lf-ctl-rpp select { padding: 6px 10px; border: 1px solid var(--card-border); border-radius: 8px; background: var(--bg-soft); color: var(--text); font-family: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.leads-table { display: flex; flex-direction: column; gap: 1px; background: var(--card-border); border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; }
.lead-row { display: grid; grid-template-columns: 1.9fr 1.1fr 1.1fr 1.1fr 0.85fr 0.85fr 1fr; gap: 10px; padding: 12px 16px; background: var(--card); align-items: center; font-size: 0.9rem; }
.rank-bar { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; flex-wrap: wrap; }
.rank-status { color: var(--muted); }
.lead-phone { white-space: nowrap; font-weight: 500; }
.lead-clock { background: rgba(18,182,240,0.12); color: #0e7490; }
/* Ad-market qualification panel (inserted under a lead row) */
.ad-panel { background: var(--bg-soft); border-left: 3px solid var(--primary); border-radius: 8px; padding: 10px 16px; font-size: 0.85rem; display: flex; flex-direction: column; gap: 5px; }
.ad-line { line-height: 1.4; }
.ad-flag { font-weight: 700; }
.ad-flag.ad-yes { color: #15803d; }
.ad-flag.ad-no { color: var(--muted); }
.ad-mkt { color: #b45309; font-weight: 600; }
.ad-cpc { color: #15803d; font-weight: 600; }
.ad-cpc strong { color: #0f5132; }
.ad-err { color: var(--accent); }
.ad-note { color: var(--muted); font-size: 0.78rem; font-style: italic; }
/* Close-on-the-call toolkit panel */
.close-panel { border-left-color: #22c55e; gap: 8px; }
.ck-sec { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ck-sec strong { min-width: 92px; }
.ck-dom-item { display: inline-block; padding: 2px 9px; border: 1px solid #22c55e; color: #15803d; border-radius: 999px; font-weight: 600; margin: 0 4px 4px 0; }
.ck-dom-item:hover { background: rgba(34,197,94,0.1); }
.ck-pay .ck-pay-out { font-size: 0.82rem; word-break: break-all; }
.lead-head { background: var(--bg-soft); color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.lead-name { font-weight: 600; }
.lead-maps { display: inline-block; margin-top: 3px; font-size: 0.78rem; font-weight: 500; color: var(--primary-2); }
.lead-open { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.lead-open.is-open { color: #15803d; background: rgba(22, 163, 74, 0.12); }
.lead-open.is-closed { color: #b91c1c; background: rgba(220, 38, 38, 0.10); }
.lead-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.lead-actions .btn { text-align: center; }

/* Builder: build-from-listing bar */
.from-listing { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; padding: 16px 20px; }
.from-listing .fl-label { font-weight: 600; white-space: nowrap; }
.fl-existing { color: var(--primary-2); font-weight: 600; font-size: 0.85rem; white-space: nowrap; margin-left: auto; }
.fl-existing:hover { color: var(--primary); }
.fl-existing + .fl-existing { margin-left: 14px; }
.fl-mysites { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
/* My sites modal list */
.my-sites-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.my-site-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--card-border); border-radius: 10px; }
.my-site-row .ms-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.my-site-row .ms-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-site-row .ms-actions { display: flex; gap: 8px; flex: none; }
.ms-draft { display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; color: #b45309; background: #fef3c7; border: 1px solid #fde68a; border-radius: 999px; padding: 1px 8px; }
.from-listing input[type=text] {
  flex: 1; min-width: 200px; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--card-border); background: var(--bg-soft); color: var(--text); font-size: 0.95rem; font-family: inherit;
}
.from-listing input[type=text]:focus { outline: none; border-color: var(--primary); }
.from-listing .sched-toggle input[type=checkbox] { flex: none; }
.hot { background: var(--accent); color: #fff; font-style: normal; font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }
.no-site { color: var(--accent); font-weight: 600; }
.lead-row a:not(.btn) { color: var(--primary-2); }
.lead-row a.btn-primary, .saved-card a.btn-primary { color: #fff; }
.btn-link { background: none; border: 0; color: var(--primary-2); cursor: pointer; font-size: 0.78rem; padding: 2px 0; font-family: inherit; }
.btn-link:hover { text-decoration: underline; }
.lead-email { font-size: 0.82rem; }
.email-found { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Saved leads */
.saved-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 30px; }
.saved-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 14px 16px; }
.sc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sc-title strong { font-size: 1rem; }
.sc-contact { font-size: 0.85rem; margin-top: 6px; }
.sc-contact a { color: var(--primary-2); }
.sc-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }

/* Modal (compose email) */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: grid; place-items: center; z-index: 100; padding: 20px; }
.modal { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 22px; width: 100%; max-width: 540px; max-height: 90vh; overflow: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.modal-head h3 { margin: 0; }
.modal-x { background: none; border: 0; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.modal .field input, .modal .field textarea {
  width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--card-border);
  background: var(--bg-soft); color: var(--text); font-family: inherit; font-size: 0.95rem; resize: vertical;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.error-inline { background: rgba(245,158,11,0.14); color: #92400e; padding: 8px 12px; border-radius: 8px; font-size: 0.85rem; }
.error-inline code { background: rgba(0,0,0,0.06); }
.success-inline { background: rgba(46,204,113,0.12); color: #16a34a; border: 1px solid rgba(46,204,113,0.35); padding: 10px 12px; border-radius: 8px; font-size: 0.88rem; margin-top: 12px; }

/* Calendar Connect panel */
.cal-connect { border: 1px solid var(--border, #e5e7eb); border-radius: 14px; padding: 18px 20px; margin: 16px 0 24px; background: var(--card, #fff); }
.cal-connect-body { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cal-connect h2 { margin: 0 0 4px; font-size: 1.1rem; }
.cal-connect-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cal-conn { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; background: rgba(0,0,0,0.03); padding: 6px 10px; border-radius: 999px; }
.cal-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* CRM (pipeline) — a single editable list instead of a kanban board */
.crm-page { --maxw: 1360px; }
.add-card { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.add-card .field-inline { flex: 1; min-width: 140px; }
.crm-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.crm-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.crm-chip { background: var(--bg-soft); border: 1px solid var(--card-border); color: var(--muted); padding: 6px 12px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 0.82rem; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; }
.crm-chip:hover { border-color: var(--primary); color: var(--text); }
.crm-chip.active { background: var(--card); color: var(--primary); border-color: var(--primary); }
.crm-chip-n { background: rgba(0,0,0,0.06); color: inherit; border-radius: 999px; padding: 0 7px; font-size: 0.72rem; }
.crm-summary { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); }
.crm-summary strong { color: var(--text); }
.crm-due { color: var(--accent); font-weight: 700; }

.crm-list { display: flex; flex-direction: column; gap: 1px; background: var(--card-border); border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; }
.crm-item { background: var(--card); }
.crm-row { display: grid; grid-template-columns: 64px 1.7fr 1.2fr 118px 86px 150px 30px; gap: 8px; align-items: center; padding: 8px 12px; cursor: pointer; }
.crm-head { background: var(--bg-soft); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; }
.crm-head span { padding: 0 4px; }
.crm-first { display: flex; align-items: center; gap: 4px; }
.crm-exp { background: var(--bg-soft); border: 1px solid var(--card-border); color: var(--primary); cursor: pointer; font-size: 1.25rem; font-weight: 800; width: 26px; height: 34px; display: grid; place-items: center; padding: 0; border-radius: 8px; line-height: 1; }
.crm-exp:hover { color: #fff; background: var(--primary); border-color: var(--primary); }
/* Hot-lead flag: dim/hollow by default, solid green when a lead is flagged hot. */
.crm-flag { background: transparent; border: 1px solid var(--card-border); color: var(--muted); cursor: pointer; font-size: 0.95rem; width: 26px; height: 34px; display: grid; place-items: center; padding: 0; border-radius: 8px; line-height: 1; opacity: 0.55; transition: all 0.12s ease; }
.crm-flag:hover { opacity: 1; border-color: #16a34a; color: #16a34a; }
.crm-flag.on { background: #16a34a; border-color: #16a34a; color: #fff; opacity: 1; box-shadow: 0 0 0 2px rgba(22,163,74,0.18); }
/* Detail drawer */
.crm-detail { padding: 10px 14px 14px 46px; border-top: 1px dashed var(--card-border); display: flex; flex-direction: column; gap: 10px; font-size: 0.85rem; }
.cd-grid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 10px; }
.cd-f { display: flex; flex-direction: column; gap: 3px; }
.cd-f > span { font-size: 0.72rem; color: var(--muted); font-weight: 600; }
.cd-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cd-lbl { font-weight: 600; color: var(--muted); white-space: nowrap; }
.cd-quick { background: var(--bg-soft); border: 1px solid var(--card-border); color: var(--text); border-radius: 999px; padding: 4px 12px; font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.cd-quick:hover { border-color: var(--primary); color: var(--primary); }
.cd-when { color: var(--muted); font-size: 0.8rem; }
.cd-send .cd-link { flex: 1; min-width: 160px; }
.cd-site { width: auto; max-width: 170px; }
.cd-pay-out { font-size: 0.82rem; word-break: break-all; }
.cd-publish .cd-own { flex: 1; min-width: 150px; }
.cd-pub-out, .cd-int-out { width: 100%; font-size: 0.82rem; word-break: break-all; }
.cd-details { border: 1px solid var(--card-border); border-radius: 8px; padding: 2px 10px; background: var(--bg-soft); }
.cd-details summary { cursor: pointer; font-weight: 600; color: var(--muted); padding: 6px 0; font-size: 0.82rem; }
.cd-details-txt { background: var(--card); margin-bottom: 8px; }
.cd-notes-wrap { display: flex; flex-direction: column; gap: 4px; }
.cd-notes-wrap > span { font-size: 0.78rem; color: var(--text); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.cd-note-hint { font-style: normal; font-size: 0.68rem; font-weight: 500; color: var(--muted); }
.cd-note-status { font-style: normal; font-size: 0.68rem; font-weight: 600; color: var(--muted); margin-left: auto; }
.cd-note-status.ok { color: #16a34a; }
.crm-empty { background: var(--card); padding: 22px 16px; text-align: center; }
.crm-in { padding: 7px 9px; border: 1px solid transparent; border-radius: 8px; background: var(--bg-soft); color: var(--text); font-size: 0.85rem; font-family: inherit; width: 100%; box-sizing: border-box; }
.crm-in:hover { border-color: var(--card-border); }
.crm-in:focus { outline: none; border-color: var(--primary); background: var(--card); }
.crm-in.crm-saved { border-color: var(--ok, #22c55e); background: rgba(34,197,94,0.08); }
/* Notes: a compact textarea that grows with its content (and drags taller). */
.crm-notes { resize: vertical; overflow-y: auto; line-height: 1.45; min-height: 34px; max-height: 200px; white-space: pre-wrap; display: block; }
.crm-date.crm-overdue { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.crm-del { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 4px; border-radius: 6px; }
.crm-del:hover { color: var(--err, #ef4444); background: rgba(239,68,68,0.08); }
/* Stage picker: a coloured pill whose tint reflects the stage. */
.crm-stage { appearance: none; -webkit-appearance: none; border: 1px solid transparent; border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 0.78rem; font-family: inherit; cursor: pointer; width: 100%; text-align: center; text-align-last: center; }
.crm-stage:focus { outline: none; box-shadow: 0 0 0 2px rgba(106,92,255,0.35); }
.crm-stage.st-lead { background: #eef2f7; color: #475569; }
.crm-stage.st-contacted { background: rgba(18,182,240,0.16); color: #0e7490; }
.crm-stage.st-proposal { background: rgba(245,158,11,0.18); color: #b45309; }
.crm-stage.st-won { background: rgba(34,197,94,0.18); color: #15803d; }
.crm-stage.st-lost { background: rgba(148,163,184,0.22); color: #64748b; }
@media (max-width: 820px) {
  /* Tight: chevron · Business · Stage · Call-back · delete (Contact + Value live
     in the drawer alongside everything else). */
  .crm-row { grid-template-columns: 64px 1.6fr 116px 140px 30px; }
  .crm-row > :nth-child(3), .crm-row > :nth-child(5) { display: none; }
  .cd-grid { grid-template-columns: 1fr; }
}

/* Invoices */
.invoice-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: start; padding-bottom: 30px; }
.invoice-editor h3 { margin-bottom: 16px; }
.invoice-editor .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.items { margin: 6px 0 14px; }
.item-row { display: grid; grid-template-columns: 1fr 70px 90px 28px; gap: 8px; align-items: center; margin-bottom: 8px; }
.item-row input { padding: 9px 10px; border-radius: 8px; border: 1px solid var(--card-border); background: var(--bg-soft); color: var(--text); font-family: inherit; width: 100%; }
.item-row input:focus { outline: none; border-color: var(--primary); }
.item-head { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.invoice-total-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid var(--card-border); margin: 10px 0; font-size: 1.1rem; }
.invoice-total-row strong { font-size: 1.4rem; }
.inv-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.inv-top { display: flex; justify-content: space-between; align-items: flex-start; }
.inv-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.small { font-size: 0.82rem; }
.status { font-size: 0.72rem; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; font-weight: 700; letter-spacing: 0.03em; }
.status.unpaid { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.status.paid { background: rgba(22, 163, 74, 0.15); color: #15803d; }

/* Printable invoice */
.print-area { display: none; }
.invoice-doc { color: #111; background: #fff; max-width: 700px; margin: 0 auto; padding: 40px; font-family: Georgia, serif; }
.invoice-doc .doc-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #111; padding-bottom: 14px; }
.invoice-doc h2 { font-size: 2rem; letter-spacing: 0.1em; }
.doc-status { font-weight: 700; letter-spacing: 0.05em; padding: 4px 12px; border: 2px solid #111; border-radius: 6px; }
.doc-status.paid { color: #128a4c; border-color: #128a4c; }
.doc-parties { display: flex; gap: 30px; margin: 22px 0; }
.doc-parties .muted { color: #777; }
.doc-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.doc-table th, .doc-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #ddd; }
.doc-table th:not(:first-child), .doc-table td:not(:first-child) { text-align: right; }
.doc-table tfoot td { font-weight: 700; font-size: 1.1rem; border-top: 2px solid #111; border-bottom: 0; }
.doc-notes { margin-top: 18px; }
.doc-foot { margin-top: 30px; color: #777; }

@media print {
  body.printing > *:not(.print-area) { display: none !important; }
  body.printing .print-area { display: block !important; }
}

/* Pricing extras */
.price-grid.wide { max-width: 980px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.price .muted { margin-bottom: 14px; }
.faq { padding: 50px 0; }
.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.faq-grid h4 { margin-bottom: 6px; }
.faq-grid p { margin: 0; }

/* Tutorials */
.tut-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; padding-bottom: 30px; }
.tut { position: relative; }
.tut-num { font-size: 0.8rem; font-weight: 800; color: var(--primary-2); letter-spacing: 0.1em; }
.tut h3 { margin: 4px 0 8px; }
.tut ol { margin: 12px 0 0; padding-left: 20px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.tut a { color: var(--primary-2); }

@media (max-width: 860px) {
  .builder-grid { grid-template-columns: 1fr; height: auto; }
  .preview-frame { height: 480px; }
  .invoice-layout { grid-template-columns: 1fr; }
  .board { grid-template-columns: 1fr 1fr; }
  .lead-row { grid-template-columns: 1.6fr 1fr 1fr; }
  /* Small screens: keep Business, Location, Phone; hide Category, Rating, Website. */
  .lead-row > span:nth-child(2), .lead-row > span:nth-child(5), .lead-row > span:nth-child(6) { display: none; }
}
/* Auth */
.nav-user { color: var(--text); font-weight: 600; font-size: 0.9rem; }
.auth-wrap { min-height: 70vh; display: grid; place-items: center; padding: 40px 24px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-brand { display: flex; justify-content: center; font-size: 1.4rem; margin-bottom: 20px; }
.dns-verify { margin-top: 10px; border-top: 1px solid var(--card-border); padding-top: 10px; }
.dns-verify summary { cursor: pointer; color: var(--primary-2); font-weight: 600; }
.dns-verify .vtxt-lbl { display: block; margin: 10px 0 4px; color: var(--muted); }
.dns-verify .vtxt-lbl input { display: block; width: 100%; margin-top: 4px; }
.dns-verify code { background: var(--bg-soft); padding: 1px 5px; border-radius: 4px; }

.auth-title { text-align: center; font-size: 1.5rem; font-weight: 700; color: var(--text); margin: 0 0 22px; }
.auth-tabs { display: flex; gap: 6px; background: var(--bg-soft); border: 1px solid var(--card-border); border-radius: 10px; padding: 4px; margin-bottom: 22px; }
.auth-tab { flex: 1; background: transparent; border: 0; color: var(--muted); padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600; font-family: inherit; }
.auth-tab.active { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(20,20,45,0.12); }
.auth-foot { margin-top: 18px; }
.auth-foot a { color: var(--primary-2); }

.source-badge { display: inline-block; background: rgba(18,182,240,0.14); color: #0e7490; padding: 2px 9px; border-radius: 999px; font-size: 0.78rem; margin-left: 6px; }

/* Slide-out Search settings drawer */
.drawer-overlay { position: fixed; inset: 0; background: rgba(20,20,45,0.35); opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 90; }
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 360px; max-width: 90vw; background: #fff; border-left: 1px solid var(--card-border); box-shadow: -12px 0 40px rgba(20,20,45,0.12); transform: translateX(100%); transition: transform 0.25s ease; z-index: 95; overflow-y: auto; }
.drawer.open { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--card-border); }
.drawer-head h3 { margin: 0; }
.drawer-x { background: none; border: 0; font-size: 1.1rem; color: var(--muted); cursor: pointer; }
.drawer-body { padding: 20px; }
.ds-group { padding: 16px 0; border-bottom: 1px solid var(--card-border); }
.ds-group:last-child { border-bottom: 0; }
.ds-label { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 0.9rem; margin-bottom: 12px; }
.ds-val { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; border-radius: 999px; padding: 2px 12px; font-size: 0.85rem; }
.ds-group input[type=range] { width: 100%; accent-color: var(--primary); }
.ds-hint { color: var(--muted); font-size: 0.8rem; margin: 10px 0 0; background: var(--bg-soft); padding: 10px 12px; border-radius: 10px; }
.seg { display: flex; background: var(--bg-soft); border: 1px solid var(--card-border); border-radius: 10px; padding: 4px; gap: 4px; }
.seg-btn { flex: 1; background: transparent; border: 0; padding: 9px; border-radius: 8px; cursor: pointer; font-weight: 600; color: var(--muted); font-family: inherit; }
.seg-btn.active { background: #fff; color: var(--text); box-shadow: var(--shadow-sm); }
.ds-toggle { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-weight: 600; font-size: 0.92rem; }
.ds-toggle input { width: 42px; height: 24px; accent-color: var(--primary); }
.ds-action { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; background: var(--bg-soft); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px 14px; margin-top: 10px; cursor: pointer; font-weight: 600; font-family: inherit; color: var(--text); }
.ds-action:hover { border-color: var(--primary); }
.ds-action small { font-weight: 500; color: var(--muted); margin-top: 2px; }
.ds-section { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 14px; }
.ds-sub { color: var(--muted); font-size: 0.8rem; margin: -6px 0 10px; }
.ds-ticks { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.72rem; margin-top: 4px; }
.ds-toggle span { display: flex; flex-direction: column; }
.ds-toggle small { font-weight: 500; color: var(--muted); font-size: 0.78rem; margin-top: 2px; }
.seg-btn { display: flex; flex-direction: column; line-height: 1.25; }
.seg-btn small { font-weight: 500; font-size: 0.72rem; opacity: 0.8; }
/* Dense table */
.leads-table.dense .lead-row { padding: 7px 16px; font-size: 0.82rem; }

/* --- Lead Finder (centered, sitedrop-style) ------------------------------- */
/* The fixed sidebar offsets main by 236px; let the page fill the remaining
   space and center each block within it so the hero sits centered, not pinned. */
/* Lead Finder spans the full viewport so its content can center in the SCREEN
   (not just the space beside the sidebar), while never sliding under the fixed
   sidebar on narrower windows. */
.has-sidebar main.lead-finder { margin-left: 0; }
.lead-finder { max-width: none; margin-right: 0; }
.lead-finder > * { max-width: 1000px; margin-left: max(236px, calc((100% - 1000px) / 2)); margin-right: auto; }
.lf-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; flex-wrap: wrap; gap: 10px; }
.lf-crumb { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.lf-crumb span { opacity: 0.5; margin: 0 6px; }
.lf-topbar-actions { display: flex; gap: 8px; }
.lf-hero { text-align: center; padding: 8px 0 6px; }
.lf-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--card-border); border-radius: 999px; padding: 5px 14px 5px 6px; font-size: 0.82rem; font-weight: 700; color: var(--muted); box-shadow: var(--shadow-sm); margin-bottom: 22px; }
.lf-badge i { font-style: normal; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; border-radius: 999px; padding: 2px 9px; font-size: 0.72rem; letter-spacing: 0.04em; }
.lf-hero h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 16px; }
.lf-hero h1 .grad { background: linear-gradient(135deg, var(--primary), var(--primary-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lf-sub { color: var(--muted); font-size: 1.1rem; max-width: 620px; margin: 0 auto 30px; }
.lf-search { display: flex; gap: 12px; background: var(--card); border: 1px solid var(--card-border); border-radius: 20px; padding: 14px; box-shadow: 0 18px 50px rgba(20,20,45,0.08); align-items: stretch; text-align: left; }
.lf-field { flex: 1; display: flex; align-items: center; gap: 12px; background: var(--bg-soft); border: 1px solid transparent; border-radius: 14px; padding: 12px 16px; cursor: text; transition: border-color 0.15s; }
.lf-field:focus-within { border-color: var(--primary); background: var(--card); }
.lf-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: rgba(106,92,255,0.1); border-radius: 11px; font-size: 1.15rem; }
.lf-field-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lf-field-body small { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.lf-field-body input { border: 0; background: transparent; font-size: 1rem; font-family: inherit; color: var(--text); padding: 2px 0 0; width: 100%; }
.lf-field-body input:focus { outline: none; }
.lf-go { flex: none; border-radius: 14px; padding: 0 26px; font-size: 1rem; white-space: nowrap; }
.lf-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; }
.lf-chips-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); margin-right: 4px; }
.lf-chip { background: var(--card); border: 1px solid var(--card-border); border-radius: 999px; padding: 7px 15px; font-size: 0.86rem; font-weight: 600; color: var(--text); cursor: pointer; font-family: inherit; transition: all 0.15s; }
.lf-chip:hover { border-color: var(--primary); color: var(--primary); }
.lf-tip { display: flex; align-items: flex-start; gap: 14px; background: rgba(106,92,255,0.06); border: 1px solid rgba(106,92,255,0.18); border-radius: 16px; padding: 16px 18px; margin: 30px auto 8px; }
.lf-tip-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; background: rgba(106,92,255,0.12); border-radius: 10px; font-size: 1.1rem; }
.lf-tip p { margin: 0; color: var(--text); font-size: 0.92rem; line-height: 1.55; }
.lf-tip-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 0.95rem; margin-left: auto; flex: none; }
.lf-empty { text-align: center; padding: 40px 0 20px; }
.lf-empty-plus { width: 62px; height: 62px; margin: 0 auto 20px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; border-radius: 16px; font-size: 1.8rem; box-shadow: 0 12px 30px rgba(106,92,255,0.3); }
.lf-empty h2 { font-size: 1.5rem; margin: 0 0 8px; }
.lf-empty p { color: var(--muted); max-width: 520px; margin: 0 auto 26px; }
.lf-starters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; max-width: 780px; margin: 0 auto; }
.lf-starter { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 14px 16px; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.lf-starter:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.lf-starter-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--bg-soft); border-radius: 11px; font-size: 1.2rem; }
.lf-starter > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; }
.lf-starter strong { font-size: 0.95rem; }
.lf-starter small { color: var(--muted); font-size: 0.8rem; }
.lf-starter-go { color: var(--muted); font-size: 1.3rem; }
@media (max-width: 700px) { .lf-search { flex-direction: column; } .lf-go { padding: 14px; } }

/* Domains */
.domains-list { display: flex; flex-direction: column; gap: 14px; padding-bottom: 30px; }
.domain-card { padding: 18px 20px; }
.domain-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.domain-name { font-size: 1.1rem; margin-right: 8px; }
.domain-actions { display: flex; gap: 8px; }
.dns-steps { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--card-border); }
.dns-steps p { margin: 0 0 8px; }
.dns-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.dns-k { display: inline-block; width: 90px; color: var(--muted); font-size: 0.85rem; }
.dns-row code { background: var(--bg-soft); padding: 4px 10px; border-radius: 6px; word-break: break-all; }

@media (max-width: 640px) {
  .nav-links a:not(.btn):not(.nav-call) { display: none; }
  .nav-call { font-size: 0.85rem; }
  .board { grid-template-columns: 1fr; }
}

/* Batch build: select bar (bottom center) + progress panel (bottom right) */
.lead-pick { vertical-align: middle; margin-right: 4px; cursor: pointer; accent-color: var(--primary); }
.batch-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--card-border);
  box-shadow: 0 16px 40px -12px rgba(20,20,45,.4); border-radius: 999px; padding: 8px 10px 8px 18px; }
.batch-bar .batch-count { font-size: .85rem; font-weight: 600; color: var(--text); }
.batch-panel { position: fixed; right: 20px; bottom: 20px; z-index: 61; width: 340px; max-width: calc(100vw - 40px);
  max-height: 60vh; overflow: auto; background: var(--card); border: 1px solid var(--card-border);
  border-radius: 14px; box-shadow: 0 20px 50px -12px rgba(20,20,45,.45); font-size: .88rem; }
.batch-panel .bp-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--card-border);
  position: sticky; top: 0; background: var(--card); }
.batch-panel .bp-head strong { flex: 1; }
.batch-panel .bp-x { background: none; border: 0; cursor: pointer; font-size: 1rem; color: var(--muted); }
.batch-panel .bp-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--bg-soft); }
.batch-panel .bp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-panel .bp-foot { padding: 11px 14px; font-size: .82rem; }

/* "All photos" panel — thumbnails of every image on the page, each with its own
   swap buttons, so a photo buried far down a long preview can be replaced
   directly instead of hunted for and clicked. */
.sd-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; max-height: 60vh; overflow-y: auto; }
.sd-photo-cell { border: 1px solid var(--line, #e5e7eb); border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.sd-photo-cell img { width: 100%; height: 104px; object-fit: cover; display: block; background: #f3f4f6; }
.sd-photo-acts { display: flex; gap: 6px; padding: 8px; }
.sd-photo-acts .btn { flex: 1; padding: 6px 4px; font-size: 0.72rem; }
.sd-photo-cell.is-working { opacity: .55; }
.sd-photo-cell.is-working img { filter: grayscale(1); }
.sd-photo-cell.is-changed { outline: 3px solid #16a34a; outline-offset: -1px; }
.sd-photo-cell.is-changed::after { content: '✓ replaced'; display: block; text-align: center; font-size: .68rem; font-weight: 700; color: #16a34a; padding: 0 0 6px; }

/* Toolbar dropdowns — the design bar had grown to ~15 always-visible buttons and
   wrapped onto four rows, pushing the live preview off screen. Related tools now
   live behind a summary chip and only take space while open. */
.db-menu { position: relative; }
.db-menu > summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; }
.db-menu > summary::-webkit-details-marker { display: none; }
.db-menu[open] > summary { background: var(--card-border, #e5e7eb); }
.db-menu-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-width: 240px; max-width: 420px; padding: 10px;
  background: var(--card, #fff); border: 1px solid var(--card-border, #e5e7eb);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.16);
}
.db-menu-pop .db-palette, .db-menu-pop .db-theme { display: flex; align-items: center; gap: 6px; }
/* The format controls are only usable once text is selected — keep the row out of
   the way until then instead of showing a disabled strip. */
.fmt-bar[data-empty="1"] { display: none; }
/* Bulk photo actions — swap a whole group when a client dislikes the set. */
.sd-photo-bulk { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.sd-photo-cell { position: relative; }
.sd-photo-tag { position: absolute; top: 6px; left: 6px; background: rgba(15,17,21,.82); color: #fff;
  font-size: .62rem; font-weight: 800; letter-spacing: .06em; padding: 3px 7px; border-radius: 99px; }

/* Saved-lead call triage: a quick note + a voicemail tick per card, so a list
   can be worked through without promoting every business into the pipeline. */
.sc-triage { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--card-border, #e5e7eb); }
.sc-vm { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; white-space: nowrap; cursor: pointer; }
.sc-note { flex: 1; min-width: 200px; padding: 7px 10px; border: 1px solid var(--card-border, #e5e7eb); border-radius: 8px; font: inherit; font-size: 0.85rem; }
.sc-note-state { font-size: 0.72rem; color: var(--muted, #6b7280); min-width: 60px; }
.sc-note-state.ok { color: #16a34a; font-weight: 600; }
.sc-note-state.err { color: #dc2626; font-weight: 600; }
/* Position number on a lead — so a cold-calling session can be resumed. */
.sc-num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px;
  padding: 0 6px; border-radius: 6px; background: var(--bg-soft, #eef0f4); color: var(--muted, #6b7280);
  font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 2px; }
/* Hero slideshow scenes listed separately — they live inside one hero element,
   so the generic photo scan can only offer "the hero" as a single image. */
.sd-scene-block { border: 1px solid var(--card-border, #e5e7eb); border-radius: 12px; padding: 12px; margin-bottom: 14px; background: var(--bg-soft, #f8f9fb); }
.sd-scene-title { display: block; font-size: 0.9rem; }