/* ── Theme variables ─────────────────────────────────────────────────────── */

:root,
[data-theme="dark"] {
  --bg-base:      #09090b;
  --bg-card:      #18181b;
  --bg-input:     #0f0f11;
  --bg-hover:     #1f1f23;
  --border:       #2e2e34;
  --border-soft:  #1f1f23;
  --text-1:       #fafafa;
  --text-2:       #a1a1aa;
  --text-3:       #80808a;
  --accent:       #3b82f6;
  --accent-hover: #2563eb;
  --accent-dim:   rgba(59,130,246,0.12);
  --green:        #4ade80;
  --green-dim:    rgba(74,222,128,0.1);
  --blue:         #60a5fa;
  --blue-dim:     rgba(96,165,250,0.1);
  --red:          #f87171;
  --red-dim:      rgba(248,113,113,0.1);
  --amber:        #fbbf24;
  --amber-dim:    rgba(251,191,36,0.1);
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.6);
  --sidebar-w:    248px;
  --sidebar-w-collapsed: 70px;
}

[data-theme="light"] {
  --bg-base:      #f4f4f5;
  --bg-card:      #ffffff;
  --bg-input:     #f9f9fb;
  --bg-hover:     #f4f4f5;
  --border:       #e4e4e7;
  --border-soft:  #f4f4f5;
  --text-1:       #09090b;
  --text-2:       #52525b;
  --text-3:       #71717a;
  --accent:       #2563eb;
  --accent-hover: #1d4ed8;
  --accent-dim:   rgba(37,99,235,0.08);
  --green:        #16a34a;
  --green-dim:    rgba(22,163,74,0.08);
  --blue:         #2563eb;
  --blue-dim:     rgba(37,99,235,0.08);
  --red:          #dc2626;
  --red-dim:      rgba(220,38,38,0.08);
  --amber:        #d97706;
  --amber-dim:    rgba(217,119,6,0.08);
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.1);
}

/* Light-mode contrast overrides for brand-colored chips/badges that hardcode
   their dark-theme color (no theme variable exists for pink/purple). */
[data-theme="light"] .chip-Instagram,
[data-theme="light"] .chan-btn.active-Instagram { color: #c026a8; }
[data-theme="light"] .cc-badge-video { color: #7c3aed; }

/* ── Reset ───────────────────────────────────────────────────────────────── */

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  background: var(--bg-base);
  color: var(--text-1);
  min-height: 100vh;
  display: flex;
  transition: background 0.2s, color 0.2s;
  -webkit-font-smoothing: antialiased;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 200;
  transition: width 0.22s ease;
  overflow: visible;
}

/* Collapsed icon-rail */
body.nav-collapsed .sidebar { width: var(--sidebar-w-collapsed); }

.sidebar-header {
  padding: 16px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body.nav-collapsed .sidebar-header {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
}
body.nav-collapsed .sidebar-header .nav-toggle { align-self: center; }

.nav-toggle {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 5px;
  border-radius: 7px;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.nav-toggle:hover { color: var(--text-1); background: var(--bg-hover); }
.nav-toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
body.nav-collapsed .nav-toggle svg { transform: rotate(180deg); }

.sidebar-brand {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.nav-collapsed .sidebar-brand { display: none; }

.sidebar-nav {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
  /* Hide the visible scrollbar but keep mouse-wheel / trackpad scrolling — same
     pattern as kie.ai. The nav stays scrollable; the user just doesn't see a bar. */
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;          /* IE / old Edge */
}
.sidebar-nav::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Chrome / Safari */

/* Brand: 📊 + "Dashboardy" logo lockup, matches marketing.html. An <a> linking
   to the public welcome page. */
a.sidebar-brand {
  text-decoration: none;
  transition: color 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.02em;
}
a.sidebar-brand:hover { color: var(--accent); }
a.sidebar-brand .brand-dot { font-size: 20px; line-height: 1; }
a.sidebar-brand .brand-text { font-size: 18px; font-weight: 800; }

/* Home page: hide the page-head title row so "Welcome back" sits at the top.
   The .page-head element still has to exist (for the mobile hamburger anchor),
   so we zero its size + margin rather than removing it. */
body[data-page="home"] .home-page-head {
  min-height: 0;
  margin-bottom: 0;
  padding: 0;
}
body[data-page="home"] .home-hero { padding-top: 12px; }
@media (max-width: 640px) {
  /* On mobile we still need a little headroom so the hamburger button (which
     gets injected into .page-head) doesn't visually overlap the hero text. */
  body[data-page="home"] .home-page-head { min-height: 44px; margin-bottom: 6px; }
  body[data-page="home"] .home-hero { padding-top: 4px; }
}

.nav-section-label {
  display: flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  padding: 15px 16px 5px;
}

/* "+" button inside the Dashboards section label */
.nav-new-dash-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.nav-new-dash-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.nav-new-dash-btn:hover { color: var(--accent); background: var(--accent-dim); }
body.nav-collapsed .nav-new-dash-btn { display: none; }

/* Rename / Delete buttons on each dashboard link */
.nav-dash-actions {
  margin-left: auto;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
  transition: opacity 0.12s;
}
.nav-link-dash:hover .nav-dash-actions {
  opacity: 1;
  pointer-events: auto;
}
.nav-dash-btn {
  background: none;
  border: none;
  color: var(--text-3);  /* always neutral — never inherits active accent */
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.nav-dash-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-dash-btn:hover { color: var(--text-1); background: var(--bg-hover); }
.nav-dash-delete:hover { color: var(--red); background: rgba(248,113,113,0.1); }
/* Active dashboard link — keep buttons neutral, never inherit accent */
.nav-link-dash.active .nav-dash-btn { color: var(--text-3); }
body.nav-collapsed .nav-dash-actions { display: none; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  border-radius: 0;
  font-family: inherit;
}

.nav-link:hover { background: var(--bg-hover); color: var(--text-1); }
.nav-link.active {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 600;
  border-right: 2px solid var(--accent);
}

.nav-link .icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-link .icon svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-link .badge-soon {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  background: var(--bg-input);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ── Collapsed icon-rail state ─────────────────────────────────────────────── */

body.nav-collapsed .sidebar-logo-text { display: none; }
body.nav-collapsed .nav-text          { display: none; }
body.nav-collapsed .nav-link .badge-soon { display: none; }

body.nav-collapsed .nav-link {
  justify-content: center;
  padding: 11px 0;
  gap: 0;
}
body.nav-collapsed .nav-link .icon svg { width: 23px; height: 23px; }
body.nav-collapsed .nav-link.active { border-right: none; }

/* Section labels become thin dividers when collapsed */
body.nav-collapsed .nav-section-label {
  font-size: 0;
  padding: 0;
  height: 1px;
  margin: 8px 16px;
  background: var(--border);
  overflow: hidden;
}

body.nav-collapsed .theme-switcher,
body.nav-collapsed .custom-colors { display: none; }

/* Floating tooltip for the collapsed icon rail (appended to <body> in nav.js
   so the sidebar's scroll container can't clip it). */
.nav-tooltip {
  position: fixed;
  transform: translateY(-50%);
  background: var(--bg-card);
  color: var(--text-1);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  opacity: 0;
  z-index: 1000;
  transition: opacity 0.12s ease;
}
.nav-tooltip.show { opacity: 1; }

/* ── Collapsible nav group (e.g. Create Content) ─────────────────────────── */
.nav-group-items {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease;
}
.nav-group.open .nav-group-items { max-height: 240px; }

.nav-sub {
  padding: 7px 16px 7px 52px;
  font-size: 13px;
}

.nav-chevron {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  opacity: 0.55;
  transition: transform 0.2s;
}
.nav-chevron svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-group.open .nav-chevron { transform: rotate(180deg); opacity: 0.9; }

body.nav-collapsed .nav-group-items { max-height: 0 !important; }
body.nav-collapsed .nav-chevron     { display: none; }
body.nav-collapsed .nav-sub         { display: none; }

body.nav-collapsed .sidebar-footer { padding: 12px 0; }

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.signout-form { margin: 0 6px; }

.sidebar-signout {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px;
  font-size: 15px;
  font-weight: 600;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}
.sidebar-signout:hover { color: var(--red); border-color: var(--red); }
.sidebar-signout .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sidebar-signout .icon svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Theme switcher ──────────────────────────────────────────────────────── */

.theme-switcher {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.theme-btn {
  flex: 1;
  padding: 5px 4px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  background: var(--bg-input);
  color: var(--text-2);
  transition: all 0.15s;
  text-align: center;
}

.theme-btn:hover { border-color: var(--accent); color: var(--accent); }
.theme-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.custom-colors { margin-top: 8px; display: none; }
.custom-colors.open { display: block; }

.color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 11px;
  color: var(--text-2);
}

.color-row input[type="color"] {
  width: 28px; height: 22px;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  background: none;
  padding: 1px;
}

.custom-reset {
  width: 100%;
  margin-top: 6px;
  padding: 4px;
  font-size: 11px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}
.custom-reset:hover { color: var(--text-1); border-color: var(--text-2); }

/* ── Page transitions ────────────────────────────────────────────────────── */

@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Page layout ─────────────────────────────────────────────────────────── */

.page-wrap {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left 0.22s ease, opacity 0.15s ease;
  animation: page-in 0.22s ease both;
}
.page-wrap.page-leaving { opacity: 0; transform: translateY(3px); transition: opacity 0.18s ease, transform 0.18s ease; animation: none; }

body.nav-collapsed .page-wrap { margin-left: var(--sidebar-w-collapsed); }

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.topbar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.hamburger {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  font-size: 18px;
  padding: 6px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
  flex-shrink: 0;
}
.hamburger:hover { color: var(--text-1); background: var(--bg-hover); }

/* Mobile-only hamburger button rendered into the .page-head by nav.js. Hidden
   on desktop via the default `display: none`; the mobile @media block overrides
   to inline-flex. Sits to the LEFT of the page title for discoverability. */
.page-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 3px 10px -3px rgba(0,0,0,.55);
  width: 36px;
  height: 36px;
  padding: 0;
  margin-right: 10px;
  cursor: pointer;
  color: var(--text-1);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.page-hamburger:hover { color: var(--text-1); background: var(--bg-hover); border-color: var(--accent); }
.page-hamburger:focus, .page-hamburger:focus-visible { outline: none; }
.page-hamburger svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.topbar-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  flex: 1;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-block { text-align: right; }
.stat-block .num { font-size: 20px; font-weight: 700; line-height: 1; }
.stat-block .lbl { font-size: 10px; color: var(--text-3); margin-top: 2px; }

.runner-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.runner-badge .dot { width: 6px; height: 6px; border-radius: 50%; }
.runner-online  { background: var(--green-dim); color: var(--green); }
.runner-online .dot  { background: var(--green); animation: pulse 2s infinite; }
.runner-offline { background: var(--bg-input); color: var(--text-3); }
.runner-offline .dot { background: var(--text-3); }

.logout-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
}
.logout-btn:hover { border-color: var(--text-2); color: var(--text-1); }

/* ── Settings (gear) button + widget panel ───────────────────────────────── */

.settings-wrap { position: relative; }

.settings-panel {
  position: absolute;
  bottom: 0;
  left: calc(100% + 10px);
  width: 240px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.settings-panel.open { opacity: 1; visibility: visible; transform: translateX(0); }

.settings-panel { max-height: 70vh; overflow-y: auto; }

.settings-head {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  padding: 8px 10px 6px;
}

.settings-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 6px;
}

/* Theme switcher sits inside the settings flyout */
.settings-panel .theme-switcher { margin: 0 6px 0; }
.settings-panel .custom-colors  { padding: 0 6px; }

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
}
.settings-item:hover { background: var(--bg-hover); }

.settings-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
}

/* Toggle switch */
.toggle { position: relative; flex-shrink: 0; width: 34px; height: 20px; }
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 20px;
  transition: background 0.2s;
  pointer-events: none;
}
.toggle-track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle input:checked + .toggle-track { background: var(--accent); }
.toggle input:checked + .toggle-track::after { transform: translateX(14px); }

/* ── Overlay (mobile sidebar backdrop) ───────────────────────────────────── */

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 199;
}
.sidebar-overlay.open { display: block; }

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

main {
  padding: 24px;
  flex: 1;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  /* When the window is narrower than the grid's min-width, scroll
     horizontally instead of letting the widgets clip off-screen. */
  overflow-x: auto;
}

/* ── Page header (inside content, replaces top bar) ──────────────────────── */

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

/* "+ Image / + Note" buttons shown on dynamic pages */
.cw-add-btns { display: flex; gap: 8px; align-items: center; }
.cw-add-btn {
  font-family: inherit; font-size: 12px; font-weight: 700; padding: 7px 13px;
  border-radius: 7px; cursor: pointer; white-space: nowrap; transition: all .15s;
  border: 1px solid var(--border); background: var(--bg-input); color: var(--text-3);
}
.cw-add-btn:hover { color: var(--text-1); border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

.page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-1);
}

/* Right-side action slot in the page header (lock, add-widget, badges, etc.) */
.page-head-actions { display: flex; align-items: center; gap: 8px; }

/* Lock / unlock layout button (shared by every grid page) */
.lock-layout-btn {
  font-family: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px;
  border-radius: 8px; cursor: pointer; white-space: nowrap; transition: all .15s;
  border: 1px solid var(--border); background: var(--bg-input); color: var(--text-3);
}
.lock-layout-btn:hover { color: var(--text-1); border-color: var(--text-2); }
.lock-layout-btn.editing { border-color: var(--amber); color: var(--amber); background: rgba(251,191,36,.08); }

/* Add Widget button */
.add-widget-btn {
  font-family: inherit; font-size: 13px; font-weight: 700; padding: 8px 16px;
  border-radius: 8px; cursor: pointer; border: 1px solid var(--accent);
  background: var(--accent-dim); color: var(--accent);
  transition: background .15s, color .15s; white-space: nowrap;
}
.add-widget-btn:hover { background: var(--accent); color: #fff; }

/* ── Custom Dashboard full-screen (TV / monitor) mode ──────────────────────
   Edge-to-edge display for the /d/{id} dashboards. The body gets
   `.dashboard-fullscreen` (set by dashboard.js, kept in sync with the native
   Fullscreen API). Chrome is hidden and every margin/pad is collapsed so the
   widget grid uses all available real estate. */
.dashboard-fs-btn {
  font-family: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px;
  border-radius: 8px; cursor: pointer; white-space: nowrap; transition: all .15s;
  border: 1px solid var(--border); background: var(--bg-input); color: var(--text-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.dashboard-fs-btn:hover { color: var(--text-1); border-color: var(--text-2); }

body.dashboard-fullscreen .sidebar,
body.dashboard-fullscreen .sidebar-overlay,
body.dashboard-fullscreen .dashboard-mobile-banner,
body.dashboard-fullscreen .page-head { display: none !important; }

body.dashboard-fullscreen .page-wrap { margin-left: 0 !important; }
body.dashboard-fullscreen main { max-width: none; padding: 0; overflow-x: hidden; }
body.dashboard-fullscreen .grid-stack { min-width: 0; }

/* Floating exit control — only visible while in full-screen. Sits dim in the
   corner so it never distracts on a wall display, brightens on hover. */
.dashboard-fs-exit {
  display: none; position: fixed; top: 12px; right: 12px; z-index: 500;
  width: 38px; height: 38px; align-items: center; justify-content: center;
  border-radius: 9px; cursor: pointer; font-size: 18px; line-height: 1; padding: 0;
  font-family: inherit; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-2); opacity: .35;
  transition: opacity .15s, color .15s, border-color .15s;
}
.dashboard-fs-exit:hover { opacity: 1; color: var(--text-1); border-color: var(--accent); }
body.dashboard-fullscreen .dashboard-fs-exit { display: flex; }

/* Edit-mode guides for the custom Dashboard grid — a subtle modern dot grid.
   Visible only while the layout is unlocked (body.layout-editing), scoped to
   #widget-grid (the /d/{id} page). One dot per cell, sized live from --grid-cols
   (column count) and --cell-h (row height), both set by grid-system.js, so the
   dots track the 16-col desktop grid and any responsive reflow. The rgba line is
   a fallback for browsers without color-mix; the accent-tinted line wins where
   supported so the dots follow the active theme. */
body.layout-editing #widget-grid {
  background-image: radial-gradient(circle, rgba(130,144,176,.30) 1.4px, transparent 1.6px);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent) 1.4px, transparent 1.6px);
  background-size: calc(100% / var(--grid-cols, 16)) var(--cell-h, 80px);
  border-radius: 8px;
  transition: background-color .15s;
}

