/* FORTVISION Posts — Styles (LTR English) */

/* Login Screen */
/* ── App loading splash ── */
.app-loading-screen {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px;
  background: linear-gradient(135deg, #0f1623 0%, #1a2540 50%, #0f1623 100%);
  transition: opacity .35s ease, transform .35s ease;
}
.app-loading-screen--out { opacity: 0; pointer-events: none; }
.app-loading-logo { height: 38px; width: auto; filter: brightness(1); animation: appLogoFadeIn .5s ease both; }
@keyframes appLogoFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes dialerPulse { 0% { transform: scale(1); opacity: .7; } 70% { transform: scale(1.55); opacity: 0; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes dialerBlink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.app-loading-spinner { display: flex; gap: 8px; }
.app-loading-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #3f76ff;
  animation: appDotBounce 1.2s ease-in-out infinite;
}
.app-loading-dot:nth-child(2) { animation-delay: .2s; background: #8b5cf6; }
.app-loading-dot:nth-child(3) { animation-delay: .4s; background: #25BA64; }
@keyframes appDotBounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: .5; }
  40% { transform: scale(1.2); opacity: 1; }
}

/* ── Login (shadcn-style centered card) ─────────────────────────────────────── */
.login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; position: fixed; inset: 0; z-index: 9999; background: #f4f5f7; }
.login-screen.hidden { display: none; }
/* Login background video: full-bleed cover, dark overlay keeps the card readable */
.login-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.login-bg-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(15,23,42,.55), rgba(15,23,42,.35)); z-index: 1; }
.login-screen .login-card { position: relative; z-index: 2; box-shadow: 0 24px 64px rgba(0,0,0,.35); }
.login-card { width: 400px; max-width: calc(100vw - 32px); background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 36px 34px; box-shadow: 0 10px 40px rgba(16,24,40,.08); }
.login-logo { display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.login-logo-img { height: 34px; width: auto; object-fit: contain; }
.login-title { font-size: 1.4rem; font-weight: 700; color: #111827; margin: 0; text-align: center; letter-spacing: -.01em; }
.login-subtitle { text-align: center; font-size: .9rem; color: #6b7280; margin: 6px 0 24px; }
.login-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; padding: 10px 14px; border-radius: 8px; font-size: .82rem; margin-bottom: 16px; text-align: center; }
.login-error.hidden { display: none; }
.login-field { margin-bottom: 16px; }
.login-field label { display: block; font-size: .82rem; font-weight: 500; color: #374151; margin-bottom: 7px; }
.login-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.login-label-row label { margin-bottom: 0; }
.login-forgot { font-size: .8rem; color: #6b7280; text-decoration: none; }
.login-forgot:hover { color: #111827; text-decoration: underline; }
.login-field input { width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #111827; font-size: .9rem; outline: none; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
.login-field input::placeholder { color: #9ca3af; }
.login-field input:focus { border-color: #111827; box-shadow: 0 0 0 3px rgba(17,24,39,.08); }
.login-btn { width: 100%; padding: 11px; border: none; border-radius: 8px; font-size: .9rem; font-weight: 600; cursor: pointer; transition: opacity .15s, transform .1s; background: #111827; color: #fff; }
.login-btn:hover { opacity: .9; }
.login-btn:active { transform: translateY(1px); }
.login-btn:disabled { opacity: .5; cursor: not-allowed; }
.login-divider { display: flex; align-items: center; margin: 20px 0 16px; gap: 12px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: #e5e7eb; }
.login-divider span { font-size: .78rem; color: #9ca3af; white-space: nowrap; }
.login-social { display: flex; gap: 10px; }
.login-social-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #374151; font-size: .86rem; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s; }
.login-social-btn:hover { background: #f9fafb; border-color: #9ca3af; }
.login-social-btn:disabled { opacity: .55; cursor: not-allowed; }
.login-footer { text-align: center; font-size: .85rem; color: #6b7280; margin: 22px 0 0; }
.login-footer a { color: #111827; font-weight: 600; text-decoration: none; }
.login-footer a:hover { text-decoration: underline; }

/* Sidebar user/logout */
.sidebar-user-email { font-size: .7rem; color: rgba(255,255,255,.45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-name  { font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.sidebar-user-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.sidebar-logout-btn { background: none; border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.5); font-size: .72rem; padding: 4px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: all .15s; }
.sidebar-logout-btn:hover { border-color: #ef4444; color: #ef4444; }
.sidebar-disconnect-btn { background: none; border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.5); font-size: .72rem; padding: 4px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: all .15s; display: inline-flex; align-items: center; gap: 4px; }
.sidebar-disconnect-btn:hover { border-color: #f59e0b; color: #f59e0b; }
.sidebar-signout-btn { flex-shrink: 0; background: none; border: none; color: rgba(255,255,255,.35); cursor: pointer; padding: 5px; border-radius: 6px; display: flex; align-items: center; transition: all .15s; margin-left: auto; }
.sidebar-signout-btn:hover { color: #ef4444; background: rgba(239,68,68,.12); }

:root {
  /* ── Plane-inspired design tokens ─────────────────────────────────────────
     Neutral palette, Plane blue accent, compact radii, light sidebar. */
  --font: 'Mulish', 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif; /* Mulish (Muli) is the brand face; Rubik serves the Hebrew glyphs (Mulish has none) */
  --bg: #ffffff; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f7f7f8;
  --bg-input: #ffffff; --bg-elevated: #fafafa; --bg-hover: #f4f4f6; --bg-page: #ffffff;
  --border: #e6e6e9; --border-hover: #d4d4d8; --border-focus: #3f76ff;
  --text: #1f2937; --text-primary: #1f2937; --text-secondary: #6b7280; --text-muted: #9ca3af; --text-placeholder: #b0b4ba;
  --primary: #3f76ff; --primary-hover: #2f5fd9; --primary-glow: rgba(63,118,255,.12);
  --accent: #3f76ff; --accent-hover: #2f5fd9;
  --accent-blue: #3f76ff; --accent-purple: #8b5cf6; --accent-pink: #ec4899; --accent-green: #22c55e;
  --facebook: #1877f2; --instagram: #e4405f; --linkedin: #0a66c2; --tiktok: #00f2ea; --meta: #0081fb;
  --radius: 6px; --radius-sm: 4px; --radius-lg: 8px;
  --shadow: 0 1px 2px rgba(16,24,40,.05); --shadow-md: 0 2px 6px rgba(16,24,40,.07);
  --shadow-lg: 0 8px 24px rgba(16,24,40,.10);
  --sidebar-w: 218px;
  --sidebar-w-collapsed: 60px;
  /* Plane's light sidebar */
  --sidebar-bg: #f8f8f9;
  --nav-active-bg: #eaeaed;
  --nav-hover-bg: #f0f0f2;
  --nav-text: #5b5e66;
  --nav-text-active: #1f2937;
  --success: #22c55e; --error: #ef4444; --danger: #ef4444; --topbar-h: 60px;
  --transition: 200ms cubic-bezier(.4,0,.2,1);
  --spark-color: #91DBFF;
}
/* ── Dark mode ──────────────────────────────────────────────────────────────
   The whole app reads these tokens, so remapping them here restyles every
   section. Toggled by html.dark (button in the sidebar header, persisted as
   localStorage fv_theme and applied pre-paint by an inline <head> script).
   Inline styles that hardcode white (email/social/push PREVIEW mockups) stay
   light on purpose — they preview surfaces that are light in the wild. */
html.dark {
  color-scheme: dark;
  /* True-black base (user preference); cards stay slightly elevated for depth */
  --bg: #000; --bg-secondary: #0a0b0f; --bg-card: #101218; --bg-card-hover: #171a22;
  --bg-input: #0a0b0f; --bg-elevated: #14161d; --bg-hover: #191c24; --bg-page: #000;
  --border: #23272f; --border-hover: #333947; --border-focus: #5b8aff;
  --text: #e6e8ec; --text-primary: #e6e8ec; --text-secondary: #9aa1ad; --text-muted: #6d7482; --text-placeholder: #4d5462;
  --primary-glow: rgba(91,138,255,.16);
  --shadow: 0 1px 2px rgba(0,0,0,.45); --shadow-md: 0 2px 8px rgba(0,0,0,.5);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.6);
  --sidebar-bg: #0a0b0f;
  --nav-active-bg: #232836;
  --nav-hover-bg: #1a1e28;
  --nav-text: #9aa1ad;
  --nav-text-active: #f3f4f6;
}
html.dark img, html.dark .em-gal-cell img { filter: none; }
/* Rescue for INLINE-styled hardcoded light colors (attribute-substring match +
   !important beats inline styles). Design canvases are then re-whitened below —
   an email/popup being DESIGNED is a real-world-light surface, not app chrome. */
html.dark [style*="background:#fff"], html.dark [style*="background: #fff"], html.dark [style*="background:white"] { background: var(--bg-card) !important; }
html.dark [style*="background:#f9fafb"], html.dark [style*="background:#f3f4f6"], html.dark [style*="background:#f8fafc"], html.dark [style*="background:#fafafa"], html.dark [style*="background:#f7f8fa"], html.dark [style*="background:#f4f4f7"] { background: var(--bg-hover) !important; }
html.dark [style*="color:#111"], html.dark [style*="color:#1f2937"], html.dark [style*="color:#18181b"], html.dark [style*="color:#333"], html.dark [style*="color:#222"] { color: var(--text-primary) !important; }
html.dark .email-canvas [style*="background:#fff"], html.dark .email-canvas [style*="background: #fff"], html.dark .email-canvas [style*="background:white"], html.dark #osCanvas [style*="background:#fff"], html.dark #osCanvas [style*="background: #fff"], html.dark #osCanvas [style*="background:white"], html.dark .email-preview-frame [style*="background:#fff"], html.dark .email-preview-frame [style*="background: #fff"] { background: #fff !important; }
html.dark .email-canvas [style*="color:#111"], html.dark #osCanvas [style*="color:#111"] { color: #111 !important; }
html.dark .email-canvas [style*="color:#1f2937"], html.dark #osCanvas [style*="color:#1f2937"] { color: #1f2937 !important; }
html.dark .email-canvas [style*="color:#18181b"], html.dark #osCanvas [style*="color:#18181b"] { color: #18181b !important; }
html.dark .email-canvas [style*="color:#333"], html.dark #osCanvas [style*="color:#333"] { color: #333 !important; }
html.dark .email-canvas [style*="color:#222"], html.dark #osCanvas [style*="color:#222"] { color: #222 !important; }
/* Theme toggle icons: CSS decides which shows, so no JS timing issues. */
#themeToggleBtn .th-sun { display: none; }
html.dark #themeToggleBtn .th-moon { display: none; }
html.dark #themeToggleBtn .th-sun { display: inline; }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.5; direction: ltr; -webkit-font-smoothing: antialiased; letter-spacing: -0.006em; }
input, textarea, select, button { font-family: inherit; }

/* Background */
.bg-glow { display: none; }

/* Layout */
#app { display: flex; min-height: 100vh; position: relative; z-index: 1; }
.sidebar {
  width: var(--sidebar-w); background: var(--sidebar-bg); border-right: none;
  box-shadow: 1px 0 0 rgba(255,255,255,.06);
  display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 100; transition: width .22s ease, transform var(--transition); overflow: hidden;
}
.sidebar-header {
  padding: 12px 14px 10px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; min-height: 52px;
}
.logo { display: flex; align-items: center; overflow: hidden; flex: 1; min-width: 0; }
.logo-text { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; color: #fff; }
/* App wordmark logo (lowercase) */
.fv-wordmark { font-family: "ABC Favorit Light", "Mulish", "Segoe UI", sans-serif; font-weight: 300; font-size: 19px; letter-spacing: -.02em; color: var(--text, #1a1a1a); text-decoration: none; text-transform: lowercase; transition: color .25s; flex-shrink: 0; line-height: 1; white-space: nowrap; }
.sidebar.collapsed .fv-wordmark { font-size: 0; }
.sidebar.collapsed .fv-wordmark::after { content: "f"; font-size: 20px; }
.fv-wordmark-lg { font-size: 30px; letter-spacing: -.02em; }
.logo-img { height: 26px; width: auto; object-fit: contain; display: block; transition: opacity .18s; white-space: nowrap; filter: brightness(0) invert(1); }

/* Collapse toggle button */
.sidebar-collapse-btn {
  flex-shrink: 0; background: none; border: 1px solid rgba(255,255,255,.12); border-radius: 6px;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: rgba(255,255,255,.4); transition: all .15s; padding: 0;
}
.sidebar-collapse-btn:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.25); }
.collapse-icon-collapse { display: none; }
.collapse-icon-expand { display: block; }

/* ── Collapsed sidebar ── */
.sidebar.collapsed { width: var(--sidebar-w-collapsed); }
/* At 60px the row layout (wordmark + 2 buttons) overflowed and the expand
   control was clipped out of sight — stack the header vertically instead. */
.sidebar.collapsed .sidebar-header { flex-direction: column; padding: 12px 4px 10px; gap: 7px; justify-content: center; }
.sidebar.collapsed .logo { flex: 0 0 auto; justify-content: center; width: 100%; }
.sidebar.collapsed #sidebarCollapseBtn { width: 30px; height: 30px; border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sidebar.collapsed #sidebarCollapseBtn:hover { background: var(--accent); color: #fff; }
.sidebar.collapsed .logo-img { opacity: 0; width: 0; }
.sidebar.collapsed .collapse-icon-expand { display: none; }
.sidebar.collapsed .collapse-icon-collapse { display: block; }
.sidebar.collapsed .nav-item span { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 7px; }
.sidebar.collapsed .sidebar-footer { padding: 10px 6px; }
.sidebar.collapsed .sidebar-user-info { display: none; }
.sidebar.collapsed .sidebar-user { justify-content: center; padding: 12px 6px; }
.sidebar.collapsed .sidebar-user-avatar { margin: 0 auto; }
.sidebar.collapsed .sidebar-signout-btn { display: none; }

/* Tooltip on collapsed nav items */
.sidebar.collapsed .nav-item { position: relative; }
.sidebar.collapsed .nav-item::after {
  content: attr(data-tooltip);
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: #1e293b; color: #fff; font-size: .78rem; font-weight: 500;
  padding: 5px 10px; border-radius: 6px; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .15s;
  box-shadow: 0 4px 12px rgba(0,0,0,.35); z-index: 200; border: 1px solid rgba(255,255,255,.08);
}
.sidebar.collapsed .nav-item:hover::after { opacity: 1; }

.login-logo-img { height: 40px; width: auto; object-fit: contain; display: block; margin: 0 auto 8px; }

/* Nav */
.sidebar-nav { flex: 1; padding: 6px 8px; display: flex; flex-direction: column; gap: 0; overflow-y: auto; overflow-x: hidden; }
.nav-item {
  display: flex; align-items: center; gap: 9px; padding: 5.5px 10px;
  border-radius: 6px; color: var(--nav-text); text-decoration: none;
  font-size: .8rem; font-weight: 500; transition: all .15s; cursor: pointer;
}
.nav-item svg { width: 16px; height: 16px; }
.nav-item:hover { background: var(--nav-hover-bg); color: rgba(255,255,255,.85); }
.nav-item.active { background: var(--nav-active-bg); color: var(--nav-text-active); font-weight: 600; }
.nav-item svg { flex-shrink: 0; opacity: .75; }
.nav-item.active svg { opacity: 1; }
.nav-item:hover svg { opacity: .9; }

/* iOS-style unread badge on sidebar nav items (Inbox / LinkedIn) */
.nav-badge {
  margin-left: auto; background: #ef4444; color: #fff; border-radius: 100px;
  font-size: 9.5px; font-weight: 800; line-height: 1; min-width: 15px; height: 15px;
  padding: 0 5px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 1px 3px rgba(239,68,68,.4);
}
/* Collapsed sidebar: shrink to a corner dot on the icon */
.sidebar.collapsed .nav-item .nav-badge {
  display: inline-flex; position: absolute; top: 3px; right: 3px;
  min-width: 15px; height: 15px; font-size: 9px; padding: 0 3px; margin: 0;
}

/* ── Plane light sidebar — override the original white-on-dark sidebar colors ── */
.sidebar { box-shadow: none; border-right: 1px solid var(--border); }
.logo-text { color: var(--text); }
.logo-img { filter: none; }
.sidebar-collapse-btn { border-color: var(--border); color: var(--text-muted); }
.sidebar-collapse-btn:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-hover); }
.nav-item { color: var(--nav-text); }
.nav-item:hover { color: var(--nav-text-active); }
.nav-item.active { color: var(--nav-text-active); }
.sidebar-footer { border-top: 1px solid var(--border); }
.api-status { color: var(--text-muted); }
.status-dot.offline { background: #cbced4; }
.sidebar-user { border-top-color: var(--border); }
.sidebar-user-email { color: var(--text-muted); }
.sidebar-user-name { color: var(--text); }
.sidebar-logout-btn, .sidebar-disconnect-btn { border-color: var(--border); color: var(--text-secondary); }
.sidebar-signout-btn { color: var(--text-muted); }
.sidebar-user:hover { background: var(--bg-hover); }
.sidebar.collapsed .nav-item::after { background: #1f2937; color: #fff; border-color: rgba(255,255,255,.08); }

/* Projects (Plane-style) */
.proj-primary-btn { background: var(--accent); color: #fff; border: none; border-radius: 7px; padding: 7px 14px; font-size: .8rem; font-weight: 600; cursor: pointer; transition: background .15s; white-space: nowrap; }
.proj-primary-btn:hover { background: var(--accent-hover); }
.proj-secondary-btn { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 7px 14px; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.proj-secondary-btn:hover { background: var(--bg-hover); border-color: var(--border-hover); }

/* Plane-style Projects shell: left workspace rail + main content */
#sectionProjects { padding: 0; }
.proj-shell { display: flex; align-items: stretch; height: calc(100vh - 1px); }
.proj-rail { width: 244px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--sidebar-bg, var(--bg-elevated)); padding: 10px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.proj-rail-ws { display: flex; align-items: center; gap: 9px; padding: 6px 8px 12px; }
.proj-rail-ws-ic { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.proj-rail-ws-name { font-weight: 700; font-size: .86rem; color: var(--text); letter-spacing: .01em; }
.proj-rail-nav { display: flex; align-items: center; gap: 9px; width: 100%; border: none; background: none; color: var(--text-secondary); font-size: .82rem; font-weight: 500; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.proj-rail-nav:hover { background: var(--bg-hover); color: var(--text); }
.proj-rail-nav.active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 600; }
.proj-rail-sec { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 4px; }
.proj-rail-sec-lbl { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.proj-rail-add { width: 20px; height: 20px; border: none; background: none; color: var(--text-muted); font-size: 17px; line-height: 1; border-radius: 5px; cursor: pointer; }
.proj-rail-add:hover { background: var(--bg-hover); color: var(--accent); }
.proj-rail-list { display: flex; flex-direction: column; gap: 1px; }
.proj-rail-empty { font-size: .76rem; color: var(--text-muted); padding: 8px; }
.proj-rail-item { display: flex; align-items: center; gap: 9px; width: 100%; border: none; background: none; padding: 6px 8px; border-radius: 7px; cursor: pointer; text-align: left; }
.proj-rail-item:hover { background: var(--bg-hover); }
.proj-rail-item.active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.proj-rail-ic { width: 22px; height: 22px; border-radius: 6px; color: #fff; font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.proj-rail-name { flex: 1; min-width: 0; font-size: .82rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-rail-item.active .proj-rail-name { font-weight: 600; }
.proj-rail-count { font-size: .7rem; color: var(--text-muted); flex-shrink: 0; }
.proj-main { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; }

/* Views chips */
.proj-view-chip { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); border-radius: 16px; padding: 5px 13px; font-size: .78rem; font-weight: 500; cursor: pointer; }
.proj-view-chip:hover { background: var(--bg-hover); }
.proj-view-chip.active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); font-weight: 600; }

/* Dashboards */
.proj-dash-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.proj-dash-stat { flex: 1; min-width: 120px; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--bg-card); }
.proj-dash-stat-v { font-size: 26px; font-weight: 700; color: var(--text); }
.proj-dash-stat-l { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.proj-dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.proj-dash-card { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); padding: 14px 16px; }
.proj-dash-card-hd { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.proj-dash-row { display: flex; align-items: center; gap: 9px; font-size: .8rem; color: var(--text); padding: 5px 0; border-top: 1px solid var(--border); cursor: pointer; }
.proj-dash-row:first-of-type { border-top: none; }
.proj-dash-row:hover { color: var(--accent); }
.proj-dash-empty { font-size: .8rem; color: var(--text-muted); padding: 8px 0; }

/* Workgraph */
.wg-page { min-height: 100%; }
.wg-canvas { position: relative; display: flex; align-items: center; gap: 120px; padding: 24px 40px 60px; min-height: 360px; }
.wg-svg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.wg-col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.wg-col-ws { justify-content: center; }
.wg-node { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)); }
.wg-ws { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; font-weight: 700; color: var(--text); font-size: .9rem; }
.wg-ws-ic { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.wg-proj { width: 280px; padding: 12px 14px; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.wg-proj:hover { box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,.1)); border-color: var(--border-hover); }
.wg-proj-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.wg-proj-ic { width: 22px; height: 22px; border-radius: 6px; color: #fff; font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.wg-proj-name { flex: 1; font-weight: 600; font-size: .84rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-proj-pct { font-size: .74rem; font-weight: 600; color: var(--text-secondary); }
.wg-proj-bar { height: 5px; border-radius: 3px; background: var(--bg-hover); overflow: hidden; margin-bottom: 7px; }
.wg-proj-bar > div { height: 100%; border-radius: 3px; }
.wg-proj-meta { font-size: .72rem; color: var(--text-muted); }
@media (max-width: 760px) { .proj-rail { width: 60px; } .proj-rail-ws-name, .proj-rail-name, .proj-rail-sec-lbl, .proj-rail-count, .proj-rail-nav span { display: none; } .proj-rail-nav { justify-content: center; } }
.proj-list-row { display: flex; align-items: center; gap: 10px; padding: 0 24px; height: 44px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s; }
.proj-list-row:hover { background: var(--bg-hover); }
.proj-wi-icon { width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.proj-wi-id { font-size: .74rem; color: var(--text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; min-width: 64px; }
.proj-wi-id--sub { padding-left: 26px; }
.proj-wi-title { font-size: .86rem; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-wi-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.proj-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 11px; padding: 2px 9px; white-space: nowrap; line-height: 1.4; }
.proj-grp-head { display: flex; align-items: center; gap: 9px; padding: 8px 24px; background: var(--bg-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.proj-grp-head .proj-grp-name { font-size: .82rem; font-weight: 600; color: var(--text); }
.proj-grp-head .proj-grp-count { font-size: .72rem; color: var(--text-muted); }
.proj-avatar { width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: .62rem; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }

/* Projects — Calendar view */
.proj-cal-nav { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-card); color: var(--text-secondary); cursor: pointer; font-size: 16px; line-height: 1; }
.proj-cal-nav:hover { background: var(--bg-hover); }
.proj-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.proj-cal-dow { background: var(--bg-elevated); padding: 7px 8px; font-size: .68rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.proj-cal-cell { background: var(--bg-card); min-height: 96px; padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.proj-cal-empty { background: var(--bg-elevated); }
.proj-cal-today { background: color-mix(in srgb, var(--accent) 7%, var(--bg-card)); }
.proj-cal-daynum { font-size: .7rem; color: var(--text-secondary); font-weight: 600; padding: 1px 3px; }
.proj-cal-today .proj-cal-daynum { color: var(--accent); }
.proj-cal-ev { font-size: .68rem; color: var(--text); background: var(--bg-hover); border-radius: 4px; padding: 2px 6px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-cal-ev:hover { filter: brightness(.96); }

/* Projects — Timeline / Gantt view */
.proj-gantt-wrap { overflow-x: auto; padding: 14px 24px 30px; }
.proj-gantt { min-width: 620px; }
.proj-gantt-head { display: flex; align-items: stretch; height: 26px; border-bottom: 1px solid var(--border); position: sticky; top: 0; }
.proj-gantt-row { display: flex; align-items: stretch; min-height: 34px; border-bottom: 1px solid var(--border); }
.proj-gantt-row:hover { background: var(--bg-hover); }
.proj-gantt-lcol { width: 230px; flex-shrink: 0; padding: 7px 12px 7px 4px; font-size: .76rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; }
.proj-gantt-track { position: relative; flex: 1; min-width: 360px; }
.proj-gantt-mark { position: absolute; top: 0; bottom: -1000px; border-left: 1px dashed var(--border); }
.proj-gantt-mark span { position: absolute; top: 4px; left: 4px; font-size: .64rem; color: var(--text-muted); white-space: nowrap; }
.proj-gantt-bar { position: absolute; top: 50%; transform: translateY(-50%); height: 16px; border-radius: 5px; min-width: 6px; opacity: .9; }
.proj-gantt-bar--cycle { height: 9px; border-radius: 4px; opacity: .55; }
.proj-gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #ef4444; z-index: 2; }

/* Projects — @mentions */
.proj-est { font-size: .62rem; font-weight: 700; color: var(--text-secondary); background: var(--bg-hover); border-radius: 5px; padding: 1px 6px; flex-shrink: 0; }
.proj-mention { color: var(--accent); font-weight: 600; background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 4px; padding: 0 3px; }
.proj-mention-chip { font-size: .68rem; color: var(--accent); border: 1px solid var(--border); background: var(--bg-card); border-radius: 11px; padding: 1px 8px; cursor: pointer; }
.proj-mention-chip:hover { background: var(--bg-hover); }

/* Projects — Spreadsheet view */
.proj-ss-wrap { overflow-x: auto; padding-bottom: 30px; }
.proj-ss { width: 100%; border-collapse: collapse; font-size: .8rem; min-width: 880px; }
.proj-ss th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--bg-elevated); position: sticky; top: 0; white-space: nowrap; }
.proj-ss td { padding: 5px 12px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
.proj-ss tbody tr:hover { background: var(--bg-hover); }
.proj-ss-id { font-size: .72rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.proj-ss-id:hover { color: var(--accent); }
.proj-ss-title { cursor: pointer; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-ss-title:hover { color: var(--accent); }
.proj-ss-sel { border: 1px solid transparent; background: transparent; color: var(--text); font-size: .78rem; border-radius: 6px; padding: 3px 5px; cursor: pointer; max-width: 100%; }
.proj-ss-sel:hover { border-color: var(--border); background: var(--bg-card); }
.proj-ss-date { border: 1px solid transparent; background: transparent; color: var(--text-secondary); font-size: .74rem; border-radius: 6px; padding: 2px 4px; cursor: pointer; }
.proj-ss-date:hover { border-color: var(--border); background: var(--bg-card); }
.proj-ss-empty td { text-align: center; color: var(--text-muted); font-size: .82rem; padding: 18px 12px; }
.proj-ss-addrow td { padding: 0; }
.proj-ss-addrow { cursor: pointer; }
.proj-ss-add { display: block; padding: 9px 12px; color: var(--text-secondary); font-size: .82rem; font-weight: 500; }
.proj-ss-addrow:hover .proj-ss-add { color: var(--accent); background: var(--bg-hover); }
.proj-ss-addinput td { padding: 5px 12px; }

/* ─── Email editor ─────────────────────────────────────────── */
#sectionEmail { padding: 0; }
.email-shell { display: flex; flex-direction: column; height: calc(100vh - 1px); }
.email-topbar { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--bg-card); flex-shrink: 0; }
.email-back { background: none; border: none; font-size: 22px; line-height: 1; color: var(--text-secondary); cursor: pointer; width: 28px; height: 28px; border-radius: 6px; }
.email-back:hover { background: var(--bg-hover); }
.email-name { border: 1px solid transparent; border-radius: 7px; padding: 6px 8px; font-size: 15px; font-weight: 600; color: var(--text); background: transparent; outline: none; width: 280px; }
.email-name:hover, .email-name:focus { border-color: var(--border); background: var(--bg-card); }
/* FORTVISION-style polish: lighter chrome, soft canvas */
.email-topbar { background: var(--bg-card); box-shadow: 0 1px 0 rgba(15,23,42,.04); }
.email-canvas-wrap { background: #eef1f6 !important; }
.email-canvas { box-shadow: 0 4px 24px rgba(15,23,42,.08); }
/* AI assistant button + example chips */
.email-ai-btn { background: linear-gradient(92deg,#6d5efc,#8b5cf6) !important; color: #fff !important; border-color: transparent !important; font-weight: 600; }
.email-ai-btn:hover { filter: brightness(1.05); }
.em-ai-chip { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); border-radius: 14px; padding: 5px 11px; font-size: .73rem; cursor: pointer; }
.em-ai-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-hover); }
.email-footer-preview { pointer-events: none; opacity: .9; }
.email-footer-tag { text-align: center; font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase; color: #c4c9d4; padding: 10px 4px 2px; font-family: Arial, sans-serif; border-top: 1px dashed var(--border); margin-top: 8px; }
.email-seg { display: flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.email-seg button { flex: 1; border: none; background: var(--bg-card); padding: 6px 8px; cursor: pointer; color: var(--text-secondary); font-size: .78rem; border-left: 1px solid var(--border); min-width: 30px; line-height: 1.2; }
.email-seg button:first-child { border-left: none; }
.email-seg button.on { background: var(--accent); color: #fff; }
.email-step { border: none; background: var(--bg-hover); width: 30px; height: 32px; cursor: pointer; font-size: 1rem; color: var(--text-secondary); }
.email-step:hover { background: var(--border); }
.email-ai-mini { border: 1px solid #e3e1fb; background: #f6f5ff; color: #6d5efc; border-radius: 7px; padding: 4px 9px; font-size: .72rem; font-weight: 600; cursor: pointer; }
.email-ai-mini:hover { background: #efedff; border-color: #c9c4fb; }
.email-body { flex: 1; display: flex; min-height: 0; }
.email-canvas-wrap { flex: 1; overflow-y: auto; padding: 12px 20px 80px; display: flex; justify-content: center; align-items: flex-start; }
.email-canvas { min-height: 200px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.08); overflow: hidden; align-self: flex-start; }
.email-canvas-col { display: flex; flex-direction: column; align-items: center; }
/* Ruler above the canvas — always exactly the canvas width. Ticks: 10/50/100px. */
.email-ruler {
  position: sticky; top: 0; z-index: 30;
  height: 24px; margin-bottom: 6px; flex-shrink: 0; box-sizing: border-box;
  border: 1px solid #d3d9e3; border-radius: 5px;
  background:
    repeating-linear-gradient(to right, #64748b 0 1px, transparent 1px 100px) left bottom / 100% 13px no-repeat,
    repeating-linear-gradient(to right, #94a3b8 0 1px, transparent 1px 50px) left bottom / 100% 9px no-repeat,
    repeating-linear-gradient(to right, #cbd5e1 0 1px, transparent 1px 10px) left bottom / 100% 5px no-repeat,
    rgba(255,255,255,.92);
  backdrop-filter: blur(2px);
  direction: ltr;
}
.email-ruler-num { position: absolute; top: 1px; font-size: 8.5px; line-height: 1; color: #64748b; transform: translateX(2px); font-family: ui-monospace, Menlo, Consolas, monospace; user-select: none; }
.email-ruler-badge { position: absolute; top: 2px; right: 3px; font-size: 9px; line-height: 1; font-weight: 700; color: #1d4ed8; background: #dbeafe; border-radius: 4px; padding: 2px 5px; font-family: ui-monospace, Menlo, Consolas, monospace; user-select: none; }
.email-empty { padding: 60px 24px; text-align: center; color: var(--text-muted); font-size: 14px; }
.email-block { position: relative; outline: 2px solid transparent; transition: outline-color .12s; cursor: pointer; }
.email-block:hover { outline-color: #c7d6ff; }
.email-block.sel { outline-color: var(--accent); }
.email-block-tools { position: absolute; top: 4px; right: 4px; display: none; gap: 2px; background: var(--accent); border-radius: 6px; padding: 2px; }
.email-block:hover .email-block-tools, .email-block.sel .email-block-tools { display: flex; }
.email-block-tools button { border: none; background: rgba(255,255,255,.15); color: #fff; width: 22px; height: 22px; border-radius: 4px; cursor: pointer; font-size: 12px; line-height: 1; }
.email-block-tools button:hover { background: rgba(255,255,255,.3); }
/* Resize handle for image / button blocks (#7) */
.email-resize-h { position: absolute; right: -8px; bottom: -8px; width: 18px; height: 18px; background: var(--accent); color: #fff; border: 2px solid #fff; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: nwse-resize; z-index: 7; box-shadow: 0 1px 5px rgba(0,0,0,.35); }
.email-insp-hint { font-size: 10.5px; color: var(--text-muted); margin: -4px 0 12px; line-height: 1.4; }
/* Nested blocks inside grid/column cells (#3) */
.email-col-cell { position: relative; min-height: 40px; border-radius: 6px; transition: background .12s, box-shadow .12s; }
.email-col-cell.email-col-over { background: #eef3ff; box-shadow: inset 0 0 0 2px var(--accent, #3f76ff); border-radius: 6px; }
.email-col-cell.email-col-over .email-col-empty { border-color: var(--accent, #3f76ff); color: var(--accent, #3f76ff); }
.email-subblock { position: relative; outline: 1.5px solid transparent; border-radius: 5px; transition: outline-color .12s; cursor: pointer; }
.email-subblock:hover { outline-color: #c7d2fe; }
.email-subblock.sel { outline-color: var(--accent, #3f76ff); }
.email-subblock-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: none; border-radius: 4px; background: rgba(0,0,0,.5); color: #fff; cursor: pointer; font-size: 10px; line-height: 1; display: none; z-index: 5; }
.email-subblock:hover .email-subblock-del, .email-subblock.sel .email-subblock-del { display: block; }
.email-subtools { position: absolute; top: 2px; right: 2px; display: none; gap: 2px; background: var(--accent, #3f76ff); border-radius: 5px; padding: 2px; z-index: 6; }
.email-subblock:hover .email-subtools, .email-subblock.sel .email-subtools { display: flex; }
.email-subtools button { border: none; background: rgba(255,255,255,.18); color: #fff; width: 18px; height: 18px; border-radius: 3px; cursor: pointer; font-size: 10px; line-height: 1; }
.email-subtools button:hover { background: rgba(255,255,255,.34); }
/* RTL email: move the per-block tool bars + resize handle to the LEFT edge. */
.email-canvas[dir="rtl"] .email-block-tools { right: auto; left: 4px; }
.email-canvas[dir="rtl"] .email-subtools { right: auto; left: 2px; }
.email-canvas[dir="rtl"] .email-subblock-del { right: auto; left: 2px; }
.email-canvas[dir="rtl"] .email-resize-h { right: auto; left: -8px; cursor: nesw-resize; }
.email-col-empty { border: 1.5px dashed #cbd5e1; border-radius: 6px; padding: 18px 8px; text-align: center; color: #94a3b8; font-size: 11.5px; }
/* Spacing + stacking for components inside a column */
.email-subblock { margin-bottom: 8px; }
.email-subblock:last-of-type { margin-bottom: 0; }
.email-col-add { margin-top: 8px; border: 1.5px dashed #d7dee8; border-radius: 6px; padding: 8px; text-align: center; color: #a3adba; font-size: 11px; }
.email-col-cell.email-col-over .email-col-add { border-color: var(--accent, #3f76ff); color: var(--accent, #3f76ff); }
/* Compact one-row-per-column controls in the inspector */
.email-col-mini { display: flex; gap: 6px; align-items: flex-end; margin-bottom: 10px; }
.email-col-mini > label { display: flex; flex-direction: column; gap: 3px; font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
.email-col-mini .email-input { padding: 5px 6px; font-size: .78rem; width: 100%; box-sizing: border-box; }
.email-col-mini select.email-input { min-width: 58px; }
.email-col-bg-wrap { display: flex; align-items: center; gap: 3px; height: 30px; }
.email-col-bg-wrap button { border: none; background: var(--bg-hover); border-radius: 4px; cursor: pointer; font-size: 11px; line-height: 1; padding: 4px 5px; color: var(--text-muted); }
.email-col-bg-wrap button:hover { color: var(--text); }
.email-col-hint { font-size: 10px; color: #b6c2d4; text-align: center; margin-top: 4px; opacity: 0; transition: opacity .12s; }
.email-col-cell:hover .email-col-hint { opacity: 1; }
.email-inspector { width: 290px; flex-shrink: 0; border-left: 1px solid var(--border); background: var(--bg-card); overflow-y: auto; padding: 14px; }
.email-insp-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 14px 0 8px; }
.email-insp-sec:first-child { margin-top: 0; }
.email-palette { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.email-pal-btn { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--bg-card); border-radius: 8px; padding: 8px 10px; font-size: .8rem; color: var(--text); cursor: pointer; }
.email-pal-btn:hover { border-color: var(--accent); background: var(--bg-hover); }
.email-pal-ic { display: inline-flex; width: 18px; justify-content: center; font-size: 13px; }
/* Left elements rail (FORTVISION-style) */
.email-rail { width: 168px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--bg-card); overflow-y: auto; padding: 14px 12px; }
.email-rail-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0 0 10px; }
.email-rail-hint { font-size: 10.5px; color: var(--text-muted); margin-top: 12px; line-height: 1.5; }
.email-rail .email-palette { grid-template-columns: 1fr 1fr; gap: 8px; }
.email-rail .email-pal-btn { flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 11px 4px; font-size: .68rem; color: var(--text-secondary); text-align: center; cursor: grab; }
.email-rail .email-pal-btn:active { cursor: grabbing; }
.email-rail .email-pal-btn .email-pal-ic { width: auto; color: var(--accent); }
/* Drag & drop affordances */
.email-canvas.email-canvas-drag { outline: 2px dashed var(--accent); outline-offset: -5px; }
.email-block[draggable="true"] { cursor: grab; }
.email-block[draggable="true"]:active { cursor: grabbing; }
.email-drag-h { cursor: grab; }
/* Presets list */
.email-layout-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.email-layout-btn { display: flex; align-items: center; justify-content: center; padding: 9px 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); cursor: grab; transition: .12s; }
.email-layout-btn:hover { border-color: var(--accent); background: var(--bg-hover); }
.email-layout-btn:active { cursor: grabbing; }
.email-layout-btn.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(63,118,255,.18); }
/* Rail layout tiles — labeled, 2-per-row, full-width column sketch */
.email-layout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.email-layout-tile { display: flex; flex-direction: column; gap: 6px; padding: 8px 9px 7px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-card); cursor: grab; transition: .12s; }
.email-layout-tile:hover { border-color: var(--accent); background: var(--bg-hover); box-shadow: 0 2px 8px rgba(16,24,40,.07); }
.email-layout-tile:active { cursor: grabbing; }
.email-layout-tile-ic { display: flex; gap: 3px; height: 24px; }
.email-layout-tile-ic > span { border: 1.5px solid #9db4e8; background: #eef3ff; border-radius: 3px; }
.email-layout-tile:hover .email-layout-tile-ic > span { border-color: var(--accent); background: #e0eaff; }
.email-layout-tile-lbl { font-size: .66rem; font-weight: 600; color: var(--text-secondary); text-align: center; line-height: 1; }
.email-preset-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.email-preset-btn { text-align: left; border: 1px solid var(--border); background: var(--bg-card); border-radius: 8px; padding: 9px 11px; font-size: .76rem; font-weight: 600; color: var(--text); cursor: grab; }
.email-preset-btn:hover { border-color: var(--accent); background: var(--bg-hover); }
.email-preset-btn:active { cursor: grabbing; }
/* Visual preset cards (mini live preview of the blocks) */
.email-preset-card { display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--border); background: var(--bg-card); border-radius: 9px; padding: 5px; cursor: grab; }
.email-preset-card:hover { border-color: var(--accent); box-shadow: 0 2px 9px rgba(16,24,40,.08); }
.email-preset-card:active { cursor: grabbing; }
.email-preset-thumb { height: 52px; background: #fff; border: 1px solid #eef1f6; border-radius: 6px; overflow: hidden; position: relative; }
.email-preset-thumb-inner { position: absolute; top: 0; left: 0; width: 600px; transform: scale(.12); transform-origin: top left; pointer-events: none; }
.email-preset-lbl { font-size: .64rem; font-weight: 600; color: var(--text-secondary); text-align: center; line-height: 1.1; }
/* Right-click context menu */
.em-ctx { background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 10px 34px rgba(0,0,0,.18); padding: 5px; min-width: 168px; }
.em-ctx-item { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 16px; border: none; background: none; padding: 7px 10px; border-radius: 6px; font-size: .82rem; color: var(--text); cursor: pointer; }
.em-ctx-item:hover { background: var(--bg-hover); }
.em-ctx-item.danger { color: #ef4444; }
.em-ctx-key { font-size: .68rem; color: var(--text-muted); }
/* Image gallery */
/* Clean media-library card: bordered rounded thumbnail, filename BELOW it */
.em-gal-cell { position: relative; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.emgal-thumb { position: relative; aspect-ratio: 4/3; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-hover); box-shadow: 0 1px 2px rgba(16,24,40,.04); transition: box-shadow .12s, border-color .12s; }
.em-gal-cell:hover .emgal-thumb { border-color: var(--accent); box-shadow: 0 8px 20px rgba(16,24,40,.10); }
.emgal-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.em-gal-cell:hover .emgal-thumb img { object-fit: contain; background: var(--bg-card); }
.emgal-name { font-size: .72rem; color: var(--text-secondary); padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* cover = uniform, filled thumbnails (wide banners were lost as thin strips
   in a contain cell); hover switches to contain so the full image is visible */
.em-gal-del { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; font-size: 11px; line-height: 1; display: none; }
.em-gal-cell:hover .em-gal-del { display: block; }
/* Gallery folders + Pexels (#6) */
.emgal-tabbar { display: inline-flex; gap: 4px; margin-left: 14px; }
.emgal-tab { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); border-radius: 7px; padding: 4px 12px; font-size: .76rem; font-weight: 600; cursor: pointer; }
.emgal-tab.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.emgal-folders { width: 158px; flex: 0 0 158px; border-right: 1px solid var(--border); padding-right: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.emgal-folder { display: flex; align-items: center; gap: 6px; border: none; background: none; text-align: left; padding: 7px 9px; border-radius: 7px; font-size: .8rem; color: var(--text-secondary); cursor: pointer; width: 100%; }
.emgal-folder:hover { background: var(--bg-hover); }
.emgal-folder.on { background: rgba(63,118,255,.12); color: var(--accent); font-weight: 600; }
.emgal-folder-del { opacity: 0; color: inherit; font-size: .7rem; }
.emgal-folder:hover .emgal-folder-del { opacity: .7; }
.emgal-folder-add { border: 1px dashed var(--border); background: none; color: var(--text-secondary); border-radius: 7px; padding: 7px; font-size: .76rem; cursor: pointer; margin-top: 4px; }
.emgal-folder-add:hover { border-color: var(--accent); color: var(--accent); }
.emgal-folder-drop { background: #eef3ff !important; box-shadow: inset 0 0 0 2px var(--accent, #3f76ff); color: var(--accent) !important; }
/* Gallery image right-click menu */
.em-img-ctx { position: fixed; z-index: 100001; min-width: 180px; max-height: 60vh; overflow-y: auto; }
.em-ctx-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: none; padding: 8px 10px; border-radius: 7px; font-size: .82rem; color: var(--text-primary); cursor: pointer; }
.em-ctx-item span { width: 16px; text-align: center; flex-shrink: 0; }
.em-ctx-item:hover { background: var(--bg-hover, #f0f2f6); }
.em-ctx-item.em-ctx-danger { color: #ef4444; }
.em-ctx-item.em-ctx-danger:hover { background: #fef2f2; }
.em-ctx-label { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 8px 10px 4px; }
.em-ctx-divider { height: 1px; background: var(--border); margin: 5px 4px; }
/* ── SMS campaign composer ── */
.sms-shell { display: flex; flex-direction: column; height: calc(100vh - 20px); }
.sms-topbar { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.sms-title { font-size: 18px; font-weight: 700; color: var(--text); }
.sms-body { flex: 1; display: grid; grid-template-columns: 280px 1fr 320px; gap: 0; min-height: 0; }
.sms-left { border-right: 1px solid var(--border); padding: 18px 20px; overflow-y: auto; }
.sms-center { padding: 24px 28px; overflow-y: auto; }
.sms-right { border-left: 1px solid var(--border); padding: 18px 20px; overflow-y: auto; }
.sms-sec-hd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-bottom: 12px; }
.sms-lbl { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin: 0 0 5px; }
.sms-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.sms-rcpt { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--text-primary); background: var(--bg-card); }
.sms-radio { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-primary); padding: 7px 0; cursor: pointer; }
.sms-radio input { accent-color: var(--accent); }
.sms-textarea { width: 100%; min-height: 220px; border: 1px solid var(--border); border-radius: 10px; padding: 14px; font-size: 14px; line-height: 1.6; resize: vertical; outline: none; color: var(--text-primary); background: var(--bg-card); font-family: var(--font); }
.sms-textarea:focus { border-color: var(--accent); }
.sms-toolbar { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.sms-tool { width: 32px; height: 30px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-card); cursor: pointer; font-size: 15px; }
.sms-tool:hover { border-color: var(--accent); }
.sms-unsub { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-secondary); font-weight: 600; margin-left: 6px; }
.sms-unsub input { accent-color: var(--accent); }
.sms-count { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.sms-phone { margin-top: 18px; border: 8px solid #1f2937; border-radius: 28px; background: #f1f4f8; min-height: 300px; padding: 14px 10px; box-shadow: 0 8px 26px rgba(16,24,40,.18); }
.sms-phone-hd { text-align: center; font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 14px; }
.sms-bubble { background: #e6e9ef; color: var(--text-primary); border-radius: 14px; padding: 10px 12px; font-size: 13px; line-height: 1.5; max-width: 86%; white-space: pre-wrap; word-break: break-word; }
.sms-actions { display: flex; gap: 10px; justify-content: center; padding: 14px; border-top: 1px solid var(--border); }
.sms-pop { position: absolute; z-index: 100001; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(16,24,40,.16); padding: 6px; min-width: 180px; }
.sms-emoji-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.sms-emoji-grid button { border: none; background: none; font-size: 18px; cursor: pointer; padding: 6px; border-radius: 6px; }
.sms-emoji-grid button:hover { background: var(--bg-hover); }
.sms-pop-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: none; background: none; text-align: left; padding: 7px 9px; border-radius: 6px; font-size: .8rem; color: var(--text-primary); cursor: pointer; }
.sms-pop-item:hover { background: var(--bg-hover); }
.sms-pop-item code { font-size: .68rem; color: var(--text-muted); }
.sms-prof-row { display: flex; align-items: center; gap: 8px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.sms-prof-add { border-top: 1px solid var(--border); padding-top: 4px; }
.sms-verify-note { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; border-radius: 8px; padding: 10px 12px; font-size: .82rem; line-height: 1.5; margin-bottom: 12px; }
/* Country picker for SMS phone inputs */
.sms-phone-group { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg-card); }
.sms-phone-group .email-input { border: none !important; border-radius: 0 !important; flex: 1; min-width: 0; }
.sms-phone-group .email-input:focus { box-shadow: none !important; }
.sms-cc { display: inline-flex; align-items: center; gap: 5px; border: none; border-right: 1px solid var(--border); background: var(--bg-hover); padding: 0 10px; font-size: .82rem; color: var(--text-primary); cursor: pointer; white-space: nowrap; }
.sms-cc:hover { background: var(--border); }
.sms-cc .lf-flag-img { width: 18px; height: 13px; }
.sms-cc-pop { position: absolute; z-index: 100002; width: 260px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(16,24,40,.18); padding: 6px; }
.sms-cc-search { width: 100%; border: 1px solid var(--border); border-radius: 7px; padding: 7px 9px; font-size: .8rem; outline: none; margin-bottom: 6px; background: var(--bg-page); color: var(--text-primary); }
.sms-cc-list { max-height: 260px; overflow-y: auto; }
.sms-cc-item { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; text-align: left; padding: 7px 9px; border-radius: 6px; font-size: .82rem; color: var(--text-primary); cursor: pointer; }
.sms-cc-item:hover { background: var(--bg-hover); }
.sms-cc-item .lf-flag-img { width: 20px; height: 15px; }
.em-gal-cell[draggable="true"] { cursor: grab; }
.em-gal-cell[draggable="true"]:active { cursor: grabbing; }
.emgal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.emgal-drop { border: 1.5px dashed var(--border); border-radius: 9px; padding: 8px 14px; text-align: center; color: var(--text-muted); font-size: .76rem; margin-bottom: 10px; cursor: pointer; }
.emgal-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.emgal-toolbar .emgal-drop { flex: 1; margin: 0; }
.emgal-search { max-width: 260px; }
.emgal-drop.on { border-color: var(--accent); background: var(--bg-hover); }
.emgal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 16px 14px; overflow-y: auto; align-content: start; flex: 1; padding: 4px 2px 10px; }
.emgal-px-search { display: flex; gap: 8px; margin-bottom: 10px; }
.emgal-px-search input { flex: 1; }
.emgal-move { position: absolute; bottom: 3px; left: 3px; right: 3px; width: calc(100% - 6px); font-size: .64rem; border: none; border-radius: 5px; background: rgba(0,0,0,.6); color: #fff; padding: 2px; display: none; cursor: pointer; }
.em-gal-cell:hover .emgal-move { display: block; }
.emgal-credit { position: absolute; bottom: 0; left: 0; right: 0; font-size: .6rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); padding: 8px 4px 2px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.email-subblock-drop { box-shadow: inset 0 3px 0 var(--accent, #3f76ff) !important; }
/* Inline editing affordances */
.email-editing { outline: 2px solid var(--accent, #3f76ff); outline-offset: 2px; border-radius: 3px; cursor: text; }
.email-link-pop { position: absolute; z-index: 100000; display: flex; align-items: center; gap: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 11px; padding: 6px; box-shadow: 0 12px 32px rgba(16,24,40,.16); }
.email-link-pop .email-link-inp { width: 210px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: .8rem; outline: none; background: var(--bg-card); color: var(--text-primary); }
.email-link-pop .email-link-inp::placeholder { color: #b6c0cf; }
.email-link-pop .email-link-inp:focus { border-color: var(--accent, #3f76ff); box-shadow: 0 0 0 3px rgba(63,118,255,.12); }
.email-link-pop .email-link-ok { background: var(--accent, #3f76ff); color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font-size: .76rem; font-weight: 600; cursor: pointer; }
.email-link-pop .email-link-ok:hover { filter: brightness(1.06); }
.email-link-pop .email-link-cancel { background: transparent; color: #9aa5b5; border: none; cursor: pointer; font-size: .95rem; line-height: 1; padding: 5px 7px; border-radius: 7px; }
.email-link-pop .email-link-cancel:hover { color: var(--text-secondary); background: var(--bg-hover); }
/* Keeps the selected text visibly highlighted while the link popup is open */
.email-link-mark { background: rgba(63,118,255,.24); border-radius: 2px; }
/* Hover popup for an existing link (edit / remove) */
.email-link-hover { position: absolute; z-index: 100000; display: flex; align-items: center; gap: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px; padding: 4px 6px 4px 10px; box-shadow: 0 10px 28px rgba(16,24,40,.16); font-size: .74rem; }
.email-link-hover .elh-url { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3f76ff; }
.email-link-hover button { border: none; background: none; cursor: pointer; font-weight: 600; font-size: .72rem; padding: 4px 8px; border-radius: 6px; }
.email-link-hover .elh-edit { color: #3f76ff; }
.email-link-hover .elh-edit:hover { background: #eef3ff; }
.email-link-hover .elh-del { color: #ef4444; }
.email-link-hover .elh-del:hover { background: #fef2f2; }
/* Compact menu-item fields (#4) */
.email-menu-item { position: relative; border: 1px solid var(--border); border-radius: 8px; padding: 6px 26px 6px 6px; margin-bottom: 6px; }
.email-menu-item .email-mi-input { margin-bottom: 4px; }
.email-menu-item .email-mi-last { margin-bottom: 0; }
.email-menu-item .email-mi-del { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); background: none; border: none; color: #ef4444; cursor: pointer; font-size: 12px; }
/* Image inspector drop area (#5) */
.email-insp-drop { border: 2px dashed var(--border); border-radius: 10px; padding: 16px 12px; text-align: center; cursor: pointer; transition: border-color .12s, background .12s; }
.email-insp-drop:hover { border-color: var(--accent); }
.email-insp-drop.on { border-color: var(--accent); background: var(--bg-hover); }
/* Editor desktop / mobile view toggle */
.email-view-toggle { display: inline-flex; gap: 2px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.email-view-toggle button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 26px; border: none; background: none; color: var(--text-secondary); border-radius: 6px; cursor: pointer; }
.email-view-toggle button.on { background: var(--accent); color: #fff; }
/* Mobile canvas: transition width + stack grid columns like a real phone client */
.email-canvas { transition: width .22s ease; }
.email-canvas.is-mobile { overflow-x: hidden; }
.email-canvas.is-mobile .email-col-cell { display: block !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
/* Configurable mobile grids — mirror the exported email's media-query behavior */
.email-canvas.is-mobile .email-col-cell.em-col-m2 { display: inline-block !important; width: 50% !important; box-sizing: border-box; }
.email-canvas.is-mobile .email-col-cell.em-col-keep { display: table-cell !important; width: auto !important; }
.email-canvas.is-mobile .em-prodm1 { width: 100% !important; display: block !important; }
.email-canvas.is-mobile .em-prodm2 { width: 50% !important; display: inline-block !important; }
.email-canvas.is-mobile .email-col-cell td, .email-canvas.is-mobile table { max-width: 100% !important; }
.email-canvas.is-mobile img { max-width: 100% !important; height: auto !important; }
.email-canvas.is-mobile a { width: auto !important; max-width: 100% !important; box-sizing: border-box; overflow-wrap: break-word; }
/* Email preview modal with desktop / mobile toggle */
.email-preview-modal { background: var(--bg-page, #f4f5f7); border-radius: 12px; width: 96vw; max-width: 1040px; height: 90vh; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0,0,0,.35); overflow: hidden; }
.email-preview-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.email-preview-toggle { display: inline-flex; gap: 3px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.email-preview-toggle button { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; color: var(--text-secondary); font-size: .78rem; font-weight: 600; padding: 5px 12px; border-radius: 7px; cursor: pointer; }
.email-preview-toggle button.on { background: var(--accent); color: #fff; }
.email-preview-close { margin-left: auto; background: none; border: none; font-size: 17px; color: var(--text-muted); cursor: pointer; }
.email-preview-stage { flex: 1; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 24px 16px; }
.email-preview-frame { transition: width .22s ease; background: #fff; box-shadow: 0 6px 24px rgba(16,24,40,.12); border-radius: 6px; overflow: hidden; }
.email-preview-frame.is-desktop { width: 100%; max-width: 720px; height: calc(90vh - 110px); }
.email-preview-frame.is-mobile { width: 390px; max-width: 390px; height: calc(90vh - 110px); border-radius: 26px; border: 9px solid #1f2937; box-shadow: 0 10px 34px rgba(16,24,40,.28); }
.email-preview-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Inspector tabs */
.email-insp-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--border); margin: -2px 0 14px; }
.email-insp-tabs span { font-size: 12.5px; font-weight: 600; color: var(--text-muted); padding: 0 0 9px; border-bottom: 2px solid transparent; }
.email-insp-tabs span.on { color: var(--accent); border-bottom-color: var(--accent); }
.email-field { margin-bottom: 10px; }
.email-field > label { display: block; font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; font-weight: 500; }
.email-input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 7px; padding: 7px 9px; font-size: .82rem; color: var(--text); background: var(--bg-card); outline: none; font-family: inherit; resize: vertical; height: auto; }
.email-input:focus { border-color: var(--accent); }
select.email-input { height: 34px; cursor: pointer; }
.email-color { width: 100%; height: 32px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-card); cursor: pointer; padding: 2px; }
.email-align { display: flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.email-align button { flex: 1; border: none; background: var(--bg-card); padding: 6px 0; cursor: pointer; color: var(--text-secondary); font-size: 13px; border-left: 1px solid var(--border); }
.email-align button:first-child { border-left: none; }
.email-align button.on { background: var(--accent); color: #fff; }
.email-insp-note { font-size: 11px; color: var(--text-muted); margin-top: 12px; line-height: 1.5; }
.email-export-ov { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 25000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.email-export-modal { background: var(--bg-card); border-radius: 12px; width: 640px; max-width: 100%; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 16px; }
.email-export-hd { display: flex; align-items: center; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.email-export-ta { flex: 1; min-height: 280px; border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--text); background: var(--bg-elevated); resize: none; outline: none; }
.email-export-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
@media (max-width: 820px) { .email-inspector { width: 240px; } }
.email-set-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-card); }
.email-set-tbl { width: 100%; border-collapse: collapse; font-size: .8rem; }
.email-set-tbl th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--bg-elevated); white-space: nowrap; }
.email-set-tbl td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
.email-set-tbl tbody tr:last-child td { border-bottom: none; }
.email-dns-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .72rem; color: var(--text-secondary); word-break: break-all; }
.email-set-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--bg-elevated); }
.email-dom-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-card); margin-bottom: 12px; }
.email-dom-hd { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border); background: var(--bg-elevated); font-size: .9rem; }
.proj-issue-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 20000; opacity: 0; transition: opacity .2s; display: flex; justify-content: flex-end; }
.proj-issue-overlay.open { opacity: 1; }
.proj-issue-panel { width: 460px; max-width: 100vw; height: 100%; background: var(--bg-card); border-left: 1px solid var(--border); display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(16,24,40,.12); transform: translateX(24px); transition: transform .2s ease; }
.proj-issue-overlay.open .proj-issue-panel { transform: translateX(0); }
/* Plane-style issue peek panel */
.pip-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.pip-crumb { font-size: .78rem; color: var(--text-secondary); display: flex; align-items: center; gap: 7px; }
.pip-iconbtn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 5px; border-radius: 6px; display: flex; align-items: center; }
.pip-iconbtn:hover { background: var(--bg-hover); color: var(--text); }
.pip-body { padding: 18px; overflow-y: auto; flex: 1; }
.pip-title { width: 100%; font-size: 1.12rem; font-weight: 600; color: var(--text); border: none; outline: none; background: transparent; padding: 0; box-sizing: border-box; line-height: 1.35; }
.pip-desc { width: 100%; min-height: 56px; margin-top: 10px; padding: 0; border: none; outline: none; background: transparent; resize: vertical; font-family: inherit; font-size: .86rem; color: var(--text); line-height: 1.5; }
.pip-desc::placeholder { color: var(--text-muted); }
.pip-props { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6px 0; margin: 16px 0; display: flex; flex-direction: column; }
.pip-prow { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.pip-k { width: 108px; flex-shrink: 0; color: var(--text-secondary); font-size: .8rem; display: flex; align-items: center; gap: 8px; }
.pip-v { flex: 1; min-width: 0; }
.pip-ctl { font-size: .82rem; border: 1px solid transparent; border-radius: 6px; padding: 4px 8px; background: transparent; color: var(--text); cursor: pointer; outline: none; max-width: 100%; font-family: inherit; transition: background .12s, border-color .12s; }
.pip-ctl:hover { background: var(--bg-hover); }
.pip-ctl:focus { border-color: var(--accent); background: var(--bg-card); }
.pip-sec-title { font-size: .72rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .4px; margin: 18px 0 9px; }

/* ── Plane-style thin scrollbars (global) ─────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: #d4d4d8 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #b6b6bd; background-clip: content-box; }

/* Footer / User */
.sidebar-footer { padding: 8px 8px; border-top: 1px solid rgba(255,255,255,.07); }
.api-status { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: rgba(255,255,255,.4); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.status-dot.online { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.6); }
.status-dot.offline { background: rgba(255,255,255,.25); }
.status-dot.demo { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,.5); }
.main-content { flex: 1; margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; width: calc(100vw - var(--sidebar-w)); max-width: calc(100vw - var(--sidebar-w)); overflow-x: hidden; transition: margin-left .22s ease, width .22s ease, max-width .22s ease; position: relative; }
.main-content.lp-builder-open { overflow: hidden; }
.sidebar.collapsed ~ .main-content { margin-left: var(--sidebar-w-collapsed); width: calc(100vw - var(--sidebar-w-collapsed)); max-width: calc(100vw - var(--sidebar-w-collapsed)); }

/* User section in footer */
.sidebar-user {
  display: flex; align-items: center; gap: 10px; padding: 10px 8px;
  border-radius: 8px; transition: background .15s; cursor: default;
}
.sidebar-user:hover { background: rgba(255,255,255,.05); }
.sidebar-user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .8rem; font-weight: 700; flex-shrink: 0;
  text-transform: uppercase; letter-spacing: .03em;
}
.sidebar-user-info { flex: 1; min-width: 0; }

/* Top Bar */
.top-bar { height: var(--topbar-h); padding: 0 24px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid #e6e6e9; background: #fff; position: sticky; top: 0; z-index: 50; }
.menu-toggle { display: none; background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; border-radius: 6px; }
.menu-toggle:hover { color: var(--text); background: var(--bg-card-hover); }
.page-title { font-size: 1rem; font-weight: 600; white-space: nowrap; }
.global-ctx { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.global-ctx:empty { display: none; }
.global-ctx-select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-secondary); font-size: 13px; font-weight: 500; min-width: 180px; max-width: 280px; outline: none; cursor: pointer; transition: border-color .15s; text-overflow: ellipsis; }
.global-ctx-select:focus { border-color: var(--text-primary); box-shadow: 0 0 0 2px rgba(26,26,26,.08); }
.global-ctx-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.global-ctx-group { display: flex; align-items: center; gap: 6px; }
.global-ctx-switch-btn { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border, #e5e7eb); border-radius: 7px; background: var(--bg-card, #fff); cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text-primary, #374151); max-width: 260px; transition: all .15s; }
.global-ctx-switch-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-ctx-switch-btn:hover { background: var(--bg-hover, #f3f4f6); border-color: #1a1a1a; color: #1a1a1a; }
.global-ctx-sep { width: 1px; height: 24px; background: #e5e7eb; }
.top-actions { margin-inline-start: auto; display: flex; gap: 8px; flex-shrink: 0; }

/* Global account selector in top bar */
.global-acct-wrap { position: relative; }
.global-acct-btn { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text-primary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap; max-width: 260px; }
.global-acct-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.global-acct-btn:hover { background: #ede9fe; border-color: #a5b4fc; }
.global-acct-btn--empty { border-color: #e5e7eb; background: #f9fafb; color: #6b7280; }
.global-acct-btn--empty:hover { border-color: #1a1a1a; color: #1a1a1a; background: #f5f5f5; }
.global-acct-chevron { transition: transform .2s; flex-shrink: 0; }
.global-ctx-connect-btn { display: flex; align-items: center; gap: 3px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-card); cursor: pointer; transition: background .15s; flex-shrink: 0; }
.global-ctx-connect-btn:hover { background: var(--bg-hover); }
.btn-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; transition: all var(--transition); }
.btn-icon:hover { background: var(--bg-card-hover); color: var(--text); border-color: var(--border-hover); }

/* Sections */
.section { padding: 20px 16px; width: 100%; }
.section.hidden { display: none; }
.hero { text-align: center; margin-bottom: 32px; }
.hero-title { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 10px; }
.gradient-text { color: #3f76ff; -webkit-text-fill-color: #3f76ff; }
.hero-subtitle { color: var(--text-secondary); font-size: 1rem; max-width: 600px; margin: 0 auto; line-height: 1.7; }

/* Inputs (base) */
input[type="text"], input[type="password"], select, textarea { width: 100%; height: 44px; padding: 0 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: .9rem; transition: all var(--transition); outline: none; direction: ltr; }
input::placeholder, textarea::placeholder { color: var(--text-placeholder); }
input:focus, select:focus, textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--primary-glow); }
select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 10px center; background-repeat: no-repeat; background-size: 20px; padding-right: 36px; }


/* Buttons */
.btn-primary { background: #3f76ff; color: #fff; border: none; border-radius: 4px; padding: 10px 20px; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 2px 4px rgba(0,0,0,.11); }
.btn-primary:hover { background: #2f5fd9; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(63,118,255,.25); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid #D2D2D2; border-radius: 4px; padding: 10px 20px; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 6px; }
.btn-secondary:hover { border-color: #3f76ff; color: #3f76ff; }
.btn-sm { padding: 6px 12px; font-size: .78rem; }
.btn-lg { padding: 14px 28px; font-size: .92rem; }

/* Toast */
/* Connect Platforms Modal (auth only) */
.acct-picker-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.acct-picker-overlay.hidden { display: none; }
.acct-picker-modal--auth { background: #fff; border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,.18); padding: 28px 32px 28px; width: 1100px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; }
.acct-picker-auth-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.acct-picker-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 0; }
.acct-picker-auth-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; border-radius: 6px; display: flex; align-items: center; transition: color .15s; }
.acct-picker-auth-close:hover { color: var(--text-secondary); }
.acct-picker-sub { font-size: 13px; color: #6b7280; margin: 0 0 16px; }
.acct-picker-auth-body { display: flex; flex-direction: column; gap: 10px; }
.acct-picker-platforms-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .acct-picker-platforms-row { grid-template-columns: 1fr; } }
.acct-picker-connect-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid #e5e7eb; border-radius: 12px; font-size: 13px; color: var(--text); }
.acct-picker-connect-row svg { flex-shrink: 0; }
.acct-picker-connect-row span { flex: 1; font-weight: 500; }
.acct-picker-connect-btn { padding: 6px 12px; border-radius: 7px; font-size: 12px; font-weight: 500; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; white-space: nowrap; transition: background .15s; }
.acct-picker-connect-btn:hover { background: var(--bg-hover); }
.acct-picker-connect-btn--danger { color: #ef4444; border-color: #fca5a5; }
.acct-picker-connect-btn--danger:hover { background: #fef2f2; }
.acct-picker-mcc-row { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--bg-hover); border-radius: 8px; border: 1px dashed var(--border); }
.acct-picker-mcc-input { flex: 1; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border); background: #fff; color: var(--text); font-size: 12px; outline: none; transition: border-color .15s; }
.acct-picker-mcc-input:focus { border-color: var(--text-primary); }
.acct-picker-mcc-input::placeholder { color: var(--text-muted); }
.acct-picker-token-warn { display: flex; align-items: flex-start; gap: 6px; padding: 8px 10px; border-radius: 8px; background: #fef9c3; border: 1px solid #fde047; color: #854d0e; font-size: 11px; line-height: 1.5; }
.acct-picker-token-warn svg { flex-shrink: 0; margin-top: 1px; color: #ca8a04; }
.acct-picker-token-warn a { color: #1d4ed8; text-decoration: underline; }
.acct-picker-done-btn { padding: 10px 24px; border-radius: 9px; font-size: 14px; font-weight: 600; border: none; background: var(--bg-hover); color: var(--text-secondary); cursor: pointer; transition: background .15s; }
.acct-picker-done-btn:hover { background: #e5e7eb; }
/* Two-column accounts grid */
.picker-columns-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
.picker-columns-grid--single { grid-template-columns: 1fr; }
.picker-columns-grid--three  { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 860px) { .picker-columns-grid--three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .picker-columns-grid { grid-template-columns: 1fr; } }
.picker-col { display: flex; flex-direction: column; border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden; min-height: 200px; }
.picker-col-header { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--bg-hover); border-bottom: 1px solid var(--border); }
.picker-col-header-label { font-size: .8rem; font-weight: 700; color: var(--text-secondary); flex: 1; }
.picker-col-count { font-size: .72rem; color: var(--text-muted); font-weight: 400; }
.picker-col-controls { display: flex; align-items: center; gap: 5px; padding: 7px 10px; border-bottom: 1px solid #f3f4f6; background: var(--bg-card); }
.picker-col-search { flex: 1; padding: 5px 9px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-hover); font-size: .75rem; color: var(--text-secondary); outline: none; transition: border-color .15s; }
.picker-col-search:focus { border-color: var(--text-secondary); background: var(--bg-card); }
.picker-col-action { padding: 4px 9px; border-radius: 6px; font-size: .7rem; font-weight: 500; border: 1px solid var(--border); background: none; color: #6b7280; cursor: pointer; white-space: nowrap; transition: background .12s; }
.picker-col-action:hover { background: var(--bg-hover); color: var(--text-secondary); }
.picker-col-list { flex: 1; overflow-y: auto; max-height: 300px; }
.picker-footer-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #f3f4f6; }
.acct-picker-apply-btn { padding: 10px 28px; border-radius: 9px; font-size: .85rem; font-weight: 600; border: none; background: #1a1a1a; color: #fff; cursor: pointer; transition: background .15s; }
.acct-picker-apply-btn:hover { background: #374151; }

/* Ad accounts list inside picker */
.acct-picker-section-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 6px; }
.acct-picker-section-header > span { font-size: .75rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; }
.acct-picker-search { flex: 1; max-width: 200px; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-hover); font-size: .78rem; color: var(--text-secondary); outline: none; transition: border-color .15s; }
.acct-picker-search:focus { border-color: var(--text-primary); background: var(--bg-card); }
.acct-picker-accounts-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; }
.acct-picker-group-label { display: flex; align-items: center; gap: 6px; padding: 7px 12px 5px; font-size: .72rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid #f3f4f6; background: var(--bg-hover); position: sticky; top: 0; }
.acct-picker-acct-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; transition: background .12s; border-bottom: 1px solid #f3f4f6; }
.acct-picker-acct-row:last-child { border-bottom: none; }
.acct-picker-acct-row:hover { background: var(--bg-hover); }
.acct-picker-acct-row.checked { background: #f0fdf4; }
.acct-picker-acct-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.acct-picker-acct-name { font-size: .83rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-picker-acct-id { font-size: .72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-picker-empty { padding: 16px 12px; text-align: center; font-size: .8rem; color: var(--text-muted); }
.acct-picker-apply-btn { width: 100%; padding: 10px; border-radius: 9px; font-size: .85rem; font-weight: 600; border: none; background: #1a1a1a; color: #fff; cursor: pointer; margin-bottom: 6px; transition: background .15s; }
.acct-picker-apply-btn:hover { background: #333; }
.acct-picker-modal--auth { max-height: 90vh; overflow-y: auto; }
.acct-picker-redirect-hint { display: flex; flex-direction: column; gap: 6px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 10px 13px; font-size: .75rem; color: #92400e; line-height: 1.5; }
.acct-picker-redirect-hint > svg { flex-shrink: 0; }
.acct-picker-redirect-hint a { color: #b45309; font-weight: 600; }
.acct-picker-redirect-hint > * { display: flex; align-items: center; gap: 6px; }
.acct-picker-redirect-uri { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid #fcd34d; border-radius: 7px; padding: 5px 8px 5px 10px; margin-top: 2px; }
.acct-picker-redirect-uri code { flex: 1; font-size: .73rem; font-family: 'SF Mono','Consolas',monospace; color: #1e293b; word-break: break-all; user-select: all; }

/* Account Selector Popup (multi-select, used from Leads & init) */
.acct-sel-search-wrap { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--border); border-radius: 10px; padding: 0 12px; height: 40px; margin-bottom: 10px; transition: border-color .15s; }
.acct-sel-search-wrap:focus-within { border-color: var(--text-primary); box-shadow: 0 0 0 2px rgba(26,26,26,.08); }
.acct-sel-search { border: none; outline: none; flex: 1; font-size: 13.5px; color: var(--text-secondary); background: transparent; }
.acct-sel-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-bottom: 2px; }
.acct-sel-section { font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; padding: 4px 4px 2px; }
.acct-sel-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; transition: all .12s; user-select: none; }
.acct-sel-item:hover { background: var(--bg-hover); border-color: #c7d2fe; }
.acct-sel-item--checked { border-color: #1a1a1a; background: #f5f5f5; }
.acct-sel-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border); background: var(--bg-card); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .12s; }
.acct-sel-item--checked .acct-sel-check { background: #1a1a1a; border-color: #1a1a1a; }
.acct-sel-icon { flex-shrink: 0; }
.acct-sel-body { flex: 1; min-width: 0; }
.acct-sel-name { font-size: 13.5px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-sel-id { font-size: 11.5px; color: var(--text-muted); }
.acct-sel-status { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 9999px; white-space: nowrap; }
.acct-sel-status.active { background: #dcfce7; color: #16a34a; }
.acct-sel-status.inactive { background: #fee2e2; color: #dc2626; }
.acct-sel-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }
.acct-sel-link { background: none; border: none; color: var(--text-primary); font-size: 13px; cursor: pointer; text-decoration: underline; padding: 0; }
.acct-sel-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid #f1f5f9; margin-top: 4px; }
.acct-sel-connect-link { display: flex; align-items: center; gap: 5px; background: none; border: none; color: #6b7280; font-size: 12px; font-weight: 500; cursor: pointer; padding: 4px 6px; border-radius: 6px; transition: color .12s; }
.acct-sel-connect-link:hover { color: var(--text-secondary); background: var(--bg-hover); }

/* Ads Manager account selector dropdown */
.am-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.am-title-left { display: flex; align-items: center; gap: 12px; }
.am-title-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.am-acct-picker-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9px; border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text-primary); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap; }
.am-acct-picker-btn:hover { background: #f0f4ff; border-color: #6366f1; }
.am-acct-picker-btn--empty { border-color: #e5e7eb; background: #f9fafb; }
.am-acct-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 5px; font-size: 11px; font-weight: 600; }
.am-acct-chip--meta   { background: rgba(24,119,242,.1); color: #1877f2; }
.am-acct-chip--google { background: rgba(66,133,244,.1); color: #2e7d32; }
.am-acct-chip--dv360  { background: rgba(57,73,171,.1);  color: #3949ab; }
.am-account-selector-wrap { position: relative; }
.am-account-selector-btn { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text-primary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap; }
.am-account-selector-btn:hover { background: #ede9fe; border-color: #a5b4fc; }
.am-acct-chevron { transition: transform .2s; }
.am-account-selector-btn[aria-expanded="true"] .am-acct-chevron { transform: rotate(180deg); }
.am-account-dropdown { position: absolute; top: calc(100% + 6px); left: 0; width: 360px; background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.16); z-index: 500; overflow: hidden; }
.am-account-dropdown.hidden { display: none; }
.am-acct-dd-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #f1f5f9; }
.am-acct-dd-search input { border: none; outline: none; flex: 1; font-size: 13px; color: var(--text-secondary); background: transparent; }
.am-acct-dd-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.am-acct-dd-section { font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; padding: 6px 8px 4px; }
.am-acct-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .12s; }
.am-acct-item:hover { background: var(--bg-hover); }
.am-acct-item--checked { background: #f5f3ff; }
.am-acct-item--checked:hover { background: #ede9fe; }
.am-acct-item-check { width: 17px; height: 17px; border-radius: 4px; border: 1.5px solid var(--border); background: var(--bg-card); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .12s; }
.am-acct-item--checked .am-acct-item-check { background: #1a1a1a; border-color: #1a1a1a; }
.am-acct-item--partial { background: #faf5ff; }
.am-acct-item--partial:hover { background: #f3e8ff; }
.am-acct-item--partial .am-acct-item-check { background: #a78bfa; border-color: #a78bfa; }
.am-acct-item--partial { background: #faf5ff; }
.am-acct-item--partial:hover { background: #f3e8ff; }
.am-acct-item--partial .am-acct-item-check { background: #a78bfa; border-color: #a78bfa; }
.am-acct-item-icon { flex-shrink: 0; }
.am-acct-item-body { flex: 1; min-width: 0; }
.am-acct-item-name { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-acct-item-id { font-size: 11px; color: var(--text-muted); }
.am-acct-dd-empty { padding: 18px 12px; text-align: center; font-size: 13px; color: var(--text-muted); }
.am-acct-dd-loading { display: flex; align-items: center; gap: 8px; padding: 10px 10px; font-size: 12px; color: #6b7280; }
.am-acct-dd-connect { background: none; border: none; color: var(--text-primary); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: underline; padding: 0; }
.am-acct-dd-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-top: 1px solid #f1f5f9; }
.am-acct-dd-connect-btn { display: flex; align-items: center; gap: 5px; background: none; border: none; color: #6b7280; font-size: 12px; font-weight: 500; cursor: pointer; padding: 4px 6px; border-radius: 6px; transition: color .12s; }
.am-acct-dd-connect-btn:hover { color: var(--text-secondary); background: var(--bg-hover); }
.am-acct-dd-refresh { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; color: #6b7280; transition: all .12s; }
.am-acct-dd-refresh:hover { background: var(--bg-hover); color: var(--text-secondary); border-color: #d1d5db; }
.am-acct-dd-apply { padding: 7px 16px; border-radius: 7px; background: #1a1a1a; color: #fff; font-size: 13px; font-weight: 600; border: none; cursor: pointer; transition: background .15s; }
.am-acct-dd-apply:hover { background: #333; }
.am-acct-dd-clear { padding: 6px 12px; border-radius: 7px; background: none; border: 1px solid var(--border); color: #6b7280; font-size: 12px; font-weight: 500; cursor: pointer; transition: all .12s; }
.am-acct-dd-clear:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.05); }

/* Above every modal/editor overlay (highest is 10100) — errors must never hide behind a dialog. */
.toast { position: fixed; bottom: 24px; right: 24px; display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 10px; font-size: .84rem; font-weight: 500; z-index: 100500; box-shadow: 0 8px 24px rgba(0,0,0,.3); } /* above .am-opt-overlay (99999) — error toasts were invisible behind the optimize drawer */
.toast.success { background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.3); color: #22c55e; }
.toast.error { background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.3); color: #ef4444; }
.toast.info { background: rgba(59,130,246,.14); border: 1px solid rgba(59,130,246,.3); color: #2563eb; }
.toast.hidden { display: none; }
.hidden { display: none !important; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal-overlay.hidden { display: none; }

/* Responsive */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .main-content { margin-left: 0; }
  .menu-toggle { display: flex; }
  .section { padding: 24px 16px; }
  .hero-title { font-size: 1.5rem; }
}

/* Lead Forms Table */
.lf-forms-table { table-layout: fixed; width: 100%; }
.lf-col-name { width: 28%; }
.lf-col-page { width: 16%; }
.lf-col-status { width: 8%; text-align: center; }
.lf-col-date { width: 10%; white-space: nowrap; }
.lf-col-num { width: 7%; text-align: center; font-weight: 700; }
.lf-col-q { width: 7%; text-align: center; }
.lf-col-locale { width: 7%; text-align: center; }
.lf-form-row { cursor: pointer; transition: background .15s; }
.lf-form-row:hover { background: rgba(99,102,241,.04); }
.lf-form-selected { background: rgba(99,102,241,.08) !important; border-left: 3px solid var(--primary); }
.lf-form-name { font-weight: 600; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.lf-forms-table td { vertical-align: middle; padding: 10px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 42px; max-height: 42px; box-sizing: border-box; }
.lf-forms-table th { cursor: pointer; user-select: none; padding: 8px; font-size: .75rem; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.lf-forms-table th:hover { color: var(--primary); }

/* Lead Forms CRM */
.lf-crm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.lf-stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; transition: border-color .2s, box-shadow .2s, transform .2s; position: relative; overflow: hidden; }
.lf-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #1a1a1a; opacity: 0; transition: opacity .2s; }
.lf-stat-card:hover { border-color: rgba(99,102,241,.3); box-shadow: 0 4px 16px rgba(99,102,241,.08); transform: translateY(-1px); }
.lf-stat-card:hover::before { opacity: 1; }
.lf-stat-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin-bottom: 6px; }
.lf-stat-value { font-size: 1.6rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.lf-stat-sub { font-size: .73rem; color: var(--text-muted); margin-top: 4px; }

/* Compact 10-block single-row stats bar */
.lf-crm-stats--compact { gap: 6px; }
.lf-stat-card--mini { border-radius: 8px; padding: 7px 10px; }
.lf-stat-card--mini .lf-stat-label { font-size: .6rem; letter-spacing: .3px; margin-bottom: 2px; }
.lf-stat-card--mini .lf-stat-value { font-size: .95rem; font-weight: 700; }
.lf-stat-card--mini .lf-stat-sub   { font-size: .6rem; margin-top: 1px; }

.lf-charts-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.lf-chart-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; transition: border-color .2s, box-shadow .2s; }
.lf-chart-card:hover { border-color: rgba(99,102,241,.2); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.lf-chart-title { font-size: .82rem; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }

.lf-bar-chart { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.lf-bar-col { display: flex; flex-direction: column; align-items: center; flex: 1; height: 100%; justify-content: flex-end; position: relative; cursor: pointer; }
.lf-bar { background: var(--primary); border-radius: 3px 3px 0 0; width: 100%; min-width: 8px; transition: height .3s; }
.lf-bar-col:hover .lf-bar { background: var(--primary-hover, #818cf8); }
.lf-bar-label { font-size: .58rem; color: var(--text-muted); margin-top: 4px; white-space: nowrap; }
.lf-bar-count { font-size: .6rem; font-weight: 600; color: var(--text-secondary); position: absolute; top: -14px; }

.lf-h-bars { display: flex; flex-direction: column; gap: 8px; }
.lf-hbar-row { display: flex; align-items: center; gap: 8px; }
.lf-hbar-name { font-size: .74rem; color: var(--text-secondary); width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.lf-hbar-track { flex: 1; height: 18px; background: var(--bg-secondary); border-radius: 4px; overflow: hidden; }
.lf-hbar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), #818cf8); border-radius: 4px; transition: width .4s; }
.lf-hbar-val { font-size: .72rem; font-weight: 700; color: var(--text-primary); width: 30px; text-align: right; }

.lf-platform-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.lf-platform-item { display: flex; align-items: center; gap: 6px; background: var(--bg-secondary); border-radius: 6px; padding: 6px 12px; font-size: .78rem; }
.lf-platform-name { color: var(--text-secondary); }
.lf-platform-count { font-weight: 700; color: var(--text-primary); }

.lf-cpl-list { display: flex; flex-direction: column; gap: 2px; max-height: 140px; overflow-y: auto; }
.lf-cpl-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px; padding: 4px 8px; border-radius: 4px; font-size: .72rem; color: var(--text-secondary); cursor: pointer; }
.lf-cpl-row:hover { background: var(--bg-secondary); }
.lf-cpl-val { font-weight: 700; color: var(--primary); text-align: right; }

.lf-leads-table { min-width: 900px; border-collapse: collapse; }
.lf-leads-table th { position: sticky; top: 0; background: var(--bg-card); z-index: 2; white-space: nowrap; font-size: 13px; font-weight: 500; color: #6b7280; text-align: left; padding: 10px 16px !important; height: 40px; border-bottom: 1px solid var(--border); position: relative; }
.lf-leads-table td { height: 40px; max-height: 40px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 400; color: var(--text-secondary); padding: 8px 16px !important; vertical-align: middle; border-bottom: 1px solid #f3f4f6; }
.lf-leads-table tbody tr:hover { background: var(--bg-hover); }
.lf-row-num { color: var(--text-muted); font-size: 14px; text-align: center; }
.lf-cpl-cell { font-weight: 600; color: var(--primary); font-size: 14px; white-space: nowrap; }
.lf-del-cell { width: 40px; text-align: center; }
.lf-del-btn { background: none; border: none; cursor: pointer; color: #d1d5db; padding: 4px 6px; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: color .15s, background .15s; }
.lf-del-btn:hover { color: #ef4444; background: #fef2f2; }
.lf-phone-cell { white-space: nowrap; }
.lf-phone-iso { display: inline-block; font-size: 10px; font-weight: 700; background: #e8f4ff; color: #1d4ed8; border-radius: 4px; padding: 1px 5px; margin-right: 5px; letter-spacing: 0.5px; vertical-align: middle; cursor: help; }
.lf-phone-local { font-size: 13px; color: var(--text-secondary); letter-spacing: 0.01em; vertical-align: middle; }
.lf-phone-link { text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 0; }
.lf-phone-link:hover .lf-phone-local,
.lf-phone-link:hover { text-decoration: underline; color: #1d4ed8; }
@media (pointer: coarse) {
  .lf-phone-link { padding: 4px 0; }
}
.lf-cost-meeting-col, .lf-cost-meeting-cell { white-space: nowrap; text-align: center; }
.lf-cost-meeting-cell { font-weight: 600; color: #f59e0b; font-size: 14px; }
.lf-cost-won-col, .lf-cost-won-cell { white-space: nowrap; text-align: center; }
.lf-cost-won-cell { font-weight: 600; color: #22c55e; font-size: 14px; }
.lf-status-cell { padding: 2px 4px !important; }
.lf-status-select { font-size: 12px; padding: 2px 6px; border-radius: 6px; border: 1.5px solid #6b7280; background: var(--bg-primary); color: #6b7280; font-weight: 700; cursor: pointer; outline: none; appearance: auto; min-width: 100px; max-width: 130px; transition: border-color .2s, color .2s; height: 26px; }
.lf-status-select:focus { box-shadow: 0 0 0 2px rgba(63,118,255,.15); }
.lf-status-pill { display: inline-block; padding: 3px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; letter-spacing: 0; }
.lf-status-subscribed { background: #25BA64; }
.lf-status-unsubscribed { background: #FF6B66; }
.lf-editable { cursor: pointer; transition: background .15s; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-editable:hover { background: rgba(63,118,255,.06); }
.lf-duration-pill { display: inline-flex; align-items: center; justify-content: center; padding: 2px 10px; background: #E3F1FF; color: #3f76ff; font-size: 12px; font-weight: 700; border-radius: 10px; white-space: nowrap; line-height: 16px; }
.lf-graph-col { padding: 0 !important; }
.lf-graph-cell { display: flex; flex-direction: column; justify-content: space-between; height: 34px; padding: 3px 6px 2px; box-sizing: border-box; }
.lf-graph-val { font-size: 9px; font-weight: 400; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.lf-graph-vs { font-size: 8px; color: #3f76ff; }
.lf-graph-svg { width: 100%; height: 16px; display: block; flex-shrink: 0; }
.lf-cell-input { width: 100%; padding: 2px 6px; font-size: .78rem; border: 1.5px solid var(--primary); border-radius: 4px; background: var(--bg-primary); color: var(--text-primary); outline: none; height: 26px; box-sizing: border-box; }
.lf-col-del { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .9rem; padding: 0 2px; margin-left: 4px; }
.lf-col-del:hover { color: var(--danger); }
.lf-del-cell { width: 36px; padding: 0 4px !important; }
.lf-del-btn { background: none; border: none; cursor: pointer; color: #d1d5db; padding: 4px 6px; border-radius: 6px; display: flex; align-items: center; transition: color .15s, background .15s; }
.lf-del-btn:hover { color: #ef4444; background: #fef2f2; }

/* View bar & toggle */
.lf-view-bar { display: flex; justify-content: space-between; align-items: center; margin: 16px 0 12px; }
.lf-view-bar-right { display: flex; align-items: center; gap: 8px; }
.lf-view-toggle { display: flex; background: var(--bg-secondary); border-radius: 10px; padding: 3px; gap: 2px; }
.lf-view-btn { border: none; background: transparent; color: var(--text-muted); padding: 6px 10px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.lf-view-btn:hover { color: var(--text); background: rgba(99,102,241,.06); }
.lf-view-btn.active { background: #3f76ff; color: #fff; box-shadow: 0 2px 6px rgba(63,118,255,.25); }

/* Board / Kanban View */
.lf-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; min-height: 400px; }
.lf-board::-webkit-scrollbar { height: 6px; }
.lf-board::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; }
.lf-board-col { min-width: 260px; max-width: 300px; flex-shrink: 0; background: var(--bg-secondary); border-radius: 14px; display: flex; flex-direction: column; max-height: 70vh; }
.lf-board-col-header { padding: 14px 16px 10px; display: flex; align-items: center; justify-content: space-between; border-top-left-radius: 14px; border-top-right-radius: 14px; }
.lf-board-col-title { font-size: .82rem; font-weight: 700; color: var(--text-primary); }
.lf-board-col-count { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.lf-board-cards { flex: 1; overflow-y: auto; padding: 6px 10px 12px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; }
.lf-board-cards::-webkit-scrollbar { width: 4px; }
.lf-board-cards::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.lf-board-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: all .2s; }
.lf-board-card:hover { border-color: rgba(99,102,241,.3); box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-1px); }
.lf-board-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.lf-board-card-name { font-size: .82rem; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.lf-board-card-date { font-size: .68rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.lf-board-card-info { display: flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--text-secondary); margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-board-card-info svg { flex-shrink: 0; color: var(--text-muted); }
.lf-board-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.lf-board-card-source { font-size: .66rem; color: var(--text-muted); background: var(--bg-secondary); padding: 2px 8px; border-radius: 4px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-board-card-cpl { font-size: .72rem; font-weight: 700; color: var(--primary); }

/* ── View Toggle (Table / Kanban) ── */
.lf-vt-btn { border: none; background: transparent; color: var(--text-muted); padding: 5px 11px; border-radius: 7px; font-size: .78rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all .15s; white-space: nowrap; }
.lf-vt-btn:hover { color: var(--text); background: rgba(99,102,241,.06); }
.lf-vt-btn--active { background: #fff; color: #1a1a1a; box-shadow: 0 1px 4px rgba(0,0,0,.12); font-weight: 600; }

/* ── Kanban Board ── */
.lf-kanban { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 20px; min-height: calc(100vh - 360px); scrollbar-width: thin; scrollbar-color: #e2e8f0 transparent; -webkit-overflow-scrolling: touch; }
.lf-kanban::-webkit-scrollbar { height: 6px; }
.lf-kanban::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.lf-kb-col { min-width: 248px; max-width: 248px; flex-shrink: 0; background: var(--bg-hover); border: 1.5px solid #e2e8f0; border-radius: 14px; display: flex; flex-direction: column; max-height: calc(100vh - 340px); transition: background .15s, border-color .15s; }
.lf-kb-col--over { background: #eff6ff; border-color: #93c5fd; }
.lf-kb-col-header { padding: 12px 14px 10px; display: flex; align-items: center; justify-content: space-between; border-radius: 12px 12px 0 0; flex-shrink: 0; }
.lf-kb-col-title { font-size: .8rem; font-weight: 700; color: #1e293b; }
.lf-kb-col-count { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; line-height: 1.5; }
.lf-kb-cards { flex: 1; overflow-y: auto; padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scrollbar-color: #e2e8f0 transparent; }
.lf-kb-cards::-webkit-scrollbar { width: 4px; }
.lf-kb-cards::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 3px; }
.lf-kb-col-empty { padding: 16px; text-align: center; color: #94a3b8; font-size: .75rem; border: 1.5px dashed #e2e8f0; border-radius: 10px; margin: 4px; }

/* ── Kanban Card ── */
.lf-kb-card { background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 13px 10px; cursor: pointer; user-select: none; transition: box-shadow .15s, transform .12s, border-color .15s; position: relative; }
.lf-kb-card:hover { border-color: #a5b4fc; box-shadow: 0 4px 16px rgba(99,102,241,.12); transform: translateY(-2px); }
.lf-kb-card--dragging { opacity: .45; transform: rotate(1.5deg) scale(1.02); border-color: #818cf8; box-shadow: 0 8px 24px rgba(99,102,241,.2); }
.lf-kb-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 7px; gap: 6px; }
.lf-kb-card-name { font-size: .83rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-kb-card-del { background: none; border: none; padding: 2px 3px; cursor: pointer; color: #d1d5db; border-radius: 5px; flex-shrink: 0; line-height: 0; transition: color .15s, background .15s; }
.lf-kb-card-del:hover { color: #ef4444; background: #fee2e2; }
.lf-kb-card-phone { display: flex; align-items: center; gap: 5px; font-size: .75rem; color: var(--text-secondary); margin-bottom: 4px; }
.lf-kb-card-phone svg { color: #6b7280; flex-shrink: 0; }
.lf-kb-card-campaign { display: flex; align-items: center; gap: 4px; font-size: .7rem; color: var(--text-secondary); background: var(--bg-hover); padding: 3px 7px; border-radius: 5px; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-kb-card-campaign svg { color: #818cf8; flex-shrink: 0; }
.lf-kb-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f3f4f6; }
.lf-kb-card-date { font-size: .68rem; color: var(--text-muted); }
.lf-kb-card-meta { display: flex; align-items: center; gap: 6px; }
.lf-kb-card-cpl { font-size: .72rem; font-weight: 700; color: var(--text-secondary); background: var(--bg-hover); padding: 2px 6px; border-radius: 5px; }
.lf-kb-card-stars { display: flex; gap: 1px; }

.lf-source-cell { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-source-tag { display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; padding: 3px 10px; border-radius: 6px; font-weight: 500; }
.lf-src-campaign { background: rgba(63,118,255,.08); color: #3f76ff; }
.lf-src-adset { background: rgba(139,92,246,.08); color: #8b5cf6; }
.lf-src-ad { background: rgba(236,72,153,.08); color: #ec4899; }
.lf-panel-id { font-family: 'SF Mono','Consolas',monospace; font-size: .7rem; color: var(--text-muted); user-select: all; }

/* Resizable columns */
.lf-resize-handle { position: absolute; right: -8px; top: 0; width: 16px; height: 100%; cursor: col-resize; z-index: 6; background: transparent; transition: background .15s; }
.lf-resize-handle::after { content: ''; position: absolute; right: 7px; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: transparent; transition: background .15s; }
.lf-resize-handle:hover::after, .lf-resize-handle.lf-resizing::after { background: var(--accent, #6366f1); }
/* don't let the header clip the resize handle that sits at the edge */
#leadsMainTable th { overflow: visible; }

/* Leads table — compact, narrower columns, smaller font */
#leadsMainTable { min-width: 0 !important; font-size: .72rem !important; }
#leadsMainTable th { font-size: .7rem !important; padding: 5px 8px !important; height: 32px !important; white-space: nowrap; overflow: hidden; text-overflow: clip; box-sizing: border-box; }
#leadsMainTable td { font-size: .72rem !important; padding: 3px 8px !important; height: auto !important; max-height: none !important; max-width: 0; overflow: hidden; text-overflow: clip; white-space: normal; word-break: break-word; line-height: 1.35; vertical-align: top; box-sizing: border-box; }

/* Lead row click highlight */
.lf-leads-table tbody tr { cursor: pointer; transition: background .15s; }
.lf-leads-table tbody tr.lf-row-active { background: #eff6ff !important; }

/* Last Lead cell */
.lf-last-lead-cell { cursor: default; }
.lf-last-lead-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: rgba(63,118,255,.08); color: #3f76ff; white-space: nowrap; }

/* Rating cell */
.lf-rating { display: inline-flex; gap: 2px; align-items: center; }
.lf-rating-lg { gap: 4px; }
.lf-star { cursor: pointer; color: #d1d5db; transition: color .12s, transform .12s; line-height: 0; display: inline-flex; padding: 1px; border-radius: 2px; }
.lf-star:hover { transform: scale(1.2); }
.lf-star.lf-star-on { color: #f59e0b; }
.lf-star.lf-star-hover { color: #fbbf24; }

/* Date cell */
.lf-date-input { font-size: .76rem; border: 1.5px solid var(--primary); border-radius: 4px; background: var(--bg-primary); color: var(--text-primary); padding: 2px 4px; height: 26px; box-sizing: border-box; outline: none; }

/* Notes side panel */
.lf-panel-overlay { display: none; }
.lf-panel-overlay.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 998; }
.lf-side-panel { position: fixed; top: 0; right: -480px; width: 460px; height: 100vh; background: var(--bg-card); border-left: 1px solid var(--border); box-shadow: -4px 0 24px rgba(0,0,0,.12); z-index: 999; transition: right .25s ease; display: flex; flex-direction: column; overflow: hidden; }
.lf-side-panel.open { right: 0; }
.lf-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.lf-panel-header h3 { font-size: .95rem; font-weight: 700; margin: 0; color: var(--text-primary); }
.lf-panel-close { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--text-muted); padding: 4px 8px; border-radius: 6px; }
.lf-panel-close:hover { background: var(--bg-secondary); color: var(--text-primary); }
.lf-panel-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.lf-panel-section { margin-bottom: 20px; }
.lf-panel-section-title { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 8px; }
.lf-panel-field { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: .82rem; }
.lf-panel-field-label { color: var(--text-muted); font-size: .76rem; }
.lf-panel-field-value { color: var(--text-primary); font-weight: 500; max-width: 60%; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-notes-area { width: 100%; min-height: 120px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: .84rem; font-family: inherit; color: var(--text-primary); background: var(--bg-primary); resize: vertical; outline: none; line-height: 1.5; }
.lf-notes-area:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(99,102,241,.15); }
.lf-notes-time { font-size: .68rem; color: var(--text-muted); margin-top: 4px; }
.lf-panel-status-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: .76rem; font-weight: 600; }

/* Add column modal */
.lf-col-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 1000; justify-content: center; align-items: center; }
.lf-col-modal-overlay.open { display: flex; }
.lf-col-modal { background: var(--bg-card); border-radius: 12px; padding: 24px; width: 340px; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.lf-col-modal h3 { margin: 0 0 16px; font-size: 1rem; }
.lf-col-modal label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 4px; color: var(--text-secondary); }
.lf-col-modal input, .lf-col-modal select { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: .84rem; background: var(--bg-primary); color: var(--text-primary); margin-bottom: 12px; box-sizing: border-box; }
.lf-col-modal-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }


/* ========== ADS MANAGER ========== */
.am-title-left { display: flex; align-items: baseline; gap: 12px; }
.am-page-title { font-family: var(--font); font-size: 22px; font-weight: 600; color: #1f2937; margin: 0; line-height: 1.3; }
.am-page-count { font-family: var(--font); font-size: 16px; font-weight: 400; color: #1f2937; }
.am-title-right { display: flex; align-items: center; gap: 10px; }

.am-no-auth { padding: 40px; text-align: center; color: var(--text-muted); }
.am-no-auth p { margin-bottom: 16px; }

.am-tabs-row { display: flex; align-items: flex-end; margin-bottom: 0; background: #fff; border: 1px solid var(--border); border-bottom: none; border-radius: 8px 8px 0 0; padding: 0 16px; box-shadow: var(--shadow); }
.am-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; background: #fff; border: 1px solid var(--border); border-top: none; border-radius: 0 0 8px 8px; padding: 10px 16px; box-shadow: var(--shadow); }
.am-toolbar-left { flex-shrink: 1; min-width: 0; }
.am-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.am-account-select { padding: 7px 12px; border: 1px solid #D2D2D2; border-radius: 8px; background: #fff; color: var(--text); font-size: 14px; font-weight: 600; min-width: 200px; outline: none; cursor: pointer; transition: border-color .2s; }
.am-account-select:focus { border-color: #3f76ff; box-shadow: 0 0 0 2px rgba(63,118,255,.12); }

.am-tabs { display: flex; gap: 0; background: transparent; border-radius: 0; padding: 0; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; }
.am-tabs::-webkit-scrollbar { display: none; }
.am-tab { padding: 11px 18px; border: none; background: transparent; color: #6b7280; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-radius: 0; cursor: pointer; transition: all .15s; white-space: nowrap; position: relative; flex-shrink: 0; }
.am-tab:hover { color: var(--text-primary); }
.am-tab.active { color: var(--text-primary); background: transparent; box-shadow: none; font-weight: 600; }
.am-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: #111827; border-radius: 1px; }

.am-summary-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.am-sum-chip { font-size: 13px; color: #6b7280; padding: 4px 12px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 9999px; white-space: nowrap; }
.am-sum-chip strong { color: var(--text-primary); font-weight: 600; }
.am-sum-chip.am-sum-active strong { color: #16a34a; }
.am-sum-chip.am-sum-spent strong { color: #2563eb; }

/* Leads shares the Ads frame at every width: both are data tabs whose rail +
 * wide table want the screen, and matching frames keep the two side rails
 * reading as one control. The phone override lives in the <=768 block. */
#sectionAdsmanager, #sectionLeads { padding: 8px 8px; max-width: 100%; width: 100%; }
/* fixed layout: th widths (incl. user resizes) are respected instead of columns
   stretching to fit content — long names ellipsize inside their column */
.am-table { table-layout: fixed; min-width: 1800px; border-collapse: collapse; }
/* Optimize/Share/Edit buttons live inside the name cell. Always faintly
   visible (users kept missing hover-only controls) — full strength on hover. */
.am-name-hoveropt { display: inline-block; margin-left: 8px; opacity: .4; transition: opacity .12s; vertical-align: middle; }
.am-table tr:hover .am-name-hoveropt { opacity: 1; }
.am-table th { position: sticky; top: 0; background: var(--bg-card); z-index: 2; white-space: nowrap; font-size: 13px; font-weight: 500; letter-spacing: 0; color: #6b7280; cursor: default; border-bottom: 1px solid var(--border); padding: 10px 16px !important; height: 44px; text-transform: none; text-align: left; position: relative; overflow: hidden; }
.am-col-filters th { position: sticky; top: 44px; background: #f8f9fb; z-index: 2; padding: 2px 4px !important; height: 26px; border-bottom: 1px solid var(--border); }
.am-col-filters th input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(63,118,255,.12); }
.am-table td { height: 52px; max-height: 52px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 400; color: var(--text-secondary); padding: 8px 16px !important; vertical-align: middle; position: relative; border-bottom: 1px solid #f3f4f6; }
.am-table td:has(.am-ad-name-wrap):hover { overflow: visible; }
.am-table tbody tr { transition: background .15s; }
.am-table tbody tr:hover { background: var(--bg-hover); }
/* Monday-style contact groups */
.am-table tr.lf-grp-hdr:hover { background: transparent; }
.am-table tr.lf-grp-hdr td { height: auto; padding: 0 !important; border-bottom: none; overflow: visible; }
.lf-grp-hdr-inner { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; }
.lf-grp-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.lf-grp-caret { background: none; border: none; cursor: pointer; font-size: 12px; padding: 0 2px; line-height: 1; }
.lf-grp-name { font-weight: 700; font-size: .95rem; cursor: pointer; }
.lf-grp-name[title]:hover { text-decoration: underline; }
.lf-grp-count { font-size: .72rem; color: #6b7280; background: var(--bg-hover); border-radius: 11px; padding: 1px 9px; font-weight: 600; }
.lf-grp-del { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: .72rem; margin-left: 4px; opacity: 0; transition: opacity .15s; }
.lf-grp-hdr:hover .lf-grp-del { opacity: 1; }
.lf-grp-del:hover { color: #ef4444; }
.am-table tr.lf-grp-hdr.lf-grp-drop td { box-shadow: inset 0 0 0 2px var(--accent); background: rgba(63,118,255,.06); }
.am-table tr.lf-grp-add td { height: auto; }
.lf-grp-add:hover td { color: var(--accent) !important; background: #f9fafb; }
.lf-phone-flag { font-size: 14px; line-height: 1; margin-right: 4px; vertical-align: middle; }
.lf-flag-img { width: 20px; height: 15px; border-radius: 2px; vertical-align: middle; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.08); display: inline-block; }
/* Tag chips (custom column type 'tags') */
.lf-tags-cell { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 90px; }
.lf-tag-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 11px; padding: 2px 9px; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.lf-tag-x { cursor: pointer; opacity: .55; font-size: .8rem; line-height: 1; }
.lf-tag-x:hover { opacity: 1; }
.lf-tag-add { border: 1px dashed #cbd5e1; background: none; color: #9aa5b1; border-radius: 50%; width: 18px; height: 18px; cursor: pointer; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s; }
.am-table tbody tr:hover .lf-tag-add, .lf-tags-cell:hover .lf-tag-add { opacity: 1; }
.lf-tag-add:hover { border-color: var(--accent); color: var(--accent); }
.lf-tag-input { border: 1px solid var(--accent); border-radius: 10px; padding: 2px 8px; font-size: .72rem; width: 72px; outline: none; font-family: inherit; }
/* Sidebar list-row actions (use/rename/delete): hidden until the row is
   hovered, floated over the right edge — a permanent vertical icon stack was
   stretching every row and breaking the sidebar structure. */
.lf-list-row .lf-row-acts { display: none; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); align-items: center; gap: 1px; padding: 1px 3px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.12); z-index: 2; }
.lf-list-row:hover .lf-row-acts, .lf-list-row:focus-within .lf-row-acts { display: flex; }
/* Inline text inputs (replace prompt() popups in the boards) */
.lf-inline-input { border: 1px solid var(--accent); border-radius: 7px; padding: 5px 9px; font-size: .8rem; font-family: inherit; color: var(--text-primary); background: var(--bg-card); outline: none; box-shadow: 0 0 0 3px rgba(63,118,255,.12); }
.lf-inline-input::placeholder { color: var(--text-muted); font-weight: 400; }
/* FORTVISION-style board toolbar */
.lf-board-toolbar button { transition: background .12s, color .12s, border-color .12s, box-shadow .12s; }
.lf-board-toolbar button:hover:not([disabled]):not(.lf-add-item-btn) { background: #f4f7fb; border-color: #d3dbe8; color: var(--text-primary); }
.lf-add-item-btn:hover { filter: brightness(1.06); box-shadow: 0 2px 7px rgba(63,118,255,.38) !important; }
/* Drag handle is absolutely positioned in the left padding so it never pushes the
   row checkbox out of alignment with the header select-all checkbox. */
.lf-row-drag { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: #cbd5e1; cursor: grab; font-size: 11px; opacity: 0; transition: opacity .12s; }
.am-table tbody tr:hover .lf-row-drag { opacity: 1; }
.lf-row-drag:active { cursor: grabbing; }
/* Asana-style board table look — scoped to the Leads table only.
   White left-aligned headers, ~44px rows, clearly visible grey grid lines
   between BOTH columns and rows (Asana's warm-grey separators). */
#leadsMainTable td, #leadsMainTable th { border-right: 1px solid #e3e3e6; }
#leadsMainTable th { background: var(--bg-card) !important; color: #6d6e6f; font-weight: 500; font-size: 12.5px; text-align: left; height: 40px; padding: 8px 14px !important; border-bottom: 1px solid #e3e3e6; }
#leadsMainTable th .lf-resize-handle { text-align: left; }
#leadsMainTable td { height: 44px; max-height: 44px; font-size: 13.5px; color: #1e1f21; border-bottom: 1px solid #e3e3e6; padding: 6px 14px !important; }
#leadsMainTable th:last-child, #leadsMainTable td:last-child { border-right: none; }
#leadsMainTable tbody tr[data-lead-id]:hover td { background: #f9f8f8; }
#leadsMainTable tr.lf-grp-hdr td, #leadsMainTable tr.lf-grp-add td { border-right: none !important; }
#leadsMainTable .lf-grp-hdr-inner { padding: 14px 12px 6px; }
/* Monday-style group blocks: light merged row borders + soft hover. */
#leadsMainTable tbody tr[data-lead-id] td { border-bottom: 1px solid #eceff5; }
#leadsMainTable tbody tr[data-lead-id]:hover td { background: #fafbfe; }
#leadsMainTable tr.lf-grp-add td { transition: background .12s; height: 44px !important; max-height: 44px !important; padding-top: 0 !important; padding-bottom: 0 !important; vertical-align: middle !important; }
#leadsMainTable .lf-grp-name { font-size: .95rem; }
.leads-tbl-wrap { border: 1px solid #e6eaf0; border-radius: 10px; overflow: auto; background: var(--bg-card); }

/* Meta daily-budget inline editor (Daily Spent column) */
.am-budget-edit { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.am-budget-tag { display: inline-flex; align-items: center; border: 1px solid var(--border); background: var(--bg-card); color: #6b7280; border-radius: 6px; padding: 1px 7px; font-size: 11px; font-weight: 600; cursor: pointer; line-height: 1.5; white-space: nowrap; }
.am-budget-tag:hover { color: #3f76ff; border-color: #bfd0ff; background: #f5f8ff; }
/* Planned-budget spend cell (spend + % of planned + progress bar) */
.am-planned { cursor: pointer; line-height: 1.2; min-width: 96px; }
.am-planned-top { font-weight: 700; color: var(--text-primary); font-size: .82rem; white-space: nowrap; }
.am-planned-sub { font-size: .67rem; color: #6b7280; margin: 1px 0 3px; white-space: nowrap; }
.am-planned-bar { height: 5px; background: #e9edf3; border-radius: 3px; overflow: hidden; }
.am-planned-bar > span { display: block; height: 100%; border-radius: 3px; transition: width .3s; }
.am-planned-empty { display: inline-flex; align-items: center; gap: 6px; }
.am-planned-add { font-size: .65rem; color: #9aa5b1; opacity: 0; transition: opacity .12s; border: 1px dashed #cbd5e1; border-radius: 5px; padding: 1px 5px; white-space: nowrap; }
tr:hover .am-planned-add { opacity: 1; }
.am-planned-add:hover { color: var(--accent); border-color: var(--accent); }
.am-budget-pop { position: fixed; z-index: 30000; width: 220px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.16); padding: 12px; }
.am-budget-pop-hd { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.am-budget-pop-row { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 7px; padding: 0 8px; height: 34px; }
.am-budget-pop-sym { color: #6b7280; font-size: 13px; margin-right: 4px; }
.am-budget-pop-input { flex: 1; border: none; outline: none; font-size: 14px; color: var(--text-primary); background: transparent; width: 100%; }
.am-budget-pop-actions { display: flex; gap: 7px; margin-top: 10px; }
.am-budget-pop-cancel { flex: 1; border: 1px solid var(--border); background: var(--bg-card); color: #6b7280; border-radius: 7px; padding: 6px 0; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.am-budget-pop-cancel:hover { background: var(--bg-hover); }
.am-budget-pop-save { flex: 1; border: none; background: #3f76ff; color: #fff; border-radius: 7px; padding: 6px 0; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.am-budget-pop-save:hover { background: #2f5fe0; }
.am-budget-pop-save:disabled { opacity: .65; cursor: default; }
.am-budget-pop-note { font-size: 10.5px; color: var(--text-muted); margin-top: 8px; }

/* DV360 view: pin the checkbox + campaign-name columns when scrolling right */
.am-pin-name .am-table th.am-col-check,
.am-pin-name .am-table td.am-col-check { position: sticky; left: 0; z-index: 3; background: var(--bg-card); }
.am-pin-name .am-table th.am-col-name,
.am-pin-name .am-table td.am-col-name { position: sticky; left: 36px; z-index: 3; background: var(--bg-card); box-shadow: inset -1px 0 0 #f3f4f6; }
.am-pin-name .am-table thead th.am-col-check,
.am-pin-name .am-table thead th.am-col-name { z-index: 6; }
.am-pin-name .am-table tbody tr:hover td.am-col-check,
.am-pin-name .am-table tbody tr:hover td.am-col-name { background: var(--bg-hover); }
.am-pin-name .am-table tbody tr.am-row-selected td.am-col-check,
.am-pin-name .am-table tbody tr.am-row-selected td.am-col-name { background: #eef2ff; }
.am-pin-name .am-table tfoot td.am-col-check,
.am-pin-name .am-table tfoot td.am-col-name { position: sticky; left: 0; z-index: 3; background: var(--bg-hover); }
.am-pin-name .am-table tfoot td.am-col-name { left: 36px; }

/* ─── shadcn-inspired CRM & Leads tables ─────────────────────── */
.crm-tab-bar { display: flex; gap: 3px; padding: 4px; background: var(--bg-hover); border-radius: 10px; width: fit-content; margin-bottom: 16px; }
.crm-tab-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: none; border-radius: 7px; background: transparent; cursor: pointer; font-size: .83rem; font-weight: 500; color: #64748b; transition: all .15s; white-space: nowrap; }
.crm-tab-btn.active { background: var(--bg-card); color: var(--text-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06); }
.crm-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03); }
.crm-table { width: 100%; border-collapse: collapse; }
.crm-table th { padding: 11px 16px; text-align: left; font-size: .71rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .6px; background: #f8fafc; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.crm-table td { padding: 12px 16px; font-size: .84rem; color: var(--text-primary); border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.crm-table tbody tr:last-child td { border-bottom: none; }
.crm-table tbody tr { transition: background .1s; }
.crm-table tbody tr:hover { background: var(--bg-hover); }
.crm-num { color: #94a3b8; font-size: .78rem; font-weight: 500; }
.crm-name-link { font-weight: 600; cursor: pointer; color: var(--text-primary); transition: color .12s; background: none; border: none; padding: 0; font-size: inherit; font-family: inherit; }
.crm-name-link:hover { color: var(--accent); }
.crm-muted { color: #94a3b8; font-size: .82rem; }
a.crm-link { color: var(--accent); font-size: .8rem; text-decoration: none; }
a.crm-link:hover { text-decoration: underline; }
.crm-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; font-size: .71rem; font-weight: 600; white-space: nowrap; line-height: 1.6; }
.crm-badge-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.crm-badge-green  { background: #dcfce7; color: #15803d; }
.crm-badge-gray   { background: var(--bg-hover); color: #64748b; }
.crm-badge-blue   { background: #dbeafe; color: #1d4ed8; }
.crm-badge-indigo { background: #e0e7ff; color: #4338ca; }
.crm-badge-amber  { background: #fef3c7; color: #b45309; }
.crm-badge-pink   { background: #fce7f3; color: #be185d; }
.crm-badge-red    { background: #fee2e2; color: #dc2626; }
.crm-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; border: 1px solid transparent; background: transparent; cursor: pointer; color: #94a3b8; transition: all .12s; flex-shrink: 0; }
.crm-icon-btn:hover { background: var(--bg-hover); color: #334155; border-color: #e2e8f0; }
.crm-icon-btn.danger:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.crm-chip-wrap { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.crm-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: .71rem; font-weight: 500; cursor: pointer; white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; transition: opacity .12s; line-height: 1.6; }
.crm-chip:hover { opacity: .72; }
.crm-chip-contact { background: #E6F1FB; color: #0C447C; border-radius: 100px; }
.crm-chip-company { background: #EEEDFE; color: #3C3489; border-radius: 100px; }
.crm-chip-deal    { background: #FAEEDA; color: #633806; border-radius: 100px; }
html.dark .crm-chip-contact { background: #14304a; color: #B5D4F4; }
html.dark .crm-chip-company { background: #312e4f; color: #CECBF6; }
html.dark .crm-chip-deal    { background: #3f2b16; color: #FAC775; }
.crm-chip-add { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1.5px dashed #cbd5e1; border-radius: 6px; font-size: .82rem; background: none; cursor: pointer; color: #94a3b8; line-height: 1; transition: all .12s; }
.crm-chip-add:hover { border-color: var(--accent); color: var(--accent); background: #eff6ff; }
.crm-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.crm-count { font-size: .84rem; font-weight: 700; color: var(--text-primary); }
.crm-count-sub { font-size: .8rem; color: #94a3b8; }
.crm-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: none; border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; font-size: .83rem; font-weight: 600; transition: opacity .15s; letter-spacing: .01em; }
.crm-add-btn:hover { opacity: .86; }
/* Leads table shadcn card wrapper */
/* ── Leads table — Plane-style spreadsheet design ────────────────────────────
   Light grid lines, compact rows, muted non-uppercase headers frozen on scroll,
   subtle hover, and borderless property cells that reveal a control on hover. */
.leads-tbl-wrap { border: 1px solid var(--border); border-radius: 8px; overflow: auto; max-height: calc(100vh - 270px); box-shadow: none; background: var(--bg-card); }
/* Header row — muted, non-uppercase, sticky on vertical scroll */
.leads-tbl-wrap .am-table th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-card); font-size: 12px; font-weight: 500; color: #6d6e6f;
  text-transform: none; letter-spacing: 0; height: 38px;
  border-bottom: 1px solid #e3e3e6; border-right: 1px solid #e3e3e6;
  padding: 0 14px !important; text-align: left;
}
.leads-tbl-wrap .am-table th:last-child { border-right: none; }
.leads-tbl-wrap .am-table th:hover { background: #f9f8f8; }
/* Body cells — Asana grid: visible grey vertical + horizontal separators */
.leads-tbl-wrap .am-table td {
  height: 42px !important; max-height: 42px !important; min-height: 0 !important;
  font-size: 13px; color: #1e1f21;
  border-bottom: 1px solid #e3e3e6; border-right: 1px solid #e3e3e6;
  padding: 0 14px !important; vertical-align: middle;
}
.leads-tbl-wrap .am-table td:last-child { border-right: none; }
/* Keep the contact (name) cell on the same compact single row height */
.leads-tbl-wrap .am-table td.crm-contact-cell { height: 40px !important; max-height: 40px !important; min-height: 0 !important; white-space: nowrap; }
/* Row hover + active selection (Plane highlights the row + a left accent bar) */
.leads-tbl-wrap .am-table tbody tr { transition: background .12s; }
.leads-tbl-wrap .am-table tbody tr:hover { background: #f9f8f8; }
.leads-tbl-wrap .am-table tbody tr.lf-row-active { background: #f0f5ff !important; box-shadow: inset 2px 0 0 var(--accent); }
.leads-tbl-wrap .am-table tfoot td { border-right: none; }
/* Property cells: borderless until hovered/focused, like Plane's inline editors */
.leads-tbl-wrap .am-table td select,
.leads-tbl-wrap .am-table td input[type="text"],
.leads-tbl-wrap .am-table td input[type="date"] { border-color: transparent !important; background: transparent !important; transition: background .12s, border-color .12s; }
.leads-tbl-wrap .am-table td select:hover,
.leads-tbl-wrap .am-table td input[type="text"]:hover,
.leads-tbl-wrap .am-table td input[type="date"]:hover { background: var(--bg-hover) !important; }
.leads-tbl-wrap .am-table td select:focus,
.leads-tbl-wrap .am-table td input:focus { border-color: var(--accent) !important; background: #fff !important; }
/* Frozen leading columns: checkbox + Name (the "#" index column was removed, so
   only two columns stay pinned). Name keeps its own (resizable) width. */
.leads-tbl-wrap .am-table th:nth-child(1),
.leads-tbl-wrap .am-table td:nth-child(1) { position: sticky !important; left: 0; z-index: 3; width: 36px !important; min-width: 36px !important; max-width: 36px !important; box-sizing: border-box; padding: 0 8px !important; background: var(--bg-card); }
.leads-tbl-wrap .am-table th:nth-child(2),
.leads-tbl-wrap .am-table td:nth-child(2) { position: sticky !important; left: 36px; z-index: 3; background: var(--bg-card); box-shadow: 1px 0 0 #e0e0e4; }
/* Header corners must sit above the body's sticky cells. Column headers now live
   per-group as tr.lf-colhdr inside the tbody (Monday layout), so target those. */
.leads-tbl-wrap .am-table thead th:nth-child(1),
.leads-tbl-wrap .am-table thead th:nth-child(2),
.leads-tbl-wrap .am-table tr.lf-colhdr th:nth-child(1),
.leads-tbl-wrap .am-table tr.lf-colhdr th:nth-child(2) { z-index: 6; background: var(--bg-card) !important; }
/* Per-group column-header row: a thin separator above so it reads as the group's header */
.leads-tbl-wrap .am-table tr.lf-colhdr th { border-top: 1px solid #e3e3e6; }
.leads-tbl-wrap .am-table tr.lf-colhdr th.lf-colhdr-end { background: var(--bg-card); }
/* The group title bar spans full width even though its single cell is column 1 */
.leads-tbl-wrap .am-table tr.lf-grp-hdr td:nth-child(1) { position: static !important; width: auto !important; max-width: none !important; min-width: 0 !important; }
.leads-tbl-wrap .am-table tr.lf-grp-add td:nth-child(1) { position: static !important; width: auto !important; max-width: none !important; min-width: 0 !important; }
/* Inline editable cells (text / number look) — borderless until hover/focus */
.leads-tbl-wrap .am-table td .lf-cell-inp { width: 100%; box-sizing: border-box; padding: 3px 6px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text-primary); font-size: 13px !important; font-family: var(--font) !important; outline: none; }
.leads-tbl-wrap .am-table td .lf-cell-inp:hover { border-color: #e2e8f0; }
.leads-tbl-wrap .am-table td .lf-cell-inp.on,
.leads-tbl-wrap .am-table td .lf-cell-inp:focus { border-color: #3f76ff; background: var(--bg-page, #f8fafc); }
.leads-tbl-wrap .am-table td .lf-cell-select { width: 100%; box-sizing: border-box; max-width: 100%; padding: 3px 8px; border: 1px solid transparent; border-radius: 13px; background: transparent; color: var(--text-primary); font-size: 13px !important; font-family: var(--font) !important; cursor: pointer; outline: none; text-overflow: ellipsis; }
.leads-tbl-wrap .am-table td .lf-cell-select:hover { border-color: #e2e8f0; background: var(--bg-hover); }
.leads-tbl-wrap .am-table td .lf-cell-select:focus { border-color: #3f76ff; }
/* Column drag-reorder: grab cursor on headers, drop indicator */
.leads-tbl-wrap .am-table tr.lf-colhdr th[draggable="true"] { cursor: grab; }
.leads-tbl-wrap .am-table tr.lf-colhdr th.lf-col-dragover { box-shadow: inset 3px 0 0 var(--accent, #3f76ff); background: #eef3ff !important; }
/* Row drag-reorder: drop line above the target row */
.leads-tbl-wrap .am-table tbody tr.lf-row-dropline td { box-shadow: inset 0 2px 0 var(--accent, #3f76ff); }
/* Sticky cells follow the row hover / active background */
.leads-tbl-wrap .am-table tbody tr:hover td:nth-child(1),
.leads-tbl-wrap .am-table tbody tr:hover td:nth-child(2) { background: #f9f8f8; }
.leads-tbl-wrap .am-table tbody tr.lf-row-active td:nth-child(1),
.leads-tbl-wrap .am-table tbody tr.lf-row-active td:nth-child(2) { background: #f0f5ff !important; }
/* Property cells as Plane pills: status badge + assignee select */
.leads-tbl-wrap .am-table td select { font-size: 13px !important; border-radius: 13px !important; padding: 3px 10px !important; height: 26px; }
.leads-tbl-wrap .am-table td .lf-status-badge,
.leads-tbl-wrap .am-table td .am-status-badge { border-radius: 13px; }

/* ── Uniform typography + vertical centering across the whole Leads table ─────
   Every cell and its text controls share one font family + size, and all content
   is vertically centred in a consistent row height. */
.leads-tbl-wrap .am-table th,
.leads-tbl-wrap .am-table td,
.leads-tbl-wrap .am-table td * { font-family: var(--font) !important; }
.leads-tbl-wrap .am-table td { vertical-align: middle !important; font-size: 13px !important; }
.leads-tbl-wrap .am-table td input[type="text"],
.leads-tbl-wrap .am-table td input[type="date"],
.leads-tbl-wrap .am-table td select,
.leads-tbl-wrap .am-table td a,
.leads-tbl-wrap .am-table td .crm-name-link,
.leads-tbl-wrap .am-table td button { font-size: 13px !important; line-height: 1.4 !important; }
.leads-tbl-wrap .am-table td input[type="text"] { font-weight: 500 !important; }
/* Keep every cell's content on one vertically-centred line at a fixed row height */
.leads-tbl-wrap .am-table td > div,
.leads-tbl-wrap .am-table td .crm-chip-wrap,
.leads-tbl-wrap .am-table td .lf-rating { display: flex; align-items: center; min-height: 24px; }
.leads-tbl-wrap .am-table td.crm-contact-cell { vertical-align: middle !important; }
/* CRM inline picker dropdown */
.crm-inline-drop { position: fixed; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.14); overflow: hidden; z-index: 20045; /* above .crm-panel-overlay (20000) */ min-width: 230px; max-width: 290px; }
.crm-drop-search { padding: 8px; border-bottom: 1px solid var(--border); background: #f8fafc; }
.crm-drop-search input { width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: .82rem; outline: none; background: #fff; box-sizing: border-box; height: auto; }
.crm-drop-search input:focus { border-color: #3f76ff; box-shadow: 0 0 0 2px rgba(63,118,255,.12); }
.crm-drop-list { max-height: 230px; overflow-y: auto; }
.crm-drop-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; font-size: .83rem; color: var(--text-primary); border-bottom: 1px solid #f1f5f9; transition: background .1s; user-select: none; }
.crm-drop-item:last-child { border-bottom: none; }
.crm-drop-item:hover { background: var(--bg-hover); }
.crm-drop-item.linked { font-weight: 500; }
.crm-drop-check { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #e2e8f0; border-radius: 4px; flex-shrink: 0; color: #2563eb; background: var(--bg-card); transition: all .12s; }
.crm-drop-item.linked .crm-drop-check { background: #2563eb; border-color: #2563eb; color: #fff; }
.crm-drop-empty { padding: 20px 12px; text-align: center; color: #94a3b8; font-size: .82rem; }
/* Inline add row in CRM tables */
.crm-table .crm-inline-new td { background: #f0fdf4 !important; border-bottom: 2px solid #22c55e !important; }
.crm-table .crm-inline-new td:first-child { border-left: 3px solid #22c55e; }
.crm-inline-input { width: 100%; padding: 5px 8px; border: 1px solid transparent; border-radius: 6px; font-size: .84rem; background: transparent; color: var(--text-primary); outline: none; font-family: inherit; transition: border-color .15s, box-shadow .15s; min-width: 60px; box-sizing: border-box; height: auto; }
.crm-inline-input:focus { border-color: #3f76ff; background: #fff; box-shadow: 0 0 0 2px rgba(63,118,255,.1); }
select.crm-inline-input { height: 30px; cursor: pointer; }
/* Contact table CRM cells (allow wrapping) */
.am-table td.crm-contact-cell { white-space: normal; overflow: visible; max-height: none; height: auto; min-height: 52px; }
/* ── CRM Entity Detail Panel ──────────────────────────────────────────────── */
.crm-panel-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 20000;
  display: flex; align-items: stretch; justify-content: flex-end;
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.crm-panel-overlay.open { opacity: 1; pointer-events: all; }
.crm-panel {
  width: 100vw; height: 100vh; /* full-page takeover — ✕ Close returns to the board */
  background: var(--bg-hover); display: flex; flex-direction: column;
  box-shadow: -8px 0 40px rgba(0,0,0,.18);
  transform: translateX(60px); transition: transform .25s cubic-bezier(.22,.68,0,1.1);
}
.crm-panel-overlay.open .crm-panel { transform: translateX(0); }
/* top bar */
.crm-panel-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px; height: 48px; min-height: 48px;
  background: var(--bg-card); color: var(--text-secondary); font-size: .82rem;
  border-bottom: 1px solid var(--border);
}
.crm-panel-topbar-back {
  background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 6px 10px;
  border-radius: 100px; display: flex; align-items: center; gap: 5px; font-size: .82rem;
  transition: background .12s, color .12s;
}
.crm-panel-topbar-back:hover { background: #E6F1FB; color: #0C447C; }
.crm-panel-topbar-title { color: var(--text-primary); font-weight: 600; font-size: .88rem; }
.crm-panel-topbar-spacer { flex: 1; }
/* body */
.crm-panel-body {
  flex: 1; display: grid; overflow: hidden;
  grid-template-columns: 260px 1fr 280px;
}
/* LEFT SIDEBAR */
.crm-panel-left {
  border-right: 1px solid #e2e8f0; overflow-y: auto; padding: 24px 18px;
  background: var(--bg-card); display: flex; flex-direction: column; gap: 16px;
}
.crm-pl-avatar {
  width: 50px; height: 50px; border-radius: 50%; background: #B5D4F4;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  font-weight: 600; color: #0C447C; flex-shrink: 0; letter-spacing: -.01em;
}
.crm-pl-avatar.co { background: #B5D4F4; color: #042C53; }
.crm-pl-avatar.de { background: #9FE1CB; color: #04342C; }
.crm-pl-avatar.ct { background: #B5D4F4; color: #0C447C; }
/* Soft hero zone: tinted identity block bleeding to the column edges */
.crm-pl-hero { background: #F0F6FD; margin: -24px -18px 0; padding: 20px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.crm-pl-lcpill { display: inline-flex; align-items: center; background: #E1F5EE; color: #085041; font-size: .7rem; font-weight: 600; padding: 3px 11px; border-radius: 100px; white-space: nowrap; }
.crm-pl-tagchip { display: inline-flex; align-items: center; background: #FBEAF0; color: #72243E; font-size: .68rem; font-weight: 600; padding: 2px 9px; border-radius: 100px; white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.crm-pl-heropred { font-size: .72rem; color: #185FA5; }
html.dark .crm-pl-hero { background: #16273c; }
html.dark .crm-pl-lcpill { background: #123f33; color: #9FE1CB; }
html.dark .crm-pl-tagchip { background: #3f1f2c; color: #F4C0D1; }
html.dark .crm-pl-heropred { color: #B5D4F4; }
html.dark .crm-panel-topbar-back:hover { background: #14304a; color: #B5D4F4; }
.crm-pl-name { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.crm-pl-sub { font-size: .8rem; color: #64748b; display: flex; align-items: center; gap: 4px; }
.crm-pl-sub a { color: #3b82f6; text-decoration: none; }
.crm-pl-sub a:hover { text-decoration: underline; }
.crm-pl-meta { font-size: .74rem; color: #94a3b8; }
/* action buttons row */
.crm-pl-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.crm-pl-action {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 10px; border: none; border-radius: 12px;
  background: rgba(255,255,255,.65); cursor: pointer; font-size: .67rem; color: var(--text-secondary);
  transition: background .12s, color .12s; min-width: 50px;
}
.crm-pl-action:hover { background: #E6F1FB; color: #0C447C; }
html.dark .crm-pl-action { background: rgba(255,255,255,.06); }
html.dark .crm-pl-action:hover { background: #14304a; color: #B5D4F4; }
.crm-pl-action svg { width: 16px; height: 16px; flex-shrink: 0; }
/* details section */
.crm-pl-section-title {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
  color: #94a3b8; margin-bottom: 8px;
}
.crm-pl-field { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }
.crm-pl-field-label { font-size: .69rem; color: #94a3b8; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; padding-left: 7px; }
.crm-pl-field-value { font-size: .83rem; color: var(--text-primary); font-weight: 500; word-break: break-word; padding: 5px 7px; }
.crm-pl-field-empty { font-size: .8rem; color: #cbd5e1; font-style: italic; }
/* Editable inputs sit inside .crm-pl-field — hover/focus handled inline */
.crm-pl-field input, .crm-pl-field select, .crm-pl-field textarea { font-family: inherit; }
.crm-pl-badge {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px;
  font-size: .72rem; font-weight: 600; letter-spacing: .01em;
}
/* CENTER */
.crm-panel-center {
  display: flex; flex-direction: column; overflow: hidden; background: var(--bg-hover);
}
.crm-pc-activity-bar {
  display: flex; align-items: center; gap: 8px; padding: 14px 20px 0;
  background: var(--bg-card); border-bottom: 1px solid #e2e8f0;
}
.crm-pc-search {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: var(--bg-hover); border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 7px 12px; font-size: .82rem; color: #64748b; max-width: 260px;
}
.crm-pc-tabs {
  display: flex; gap: 6px; border-bottom: 1px solid var(--border);
  background: var(--bg-card); padding: 9px 20px 10px; overflow-x: auto;
}
.crm-pc-tab {
  padding: 6px 14px; border: none; background: none; cursor: pointer;
  font-size: .8rem; color: var(--text-secondary); border-radius: 100px;
  white-space: nowrap; transition: background .12s, color .12s; font-weight: 500;
}
.crm-pc-tab.active { background: #E6F1FB; color: #0C447C; font-weight: 600; }
.crm-pc-tab:hover:not(.active) { background: var(--bg-hover); color: var(--text-primary); }
html.dark .crm-pc-tab.active { background: #14304a; color: #B5D4F4; }
.crm-create-note-btn {
  margin-left: auto; padding: 7px 14px; border: none; border-radius: 100px;
  background: #3f76ff; color: #fff; font-size: .8rem; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 5px; transition: background .12s;
}
.crm-create-note-btn:hover { background: #2f5fd9; }
/* notes list */
.crm-notes-list {
  flex: 1; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.crm-notes-date-group { font-size: .72rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; margin: 4px 0 6px; }
.crm-note-card {
  background: var(--bg-card); border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 14px 16px; position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.crm-note-card.pinned { border-color: #fbbf24; background: #fffbeb; box-shadow: 0 1px 4px rgba(251,191,36,.15); }
.crm-note-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.crm-note-avatar { width: 26px; height: 26px; border-radius: 50%; background: #3f76ff; color: #fff; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.crm-note-author { font-size: .8rem; font-weight: 600; color: #334155; }
.crm-note-date { font-size: .73rem; color: #94a3b8; margin-left: auto; }
.crm-note-menu-btn { background: none; border: none; cursor: pointer; color: #94a3b8; padding: 2px 6px; border-radius: 4px; font-size: .9rem; transition: background .1s, color .1s; }
.crm-note-menu-btn:hover { background: var(--bg-hover); color: #334155; }
.crm-note-text { font-size: .83rem; color: #334155; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
/* floating note menu */
.crm-note-menu {
  position: fixed; background: var(--bg-card); border: 1px solid #e2e8f0;
  border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.12);
  z-index: 21000; overflow: hidden; min-width: 140px;
}
.crm-note-menu-item { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: .82rem; color: #334155; cursor: pointer; transition: background .1s; border: none; background: none; width: 100%; text-align: left; }
.crm-note-menu-item:hover { background: var(--bg-hover); }
.crm-note-menu-item.danger { color: #ef4444; }
.crm-note-menu-item.danger:hover { background: #fef2f2; }
/* note editor */
.crm-note-editor-wrap {
  border-top: 1px solid #e2e8f0; padding: 14px 20px; background: var(--bg-card);
  display: none; flex-direction: column; gap: 8px;
}
.crm-note-editor-wrap.open { display: flex; }
.crm-note-editor-header { display: flex; align-items: center; gap: 8px; }
.crm-note-editor-header span { font-size: .8rem; font-weight: 600; color: #1e293b; background: #3f76ff; color: #fff; padding: 3px 12px; border-radius: 20px; }
.crm-note-editor-close { margin-left: auto; background: none; border: none; cursor: pointer; color: #94a3b8; font-size: 1rem; padding: 2px 6px; border-radius: 4px; transition: background .1s; }
.crm-note-editor-close:hover { background: var(--bg-hover); color: #334155; }
.crm-note-textarea { 
  width: 100%; min-height: 90px; padding: 10px 12px; border: 1px solid #e2e8f0; 
  border-radius: 8px; font-size: .84rem; font-family: inherit; resize: vertical;
  outline: none; transition: border-color .15s, box-shadow .15s; color: var(--text-primary);
  background: var(--bg-hover); box-sizing: border-box;
}
.crm-note-textarea:focus { border-color: #3f76ff; background: var(--bg-card); box-shadow: 0 0 0 3px rgba(63,118,255,.12); }
.crm-note-editor-footer { display: flex; justify-content: flex-end; gap: 8px; }
.crm-note-save-btn { padding: 7px 18px; border: none; border-radius: 8px; background: #3f76ff; color: #fff; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .12s; }
.crm-note-save-btn:hover { background: #2f5fd9; }
.crm-note-cancel-btn { padding: 7px 14px; border: 1px solid #e2e8f0; border-radius: 8px; background: var(--bg-card); color: #64748b; font-size: .82rem; cursor: pointer; transition: background .12s; }
.crm-note-cancel-btn:hover { background: var(--bg-hover); }
.crm-notes-empty { color: #cbd5e1; text-align: center; font-size: .84rem; padding: 40px 20px; }
/* Note file attachments: editor chips, note-card chips, Files sidebar,
   hover popover and the large viewer modal. */
.crm-note-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 2px; }
.crm-file-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 220px; padding: 3px 9px; border: 1px solid #e2e8f0; border-radius: 14px; font-size: .72rem; background: var(--bg-card); color: var(--text-secondary); cursor: pointer; }
.crm-file-chip:hover { border-color: #3f76ff; color: #3f76ff; }
.crm-file-chip.up { opacity: .6; cursor: progress; }
.crm-file-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-file-chip-x { border: 0; background: none; cursor: pointer; color: #94a3b8; font-size: .72rem; padding: 0 0 0 2px; line-height: 1; }
.crm-file-chip-x:hover { color: #ef4444; }
.crm-note-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.crm-file-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; cursor: pointer; border-radius: 8px; }
.crm-file-row:hover { background: var(--bg-hover); }
.crm-file-thumb { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; flex: 0 0 34px; border: 1px solid #e2e8f0; background: var(--bg-hover); }
.crm-file-thumb-ic { display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.crm-file-meta { min-width: 0; flex: 1; }
.crm-file-name { font-size: .76rem; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-file-sub { font-size: .68rem; color: var(--text-muted); }
#crmFilePop { position: fixed; z-index: 100002; width: 240px; background: var(--bg-card); border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 12px 32px rgba(2,6,23,.18); padding: 6px; pointer-events: none; }
#crmFilePop img, #crmFilePop video { width: 100%; max-height: 170px; object-fit: contain; border-radius: 6px; background: #0b1220; }
.crm-file-pop-ic { display: flex; align-items: center; justify-content: center; height: 80px; font-size: 2rem; }
.crm-file-pop-name { font-size: .7rem; color: var(--text-muted); padding: 5px 4px 2px; word-break: break-all; }
#crmFileModal { position: fixed; inset: 0; z-index: 100003; background: rgba(2,6,23,.55); display: flex; align-items: center; justify-content: center; padding: 24px; }
.crm-file-modal-card { background: var(--bg-card); border-radius: 14px; width: min(860px, 94vw); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px rgba(2,6,23,.35); }
.crm-file-modal-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #e2e8f0; }
.crm-file-modal-title { font-size: .86rem; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.crm-file-modal-size { font-size: .72rem; color: var(--text-muted); flex: 0 0 auto; }
.crm-file-modal-body { flex: 1; min-height: 220px; overflow: auto; display: flex; align-items: center; justify-content: center; background: var(--bg-hover); }
.crm-file-modal-body img, .crm-file-modal-body video { max-width: 100%; max-height: 78vh; object-fit: contain; }
.crm-file-modal-body iframe { width: 100%; height: 78vh; border: 0; background: #fff; }
.crm-file-modal-none { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px; font-size: 2.2rem; color: var(--text-muted); text-align: center; }
.crm-file-modal-none div { font-size: .8rem; }
html.dark .crm-file-chip, html.dark .crm-file-thumb, html.dark #crmFilePop,
html.dark .crm-file-modal-head { border-color: var(--hs-line, #263042); }
/* RIGHT SIDEBAR */
.crm-panel-right {
  border-left: 1px solid #e2e8f0; overflow-y: auto;
  padding: 20px 16px; background: var(--bg-card);
  display: flex; flex-direction: column; gap: 20px;
}
.crm-pr-section { display: flex; flex-direction: column; gap: 8px; }
.crm-pr-section-header {
  display: flex; align-items: center; gap: 6px; padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}
.crm-pr-section-title { font-size: .75rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; flex: 1; }
.crm-pr-count { background: var(--bg-hover); color: #64748b; border-radius: 20px; padding: 1px 7px; font-size: .72rem; font-weight: 600; }
.crm-pr-add-btn { background: none; border: 1px solid #e2e8f0; color: #3f76ff; padding: 3px 8px; border-radius: 6px; font-size: .75rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 3px; transition: background .1s; }
.crm-pr-add-btn:hover { background: #f5f3ff; border-color: #c4b5fd; }
.crm-pr-entity-card {
  border: 1px solid #f1f5f9; border-radius: 10px; padding: 10px 10px 10px 12px;
  background: var(--bg-hover); transition: border-color .12s, box-shadow .12s;
  display: flex; align-items: flex-start; gap: 6px;
}
.crm-pr-entity-card:hover { border-color: #b9ccff; box-shadow: 0 2px 8px rgba(63,118,255,.1); }
.crm-pr-entity-name { font-size: .83rem; font-weight: 600; color: #1e293b; margin-bottom: 4px; display: flex; align-items: center; gap: 5px; }
.crm-pr-entity-sub { font-size: .74rem; color: #64748b; line-height: 1.4; }
.crm-pr-remove { background: none; border: none; cursor: pointer; color: #cbd5e1; padding: 2px 4px; border-radius: 4px; font-size: .75rem; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.crm-pr-remove:hover { color: #ef4444; background: #fef2f2; }
.crm-pr-empty { color: #cbd5e1; font-size: .8rem; text-align: center; padding: 10px; }
.crm-pr-avatar { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 700; flex-shrink: 0; }
.crm-pr-avatar.ct { background: #f59e0b; color: #fff; }
.crm-pr-avatar.co { background: #0ea5e9; color: #fff; }
.crm-pr-avatar.de { background: #3f76ff; color: #fff; }
/* Task row in panel */
.crm-task-row { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #f1f5f9; transition: background .1s; }
.crm-task-row:hover { background: var(--bg-hover); }
.crm-task-check { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; accent-color: #3f76ff; cursor: pointer; }
.crm-pr-entity-chip { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 20px; font-size: .7rem; font-weight: 600; }
/* stage chips */
.stage-chip-new { background: #eff6ff; color: #1d4ed8; }
.stage-chip-qualified { background: #f0fdf4; color: #15803d; }
.stage-chip-proposal { background: #fefce8; color: #a16207; }
.stage-chip-negotiation { background: #fff7ed; color: #c2410c; }
.stage-chip-closed-won { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.stage-chip-closed-lost { background: #fef2f2; color: #b91c1c; }
.stage-chip-default { background: var(--bg-hover); color: var(--text-secondary); }
/* ─────────────────────────────────────────────────────────────── */

.am-ad-name-wrap { display: flex; align-items: center; gap: 8px; position: relative; }
.am-ad-thumb-inline { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); }
.am-ad-preview { display: none; position: absolute; left: 0; top: 100%; z-index: 100; padding: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.12); pointer-events: none; }
.am-ad-preview img { width: 300px; max-height: 300px; object-fit: contain; border-radius: 6px; display: block; }
.am-ad-name-wrap:hover .am-ad-preview { display: block; }
.am-r { text-align: right; }
.am-spend { font-weight: 600; color: var(--text-primary); }
.am-name { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; max-width: 280px; color: var(--text-primary); }
.am-platform-icon { width: 14px; height: 14px; flex-shrink: 0; border-radius: 3px; }
.am-sub { font-size: 13px; color: #6b7280; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.am-toggle { width: 34px; height: 18px; border-radius: 9px; background: #D2D2D2; position: relative; cursor: default; display: inline-flex; align-items: center; transition: background .2s; }
.am-toggle.on { background: #22c55e; }
.am-toggle-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--bg-card); position: absolute; left: 2px; top: 2px; transition: left .2s; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.am-toggle.on .am-toggle-dot { left: 18px; }

.am-status-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.am-st-active { background: #D9F5E5; color: #25BA64; }
.am-st-paused { background: #FFF3CD; color: #E5A100; }
.am-st-deleted { background: #FFE8E7; color: #FF6B66; }
.am-st-archived { background: #F3F4F6; color: #6B7280; }
.am-st-off { background: #F3F4F6; color: #8A9597; }
.am-st-completed { background: #D5F0ED; color: #17A98B; }
.am-st-draft { background: #F3F4F6; color: #8A9597; }
.am-st-rejected { background: #FFE8E7; color: #E53935; }
.am-st-review { background: #FFF3CD; color: #B45309; }
.am-republish-btn { background: #fff0f0; color: #E53935; border: 1px solid #fca5a5; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s; }
.am-republish-btn:hover { background: #fee2e2; }
.am-republish-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Global loading bar (top of page) */
#amGlobalLoadBar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 999999; pointer-events: none; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 55%, #a78bfa 100%); box-shadow: 0 0 8px rgba(99,102,241,.55); opacity: 0; transition: opacity .2s; }
#amGlobalLoadBar.am-glb-loading { opacity: 1; animation: amGlbAnim 2.4s cubic-bezier(.1,.05,.6,1) forwards; }
#amGlobalLoadBar.am-glb-done { width: 100% !important; opacity: 0; animation: none; transition: width .12s ease, opacity .5s ease .12s; }
@keyframes amGlbAnim { 0% { width: 2%; } 20% { width: 35%; } 50% { width: 60%; } 80% { width: 73%; } 100% { width: 77%; } }

/* Inline "Refreshing" badge on leads header */
.am-refreshing-badge { display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; color: var(--accent, #6366f1); font-weight: 500; background: rgba(99,102,241,.08); border-radius: 20px; padding: 2px 7px 2px 5px; white-space: nowrap; }

/* Sparkline expanded popup */
.am-spark-popup { position: fixed; z-index: 99999; background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.13), 0 2px 6px rgba(0,0,0,.06); padding: 10px 14px 8px; width: 300px; pointer-events: all; display: none; }
.am-sp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; min-height: 18px; }
.am-sp-title { font-size: 10px; font-weight: 700; color: var(--text-secondary, #6b7280); text-transform: uppercase; letter-spacing: .05em; }
.am-sp-callout2 { font-size: 11px; color: var(--text-primary, #111827); font-weight: 600; }
.am-sp-footer { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--text-secondary, #6b7280); margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border, #f3f4f6); gap: 8px; }
.am-sp-footer strong { color: var(--text-primary, #111827); }

.am-footer { text-align: left; padding: 12px 16px; font-size: 13px; color: #6b7280; border-top: 1px solid var(--border); }

.am-cb { width: 16px; height: 16px; cursor: pointer; accent-color: #3f76ff; border-radius: 3px; }
/* Run/pause toggle switch in the Status column */
.am-toggle { position: relative; display: inline-block; width: 32px; height: 18px; flex-shrink: 0; cursor: pointer; }
.am-toggle input { opacity: 0; width: 0; height: 0; }
.am-toggle .am-toggle-sl { position: absolute; inset: 0; background: #cbd5e1; border-radius: 20px; transition: .2s; }
.am-toggle .am-toggle-sl::before { content: ''; position: absolute; height: 14px; width: 14px; left: 2px; top: 2px; background: var(--bg-card); border-radius: 50%; transition: .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.am-toggle input:checked + .am-toggle-sl { background: #16a34a; }
.am-toggle input:checked + .am-toggle-sl::before { transform: translateX(14px); }
.am-toggle input:disabled + .am-toggle-sl { opacity: .5; cursor: wait; }
.am-row-selected { background: #f0f9ff !important; }
.am-row-selected:hover { background: #e0f2fe !important; }

.am-filter-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #F1F8FF; border: 1px solid rgba(63,118,255,.2); border-radius: 8px; margin-bottom: 10px; font-size: 13px; color: #3f76ff; font-weight: 600; }
.am-clear-filter { background: none; border: 1px solid #3f76ff; color: #3f76ff; font-size: 12px; padding: 3px 12px; border-radius: 4px; cursor: pointer; transition: all .15s; font-weight: 700; }
.am-clear-filter:hover { background: #3f76ff; color: #fff; }

.am-tab-badge { display: inline-flex; align-items: center; justify-content: center; background: rgba(63,118,255,.15); color: #3f76ff; font-size: 11px; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; margin-left: 5px; font-weight: 700; }

/* DV360 Creatives tab — pause/activate toggle */
.am-creatives-table td { vertical-align: middle; }
.am-cr-toggle { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px 3px 4px; background: #fff; cursor: pointer; font-size: 12px; font-weight: 600; transition: all .15s; }
.am-cr-toggle:disabled { cursor: not-allowed; }
.am-cr-knob { width: 26px; height: 15px; border-radius: 999px; position: relative; flex-shrink: 0; transition: background .15s; }
.am-cr-knob::after { content: ''; position: absolute; top: 1.5px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg-card); transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.am-cr-toggle.on { color: #047857; border-color: #6ee7b7; background: #ecfdf5; }
.am-cr-toggle.on .am-cr-knob { background: #10b981; }
.am-cr-toggle.on .am-cr-knob::after { left: 12.5px; }
.am-cr-toggle.off { color: #b45309; border-color: #fcd34d; background: #fffbeb; }
.am-cr-toggle.off .am-cr-knob { background: #d1d5db; }
.am-cr-toggle.off .am-cr-knob::after { left: 1.5px; }
.am-cr-toggle:hover { filter: brightness(.97); }
.am-cr-loadmore { margin-left: 8px; border: 1px solid var(--border); background: #fff; color: var(--accent); border-radius: 6px; padding: 3px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.am-cr-loadmore:hover { background: var(--bg-hover, #f1f5f9); }

.am-status-filter { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.am-sf-btn { padding: 6px 14px; border: none; background: var(--bg-card); color: #6b7280; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; }
.am-sf-btn:not(:last-child) { border-right: 1px solid var(--border); }
.am-sf-btn:hover { background: var(--bg-hover); color: var(--text-secondary); }
.am-sf-btn.active { background: #111827; color: #fff; }
.am-search-wrap { display: flex; align-items: center; gap: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; height: 36px; transition: border-color .15s; }
.am-search-wrap:focus-within { border-color: var(--text-primary); box-shadow: 0 0 0 2px rgba(26,26,26,.08); }
.am-search-wrap svg { color: var(--text-muted); flex-shrink: 0; }
.am-search { border: none; background: transparent; color: #1f2937; font-size: 13px; font-style: italic; outline: none; width: 160px; font-family: var(--font); }
.am-search::placeholder { color: #B0B0B0; }

.am-date-select { padding: 6px 12px; border: 1px solid #D2D2D2; border-radius: 8px; background: #fff; color: #1f2937; font-size: 13px; outline: none; cursor: pointer; height: 36px; transition: border-color .2s; font-family: var(--font); font-weight: 600; }
.am-date-select:focus { border-color: #3f76ff; box-shadow: 0 0 0 2px rgba(63,118,255,.12); }

.am-custom-dates { display: flex; align-items: center; gap: 4px; }
.am-custom-dates.hidden { display: none; }
.am-date-input { padding: 5px 8px; border: 1px solid #D2D2D2; border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font-size: 13px; outline: none; height: 36px; box-sizing: border-box; transition: border-color .2s; }
.am-date-input:focus { border-color: #3f76ff; }
.am-date-sep { color: var(--text-muted); font-size: 13px; }

.am-lead-link { color: #3f76ff; text-decoration: none; font-weight: 700; cursor: pointer; transition: all .15s; }
.am-lead-link:hover { color: #2f5fd9; text-decoration: underline; }
.am-result-row { display: flex; align-items: center; justify-content: flex-end; gap: 6px; line-height: 1.6; white-space: nowrap; }
.am-result-row + .am-result-row { border-top: 1px solid var(--border); padding-top: 2px; margin-top: 2px; }
.am-result-type { font-size: 11px; }
.am-result-left { display: flex; align-items: baseline; gap: 4px; }
.am-result-cpe { font-size: 11px; font-weight: 600; color: var(--text-secondary); background: var(--bg-hover, #f3f4f6); padding: 0 5px; border-radius: 4px; line-height: 1.6; }
.am-result-spark { flex-shrink: 0; vertical-align: middle; display: inline-block; }

/* Google Ads asset type badges */
.am-asset-type-badge { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: .3px; white-space: nowrap; text-transform: capitalize; }
.am-asset-headline { background: rgba(66,133,244,.12); color: #4285F4; }
.am-asset-desc     { background: rgba(52,168,83,.12);  color: #34A853; }
.am-asset-ad       { background: rgba(251,188,5,.14);  color: #9a7000; }

/* Google Ads asset performance label badges */
.am-perf-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
.am-perf-best     { background: rgba(34,197,94,.15);  color: #16a34a; }
.am-perf-good     { background: rgba(59,130,246,.12); color: #2563eb; }
.am-perf-low      { background: rgba(239,68,68,.12);  color: #dc2626; }
.am-perf-learning { background: rgba(234,179,8,.14);  color: #92400e; }
.am-perf-unrated  { background: rgba(107,114,128,.1); color: #6b7280; }

.am-opt-btn { background: rgba(63,118,255,.06); border: 1px solid rgba(63,118,255,.2); border-radius: 4px; padding: 4px 10px; cursor: pointer; color: #3f76ff; font-size: 12px; font-weight: 700; transition: all .15s; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.am-opt-btn:hover { border-color: #3f76ff; background: #3f76ff; color: #fff; }
.gads-opt-btn { background: rgba(24,119,242,.06); border-color: rgba(24,119,242,.2); color: #1877F2; }
.gads-opt-btn:hover { border-color: #1877F2; background: #1877F2; color: #fff; }
.am-dv360-opt-btn { background: none; border: none; cursor: pointer; font-size: 15px; color: #1a73e8; padding: 2px 4px; border-radius: 4px; line-height: 1; transition: background .12s; }
.am-dv360-opt-btn:hover { background: rgba(26,115,232,.12); }

/* DV360 Line Item Optimization */
.dv360-li-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; font-size: 11px; color: #6b7280; }
.dv360-li-obj { background: #eef2ff; color: #4338ca; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.dv360-li-refresh { color: var(--text-muted); }
.dv360-li-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.dv360-li-card { background: var(--bg-elevated, #f8faff); border: 1px solid var(--border, #e9ecef); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.dv360-li-card-label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.dv360-li-card-val { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.dv360-li-table th, .dv360-li-table td { font-size: 12px; padding: 7px 8px; }
.dv360-li-table .dv360-li-seg { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.dv360-li-row-bad { background: #fef2f2; }
.dv360-li-row-watch { background: #fffbeb; }
.dv360-li-score { display: inline-block; min-width: 26px; text-align: center; border-radius: 10px; font-weight: 700; font-size: 11px; padding: 1px 6px; }
.dv360-li-score.bad { background: #fee2e2; color: #b91c1c; }
.dv360-li-score.watch { background: #fef3c7; color: #92400e; }
.dv360-li-score.ok { background: #dcfce7; color: #166534; }
.dv360-li-rec-text { display: inline-block; max-width: 320px; font-size: 11px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv360-li-actions { display: flex; gap: 4px; }
.dv360-li-act { font-size: 10px; padding: 3px 7px; border-radius: 5px; border: 1px solid var(--border, #e5e7eb); background: #fff; cursor: pointer; white-space: nowrap; }
.dv360-li-act.exclude { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; font-weight: 600; }
.dv360-li-act.ignore:hover { background: var(--bg-hover); }
.dv360-li-act.review:hover { background: #eff6ff; }
.dv360-li-status { font-size: 10px; text-transform: capitalize; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.dv360-li-status.applied { background: #dcfce7; color: #166534; }
.dv360-li-status.ignored { background: var(--bg-hover); color: #6b7280; }
.dv360-li-status.reviewed { background: #eff6ff; color: #1d4ed8; }

/* ── DV360 Optimization Drawer ── */
.am-dv360-drawer { position: fixed; inset: 0; display: none; align-items: flex-end; justify-content: flex-end; background: rgba(0,0,0,.35); z-index: 1200; backdrop-filter: blur(2px); }
.am-dv360-drawer-inner { background: var(--bg-card, #fff); width: 420px; max-width: 96vw; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; box-shadow: -4px 0 32px rgba(0,0,0,.18); transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1); }
.am-dv360-drawer--open .am-dv360-drawer-inner { transform: translateX(0); }
.am-dv360-drawer-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px 12px; border-bottom: 1px solid var(--border, #e5e7eb); position: sticky; top: 0; background: var(--bg-card, #fff); z-index: 1; }
.am-dv360-drawer-title { font-size: 15px; font-weight: 700; color: var(--text-primary, #111827); }
.am-dv360-drawer-subtitle { font-size: 12px; color: var(--text-muted, #6b7280); margin-top: 2px; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-dv360-close-btn { background: none; border: none; cursor: pointer; font-size: 22px; color: var(--text-muted, #6b7280); padding: 0 4px; line-height: 1; transition: color .12s; flex-shrink: 0; }
.am-dv360-close-btn:hover { color: var(--text-primary, #111827); }
.am-dv360-mode-bar { display: flex; align-items: center; gap: 6px; padding: 10px 20px; background: var(--bg-surface, #f9fafb); border-bottom: 1px solid var(--border, #e5e7eb); }
.am-dv360-mode-label { font-size: 11px; font-weight: 600; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: .04em; }
.am-dv360-mode-btn { font-size: 12px; font-weight: 500; padding: 4px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; background: var(--bg-card, #fff); color: var(--text-muted, #6b7280); cursor: pointer; transition: all .12s; }
.am-dv360-mode-btn:hover { border-color: #1a73e8; color: #1a73e8; }
.am-dv360-mode-btn.active { background: #1a73e8; border-color: #1a73e8; color: #fff; }
.am-dv360-mode-hint { font-size: 11px; color: var(--text-muted, #6b7280); margin-left: 4px; }
.am-dv360-section { padding: 16px 20px; border-bottom: 1px solid var(--border, #e5e7eb); }
.am-dv360-section-title { font-size: 11px; font-weight: 700; color: var(--text-muted, #9ca3af); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.am-dv360-score-row { display: flex; align-items: center; gap: 16px; }
.am-dv360-score-label { font-size: 11px; font-weight: 600; color: var(--text-muted, #6b7280); margin-bottom: 2px; }
.am-dv360-score-val { font-size: 28px; font-weight: 800; line-height: 1; }
.am-dv360-score-sub { font-size: 11px; color: var(--text-muted, #6b7280); margin-top: 4px; }
.am-dv360-bar-wrap { height: 6px; background: var(--bg-surface, #f3f4f6); border-radius: 99px; overflow: hidden; margin-bottom: 4px; }
.am-dv360-bar { height: 100%; border-radius: 99px; transition: width .4s; }
.am-dv360-signals { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.am-dv360-sig { display: flex; flex-direction: column; }
.am-dv360-sig-k { font-size: 10px; color: var(--text-muted, #9ca3af); text-transform: uppercase; letter-spacing: .04em; }
.am-dv360-sig-v { font-size: 13px; font-weight: 600; color: var(--text-primary, #111827); margin-top: 1px; }
.am-dv360-rec-section { }
.am-dv360-rec-type { font-size: 14px; font-weight: 700; color: var(--text-primary, #111827); margin-bottom: 6px; }
.am-dv360-rec-reason { font-size: 12.5px; color: var(--text-secondary, #374151); line-height: 1.55; }
.am-dv360-conf-badge { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 99px; border: 1px solid; margin-left: 6px; vertical-align: middle; }
.am-conf-high { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.am-conf-med  { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.am-conf-low  { background: var(--bg-hover); color: #6b7280; border-color: #e5e7eb; }
.am-dv360-bid-row { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; font-size: 13px; }
.am-dv360-bid-from { color: var(--text-muted, #6b7280); text-decoration: line-through; }
.am-dv360-bid-arrow { color: var(--text-muted, #9ca3af); }
.am-dv360-bid-to { font-weight: 700; color: #10b981; font-size: 15px; }
.am-dv360-bid-pct { font-size: 11px; background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; border-radius: 99px; padding: 2px 7px; }
.am-dv360-apply-row { display: flex; gap: 8px; margin-top: 10px; }
.am-dv360-apply-btn { flex: 1; background: #f59e0b; color: #fff; border: none; border-radius: 7px; padding: 9px 16px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .13s; }
.am-dv360-apply-btn:hover { background: #d97706; }
.am-dv360-apply-btn:disabled { background: #9ca3af; cursor: not-allowed; }
.am-dv360-apply-btn--decrease { background: #3b82f6; }
.am-dv360-apply-btn--decrease:hover { background: #2563eb; }
.am-dv360-skip-btn { padding: 9px 14px; border: 1px solid var(--border, #e5e7eb); border-radius: 7px; background: var(--bg-card, #fff); color: var(--text-muted, #6b7280); font-size: 13px; cursor: pointer; }
.am-dv360-skip-btn:hover { border-color: var(--text-muted); }
.am-dv360-hints { margin: 0; padding-left: 18px; color: var(--text-secondary, #374151); font-size: 12.5px; line-height: 1.7; }
.am-dv360-history-section { flex: 1; }
.am-dv360-hist-item { padding: 10px 0; border-bottom: 1px solid var(--border, #f3f4f6); }
.am-dv360-hist-item:last-child { border-bottom: none; }
.am-dv360-hist-date { font-size: 11px; color: var(--text-muted, #9ca3af); margin-bottom: 2px; }
.am-dv360-hist-change { font-size: 13px; font-weight: 600; color: var(--text-primary, #111827); }
.am-dv360-proof { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px; }
.am-dv360-proof-item { font-size: 11px; background: var(--bg-surface, #f3f4f6); border-radius: 4px; padding: 2px 7px; color: var(--text-secondary, #374151); }
.am-dv360-proof-status { font-size: 11px; border-radius: 4px; padding: 2px 7px; }
.am-dv360-proof-ok { background: #f0fdf4; color: #166534; }
.am-dv360-proof-pending { background: #fffbeb; color: #92400e; }
.am-dv360-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; gap: 12px; color: var(--text-muted, #6b7280); font-size: 13px; }
/* inline metrics-fetching indicator in table cells */
span.am-dv360-loading { display: inline; padding: 0; color: var(--text-muted); font-size: 13px; animation: dv360spin 1.2s linear infinite; display: inline-block; }
@keyframes dv360spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.am-dv360-spinner { width: 28px; height: 28px; border: 3px solid var(--border, #e5e7eb); border-top-color: #1a73e8; border-radius: 50%; animation: spin .7s linear infinite; }
.am-dv360-error { padding: 16px 20px; color: #ef4444; font-size: 13px; }
.am-dv360-empty { color: var(--text-muted, #6b7280); font-size: 12.5px; font-style: italic; }

/* ── DV360 Segment Analysis ── */
.am-dv360-tab-bar { display: flex; gap: 2px; padding: 8px 20px 0; background: var(--bg-surface, #f9fafb); border-bottom: 1px solid var(--border, #e5e7eb); }
.am-dv360-tab-btn { font-size: 12px; font-weight: 600; padding: 6px 14px; border: none; border-bottom: 2px solid transparent; background: transparent; color: var(--text-muted, #6b7280); cursor: pointer; border-radius: 6px 6px 0 0; transition: all .12s; }
.am-dv360-tab-btn:hover { color: #1a73e8; background: rgba(26,115,232,.06); }
.am-dv360-tab-btn.active { color: #1a73e8; border-bottom-color: #1a73e8; background: transparent; }
.am-dv360-seg-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--bg-surface, #f9fafb); border-bottom: 1px solid var(--border, #e5e7eb); }
/* ── DV360 Segment Analysis — toolbar ── */
.am-dv360-seg-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.am-dv360-seg-select { font-size: 12px; padding: 4px 8px; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; background: var(--bg-card, #fff); color: var(--text-primary, #111827); cursor: pointer; }
.am-dv360-seg-refresh-btn { font-size: 12px; font-weight: 500; padding: 4px 10px; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; background: var(--bg-card, #fff); color: var(--text-muted, #6b7280); cursor: pointer; transition: all .12s; }
.am-dv360-seg-refresh-btn:hover { border-color: #1a73e8; color: #1a73e8; }
.am-dv360-seg-ai-btn { font-size: 12px; font-weight: 600; padding: 4px 12px; border: 1px solid #6366f1; border-radius: 6px; background: linear-gradient(135deg,#6366f1,#8b5cf6); color: #fff; cursor: pointer; transition: opacity .12s; }
.am-dv360-seg-ai-btn:hover { opacity: .85; }
.am-dv360-seg-ai-btn:disabled { opacity: .5; cursor: wait; }

/* ── Segment type pill tabs ── */
.am-dv360-seg-type-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 10px 16px 0; }
.am-dv360-seg-type-btn { font-size: 11.5px; font-weight: 500; padding: 4px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 20px; background: var(--bg-card, #fff); color: var(--text-muted, #6b7280); cursor: pointer; white-space: nowrap; transition: all .12s; position: relative; }
.am-dv360-seg-type-btn:hover { border-color: #6366f1; color: #6366f1; }
.am-dv360-seg-type-btn.active { background: #6366f1; border-color: #6366f1; color: #fff; }
.seg-type-badge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #ef4444; color: #fff; font-size: 9px; font-weight: 700; margin-left: 4px; vertical-align: middle; }
.am-dv360-seg-type-btn.active .seg-type-badge { background: rgba(255,255,255,.3); }

/* ── Summary bar ── */
.am-dv360-seg-summary { display: flex; gap: 0; border-bottom: 1px solid var(--border, #e5e7eb); }
.am-dv360-seg-sum-item { flex: 1; text-align: center; padding: 12px 8px; font-size: 11px; color: var(--text-muted, #6b7280); border-right: 1px solid var(--border, #e5e7eb); }
.am-dv360-seg-sum-item span { font-size: 18px; font-weight: 700; display: block; }
.am-dv360-seg-sum-item:last-child { border-right: none; }

/* ── Segment section headers ── */
.am-dv360-seg-section { border-bottom: 1px solid var(--border, #e5e7eb); padding-bottom: 4px; }
.am-dv360-seg-section:last-child { border-bottom: none; }
.am-dv360-seg-section-title { padding: 10px 14px 4px; font-size: 10.5px; font-weight: 700; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: .07em; }

/* ── Segment cards (replaces old table) ── */
.am-seg-card { padding: 9px 14px 8px; border-left: 3px solid transparent; border-bottom: 1px solid var(--border, #f3f4f6); }
.am-seg-card:last-child { border-bottom: none; }
.am-seg-card-exclude { border-left-color: #ef4444; background: rgba(239,68,68,.02); }
.am-seg-card-monitor { border-left-color: #f59e0b; background: rgba(245,158,11,.02); }
.am-seg-card-top     { border-left-color: #10b981; background: rgba(16,185,129,.02); }
.am-seg-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.am-seg-card-right { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.am-seg-name { font-weight: 600; font-size: 12.5px; color: var(--text-primary, #111827); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-seg-metrics { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.am-seg-metric { font-size: 11.5px; color: var(--text-muted, #6b7280); background: var(--bg-surface, #f3f4f6); padding: 2px 7px; border-radius: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.am-seg-metric b { color: var(--text-primary, #374151); font-weight: 600; }
.am-seg-reason { font-size: 10.5px; color: var(--text-muted, #6b7280); font-style: italic; line-height: 1.5; margin-top: 2px; }

/* ── Status badges ── */
.am-seg-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 9999px; white-space: nowrap; }
.am-seg-badge-excl { background: rgba(239,68,68,.1);  color: #dc2626; }
.am-seg-badge-mon  { background: rgba(245,158,11,.12); color: #b45309; }
.am-seg-badge-top  { background: rgba(16,185,129,.1);  color: #059669; }
.am-seg-badge-ok   { background: rgba(107,114,128,.08); color: #6b7280; }

/* ── Exclude action button ── */
.am-seg-excl-btn { font-size: 11px; font-weight: 600; padding: 3px 10px; border: 1px solid #ef4444; border-radius: 6px; background: transparent; color: #ef4444; cursor: pointer; white-space: nowrap; transition: all .12s; }
.am-seg-excl-btn:hover:not(:disabled) { background: #ef4444; color: #fff; }
.am-seg-excl-btn:disabled { opacity: .5; cursor: wait; }
.am-seg-split-btn { font-size: 11px; font-weight: 600; padding: 3px 10px; border: 1px solid #6366f1; border-radius: 6px; background: transparent; color: #6366f1; cursor: pointer; white-space: nowrap; transition: all .12s; margin-left: 4px; }
.am-seg-split-btn:hover:not(:disabled) { background: #6366f1; color: #fff; }
.am-seg-split-btn:disabled { opacity: .5; cursor: wait; }
.am-seg-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
.am-seg-excl-err { font-size: 10px; color: #ef4444; margin-top: 3px; max-width: 200px; line-height: 1.4; }

/* ── Creative segment card ── */
.am-seg-card-head--creative { align-items: flex-start; gap: 10px; }
.am-seg-creative-preview { flex-shrink: 0; width: 52px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; }
.am-seg-creative-thumb { width: 100%; height: 100%; object-fit: contain; display: block; }
.am-seg-creative-icon { font-size: 18px; color: var(--text-muted); line-height: 1; }
.am-seg-creative-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.am-seg-creative-info .am-seg-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.am-seg-creative-meta { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* ── Legacy table classes (kept for backward compat) ── */
.seg-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 9999px; white-space: nowrap; }
.seg-badge-exclude { background: rgba(239,68,68,.1);  color: #ef4444; }
.seg-badge-monitor { background: rgba(245,158,11,.1); color: #d97706; }
.seg-badge-ok      { background: rgba(107,114,128,.08); color: #6b7280; }
.seg-badge-top     { background: rgba(16,185,129,.1);  color: #059669; }
.seg-exclude-btn { font-size: 11px; font-weight: 600; padding: 3px 9px; border: 1px solid #ef4444; border-radius: 6px; background: rgba(239,68,68,.06); color: #ef4444; cursor: pointer; white-space: nowrap; transition: all .12s; }
.seg-exclude-btn:hover:not(:disabled) { background: #ef4444; color: #fff; }
.seg-exclude-btn:disabled { opacity: .6; cursor: wait; }

/* ── Empty / error states ── */
.am-dv360-seg-empty { padding: 32px 20px; text-align: center; color: var(--text-muted, #6b7280); font-size: 13px; line-height: 1.6; }
#amDv360SegBody { padding: 0; overflow-y: auto; }

/* ── AI suggestions panel ── */
#amDv360AiSuggestBody { border-bottom: 1px solid var(--border, #e5e7eb); }
.am-dv360-ai-panel { padding: 12px 16px; }
.am-dv360-ai-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.am-dv360-ai-title { font-size: 13px; font-weight: 700; color: var(--text-primary, #111827); }
.am-dv360-ai-list { display: flex; flex-direction: column; gap: 8px; }
.am-dv360-ai-card { background: var(--bg-surface, #f9fafb); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 12px 14px; }
.am-dv360-ai-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.am-dv360-ai-icon { font-size: 16px; flex-shrink: 0; }
.am-dv360-ai-card-title { font-size: 13px; font-weight: 600; color: var(--text-primary, #111827); flex: 1; }
.am-dv360-ai-impact { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 9999px; background: rgba(0,0,0,.06); }
.am-dv360-ai-card-reason { font-size: 12px; color: var(--text-muted, #6b7280); line-height: 1.5; margin-bottom: 8px; }
.am-dv360-ai-manual-note { font-size: 11px; color: var(--text-muted, #9ca3af); font-style: italic; }

/* ── Google Ads Optimizer UI ── */
.gads-opt-metrics { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.gads-opt-metric { display: flex; flex-direction: column; background: var(--bg-hover); border: 1px solid #e9ecef; border-radius: 6px; padding: 6px 10px; min-width: 64px; }
.gads-opt-metric-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.gads-opt-metric-val { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-top: 2px; }
.gads-opt-delta { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.5; }
.gads-opt-impact { font-size: 12px; color: var(--text-secondary); background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px; padding: 6px 10px; margin-top: 8px; }
.gads-conf-badge { font-size: 10px; font-weight: 600; color: #6b7280; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 9999px; padding: 1px 7px; }

/* ── Google Ads Expansion Mode Panel ── */
.gads-expansion-panel { background: linear-gradient(135deg, rgba(99,102,241,.06) 0%, rgba(16,185,129,.06) 100%); border: 1px solid rgba(99,102,241,.2); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.gads-expansion-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.gads-expansion-icon { font-size: 24px; flex-shrink: 0; margin-top: 1px; }
.gads-expansion-title-col { flex: 1; }
.gads-expansion-title { font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.gads-expansion-sub { font-size: 12px; color: #6b7280; margin-top: 3px; line-height: 1.4; }
.gads-expansion-product { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: rgba(255,255,255,.7); border: 1px solid rgba(99,102,241,.15); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; }
.gads-expansion-product-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.gads-expansion-product-text { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; }
.gads-expansion-lang-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 9999px; background: rgba(99,102,241,.1); color: #6366f1; }
.gads-expansion-reason { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; }
.gads-expansion-insight { font-size: 12px; color: #6b7280; background: rgba(99,102,241,.06); border-left: 3px solid #6366f1; border-radius: 0 6px 6px 0; padding: 8px 12px; margin-bottom: 12px; line-height: 1.5; }
.gads-expansion-add-all-btn { width: 100%; padding: 9px 16px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; transition: opacity .12s; }
.gads-expansion-add-all-btn:hover { opacity: .88; }
.gads-expansion-add-all-btn:disabled { opacity: .6; cursor: wait; }
.gads-mode-btn { font-size: 11.5px; font-weight: 500; padding: 4px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: #6b7280; cursor: pointer; transition: all .12s; }
.gads-mode-btn:hover { border-color: #1877F2; color: #1877F2; }
.gads-mode-btn.active { background: #1877F2; border-color: #1877F2; color: #fff; }

/* Right-side drawer (was a centered modal) — the table stays visible behind. */
.am-opt-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.32); backdrop-filter: blur(2px); z-index: 99999; display: none; justify-content: flex-end; align-items: stretch; padding: 0; overflow: hidden; }
/* ═══════════════════════════════════════
   OPTIMIZATION INSIGHTS  — right panel
   ═══════════════════════════════════════ */
.am-opt-modal {
  background: var(--bg-card); border-radius: 0;
  width: 680px; max-width: 96vw;
  height: 100vh; max-height: 100vh;
  box-shadow: -16px 0 48px rgba(15,23,42,.18);
  border-left: 1px solid #e9ecef;
  animation: amOptIn .24s cubic-bezier(.16,1,.3,1);
  display: flex; flex-direction: column; overflow: hidden;
}
@keyframes amOptIn { from { opacity: .5; transform: translateX(48px) } to { opacity: 1; transform: translateX(0) } }
@keyframes fadeInRow { from { opacity: 0; background: rgba(99,102,241,.12); } to { opacity: 1; background: transparent; } }
.am-opt-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px;
  background: var(--bg-card);
  border-bottom: 1px solid #eef0f3;
  flex-shrink: 0; gap: 12px;
}
.am-opt-header-left { display: flex; align-items: center; gap: 12px; }
.am-opt-header-icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: #4a6b8a; /* calm steel-blue — natural, not electric indigo */
  display: flex; align-items: center; justify-content: center;
}
.am-opt-header-icon svg { color: #fff; }
.am-opt-title { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: -.01em; }
.am-opt-subtitle {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 2px; font-size: 11.5px; font-weight: 500;
  color: #6b7280; background: #efefef;
  padding: 2px 8px; border-radius: 20px;
}
.am-opt-daterange {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px; font-size: 11px; font-weight: 500;
  color: #6366f1; background: rgba(99,102,241,.08);
  padding: 2px 8px; border-radius: 20px;
}
.am-opt-table-daterange {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 8px; font-size: 10.5px; font-weight: 500;
  color: #6366f1; background: rgba(99,102,241,.08);
  padding: 1px 7px; border-radius: 20px;
  vertical-align: middle; white-space: nowrap;
}
.am-opt-table-daterange svg { flex-shrink: 0; opacity: .8; }
.am-opt-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.am-opt-hist-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg-card); color: var(--text-secondary); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all .15s;
}
.am-opt-hist-btn:hover { border-color: #adb5bd; color: var(--text-primary); background: #f1f3f5; }
.am-opt-close {
  width: 30px; height: 30px; border-radius: 7px;
  background: rgba(0,0,0,.05); border: none;
  color: #6b7280; cursor: pointer; font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.am-opt-close:hover { background: #f1f3f5; color: var(--text-secondary); }
.am-opt-body { padding: 16px 20px 24px; flex: 1; max-height: none; overflow-y: auto; background: #fafbfc; }

/* ── Optimizer loader ──
   Meta's breakdown pull is not "a few seconds" when the ad account is being
   rate-limited — it can be minutes of backoff. So this shows a live stage line,
   a rotating ticker of what is actually happening, and an indeterminate bar,
   rather than one static sentence that turns into a lie after 20 seconds. */
.am-opt-loader { padding: 44px 24px 48px; text-align: center; }
.am-opt-loader-orb {
  width: 46px; height: 46px; margin: 0 auto 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  border: 1px solid #e0e7ff; color: #6366f1;
  animation: amOptOrb 2.4s ease-in-out infinite;
}
@keyframes amOptOrb {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(99,102,241,.22); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(99,102,241,0); }
}
.am-opt-loader-orb svg { animation: amOptSpin 1.6s linear infinite; }
@keyframes amOptSpin { to { transform: rotate(360deg); } }
.am-opt-loader-stage { font-size: 14.5px; font-weight: 600; color: var(--text-primary, #374151); }
.am-opt-loader-ticker { margin-top: 7px; height: 17px; overflow: hidden; }
.am-opt-loader-ticker span {
  display: block; font-size: 12.5px; color: var(--text-muted, #9ca3af);
  animation: amOptTick .42s ease-out;
}
@keyframes amOptTick { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.am-opt-loader-bar {
  position: relative; width: 190px; height: 3px; margin: 18px auto 0;
  border-radius: 3px; background: rgba(99,102,241,.13); overflow: hidden;
}
.am-opt-loader-bar i {
  position: absolute; inset: 0 auto 0 0; width: 38%; border-radius: 3px;
  background: linear-gradient(90deg, #a5b4fc, #6366f1);
  animation: amOptBar 1.5s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes amOptBar { 0% { left: -40%; } 100% { left: 100%; } }
.am-opt-loader-note { margin-top: 13px; font-size: 11.5px; color: var(--text-muted, #9ca3af); min-height: 15px; }
.am-opt-loader-note.warn { color: #b45309; font-weight: 600; }
html.dark .am-opt-loader-orb { background: linear-gradient(135deg, #1e1b4b, #262046); border-color: #312e81; }
html.dark .am-opt-loader-note.warn { color: #fbbf24; }

/* ── Summary stat chips ── */
.am-opt-summary { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.am-opt-summary-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 8px;
  font-size: 12px; font-weight: 600;
  border: 1px solid transparent;
}
.am-opt-summary-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.am-opt-summary-chip.high { background: #fff5f5; border-color: #ffd7d7; color: #c0392b; }
.am-opt-summary-chip.high .am-opt-summary-chip-dot { background: #c0392b; }
.am-opt-summary-chip.medium { background: #fffaf0; border-color: #fde8a0; color: #b7770d; }
.am-opt-summary-chip.medium .am-opt-summary-chip-dot { background: #e0a020; }
.am-opt-summary-chip.low { background: #f0f4ff; border-color: #c5d5f5; color: #2c5fbd; }
.am-opt-summary-chip.low .am-opt-summary-chip-dot { background: #1877F2; }

/* ── Affected entities ── */
.am-opt-affected {
  background: var(--bg-hover); border: 1px solid #e9ecef; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 14px;
}
.am-opt-affected-title { font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px; }
.am-opt-affected-grid { display: flex; gap: 14px; flex-wrap: wrap; }
.am-opt-affected-col { flex: 1; min-width: 110px; }
.am-opt-affected-label { font-size: 10.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.am-opt-affected-item {
  display: inline-flex; align-items: center;
  font-size: 11.5px; color: var(--text-secondary); font-weight: 500;
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 5px; margin: 2px 0;
  max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.am-opt-affected-more { font-size: 11px; color: var(--text-secondary); font-weight: 500; margin-top: 2px; }
.am-opt-section-title { font-size: 11.5px; font-weight: 700; color: #6b7280; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .07em; display: flex; align-items: center; gap: 7px; }
.am-opt-section-title::before { content: ''; display: inline-block; width: 3px; height: 12px; background: #adb5bd; border-radius: 2px; }
.am-opt-section-desc { font-size: 12.5px; color: #6b7280; margin: 0 0 12px; line-height: 1.6; padding-left: 10px; }
.am-opt-why {
  font-size: 12.5px; color: var(--text-secondary); line-height: 1.6;
  margin-bottom: 10px; padding: 9px 12px;
  background: #fefdf5; border-left: 3px solid #d4a017;
  border-radius: 0 6px 6px 0;
}
.am-opt-vr-explain { font-size: 11.5px; color: #6b7280; margin: 3px 0 8px; line-height: 1.5; }

/* Optimization History */
.am-hist-list { display: flex; flex-direction: column; gap: 8px; }
.am-hist-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; transition: border-color .15s; }
.am-hist-item:hover { border-color: rgba(24,119,242,.2); }
.am-hist-item.am-hist-rolled-back { opacity: .55; }
.am-hist-item-left { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; }
.am-hist-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
.am-hist-info { flex: 1; min-width: 0; }
.am-hist-desc { font-size: .82rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.am-hist-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.am-hist-entity { font-size: .72rem; color: var(--primary); background: rgba(24,119,242,.08); padding: 1px 8px; border-radius: 4px; font-weight: 500; }
.am-hist-date { font-size: .7rem; color: var(--text-muted); }
.am-hist-adsets { font-size: .7rem; color: var(--text-muted); }
.am-hist-badge-verified { font-size: .66rem; font-weight: 700; color: #1877F2; background: rgba(24,119,242,.1); padding: 1px 8px; border-radius: 4px; }
.am-hist-badge-rb { font-size: .66rem; font-weight: 700; color: #b7770d; background: rgba(224,160,32,.1); padding: 1px 8px; border-radius: 4px; }
.am-hist-rollback-btn { display: flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-card); color: #6b7280; font-size: .76rem; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all .15s; }
.am-hist-rollback-btn:hover { background: var(--bg-hover); color: var(--text-secondary); border-color: #adb5bd; }
.am-hist-rollback-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Empty / no-insights ── */
.am-opt-empty { text-align: center; padding: 32px 20px; }
.am-opt-empty-icon { width: 52px; height: 52px; border-radius: 50%; background: #e8f5e9; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.am-opt-empty-title { font-size: 15px; font-weight: 700; color: #2e7d32; margin: 0 0 6px; }
.am-opt-empty-desc { font-size: 13px; color: #6b7280; max-width: 340px; margin: 0 auto; line-height: 1.6; }
.am-opt-lq-empty { font-size: 12.5px; color: #6b7280; background: var(--bg-hover); border: 1px dashed #ced4da; border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; line-height: 1.6; }

/* ── Insight cards ── */
.am-opt-card {
  border: 1px solid #e9ecf1; border-radius: 12px; margin-bottom: 10px;
  overflow: hidden; transition: box-shadow .15s, border-color .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  background: var(--bg-card);
}
.am-opt-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.07); border-color: #d1d5db; }
.am-opt-card.am-opt-sev-high { border-left: 3px solid #c0392b; }
.am-opt-card.am-opt-sev-medium { border-left: 3px solid #e0a020; }
.am-opt-card.am-opt-sev-low { border-left: 3px solid #1877F2; }
.am-opt-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; user-select: none; }
.am-opt-card-head:hover { background: var(--bg-hover); }
.am-opt-card-icon-wrap {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.am-opt-sev-high .am-opt-card-icon-wrap { background: #fff0ee; }
.am-opt-sev-medium .am-opt-card-icon-wrap { background: #fff8e6; }
.am-opt-sev-low .am-opt-card-icon-wrap { background: #eef3ff; }
.am-opt-card-icon { display: flex; }
.am-opt-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.am-opt-card-title-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.am-opt-card-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.am-opt-sev-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 9999px;
  text-transform: uppercase; letter-spacing: .04em;
}
.am-opt-sev-badge.am-opt-sev-high { background: #fff0ee; color: #c0392b; border: 1px solid #ffd7d7; }
.am-opt-sev-badge.am-opt-sev-medium { background: #fff8e6; color: #b7770d; border: 1px solid #fde8a0; }
.am-opt-sev-badge.am-opt-sev-low { background: #eef3ff; color: #2c5fbd; border: 1px solid #c5d5f5; }
.am-opt-adset-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; color: #6b46c1;
  background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 5px;
  padding: 2px 7px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.am-opt-hierarchy { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.am-opt-hier-campaign { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #6b7280; }
.am-opt-hier-adset { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #6b46c1; font-weight: 600; background: #f3effe; border: 1px solid #e3d9fb; border-radius: 6px; padding: 2px 8px; }
.am-opt-hier-adset.am-opt-hier-all { color: #6b7280; background: var(--bg-hover); border-color: #e5e7eb; font-weight: 500; }
.am-opt-hier-sep { font-size: 10px; color: var(--text-muted); }
.am-opt-vr-account { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #6b7280; margin: 4px 0 8px; }
.am-opt-entity-table-wrap { margin: 10px 0 4px; overflow-x: auto; }
.am-opt-entity-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.am-opt-entity-table thead th {
  text-align: left; font-size: 11px; font-weight: 600; color: #6b7280;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--border); padding: 5px 8px;
}
.am-opt-entity-table thead th.am-opt-et-r { text-align: right; }
.am-opt-entity-table tbody tr { border-bottom: 1px solid #f3f4f6; }
.am-opt-entity-table tbody tr:last-child { border-bottom: none; }
.am-opt-entity-table tbody td { padding: 6px 8px; color: var(--text-secondary); vertical-align: middle; }
.am-opt-et-r { text-align: right; font-variant-numeric: tabular-nums; }
.am-opt-et-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.am-opt-et-row-bad { background: #fff8f6; }
.am-opt-et-row-best { background: #f0fdf4; }
.am-opt-et-metric-bad { color: #dc2626; font-weight: 700; }
.am-opt-et-metric-best { color: #16a34a; font-weight: 700; }
.am-opt-et-badge { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 4px; margin-left: 5px; white-space: nowrap; }
.am-opt-et-badge-bad { background: #fee2e2; color: #b91c1c; }
.am-opt-et-badge-best { background: #dcfce7; color: #15803d; }
.am-opt-toggle { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 5px; border-radius: 5px; transition: transform .2s, background .12s; flex-shrink: 0; }
.am-opt-toggle:hover { background: var(--bg-hover); color: var(--text-secondary); }
.am-opt-card.expanded .am-opt-toggle { transform: rotate(180deg); }
.am-opt-card-detail { display: none; padding: 0 14px 14px; border-top: 1px solid #f3f4f6; }
.am-opt-card.expanded .am-opt-card-detail { display: block; padding-top: 12px; }
.am-opt-detail-text { font-size: 12.5px; color: #6b7280; margin: 0 0 9px; line-height: 1.5; }

/* ── Chart bars ── */
.am-opt-chart-section { margin: 10px 0; background: var(--bg-hover); border: 1px solid #f0f0f0; border-radius: 8px; padding: 10px 12px; }
.am-opt-chart-title { font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px; }
/* The right-hand headers borrow the DATA columns' widths so they stay aligned
   with the numbers under them — but their text is dynamic (Purchases / Results /
   Add to cart / Landing page views…) and "PURCHASES" alone is wider than the
   40px results column. With nowrap inherited it spilled sideways and printed as
   "PURCHASESPEND". Now multi-word labels wrap, an over-long single word breaks
   rather than overflowing, and the columns are wide enough that the common
   labels still fit on one line. flex-end keeps a two-line header ("Cost /
   Purchases") sitting on the same baseline as its neighbours. */
.am-opt-chart-header { display: flex; align-items: flex-end; gap: 10px; font-size: 10px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; padding-bottom: 5px; border-bottom: 1px solid #e0e4e8; margin-bottom: 6px; }
.am-opt-bar-header-bar { flex: 1; padding-left: 2px; color: var(--text-muted); }
.am-opt-bar-header-right {
  text-align: right; font-weight: 700; color: #6b7280;
  font-size: 9.5px; letter-spacing: .03em; line-height: 1.2;
  white-space: normal; overflow-wrap: anywhere;
}
/* Breakdown metrics table (Impr/Clicks/CTR/Conv/Cost/CPM/CPC/CPL) */
/* table-layout:fixed + tight padding so all metric columns fit the drawer
   width without a horizontal scrollbar */
.am-rec-bd-wrap { margin: 8px 0; border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; }
.am-rec-bd-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.am-rec-bd-table th { text-align: right; padding: 6px 4px; color: #6b7280; font-weight: 600; font-size: 10px; background: #fafafa; border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-rec-bd-table td { text-align: right; padding: 5px 4px; color: var(--text-secondary); border-bottom: 1px solid #f3f4f6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-rec-bd-table tbody tr:last-child td { border-bottom: none; }
.am-rec-bd-table .am-rec-bd-name { text-align: left; width: 88px; max-width: 88px; overflow: hidden; text-overflow: ellipsis; }
.am-rec-bd-table tr.am-rec-bd-bad td { background: #fdf3f1; color: #a4453b; font-weight: 600; }
.am-rec-bd-table tr.am-rec-bd-best td { background: #f0f4ee; }
.am-rec-bd-table td.am-rec-bd-act, .am-rec-bd-table th.am-rec-bd-act { width: 52px; text-align: center; padding: 3px 4px; }
.am-rec-bd-table td.am-rec-bd-chk, .am-rec-bd-table th.am-rec-bd-chk { width: 24px; text-align: center; padding: 3px 2px; }
.am-rec-bd-x { width: 20px; height: 20px; border: 1px solid var(--border); background: #fff; color: #9ca3af; border-radius: 5px; cursor: pointer; font-size: 11px; line-height: 1; padding: 0; transition: all .12s; }
.am-rec-bd-x:hover { color: #ef4444; border-color: #fca5a5; background: #fef2f2; }
.am-rec-bd-x:disabled { cursor: default; }
.am-rec-bd-pz { height: 22px; border: 1px solid var(--border); background: #fff; color: #6b7280; border-radius: 5px; cursor: pointer; font-size: 10.5px; font-weight: 600; line-height: 1; padding: 0 8px; transition: all .12s; display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.am-rec-bd-pz:hover { color: #dc2626; border-color: #fca5a5; background: #fef2f2; }
.am-rec-bd-pz:disabled { cursor: default; opacity: .5; }

/* Compact per-card spend-distribution chart (replaces the old "Why" text) */
.am-rec-chart { padding: 4px 2px 12px; }
.am-rec-chart-cap { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 7px; }
.am-rec-chart-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.am-rec-chart-lbl { width: 92px; flex-shrink: 0; font-size: 11px; color: #6b7280; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-rec-chart-track { flex: 1; background: var(--bg-hover); border-radius: 4px; height: 14px; overflow: hidden; }
.am-rec-chart-fill { display: block; height: 100%; border-radius: 4px; transition: width .3s ease; }
.am-rec-chart-val { width: 66px; flex-shrink: 0; font-size: 11px; color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; }

/* Dedicated creatives panel in the optimizer */
.am-opt-creatives { margin-top: 8px; }
.am-cr-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; margin-bottom: 7px; }
.am-cr-thumb { width: 46px; height: 34px; flex-shrink: 0; border-radius: 5px; object-fit: cover; background: #f1f5f9; border: 1px solid var(--border); }
.am-cr-meta { flex: 1; min-width: 0; }
.am-cr-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-cr-sub { font-size: 11px; color: #6b7280; margin-top: 1px; }
.am-cr-status { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.am-cr-status.active { background: #ecfdf5; color: #047857; }
.am-cr-status.paused { background: var(--bg-hover); color: #6b7280; }

.am-opt-chart { display: flex; flex-direction: column; gap: 5px; }
.am-opt-bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.am-opt-bar-label { width: 96px; text-align: right; color: var(--text-secondary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.am-opt-bar-wrap { flex: 1; height: 18px; background: #e9ecef; border-radius: 4px; overflow: hidden; }
.am-opt-bar { height: 100%; border-radius: 4px; min-width: 3px; transition: width .4s ease; }
.am-opt-bar-results { width: 58px; text-align: right; color: var(--text-secondary); font-size: 11.5px; font-weight: 600; flex-shrink: 0; }
.am-opt-bar-val { width: 56px; text-align: right; color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.am-opt-bar-metric { width: 74px; text-align: right; font-weight: 700; color: var(--text-secondary); font-size: 11.5px; flex-shrink: 0; }
.am-opt-bar-metric.am-opt-best { color: #1877F2; }

/* ── Action recommendation ── */
.am-opt-action {
  background: var(--bg-hover);
  border: 1px solid #e9ecef; border-radius: 8px;
  padding: 10px 14px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.6;
  margin-top: 10px; display: flex; gap: 8px; align-items: flex-start;
}
.am-opt-action svg { flex-shrink: 0; margin-top: 2px; color: #6b7280; }

/* ── Action buttons ── */
.am-opt-apply-row { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.am-opt-apply-btn {
  background: #4a6b8a; color: #fff; /* calm steel-blue, natural */
  border: none; border-radius: 8px; padding: 7px 16px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all .15s; display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 1px 4px rgba(74,107,138,.22);
}
.am-opt-apply-btn:hover { filter: brightness(1.06); box-shadow: 0 3px 10px rgba(74,107,138,.3); }
.am-opt-apply-btn:disabled { opacity: .7; cursor: not-allowed; }
.am-opt-apply-btn.applied { background: #3f7d6e; box-shadow: 0 2px 8px rgba(63,125,110,.25); cursor: default; }
.am-opt-pause-btn { background: #c0392b; box-shadow: 0 1px 4px rgba(192,57,43,.2); }
.am-opt-pause-btn:hover { background: #a93226; box-shadow: 0 3px 10px rgba(192,57,43,.3); }
.am-opt-undo-btn:hover { background: #4b5563 !important; }
.am-opt-manual-note { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 7px; background: #fffbeb; border: 1px solid #fde68a; color: #b45309; font-size: 12px; font-weight: 500; }

/* Pause / Activate line item button in the optimizer header */
.am-opt-status-btn {
  display: inline-flex; align-items: center; gap: 5px; margin-right: 8px;
  border: 1px solid var(--border); border-radius: 7px; padding: 6px 12px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; background: var(--bg-card);
  transition: all .15s; white-space: nowrap; align-self: flex-start;
}
.am-opt-status-btn.is-active { color: #b45309; border-color: #fcd34d; background: #fffbeb; }
.am-opt-status-btn.is-active:hover { background: #fef3c7; }
.am-opt-status-btn.is-paused { color: #047857; border-color: #6ee7b7; background: #ecfdf5; }
.am-opt-status-btn.is-paused:hover { background: #d1fae5; }
.am-opt-status-btn:disabled { opacity: .6; cursor: not-allowed; }

.am-opt-vr { margin-top: 12px; background: var(--bg-hover); border: 1px solid #e9ecef; border-radius: 8px; padding: 12px; }
.am-opt-vr-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.am-opt-vr-account { font-size: 11px; color: #6b7280; display: flex; align-items: center; gap: 5px; margin: 2px 0 6px; }
.am-opt-vr-rules { display: flex; flex-direction: column; gap: 6px; }
.am-opt-vr-rule { display: flex; align-items: center; gap: 10px; background: var(--bg-card); border-radius: 6px; padding: 6px 10px; border: 1px solid #e9ecef; }
.am-opt-vr-arrow { font-size: 1rem; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; }
.am-opt-vr-boost .am-opt-vr-arrow { background: #eef3ff; color: #1877F2; }
.am-opt-vr-decrease .am-opt-vr-arrow { background: #fff0ee; color: #c0392b; }
/* Single row: segment name + "Increase/Decrease bid by" sit inline (compact). */
.am-opt-vr-info { flex: 1; display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.am-opt-vr-segment { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.am-opt-vr-desc { font-size: 11.5px; color: #6b7280; }
.am-opt-vr-pct-wrap { display: flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.am-opt-vr-pct { width: 48px; border: 1px solid var(--border); border-radius: 5px; padding: 4px 5px; font-size: 13px; font-weight: 600; color: var(--text-primary); text-align: center; background: var(--bg-card); outline: none; }
.am-opt-vr-pct:focus { border-color: #1877F2; box-shadow: 0 0 0 2px rgba(24,119,242,.12); }
.am-opt-vr-apply { margin-top: 10px; width: 100%; padding: 8px 16px; border: none; border-radius: 7px; background: #1a1a1a; color: #fff; font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all .15s; }
.am-opt-vr-apply:hover { background: #333; }
.am-opt-vr-apply:disabled { opacity: .65; cursor: not-allowed; }
.am-opt-vr-apply.applied { background: #1877F2; }

.am-opt-breakdowns { margin-top: 16px; border-top: 1px solid #e9ecef; padding-top: 14px; }
.am-opt-bd-section { border: 1px solid #e9ecef; border-radius: 8px; margin-bottom: 6px; overflow: hidden; }
.am-opt-bd-label { display: flex; align-items: center; gap: 7px; padding: 9px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; user-select: none; background: var(--bg-hover); }
.am-opt-bd-label:hover { background: #f1f3f5; }
.am-opt-bd-label svg { margin-left: auto; transition: transform .2s; }
.am-opt-bd-section.open .am-opt-bd-label svg { transform: rotate(180deg); }
.am-opt-bd-count { font-weight: 400; color: var(--text-muted); font-size: 11.5px; }
.am-opt-bd-table { display: none; }
.am-opt-bd-section.open .am-opt-bd-table { display: block; }
.am-opt-bd-table table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.am-opt-bd-table th { background: var(--bg-hover); padding: 5px 8px; text-align: right; font-weight: 600; color: var(--text-muted); border-top: 1px solid #e9ecef; white-space: nowrap; text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em; }
.am-opt-bd-table th:first-child { text-align: left; }
.am-opt-bd-table td { padding: 5px 8px; text-align: right; color: var(--text-secondary); border-top: 1px solid #f3f4f6; white-space: nowrap; }
.am-opt-bd-table td:first-child { text-align: left; font-weight: 500; }
.am-bd-act-col { text-align: center !important; width: 80px; }
.am-bd-act-cell { text-align: center !important; padding: 3px 6px !important; }
.am-bd-excl-btn { font-size: 10.5px; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; white-space: nowrap; transition: background .15s,border-color .15s,color .15s; }
.am-bd-excl-btn:hover { border-color: #ef4444; color: #ef4444; background: #fef2f2; }
.am-bd-excl-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Graph cell (Figma-style inline chart) */
.am-graph-col { padding: 0 !important; }
.am-table td.am-graph-col { height: 58px; max-height: 58px; overflow: visible; }
.am-graph-cell { display: flex; flex-direction: column; justify-content: space-between; height: 58px; padding: 6px 8px 4px; box-sizing: border-box; }
.am-graph-val { font-size: 10px; font-weight: 400; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; letter-spacing: -0.02px; }
.am-graph-vs { font-size: 8px; color: #3f76ff; }
.am-graph-svg { width: 100%; height: 24px; display: block; flex-shrink: 0; }

/* Daily Spent bar chart cell */
.am-daily-cell { display: flex; flex-direction: column; gap: 2px; }
.am-daily-val { font-size: 11px; font-weight: 600; color: var(--text-primary, #334155); white-space: nowrap; }
.am-daily-svg { width: 100px; height: 28px; display: block; }

/* Duration pill (Figma-style) */
.am-duration-pill { display: inline-flex; align-items: center; justify-content: center; padding: 3px 12px; background: #E3F1FF; color: #3f76ff; font-size: 13px; font-weight: 700; border-radius: 10px; white-space: nowrap; line-height: 18px; }

/* Budget Spent cell with progress bar */
.am-budget-amount { font-size: 13px; font-weight: 500; color: var(--text-primary, #1f2937); }

/* Legacy spark styles kept for hover tooltip */
.am-spark { display: inline-flex; align-items: center; gap: 4px; position: relative; cursor: pointer; }
.am-spark > svg { flex-shrink: 0; }
.am-spark-val { font-size: 13px; font-weight: 600; white-space: nowrap; }
.am-spark-tooltip { display: none; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 1000; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.06); padding: 0; width: 400px; overflow: hidden; }
.am-spark:hover .am-spark-tooltip { display: block; pointer-events: auto; }
.am-spark-tt-title { font-size: .82rem; font-weight: 700; color: var(--text-primary); padding: 14px 18px 0; }
.am-spark-tt-chart { position: relative; padding: 4px 12px 0; }
.am-spark-tt-chart svg { display: block; cursor: crosshair; }
.am-sp-callout { position: absolute; top: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.1); padding: 8px 14px; pointer-events: none; min-width: 100px; z-index: 2; }
.am-sp-callout-date { font-size: .7rem; color: var(--text-muted); margin-bottom: 2px; }
.am-sp-callout-label { font-size: .68rem; color: #6b7280; }
.am-sp-callout-val { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.am-spark-tt-footer { display: flex; justify-content: space-between; padding: 10px 18px; border-top: 1px solid #f3f4f6; font-size: .72rem; color: var(--text-muted); background: var(--bg-hover); }
.am-spark-tt-footer span { white-space: nowrap; }

.meta-connect-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 60px 30px; text-align: center; background: var(--bg-elevated); border: 1px dashed var(--border); border-radius: 12px; margin: 20px 0; }
.meta-connect-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 0; }
.meta-connect-card p { font-size: .88rem; color: var(--text-secondary); margin: 0; max-width: 420px; line-height: 1.5; }
.meta-connect-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: rgba(99,102,241,.08); border-radius: 50%; }
.btn-meta-connect { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; background: var(--primary); color: #fff; border: none; border-radius: 8px; font-size: .88rem; font-weight: 600; cursor: pointer; transition: opacity .15s; }
.btn-meta-connect:hover { opacity: .9; }
.btn-meta-connect svg { flex-shrink: 0; }

/* Lead Forms Empty States */
.lf-empty-state { display: flex; align-items: flex-start; gap: 28px; padding: 40px 36px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; margin: 8px 0; max-width: 680px; }
.lf-empty-state--loading { align-items: center; gap: 14px; padding: 48px 36px; color: var(--text-muted); font-size: 14px; font-weight: 500; }
.lf-empty-icon { width: 64px; height: 64px; min-width: 64px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.lf-empty-icon--connect { background: linear-gradient(135deg,#1877f2 0%,#42a5f5 100%); color: #fff; }
.lf-empty-icon--account { background: linear-gradient(135deg,#1a1a1a 0%,#818cf8 100%); color: #fff; }
.lf-empty-icon--warn { background: linear-gradient(135deg,#f59e0b 0%,#fbbf24 100%); color: #fff; }
.lf-empty-body { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.lf-empty-title { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; line-height: 1.3; }
.lf-empty-desc { font-size: 13.5px; color: var(--text-secondary); margin: 0; line-height: 1.6; }
.lf-empty-steps { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.lf-empty-step { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.lf-step-num { min-width: 20px; height: 20px; border-radius: 50%; background: rgba(99,102,241,.12); color: var(--text-primary); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.lf-step-num--warn { background: rgba(245,158,11,.12); color: #d97706; }
.lf-empty-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.lf-empty-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; background: #1a1a1a; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .15s; }
.lf-empty-btn:hover { opacity: .88; }
.lf-empty-btn--secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
.lf-empty-btn--secondary:hover { background: var(--bg-hover,rgba(0,0,0,.04)); opacity: 1; }
@media (max-width: 600px) { .lf-empty-state { flex-direction: column; } .lf-empty-icon { width: 48px; height: 48px; min-width: 48px; border-radius: 10px; } }

/* Table title bar */
.am-camp-type-badge { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; vertical-align: middle; margin-left: 4px; }
.am-camp-pmax { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.am-camp-search { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.am-camp-display { background: #f3e8ff; color: #6b21a8; border: 1px solid #e9d5ff; }
.am-camp-shopping { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.am-camp-video { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.am-drilldown-banner { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: #eff6ff; border: 1px solid #bfdbfe; border-bottom: none; border-radius: 12px 12px 0 0; font-size: 12px; color: #1e40af; }
.am-drilldown-banner + .am-table-title-bar { border-radius: 0; }
.am-drilldown-banner strong { font-weight: 600; }
.am-drilldown-clear { margin-left: auto; padding: 2px 8px; border: 1px solid #93c5fd; border-radius: 4px; background: var(--bg-card); color: #1d4ed8; font-size: 11px; cursor: pointer; }
.am-drilldown-clear:hover { background: #dbeafe; }
.am-table-title-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border); border-bottom: none; border-radius: 12px 12px 0 0; }
.am-table-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.am-table-title svg { color: #3f76ff; }
.am-table-subtitle { font-size: 13px; color: var(--text-muted); font-weight: 400; margin-left: auto; }

/* Scroll loading indicator */
.am-scroll-loading { text-align: center; padding: 16px; font-size: 13px; color: var(--text-muted); display: flex; align-items: center; justify-content: center; gap: 8px; }
.am-scroll-end { text-align: center; padding: 10px; font-size: 12px; color: #B0B0B0; }

/* Platform-split tables */
.am-platform-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; line-height: 1.6; }
.am-platform-badge--google { background: #e8f0fe; color: #1a73e8; }
.am-platform-badge--meta   { background: #e7f0fd; color: #1877f2; }
.am-platform-badge--dv360  { background: #e3f0ff; color: #1a56db; }

/* Keyword match type badges */
.am-match-badge { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: capitalize; letter-spacing: .02em; }
.am-match-exact  { background: #e8f5e9; color: #2e7d32; }
.am-match-phrase { background: #fff8e1; color: #f57f17; }
.am-match-broad  { background: #f3e5f5; color: #7b1fa2; }

/* Quality score badges */
.am-qs-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.am-qs-good { background: #e8f5e9; color: #2e7d32; }
.am-qs-ok   { background: #fff8e1; color: #f57f17; }
.am-qs-bad  { background: #ffebee; color: #c62828; }
.dark .am-platform-badge--google { background: #1a2e5a; color: #8ab4f8; }
.dark .am-platform-badge--meta   { background: #1a2e4a; color: #7fa8f5; }
.dark .am-platform-badge--dv360  { background: #1a2e5a; color: #7fa8f5; }
.am-platform-section { margin-bottom: 20px; }
.am-platform-section-hdr { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--bg-card); border: 1px solid var(--border); border-bottom: none; border-radius: 10px 10px 0 0; }
.am-platform-section-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.am-platform-section-count { font-size: 12px; color: var(--text-muted); font-weight: 400; margin-left: auto; }
.am-platform-section-hdr + .am-platform-wrap { border-top-left-radius: 0; border-top-right-radius: 0; }
.am-platform-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.am-platform-empty { padding: 24px; text-align: center; font-size: 13px; color: var(--text-muted); border: 1px solid var(--border); border-top: none; border-radius: 0 0 10px 10px; background: var(--bg-hover); }

/* Keyword match type badges */
.am-match-badge { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; text-transform: capitalize; }
.am-match-exact  { background: #dbeafe; color: #1d4ed8; }
.am-match-phrase { background: #fef3c7; color: #92400e; }
.am-match-broad  { background: var(--bg-hover); color: var(--text-secondary); }
.dark .am-match-exact  { background: #1e3a5f; color: #93c5fd; }
.dark .am-match-phrase { background: #3b2a00; color: #fcd34d; }
.dark .am-match-broad  { background: #374151; color: #d1d5db; }

/* Quality score badges */
.am-qs-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.am-qs-good { background: #dcfce7; color: #15803d; }
.am-qs-ok   { background: #fef9c3; color: #854d0e; }
.am-qs-bad  { background: #fee2e2; color: #b91c1c; }
.dark .am-qs-good { background: #14532d; color: #86efac; }
.dark .am-qs-ok   { background: #3b2a00; color: #fde68a; }
.dark .am-qs-bad  { background: #450a0a; color: #fca5a5; }

/* Keyword match type badges */
.am-match-badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.am-match-exact  { background: #dbeafe; color: #1d4ed8; }
.am-match-phrase { background: #fef9c3; color: #854d0e; }
.am-match-broad  { background: var(--bg-hover); color: #6b7280; }
.dark .am-match-exact  { background: #1e3a5f; color: #93c5fd; }
.dark .am-match-phrase { background: #3b2f00; color: #fcd34d; }
.dark .am-match-broad  { background: #374151; color: #9ca3af; }

/* Keyword quality score badges */
.am-qs-badge { display: inline-flex; align-items: baseline; gap: 1px; padding: 2px 8px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.am-qs-good { background: #dcfce7; color: #166534; }
.am-qs-ok   { background: #fef9c3; color: #854d0e; }
.am-qs-bad  { background: #fee2e2; color: #991b1b; }
.dark .am-qs-good { background: #14532d; color: #86efac; }
.dark .am-qs-ok   { background: #422006; color: #fcd34d; }
.dark .am-qs-bad  { background: #450a0a; color: #fca5a5; }

/* Board header (Lead Forms / Instagram boards) */
.acc-board { margin-bottom: 24px; }
.acc-board-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px 12px 0 0; border-bottom: none; }
.acc-board-title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.acc-board-title svg { color: #6b7280; flex-shrink: 0; }
.acc-board-count { font-size: 12px; font-weight: 400; color: var(--text-muted); margin-left: 2px; }
.acc-add-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: all .15s; white-space: nowrap; }
.acc-add-btn:hover { border-color: var(--text-primary); color: var(--text-primary); background: #f5f3ff; }
.acc-add-btn:active { background: #ede9fe; }
.acc-add-btn svg { flex-shrink: 0; }

/* Base table styles — shadcn-inspired */
.acc-table-wrap { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); overflow: auto; display: block; }
.am-table-title-bar + .acc-table-wrap { border-top-left-radius: 0; border-top-right-radius: 0; }
.acc-board .acc-table-wrap { border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; }
.acc-table-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
.acc-table-wrap::-webkit-scrollbar-track { background: transparent; }
.acc-table-wrap::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.acc-table-wrap::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
.acc-table-wrap::-webkit-scrollbar-corner { background: transparent; }
.acc-table { width: max-content; min-width: 100%; border-collapse: collapse; }
.acc-table th { font-size: 13px; font-weight: 500; color: #6b7280; padding: 12px 16px; background: transparent; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); letter-spacing: 0; }
.acc-table td { font-size: 14px; color: var(--text-primary); padding: 12px 16px; border-bottom: 1px solid #f3f4f6; white-space: nowrap; }
.acc-table tbody tr { transition: background .15s; }
.acc-table tbody tr:hover { background: var(--bg-hover); }

/* Active section left accent */
.am-table-wrap-active { border-left: none; }

/* Column visibility toggle */
.tbl-col-toggle { position: relative; display: inline-block; }
.tbl-col-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; }
.tbl-col-btn:hover { background: var(--bg-hover); border-color: #d1d5db; }
.tbl-col-btn svg { color: #6b7280; }
.tbl-col-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 4px); background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.04); padding: 6px; min-width: 200px; max-height: 320px; overflow-y: auto; z-index: 100; }
.tbl-col-dropdown.open { display: block; }
.tbl-col-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; transition: background .1s; user-select: none; }
.tbl-col-item:hover { background: var(--bg-hover); }
.tbl-col-item input[type=checkbox] { accent-color: #3f76ff; width: 15px; height: 15px; cursor: pointer; }

/* Loading states */
.am-loading-full { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 60px 20px; font-size: 14px; color: var(--text-muted); }
.am-insights-bar-wrap { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; font-size: 12px; color: var(--text-muted); }
.am-insights-progress { flex: 1; height: 4px; background: #e5e7eb; border-radius: 2px; overflow: hidden; max-width: 200px; }
.am-insights-bar-fill { height: 100%; background: #3f76ff; border-radius: 2px; transition: width .3s; }
@keyframes am-bar-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ========== AI CHAT ========== */
.ai-chat-wrap { display: flex; flex-direction: column; height: calc(100vh - 80px); max-width: none; margin: 0; }
/* AI Chat split: history sub-menu on the left, chat on the right */
.ai-split { display: flex; gap: 14px; height: calc(100vh - 80px); max-width: none; margin: 0; }
.ai-hist-toggle, .ai-hist-close { display: none; }
.ai-hist-panel { width: 212px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 10px; box-shadow: 0 2px 4px rgba(0,0,0,.04); overflow: hidden; }
.ai-hist-new { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 8px 10px; background: #3f76ff; color: #fff; border: none; border-radius: 8px; font-size: .8rem; font-weight: 600; cursor: pointer; }
.ai-hist-new:hover { background: #2f5fe0; }
.ai-hist-label { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); padding: 12px 4px 6px; }
.ai-hist-list { flex: 1; overflow-y: auto; min-height: 0; }
.ai-hist-item { display: flex; align-items: center; gap: 4px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.ai-hist-item:hover { background: var(--bg-hover); }
.ai-hist-item.active { background: #EBF5FF; }
html.dark .ai-hist-item.active { background: rgba(63, 118, 255, .22); }
.ai-hist-title { font-size: .76rem; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-hist-ts { font-size: .66rem; color: var(--text-muted); margin-top: 1px; }
.ai-hist-del { background: none; border: none; color: #c3c7cf; cursor: pointer; font-size: 11px; padding: 2px 4px; border-radius: 4px; visibility: hidden; flex-shrink: 0; }
.ai-hist-item:hover .ai-hist-del { visibility: visible; }
.ai-hist-del:hover { color: #ef4444; background: #fef2f2; }
.ai-chat-header { display: flex; align-items: center; gap: 12px; padding: 18px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; box-shadow: 0 2px 4px rgba(0,0,0,.04); }
.ai-chat-header-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: #EBF5FF; border-radius: 10px; flex-shrink: 0; }
.ai-chat-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.ai-chat-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ai-chat-clear { margin-left: auto; background: none; border: 1px solid var(--border); border-radius: 8px; padding: 7px 8px; cursor: pointer; color: var(--text-muted); transition: all .15s; display: flex; align-items: center; }
.ai-chat-clear:hover { border-color: #ef4444; color: #ef4444; background: #fef2f2; }

.ai-chat-context-bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ai-ctx-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.ai-ctx-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; }
.ai-ctx-chip svg { color: #3f76ff; }
.ai-ctx-empty { color: var(--text-muted); font-weight: 400; font-style: italic; border-style: dashed; }
.ai-ctx-loading { color: #6b7280; background: var(--bg-hover); border-color: #d1d5db; animation: aiCtxPulse 1.5s ease-in-out infinite; }
@keyframes aiCtxPulse { 0%,100%{opacity:1} 50%{opacity:.6} }

.ai-chat-messages { flex: 1; overflow-y: auto; padding: 16px 4px; display: flex; flex-direction: column; gap: 12px; }
.ai-chat-messages::-webkit-scrollbar { width: 5px; }
.ai-chat-messages::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }

.ai-welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 50px 20px; gap: 10px; flex: 1; }
.ai-welcome-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: #EBF5FF; border-radius: 50%; margin-bottom: 6px; }
.ai-welcome h3 { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 0; }
.ai-welcome p { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; }
.ai-suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 500px; }
.ai-suggestion { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 8px 16px; font-size: 12.5px; color: var(--text-primary); cursor: pointer; transition: all .15s; font-family: inherit; }
.ai-suggestion:hover { border-color: #3f76ff; color: #3f76ff; background: #EBF5FF; }

.ai-msg { display: flex; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-assistant { justify-content: flex-start; }
.ai-msg-bubble { max-width: 80%; border-radius: 14px; padding: 12px 16px; font-size: 13.5px; line-height: 1.6; word-break: break-word; }
.ai-msg-user-bubble { background: #3f76ff; color: #fff; border-bottom-right-radius: 4px; }
.ai-msg-ai-bubble { background: var(--bg-card); border: 1px solid var(--border); border-bottom-left-radius: 4px; display: flex; gap: 10px; align-items: flex-start; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.ai-msg-ai-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: #EBF5FF; border-radius: 50%; flex-shrink: 0; margin-top: 2px; }
.ai-msg-content { color: var(--text-primary); flex: 1; }
.ai-msg-content h2, .ai-msg-content h3, .ai-msg-content h4 { margin: 8px 0 4px; color: var(--text-primary); }
.ai-msg-content h2 { font-size: 16px; }
.ai-msg-content h3 { font-size: 14px; }
.ai-msg-content h4 { font-size: 13px; }
.ai-msg-content code { background: #F0F4F8; padding: 1px 5px; border-radius: 4px; font-size: 12px; color: #e11d48; }
.ai-msg-content ul { margin: 4px 0; padding-left: 18px; }
.ai-msg-content li { margin-bottom: 2px; }
.ai-msg-content strong { color: #1e293b; }

.ai-chat-input-wrap { display: flex; align-items: flex-end; gap: 8px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; margin-top: 12px; box-shadow: 0 -2px 8px rgba(0,0,0,.03); }
.ai-chat-attach { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; background: none; border: 1px solid var(--border); border-radius: 9px; color: #6b7280; cursor: pointer; transition: .15s; }
.ai-chat-attach:hover { border-color: #3f76ff; color: #3f76ff; background: #f0f5ff; }
.ai-attach-chips:empty { display: none; }
.ai-attach-chips { padding: 0 4px; }
.ai-chat-wrap.ai-drop-hot .ai-chat-input-wrap { border-color: #3f76ff; box-shadow: 0 0 0 3px rgba(63,118,255,.15); }
.ai-msg-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ai-msg-att { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); border-radius: 7px; padding: 2px 8px; font-size: .7rem; }
.ai-msg-att img { width: 20px; height: 20px; object-fit: cover; border-radius: 4px; }
.ai-chat-input { flex: 1; border: none; outline: none; font-size: 14px; font-family: inherit; resize: none; max-height: 120px; color: var(--text-primary); line-height: 1.5; background: transparent; }
.ai-chat-input::placeholder { color: #b0b0b0; }
.ai-chat-send { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: #3f76ff; color: #fff; border: none; border-radius: 10px; cursor: pointer; transition: all .15s; flex-shrink: 0; }
.ai-chat-send:hover { background: #2f5fd9; }
.ai-chat-send:disabled { opacity: .5; cursor: not-allowed; }

.ai-chart-wrap { margin: 10px 0 4px; border-radius: 10px; overflow: hidden; border: 1px solid #e8eaed; display: block; max-width: 100%; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.ai-chart-wrap svg { display: block; width: 100%; max-width: 460px; height: auto; }
.ai-chart-err { padding: 10px 14px; background: #fff8f8; border: 1px solid #ffd0d0; border-radius: 8px; color: #e57373; font-size: 12px; margin: 6px 0; }
.ai-msg-ai-bubble { max-width: 100%; }
.ai-msg-content h2,.ai-msg-content h3,.ai-msg-content h4 { margin: 8px 0 4px; font-weight: 600; }
.ai-msg-content ul { margin: 4px 0 4px 16px; padding: 0; }
.ai-msg-content li { margin: 2px 0; }
.ai-dots { display: flex; gap: 4px; padding: 4px 0; }
.ai-dots span { width: 7px; height: 7px; background: #3f76ff; border-radius: 50%; opacity: .4; animation: aiDot 1.4s infinite ease-in-out; }
.ai-dots span:nth-child(2) { animation-delay: .2s; }
.ai-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes aiDot { 0%, 80%, 100% { opacity: .4; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

/* ── AI Chat — Create Campaign button ─────────────────────────────────────── */
.ai-chat-create-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; margin-right: 6px;
  padding: 7px 14px; border-radius: 8px; border: none; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #1877f2 0%, #0d5ec9 100%);
  box-shadow: 0 2px 6px rgba(24,119,242,.3);
  transition: all .15s;
}
.ai-chat-create-btn:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(24,119,242,.35); }
.ai-chat-create-btn svg { flex-shrink: 0; }

.ai-suggestion--create {
  background: linear-gradient(135deg, #1877f2 0%, #0d5ec9 100%) !important;
  color: #fff !important; border-color: transparent !important;
  font-weight: 700 !important;
  display: inline-flex; align-items: center; gap: 6px;
}
.ai-suggestion--create:hover { opacity: .88; }

/* ══════════════════════════════════════════════════════════════════════════════
   Campaign Wizard — Cards embedded in AI Chat
══════════════════════════════════════════════════════════════════════════════ */
.cw-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px; margin: 2px 0; max-width: 620px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: opacity .2s;
}
.cw-card--frozen { opacity: .65; pointer-events: none; }
.cw-card--warn  { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.cw-card--error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.cw-card--success {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #86efac; text-align: center;
}

.cw-card-title {
  font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 6px;
}
.cw-card-desc {
  font-size: 13px; color: #64748b; margin-bottom: 14px; line-height: 1.5;
}
.cw-hint {
  font-size: 12px; color: #94a3b8; margin: 6px 0 14px;
}

/* Objective grid */
.cw-obj-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 4px;
}
.cw-obj-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--bg-hover); border: 1.5px solid #e2e8f0;
  border-radius: 10px; cursor: pointer; text-align: left;
  transition: all .15s;
}
.cw-obj-btn:hover  { border-color: #1877f2; background: #eff6ff; }
.cw-obj-btn:disabled { opacity: .5; cursor: not-allowed; }
.cw-obj-icon { font-size: 22px; flex-shrink: 0; }
.cw-obj-text { display: flex; flex-direction: column; }
.cw-obj-label { font-size: 13px; font-weight: 700; color: #1e293b; }
.cw-obj-desc  { font-size: 11px; color: #64748b; line-height: 1.3; margin-top: 2px; }

/* Form fields */
.cw-field-group { margin-bottom: 12px; }
.cw-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-secondary); margin-bottom: 5px;
}
.cw-optional { font-weight: 400; color: #94a3b8; }
.cw-input, .cw-textarea, .cw-select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-hover); color: var(--text-primary); font-size: 13px; font-family: inherit;
  outline: none; transition: border-color .15s; box-sizing: border-box;
}
.cw-input:focus, .cw-textarea:focus, .cw-select:focus {
  border-color: #1877f2; box-shadow: 0 0 0 3px rgba(24,119,242,.1);
  background: var(--bg-card);
}
.cw-input-sm { padding: 7px 10px; font-size: 12px; }
.cw-textarea { resize: vertical; line-height: 1.5; }
.cw-input-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cw-input-row .cw-input { flex: 1; }
.cw-input-suffix { font-size: 12px; color: #64748b; white-space: nowrap; }

/* Radio group */
.cw-radio-group { display: flex; flex-direction: column; gap: 8px; }
.cw-radio { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: #334155; }
.cw-radio input { accent-color: #1877f2; width: 15px; height: 15px; cursor: pointer; }
.cw-radio span { line-height: 1.4; }

/* Buttons */
.cw-btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px; background: #1877f2; color: #fff;
  border: none; border-radius: 8px; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .15s; margin-top: 8px;
}
.cw-btn-primary:hover    { background: #0d5ec9; transform: translateY(-1px); }
.cw-btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.cw-btn-primary.cw-btn-publish { background: linear-gradient(135deg, #1877f2 0%, #0d5ec9 100%); box-shadow: 0 2px 8px rgba(24,119,242,.3); }

.cw-btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; background: transparent; color: var(--text-secondary);
  border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s; margin-top: 8px;
}
.cw-btn-secondary:hover { border-color: #cbd5e1; background: var(--bg-hover); }

.cw-btn-ai {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
  color: #fff; border: none; border-radius: 7px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.cw-btn-ai:hover    { opacity: .9; transform: translateY(-1px); }
.cw-btn-ai:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Ad set section in audience setup */
.cw-adset-section { margin-bottom: 18px; padding: 14px; background: var(--bg-hover); border-radius: 10px; border: 1px solid #e8edf3; }
.cw-adset-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: #1e293b; margin-bottom: 4px;
}
.cw-adset-section-desc { font-size: 12px; color: #64748b; margin-bottom: 10px; line-height: 1.4; }
.cw-adset-row { background: var(--bg-card); border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
.cw-adset-row-header { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.cw-adset-row-title  { font-size: 12.5px; font-weight: 600; color: #334155; }
.cw-adset-row-desc   { font-size: 11.5px; color: #64748b; margin-bottom: 8px; }

/* Badges */
.cw-badge {
  display: inline-flex; align-items: center; padding: 3px 9px;
  border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .3px;
  white-space: nowrap;
}
.cw-badge-sm { padding: 2px 7px; font-size: 10px; }
.cw-badge-purple { background: #f3e8ff; color: #6d28d9; }
.cw-badge-blue   { background: #dbeafe; color: #1d4ed8; }
.cw-badge-green  { background: #dcfce7; color: #15803d; }
.cw-badge-orange { background: #ffedd5; color: #c2410c; }

/* Creative assets grid */
.cw-assets-label {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px;
}
.cw-assets-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.cw-asset-slot { display: flex; flex-direction: column; gap: 6px; }
.cw-asset-thumb {
  width: 100%; aspect-ratio: 1; background: var(--bg-hover);
  border: 2px dashed #cbd5e1; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; font-size: 11px; color: #94a3b8; overflow: hidden;
  transition: border-color .15s;
}
.cw-asset-thumb--video { aspect-ratio: 16/9; }
.cw-asset-btn {
  padding: 5px 8px; background: var(--bg-hover); border: 1px solid #e2e8f0;
  border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; transition: all .15s; text-align: center;
}
.cw-asset-btn:hover    { background: #eff6ff; border-color: #1877f2; color: #1877f2; }
.cw-asset-btn:disabled { opacity: .5; cursor: not-allowed; }
.cw-asset-status { font-size: 11px; min-height: 16px; text-align: center; }
.cw-st-loading { color: #94a3b8; }
.cw-st-done    { color: #22c55e; font-weight: 700; }
.cw-st-error   { color: #ef4444; }

/* Ad copy */
.cw-copy-ai-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cw-copy-row    { display: flex; gap: 12px; }
.cw-copy-suggestions {
  background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 10px;
  padding: 12px; margin-bottom: 14px;
}
.cw-copy-sug-label { font-size: 11.5px; font-weight: 700; color: #7c3aed; margin-bottom: 8px; }
.cw-copy-sug-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; background: var(--bg-card); border: 1.5px solid #e9d5ff;
  border-radius: 8px; cursor: pointer; margin-bottom: 6px; transition: all .15s;
}
.cw-copy-sug-item:hover           { border-color: #7c3aed; background: #faf5ff; }
.cw-copy-sug-item--active          { border-color: #7c3aed; background: #f3e8ff; }
.cw-copy-sug-item strong           { font-size: 13px; font-weight: 700; color: #1e293b; }
.cw-copy-sug-item > span           { font-size: 12px; color: var(--text-secondary); }
.cw-copy-sug-cta {
  font-size: 10.5px; font-weight: 700; color: #7c3aed;
  background: #ede9fe; border-radius: 4px; padding: 1px 6px; align-self: flex-start;
}

/* Review step */
.cw-review-section { margin-bottom: 16px; }
.cw-review-section-title {
  font-size: 11px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px;
  padding-bottom: 5px; border-bottom: 1px solid #f1f5f9;
}
.cw-review-row {
  display: flex; align-items: baseline; gap: 8px; padding: 5px 0;
  border-bottom: 1px solid #f8fafc; font-size: 13px;
}
.cw-review-label { min-width: 110px; color: #64748b; font-weight: 600; font-size: 12px; flex-shrink: 0; }
.cw-review-value { color: #1e293b; flex: 1; word-break: break-word; }
.cw-review-notice {
  display: flex; align-items: flex-start; gap: 8px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
  padding: 10px 14px; font-size: 12.5px; color: #78350f;
  margin: 12px 0 16px;
}
.cw-review-actions {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}

/* Success state */
.cw-success-check { margin: 0 auto 12px; display: flex; justify-content: center; }
.cw-success-title { font-size: 20px; font-weight: 800; color: #15803d; margin-bottom: 4px; }
.cw-success-sub   { font-size: 13px; color: #64748b; margin-bottom: 16px; }
.cw-success-stats { display: flex; justify-content: center; gap: 24px; }
.cw-stat-box      { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cw-stat-num      { font-size: 28px; font-weight: 800; color: #15803d; line-height: 1; }
.cw-stat-lbl      { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .4px; }

/* Spinner */
.cw-spinner-sm {
  display: inline-block; width: 13px; height: 13px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: cwSpin .6s linear infinite;
  vertical-align: middle;
}
@keyframes cwSpin { to { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 540px) {
  .cw-obj-grid { grid-template-columns: 1fr; }
  .cw-assets-grid { grid-template-columns: repeat(2, 1fr); }
  .cw-copy-row { flex-direction: column; }
  .cw-review-label { min-width: 80px; }
  .cw-review-actions { justify-content: stretch; flex-direction: column; }
  .cw-btn-primary, .cw-btn-secondary { width: 100%; justify-content: center; }
}

/* ---------- User Management ---------- */
.um-wrap { padding: 24px 16px; }
.um-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.um-title { font-size: 22px; font-weight: 700; color: var(--text-primary, #1e293b); margin: 0 0 4px; }
.um-subtitle { font-size: 13px; color: var(--text-secondary, #64748b); margin: 0; }
.um-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; background: #1a1a1a; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; }
.um-add-btn:hover { background: #333; }

.um-loading { display: flex; align-items: center; gap: 10px; padding: 48px 0; justify-content: center; color: var(--text-secondary, #64748b); font-size: 14px; }
.um-empty { text-align: center; padding: 48px 0; color: var(--text-secondary, #64748b); font-size: 14px; }

.um-table-wrap { border: 1px solid var(--border, #e2e8f0); border-radius: 10px; overflow: hidden; background: var(--bg-card, #fff); }
.um-table { width: 100%; border-collapse: collapse; }
.um-table thead { background: var(--bg-hover, #f8fafc); }
.um-table th { text-align: left; padding: 11px 16px; font-size: 12px; font-weight: 600; color: var(--text-secondary, #64748b); text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--border, #e2e8f0); }
.um-table td { padding: 14px 16px; border-bottom: 1px solid var(--border, #f1f5f9); font-size: 13px; color: var(--text-primary, #334155); vertical-align: middle; }
.um-table tbody tr:last-child td { border-bottom: none; }
.um-table tbody tr:hover { background: var(--bg-hover, #f8fafc); }

.um-user-cell { display: flex; align-items: center; gap: 10px; }
.um-avatar { width: 34px; height: 34px; border-radius: 50%; background: #1a1a1a; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.um-user-name { font-weight: 600; font-size: 13px; color: var(--text-primary, #1e293b); }
.um-user-email { font-size: 12px; color: var(--text-secondary, #94a3b8); }

.um-role-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.um-role-sa { background: #fef3c7; color: #92400e; }
.um-role-user { background: #e0e7ff; color: #3730a3; }

/* Uniform Client-Account rows: chip stacks cap at ~3 chip lines and scroll
   internally instead of stretching one row to 3× the height of the next. */
.um-accts-cell { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; max-height: 84px; overflow-y: auto; scrollbar-width: thin; }
.um-table td { vertical-align: top; }
.um-badge { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; background: var(--bg-hover, #f1f5f9); color: var(--text-primary, #475569); border: 1px solid var(--border, #e2e8f0); }
.um-badge-all { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.um-badge-none { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

.um-actions { display: flex; gap: 6px; }
.um-action-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border, #e2e8f0); background: var(--bg-card, #fff); border-radius: 6px; cursor: pointer; color: var(--text-secondary, #64748b); transition: all .15s; }
.um-action-btn:hover { background: var(--bg-hover, #f1f5f9); color: var(--text-primary, #334155); }
.um-action-del:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

/* User modal */
.um-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.45); z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.um-modal-overlay.hidden { display: none; }
.um-modal { background: var(--bg-card, #fff); border-radius: 14px; width: 100%; max-width: 520px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.um-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px 16px; border-bottom: 1px solid var(--border, #e2e8f0); }
.um-modal-header h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text-primary, #1e293b); }
.um-modal-close { background: none; border: none; font-size: 22px; color: var(--text-secondary, #94a3b8); cursor: pointer; padding: 0 4px; line-height: 1; }
.um-modal-close:hover { color: var(--text-primary, #334155); }
.um-modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.um-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border, #e2e8f0); }

.um-field { margin-bottom: 16px; }
.um-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary, #64748b); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .03em; }
.um-field input[type="email"],
.um-field input[type="text"],
.um-field input[type="password"] { width: 100%; padding: 9px 12px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; font-size: 13px; font-family: inherit; background: var(--bg-card, #fff); color: var(--text-primary, #334155); transition: border-color .15s; box-sizing: border-box; }
.um-field input:focus { outline: none; border-color: var(--text-primary); box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.um-field input:disabled { background: var(--bg-hover, #f8fafc); color: var(--text-secondary, #94a3b8); cursor: not-allowed; }
.um-field-hint { font-size: 11px; color: var(--text-secondary, #94a3b8); margin-top: 4px; }

.um-acct-picker { max-height: 220px; overflow-y: auto; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; padding: 4px; }
.um-acct-option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; transition: background .1s; }
.um-acct-option:hover { background: var(--bg-hover, #f8fafc); }
.um-acct-chk { width: 16px; height: 16px; cursor: pointer; accent-color: var(--text-primary); flex-shrink: 0; }
.um-acct-label { font-size: 13px; color: var(--text-primary, #334155); }
.um-acct-id { font-size: 11px; color: var(--text-secondary, #94a3b8); }
.um-acct-empty { padding: 16px; text-align: center; font-size: 12px; color: var(--text-secondary, #94a3b8); }
.um-picker-section-hd { display: flex; align-items: center; gap: 5px; padding: 8px 8px 4px; font-size: .68rem; font-weight: 700; color: var(--text-secondary, #64748b); text-transform: uppercase; letter-spacing: .05em; border-top: 1px solid var(--border, #e2e8f0); margin-top: 4px; }
.um-picker-section-hd:first-child { border-top: none; margin-top: 0; }
.um-gads-chk  { width: 16px; height: 16px; cursor: pointer; accent-color: #2e7d32; flex-shrink: 0; }
.um-dv360-chk { width: 16px; height: 16px; cursor: pointer; accent-color: #3949ab; flex-shrink: 0; }
.um-page-chk  { width: 16px; height: 16px; cursor: pointer; accent-color: #1877F2; flex-shrink: 0; }

.um-error { padding: 8px 12px; background: #fef2f2; color: #dc2626; border-radius: 6px; font-size: 12px; border: 1px solid #fecaca; margin-top: 8px; }
.um-error.hidden { display: none; }

.um-save-btn { padding: 9px 20px; background: #1a1a1a; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; }
.um-save-btn:hover { background: #333; }
.um-save-btn:disabled { opacity: .6; cursor: not-allowed; }


/* ========== MOBILE SIDEBAR OVERLAY ========== */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 99; }
.sidebar-overlay.open { display: block; }

/* ========== RESPONSIVE — 900px ========== */
@media (max-width: 900px) {
  .lf-crm-stats { grid-template-columns: repeat(2, 1fr); }
  .lf-charts-row { grid-template-columns: 1fr; }
  .lf-side-panel { width: 100%; right: -100%; }
  .am-toolbar { flex-direction: column; align-items: stretch; }
  .am-toolbar-right { flex-wrap: wrap; }
  .am-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .am-tabs::-webkit-scrollbar { display: none; }
  .um-table th:nth-child(4), .um-table td:nth-child(4) { display: none; }
  .am-opt-modal { width: 96vw; }
}

/* ========== RESPONSIVE — 768px ========== */
@media (max-width: 768px) {
  /* Sidebar */
  .sidebar { transform: translateX(-100%); z-index: 200; }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.18); }
  /* `.sidebar.collapsed ~ .main-content` (0,3,0) outranks a bare .main-content
     here, so a desktop collapse — persisted in pc_sidebarCollapsed — left a
     60px dead margin on every phone screen while the rail itself is
     translated off-canvas. Match the specificity to neutralise it. */
  .main-content,
  .sidebar.collapsed ~ .main-content { margin-left: 0; width: 100vw; max-width: 100vw; }
  .menu-toggle { display: flex; }

  /* Top bar */
  .top-bar { padding: 0 12px; gap: 8px; }
  .page-title { font-size: .88rem; }
  .global-ctx { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; min-width: 0; }
  .global-ctx::-webkit-scrollbar { display: none; }
  .global-ctx-switch-btn { white-space: nowrap; font-size: 12px; padding: 4px 8px; max-width: 160px; }
  .global-ctx-select { min-width: 120px; max-width: 200px; font-size: 12px; }
  .global-ctx-label { display: none; }
  .top-actions { gap: 4px; }

  /* Section padding */
  .section { padding: 12px 10px; }

  /* Hero */
  .hero { margin-bottom: 20px; }
  .hero-title { font-size: 1.4rem; }
  .hero-subtitle { font-size: .85rem; }

  /* Login */
  .login-card { width: calc(100vw - 32px); padding: 28px 20px; }

  /* Leads stats */
  .lf-crm-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .lf-stat-value { font-size: 1.3rem; }
  .lf-charts-row { grid-template-columns: 1fr; }

  /* Leads view bar */
  .lf-view-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .lf-view-bar-right { flex-wrap: wrap; gap: 6px; }

  /* Leads table wrapper — horizontal scroll */
  .acc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lf-leads-table { min-width: 700px; }

  /* Side panel full-width */
  .lf-side-panel { width: 100%; right: -100%; }
  .lf-side-panel.open { right: 0; }

  /* Ads Manager section */
  /* Leads shares this frame: on a phone both rails are width:100%, so the
     section's side padding IS what makes them 367px vs 355px. Same padding
     -> same rail width (and 12px more board for the Leads table). */
  #sectionAdsmanager, #sectionLeads { padding: 6px 4px; }
  #sectionAdsmanager { height: auto; flex-direction: column; }
  .am-platform-wrap { max-height: 70vh; }
  .am-title-row { flex-wrap: wrap; gap: 10px; }
  .am-title-left { flex-wrap: wrap; }
  .am-page-title { font-size: 18px; }
  .am-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .am-toolbar-right { flex-wrap: wrap; gap: 6px; }
  .am-account-select { width: 100%; min-width: unset; }
  .am-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 1px; }
  .am-tabs::-webkit-scrollbar { display: none; }
  .am-tab { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
  .am-summary-bar { gap: 5px; }
  .am-sum-chip { font-size: 11px; padding: 3px 8px; }
  .am-search { width: 100px; }
  .am-date-select { font-size: 12px; }

  /* Ads Manager table — horizontal scroll */
  .acc-table-wrap { overflow-x: auto; }
  .am-table { min-width: 800px; }

  /* Optimization panel — full-width sheet on mobile */
  .am-opt-overlay { padding: 0; align-items: stretch; }
  .am-opt-modal { width: 100vw; max-width: 100vw; border-radius: 0; height: 100vh; max-height: 100vh; border-left: none; }
  .am-opt-body { max-height: 75vh; padding: 14px 14px; }
  .am-opt-header { padding: 16px 16px; }
  .am-opt-header-icon { width: 36px; height: 36px; border-radius: 9px; }
  .am-opt-vr-rule { flex-wrap: wrap; gap: 6px; }
  .am-opt-bar-label { width: 70px; font-size: 11px; }
  .am-opt-bd-table { overflow-x: auto; }
  .am-opt-summary { gap: 6px; }
  .am-opt-summary-chip { padding: 6px 10px; font-size: 12px; }
  .am-opt-bd-table table { min-width: 500px; }
  .am-opt-apply-row { flex-wrap: wrap; }
  .am-opt-apply-btn { font-size: 12px; padding: 7px 12px; }

  /* AI Chat */
  .ai-chat-wrap { height: calc(100vh - 70px); }
  .ai-split { height: calc(100vh - 70px); position: relative; }
  /* The 212px history rail can't sit beside the chat here, but hiding it
     outright made every saved conversation unreachable on a phone. Off-canvas
     overlay instead, opened from the ☰ button. */
  .ai-hist-panel { display: none; }
  .ai-split.hist-open .ai-hist-panel {
    display: flex; position: absolute; inset: 0 auto 0 0; z-index: 30;
    width: min(280px, 86vw); box-shadow: 0 8px 40px rgba(0,0,0,.35);
  }
  .ai-hist-toggle {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 0; inset-inline-start: 0; z-index: 20;
    width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 9px;
    background: var(--bg-card); color: var(--text-secondary); cursor: pointer;
  }
  .ai-split.hist-open .ai-hist-toggle { display: none; }
  .ai-hist-close {
    display: block; align-self: flex-end; background: none; border: none;
    color: var(--text-muted); font-size: 15px; cursor: pointer; padding: 2px 6px 6px;
  }
  /* The ☰ sits over the first line of the context bar — nudge the chat down. */
  .ai-split .ai-chat-wrap { padding-top: 38px; }
  /* An 80/90% cap plus the 28px avatar left change cards ~210px wide and charts
     at 0.52 scale (5px axis labels). Give AI answers the full pane. */
  /* width:100%, not just a cap — the bubble is shrink-to-fit, so a chart box
     with max-width:100% and a card of unknown width settled at 264px and left
     a quarter of the screen empty. */
  /* Two-class selector on purpose: `.ai-msg-bubble{max-width:90%}` further down
     this same block is equal specificity and would win on order alone —
     that 90% is what pinned answers to 312px. */
  .ai-msg-assistant .ai-msg-ai-bubble { max-width: 100%; width: 100%; box-sizing: border-box; padding: 10px; gap: 6px; }
  .ai-msg-assistant { width: 100%; }
  .ai-msg-ai-icon { width: 20px; height: 20px; }
  .ai-msg-ai-icon svg { width: 12px; height: 12px; }
  /* Charts keep a legible floor and scroll inside their own box instead of
     shrinking the type into illegibility. min-width:0 on the flex item is what
     makes the box scroll — without it the min-width pushes the bubble wider and
     main-content's overflow:hidden just clips the right half of the chart. */
  .ai-msg-content { min-width: 0; }
  .ai-chart-wrap { overflow-x: auto; max-width: 100%; }
  .ai-chart-wrap svg { min-width: 400px; }
  /* Thumb-sized controls (34/38px were under the 44px guidance). */
  .ai-chat-attach { width: 40px; height: 40px; }
  .ai-chat-send { width: 44px; height: 44px; }
  .ai-chat-header { padding: 12px 14px; }
  .ai-chat-input-wrap { padding: 10px 12px; }
  .ai-suggestions { flex-direction: column; align-items: stretch; max-width: 100%; }
  .ai-suggestion { text-align: left; }
  .ai-msg-bubble { max-width: 90%; font-size: 13px; }

  /* Account picker */
  .acct-picker-modal { padding: 20px 16px; width: calc(100vw - 24px); }
  .acct-picker-connect-row { flex-wrap: wrap; gap: 6px; }

  /* User management */
  .um-wrap { padding: 16px 0; }
  .um-header { flex-direction: column; gap: 10px; }
  .um-table th:nth-child(3), .um-table td:nth-child(3) { display: none; }
  .um-table th:nth-child(4), .um-table td:nth-child(4) { display: none; }
  .um-modal-overlay { padding: 0; align-items: flex-end; }
  .um-modal { max-width: 100%; border-radius: 20px 20px 0 0; max-height: 90vh; }

  /* Column add modal */
  .lf-col-modal { width: calc(100vw - 40px); }

  /* Toast */
  .toast { bottom: 12px; right: 12px; left: 12px; right: 12px; font-size: .8rem; }
}

/* ======================================================
   LANDING PAGES
====================================================== */

/* Source tabs (FB Leads / LP Leads toggle) */
.lf-source-tabs {
  display: flex;
  gap: 4px;
  padding: 0 0 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.lf-src-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.lf-src-tab:hover { background: var(--bg-card-hover); color: var(--text); }
.lf-src-tab.active { background: rgba(63,118,255,.1); color: #3f76ff; border-color: rgba(63,118,255,.25); font-weight: 600; }

/* LP section header */
.lp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}
.lp-title { font-size: 1.5rem; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.lp-subtitle { font-size: .875rem; color: var(--text-secondary); margin: 0; }

/* Buttons */
.lp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #3f76ff, #3b82f6);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
  white-space: nowrap;
}
.lp-btn-primary:hover { opacity: .9; transform: translateY(-1px); }

/* Loading */
.lp-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 60px 0;
  justify-content: center;
  color: var(--text-secondary);
  font-size: .9rem;
}
.lp-spinner, .lp-gen-spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: #3f76ff;
  border-radius: 50%;
  animation: lpSpin .7s linear infinite;
}
.lp-gen-spinner { width: 16px; height: 16px; }
@keyframes lpSpin { to { transform: rotate(360deg); } }

/* Empty state */
.lp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 24px;
  gap: 14px;
}
.lp-empty-icon { color: var(--text-muted); opacity: .5; }
.lp-empty h3 { font-size: 1.1rem; font-weight: 600; color: var(--text); margin: 0; }
.lp-empty p { font-size: .875rem; color: var(--text-secondary); max-width: 440px; margin: 0; line-height: 1.6; }

/* Page cards grid */
.lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.lp-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.lp-card:hover { border-color: rgba(63,118,255,.4); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }

/* Thumbnail */
.lp-card-thumb {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
  background: #e8edf3;
  cursor: pointer;
  flex-shrink: 0;
}
.lp-card-thumb-iframe {
  position: absolute;
  top: 0; left: 0;
  width: 1280px;
  height: 900px;
  transform: scale(0.234);
  transform-origin: top left;
  pointer-events: none;
  border: none;
}
.lp-card-thumb-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
}
.lp-card-thumb-badge {
  position: absolute;
  bottom: 8px; left: 8px; right: 8px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 3;
  pointer-events: none;
}

/* Card body */
.lp-card-body { padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 6px; }
.lp-card-top { display: flex; align-items: center; gap: 10px; }
.lp-card-icon {
  width: 38px; height: 38px;
  background: rgba(63,118,255,.1);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #3f76ff;
  flex-shrink: 0;
}
.lp-card-meta { flex: 1; min-width: 0; }
.lp-card-name { font-size: .9rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-card-date { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }
.lp-card-title-preview { font-size: .75rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; }
.lp-card-status {
  font-size: .7rem; font-weight: 600; padding: 3px 8px;
  border-radius: 20px; text-transform: capitalize;
  background: rgba(37,186,100,.12); color: #25BA64;
}
.lp-status-draft { background: rgba(107,114,128,.12); color: #6b7280; }
.lp-card-campaign {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; color: #3f76ff; font-weight: 500;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(63,118,255,.1); border: 1px solid rgba(63,118,255,.2);
  width: fit-content; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-card-stats { display: flex; gap: 16px; }
.lp-card-stat { display: flex; flex-direction: column; gap: 1px; }
.lp-stat-num { font-size: 1.2rem; font-weight: 700; color: var(--text); }
.lp-stat-label { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.lp-card-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 12px; }
.lp-card-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 6px;
  font-size: .75rem; font-weight: 500; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); transition: all var(--transition);
}
.lp-card-btn:hover { background: var(--bg-card-hover); color: var(--text); }
.lp-card-btn-preview:hover { border-color: #3f76ff; color: #3f76ff; background: rgba(63,118,255,.06); }
.lp-card-btn-copy:hover { border-color: #3f76ff; color: #3f76ff; background: rgba(63,118,255,.06); }
.lp-card-btn-edit:hover { border-color: #f59e0b; color: #f59e0b; background: rgba(245,158,11,.06); }
.lp-card-btn-delete { margin-left: auto; }
.lp-card-btn-delete:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.06); }

/* ── Builder Modal ── */
/* ════════════════════════════════════════
   STRUCTURE PICKER (Step 1)
   ════════════════════════════════════════ */
.main-content.lp-mode { overflow: hidden !important; height: 100vh; }

.lp-struct-picker {
  position: absolute; inset: 0; z-index: 201;
  background: #0d0f14;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.lp-struct-picker.hidden { display: none; }
.lp-struct-inner { width: 100%; max-width: 900px; position: relative; }
.lp-struct-close {
  position: absolute; top: -8px; right: -8px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%; color: rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s;
}
.lp-struct-close:hover { background: rgba(255,255,255,.16); color: #fff; }
.lp-struct-heading { text-align: center; margin-bottom: 36px; }
.lp-struct-badge {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 20px;
  background: rgba(63,118,255,.18); color: #7ea3ff;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 14px;
}
.lp-struct-title { margin: 0 0 10px; font-size: 1.75rem; font-weight: 700; color: #fff; }
.lp-struct-sub { margin: 0; font-size: .9rem; color: rgba(255,255,255,.5); }
.lp-struct-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-struct-card {
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 16px; padding: 20px;
  cursor: pointer; transition: all .2s;
  display: flex; flex-direction: column; gap: 16px;
  position: relative; overflow: hidden;
}
.lp-struct-card:hover {
  border-color: rgba(63,118,255,.6);
  background: rgba(63,118,255,.08);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(63,118,255,.2);
}
.lp-struct-card--active { border-color: #3f76ff; background: rgba(63,118,255,.12); }
.lp-struct-card-visual {
  border-radius: 10px; overflow: hidden;
  height: 120px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  padding: 10px; display: flex; flex-direction: column; gap: 5px;
}
/* Mini-site visual */
.lp-sv-header { height: 10px; background: rgba(63,118,255,.5); border-radius: 3px; }
.lp-sv-body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.lp-sv-headline { height: 10px; background: rgba(255,255,255,.25); border-radius: 3px; width: 80%; }
.lp-sv-sub { height: 7px; background: rgba(255,255,255,.12); border-radius: 3px; width: 65%; }
.lp-sv-sub--short { width: 45%; }
.lp-sv-form { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.lp-sv-field { height: 8px; background: rgba(255,255,255,.1); border-radius: 3px; border: 1px solid rgba(255,255,255,.15); }
.lp-sv-btn { height: 12px; background: linear-gradient(90deg,#3f76ff,#3b82f6); border-radius: 4px; width: 55%; align-self: center; }
/* Funnel visual */
.lp-struct-visual-funnel { gap: 6px; justify-content: center; }
.lp-sv-step { display: flex; justify-content: center; }
.lp-sv-step-bar { height: 18px; background: rgba(255,255,255,.1); border-radius: 4px; border: 1px solid rgba(255,255,255,.1); }
.lp-sv-step--1 .lp-sv-step-bar { width: 95%; background: rgba(63,118,255,.4); }
.lp-sv-step--2 .lp-sv-step-bar { width: 75%; background: rgba(63,118,255,.25); }
.lp-sv-step--3 .lp-sv-step-bar { width: 58%; background: rgba(63,118,255,.15); }
.lp-sv-step--4 .lp-sv-step-bar { width: 40%; background: linear-gradient(90deg,#3f76ff,#3b82f6); }
/* Floors visual */
.lp-struct-visual-floors { gap: 0; padding: 0; }
.lp-sv-floor { flex: 1; }
.lp-sv-floor--hero { background: linear-gradient(135deg,rgba(63,118,255,.4),rgba(59,130,246,.3)); border-bottom: 1px solid rgba(255,255,255,.08); }
.lp-sv-floor--features { background: rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.08); }
.lp-sv-floor--cta { background: rgba(37,186,100,.15); }
/* Embeddable form: a form card sitting inside someone else's page */
.lp-struct-visual-form { padding: 0; }
.lp-sv-embed-host {
  flex: 1; display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; background: rgba(255,255,255,.03);
}
.lp-sv-embed-line { height: 5px; border-radius: 3px; background: rgba(255,255,255,.13); }
.lp-sv-embed-line--short { width: 62%; }
.lp-sv-embed-card {
  border: 1.5px solid rgba(63,118,255,.55); border-radius: 8px;
  background: rgba(63,118,255,.12);
  padding: 8px; margin: 3px 0;
  display: flex; flex-direction: column; gap: 5px;
}
.lp-struct-card-info { flex: 1; }
.lp-struct-card-name { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.lp-struct-card-desc { font-size: .8rem; color: rgba(255,255,255,.5); line-height: 1.55; }
.lp-struct-card-arrow {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.4); transition: all .2s; align-self: flex-end;
}
.lp-struct-card:hover .lp-struct-card-arrow { background: #3f76ff; border-color: #3f76ff; color: #fff; }

/* ════════════════════════════════════════
   FULL-SCREEN BUILDER
   ════════════════════════════════════════ */
.lp-builder-overlay {
  position: absolute; inset: 0; z-index: 200;
  background: var(--bg-hover);
  display: flex; flex-direction: column;
}
.lp-builder-overlay.hidden { display: none; }

/* ── Top toolbar ── */
.lp-topbar {
  height: 52px; flex-shrink: 0;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 14px; gap: 0;
  justify-content: space-between;
}

/* LEFT: close + action buttons */
.lp-topbar-left {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.lp-topbar-divider {
  width: 1px; height: 22px; background: #e5e7eb;
  margin: 0 6px; flex-shrink: 0;
}

/* RIGHT: page name */
.lp-topbar-right {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0; min-width: 0; max-width: 45%;
}
.lp-topbar-namewrap {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
}
.lp-topbar-name {
  background: transparent; border: 1px solid transparent;
  border-radius: 7px; color: var(--text-primary);
  font-size: .88rem; font-weight: 600;
  padding: 5px 8px; min-width: 120px; max-width: 280px; width: auto;
  transition: all .15s; font-family: inherit;
}
.lp-topbar-name:hover { background: var(--bg-hover); border-color: #d1d5db; }
.lp-topbar-name:focus { outline: none; background: var(--bg-card); border-color: var(--text-primary); box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.lp-topbar-name::placeholder { color: var(--text-muted); font-weight: 400; }

.lp-topbar-close {
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: 8px; color: #6b7280;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s;
}
.lp-topbar-close:hover { background: #fef2f2; border-color: #fca5a5; color: #ef4444; }

.lp-topbar-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 8px;
  font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: all .15s; white-space: nowrap; border: 1px solid transparent;
}
.lp-topbar-btn.hidden { display: none; }

/* Publish = green accent */
.lp-topbar-btn-publish {
  background: #16a34a; border-color: #15803d; color: #fff;
}
.lp-topbar-btn-publish:hover { background: #15803d; }

/* Ghost = subtle gray */
.lp-topbar-btn-ghost {
  background: var(--bg-hover); border-color: #e5e7eb; color: var(--text-secondary);
}
.lp-topbar-btn-ghost:hover { background: #e5e7eb; color: var(--text-primary); }
.lp-topbar-btn-ghost.active { background: #e8f0ff; border-color: #b9ccff; color: #2f5fd9; }

/* Legacy primary (keep for other places) */
.lp-topbar-btn-primary { background: #1a1a1a; border: none; color: #fff; }
.lp-topbar-btn-primary:hover { background: #333; }

.lp-topbar-type-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 20px;
  background: #e8f0ff; color: var(--text-primary);
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0;
}

/* ── Split body ── */
.lp-split-body {
  flex: 1; display: flex; overflow: hidden;
}

/* ── Left: preview panel ── */
.lp-preview-panel {
  flex: 1; display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden; background: var(--bg-hover);
  position: relative;
}

/* Device toggle toolbar */
.lp-preview-toolbar {
  height: 38px; flex-shrink: 0;
  background: var(--bg-card); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 12px; gap: 12px;
}
.lp-device-btns {
  display: flex; align-items: center; gap: 2px;
  background: var(--bg-hover); border-radius: 8px; padding: 3px;
}
.lp-device-btn {
  width: 28px; height: 28px; border-radius: 6px;
  background: transparent; border: none; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s;
}
.lp-device-btn:hover { color: var(--text-secondary); background: #e5e7eb; }
.lp-device-btn.active { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.lp-preview-label {
  font-size: .72rem; color: var(--text-muted); font-weight: 500;
}

.lp-preview-wrap {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden;
}
.lp-preview-placeholder {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  color: #d1d5db; text-align: center;
}
.lp-preview-placeholder p { margin: 0; font-size: .9rem; font-weight: 500; color: var(--text-muted); }
.lp-preview-placeholder span { font-size: .78rem; color: #d1d5db; }
.lp-preview-iframe { width: 100%; height: 100%; border: none; flex: 1; display: block; }

/* Code view overlay */
.lp-code-view {
  position: absolute; inset: 38px 0 0 0;
  background: #1e1e2e; display: flex; flex-direction: column;
  z-index: 10;
}
.lp-code-view.hidden { display: none; }
.lp-code-view-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; background: #2a2a3e; border-bottom: 1px solid #3a3a50;
  color: #b9ccff; font-size: .78rem; font-weight: 600; flex-shrink: 0;
}
.lp-code-pre {
  flex: 1; overflow: auto; margin: 0;
  padding: 16px; font-size: .72rem; line-height: 1.5;
  color: #e2e8f0; font-family: 'Fira Code', 'Cascadia Code', monospace;
  white-space: pre; tab-size: 2;
}

/* ── Right: config header + chat panel ── */
.lp-right-panel {
  width: 380px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--bg-card);
  overflow: hidden;
  border-left: 1px solid var(--border);
}

/* Collapsible config header */
/* Chat-first builder: the right column is two TABS — Chat and Settings — so
   each gets the full height instead of the settings crowding out the chat. */
.lp-panel-config {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg-card);
}
.lp-panel-config.hidden { display: none; }

.lp-ctxbar {
  flex-shrink: 0; border-bottom: 1px solid var(--border); background: var(--bg-card);
}
.lp-tabbar { display: flex; gap: 2px; padding: 8px 10px 0; }
.lp-tab {
  position: relative; border: none; background: none; font: inherit;
  font-size: .8rem; font-weight: 600; color: var(--text-muted);
  padding: 7px 14px 9px; cursor: pointer; border-radius: 8px 8px 0 0;
  display: inline-flex; align-items: center; gap: 6px; transition: color .15s;
}
.lp-tab:hover { color: var(--text-secondary); }
.lp-tab.on { color: #3f76ff; }
.lp-tab.on:after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 0;
  height: 2px; border-radius: 2px; background: #3f76ff;
}
.lp-tab-badge {
  font-size: .62rem; font-weight: 700; color: #3f76ff;
  background: rgba(63,118,255,.14); border-radius: 100px; padding: 1px 6px;
}
.lp-ctx-summary { display: flex; align-items: center; gap: 6px; padding: 7px 12px 9px; }
.lp-ctx-chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 50%; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 100px;
  background: var(--bg-hover); color: var(--text-secondary);
  font: inherit; font-size: .72rem; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.lp-ctx-chip:hover { border-color: #3f76ff; color: #3f76ff; }
.lp-ctx-chip svg { flex-shrink: 0; }
.lp-ctx-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Settings pane: scrolls on its own, comfortable spacing */
#lpPanelConfig .lp-panel-config-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 16px 16px 24px; gap: 16px;
}
#lpPanelConfig .lp-type-pill { padding: 7px 12px; }
.lp-panel-config-header {
  width: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  padding: 10px 14px; background: transparent; border: none;
  cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--text-secondary);
  transition: background .15s;
}
.lp-panel-config-header:hover { background: var(--bg-hover); }
.lp-panel-config-title {
  font-size: .8rem; font-weight: 600; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-panel-config-chevron {
  flex-shrink: 0; color: var(--text-muted); transition: transform .2s;
}
.lp-panel-config-body {
  padding: 8px 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto; min-height: 0;
}
.lp-panel-config-body.hidden { display: none; }
.lp-panel-config-row {
  display: flex; flex-direction: column; gap: 4px;
}
.lp-panel-config-label {
  font-size: .72rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .05em;
}
.lp-panel-config-select {
  width: 100%; padding: 6px 8px; font-size: .8rem;
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: 7px; color: var(--text-secondary);
  cursor: pointer; font-family: inherit;
}
.lp-right-inner {
  flex: 1; overflow-y: auto;
  padding: 18px 18px 24px;
  display: flex; flex-direction: column; gap: 16px;
  background: var(--bg-card);
}
.lp-right-inner.hidden { display: none; }
.lp-setup-actions { margin-top: 4px; display: flex; flex-direction: column; gap: 8px; }

/* ── Chat pane ── */
.lp-chat-pane-inner {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; background: var(--bg-card);
}
.lp-chat-pane-inner.hidden { display: none; }
.lp-chat-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.lp-chat-setup-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 7px;
  background: var(--bg-hover); border: 1px solid var(--border);
  color: #6b7280; font-size: .75rem; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.lp-chat-setup-btn:hover { background: #e5e7eb; color: var(--text-primary); }
.lp-chat-topbar-label { font-size: .8rem; font-weight: 600; color: #6b7280; }
.lp-chat-input-area {
  flex-shrink: 0;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}

/* ── Override field styles for builder ── */
.lp-builder-overlay .lp-label { color: #6b7280; }
.lp-builder-overlay .lp-label-hint { color: var(--text-muted); }
.lp-builder-overlay .lp-input,
.lp-builder-overlay .lp-textarea {
  background: var(--bg-card);
  border-color: #d1d5db;
  color: var(--text-primary);
}
.lp-builder-overlay .lp-input::placeholder,
.lp-builder-overlay .lp-textarea::placeholder { color: var(--text-muted); }
.lp-builder-overlay .lp-input:focus,
.lp-builder-overlay .lp-textarea:focus { background: var(--bg-card); border-color: var(--text-primary); box-shadow: 0 0 0 3px rgba(124,58,237,.1); }
.lp-builder-overlay .lp-content-divider span { color: var(--text-muted); }
.lp-builder-overlay .lp-content-divider::before,
.lp-builder-overlay .lp-content-divider::after { background: #e5e7eb; }
.lp-builder-overlay .lp-img-upload-slot { border-color: #e5e7eb; background: var(--bg-hover); }
.lp-builder-overlay .lp-img-upload-slot:hover { border-color: var(--text-primary); background: #e8f0ff; }
.lp-builder-overlay .lp-img-slot-empty { color: var(--text-muted); }
.lp-builder-overlay .lp-generate-status { background: #e8f0ff; border-color: #b9ccff; color: var(--text-primary); }
.lp-builder-overlay .lp-generate-error { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }
.lp-builder-overlay .lp-para-num { background: var(--bg-hover); color: #6b7280; }
.lp-builder-overlay .lp-para-remove { background: none; border-color: #e5e7eb; color: var(--text-muted); }
.lp-builder-overlay .lp-para-remove:hover { border-color: #ef4444; color: #ef4444; background: #fef2f2; }
.lp-builder-overlay .lp-add-para-btn { border-color: #b9ccff; background: #e8f0ff; color: var(--text-primary); }
.lp-builder-overlay .lp-add-para-btn:hover { background: #ddd6fe; }
.lp-builder-overlay .lp-chat-input { background: var(--bg-card); border-color: #d1d5db; color: var(--text-primary); }
.lp-builder-overlay .lp-chat-input::placeholder { color: var(--text-muted); }
.lp-builder-overlay .lp-chat-input:focus { background: var(--bg-card); border-color: var(--text-primary); }
.lp-builder-overlay .lp-chat-msg-user { background: #e8f0ff; color: var(--text-primary); }
.lp-builder-overlay .lp-chat-msg-ai { background: var(--bg-hover); color: var(--text-secondary); }
.lp-builder-overlay .lp-chat-history { padding: 12px 14px; }
.lp-builder-overlay .lp-campaign-select option { background: var(--bg-card); }

/* ── Canvas UI (light theme) ── */
.lp-canvas-pane {
  flex: 1 1 auto; min-height: 260px;   /* never collapses behind the config block */
  display: flex; flex-direction: column;
  overflow: hidden; padding: 0 !important; gap: 0 !important;
  background: var(--bg-card);
}
.lp-canvas-config {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.lp-canvas-campaign {
  flex: 1; min-width: 0;
  padding: 6px 8px; font-size: .75rem;
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-secondary);
  cursor: pointer; font-family: inherit;
}
.lp-canvas-campaign option { background: var(--bg-card); }
.lp-canvas-type-pills {
  display: flex; gap: 2px; flex-shrink: 0;
  background: var(--bg-hover); border-radius: 6px; padding: 2px;
}
.lp-type-pill {
  padding: 4px 10px; font-size: .7rem; font-weight: 600;
  border: none; border-radius: 5px;
  background: transparent; color: var(--text-muted);
  cursor: pointer; transition: all .15s;
}
.lp-type-pill.active {
  background: #3f76ff; color: #fff;
}
.lp-type-pill:hover:not(.active) { color: var(--text-secondary); background: #e5e7eb; }

.lp-canvas-chat {
  flex: 1; overflow-y: auto;
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.lp-canvas-welcome {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: 8px; padding: 40px 20px;
}
.lp-canvas-welcome-icon { opacity: .6; }
.lp-canvas-welcome h3 {
  margin: 0; font-size: 1.1rem; font-weight: 700;
  color: var(--text-primary);
}
.lp-canvas-welcome p {
  margin: 0; font-size: .82rem; color: var(--text-muted); line-height: 1.5;
}

.lp-canvas-attachments {
  flex-shrink: 0;
  display: flex; gap: 6px; padding: 6px 14px 0;
  overflow-x: auto;
}
.lp-canvas-att-item {
  position: relative; flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border);
}
.lp-canvas-att-thumb {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.lp-canvas-att-remove {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; border: none;
  font-size: 10px; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
}
.lp-canvas-att-item:hover .lp-canvas-att-remove { opacity: 1; }

.lp-canvas-input-area {
  flex-shrink: 0; position: relative;
  padding: 10px 14px 16px;
  border-top: 1px solid var(--border);
}
.lp-canvas-input-row {
  display: flex; align-items: flex-end; gap: 6px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 8px 10px;
  transition: border-color .15s;
}
.lp-canvas-input-row:focus-within {
  border-color: var(--text-primary);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}
.lp-canvas-attach-btn {
  flex-shrink: 0; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--text-muted); cursor: pointer;
  border-radius: 8px; transition: all .15s;
}
.lp-canvas-attach-btn:hover { color: var(--text-primary); background: rgba(124,58,237,.08); }
.lp-canvas-input {
  flex: 1; min-width: 0;
  padding: 6px 4px; font-size: .85rem;
  background: transparent; border: none;
  color: var(--text-primary); font-family: inherit;
  resize: none; outline: none;
  line-height: 1.5; min-height: 80px; max-height: 240px;
  overflow-y: auto;
}
.lp-canvas-input::placeholder { color: var(--text-muted); }
.lp-canvas-send-btn {
  flex-shrink: 0; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 8px;
  background: #3f76ff;
  color: #fff; cursor: pointer; transition: background .15s;
}
.lp-canvas-send-btn:hover { background: #2f5fd9; }

.lp-canvas-drop-overlay {
  position: absolute; inset: 0;
  background: rgba(124,58,237,.08);
  border: 2px dashed #1a1a1a;
  border-radius: 12px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  z-index: 10; pointer-events: none;
}
.lp-canvas-drop-overlay span {
  font-size: .8rem; font-weight: 600; color: var(--text-primary);
}

.lp-canvas-msg-attachments {
  display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap;
}
.lp-canvas-msg-thumb {
  width: 60px; height: 60px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--border);
}

/* Chat messages - light theme overrides in canvas */
.lp-canvas-pane .lp-chat-msg-user {
  background: #e8f0ff; color: var(--text-primary);
}
.lp-canvas-pane .lp-chat-msg-ai {
  background: var(--bg-hover); color: var(--text-secondary);
}
.lp-canvas-pane .lp-chat-msg-ai svg { stroke: #3f76ff; }
.lp-canvas-pane .lp-chat-msg-error {
  background: #fef2f2; color: #991b1b;
}
.lp-field-group { display: flex; flex-direction: column; gap: 6px; }
.lp-label { font-size: .8rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.lp-input, .lp-textarea {
  width: 100%; padding: 10px 12px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text); font-size: .875rem;
  transition: border-color var(--transition);
  box-sizing: border-box; font-family: inherit;
  resize: vertical;
}
.lp-input:focus, .lp-textarea:focus {
  outline: none; border-color: #3f76ff;
  background: var(--bg-card);
}
.lp-builder-actions { display: flex; flex-direction: column; gap: 8px; }
.lp-btn-generate {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px;
  background: linear-gradient(135deg, #3f76ff, #3b82f6);
  color: #fff; border: none;
  border-radius: 8px; font-size: .875rem; font-weight: 600;
  cursor: pointer; transition: opacity var(--transition);
}
.lp-btn-generate:hover:not(:disabled) { opacity: .9; }
.lp-btn-generate:disabled { opacity: .6; cursor: not-allowed; }
.lp-btn-save {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px;
  background: rgba(37,186,100,.1);
  color: #25BA64;
  border: 1px solid rgba(37,186,100,.3);
  border-radius: 8px; font-size: .875rem; font-weight: 600;
  cursor: pointer; transition: all var(--transition);
}
.lp-btn-save:hover:not(:disabled) { background: rgba(37,186,100,.18); }
.lp-generate-status {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; background: rgba(63,118,255,.07);
  border: 1px solid rgba(63,118,255,.2);
  border-radius: 8px; font-size: .82rem; color: #3f76ff;
}
.lp-generate-status.hidden { display: none; }
.lp-generate-error {
  padding: 10px 12px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 8px; font-size: .82rem; color: #ef4444;
}
.lp-generate-error.hidden { display: none; }
.lp-preview-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.lp-preview-label { font-size: .8rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.lp-preview-open-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 6px;
  font-size: .75rem; font-weight: 500; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); transition: all var(--transition);
}
.lp-preview-open-btn:hover { border-color: #3f76ff; color: #3f76ff; }
.lp-preview-open-btn.hidden { display: none; }
.lp-preview-wrap {
  flex: 1; display: flex; flex-direction: column;
  background: var(--bg-card); overflow: hidden;
}
.lp-preview-placeholder {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  color: #94a3b8; font-size: .875rem;
  background: var(--bg-hover);
}
.lp-preview-placeholder p { margin: 0; }
.lp-preview-iframe { width: 100%; height: 100%; border: none; flex: 1; }

/* ── Content fields ── */
.lp-label-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); font-size: .75rem; }
.lp-content-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0;
}
.lp-content-divider::before, .lp-content-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.lp-content-divider span { font-size: .72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }

.lp-paragraphs-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.lp-paragraphs-header .lp-label { margin-bottom: 0; }
.lp-add-para-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 6px;
  font-size: .75rem; font-weight: 600; cursor: pointer;
  border: 1px solid rgba(63,118,255,.3);
  background: rgba(63,118,255,.07); color: #3f76ff;
  transition: all var(--transition);
}
.lp-add-para-btn:hover { background: rgba(63,118,255,.15); }
.lp-para-row {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 8px;
}
.lp-para-num {
  width: 22px; height: 22px; flex-shrink: 0;
  background: var(--bg-hover); border-radius: 50%;
  font-size: .72rem; font-weight: 700; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  margin-top: 10px;
}
.lp-para-textarea { flex: 1; min-width: 0; font-size: .82rem; }
.lp-para-remove {
  width: 26px; height: 26px; flex-shrink: 0;
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-muted); cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  margin-top: 8px; transition: all var(--transition);
}
.lp-para-remove:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,.06); }

/* ── Image Upload Slots ── */
.lp-img-upload-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.lp-img-upload-slot {
  position: relative;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-hover);
  transition: border-color var(--transition), background var(--transition);
  aspect-ratio: 3/2;
  display: flex; align-items: center; justify-content: center;
}
.lp-img-upload-slot:hover { border-color: #3f76ff; background: rgba(63,118,255,.04); }
.lp-img-slot-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 12px;
  color: var(--text-muted); font-size: .75rem; font-weight: 500;
  text-align: center; pointer-events: none;
}
.lp-img-slot-empty svg { opacity: .5; }
.lp-img-compressing {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: .72rem; color: #3f76ff;
}
.lp-img-slot-preview {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
}
.lp-img-slot-preview img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.lp-img-remove {
  position: absolute; top: 5px; right: 5px;
  width: 22px; height: 22px;
  background: rgba(0,0,0,.65); color: #fff;
  border: none; border-radius: 50%;
  font-size: .7rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
  line-height: 1;
}
.lp-img-remove:hover { background: #ef4444; }
.lp-img-slot-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 4px 8px;
  background: rgba(0,0,0,.55);
  color: #fff; font-size: .68rem; font-weight: 600;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Page Type Selector ── */
.lp-type-cards { display: flex; flex-direction: column; gap: 8px; }
.lp-type-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--transition);
  background: transparent;
  position: relative;
}
.lp-type-card:hover { border-color: rgba(63,118,255,.4); background: rgba(63,118,255,.04); }
.lp-type-card.active { border-color: #3f76ff; background: rgba(63,118,255,.07); }
.lp-type-card-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--bg-hover);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: all var(--transition);
}
.lp-type-card.active .lp-type-card-icon { background: rgba(63,118,255,.12); color: #3f76ff; }
.lp-type-card-body { flex: 1; }
.lp-type-card-name { font-size: .875rem; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.lp-type-card-desc { font-size: .77rem; color: var(--text-muted); line-height: 1.5; }
.lp-type-card-check {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: transparent; transition: all var(--transition);
  margin-top: 2px;
}
.lp-type-card.active .lp-type-card-check { background: #3f76ff; border-color: #3f76ff; color: #fff; }

/* Type badge on page cards */
.lp-type-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 20px;
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.lp-type-badge-minisite { background: rgba(63,118,255,.12); color: #3f76ff; }
.lp-type-badge-funnel { background: rgba(63,118,255,.12); color: #3f76ff; }
.lp-type-badge-floors { background: rgba(245,158,11,.12); color: #f59e0b; }
.lp-type-badge-form { background: rgba(63,118,255,.12); color: #3f76ff; }

/* LP Leads table */
.lp-leads-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.lp-leads-count { font-size: .85rem; font-weight: 600; color: var(--text); }
.lp-leads-refresh {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 6px;
  font-size: .78rem; font-weight: 500; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); transition: all var(--transition);
}
.lp-leads-refresh:hover { background: var(--bg-card-hover); color: var(--text); }
.lp-leads-table th, .lp-leads-table td { padding: 10px 12px; }
.lp-page-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 20px;
  font-size: .75rem; font-weight: 600;
  background: rgba(63,118,255,.12); color: #3f76ff;
  white-space: nowrap;
}
.lp-campaign-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 20px;
  font-size: .75rem; font-weight: 600;
  background: rgba(37,186,100,.1); color: #25BA64;
  white-space: nowrap;
}
.lp-campaign-select { cursor: pointer; }
.lp-leads-empty { padding: 80px 24px; }

/* ── AI Chat pane ── */
.lp-chat-history {
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
  padding: 4px 0;
}
.lp-chat-empty { font-size: .78rem; color: var(--text-muted); text-align: center; padding: 10px 0; font-style: italic; }
.lp-chat-msg {
  padding: 7px 11px; border-radius: 8px;
  font-size: .8rem; line-height: 1.5; max-width: 92%;
  /* Keep the user's own line breaks / blank lines exactly as typed */
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ── "Thinking" bubble: rotating status + elapsed timer + progress ── */
.lp-think { display: flex; flex-direction: column; gap: 7px; min-width: 210px; }
.lp-think-top { display: flex; align-items: center; gap: 8px; }
.lp-think-dots { display: inline-flex; gap: 3px; flex-shrink: 0; }
.lp-think-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: #3f76ff;
  animation: lpThinkDot 1.15s infinite ease-in-out;
}
.lp-think-dots i:nth-child(2) { animation-delay: .16s; }
.lp-think-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes lpThinkDot { 0%,80%,100% { opacity:.25; transform:translateY(0); } 40% { opacity:1; transform:translateY(-3px); } }
.lp-think-txt { flex: 1; font-weight: 600; transition: opacity .35s; }
.lp-think-time { font-size: .68rem; color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.lp-think-bar { height: 4px; border-radius: 100px; background: rgba(63,118,255,.15); overflow: hidden; }
.lp-think-bar > span {
  display: block; height: 100%; border-radius: 100px;
  background: linear-gradient(90deg,#3f76ff,#5b8cff);
  transition: width .5s ease;
}
.lp-chat-msg-user {
  background: rgba(63,118,255,.12); color: var(--text);
  align-self: flex-end; border-bottom-right-radius: 3px;
}
.lp-chat-msg-ai {
  background: rgba(63,118,255,.1); color: var(--text);
  align-self: flex-start; border-bottom-left-radius: 3px;
  display: flex; align-items: flex-start; gap: 6px;
}
.lp-chat-msg-ai svg { flex-shrink: 0; margin-top: 2px; opacity: .7; }
.lp-chat-msg-error {
  background: rgba(239,68,68,.1); color: #ef4444;
  align-self: flex-start; border-bottom-left-radius: 3px;
  font-size: .77rem;
}
.lp-chat-input-row { display: flex; gap: 8px; align-items: flex-end; }
.lp-chat-input {
  flex: 1; padding: 9px 12px;
  background: var(--bg-hover); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: .82rem;
  resize: none; font-family: inherit; line-height: 1.5;
  transition: border-color var(--transition);
}
.lp-chat-input:focus { outline: none; border-color: #3f76ff; background: var(--bg-card); }
.lp-chat-send {
  width: 36px; height: 36px; flex-shrink: 0;
  background: #1a1a1a;
  color: #fff; border: none; border-radius: 8px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.lp-chat-send:hover { background: #333; }
.lp-chat-send:disabled { opacity: .5; cursor: not-allowed; }

/* LP leads badge on tab */
.lf-src-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #3f76ff; color: #fff;
  border-radius: 20px; font-size: .68rem; font-weight: 700;
  margin-left: 6px; line-height: 1;
}

/* LP Builder responsive */
@media (max-width: 900px) {
  .lp-split-body { flex-direction: column; }
  .lp-preview-panel { border-right: none; border-bottom: 1px solid var(--border); height: 50vh; min-height: 240px; flex: none; }
  .lp-right-panel { width: 100%; flex: 1; }
  .lp-struct-grid { grid-template-columns: 1fr; max-height: 80vh; overflow-y: auto; }
  .lp-code-view { top: 38px; }
}
@media (max-width: 640px) {
  .lp-struct-title { font-size: 1.35rem; }
  .lp-topbar-name { max-width: 140px; }
  .lp-topbar-btn span { display: none; }
  .lp-topbar-btn { padding: 6px 8px; }
}
@media (max-width: 768px) {
  .lp-grid { grid-template-columns: 1fr; }
  .lp-header { flex-direction: column; }
}

/* ========== RESPONSIVE — 480px ========== */
@media (max-width: 480px) {
  .lf-crm-stats { grid-template-columns: 1fr 1fr; }
  .lf-hbar-name { width: 80px; }
  .hero-title { font-size: 1.2rem; }
  .am-page-title { font-size: 16px; }
  .am-opt-hist-btn span { display: none; }
  .global-ctx-sep { display: none; }
  .am-sf-btn { padding: 5px 10px; font-size: 12px; }
  .am-search { width: 80px; }
  .lf-board { gap: 10px; }
  .lf-board-col { min-width: 220px; }
  .sidebar-user { flex-direction: row; align-items: center; }
}

/* Unified Kanban */
.ukanban-col-over { background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)) !important; border-color: var(--accent) !important; }
.ukanban-card[draggable="true"]:active { cursor: grabbing; opacity: .7; transform: scale(.97); }
.ukanban-board::-webkit-scrollbar { height: 6px; }
.ukanban-board::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.ukanban-cards::-webkit-scrollbar { width: 4px; }
.ukanban-cards::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Calendar View ── */
.ucal-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ucal-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.ucal-nav {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--bg-page,#f9fafb); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-secondary); transition: all .15s;
}
.ucal-nav:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.ucal-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); min-width: 160px; text-align: center; }
.ucal-today-btn {
  margin-left: auto; padding: 5px 14px; border-radius: 7px;
  background: var(--bg-page,#f9fafb); border: 1px solid var(--border);
  font-size: .78rem; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; transition: all .15s;
}
.ucal-today-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.ucal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
}
.ucal-day-name {
  padding: 8px 0; text-align: center;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  color: var(--text-secondary); background: var(--bg-page,#f9fafb);
  border-bottom: 1px solid var(--border);
}
.ucal-cell {
  min-height: 100px; padding: 4px 6px;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .1s;
  display: flex; flex-direction: column; gap: 2px;
}
.ucal-cell:nth-child(7n) { border-right: none; }
.ucal-cell:hover { background: rgba(124,58,237,.03); }
.ucal-cell.ucal-empty { background: var(--bg-page,#fafafa); cursor: default; }
.ucal-cell.ucal-today { background: rgba(124,58,237,.04); }
.ucal-cell.ucal-has-leads { background: rgba(124,58,237,.02); }
.ucal-cell.ucal-cell-drag-over {
  background: rgba(124,58,237,.12) !important;
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}
.ucal-date {
  font-size: .78rem; font-weight: 600; color: var(--text-secondary);
  margin-bottom: 2px; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.ucal-date-today {
  background: var(--accent); color: #fff !important;
}
.ucal-lead {
  padding: 2px 6px; border-radius: 4px;
  background: var(--bg-page,#fff); font-size: .68rem;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 4px;
  cursor: pointer; transition: background .1s;
}
.ucal-lead:hover { background: #ede9fe; }
.ucal-lead-name { overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); font-weight: 500; }
.ucal-due-badge {
  font-size: .55rem; padding: 0 4px; border-radius: 4px;
  background: #fef3c7; color: #92400e; font-weight: 700; flex-shrink: 0;
}
.ucal-more { font-size: .65rem; color: var(--accent); font-weight: 600; padding: 1px 6px; cursor: pointer; }

/* Calendar day popup */
.ucal-day-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.3); display: flex;
  align-items: center; justify-content: center;
}
.ucal-day-popup {
  background: var(--bg-card); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
  width: 420px; max-width: 92vw; max-height: 80vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.ucal-day-popup-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-size: .92rem; font-weight: 700; color: var(--text-primary);
}
.ucal-day-popup-body { flex: 1; overflow-y: auto; padding: 10px 14px; }
.ucal-day-lead {
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); margin-bottom: 8px;
  transition: all .15s;
}
.ucal-day-lead:hover { background: #ede9fe; border-color: var(--accent); }

/* ── Updates / Comments Panel ── */
.lupd-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.35); display: flex;
  justify-content: flex-end;
  backdrop-filter: blur(2px);
}
.lupd-panel {
  width: 480px; max-width: 95vw; height: 100vh;
  background: var(--bg-card); box-shadow: -8px 0 40px rgba(0,0,0,.12);
  display: flex; flex-direction: column;
  animation: lupd-slide .22s ease-out;
}
@keyframes lupd-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }
.lupd-header {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border);
  flex-shrink: 0; background: var(--bg-card);
}
.lupd-lead-name { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); letter-spacing: -.01em; }
.lupd-close {
  background: none; border: none; font-size: 1.3rem;
  color: var(--text-secondary); cursor: pointer; padding: 2px 6px;
  line-height: 1; transition: all .15s; border-radius: 6px;
}
.lupd-close:hover { color: #ef4444; background: #fef2f2; }
.lupd-scroll-body {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column;
}
.lupd-section {
  padding: 16px 24px; border-bottom: 1px solid var(--border);
}
.lupd-section-title {
  display: flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 12px;
}
.lupd-contact-grid {
  display: flex; flex-direction: column; gap: 8px;
}
.lupd-contact-card {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-page, #f9fafb); text-decoration: none;
  transition: all .15s; cursor: pointer;
}
.lupd-contact-card span {
  font-size: .82rem; color: var(--text-primary); font-weight: 500;
}
.lupd-contact-card:hover {
  border-color: var(--accent); background: #f0f7ff;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.lupd-details-grid {
  display: grid; grid-template-columns: 1fr; gap: 0;
}
.lupd-detail-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  gap: 12px;
}
.lupd-detail-row:last-child { border-bottom: none; }
.lupd-detail-row input[type="date"] {
  font-size: .78rem; padding: 3px 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); color: var(--text-primary);
  font-family: inherit; cursor: pointer; outline: none;
  transition: border-color .15s;
}
.lupd-detail-row input[type="date"]:hover,
.lupd-detail-row input[type="date"]:focus { border-color: var(--accent); }
.lupd-detail-label {
  font-size: .75rem; color: var(--text-secondary); font-weight: 600;
  white-space: nowrap; text-transform: capitalize; flex-shrink: 0;
}
.lupd-detail-val {
  font-size: .8rem; color: var(--text-primary); text-align: right;
  word-break: break-word; min-width: 0;
}
.lupd-updates-section {
  flex: 1; display: flex; flex-direction: column; border-bottom: none;
}
.lupd-compose {
  display: flex; gap: 10px; margin-bottom: 14px;
}
.lupd-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: #1a1a1a; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; flex-shrink: 0;
}
.lupd-compose-box { flex: 1; min-width: 0; }
.lupd-textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; font-size: .82rem; font-family: inherit;
  color: var(--text-primary); background: var(--bg-page,#f9fafb);
  resize: none; outline: none; transition: all .15s;
  line-height: 1.5;
}
.lupd-textarea:focus { border-color: var(--accent); background: var(--bg-card); box-shadow: 0 0 0 3px rgba(0,0,0,.05); }
.lupd-send-btn {
  padding: 6px 16px; border-radius: 8px; font-size: .78rem;
  font-weight: 600; border: none; cursor: pointer;
  background: #1a1a1a; color: #fff;
  display: flex; align-items: center; gap: 5px; transition: background .15s;
}
.lupd-send-btn:hover { background: #333; }
.lupd-timeline {
  flex: 1; display: flex; flex-direction: column; gap: 10px;
}
.lupd-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 30px 0;
}
.lupd-item {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; background: var(--bg-page,#fafafa);
  transition: border-color .15s;
}
.lupd-item:hover { border-color: var(--accent); }
.lupd-item-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lupd-author { font-size: .82rem; font-weight: 600; color: var(--text-primary); }
.lupd-time { font-size: .68rem; color: var(--text-secondary); }
.lupd-delete {
  margin-left: auto; background: none; border: none;
  color: var(--text-secondary); cursor: pointer;
  font-size: 1rem; opacity: 0; transition: all .15s;
}
.lupd-item:hover .lupd-delete { opacity: 1; }
.lupd-delete:hover { color: #ef4444; }
.lupd-body { font-size: .82rem; color: var(--text-primary); line-height: 1.6; padding-left: 38px; }

/* ---- Status Badge (shadcn pill style) ---- */
.usb-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 9999px;
  font-size: .72rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; user-select: none;
  transition: filter .12s, box-shadow .12s;
  line-height: 1.5;
  /* Never spill out of a narrow cell — long labels ellipsize INSIDE the pill */
  max-width: 100%; box-sizing: border-box;
}
.usb-badge:hover { filter: brightness(.94); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.usb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.usb-badge svg { flex-shrink: 0; }
.usb-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.usb-picker {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.13);
  padding: 4px; min-width: 190px; max-height: 300px; overflow-y: auto;
}
.usb-option {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 6px;
  font-size: .8rem; cursor: pointer; color: var(--text-primary);
  transition: background .1s;
}
.usb-option:hover { background: var(--bg-page); }
.usb-option-active { font-weight: 600; }

/* ---- Advanced Filter Panel ---- */
.af-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1200;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  min-width: min(640px, calc(100vw - 40px));
  max-width: min(860px, calc(100vw - 40px));
  width: max-content; box-sizing: border-box;
}
.af-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.af-rules { display: flex; flex-direction: column; gap: 8px; }
.af-rule-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  min-width: 0; max-width: 100%;
}
/* Everything inside a rule must be able to shrink so long option labels can
   never push cells outside the popup — selects clip instead of overflowing. */
.af-rule-row select { flex: 0 1 auto; min-width: 70px !important; max-width: 200px; text-overflow: ellipsis; }
.af-rule-row [data-af-val] { flex: 1 1 120px; min-width: 90px !important; max-width: 100%; box-sizing: border-box; }
.af-rule-row input[data-af-val] { width: 0; }
.af-add-rule {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 12px; padding: 0; background: none; border: none;
  font-size: .8rem; color: var(--accent); cursor: pointer; font-weight: 500;
}
.af-add-rule:hover { text-decoration: underline; }
.af-btn-ghost {
  padding: 4px 10px; border: none; background: none;
  font-size: .78rem; color: var(--text-secondary); cursor: pointer;
  border-radius: 6px;
}
.af-btn-ghost:hover { background: var(--bg-page); color: var(--text-primary); }
.af-btn-outline {
  padding: 4px 12px; border: 1px solid var(--border); background: var(--bg-card);
  font-size: .78rem; color: var(--text-primary); cursor: pointer; border-radius: 6px;
}
.af-btn-outline:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px) {
  .af-panel { min-width: 92vw; max-width: 98vw; left: -8px; }
  .af-rule-row { flex-wrap: wrap; }
}

/* ── Phone cell — call / SMS / WhatsApp actions ──────────────────────────── */
.lf-phone-cell-wrap {
  display: flex; width: 100%; min-width: 0; align-items: center; gap: 6px; white-space: nowrap;
}
.lf-phone-link-plain {
  color: var(--accent); text-decoration: none;
}
.lf-phone-link-plain:hover { text-decoration: underline; }

.lf-phone-actions {
  display: inline-flex; align-items: center; gap: 3px;
  opacity: 0; transition: opacity .15s;
}
tr:hover .lf-phone-actions { opacity: 1; }

.lf-phone-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: none; cursor: pointer; text-decoration: none;
  transition: background .15s, transform .1s;
  flex-shrink: 0;
}
.lf-phone-act:hover { transform: scale(1.15); }

.lf-phone-act--call { background: #22c55e; color: #fff; }
.lf-phone-act--call:hover { background: #16a34a; }

.lf-phone-act--sms  { background: #3b82f6; color: #fff; }
.lf-phone-act--sms:hover  { background: #2563eb; }

.lf-phone-act--wa   { background: #25d366; color: #fff; }
.lf-phone-act--wa:hover   { background: #128c50; }

/* ── Billing Tab ─────────────────────────────────────────────────────────── */
.bl-wrap { padding: 20px 24px; max-width: 1100px; }

.bl-toolbar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
}
.bl-dr-select {
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: var(--text-primary); font-size: .83rem;
  font-family: inherit; cursor: pointer;
}
.bl-refresh-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: var(--text-secondary); font-size: .83rem;
  cursor: pointer; font-family: inherit; transition: border-color .15s, color .15s;
}
.bl-refresh-btn:hover { border-color: var(--accent); color: var(--accent); }

.bl-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px;
}
@media (max-width: 900px) { .bl-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .bl-cards { grid-template-columns: 1fr; } }

.bl-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px;
  transition: box-shadow .15s;
}
.bl-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }
.bl-card-top {
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
}
.bl-card-icon { font-size: 16px; }
.bl-card-label { font-size: .78rem; color: var(--text-secondary); font-weight: 500; }
.bl-card-value { font-size: 1.55rem; font-weight: 700; line-height: 1; margin-bottom: 4px; }
.bl-card-sub   { font-size: .75rem; color: var(--text-secondary); }

.bl-section-title {
  font-size: .9rem; font-weight: 700; color: var(--text-primary);
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.bl-chart-wrap {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 16px; margin-bottom: 24px; overflow: hidden;
}
.bl-no-chart {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 32px; text-align: center;
  color: var(--text-secondary); font-size: .84rem; margin-bottom: 24px;
}
.bl-table-wrap {
  border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; margin-bottom: 24px; overflow-x: auto;
}
.bl-table {
  width: 100%; border-collapse: collapse; font-size: .82rem;
  background: var(--bg-card);
}
.bl-table thead tr { background: var(--bg-page); }
.bl-table th {
  padding: 9px 14px; text-align: left; font-weight: 600;
  color: var(--text-secondary); font-size: .77rem;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.bl-table td {
  padding: 9px 14px; border-bottom: 1px solid var(--border);
  color: var(--text-primary); vertical-align: middle;
}
.bl-table tr:last-child td { border-bottom: none; }
.bl-table tbody tr:hover { background: var(--bg-page); }

/* Billing per-user badges */
.bl-badge { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: .7rem; font-weight: 600; margin-right: 3px; }
.bl-badge-meta  { background: #e7f0fd; color: #1877f2; }
.bl-badge-gads  { background: #e8f5e9; color: #2e7d32; }
.bl-badge-dv360 { background: #e8eaf6; color: #3949ab; }
.bl-badge-none  { background: var(--bg-page); color: var(--text-muted); }

/* ── Browser Dialer Popup ────────────────────────────────────────────────── */
.lf-dialer-popup {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  width: 420px; border-radius: 12px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  font-family: inherit; font-size: 14px;
  transition: transform .2s, opacity .2s;
  background: var(--bg-card, #fff);
}
.lf-dialer-hidden { display: none; }
.lf-dialer-minimized .lf-dialer-body { display: none; }

.lf-dialer-header {
  display: flex; align-items: center; gap: 8px;
  background: #3d8ef8; color: #fff;
  padding: 12px 14px; cursor: default; user-select: none;
}
.lf-dialer-chevron {
  font-size: 18px; cursor: pointer; opacity: .8; flex-shrink: 0;
  transform: rotate(180deg); display: inline-block;
}
.lf-dialer-minimized .lf-dialer-chevron { transform: rotate(0deg); }
.lf-dialer-name  { font-weight: 700; font-size: 15px; flex-shrink: 0; }
.lf-dialer-phone { font-size: 12px; opacity: .85; flex-shrink: 0; }
.lf-dialer-timer {
  margin-left: auto; font-size: 13px; font-weight: 600;
  letter-spacing: .5px; flex-shrink: 0;
}
.lf-dialer-hangup {
  width: 40px; height: 30px; border-radius: 6px;
  background: #e74c3c; color: #fff; border: none; cursor: pointer;
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s;
}
.lf-dialer-hangup:hover { background: #c0392b; }
.lf-dialer-close-x {
  background: none; border: none; color: #fff; font-size: 16px;
  cursor: pointer; opacity: .8; flex-shrink: 0; padding: 0 2px;
}
.lf-dialer-close-x:hover { opacity: 1; }

.lf-dialer-body {
  padding: 16px; background: var(--bg-card, #fff);
  display: flex; flex-direction: column; gap: 0;
}

/* Controls row */
.lf-dialer-controls {
  display: flex; gap: 12px; justify-content: flex-start;
  margin-bottom: 14px; flex-wrap: wrap;
}
.lf-dialer-ctrl {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #f0f4ff; border: none; border-radius: 50%;
  width: 56px; height: 56px; cursor: pointer;
  font-size: 10px; color: #3d8ef8; font-weight: 600; letter-spacing: .3px;
  transition: background .15s, color .15s;
}
.lf-dialer-ctrl svg { width: 22px; height: 22px; }
.lf-dialer-ctrl:hover { background: #dbeafe; }
.lf-dialer-ctrl-on { background: #3d8ef8 !important; color: #fff !important; }

/* Keypad */
.lf-dialer-keypad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 10px;
}
.lf-dialer-key {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg-page, #f4f6fa); border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px; height: 54px; cursor: pointer; font-family: inherit;
  transition: background .1s;
}
.lf-dialer-key:hover { background: #e0e7ff; }
.lf-dialer-key-main { font-size: 18px; font-weight: 600; color: var(--text-primary, #111); }
.lf-dialer-key-sub  { font-size: 9px; letter-spacing: 1px; color: var(--text-secondary, #6b7280); }
.lf-dialer-dismiss-keypad {
  width: 100%; padding: 10px; border-radius: 8px;
  background: #3d8ef8; color: #fff; border: none; cursor: pointer;
  font-size: 13px; font-weight: 700; letter-spacing: 1px; margin-top: 4px;
}
.lf-dialer-dismiss-keypad:hover { background: #2563eb; }

/* Audio panel */
.lf-dialer-audio-panel {
  background: var(--bg-page, #f4f6fa); border-radius: 8px;
  padding: 12px; margin-bottom: 10px; border: 1px solid var(--border, #e5e7eb);
}
.lf-dialer-audio-label { font-size: 12px; font-style: italic; color: var(--text-secondary); margin-bottom: 6px; }
.lf-dialer-audio-select {
  width: 100%; padding: 6px 10px; border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px; background: var(--bg-card, #fff); color: var(--text-primary);
  font-size: 13px; font-family: inherit;
}

/* Note area */
.lf-dialer-note-label { font-size: 12px; font-style: italic; color: var(--text-secondary); margin-bottom: 6px; margin-top: 2px; }
.lf-dialer-note {
  width: 100%; box-sizing: border-box; height: 90px; resize: vertical;
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px;
  padding: 10px; font-size: 13px; font-family: inherit;
  background: var(--bg-card, #fff); color: var(--text-primary);
  outline: none;
}
.lf-dialer-note:focus { border-color: #3d8ef8; }
.lf-dialer-note-toolbar {
  display: flex; gap: 4px; padding: 6px 8px;
  border: 1px solid var(--border, #e5e7eb); border-top: none;
  border-radius: 0 0 8px 8px; background: var(--bg-page, #f4f6fa);
  margin-bottom: 2px;
}
.lf-dialer-note-toolbar button {
  background: none; border: none; cursor: pointer; padding: 2px 5px;
  color: var(--text-secondary); font-size: 13px; border-radius: 3px;
}
.lf-dialer-note-toolbar button:hover { background: var(--border); color: var(--text-primary); }

/* Post-call outcome */
.lf-dialer-outcome-select {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px; background: var(--bg-card, #fff); color: var(--text-primary);
  font-size: 13px; font-family: inherit; cursor: pointer;
}
.lf-dialer-save-btn {
  margin-top: 14px; width: 100%; padding: 11px;
  background: #3d8ef8; color: #fff; border: none; border-radius: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .8px;
  cursor: pointer; transition: background .15s;
}
.lf-dialer-save-btn:hover { background: #2563eb; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .lf-dialer-popup { box-shadow: 0 12px 40px rgba(0,0,0,.6); }
}

/* ── Ads Manager: left account sidebar layout ───────────────────────────── */
#sectionAdsmanager { display: flex; flex-direction: row; align-items: stretch; gap: 0; height: calc(100vh - 16px); }

.am-acct-sidebar {
  flex-shrink: 0;
  width: 210px;
  min-height: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  margin-right: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width .2s ease;
  position: sticky;
  top: 16px;
  /* Fill the full Ads-tab height (match the main content panel beside it). */
  max-height: none;
  align-self: stretch;
}
.am-acct-sidebar.collapsed {
  width: 36px;
  min-height: 0;
}

.am-main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
/* Let the table fill all remaining vertical space (no wasted area below it) */
#amTableContainer { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#amTableContainer > .am-table-title-bar, #amTableContainer > .am-footer { flex-shrink: 0; }

.am-side-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 6px;
}
.am-side-title {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
.am-side-toggle {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 3px;
  color: var(--text-secondary);
  border-radius: 4px;
  display: flex;
  align-items: center;
  margin-left: auto;
}
.am-side-toggle:hover { background: var(--bg-elevated); color: var(--text-primary); }

.am-acct-sidebar.collapsed .am-side-header { justify-content: center; border-bottom: none; padding: 10px 0; }
.am-acct-sidebar.collapsed .am-side-title { display: none; }

.am-side-body { overflow-y: auto; flex: 1; }

.am-side-section { border-bottom: 1px solid var(--border); }
.am-side-section:last-child { border-bottom: none; }

.am-side-section-hd {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px 5px;
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: .4px;
  text-transform: uppercase;
  background: var(--bg-subtle, #f9fafb);
  user-select: none;
}
.am-side-count {
  margin-left: auto;
  background: var(--bg-elevated);
  border-radius: 10px;
  padding: 1px 5px;
  font-size: .65rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.am-side-items { padding: 1px 0; }
.am-side-search { display: flex; align-items: center; gap: 6px; margin: 5px 10px 3px; padding: 3px 8px; background: var(--bg-elevated, #f3f4f6); border: 1px solid var(--border, #e5e7eb); border-radius: 6px; color: var(--text-tertiary, #9ca3af); }
.am-side-search input { border: none; background: transparent; outline: none; font-size: .76rem; width: 100%; color: var(--text-primary, #111827); height: 22px; }
.am-side-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  font-size: .76rem;
  line-height: 1.25;
  color: var(--text-primary);
  cursor: pointer;
  transition: background .1s;
  white-space: nowrap;
}
.am-side-section-hd { cursor: pointer; }
.am-side-section-hd:hover { background: var(--bg-hover, #f0f0f2); }
.am-side-section-hd.active { color: var(--accent); }
.am-side-item span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* The Leads rail renders its rows as <button> (they are clickable filters);
   strip the UA button chrome so a button row and a div row are identical. */
button.am-side-item { width: 100%; border: none; background: none; text-align: left; font: inherit; font-size: .76rem; }
/* margin-left:auto — the counts form a clean right-hand column instead of
   floating wherever each name happens to end (both rails). */
.am-side-item-count { margin-left: auto; flex-shrink: 0; color: var(--text-tertiary, #9ca3af); font-size: 11px; font-weight: 600; }
.am-side-item:hover { background: var(--bg-elevated); }
.am-side-item.active { background: #eff6ff; color: #1d4ed8; font-weight: 500; }

/* ── Ads tab — compact top-right control cluster (icons) ─────────────────── */
.am-ctl-cluster { display: flex; align-items: center; gap: 6px; row-gap: 6px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.am-ctl-cluster .am-status-filter { height: 30px; flex-shrink: 0; }
.am-ctl-cluster .am-sf-btn { height: 100%; padding: 0 13px; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; white-space: nowrap; }
.am-date-select--sm { padding: 5px 8px !important; height: 30px !important; font-size: 12px !important; font-weight: 500 !important; max-width: 124px; flex-shrink: 0; }
.am-view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; flex-shrink: 0; height: 30px; }
.am-view-toggle button { width: 30px; height: 28px; border: none; background: var(--bg-card); color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.am-view-toggle button + button { border-left: 1px solid var(--border); }
.am-view-toggle button.active { background: var(--accent); color: #fff; }
.am-icon-btn { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-card); color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background .12s, color .12s; flex-shrink: 0; }
.am-icon-btn:hover { background: var(--bg-hover, #f0f0f2); color: var(--text); }

.am-side-empty {
  padding: 16px 12px;
  font-size: .75rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ===================== Automation builder ===================== */
.auto-shell { display:flex; flex-direction:column; height:calc(100vh - 60px); }
.auto-topbar { display:flex; align-items:center; gap:12px; padding:14px 22px; border-bottom:1px solid var(--border); }
.auto-name { font-size:18px; font-weight:800; border:1px solid transparent; background:transparent; color:var(--text-primary); padding:4px 8px; border-radius:8px; outline:none; min-width:280px; }
.auto-name:hover, .auto-name:focus { border-color:var(--border); }
.auto-lname-edit { visibility:hidden; background:none; border:none; cursor:pointer; font-size:12px; padding:0 2px; line-height:1; }
tr:hover .auto-lname-edit { visibility:visible; }
.auto-body { flex:1; display:flex; min-height:0; }
.auto-side { width:250px; border-right:1px solid var(--border); padding:16px 14px; overflow-y:auto; flex-shrink:0; min-height:0; }
.auto-side-hd { font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--text-muted); text-transform:uppercase; margin-bottom:12px; }
.auto-tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:14px; }
.auto-tab { flex:1; background:none; border:none; padding:8px 4px; font-size:13px; font-weight:600; color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.auto-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.auto-pal-list { display:flex; flex-direction:column; gap:8px; }
.auto-pal { display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--border); border-radius:10px; font-size:13.5px; font-weight:600; color:var(--text-primary); cursor:pointer; background:var(--bg-card); transition:.12s; }
.auto-pal:hover { border-color:var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.auto-pal-ic { width:28px; height:28px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.auto-canvas { flex:1; overflow:auto; padding:32px; background:
  linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px) 0 0/22px 22px,
  linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px) 0 0/22px 22px, var(--bg-app, #f7f8fa); }
.auto-title { font-size:19px; font-weight:800; color:var(--text-primary); margin-bottom:22px; }
.auto-flow { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.auto-node { width:260px; border:1px solid var(--border); border-radius:12px; background:var(--bg-card); box-shadow:0 2px 10px rgba(0,0,0,.05); }
.auto-node-hd { display:flex; align-items:center; gap:8px; padding:12px 12px 10px; }
.auto-node-bd { padding:0 14px 14px; font-size:12.5px; color:var(--text-primary); line-height:1.5; }
.auto-ico { background:none; border:none; cursor:pointer; font-size:14px; color:var(--text-muted); padding:2px 4px; border-radius:5px; }
.auto-ico:hover { background:var(--bg-hover); }
.auto-arrow { color:var(--text-muted); font-size:20px; padding:0 4px; flex-shrink:0; }
.auto-yes { background:#d1fae5; color:#065f46; font-weight:700; font-size:12px; padding:6px 14px; border-radius:16px; flex-shrink:0; }
.auto-actions { display:flex; gap:12px; justify-content:center; padding:14px; border-top:1px solid var(--border); }
.auto-switch { position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0; cursor:pointer; }
.auto-switch input { opacity:0; width:0; height:0; }
.auto-switch span { position:absolute; inset:0; background:#cbd5e1; border-radius:22px; transition:.2s; }
.auto-switch span:before { content:''; position:absolute; height:16px; width:16px; left:3px; top:3px; background: var(--bg-card); border-radius:50%; transition:.2s; }
.auto-switch input:checked + span { background:#22c55e; }
.auto-switch input:checked + span:before { transform:translateX(18px); }
.auto-panel-ov { position:fixed; inset:0; background:rgba(15,23,42,.35); z-index:1000; display:flex; justify-content:flex-end; }
.auto-panel { width:520px; max-width:94vw; background:var(--bg-card); height:100%; display:flex; flex-direction:column; box-shadow:-8px 0 30px rgba(0,0,0,.15); }
.auto-panel-hd { display:flex; align-items:flex-start; gap:10px; padding:22px 24px 16px; border-bottom:1px solid var(--border); }
.auto-panel-bd { flex:1; overflow-y:auto; padding:20px 24px; }
.auto-panel-ft { display:flex; gap:10px; justify-content:flex-end; padding:16px 24px; border-top:1px solid var(--border); }
.auto-lbl { display:block; font-size:12.5px; font-weight:700; color:var(--text-secondary); margin-bottom:6px; }
.auto-checks { display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto; border:1px solid var(--border); border-radius:8px; padding:10px; }
.auto-check, .auto-radio { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-primary); cursor:pointer; }
.auto-radio { padding:6px 0; }
.auto-canvas.auto-drop { outline:2px dashed var(--accent); outline-offset:-8px; background-color:rgba(59,130,246,.04); }
.auto-node[draggable="true"] { cursor:grab; }
.auto-node[draggable="true"]:active { cursor:grabbing; }
.auto-node-over { outline:2px solid var(--accent); outline-offset:2px; }

/* Automation — vertical branching flow */
.auto-flow-v { display:flex; flex-direction:column; align-items:center; padding-bottom:60px; width:max-content; min-width:100%; margin:0 auto; }
.auto-flow-v .auto-node { width:280px; }
.auto-down { color:var(--text-muted); font-size:18px; line-height:1; padding:3px 0; }
.auto-add { background:var(--bg-card); border:1px dashed var(--border); border-radius:8px; padding:7px 14px; font-size:12.5px; font-weight:600; color:var(--accent); cursor:pointer; }
.auto-add:hover { border-color:var(--accent); background:rgba(59,130,246,.04); }
.auto-branches { display:flex; gap:28px; align-items:flex-start; margin-top:6px; position:relative; }
.auto-branch { display:flex; flex-direction:column; align-items:center; border:1px dashed var(--border); border-radius:12px; padding:10px 14px 16px; background:rgba(0,0,0,.015); min-width:300px; }
.auto-branch-lbl { font-weight:800; font-size:12px; padding:4px 16px; border-radius:14px; margin-bottom:2px; }
.auto-branch-lbl.yes { background:#d1fae5; color:#065f46; }
.auto-branch-lbl.no { background:#fee2e2; color:#991b1b; }
.auto-addpop { position:absolute; z-index:1100; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.16); padding:6px; display:flex; flex-direction:column; min-width:180px; }
.auto-addpop button { text-align:left; background:none; border:none; padding:9px 12px; font-size:13.5px; color:var(--text-primary); cursor:pointer; border-radius:7px; }
.auto-addpop button:hover { background:var(--bg-hover); }

/* Automation — node-graph canvas */
.auto-canvas-graph { position:relative; }
.auto-graph { position:relative; margin:0 auto; }
.auto-edges { position:absolute; inset:0; pointer-events:none; z-index:0; }
.auto-gnode { position:absolute; z-index:1; border:1px solid var(--border); border-radius:12px; background:var(--bg-card); box-shadow:0 2px 10px rgba(0,0,0,.06); }
.auto-gnode.dragging { box-shadow:0 10px 30px rgba(0,0,0,.18); opacity:.96; z-index:5; }
.auto-gnode-hd { display:flex; align-items:center; gap:8px; padding:11px 12px 9px; cursor:grab; user-select:none; touch-action:none; }
.auto-gnode-hd:active { cursor:grabbing; }
.auto-gnode-add { position:absolute; left:50%; bottom:-13px; transform:translateX(-50%); width:24px; height:24px; border-radius:50%; border:1px solid var(--border); background:var(--bg-card); color:var(--accent); font-size:15px; line-height:1; cursor:pointer; z-index:2; box-shadow:0 1px 4px rgba(0,0,0,.1); }
.auto-gnode-add:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.auto-gadd { position:absolute; z-index:1; }
.auto-gadd .auto-add { width:100%; }
.auto-side-hint { margin-top:16px; font-size:11.5px; color:var(--text-muted); line-height:1.5; border-top:1px solid var(--border); padding-top:12px; }

/* ===================== Products (plugin catalog) ===================== */
.prod-outer { display:flex; flex-direction:column; height:calc(100vh - 60px); }
.prod-outer .am-tabs-row { border-radius:0; flex-shrink:0; box-shadow:none; }
.prod-outer .prod-shell { height:auto; flex:1; min-height:0; }
.prod-shell { display:flex; height:calc(100vh - 60px); }
.prod-rail { width:240px; border-right:1px solid var(--border); overflow-y:auto; flex-shrink:0; padding:10px; }
.prod-rail-hd { font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--text-muted); text-transform:uppercase; padding:6px 8px 10px; }
.prod-site { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; cursor:pointer; margin-bottom:2px; position:relative; transition:background .12s; }
.prod-site:hover { background: var(--bg-hover); }
.prod-site.active { background:#f5f3ff; }
.prod-site.active:hover { background:#ede9fe; }
html.dark .prod-site.active { background: rgba(63, 118, 255, .14); }
html.dark .prod-site.active:hover { background: rgba(63, 118, 255, .2); }
.prod-site-ic { flex-shrink:0; width:26px; height:26px; border-radius:6px; background:var(--bg-hover); display:flex; align-items:center; justify-content:center; color:#9ca3af; }
.prod-site.active .prod-site-ic { color:var(--accent, #7c5cff); }
.prod-site-body { flex:1; min-width:0; }
.prod-site-name { font-size:13px; font-weight:500; color: var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prod-site-sub { font-size:11px; color: var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prod-site-del { position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:13px; line-height:1; padding:3px 5px; border-radius:5px; opacity:0; transition:opacity .12s; }
.prod-site:hover .prod-site-del { opacity:.55; }
.prod-site-del:hover { opacity:1; background:var(--bg-hover); }
.prod-main { flex:1; display:flex; flex-direction:column; min-width:0; }
.prod-topbar { display:flex; align-items:center; gap:12px; padding:16px 22px; border-bottom:1px solid var(--border); }
.prod-grid { flex:1; overflow-y:auto; padding:20px 22px; display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; align-content:start; }
.prod-card { border:1px solid var(--border); border-radius:12px; background:var(--bg-card); padding:10px; cursor:pointer; transition:.12s; }
.prod-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.08); border-color:var(--accent); }
.prod-thumb { height:150px; border-radius:8px; background:var(--bg-hover); display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:8px; }
.prod-thumb img { width:100%; height:100%; object-fit:cover; }
.prod-name { font-size:13px; font-weight:600; line-height:1.35; max-height:2.7em; overflow:hidden; }
.prod-meta { font-size:13px; margin-top:5px; color:var(--text-primary); }
.prod-tags { display:flex; gap:4px; flex-wrap:wrap; margin-top:7px; }
.prod-chip { font-size:10.5px; background:var(--bg-hover); border:1px solid var(--border); border-radius:10px; padding:1px 8px; color:var(--text-secondary); }
/* Products — table view */
.prod-table { width:100%; border-collapse:collapse; font-size:13px; }
.prod-table thead th { position:sticky; top:0; background:var(--bg-card); text-align:left; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); padding:6px 12px; border-bottom:1px solid var(--border); z-index:1; }
.prod-table td { padding:8px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.prod-row { cursor:pointer; transition:background .1s; }
.prod-row:hover { background:var(--bg-hover); }
.prod-row-thumb { width:40px; height:40px; border-radius:7px; background:var(--bg-hover); display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:18px; }
.prod-row-thumb img { width:100%; height:100%; object-fit:cover; }
.prod-row-name { font-weight:600; line-height:1.3; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prod-desc-cell { font-size:12px; color:var(--text-secondary); max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prod-cats { display:flex; gap:4px; flex-wrap:wrap; max-width:260px; }
.prod-cat-chip { font-size:10.5px; background:var(--bg-hover); border:1px solid var(--border); border-radius:10px; padding:1px 8px; color:var(--text-secondary); white-space:nowrap; max-width:150px; overflow:hidden; text-overflow:ellipsis; }
.prod-row a:hover { color:var(--accent)!important; }

/* ── On-site editor: element palette ── */
.os-pal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.os-pal { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 9px; border: 1px solid var(--border); border-radius: 11px; cursor: grab; background: var(--bg-card); transition: .13s; font-size: 11px; font-weight: 600; color: var(--text-secondary); text-align: center; user-select: none; }
.os-pal:hover { border-color: var(--accent); color: var(--text-primary); transform: translateY(-1px); box-shadow: 0 3px 12px rgba(0,0,0,.07); }
.os-pal:active { cursor: grabbing; }
.os-pal-ic { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--bg-hover); color: var(--text-secondary); }
.os-pal:hover .os-pal-ic { background: var(--accent); color: #fff; }

/* ══════════ Leads table — Asana-style skin (overrides the Plane grid above) ══════════
   Asana list view: white sticky header, left-aligned muted labels, and clearly
   visible grey separators between BOTH columns and rows; ~44px rows. */
.leads-tbl-wrap {
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.leads-tbl-wrap .am-table th {
  background: var(--bg-card); height: 42px; font-size: 13px; font-weight: 500; color: #6d6e6f;
  border-bottom: 1px solid #e3e3e6; border-right: 1px solid #e3e3e6; padding: 0 14px !important;
}
.leads-tbl-wrap .am-table th:hover { background: #f9f8f8; }
.leads-tbl-wrap .am-table td {
  height: 44px !important; max-height: 44px !important;
  font-size: 13.5px; color: #1e1f21;
  border-bottom: 1px solid #e3e3e6; border-right: 1px solid #e3e3e6;
  padding: 0 14px !important;
}
.leads-tbl-wrap .am-table th:last-child, .leads-tbl-wrap .am-table td:last-child { border-right: none; }
.leads-tbl-wrap .am-table td.crm-contact-cell { height: 44px !important; max-height: 44px !important; font-weight: 600; color: var(--text-primary); }
.leads-tbl-wrap .am-table tbody tr:hover { background: #f9f8f8; }
.leads-tbl-wrap .am-table tbody tr.lf-row-active { background: #f4f7ff !important; box-shadow: inset 2px 0 0 var(--accent); }
.leads-tbl-wrap .am-table tbody tr:last-child td { border-bottom: none; }
/* frozen leading columns follow the row hover so the freeze is invisible */
.leads-tbl-wrap .am-table td:nth-child(2) { box-shadow: none; }
.leads-tbl-wrap .am-table thead th:nth-child(1),
.leads-tbl-wrap .am-table thead th:nth-child(2),
.leads-tbl-wrap .am-table tr.lf-colhdr th:nth-child(1),
.leads-tbl-wrap .am-table tr.lf-colhdr th:nth-child(2) { background: var(--bg-card) !important; }
.leads-tbl-wrap .am-table tr.lf-colhdr th { border-top: none; }
.leads-tbl-wrap .am-table tr.lf-colhdr th.lf-colhdr-end { background: var(--bg-card); }
/* checkboxes */
.leads-tbl-wrap input[type="checkbox"] { accent-color: var(--text-primary); width: 15px; height: 15px; border-radius: 4px; cursor: pointer; }
/* status + tag pills — fully rounded, soft (outlined) like shadcn badges */
.lf-status-pill { border-radius: 9999px; padding: 4px 13px; font-weight: 600; font-size: 12px; }
.lf-status-subscribed { background: #f0fdf4; color: #16a34a; box-shadow: inset 0 0 0 1px #bbf7d0; }
.lf-status-unsubscribed { background: #fef2f2; color: #dc2626; box-shadow: inset 0 0 0 1px #fecaca; }
.leads-tbl-wrap .am-table td .lf-cell-select { border-radius: 9999px; font-weight: 600; padding: 4px 10px; }
.lf-status-select { border-radius: 9999px !important; font-weight: 600; }
/* rating stars — amber like the reference */
.leads-tbl-wrap .lf-star { color: #d4d4d8; }
.leads-tbl-wrap .lf-star-on { color: #f59e0b; }
/* group title bars breathe a little more */
.leads-tbl-wrap .am-table tr.lf-grp-hdr td { padding-top: 6px !important; }
/* inline editors stay invisible until interaction, slightly larger targets */
.leads-tbl-wrap .am-table td .lf-cell-inp { padding: 6px 8px; border-radius: 8px; font-size: 13.5px !important; }
/* scrollbar — thin + unobtrusive */
.leads-tbl-wrap::-webkit-scrollbar { height: 10px; width: 10px; }
.leads-tbl-wrap::-webkit-scrollbar-thumb { background: #e4e4e7; border-radius: 8px; border: 2px solid #fff; }
.leads-tbl-wrap::-webkit-scrollbar-thumb:hover { background: #d4d4d8; }
.leads-tbl-wrap::-webkit-scrollbar-track { background: transparent; }

/* Asana skin — ID-level overrides beating the older #leadsMainTable Monday rules */
#leadsMainTable td, #leadsMainTable th { border-right: 1px solid #e3e3e6; }
#leadsMainTable th:last-child, #leadsMainTable td:last-child { border-right: none; }
#leadsMainTable th { background: var(--bg-card) !important; color: #6d6e6f; font-weight: 500; font-size: 13px; text-align: left; height: 42px; padding: 0 14px !important; border-bottom: 1px solid #e3e3e6; }
#leadsMainTable td { height: 44px; max-height: 44px; font-size: 13.5px; color: #1e1f21; border-bottom: 1px solid #e3e3e6; padding: 0 14px !important; }
#leadsMainTable tbody tr[data-lead-id]:hover td { background: #f9f8f8; }

/* Click-to-sort table headers (delegated sorter at the end of app.js) */
.main-content table thead th { cursor: pointer; user-select: none; }
.fv-sort-ind { color: var(--accent, #6366f1); }

/* ── Users modal — split layout (rail + panes) ─────────────────────────────── */
.um-modal--split { width: min(880px, 94vw); max-width: 880px; display: flex; flex-direction: column; max-height: 88vh; }
.um-modal-body--split { display: flex; padding: 0 !important; overflow: hidden; flex: 1; min-height: 420px; }
.um-rail { width: 172px; flex-shrink: 0; border-right: 1px solid var(--border); padding: 12px 8px; display: flex; flex-direction: column; gap: 3px; background: var(--bg-page, rgba(0,0,0,.02)); }
.um-rail-item { display: flex; align-items: center; gap: 8px; border: none; background: none; text-align: left; padding: 9px 11px; border-radius: 8px; font-size: .82rem; color: var(--text-secondary); cursor: pointer; font-weight: 500; font-family: inherit; }
.um-rail-item span { flex: 1; }
.um-rail-item.on { background: var(--accent); color: #fff; }
.um-rail-item:not(.on):hover { background: var(--bg-hover); color: var(--text-primary); }
.um-rail-count { font-style: normal; font-size: .67rem; font-weight: 700; border-radius: 100px; padding: 1px 7px; background: rgba(255,255,255,.25); }
.um-rail-item:not(.on) .um-rail-count { background: var(--bg-card); color: var(--accent); border: 1px solid var(--border); }
.um-rail-count:empty { display: none; }
.um-panes { flex: 1; overflow: hidden; display: flex; min-width: 0; }
.um-pane { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.um-pane.hidden { display: none; }
.um-perm-search { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: .82rem; background: var(--bg-card); color: var(--text-primary); box-sizing: border-box; flex-shrink: 0; }
.um-modal--split .um-acct-picker { max-height: none; flex: 1; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.um-modal--split .um-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.um-summary { font-size: .74rem; color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .um-modal-body--split { flex-direction: column; }
  .um-rail { width: 100%; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .um-rail-item span { display: none; }
}

/* ── Email (Gmail reachout) — client layout + Gmail-style compose ─────────── */
.gm-shell { display: flex; gap: 0; width: 100%; height: calc(100vh - 158px); min-height: 420px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.gm-rail { width: 200px; flex-shrink: 0; padding: 14px 10px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; background: var(--bg-page); }
.gm-compose-btn { display: flex; align-items: center; gap: 9px; background: #c2e7ff; color: #001d35; border: none; border-radius: 14px; padding: 13px 18px; font-size: .86rem; font-weight: 600; cursor: pointer; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.15); font-family: inherit; }
.gm-compose-btn:hover { box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.gm-folder { display: flex; align-items: center; gap: 10px; border: none; background: none; text-align: left; padding: 8px 14px; border-radius: 0 100px 100px 0; font-size: .84rem; color: var(--text-secondary); cursor: pointer; font-family: inherit; }
.gm-folder span { flex: 1; }
.gm-folder.on { background: #d3e3fd33; color: var(--accent); font-weight: 700; }
.gm-folder:not(.on):hover { background: var(--bg-hover); }
.gm-folder em { font-style: normal; font-size: .7rem; font-weight: 700; }
.gm-rail-foot { margin-top: auto; font-size: .7rem; color: var(--text-muted); padding: 10px 6px 2px; }
.gm-rail-foot a { color: var(--accent); text-decoration: none; }
.gm-rail-acct { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 5px; }
/* Mailbox switcher at the top of the mail rail — which inbox am I reading. */
.gm-mbox-wrap { display: block; margin-bottom: 12px; }
.gm-mbox-lbl { display: block; font-size: .58rem; font-weight: 800; letter-spacing: .09em; color: var(--text-muted); margin: 0 0 4px 2px; }
.gm-mbox { width: 100%; max-width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); color: var(--text-primary); font-size: .78rem; font-weight: 600; font-family: inherit; cursor: pointer; }
.gm-mbox:hover { border-color: var(--accent); }
.gm-mbox:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.gm-mbox-def { display: block; width: 100%; margin-top: 5px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 7px; background: none; color: var(--text-muted); font-size: .64rem; font-weight: 700; font-family: inherit; cursor: pointer; text-align: center; }
.gm-mbox-def:hover { color: var(--accent); border-color: var(--accent); }
.gm-mbox-def.on { border-color: transparent; color: var(--accent); cursor: default; }
/* Inline variant — header rows (Sequences) put the picker beside the buttons. */
.gm-mbox-wrap.inline { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 0; }
.gm-mbox-wrap.inline .gm-mbox { width: auto; max-width: 210px; padding: 6px 9px; font-size: .74rem; }
.gm-mbox-wrap.inline .gm-mbox-def { width: auto; margin-top: 0; padding: 6px 9px; white-space: nowrap; }
.gm-main { flex: 1; padding: 16px 18px; overflow-y: auto; min-width: 0; }
.gm-empty { padding: 60px 24px; text-align: center; color: var(--text-muted); font-size: .85rem; }
.gm-list { display: flex; flex-direction: column; }
.gm-row { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: .8rem; }
.gm-row > div:first-of-type > div[style*="border-radius:50%"], .gm-row > div[style*="border-radius: 50%"] { transform: scale(.82); }
.gm-row .gm-row-snip { font-size: .74rem; }
.gm-row .gm-row-time { font-size: .7rem; flex: none; }
/* Gmail-style single line: fixed sender column, subject+snippet ellipsis */
.gm-row .gm-row-from { flex: 0 0 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-row .gm-row-mid { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* collapsed quoted-text toggle inside message bubbles */
.gm-qt { display: none; }
.gm-qt.open { display: block; }
.gm-qt-btn { background: var(--bg-hover); border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; font-size: .72rem; cursor: pointer; color: var(--text-muted); margin: 4px 0; }
.gm-row:hover { background: var(--bg-hover); }
/* Unread conversations — four stacked cues so they read at a glance in every
   Inbox tab: a dot column, a left accent bar, a faint tint, and bold text.
   Read rows keep an invisible dot so both align. */
.gm-row::before { content: ''; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.gm-row { border-left: 3px solid transparent; }
.gm-row.unread { background: rgba(59,130,246,.07); background: color-mix(in srgb, var(--accent) 6%, transparent); border-left-color: var(--accent); }
.gm-row.unread:hover { background: rgba(59,130,246,.13); background: color-mix(in srgb, var(--accent) 11%, transparent); }
.gm-row.unread::before { background: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.gm-row.unread .gm-row-from, .gm-row.unread .gm-row-subj { font-weight: 700; color: var(--text-primary); }
.gm-row.unread .gm-row-snip { color: var(--text-secondary); }
.gm-row.unread .gm-row-time { color: var(--accent); font-weight: 700; }
.gm-row-from { width: 170px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
/* Conversation message count, Gmail-style: a small muted number after the
   participant list ("me, Yael Lamdan 12"). */
.gm-row-cnt { display: inline-block; margin-inline-start: 5px; font-size: .7rem; font-weight: 700; color: var(--text-muted); }
.gm-row.unread .gm-row-cnt { color: var(--accent); }
.gm-row-mid { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-row-subj { color: var(--text-primary); }
.gm-row-snip { color: var(--text-muted); }
.gm-row-time { flex-shrink: 0; font-size: .72rem; color: var(--text-muted); }

/* Compose card — bottom-right like Gmail */
.gm-compose { position: fixed; right: 28px; bottom: 0; width: min(540px, 94vw); background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px 10px 0 0; box-shadow: 0 8px 40px rgba(0,0,0,.35); z-index: 1200; display: flex; flex-direction: column; max-height: 82vh; }
.gm-compose.hidden { display: none; }
.gm-compose-hd { display: flex; align-items: center; justify-content: space-between; background: #1f1f1f; color: #e8eaed; padding: 9px 14px; border-radius: 10px 10px 0 0; font-size: .84rem; font-weight: 600; }
.gm-hd-x { background: none; border: none; color: #e8eaed; cursor: pointer; font-size: .85rem; padding: 2px 6px; }
.gm-compose-row { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-bottom: 1px solid var(--border); }
.gm-compose-row input { flex: 1; border: none; outline: none; background: none; font-size: .84rem; color: var(--text-primary); font-family: inherit; }
.gm-lbl { font-size: .78rem; color: var(--text-muted); min-width: 30px; }
.gm-from-row { color: var(--text-secondary); }
.gm-ccbcc { font-size: .76rem; color: var(--text-muted); text-decoration: none; }
.gm-ccbcc:hover { color: var(--accent); }
.gm-body { flex: 1; min-height: 200px; max-height: 46vh; overflow-y: auto; padding: 12px 14px; font-size: .86rem; color: var(--text-primary); outline: none; line-height: 1.5; }
.gm-body a { color: var(--accent); }
.gm-compose-ft { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border); }
.gm-send-btn { background: #0b57d0; color: #fff; border: none; border-radius: 100px; padding: 9px 26px; font-size: .86rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.gm-send-btn:hover { background: #0842a0; }
.gm-send-btn:disabled { opacity: .6; cursor: default; }
.gm-fmt { display: flex; gap: 2px; }
.gm-fmt button { background: none; border: none; border-radius: 6px; padding: 5px 9px; cursor: pointer; color: var(--text-secondary); font-size: .82rem; }
.gm-fmt button:hover { background: var(--bg-hover); }
.gm-discard { margin-left: auto; background: none; border: none; cursor: pointer; font-size: .9rem; color: var(--text-muted); }
.gm-discard:hover { color: #ef4444; }
@media (max-width: 760px) {
  .gm-shell { flex-direction: column; }
  /* Wrap, don't scroll: with the mailbox picker on the strip, Compose started
     at x=304 on a 375px screen and Inbox/Sent/Trash sat entirely off-screen
     behind a horizontal scroll with no affordance. Picker gets its own line,
     Compose + folders the next one. */
  .gm-rail { width: 100%; flex-direction: row; align-items: center; flex-wrap: wrap; row-gap: 8px; column-gap: 6px; overflow-x: visible; border-right: none; border-bottom: 1px solid var(--border); box-sizing: border-box; padding: 10px; }
  /* line 1 picker + Compose, line 2 the folders, line 3 the secondary links */
  .gm-rail-foot { flex: 1 1 100%; margin: 0; white-space: nowrap; overflow-x: auto; }
  .gm-folder { border-radius: 100px; padding: 8px 12px; }
  .gm-compose { right: 0; width: 100vw; }
  /* The rail is a horizontal strip here — a block-level picker gets squeezed to
     a few unreadable pixels, so lay it out inline and drop its label. */
  .gm-mbox-wrap { display: flex; align-items: center; gap: 6px; margin: 0; flex: 1 1 150px; min-width: 0; }
  .gm-mbox-lbl { display: none; }
  .gm-mbox { width: auto; min-width: 0; max-width: none; flex: 1 1 auto; padding: 6px 9px; }
  .gm-compose-btn { margin-bottom: 0; flex: 0 0 auto; padding: 10px 14px; }
  .gm-mbox-def { width: auto; margin-top: 0; white-space: nowrap; padding: 6px 8px; }
  /* Master-detail: a 56% reading pane is ~210px on a phone, unusable for both
     panes — show the open email full-width and hide the list behind it. */
  .gm-reading .gm-list { display: none; }
  .gm-reading #gmPreviewHost { flex: 1 1 100% !important; max-width: 100% !important; border-left: none !important; }
}
/* Phone: the mail row can't hold sender + subject + snippet on one line — the
   subject collapsed to ~37px. Stack like the Gmail app: sender/time on top,
   subject + snippet underneath. Row actions can't rely on :hover on touch. */
/* Selectors are .gm-row-scoped on purpose: the desktop rules they override are
   themselves two-class (.gm-row .gm-row-from {flex:0 0 170px}), and a media
   query adds no specificity — a bare .gm-row-from here would lose. */
@media (max-width: 600px) {
  .gm-row { flex-wrap: wrap; row-gap: 1px; padding: 9px 12px; }
  .gm-row .gm-row-from { width: auto; flex: 1 1 auto; min-width: 0; order: 1; font-size: .82rem; }
  .gm-row .gm-row-acts { display: flex; order: 2; flex: 0 0 auto; }
  .gm-row .gm-row-acts button { padding: 8px 10px; font-size: 1rem; min-width: 38px; }
  .gm-row .gm-row-time { order: 3; flex: 0 0 auto; }
  .gm-row .gm-row-mid { flex: 1 1 100%; order: 4; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
  .gm-row .gm-row-subj { font-weight: 600; }
}

/* Email inbox row actions */
.gm-row-acts { display: none; gap: 2px; flex-shrink: 0; }
.gm-row:hover .gm-row-acts { display: flex; }
.gm-row-acts button { background: none; border: none; cursor: pointer; font-size: .8rem; padding: 3px 6px; border-radius: 6px; color: var(--text-secondary); }
.gm-row-acts button:hover { background: var(--bg-card); }

/* ── CRM record timeline (HubSpot-style merged activity feed) ─────────────── */
/* Soft timeline: borderless cards on colored dots — pastel per activity kind */
/* Sticky day header as a quiet label + hairline — bg MUST match the panel
   (.crm-panel-center is --bg-hover); --bg-card here rendered as a dark strip. */
.crm-tl-day { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; background: var(--bg-hover); padding: 10px 2px 6px; font-size: .64rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.crm-tl-day::after { content: ''; flex: 1; height: 1px; background: var(--border); opacity: .6; }
.crm-tl-item { display: flex; gap: 10px; padding: 0; margin-bottom: 9px; border: none; }
.crm-tl-ic { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: #E6F1FB; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.crm-tl-item[data-kind="call"] .crm-tl-ic, .crm-tl-item[data-kind="sms"] .crm-tl-ic, .crm-tl-item[data-kind="meeting"] .crm-tl-ic { background: #E1F5EE; }
.crm-tl-item[data-kind="task"] .crm-tl-ic { background: #FAEEDA; }
.crm-tl-item[data-kind="email"] .crm-tl-ic, .crm-tl-item[data-kind="linkedin"] .crm-tl-ic { background: #FBEAF0; }
.crm-tl-item[data-kind="page_view"] .crm-tl-ic, .crm-tl-item[data-kind="product_view"] .crm-tl-ic, .crm-tl-item[data-kind="add_to_cart"] .crm-tl-ic,
.crm-tl-item[data-kind="purchase"] .crm-tl-ic, .crm-tl-item[data-kind="checkout"] .crm-tl-ic, .crm-tl-item[data-kind="form"] .crm-tl-ic, .crm-tl-item[data-kind="lead"] .crm-tl-ic { background: #E6F1FB; }
.crm-tl-item[data-kind="status"] .crm-tl-ic { background: #F1EFE8; }
html.dark .crm-tl-ic { background: #14304a; }
html.dark .crm-tl-item[data-kind="call"] .crm-tl-ic, html.dark .crm-tl-item[data-kind="sms"] .crm-tl-ic, html.dark .crm-tl-item[data-kind="meeting"] .crm-tl-ic { background: #123f33; }
html.dark .crm-tl-item[data-kind="task"] .crm-tl-ic { background: #3f2b16; }
html.dark .crm-tl-item[data-kind="email"] .crm-tl-ic, html.dark .crm-tl-item[data-kind="linkedin"] .crm-tl-ic { background: #3f1f2c; }
html.dark .crm-tl-item[data-kind="page_view"] .crm-tl-ic, html.dark .crm-tl-item[data-kind="product_view"] .crm-tl-ic, html.dark .crm-tl-item[data-kind="add_to_cart"] .crm-tl-ic,
html.dark .crm-tl-item[data-kind="purchase"] .crm-tl-ic, html.dark .crm-tl-item[data-kind="checkout"] .crm-tl-ic, html.dark .crm-tl-item[data-kind="form"] .crm-tl-ic, html.dark .crm-tl-item[data-kind="lead"] .crm-tl-ic { background: #14304a; }
html.dark .crm-tl-item[data-kind="status"] .crm-tl-ic { background: #2C2C2A; }
.crm-tl-body { flex: 1; min-width: 0; background: var(--bg-hover); border-radius: 10px; padding: 8px 12px; }
.crm-tl-head { display: flex; align-items: baseline; gap: 8px; font-size: .8rem; color: var(--text-primary); }
.crm-tl-head b { font-weight: 600; }
.crm-tl-who { font-size: .7rem; color: var(--text-muted); }
.crm-tl-time { margin-left: auto; font-size: .68rem; color: var(--text-muted); flex: none; }
.crm-tl-text { margin-top: 3px; font-size: .78rem; color: var(--text-secondary); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

/* ── Deal pipeline board (HubSpot-style kanban) ───────────────────────────── */
.crm-db-wrap { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 14px; align-items: flex-start; }
.crm-db-col { flex: 0 0 264px; width: 264px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 260px); transition: background .12s, border-color .12s; }
.crm-db-col.over { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: var(--accent); }
.crm-db-col-hd { padding: 9px 12px 8px; border-radius: 12px 12px 0 0; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.crm-db-col-name { font-size: .82rem; font-weight: 800; color: var(--text-primary); }
.crm-db-col-sub { font-size: .7rem; color: var(--text-muted); margin-top: 1px; }
.crm-db-col-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 60px; }
.crm-db-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px; padding: 9px 10px; cursor: pointer; transition: box-shadow .12s, transform .06s; }
.crm-db-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.10); border-color: var(--accent); }
.crm-db-card:active { transform: scale(.99); }
.crm-db-card-name { font-size: .82rem; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-db-card-val { font-size: .86rem; font-weight: 800; color: #16a34a; margin-top: 2px; }
.crm-db-noval { color: var(--text-muted); font-weight: 500; font-size: .74rem; }
.crm-db-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; font-size: .68rem; color: var(--text-muted); }
.crm-db-prob { margin-left: auto; background: var(--bg-hover); border-radius: 20px; padding: 1px 7px; font-weight: 700; }
.crm-db-empty { color: var(--text-muted); font-size: .72rem; text-align: center; padding: 18px 6px; border: 1.5px dashed var(--border); border-radius: 9px; }
.crm-db-viewtog { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-right: 8px; }
.crm-db-viewbtn { background: var(--bg-card); border: 0; padding: 5px 11px; font-size: .74rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; }
.crm-db-viewbtn.on { background: var(--accent); color: #fff; }

/* ── Saved-view tabs above the leads table (HubSpot-style) ────────────────── */
.lf-viewtabs { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.lf-viewtab { position: relative; background: none; border: 0; border-bottom: 2px solid transparent; padding: 7px 13px; font-size: .8rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.lf-viewtab:hover { color: var(--text-primary); background: var(--bg-hover); border-radius: 7px 7px 0 0; }
.lf-viewtab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 800; }
.lf-viewtab-x { margin-left: 7px; opacity: 0; font-size: .7rem; color: var(--text-muted); }
.lf-viewtab:hover .lf-viewtab-x { opacity: .6; }
.lf-viewtab-x:hover { opacity: 1 !important; color: #dc2626; }

/* ── Lifecycle + tag cells in the leads table ─────────────────────────────── */
.lf-tagcell { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; cursor: pointer; min-height: 22px; padding: 2px; border: 1px solid transparent; border-radius: 6px; }
.lf-tagcell:hover { border-color: var(--border); background: var(--bg-page); }
.lf-tag-add { font-size: .7rem; color: var(--text-muted); }

/* ── HubSpot-style alignment for the CRM surfaces ──────────────────────────
   Scoped to .crm-* and the leads table so the rest of the app is untouched.
   HubSpot's look is a slate-blue text palette, tighter radii, hairline
   dividers and small uppercase field labels — brand accent stays ours. */
:root {
  --hs-text: #33475b;      /* headings + values            */
  --hs-text-2: #516f90;    /* labels + supporting text     */
  --hs-line: #dfe3eb;      /* hairline divider             */
  --hs-line-2: #cbd6e2;    /* card border                  */
  --hs-surface: #f5f8fa;   /* page tint behind cards       */
}
html.dark {
  --hs-text: #e2e8f0;
  --hs-text-2: #94a3b8;
  --hs-line: rgba(148,163,184,.18);
  --hs-line-2: rgba(148,163,184,.28);
  --hs-surface: rgba(148,163,184,.06);
}
.crm-card { border-radius: 8px; border-color: var(--hs-line-2); box-shadow: none; }
.crm-table th { background: var(--hs-surface); color: var(--hs-text-2); font-size: .68rem; letter-spacing: .7px; border-bottom: 1px solid var(--hs-line-2); }
.crm-table td { border-bottom: 1px solid var(--hs-line); color: var(--hs-text); }
.crm-name-link { color: #0091ae; font-weight: 600; }      /* HubSpot's link teal */
.crm-name-link:hover { text-decoration: underline; }
.crm-pl-field-label { color: var(--hs-text-2); font-size: .67rem; letter-spacing: .5px; }
.crm-pl-section-title { color: var(--hs-text); font-size: .74rem; text-transform: uppercase; letter-spacing: .6px; }
.crm-panel-left, .crm-panel-right { background: var(--hs-surface); }
.crm-pc-tab { color: var(--hs-text-2); }
.crm-pc-tab.active { color: var(--hs-text); }
/* Deal board + saved-view tabs pick up the same palette */
.crm-db-col { border-color: var(--hs-line-2); }
.crm-db-col-hd { border-bottom-color: var(--hs-line-2); }
.crm-db-card { border-color: var(--hs-line-2); border-radius: 6px; }
.crm-db-col-name { color: var(--hs-text); }
.crm-db-col-sub, .crm-db-card-meta { color: var(--hs-text-2); }
.lf-viewtabs { border-bottom-color: var(--hs-line-2); }
.lf-viewtab { color: var(--hs-text-2); }
.crm-tl-day { color: var(--hs-text-2); letter-spacing: .7px; }
.crm-tl-item { border-bottom-color: var(--hs-line); }
.crm-tl-head { color: var(--hs-text); }
.crm-pl-name { font-size: .95rem; font-weight: 600; color: var(--hs-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Denser record sidebar — HubSpot fits far more above the fold */
.crm-panel-left .crm-pl-field { margin-bottom: 7px; }
.crm-pl-field-label { margin-bottom: 1px; }
.crm-pl-section-title { margin-top: 12px !important; margin-bottom: 5px; padding-bottom: 4px; border-bottom: 1px solid var(--hs-line); }

/* ── Record highlights strip + collapsible sections ───────────────────────── */
.crm-hl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 10px 0 12px; }
.crm-hl-tile { background: var(--bg-card); border: 1px solid var(--hs-line-2); border-radius: 6px; padding: 6px 9px; min-width: 0; }
.crm-hl-k { font-size: .62rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--hs-text-2); }
.crm-hl-v { font-size: .84rem; font-weight: 600; color: var(--hs-text); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-sec-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 5px; }
.crm-sec-toggle:hover { color: var(--accent); }
.crm-sec-chev { font-size: .6rem; color: var(--hs-text-2); transition: transform .15s; display: inline-block; }
.crm-pl-section-title.collapsed .crm-sec-chev { transform: rotate(-90deg); }

/* ── Inline previews on association cards ─────────────────────────────────── */
.crm-pr-prev { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.crm-pr-prev-chip { font-size: .64rem; font-weight: 600; color: var(--hs-text-2); background: var(--hs-surface); border: 1px solid var(--hs-line); border-radius: 20px; padding: 1px 7px; white-space: nowrap; }
.crm-pr-prev-chip.accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* ── Contact panel: readable notes, compact details, tab actions ──────────── */
/* The note cluster hardcoded light-theme slate (#334155 text on #e2e8f0
   borders), so in dark mode note text rendered near-black on a dark card.
   Map it onto the theme-aware --hs-* palette instead. */
.crm-note-card { border-color: var(--hs-line-2); background: var(--bg-card); }
.crm-note-author { color: var(--hs-text); }
.crm-note-text { color: var(--hs-text); }
.crm-notes-date-group { color: var(--hs-text-2); }
.crm-notes-empty, .crm-pr-empty { color: var(--hs-text-2); }
.crm-note-menu, .crm-note-editor-wrap, .crm-note-textarea, .crm-note-cancel-btn { border-color: var(--hs-line-2); }
.crm-note-menu-item { color: var(--hs-text); }
.crm-task-row { border-bottom-color: var(--hs-line); }
/* :hover was still hardcoded slate — in dark mode the pencil faded IN on card
   hover and then vanished the moment the cursor reached it. */
.crm-note-menu-btn:hover, .crm-note-editor-close:hover { color: var(--hs-text); }
/* Right sidebar (now also home to Predictions): linked Company/Deal/Contact
   names were #1e293b on a dark card — 1.2:1, effectively blank. */
.crm-pr-entity-name { color: var(--hs-text); }
.crm-panel-right { border-left-color: var(--hs-line); }
.crm-panel-left { border-right-color: var(--hs-line); }
.crm-pr-section-header { border-bottom-color: var(--hs-line); }
#crmActivitySearch { color: var(--hs-text); background: var(--bg-card); }
html.dark .crm-note-card.pinned { background: rgba(251,191,36,.09); border-color: rgba(251,191,36,.45); }
html.dark .crm-note-menu-item.danger:hover { background: rgba(239,68,68,.14); }

/* Hover a note → ✎ appears and the text itself becomes click-to-edit. */
.crm-note-text { padding: 2px 6px; margin: -2px -6px; cursor: text; border-radius: 6px; transition: background .12s; }
.crm-note-edit-btn { opacity: 0; transition: opacity .12s; }
.crm-note-card:hover .crm-note-edit-btn { opacity: 1; }
.crm-note-card:hover .crm-note-text { background: var(--hs-surface); }
.crm-note-text[data-editing="1"] { background: none !important; cursor: default; white-space: normal; }
.crm-note-inline-ta {
  width: 100%; box-sizing: border-box; min-height: 74px; padding: 8px 10px;
  border: 1px solid var(--accent); border-radius: 8px; font-family: inherit;
  font-size: .83rem; line-height: 1.55; resize: vertical; outline: none;
  background: var(--bg-card); color: var(--hs-text);
}
.crm-note-inline-ft { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.crm-note-inline-ft button { font-size: .76rem; padding: 4px 12px; }

/* Activity bar: breathing room under the search field + the primary action. */
.crm-pc-activity-bar { padding: 14px 20px 12px; border-bottom-color: var(--hs-line); }
.crm-pc-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-pc-actions .crm-create-note-btn { margin-left: 0; }
.crm-pc-quick {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
  border: 1px solid var(--hs-line-2); border-radius: 100px; background: var(--bg-card);
  color: var(--hs-text-2); font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: background .12s, color .12s; white-space: nowrap;
}
.crm-pc-quick:hover { background: var(--hs-surface); color: var(--hs-text); }

/* Meetings/Calls rows: the icon pill is CSS-driven so the dark-mode rule can
   win (an inline background beats every selector and left a near-white glyph
   on pale mint). .up = an upcoming meeting / a real dialled call. */
.crm-task-row .crm-tl-ic { background: var(--hs-surface); color: var(--hs-text-2); }
.crm-task-row .crm-tl-ic.up { background: #E1F5EE; color: #0f766e; }
html.dark .crm-task-row .crm-tl-ic.up { background: #123f33; color: #9FE1CB; }

/* Contact details: denser rows, short fields paired two-up. */
.crm-panel-left .crm-pl-field { margin-bottom: 4px; }
.crm-pl-field-value { padding: 3px 7px; font-size: .82rem; }
.crm-pl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; align-items: end; }
.crm-pl-grid .crm-pl-field-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-pl-grid .crm-pl-field { min-width: 0; }
.crm-pl-grid .crm-pl-field-value, .crm-pl-grid input, .crm-pl-grid select { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Indeterminate variant of the Ads progress bar (used while reading the DB cache) */
.am-bar-indeterminate { width: 35% !important; animation: amBarSlide 1.2s ease-in-out infinite; }
@keyframes amBarSlide { 0% { margin-left: 0; } 50% { margin-left: 65%; } 100% { margin-left: 0; } }

/* ── fvi: mask-based mono icon set (emoji replacement, colorable via currentColor) ── */
.fvi{display:inline-block;width:1em;height:1em;background:currentColor;vertical-align:-0.12em;flex-shrink:0;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-position:center;mask-repeat:no-repeat;mask-size:contain}
.fvi-dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:0.02em}
.fvi-archive{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%2220%22%20height%3D%225%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M4%208v11a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8%22%2F%3E%3Cpath%20d%3D%22M10%2012h4%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%2220%22%20height%3D%225%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M4%208v11a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8%22%2F%3E%3Cpath%20d%3D%22M10%2012h4%22%2F%3E%3C%2Fsvg%3E")}
.fvi-award{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%226%22%2F%3E%3Cpath%20d%3D%22M15.477%2012.89%2017%2022l-5-3-5%203%201.523-9.11%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%226%22%2F%3E%3Cpath%20d%3D%22M15.477%2012.89%2017%2022l-5-3-5%203%201.523-9.11%22%2F%3E%3C%2Fsvg%3E")}
.fvi-bag{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202%203%206v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6l-3-4z%22%2F%3E%3Cpath%20d%3D%22M3%206h18%22%2F%3E%3Cpath%20d%3D%22M16%2010a4%204%200%200%201-8%200%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202%203%206v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6l-3-4z%22%2F%3E%3Cpath%20d%3D%22M3%206h18%22%2F%3E%3Cpath%20d%3D%22M16%2010a4%204%200%200%201-8%200%22%2F%3E%3C%2Fsvg%3E")}
.fvi-bell{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%208a6%206%200%200%201%2012%200c0%207%203%209%203%209H3s3-2%203-9%22%2F%3E%3Cpath%20d%3D%22M10.3%2021a1.94%201.94%200%200%200%203.4%200%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%208a6%206%200%200%201%2012%200c0%207%203%209%203%209H3s3-2%203-9%22%2F%3E%3Cpath%20d%3D%22M10.3%2021a1.94%201.94%200%200%200%203.4%200%22%2F%3E%3C%2Fsvg%3E")}
.fvi-book{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2019.5v-15A2.5%202.5%200%200%201%206.5%202H20v20H6.5a2.5%202.5%200%200%201%200-5H20%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2019.5v-15A2.5%202.5%200%200%201%206.5%202H20v20H6.5a2.5%202.5%200%200%201%200-5H20%22%2F%3E%3C%2Fsvg%3E")}
.fvi-box{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2016V8a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016z%22%2F%3E%3Cpolyline%20points%3D%223.29%207%2012%2012%2020.71%207%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2222%22%20x2%3D%2212%22%20y2%3D%2212%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2016V8a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016z%22%2F%3E%3Cpolyline%20points%3D%223.29%207%2012%2012%2020.71%207%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2222%22%20x2%3D%2212%22%20y2%3D%2212%22%2F%3E%3C%2Fsvg%3E")}
.fvi-building{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%2216%22%20height%3D%2220%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%2022v-4h6v4%22%2F%3E%3Cpath%20d%3D%22M8%206h.01M16%206h.01M12%206h.01M12%2010h.01M12%2014h.01M16%2010h.01M16%2014h.01M8%2010h.01M8%2014h.01%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%2216%22%20height%3D%2220%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%2022v-4h6v4%22%2F%3E%3Cpath%20d%3D%22M8%206h.01M16%206h.01M12%206h.01M12%2010h.01M12%2014h.01M16%2010h.01M16%2014h.01M8%2010h.01M8%2014h.01%22%2F%3E%3C%2Fsvg%3E")}
.fvi-bulb{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2014c.2-1%20.7-1.7%201.5-2.5A7%207%200%201%200%205%209c0%201%20.5%202.5%201.5%203.5.7.7%201.3%201.5%201.5%202.5%22%2F%3E%3Cpath%20d%3D%22M9%2018h6%22%2F%3E%3Cpath%20d%3D%22M10%2022h4%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2014c.2-1%20.7-1.7%201.5-2.5A7%207%200%201%200%205%209c0%201%20.5%202.5%201.5%203.5.7.7%201.3%201.5%201.5%202.5%22%2F%3E%3Cpath%20d%3D%22M9%2018h6%22%2F%3E%3Cpath%20d%3D%22M10%2022h4%22%2F%3E%3C%2Fsvg%3E")}
.fvi-calendar{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%2216%22%20y1%3D%222%22%20x2%3D%2216%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%228%22%20y1%3D%222%22%20x2%3D%228%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%2216%22%20y1%3D%222%22%20x2%3D%2216%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%228%22%20y1%3D%222%22%20x2%3D%228%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%223%22%20y1%3D%2210%22%20x2%3D%2221%22%20y2%3D%2210%22%2F%3E%3C%2Fsvg%3E")}
.fvi-camera{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.5%204h-5L7%207H4a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V9a2%202%200%200%200-2-2h-3l-2.5-3z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.5%204h-5L7%207H4a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V9a2%202%200%200%200-2-2h-3l-2.5-3z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E")}
.fvi-card{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%2222%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%221%22%20y1%3D%2210%22%20x2%3D%2223%22%20y2%3D%2210%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%2222%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%221%22%20y1%3D%2210%22%20x2%3D%2223%22%20y2%3D%2210%22%2F%3E%3C%2Fsvg%3E")}
.fvi-cart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2221%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2221%22%20r%3D%221%22%2F%3E%3Cpath%20d%3D%22M2.05%202.05h2l2.66%2012.42a2%202%200%200%200%202%201.58h9.78a2%202%200%200%200%201.95-1.57l1.65-7.43H5.12%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2221%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2221%22%20r%3D%221%22%2F%3E%3Cpath%20d%3D%22M2.05%202.05h2l2.66%2012.42a2%202%200%200%200%202%201.58h9.78a2%202%200%200%200%201.95-1.57l1.65-7.43H5.12%22%2F%3E%3C%2Fsvg%3E")}
.fvi-chart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203v18h18%22%2F%3E%3Cpath%20d%3D%22M18%2017V9%22%2F%3E%3Cpath%20d%3D%22M13%2017V5%22%2F%3E%3Cpath%20d%3D%22M8%2017v-3%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203v18h18%22%2F%3E%3Cpath%20d%3D%22M18%2017V9%22%2F%3E%3Cpath%20d%3D%22M13%2017V5%22%2F%3E%3Cpath%20d%3D%22M8%2017v-3%22%2F%3E%3C%2Fsvg%3E")}
.fvi-checkC{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2011.08V12a10%2010%200%201%201-5.93-9.14%22%2F%3E%3Cpolyline%20points%3D%2222%204%2012%2014.01%209%2011.01%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2011.08V12a10%2010%200%201%201-5.93-9.14%22%2F%3E%3Cpolyline%20points%3D%2222%204%2012%2014.01%209%2011.01%22%2F%3E%3C%2Fsvg%3E")}
.fvi-clipboard{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%228%22%20height%3D%224%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%228%22%20height%3D%224%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%22%2F%3E%3C%2Fsvg%3E")}
.fvi-clock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpolyline%20points%3D%2212%206%2012%2012%2016%2014%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpolyline%20points%3D%2212%206%2012%2012%2016%2014%22%2F%3E%3C%2Fsvg%3E")}
.fvi-download{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%2F%3E%3Cpolyline%20points%3D%227%2010%2012%2015%2017%2010%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2215%22%20x2%3D%2212%22%20y2%3D%223%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%2F%3E%3Cpolyline%20points%3D%227%2010%2012%2015%2017%2010%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2215%22%20x2%3D%2212%22%20y2%3D%223%22%2F%3E%3C%2Fsvg%3E")}
.fvi-edit{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%203a2.85%202.83%200%201%201%204%204L7.5%2020.5%202%2022l1.5-5.5Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%203a2.85%202.83%200%201%201%204%204L7.5%2020.5%202%2022l1.5-5.5Z%22%2F%3E%3C%2Fsvg%3E")}
.fvi-eye{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012s3-7%2010-7%2010%207%2010%207-3%207-10%207-10-7-10-7z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012s3-7%2010-7%2010%207%2010%207-3%207-10%207-10-7-10-7z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E")}
.fvi-file{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7z%22%2F%3E%3Cpath%20d%3D%22M14%202v4a2%202%200%200%200%202%202h4%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7z%22%2F%3E%3Cpath%20d%3D%22M14%202v4a2%202%200%200%200%202%202h4%22%2F%3E%3C%2Fsvg%3E")}
.fvi-flame{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.5%2014.5A2.5%202.5%200%200%200%2011%2012c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054%202-6%20.5%202.5%202%204.9%204%206.5%202%201.6%203%203.5%203%205.5a7%207%200%201%201-14%200c0-1.153.433-2.294%201-3a2.5%202.5%200%200%200%202.5%202.5z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.5%2014.5A2.5%202.5%200%200%200%2011%2012c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054%202-6%20.5%202.5%202%204.9%204%206.5%202%201.6%203%203.5%203%205.5a7%207%200%201%201-14%200c0-1.153.433-2.294%201-3a2.5%202.5%200%200%200%202.5%202.5z%22%2F%3E%3C%2Fsvg%3E")}
.fvi-flask{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%202v7.31%22%2F%3E%3Cpath%20d%3D%22M14%209.3V2%22%2F%3E%3Cpath%20d%3D%22M8.5%202h7%22%2F%3E%3Cpath%20d%3D%22M14%209.3a6.5%206.5%200%201%201-4%200%22%2F%3E%3Cpath%20d%3D%22M5.52%2016h12.96%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%202v7.31%22%2F%3E%3Cpath%20d%3D%22M14%209.3V2%22%2F%3E%3Cpath%20d%3D%22M8.5%202h7%22%2F%3E%3Cpath%20d%3D%22M14%209.3a6.5%206.5%200%201%201-4%200%22%2F%3E%3Cpath%20d%3D%22M5.52%2016h12.96%22%2F%3E%3C%2Fsvg%3E")}
.fvi-folder{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2020a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.9a2%202%200%200%201-1.69-.9L9.6%203.9A2%202%200%200%200%207.93%203H4a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2020a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.9a2%202%200%200%201-1.69-.9L9.6%203.9A2%202%200%200%200%207.93%203H4a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202Z%22%2F%3E%3C%2Fsvg%3E")}
.fvi-gear{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M12%201v4M12%2019v4M4.2%204.2l2.9%202.9M16.9%2016.9l2.9%202.9M1%2012h4M19%2012h4M4.2%2019.8l2.9-2.9M16.9%207.1l2.9-2.9%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M12%201v4M12%2019v4M4.2%204.2l2.9%202.9M16.9%2016.9l2.9%202.9M1%2012h4M19%2012h4M4.2%2019.8l2.9-2.9M16.9%207.1l2.9-2.9%22%2F%3E%3C%2Fsvg%3E")}
.fvi-gift{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%2218%22%20height%3D%224%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M12%208v13%22%2F%3E%3Cpath%20d%3D%22M19%2012v7a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2v-7%22%2F%3E%3Cpath%20d%3D%22M7.5%208a2.5%202.5%200%200%201%200-5A4.8%208%200%200%201%2012%208a4.8%208%200%200%201%204.5-5%202.5%202.5%200%200%201%200%205%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%2218%22%20height%3D%224%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M12%208v13%22%2F%3E%3Cpath%20d%3D%22M19%2012v7a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2v-7%22%2F%3E%3Cpath%20d%3D%22M7.5%208a2.5%202.5%200%200%201%200-5A4.8%208%200%200%201%2012%208a4.8%208%200%200%201%204.5-5%202.5%202.5%200%200%201%200%205%22%2F%3E%3C%2Fsvg%3E")}
.fvi-globe{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%202a14.5%2014.5%200%200%200%200%2020%2014.5%2014.5%200%200%200%200-20%22%2F%3E%3Cpath%20d%3D%22M2%2012h20%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%202a14.5%2014.5%200%200%200%200%2020%2014.5%2014.5%200%200%200%200-20%22%2F%3E%3Cpath%20d%3D%22M2%2012h20%22%2F%3E%3C%2Fsvg%3E")}
.fvi-heart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2014c1.49-1.46%203-3.21%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.76%200-3%20.5-4.5%202-1.5-1.5-2.74-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.3%201.5%204.05%203%205.5l7%207Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2014c1.49-1.46%203-3.21%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.76%200-3%20.5-4.5%202-1.5-1.5-2.74-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.3%201.5%204.05%203%205.5l7%207Z%22%2F%3E%3C%2Fsvg%3E")}
.fvi-image{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22m21%2015-3.086-3.086a2%202%200%200%200-2.828%200L6%2021%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22m21%2015-3.086-3.086a2%202%200%200%200-2.828%200L6%2021%22%2F%3E%3C%2Fsvg%3E")}
.fvi-link{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22%2F%3E%3Cpath%20d%3D%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22%2F%3E%3Cpath%20d%3D%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22%2F%3E%3C%2Fsvg%3E")}
.fvi-lock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%2211%22%20width%3D%2218%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%2211%22%20width%3D%2218%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22%2F%3E%3C%2Fsvg%3E")}
.fvi-mail{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m22%207-10%206L2%207%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m22%207-10%206L2%207%22%2F%3E%3C%2Fsvg%3E")}
.fvi-megaphone{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2011%2018-5v12L3%2014v-3z%22%2F%3E%3Cpath%20d%3D%22M11.6%2016.8a3%203%200%201%201-5.8-1.6%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2011%2018-5v12L3%2014v-3z%22%2F%3E%3Cpath%20d%3D%22M11.6%2016.8a3%203%200%201%201-5.8-1.6%22%2F%3E%3C%2Fsvg%3E")}
.fvi-money{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%2223%22%2F%3E%3Cpath%20d%3D%22M17%205H9.5a3.5%203.5%200%200%200%200%207h5a3.5%203.5%200%200%201%200%207H6%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%2223%22%2F%3E%3Cpath%20d%3D%22M17%205H9.5a3.5%203.5%200%200%200%200%207h5a3.5%203.5%200%200%201%200%207H6%22%2F%3E%3C%2Fsvg%3E")}
.fvi-monitor{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%228%22%20y1%3D%2221%22%20x2%3D%2216%22%20y2%3D%2221%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2217%22%20x2%3D%2212%22%20y2%3D%2221%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cline%20x1%3D%228%22%20y1%3D%2221%22%20x2%3D%2216%22%20y2%3D%2221%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2217%22%20x2%3D%2212%22%20y2%3D%2221%22%2F%3E%3C%2Fsvg%3E")}
.fvi-moon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a6%206%200%200%200%209%209%209%209%200%201%201-9-9Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a6%206%200%200%200%209%209%209%209%200%201%201-9-9Z%22%2F%3E%3C%2Fsvg%3E")}
.fvi-msg{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7.9%2020A9%209%200%201%200%204%2016.1L2%2022z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7.9%2020A9%209%200%201%200%204%2016.1L2%2022z%22%2F%3E%3C%2Fsvg%3E")}
.fvi-palette{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2213.5%22%20cy%3D%226.5%22%20r%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2210.5%22%20r%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%227.5%22%20r%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2212.5%22%20r%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M12%202C6.5%202%202%206.5%202%2012s4.5%2010%2010%2010c.926%200%201.648-.746%201.648-1.688%200-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64%201.64%200%200%201%201.668-1.668h1.996c3.051%200%205.555-2.503%205.555-5.554C21.965%206.012%2017.461%202%2012%202z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2213.5%22%20cy%3D%226.5%22%20r%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2210.5%22%20r%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%227.5%22%20r%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2212.5%22%20r%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M12%202C6.5%202%202%206.5%202%2012s4.5%2010%2010%2010c.926%200%201.648-.746%201.648-1.688%200-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64%201.64%200%200%201%201.668-1.668h1.996c3.051%200%205.555-2.503%205.555-5.554C21.965%206.012%2017.461%202%2012%202z%22%2F%3E%3C%2Fsvg%3E")}
.fvi-pause{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%224%22%20height%3D%2216%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%224%22%20width%3D%224%22%20height%3D%2216%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%224%22%20height%3D%2216%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%224%22%20width%3D%224%22%20height%3D%2216%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E")}
.fvi-phone{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%222%22%20width%3D%2214%22%20height%3D%2220%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%2018h.01%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%222%22%20width%3D%2214%22%20height%3D%2220%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%2018h.01%22%2F%3E%3C%2Fsvg%3E")}
.fvi-pin{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E")}
.fvi-plane{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17.8%2019.2%2016%2011l3.5-3.5C21%206%2021.5%204%2021%203c-1-.5-3%200-4.5%201.5L13%208%204.8%206.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1%201%20.3%201.3L9%2012l-2%203H4l-1%201%203%202%202%203%201-1v-3l3-2%203.5%205.3c.3.4.8.5%201.3.3l.5-.2c.4-.3.6-.7.5-1.2z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17.8%2019.2%2016%2011l3.5-3.5C21%206%2021.5%204%2021%203c-1-.5-3%200-4.5%201.5L13%208%204.8%206.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1%201%20.3%201.3L9%2012l-2%203H4l-1%201%203%202%202%203%201-1v-3l3-2%203.5%205.3c.3.4.8.5%201.3.3l.5-.2c.4-.3.6-.7.5-1.2z%22%2F%3E%3C%2Fsvg%3E")}
.fvi-plug{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022v-5%22%2F%3E%3Cpath%20d%3D%22M9%208V2M15%208V2%22%2F%3E%3Cpath%20d%3D%22M18%208v5a4%204%200%200%201-4%204h-4a4%204%200%200%201-4-4V8Z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022v-5%22%2F%3E%3Cpath%20d%3D%22M9%208V2M15%208V2%22%2F%3E%3Cpath%20d%3D%22M18%208v5a4%204%200%200%201-4%204h-4a4%204%200%200%201-4-4V8Z%22%2F%3E%3C%2Fsvg%3E")}
.fvi-robot{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%2216%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%208V4%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%222%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%2013v2M15%2013v2%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%2216%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%208V4%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%222%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%2013v2M15%2013v2%22%2F%3E%3C%2Fsvg%3E")}
.fvi-rocket{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%2016.5c-1.5%201.26-2%205-2%205s3.74-.5%205-2c.71-.84.7-2.13-.09-2.91a2.18%202.18%200%200%200-2.91-.09z%22%2F%3E%3Cpath%20d%3D%22m12%2015-3-3a22%2022%200%200%201%202-3.95A12.88%2012.88%200%200%201%2022%202c0%202.72-.78%207.5-6%2011a22.35%2022.35%200%200%201-4%202z%22%2F%3E%3Cpath%20d%3D%22M9%2012H4s.55-3.03%202-4c1.62-1.08%205%200%205%200%22%2F%3E%3Cpath%20d%3D%22M12%2015v5s3.03-.55%204-2c1.08-1.62%200-5%200-5%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%2016.5c-1.5%201.26-2%205-2%205s3.74-.5%205-2c.71-.84.7-2.13-.09-2.91a2.18%202.18%200%200%200-2.91-.09z%22%2F%3E%3Cpath%20d%3D%22m12%2015-3-3a22%2022%200%200%201%202-3.95A12.88%2012.88%200%200%201%2022%202c0%202.72-.78%207.5-6%2011a22.35%2022.35%200%200%201-4%202z%22%2F%3E%3Cpath%20d%3D%22M9%2012H4s.55-3.03%202-4c1.62-1.08%205%200%205%200%22%2F%3E%3Cpath%20d%3D%22M12%2015v5s3.03-.55%204-2c1.08-1.62%200-5%200-5%22%2F%3E%3C%2Fsvg%3E")}
.fvi-search{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%2F%3E%3C%2Fsvg%3E")}
.fvi-shield{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z%22%2F%3E%3C%2Fsvg%3E")}
.fvi-sparkle{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.94%2014.34%2012%2022l2.06-7.66L21.66%2012l-7.6-2.34L12%202%209.94%209.66%202.34%2012z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.94%2014.34%2012%2022l2.06-7.66L21.66%2012l-7.6-2.34L12%202%209.94%209.66%202.34%2012z%22%2F%3E%3C%2Fsvg%3E")}
.fvi-star{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2212%202%2015.09%208.26%2022%209.27%2017%2014.14%2018.18%2021.02%2012%2017.77%205.82%2021.02%207%2014.14%202%209.27%208.91%208.26%2012%202%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2212%202%2015.09%208.26%2022%209.27%2017%2014.14%2018.18%2021.02%2012%2017.77%205.82%2021.02%207%2014.14%202%209.27%208.91%208.26%2012%202%22%2F%3E%3C%2Fsvg%3E")}
.fvi-tag{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.586%202.586A2%202%200%200%200%2011.172%202H4a2%202%200%200%200-2%202v7.172a2%202%200%200%200%20.586%201.414l8.704%208.704a2.426%202.426%200%200%200%203.42%200l6.58-6.58a2.426%202.426%200%200%200%200-3.42z%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%227.5%22%20r%3D%22.5%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.586%202.586A2%202%200%200%200%2011.172%202H4a2%202%200%200%200-2%202v7.172a2%202%200%200%200%20.586%201.414l8.704%208.704a2.426%202.426%200%200%200%203.42%200l6.58-6.58a2.426%202.426%200%200%200%200-3.42z%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%227.5%22%20r%3D%22.5%22%2F%3E%3C%2Fsvg%3E")}
.fvi-target{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E")}
.fvi-trash{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18%22%2F%3E%3Cpath%20d%3D%22M19%206v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6%22%2F%3E%3Cpath%20d%3D%22M8%206V4a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18%22%2F%3E%3Cpath%20d%3D%22M19%206v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6%22%2F%3E%3Cpath%20d%3D%22M8%206V4a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2%22%2F%3E%3C%2Fsvg%3E")}
.fvi-truck{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%2018V6a2%202%200%200%200-2-2H4a2%202%200%200%200-2%202v11a1%201%200%200%200%201%201h2%22%2F%3E%3Cpath%20d%3D%22M15%2018H9%22%2F%3E%3Cpath%20d%3D%22M19%2018h2a1%201%200%200%200%201-1v-3.65a1%201%200%200%200-.22-.624l-3.48-4.35A1%201%200%200%200%2017.52%208H14%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2218%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2218%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%2018V6a2%202%200%200%200-2-2H4a2%202%200%200%200-2%202v11a1%201%200%200%200%201%201h2%22%2F%3E%3Cpath%20d%3D%22M15%2018H9%22%2F%3E%3Cpath%20d%3D%22M19%2018h2a1%201%200%200%200%201-1v-3.65a1%201%200%200%200-.22-.624l-3.48-4.35A1%201%200%200%200%2017.52%208H14%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2218%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2218%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E")}
.fvi-unlock{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%2211%22%20width%3D%2218%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%209.9-1%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%2211%22%20width%3D%2218%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%209.9-1%22%2F%3E%3C%2Fsvg%3E")}
.fvi-upload{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%2F%3E%3Cpolyline%20points%3D%2217%208%2012%203%207%208%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%223%22%20x2%3D%2212%22%20y2%3D%2215%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%2F%3E%3Cpolyline%20points%3D%2217%208%2012%203%207%208%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%223%22%20x2%3D%2212%22%20y2%3D%2215%22%2F%3E%3C%2Fsvg%3E")}
.fvi-user{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E")}
.fvi-users{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fsvg%3E")}
.fvi-video{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m22%208-6%204%206%204V8Z%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%2214%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m22%208-6%204%206%204V8Z%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%2214%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E")}
.fvi-wrench{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a1%201%200%200%200%200%201.4l1.6%201.6a1%201%200%200%200%201.4%200l3.77-3.77a6%206%200%200%201-7.94%207.94l-6.91%206.91a2.12%202.12%200%200%201-3-3l6.91-6.91a6%206%200%200%201%207.94-7.94l-3.76%203.76z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a1%201%200%200%200%200%201.4l1.6%201.6a1%201%200%200%200%201.4%200l3.77-3.77a6%206%200%200%201-7.94%207.94l-6.91%206.91a2.12%202.12%200%200%201-3-3l6.91-6.91a6%206%200%200%201%207.94-7.94l-3.76%203.76z%22%2F%3E%3C%2Fsvg%3E")}
.fvi-xC{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cline%20x1%3D%2215%22%20y1%3D%229%22%20x2%3D%229%22%20y2%3D%2215%22%2F%3E%3Cline%20x1%3D%229%22%20y1%3D%229%22%20x2%3D%2215%22%20y2%3D%2215%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cline%20x1%3D%2215%22%20y1%3D%229%22%20x2%3D%229%22%20y2%3D%2215%22%2F%3E%3Cline%20x1%3D%229%22%20y1%3D%229%22%20x2%3D%2215%22%20y2%3D%2215%22%2F%3E%3C%2Fsvg%3E")}
.fvi-zap{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2213%202%203%2014%2012%2014%2011%2022%2021%2010%2012%2010%2013%202%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2213%202%203%2014%2012%2014%2011%2022%2021%2010%2012%2010%2013%202%22%2F%3E%3C%2Fsvg%3E")}
.fvi-sun{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%202v2M12%2020v2M4.93%204.93l1.41%201.41M17.66%2017.66l1.41%201.41M2%2012h2M20%2012h2M6.34%2017.66l-1.41%201.41M19.07%204.93l-1.41%201.41%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%202v2M12%2020v2M4.93%204.93l1.41%201.41M17.66%2017.66l1.41%201.41M2%2012h2M20%2012h2M6.34%2017.66l-1.41%201.41M19.07%204.93l-1.41%201.41%22%2F%3E%3C%2Fsvg%3E")}

/* ── Optimizer panel compact pass (2026-08-03) — tighter cards/spacing in the
   Search Campaign Optimizer + DV360 Optimization Insights drawers ─────────── */
.am-opt-body { padding: 12px 14px 18px; }
.am-opt-card { margin-bottom: 6px; border-radius: 10px; }
.am-opt-card-head { padding: 8px 12px; gap: 8px; }
.am-opt-card-icon-wrap { width: 26px; height: 26px; border-radius: 7px; font-size: .9rem; }
.am-opt-card-info { gap: 1px; }
.am-opt-card-title { font-size: 12.5px; }
.am-opt-card-detail { padding: 0 12px 10px; }
.am-opt-card.expanded .am-opt-card-detail { padding-top: 8px; }
.am-opt-detail-text { font-size: 12px; margin: 0 0 6px; line-height: 1.45; }
.am-opt-section-title { margin-bottom: 6px; }
.gads-opt-metrics { gap: 6px; margin: 6px 0; }
.gads-opt-metric { padding: 4px 8px; min-width: 54px; border-radius: 5px; }
.gads-opt-metric-val { font-size: 12px; margin-top: 1px; }
.gads-opt-delta { font-size: 12px; margin-bottom: 5px; line-height: 1.4; }
.gads-opt-impact { padding: 4px 8px; margin-top: 6px; font-size: 11.5px; }
.am-opt-apply-btn { padding: 5px 13px; font-size: 12px; border-radius: 7px; }
.am-opt-apply-row { margin-top: 6px; }

/* ── Dark mode: Ads-manager chrome strips (tabs row / toolbar / banners) —
   these carried hardcoded light backgrounds that survived the token pass ── */
html.dark .am-tabs-row { background: var(--bg-card); }
html.dark .am-toolbar { background: var(--bg-card); }
html.dark .am-tab { color: var(--text-muted); }
html.dark .am-tab.active { color: var(--text-primary); }
html.dark .am-tab.active::after { background: #85B7EB; }
html.dark .am-account-select,
html.dark .am-date-select { background: var(--bg-card); color: var(--text-primary); border-color: var(--border); }
html.dark .am-cr-toggle,
html.dark .am-cr-loadmore { background: var(--bg-card); }
html.dark .am-drilldown-banner { background: #14304a; border-color: #1d4a73; color: #B5D4F4; }
html.dark .am-drilldown-clear { background: rgba(255,255,255,.06); border-color: #1d4a73; color: #85B7EB; }
html.dark .am-republish-btn { background: rgba(226,75,74,.12); border-color: rgba(226,75,74,.4); }

/* "＋ budget" affordance in Daily Spent — appears on row hover only */
/* ── Section-switch loading bar (centered, shown while a tab renders) ── */
#fvSectionLoader { position: fixed; inset: 0; z-index: 9990; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s; }
#fvSectionLoader.on { opacity: 1; visibility: visible; }
.fv-loadbar { width: 220px; height: 4px; border-radius: 4px; background: rgba(63,118,255,.18); overflow: hidden; }
.fv-loadbar i { display: block; width: 40%; height: 100%; border-radius: 4px; background: #3f76ff; animation: fvLoadSlide .9s ease-in-out infinite; }
@keyframes fvLoadSlide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.fv-load-txt { font-size: 12.5px; font-weight: 600; color: var(--text-muted); letter-spacing: .02em; }

/* Daily Spent column: configured budget tag is always visible (click to edit);
   the "＋ budget" control (no budget set) reveals on row hover. Right-clicking
   the chart itself also opens the inline editor. */
.am-budget-add { opacity: 0; transition: opacity .12s; }
tr:hover .am-budget-add { opacity: 1; }

/* ── Dark mode: Optimization Insights panel (hardcoded light colors above) ── */
html.dark .am-opt-modal { border-left-color: var(--border); }
html.dark .am-opt-header { border-bottom-color: var(--border); }
html.dark .am-opt-subtitle { background: var(--bg-hover); color: var(--text-secondary); }
html.dark .am-opt-body { background: var(--bg-secondary); }
html.dark .am-opt-close { background: rgba(255,255,255,.06); }
html.dark .am-opt-close:hover, html.dark .am-opt-hist-btn:hover { background: var(--bg-hover); border-color: var(--border-hover); }
html.dark .am-opt-card { border-color: var(--border); box-shadow: none; }
html.dark .am-opt-card:hover { border-color: var(--border-hover); box-shadow: 0 3px 12px rgba(0,0,0,.4); }
html.dark .am-opt-card-detail { border-top-color: var(--border); }
html.dark .am-opt-detail-text, html.dark .am-opt-vr-account, html.dark .am-opt-hier-campaign, html.dark .am-cr-sub, html.dark .am-opt-empty-desc, html.dark .am-opt-action svg { color: var(--text-secondary); }
html.dark .am-opt-sev-high .am-opt-card-icon-wrap { background: rgba(192,57,43,.18); }
html.dark .am-opt-sev-medium .am-opt-card-icon-wrap { background: rgba(224,160,32,.15); }
html.dark .am-opt-sev-low .am-opt-card-icon-wrap { background: rgba(91,138,255,.15); }
html.dark .am-opt-sev-badge.am-opt-sev-high { background: rgba(192,57,43,.16); color: #f1948a; border-color: rgba(192,57,43,.45); }
html.dark .am-opt-sev-badge.am-opt-sev-medium { background: rgba(224,160,32,.14); color: #e8c46a; border-color: rgba(224,160,32,.4); }
html.dark .am-opt-sev-badge.am-opt-sev-low { background: rgba(91,138,255,.14); color: #85B7EB; border-color: rgba(91,138,255,.4); }
html.dark .am-opt-adset-badge, html.dark .am-opt-hier-adset { background: rgba(139,124,246,.12); color: #b3a6f5; border-color: rgba(139,124,246,.35); }
html.dark .am-opt-hier-adset.am-opt-hier-all { background: var(--bg-hover); color: var(--text-secondary); border-color: var(--border); }
html.dark .am-opt-entity-table tbody tr { border-bottom-color: var(--border); }
html.dark .am-opt-et-row-bad { background: rgba(192,57,43,.1); }
html.dark .am-opt-et-row-best { background: rgba(22,163,74,.1); }
html.dark .am-opt-et-badge-bad { background: rgba(185,28,28,.2); color: #f1948a; }
html.dark .am-opt-et-badge-best { background: rgba(21,128,61,.2); color: #7fd6a4; }
html.dark .am-opt-chart-section { border-color: var(--border); }
html.dark .am-opt-chart-header { border-bottom-color: var(--border); color: var(--text-secondary); }
html.dark .am-opt-bar-header-right { color: var(--text-secondary); }
html.dark .am-opt-bar-wrap, html.dark .am-rec-chart-track { background: var(--bg-hover); }
html.dark .am-opt-bar-metric.am-opt-best { color: #85B7EB; }
html.dark .am-opt-action { border-color: var(--border); }
html.dark .am-opt-manual-note, html.dark .am-opt-status-btn.is-active { background: rgba(224,160,32,.12); border-color: rgba(224,160,32,.35); color: #e8c46a; }
html.dark .am-opt-status-btn.is-active:hover { background: rgba(224,160,32,.2); }
html.dark .am-opt-empty-icon { background: rgba(46,125,50,.16); }
html.dark .am-opt-empty-title { color: #7fd6a4; }
html.dark .am-opt-lq-empty { border-color: var(--border); color: var(--text-secondary); }
html.dark .am-rec-bd-table th { background: var(--bg-hover); color: var(--text-secondary); }
html.dark .am-rec-bd-table td { border-bottom-color: var(--border); }
html.dark .am-rec-bd-table tr.am-rec-bd-bad td { background: rgba(192,57,43,.12); color: #f1948a; }
html.dark .am-rec-bd-table tr.am-rec-bd-best td { background: rgba(22,163,74,.1); }
html.dark .am-rec-bd-x, html.dark .am-rec-bd-pz { background: var(--bg-card); color: var(--text-secondary); }
html.dark .am-rec-bd-x:hover, html.dark .am-rec-bd-pz:hover { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.45); color: #f1948a; }
html.dark .am-rec-chart-lbl { color: var(--text-secondary); }
html.dark .am-cr-thumb { background: var(--bg-hover); }
html.dark .am-cr-status.active { background: rgba(4,120,87,.18); color: #7fd6a4; }
html.dark .am-hist-rollback-btn:hover { border-color: var(--border-hover); }
html.dark .am-budget-tag { color: var(--text-secondary); }
html.dark .am-budget-tag:hover { color: #85B7EB; border-color: #1d4a73; background: rgba(91,138,255,.1); }
html.dark .am-budget-pop-cancel, html.dark .am-budget-pop-sym { color: var(--text-secondary); }

/* Dark mode: selected Ads-table rows — translucent accent wash instead of the
   near-white light-mode tints (text stayed dark → unreadable). */
html.dark .am-row-selected { background: rgba(63, 118, 255, .14) !important; }
html.dark .am-row-selected:hover { background: rgba(63, 118, 255, .2) !important; }
/* Ads accounts sidebar: platform headers fall back to near-white (--bg-subtle
   is undefined) and the selected account is light blue — use translucent blue. */
html.dark .am-side-section-hd { background: rgba(63, 118, 255, .07); }
html.dark .am-side-item.active { background: rgba(63, 118, 255, .14); color: #85B7EB; }
/* Leads table row/header hover: the light theme uses a near-white (#f9f8f8)
   that reads as a glaring white strip in dark mode — use translucent blue. */
html.dark .leads-tbl-wrap .am-table tbody tr:hover,
html.dark .leads-tbl-wrap .am-table tbody tr:hover td:nth-child(1),
html.dark .leads-tbl-wrap .am-table tbody tr:hover td:nth-child(2),
html.dark .leads-tbl-wrap .am-table th:hover,
html.dark #leadsMainTable tbody tr[data-lead-id]:hover td { background: rgba(63, 118, 255, .1); }
html.dark .am-pin-name .am-table tbody tr.am-row-selected td.am-col-check,
html.dark .am-pin-name .am-table tbody tr.am-row-selected td.am-col-name { background: rgba(63, 118, 255, .14); }

/* ── LinkedIn section: dark-mode-safe dropdowns ───────────────────────────────
   The inline style on these selects is background:transparent, which leaves the
   native option list white — unreadable against light-on-dark text in dark mode.
   Paint both the control and its options with real theme colors. Also applies to
   selects rendered in LinkedIn modals outside the section (.li-select). */
#sectionLinkedin select,
#linkedinContainer select,
select.li-select {
  background: var(--bg-card) !important;
  color: var(--text-primary);
}
#sectionLinkedin select option,
#linkedinContainer select option,
select.li-select option {
  background: var(--bg-card);
  color: var(--text-primary);
}
/* Native date pickers follow the theme instead of rendering a white widget */
#sectionLinkedin input[type="date"],
#linkedinContainer input[type="date"] { color-scheme: light dark; }
html.dark #sectionLinkedin input[type="date"],
html.dark #linkedinContainer input[type="date"] { color-scheme: dark; }

/* ── LP builder: dark-mode chat bubbles ───────────────────────────────────────
   The light-blue tint (#e8f0ff) is hardcoded while the text uses theme vars —
   in dark mode that paints near-white text on a light bubble (unreadable).
   Swap every light-tint LP surface for a translucent blue on dark. */
html.dark .lp-canvas-pane .lp-chat-msg-user,
html.dark .lp-builder-overlay .lp-chat-msg-user {
  background: rgba(63, 118, 255, .22); color: var(--text-primary);
}
html.dark .lp-canvas-pane .lp-chat-msg-error,
html.dark .lp-chat-msg-error { background: rgba(220, 38, 38, .16); color: #fca5a5; }
html.dark .lp-topbar-type-badge,
html.dark .lp-builder-overlay .lp-generate-status,
html.dark .lp-builder-overlay .lp-add-para-btn,
html.dark .lp-topbar-btn-ghost.active {
  background: rgba(63, 118, 255, .18); border-color: rgba(63, 118, 255, .4); color: var(--text-primary);
}
html.dark .lp-builder-overlay .lp-img-upload-slot:hover { background: rgba(63, 118, 255, .12); }
html.dark .lp-canvas-pane .lp-chat-msg-ai svg { stroke: #7ea3ff; }

/* ══ Dark mode: global kill-switch for hardcoded light inline styles ══════════
   Dozens of banners/hints/badges across the app inline light tints
   (background:#fffbeb …) with dark text — unreadable white patches in dark
   mode. Inline styles outrank stylesheet rules, so these [style*=…] attribute
   selectors + !important re-theme the recurring literals globally. Legit
   whites (logo previews, WhatsApp phone mock, email iframes) use styles these
   selectors don't match. When adding UI, prefer CSS classes over inline tints. */
html.dark [style*="background:#eff6ff"] { background: rgba(63, 118, 255, .13) !important; border-color: rgba(63, 118, 255, .35) !important; }
html.dark [style*="background:#eef2ff"] { background: rgba(99, 102, 241, .14) !important; border-color: rgba(99, 102, 241, .35) !important; }
html.dark [style*="background:#f8fafc"],
html.dark [style*="background:#f9fafb"],
html.dark [style*="background:#f4f6fa"],
html.dark [style*="background:#f1f5f9"] { background: var(--bg-hover) !important; border-color: var(--border) !important; }
html.dark [style*="background:#fffbeb"],
html.dark [style*="background:#fff8e6"],
html.dark [style*="background:#fff3cd"],
html.dark [style*="background:#fef3c7"],
html.dark [style*="background:#fefce8"] { background: rgba(245, 158, 11, .13) !important; border-color: rgba(245, 158, 11, .35) !important; }
html.dark [style*="background:#fef2f2"],
html.dark [style*="background:#fee2e2"] { background: rgba(220, 38, 38, .14) !important; border-color: rgba(220, 38, 38, .35) !important; }
html.dark [style*="background:#f0fdf4"],
html.dark [style*="background:#dcfce7"],
html.dark [style*="background:#ecfdf5"] { background: rgba(34, 197, 94, .13) !important; border-color: rgba(34, 197, 94, .35) !important; }
html.dark [style*="background:#f0f9ff"] { background: rgba(14, 165, 233, .13) !important; border-color: rgba(14, 165, 233, .35) !important; }
html.dark [style*="background:#fff1f2"] { background: rgba(244, 63, 94, .13) !important; border-color: rgba(244, 63, 94, .35) !important; }
/* Dark text painted onto those tints → readable light variants */
html.dark [style*="color:#92400e"], html.dark [style*="color:#856404"], html.dark [style*="color:#b45309"] { color: #fbbf24 !important; }
html.dark [style*="color:#991b1b"], html.dark [style*="color:#b91c1c"] { color: #fca5a5 !important; }
html.dark [style*="color:#166534"], html.dark [style*="color:#15803d"], html.dark [style*="color:#047857"] { color: #6ee7a0 !important; }
html.dark [style*="color:#0369a1"] { color: #67cdf8 !important; }
html.dark [style*="color:#be123c"] { color: #fda4af !important; }
html.dark [style*="color:#1e40af"], html.dark [style*="color:#1d4ed8"] { color: #8ab4ff !important; }
html.dark [style*="color:#1f2937"], html.dark [style*="color:#374151"], html.dark [style*="color:#475569"], html.dark [style*="color:#4b5563"] { color: var(--text-secondary) !important; }
html.dark [style*="color:#d97706"] { color: #fbbf24 !important; }
/* White chrome buttons/selects (unique border literals identify them safely) */
html.dark [style*="border:1px solid #e7ebf2"],
html.dark [style*="border:1px solid #e5e7eb"][style*="background:#fff"],
html.dark [style*="border:1px solid #d1d5db"][style*="background:#fff"] { background: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
/* Gantt/timeline view: white canvas + sticky label column */
html.dark .am-gantt, html.dark .am-gantt [style*="background:#fff"] { background: var(--bg-card) !important; border-color: var(--border) !important; }

/* ── Dark mode: automation builder canvas ─────────────────────────────────────
   --bg-app was never defined, so the canvas always fell back to light #f7f8fa
   (a giant light slab in dark mode) with near-invisible dark grid lines. */
html.dark .auto-canvas {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0/22px 22px, var(--bg);
}
html.dark .auto-canvas.auto-drop { background-color: rgba(63, 118, 255, .07); }
html.dark .auto-yes,
html.dark .auto-branch-lbl.yes { background: rgba(34, 197, 94, .16); color: #6ee7a0; }
html.dark .auto-branch-lbl.no { background: rgba(220, 38, 38, .16); color: #fca5a5; }
html.dark .auto-branch { background: rgba(255, 255, 255, .02); }
html.dark .auto-switch span { background: #3a4152; }
html.dark .auto-switch input:checked + span { background: #22c55e; }
html.dark .auto-gnode { box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }

/* On-site editor: the website/phone mockups the popup previews on — a soft
   dark "page" in dark mode instead of a blinding white rectangle. */
html.dark { --os-page-mock: #1d2129; }

/* ── Dark mode: email editor chrome ──────────────────────────────────────────
   The surface BEHIND the email canvas was hardcoded light (#eef1f6 !important)
   — the email itself stays white (emails are designed on white; guards at the
   top of this file protect that), but its surroundings follow the theme. */
html.dark .email-canvas-wrap { background: var(--bg) !important; }
html.dark .email-canvas { box-shadow: 0 6px 28px rgba(0, 0, 0, .45); }
html.dark .email-ai-mini { border-color: rgba(109, 94, 252, .45); background: rgba(109, 94, 252, .14); color: #a9a2ff; }
html.dark .email-col-cell.email-col-over { background: rgba(63, 118, 255, .14); }
html.dark .email-layout-tile-ic > span { border-color: rgba(63, 118, 255, .5); background: rgba(63, 118, 255, .13); }
html.dark .email-layout-tile:hover .email-layout-tile-ic > span { background: rgba(63, 118, 255, .22); }
html.dark .email-preset-thumb { border-color: var(--border); } /* thumb bg stays white — it previews a real email */

/* ── Dark mode: WhatsApp inbox — faithful WhatsApp-Web-dark treatment ────────
   The inbox mimics WhatsApp Web LIGHT with inline styles (beige wallpaper,
   white/green bubbles, light composer). Scoped attribute overrides re-theme it
   to WhatsApp's own dark palette. The template PHONE MOCKUPS elsewhere in the
   tab keep the real WhatsApp look on purpose (they preview actual messages). */
html.dark #waInbox [style*="background-color:#efe7dd"] {
  background-color: #0b141a !important;
  background-image: radial-gradient(rgba(255, 255, 255, .045) 1.2px, transparent 1.2px) !important;
}
html.dark #waInbox [style*="background:#d9fdd3"] { background: #005c4b !important; color: #e9edef !important; }
html.dark #waInbox [style*="background:#ffffff"] { background: #202c33 !important; color: #e9edef !important; }
html.dark #waInbox [style*="background:rgba(255,255,255,.92)"] { background: #182229 !important; color: #8696a0 !important; }
html.dark #waInbox [style*="background:#fdf3c7"] { background: #182229 !important; color: #ffd279 !important; }
html.dark #waInbox [style*="background:#f0f2f5"] { background: #202c33 !important; }
html.dark #waInbox [style*="background:#fff;color:#111b21"] { background: #2a3942 !important; color: #e9edef !important; }
html.dark #waInbox [style*="background:#fff8e6"] { background: rgba(245, 158, 11, .13) !important; border-color: rgba(245, 158, 11, .3) !important; }
html.dark #waInbox [style*="color:#111b21"] { color: #e9edef !important; }

/* ── Dark mode: SMS tab phone preview — iOS-dark Messages look ───────────────
   The mock had a light screen while the bubble text follows the theme var —
   near-white text on a light bubble in dark mode (unreadable). */
html.dark .sms-phone { background: #000; border-color: #3a3f4b; }
html.dark .sms-bubble { background: #3a3a3c; color: #f2f2f7; }
html.dark .sms-phone-hd { color: #8e8e93; }

/* ── Dark mode: Leads tab (lf-*) — the family had zero dark overrides ────────
   Table row separators, kanban chrome, view toggles and hover states all
   hardcode gray-100/200 lights; on the black base they read as light streaks. */
html.dark .lf-leads-table td { border-bottom-color: var(--border); }
html.dark .lf-kb-card-footer { border-top-color: var(--border); }
html.dark .lf-vt-btn--active { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
html.dark .lf-kb-col { border-color: var(--border); }
html.dark .lf-kanban { scrollbar-color: var(--border) transparent; }
html.dark .lf-kb-cards { scrollbar-color: var(--border) transparent; }
html.dark .lf-kb-cards::-webkit-scrollbar-thumb { background: var(--border); }
html.dark .lf-phone-iso { background: rgba(63, 118, 255, .16); color: #8ab4ff; }
html.dark .lf-del-btn:hover { background: rgba(220, 38, 38, .16); }
html.dark .lf-kb-card-del:hover { background: rgba(220, 38, 38, .16); }
html.dark .lf-grp-add:hover td { background: var(--bg-hover); }
html.dark .lf-board-toolbar button:hover:not([disabled]):not(.lf-add-item-btn) { background: var(--bg-hover); border-color: var(--border-hover); }
html.dark .lf-empty-btn { background: var(--accent); }
html.dark .lf-empty-icon--account { background: linear-gradient(135deg, #2b2f3a 0%, #818cf8 100%); }

/* ── Dark mode: native form controls, app-wide ───────────────────────────────
   Transparent/unstyled <select>s (Projects board status/owner pickers, and any
   other section) open WHITE native option lists in dark mode. Low-specificity
   base so themed/branded selects still override; date & time pickers follow
   the theme instead of popping a white widget. */
html.dark select { background-color: var(--bg-card); color: var(--text-primary); }
html.dark select option, html.dark select optgroup { background: var(--bg-card); color: var(--text-primary); }
html.dark input[type="date"], html.dark input[type="time"], html.dark input[type="datetime-local"] { color-scheme: dark; }

/* Dark mode: FORTVISION brand-tint chips (Meetings booking/calendar chips, duration
   pills, avatars, automation stat chips — inline literals shared across tabs).
   Same palette convention as .crm-pc-tab.active dark (#14304a / #B5D4F4). */
html.dark [style*="background:#E6F1FB"] { background: #14304a !important; }
html.dark [style*="background:#B5D4F4"] { background: #1d4570 !important; }
html.dark [style*="color:#0C447C"] { color: #B5D4F4 !important; }
html.dark [style*="background:#E1F5EE"] { background: #123f33 !important; }
html.dark [style*="color:#085041"] { color: #9fe8cd !important; }
html.dark [style*="background:#F1EFE8"] { background: #26261f !important; }
html.dark [style*="color:#444441"] { color: #b6b6ad !important; }
html.dark [style*="border:1px solid #0C447C33"] { border-color: #3a6ea5 !important; }

/* Dark mode: Billing platform badges (the rest of the tab is theme-var based) */
html.dark .bl-badge-meta  { background: #142f52; color: #6fa8f5; }
html.dark .bl-badge-gads  { background: #12351a; color: #7ed492; }
html.dark .bl-badge-dv360 { background: #1c2250; color: #9fa8e8; }

/* Dark mode: shared secondary buttons (Payments Copy/Open/WhatsApp rows etc.) —
   the light #D2D2D2 border glows on the black theme. */
html.dark .btn-secondary { border-color: var(--border); }
/* Native select/number controls in Payments render light glyphs without this */
html.dark #sectionPayments select, html.dark #sectionPayments input { color-scheme: dark; }

/* Dark mode: Users tab. Most of the tab was dark-broken because its rules
   referenced undefined vars (--border-color/--card-bg) — fixed to the real
   theme vars above. What remains are the brand-black buttons/avatars and
   tinted badges that need explicit dark values. */
html.dark .um-add-btn, html.dark .um-save-btn { background: #3f76ff; }
html.dark .um-add-btn:hover, html.dark .um-save-btn:hover { background: #2f5fd9; }
html.dark .um-avatar { background: #1d4570; color: #B5D4F4; }
html.dark .um-role-sa { background: #3d2f0e; color: #fbbf24; }
html.dark .um-role-user { background: #1c2250; color: #9fa8e8; }
html.dark .um-badge-all { background: #12351a; color: #7ed492; border-color: #1d5c2c; }
html.dark .um-badge-none, html.dark .um-error { background: #3d1418; color: #fca5a5; border-color: #6b2026; }
html.dark .um-action-del:hover { background: #3d1418; color: #fca5a5; border-color: #6b2026; }
html.dark .um-field input:focus { border-color: #3f76ff; box-shadow: 0 0 0 3px rgba(63,118,255,.15); }

/* Dark mode: Push tab — the Chrome notification preview mockup renders in
   Chrome's own dark-notification palette instead of the light Google greys. */
html.dark [style*="background:#f1f3f4"] { background: #292a2d !important; }
html.dark [style*="color:#202124"] { color: #e8eaed !important; }
html.dark [style*="color:#3c4043"] { color: #bdc1c6 !important; }
html.dark [style*="color:#5f6368"] { color: #9aa0a6 !important; }

/* ── Dark mode: AI Assistant tab ─────────────────────────────────────────────
   Bubbles/cards/inputs are theme-var based; these cover the light-blue icon
   chips, hover tints, hardcoded slate text and the campaign-wizard cards. */
html.dark .ai-hist-item.active,
html.dark .ai-chat-header-icon,
html.dark .ai-welcome-icon,
html.dark .ai-msg-ai-icon { background: #14304a; }
html.dark .ai-suggestion:hover,
html.dark .ai-chat-attach:hover { background: #14304a; }
html.dark .ai-hist-del:hover,
html.dark .ai-chat-clear:hover { background: #3d1418; }
html.dark .ai-chat-messages::-webkit-scrollbar-thumb { background: #2a2e37; }
html.dark .ai-msg-content code { background: #1a1e26; }
html.dark .ai-msg-content strong { color: var(--text-primary); }
html.dark .ai-chart-wrap { border-color: var(--border); }
html.dark .ai-chart-err { background: #3d1418; border-color: #6b2026; color: #fca5a5; }
/* campaign-wizard cards inside the chat */
html.dark .cw-card--warn  { background: #3d2f0e; border-color: #6b5310; color: #fbbf24; }
html.dark .cw-card--error { background: #3d1418; border-color: #6b2026; color: #fca5a5; }
html.dark .cw-card--success { background: linear-gradient(135deg, #102b18 0%, #12351a 100%); border-color: #1d5c2c; }
html.dark .cw-card-title, html.dark .cw-obj-label, html.dark .cw-adset-section-title,
html.dark .cw-copy-sug-item strong { color: var(--text-primary); }
html.dark .cw-card-desc, html.dark .cw-obj-desc, html.dark .cw-input-suffix,
html.dark .cw-adset-section-desc, html.dark .cw-adset-row-desc { color: var(--text-secondary); }
html.dark .cw-radio, html.dark .cw-adset-row-title { color: var(--text-primary); }
html.dark .cw-obj-btn, html.dark .cw-btn-secondary, html.dark .cw-asset-btn { border-color: var(--border); }
html.dark .cw-obj-btn:hover, html.dark .cw-asset-btn:hover { background: #14304a; }
html.dark .cw-btn-secondary:hover { border-color: #3a4150; }
html.dark .cw-asset-thumb { border-color: #3a4150; }
html.dark .cw-badge-purple { background: #2a1a47; color: #c4b5fd; }
html.dark .cw-badge-blue   { background: #142f52; color: #8ab4ff; }
html.dark .cw-badge-green  { background: #12351a; color: #7ed492; }
html.dark .cw-badge-orange { background: #3a2410; color: #fdba74; }
html.dark .cw-copy-suggestions { background: #221833; border-color: #3b2a55; }
html.dark .cw-copy-sug-label, html.dark .cw-copy-sug-cta { color: #c4b5fd; }
html.dark .cw-copy-sug-cta { background: #2a1a47; }
html.dark .cw-copy-sug-item { border-color: #3b2a55; }
html.dark .cw-copy-sug-item:hover { border-color: #7c5cd6; background: #221833; }
html.dark .cw-copy-sug-item--active { border-color: #7c5cd6; background: #2a1a47; }
html.dark .cw-review-section-title { border-bottom-color: var(--border); }
html.dark .cw-review-row { border-bottom-color: #191c24; }
/* inline platform badges in change-approval cards (Meta/Google/DV360) */
html.dark [style*="background:#e7f0ff"] { background: #142f52 !important; }
html.dark [style*="background:#e8f5e9"] { background: #12351a !important; }
html.dark [style*="color:#188038"] { color: #7ed492 !important; }
html.dark [style*="background:#ede7f6"] { background: #1c2250 !important; }
html.dark [style*="color:#5e35b1"] { color: #9fa8e8 !important; }

/* ── Dark mode: Ads tab — generated pass over am-* rules with light backgrounds
   (status chips, optimizer popup, account picker, platform/match/QS badges). ── */
html.dark .am-acct-picker-btn:hover { background: #14304a; border-color: #2a4a73; }
html.dark .am-acct-picker-btn--empty { background: var(--bg-hover); border-color: var(--border); }
html.dark .am-account-selector-btn:hover { background: #14304a; border-color: #2a4a73; }
html.dark .am-acct-item--checked { background: #14304a; }
html.dark .am-acct-item--checked:hover { background: #14304a; }
html.dark .am-acct-item--partial { background: #2a1a47; }
html.dark .am-acct-item--partial:hover { background: #2a1a47; }
html.dark .am-account-select { background: var(--bg-card); border-color: var(--border); }
html.dark .am-col-filters th { background: var(--bg-page); }
html.dark .am-planned-bar { background: #23272f; }
html.dark .am-st-paused { background: #3d2f0e; color: #fbbf24; }
html.dark .am-st-deleted { background: #3d1418; }
html.dark .am-st-archived { background: var(--bg-hover); color: var(--text-secondary); }
html.dark .am-st-off { background: var(--bg-hover); color: var(--text-secondary); }
html.dark .am-st-draft { background: var(--bg-hover); color: var(--text-secondary); }
html.dark .am-st-rejected { background: #3d1418; }
html.dark .am-st-review { background: #3d2f0e; color: #fbbf24; }
html.dark .am-republish-btn:hover { background: #3d1418; }
html.dark .am-filter-bar { background: #14304a; }
html.dark .am-cr-toggle { background: var(--bg-card); }
html.dark .am-cr-toggle.on { background: #12351a; color: #7ed492; border-color: #1d5c2c; }
html.dark .am-cr-toggle.off { background: #3d2f0e; color: #fbbf24; border-color: #6b5310; }
html.dark .am-conf-high { background: #12351a; color: #7ed492; border-color: #1d5c2c; }
html.dark .am-conf-med { background: #3d2f0e; color: #fbbf24; border-color: #6b5310; }
html.dark .am-dv360-bid-pct { background: #12351a; color: #7ed492; border-color: #1d5c2c; }
html.dark .am-dv360-proof-ok { background: #12351a; color: #7ed492; }
html.dark .am-dv360-proof-pending { background: #3d2f0e; color: #fbbf24; }
html.dark .am-opt-hist-btn:hover { background: #14304a; border-color: #2a4a73; }
html.dark .am-opt-close:hover { background: #14304a; }
html.dark .am-opt-summary-chip.high { background: #3d1418; color: #fca5a5; border-color: #6b2026; }
html.dark .am-opt-summary-chip.medium { background: #3d2f0e; color: #fbbf24; border-color: #6b5310; }
html.dark .am-opt-summary-chip.low { background: #14304a; color: #8ab4ff; border-color: #2a4a73; }
html.dark .am-opt-why { background: #3d2f0e; }
html.dark .am-opt-adset-badge { background: #14304a; color: #8ab4ff; border-color: #2a4a73; }
html.dark .am-opt-hier-adset { background: #14304a; color: #8ab4ff; border-color: #2a4a73; }
html.dark .am-rec-bd-x { background: var(--bg-card); }
html.dark .am-rec-bd-x:hover { background: #3d1418; border-color: #6b2026; }
html.dark .am-rec-bd-pz { background: var(--bg-card); color: #8ab4ff; }
html.dark .am-rec-bd-pz:hover { background: #3d1418; color: #fca5a5; border-color: #6b2026; }
html.dark .am-opt-bar-wrap { background: #23272f; }
html.dark .am-opt-manual-note { background: #3d2f0e; color: #fbbf24; border-color: #6b5310; }
html.dark .am-opt-status-btn.is-active { background: #3d2f0e; color: #fbbf24; border-color: #6b5310; }
html.dark .am-opt-status-btn.is-paused { background: #12351a; color: #7ed492; border-color: #1d5c2c; }
html.dark .am-opt-vr-boost .am-opt-vr-arrow { background: #14304a; color: #8ab4ff; }
html.dark .am-opt-vr-decrease .am-opt-vr-arrow { background: #3d1418; color: #fca5a5; }
html.dark .am-opt-bd-label:hover { background: #14304a; }
html.dark .am-bd-excl-btn:hover { background: #3d1418; border-color: #6b2026; }
html.dark .am-duration-pill { background: #14304a; }
html.dark .am-camp-pmax { background: #3d2f0e; color: #fbbf24; border-color: #6b5310; }
html.dark .am-camp-display { background: #2a1a47; color: #c4b5fd; border-color: #3b2a55; }
html.dark .am-camp-video { background: #3d1418; color: #fca5a5; border-color: #6b2026; }
html.dark .am-platform-badge--google { background: #14304a; color: #8ab4ff; }
html.dark .am-platform-badge--meta { background: #14304a; color: #8ab4ff; }
html.dark .am-platform-badge--dv360 { background: #14304a; color: #8ab4ff; }
html.dark .am-match-exact { background: #12351a; color: #7ed492; }
html.dark .am-match-phrase { background: #3d2f0e; color: #fbbf24; }
html.dark .am-match-broad { background: #2a1a47; color: #c4b5fd; }
html.dark .am-qs-good { background: #12351a; color: #7ed492; }
html.dark .am-qs-ok { background: #3d2f0e; color: #fbbf24; }
html.dark .am-qs-bad { background: #3d1418; color: #fca5a5; }
html.dark .am-insights-progress { background: #23272f; }

/* Dark mode: Sequences tab (+ same literal elsewhere) — emerald-600 stat text
   is too dim on black; everything else inherits shared-component dark fixes. */
html.dark [style*="color:#059669"] { color: #34d399 !important; }

/* Dark mode: Social Content tab — image-placeholder gradient + red-600 inline
   text (delete/fix-request actions; same literal used across other tabs). */
html.dark [style*="background:linear-gradient(135deg,#e0e7ff,#c7d2fe)"] { background: linear-gradient(135deg,#1c2250,#2a1a47) !important; }
html.dark [style*="color:#dc2626"] { color: #f87171 !important; }

/* Dark mode: On-site tab — warning-banner text/border + health-chip borders
   (backgrounds already covered by the global tint sweep; popup mockups and
   canvas content stay light by design). */
html.dark [style*="color:#78350f"] { color: #fbbf24 !important; }
html.dark [style*="border-bottom:1px solid #fcd34d"] { border-bottom-color: #6b5310 !important; }
html.dark [style*="border:1px solid #bbf7d0"] { border-color: #1d5c2c !important; }
html.dark [style*="border:1px solid #fecaca"] { border-color: #6b2026 !important; }

/* ── Dark mode: Landing Pages tab (builder chrome + list; generated pages and
   the canvas preview keep their own design). ── */
html.dark .lp-card-thumb { background: var(--bg-hover); }
html.dark .lp-topbar-divider { background: #23272f; }
html.dark .lp-topbar-close:hover { background: #3d1418; color: #fca5a5; border-color: #6b2026; }
html.dark .lp-topbar-btn-ghost:hover,
html.dark .lp-device-btn:hover,
html.dark .lp-chat-setup-btn:hover,
html.dark .lp-type-pill:hover:not(.active) { background: var(--bg-hover); }
html.dark .lp-builder-overlay .lp-content-divider::after { background: #23272f; }
html.dark .lp-topbar-type-badge,
html.dark .lp-canvas-pane .lp-chat-msg-user { background: #14304a; }
html.dark .lp-builder-overlay .lp-generate-status,
html.dark .lp-builder-overlay .lp-add-para-btn { background: #14304a; border-color: #2a4a73; }
html.dark .lp-builder-overlay .lp-generate-error,
html.dark .lp-canvas-pane .lp-chat-msg-error { background: #3d1418; color: #fca5a5; border-color: #6b2026; }
html.dark .lp-builder-overlay .lp-para-remove:hover { background: #3d1418; color: #fca5a5; }

/* Dark mode: Email tab chrome — AI-mini and link-toolbar hovers, danger menu
   item. Email previews/canvas stay white by design. */
html.dark .email-ai-mini:hover { background: #2a1a47; }
html.dark .email-link-hover .elh-edit:hover { background: #14304a; }
html.dark .em-ctx-item.em-ctx-danger:hover,
html.dark .email-link-hover .elh-del:hover { background: #3d1418; }

/* Dark mode: green-600 inline text (Inbox connected/sync labels + same literal
   elsewhere) — a bit dim on black. */
html.dark [style*="color:#16a34a"] { color: #4ade80 !important; }

/* Dark mode: Automation tab — remaining bits (canvas was themed earlier). */
html.dark .auto-branch-lbl.no { background: #3d1418; color: #fca5a5; }
html.dark [style*="background:#e7f6e9"] { background: #0e2b1c !important; border-color: #1d5c2c !important; }
html.dark [style*="background:#f4f4f7"] { background: var(--bg-hover) !important; }

/* Dark mode: WhatsApp tab — template phone mockups + chat composer render in
   WhatsApp's own dark palette (the earlier pass only covered #waInbox). */
html.dark [style*="background:#e5ddd5"] { background: #0b141a !important; }
html.dark [style*="background:#f0f2f5"] { background: #202c33 !important; }
html.dark #waTplPreview, html.dark #waTplPhone { background: #202c33 !important; color: #e9edef; }
html.dark [style*="background:#fdf3c7"] { background: #182229 !important; }
html.dark [style*="color:#54656f"] { color: #8696a0 !important; }

/* Dark mode: SMS tab — sender-verification note (phone mockup + bubbles were
   themed in the earlier pass). */
html.dark .sms-verify-note { background: #14304a; border-color: #2a4a73; color: #8ab4ff; }

/* Dark mode: eCommerce tab — stale-data warning border (bg/text already swept). */
html.dark [style*="border:1px solid #fde68a"] { border-color: #6b5310 !important; }

/* ── Dark mode: Leads tab — table hover/active tints, consent chips, dialer,
   scrollbar (base lf-* dark block landed in an earlier pass). ── */
html.dark .leads-tbl-wrap .am-table th:hover,
html.dark .leads-tbl-wrap .am-table tbody tr:hover,
html.dark .leads-tbl-wrap .am-table tbody tr:hover td:nth-child(2) { background: var(--bg-hover); }
html.dark .lf-leads-table tbody tr.lf-row-active,
html.dark .leads-tbl-wrap .am-table tbody tr.lf-row-active,
html.dark .leads-tbl-wrap .am-table tbody tr.lf-row-active td:nth-child(2) { background: rgba(63,118,255,.14); }
html.dark .lf-kb-col--over,
html.dark .leads-tbl-wrap .am-table tr.lf-colhdr th.lf-col-dragover { background: rgba(63,118,255,.14); }
html.dark .leads-tbl-wrap .am-table td input:focus { background: var(--bg-card); }
html.dark .lf-duration-pill { background: #14304a; color: #8ab4ff; }
html.dark .lf-status-subscribed { background: #12351a; color: #4ade80; }
html.dark .lf-status-unsubscribed { background: #3d1418; color: #f87171; }
html.dark .lf-dialer-ctrl { background: #14304a; }
html.dark .lf-dialer-key:hover { background: #1c2250; }
html.dark .leads-tbl-wrap::-webkit-scrollbar-thumb { background: #2a2e37; }

/* WhatsApp inbox — compact list rows with hover quick-actions (★ / follow-up). */
.wa-conv:hover { background: var(--bg-hover) !important; }
.wa-conv:hover .wa-conv-act { display: inline-flex !important; }

/* ── Social Content on phones ──────────────────────────────────────────────
   The tab is laid out desktop-first with inline styles: a fixed 190px account
   rail beside the body. On a 375px screen that left the body 127px — the month
   grid rendered 14px-wide day cells and every other view was unusable. Stack
   the rail above the content and let the panes go full width. !important is
   required: the rules being overridden are inline styles. */
@media (max-width: 760px) {
  /* align-items:flex-start (inline, for the desktop row layout) sizes the
     children to fit-content once the shell is a column — the Performance KPI
     strip grew to 1088px and main-content's overflow-x:hidden ate everything
     past 375px. stretch + max-width keeps every pane inside the viewport. */
  .sc-shell { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
  .sc-shell > * { max-width: 100% !important; min-width: 0 !important; }
  /* Desktop gives the rail the full column height; on a phone it stacks ABOVE
     the content, so it must shrink back to its content instead. */
  .sc-rail { width: 100% !important; position: static !important; height: auto !important; box-sizing: border-box; }
  /* The rail lists every connected page — cap it so the calendar stays within
     a thumb-flick of the top. */
  .sc-rail #scPgList { max-height: 30vh !important; flex: none !important; }
  /* All 5 tabs at desktop spacing run to 410px — the strip scrolls, but a
     hidden "Performance" tab reads as missing. Tighten so they all fit. */
  .sc-tabs button { margin-inline-end: 12px !important; font-size: 13px !important; padding: 9px 2px !important; }
  /* minmax(0,…), not 1fr: a plain 1fr track floors at the pane's min-content
     (355px here) and spills past the padding. */
  .sc-create-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .sc-create-grid > * { min-width: 0 !important; }
  .sc-dm-grid { grid-template-columns: 1fr !important; }
  /* !important: the inline style on the pane sets max-height:70vh */
  .sc-dm-grid > div:first-child { max-height: 38vh !important; border-inline-end: none !important; border-bottom: 1px solid var(--border); }
  /* The quick composer (tap a calendar day) is a hard-coded 2-col desktop grid —
     143px columns on a phone, which is the one flow the dot-calendar exists for. */
  .sc-qc-grid { grid-template-columns: minmax(0, 1fr) !important; padding: 12px !important; }
  .sc-qc-grid > * { min-width: 0 !important; }
}

/* ── Ads manager on phones ─────────────────────────────────────────────────
   MUST live at the end of the file: the base layout (`#sectionAdsmanager
   {display:flex;flex-direction:row}` at ~4973 and `.am-acct-sidebar {width:210px;
   position:sticky}` at ~4964) is declared AFTER the @media block up at ~3160,
   and at equal specificity the later rule wins — which is why the
   `flex-direction: column` already sitting in that block never did anything.
   With a sticky 210px rail beside it the manager got 145px of a 375px screen,
   i.e. a 145px window onto a 2264px 36-column table. */
@media (max-width: 768px) {
  #sectionAdsmanager { flex-direction: column; height: auto; }
  .am-acct-sidebar,
  .am-acct-sidebar.collapsed {
    width: 100%; position: static; align-self: auto;
    margin: 0 0 10px; max-height: 40vh; overflow-y: auto;
  }
  .am-main-content { width: 100%; min-width: 0; }
  .am-table-title-bar { flex-wrap: wrap; row-gap: 6px; }
  /* Desktop-dense rows are 24px tall and the collapse chevron is 18x16 — both
     well under the 44px touch guidance, and the chevron sits at the very edge
     of the screen. These selectors are unscoped on purpose: the Leads lists
     rail is the same component, so it gets the same thumb-friendly sizes and
     the two rails stay identical. */
  .am-side-item { padding: 9px 12px; }
  .am-side-section-hd { padding: 9px 12px 8px; }
  .am-side-toggle { padding: 8px 10px; }
  .am-side-search { padding: 5px 8px; }
  .am-side-search input { height: 28px; }
}

/* Touch devices have no hover, so every control that only appears on
   :hover is invisible AND unreachable there — the planned-spend and budget
   add buttons, row tags, group delete. Surface them at a low opacity (the
   same trick .am-name-hoveropt already uses) instead of hiding them. */
@media (hover: none) {
  .am-planned-add, .am-budget-add, .lf-tag-add, .lf-grp-del, .lf-row-drag { opacity: .5; }
}

/* ── Leads on phones ───────────────────────────────────────────────────────
   #lfLeftSidebar is inline-styled 210px (app.js), so overriding it needs
   !important — beside it the board pane got 145px of a 375px screen, and the
   Contacts/Companies/Deals tab bar (width:fit-content, no scroller) ran to
   551px with Companies and Deals simply unreachable. */
@media (max-width: 768px) {
  #leadsContainer > div:has(> #lfLeftSidebar) { flex-direction: column !important; align-items: stretch !important; }
  /* No #lfLeftSidebar overrides here any more: the rail is .am-acct-sidebar
     now, so the shared rule above (full width, static, 40vh, own scroll) sizes
     it — which is the point, both rails behave identically. */
  #leadsMainPane { width: 100% !important; min-width: 0 !important; }
  .crm-tab-bar { width: 100%; max-width: 100%; overflow-x: auto; }
}

/* ── Email on phones ───────────────────────────────────────────────────────
   The header action rows are inline-styled flex with the default nowrap, so
   the buttons ran to x=654 on a 375px screen with no scroller anywhere above
   them: "Clean bounced", "Refresh" and — on both views — the primary
   "+ New email" were entirely off-screen and unreachable. */
@media (max-width: 768px) {
  .em-hd-row { flex-wrap: wrap !important; row-gap: 8px; }
  .em-hd-actions { flex-wrap: wrap !important; margin-left: 0 !important; width: 100%; row-gap: 6px; }
}

/* ── Email BUILDER on phones ───────────────────────────────────────────────
   .email-body is a three-pane desktop editor: 168px element rail + canvas +
   290px inspector. At 375px that left the canvas — the email you are actually
   editing — FORTY pixels wide. Stack them: palette as a horizontal strip on
   top, canvas full width, inspector (contextual, only populated once a block
   is selected) below with its own scroll. */
@media (max-width: 768px) {
  .email-body { flex-direction: column; }
  .email-rail {
    width: 100%; border-right: none; border-bottom: 1px solid var(--border);
    max-height: 132px; padding: 10px 12px;
  }
  .email-rail .email-palette { grid-template-columns: repeat(4, 1fr); }
  /* justify-content:center + a 600px canvas in a 375px wrap puts 112px off the
     LEFT edge, which no amount of scrolling can reach (overflow at the start
     edge is unreachable). Start it flush so the whole canvas is swipeable. */
  .email-canvas-wrap { padding: 10px 8px 40px; min-height: 46vh; justify-content: flex-start; }
  .email-inspector {
    width: 100%; border-left: none; border-top: 1px solid var(--border);
    max-height: 46vh; padding: 12px;
  }
  .email-topbar { flex-wrap: wrap; row-gap: 8px; padding: 8px 12px; }
}

/* ── Automation on phones ──────────────────────────────────────────────────
   The journey builder is a two-pane desktop editor: a fixed 250px element
   palette beside the canvas. At 375px the canvas — the journey graph itself,
   1024px of it — was left 105px. And .auto-topbar is nowrap, so Auto-arrange,
   the on/off switch and Activate sat off-screen: you could open an automation
   on a phone but not turn it on. */
@media (max-width: 768px) {
  .auto-topbar { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px; }
  .auto-body { flex-direction: column; }
  .auto-side {
    width: 100%; border-right: none; border-bottom: 1px solid var(--border);
    max-height: 30vh; padding: 12px 14px;
  }
  .auto-pal-list { flex-direction: row; flex-wrap: wrap; }
  .auto-pal { flex: 1 1 46%; padding: 9px 10px; font-size: 12.5px; }
  .auto-canvas { padding: 14px; min-height: 52vh; }
  /* The bottom action bar (Back / Save & Exit / approval link / Activate) is
     its own nowrap flex row — Activate sat at x=356 on a 375px screen, so the
     journey could be opened but never switched on. */
  .auto-actions { flex-wrap: wrap; row-gap: 8px; padding: 12px; }
}

/* ── Phone sweep: off-screen primary actions ───────────────────────────────
   Found by scanning all 22 sections at 375px for controls whose right edge is
   past the viewport with no scrolling ancestor. One pattern accounted for most
   of it: an action row written as an inline-styled flex container. Flex
   defaults to nowrap, and the PRIMARY button is conventionally last, so the
   primary action is exactly what falls off the edge — "＋ New campaign" at
   x=587, "Send WhatsApp campaign" at 432, "+ New project" at 390, "LinkedIn
   Accounts" at 466, "Grant Google Calendar" at 614, plus Edit/Delete on every
   row of the On-site (1413px) and Users (736px) tables, which sat in
   overflow:hidden boxes and so were unreachable rather than merely cramped.
   :has() is already used elsewhere in this file, and the :not() guards keep
   the rule off deliberate nowrap strips that scroll horizontally. */
@media (max-width: 768px) {
  /* NOT scoped to #app: the publish wizards (DV360 / Google Ads / ChatGPT), the
     On-site "Sites & embed code" overlay and friends are appended to
     document.body, so an #app-scoped rule never reached their footers — that is
     where "Publish to Google Ads", "Generate script" and the wizard Back/Next
     rows live. Controls include inputs and selects, not just buttons. */
  [style*="display:flex"]:not([style*="flex-wrap"]):not([style*="overflow"]):has(> button, > input, > select, > a),
  [style*="display:inline-flex"]:not([style*="flex-wrap"]):not([style*="overflow"]):has(> button, > input, > select, > a) { flex-wrap: wrap; }
  /* same shape, but the row carries a class instead of inline styles */
  .sms-actions, .prod-topbar { flex-wrap: wrap; row-gap: 8px; }
  /* SMS / WhatsApp: a 280px | 1fr | 320px grid leaves nothing for the middle */
  .sms-shell { height: auto; }
  .sms-body { grid-template-columns: 1fr !important; }
  .sms-left, .sms-right { border-left: none; border-right: none; border-bottom: 1px solid var(--border); max-height: 34vh; }
  /* a wide table inside an overflow:hidden box can't be scrolled to at all */
  .um-table-wrap { overflow-x: auto; }
  [style*="overflow:hidden"]:has(> table) { overflow-x: auto !important; }
  /* Same problem built out of a grid instead of a <table>: the sites list is a
     6-track 593px grid (GTM / Meta pixel / GA4 / Pixels / Embed) inside an
     overflow:hidden overlay, so the last columns were cut with no way to reach
     them. Its own container scrolls sideways instead. */
  #osSitesBody { overflow-x: auto; }
  /* minmax(340px,…) floors that push the second column off the screen */
  .wp-grid, .pay-grid { grid-template-columns: 1fr !important; }
  .bl-cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
  code { overflow-wrap: anywhere; }
}

/* ── Sequence editor on phones ─────────────────────────────────────────────
   The step editor is a two-pane row: a fixed 270px steps column beside the
   email editor. At 375px that left the editor SEVENTEEN pixels — subject line,
   formatting toolbar, Saved indicator and the spintax/unsubscribe buttons all
   past the edge. Stack them; the steps list keeps its own scroll. */
@media (max-width: 768px) {
  .seq-ed-shell { flex-direction: column; }
  .seq-ed-steps { width: 100% !important; max-height: 34vh !important; padding-right: 0 !important; }
  .seq-ed-shell > * { width: 100%; min-width: 0; }
}

/* ── Landing page CANVAS editor (js/lp-canvas.js) ──────────────────────────
   A DV360-Rich-Media-style artboard: palette | canvas | inspector. The stage
   itself is a fixed 1440px (390 on mobile) scaled to fit the available width,
   so what you drag is exactly what publishes. */
#lpCanvasEditor { position: absolute; inset: 0; z-index: 60; background: var(--bg-page); }
#lpCanvasEditor.hidden { display: none; }
.lpc-shell { display: flex; flex-direction: column; height: 100%; }
.lpc-top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg-card); flex-shrink: 0; flex-wrap: wrap; row-gap: 8px; }
.lpc-body { flex: 1; display: flex; min-height: 0; }
.lpc-palette { width: 172px; flex-shrink: 0; border-right: 1px solid var(--border); padding: 12px 10px; background: var(--bg-card); overflow-y: auto; }
.lpc-pal-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-page); color: var(--text-primary); font-size: .78rem; font-weight: 600; cursor: pointer; text-align: left; }
.lpc-pal-btn:hover { border-color: var(--accent); }
.lpc-canvas-host { flex: 1; min-width: 0; overflow: auto; padding: 16px; background: repeating-conic-gradient(var(--bg-hover) 0% 25%, transparent 0% 50%) 50% / 22px 22px; }
.lpc-stagewrap { display: flex; justify-content: center; }
.lpc-stage { position: relative; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.lpc-el { outline: 1px dashed transparent; cursor: move; }
.lpc-el:hover { outline-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.lpc-el.sel { outline: 2px solid var(--accent); }
.lpc-inspector { width: 268px; flex-shrink: 0; border-left: 1px solid var(--border); padding: 14px 12px; background: var(--bg-card); overflow-y: auto; }
@media (max-width: 768px) {
  .lpc-body { flex-direction: column; }
  .lpc-palette { width: 100%; border-right: none; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px; max-height: 26vh; }
  .lpc-pal-btn { width: auto; flex: 1 1 30%; margin-bottom: 0; }
  .lpc-inspector { width: 100%; border-left: none; border-top: 1px solid var(--border); max-height: 40vh; }
}

/* ── Inbox accounts rail ──────────────────────────────────────────────────
   Every connected identity across all channels in one list — Gmail mailboxes,
   LinkedIn profiles, FB pages, IG accounts (+ their posts), WhatsApp and SMS
   numbers. Clicking a row selects the channel AND that account, so the pane
   next to it is always "this account's conversations". */
.ib-shell .ib-rail { width: 232px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--bg-page); overflow-y: auto; padding: 10px 8px 6px; display: flex; flex-direction: column; }
.ib-rail-hd { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); padding: 2px 8px 8px; }
/* "All conversations" sits above the account groups — it is the only row that
   belongs to no single account, so it gets its own weight and a divider. */
.ib-acc-all { font-weight: 700; padding: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0; }
.ib-acc-all .ib-acc-t1 { font-size: .82rem; font-weight: 700; }
.ib-acc-all .ib-acc-ic { display: inline-flex; color: var(--text-secondary); }
.ib-acc-all.on .ib-acc-ic { color: var(--accent); }
.ib-acc-grp { margin-bottom: 2px; }
.ib-acc-hd { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: .8rem; font-weight: 700; color: var(--text-secondary); }
.ib-acc-hd:hover { background: var(--bg-hover); }
.ib-acc-hd.on { color: var(--accent); }
.ib-acc-ic { display: inline-flex; flex: none; opacity: .85; }
.ib-acc-lbl { flex: 1; text-align: start; }
.ib-acc-caret { font-size: .62rem; opacity: .5; transition: transform .15s; }
.ib-acc-caret.open { transform: rotate(180deg); }
.ib-acc-badge { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: .62rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.ib-acc-rows { padding: 1px 0 4px; }
.ib-acc-row { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; padding: 6px 8px 6px 14px; border-radius: 8px; cursor: pointer; font-family: inherit; text-align: start; color: var(--text-primary); }
.ib-acc-row:hover { background: var(--bg-hover); }
.ib-acc-row.on { background: #d3e3fd33; }
.ib-acc-row.on .ib-acc-t1 { color: var(--accent); font-weight: 700; }
.ib-acc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ib-acc-t1 { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-acc-t2 { font-size: .66rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-acc-none { font-size: .7rem; color: var(--text-muted); padding: 4px 14px 6px; }
.ib-acc-sub { padding-inline-start: 14px; margin: 2px 0 6px; border-inline-start: 2px solid var(--border); }
.ib-acc-subrow { display: flex; align-items: center; gap: 7px; width: 100%; border: none; background: none; padding: 5px 8px; border-radius: 7px; cursor: pointer; font-family: inherit; font-size: .74rem; color: var(--text-secondary); text-align: start; }
.ib-acc-subrow:hover { background: var(--bg-hover); }
.ib-acc-subrow.on { background: #d3e3fd33; color: var(--accent); font-weight: 700; }
.ib-acc-thumb { width: 26px; height: 26px; border-radius: 5px; object-fit: cover; flex: none; }
.ib-acc-thumb-x { background: var(--bg-hover); display: inline-block; }
.ib-rail-foot { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; font-size: .68rem; padding: 10px 8px 2px; }
.ib-rail-foot a { color: var(--accent); text-decoration: none; }
/* Instagram post → its comment thread */
.ib-post { padding: 4px 2px; }
/* The post pane replaces the conversation list entirely, so it has to carry its
   own way back — the Instagram rail's "Conversations" row is not there on a
   Facebook page. */
/* Marks a comment that arrived on an AD post rather than the page feed —
   same page, different surface, and worth telling apart when replying. */
.ib-ad-tag { display: inline-flex; align-items: center; margin-inline-start: 6px; padding: 0 6px; border-radius: 100px; background: #f59e0b1f; color: #b45309; border: 1px solid #f59e0b3d; font-size: .6rem; font-weight: 800; letter-spacing: .03em; }
/* Per-comment moderation row in the post pane — quiet until hovered. */
.ib-post-cm-acts { display: flex; gap: 10px; margin-top: 3px; }
.ib-post-cm-acts button { border: none; background: none; padding: 0; font-size: .7rem; font-weight: 700; color: var(--text-muted); cursor: pointer; }
.ib-post-cm-acts button:hover { color: var(--accent); text-decoration: underline; }
.ib-post-back { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); border-radius: 100px; padding: 4px 12px; font-size: .74rem; font-weight: 700; cursor: pointer; margin-bottom: 10px; }
.ib-post-back:hover { background: var(--bg-hover); color: var(--text-primary); }
.ib-post-head { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; background: var(--bg-page); }
.ib-post-thumb { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex: none; }
.ib-post-cm { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
@media (max-width: 900px) {
  .ib-shell { flex-direction: column; height: auto; }
  .ib-shell .ib-rail { width: 100%; max-height: 210px; border-right: none; border-bottom: 1px solid var(--border); }
}

/* ── Inbox: minimised rail, folded contact panel, channel marks ───────────
   The rail and the contact panel both collapse, because on a laptop the
   thread itself is what deserves the pixels. */
.ib-rail-min { width: 52px !important; align-items: center; padding: 8px 4px !important; gap: 3px; }
.ib-rail-toggle { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: .9rem; line-height: 1; padding: 3px 6px; border-radius: 6px; margin-inline-start: auto; }
.ib-rail-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
.ib-rail-min .ib-rail-toggle { margin: 0 0 6px; }
.ib-mini { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; background: none; border-radius: 10px; cursor: pointer; color: var(--text-secondary); }
.ib-mini:hover { background: var(--bg-hover); }
.ib-mini.on { background: #d3e3fd33; color: var(--accent); }
.ib-mini-dot { position: absolute; top: 6px; inset-inline-end: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.ib-rail-hd { display: flex; align-items: center; }
.ib-info-fold { position: absolute; top: 6px; inset-inline-end: 6px; border: none; background: none; color: var(--text-muted); font-size: 1rem; line-height: 1; cursor: pointer; padding: 2px 5px; border-radius: 6px; }
.ib-info-fold:hover { background: var(--bg-hover); color: var(--text-primary); }
.ib-info-strip { flex: 0 0 26px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-muted); font-family: inherit; padding: 0; }
.ib-info-strip:hover { background: var(--bg-hover); color: var(--text-primary); }
.ib-info-vert { writing-mode: vertical-rl; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ib-chan-mark { display: inline-flex; align-items: center; margin-inline-end: 5px; vertical-align: -2px; }
.ib-chan-mark svg { width: 13px; height: 13px; }
.ib-tag-cm { display: inline-block; margin-inline-end: 6px; padding: 0 6px; border-radius: 20px; background: var(--bg-hover); color: var(--text-muted); font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px; }
.ib-row-thumb { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; flex: none; }
/* Compact: the list rows carry most of the vertical cost */
.ib-shell .gm-row { padding: 7px 10px; gap: 9px; }
.ib-shell .gm-row-from { font-size: .8rem; }
.ib-shell .gm-row-snip, .ib-shell .gm-row-time { font-size: .71rem; }
.ib-shell .ib-acc-row { padding: 5px 8px 5px 12px; }
.ib-shell .ib-acc-hd { padding: 5px 8px; }

/* ── Compact list density: Email campaigns, Automations, On-site campaigns ──
   Same density as the Social Content Posts list. These rows are built with
   INLINE padding in their section modules, so the override has to be
   !important to land — and it is scoped to .fv-clist rather than to the
   section, because the email builder lays its templates out in <table>s too
   and squeezing those would corrupt the design canvas. */
.fv-clist { font-size: .76rem; }
.fv-clist th { padding: 6px 10px !important; font-size: 10px !important; }
.fv-clist td { padding: 5px 10px !important; }
.fv-clist td .auto-lname { max-width: 220px; }
/* Row sub-lines (entry summary, edited date) carry the rest of the height. */
.fv-clist td > div[style*="font-size:11px"] { font-size: 10px !important; }