/* Per-widget delete button — only visible while a layout is unlocked */
.widget-delete-btn {
  display: none; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0; margin-left: 6px;
  background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.35);
  color: var(--red); border-radius: 5px; font-size: 16px; line-height: 1;
  cursor: pointer; transition: background .15s; font-family: inherit; padding: 0;
}
.widget-delete-btn:hover { background: rgba(248,113,113,.3); }
body.layout-editing .widget-delete-btn { display: flex; }

/* Catalog widgets fill their gridstack cell on any page */
.grid-stack [data-catalog-iid] { height: 100%; }
.grid-stack [data-catalog-iid] > .widget { height: 100%; display: flex; flex-direction: column; }
.grid-stack [data-catalog-iid] > .widget > .widget-body { flex: 1; min-height: 0; }

/* Per-widget font-size setting scales the WHOLE widget body via zoom, uniformly
   across built-in, catalog, and niche-page widgets. The gear sets --w-zoom; the
   older calc(--w-fs) usages are now inert (default to 1) so nothing double-scales. */
.grid-stack-item-content .widget-body { zoom: var(--w-zoom, 1.5); }

/* Highlight widget borders while editing a layout */
body.layout-editing .grid-stack-item > .grid-stack-item-content > .widget { border-color: rgba(251,191,36,.3); }

/* ── Add-Widget catalog drawer (shared, injected by grid-system.js) ───────── */
.catalog-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 360px;
  background: var(--bg-card); border-left: 1px solid var(--border);
  z-index: 300; transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column; overflow: hidden;
}
.catalog-drawer.open { transform: translateX(0); }
.catalog-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 299; display: none; }
.catalog-backdrop.open { display: block; }
.catalog-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.catalog-head-title { font-size: 15px; font-weight: 700; color: var(--text-1); }
.catalog-close-btn {
  background: none; border: none; color: var(--text-3); font-size: 22px;
  cursor: pointer; padding: 2px 6px; border-radius: 5px; line-height: 1;
}
.catalog-close-btn:hover { color: var(--text-1); background: var(--bg-hover); }
.catalog-body { flex: 1; overflow-y: auto; padding: 14px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.catalog-category { margin-bottom: 20px; }
.catalog-category-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3); margin-bottom: 8px; padding: 0 2px;
}
.catalog-widget-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 12px; margin-bottom: 6px; transition: border-color .15s;
}
.catalog-widget-card:hover { border-color: var(--text-3); }
.catalog-widget-info { flex: 1; min-width: 0; }
.catalog-widget-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
.catalog-widget-desc { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.catalog-widget-size { font-size: 10px; color: var(--text-3); margin-top: 3px; }
.catalog-add-btn {
  font-family: inherit; font-size: 12px; font-weight: 700; padding: 5px 12px;
  border-radius: 7px; cursor: pointer; border: 1px solid var(--accent);
  background: transparent; color: var(--accent); white-space: nowrap; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.catalog-add-btn:hover { background: var(--accent); color: #fff; }
.catalog-add-btn:disabled { border-color: var(--border); color: var(--text-3); cursor: default; background: transparent; }
.catalog-add-btn.added  { border-color: var(--green); color: var(--green); }

/* ── Gridstack widget styles ──────────────────────────────────────────────── */

/* The grid never compresses below this width. Gridstack measures the
   container to size its 12 columns; holding a floor here keeps each column
   (and therefore every widget) from shrinking when the window narrows.
   main scrolls horizontally past this point instead of clipping widgets. */
.grid-stack { padding: 0; min-width: 960px; }

/* The outer gridstack item needs padding for the gap between widgets */
.grid-stack > .grid-stack-item > .grid-stack-item-content {
  padding: 6px;
}

.widget {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}
.widget:hover { border-color: #3e3e46; box-shadow: var(--shadow-md); }

/* Widget header — drag handle + navigation target */
.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-soft);
  cursor: grab;
  flex-shrink: 0;
  user-select: none;
  overflow: hidden;
}
.widget-header:active { cursor: grabbing; }

/* Clickable widget headers navigate to the full page */
.widget-header.widget-nav {
  cursor: pointer;
  transition: background 0.15s;
}
.widget-header.widget-nav:hover { background: var(--bg-hover); }

.widget-title {
  font-size: calc(11px * var(--w-fs, 1));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: auto;   /* push win-tabs + gear to the right edge */
}

.widget-title-arrow {
  font-size: calc(10px * var(--w-fs, 1));
  color: var(--text-3);
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}
.widget-header.widget-nav:hover .widget-title-arrow {
  opacity: 1;
  transform: translateX(2px);
}

.widget-body {
  flex: 1;
  padding: 16px;
  overflow: hidden;
  min-height: 0;
}

/* Coming soon overlay */
.widget-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 12px;
  height: 100%;
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
}

.widget-lock {
  font-size: 22px;
  opacity: 0.4;
}

.widget-lock-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* Gridstack drag/resize visual feedback */
.grid-stack-item.ui-draggable-dragging > .grid-stack-item-content .widget {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
  opacity: 0.9;
}
.grid-stack-item.ui-resizable-resizing > .grid-stack-item-content .widget {
  border-color: var(--accent);
}
.grid-stack-placeholder > .placeholder-content {
  background: var(--accent-dim) !important;
  border: 2px dashed var(--accent) !important;
  border-radius: 12px !important;
  opacity: 1 !important;
}

/* ── Cards (shared) ──────────────────────────────────────────────────────── */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin-bottom: 12px;
}

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

.status-badge {
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.badge-ready   { background: var(--green-dim); color: var(--green); }
.badge-running { background: var(--blue-dim);  color: var(--blue);  animation: pulse-text 1.5s infinite; }
.badge-pending { background: var(--amber-dim); color: var(--amber); animation: pulse-text 1.5s infinite; }
.badge-error   { background: var(--red-dim);   color: var(--red); }
.badge-never   { background: var(--bg-card);   color: var(--text-3); border: 1px solid var(--border); }

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

.table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead tr { background: var(--bg-input); }
th {
  padding: 10px 16px;
  text-align: left;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-3);
}
th.r, td.r { text-align: right; }
tbody tr { border-top: 1px solid var(--border-soft); transition: background 0.1s; }
tbody tr:hover { background: var(--bg-hover); }
td { padding: 10px 16px; color: var(--text-2); }
td.county-name { font-weight: 600; color: var(--text-1); text-transform: capitalize; }
.empty-row td { text-align: center; color: var(--text-3); padding: 40px; font-size: 13px; }

.run-status { font-size: 11px; font-weight: 600; text-transform: capitalize; }
.run-status.done      { color: var(--green); }
.run-status.error     { color: var(--red); }
.run-status.running   { color: var(--blue); }
.run-status.pending   { color: var(--amber); }
.run-status.cancelled { color: var(--amber); }
.btn-reset-run { margin-left: 6px; font-size: 10px; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); cursor: pointer; }
.btn-reset-run:hover { background: var(--surface-3); color: var(--text-1); }

/* ── Partner Network jump nav ────────────────────────────────────────────── */
.pn-jumpnav {
  display: flex; flex-wrap: wrap; gap: 6px;
  position: sticky; top: 0; z-index: 50;
  background: var(--bg); padding: 10px 0 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.pn-jump {
  font-size: 12px; font-weight: 600; padding: 5px 12px;
  border-radius: 20px; text-decoration: none;
  border: 1px solid var(--border);
  color: var(--text-2); background: var(--surface-2);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.pn-jump:hover, .pn-jump.active { background: var(--accent); color: #fff; border-color: var(--accent); }

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

.btn {
  flex: 1; border: none; border-radius: 8px;
  padding: 9px 12px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-live { background: var(--accent); color: #fff; }
.btn-live:not(:disabled):hover { background: var(--accent-hover); }
.btn-dry  { background: var(--bg-input); color: var(--text-2); border: 1px solid var(--border); }
.btn-dry:not(:disabled):hover  { background: var(--bg-hover); color: var(--text-1); border-color: var(--text-3); }

.btn-push {
  background: var(--accent); border: none; color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 5px;
  cursor: pointer; transition: background 0.15s; white-space: nowrap;
}
.btn-push:hover:not(:disabled) { background: var(--accent-hover); }
.btn-push:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-viewlog {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-2); font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 5px;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.btn-viewlog:hover { color: var(--text-1); border-color: var(--accent); }

.btn-delete {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-3); font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 5px;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.btn-delete:hover { color: var(--red); border-color: var(--red); }

.btn-cancel-row {
  background: transparent; border: 1px solid var(--amber, #d97706);
  color: var(--amber, #d97706); font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 5px;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.btn-cancel-row:hover:not(:disabled) { background: rgba(217, 119, 6, 0.12); }
.btn-cancel-row:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Log panel ───────────────────────────────────────────────────────────── */

.log-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.log-panel.hidden { display: none; }
.log-header {
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
  padding: 11px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.log-title-row { display: flex; align-items: center; gap: 10px; }
.log-actions { display: flex; align-items: center; gap: 8px; }

.log-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.5s infinite; }
.log-dot.done      { background: var(--green);  animation: none; }
.log-dot.error     { background: var(--red);    animation: none; }
.log-dot.cancelled { background: var(--amber);  animation: none; }

.log-title { font-size: 13px; font-weight: 600; color: var(--text-1); }

.log-status {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; font-size: 12px; color: var(--text-2);
  background: var(--bg-input); border-bottom: 1px solid var(--border-soft);
  min-height: 34px;
}
.log-status:empty { display: none; }
.log-status .spin {
  width: 13px; height: 13px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0;
}

#log-output {
  font-family: 'Menlo', 'Consolas', 'Monaco', monospace;
  font-size: 12px; line-height: 1.6;
  padding: 16px 18px; height: 280px;
  overflow-y: auto; color: var(--green);
  background: #050505; white-space: pre-wrap; word-break: break-all;
}
[data-theme="light"] #log-output { background: #1a1a1a; }

#log-output::-webkit-scrollbar { width: 5px; }
#log-output::-webkit-scrollbar-track { background: #050505; }
#log-output::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.log-footer { padding: 11px 18px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 20px; font-size: 13px; }
.log-footer.hidden { display: none; }

.log-close {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-3); font-size: 12px; padding: 4px 10px;
  border-radius: 6px; cursor: pointer; transition: all 0.15s; font-weight: 500;
}
.log-close:hover { color: var(--text-1); border-color: var(--text-2); }

.log-cancel {
  background: var(--red-dim); border: 1px solid var(--red);
  color: var(--red); font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: 6px; cursor: pointer; transition: all 0.15s;
}
.log-cancel:hover { background: var(--red); color: #fff; }
.log-cancel:disabled { opacity: 0.5; cursor: not-allowed; }
.log-cancel.hidden { display: none; }

/* ── Totals row ──────────────────────────────────────────────────────────── */

.totals-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.total-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s;
}
.total-card:hover { box-shadow: var(--shadow-md); }

.total-num {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.total-lbl {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 6px;
  font-weight: 500;
}

/* ── FUB page ────────────────────────────────────────────────────────────── */

.totals-inline {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.totals-inline .total-card {
  flex: 1;
  min-width: 130px;
  box-shadow: none;
}

/* --w-fs is the per-widget font multiplier set by widget-settings.js
   (1 = Normal, 1.5 = Large, 2 = XL). All scalable widget text uses it. */
.widget-table { width: 100%; font-size: calc(13px * var(--w-fs, 1)); }
.widget-table thead tr { background: transparent; }
.widget-table th { padding: 6px 8px; white-space: nowrap; }
.widget-table td { padding: 8px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
.widget-table td:last-child { white-space: nowrap; max-width: none; width: 1%; }

.section-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}

/* FUB inline stat row — never wraps, evenly distributed */
.fub-totals-body {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  padding: 0 16px 14px !important;
  overflow: hidden;
}

.fub-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
}
.fub-stat-num {
  font-size: calc(32px * var(--w-fs, 1));
  font-weight: 700;
  line-height: 1;
}
.fub-stat-lbl {
  font-size: calc(13px * var(--w-fs, 1));
  font-weight: 500;
  color: var(--text-3);
  white-space: nowrap;
}
.fub-stat-sep {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
}

/* FUB widget hard pixel floors so header never clips regardless of viewport */
/* Pixel floors kept just under each widget's grid-column minimum
   (see gs-min-w in fub.html) so they never overflow their own cell. */
.grid-stack-item[gs-id="fub-totals"]  > .grid-stack-item-content > .widget { min-width: 440px; }
.grid-stack-item[gs-id="fub-sources"] > .grid-stack-item-content > .widget { min-width: 280px; }
.grid-stack-item[gs-id="fub-calls"]   > .grid-stack-item-content > .widget { min-width: 280px; }
/* Calendar needs room for 7 day columns + the time gutter — never let it squish. */
.grid-stack-item[gs-id^="social:calendar"] > .grid-stack-item-content > .widget { min-width: 620px; }

/* Window tab buttons (replace dropdowns) */
.win-tabs {
  display: flex;
  gap: 3px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  flex-shrink: 0;
}
.win-tab {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  font-family: inherit;
}
.win-tab:hover { color: var(--text-1); }
.win-tab-active { background: var(--bg-card); color: var(--text-1); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }

th.col-active { color: var(--accent); }

/* ── County cards ────────────────────────────────────────────────────────── */

.county-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.county-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: var(--shadow-sm);
}
.county-card:hover { box-shadow: var(--shadow-md); }
.county-card.is-running { border-color: var(--accent); }
.county-card.is-pending { border-color: var(--amber); }

.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.card-top h3 { font-size: 15px; font-weight: 600; color: var(--text-1); }

.last-run { font-size: 11px; color: var(--text-3); }

.stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.stat-box {
  background: var(--bg-input);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.stat-box .n { font-size: 22px; font-weight: 700; line-height: 1; }
.stat-box .l { font-size: 10px; color: var(--text-3); margin-top: 3px; }
.n-green { color: var(--green); }
.n-blue  { color: var(--blue); }
.n-amber { color: var(--amber); }

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

/* ── Custom Widgets (image + text) — raw, no card chrome ─────────────────── */

.cw-widget { width: 100%; height: 100%; display: flex; flex-direction: column; background: transparent; border: none; overflow: hidden; margin: 0; padding: 0; }

.cw-image-widget { border-radius: 12px; overflow: hidden; position: relative; height: 100%; }
/* Hover bar OVERLAYS the image (absolute) so it never adds height */
.cw-img-hover-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 3px 8px; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); cursor: grab; opacity: 0; transition: opacity .2s; min-height: 26px; margin: 0; border: none; }
.cw-image-widget:hover .cw-img-hover-bar { opacity: 1; }
/* Image body fills the ENTIRE widget — no gaps top or bottom */
.cw-img-body { position: absolute; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg-base); }
.cw-img { display: block; border-radius: 12px; }
/* Cover: image fills the whole widget */
.cw-img-body.cw-fit-cover .cw-img { width: 100%; height: 100%; object-fit: cover; }
/* Contain: image element shrinks to its displayed size so rounded corners land on real edges */
.cw-img-body.cw-fit-contain .cw-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.cw-upload-area { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; width: calc(100% - 16px); height: calc(100% - 16px); border: 2px dashed var(--border); border-radius: 8px; transition: all .2s; }
.cw-upload-area:hover, .cw-img-body.cw-drag-over .cw-upload-area { border-color: var(--accent); background: var(--accent-dim); }
.cw-img-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; }
.cw-img-body:hover .cw-img-overlay { opacity: 1; }
.cw-replace { padding: 8px 16px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 8px; cursor: pointer; font-weight: 700; }
.cw-replace:hover { background: rgba(255,255,255,.25); }

/* Text widget — display only; editing happens in a modal */
.cw-text-widget { position: relative; height: 100%; border-radius: 12px; overflow: hidden; }
.cw-disp { position: absolute; inset: 0; overflow: hidden; font-size: 13px; line-height: 1.65; color: var(--text-1); box-sizing: border-box; }
/* Grip/control bar OVERLAYS the top, appears on hover */
.cw-text-grip { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 3px 8px; min-height: 26px; cursor: grab; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); border: none; opacity: 0; transition: opacity .2s; }
.cw-text-widget:hover .cw-text-grip { opacity: 1; }
.cw-grip { font-size: 14px; color: rgba(255,255,255,.6); cursor: grab; flex-shrink: 0; }
.cw-label { background: transparent; border: none; border-bottom: 1px solid transparent; color: rgba(255,255,255,.75); font-family: inherit; font-size: 11px; font-weight: 600; outline: none; flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .06em; transition: border-color .15s, color .15s; }
.cw-label:focus { border-bottom-color: rgba(255,255,255,.3); color: #fff; }
.cw-edit { white-space: nowrap; }

/* Modal text editor */
.cw-modal-back { position: fixed; inset: 0; z-index: 5000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); padding: 24px; }
.cw-modal-back.open { display: flex; }
.cw-modal { width: min(820px, 100%); max-height: 88vh; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.55); overflow: hidden; }
.cw-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 700; color: var(--text-1); }
.cw-modal-x { background: none; border: none; color: var(--text-3); font-size: 24px; cursor: pointer; line-height: 1; }
.cw-modal-x:hover { color: var(--text-1); }

/* ── SMS Messages widget (portable; styles shared so it works on any page) ─── */
.widget-header:has(.win-tabs) .widget-title { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sms-stats-body { display: flex; flex-direction: column; height: 100%; }
.sms-stats-row { display: flex; align-items: center; justify-content: center; gap: 0; flex-shrink: 0; padding: 8px 0 16px; }
.sms-stat { display: flex; flex-direction: column; align-items: center; flex: 1; }
.sms-stat-num { font-size: 48px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.sms-stat-lbl { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; }
.sms-stat-sep { width: 1px; height: 60px; background: var(--border); flex-shrink: 0; }
.sms-loading { color: var(--text-3); font-size: 13px; text-align: center; padding: 30px 0; }
.sms-stat-clickable { cursor: pointer; border-radius: 10px; padding: 6px 4px; transition: background 0.15s; position: relative; }
.sms-stat-clickable:hover { background: var(--bg-hover); }
.sms-stat-hint { font-size: 9px; color: var(--accent); margin-top: 4px; opacity: 0; transition: opacity 0.15s; text-transform: uppercase; letter-spacing: 0.06em; }
.sms-stat-clickable:hover .sms-stat-hint { opacity: 1; }
.sms-replied-list { flex: 1; overflow-y: auto; min-height: 0; border-top: 1px solid var(--border-soft); scrollbar-width: thin; scrollbar-color: var(--border) transparent; display: none; }
.sms-replied-list.open { display: block; }
.sms-replied-list::-webkit-scrollbar { width: 4px; }
.sms-replied-list::-webkit-scrollbar-track { background: transparent; }
.sms-replied-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.sms-replied-list::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
.sms-reply-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; cursor: pointer; border-bottom: 1px solid var(--border-soft); transition: background 0.15s, box-shadow 0.15s; }
.sms-reply-row:hover { background: var(--accent-dim); box-shadow: inset 3px 0 0 var(--accent); }
.sms-reply-name { font-size: 13px; color: var(--text-1); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sms-reply-phone { font-size: 11px; color: var(--text-3); }
.sms-reply-meta { display: flex; flex-direction: column; }
.sms-reply-time { font-size: 11px; color: var(--text-2); white-space: nowrap; flex-shrink: 0; }
.sms-reply-empty { color: var(--text-3); font-size: 13px; text-align: center; padding: 24px 0; }
/* On-hover SMS thread popup (appended to <body>); zoom-scales with the widget's gear setting */
.sms-thread-pop { position: fixed; z-index: 9999; width: 320px; max-height: 420px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px; display: none; flex-direction: column; zoom: var(--w-zoom, 1); }
.sms-thread-pop.open { display: flex; }
.sms-thread-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); flex-shrink: 0; }
.sms-thread-name { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sms-thread-close { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 20px; line-height: 1; padding: 0 2px; flex-shrink: 0; transition: color 0.15s; }
.sms-thread-close:hover { color: var(--text-1); }
.sms-reply-box { display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.sms-reply-input { flex: 1; resize: none; font-family: inherit; font-size: 12.5px; background: var(--bg-input); color: var(--text-1); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; outline: none; transition: border-color 0.15s; line-height: 1.35; }
.sms-reply-input:focus { border-color: var(--accent); }
.sms-reply-send { font-family: inherit; font-size: 12px; font-weight: 700; background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 9px 14px; cursor: pointer; flex-shrink: 0; transition: opacity 0.15s; }
.sms-reply-send:hover { opacity: 0.9; }
.sms-reply-send:disabled { opacity: 0.5; cursor: default; }
.sms-reply-status { font-size: 10.5px; color: var(--text-3); flex-shrink: 0; margin-top: 6px; min-height: 13px; text-align: right; }
.sms-reply-status.ok  { color: var(--green); }
.sms-reply-status.err { color: var(--red); }
.sms-crm-btns { display: flex; gap: 8px; margin-bottom: 10px; flex-shrink: 0; }
.sms-crm-btn { flex: 1; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 7px 8px; border-radius: 7px; cursor: pointer; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-1); transition: background 0.15s, border-color 0.15s, color 0.15s; }
.sms-crm-btn.ghl:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.sms-crm-btn.fub:hover { background: var(--green); border-color: var(--green); color: #fff; }
.sms-crm-btn.disabled { opacity: 0.4; cursor: default; }
.sms-crm-btn.disabled:hover { background: var(--bg-input); border-color: var(--border); color: var(--text-1); }
.sms-thread-msgs { flex: 1; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.sms-thread-msgs::-webkit-scrollbar { width: 4px; }
.sms-thread-msgs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.sms-bubble { max-width: 80%; padding: 7px 11px; border-radius: 12px; font-size: 12.5px; line-height: 1.35; margin-bottom: 7px; word-wrap: break-word; white-space: pre-wrap; }
.sms-bubble-out { background: var(--accent); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.sms-bubble-in { background: var(--bg-input); color: var(--text-1); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.sms-bubble-time { display: block; font-size: 9.5px; margin-top: 3px; opacity: 0.7; }
.sms-thread-loading { color: var(--text-3); font-size: 12px; text-align: center; padding: 20px 0; }

/* ── Follow Up Boss widgets (portable; shared so they work on any page) ────── */
.fub-feed-body { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.fub-feed-body::-webkit-scrollbar { width: 4px; }
.fub-feed-body::-webkit-scrollbar-track { background: transparent; }
.fub-feed-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.fub-feed-body::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
.feed-row { cursor: pointer; transition: background 0.15s, box-shadow 0.15s; }
.feed-row:hover { background: var(--accent-dim); box-shadow: inset 3px 0 0 var(--accent); }
.feed-row:hover td { color: var(--text-1); }
.ttc-none { color: var(--amber); font-weight: 600; }
.ttc-fast { color: var(--green); }
.ttc-val  { color: var(--text-2); }
.funnel-agent-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.funnel-agent-btn { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-3); font-size: 11px; font-weight: 700; padding: 5px 13px; border-radius: 6px; cursor: pointer; font-family: inherit; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.06em; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.funnel-agent-btn:hover { color: var(--text-1); border-color: var(--text-2); }
.funnel-agent-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.funnel-bars { display: flex; flex-direction: column; gap: 10px; }
.funnel-row  { display: grid; grid-template-columns: 74px 1fr 46px; align-items: center; gap: 10px; }
.funnel-lbl  { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-align: right; white-space: nowrap; }
.funnel-bar-cell { display: flex; justify-content: center; }
.funnel-bar { border: 2px solid; border-radius: 8px; min-width: 48px; height: 36px; display: flex; align-items: center; justify-content: center; transition: width 0.45s cubic-bezier(.4,0,.2,1); }
.funnel-bar-count { font-size: 15px; font-weight: 700; line-height: 1; }
.funnel-pct { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.funnel-total { text-align: center; font-size: 11px; color: var(--text-3); margin-top: 14px; letter-spacing: 0.05em; }

/* ── Skip Trace widgets (portable; shared so they work on any page) ────────── */
.widget-body:has(.trace-form) { display: flex; flex-direction: column; }
/* Form fills the widget body so the action button pins to the bottom:
   inputs on top, results grow in the middle, .trace-go last. */
.trace-form { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.trace-inputs { display: flex; flex-direction: column; gap: 10px; }
.trace-fields { display: grid; gap: 8px; }
.trace-fields.cols-2 { grid-template-columns: 1fr 1fr; }
.trace-fields.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.trace-input { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-1); font-family: inherit; font-size: 13px; padding: 9px 11px; border-radius: 7px; width: 100%; transition: border-color 0.15s; box-sizing: border-box; }
.trace-input::placeholder { color: var(--text-3); }
.trace-input:focus { outline: none; border-color: var(--accent); }
/* Match the primary action button on other pages (e.g. Create Content's
   full-width generator button): standard .btn height, full width, no stretch. */
.trace-go { flex: 0 0 auto; width: 100%; }
.trace-go .spin { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; margin-right: 7px; }
.trace-status { font-size: 12px; color: var(--text-3); margin-bottom: 10px; }
.trace-status.err { color: var(--red); }
.trace-cards { display: flex; flex-direction: column; gap: 9px; }
.pcard { background: var(--bg-input); border: 1px solid var(--border); border-radius: 9px; padding: 12px 14px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; }
.pcard:hover { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.pcard-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.pcard-name { font-size: 15px; font-weight: 700; color: var(--text-1); }
.pcard-age { font-size: 12px; color: var(--text-3); }
.pcard-rows { margin-top: 8px; display: grid; gap: 4px; }
.pcard-row { display: flex; gap: 8px; font-size: 12.5px; align-items: baseline; }
.pcard-row .lbl { color: var(--text-3); flex-shrink: 0; width: 56px; text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; padding-top: 1px; }
.pcard-row .val { color: var(--text-1); word-break: break-word; }
.pcard-row .val.phone { color: var(--green); font-weight: 600; }
.pcard-row .val.email { color: var(--blue); }
.pcard-more { margin-top: 8px; font-size: 11px; color: var(--accent); font-weight: 600; }
.pbadge { font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.pbadge.owner   { background: var(--green-dim); color: var(--green); }
.pbadge.flag    { background: var(--amber-dim); color: var(--amber); }
.pbadge.dead    { background: var(--red-dim);   color: var(--red); }
.pbadge.live    { background: var(--green-dim); color: var(--green); }
.pbadge.optout  { background: var(--red-dim);   color: var(--red); }
.trace-results { overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.trace-results::-webkit-scrollbar { width: 5px; }
.trace-results::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.trace-results::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: flex-start; justify-content: center; z-index: 2000; padding: 40px 16px; overflow-y: auto; }
.modal-overlay.open { display: flex; }
.modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; width: 100%; max-width: 720px; box-shadow: var(--shadow-md); overflow: hidden; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-name { font-size: 21px; font-weight: 800; color: var(--text-1); }
.modal-sub { font-size: 13px; color: var(--text-3); margin-top: 3px; }
.modal-close { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-2); width: 30px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 17px; flex-shrink: 0; line-height: 1; transition: color 0.15s, border-color 0.15s; }
.modal-close:hover { color: var(--red); border-color: var(--red); }
.modal-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
#push-fub-btn { white-space: nowrap; }
#push-fub-btn:disabled { opacity: 0.55; cursor: default; }
.push-status { padding: 0 22px; font-size: 13px; min-height: 0; transition: min-height 0.1s; }
.push-status:not(:empty) { padding-top: 12px; }
.push-status .ok  { color: var(--green); font-weight: 600; }
.push-status .err { color: var(--red); }
.push-status a { color: var(--accent); font-weight: 600; text-decoration: none; }
.push-status a:hover { text-decoration: underline; }
.modal-body { padding: 6px 22px 22px; max-height: 70vh; overflow-y: auto; }
.msec { margin-top: 18px; }
.msec-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.mitem { font-size: 13.5px; color: var(--text-1); padding: 5px 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.mitem .meta { font-size: 11.5px; color: var(--text-3); }
.mitem .phone { color: var(--green); font-weight: 600; }
.mitem .email { color: var(--blue); }
.mchips { display: flex; flex-wrap: wrap; gap: 6px; }
.mempty { font-size: 12.5px; color: var(--text-3); padding: 4px 0; }

/* ── Social Posts widgets (portable; modal/buttons namespaced `smodal`/`sbtn`) ── */
.soc-scrollbody { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.soc-scrollbody::-webkit-scrollbar { width: 4px; }
.soc-scrollbody::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.row-click { cursor: pointer; transition: background .15s, box-shadow .15s; }
.row-click:hover { background: var(--accent-dim); box-shadow: inset 3px 0 0 var(--accent); }
.row-click:hover td { color: var(--text-1); }
.chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.chip { font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 2px 7px; border-radius: 5px; white-space: nowrap; border: 1px solid var(--border); color: var(--text-2); }
.chip-Facebook  { color: var(--blue); border-color: rgba(96,165,250,.5); background: rgba(96,165,250,.10); }
.chip-Instagram { color: #e879c9; border-color: rgba(232,121,201,.5); background: rgba(232,121,201,.10); }
.when-cell { white-space: nowrap; color: var(--text-2); font-size: 12px; }
.mini-btn { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-3); font-family: inherit; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; cursor: pointer; transition: color .15s, border-color .15s; }
.mini-btn:hover { color: var(--text-1); border-color: var(--text-2); }
.banner { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; font-size: 13px; background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.4); color: var(--amber); }
.banner.hidden { display: none; }
.banner-error { background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.4); color: var(--red); }
.banner-warn  { background: rgba(251,191,36,.10);  border-color: rgba(251,191,36,.4);  color: var(--amber); }

/* ── Social content calendar (Calendar widget) ───────────────────────────────── */
.cal-widget .widget-header { flex-wrap: wrap; gap: 8px; }
.cal-body { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-navbtn { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-2); font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1; padding: 5px 9px; border-radius: 6px; cursor: pointer; transition: color .15s, border-color .15s; }
.cal-navbtn:hover { color: var(--text-1); border-color: var(--text-2); }
.cal-range { font-size: 12px; font-weight: 600; color: var(--text-2); margin-left: 6px; white-space: nowrap; }
/* shared chip look (scales with the per-widget font setting) */
.cal-chip { font-size: calc(11px * var(--w-fs, 1)); line-height: 1.35; padding: 3px 6px 3px 7px; border-radius: 5px; margin-bottom: 3px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 3px solid transparent; transition: filter .12s, background .12s; }
.cal-chip:hover { filter: brightness(1.08); }
.cal-chip-time { font-weight: 700; opacity: .9; margin-right: 3px; }
.cal-chip-sched { background: var(--accent-dim); border-left-color: var(--accent); color: var(--text-1); }
.cal-chip-posted { background: rgba(34,197,94,.10); border-left-color: var(--green); color: var(--text-2); }
.cal-more { font-size: 10px; font-style: italic; color: var(--text-3); padding: 1px 5px; }
/* Month view */
.cal-month { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.cal-month-dow { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border); }
.cal-month-dow > div { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); text-align: center; padding: 6px 0; }
.cal-month-grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.cal-month-grid::-webkit-scrollbar { width: 4px; }
.cal-month-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.cal-mcell { position: relative; min-width: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-height: 78px; padding: 4px 5px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; overflow: hidden; transition: background .12s; }
.cal-mcell:hover { background: var(--accent-dim); }
.cal-mcell:hover::after { content: '+'; position: absolute; top: 3px; right: 6px; font-size: 13px; font-weight: 700; line-height: 1; color: var(--accent); opacity: .6; pointer-events: none; }
.cal-mcell:nth-child(7n) { border-right: none; }
.cal-mcell.cal-out { background: rgba(127,127,127,.04); }
.cal-mcell.cal-out .cal-mdate { color: var(--text-3); opacity: .55; }
.cal-mcell.cal-today { background: var(--accent-dim); }
.cal-mdate { font-size: 12px; font-weight: 700; color: var(--text-2); }
.cal-mcell.cal-today .cal-mdate { color: var(--accent); }
.cal-mchips { display: flex; flex-direction: column; overflow: hidden; }
/* Week view */
.cal-week { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.cal-week::-webkit-scrollbar { width: 6px; }
.cal-week::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
/* Every row uses the SAME track template; min-width:0 on the cells (below) stops a
   long chip from widening its column past 1fr — that was the posted-row misalignment. */
.cal-week-head, .cal-allday-row, .cal-hrow { display: grid; grid-template-columns: 52px repeat(7, 1fr); }
/* Head + posted row stay pinned while the hours scroll. One scroll container means
   all rows share identical column widths (no scrollbar-width drift). */
.cal-week-head { position: sticky; top: 0; z-index: 3; height: 44px; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.cal-dhead { display: flex; flex-direction: column; justify-content: center; text-align: center; border-left: 1px solid var(--border); }
.cal-dhead .cal-dow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.cal-dhead .cal-dnum { font-size: 15px; font-weight: 700; color: var(--text-2); }
.cal-dhead.cal-today { background: var(--accent-dim); }
.cal-dhead.cal-today .cal-dnum { color: var(--accent); }
.cal-allday-row { position: sticky; top: 44px; z-index: 2; background: var(--bg-card); border-bottom: 1px solid var(--border); min-height: 24px; }
.cal-allday-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; }
.cal-allday-cell { min-width: 0; border-left: 1px solid var(--border); padding: 3px; overflow: hidden; }
.cal-hrow { border-bottom: 1px solid var(--border); min-height: 40px; }
.cal-hlabel { font-size: 10px; color: var(--text-3); text-align: right; padding: 2px 6px 0 0; white-space: nowrap; }
.cal-cell { position: relative; min-width: 0; border-left: 1px solid var(--border); padding: 2px 3px; cursor: pointer; transition: background .12s; overflow: hidden; }
.cal-cell:hover { background: var(--accent-dim); }
.cal-cell:hover::after { content: '+'; position: absolute; top: 1px; right: 5px; font-size: 13px; font-weight: 700; line-height: 1; color: var(--accent); opacity: .55; pointer-events: none; }
/* today's column gets a faint persistent band (turns accent on hover) */
.cal-col-today { background: rgba(127,127,127,.05); }
.cal-cell.cal-col-today:hover { background: var(--accent-dim); }
/* Schedule-into-slot picker */
.cal-pick-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-height: 360px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.cal-pick-item { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.cal-pick-item:hover { border-color: var(--accent); background: var(--accent-dim); }
.cal-pick-thumb { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #000; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-weight: 700; font-size: 16px; }
.cal-pick-vid { background: #111; color: var(--text-2); }
.cal-pick-noimg { background: var(--bg-input); }
.cal-pick-meta { flex: 1; min-width: 0; }
.cal-pick-title { font-size: 13px; font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; }
.cal-pick-chips { margin-top: 4px; }
.cal-pick-btn { flex-shrink: 0; padding: 6px 12px; }
.cal-pick-empty { font-size: 13px; color: var(--text-3); padding: 16px 4px; text-align: center; }

/* Review / schedule modal (namespaced so it never clashes with the Skip Trace modal) */
.smodal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 24px; }
.smodal-overlay.open { display: flex; }
.smodal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; width: min(760px, 100%); max-height: 88vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.5); scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.smodal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-card); z-index: 1; }
.smodal-title { font-size: 17px; font-weight: 700; color: var(--text-1); line-height: 1.3; }
.smodal-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.smodal-close { background: none; border: none; color: var(--text-3); font-size: 26px; cursor: pointer; line-height: 1; padding: 0 4px; }
.smodal-close:hover { color: var(--text-1); }
.smodal-body { padding: 18px 20px 22px; }
.smodal-media { width: 100%; border-radius: 10px; border: 1px solid var(--border); max-height: 340px; object-fit: contain; background: #000; margin-bottom: 16px; }
.smodal-msg { font-size: 12px; margin-top: 12px; min-height: 16px; }
.smodal-msg.ok { color: var(--green); }
.smodal-msg.err { color: var(--red); }
.copy-block { margin-bottom: 16px; }
.copy-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.copy-text { font-size: 13px; line-height: 1.55; color: var(--text-2); white-space: pre-wrap; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.copy-textarea { width: 100%; font-size: 13px; line-height: 1.55; color: var(--text-1); background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; resize: vertical; font-family: inherit; field-sizing: content; min-height: 120px; }
.copy-textarea:focus { outline: none; border-color: var(--accent); }
.copy-edit-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.copy-saved-msg { font-size: 12px; color: var(--text-3); }
.copy-saved-msg.ok { color: var(--green); }
.copy-saved-msg.err { color: var(--red); }
.sched-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.sched-row input[type="datetime-local"] { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-1); font-family: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; color-scheme: dark; }
body[data-theme="light"] .sched-row input[type="datetime-local"] { color-scheme: light; }
.sbtn { font-family: inherit; font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; transition: opacity .15s, background .15s; }
.sbtn-primary { background: var(--accent); color: #fff; }
.sbtn-primary:hover { opacity: .9; }
.sbtn-ghost { background: var(--bg-input); border-color: var(--border); color: var(--text-2); text-decoration: none; display: inline-block; }
.sbtn-ghost:hover { color: var(--text-1); border-color: var(--text-2); }
.sbtn-danger { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.4); color: var(--red); }
.sbtn:disabled { opacity: .45; cursor: not-allowed; }
.img-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; margin-bottom: 10px; }
.img-thumb { position: relative; aspect-ratio: 1; border-radius: 7px; overflow: hidden; cursor: grab; border: 2px solid transparent; transition: border-color .15s, opacity .15s, box-shadow .15s; background: #000; }
.img-thumb:active { cursor: grabbing; }
.img-thumb:hover { box-shadow: 0 0 0 2px var(--accent); }
/* Persistent grab handle so it's obvious the photos can be dragged to reorder. */
.img-thumb .thumb-grip { position: absolute; left: 4px; bottom: 4px; z-index: 2; display: flex; align-items: center; justify-content: center; height: 22px; min-width: 22px; padding: 0 4px; background: rgba(0,0,0,.6); color: #fff; border-radius: 6px; font-size: 15px; line-height: 1; letter-spacing: 1px; pointer-events: none; }
/* Hover hint bar reinforcing the drag-to-reorder action. */
.img-thumb .thumb-draghint { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 12px 5px 4px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .02em; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0)); opacity: 0; transition: opacity .15s; pointer-events: none; }
.img-thumb:hover .thumb-draghint { opacity: 1; }
.img-thumb:hover .thumb-grip { opacity: 0; }
/* SortableJS drag states (mouse + touch). The ghost = the gap showing the landing
   spot; chosen = the picked photo; dragging = the copy following the pointer/finger. */
.img-thumb.thumb-ghost { opacity: .45; outline: 2px dashed var(--accent); outline-offset: -2px; box-shadow: none !important; }
.img-thumb.thumb-ghost img { visibility: hidden; }
.img-thumb.thumb-chosen { box-shadow: 0 8px 22px rgba(0,0,0,.45); }
.img-thumb.thumb-dragging { opacity: .95; }
.img-thumb.thumb-ghost .thumb-draghint, .img-thumb.thumb-ghost .thumb-grip { opacity: 0; }
.img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .15s; }
.img-thumb.unselected { opacity: .4; }
.img-thumb.unselected img { filter: grayscale(.4); }
.img-thumb.selected { border-color: var(--accent); }
.img-thumb .thumb-num { position: absolute; top: 4px; left: 4px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.img-thumb .thumb-check { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 5px; opacity: 0; transition: opacity .15s; pointer-events: none; }
.img-thumb:hover .thumb-check { opacity: 1; }
/* Per-image delete (X) — permanently removes the image from the post. Always
   visible (works on touch, no hover needed). */
.img-thumb .thumb-del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,.62); color: #fff; font-size: 16px; line-height: 1; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background .15s; z-index: 2; }
.img-thumb .thumb-del:hover { background: var(--red); }
.img-gallery-footer { font-size: 11px; color: var(--text-3); margin-bottom: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.img-gallery-footer strong { color: var(--text-2); }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.93); z-index: 2000; display: none; flex-direction: column; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox-img-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; flex: 1; min-height: 0; padding: 20px 64px; box-sizing: border-box; }
.lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; display: block; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.15); color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: background .15s; flex-shrink: 0; }
.lightbox-nav:hover { background: rgba(255,255,255,.25); }
.lightbox-nav.lb-prev { left: 12px; }
.lightbox-nav.lb-next { right: 12px; }
.lightbox-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.15); color: #fff; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: background .15s; z-index: 1; }
.lightbox-close:hover { background: rgba(255,255,255,.25); }
.lightbox-footer { display: flex; gap: 12px; align-items: center; padding: 14px 20px 20px; flex-shrink: 0; width: 100%; max-width: 700px; box-sizing: border-box; justify-content: center; }
.lightbox-counter { font-size: 13px; color: rgba(255,255,255,.5); min-width: 50px; text-align: center; }
.lightbox-toggle { font-family: inherit; font-size: 13px; font-weight: 700; padding: 9px 22px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; transition: all .15s; min-width: 150px; text-align: center; }
.lightbox-toggle.is-selected { background: var(--accent); color: #fff; border-color: var(--accent); }
.lightbox-toggle.is-selected:hover { opacity: .85; }
.lightbox-toggle.not-selected { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.2); }
.lightbox-toggle.not-selected:hover { background: rgba(255,255,255,.15); color: #fff; }
.lightbox-hint { font-size: 11px; color: rgba(255,255,255,.3); text-align: center; padding-bottom: 8px; }
.chan-select { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.chan-select-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 6px; }
.chan-btn { font-family: inherit; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 99px; cursor: pointer; transition: all .15s; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-3); display: inline-flex; align-items: center; gap: 5px; }
.chan-btn.active-Facebook  { color: var(--blue); border-color: rgba(96,165,250,.6); background: rgba(96,165,250,.15); }
.chan-btn.active-Instagram { color: #e879c9; border-color: rgba(232,121,201,.6); background: rgba(232,121,201,.15); }
.chan-btn:not([class*="active"]) { opacity: .5; }
.chan-btn:hover { opacity: 1; }
.chan-btn.has-error { border-color: rgba(248,113,113,.7) !important; }
.chan-btn.has-warn  { border-color: rgba(251,191,36,.6) !important; }
.chan-issues { margin-bottom: 14px; display: flex; flex-direction: column; gap: 5px; }
.chan-issue { font-size: 12px; padding: 7px 11px; border-radius: 7px; line-height: 1.4; display: flex; align-items: flex-start; gap: 7px; }
.chan-issue-error { background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.3); color: var(--red); }
.chan-issue-warn  { background: rgba(251,191,36,.09); border: 1px solid rgba(251,191,36,.3); color: var(--amber); }
.chan-issue-ok    { background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.25); color: var(--green); font-size: 11px; }
.sched-status { font-size: 11px; color: var(--text-3); display: flex; align-items: center; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.sched-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.sched-dot.stale { background: var(--amber); }
.sched-dot.dead  { background: #f87171; }
.post-error-box { margin-bottom: 14px; padding: 9px 12px; border-radius: 8px; font-size: 12px; line-height: 1.5; background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.3); color: var(--red); }
.post-error-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; opacity: .7; }
select.dash-select { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-1); font-family: inherit; font-size: 13px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
input.dash-num { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-1); font-family: inherit; font-size: 13px; padding: 7px 10px; border-radius: 8px; width: 80px; }
.bulk-preview-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.bulk-preview-list li { font-size: 12px; color: var(--text-2); display: flex; gap: 8px; }
.bulk-preview-list li .bpl-time { color: var(--text-3); white-space: nowrap; flex-shrink: 0; }

/* ── Create Content generators (portable; buttons namespaced `cc-btn`) ──────── */
.cc-form-body { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.cc-form-body::-webkit-scrollbar { width: 8px; }
.cc-form-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.cc-form-body::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
.cc-icon { width: 26px; height: 26px; flex-shrink: 0; background: var(--accent-dim); border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); margin-right: 4px; }
.cc-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cc-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }
.cc-badge-image { background: rgba(96,165,250,.12); color: var(--blue); }
.cc-badge-video { background: rgba(167,139,250,.12); color: #a78bfa; }
.cc-badge-multi { background: rgba(45,212,191,.12); color: #2dd4bf; }
.fld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.fld.hidden { display: none; }
/* .fld sets display:flex, which beats the plain [hidden] UA rule, so the `hidden`
   attribute silently does nothing on a .fld. Restore it for ALL of them (the Pending
   image-mode URL / photo-source fields rely on this). */
.fld[hidden] { display: none; }
/* .fld sets display:flex, which beats the plain [hidden] UA rule — restore hiding
   for the manual-upload field toggled via the hidden attribute. */
.cc-manual-file[hidden] { display: none; }
.cc-file { font-size: 13px; color: var(--text-2); padding: 8px; }
.cc-file::file-selector-button { font: inherit; margin-right: 10px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text-1); cursor: pointer; }
.cc-hint { font-size: 11px; color: var(--text-3); line-height: 1.35; }
.pp-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.pp-input, .pp-select { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-1); font-family: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; width: 100%; box-sizing: border-box; color-scheme: dark; }
body[data-theme="light"] .pp-input, body[data-theme="light"] .pp-select { color-scheme: light; }
.pp-input:focus, .pp-select:focus { outline: none; border-color: var(--accent); }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg { display: flex; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.seg button { font-family: inherit; font-size: 12px; font-weight: 700; padding: 8px 12px; flex: 1; background: transparent; color: var(--text-3); border: none; cursor: pointer; }
.seg button.on { background: var(--accent); color: #fff; }
.cc-btn { font-family: inherit; font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; transition: opacity .15s; white-space: nowrap; }
.cc-btn-primary { background: var(--accent); color: #fff; width: 100%; }
.cc-btn-primary:hover { opacity: .88; }
.cc-btn:disabled { opacity: .4; cursor: not-allowed; }
.cc-btn-sm { font-size: 12px; padding: 6px 12px; }
.cc-btn-ghost { background: var(--bg-input); border-color: var(--border); color: var(--text-2); text-decoration: none; display: inline-block; }
.cc-btn-ghost:hover { color: var(--text-1); border-color: var(--text-2); }
.pp-hint { font-size: 11px; color: var(--text-3); margin-top: 5px; margin-bottom: 10px; }
.pp-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.drop { border: 2px dashed var(--border); border-radius: 9px; padding: 14px; text-align: center; color: var(--text-3); font-size: 12px; cursor: pointer; transition: border-color .15s, background .15s; margin-bottom: 10px; }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-dim); }
.drop.has-file { border-style: solid; color: var(--text-2); }
.drop img { max-height: 100px; border-radius: 7px; margin-top: 7px; display: block; margin-left: auto; margin-right: auto; }
.pp-status { display: none; padding-top: 10px; } .pp-status.show { display: block; }
.pp-steps { list-style: none; margin: 0; padding: 0; }
.pp-step { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--text-3); padding: 5px 0; }
.pp-step .dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 9px; }
.pp-step.active { color: var(--text-1); } .pp-step.active .dot { border-color: var(--accent); border-top-color: transparent; animation: spin .8s linear infinite; }
.pp-step.done { color: var(--text-2); } .pp-step.done .dot { border-color: var(--green); background: var(--green); color: #fff; }
.pp-result { display: none; padding-top: 10px; } .pp-result.show { display: block; }
.pp-divider { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
.pp-result-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pp-result-title { font-size: 13px; font-weight: 700; color: var(--text-1); }
.pp-badge-green { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: rgba(74,222,128,.12); color: var(--green); }
.pp-preview { font-size: 11px; line-height: 1.55; color: var(--text-2); white-space: pre-wrap; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; margin-bottom: 10px; }
.pp-meta { font-size: 11px; color: var(--text-3); margin-bottom: 8px; }
.pp-error { display: none; margin-top: 8px; padding: 9px 11px; border-radius: 8px; font-size: 12px; background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.35); color: var(--red); }
.pp-error.show { display: block; }
.result-img { width: 100%; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 10px; }
/* A finished VIDEO result (esp. a 9:16 vertical) shouldn't tower down the page on a normal
   desktop — cap its height and center it, like the Talking Head preview does. */
video.result-img { width: auto; max-width: 100%; max-height: 46vh; display: block; margin: 0 auto 10px; background: #000; }

/* Talking Head studio — background grid + busy spinner */
.ths-bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ths-bg { position: relative; border: 2px solid var(--border); border-radius: 10px; overflow: hidden; background: #000; }
.ths-bg.saved { border-color: var(--accent); }
.ths-bg-img { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; position: relative; }
.ths-bg-img img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; }
.ths-bg-zoom { position: absolute; top: 6px; right: 6px; background: rgba(15,23,42,.72); color: #fff; font-size: 13px; line-height: 1; padding: 4px 6px; border-radius: 6px; opacity: 0; transition: opacity .15s; }
.ths-bg-img:hover .ths-bg-zoom { opacity: 1; }
.ths-bg-actions { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 4px; padding: 6px; background: linear-gradient(transparent, rgba(0,0,0,.78)); }
.ths-bg-actions .cc-btn { padding: 5px 8px; font-size: 11px; flex: 1; }
/* Full-size background preview lightbox */
.ths-lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; padding: 20px; }
.ths-lb-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; max-height: 94vh; }
.ths-lb-inner img { max-height: 82vh; max-width: 92vw; border-radius: 12px; box-shadow: 0 12px 44px rgba(0,0,0,.55); }
.ths-lb-bar { display: flex; gap: 10px; }
.ths-busy { display: flex; align-items: center; gap: 11px; font-size: 13.5px; font-weight: 600; color: var(--text-1);
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.ths-spin { width: 19px; height: 19px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: ths-spin .8s linear infinite; flex-shrink: 0; }
@keyframes ths-spin { to { transform: rotate(360deg); } }
/* 9:16 preview/result videos: cap by height so a tall vertical clip never overflows the
   viewport on a wide desktop widget (was rendering taller than the screen). */
.ths-media { display: block; margin: 0 auto; width: auto; max-width: 100%; max-height: 58vh; border-radius: 8px; border: 1px solid var(--border); background: #000; }
/* Talking Head final result preview (rendered by showGenResult with .result-img): it's a tall 9:16
   clip, so cap it by height and center it instead of stretching to full container width. */
#ths-media .result-img { width: auto; max-width: 100%; max-height: 58vh; display: block; margin: 0 auto; background: #000; }

/* Infographic widget — article picker list */
.ig-list { max-height: 420px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); scrollbar-width: thin; scrollbar-color: var(--border) transparent; -webkit-overflow-scrolling: touch; }
.ig-list::-webkit-scrollbar { width: 6px; }
.ig-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.ig-hint { font-size: 12px; color: var(--text-3); padding: 14px 12px; text-align: center; }
/* Row = a selectable main area + a separate "View article" button. */
.ig-item { display: flex; align-items: center; gap: 8px; width: 100%; border-bottom: 1px solid var(--border); padding: 9px 11px; transition: background .12s; }
.ig-item:last-child { border-bottom: none; }
.ig-item:hover { background: var(--bg-hover); }
.ig-item.sel { background: var(--accent-dim); }
.ig-item.sel .ig-item-title { color: var(--accent); font-weight: 600; }
.ig-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; text-align: left; background: none; border: none; color: var(--text-2); font-family: inherit; cursor: pointer; }
.ig-item-title { flex: 1 1 140px; min-width: 0; font-size: 12.5px; line-height: 1.4; color: var(--text-1); }
.ig-item-src { flex-shrink: 0; font-size: 10px; color: var(--text-3); white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.ig-item-cat { flex-shrink: 0; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); background: var(--bg-card); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; white-space: nowrap; }
/* "Top Picks" — best infographic candidates floated to the top of the list */
.ig-item-istop { box-shadow: inset 3px 0 0 #ffb300; }
.ig-item-top { flex-shrink: 0; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6b4e00; background: linear-gradient(180deg, #ffd66b, #ffb300); border-radius: 5px; padding: 2px 6px; white-space: nowrap; }
.ig-view-btn { flex-shrink: 0; display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--accent); background: var(--bg-card); border: 1px solid var(--accent); border-radius: 6px; padding: 7px 10px; text-decoration: none; cursor: pointer; transition: background .12s, color .12s; }
.ig-view-btn:hover { background: var(--accent); color: #fff; }

/* Lead Finder widget — results table */
.lf-table-wrap { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.lf-table-wrap::-webkit-scrollbar { width: 6px; }
.lf-table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.lf-table { width: 100%; border-collapse: collapse; font-size: calc(11.5px * var(--w-fs, 1)); }
.lf-table th { position: sticky; top: 0; background: var(--bg-card); text-align: left; font-size: calc(10px * var(--w-fs, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.lf-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: top; }
.lf-table tr:last-child td { border-bottom: none; }
.lf-table a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.lf-name { color: var(--text-1); font-weight: 600; }
.lf-email { color: var(--blue); word-break: break-all; }
.lf-noemail { color: var(--text-3); }
.lf-empty { text-align: center; color: var(--text-3); padding: 18px 8px; }

/* ── Lead Finder page (fixed layout) ───────────────────────────────────────── */
.finder-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; margin-bottom: 22px; }
.finder-sub { font-size: 13px; color: var(--text-3); line-height: 1.5; margin-bottom: 14px; max-width: 760px; }
.finder-counties { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cty-chk { display: inline-flex; align-items: center; gap: 7px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--text-2); cursor: pointer; user-select: none; transition: border-color .15s, color .15s; }
.cty-chk:hover { border-color: var(--text-3); color: var(--text-1); }
.cty-chk input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; margin: 0; }
.cty-chk.cty-all { font-weight: 600; color: var(--text-1); }
.finder-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.finder-run { flex: 0 0 auto; padding: 9px 18px; }
.finder-lastrun { font-size: 12.5px; color: var(--text-3); }
.finder-error { display: none; margin-top: 12px; padding: 9px 12px; border-radius: 8px; font-size: 13px; background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.35); color: var(--red); }
.finder-error.show { display: block; }
.finder-status { margin-top: 14px; }
.finder-status.hidden { display: none; }   /* steps + log box only show while a search runs */
.fc-toggle-wrap { position:relative; display:inline-flex; align-items:center; cursor:pointer; }
.fc-toggle-wrap input { opacity:0; width:0; height:0; position:absolute; }
.fc-toggle-track { width:40px; height:22px; background:var(--border); border-radius:11px; transition:background .2s; display:flex; align-items:center; padding:2px; }
.fc-toggle-wrap input:checked + .fc-toggle-track { background:var(--accent); }
.fc-toggle-thumb { width:18px; height:18px; background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.fc-toggle-wrap input:checked + .fc-toggle-track .fc-toggle-thumb { transform:translateX(18px); }
.finder-logbox { margin-top: 10px; background: var(--bg-2, #111); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; max-height: 180px; overflow-y: auto; font-size: 11.5px; font-family: monospace; color: var(--text-3); line-height: 1.6; }
.log-line { white-space: pre-wrap; }
.log-line.log-ok { color: var(--green, #4ade80); }
.step-spinner { display: inline-block; width: 8px; height: 8px; border: 2px solid var(--accent); border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.finder-runs-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin: 18px 0 8px; }

/* ── Transaction Coordinator widget (portable; seg namespaced `tc-seg`) ─────── */
.tc-body { overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 18px; padding: 16px 18px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.tc-body::-webkit-scrollbar { width: 8px; }
.tc-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.tc-card { background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.tc-card h2 { font-size: 15px; margin: 0 0 4px; color: var(--text-1); }
.tc-card .sub { font-size: 13px; color: var(--text-3); margin: 0 0 18px; }
.tc-seg { display: inline-flex; background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px; padding: 3px; margin-bottom: 18px; }
.tc-seg button { border: none; background: transparent; color: var(--text-3); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 7px 22px; border-radius: 7px; transition: background .15s, color .15s; }
.tc-seg button.active { background: var(--accent); color: #fff; }
.dropzone { border: 1.5px dashed var(--border); border-radius: 12px; padding: 34px 18px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; color: var(--text-3); }
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: var(--accent-dim); color: var(--text-2); }
.dropzone svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.6; margin-bottom: 8px; }
.dropzone .dz-main { font-size: 14px; font-weight: 600; color: var(--text-2); }
.dropzone .dz-sub  { font-size: 12px; margin-top: 4px; }
.dz-file { margin-top: 14px; font-size: 13px; color: var(--text-1); display: none; }
.dz-file.show { display: block; }
.dz-file strong { color: var(--accent); }
.tc-upload-actions { margin-top: 18px; display: flex; gap: 10px; align-items: center; }
#review-panel { display: none; }
#review-panel.show { display: block; }
.form-section { margin-top: 6px; }
.form-section + .form-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border-soft); }
.form-section h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin: 0 0 14px; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: 12px; color: var(--text-3); font-weight: 600; }
.field input, .field select { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; color: var(--text-1); font-family: inherit; font-size: 13px; width: 100%; box-sizing: border-box; }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
.party-row { border: 1px solid var(--border-soft); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.party-row .party-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.party-row .party-head span { font-size: 12px; font-weight: 700; color: var(--text-2); }
.link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12px; font-family: inherit; padding: 0; }
/* Compact Find / Add / Update action buttons in the TC review form */
.tc-acts { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; vertical-align: middle; letter-spacing: normal; }
.tc-act { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-2);
  font-size: 11px; font-weight: 600; font-family: inherit; text-transform: none;
  padding: 4px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: all 0.15s; }
.tc-act:hover { color: var(--text-1); border-color: var(--accent); background: var(--bg-hover); }
.tc-act-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.tc-act-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.tc-act-status { font-size: 12px; color: var(--text-3); text-transform: none; letter-spacing: normal; font-weight: 600; }
/* Party-row Follow Up Boss autocomplete (mirrors Partner Network .pn-ac-*) */
.tc-ac-wrap { position: relative; }
.tc-ac-menu { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 3px);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-md); max-height: 230px; overflow-y: auto; }
.tc-ac-menu.hidden { display: none; }
.tc-ac-item { display: flex; flex-direction: column; gap: 1px; padding: 7px 11px; cursor: pointer; }
.tc-ac-item:hover { background: var(--bg-hover); }
.tc-ac-name { font-size: 13px; color: var(--text-1); }
.tc-ac-email { font-size: 12px; color: var(--text-3); }
.chk-row { display: flex; flex-wrap: wrap; gap: 18px; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.chk input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.toggle-line { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13px; color: var(--text-2); }
.review-actions { margin-top: 24px; display: flex; gap: 10px; }
.insp-types { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-chk { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 6px 13px; font-size: 12px; color: var(--text-2); cursor: pointer; }
.pill-chk input { accent-color: var(--accent); }
.muted { color: var(--text-3); font-size: 12px; }
.review-banner { font-size: 13px; color: var(--text-2); background: var(--accent-dim); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 18px; }
.btn-ghost { background: var(--bg-input); color: var(--text-2); border: 1px solid var(--border); }
.tc-result { font-size: 13px; line-height: 1.7; color: var(--text-2); }
.tc-result .ok { color: var(--green); }
.tc-result .warn { color: var(--amber); }
.cw-modal-tb { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--bg-base); }
.cw-modal-tb select, .cw-modal-tb button, .cw-modal-tb input { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-2); font-family: inherit; font-size: 12px; padding: 4px 7px; border-radius: 6px; cursor: pointer; }
.cw-modal-tb button[data-cmd] { font-weight: 700; color: var(--text-3); min-width: 30px; }
.cw-modal-tb button:hover { color: var(--text-1); background: var(--bg-hover); }
.cw-modal-tb label { font-size: 11px; color: var(--text-3); margin-left: 4px; }
.cw-modal-tb .cw-modal-pad { width: 52px; text-align: center; cursor: text; }
.cw-modal-sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; }
.cw-color { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--border); padding: 0; cursor: pointer; }
.cw-modal-editor { flex: 1; min-height: 240px; overflow-y: auto; padding: 18px; font-size: 14px; line-height: 1.7; color: var(--text-1); outline: none; box-sizing: border-box; }
.cw-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); }
.cw-modal-cancel { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-2); font-family: inherit; font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 8px; cursor: pointer; }
.cw-modal-cancel:hover { color: var(--text-1); border-color: var(--text-2); }
.cw-modal-save { background: var(--accent); border: 1px solid var(--accent); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 8px; cursor: pointer; }
.cw-modal-save:hover { opacity: .9; }
.cw-modal-link { padding: 10px 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 5px; }
.cw-modal-link label { font-size: 11px; color: var(--text-3); }
.cw-modal-link small { color: var(--text-3); font-size: 10px; }
.cw-link-input { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-1); font-family: inherit; font-size: 13px; padding: 7px 10px; border-radius: 7px; width: 100%; box-sizing: border-box; }
.cw-link-input:focus { outline: none; border-color: var(--accent); }
.cw-link-indicator { font-size: 13px; opacity: .7; }
/* Shared heading styles for both the widget display and the modal editor */
.cw-disp h1, .cw-modal-editor h1 { font-size: 24px; font-weight: 700; margin: 8px 0 6px; }
.cw-disp h2, .cw-modal-editor h2 { font-size: 19px; font-weight: 700; margin: 6px 0 4px; }
.cw-disp h3, .cw-modal-editor h3 { font-size: 15px; font-weight: 700; margin: 4px 0 2px; }
.cw-disp p, .cw-modal-editor p { margin: 0 0 6px; }
.cw-disp ul, .cw-modal-editor ul { padding-left: 20px; margin: 0 0 6px; }
.cw-disp li, .cw-modal-editor li { margin: 0 0 3px; }
/* Kill trailing margin so the text sits flush at the bottom like other widgets */
.cw-disp > *:last-child, .cw-modal-editor > *:last-child { margin-bottom: 0; }
.cw-disp > *:first-child, .cw-modal-editor > *:first-child { margin-top: 0; }

.cw-del { padding: 2px 6px; background: rgba(248,113,113,.15); border: 1px solid rgba(248,113,113,.35); color: var(--red); border-radius: 4px; font-size: 16px; cursor: pointer; }
.cw-del:hover { background: rgba(248,113,113,.35); }

.mini-btn { padding: 3px 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.8); border-radius: 4px; font-size: 11px; font-weight: 700; cursor: pointer; transition: all .15s; }
.mini-btn:hover { background: rgba(255,255,255,.25); color: #fff; }
.mini-btn.active { background: rgba(255,255,255,.35); border-color: rgba(255,255,255,.5); color: #fff; }

/* ── Shared cross-page classes (used by catalog widgets on home) ─────────── */

/* Clickable table rows (FUB feed, etc.) */
.feed-row { cursor: pointer; transition: background .15s, box-shadow .15s; }
.feed-row:hover { background: var(--accent-dim); box-shadow: inset 3px 0 0 var(--accent); }
.feed-row:hover td { color: var(--text-1); }

/* Status pills */
.pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.pill-needs     { color: var(--amber); background: rgba(251,191,36,.12); }
.pill-approved  { color: var(--green); background: rgba(74,222,128,.12); }
.pill-scheduled { color: var(--blue); background: rgba(96,165,250,.12); }
.pill-posted    { color: var(--text-3); background: var(--bg-input); }
.pill-failed    { color: var(--red); background: rgba(248,113,113,.14); }

/* Widget header action link (small button in widget header) */
.widget-header-action {
  font-size: 11px; font-weight: 700; color: var(--text-3); text-decoration: none;
  padding: 3px 9px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-input); white-space: nowrap; transition: color .15s, border-color .15s;
}
.widget-header-action:hover { color: var(--text-1); border-color: var(--text-2); }

/* ── Animations ──────────────────────────────────────────────────────────── */

@keyframes pulse      { 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes pulse-text { 0%,100%{opacity:1} 50%{opacity:0.7} }
@keyframes spin       { to{transform:rotate(360deg)} }

/* ── Mobile ──────────────────────────────────────────────────────────────── */

/* ── Responsive grid (tablet + phone): let the widget grid shrink below its
   desktop min-width so the columns can collapse. gridstack sets the actual
   2-column / 1-column widths in JS (grid-system.js); this just removes the
   fixed-width floors that would otherwise force horizontal scrolling. ── */
@media (max-width: 1024px) {
  .grid-stack { min-width: 0; }
  .grid-stack-item[gs-id="fub-totals"]  > .grid-stack-item-content > .widget,
  .grid-stack-item[gs-id="fub-sources"] > .grid-stack-item-content > .widget,
  .grid-stack-item[gs-id="fub-calls"]   > .grid-stack-item-content > .widget,
  .grid-stack-item[gs-id^="social:calendar"] > .grid-stack-item-content > .widget { min-width: 0; }
}

@media (max-width: 768px) {
  /* Mobile: hide the sidebar entirely off-screen by default. The page-header
     hamburger is the sole entry point. Tapping it adds .nav-mobile-open which
     slides the sidebar in from the left as a full-width overlay. The slide
     transform is hardware-accelerated and has no JS-class flash. */
  .sidebar {
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    /* min-height:100vh (set on desktop) uses the LARGE viewport on mobile, so the
       fixed sidebar grows taller than the screen and its footer (Admin / Sign Out)
       falls below the visible area / behind the browser toolbar. Pin it to the
       dynamic viewport height instead so the footer is always on screen. */
    min-height: 0;
    height: 100dvh;
  }
  body.nav-mobile-open .sidebar {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }
  /* Keep the Admin / Sign Out footer clear of the phone's home indicator. */
  .sidebar-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

  /* With the sidebar fully off-screen, content uses the entire viewport width. */
  .page-wrap { margin-left: 0 !important; }

  .sidebar-overlay { display: none; }
  .sidebar-overlay.open { display: block; }

  /* Hamburger button in the page header (mobile only). Hidden on desktop. */
  .page-hamburger { display: inline-flex !important; }

  /* On mobile, hide the in-sidebar chevron toggle BY DEFAULT — the page-header
     hamburger replaces it as the menu entry point.
     EXCEPTION: when the sidebar is expanded as a mobile overlay (.nav-mobile-open),
     SHOW the chevron again so the user has an obvious close button inside the
     opened menu. */
  .sidebar-header .nav-toggle { display: none; }
  body.nav-mobile-open .sidebar-header .nav-toggle { display: inline-flex; }
  /* And rotate the in-sidebar chevron to point LEFT when open (visual cue
     that it closes the menu). */
  body.nav-mobile-open .sidebar-header .nav-toggle svg { transform: rotate(0deg); }

  /* The page-header hamburger uses the same double-chevron icon. The SVG is
     drawn as `<<` (pointing left), so we rotate it 180° BY DEFAULT (closed
     state) to point RIGHT — visually "open the menu over there". When the
     overlay IS open, drop the rotation so the chevron points LEFT — visually
     "close back to the page". */
  .page-hamburger svg { transform: rotate(180deg); transition: transform 0.2s ease; }
  body.nav-mobile-open .page-hamburger svg { transform: rotate(0deg); }

  /* The Admin settings flyout normally opens to the RIGHT of the sidebar
     (left: 100% + 10px) — off-screen on a phone, so the menu looked missing.
     On mobile, open it UPWARD and inside the sidebar width so it's fully on
     screen above the Admin button. */
  .settings-panel {
    left: 8px;
    right: 8px;
    width: auto;
    bottom: calc(100% + 8px);
    max-height: 60vh;
  }

  main { padding: 14px; }

  /* ── Layer 1 mobile polish (content only — no gridstack layout changes) ── */

  /* Page header + its action buttons wrap instead of overflowing off-screen */
  .page-head { flex-wrap: wrap; row-gap: 20px; }
  .page-head-actions { flex-wrap: wrap; }

  /* Two-column form rows (Create Content, detail forms) stack so fields aren't cramped */
  .form-2col { grid-template-columns: 1fr; }

  /* Modals use more of the small screen + a bit less padding */
  .smodal { width: 100%; max-height: 92vh; }
  .smodal-body { padding: 16px 16px 20px; }
  .modal { max-width: 100%; }
  .cw-modal { width: 100%; max-height: 92vh; }

  /* Thumb-friendly tap targets on the main action buttons (not tiny in-table btns) */
  .sbtn, .cc-btn, .chan-btn, .cc-btn-primary { min-height: 40px; }

  /* Slightly smaller in-widget table text so more fits before sideways scroll */
  .widget-table { font-size: calc(12px * var(--w-fs, 1)); }
}

/* ── Per-widget settings: gear button + popover ──────────────────────────── */

.widget-gear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-3);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.widget-gear:hover { color: var(--text-1); background: var(--bg-hover); }
.widget-gear svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Shared popover — appended to <body>, positioned by widget-settings.js */
.widget-settings-pop {
  position: fixed;
  z-index: 300;
  width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 14px;
  display: none;
}
.widget-settings-pop.open { display: block; }
.wsp-head {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-3); margin-bottom: 12px;
}
.wsp-label {
  font-size: 11px; font-weight: 600; color: var(--text-2);
  margin: 14px 0 6px;
}
.wsp-fs, .wsp-theme { display: flex; gap: 4px; }
.wsp-fs button, .wsp-theme button {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: 11px; font-weight: 600;
  padding: 6px 4px; border-radius: 7px;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.wsp-fs button:hover, .wsp-theme button:hover { color: var(--text-1); }
.wsp-fs button.active, .wsp-theme button.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.wsp-color-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.wsp-color-row + .wsp-color-row { margin-top: 8px; }
.wsp-color-row span { font-size: 12px; color: var(--text-2); }
.wsp-color-row input[type="color"] {
  width: 40px; height: 24px; padding: 0;
  border: 1px solid var(--border); border-radius: 6px;
  background: none; cursor: pointer;
}
.wsp-reset {
  width: 100%; margin-top: 14px;
  background: none; border: 1px solid var(--border);
  color: var(--text-3); font-size: 11px; font-weight: 600;
  padding: 7px; border-radius: 7px; cursor: pointer;
  font-family: inherit; transition: color 0.15s, border-color 0.15s;
}
.wsp-reset:hover { color: var(--red); border-color: var(--red); }


/* ────────────────────────────────────────────────────────────────────────────
   Static pages (non-Gridstack pages, mobile-friendly)
   ──────────────────────────────────────────────────────────────────────────── */

.static-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 4px;
}
.static-intro {
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 18px;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: var(--text-3);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--text-1); }
.tab.on   { color: var(--text-1); border-bottom-color: var(--accent); }

.tab-panels { position: relative; }
.tab-panel  { animation: fadeIn 0.12s ease-out; }
.tab-panel[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* ── Secondary pill sub-navbar (multi-widget tabs, e.g. New To Market) ──────── */
.cc-subtabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.cc-subtab {
  flex: 0 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.cc-subtab:hover { color: var(--text-1); border-color: var(--text-3); }
.cc-subtab.on {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.cc-subpanel { animation: fadeIn 0.12s ease-out; }
.cc-subpanel[hidden] { display: none; }
/* Members generate content branded to themselves only — hide the agent picker
   (server forces the agent for members regardless). Admins/managers keep it. */
body.cc-member .cc-agent-fld { display: none; }
/* "Made an image instead of a video" heads-up on a generator result. */
.cc-result-notice {
  margin: 10px 0;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(245, 158, 11, .12);
  border: 1px solid rgba(245, 158, 11, .35);
  color: #f59e0b;
  font-size: 12.5px;
  line-height: 1.4;
}
.cc-result-notice[hidden] { display: none; }

/* ── Static page on mobile: collapse multi-column field rows to one column ── */
@media (max-width: 640px) {
  .static-page { padding: 0; }
  .static-intro { font-size: 13px; }
  .tab { padding: 11px 12px; font-size: 12px; }

  /* Hard-clip the page to viewport width — overrides <main>'s desktop
     `overflow-x: auto` (which was kept for the widget-grid pages). */
  body[data-page="tracers"] {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }
  body[data-page="tracers"] .page-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
  }
  body[data-page="tracers"] main {
    overflow-x: hidden !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
  }

  .tracers-page .trace-fields.cols-2,
  .tracers-page .trace-fields.cols-3 { grid-template-columns: 1fr; }

  .tracers-page .pcard-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .tracers-page .pcard-row .lbl { font-size: 10px; }

  body[data-page="tracers"] .modal {
    width: 100%;
    max-width: none;
    max-height: 100vh;
    border-radius: 0;
  }
  body[data-page="tracers"] .modal-head { flex-wrap: wrap; row-gap: 8px; }
}

/* ── Skip Trace: Recent searches history ──────────────────────────────────── */
.history-section { margin-top: 32px; }
.history-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.history-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}
.history-clear {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-3); font-family: inherit;
  font-size: 11px; font-weight: 600;
  padding: 4px 12px; border-radius: 5px;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.history-clear:hover { color: var(--red); border-color: var(--red); }

.history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.history-empty {
  color: var(--text-3);
  font-size: 13px;
  padding: 18px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.history-empty.err { color: var(--red); border-color: var(--red); }

/* Multi-widget tab panels (e.g. New To Market stacks Image + Video generators)
   need vertical breathing room between the stacked widget cards. Applies on
   every viewport size. */
.tab-panel > .widget + .widget { margin-top: 28px; }

.history-item {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.history-item:hover { border-color: var(--accent); }
.history-open {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.history-open:hover { background: var(--bg-hover); }
.history-del {
  flex-shrink: 0;
  align-self: center;
  margin-right: 10px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-3);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.history-del:hover { color: var(--red); border-color: var(--red); }
.history-item-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.history-type {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  background: var(--bg-input);
  border-radius: 5px;
  padding: 3px 7px;
}
.history-summary {
  color: var(--text-1);
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-meta {
  display: flex; gap: 10px; align-items: center;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-3);
}
.history-count { font-weight: 600; }

@media (max-width: 640px) {
  .history-open { padding: 9px 11px; }
  .history-item-main { flex-direction: column; align-items: flex-start; gap: 4px; }
  .history-summary { white-space: normal; line-height: 1.35; }
  .history-del { padding: 3px 9px; margin-right: 8px; }
}

/* ── Pre-Foreclosures mobile polish ───────────────────────────────────────── */
@media (max-width: 640px) {
  /* Hard-clip the page to viewport width — overrides <main>'s desktop
     `overflow-x: auto` (which was kept for the widget-grid pages). */
  body[data-page="lead-scrapers"] {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }
  body[data-page="lead-scrapers"] .page-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
  }
  body[data-page="lead-scrapers"] main {
    overflow-x: hidden !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
  }

  body[data-page="lead-scrapers"] .total-num { font-size: 26px; }
  body[data-page="lead-scrapers"] .totals-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  body[data-page="lead-scrapers"] .total-card { padding: 12px; min-width: 0; }
  body[data-page="lead-scrapers"] .total-lbl { font-size: 11px; }

  body[data-page="lead-scrapers"] .county-grid { grid-template-columns: 1fr; gap: 10px; }
  body[data-page="lead-scrapers"] .county-card { min-width: 0; }
  body[data-page="lead-scrapers"] .stats-row { gap: 6px; }
  body[data-page="lead-scrapers"] .stat-box { padding: 8px; }
  body[data-page="lead-scrapers"] .stat-box .n { font-size: 18px; }
  body[data-page="lead-scrapers"] .card-actions { flex-direction: column; }
  body[data-page="lead-scrapers"] .card-actions .btn { width: 100%; }

  /* Recent Runs: flip table -> stacked cards. Hide the header row, treat each
     <tr> as a card, and label each cell via ::before so the column names are
     still visible without the header. */
  body[data-page="lead-scrapers"] .table-wrap {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }
  body[data-page="lead-scrapers"] .table-wrap table,
  body[data-page="lead-scrapers"] .table-wrap thead,
  body[data-page="lead-scrapers"] .table-wrap tbody,
  body[data-page="lead-scrapers"] .table-wrap tr,
  body[data-page="lead-scrapers"] .table-wrap td {
    display: block;
    width: 100%;
  }
  body[data-page="lead-scrapers"] .table-wrap thead { display: none; }
  body[data-page="lead-scrapers"] .table-wrap tr {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  body[data-page="lead-scrapers"] .table-wrap tr.empty-row { text-align: center; }
  body[data-page="lead-scrapers"] .table-wrap td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border: 0;
    text-align: right;
    font-size: 13px;
    white-space: normal;
  }
  body[data-page="lead-scrapers"] .table-wrap td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
  }
  /* Use nth-child to set labels for each column (1=County … 7=Actions). */
  body[data-page="lead-scrapers"] .table-wrap td:nth-child(1)::before { content: 'County'; }
  body[data-page="lead-scrapers"] .table-wrap td:nth-child(2)::before { content: 'Started'; }
  body[data-page="lead-scrapers"] .table-wrap td:nth-child(3)::before { content: 'Mode'; }
  body[data-page="lead-scrapers"] .table-wrap td:nth-child(4)::before { content: 'Status'; }
  body[data-page="lead-scrapers"] .table-wrap td:nth-child(5)::before { content: 'Created'; }
  body[data-page="lead-scrapers"] .table-wrap td:nth-child(6)::before { content: 'Updated'; }
  body[data-page="lead-scrapers"] .table-wrap td:nth-child(7)::before { content: none; }
  body[data-page="lead-scrapers"] .table-wrap td:nth-child(7) { justify-content: flex-end; gap: 8px; padding-top: 8px; }

  body[data-page="lead-scrapers"] .table-wrap td.county-name { font-weight: 600; font-size: 14px; }
  /* First row (county) gets a thicker separator below the name */
  body[data-page="lead-scrapers"] .table-wrap td:nth-child(1) {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
  }
  body[data-page="lead-scrapers"] .table-wrap tr.empty-row td {
    justify-content: center;
  }
  body[data-page="lead-scrapers"] .table-wrap tr.empty-row td::before { content: none; }

  /* ── Partner Network mobile polish (shares the 640px breakpoint) ────────── */
  /* Hard-clip everything to viewport width. The desktop `<main> { overflow-x: auto }`
     allows wide descendants to scroll, which is wrong on mobile static pages. */
  body[data-page="partner-network"] {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }
  body[data-page="partner-network"] .page-wrap {
    /* Constrain to viewport-minus-sidebar. Without this, flex:1 + margin-left
       pushes .page-wrap's outer box past the viewport, and overflow:hidden
       clips the right side of every card. */
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
  }
  body[data-page="partner-network"] main {
    overflow-x: hidden !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
  }
  /* Force every descendant to shrink-fit so flex/grid children don't blow out. */
  body[data-page="partner-network"] main * {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  body[data-page="partner-network"] .finder-card {
    width: 100%;
    box-sizing: border-box;
  }

  /* ── Create Content + Social Posts static pages (mobile) ────────────────── */
  body[data-page="create-content"],
  body[data-page="social"] {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }
  body[data-page="create-content"] .page-wrap,
  body[data-page="social"] .page-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
  }
  body[data-page="create-content"] main,
  body[data-page="social"] main {
    overflow-x: hidden !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
  }
  body[data-page="create-content"] main *,
  body[data-page="social"] main * {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Widget shell that the existing widgets render. On mobile they should be
     full-width of the tab panel — no card chrome, no fixed widths. */
  body[data-page="create-content"] .widget,
  body[data-page="social"] .widget {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
  }
  body[data-page="create-content"] .widget-header,
  body[data-page="social"] .widget-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
  }
  body[data-page="create-content"] .widget-body,
  body[data-page="social"] .widget-body {
    padding: 14px;
  }

  /* Social calendar is wide by nature — let it overflow within its tab so the
     rest of the page doesn't break. */
  body[data-page="social"] .tab-panel[data-panel="social:calendar"] { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── CRM static page (mobile) ──────────────────────────────────────────── */
  body[data-page="crm"] {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }
  body[data-page="crm"] .page-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
  }
  body[data-page="crm"] main {
    overflow-x: hidden !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
  }
  body[data-page="crm"] main * {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  body[data-page="crm"] .widget {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
  }
  body[data-page="crm"] .widget-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
  }
  body[data-page="crm"] .widget-body {
    padding: 14px;
  }
  body[data-page="crm"] .tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 4px 6px;
  }
  body[data-page="crm"] .tab {
    flex: 0 0 auto;
  }

  /* ── P&I Calculator mobile polish ───────────────────────────────────────── */
  body[data-page="pi-calculator"] {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }
  body[data-page="pi-calculator"] .page-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
  }
  body[data-page="pi-calculator"] main {
    overflow-x: hidden !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
  }

  /* Inputs card: each field stacks full-width on phones */
  body[data-page="pi-calculator"] .pi-inputs { padding: 14px !important; }
  body[data-page="pi-calculator"] .pi-inputs .field-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* Summary stat cards: 2 per row on mobile, smaller numbers */
  body[data-page="pi-calculator"] .pi-stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  body[data-page="pi-calculator"] .pi-stat { padding: 14px; min-width: 0; }
  body[data-page="pi-calculator"] .pi-stat-value { font-size: 20px; }
  body[data-page="pi-calculator"] .pi-stat-primary .pi-stat-value { font-size: 24px; }
  body[data-page="pi-calculator"] .pi-stat-label { font-size: 10px; margin-bottom: 6px; }
  /* The monthly-payment card spans the full width on mobile for emphasis */
  body[data-page="pi-calculator"] .pi-stat-primary { grid-column: 1 / -1; }

  /* Schedule card + header */
  body[data-page="pi-calculator"] .card { padding: 14px !important; }
  body[data-page="pi-calculator"] .pi-sched-head { gap: 8px; margin-bottom: 10px; }
  body[data-page="pi-calculator"] .pi-sched-head h2 { font-size: 14px; }

  /* Amortization table is inherently wide (5+ numeric columns). Keep horizontal
     scroll INSIDE the table wrapper so the page itself doesn't scroll. Also
     tighten cell padding and font so more columns fit on screen. */
  body[data-page="pi-calculator"] #pi-table-wrap {
    overflow-x: auto;
    max-height: 60vh;
    -webkit-overflow-scrolling: touch;
  }
  body[data-page="pi-calculator"] #pi-table { min-width: 0; font-size: 11px; }
  body[data-page="pi-calculator"] #pi-table th,
  body[data-page="pi-calculator"] #pi-table td { padding: 6px 8px; white-space: nowrap; }
  body[data-page="pi-calculator"] #pi-table th { font-size: 9px; }

  /* When a tab has many tabs (Create Content has 7), wrap to multiple rows so
     every tab is visible instead of horizontally scrolling. */
  body[data-page="create-content"] .tabs,
  body[data-page="social"] .tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 4px 6px;
  }
  body[data-page="create-content"] .tab,
  body[data-page="social"] .tab {
    flex: 0 0 auto;
    padding: 9px 11px;
    font-size: 12px;
  }

  /* ── Cost Sheet mobile polish ────────────────────────────────────────── */
  body[data-page="cost-sheet"] {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }
  body[data-page="cost-sheet"] .page-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
  }
  body[data-page="cost-sheet"] main {
    overflow-x: hidden !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
  }
  body[data-page="cost-sheet"] .cs-editor { position: static; padding: 14px; }
  body[data-page="cost-sheet"] .cs-editor .field-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  body[data-page="cost-sheet"] .cs-sheet { padding: 18px 16px; }
  body[data-page="cost-sheet"] .cs-sheet-head h2 { font-size: 16px; }
  body[data-page="cost-sheet"] .cs-total .v { font-size: 19px; }
  body[data-page="cost-sheet"] .cs-total .l { font-size: 11px; }
  body[data-page="cost-sheet"] .cs-line { font-size: 12.5px; }
  body[data-page="cost-sheet"] .cs-input { width: 100px; font-size: 12.5px; }

  body[data-page="partner-network"] main { max-width: 100%; min-width: 0; padding: 12px; }

  /* Jump nav: wrap to multiple rows so all 8 categories are visible without scrolling */
  body[data-page="partner-network"] .pn-jumpnav {
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px 0 10px;
  }
  body[data-page="partner-network"] .pn-jump { font-size: 11px; padding: 5px 10px; }

  /* Finder cards: reduce padding so they don't crowd content */
  body[data-page="partner-network"] .finder-card { padding: 14px 14px; }

  /* County checkboxes: smaller chips */
  body[data-page="partner-network"] .finder-counties { gap: 6px; }
  body[data-page="partner-network"] .cty-chk { padding: 6px 10px; font-size: 12px; }

  /* Action row: stack on narrow screens so buttons can be full-width */
  body[data-page="partner-network"] .finder-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  body[data-page="partner-network"] .finder-actions .btn { width: 100%; flex: none; }
  body[data-page="partner-network"] .finder-lastrun { font-size: 11px; text-align: center; }

  /* Firecrawl toggle card */
  body[data-page="partner-network"] .finder-card[style*="display:flex"] { flex-wrap: wrap; gap: 10px; }

  /* Recent searches: flip table -> stacked cards (same treatment as Pre-Foreclosures) */
  body[data-page="partner-network"] .table-wrap {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }
  body[data-page="partner-network"] .table-wrap table,
  body[data-page="partner-network"] .table-wrap thead,
  body[data-page="partner-network"] .table-wrap tbody,
  body[data-page="partner-network"] .table-wrap tr,
  body[data-page="partner-network"] .table-wrap td {
    display: block;
    width: 100%;
  }
  body[data-page="partner-network"] .table-wrap thead { display: none; }
  body[data-page="partner-network"] .table-wrap tr {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  body[data-page="partner-network"] .table-wrap tr.empty-row { text-align: center; }
  body[data-page="partner-network"] .table-wrap td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border: 0;
    text-align: right;
    font-size: 13px;
    white-space: normal;
  }
  body[data-page="partner-network"] .table-wrap td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
  }
  body[data-page="partner-network"] .table-wrap td:nth-child(1)::before { content: 'When'; }
  body[data-page="partner-network"] .table-wrap td:nth-child(2)::before { content: 'Counties'; }
  body[data-page="partner-network"] .table-wrap td:nth-child(3)::before { content: 'Found'; }
  body[data-page="partner-network"] .table-wrap td:nth-child(4)::before { content: 'New'; }
  body[data-page="partner-network"] .table-wrap td:nth-child(5)::before { content: 'Status'; }
  body[data-page="partner-network"] .table-wrap tr.empty-row td { justify-content: center; }
  body[data-page="partner-network"] .table-wrap tr.empty-row td::before { content: none; }

  /* Modals: full-screen on phones */
  body[data-page="partner-network"] .pn-modal-overlay { padding: 0; }
  body[data-page="partner-network"] .pn-modal,
  body[data-page="partner-network"] .pn-modal.pn-modal-sm {
    width: 100%;
    max-width: none;
    max-height: 100vh;
    border-radius: 0;
  }
  body[data-page="partner-network"] .pn-modal-head { padding: 14px 16px; }
  body[data-page="partner-network"] .pn-modal-body { padding: 14px 16px; }
  body[data-page="partner-network"] .pn-modal-foot { padding: 12px 16px; }

  /* Contact rows: stack name + button vertically */
  body[data-page="partner-network"] .pn-contact-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  body[data-page="partner-network"] .pn-email-btn,
  body[data-page="partner-network"] .pn-no-email { align-self: flex-end; }

  /* County selector inside email-compose modal: tighter wrap */
  body[data-page="partner-network"] .pn-cty-row { gap: 6px 14px; }

  /* PDF export dropdown: keep within viewport */
  body[data-page="partner-network"] .pdf-menu { left: 0; right: auto; min-width: 0; max-width: calc(100vw - 24px); }

  body[data-page="lead-scrapers"] .log-actions { flex-wrap: wrap; row-gap: 6px; }
  body[data-page="lead-scrapers"] .log-header { flex-wrap: wrap; row-gap: 8px; }

  /* ── FSBO mobile polish (mirrors Pre-Foreclosures) ────────────────────────── */
  body[data-page="fsbo"] {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }
  body[data-page="fsbo"] .page-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
  }
  body[data-page="fsbo"] main {
    overflow-x: hidden !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
  }

  body[data-page="fsbo"] .total-num { font-size: 24px; }
  /* Stat cards: grow to fill the row, wrap, share lines (never 1-per-line) */
  body[data-page="fsbo"] .totals-row {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  body[data-page="fsbo"] .total-card { flex: 1 1 90px; padding: 12px 8px; min-width: 0; text-align: center; }
  body[data-page="fsbo"] .total-lbl { font-size: 11px; }

  /* County buttons: grow to fill the row, wrap, share lines, centered text */
  body[data-page="fsbo"] .fsbo-counties { justify-content: center; }
  body[data-page="fsbo"] .county-pick { flex: 1 1 90px; padding: 13px 10px; text-align: center; }

  /* Breathing room above each section heading */
  body[data-page="fsbo"] .section-label { margin-top: 24px; }

  body[data-page="fsbo"] .table-wrap {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }
  body[data-page="fsbo"] .table-wrap table,
  body[data-page="fsbo"] .table-wrap thead,
  body[data-page="fsbo"] .table-wrap tbody,
  body[data-page="fsbo"] .table-wrap tr,
  body[data-page="fsbo"] .table-wrap td {
    display: block;
    width: 100%;
  }
  body[data-page="fsbo"] .table-wrap thead { display: none; }
  body[data-page="fsbo"] .table-wrap tr {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  body[data-page="fsbo"] .table-wrap tr.empty-row { text-align: center; }
  body[data-page="fsbo"] .table-wrap td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border: 0;
    text-align: right;
    font-size: 13px;
    white-space: normal;
  }
  body[data-page="fsbo"] .table-wrap td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
  }
  body[data-page="fsbo"] .table-wrap td:nth-child(1)::before { content: 'Area'; }
  body[data-page="fsbo"] .table-wrap td:nth-child(2)::before { content: 'Started'; }
  body[data-page="fsbo"] .table-wrap td:nth-child(3)::before { content: 'Status'; }
  body[data-page="fsbo"] .table-wrap td:nth-child(4)::before { content: 'Found'; }
  body[data-page="fsbo"] .table-wrap td:nth-child(5)::before { content: 'New Leads'; }
  body[data-page="fsbo"] .table-wrap td:nth-child(6)::before { content: 'Pushed'; }
  body[data-page="fsbo"] .table-wrap td:nth-child(7)::before { content: none; }
  /* Actions cell: buttons centered, wrap onto shared lines */
  body[data-page="fsbo"] .table-wrap td:nth-child(7) {
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--border);
  }
  body[data-page="fsbo"] .table-wrap td:nth-child(7) button {
    flex: 1 1 auto; min-width: 92px; padding: 9px 12px; font-size: 13px; text-align: center;
  }

  body[data-page="fsbo"] .table-wrap td.county-name { font-weight: 600; font-size: 14px; }
  body[data-page="fsbo"] .table-wrap td:nth-child(1) {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
  }
  body[data-page="fsbo"] .table-wrap tr.empty-row td {
    justify-content: center;
  }
  body[data-page="fsbo"] .table-wrap tr.empty-row td::before { content: none; }

  body[data-page="fsbo"] .log-actions { flex-wrap: wrap; row-gap: 6px; }
  body[data-page="fsbo"] .log-header { flex-wrap: wrap; row-gap: 8px; }

  /* ── Social Posts mobile polish ────────────────────────────────────────── */
  /* Pipeline banner: keep the 4 stats in a single row, but stack the LABEL
     under the NUMBER inside each stat. Hide the divider lines and shrink
     numbers a touch so it doesn't overflow on narrow screens. */
  body[data-page="social"] .social-pipeline-banner { overflow-x: hidden; max-width: 100%; }
  body[data-page="social"] .social-pipeline-banner .fub-totals-body {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 4px;
    /* More breathing room between the divider line above and the stat numbers.
       The base .fub-totals-body sets `padding: 0 16px 14px !important` (top:0),
       so this MUST be !important to take effect. */
    padding: 20px 16px 16px !important;
  }
  body[data-page="social"] .social-pipeline-banner .fub-stat {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
  }
  body[data-page="social"] .social-pipeline-banner .fub-stat-num { font-size: 22px; line-height: 1.1; }
  body[data-page="social"] .social-pipeline-banner .fub-stat-lbl { font-size: 11px; margin-top: 2px; }
  body[data-page="social"] .social-pipeline-banner .fub-stat-sep { display: none; }

  /* Review header: let actions wrap to a second line instead of squishing, and
     center the Refresh / Schedule All / Open Airtable buttons. */
  body[data-page="social"] .soc-review-header { flex-wrap: wrap; row-gap: 6px; }
  body[data-page="social"] .soc-review-actions { flex-wrap: wrap; row-gap: 6px; justify-content: center; width: 100%; }

  /* Mobile: abbreviate channel chips to "FB" / "IG" so the Post column gets
     most of the row width. Hide the original text with font-size:0 and inject
     the short label via ::before at its own font-size. The chip's brand color
     (background, border) is preserved. */
  body[data-page="social"] .chip-Facebook,
  body[data-page="social"] .chip-Instagram {
    font-size: 0;
    padding: 3px 6px;
    line-height: 1;
  }
  body[data-page="social"] .chip-Facebook::before,
  body[data-page="social"] .chip-Instagram::before {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.2;
  }
  body[data-page="social"] .chip-Facebook::before  { content: 'FB'; }
  body[data-page="social"] .chip-Instagram::before { content: 'IG'; }

  /* Constrain the Channels column to its content width so the Post column
     absorbs the freed space. */
  body[data-page="social"] #review-tbody td:nth-child(2) {
    width: 1%;
    white-space: nowrap;
    padding-left: 8px;
  }

  /* Queue: long post titles used to stay on one line (white-space:nowrap) and
     push the "Goes out" + Cancel columns off the right edge. Let the title WRAP
     and pin the other two columns to their content so they stay on screen. */
  body[data-page="social"] #queue-tbody td:first-child {
    white-space: normal;
    overflow: visible;
    max-width: none;
    word-break: break-word;
  }
  body[data-page="social"] #queue-tbody td.when-cell {
    width: 1%;
    white-space: nowrap;
    font-size: 12px;
    color: var(--text-2);
    padding-left: 8px;
    vertical-align: top;
  }
  body[data-page="social"] #queue-tbody td.r {
    width: 1%;
    white-space: nowrap;
    vertical-align: top;
  }

  /* Recently Posted: same overflow problem — the post title pushed the Post Date
     column off the right edge, and the channel pills ran together with no gap.
     Let the title wrap (brings Post Date back on screen) and space the pills. */
  body[data-page="social"] #posted-tbody td:first-child {
    white-space: normal;
    overflow: visible;
    max-width: none;
    word-break: break-word;
  }
  body[data-page="social"] #posted-tbody td:nth-child(2) { white-space: normal; }
  body[data-page="social"] #posted-tbody td:nth-child(2) .chip {
    display: inline-block;
    margin: 2px 4px 2px 0;
  }
  body[data-page="social"] #posted-tbody td.when-cell {
    width: 1%;
    white-space: nowrap;
    font-size: 12px;
    color: var(--text-2);
    vertical-align: top;
  }

  /* ── Home page mobile polish ─────────────────────────────────────────── */
  body[data-page="home"] {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }
  body[data-page="home"] .page-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
  }
  body[data-page="home"] main {
    overflow-x: hidden !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px 16px !important;
  }
  body[data-page="home"] .home-hero h1 { font-size: 26px; }
  body[data-page="home"] .home-card-row { grid-template-columns: 1fr; gap: 12px; }
  body[data-page="home"] .home-info-card { padding: 18px; }

  /* CTA buttons grow to full width on mobile so they don't look stranded next
     to each other in a half-card. They stack neatly with consistent height. */
  body[data-page="home"] .home-cta-btn { flex: 1 1 100%; min-width: 0; padding: 11px 16px; }
  body[data-page="home"] .home-cta-row { gap: 8px; margin-top: 14px; }

  /* "Desktop only" pill keeps a comfortable top margin when it wraps below the
     heading on narrow widths. */
  body[data-page="home"] .home-card-headrow { gap: 8px; margin-bottom: 10px; }

  /* Widget category cards: single column on phones */
  body[data-page="home"] .home-widget-cats { grid-template-columns: 1fr; gap: 10px; }
}

/* ── Home page (all sizes) ───────────────────────────────────────────────── */
body[data-page="home"] .home-hero {
  max-width: 900px;
  margin: 0 auto 32px;
  text-align: center;
  padding-top: 24px;
}
body[data-page="home"] .home-hero h1 {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-1);
}
body[data-page="home"] .home-hero p {
  font-size: 16px;
  color: var(--text-2);
  margin-top: 12px;
  line-height: 1.5;
}
body[data-page="home"] .home-section {
  max-width: 1100px;
  margin: 0 auto 36px;
}
body[data-page="home"] .home-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 14px;
}
body[data-page="home"] .home-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
body[data-page="home"] .home-info-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
}
body[data-page="home"] .home-info-card h2 {
  font-size: 17px;
  margin-bottom: 8px;
  color: var(--text-1);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
body[data-page="home"] .home-info-card p {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.5;
}
body[data-page="home"] .home-pill-desktop {
  display: inline-block;
  background: var(--amber-dim);
  color: var(--amber);
  border: 1px solid var(--amber);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 5px;
  margin-left: 8px;
}
body[data-page="home"] .home-fixed-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
body[data-page="home"] .home-fixed-link {
  font-size: 12px;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 5px 10px;
  text-decoration: none;
}
body[data-page="home"] .home-fixed-link:hover {
  background: var(--accent);
  color: #fff;
}
body[data-page="home"] .home-conn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
body[data-page="home"] .home-conn-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-1);
  transition: all 0.15s;
  position: relative;
  box-shadow: var(--shadow-sm);
}
body[data-page="home"] .home-conn-tile:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
body[data-page="home"] .home-conn-tile img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
}
body[data-page="home"] .home-conn-tile .name {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
}
body[data-page="home"] .home-conn-tile .ext {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 11px;
  color: var(--text-3);
}

/* Section header row: title on the left + action button on the right
   (e.g. "+ Add connection"). Wraps cleanly on narrow screens. */
body[data-page="home"] .home-section-titlerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
body[data-page="home"] .home-section-titlerow .home-section-title { margin: 0; }
body[data-page="home"] .home-add-conn-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 5px 11px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
body[data-page="home"] .home-add-conn-btn:hover { background: var(--accent); color: #fff; }

/* User-added connection tiles get a small × in the top-right corner that
   removes them. Shown only on hover so the default look matches the built-ins. */
body[data-page="home"] .home-conn-tile[data-custom-conn] { padding-right: 30px; }
body[data-page="home"] .home-conn-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  background: none;
  border: 0;
  color: var(--text-3);
  font-size: 16px;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}
body[data-page="home"] .home-conn-tile[data-custom-conn]:hover .home-conn-remove { opacity: 1; }
body[data-page="home"] .home-conn-remove:hover { color: var(--red); background: var(--bg-hover); }

/* Add-connection modal — smaller than the widgets modal */
body[data-page="home"] .home-modal-sm { max-width: 440px; }
body[data-page="home"] .home-modal-sm .home-modal-body { display: block; }
body[data-page="home"] .home-addconn-form { display: flex; flex-direction: column; gap: 12px; }
body[data-page="home"] .home-addconn-form label { display: flex; flex-direction: column; gap: 5px; }
body[data-page="home"] .home-addconn-form label > span {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-3);
}
body[data-page="home"] .home-addconn-form input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text-1);
  font-family: inherit;
  font-size: 13px;
}
body[data-page="home"] .home-addconn-form input:focus { outline: none; border-color: var(--accent); }
body[data-page="home"] .home-addconn-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}
body[data-page="home"] .home-addconn-err {
  font-size: 12.5px;
  color: var(--red);
  background: rgba(248,113,113,0.10);
  border: 1px solid var(--red);
  border-radius: 6px;
  padding: 7px 10px;
}

/* Card head row: title + "Desktop only" pill on the same line, allowed to wrap
   on narrow screens so the pill drops below the title cleanly. */
body[data-page="home"] .home-card-headrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
body[data-page="home"] .home-card-headrow h2 { margin: 0; }
/* The pill no longer needs a left margin since the parent flex+gap handles it. */
body[data-page="home"] .home-card-headrow .home-pill-desktop { margin-left: 0; }

/* CTA buttons inside the Custom Dashboards card. Standardized to match the
   site's button shape — same height + padding so they sit aligned on every
   viewport. */
body[data-page="home"] .home-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
body[data-page="home"] .home-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s;
  min-width: 140px;
}
body[data-page="home"] .home-cta-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
body[data-page="home"] .home-cta-primary:hover { background: var(--accent-hover, var(--accent)); opacity: 0.92; }
body[data-page="home"] .home-cta-ghost {
  background: transparent;
  color: var(--text-1);
  border-color: var(--border);
}
body[data-page="home"] .home-cta-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Available widgets — category cards with bulleted lists */
body[data-page="home"] .home-widget-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
body[data-page="home"] .home-widget-cat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
body[data-page="home"] .home-widget-cat-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body[data-page="home"] .home-widget-cat ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
body[data-page="home"] .home-widget-cat li {
  font-size: 13px;
  color: var(--text-2);
  padding: 4px 0;
  border-bottom: 1px solid var(--border-soft);
  line-height: 1.35;
}
body[data-page="home"] .home-widget-cat li:last-child { border-bottom: 0; }

/* Hover description tooltip — relies on the native `title` attribute on each
   <li> for accessibility, plus a faint accent flush so the row feels interactive. */
body[data-page="home"] .home-widget-cat li {
  cursor: help;
  transition: color 0.15s, background 0.15s, padding-left 0.15s;
  padding-left: 4px;
  border-radius: 4px;
}
body[data-page="home"] .home-widget-cat li:hover {
  color: var(--text-1);
  background: var(--accent-dim);
  padding-left: 8px;
}

/* ── Available widgets modal ─────────────────────────────────────────────── */
body[data-page="home"] .home-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  backdrop-filter: blur(2px);
}
body[data-page="home"] .home-modal-overlay[hidden] { display: none; }
body[data-page="home"] .home-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 820px;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}
body[data-page="home"] .home-modal-head { flex: 0 0 auto; }
body[data-page="home"] .home-modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}
body[data-page="home"] .home-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
body[data-page="home"] .home-modal-head h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
  margin: 0;
}
body[data-page="home"] .home-modal-close {
  background: none;
  border: 0;
  color: var(--text-3);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}
body[data-page="home"] .home-modal-close:hover { color: var(--text-1); }
body[data-page="home"] .home-modal-body {
  padding: 18px 22px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  align-content: start;
}
body[data-page="home"] .home-modal-hint {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--text-3);
  margin: 0 0 4px;
}

@media (max-width: 640px) {
  body[data-page="home"] .home-modal-overlay {
    padding: 0;
    align-items: stretch;
    /* Use dynamic viewport height so the modal accounts for iOS Safari's
       collapsing URL bar — otherwise the bottom rows get clipped. */
    height: 100vh;
    height: 100dvh;
    overflow-y: hidden;
  }
  /* Full-screen on phones — modal fills viewport; its inner body scrolls. */
  body[data-page="home"] .home-modal {
    max-width: 100%;
    border-radius: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
  }
  body[data-page="home"] .home-modal-head { padding: 14px 16px; }
  body[data-page="home"] .home-modal-body {
    padding: 14px 16px 60px;  /* extra bottom padding so last card clears the bottom edge */
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ── Custom Dashboard mobile banner ──────────────────────────────────────── */
.dashboard-mobile-banner { display: none; }
.dashboard-mobile-banner.dismissed { display: none !important; }
@media (max-width: 768px) {
  .dashboard-mobile-banner:not(.dismissed) {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: var(--amber-dim);
    border-bottom: 1px solid var(--amber);
    color: var(--amber);
    font-size: 12.5px;
    line-height: 1.4;
    margin: -8px -12px 12px -12px;
  }
  .dashboard-mobile-banner button {
    background: none;
    border: 0;
    color: var(--amber);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    line-height: 1;
  }
}

/* ── Social Posts (all sizes) ────────────────────────────────────────────── */
/* Pipeline banner: stand-alone container sitting above the tab strip. */
body[data-page="social"] .social-pipeline-banner { margin: 0 auto 12px; max-width: 920px; padding: 0 4px; }
body[data-page="social"] .social-pipeline-banner .widget { margin: 0; }

/* Review widget: header buttons stay grouped in a flex row that wraps. */
body[data-page="social"] .soc-review-header { display: flex; align-items: center; gap: 8px; }
body[data-page="social"] .soc-review-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* Page-size selector lives in its own row above the table. */
body[data-page="social"] .soc-review-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 12px 0 12px;
  font-size: 12px;
  opacity: .85;
}
body[data-page="social"] .soc-review-pager select {
  background: transparent;
  color: inherit;
  border: 1px solid var(--border, #2a2f3a);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 12px;
}

/* Two-line post cell in the review table. Both lines truncate with ellipsis
   so a long headline (e.g. an article title like "What to Look for ... | Redfin")
   can't push the Channels column over. The parent <td> needs max-width: 0 +
   overflow: hidden for ellipsis to actually trigger inside a table cell that's
   sharing horizontal space with another column. */
body[data-page="social"] #review-tbody td:first-child {
  max-width: 0;
  overflow: hidden;
}
body[data-page="social"] .soc-row-summary,
body[data-page="social"] .soc-row-headline {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-page="social"] .soc-row-summary { font-size: 12px; color: var(--text-2); line-height: 1.25; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 600; }
body[data-page="social"] .soc-row-headline { font-size: 14px; font-weight: 600; line-height: 1.3; margin-top: 2px; color: var(--text-1); }
/* Row Delete button: clear red label (the old 🗑 emoji rendered as a missing-glyph box on some systems). */
.mini-btn.mini-del { color: var(--red); border-color: var(--red-dim); }
.mini-btn.mini-del:hover { color: #fff; background: var(--red); border-color: var(--red); }

/* Indeterminate loading bar shown while "Send to agent" is working (Claude writes captions → can take a few seconds). */
.agent-progress { margin-top: 10px; height: 6px; border-radius: 6px; overflow: hidden; background: var(--bg-input, #222); border: 1px solid var(--border); }
.agent-progress .agent-progress-bar {
  height: 100%; width: 40%; border-radius: 6px;
  background: linear-gradient(90deg, #2e7d32, #42a5f5);
  animation: agent-progress-slide 1.1s ease-in-out infinite;
}
@keyframes agent-progress-slide {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}

/* Subtabs inside the Review panel (List | Calendar). Smaller than top tabs. */
body[data-page="social"] .subtabs {
  display: flex;
  gap: 4px;
  margin: 0 0 10px 0;
  padding: 4px;
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  width: fit-content;
}
body[data-page="social"] .subtab {
  background: transparent;
  color: inherit;
  border: 0;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  opacity: .75;
}
body[data-page="social"] .subtab.on {
  background: rgba(255,255,255,.10);
  opacity: 1;
  font-weight: 600;
}
body[data-page="social"] .subview { width: 100%; }