/* @fv-fonts-start — generated by scripts/fonts-sync.js; do not edit by hand */
@font-face{font-family:'Mulish';font-style:normal;font-weight:300 800;font-display:swap;src:url(https://d2ze5juatq0qtm.cloudfront.net/f/mulish-latin-ext-c1403ea766.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Mulish';font-style:normal;font-weight:300 800;font-display:swap;src:url(https://d2ze5juatq0qtm.cloudfront.net/f/mulish-latin-4d0c1135f6.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 800;font-display:swap;src:url(https://d2ze5juatq0qtm.cloudfront.net/f/rubik-hebrew-119f25217d.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 800;font-display:swap;src:url(https://d2ze5juatq0qtm.cloudfront.net/f/rubik-latin-ea3f56e306.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* @fv-fonts-end */
/* 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; } }
@keyframes dialerRingShake { 0%,50%,100% { transform: rotate(0); } 10% { transform: rotate(-14deg); } 20% { transform: rotate(11deg); } 30% { transform: rotate(-8deg); } 40% { transform: rotate(5deg); } }
.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; }
}
/* Splash fallback (app.js _splashRetry / _app.html __fvBootFail): a slow or dead
   connection shows why + a Retry, never an endless spinner. */
.app-loading-retry { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: -14px; text-align: center; padding: 0 24px; animation: appLogoFadeIn .4s ease both; }
.app-loading-retry-t { color: #fff; font-size: .95rem; font-weight: 600; }
.app-loading-retry-h { color: rgba(255,255,255,.62); font-size: .8rem; }
.app-loading-retry-b { margin-top: 10px; padding: 9px 26px; border: none; border-radius: 8px; background: #3f76ff; color: #fff; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.app-loading-retry-b:hover { background: #2f66ef; }

/* ג”€ג”€ Login (shadcn-style centered card) ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
/* Brand gradient = what phones / data-saver see (the video is desktop-only, app.js _loginVideoStart) */
.login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; position: fixed; inset: 0; z-index: 9999; background: linear-gradient(135deg, #312e81 0%, #1d4ed8 55%, #0f172a 100%); }
.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; }
/* Eye toggle on the password field — login AND the invite "choose a password" screen (same input). */
.login-pw-wrap { position: relative; }
.login-pw-wrap input { padding-inline-end: 40px; }
.login-pw-eye { position: absolute; top: 50%; inset-inline-end: 6px; transform: translateY(-50%); width: 30px; height: 30px; border: none; background: none; border-radius: 6px; cursor: pointer; color: #9ca3af; display: flex; align-items: center; justify-content: center; padding: 0; }
.login-pw-eye:hover { color: #111827; background: #f3f4f6; }
.login-pw-eye.is-on { color: #111827; }
.login-pw-eye.is-on::after { content: ""; position: absolute; width: 2px; height: 20px; background: currentColor; transform: rotate(45deg); border-radius: 2px; }
.login-pw-eye .fvi { width: 18px; height: 18px; }
.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; }
/* Trust-pack links (security / DPA / status / API) — deliberately quiet. */
.login-trust { text-align: center; font-size: .74rem; color: #9ca3af; margin: 14px 0 0; }
.login-trust a { color: #9ca3af; text-decoration: none; }
.login-trust a:hover { color: #374151; 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 { overscroll-behavior-x: none; font-size: 16px; -webkit-font-smoothing: antialiased; }
body { overscroll-behavior-x: none; 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);
}
/* AI Assistant "your answer is ready" dot ג€” the reply landed while the user
   was working in another section. Cleared when they open the tab. */
.nav-badge.ai-done-dot {
  background: #16a34a; box-shadow: 0 1px 3px rgba(22,163,74,.45);
  font-size: 0; min-width: 10px; width: 10px; height: 10px; padding: 0; border-radius: 50%;
  animation: aiDoneDot 1.6s ease-in-out infinite;
}
@keyframes aiDoneDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } }
/* 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: 204px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--sidebar-bg, var(--bg-elevated)); padding: 8px 6px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
/* The Projects rail sits on the dark sidebar colour (--sidebar-bg #2d3e50 since the nav theme): its text tokens are
   re-pointed to the same palette the main sidebar uses (#cbd6e2 / #fff / #99acc2) so board names read on it (2026-10-09). */
.proj-rail { --text: #fff; --text-secondary: #cbd6e2; --text-muted: #99acc2; --bg-hover: var(--nav-hover-bg, rgba(255,255,255,.08)); --border: rgba(255,255,255,.14); --bg-card: #3d5166; color: #cbd6e2; }
.proj-rail .proj-rail-name { color: #e3eaf2; }
.proj-rail .proj-rail-item:hover .proj-rail-name, .proj-rail .proj-rail-item.active .proj-rail-name { color: #fff; }
.proj-rail .proj-rail-nav.active { background: var(--nav-active-bg, rgba(255,255,255,.12)); color: #fff; }
.proj-rail .proj-rail-item.active { background: var(--nav-active-bg, rgba(255,255,255,.12)); }
.proj-rail .proj-rail-item.active .proj-rail-bic { color: #fff; }
.proj-rail-ws { display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px; }
.proj-rail-ws-ic { width: 22px; height: 22px; border-radius: 6px; background: var(--accent); color: #fff; font-weight: 800; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.proj-rail-ws-name { font-weight: 700; font-size: .8rem; color: var(--text); letter-spacing: .01em; }
.proj-rail-nav { display: flex; align-items: center; gap: 7px; width: 100%; border: none; background: none; color: var(--text-secondary); font-size: .76rem; font-weight: 500; padding: 4px 7px; border-radius: 5px; cursor: pointer; min-height: 26px; }
.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: 10px 7px 3px; }
.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; }
/* Compact rows — same density as the Leads lists rail */
.proj-rail-item { display: flex; align-items: center; gap: 6px; width: 100%; border: none; background: none; padding: 3px 7px; border-radius: 5px; cursor: pointer; text-align: left; min-height: 26px; }
.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-bic { width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-secondary); }
.proj-rail-bic svg { width: 14px; height: 14px; }
.proj-rail-item.active .proj-rail-bic { color: var(--accent); }
.proj-rail-addboard:hover .proj-rail-name, .proj-rail-addboard:hover .proj-rail-bic { color: var(--accent) !important; }
.proj-rail-name { flex: 1; min-width: 0; font-size: .76rem; 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; }

/* 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; }

@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; }
/* Gridlines + today live in ONE overlay sized to the chart (was bottom:-1000px per mark = a long empty scroll). */
.proj-gantt-grid { position: absolute; top: 0; bottom: 0; left: 230px; right: 0; pointer-events: none; }
.proj-gantt-mark { position: absolute; top: 0; bottom: 0; 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; margin-left: -1px; background: #ef4444; opacity: .75; }
.proj-gantt-lcol > span { overflow: hidden; text-overflow: ellipsis; }
.proj-gantt--lbl .proj-gantt-bar:not(.proj-gantt-bar--cycle) { height: 20px; }
.proj-gantt-lbl { position: absolute; left: 7px; right: 7px; top: 50%; transform: translateY(-50%); font-size: .66rem; font-weight: 600; line-height: 1.2; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.proj-gantt-lbl.out { left: calc(100% + 6px); right: auto; color: var(--text-secondary); font-weight: 500; overflow: visible; }
.proj-gantt-lbl--ms { right: auto; color: var(--text-secondary); font-weight: 500; overflow: visible; }
.proj-gantt-lcol--cycle { color: var(--text-secondary); font-style: italic; }
.proj-gantt-ms { position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 3px; transform: rotate(45deg); opacity: .9; }
.proj-gantt-pick { max-width: 520px; margin: 48px auto; padding: 24px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); text-align: center; }
.proj-gantt-pick-t { font-weight: 600; color: var(--text); margin-bottom: 6px; }
.proj-gantt-pick-s { font-size: .78rem; color: var(--text-secondary); margin-bottom: 16px; }
.proj-gantt-pick-b { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* 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; }

/* ג”€ג”€ Projects: monday-style Main Table ג”€ג”€ */
.mnb-wrap { padding: 12px 24px 50px; overflow-x: auto; }
.mnb-group { margin-bottom: 18px; min-width: fit-content; }
.mnb-ghead { display: flex; align-items: center; gap: 7px; padding: 2px 0 5px; }
.mnb-caret { background: none; border: none; cursor: pointer; display: flex; padding: 2px; border-radius: 5px; transition: transform .12s; }
.mnb-caret:hover { background: var(--bg-hover); }
.mnb-caret.collapsed { transform: rotate(-90deg); }
.mnb-gname { font-size: .94rem; font-weight: 700; cursor: text; padding: 2px 7px; border-radius: 5px; border: 1px solid transparent; }
.mnb-gname:hover { border-color: var(--border); }
.mnb-gname-input { font-size: .94rem; font-weight: 700; padding: 2px 7px; border: 1px solid var(--accent); border-radius: 5px; background: var(--bg-card); color: var(--text); outline: none; width: 220px; }
.mnb-gcolor { width: 14px; height: 14px; border-radius: 4px; border: none; cursor: pointer; flex-shrink: 0; padding: 0; }
.mnb-gcount { font-size: .72rem; color: var(--text-muted); }
.mnb-gdel { margin-left: auto; background: none; border: none; color: var(--text-muted); cursor: pointer; opacity: 0; border-radius: 5px; padding: 3px 5px; display: flex; }
.mnb-group:hover .mnb-gdel { opacity: .75; }
.mnb-gdel:hover { color: #e2445c; background: var(--bg-hover); }
.mnb-row { display: grid; align-items: stretch; border-bottom: 1px solid var(--border); background: var(--bg-card); min-height: 32px; }
.mnb-row:hover:not(.mnb-hrow):not(.mnb-sumrow):not(.mnb-addrow) { background: var(--bg-hover); }
.mnb-hrow { border-top: 1px solid var(--border); background: var(--bg-elevated); min-height: 32px; }
.mnb-sumrow { background: var(--bg-elevated); min-height: 25px; border-radius: 0 0 6px 0; }
.mnb-cell { display: flex; align-items: center; padding: 0 7px; border-right: 1px solid var(--border); min-width: 0; font-size: .78rem; color: var(--text); gap: 4px; overflow: hidden; }
.mnb-cell--bar { padding: 0; border-right: none; }
.mnb-bar { width: 6px; height: 100%; display: block; }
.mnb-bar--soft { opacity: .5; }
.mnb-hcell { font-size: .72rem; color: var(--text-secondary); font-weight: 500; justify-content: center; cursor: pointer; white-space: nowrap; position: relative; }
.mnb-colmenu-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px 3px; border-radius: 4px; display: inline-flex; opacity: 0; margin-left: 2px; flex-shrink: 0; }
.mnb-hcell:hover .mnb-colmenu-btn { opacity: .85; }
.mnb-colmenu-btn:hover { background: var(--bg-card); color: var(--text); opacity: 1 !important; }
/* Resize handle straddles the border between two columns and belongs to the LEFT one: hovering it tints that
   header; while dragging, every cell of the column shows the accent edge and a "132 px" badge follows the pointer. */
.mnb-colresize { position: absolute; right: -4px; top: 0; bottom: 0; width: 9px; cursor: col-resize; z-index: 4; }
.mnb-colresize::after { content: ''; position: absolute; left: 3px; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: transparent; }
.mnb-colresize:hover::after { background: var(--accent); }
.mnb-hcell:has(> .mnb-colresize:hover) { background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated)); }
.mnb-resizing-col { box-shadow: inset -2px 0 0 var(--accent) !important; }
body.mnb-resizing, body.mnb-resizing * { cursor: col-resize !important; user-select: none !important; }
.mnb-resize-badge { position: fixed; z-index: 30000; pointer-events: none; background: #1f2937; color: #fff; font-size: .68rem; font-weight: 600; padding: 3px 7px; border-radius: 6px; box-shadow: 0 4px 12px rgba(16,24,40,.25); }
/* Live column drag: the grabbed column's cells ride with the pointer, the others slide aside. */
.mnb-grip { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 16px; flex-shrink: 0; color: var(--text-muted); opacity: 0; cursor: grab; user-select: none; touch-action: none; }
.mnb-hcell:hover .mnb-colgrip { opacity: .6; }
.mnb-colgrip:hover { opacity: 1 !important; color: var(--text); }
.mnb-hcell .mnb-colgrip { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); }
.mnb-hcell[data-col] { padding-left: 17px; }
.mnb-wrap.mnb-coldragging [data-col] { transition: transform .16s ease; }
.mnb-wrap.mnb-coldragging [data-col].mnb-coldrag { transition: none; position: relative; z-index: 6; background: var(--bg-card); box-shadow: 0 0 0 1px var(--accent), 0 10px 24px rgba(16,24,40,.2); opacity: .94; }
.mnb-wrap.mnb-coldragging .mnb-hcell.mnb-coldrag { background: var(--bg-elevated); }
body.mnb-coldragging, body.mnb-coldragging * { cursor: grabbing !important; user-select: none !important; }
/* Live row drag (same mechanics for rows). */
.mnb-wrap.mnb-rowdragging .mnb-row[data-iid] { transition: transform .16s ease; }
.mnb-wrap.mnb-rowdragging .mnb-row.mnb-rowdrag { transition: none; position: relative; z-index: 7; box-shadow: 0 0 0 1px var(--accent), 0 10px 24px rgba(16,24,40,.2); opacity: .95; background: var(--bg-card); }
body.mnb-rowdragging, body.mnb-rowdragging * { cursor: grabbing !important; user-select: none !important; }
.mnb-handle { touch-action: none; }
/* The Item column (and the colour bar before it) stay put while the table scrolls sideways. */
.mnb-wrap .mnb-row > .mnb-cell--bar { position: sticky; left: 0; z-index: 3; background: inherit; }
.mnb-wrap .mnb-row > .mnb-cell:nth-child(2) { position: sticky; left: 8px; z-index: 3; background: inherit; box-shadow: 1px 0 0 var(--border); }
.mnb-wrap .mnb-ghead { position: sticky; left: 0; }
/* Column menu quick actions (sort / move / fit) */
.mnb-pop-quick { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.mnb-pop-quick .mnb-pop-item { width: auto; flex: 1 1 46%; font-size: .72rem; padding: 4px 6px; }
.mnb-pop-quick .mnb-pop-item.on { color: var(--accent); font-weight: 700; }
/* Tag / dropdown chips: ✕ appears on hover */
.mnb-tag--x { display: inline-flex; align-items: center; gap: 3px; }
.mnb-tag-x { display: none; font-style: normal; font-size: .58rem; line-height: 1; cursor: pointer; opacity: .65; padding: 1px 0 1px 1px; }
.mnb-tag--x:hover .mnb-tag-x { display: inline; }
.mnb-tag-x:hover { opacity: 1; }
/* Touch devices (tablet): grips are always visible — there is no hover. */
@media (hover: none) and (min-width: 641px) { .mnb-handle, .mnb-colgrip { opacity: .5; } .mnb-tag-x { display: inline; } }
/* Phones: no grips / caret in the crowded Item cell. */
@media (max-width: 640px) { .mnb-handle, .mnb-colgrip, .mnb-subcaret.dim { display: none; } .mnb-hcell[data-col] { padding-left: 7px; } }
.mnb-hcell:hover { color: var(--text); background: var(--bg-hover); }
.mnb-addcolbtn { font-size: 15px; color: var(--text-muted); }
.mnb-namecell { padding-right: 4px; }
.mnb-name { flex: 1; min-width: 0; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text); font-size: .8rem; padding: 2px 6px; outline: none; font-family: inherit; }
.mnb-name:hover { border-color: var(--border); }
.mnb-name:focus { border-color: var(--accent); background: var(--bg-card); }
.mnb-open { display: inline-flex; align-items: center; gap: 3px; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 3px 4px; border-radius: 5px; flex-shrink: 0; }
.mnb-open:hover { color: var(--accent); background: var(--bg-hover); }
.mnb-cnum { font-size: .64rem; font-weight: 600; }
.mnb-rowdel { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .72rem; padding: 3px 5px; border-radius: 5px; opacity: 0; flex-shrink: 0; }
.mnb-row:hover .mnb-rowdel { opacity: .7; }
.mnb-rowdel:hover { color: #e2445c; background: var(--bg-hover); }
.mnb-cell--fill { padding: 0; }
.mnb-cell--click { cursor: pointer; }
.mnb-statusfill { width: 100%; align-self: stretch; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 600; cursor: pointer; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 4px; min-height: 32px; }
.mnb-statusfill:hover { filter: brightness(.94); }
.mnb-dim { color: var(--text-muted); font-size: .8rem; }
.mnb-datein { border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text); font-size: .74rem; padding: 2px 3px; cursor: pointer; outline: none; font-family: inherit; width: 100%; text-align: center; }
.mnb-datein:hover { border-color: var(--border); }
.mnb-datein:focus { border-color: var(--accent); background: var(--bg-card); }
.mnb-datein.overdue { color: #e2445c; font-weight: 600; }
/* Formatted date cell + hidden native picker behind it */
.mnb-datewrap { position: relative; cursor: pointer; }
.mnb-dateshow { font-size: .74rem; color: var(--text); border: 1px solid transparent; border-radius: 5px; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mnb-dateshow:hover { border-color: var(--border); }
.mnb-dateshow.overdue { color: #e2445c; font-weight: 600; }
.mnb-datehid { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: none; padding: 0; pointer-events: none; }
/* Column header inline rename */
.mnb-hname { flex: 1; min-width: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--text-secondary); font-size: 11.5px; font-weight: 500; text-align: center; padding: 1px 4px; outline: none; font-family: inherit; cursor: text; }
.mnb-hname:hover { border-color: var(--border); color: var(--text); }
.mnb-hname:focus { border-color: var(--accent); background: var(--bg-card); color: var(--text); }
/* Range calendar (timeline popover) */
.mnb-cal { display: grid; grid-template-columns: repeat(7, 28px); gap: 2px; justify-content: center; padding: 2px 0; }
.mnb-cal-dow { font-size: .6rem; color: var(--text-muted); text-align: center; font-weight: 700; padding: 2px 0; }
.mnb-cal-day { border: none; background: none; border-radius: 6px; font-size: .72rem; color: var(--text); width: 28px; height: 26px; cursor: pointer; font-family: inherit; }
.mnb-cal-day:hover { background: var(--bg-hover); }
.mnb-cal-day.today { box-shadow: inset 0 0 0 1px var(--accent); }
.mnb-cal-day.in { background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 0; }
.mnb-cal-day.edge { background: var(--accent); color: #fff; font-weight: 700; }
.mnb-tl { width: 100%; height: 19px; border-radius: 10px; background: var(--bg-hover); color: var(--text-secondary); font-size: .64rem; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; white-space: nowrap; overflow: hidden; }
.mnb-inline { width: 100%; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text); font-size: .76rem; padding: 2px 5px; outline: none; font-family: inherit; }
.mnb-inline:hover { border-color: var(--border); }
.mnb-inline:focus { border-color: var(--accent); background: var(--bg-card); }
.mnb-tag { font-size: .64rem; padding: 1px 7px; border-radius: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mnb-star { cursor: pointer; color: var(--border); font-size: .9rem; line-height: 1; }
.mnb-star.on { color: #ffcb00; }
.mnb-star:hover { transform: scale(1.15); }
.mnb-addrow .mnb-cell { border-right: none; }
.mnb-additem { width: 100%; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text); font-size: .78rem; padding: 3px 6px; outline: none; font-family: inherit; }
.mnb-additem::placeholder { color: var(--text-muted); }
.mnb-additem:focus { border-color: var(--accent); background: var(--bg-card); }
.mnb-dist { display: flex; width: 100%; height: 17px; border-radius: 4px; overflow: hidden; margin: 0 6px; }
.mnb-dist span { display: block; height: 100%; }
.mnb-sumnum { justify-content: center; font-weight: 600; font-size: .76rem; color: var(--text-secondary); }
.mnb-addgroup { border: none; background: none; color: var(--text-secondary); font-size: .82rem; font-weight: 600; cursor: pointer; padding: 8px 10px; border-radius: 7px; }
.mnb-addgroup:hover { background: var(--bg-hover); color: var(--text); }
/* cell popover */
.mnb-pop { position: fixed; z-index: 30000; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(16,24,40,.2); padding: 10px; min-width: 220px; max-width: 300px; max-height: 62vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.mnb-pop-title { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 0 2px 2px; }
.mnb-pop-label { border: none; border-radius: 4px; color: #fff; font-size: .74rem; font-weight: 600; padding: 5px 8px; cursor: pointer; text-align: center; }
.mnb-pop-label:hover { filter: brightness(.92); }
.mnb-pop-editbtn { display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px dashed var(--border); background: none; border-radius: 6px; color: var(--text-secondary); font-size: .74rem; padding: 6px; cursor: pointer; margin-top: 2px; }
.mnb-pop-editbtn:hover { color: var(--text); background: var(--bg-hover); }
.mnb-pop-editrow { display: flex; align-items: center; gap: 6px; }
.mnb-pop-editrow input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); font-size: .78rem; padding: 5px 8px; outline: none; }
.mnb-pop-editrow input:focus { border-color: var(--accent); }
.mnb-pop-dot { width: 18px; height: 18px; border-radius: 5px; border: none; cursor: pointer; flex-shrink: 0; padding: 0; }
.mnb-pop-x { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .72rem; padding: 2px 4px; }
.mnb-pop-x:hover { color: #e2445c; }
.mnb-pop-addbtn { border: 1px dashed var(--border); background: none; border-radius: 6px; color: var(--text-secondary); font-size: .74rem; padding: 6px; cursor: pointer; }
.mnb-pop-addbtn:hover { background: var(--bg-hover); color: var(--text); }
.mnb-pop-apply { border: none; background: var(--accent); color: #fff; border-radius: 6px; font-size: .76rem; font-weight: 600; padding: 6px 10px; cursor: pointer; }
.mnb-pop-apply:hover { background: var(--accent-hover); }
.mnb-pop-person { display: flex; align-items: center; gap: 8px; border: none; background: none; border-radius: 7px; padding: 5px 7px; cursor: pointer; font-size: .8rem; color: var(--text); }
.mnb-pop-person:hover { background: var(--bg-hover); }
.mnb-pop-person.on { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.mnb-pop-input { border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); font-size: .78rem; padding: 6px 9px; outline: none; font-family: inherit; }
.mnb-pop-input:focus { border-color: var(--accent); }
.mnb-pop-tag { border: none; border-radius: 10px; font-size: .7rem; font-weight: 600; padding: 3px 9px; cursor: pointer; }
.mnb-pop-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.mnb-pop-swatch { width: 26px; height: 26px; border-radius: 6px; border: none; cursor: pointer; padding: 0; }
.mnb-pop-swatch:hover { transform: scale(1.1); }
.mnb-pop-item { border: none; background: none; text-align: left; font-size: .8rem; color: var(--text); padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.mnb-pop-item:hover { background: var(--bg-hover); }
/* phase 2: view tabs, toolbar, dnd, bulk, undo */
.mnb-tabs { display: flex; align-items: flex-end; gap: 2px; padding: 8px 24px 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
.mnb-tab { display: inline-flex; align-items: center; gap: 4px; padding: 7px 6px 7px 12px; font-size: .8rem; font-weight: 500; color: var(--text-secondary); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; border-radius: 6px 6px 0 0; }
.mnb-tab:hover { background: var(--bg-hover); color: var(--text); }
.mnb-tab.active { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
.mnb-tab-menu { background: none; border: none; color: inherit; cursor: pointer; padding: 2px; border-radius: 4px; opacity: 0; display: flex; }
.mnb-tab:hover .mnb-tab-menu, .mnb-tab.active .mnb-tab-menu { opacity: .7; }
.mnb-tab-menu:hover { background: var(--bg-hover); opacity: 1; }
.mnb-tab-add { background: none; border: none; color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 6px 10px; border-radius: 6px 6px 0 0; }
.mnb-tab-add:hover { background: var(--bg-hover); color: var(--accent); }
.mnb-pchips { display: inline-flex; align-items: center; }
.mnb-pchip { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bg-card); color: #fff; font-size: .62rem; font-weight: 700; cursor: pointer; margin-left: -5px; padding: 0; opacity: .8; }
.mnb-pchip:first-child { margin-left: 0; }
.mnb-pchip:hover { opacity: 1; transform: scale(1.1); z-index: 1; position: relative; }
.mnb-pchip.on { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); z-index: 1; position: relative; }
.mnb-toolbtn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); border-radius: 7px; height: 30px; padding: 0 11px; font-size: .76rem; font-weight: 500; cursor: pointer; }
.mnb-toolbtn:hover { background: var(--bg-hover); color: var(--text); }
.mnb-toolbtn.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.mnb-badge { background: var(--accent); color: #fff; border-radius: 8px; font-size: .62rem; font-weight: 700; padding: 0 5px; line-height: 1.5; }
.mnb-frow { display: flex; align-items: center; gap: 5px; }
.mnb-frow select, .mnb-frow input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); font-size: .74rem; padding: 5px 6px; outline: none; height: 28px; width: auto; }
.mnb-frow select:focus, .mnb-frow input:focus { border-color: var(--accent); }
.mnb-pop--wide { min-width: 340px; max-width: 420px; }
.mnb-handle { display: inline-flex; align-items: center; color: var(--text-muted); cursor: grab; opacity: 0; flex-shrink: 0; user-select: none; padding: 2px 1px; }
.mnb-row:hover .mnb-handle { opacity: .6; }
.mnb-handle:hover { opacity: 1 !important; color: var(--text); }
.mnb-ghandle { color: var(--text-muted); font-size: .7rem; letter-spacing: -2px; cursor: grab; opacity: 0; user-select: none; padding: 2px 1px; }
.mnb-ghead:hover .mnb-ghandle { opacity: .6; }
.mnb-check { accent-color: var(--accent); cursor: pointer; width: 14px; height: 14px; flex-shrink: 0; opacity: 0; }
.mnb-done { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--border); background: none; color: transparent; font-size: 10px; font-weight: 800; line-height: 1; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background .12s, border-color .12s; }
.mnb-done:hover { border-color: #00c875; color: #00c875; }
.mnb-done.on { background: #00c875; border-color: #00c875; color: #fff; }
.mnb-row--done .mnb-name { text-decoration: line-through; color: var(--text-muted); }
.mnb-row:hover .mnb-check, .mnb-check.vis, .mnb-check:checked, .mnb-hrow .mnb-check { opacity: 1; }
.mnb-row--sel { background: color-mix(in srgb, var(--accent) 7%, var(--bg-card)) !important; }
.mnb-dropbefore { box-shadow: inset 0 2px 0 var(--accent); }
.mnb-bulk { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 25000; display: flex; align-items: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(16,24,40,.22); padding: 10px 14px; font-size: .8rem; color: var(--text); }
.mnb-bulk-n { background: var(--accent); color: #fff; min-width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .78rem; padding: 0 6px; }
.mnb-bulk-btn { border: 1px solid var(--border); background: var(--bg-card); color: var(--text); border-radius: 7px; padding: 5px 11px; font-size: .76rem; font-weight: 500; cursor: pointer; }
.mnb-bulk-btn:hover { background: var(--bg-hover); }
.mnb-bulk-sel { border: 1px solid var(--border); background-color: var(--bg-card); color: var(--text); border-radius: 7px; padding: 0 24px 0 8px; font-size: .76rem; height: 29px; cursor: pointer; width: auto; max-width: 170px; }
.mnb-undo { position: fixed; bottom: 22px; left: 22px; z-index: 26000; display: flex; align-items: center; gap: 12px; background: #1f2937; color: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(16,24,40,.3); padding: 11px 14px; font-size: .8rem; opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s; pointer-events: none; }
.mnb-undo.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mnb-undo-btn { background: none; border: none; color: #7cb0ff; font-weight: 700; font-size: .8rem; cursor: pointer; padding: 2px 4px; }
.mnb-undo-btn:hover { text-decoration: underline; }
.mnb-undo-x { background: none; border: none; color: rgba(255,255,255,.55); cursor: pointer; font-size: .72rem; padding: 2px 4px; }
.mnb-undo-x:hover { color: #fff; }
/* phase 4: column settings, automations, form / chart / workload views */
.mnb-unit { font-size: .7rem; color: var(--text-secondary); font-weight: 600; flex-shrink: 0; }
.mnb-pop-done { background: none; border: 1px solid var(--border); border-radius: 5px; color: var(--text-muted); cursor: pointer; font-size: .7rem; width: 22px; height: 22px; flex-shrink: 0; padding: 0; }
.mnb-pop-done.on { background: #00c875; border-color: #00c875; color: #fff; }
.mnb-auto-row { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; background: var(--bg-card); }
.mnb-auto-row.off { opacity: .5; }
.mnb-auto-tgl { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); border-radius: 10px; font-size: .64rem; font-weight: 700; padding: 2px 8px; cursor: pointer; flex-shrink: 0; }
.mnb-auto-row:not(.off) .mnb-auto-tgl { border-color: #00c875; color: #00c875; }
.mnb-form-wrap { display: flex; justify-content: center; padding: 28px 24px 60px; }
.mnb-form { width: 100%; max-width: 520px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); padding: 0 26px 24px; overflow: hidden; box-shadow: var(--shadow-md, 0 4px 16px rgba(16,24,40,.06)); }
.mnb-form-band { height: 8px; margin: 0 -26px 18px; }
.mnb-form-title { font-size: 1.3rem; font-weight: 700; color: var(--text); }
.mnb-form-sub { font-size: .82rem; color: var(--text-secondary); margin: 4px 0 6px; }
.mnb-form-lbl { display: block; font-size: .8rem; font-weight: 600; color: var(--text); margin: 16px 0 6px; }
.mnb-form-in { width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text); font-size: .84rem; padding: 8px 10px; outline: none; box-sizing: border-box; font-family: inherit; }
.mnb-form-in:focus { border-color: var(--accent); }
/* Form dropdowns render with appearance:none (global select reset) — without a
   chevron an unanswered status/dropdown/rating field looked like an empty box. */
select.mnb-form-in { -webkit-appearance: none; appearance: none; padding-right: 30px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
[dir="rtl"] select.mnb-form-in { padding-right: 10px; padding-left: 30px; background-position: left 10px center; }
/* phase 6: expandable subitems, monday kanban, mobile */
.mnb-subcaret { display: inline-flex; align-items: center; gap: 1px; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; border-radius: 4px; flex-shrink: 0; transition: transform .12s; }
.mnb-subcaret:hover { background: var(--bg-hover); color: var(--text); }
.mnb-subcaret.open svg { transform: rotate(90deg); }
.mnb-subcaret.dim { opacity: 0; }
.mnb-row:hover .mnb-subcaret.dim { opacity: .55; }
.mnb-subn { font-size: .6rem; font-weight: 700; color: var(--text-secondary); }
.mnb-subrow2 { background: var(--bg-elevated); }
.mnb-subrow2:hover { background: var(--bg-hover); }
/* Subitem rows share the parent's columns (monday hierarchy): the name cell is
   indented under the parent with a ╰ connector; every other cell is a regular
   board cell. */
.mnb-subrow2 .mnb-subname { padding-left: 30px; }
.mnb-subtree { width: 11px; height: 13px; margin: -9px 3px 0 0; border-left: 1.5px solid var(--border); border-bottom: 1.5px solid var(--border); border-radius: 0 0 0 4px; flex-shrink: 0; opacity: .9; }
.mnb-subrow2--add .mnb-subtree { border-left-style: dashed; border-bottom-style: dashed; opacity: .55; }
.mnb-subrow2 .mnb-name { font-size: .78rem; }
.mnb-subrow2 .mnb-statusfill { font-size: .7rem; }
.mnb-subrow2 .mnb-additem { font-size: .76rem; }
.mnbk-board { display: flex; gap: 12px; overflow-x: auto; padding: 16px 24px; align-items: flex-start; min-height: calc(100vh - 220px); }
.mnbk-col { min-width: 250px; max-width: 290px; flex: 0 0 264px; border-radius: 10px; background: var(--bg-elevated); border: 1px solid var(--border); overflow: hidden; transition: box-shadow .12s; }
.mnbk-col.mnbk-over { box-shadow: 0 0 0 2px var(--accent); }
.mnbk-colhead { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: #fff; font-size: .8rem; font-weight: 700; }
.mnbk-colhead span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnbk-colcount { margin-left: auto; font-size: .68rem; font-weight: 700; background: rgba(255,255,255,.25); border-radius: 10px; padding: 0 7px; flex-shrink: 0; }
.mnbk-cards { display: flex; flex-direction: column; gap: 7px; padding: 9px; min-height: 40px; max-height: calc(100vh - 300px); overflow-y: auto; }
.mnbk-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; cursor: pointer; box-shadow: 0 1px 2px rgba(16,24,40,.05); transition: box-shadow .12s; }
.mnbk-card:hover { box-shadow: 0 3px 10px rgba(16,24,40,.1); }
.mnbk-title { font-size: .8rem; color: var(--text); font-weight: 500; margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mnbk-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mnbk-chip { font-size: .64rem; color: var(--text-secondary); background: var(--bg-hover); border-radius: 8px; padding: 1px 6px; white-space: nowrap; }
.mnbk-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mnbk-addcard { text-align: left; background: none; border: 1px dashed var(--border); border-radius: 8px; padding: 7px 10px; color: var(--text-secondary); font-size: .76rem; cursor: pointer; }
.mnbk-addcard:hover { color: var(--accent); border-color: var(--accent); }
/* phase 7: rich composer, favorites, interactive gantt, presence */
.pip-mdbar { display: flex; gap: 4px; margin-bottom: 6px; }
.pip-mdbar button { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); border-radius: 6px; width: 26px; height: 24px; font-size: .72rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pip-mdbar button:hover { color: var(--text); background: var(--bg-hover); }
.pip-iconbtn.on-accent { color: var(--accent); }
.proj-rail-star { flex-shrink: 0; color: var(--text-muted); font-size: .78rem; opacity: 0; cursor: pointer; padding: 0 2px; }
.proj-rail-item:hover .proj-rail-star { opacity: .7; }
.proj-rail-star.on { opacity: 1; color: #ffcb00; }
.proj-rail-star:hover { opacity: 1; color: #ffcb00; }
.proj-gantt-bar--drag { cursor: grab; }
.proj-gantt-bar--drag:active { cursor: grabbing; }
.gantt-rz { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; }
.gantt-rz--l { left: -2px; }
.gantt-rz--r { right: -2px; }
.proj-cal-over { outline: 2px solid var(--accent); outline-offset: -2px; }
.proj-cal-ev { cursor: grab; }
/* Mobile pass: rail collapses (existing 60px rule), panels go full-width,
   toolbars wrap, bulk bar fits the viewport. */
@media (max-width: 760px) {
  .proj-issue-panel { width: 100vw; }
  .mnb-wrap { padding: 10px 8px 60px; }
  .mnb-tabs { padding: 6px 8px 0; }
  .mnb-bulk { left: 8px; right: 8px; transform: none; flex-wrap: wrap; justify-content: center; }
  .mnb-pop { max-width: calc(100vw - 16px); }
  .mnbk-board { padding: 12px 8px; }
  .mnb-form { padding: 0 16px 20px; }
  .mnb-form-band { margin: 0 -16px 16px; }
}

/* ג”€ג”€ג”€ 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); }
/* flex: 0 1 280px + min-width — the name field gives way before the action
   buttons do, so HTML + Next never leave the viewport (2026-10-05). */
.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; flex: 0 1 280px; min-width: 110px; }
.email-topbar .em-hd-actions { flex-shrink: 0; }
.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; }
/* Mobile design overrides (email editor): inspector section + hidden-on-mobile placeholder */
.email-mob-banner { background: var(--accent); color: #fff; font-size: .74rem; font-weight: 600; padding: 6px 10px; border-radius: 7px; margin: 0 0 8px; }
.email-mob-sec { border: 1px dashed var(--border); border-radius: 8px; padding: 8px 10px; margin: 0 0 12px; }
.email-mob-sec.on { border-color: var(--accent); background: rgba(63,118,255,.06); }
.email-mob-head { display: flex; justify-content: space-between; align-items: center; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); margin-bottom: 4px; }
.email-mob-head b { color: var(--accent); text-transform: none; letter-spacing: 0; font-size: .7rem; }
.email-mob-hide { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text); margin-top: 7px; cursor: pointer; }
.email-mob-hide input { margin: 0; }
.email-mob-ov { font-size: .72rem; color: var(--text-secondary); margin-top: 7px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.email-mob-ov button { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; font-size: .68rem; color: #ef4444; cursor: pointer; }
.email-hidden-mob { border: 1px dashed #cbd5e1; border-radius: 6px; padding: 8px; margin: 4px 0; text-align: center; color: #94a3b8; font: 11px system-ui, sans-serif; background: repeating-linear-gradient(45deg, transparent, transparent 6px, #f1f5f9 6px, #f1f5f9 12px); }
/* 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; }
/* Workspace colour swatches under a colour field (app.js fvColorSwatches) */
.fv-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; }
.fv-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); cursor: pointer; transition: transform .1s; }
.fv-swatch:hover { transform: scale(1.18); }
.fv-swatch-save { font-size: .68rem; padding: 1px 7px; border: 1px dashed var(--border); border-radius: 10px; background: transparent; color: var(--text-secondary); cursor: pointer; line-height: 1.5; }
.fv-swatch-save:hover { color: var(--accent); border-color: var(--accent); }
.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; }
/* fvConfirm / fvAsk / fvAlert: always the topmost layer (only the toast, 100500, sits above) — a confirm asked from any drawer, panel or modal must never render behind it. */
#fvDialog { z-index: 100400; }
.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; }
/* "New … — pick a starting point" template pickers (_fvTplPicker in app.js:
   Email, SMS, WhatsApp, Landing pages). Header + scrollable card grid; every
   card = icon tile + name + description, equal height per row. */
.fv-tplpick { width: 880px; max-width: 96vw; max-height: 86vh; padding: 0; overflow: hidden; }
.fv-tplpick-hd { display: flex; align-items: center; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid var(--border); }
.fv-tplpick-hd .fv-tplpick-title { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.3; }
.fv-tplpick-hd .fv-tplpick-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.fv-tplpick-x { margin-inline-start: auto; width: 32px; height: 32px; border-radius: 8px; border: none; background: none; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fv-tplpick-x:hover { background: var(--bg-hover, rgba(0,0,0,.05)); color: var(--text); }
/* The scroll box is a separate wrapper on purpose: a grid that is itself the
   shrunk flex item gets its auto rows sized below their content in Chromium
   (3-line descriptions spilled out of their cards). */
.fv-tplpick-body { overflow-y: auto; min-height: 0; flex: 1 1 auto; background: var(--bg, var(--bg-card)); }
.fv-tplpick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; padding: 18px 22px 22px; }
.fv-tplpick-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: start; min-height: 128px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); color: var(--text); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; font: inherit; }
.fv-tplpick-card:hover, .fv-tplpick-card:focus-visible { border-color: var(--accent); box-shadow: 0 6px 20px rgba(15,23,42,.10); transform: translateY(-1px); outline: none; }
.fv-tplpick-card.is-blank { border-style: dashed; }
.fv-tplpick-ico { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); flex-shrink: 0; }
.fv-tplpick-card.is-blank .fv-tplpick-ico { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 12%, transparent); }
.fv-tplpick-ico .fvi { width: 20px; height: 20px; vertical-align: 0; }
.fv-tplpick-name { font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.fv-tplpick-desc { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
@media (max-width: 640px) { .fv-tplpick-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; } .fv-tplpick-card { min-height: 0; padding: 12px; } .fv-tplpick-hd { padding: 14px 16px 12px; } }

/* AI automation recommendations (js/auto-recos.js) — Automation home + gallery */
.arc-wrap { margin: 0 0 22px; }
.arc-onb { display: flex; gap: 18px; align-items: flex-start; border: 1px dashed var(--accent); border-radius: 14px; padding: 20px 22px; background: color-mix(in srgb, var(--accent) 5%, var(--bg-card)); }
.arc-onb-ico { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.arc-title { font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.arc-title .fvi { color: var(--accent); }
.arc-sub { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin-top: 3px; }
.arc-url-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.arc-input { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text); padding: 8px 11px; font: inherit; font-size: 13px; min-width: 0; }
.arc-url-row .arc-input { flex: 1 1 280px; }
.arc-input:focus { outline: none; border-color: var(--accent); }
.arc-err { color: #dc2626; font-size: 12.5px; margin-top: 8px; }
.arc-steps { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.arc-step { font-size: 11.5px; padding: 3px 10px; border-radius: 100px; border: 1px solid var(--border); color: var(--text-muted); }
.arc-step.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.arc-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.arc-actions { margin-inline-start: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.arc-biz { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; }
.arc-biz b { color: var(--text); font-weight: 600; }
.arc-biz a { color: var(--accent); text-decoration: none; }
.arc-dim { color: var(--text-muted); }
.arc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.arc-card { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); padding: 14px 16px; transition: border-color .15s, box-shadow .15s; }
.arc-card:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgba(15,23,42,.08); }
.arc-card-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.arc-x { margin-inline-start: auto; border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 6px; opacity: .55; }
.arc-x:hover { opacity: 1; background: var(--bg-hover); }
.arc-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 2px 8px; border-radius: 100px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.arc-badge.hi { background: #dcfce7; color: #15803d; }
.arc-badge.ai { background: #f3e8ff; color: #7c3aed; }
.arc-name { font-weight: 700; font-size: 14px; line-height: 1.3; }
.arc-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.arc-why { font-size: 12px; color: var(--text-muted); line-height: 1.45; border-inline-start: 2px solid var(--border); padding-inline-start: 8px; }
.arc-meta { display: flex; flex-direction: column; gap: 4px; font-size: 12px; margin-top: 2px; }
.arc-k { display: inline-block; min-width: 64px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.arc-chs { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.arc-ch { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 1px 8px; border-radius: 100px; border: 1px solid var(--border); }
.arc-flow { font-size: 12px; }
.arc-flow summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; }
.arc-flow summary::-webkit-details-marker { display: none; }
.arc-flow ol, .arc-ol { margin: 6px 0 0; padding-inline-start: 18px; color: var(--text-secondary); line-height: 1.5; }
.arc-card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; }
.arc-card-foot .proj-primary-btn { margin-inline-start: auto; }
.arc-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 100px; border: 1px solid transparent; font-family: inherit; }
.arc-pill.ok { background: #dcfce7; color: #15803d; }
.arc-pill.warn { background: #fef3c7; color: #b45309; cursor: pointer; }
.arc-pill.warn:hover { border-color: #b45309; }
.arc-more { display: block; margin: 12px auto 0; background: none; border: 1px solid var(--border); border-radius: 100px; padding: 6px 16px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent); cursor: pointer; }
.arc-more:hover { border-color: var(--accent); }
.arc-sect { font-size: 14px; font-weight: 800; margin: 18px 0 10px; }
.arc-foot { font-size: 12px; color: var(--text-muted); margin-top: 12px; }
.arc-foot a { color: var(--accent); text-decoration: none; }
.arc-empty { border: 1px dashed var(--border); border-radius: 12px; padding: 16px; font-size: 12.5px; color: var(--text-secondary); }
.arc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.arc-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.arc-form .arc-input { width: 100%; box-sizing: border-box; font-weight: 400; }
.arc-form .arc-wide { grid-column: 1 / -1; }
.arc-feats { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.arc-feats label { flex-direction: row; align-items: center; gap: 5px; font-weight: 500; font-size: 12.5px; color: var(--text); }
.arc-req { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.arc-req-h { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.arc-req-h .fvi { color: #b45309; }
.arc-req-b { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin-top: 4px; }
.arc-ai-res { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
#arcAiPrompt { width: 100%; box-sizing: border-box; }
@media (max-width: 640px) { .arc-onb { flex-direction: column; padding: 16px; } .arc-grid { grid-template-columns: 1fr; } .arc-form { grid-template-columns: 1fr; } .arc-actions { margin-inline-start: 0; } }
.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 settings sub-menu (Senders / Domains / Topics / Deliverability) */
.em-set-tabs { display: flex; gap: 2px; margin: 14px 0 4px; border-bottom: 1px solid var(--border); }
.em-set-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 14px; font-size: .82rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: color .12s, border-color .12s; }
.em-set-tab:hover { color: var(--text-primary); }
.em-set-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.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: 580px; 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; }
/* Projects → Activity Log timeline */
.pact-timeline { position: relative; padding: 2px 0 2px 4px; }
.pact-timeline::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 10px; width: 2px; background: var(--border); border-radius: 2px; }
.pact-row { position: relative; display: flex; gap: 12px; padding: 5px 0 5px 0; }
.pact-dot { position: relative; z-index: 1; flex-shrink: 0; width: 12px; height: 12px; margin-top: 3px; margin-left: 4px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--text-muted); box-shadow: 0 0 0 3px var(--bg-card); }
.pact-dot--change { border-color: #2563eb; }
.pact-dot--add { border-color: #16a34a; }
.pact-dot--remove { border-color: #dc2626; }
.pact-dot--created { border-color: var(--text-muted); background: var(--text-muted); }
.pact-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pact-line { font-size: .82rem; line-height: 1.5; color: var(--text-secondary); word-break: break-word; }
.pact-who { font-weight: 700; color: var(--text); }
.pact-field { font-weight: 600; color: var(--text); }
.pact-verb { color: var(--text-secondary); }
.pact-set { color: var(--text-muted); }
.pact-old { color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(148,163,184,.7); margin: 0 2px; }
.pact-arr { color: var(--text-muted); margin: 0 5px; font-weight: 600; }
.pact-new { font-weight: 600; color: var(--text); background: rgba(37,99,235,.10); border-radius: 5px; padding: 0 6px; }
.pact-dot--add ~ .pact-main .pact-new, .pact-row:has(.pact-dot--add) .pact-new { background: rgba(22,163,74,.12); }
.pact-when { display: flex; align-items: center; gap: 8px; font-size: .7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pact-clock::before { content: '·'; margin-right: 8px; }
.pact-row--created .pact-line { color: var(--text-muted); }
/* monday item card: column cells, tabs, updates feed, subitem rows */
.pip-cellwrap .mnb-cell { border: 1px solid var(--border); border-radius: 6px; min-height: 30px; padding: 0 7px; max-width: 260px; }
.pip-cellwrap .mnb-cell--fill { padding: 0; overflow: hidden; }
.pip-cellwrap .mnb-statusfill { min-height: 30px; }
.pip-cellwrap .mnb-tl { height: 20px; }
.pip-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-top: 20px; }
.pip-tab { border: none; background: none; padding: 9px 12px; font-size: .82rem; font-weight: 500; color: var(--text-secondary); border-bottom: 2px solid transparent; cursor: pointer; }
.pip-tab:hover { color: var(--text); background: var(--bg-hover); border-radius: 6px 6px 0 0; }
.pip-tab.active { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
.pip-tab-n { font-size: .68rem; color: var(--text-muted); font-weight: 600; }
.pip-composer { border: 1px solid var(--border); border-radius: 9px; padding: 10px; margin: 14px 0 16px; background: var(--bg-card); }
.pip-composer:focus-within { border-color: var(--accent); }
.pip-composer textarea { width: 100%; min-height: 60px; border: none; outline: none; background: transparent; resize: vertical; font-family: inherit; font-size: .84rem; color: var(--text); box-sizing: border-box; }
.pip-update { display: flex; gap: 9px; align-items: flex-start; border: 1px solid var(--border); border-radius: 9px; padding: 11px 12px; margin-bottom: 9px; background: var(--bg-card); }
.pip-uavatar { width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: .64rem; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.pip-like { border: 1px solid var(--border); background: none; border-radius: 12px; color: var(--text-secondary); font-size: .7rem; padding: 2px 9px; cursor: pointer; }
.pip-like:hover { background: var(--bg-hover); }
.pip-like.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pip-empty { font-size: .8rem; color: var(--text-muted); padding: 10px 2px; }
.pip-subrow { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.pip-substatus { color: #fff; border: none; border-radius: 5px; font-size: .66rem; font-weight: 600; padding: 4px 3px; cursor: pointer; max-width: 104px; flex-shrink: 0; }
.pip-subtitle { flex: 1; min-width: 80px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text); font-size: .8rem; padding: 4px 6px; outline: none; font-family: inherit; }
.pip-subtitle:hover { border-color: var(--border); }
.pip-subtitle:focus { border-color: var(--accent); background: var(--bg-card); }
.pip-subtitle.done { text-decoration: line-through; color: var(--text-muted); }
.pip-subchip { display: inline-flex; align-items: center; gap: 3px; font-size: .66rem; background: var(--bg-hover); border-radius: 11px; padding: 2px 5px 2px 2px; flex-shrink: 0; }
.pip-subassign { width: 26px; border: 1px dashed var(--border); border-radius: 10px; background: transparent; color: var(--text); font-size: .7rem; padding: 3px 5px; outline: none; flex-shrink: 0; }
.pip-subassign:focus { width: 90px; border-color: var(--accent); }
.pip-subdate { border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text-secondary); font-size: .7rem; padding: 3px 4px; cursor: pointer; outline: none; width: 108px; flex-shrink: 0; }
.pip-subdate:hover { border-color: var(--border); }
.pip-subx { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .72rem; padding: 2px 4px; flex-shrink: 0; }
.pip-subx:hover { color: #e2445c; }
.pip-updel { opacity: 0; }
.pip-update:hover .pip-updel { opacity: .7; }
.pip-replyin { width: 100%; border: 1px solid transparent; border-radius: 7px; background: var(--bg-hover); color: var(--text); font-size: .76rem; padding: 6px 9px; outline: none; font-family: inherit; margin-top: 6px; box-sizing: border-box; }
.pip-replyin:focus { border-color: var(--accent); background: var(--bg-card); }
.pip-dropzone { border: 2px dashed var(--border); border-radius: 10px; padding: 18px 12px; text-align: center; cursor: pointer; margin: 14px 0 12px; transition: border-color .12s, background .12s; }
.pip-dropzone:hover, .pip-dropzone.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.pip-drophint { font-size: .78rem; color: var(--text-secondary); }
.pip-filegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pip-file { border: 1px solid var(--border); border-radius: 9px; background: var(--bg-card); overflow: hidden; position: relative; display: flex; flex-direction: column; }
.pip-file img { width: 100%; height: 86px; object-fit: cover; display: block; }
.pip-file-ic { display: flex; align-items: center; justify-content: center; height: 86px; font-size: 30px; text-decoration: none; background: var(--bg-hover); }
.pip-file-meta { padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pip-file-meta a { font-size: .72rem; color: var(--text); text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pip-file-meta a:hover { color: var(--accent); }
.pip-file-meta span { font-size: .62rem; color: var(--text-muted); }
.pip-file .pip-subx { position: absolute; top: 4px; right: 4px; background: var(--bg-card); border-radius: 5px; opacity: 0; }
.pip-file:hover .pip-subx { opacity: .9; }

/* ג”€ג”€ 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 #fvDialog (100400) and every drawer/modal ג€” 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 */
/* monday-compact stat tiles: label over value+sub, comfortable ~48px height */
.lf-crm-stats--compact { gap: 6px; }
.lf-stat-card--mini { border-radius: 7px; padding: 7px 11px; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; min-height: 48px; box-sizing: border-box; box-shadow: none; }
.lf-stat-card--mini:hover { transform: none; box-shadow: none; border-color: var(--border); }
.lf-stat-card--mini .lf-stat-label { font-size: .6rem; letter-spacing: .25px; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-stat-card--mini .lf-stat-value { font-size: .92rem; font-weight: 700; white-space: nowrap; line-height: 1.1; display: inline-flex; align-items: baseline; gap: 5px; }
.lf-stat-card--mini .lf-stat-sub   { font-size: .6rem; margin-top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.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; }
/* Header sort (click / right-click → column menu, 2026-10-08) */
.am-table th[onclick]:hover, #amTableContainer .am-table th[onclick]:hover { background: var(--bg-hover); color: var(--text-primary); }
.am-table th.am-sorted { color: var(--accent, #3f76ff); font-weight: 600; }
.am-table th .am-sort-arr { font-size: 9px; margin-inline-start: 4px; color: var(--accent, #3f76ff); vertical-align: middle; }
/* Per-column filter (header menu → Filter…): funnel on the header, chips above the table */
.am-table th.am-filtered { color: var(--accent, #3f76ff); }
.am-table th .am-col-flt { margin-inline-start: 4px; vertical-align: middle; color: var(--accent, #3f76ff); }
.am-cf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; margin: 0 0 6px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-elevated); font-size: .74rem; color: var(--text-secondary); }
.am-cf-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px; border-radius: 100px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); cursor: pointer; white-space: nowrap; }
.am-cf-chip b { font-weight: 600; color: var(--text-secondary); }
.am-cf-chip button { border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 11px; line-height: 1; padding: 2px 4px; border-radius: 100px; }
.am-cf-chip button:hover { background: var(--bg-hover); color: #dc2626; }
.am-cf-clear { margin-inline-start: auto; border: none; background: none; color: var(--accent, #3f76ff); cursor: pointer; font-size: .72rem; font-weight: 600; }
.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; }
/* ג”€ג”€ Compact density for the ADS MANAGER table only (Leads keeps its own
   density via .leads-tbl-wrap overrides). Sized so nothing inside crops:
   sparklines are 28px tall, inline ad thumbs shrink 32ג†’26px. ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
/* Header row: taller than the 32px data rows, on the same grey as the Projects board header (2026-10-08). */
#amTableContainer .am-table th { height: 40px; padding: 3px 10px !important; font-size: 12px; background: var(--bg-elevated); }
#amTableContainer .am-pin-name .am-table th.am-col-check, #amTableContainer .am-pin-name .am-table th.am-col-name { background: var(--bg-elevated); }
#amTableContainer .am-col-filters th { top: 28px; height: 24px; padding: 1px 4px !important; }
#amTableContainer .am-table td { height: 32px; max-height: 32px; padding: 2px 10px !important; font-size: 12.5px; }
#amTableContainer .am-ad-thumb-inline { width: 26px; height: 26px; }
#amTableContainer .am-spark-val { font-size: 12px; }
/* Multi-result Meta rows (Purchases / Add to Cart / ג€¦): the stacked lines are
   what still blew the row height after the td compaction ג€” tighten each line
   and drop the hairline separators between them. */
#amTableContainer .am-result-row { line-height: 1.25; gap: 5px; }
#amTableContainer .am-result-row + .am-result-row { border-top: none; padding-top: 0; margin-top: 1px; }
#amTableContainer .am-result-type { font-size: 10px; }
#amTableContainer .am-result-cpe { font-size: 10px; line-height: 1.35; padding: 0 4px; }
#amTableContainer .am-result-left { gap: 3px; }
.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; }
/* Always faintly visible (was opacity 0 until hover — nobody found "delete group", 2026-10-08). */
.lf-grp-del { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: .72rem; margin-left: 4px; opacity: .45; 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; }
/* Match the Projects mnb-ghead metrics exactly (gap 7, tight bottom) */
#leadsMainTable .lf-grp-hdr-inner { padding: 10px 4px 5px; gap: 7px; }
/* 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 */
/* monday density (matches the Projects Main Table: 32px rows, 27px headers) */
.leads-tbl-wrap .am-table th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-elevated); font-size: 11.5px; font-weight: 500; color: var(--text-secondary);
  text-transform: none; letter-spacing: 0; height: 27px;
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  padding: 0 8px !important; text-align: left;
}
.leads-tbl-wrap .am-table th:last-child { border-right: none; }
.leads-tbl-wrap .am-table th:hover { background: var(--bg-hover); }
.leads-tbl-wrap .am-table td {
  height: 32px !important; max-height: 32px !important; min-height: 0 !important;
  font-size: 12.5px; color: var(--text);
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  padding: 0 8px !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: 32px !important; max-height: 32px !important; min-height: 0 !important; white-space: nowrap; }
/* Row hover + active selection */
.leads-tbl-wrap .am-table tbody tr { transition: background .12s; }
.leads-tbl-wrap .am-table tbody tr:hover { background: var(--bg-hover); }
.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 var(--border); font-weight: 500; font-size: .74rem; color: var(--text-secondary); }
.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: 2px 6px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text-primary); font-size: 12.5px !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 rows (2026-09-18): classes + delegated events (_buildLeadRow / _lfBindDelegates) instead of per-cell inline styles and handlers */
.leads-tbl-wrap .am-table td .lf-cell-inp.lf-name { flex: 1; min-width: 80px; padding: 3px 6px; font-weight: 600; font-size: 13.3px !important; }
.leads-tbl-wrap .am-table td .lf-cell-inp.lf-email { min-width: 110px; padding: 3px 6px; }
.leads-tbl-wrap .am-table td .lf-cell-inp.lf-phone { flex: 1 1 auto; min-width: 0; width: auto; padding: 3px 5px; }
.lf-namecell { display: flex; align-items: center; gap: 3px; }
.lf-rowbtn { background: none; border: none; cursor: pointer; color: #94a3b8; padding: 1px 3px; border-radius: 4px; display: inline-flex; align-items: center; flex-shrink: 0; opacity: .45; font-size: 11px; line-height: 0; }
.lf-rowbtn:hover { opacity: 1; }
.lf-listcell { width: 28px; padding: 0 4px; text-align: center; }
.lf-listbtn { color: var(--text-muted); padding: 3px; opacity: 1; font-size: 13px; }
.lf-listbtn:hover { color: var(--accent); }
.lf-phone-cc { display: inline-flex; align-items: center; gap: 1px; background: none; border: 1px solid transparent; border-radius: 5px; padding: 1px 2px; cursor: pointer; font-size: .7rem; color: var(--text-muted); flex-shrink: 0; }
.lf-phone-cc .lf-phone-flag { margin-right: 0; }
.lf-phone-cc:hover { border-color: #e2e8f0; }
.lf-phone-act .fvi { width: 13px; height: 13px; }
.lf-assign-sel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.lf-star .fvi { width: 13px; height: 13px; }
/* Leads lists rail (2026-09-18): classes instead of ~1 KB of inline styles + an SVG per row (_buildLeadsSidebar) */
.lf-list-row { position: relative; display: flex; align-items: center; gap: 2px; border-radius: 7px; overflow: hidden; }
.lf-side-grow { flex: 1; min-width: 0; }
.lf-side-lbl { display: flex; align-items: center; gap: 6px; overflow: hidden; min-width: 0; }
.lf-side-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; }
.lf-side-ico { width: 12px; height: 12px; flex-shrink: 0; }
.lf-side-act { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 2px; border-radius: 3px; font-size: 10px; line-height: 1; }
.lf-side-empty { font-size: .76rem; color: var(--text-muted); padding: 6px 10px; font-style: italic; }
.lf-side-hdcnt { font-weight: 400; letter-spacing: 0; }
.lf-cnt-spin { display: inline-block; width: 8px; height: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; opacity: .7; vertical-align: middle; animation: lfspin .8s linear infinite; }
@keyframes lfspin { to { transform: rotate(360deg); } }
.lf-srcchip { display: inline-block; vertical-align: middle; font-size: .72rem; padding: 2px 7px; border-radius: 10px; white-space: nowrap; max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; }
.lf-photocell { text-align: center; padding: 2px 4px; }
.lf-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: hsl(var(--h), 55%, 88%); color: hsl(var(--h), 45%, 35%); font-weight: 700; font-size: .72rem; overflow: hidden; vertical-align: middle; }
.lf-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lf-row-chk { cursor: pointer; accent-color: var(--accent); width: 14px; height: 14px; vertical-align: middle; }
.lfm-check { accent-color: var(--accent); cursor: pointer; width: 15px; height: 15px; }
.lf-rowbtn .fvi { width: 11px; height: 11px; }
.lf-star.lf-star-on .fvi-star, .lf-star.lf-star-hover .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%22black%22%20stroke%3D%22black%22%20stroke-width%3D%222%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%22black%22%20stroke%3D%22black%22%20stroke-width%3D%222%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"); }
.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; }
/* Monday-style column chevron menu on the leads headers (Projects parity) */
.leads-tbl-wrap .am-table tr.lf-colhdr th:hover .mnb-colmenu-btn { opacity: .85; }
.leads-tbl-wrap .am-table tr.lf-colhdr th .mnb-colmenu-btn { vertical-align: middle; }
/* Monday-style cells inside the leads <table> (custom columns) */
.leads-tbl-wrap .am-table td .mnb-statusfill { min-height: 30px; border-radius: 0; }
.leads-tbl-wrap .am-table td .mnb-inline { box-sizing: border-box; }
/* 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); }
/* New lead just arrived: the row slides in and its cells glow green, then the
   glow fades out — replaces the old "new lead" toast. */
@keyframes lfRowSlideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes lfRowGlow {
  0% { background-color: color-mix(in srgb, #00c875 26%, transparent); }
  55% { background-color: color-mix(in srgb, #00c875 14%, transparent); }
  100% { background-color: transparent; }
}
.leads-tbl-wrap .am-table tbody tr.lf-row-new { animation: lfRowSlideIn .35s cubic-bezier(.2,.8,.3,1) 1; }
.leads-tbl-wrap .am-table tbody tr.lf-row-new > td { animation: lfRowGlow 2.4s ease-out 1; }
/* 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: var(--bg-hover); }
.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: 12.5px !important; border-radius: 6px !important; padding: 2px 8px !important; height: 24px; }
.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; }
/* One line per row everywhere (Contacts, Companies, Deals): link chips never wrap
   the row taller — the full list lives on the card. */
.leads-tbl-wrap .am-table td .crm-chip-wrap { flex-wrap: nowrap; overflow: hidden; max-height: 26px; }
.leads-tbl-wrap .am-table td .crm-chip-wrap > * { flex: none; }
/* Chips follow the COLUMN width (2026-10-14): the fixed max-width (110 px, tasks 170 px)
   kept a chip clipped however wide the user dragged the column. In a table the chips
   share the cell — each shrinks to an ellipsis when it is narrow and grows with it;
   the "+N" chip and the + button keep their size. */
.leads-tbl-wrap .am-table td .crm-chip-wrap > .crm-chip:not(.crm-chip-list-more) { flex: 0 1 auto; min-width: 44px; max-width: none; }
.crm-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* 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, .crm-grid .crm-inline-new td { background: #f0fdf4 !important; border-bottom: 2px solid #22c55e !important; }
.crm-table .crm-inline-new td:first-child, .crm-grid .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: 0; margin-bottom: 3px; }
.crm-pl-field-label { font-size: .61rem; color: #94a3b8; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; padding-left: 7px; }
.crm-pl-field-value { font-size: .76rem; color: var(--text-primary); font-weight: 500; word-break: break-word; padding: 2px 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-note { font-size: .68rem; color: #94a3b8; padding: 7px 12px; max-width: 210px; line-height: 1.4; }
/* Activity timeline: ג‹¯ fades in on row hover (right-click opens the same menu) */
.crm-tl-menu-btn { opacity: 0; margin-inline-start: 4px; border: none; background: none; color: #94a3b8; cursor: pointer; font-size: .95rem; line-height: 1; padding: 0 5px; border-radius: 5px; transition: opacity .12s, background .12s, color .12s; }
.crm-tl-item:hover .crm-tl-menu-btn { opacity: 1; }
.crm-tl-menu-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.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); }
/* fvCrHover — floating creative preview (app.js), on <body> so table cells never clip it */
[data-fv-cr] { cursor: zoom-in; }
.fv-cr-pop { position: fixed; z-index: 10050; max-width: min(420px, calc(100vw - 16px)); padding: 8px; background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; box-shadow: 0 16px 48px rgba(0,0,0,.18); }
.fv-cr-pop-hd { font-size: 12px; font-weight: 600; color: var(--text-primary); padding: 0 2px 6px; max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-cr-pop-bd img { display: block; width: auto; max-width: min(400px, calc(100vw - 32px)); min-width: 160px; object-fit: contain; border-radius: 6px; background: #f8f9fb; }
.fv-cr-pop-bd iframe { display: block; border: 0; border-radius: 6px; background: #fff; max-width: calc(100vw - 32px); }
.fv-cr-pop-ld { font-size: 11px; color: var(--text-muted); padding: 6px 2px 0; }
.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: 24000; /* BELOW .email-export-ov (25000): fvConfirm / Auto-pilot / History / ROI dialogs opened from the drawer must sit on top of it — at 99999 they rendered behind it (2026-10-07) */ 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); }
/* Optimizer wave 2026-10-06: snooze, impact badge, folded sub-findings, window note */
.am-opt-card.expanded .am-opt-toggle.am-opt-snooze { transform: none; }
.am-opt-snooze { opacity: .55; }
.am-opt-card-head:hover .am-opt-snooze { opacity: 1; }
.am-opt-sev-badge.am-opt-impact { background: #eef7ee; color: #2f6b3a; border: 1px solid #cfe6d2; font-variant-numeric: tabular-nums; }
.am-opt-snooze-bar { font-size: 12px; color: var(--text-muted); padding: 6px 2px 0; }
.am-opt-snooze-bar a { color: var(--accent, #6366f1); text-decoration: none; }
.am-opt-bdwin { color: var(--text-muted); font-weight: 500; }
.am-opt-subfinding { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border, #e5e7eb); }
.am-opt-subfinding.applied { opacity: .62; }
.am-opt-subfinding-title { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.am-opt-subfinding.applied .am-opt-subfinding-title { text-decoration: line-through; }
.am-opt-subfinding-detail { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; line-height: 1.45; }
.am-opt-subfinding-action { color: var(--text); }
@media (max-width: 640px) {
  .am-opt-card-head { padding: 10px 10px; gap: 6px; }
  .am-opt-card-title { font-size: 13px; overflow-wrap: anywhere; }
  .am-opt-card-title-row .am-opt-sev-badge { font-size: 10px; padding: 1px 6px; }
  .am-opt-apply-row { flex-wrap: wrap; }
  .am-opt-apply-btn { white-space: normal; text-align: left; max-width: 100%; overflow-wrap: anywhere; }
  .am-opt-vr-rule { flex-wrap: wrap; }
  .am-opt-bar-label { max-width: 38%; overflow: hidden; text-overflow: ellipsis; }
  .am-opt-subfinding-title { font-size: 12.5px; overflow-wrap: anywhere; }
}
.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; } }
/* Leads board with no list picked (2026-10-06): centered pick-a-list state. */
.lf-pick-list { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 40px 24px 80px; min-height: 320px; }
.lf-pick-icon { width: 64px; height: 64px; border-radius: 18px; background: rgba(99,102,241,.1); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.lf-pick-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.lf-pick-desc { font-size: .84rem; color: var(--text-secondary); line-height: 1.6; max-width: 460px; }
.lf-pick-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.lf-rail-stale .am-side-item-count { opacity: .45; } /* cached rail shown while the leads load */

/* 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 - 58px); max-width: none; margin: 0; }
/* AI Chat split: history sub-menu on the left, chat on the right */
.ai-split { display: flex; gap: 10px; height: calc(100vh - 58px); max-width: none; margin: 0; }
.ai-hist-toggle, .ai-hist-close { display: none; }
.ai-hist-panel { width: 188px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 7px; 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: 6px 10px; background: #3f76ff; color: #fff; border: none; border-radius: 8px; font-size: .76rem; font-weight: 600; cursor: pointer; }
.ai-hist-new:hover { background: #2f5fe0; }
.ai-hist-label { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); padding: 8px 4px 3px; }
.ai-hist-list { flex: 1; overflow-y: auto; min-height: 0; }
.ai-hist-item { display: flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 7px; cursor: pointer; }
.ai-hist-item:hover { background: var(--bg-hover); }
.ai-hist-item.active { background: #ececec; }
html.dark .ai-hist-item.active { background: rgba(255, 255, 255, .1); }
.ai-hist-title { font-size: .73rem; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-hist-ts { font-size: .63rem; color: var(--text-muted); margin-top: 0; }
.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: 10px; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; box-shadow: 0 2px 4px rgba(0,0,0,.04); }
.ai-chat-header-icon { width: 32px; height: 32px; 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: 7px; padding: 5px 11px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 7px; 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: 11.5px; font-weight: 600; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; }
.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: 9px 2px; display: flex; flex-direction: column; gap: 7px; }
.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: 22px 16px; gap: 7px; flex: 1; }
.ai-welcome-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: #EBF5FF; border-radius: 50%; margin-bottom: 2px; }
.ai-welcome h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0; }
.ai-welcome p { font-size: 12.5px; color: var(--text-muted); margin: 0 0 8px; }
.ai-suggestions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 560px; }
.ai-suggestion { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 5px 13px; font-size: 12px; color: var(--text-primary); cursor: pointer; transition: all .15s; font-family: inherit; }
.ai-suggestion:hover { border-color: #1f1f1f; color: #1f1f1f; background: #f4f4f4; }

.ai-msg { display: flex; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-assistant { justify-content: flex-start; }
.ai-msg-bubble { max-width: 82%; border-radius: 12px; padding: 7px 11px; font-size: 13px; line-height: 1.5; word-break: break-word; }
.ai-msg-user-bubble { background: #1f1f1f; color: #fff; border-bottom-right-radius: 4px; }
html.dark .ai-msg-user-bubble { background: #e8e8e8; color: #141414; }
.ai-msg-ai-bubble { background: var(--bg-card); border: 1px solid var(--border); border-bottom-left-radius: 4px; display: flex; gap: 8px; align-items: flex-start; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.ai-msg-ai-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: #f0f0f0; border-radius: 50%; flex-shrink: 0; margin-top: 2px; }
html.dark .ai-msg-ai-icon { background: rgba(255, 255, 255, .12); }
.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: 7px; padding: 8px 11px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 11px; margin-top: 7px; box-shadow: 0 -2px 8px rgba(0,0,0,.03); }
.ai-chat-attach { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; 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: 13.5px; 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: 33px; height: 33px; display: flex; align-items: center; justify-content: center; background: #1f1f1f; color: #fff; border: none; border-radius: 10px; cursor: pointer; transition: all .15s; flex-shrink: 0; }
html.dark .ai-chat-send { background: #e8e8e8; color: #141414; }
.ai-chat-send:hover { background: #000; }
html.dark .ai-chat-send:hover { background: #fff; }
.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: 6px 0 3px; font-weight: 600; }
.ai-msg-content ul { margin: 3px 0 3px 15px; padding: 0; }
.ai-msg-content li { margin: 1px 0; }
.ai-dots { display: flex; gap: 4px; padding: 4px 0; }
.ai-dots span { width: 7px; height: 7px; background: #8a8a8a; 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: #1f1f1f !important;
  color: #fff !important; border-color: transparent !important;
  font-weight: 700 !important;
  display: inline-flex; align-items: center; gap: 6px;
}
html.dark .ai-suggestion--create { background: #e8e8e8 !important; color: #141414 !important; }

/* history row of a chat whose answer is still being generated */
.ai-hist-think { display: inline-flex; gap: 2.5px; align-items: center; margin-inline-end: 2px; }
.ai-hist-think i { width: 4.5px; height: 4.5px; background: #8a8a8a; border-radius: 50%; opacity: .4; animation: aiDot 1.4s infinite ease-in-out; }
.ai-hist-think i:nth-child(2) { animation-delay: .2s; }
.ai-hist-think i:nth-child(3) { animation-delay: .4s; }

/* typed-in answers: block reveal + blinking caret */
@keyframes aiBlockIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ai-type-caret { display: inline-block; width: 2px; height: 1em; background: #555; vertical-align: text-bottom; margin-inline-start: 2px; animation: aiCaretBlink .8s steps(1) infinite; }
html.dark .ai-type-caret { background: #bbb; }
@keyframes aiCaretBlink { 50% { opacity: 0; } }
.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 */
/* 25000 (= fvModal): the admin dialogs (invite, edit user, client account) open from the full-page People record (.crm-panel-overlay, 20000) — at 1100 they rendered BEHIND it and the Invite button looked dead (2026-10-18). */
.um-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.45); z-index: 25000; 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 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; }
/* Non-image attachments (video / PDF / document / text) show as a named chip;
   while hosting, the chip is dimmed and the label reads "Uploading…" / "42%". */
.lp-canvas-att-item.busy { opacity: .55; }
.lp-canvas-att-item:has(.lp-canvas-att-chip) { width: auto; max-width: 180px; height: 56px; }
.lp-canvas-att-chip {
  display: flex; align-items: center; gap: 6px; height: 100%;
  padding: 0 24px 0 8px; font-size: .72rem; color: var(--text-primary);
  background: var(--bg-hover);
}
.lp-canvas-att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.lp-canvas-msg-chip { display: inline-flex; height: auto; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border); margin: 0 4px 4px 0; }

.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 (monday-style: solid color fills the cell) ---- */
.usb-badge {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 31px;
  font-size: .72rem; font-weight: 600; cursor: pointer;
  white-space: nowrap; user-select: none;
  transition: filter .12s;
  max-width: 100%; box-sizing: border-box;
}
.usb-badge:hover { filter: brightness(.94); }
.usb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; padding: 0 6px; }
/* The status cell goes full-bleed so the color reaches the cell borders */
.leads-tbl-wrap .am-table td:has(> .usb-badge) { padding: 0 !important; }
/* Compact monday-style label picker (same proportions as the Projects .mnb-pop) */
.usb-picker {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 12px 32px rgba(16,24,40,.2);
  padding: 6px; min-width: 150px; max-width: 190px; max-height: 300px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 3px;
}
.usb-option {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 4px;
  font-size: .72rem; cursor: pointer; line-height: 1.3;
  transition: filter .1s;
}
.usb-option:hover { filter: brightness(.92); }

/* ---- 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: 4px; white-space: nowrap; position: relative;
}
.lf-phone-link-plain {
  color: var(--accent); text-decoration: none;
}
.lf-phone-link-plain:hover { text-decoration: underline; }

/* The call/SMS/WA buttons used to sit IN the flex row at opacity 0 — invisible but
   still 78px wide, so the number input was squeezed to ~50px and 10-digit phones
   were cut off. They now overlay the right edge of the cell on row hover only, so
   the input keeps the whole column. Editing (focus) hides them. */
.lf-phone-actions {
  display: inline-flex; align-items: center; gap: 2px;
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  padding-left: 12px; background: linear-gradient(to right, transparent, var(--bg-hover) 12px);
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.lf-phone-cell-wrap:hover .lf-phone-actions { opacity: 1; pointer-events: auto; }
.lf-phone-cell-wrap:focus-within:not(:has(.lf-phone-act:focus)) .lf-phone-actions { opacity: 0; pointer-events: none; } /* editing the number hides them — focus ON a button must not */

.lf-phone-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; 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); }

/* 2026-09-22: neutral grey (no brand colours) — the popup they open is the same
   one the CRM card's Email / Call / WhatsApp / SMS buttons open. */
.lf-phone-act, .lf-phone-act--call, .lf-phone-act--sms, .lf-phone-act--wa, .lf-phone-act--email {
  background: var(--bg-hover, #eef2f7); color: var(--text-secondary, #475569); border: 1px solid var(--border, #e2e8f0);
}
.lf-phone-act:hover, .lf-phone-act--call:hover, .lf-phone-act--sms:hover, .lf-phone-act--wa:hover, .lf-phone-act--email:hover {
  background: var(--border, #e2e8f0); color: var(--text-primary, #0f172a);
}
/* Email cell: same hover-reveal as the phone cell (one round grey button). */
.lf-email-cell-wrap { display: flex; width: 100%; min-width: 0; align-items: center; position: relative; }
.lf-email-cell-wrap .lf-cell-inp { flex: 1 1 auto; min-width: 0; }
.lf-email-cell-wrap:hover .lf-phone-actions { opacity: 1; pointer-events: auto; }
.lf-email-cell-wrap:focus-within:not(:has(.lf-phone-act:focus)) .lf-phone-actions { opacity: 0; pointer-events: none; }
/* Custom phone / email columns (shared cell renderers) reveal the same way. */
.fv-phone-wrap, .fv-email-wrap { position: relative; }
.fv-phone-wrap:hover .lf-phone-actions, .fv-email-wrap:hover .lf-phone-actions { opacity: 1; pointer-events: auto; }
.fv-phone-wrap:focus-within:not(:has(.lf-phone-act:focus)) .lf-phone-actions, .fv-email-wrap:focus-within:not(:has(.lf-phone-act:focus)) .lf-phone-actions { opacity: 0; pointer-events: none; }

/* ── Lead scoring settings popup (lfScoreOpen) ─────────────────────────── */
.lsc-modal { width: 700px; max-width: 96vw; max-height: 90vh; padding: 0; overflow: hidden; }
.lsc-hd { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 700; color: var(--text-primary); }
.lsc-hd-sub { font-weight: 400; font-size: .74rem; color: var(--text-muted); }
.lsc-x { margin-inline-start: auto; background: none; border: none; font-size: 16px; line-height: 1; cursor: pointer; color: var(--text-muted); padding: 2px 4px; border-radius: 6px; }
.lsc-x:hover { color: var(--text-primary); background: var(--bg-hover); }
.lsc-body { padding: 14px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; font-size: .8rem; color: var(--text-secondary); }
.lsc-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--bg-card); }
.lsc-card--flat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lsc-card h4 { margin: 0 0 6px; font-size: .82rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lsc-card h4 small { font-weight: 400; font-size: .72rem; color: var(--text-muted); }
.lsc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lsc-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.lsc-row label { flex: 1; color: var(--text-secondary); }
.lsc-num { width: 76px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font-size: .8rem; text-align: center; }
.lsc-check { display: flex; align-items: center; gap: 8px; margin-top: 4px; cursor: pointer; color: var(--text-primary); }
.lsc-check b { font-weight: 600; }
.lsc-meta { margin-inline-start: auto; font-size: .72rem; color: var(--text-muted); }
.lsc-hint { margin-top: 8px; font-size: .72rem; color: var(--text-muted); line-height: 1.45; }
.lsc-rule { display: grid; grid-template-columns: 1.3fr 1fr 1fr 70px 26px; gap: 6px; align-items: center; margin-top: 6px; }
.lsc-rule-hd { margin-top: 0; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.lsc-rule input, .lsc-rule select { width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font-size: .78rem; }
.lsc-rule .lsc-x { margin-inline-start: 0; }
.lsc-add { margin-top: 8px; padding: 5px 10px; border: 1px dashed var(--border); border-radius: 8px; background: none; color: var(--accent); cursor: pointer; font-size: .78rem; }
.lsc-calib { font-size: .74rem; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px; }
.lsc-ft { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); }
.lsc-btn { padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px; background: none; color: var(--text-secondary); cursor: pointer; font-size: .8rem; }
.lsc-btn--primary { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 700; }
.lsc-btn:disabled { opacity: .6; cursor: default; }
@media (max-width: 640px) { .lsc-grid2 { grid-template-columns: 1fr; } .lsc-rule { grid-template-columns: 1fr 1fr; } .lsc-rule-hd { display: none; } }

/* ג”€ג”€ 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; }
/* Call panel, HubSpot card (CallPanel artboard, 2026-10-10) — js/dialer.js */
#lfDialerPopup .fvd-card { background: var(--bg-card); border-radius: 6px; overflow: hidden; --accent: #0091ae; }
#lfDialerPopup .fvd-hd { display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 12px; border-bottom: 1px solid var(--border); background: var(--bg-card); font-size: .92rem; font-weight: 800; color: var(--text-primary); cursor: grab; user-select: none; }
#lfDialerPopup .fvd-grip { color: var(--text-muted); font-size: .8rem; letter-spacing: -2px; }
#lfDialerPopup .fvd-sp { flex: 1; }
#lfDialerPopup .fvd-ib { border: none; background: none; color: var(--text-muted); font-size: .95rem; cursor: pointer; padding: 2px 7px; border-radius: 4px; line-height: 1; font-family: inherit; }
#lfDialerPopup .fvd-ib:hover { background: var(--bg-hover); color: var(--text-primary); }
#lfDialerPopup .fvd-mini { display: none; align-items: center; gap: 8px; font-size: .84rem; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lfDialerPopup .fvd-mini b { color: var(--text-secondary); font-weight: 600; font-variant-numeric: tabular-nums; }
#lfDialerPopup .fvd-mini-dot { width: 8px; height: 8px; border-radius: 50%; background: #99acc2; flex: none; }
#lfDialerPopup .fvd-mini-dot.live { background: #00a38d; box-shadow: 0 0 0 3px rgba(0,163,141,.18); }
#lfDialerPopup.lf-dialer-minimized { bottom: 0 !important; right: 16px !important; top: auto !important; left: auto !important; width: 300px !important; height: auto !important; min-height: 0 !important; resize: none !important; border-radius: 6px 6px 0 0 !important; }
#lfDialerPopup.lf-dialer-minimized .fvd-title, #lfDialerPopup.lf-dialer-minimized .fvd-grip { display: none; }
#lfDialerPopup.lf-dialer-minimized .fvd-mini { display: inline-flex; }
#lfDialerPopup.lf-dialer-minimized .fvd-min::before { content: "▢"; }
#lfDialerPopup.lf-dialer-minimized .fvd-min { font-size: 0; }
#lfDialerPopup.lf-dialer-minimized .fvd-min::before { font-size: .9rem; }
#lfDialerPopup .fvd-who { display: flex; align-items: center; gap: 12px; padding: 12px 16px 8px; }
#lfDialerPopup .fvd-av { width: 44px; height: 44px; border-radius: 50%; background: #e5f5f8; color: #0091ae; font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; flex: none; }
#lfDialerPopup .fvd-nm { font-size: .98rem; font-weight: 800; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
#lfDialerPopup .fvd-ph { text-align: left; }
#lfDialerPopup .fvd-ph { font-size: .76rem; color: var(--text-muted); }
#lfDialerPopup .fvd-sec { padding: 4px 16px 10px; }
#lfDialerPopup .fvd-lbl { font-size: .7rem; color: var(--text-secondary); margin-bottom: 4px; }
#lfDialerPopup .fvd-seg { display: flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
#lfDialerPopup .fvd-seg button { flex: 1; border: none; background: var(--bg-card); color: var(--text-secondary); font: inherit; font-size: .82rem; padding: 8px 6px; cursor: pointer; }
#lfDialerPopup .fvd-seg button.on { background: #0091ae; color: #fff; font-weight: 700; }
#lfDialerPopup .fvd-sel, #lfDialerPopup input.fvd-sel { width: 100% !important; height: auto !important; box-sizing: border-box; border: 1px solid var(--border) !important; border-radius: 4px !important; padding: 7px 10px !important; font: inherit; font-size: .84rem !important; font-weight: 700; color: var(--text-primary); background: var(--bg-card) !important; background-image: none !important; box-shadow: none !important; }
#lfDialerPopup .fvd-hint { font-size: .7rem; color: var(--text-muted); margin-top: 4px; }
#lfDialerPopup .fvd-last { font-size: .78rem; color: var(--text-secondary); }
#lfDialerPopup .fvd-last b { color: #0091ae; }
#lfDialerPopup .fvd-foot { display: flex; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--border); margin-top: 4px; }
#lfDialerPopup .fvd-btn { flex: 1; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); border-radius: 4px; padding: 9px 12px; font: inherit; font-size: .84rem; cursor: pointer; }
#lfDialerPopup .fvd-btn:hover { background: var(--bg-hover); }
#lfDialerPopup .fvd-btn.go { flex: 2; background: #00a38d; border-color: #00a38d; color: #fff; font-weight: 800; }
#lfDialerPopup .fvd-btn.go:hover { background: #008f7c; }
#lfDialerPopup .fvd-btn.end { flex: 2; background: #e5484d; border-color: #e5484d; color: #fff; font-weight: 800; }
#lfDialerPopup .fvd-btn.end:hover { background: #d13b40; }
#lfDialerPopup .fvd-btn.primary { flex: 2; background: #0091ae; border-color: #0091ae; color: #fff; font-weight: 700; }
#lfDialerPopup .fvd-status { display: flex; align-items: center; gap: 8px; padding: 0 16px 8px; font-size: .78rem; color: var(--text-secondary); }
#lfDialerPopup .fvd-status b { margin-left: auto; font-size: 1.15rem; color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: .5px; }
#lfDialerPopup .fvd-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
#lfDialerPopup .fvd-dot.live { background: #00a38d; box-shadow: 0 0 0 3px rgba(0,163,141,.18); }
#lfDialerPopup .fvd-dot.ring { background: #f59e0b; animation: dialerBlink 1.2s infinite; }
#lfDialerPopup .fvd-ctls { display: flex; justify-content: space-between; padding: 4px 18px 8px; }
#lfDialerPopup .fvd-ctl { text-align: center; font-size: .68rem; color: var(--text-secondary); }
#lfDialerPopup .fvd-ctlb { display: flex; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); align-items: center; justify-content: center; margin: 0 auto 4px; cursor: pointer; }
#lfDialerPopup .fvd-ctlb:hover:not([disabled]) { border-color: #0091ae; color: var(--text-primary); }
#lfDialerPopup .fvd-ctlb.on { background: #0091ae; border-color: #0091ae; color: #fff; }
#lfDialerPopup .fvd-ctlb.rec { background: #e5484d; border-color: #e5484d; color: #fff; animation: dialerBlink 1.6s infinite; }
#lfDialerPopup .fvd-ctlb[disabled] { opacity: .4; cursor: default; }
#lfDialerPopup .fvd-notes { display: block; width: 100% !important; box-sizing: border-box; min-height: 72px; height: 72px; border: 1px solid var(--border) !important; border-radius: 4px !important; padding: 8px 10px !important; font: inherit; font-size: .82rem !important; color: var(--text-primary); background: var(--bg-card) !important; resize: vertical; outline: none; box-shadow: none !important; }
#lfDialerPopup .fvd-notes:focus { border-color: #0091ae !important; }
#lfDialerPopup .fvd-ctx { margin: 0 16px 8px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; padding: 7px 10px; font-size: .74rem; color: var(--text-secondary); }
#lfDialerPopup .fvd-ctx b { color: var(--text-primary); }
#lfDialerPopup .fvd-ctx a { color: #0091ae; font-weight: 700; text-decoration: none; }
#lfDialerPopup .fvd-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 16px 10px; }
#lfDialerPopup .fvd-keypad button { display: flex; flex-direction: column; align-items: center; padding: 8px 0; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-elevated); cursor: pointer; color: var(--text-primary); font: inherit; }
#lfDialerPopup .fvd-keypad button b { font-size: 1.05rem; }
#lfDialerPopup .fvd-keypad button small { font-size: .55rem; letter-spacing: 1.5px; color: var(--text-muted); }
#lfDialerPopup .fvd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#lfDialerPopup .fvd-chip { border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); padding: 5px 9px; font: inherit; font-size: .76rem; color: var(--text-primary); cursor: pointer; }
#lfDialerPopup .fvd-chip.on { border-color: #0091ae; background: #e5f5f8; color: #0091ae; font-weight: 700; }
#lfDialerPopup .fvd-chk { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-secondary); margin: 6px 0 0; flex-wrap: wrap; }
#lfDialerPopup .fvd-chk input[type="checkbox"] { accent-color: #0091ae; margin: 0; }
#lfDialerPopup .fvd-selx { width: auto !important; height: auto !important; border: none !important; background: transparent !important; background-image: none !important; box-shadow: none !important; padding: 0 2px !important; font: inherit; font-size: .78rem !important; font-weight: 700; color: #0091ae; cursor: pointer; }
#lfDialerPopup .fvd-banner { margin: 0 16px 8px; padding: 8px 10px; border-radius: 4px; font-size: .74rem; }
#lfDialerPopup .fvd-banner b { display: block; margin-bottom: 2px; }
#lfDialerPopup .fvd-banner.err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
#lfDialerPopup .fvd-banner.warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
html.dark #lfDialerPopup .fvd-av, html.dark #lfDialerPopup .fvd-chip.on { background: rgba(0,145,174,.18); }

.lf-dialer-header {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-hover, #eceff3); color: var(--text-primary, #1f2937);
  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; }
/* monday-style rows (same recipe as the Projects rail): rounded, inset, accent-tinted active */
.am-side-item { margin: 0 5px; border-radius: 5px; padding: 4px 8px; }
button.am-side-item { width: calc(100% - 10px); }
.am-side-item:hover { background: var(--bg-hover, var(--bg-elevated)); }
.am-side-item.active { background: color-mix(in srgb, var(--accent, #3f76ff) 12%, transparent); color: var(--accent, #1d4ed8); font-weight: 600; }
.am-side-item.active .am-side-item-count { color: var(--accent, #1d4ed8); }

/* ג”€ג”€ 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; }
/* labelled variant — ONE switcher for Contacts / Companies / Deals (2026-10-10) */
.am-view-toggle--lbl button { width: auto; padding: 0 11px; gap: 6px; font: inherit; font-size: .78rem; font-weight: 600; color: var(--text-secondary); }
.am-view-toggle--lbl button.active { background: #0091ae; color: #fff; }
.am-view-toggle--lbl button span { white-space: nowrap; }
@media (max-width: 900px) { .am-view-toggle--lbl button span { display: none; } .am-view-toggle--lbl button { padding: 0 8px; } }
.lf-board-toolbar > .am-view-toggle--lbl { order: 0; }
.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:216px; border-right:1px solid var(--border); padding:10px 10px; overflow-y:auto; flex-shrink:0; min-height:0; }
.auto-side-hd { font-size:10px; font-weight:700; letter-spacing:.06em; color:var(--text-muted); text-transform:uppercase; margin-bottom:7px; }
.auto-tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:14px; }
.auto-tab { flex:1; background:none; border:none; padding:5px 3px; font-size:12px; 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:5px; }
.auto-pal { display:flex; align-items:center; gap:8px; padding:6px 9px; border:1px solid var(--border); border-radius:8px; font-size:12.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:22px; height:22px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; 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; }
/* Purchased → Order status multi-select chips (js/automation-section.js _autoStatusChips) */
.auto-stchips { display:flex; flex-wrap:wrap; align-items:center; gap:6px; border:1px solid var(--border); border-radius:10px; padding:8px; }
.auto-stchip { display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:12.5px; font-weight:600; line-height:1; padding:6px 11px 6px 9px; border-radius:999px; border:1.5px solid color-mix(in srgb, var(--stc) 40%, transparent); background:color-mix(in srgb, var(--stc) 9%, transparent); color:var(--stc); cursor:pointer; text-transform:capitalize; transition:background .12s, border-color .12s, color .12s; }
.auto-stchip .fvi { width:12px; height:12px; display:none; }
.auto-stchip:hover { border-color:var(--stc); }
.auto-stchip.on { background:var(--stc); border-color:var(--stc); color:#fff; }
.auto-stchip.on .fvi { display:inline-block; }
.auto-stchip-in { flex:1; min-width:96px; border:1.5px dashed var(--border); border-radius:999px; padding:6px 11px; font:inherit; font-size:12.5px; line-height:1; background:transparent; color:var(--text-primary); outline:none; }
.auto-stchip-in:focus { border-color:var(--accent); }
/* On-site Customer reviews → "Which reviews to show" rule (js/onsite-section.js, lib/reviewRules.js) */
.os-rvmode { display:flex; flex-direction:column; gap:6px; }
.os-rvopt { display:flex; align-items:flex-start; gap:8px; border:1.5px solid var(--border); border-radius:10px; padding:8px 10px; cursor:pointer; font-size:12.5px; color:var(--text-primary); }
.os-rvopt input { margin-top:2px; }
.os-rvopt small { display:block; font-size:11px; color:var(--text-muted); line-height:1.4; margin-top:2px; }
.os-rvopt.on { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent); }
.os-rvrec { font-style:normal; font-size:10px; font-weight:700; color:#15803d; background:#dcfce7; border-radius:999px; padding:1px 7px; margin-inline-start:4px; vertical-align:middle; }
.os-rvpills { display:flex; gap:6px; flex-wrap:wrap; }
.os-rvpill { font:inherit; font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; border:1.5px solid var(--border); background:transparent; color:var(--text-secondary); cursor:pointer; }
.os-rvpill:hover { border-color:var(--accent); color:var(--accent); }
.os-rvpill.on { background:#f59e0b; border-color:#f59e0b; color:#111; }
.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:9995; /* above the Forti dock (9990) — the tab/teaser covered the menu on phones (2026-10-05) */ 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:10px; font-size:10.5px; color:var(--text-muted); line-height:1.45; border-top:1px solid var(--border); padding-top:8px; }

/* ===================== 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: 33px; font-size: .74rem; font-weight: 500; color: var(--text-secondary);
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 0 8px !important;
}
.leads-tbl-wrap .am-table th:hover { background: var(--bg-hover); }
.leads-tbl-wrap .am-table td {
  height: 33px !important; max-height: 33px !important;
  font-size: 12.5px; color: var(--text);
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  padding: 0 8px !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: 33px !important; max-height: 33px !important; font-weight: 600; color: var(--text-primary); }
.leads-tbl-wrap .am-table tbody tr:hover { background: var(--bg-hover); }
.leads-tbl-wrap .am-table tbody tr.lf-row-active { background: color-mix(in srgb, var(--accent) 8%, transparent) !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: var(--border); border-radius: 8px; border: 2px solid var(--bg-card); }
.leads-tbl-wrap::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.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 var(--border); }
#leadsMainTable th:last-child, #leadsMainTable td:last-child { border-right: none; }
#leadsMainTable th { background: var(--bg-card) !important; color: var(--text-secondary); font-weight: 500; font-size: .74rem; text-align: left; height: 33px; padding: 0 8px !important; border-bottom: 1px solid var(--border); }
#leadsMainTable td { height: 33px; max-height: 33px; font-size: 12.5px; color: var(--text); border-bottom: 1px solid var(--border); padding: 0 8px !important; }
#leadsMainTable tbody tr[data-lead-id]:hover td { background: var(--bg-hover); }
/* monday full-bleed cells: ID-level so they beat the #leadsMainTable padding */
#leadsMainTable td:has(> .usb-badge),
#leadsMainTable td:has(> .mnb-statusfill),
.leads-tbl-wrap .am-table td:has(> .usb-badge),
.leads-tbl-wrap .am-table td:has(> .mnb-statusfill) { padding: 0 !important; }
.leads-tbl-wrap .am-table td .usb-badge, .leads-tbl-wrap .am-table td .mnb-statusfill { min-height: 32px; height: 100%; border-radius: 0; }
/* Compact fix (same as the Projects mnb cells): the app-wide 44px input/select
   chrome must not inflate leads rows — 33px rows need ~24px inline editors. */
.leads-tbl-wrap .am-table td input[type="text"],
.leads-tbl-wrap .am-table td input[type="email"],
.leads-tbl-wrap .am-table td input[type="tel"],
.leads-tbl-wrap .am-table td input[type="number"],
.leads-tbl-wrap .am-table td .lf-cell-inp { height: 24px; min-height: 0; padding: 2px 6px; font-size: 12.5px !important; }
.leads-tbl-wrap .am-table td select, .leads-tbl-wrap .am-table td .lf-cell-select { height: 24px; min-height: 0; padding: 1px 8px; font-size: 12.5px !important; }
.leads-tbl-wrap .am-table td input[type="date"] { height: 24px; min-height: 0; padding: 1px 4px; }

/* ── monday layout: group title OUTSIDE the table, one card per group ────── */
.leads-tbl-wrap--groups { border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0; }
.lfg-title { padding: 10px 2px 5px; width: fit-content; }
.lfg-title .lf-grp-hdr-inner { padding: 0; gap: 7px; }
.lfg-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; width: max-content; max-width: none; }
.lfg-card .am-table { border-radius: 0; }
.lfg-table tr.lf-grp-add td { border-right: none !important; }
.lfg-table tbody tr:last-child td { border-bottom: none; }
html.dark .lfg-table tbody tr[data-lead-id]:hover td { background: rgba(63, 118, 255, .1); }
/* Nested color picker floats above every other popover */
.lfm-colorpop { z-index: 31000; }
/* Files column: monday-style mini thumbnails + hover preview card */
.lfm-fthumb { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; border: 1px solid var(--border); cursor: pointer; display: inline-block; vertical-align: middle; }
.lfm-fthumb-ic { font-size: .85rem; cursor: pointer; line-height: 1; }
.lfm-fileprev { position: fixed; z-index: 31500; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(16,24,40,.25); padding: 8px; pointer-events: none; max-width: 240px; }
.lfm-fileprev img { max-width: 220px; max-height: 150px; border-radius: 6px; display: block; margin: 0 auto; }
.lfm-fileprev-name { font-size: .7rem; color: var(--text-secondary); margin-top: 5px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }

/* ── CRM Companies / Deals tables: same monday grid as Leads/Projects ────── */
.crm-table th { padding: 0 10px; height: 33px; font-size: .74rem; font-weight: 500; color: var(--text-secondary); text-transform: none; letter-spacing: 0; background: var(--bg-card); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.crm-table td { padding: 4px 10px; height: 33px; font-size: 12.5px; color: var(--text); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); vertical-align: middle; }
.crm-table th:last-child, .crm-table td:last-child { border-right: none; }
.crm-table td:has(> .mnb-statusfill) { padding: 0 !important; }
.crm-table tbody tr:hover { background: var(--bg-hover); }

/* 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 ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
/* Inbox uses the whole viewport: the shell is sized by _ibShellFit() (js/gmail-section.js) down to 12px above the bottom edge, and the section's bottom gutter matches so the page never scrolls. */
#sectionGmail { padding-bottom: 12px; }
/* ── Inbox conversation lists, Gmail-like (2026-09-25): the same two-line row the
   mobile link uses — avatar (+ channel badge), name + time, snippet under it.
   Scoped to the chat-split lists (.gm-list.gm-compact) so the mail folder
   table keeps its columns. Replaces the single-line from|snippet|time row that
   crushed the snippet in a 430px list. ── */
.ib-shell .gm-list.gm-compact .gm-row { display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; column-gap: 10px; padding: 10px 12px 10px 10px; border-left: none; background: none; font-size: .82rem; }
.ib-shell .gm-list.gm-compact .gm-row::before { display: none; }
.ib-shell .gm-list.gm-compact .gm-row:hover { background: var(--bg-hover); }
.ib-shell .gm-list.gm-compact .gm-row.unread { background: none; border-left: none; }
.ib-shell .gm-list.gm-compact .gm-row.unread:hover { background: var(--bg-hover); }
.ib-shell .gm-list.gm-compact .gm-row.gm-sel, .ib-shell .gm-list.gm-compact .gm-row.gm-sel:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ib-shell .gm-list.gm-compact .gm-row > *:not(.gm-row-mid) { order: 1; }
.ib-shell .gm-list.gm-compact .gm-row .gm-row-from { order: 2; flex: 1 1 0; width: auto; min-width: 0; font-size: .86rem; font-weight: 600; color: var(--text-primary); }
.ib-shell .gm-list.gm-compact .gm-row .gm-row-acts, .ib-shell .gm-list.gm-compact .gm-row .gm-row-time { order: 3; }
.ib-shell .gm-list.gm-compact .gm-row .gm-row-time { font-size: .7rem; color: var(--text-muted); font-weight: 500; }
.ib-shell .gm-list.gm-compact .gm-row .gm-row-mid { order: 4; flex: 1 0 100%; padding-inline-start: 46px; font-size: .78rem; color: var(--text-muted); }
.ib-shell .gm-list.gm-compact .gm-row:has(> .gm-row-chk) .gm-row-mid { padding-inline-start: 70px; }
.ib-shell .gm-list.gm-compact .gm-row .gm-row-snip { font-size: .78rem; }
.ib-shell .gm-list.gm-compact .gm-row.unread .gm-row-from { font-weight: 800; }
.ib-shell .gm-list.gm-compact .gm-row.unread .gm-row-time { color: var(--accent); font-weight: 700; }
.ib-shell .gm-list.gm-compact .gm-row.unread .gm-row-snip { color: var(--text-secondary); font-weight: 500; }
.ib-shell .gm-list.gm-compact .gm-row.unread .gm-row-mid::after { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-inline-start: 6px; vertical-align: middle; }
.ib-shell .gm-list.gm-compact .gm-row > span[style*="border-radius:50%"], .ib-shell .gm-list.gm-compact .gm-row > img { transform: none; margin: 0; }
.ib-shell .gm-list.gm-compact .gm-row-chk { opacity: .35; width: 15px; height: 15px; }
.ib-shell .gm-list.gm-compact .gm-row:hover .gm-row-chk, .ib-shell .gm-list.gm-compact .gm-row-chk:checked, .ib-shell .gm-list.gm-compact:has(.gm-row-chk:checked) .gm-row-chk { opacity: 1; }
.ib-ava { position: relative; display: inline-flex; flex: none; }
.ib-ava > span, .ib-ava > img { transform: none !important; margin: 0 !important; }
.ib-chb { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%; color: #fff; font: 800 9px/15px Inter, Heebo, sans-serif; font-style: normal; text-align: center; border: 2px solid var(--bg-card); box-sizing: content-box; }
/* compact (2026-09-25): ~52px rows, 30px avatars, tighter bars above the list */
.ib-shell .gm-list.gm-compact .gm-row { padding: 6px 10px 6px 8px; row-gap: 0; column-gap: 8px; }
.ib-shell .gm-list.gm-compact .gm-row .gm-row-from { font-size: .8rem; line-height: 1.25; }
.ib-shell .gm-list.gm-compact .gm-row .gm-row-mid { padding-inline-start: 38px; font-size: .72rem; line-height: 1.25; }
.ib-shell .gm-list.gm-compact .gm-row:has(> .gm-row-chk) .gm-row-mid { padding-inline-start: 61px; }
.ib-shell .gm-list.gm-compact .gm-row .gm-row-snip { font-size: .72rem; }
.ib-shell .gm-list.gm-compact .gm-row .gm-row-time { font-size: .66rem; }
.ib-shell .gm-list.gm-compact .gm-row > span[style*="border-radius:50%"], .ib-shell .gm-list.gm-compact .gm-row > img { transform: scale(.88); margin: -2px; }
.ib-ava > span, .ib-ava > img { width: 30px !important; height: 30px !important; font-size: 12px !important; }
.ib-chb { width: 13px; height: 13px; font-size: 8px; line-height: 13px; right: -2px; bottom: -2px; }
.ib-shell .gm-list.gm-compact .gm-row.unread .gm-row-mid::after { width: 7px; height: 7px; }
.ib-shell .gm-list.gm-compact .gm-row .gm-row-acts button { padding: 1px 4px; font-size: .72rem; }
.ib-shell .ib-filterbar { margin-bottom: 6px; gap: 6px; }
.ib-shell .ib-filterbar button, .ib-shell .ib-filterbar select, .ib-shell .ib-filterbar input { padding-top: 3px !important; padding-bottom: 3px !important; }
.ib-shell .ib-views { margin: -2px 0 6px; }
.ib-shell .ib-chanpills button { padding: 3px 10px !important; font-size: .7rem !important; }
/* Gmail three-line rows (2026-09-26) — now EVERY conversation list (_ibRow, 2026-09-29). Photos only; hover swaps the time for the actions. */
.gmr-av { flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; margin-top: 3px; background: var(--bg-hover); }
.gmr-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gmr-av.sq { border-radius: 7px; }
.ib-shell .gm-list.gm-compact .gm-row.gmr.cur { background: var(--bg-hover); box-shadow: inset 3px 0 0 var(--accent); }
.gmr-1 .ib-tagpill { font-size: .6rem; padding: 1px 6px; }
.ib-shell .gm-list.gm-compact .gm-row.gmr { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 8px; padding: 7px 10px 7px 8px; position: relative; row-gap: 0; }
.ib-shell .gm-list.gm-compact .gm-row.gmr .gm-row-chk { margin-top: 3px; }
.gmr-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gmr-1 { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-primary); line-height: 1.3; }
.gmr-from { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.gmr-n { font-size: .68rem; color: var(--text-muted); font-weight: 600; }
.gmr-t { flex: none; font-size: .66rem; color: var(--text-muted); font-weight: 500; }
.gmr-2 { font-size: .8rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; font-weight: 400; }
.gmr-3 { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--text-muted); line-height: 1.3; }
.gmr-snip { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-shell .gm-list.gm-compact .gm-row.gmr.unread { background: color-mix(in srgb, var(--text-primary) 4%, transparent); }
.ib-shell .gm-list.gm-compact .gm-row.gmr.unread .gmr-from, .ib-shell .gm-list.gm-compact .gm-row.gmr.unread .gmr-2 { font-weight: 800; }
.ib-shell .gm-list.gm-compact .gm-row.gmr.unread .gmr-t { color: var(--text-primary); font-weight: 700; }
.ib-shell .gm-list.gm-compact .gm-row.gmr.unread .gmr-3 { color: var(--text-secondary); }
.ib-shell .gm-list.gm-compact .gm-row.gmr:hover { background: var(--bg-hover); box-shadow: inset 0 -1px 0 var(--border), 0 1px 3px rgba(0,0,0,.12); }
.ib-shell .gm-list.gm-compact .gm-row.gmr .gm-row-acts { position: absolute; top: 4px; right: 6px; display: none; background: var(--bg-hover); border-radius: 8px; padding: 0 2px; }
.ib-shell .gm-list.gm-compact .gm-row.gmr:hover .gm-row-acts { display: flex; }
.ib-shell .gm-list.gm-compact .gm-row.gmr:hover .gmr-t { visibility: hidden; }
.ib-shell .gm-list.gm-compact .gm-row.gmr .gm-row-acts button { padding: 3px 5px; font-size: .78rem; }
.ib-shell .gm-list.gm-compact .gm-row.gmr.gm-sel, .ib-shell .gm-list.gm-compact .gm-row.gmr.gm-sel:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
/* quick filter chips in the Inbox filter bar (2026-09-29) */
.ib-qchip { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); border-radius: 100px; padding: 4px 11px; font-size: .72rem; font-weight: 700; cursor: pointer; font-family: inherit; height: 27px; }
.ib-qchip.on { border-color: var(--accent); color: var(--accent); background: var(--bg-hover); }
/* inline ask card (replaces window.prompt in the Inbox, 2026-09-29) */
.ib-ask { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 9px 11px 10px; font-size: .8rem; }
.ib-ask.docked { margin: 2px 0 8px; border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.ib-ask.float { position: fixed; z-index: 3100; width: 290px; box-shadow: 0 12px 34px rgba(0,0,0,.2); }
.ib-ask-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; } .ib-ask-hd b { font-size: .8rem; flex: 1; }
.ib-ask-x { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: .85rem; padding: 2px 5px; border-radius: 6px; } .ib-ask-x:hover { background: var(--bg-hover); }
.ib-ask-ft { display: flex; gap: 6px; margin-top: 9px; }
.ib-ask-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.ib-chip-btn { border: 1px solid var(--border); background: var(--bg-page); color: var(--text-primary); border-radius: 100px; padding: 4px 11px; font-size: .74rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.ib-chip-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-hover); }
/* Tasks & follow-ups (2026-09-28): quick tabs, conversation cell, follow-up pill, "again" panel */
.ib-ttabs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; }
.ib-ttab { 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; font-family: inherit; display: inline-flex; gap: 6px; align-items: center; }
.ib-ttab.on { border-color: var(--accent); color: var(--accent); background: var(--bg-hover); }
.ib-ttab b { font-weight: 800; color: var(--text-muted); } .ib-ttab b.red { color: #dc2626; } .ib-ttab.on b { color: var(--accent); }
.ib-ttabs-hint { margin-inline-start: auto; font-size: .68rem; color: var(--text-muted); }
.mnb-conv { display: flex !important; gap: 8px; align-items: center; cursor: pointer; min-width: 0; }
.mnb-conv:hover .mnb-conv-nm { color: var(--accent); text-decoration: underline; }
.mnb-conv-ch { width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mnb-conv-b { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.mnb-conv-nm { font-weight: 600; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mnb-conv-snip { font-size: .68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-fu-pill { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #fcd34d; background: #fef3c7; color: #92400e; border-radius: 100px; padding: 2px 4px 2px 10px; font-size: .72rem; font-weight: 700; }
.ib-fu-pill.over { border-color: #fca5a5; background: #fee2e2; color: #991b1b; }
.ib-fu-pill button { border: none; background: #fff8; color: inherit; border-radius: 100px; padding: 2px 7px; font-size: .68rem; font-weight: 800; cursor: pointer; font-family: inherit; }
.ib-fu-pill button:hover { background: #fff; }
html.dark .ib-fu-pill { background: #78350f33; border-color: #b4530966; color: #fcd34d; } html.dark .ib-fu-pill.over { background: #7f1d1d33; border-color: #b9121266; color: #fca5a5; } html.dark .ib-fu-pill button { background: #0003; }
.ib-again { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 9990; display: flex; gap: 6px; align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,.2); padding: 10px 12px; font-size: .8rem; font-weight: 600; }
.ib-again button { border: 1px solid var(--accent); background: var(--bg-hover); color: var(--accent); border-radius: 100px; padding: 4px 11px; font-size: .74rem; font-weight: 800; cursor: pointer; font-family: inherit; }
.ib-again button.x { border-color: var(--border); color: var(--text-muted); background: none; }
/* board column header: one-click sort arrow (2026-09-28) */
.mnb-sortbtn { border: none; background: none; cursor: pointer; font-size: .72rem; line-height: 1; padding: 0 3px; color: var(--text-muted); opacity: 0; flex: none; }
.mnb-hcell:hover .mnb-sortbtn { opacity: .8; }
.mnb-sortbtn.on { opacity: 1; color: var(--accent); font-weight: 800; }
/* ── media bubbles (WhatsApp-style) + full-screen viewer (2026-09-26) ── */
.ib-media { display: block; position: relative; border-radius: 12px; overflow: hidden; cursor: zoom-in; max-width: min(340px, 100%); line-height: 0; background: #0002; }
.ib-media img, .ib-media video { display: block; max-width: 100%; max-height: 380px; width: auto; height: auto; min-width: 140px; object-fit: cover; }
.ib-media + .ib-media, .ib-media + .ib-audio { margin-top: 4px; }
.ib-media-vid { cursor: pointer; }
.ib-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; }
.ib-play span { width: 52px; height: 52px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; padding-inline-start: 4px; box-sizing: border-box; }
.ib-dur { position: absolute; left: 8px; bottom: 6px; color: #fff; font: 600 .7rem/1 inherit; text-shadow: 0 1px 2px #000; }
.ib-audio { display: block; max-width: 280px; height: 36px; }
.ib-lb { position: fixed; inset: 0; z-index: 10050; background: rgba(0,0,0,.94); display: flex; flex-direction: column; color: #fff; }
.ib-lb-hd { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.ib-lb-hd .who { font-weight: 700; font-size: .9rem; } .ib-lb-hd .when { font-size: .72rem; opacity: .7; }
.ib-lb-hd .tools { margin-inline-start: auto; display: flex; gap: 2px; }
.ib-lb-hd button, .ib-lb-hd a { width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; color: #fff; font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.ib-lb-hd button:hover, .ib-lb-hd a:hover { background: rgba(255,255,255,.14); }
.ib-lb-body { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: auto; }
.ib-lb-body img { max-width: 92vw; max-height: calc(100vh - 100px); object-fit: contain; transition: transform .15s; cursor: zoom-in; }
.ib-lb-body img.zoom { transform: scale(2); cursor: zoom-out; }
.ib-lb-body video { max-width: 92vw; max-height: calc(100vh - 100px); background: #000; outline: none; }
.ib-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255,255,255,.14); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.ib-lb-nav.prev { left: 16px; } .ib-lb-nav.next { right: 16px; } .ib-lb-nav:hover { background: rgba(255,255,255,.26); }
.ib-lb-cnt { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-size: .74rem; opacity: .75; }
/* selection bar: a slim Gmail-style toolbar instead of a boxed card */
.ib-shell .gm-list.gm-compact .gm-socbar { border: none; border-bottom: 1px solid var(--border); border-radius: 0; margin: 0; padding: 3px 10px 3px 8px; min-height: 30px; position: sticky; top: 0; background: var(--bg-card); z-index: 2; }
.ib-shell .gm-list.gm-compact .gm-socbar.on { background: color-mix(in srgb, var(--accent) 7%, var(--bg-card)); }
.ib-shell .gm-list.gm-compact .gm-socbar .gm-bulk-hint { font-size: .7rem; color: var(--text-muted); }
.ib-shell .gm-list.gm-compact .gm-socbar .gm-row-chk { opacity: .6; }
.ib-presence { display: none; align-items: center; gap: 8px; margin: 0 0 6px; padding: 6px 12px; border-radius: 10px; font-size: .76rem; font-weight: 600; color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; }
.ib-presence.on { display: flex; }
.ib-presence.typing { color: #991b1b; background: #fee2e2; border-color: #fca5a5; }
html.dark .ib-presence { background: #78350f33; color: #fcd34d; border-color: #b4530966; }
html.dark .ib-presence.typing { background: #7f1d1d33; color: #fca5a5; border-color: #b9121266; }
.gm-shell { display: flex; gap: 0; width: 100%; height: calc(100vh - var(--ib-shell-top, 142px)); 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-sig { color: var(--text-muted); font-size: .8rem; margin-top: 8px; }
.gm-tbar { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: .74rem; color: var(--text-muted); padding: 2px 2px 8px; }
.gm-tbar a { color: var(--accent); text-decoration: none; font-weight: 600; }
.gm-tbar a:hover { text-decoration: underline; }
.gm-msg a { color: var(--accent); }
.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); }
/* Compact chat-channel list (shadcn-style density) */
.gm-compact .gm-row { padding: 3px 8px; gap: 7px; font-size: .78rem; }
.gm-compact .gm-row > div:first-of-type > div[style*="border-radius:50%"], .gm-compact .gm-row > div[style*="border-radius: 50%"] { transform: scale(.74); margin: -3px; }
.gm-compact .gm-row-from { flex: 0 0 132px; font-weight: 600; }
.gm-compact .gm-row-snip { font-size: .7rem; }
.gm-compact .gm-row-time { font-size: .64rem; color: var(--text-muted); }
.gm-compact .gm-row::before { flex: 0 0 5px; width: 5px; height: 5px; }

/* Bulk selection in the mailbox list */
.gm-row-chk { flex: none; width: 14px; height: 14px; margin: 0; cursor: pointer; accent-color: var(--accent); }
.gm-row.gm-sel { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.gm-row.gm-sel:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.gm-bulkbar { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 9px; margin-bottom: 6px; font-size: .75rem; min-height: 42px; box-sizing: border-box; }
.gm-bulkbar.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.gm-bulk-n { font-weight: 700; color: var(--accent); margin-inline-end: 4px; }
.gm-bulk-hint { color: var(--text-muted); }
.gm-chk-col { width: 26px; padding-inline-end: 0 !important; text-align: center; }
.um-table tr.gm-sel > td { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.gm-socbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.gm-socbar::-webkit-scrollbar { width: 0; height: 0; display: none; }
.gm-socbar > * { flex: none; }
.gm-socbar .gm-bulk-hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.gm-socbar .gm-bulk-n { position: sticky; inset-inline-start: 0; background: inherit; }
/* 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; }
/* ══ App shell · HubSpot look (2026-10-08): dark navy menu with groups, top bar ══ */
:root { --sidebar-bg: #2d3e50; --nav-active-bg: #3d5166; --nav-hover-bg: #3d5166; --nav-text-active: #fff; --topbar-h: 48px; }
html.dark { --sidebar-bg: #1f2b38; --nav-active-bg: #34465a; --nav-hover-bg: #34465a; }
.sidebar { box-shadow: none; }
.sidebar .fv-wordmark { color: #fff; }
.sidebar-collapse-btn { color: #cbd6e2; }
.nav-item { color: #cbd6e2; border-radius: 4px; font-size: .84rem; }
.nav-item svg { opacity: .9; }
.nav-item:hover { color: #fff; }
.nav-item.active { color: #fff; font-weight: 700; }
.nav-group { padding: 14px 10px 4px; font-size: .68rem; font-weight: 700; letter-spacing: .4px; color: #99acc2; white-space: nowrap; }
.nav-group::before { content: "▾ "; font-size: .8em; }
.sidebar.collapsed .nav-group { height: 1px; padding: 0; margin: 8px 10px; background: #3d5166; font-size: 0; }
.sidebar.collapsed .nav-group::before { content: none; }
.sidebar-footer, .sidebar-user-name { color: #fff; }
.sidebar-user-email { color: #99acc2; }
/* top bar: search (⌘K) + Forti; sits above every section, sidebar-aligned */
.fv-topbar { position: sticky; top: 0; z-index: 90; height: var(--topbar-h); min-height: var(--topbar-h); display: flex; align-items: center; gap: 10px; padding: 0 16px; background: #2d3e50; border-bottom: 1px solid #3d5166; }
.fv-topbar-search { display: inline-flex; align-items: center; gap: 8px; width: 340px; max-width: 60vw; height: 32px; padding: 0 12px; border: none; border-radius: 3px; background: #fff; color: #7c98b6; font-size: .82rem; font-family: inherit; cursor: text; text-align: left; }
.fv-topbar-search span { flex: 1; }
.fv-topbar-search kbd { font-family: inherit; font-size: .66rem; color: #99acc2; border: 1px solid #dfe3eb; border-radius: 3px; padding: 0 5px; }
.fv-topbar-btn { height: 32px; padding: 0 12px; border: none; border-radius: 4px; background: transparent; color: #cbd6e2; font-size: .82rem; font-family: inherit; cursor: pointer; white-space: nowrap; }
.fv-topbar-btn:hover { background: #3d5166; color: #fff; }
.fv-topbar-spacer { flex: 1; }
.fv-topbar-logo { width: 28px; height: 28px; border-radius: 6px; background: transparent; color: #fff; font-weight: 900; font-size: 22px; display: inline-flex; align-items: center; justify-content: center; margin-right: 6px; flex: none; }
/* search box: text left, magnifier at the right end (HubSpot), no ⌘K chip */
.fv-topbar-search { width: 420px; color: #7c98b6; }
.fv-topbar { padding-left: 6px; }
.fv-topbar-search svg { color: #516f90; flex: none; }
.fv-topbar-search kbd { display: none; }
/* right cluster (HubSpot order): workspace ▾ · bell · profile circle */
.fv-topbar-right { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.fv-topbar-right #fvBell:hover { background: #3d5166; color: #fff; }
.sidebar { border-right: none !important; }
.fv-topbar-ws { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border-radius: 4px; cursor: pointer; user-select: none; font-size: .82rem; max-width: 220px; }
.fv-topbar-ws:hover { background: #3d5166; }
.fv-topbar-ws > span:first-child { color: #cbd6e2 !important; font-size: .9rem !important; }
.fv-topbar-ws #fvCaSel { color: #fff !important; font-weight: 700; }
.fv-topbar-ws > span:last-child { color: #cbd6e2 !important; opacity: .9 !important; font-size: .6rem !important; }
.fv-topbar-avatar { width: 30px; height: 30px; border-radius: 50%; background: #0091ae; color: #fff; font-size: .76rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-transform: uppercase; letter-spacing: .03em; margin-left: 10px; box-shadow: 0 0 0 2px rgba(255,255,255,.12); }
.fv-topbar-avatar:hover { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.fv-topbar-avatar:empty { display: none; }
.sidebar-user-avatar { background: #0091ae; }
@media (min-width: 769px) { .sidebar-user { display: none !important; } .sidebar-footer { border-top: none; } }
/* notifications drawer: the new palette, clean white header (2026-10-08) */
html:not(.dark) .fv-hs { --accent: #0091ae; --border: #dfe3eb; --text-primary: #33475b; --text-secondary: #516f90; --text-muted: #7c98b6; --bg-hover: #f5f8fa; }
.fv-hs button:hover[title="Close"] { background: var(--bg-hover); color: var(--text-primary); }
.fv-hs #fvNfList > div:hover { background: var(--bg-hover); }
/* collapse control at the bottom of the menu (HubSpot-style) */
.sidebar-collapse-row { display: flex; align-items: center; justify-content: flex-end; padding: 4px 8px 6px; }
.sidebar-collapse-row .sidebar-collapse-btn { width: 30px; height: 30px; border: none; border-radius: 4px; color: #cbd6e2; }
.sidebar-collapse-row .sidebar-collapse-btn:hover { background: #3d5166; color: #fff; }
.sidebar.collapsed .sidebar-collapse-row { justify-content: center; padding: 4px 0 8px; }
.sidebar.collapsed .sidebar-collapse-row #sidebarCollapseBtn { border: none; background: none; color: #cbd6e2; width: 30px; height: 30px; }
.sidebar.collapsed .sidebar-collapse-row #sidebarCollapseBtn:hover { background: #3d5166; color: #fff; }
.sidebar.collapsed .sidebar-header { padding: 14px 4px 8px; }
/* pinned lists rail (Lists Setup, 2026-10-08) */
.lf-rail-setup { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 4px; font-size: .7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.lf-rail-setup button { border: none; background: none; color: var(--accent); font-size: .74rem; font-weight: 700; cursor: pointer; font-family: inherit; text-transform: none; letter-spacing: 0; padding: 2px 6px; border-radius: 4px; }
.lf-rail-setup button:hover { background: var(--bg-hover); }
.lf-rail-pin-ic { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center; font-size: .66rem; font-weight: 800; flex: none; margin-right: 2px; }
.lf-rail-more { display: flex; align-items: center; justify-content: space-between; width: 100%; border: none; background: none; padding: 8px 10px; margin-top: 6px; border-top: 1px solid var(--border); font-size: .74rem; color: var(--text-muted); cursor: pointer; font-family: inherit; text-align: left; }
.lf-rail-more b { color: var(--accent); }
.lf-setup-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: .8rem; }
.lf-setup-row:hover { background: var(--bg-hover); }
.lf-setup-row.pinned { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.lf-setup-row.pinned:hover { background: color-mix(in srgb, var(--accent) 11%, transparent); }
.lf-setup-row.over { box-shadow: inset 0 2px 0 var(--accent); }
.lf-setup-row[draggable] { cursor: grab; }
.lf-setup-grip { color: var(--accent); opacity: .55; font-size: .8rem; letter-spacing: -2px; cursor: grab; }
.lf-setup-acts { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.lf-setup-row:hover .lf-setup-acts { opacity: 1; }
.lf-setup-acts button { border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: .7rem; padding: 2px 3px; border-radius: 4px; font-family: inherit; }
.lf-setup-acts button:hover { background: var(--bg-card); color: var(--text-primary); }
.lf-setup-more { border: none; background: none; color: var(--accent); font-size: .74rem; font-weight: 600; cursor: pointer; font-family: inherit; text-align: left; padding: 4px 8px 4px 34px; border-radius: 6px; }
.lf-setup-more:hover { background: var(--bg-hover); }
.lf-rail-title { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 800; color: var(--text-primary); }
/* Leads shell = the ListsClean mockup: grey page, the rail and the board as two
   white cards (2026-10-08). The rail root carries .lf-rail (app.js). */
#leadsContainer > div:has(> .lf-rail) { background: var(--bg-elevated); padding: 14px 16px; gap: 14px; box-sizing: border-box; }
html:not(.dark) #leadsContainer > div:has(> .lf-rail) { background: #f5f8fa; }
#leadsContainer > div:has(> .lf-rail) > #leadsMainPane { background: var(--bg-card); border-radius: 4px; padding: 14px 18px 16px !important; box-shadow: 0 1px 2px rgba(45,62,80,.08); }
.lf-rail { width: 240px; border: none; border-radius: 4px; box-shadow: 0 1px 2px rgba(45,62,80,.08); margin: 0; padding: 10px 8px 12px; position: static; height: auto; max-height: 100%; box-sizing: border-box; }
.lf-rail.collapsed { width: 56px; padding: 10px 0 12px; }
.lf-rail .am-side-header { padding: 2px 8px 10px; border-bottom: none; }
.lf-rail .lf-rail-setup-btn { font-size: 12px; padding: 2px 4px; }
.lf-rail .am-side-search { margin: 0 4px 8px; }
.lf-rail .am-side-item, .lf-rail button.am-side-item { margin: 0; width: 100%; padding: 8px 10px; border-radius: 4px; font-size: 13px; gap: 9px; line-height: 1.3; }
.lf-rail .am-side-item.active { background: #e5f5f8; color: var(--accent); font-weight: 700; }
html.dark .lf-rail .am-side-item.active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.lf-rail .lf-side-lbl { gap: 9px; }
.lf-rail .lf-rail-pin-ic { width: 22px; height: 22px; font-size: 11px; margin: 0; }
.lf-rail .am-side-item-count { font-size: 12px; font-weight: 400; color: var(--text-muted, #7c98b6); }
.lf-rail .am-side-item.active .am-side-item-count { color: var(--accent); }
.lf-rail .lf-rail-more { font-size: 12px; color: var(--text-secondary); padding: 8px 10px; border-radius: 4px; }
.lf-rail .lf-rail-more:hover { background: var(--bg-hover); }
.lf-rail .lf-rail-more { margin: 8px 0 0; border-top: 1px solid var(--border); border-radius: 0 0 4px 4px; padding-top: 12px; }
.lf-rail .lf-rail-more + .lf-rail-more { margin-top: 0; border-top: none; padding-top: 8px; border-radius: 4px; }
.lf-setup-row .n { margin-left: auto; font-size: .72rem; color: var(--text-muted); }
.lf-setup-gh { display: flex; align-items: center; gap: 8px; padding: 12px 8px 4px; font-size: .68rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.lf-setup-gh > * { flex-shrink: 0; }
.lf-setup-gh > span:not(.lf-rail-pin-ic) { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }
/* The Contacts / Companies / Deals row inside the Leads screen is redundant now that the main menu carries them (2026-10-08). */
.crm-tab-bar { display: none !important; }
@media (max-width: 768px) { .fv-topbar { display: none; } }
/* ══ Leads / CRM tables + Deals board · HubSpot look (2026-10-08) ═══════════
   Search row above the list (quick filters wrap to a second row), flat grey
   column headers, no frame around the table, hairline rows, teal name links,
   hover row actions; board columns on a page tint with field-line cards. */
/* toolbar: search + Sort first, views + New on the right, everything else wraps below */
.lf-board-toolbar { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; }
.lf-board-toolbar > #unifiedSearchInput { order: -10; width: 260px; max-width: 42vw; border: 1px solid #cbd6e2 !important; border-radius: 3px !important; padding: 7px 10px; }
.lf-board-toolbar > .mnb-toolbtn, .lf-board-toolbar > .lf-sort-btn { order: -9; }
.lf-board-toolbar > .am-view-toggle, .lf-board-toolbar > .crm-db-viewtog { order: -6; margin-left: auto; }
.lf-board-toolbar > .lf-add-item-btn, .lf-board-toolbar > .am-icon-btn, .lf-board-toolbar > .crm-add-btn { order: -5; }
.lf-board-toolbar::before { content: ''; order: -4; flex-basis: 100%; height: 0; }
.lf-board-toolbar > #leadsResultCount, .lf-board-toolbar > #leadsResultOf, .lf-board-toolbar > .crm-count { order: 5; margin-left: auto; font-size: .76rem; color: var(--text-muted); }
.lf-add-item-btn.proj-primary-btn, .crm-add-btn { background: #0091ae !important; border-color: #0091ae !important; color: #fff !important; border-radius: 3px !important; }
/* Leads: no orange New item in the toolbar (2026-10-08) — rows are added with each group's + Add item */
.lf-board-toolbar > .lf-add-item-btn { display: none !important; }
/* Sort button hidden everywhere (2026-10-08) — column headers sort; the quick filters sit next to Filter */
button[onclick="projPop(event,'leadsort')"] { display: none !important; }
/* table: no frame, flat headers, hairlines */
.lfg-card { background: transparent; border: none; border-radius: 0; }
.lfg-card .am-table th, .am-table.lf-grouped th { background: var(--bg-card); color: #516f90; font-weight: 400; font-size: 13px; border-bottom: 1px solid #dfe3eb; border-right: none; text-transform: none; }
.lfg-card .am-table td, .am-table.lf-grouped td { border-right: none; border-bottom: 1px solid #dfe3eb; }
.am-table.lf-grouped tbody tr:hover td { background: #f5f8fa; }
.lfg-title .mnb-gname { font-size: 14px; }
.crm-table th { background: var(--bg-card); color: #516f90; font-weight: 400; font-size: 13px; text-transform: none; letter-spacing: 0; border-bottom: 1px solid #dfe3eb; border-right: none; }
.crm-table td { border-right: none; border-bottom: 1px solid #dfe3eb; }
.crm-table tbody tr:hover td { background: #f5f8fa; }
.crm-card, .crm-grid { border: none; box-shadow: none; border-radius: 0; }
/* name cell: teal link, hover-only Preview / open / journey */
.lf-cell-inp.lf-name { color: #0091ae; font-weight: 700; }
.lf-namecell .lf-rowbtn { opacity: 0; transition: opacity .12s; }
tr:hover .lf-namecell .lf-rowbtn { opacity: 1; }
.lf-rowbtn.lf-rowbtn-txt { border: 1px solid #cbd6e2; border-radius: 3px; padding: 1px 7px; font-size: .68rem; color: #33475b; background: var(--bg-card); font-weight: 600; }
.lf-rowbtn.lf-rowbtn-txt:hover { background: #eaf0f6; }
/* Preview drawer: the same card, docked on the right over the table */
.crm-panel-overlay.drawer { background: rgba(45,62,80,.18); }
.crm-panel-overlay.drawer .crm-panel { width: min(1180px, 96vw); margin-left: auto; box-shadow: -12px 0 40px rgba(16,24,40,.22); }
.crm-panel-overlay.drawer .crm-panel-body { grid-template-columns: 280px 1fr 0; }
.crm-panel-overlay.drawer .crm-panel-right { display: none; }
/* collapsed lists rail: one icon per source */
.lf-rail-ic { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); font-size: 13px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lf-rail-ic:hover { background: #eaf0f6; }
.lf-rail-ic-pin { border-color: transparent; font-size: 12px; }
.lf-rail-ic-pin:hover { filter: brightness(.95); }
.lf-rail-ic-pin.active { box-shadow: 0 0 0 2px var(--accent); }
.lf-rail-setup-btn { border: none; background: none; color: var(--accent); font-size: .72rem; font-weight: 700; cursor: pointer; font-family: inherit; padding: 2px 6px; border-radius: 4px; margin-left: auto; white-space: nowrap; }
.lf-rail-setup-btn:hover { background: var(--bg-hover); }
.lf-rail-setup-btn + .am-side-toggle { margin-left: 0; }
.lf-board-title { display: flex; flex-direction: column; min-width: 0; max-width: 260px; margin-right: 6px; flex-shrink: 0; line-height: 1.2; }
.lf-board-title b { font-size: .98rem; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-board-title span { font-size: .7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-rail-ic-b { position: absolute; top: -5px; right: -8px; background: #fef3c7; color: #92400e; border-radius: 999px; font-size: 9px; font-weight: 800; padding: 0 4px; line-height: 1.5; }
/* Deals board */
.crm-db-col { background: #f5f8fa; border: none; border-radius: 4px; }
html.dark .crm-db-col { background: var(--bg-hover); }
.crm-db-col-hd { background: transparent; border-bottom: none; padding: 10px 12px 6px; border-radius: 4px 4px 0 0; }
.crm-db-col-name { font-size: 13px; font-weight: 700; color: #33475b; }
.crm-db-col-n { font-weight: 400; color: #516f90; margin-left: 4px; }
.crm-db-card { border: 1px solid #dfe3eb; border-radius: 4px; padding: 10px 12px; }
.crm-db-card:hover { box-shadow: 0 2px 8px rgba(45,62,80,.14); transform: none; }
.crm-db-card-name { color: #0091ae; font-size: .84rem; white-space: normal; line-height: 1.3; }
.crm-db-fields { margin-top: 6px; font-size: .7rem; color: #33475b; line-height: 1.55; }
.crm-db-fl { color: #516f90; }
.crm-db-assoc { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #eaf0f6; }
.crm-db-av { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: #eaf0f6; color: #516f90; font-size: 10px; font-weight: 800; align-items: center; justify-content: center; }
.crm-db-foot { display: flex; align-items: center; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #eaf0f6; }
.crm-db-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #cbd6e2; border-radius: 3px; padding: 1px 7px; font-size: .66rem; color: #516f90; background: #fff; }
.crm-db-chip.stale { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.crm-db-act { border: none; background: none; cursor: pointer; color: #7c98b6; font-size: .8rem; padding: 2px 4px; border-radius: 3px; }
.crm-db-act:hover { background: #eaf0f6; color: #0091ae; }
.crm-db-col-ft { padding: 8px 12px 10px; font-size: .7rem; color: #516f90; line-height: 1.6; border-top: 1px solid #dfe3eb; }
.crm-db-col-ft b { color: #33475b; }
/* ══ Contact card · HubSpot look (2026-10-08) ═══════════════════════════════
   Same functionality, HubSpot's visual language: page tint behind white
   bordered cards, teal links/active tab, orange primary, round icon actions
   on the left, underline tabs with counts, month/day sections of cards. */
html:not(.dark) .crm-panel { --bg-card: #fff; --border: #dfe3eb; --text-primary: #33475b; --text-secondary: #516f90; --text-muted: #7c98b6; --accent: #0091ae; --bg-hover: #f5f8fa; --bg-secondary: #f5f8fa; --hs-line: #dfe3eb; --hs-line-2: #cbd6e2; }
.crm-panel { font-family: Nunito, "Segoe UI", system-ui, sans-serif; background: var(--bg-hover); }
.crm-panel-left, .crm-panel-right { background: var(--bg-hover); padding: 16px 14px; gap: 14px; }
.crm-panel-left { border-right: none; }
.crm-panel-right { border-left: none; }
.crm-panel-body { grid-template-columns: 320px 1fr 300px; }
/* left: identity card + details card */
.crm-pl-hero { background: var(--bg-card); margin: 0; padding: 18px 18px 12px; border: 1px solid var(--border); border-radius: 4px; }
html.dark .crm-pl-hero { background: var(--bg-card); }
.crm-pl-name { font-size: 1.2rem; font-weight: 800; }
.crm-pl-sub a { color: #0091ae; }
.hs-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 14px 16px; }
.hs-card .crm-pl-section-title { font-size: .92rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--text-primary); margin-bottom: 12px; }
.hs-card > .crm-pl-section-title:first-child:not(:has(.crm-sec-chev))::before { content: "▾ "; color: var(--text-muted); font-size: .8em; } /* only the card title; sub-sections (Properties · Manage, a flex row) carry none — a stray second chevron showed there, 2026-10-08 */
.crm-panel-left #lfScoreBox { background: var(--bg-card); border: 1px solid var(--border) !important; border-radius: 4px !important; padding: 12px 14px !important; }
/* left: round icon actions */
.crm-pl-actions.hs-acts { display: flex; flex-wrap: wrap; gap: 2px; margin: 6px -6px 0; }
.hs-acts .crm-pl-action { min-width: 54px; padding: 6px 2px; background: none; gap: 5px; font-size: .66rem; color: var(--text-primary); border-radius: 6px; }
.hs-acts .crm-pl-action svg { width: 40px; height: 40px; padding: 10px; box-sizing: border-box; border: 1px solid var(--hs-line-2); border-radius: 50%; background: var(--bg-card); color: var(--text-primary); transition: background .12s, border-color .12s; }
.hs-acts .crm-pl-action:hover { background: none; color: var(--text-primary); }
.hs-acts .crm-pl-action:hover svg { background: #e5f5f8; border-color: #0091ae; }
html.dark .hs-acts .crm-pl-action:hover svg { background: #14304a; border-color: #B5D4F4; }
/* center: white card holding tabs + toolbar + timeline */
.crm-panel-center { background: var(--bg-hover); padding: 16px 0 16px 0; }
.crm-pc-tabs.hs-tabs { display: flex; flex-wrap: wrap; gap: 20px; padding: 0 20px; background: var(--bg-card); border: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 4px 4px 0 0; margin: 0 16px; overflow: visible; }
.hs-tabs .crm-pc-tab { padding: 12px 0; border-radius: 0; border-bottom: 3px solid transparent; background: none; color: var(--text-secondary); font-size: .82rem; font-weight: 400; display: inline-flex; align-items: center; gap: 6px; }
.hs-tabs .crm-pc-tab:hover:not(.active) { background: none; color: var(--text-primary); }
.hs-tabs .crm-pc-tab.active, html.dark .hs-tabs .crm-pc-tab.active { background: none; color: var(--text-primary); font-weight: 700; border-bottom-color: #0091ae; }
.hs-tabs .crm-pc-tab-cnt { font-size: .7rem; font-weight: 400; color: var(--text-muted); }
.crm-pc-activity-bar { margin: 0 16px; padding: 12px 20px; background: var(--bg-card); border: 1px solid var(--border); border-top: none; border-bottom: none; }
.crm-pc-activity-bar .crm-pc-search { background: var(--bg-card); border-color: var(--hs-line-2); border-radius: 3px; }
/* duplicate quick actions (now round icons on the left) — only the per-view buttons stay here */
.crm-pc-actions > .crm-pc-quick:not([id]) { display: none; }
.crm-create-note-btn { background: #0091ae; border-radius: 3px; }
.crm-create-note-btn:hover { background: #00708a; }
.crm-pc-actions .crm-pc-quick { border: 1px solid var(--hs-line-2); border-radius: 3px; background: var(--bg-card); color: var(--text-primary); }
.crm-notes-list { margin: 0 16px; padding: 14px 20px 18px; background: var(--bg-card); border: 1px solid var(--border); border-top: none; border-radius: 0 0 4px 4px; }
/* timeline: section titles + cards */
.crm-tl-day { background: var(--bg-card); font-size: .92rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--text-primary); padding: 12px 0 8px; }
.crm-tl-day::after { display: none; }
.crm-tl-day-up { color: #0091ae; }
.crm-tl-day-pin { color: #b45309; }
.crm-tl-item.crm-tl-pinned > .crm-tl-body { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 10px; }
.crm-tl-item { margin-bottom: 10px; }
.crm-tl-body { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 10px 14px; transition: box-shadow .12s; }
.crm-tl-item:hover .crm-tl-body { box-shadow: 0 2px 8px rgba(45,62,80,.12); }
.crm-tl-head b { font-weight: 700; }
.crm-tl-ic { background: var(--bg-card) !important; border: 1px solid var(--border); }
/* right rail: one card per section */
.crm-pr-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px; }
.crm-pr-section-header { border-bottom: none; padding-bottom: 0; }
.crm-pr-section-title { font-size: .92rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--text-primary); }
.crm-pr-section-title::before { content: "▾ "; color: var(--text-muted); font-size: .8em; }
/* ── Contact card: one "view" dropdown instead of the 8-chip row (2026-10-08) ── */
.crm-pc-view { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--hs-line-2, var(--border)); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font-size: .8rem; font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap; flex: none; }
.crm-pc-view:hover { background: var(--bg-hover); }
.crm-pc-tabs-menu { flex-direction: column; gap: 2px; min-width: 200px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); box-shadow: 0 12px 32px rgba(15,23,42,.16); }
.crm-pc-tabs-menu .crm-pc-tab { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 7px; border: none; background: none; font-size: .8rem; color: var(--text-primary); font-family: inherit; cursor: pointer; }
.crm-pc-tabs-menu .crm-pc-tab:hover { background: var(--bg-hover); }
.crm-pc-tabs-menu .crm-pc-tab.active { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-weight: 700; }
.crm-pc-tab-cnt { font-size: .68rem; color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.crm-pc-tab-cnt:empty { display: none; }
/* who's handling — teammates viewing / replying inside this card */
.crm-presence { display: none; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: .72rem; color: #92400e; background: #fef3c7; border: 1px solid #fde68a; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.crm-presence.on { display: inline-flex; }
.crm-presence.typing { color: #991b1b; background: #fee2e2; border-color: #fecaca; }
/* WhatsApp group row badge in the Leads table */
.lf-wa-grp { display: inline-block; margin-inline-start: 6px; padding: 1px 6px; border-radius: 999px; font-size: .64rem; font-weight: 700; color: #3730a3; background: #e0e7ff; white-space: nowrap; vertical-align: middle; }
/* Clamp by height, not -webkit-line-clamp: the -webkit-box layout (with pre-wrap) made drag-selection inside the row erratic — the first line could not be selected at all (2026-10-07). */
.crm-tl-text.crm-tl-clamp { max-height: 9em; overflow: hidden; position: relative; }
.crm-tl-text.crm-tl-clamp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.6em; background: linear-gradient(to bottom, transparent, var(--bg-hover)); pointer-events: none; }
.crm-tl-more { display: inline-block; margin-top: 4px; padding: 0; background: none; border: none; font: inherit; font-size: .72rem; font-weight: 600; color: var(--accent, #3f76ff); cursor: pointer; }
.crm-tl-more:hover { text-decoration: underline; }

/* ג”€ג”€ 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; }
.crm-db-card.stale { border-color: #f59e0b; box-shadow: inset 3px 0 0 #f59e0b; }
.crm-db-card.lost { opacity: .72; }
.crm-db-owner { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .6rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; letter-spacing: .02em; }
.crm-db-pri { display: inline-block; margin-left: 6px; width: 15px; height: 15px; border-radius: 50%; background: #fee2e2; color: #dc2626; font-size: .66rem; font-weight: 900; text-align: center; line-height: 15px; vertical-align: 1px; }
.crm-db-days { background: var(--bg-hover); border-radius: 20px; padding: 1px 7px; font-weight: 700; }
.crm-db-days.stale { background: #fef3c7; color: #b45309; }
.crm-db-filtbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 0 8px; }
/* Deals / Companies: the search box and the deal selects sit next to Filter (2026-10-08) */
.lf-quick-filters .crm-db-filt { height: 30px; border-radius: 7px; font-size: .76rem; font-weight: 500; padding: 0 9px; }
.lf-quick-filters .crm-db-filt.on { font-weight: 600; }
/* Task panel, HubSpot-style (2026-10-09, v2): compact 560px card — header
   "⋮⋮ Task ✕", borderless title line, Activity date + time, Priority /
   Assigned to, rich-text Notes with a toolbar (B I U More ▾ 🔗), the
   "Associated with" box with chips + a search line, Create / Cancel. */
.crm-task-ed { padding: 0; }
.crm-task-ed .crm-note-editor-header, .crm-task-ed .crm-note-editor-footer { display: none; }
.crm-task-hd { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--border); font-size: .92rem; font-weight: 800; color: var(--text-primary); background: var(--bg-elevated); border-radius: 12px 12px 0 0; }
.crm-task-grip { color: var(--text-muted); font-size: .8rem; letter-spacing: -2px; cursor: default; }
.crm-task-x { margin-left: auto; border: none; background: none; color: var(--text-muted); font-size: 1rem; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.crm-task-x:hover { background: var(--bg-hover); color: var(--text-primary); }
/* floating, draggable, minimisable (2026-10-09): no backdrop — the card stays readable */
.crm-task-float { position: fixed; inset: 0; pointer-events: none; z-index: 25000; }
.crm-task-min { margin-left: auto; border: none; background: none; color: var(--text-muted); font-size: .9rem; cursor: pointer; padding: 2px 7px; border-radius: 4px; line-height: 1; }
.crm-task-min:hover { background: var(--bg-hover); color: var(--text-primary); }
.crm-task-min + .crm-task-x { margin-left: 0; }
.crm-task-ed.min > :not(.crm-task-hd) { display: none !important; }
.crm-task-ed.min .crm-task-hd { border-bottom: none; cursor: default; }
.crm-task-ed.min #crmTaskEditorTitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.crm-task-floatbox:has(.crm-task-ed.min) { border-radius: 6px 6px 0 0; box-shadow: 0 -4px 24px rgba(16,24,40,.18); overflow: hidden; }
.crm-task-title { display: block; width: 100%; box-sizing: border-box; border: none; border-bottom: 1px solid var(--border); padding: 11px 18px 10px; font-size: .98rem; font-family: inherit; color: var(--text-primary); background: transparent; outline: none; border-radius: 0; }
.crm-task-title::placeholder { color: var(--text-muted); }
.crm-task-title:focus, .crm-task-ed .crm-task-title:focus { border: none !important; border-bottom: 1px solid var(--border) !important; box-shadow: inset 0 -2px 0 var(--accent) !important; outline: none !important; }
.crm-task-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; padding: 8px 18px 10px; }
.crm-task-grid:not(.crm-task-grid2) { grid-template-columns: 1fr; }
.crm-task-grid2 { border-top: 1px solid var(--border); padding-top: 10px; }
.crm-task-lbl { font-size: .7rem; color: var(--text-secondary); margin-bottom: 3px; }
.crm-task-val { display: flex; align-items: center; gap: 4px; min-height: 24px; flex-wrap: wrap; font-size: .9rem; font-weight: 700; color: var(--text-primary); }
.crm-task-dd { position: relative; display: inline-flex; align-items: center; }
.crm-task-dd::after { content: "▼"; font-size: .55rem; color: var(--text-secondary); margin-left: 5px; pointer-events: none; }
.crm-task-sel { -webkit-appearance: none; appearance: none; border: none; background: transparent; font: inherit; font-size: .9rem; font-weight: 700; color: var(--text-primary); padding: 2px 0; cursor: pointer; max-width: 100%; }
.crm-task-sel:focus { outline: none; box-shadow: 0 1px 0 var(--accent); }
.crm-task-date { border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; font: inherit; font-size: .8rem; color: var(--text-primary); background: var(--bg-card); margin-left: 6px; }
.crm-task-time-wrap { display: inline-flex; align-items: center; gap: 5px; margin-left: 14px; font-weight: 400; }
.crm-task-clock { font-size: .85rem; color: var(--text-secondary); }
.crm-task-time { border: none; background: transparent; font: inherit; font-size: .9rem; color: var(--text-primary); width: 54px; padding: 0; }
.crm-task-time::-webkit-calendar-picker-indicator { display: none; }
.crm-task-pridot { width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; display: inline-block; margin-right: 6px; }
.crm-task-notes { display: block; box-sizing: border-box; border: none; border-top: 1px solid var(--border); padding: 12px 18px; font: inherit; font-size: .88rem; line-height: 1.5; color: var(--text-primary); background: transparent; min-height: 150px; max-height: 320px; overflow: auto; outline: none; }
.crm-task-notes:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.crm-task-notes ul, .crm-task-notes ol { margin: 4px 0; padding-inline-start: 22px; }
.crm-task-notes a { color: var(--accent); }
.crm-task-bar { display: flex; align-items: center; gap: 4px; padding: 5px 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.crm-task-tb { border: none; background: none; font: inherit; font-size: .84rem; color: var(--text-secondary); cursor: pointer; padding: 3px 7px; border-radius: 4px; min-width: 28px; }
.crm-task-tb:hover { background: var(--bg-hover); color: var(--text-primary); }
.crm-task-tb b { font-family: Georgia, serif; }
.crm-task-more { margin-left: 4px; }
.crm-task-menu { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(16,24,40,.18); padding: 6px; min-width: 240px; max-height: 360px; overflow-y: auto; font-size: .82rem; color: var(--text-primary); }
.crm-task-mi { display: flex; align-items: center; gap: 10px; padding: 7px 10px; cursor: pointer; border-radius: 6px; font-weight: 600; }
.crm-task-mi.on { background: rgba(63,118,255,.08); color: var(--accent); }
.crm-task-mi:hover { background: var(--bg-hover); }
.crm-task-mi-ic { width: 18px; text-align: center; color: var(--text-secondary); font-size: .8rem; }
.crm-task-mi small { margin-left: auto; color: var(--text-muted); font-size: .68rem; }
.crm-task-mi-sep { border-top: 1px solid var(--border); margin: 4px 0; }
.crm-task-assoc { padding: 8px 18px 10px; }
.crm-task-assoc-box { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px 2px 10px; min-height: 38px; cursor: text; background: var(--bg-input); }
.crm-task-assoc-box::before { content: '⌕'; color: var(--text-muted); font-size: .9rem; margin: 0 0 4px; order: 5; }
.crm-task-assoc-box .crm-task-linkq { order: 6; }
.crm-task-assoc-box:focus-within { border-color: var(--accent); }
.crm-task-linkq { flex: 1; min-width: 180px; border: none; background: transparent; font: inherit; font-size: .82rem; color: var(--text-primary); outline: none; padding: 2px 0 6px; }
.crm-task-linkq::placeholder { color: var(--text-muted); }
.crm-task-ed .crm-task-linkq:focus { border: none !important; box-shadow: none !important; outline: none !important; }
/* The global field rules (input[type=text] / select: 44px tall, 100% wide, bordered, chevron
   background) reach into the panel — pin every field to the artboard's look. */
.crm-task-ed input[type="text"].crm-task-title { height: auto !important; width: 100% !important; padding: 11px 18px 10px !important; border: none !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-size: .98rem !important; }
.crm-task-ed input[type="text"].crm-task-title:focus { box-shadow: inset 0 -2px 0 var(--accent) !important; }
.crm-task-ed select.crm-task-sel { width: auto !important; height: auto !important; min-height: 0 !important; padding: 2px 0 !important; border: none !important; border-radius: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; line-height: 1.3 !important; font-size: .9rem !important; }
.crm-task-ed select.crm-task-sel:focus { box-shadow: 0 1px 0 var(--accent) !important; }
.crm-task-ed input[type="text"].crm-task-linkq { height: auto !important; width: auto !important; flex: 1; min-width: 180px; padding: 2px 0 6px !important; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-size: .82rem !important; }
.crm-task-ed input[type="time"].crm-task-time, .crm-task-ed input[type="date"].crm-task-date { height: auto !important; box-shadow: none !important; }
.crm-task-ed input[type="time"].crm-task-time { width: 54px !important; padding: 0 !important; border: none !important; background: transparent !important; }
.crm-task-ed .crm-task-val { min-height: 22px; }
.crm-task-ed .crm-task-lbl { margin-bottom: 1px; }
.hs-card-tasks .crm-pl-section-title { flex-wrap: wrap; }
.hs-card-tasks .crm-pl-section-title > span:first-of-type { white-space: nowrap; }
.crm-task-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); padding: 0 8px 0 2px; height: 24px; font-size: .76rem; font-weight: 600; color: var(--text-primary); margin: 0 0 4px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-task-chip--company { border-radius: 6px; }
.crm-task-chip--company .crm-task-chip-ic { border-radius: 4px; }
.crm-task-chip--deal { border-radius: 6px; background: #e6faf1; border-color: transparent; color: #118a5a; }
.crm-task-chip--deal .crm-task-chip-ic { border-radius: 4px; }
html.dark .crm-task-chip--deal { background: rgba(0,200,117,.16); color: #4ade80; }
.crm-task-chip button { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: .7rem; padding: 0 2px; }
.crm-task-chip button:hover { color: #dc2626; }
.crm-task-chip-ic { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; align-items: center; justify-content: center; font-size: .58rem; font-weight: 800; flex: none; }
.crm-task-chip-ic--company { border-radius: 4px; } .crm-task-chip-ic--deal { border-radius: 4px; }
.crm-task-pick { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: .8rem; cursor: pointer; }
.crm-task-pick.on { background: rgba(63,118,255,.07); }
.crm-task-pick input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.crm-task-pick-nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-task-pick small { margin-left: auto; color: var(--text-muted); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.crm-task-pick:hover { background: var(--bg-hover); }
.crm-task-pick-gh { font-size: .66rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .4px; padding: 8px 8px 2px; }
.crm-task-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 16px 12px; border-top: 1px solid var(--border); }
.crm-task-create { height: 32px; padding: 0 16px; border-radius: 7px; font-weight: 700; font-size: .82rem; background: var(--accent) !important; border: none; }
.crm-task-cancel { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); font: inherit; font-size: .82rem; font-weight: 600; height: 32px; padding: 0 14px; border-radius: 7px; cursor: pointer; }
.crm-task-cancel:hover { background: var(--bg-hover); }
/* Schedule meeting with the calendar beside the form (2026-10-09) */
.crm-meet-body { display: flex; min-height: 0; flex: 1; overflow: hidden; }
.crm-meet-form { width: 330px; flex: none; padding: 10px 16px 14px; border-right: 1px solid var(--border); overflow-y: auto; }
.crm-meet-when { display: flex; align-items: center; gap: 8px; border: 1px solid #0091ae; border-radius: 6px; padding: 7px 9px; font-size: .82rem; background: #e5f5f8; color: var(--text-primary); cursor: pointer; }
.crm-meet-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.crm-meet-slot { border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); padding: 4px 8px; font: inherit; font-size: .76rem; color: var(--text-primary); cursor: pointer; }
.crm-meet-slot:hover { border-color: #0091ae; }
.crm-meet-slot.on { border-color: #0091ae; background: #e5f5f8; color: #0091ae; font-weight: 700; }
.crm-meet-cal { flex: 1; min-width: 0; padding: 10px 12px 10px; overflow: auto; display: flex; flex-direction: column; }
.crm-meet-calhd { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--text-primary); margin-bottom: 6px; }
.crm-meet-calhd b { white-space: nowrap; }
.crm-meet-nav { border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); font: inherit; font-size: .8rem; padding: 1px 8px; cursor: pointer; color: var(--text-secondary); }
.crm-meet-nav:hover { border-color: #0091ae; color: var(--text-primary); }
.crm-meet-grid { display: flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; font-size: .68rem; background: var(--bg-card); }
.crm-meet-hcol { width: 44px; flex: none; }
.crm-meet-h { height: 34px; box-sizing: border-box; border-bottom: 1px solid var(--border); color: var(--text-muted); text-align: right; padding: 2px 4px 0 0; font-size: .62rem; }
.crm-meet-day { flex: 1; min-width: 0; border-left: 1px solid var(--border); }
.crm-meet-dh { height: 36px; box-sizing: border-box; padding: 4px 2px; text-align: center; border-bottom: 1px solid var(--border); font-weight: 700; color: var(--text-secondary); background: var(--bg-elevated); font-size: .7rem; line-height: 1.25; }
.crm-meet-dh.today { color: #0091ae; }
.crm-meet-dh small { display: block; font-weight: 400; color: var(--text-muted); }
.crm-meet-col { position: relative; cursor: pointer; }
.crm-meet-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); pointer-events: none; }
.crm-meet-line.half { border-top-style: dashed; opacity: .5; }
.crm-meet-ev { position: absolute; left: 2px; right: 2px; background: #eaf0f6; border-left: 3px solid #99acc2; border-radius: 3px; font-size: .62rem; color: var(--text-secondary); padding: 1px 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; cursor: default; }
.crm-meet-ev.mine { background: #e5f5f8; border-left-color: #0091ae; color: #0091ae; }
.crm-meet-free { position: absolute; left: 2px; right: 2px; border: 1px dashed #0091ae; border-radius: 3px; opacity: .45; pointer-events: none; box-sizing: border-box; }
.crm-meet-pick { position: absolute; left: 2px; right: 2px; background: #0091ae; color: #fff; border-radius: 3px; font-size: .62rem; font-weight: 700; padding: 1px 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-shadow: 0 2px 8px rgba(0,145,174,.35); pointer-events: none; box-sizing: border-box; }
.crm-meet-lg { display: flex; flex-wrap: wrap; gap: 12px; font-size: .68rem; color: var(--text-muted); margin-top: 6px; }
.crm-meet-lg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; box-sizing: border-box; }
html.dark .crm-meet-ev { background: #2a3442; border-left-color: #64748b; color: #cbd5e1; }
html.dark .crm-meet-when, html.dark .crm-meet-slot.on, html.dark .crm-meet-ev.mine { background: rgba(0,145,174,.18); }
@media (max-width: 860px) { .crm-meet-body { flex-direction: column; } .crm-meet-form { width: auto; border-right: none; border-bottom: 1px solid var(--border); } }
/* Notes tab as a chat (2026-10-10): the list scrolls, the composer is docked under it */
.crm-notes-list.crm-notes-chat { max-height: calc(100vh - 440px); min-height: 220px; overflow-y: auto; border-radius: 0; }
.crm-note-editor-wrap.docked { display: flex !important; margin: 0 16px; border: 1px solid var(--border); border-top: 1px dashed var(--border); border-radius: 0 0 4px 4px; background: var(--bg-card); padding: 10px 12px 10px; }
.crm-note-editor-wrap.docked .crm-note-editor-header { display: none; }
.crm-note-editor-wrap.docked .crm-note-cancel-btn:not([title]) { display: none; }
.crm-note-editor-wrap.docked .crm-note-textarea { min-height: 64px; }
.crm-note-editor-wrap.docked .crm-note-save-btn { border-radius: 4px; background: #0091ae; }
/* Log activity dialog (new card style) */
.crm-log-kinds { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 4px; }
.crm-log-kind { border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); padding: 5px 10px; font: inherit; font-size: .78rem; color: var(--text-primary); cursor: pointer; }
.crm-log-kind.on { border-color: #0091ae; background: #e5f5f8; color: #0091ae; font-weight: 700; }
.crm-task-ed .crm-task-date#crmLogWhen { font-size: .86rem; font-weight: 700; padding: 5px 8px; }
/* Properties · Contacts dialog (new card style) */
.crm-props-list { max-height: 46vh; overflow-y: auto; padding: 6px 18px; }
.crm-props-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.crm-props-type { font-size: .68rem; color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; }
.crm-props-del { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .8rem; padding: 2px 6px; border-radius: 4px; }
.crm-props-del:hover { color: #dc2626; background: var(--bg-hover); }
.crm-props-add { padding: 12px 18px 14px; border-top: 1px solid var(--border); }
.crm-task-ed .crm-props-in { height: 32px !important; border: 1px solid var(--border) !important; border-radius: 4px !important; padding: 0 10px !important; font: inherit; font-size: .82rem !important; background: var(--bg-card) !important; background-image: none !important; box-shadow: none !important; color: var(--text-primary); box-sizing: border-box; }
.crm-task-ed textarea.crm-props-in { height: auto !important; padding: 8px 10px !important; }
/* Lead score card: collapsible */
.lfsc-chev { border: none; background: none; color: var(--text-muted); font-size: .7rem; cursor: pointer; padding: 0 2px; transition: transform .12s; flex: none; }
#lfScoreBox > div:first-child > span:first-of-type { white-space: nowrap; }
.crm-task-ed textarea.crm-task-notes:focus { box-shadow: none !important; border-color: var(--border) !important; outline: none !important; }
#lfScoreBox.lfsc-collapsed .lfsc-chev { transform: rotate(-90deg); }
#lfScoreBox.lfsc-collapsed .lfsc-body { display: none; }
/* "Upcoming tasks" card on the record cards (2026-10-09) */
.hs-card-tasks { padding: 12px 16px 10px; }
.crm-up-add { margin-left: auto; border: none; background: none; color: var(--accent); font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.crm-up-add:hover { background: var(--bg-hover); }
.crm-up-row { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-top: 1px solid var(--border); font-size: .82rem; }
.crm-up-row:first-of-type { border-top: none; }
.crm-up-row .crm-task-check { margin-top: 3px; accent-color: var(--accent); }
.crm-up-body { flex: 1; min-width: 0; cursor: pointer; }
.crm-up-title { font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-up-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
.crm-up-pri { display: inline-flex; align-items: center; gap: 5px; }
.crm-up-pri i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.crm-up-due { font-size: .74rem; font-weight: 700; white-space: nowrap; color: var(--text-muted); margin-top: 1px; }
.crm-up-due.ok { color: var(--accent); }
.crm-up-due.late { color: #dc2626; }
.crm-up-empty { font-size: .78rem; color: var(--text-muted); padding: 6px 0 2px; }
.crm-up-foot { font-size: .74rem; color: var(--text-muted); padding: 8px 0 0; border-top: 1px solid var(--border); margin-top: 4px; }
.crm-up-foot a { color: var(--accent); font-weight: 700; text-decoration: none; }
/* Pipeline settings: collapsible sections */
details.crm-set-sec { border: 1px solid var(--border); border-radius: 8px; padding: 0 12px 4px; margin: 0 0 10px; }
details.crm-set-sec > summary { cursor: pointer; font-size: .8rem; font-weight: 700; color: var(--text-primary); padding: 9px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
details.crm-set-sec > summary::before { content: "▸"; font-size: .7rem; color: var(--text-muted); transition: transform .12s; }
details.crm-set-sec[open] > summary::before { transform: rotate(90deg); }
details.crm-set-sec > summary::-webkit-details-marker { display: none; }
.crm-db-filt { width: auto; flex: none; height: 26px; padding: 0 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-card); color: var(--text-secondary); font-size: .72rem; font-weight: 600; cursor: pointer; }
.crm-db-filt:hover { border-color: var(--accent); color: var(--text-primary); }
.crm-db-filt.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Deal card pipeline line: dots per stage, Won / Lost terminal nodes (2026-10-05) */
.crm-sp-wrap { position: relative; margin: 8px 0 2px; padding-top: 2px; }
.crm-sp-line { position: absolute; top: 9px; height: 2px; background: var(--border); border-radius: 2px; left: calc(100% / var(--sp-n) / 2); right: calc(100% / var(--sp-n) * 1.5); }
.crm-sp-line-fill { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .25s; }
.crm-sp-wrap.won .crm-sp-line-fill { background: #16a34a; }
.crm-sp-wrap.lost .crm-sp-line-fill { background: #b91c1c; opacity: .55; }
.crm-sp-nodes { position: relative; display: flex; height: 50px; }
.crm-sp-node { flex: 1 1 0; min-width: 0; position: relative; display: block; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; text-align: center; font: inherit; color: var(--text-muted); }
.crm-sp-dot { position: absolute; top: 1px; left: 50%; margin-left: -8px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--border); color: #fff; font-size: .56rem; font-weight: 900; line-height: 1; box-sizing: border-box; transition: transform .12s, border-color .12s, background .12s; }
.crm-sp-node:hover .crm-sp-dot { transform: scale(1.18); border-color: var(--accent); }
.crm-sp-node.done .crm-sp-dot { background: var(--accent); border-color: var(--accent); }
.crm-sp-node.on .crm-sp-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.crm-sp-wrap.won .crm-sp-node.done .crm-sp-dot { background: #16a34a; border-color: #16a34a; }
.crm-sp-wrap.lost .crm-sp-node.done .crm-sp-dot { background: #cbd5e1; border-color: #cbd5e1; }
.crm-sp-node.won .crm-sp-dot { border-color: #86efac; color: #16a34a; }
.crm-sp-node.won:hover .crm-sp-dot { border-color: #16a34a; }
.crm-sp-node.won.on .crm-sp-dot { background: #dcfce7; border-color: #16a34a; font-size: .62rem; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.crm-sp-node.lost .crm-sp-dot { border-color: #fecaca; color: #dc2626; }
.crm-sp-node.lost:hover .crm-sp-dot { border-color: #dc2626; }
.crm-sp-node.lost.on .crm-sp-dot { background: #dc2626; border-color: #dc2626; color: #fff; box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
.crm-sp-wrap.won .crm-sp-node.lost, .crm-sp-wrap.lost .crm-sp-node.won { opacity: .45; }
.crm-sp-l { position: absolute; top: 19px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .6rem; font-weight: 600; line-height: 1.2; max-width: 92px; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.1px; }
.crm-sp-node.r2 .crm-sp-l { top: 32px; }
.crm-sp-node:first-child .crm-sp-l { left: 0; transform: none; text-align: left; }
.crm-sp-node:last-child .crm-sp-l { left: auto; right: 0; transform: none; text-align: right; }
.crm-sp-node.on .crm-sp-l { color: var(--accent); font-weight: 800; }
.crm-sp-node.done .crm-sp-l { color: var(--text-secondary); }
.crm-sp-node.won .crm-sp-l { color: #16a34a; }
.crm-sp-node.lost .crm-sp-l { color: #dc2626; }
.crm-sp-node.won.on .crm-sp-l, .crm-sp-node.lost.on .crm-sp-l { font-weight: 800; }
.crm-sp-foot { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: .7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; }
.crm-sp-foot-st { overflow: hidden; text-overflow: ellipsis; }
.crm-sp-foot-st.stale { color: #d97706; }
.crm-sp-foot-st.won { color: #15803d; font-weight: 700; }
.crm-sp-foot-st.lost { color: #b91c1c; font-weight: 700; }
.crm-sp-reopen { flex: none; margin-left: auto; height: 20px; padding: 0 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text-secondary); font: inherit; font-size: .66rem; font-weight: 700; cursor: pointer; }
.crm-sp-reopen:hover { border-color: var(--accent); color: var(--text-primary); }
html.dark .crm-sp-wrap.lost .crm-sp-node.done .crm-sp-dot { background: #475569; border-color: #475569; }
html.dark .crm-sp-node.won.on .crm-sp-dot { background: #14532d; }
/* Mixed Hebrew/English names and subjects: each run keeps its own direction
   (the deal "Projects | ניהול הזמנות… | ניב קארו" rendered scrambled, 2026-10-05) */
.crm-pl-name, .crm-panel-topbar-title, .crm-tl-head b, .crm-tl-text, .hs-card-row, .hs-fact-row > b,
.crm-panel-left .crm-pl-field input, .crm-panel-left .crm-pl-field textarea, .crm-pl-sub { unicode-bidi: plaintext; }
/* Deal hero: Next step row under the pipeline line; Close Date "+30 days" nudge; WhatsApp next to a phone */
.crm-sp-next { display: flex; align-items: center; gap: 4px; margin: 2px 0 0; min-width: 0; }
.crm-sp-next-k { flex: none; font-size: .6rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); }
.crm-sp-next > input { flex: 1 1 0; min-width: 0; font-size: .78rem !important; padding: 3px 6px !important; }
.crm-sp-next > div { flex: none; padding: 0 !important; }
.hs-fact-warn { color: #dc2626; font-weight: 600; }
.crm-nodate { color: #dc2626; font-weight: 600; font-size: .72rem; }
/* Deal health (table pill + kanban dot) and e-mail opens in the timeline */
.crm-health { display: inline-block; min-width: 28px; text-align: center; padding: 1px 7px; border-radius: 999px; font-size: .7rem; font-weight: 800; }
.crm-health.ok { background: #dcfce7; color: #15803d; } .crm-health.warn { background: #fef3c7; color: #b45309; } .crm-health.bad { background: #fee2e2; color: #b91c1c; }
.crm-health-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; }
.crm-health-dot.ok { background: #16a34a; } .crm-health-dot.warn { background: #f59e0b; } .crm-health-dot.bad { background: #dc2626; }
html.dark .crm-health.ok { background: #14532d; color: #86efac; } html.dark .crm-health.warn { background: #451a03; color: #fcd34d; } html.dark .crm-health.bad { background: #450a0a; color: #fca5a5; }
.crm-tl-opens { margin-top: 4px; font-size: .7rem; color: #15803d; font-weight: 600; }
/* Kanban on phones: one column per screen, swipe between stages */
@media (max-width: 760px) {
  .crm-db-wrap { scroll-snap-type: x mandatory; gap: 8px; padding: 4px 8px 14px; }
  .crm-db-col { flex: 0 0 86vw; width: 86vw; scroll-snap-align: center; max-height: none; }
}
/* Record panel on phones (2026-10-05): the three columns stack — facts + pipeline
   line, then the activity, then associations — and the page scrolls as one. */
@media (max-width: 760px) {
  .crm-panel-body { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .crm-panel-left, .crm-panel-right { border: 0; border-bottom: 1px solid var(--border); padding: 16px 16px 14px; }
  .crm-panel-left { gap: 12px; }
  .crm-pl-hero { margin: -16px -16px 0; padding: 16px 16px 12px; }
  .crm-panel-center { overflow: visible; min-height: 50vh; }
  .crm-panel-center > * { overflow: visible !important; }
  .crm-pc-activity-bar { padding: 10px 12px 0; flex-wrap: wrap; }
  .crm-panel-topbar { padding: 0 10px; }
  .crm-panel-topbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .crm-sp-nodes { height: 52px; }
}
.hs-fact-sugg { flex: none; height: 18px; padding: 0 7px; margin-left: 2px; border: 1px solid #fecaca; border-radius: 999px; background: #fef2f2; color: #b91c1c; font: inherit; font-size: .64rem; font-weight: 700; cursor: pointer; line-height: 1; }
.hs-fact-sugg:hover { background: #fee2e2; }
html.dark .hs-fact-sugg { background: #3b1111; border-color: #7f1d1d; color: #fca5a5; }
.hs-wa { color: #25d366 !important; display: inline-flex; align-items: center; }
.hs-wa:hover { color: #128c7e !important; }
/* Deal Stage key fact: coloured dot + the stage name on ONE line */
.hs-fact-row > b { min-width: 0; }
.hs-fact-stagedot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; border: 0 !important; padding: 0; }
.hs-fact-stagedot.stage-chip-new { background: #1d4ed8; }
.hs-fact-stagedot.stage-chip-qualified { background: #15803d; }
.hs-fact-stagedot.stage-chip-proposal { background: #f59e0b; }
.hs-fact-stagedot.stage-chip-negotiation { background: #c2410c; }
.hs-fact-stagedot.stage-chip-closed-won { background: #16a34a; }
.hs-fact-stagedot.stage-chip-closed-lost { background: #dc2626; }
.hs-fact-stagedot.stage-chip-default { background: #94a3b8; }
/* Deal stats tiles (above board / table) + currency chip + table totals row */
/* Deals KPI strip (2026-10-10): two rows of four, full labels, no truncation */
.crm-ds-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 2px 0 12px 0; align-items: stretch; }
@media (max-width: 1100px) { .crm-ds-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.crm-ds-tile { min-width: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; }
.crm-ds-tile .crm-fc-k { font-size: .66rem; letter-spacing: .3px; white-space: normal; }
.crm-ds-tile .crm-fc-v { font-size: 1.02rem; }
.crm-ds-tile .crm-fc-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the currency chip now lives in the filter row beside ⚙ */
.lf-quick-filters .crm-ds-cur { flex-direction: row; gap: 4px; padding: 0 8px; border-style: solid; border-radius: 7px; height: 30px; }
.lf-quick-filters .crm-ds-cur > span { font-size: .9rem; }
.lf-quick-filters .crm-ds-cur select { font-size: .72rem; }
/* tighter quick filters so Filter · search · selects · group · ⚙ · Hide · Column fit one row */
.lf-quick-filters select.crm-db-filt { max-width: 150px; }
.lf-quick-filters #unifiedSearchInput { width: 190px !important; }
.crm-days-warn { color: #d97706; font-weight: 700; }
.crm-days-stale { color: #dc2626; font-weight: 700; }
.crm-ds-tile.clickable { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.crm-ds-tile.clickable:hover { border-color: var(--accent); box-shadow: 0 1px 4px rgba(63,118,255,.15); }
.crm-ds-tile.on { border-color: var(--accent); background: var(--accent-light, #eef3ff); }
.crm-ds-cur { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px dashed var(--border); border-radius: 10px; padding: 6px 6px; cursor: pointer; min-width: 54px; max-width: 72px; color: var(--text-muted); }
.crm-ds-cur > span { font-size: 1.1rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.crm-ds-cur select { font: inherit; font-size: .68rem; font-weight: 700; color: var(--text-muted); background: transparent; border: none; outline: none; cursor: pointer; text-align: center; }
.crm-money-cell { display: flex; align-items: center; gap: 2px; min-width: 0; }
.crm-money-sym { font-size: .78rem; color: var(--text-muted); flex-shrink: 0; padding-left: 4px; }
button.crm-money-sym-btn { border: 1px solid transparent; background: transparent; border-radius: 4px; padding: 0 4px; height: 20px; min-width: 18px; cursor: pointer; font: inherit; font-size: .78rem; color: var(--text-muted); }
button.crm-money-sym-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border); }
.crm-money-cell .crm-grid-inp { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.am-table tr.crm-grid-total td { position: sticky; bottom: 0; z-index: 2; background: var(--bg-page); border-top: 2px solid var(--border); height: auto; padding: 5px 6px; font-size: .78rem; }
.crm-total-cell { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.crm-total-cell b { font-size: .82rem; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-total-cell small { font-size: .66rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-table tr.crm-grid-total.nosticky td { position: static; background: var(--bg-hover); border-top: 1px solid var(--border); }
.lfg-card.crm-grand { margin-top: 6px; }
/* Full-height CRM grid: the pane is a flex column, the table wrap takes the rest and scrolls */
#leadsMainPane.crm-fill { display: flex; flex-direction: column; overflow: hidden !important; }
#leadsMainPane.crm-fill > * { flex-shrink: 0; }
#leadsMainPane.crm-fill > #leadsScrollWrap { flex: 1 1 auto; min-height: 0; max-height: none; margin: 0 14px 8px 0; }
/* Deal groups: drop targets + menu */
.crm-grp-over, tr.crm-grp-over td, .lfg-title.crm-grp-over .mnb-ghead { outline: 2px dashed var(--accent); outline-offset: -2px; background: #eef3ff; }
.crm-drop-title { padding: 8px 12px 4px; font-size: .68rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.crm-drop-item { display: flex; align-items: center; width: 100%; text-align: left; background: none; border: none; padding: 7px 12px; font: inherit; font-size: .8rem; color: var(--text-primary); cursor: pointer; }
.crm-drop-item:hover { background: var(--bg-hover); }
.crm-drop-item.on { font-weight: 700; color: var(--accent); }
.crm-drop-item.danger { color: #dc2626; }
.crm-grid .lf-row-drag { opacity: .35; }
.crm-grid tr:hover .lf-row-drag { opacity: .8; }
/* Row selection + bulk bar */
.crm-grid input.crm-sel { width: 14px; height: 14px; margin: 0 4px 0 0; vertical-align: middle; cursor: pointer; accent-color: var(--accent); }
.crm-bulk-bar--old { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 8px; background: var(--text-primary); color: #fff; padding: 8px 12px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: .8rem; white-space: nowrap; }
.crm-bulk-bar select, .crm-bulk-bar input { font: inherit; font-size: .76rem; border-radius: 7px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); color: #fff; padding: 4px 6px; outline: none; }
.crm-bulk-bar select option { color: #111; }
.crm-bulk-bar button { font: inherit; font-size: .76rem; border: none; border-radius: 7px; padding: 4px 9px; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; }
.crm-bulk-bar button:hover { background: rgba(255,255,255,.26); }
.crm-bulk-bar button.danger { background: #dc2626; }
/* Quick Won / Lost on row hover */
.crm-grid .crm-quick { opacity: 0; font-weight: 800; width: 22px; }
.crm-grid tr:hover .crm-quick { opacity: 1; }
.crm-grid .crm-quick.won { color: #16a34a; }
.crm-grid .crm-quick.lost { color: #dc2626; }
/* Owner chip */
.crm-owner-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.crm-owner-name { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-owner-empty { font-size: .74rem; color: var(--text-muted); border: 1px dashed var(--border); border-radius: 12px; padding: 2px 8px; }
/* Last activity / close-month tag / line-item mismatch */
.crm-act-stale { color: #dc2626; font-weight: 700; }
.crm-act-warn { color: #d97706; font-weight: 700; }
.crm-tag-month { display: inline-block; margin-left: 5px; font-size: .62rem; font-weight: 700; color: #2563eb; background: #dbeafe; border-radius: 10px; padding: 1px 6px; vertical-align: 1px; }
.crm-mismatch { color: #d97706; font-size: .8rem; cursor: help; flex-shrink: 0; }
.crm-stage-req { font-size: .66rem; border: 1px solid var(--border); background: var(--bg-card); border-radius: 8px; padding: 3px 6px; cursor: pointer; color: var(--text-muted); white-space: nowrap; }
.crm-stage-req.on { color: var(--accent); border-color: var(--accent); font-weight: 700; }
/* Forecast view */
.crm-fc-wrap { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 20px; }
.crm-fc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.crm-fc-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; }
.crm-fc-k { font-size: .68rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.crm-fc-v { font-size: 1.22rem; font-weight: 800; color: var(--text-primary); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-fc-s { font-size: .68rem; color: var(--text-muted); margin-top: 2px; }
.crm-fc-targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.crm-fc-target { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; }
.crm-fc-target-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .8rem; flex-wrap: wrap; }
.crm-fc-bar { height: 12px; border-radius: 20px; background: var(--bg-hover); overflow: hidden; display: flex; margin-top: 8px; }
.crm-fc-bar-won { background: #16a34a; }
.crm-fc-bar-proj { background: #86efac; }
.crm-fc-target-ft { display: flex; gap: 12px; font-size: .68rem; color: var(--text-muted); margin-top: 6px; align-items: center; }
.crm-fc-target-ft i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.crm-fc-hyg { display: flex; gap: 6px; flex-wrap: wrap; }
.crm-fc-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; min-width: 0; }
.crm-fc-card-hd { font-size: .8rem; font-weight: 800; color: var(--text-primary); margin-bottom: 8px; }
.crm-fc-two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
@media (max-width: 1100px) { .crm-fc-two { grid-template-columns: 1fr; } }
.crm-fc-table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.crm-fc-table th { text-align: left; font-size: .66rem; font-weight: 700; color: var(--text-muted); padding: 5px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.crm-fc-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.crm-fc-table tr.cur td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.crm-fc-table tfoot td { font-weight: 800; border-top: 2px solid var(--border); border-bottom: 0; }
.crm-fc-rowh { font-weight: 700; color: var(--text-primary); }
.crm-fc-cell small { display: block; font-size: .62rem; color: var(--text-muted); font-weight: 500; }
.crm-fc-cell.empty { color: var(--text-muted); }
.crm-fc-cell.tot { background: var(--bg-hover); }
.crm-fc-now { font-size: .58rem; background: var(--accent); color: #fff; border-radius: 20px; padding: 1px 6px; vertical-align: 1px; }
.crm-fn { display: flex; flex-direction: column; gap: 5px; }
.crm-fn-row { display: flex; align-items: center; gap: 8px; font-size: .74rem; }
.crm-fn-l { width: 110px; flex: none; color: var(--text-secondary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-fn-bar { flex: 1; height: 14px; background: var(--bg-hover); border-radius: 20px; overflow: hidden; }
.crm-fn-bar > div { height: 100%; border-radius: 20px; }
.crm-fn-n { width: 64px; flex: none; text-align: right; }
.crm-fn-n small { color: var(--text-muted); }
.crm-li-row { display: flex; align-items: center; gap: 8px; }
.crm-li-inp { width: 46px; height: 22px; padding: 0 4px; border: 1px solid var(--border); border-radius: 5px; font-size: .72rem; background: var(--bg-card); color: var(--text-primary); }
.crm-li-inp.wide { width: 70px; }
.crm-li-total { display: flex; justify-content: space-between; padding: 6px 4px 0; font-size: .78rem; color: var(--text-secondary); border-top: 1px dashed var(--border); margin-top: 4px; }
.crm-form-row { margin-bottom: 12px; }
.crm-form-row > label { display: block; font-size: .75rem; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.crm-form-row .crm-inline-input { box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: .85rem; background: var(--bg-card); color: var(--text-primary); }
/* select.crm-inline-input pins height:30px (inline table cells); with this row's 8px padding + border that left ~12px for the text and clipped it (Mark as lost → Lost reason, 2026-10-07). */
.crm-form-row select.crm-inline-input { height: auto; min-height: 38px; line-height: 1.3; }

/* ג”€ג”€ 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 ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ג”€ */
/* monday-style tags cell: chips inline, quiet hover, dim + when empty (the old
   dashed-circle .lf-tag-add inside this cell wrapped its "+ tag" text — gone) */
.lf-tagcell { display: flex; flex-wrap: nowrap; overflow: hidden; gap: 3px; align-items: center; cursor: pointer; min-height: 20px; padding: 1px 2px; border: 1px solid transparent; border-radius: 5px; }
.lf-tagcell:hover { background: var(--bg-hover); }
.lf-tagcell .lf-tag-add { border: none; width: auto; height: auto; border-radius: 4px; font-size: .78rem; color: var(--text-muted); padding: 0 4px; opacity: 1; }

/* ג”€ג”€ 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: .6rem; letter-spacing: .5px; }
.crm-pl-section-title { color: var(--hs-text); font-size: .7rem; 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); }

/* Log / Email / Call / Create Note are peer actions on the same bar, so they
   get ONE identical pill ג€” the solid-blue "Create Note" used to tower over the
   three outlined ones. Size, border, colour and icon weight all normalised. */
.crm-pc-actions .crm-pc-quick,
.crm-pc-actions .crm-create-note-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0; height: 30px; padding: 0 13px; box-sizing: border-box;
  border: 1px solid var(--hs-line-2); border-radius: 100px;
  background: var(--bg-card); color: var(--accent);
  font-family: inherit; font-size: .78rem; font-weight: 600; line-height: 1;
  white-space: nowrap; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
/* The Create-* buttons ship a 14px/2.5-stroke icon, the quick ones 13px/2 ג€”
   CSS beats the presentation attribute, so one rule settles both. */
.crm-pc-actions .crm-pc-quick svg,
.crm-pc-actions .crm-create-note-btn svg { width: 13px; height: 13px; flex: none; stroke-width: 2; }
.crm-pc-actions .crm-pc-quick:hover,
.crm-pc-actions .crm-create-note-btn:hover { background: #E6F1FB; color: #0C447C; border-color: #b9d6f2; }
html.dark .crm-pc-actions .crm-pc-quick:hover,
html.dark .crm-pc-actions .crm-create-note-btn:hover { background: #14304a; color: #B5D4F4; border-color: rgba(148,163,184,.35); }

/* 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: compact single-column list (the two-up grid is gone). */
.crm-panel-left .crm-pl-field { margin-bottom: 2px; }
.crm-pl-field-value { padding: 2px 7px; font-size: .76rem; }
.crm-panel-left .crm-pl-field input, .crm-panel-left .crm-pl-field select { font-size: .76rem !important; padding: 2px 7px !important; }
.crm-panel-left .crm-pl-field textarea { font-size: .76rem !important; }

/* Files section drop-zone (CRM contact panel, right sidebar) */
.crm-files-drop {
  border: 1.5px dashed var(--hs-line-2); border-radius: 8px; padding: 11px 10px;
  text-align: center; font-size: .72rem; font-weight: 600; color: var(--hs-text-2);
  cursor: pointer; margin: 2px 0 8px; user-select: none;
  transition: border-color .15s, background .15s, color .15s;
}
.crm-files-drop:hover, .crm-files-drop.over {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* 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-plus{-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%3E%3Cline%20x1%3D%2212%22%20y1%3D%225%22%20x2%3D%2212%22%20y2%3D%2219%22%2F%3E%3Cline%20x1%3D%225%22%20y1%3D%2212%22%20x2%3D%2219%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%3E%3Cline%20x1%3D%2212%22%20y1%3D%225%22%20x2%3D%2212%22%20y2%3D%2219%22%2F%3E%3Cline%20x1%3D%225%22%20y1%3D%2212%22%20x2%3D%2219%22%20y2%3D%2212%22%2F%3E%3C%2Fsvg%3E")}
.fvi-external{-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%22M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6%22%2F%3E%3Cpolyline%20points%3D%2215%203%2021%203%2021%209%22%2F%3E%3Cline%20x1%3D%2210%22%20y1%3D%2214%22%20x2%3D%2221%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%22M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6%22%2F%3E%3Cpolyline%20points%3D%2215%203%2021%203%2021%209%22%2F%3E%3Cline%20x1%3D%2210%22%20y1%3D%2214%22%20x2%3D%2221%22%20y2%3D%223%22%2F%3E%3C%2Fsvg%3E")}
.fvi-list{-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%228%22%20y1%3D%226%22%20x2%3D%2221%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%228%22%20y1%3D%2212%22%20x2%3D%2221%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%228%22%20y1%3D%2218%22%20x2%3D%2221%22%20y2%3D%2218%22%2F%3E%3Cline%20x1%3D%223%22%20y1%3D%226%22%20x2%3D%223.01%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%223%22%20y1%3D%2212%22%20x2%3D%223.01%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%223%22%20y1%3D%2218%22%20x2%3D%223.01%22%20y2%3D%2218%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%228%22%20y1%3D%226%22%20x2%3D%2221%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%228%22%20y1%3D%2212%22%20x2%3D%2221%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%228%22%20y1%3D%2218%22%20x2%3D%2221%22%20y2%3D%2218%22%2F%3E%3Cline%20x1%3D%223%22%20y1%3D%226%22%20x2%3D%223.01%22%20y2%3D%226%22%2F%3E%3Cline%20x1%3D%223%22%20y1%3D%2212%22%20x2%3D%223.01%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%223%22%20y1%3D%2218%22%20x2%3D%223.01%22%20y2%3D%2218%22%2F%3E%3C%2Fsvg%3E")}
.fvi-whatsapp{-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%22black%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%200%201%202.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200%200%2012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%200%200%205.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%200%200-3.48-8.413z%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%22black%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%200%201%202.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200%200%2012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%200%200%205.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%200%200-3.48-8.413z%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). */
#sectionOutreach select,
#outreachContainer select,
select.li-select {
  background: var(--bg-card) !important;
  color: var(--text-primary);
}
#sectionOutreach select option,
#outreachContainer 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 */
#sectionOutreach input[type="date"],
#outreachContainer input[type="date"] { color-scheme: light dark; }
html.dark #sectionOutreach input[type="date"],
html.dark #outreachContainer 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: var(--rail-w, 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; }
.ib-rail-q { padding: 0 8px 8px; }
.ib-rail-q input { width: 100%; box-sizing: border-box; font: inherit; font-size: .74rem; padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); }
.ib-rail-q input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px #d3e3fd66; }
.ib-acc-row.ib-acc-sub { padding-inline-start: 30px; }
.ib-xchan { font: inherit; font-size: .68rem; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-card); color: var(--text-secondary); padding: 0 6px; height: 24px; max-width: 170px; margin-inline-end: 6px; flex: none; }
.ib-snip-macro { font-style: normal; font-size: .62rem; font-weight: 800; color: #b45309; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 999px; padding: 1px 7px; margin-inline-start: 6px; vertical-align: middle; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.ib-nextbtn .ib-next-n { display: inline-flex; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: .62rem; align-items: center; justify-content: center; margin-inline-start: 4px; }
.ib-nextbtn.over .ib-next-n { background: #dc2626; }
.ib-tl-chans { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.ib-tl-chans span { font-size: .66rem; font-weight: 700; color: var(--text-secondary); background: var(--bg-hover); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; }
.ib-tl-it.ib-tl-link { cursor: pointer; border-radius: 8px; }
.ib-tl-it.ib-tl-link:hover { background: var(--bg-hover); }
.ib-tl-it.ib-tl-link .ib-tl-t { color: var(--accent); }
/* "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; }
/* Tools group (2026-10-12 redesign): Tasks & follow-ups, Reports, Workflows, AI agents */
.ib-tools-hd { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border); }
.ib-tool-row.on { color: var(--accent); background: #d3e3fd33; }
/* ▶ Next lives in the conversation-list summary row */
.ib-next-inline { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--accent); background: var(--bg-card); color: var(--accent); font-family: inherit; font-size: .68rem; font-weight: 800; cursor: pointer; margin-inline-end: 8px; flex: none; }
.ib-next-inline:hover { background: #d3e3fd33; }
.ib-next-inline.over { border-color: #dc2626; color: #dc2626; background: #dc262614; }
.ib-next-inline .ib-next-n { display: inline-flex; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--accent); color: #fff; font-size: .6rem; font-weight: 800; align-items: center; justify-content: center; }
.ib-next-inline.over .ib-next-n { background: #dc2626; }
.gm-bulkbar .ib-next-inline { margin-inline-start: auto; margin-inline-end: 0; }
/* Conversation-list toolbar + rows (mockup Main, 2026-10-12) */
.ib-filterbar.ib-fb2 { flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 8px; }
.ib-fb-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ib-fb2 .ib-seg button { padding: 5px 11px; font-size: .72rem; }
.ib-fb-search { position: relative; flex: 1; min-width: 150px; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-page); }
.ib-fb-search span { font-size: .7rem; opacity: .6; }
.ib-fb-search input { flex: 1; min-width: 0; border: none; background: transparent; font: inherit; font-size: .74rem; color: var(--text-primary); outline: none; }
.ib-fchip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 1px solid var(--border); border-radius: 13px; background: var(--bg-card); color: var(--text-secondary); font-family: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ib-fchip:hover { border-color: var(--accent); color: var(--accent); }
.ib-fchip.on { border-color: var(--accent); color: var(--accent); background: #d3e3fd55; }
.ib-fb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
.gmr-avw { position: relative; flex: none; margin-top: 2px; }
.gmr-avw .gmr-av { display: block; margin-top: 0; width: 34px; height: 34px; } /* display:block — an inline span ignores width/height, so a LinkedIn / Facebook photo rendered at its natural size (2026-10-13) */
.gmr-av.gmr-ini { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: .76rem; }
.gmr-ch { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 5px; border: 2px solid var(--bg-card); color: #fff; font-size: 7.5px; font-weight: 800; font-style: normal; display: flex; align-items: center; justify-content: center; line-height: 1; box-sizing: content-box; }
.gmr-3 { flex-wrap: wrap; row-gap: 3px; }
.gmr-tag { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 9px; font-size: .62rem; font-weight: 700; background: #fff7ed; color: #c2410c; white-space: nowrap; flex: none; }
.gmr-tag.new { background: #eaf0ff; color: #2f5fd9; }
.gmr-tag.won { background: #ecfdf5; color: #047857; }
.gmr-tag.lost { background: #fde8e8; color: #b91c1c; }
.gmr-tag.who { background: var(--bg-hover); color: var(--text-secondary); }
.gmr-tag.fu { background: #fef3c7; color: #92400e; }
.gmr-tag.fu.over { background: #fde8e8; color: #b91c1c; }
.gm-row.gmr.cur { background: #d3e3fd55; box-shadow: inset 3px 0 0 var(--accent); }
/* Contact panel follow-up card (mockup) */
.ib-fu-card { display: flex; align-items: center; gap: 6px; margin: 8px 0; padding: 7px 10px; border-radius: 10px; background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; font-size: .72rem; font-weight: 700; }
.ib-fu-card.over { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.ib-fu-card button { border: none; background: #fff8; color: inherit; border-radius: 100px; padding: 2px 8px; font-size: .68rem; font-weight: 800; cursor: pointer; font-family: inherit; white-space: nowrap; }
.ib-fu-card button:hover { background: #fff; }
/* ⚙ Inbox settings — one tabbed window (2026-10-12 redesign) */
.ib-set-modal { width: 860px; max-width: 96vw; height: min(680px, 92vh); max-height: 92vh; padding: 0; overflow: hidden; }
.ib-set-hd { padding: 14px 18px 12px; margin: 0; border-bottom: 1px solid var(--border); gap: 6px; }
.ib-set-hd small { font-weight: 500; color: var(--text-muted); font-size: .72rem; }
.ib-set-body { flex: 1; display: flex; min-height: 0; }
.ib-set-nav { flex: 0 0 220px; padding: 12px 10px; border-inline-end: 1px solid var(--border); background: var(--bg-page); display: flex; flex-direction: column; gap: 2px; }
.ib-set-tab { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; padding: 4px 12px; border: none; border-radius: 9px; background: transparent; color: var(--text-primary); font-family: inherit; font-size: .8rem; font-weight: 600; text-align: start; cursor: pointer; }
.ib-set-tab:hover { background: var(--bg-hover); }
.ib-set-tab.on { background: #d3e3fd55; color: var(--accent); font-weight: 800; }
.ib-set-tab small { display: block; font-size: .64rem; font-weight: 500; color: var(--text-muted); }
.ib-set-ic { width: 18px; text-align: center; flex: none; }
.ib-set-navfoot { margin-top: auto; padding: 10px 12px 2px; display: flex; flex-direction: column; gap: 6px; font-size: .68rem; }
.ib-set-navfoot a { color: var(--accent); text-decoration: none; }
.ib-set-pane { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 18px; }
@media (max-width: 760px) {
  .ib-set-modal { height: 92vh; }
  .ib-set-body { flex-direction: column; }
  .ib-set-nav { flex: none; flex-direction: row; flex-wrap: wrap; border-inline-end: none; border-bottom: 1px solid var(--border); padding: 8px; }
  .ib-set-tab { width: auto; min-height: 32px; }
  .ib-set-tab small, .ib-set-navfoot { display: 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; }

/* ג”€ג”€ respond.io-style Inbox layer ג”€ג”€ */
.ib-filterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ib-state-btn{flex:1;border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);border-radius:8px;padding:5px 4px;font-size:.68rem;font-weight:700;cursor:pointer}
.ib-state-btn.on{border-color:var(--accent);color:var(--accent);background:var(--bg-hover)}
.ib-note{border:1px solid var(--border);border-inline-start:3px solid #f59e0b;border-radius:8px;padding:6px 9px;background:var(--bg-hover)}
/* 2026-09-05 wave 5: inline notes, note mode, assign control, products grid */
.ib-note-bubble{align-self:stretch;max-width:100%;background:#fef3c7;color:#78350f;border:1px solid #fcd34d;border-radius:10px;padding:7px 11px;font-size:.78rem;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.ib-note-bubble .ib-note-hd{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#b45309;margin-bottom:2px}
.ib-note-bubble b{color:#92400e}
.ib-composer.ib-notemode{background:#fef3c7!important;border-color:#fcd34d!important}
.ib-composer.ib-notemode textarea{color:#78350f!important}
.ib-notebtn.on{background:#b45309!important;color:#fff!important;border-radius:9px}
.ib-assign{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--border);border-radius:7px;padding:0 3px 0 2px;height:24px;box-sizing:border-box;background:var(--bg-card)}
.ib-assign.on{border-color:var(--accent)}
.ib-assign-av{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#359BFF);color:#fff;font-size:.68rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ib-assign .ib-hdr-sel{border:none;background:transparent;padding:0 3px;height:20px;max-width:150px}
.ib-assign .ib-hdr-btn{padding:0 6px;height:18px;border-radius:5px}
.ib-prd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:6px;max-height:260px;overflow-y:auto;padding:2px}
.ib-prd{display:flex;flex-direction:column;gap:4px;border:1px solid var(--border);border-radius:10px;padding:6px;cursor:pointer;position:relative;background:var(--bg-card)}
.ib-prd.on{border-color:var(--accent);background:var(--bg-hover)}
.ib-prd input{position:absolute;top:6px;left:6px;accent-color:var(--accent)}
.ib-prd img{width:100%;height:70px;object-fit:cover;border-radius:7px}
.ib-prd-noimg{height:70px;display:flex;align-items:center;justify-content:center;font-size:26px;background:var(--bg-hover);border-radius:7px}
.ib-prd-nm{font-size:.7rem;font-weight:600;line-height:1.3;max-height:2.6em;overflow:hidden}
.ib-prd-pr{font-size:.66rem;color:var(--text-muted)}
/* 2026-09-05 wave 4: agent drill-down (response by hour, activity per day, outcomes, CSAT) */
.ib-agent{margin-top:12px;border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--bg-hover);font-size:.78rem}
.ib-agent-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
.ib-agent-h{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:6px}
.ib-agent-h span{font-weight:500;text-transform:none;letter-spacing:0}
.ib-hours{display:flex;gap:2px;align-items:flex-end;height:64px;border-bottom:1px solid var(--border);padding-bottom:14px;position:relative}
.ib-hour{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative}
.ib-hour-bar{width:100%;border-radius:2px 2px 0 0;min-height:2px}
.ib-hour span{position:absolute;bottom:-14px;font-size:.58rem;color:var(--text-muted)}
.ib-days{display:flex;gap:4px;align-items:flex-end;height:66px;border-bottom:1px solid var(--border);padding-bottom:14px}
.ib-day{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative}
.ib-day-bars{display:flex;gap:1px;align-items:flex-end;height:48px}
.ib-day-bars i{display:block;width:5px;background:var(--accent);border-radius:2px 2px 0 0;min-height:1px}
.ib-day span{position:absolute;bottom:-14px;font-size:.56rem;color:var(--text-muted);white-space:nowrap}
.ib-lg{display:inline-block;width:8px;height:8px;border-radius:2px;margin:0 2px 0 6px;vertical-align:-1px}
@media (max-width:760px){.ib-agent-grid{grid-template-columns:1fr}}
/* 2026-09-05 wave 3: reply suggestions, intent tag pills, routing modal */
.ib-sug{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:6px 12px 0}
.ib-sug-lbl{font-size:.72rem;color:var(--text-muted);flex:none}
.ib-sug-chip{border:1px solid var(--border);background:var(--bg-hover);color:var(--text-secondary);border-radius:100px;padding:4px 11px;font-size:.72rem;cursor:pointer;font-family:inherit;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}
.ib-sug-chip:hover{border-color:var(--accent);color:var(--accent)}
.ib-sug-x{border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:.7rem;margin-inline-start:auto}
.ib-tagpill{display:inline-block;border:1px solid var(--border);border-radius:100px;padding:0 6px;font-size:.6rem;font-weight:800;letter-spacing:.02em;vertical-align:1px;margin-inline-start:3px;text-transform:uppercase;line-height:1.5}
.ib-rule-card{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:11px;padding:10px 12px;margin-bottom:8px;background:var(--bg-card)}
.ib-rule-card.off{opacity:.55}
.ib-rule-desc{font-size:.74rem;color:var(--text-secondary);margin-top:2px}
.ib-rule-desc span{display:inline-block;width:38px;font-size:.62rem;font-weight:800;text-transform:uppercase;color:var(--text-muted)}
.ib-rf-sec{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin:12px 0 4px}
.ib-rf-row{display:grid;grid-template-columns:120px 1fr;gap:8px;align-items:center;margin:6px 0}
.ib-rf-row>span{font-size:.74rem;font-weight:700}
.ib-chip{display:inline-flex}
.ib-chip input{display:none}
.ib-chip span{border:1px solid var(--border);border-radius:100px;padding:3px 10px;font-size:.72rem;cursor:pointer;color:var(--text-secondary)}
.ib-chip input:checked+span{border-color:var(--accent);color:var(--accent);background:var(--bg-hover);font-weight:700}
.ib-switch{position:relative;display:inline-block;width:32px;height:18px;flex:none;margin-top:2px}
.ib-switch input{display:none}
.ib-switch span{position:absolute;inset:0;border-radius:9px;background:var(--border);cursor:pointer;transition:background .15s}
.ib-switch span::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s}
.ib-switch input:checked+span{background:#16a34a}
.ib-switch input:checked+span::after{transform:translateX(14px)}
/* 2026-09-04: Inbox "Tasks & follow-ups" = the Projects Tasks board embedded + reminder chips */
.ib-rem-strip{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border:1px solid var(--border);border-radius:11px;padding:7px 11px;margin-bottom:10px;background:var(--bg-card);font-size:.76rem}
.ib-rem-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:100px;padding:2px 8px;font-size:.7rem;font-weight:600}
.ib-rem-chip a{color:var(--text-secondary);text-decoration:none}
.ib-rem-chip.over{border-color:#dc262666;background:#dc262610}
.ib-rem-chip.over a{color:#dc2626}
.ib-rem-chip b{cursor:pointer;color:var(--text-muted);font-weight:400;font-size:.66rem}
.ib-rem-chip b:hover{color:var(--accent)}
.ib-tasks-host{border:1px solid var(--border);border-radius:14px;background:var(--bg-card);overflow:auto;min-height:420px;height:calc(100vh - 262px)}
.ib-tasks-host button[title="Back to projects"]{display:none!important} /* inline display:flex on the button — !important is the only way from CSS */
/* 2026-09-04 wave 2: full contact panel (quick actions, sections, matches, timeline), tasks pane */
.ib-qa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:6px}
.ib-qa{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);border-radius:9px;padding:6px 2px;font-size:.62rem;font-weight:700;cursor:pointer;font-family:inherit;line-height:1.1}
.ib-qa:hover{border-color:var(--accent);color:var(--accent)}
.ib-qa svg{width:14px;height:14px}
.ib-sec{padding:8px 0;border-bottom:1px solid var(--border)}
.ib-sec-hd{display:flex;align-items:center;font-size:.62rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.ib-sec-hd a{margin-inline-start:auto;text-transform:none;font-weight:600;color:var(--accent);text-decoration:none;letter-spacing:0}
.ib-kv{display:flex;flex-direction:column;gap:1px;padding:4px 0}
.ib-kv>span{font-size:.62rem;color:var(--text-muted);font-weight:600}
.ib-kv>b{font-size:.78rem;color:var(--text-secondary);font-weight:500;word-break:break-word}
.ib-match{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:100px;padding:2px 8px;font-size:.68rem;font-weight:700}
.ib-match a{color:var(--text-secondary);text-decoration:none}
.ib-match.on{border-color:var(--accent)}
.ib-match.on a{color:var(--accent)}
.ib-match b{cursor:pointer;color:var(--text-muted);font-weight:400}
.ib-match b:hover{color:#dc2626}
.ib-tl-tiles{display:flex;gap:4px;margin-bottom:6px}
.ib-tl-tiles span{flex:1;border:1px solid var(--border);border-radius:8px;padding:4px 6px;font-size:.62rem;color:var(--text-muted);text-align:center;line-height:1.3}
.ib-tl-tiles b{display:block;font-size:.84rem;color:var(--text-primary)}
.ib-tl-it{display:flex;gap:7px;padding:5px 0;border-bottom:1px dashed var(--border)}
.ib-tl-it:last-child{border-bottom:none}
.ib-tl-ic{flex:none;width:18px;text-align:center;font-size:.8rem}
.ib-tl-t{font-size:.74rem;font-weight:600;color:var(--text-primary)}
.ib-tl-b{font-size:.68rem;color:var(--text-secondary);word-break:break-word}
.ib-tl-ts{font-size:.62rem;color:var(--text-muted)}
.ib-task-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;align-items:start}
@media (max-width: 900px){.ib-task-cols{grid-template-columns:1fr}}
.ib-task-grp{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin:10px 0 4px}
.ib-task-grp.over{color:#dc2626}
.ib-task{display:flex;gap:9px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:8px 11px;margin-bottom:5px;background:var(--bg-card)}
.ib-task.over{border-inline-start:3px solid #dc2626}
.ib-task input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex:none}
.ib-task-t{font-size:.8rem;font-weight:600}
.ib-task-s{font-size:.68rem;color:var(--text-muted);margin-top:1px}
.ib-task-s a{color:var(--accent);text-decoration:none}
/* 2026-09-04: draggable column dividers (rail | list | thread | contact, email list | reading pane) */
.ib-split{flex:0 0 7px;align-self:stretch;cursor:col-resize;position:relative;z-index:2;touch-action:none}
.ib-split::after{content:'';position:absolute;top:8px;bottom:8px;left:2px;right:2px;border-radius:3px;background:transparent;transition:background .12s}
.ib-split:hover::after,.ib-split.on::after{background:var(--accent)}
.ib-split-rail{margin-inline-start:-4px;margin-inline-end:-3px}
@media (max-width: 900px){.ib-split{display:none}}
/* 2026-09-04 wave 1: SLA pill on rows, saved-view chips, rich-message tabs, mic */
.ib-sla{display:inline-block;margin-inline-end:6px;padding:0 6px;border-radius:20px;background:var(--bg-hover);color:var(--text-muted);font-size:.62rem;font-weight:800;vertical-align:1px;white-space:nowrap}
.ib-sla.over{background:#dc262618;color:#dc2626}
.ib-views{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:-4px 0 10px}
.ib-view-chip{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:3px 6px 3px 11px;font-size:.72rem;font-weight:700;cursor:pointer;max-width:240px}
.ib-view-chip:hover{border-color:var(--accent)}
.ib-view-chip.on{border-color:var(--accent);color:var(--accent);background:var(--bg-hover)}
.ib-view-chip b{font-weight:400;color:var(--text-muted);padding:0 4px;border-radius:50%;line-height:1}
.ib-view-chip b:hover{color:#dc2626;background:#dc262618}
.ib-view-add{border:1px dashed var(--border);background:none;color:var(--text-muted);border-radius:100px;padding:3px 11px;font-size:.72rem;font-weight:700;cursor:pointer;font-family:inherit}
.ib-view-add:hover{color:var(--accent);border-color:var(--accent)}
.ib-tabs{display:flex;gap:2px;background:var(--bg-hover);border-radius:10px;padding:3px;margin-bottom:10px}
.ib-tabs button{flex:1;border:none;background:transparent;color:var(--text-muted);border-radius:8px;padding:6px 10px;font-size:.76rem;font-weight:700;cursor:pointer;font-family:inherit}
.ib-tabs button.on{background:var(--bg-card);color:var(--text-primary);box-shadow:0 1px 3px rgba(0,0,0,.12)}
/* Rules & hours (2026-10-12 redesign): segments + New rule on top, rule rows, section headings */
.ib-rh-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ib-seg { display: inline-flex; gap: 2px; background: var(--bg-hover); border-radius: 10px; padding: 3px; }
.ib-seg button { border: none; background: transparent; color: var(--text-muted); border-radius: 8px; padding: 6px 12px; font-size: .76rem; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; }
.ib-seg button.on { background: var(--bg-card); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.ib-rh-h3 { margin: 0 0 8px; font-size: .8rem; font-weight: 800; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ib-rh-h3 small { font-size: .68rem; font-weight: 500; color: var(--text-muted); }
.ib-rl-list { display: flex; flex-direction: column; gap: 6px; }
.ib-rl-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); }
.ib-rl-row.off { opacity: .6; }
.ib-rl-row .ib-switch { margin-top: 0; }
.ib-rl-row .t { min-width: 0; font-size: .78rem; font-weight: 700; cursor: pointer; }
.ib-rl-row .t small { display: block; font-weight: 500; color: var(--text-muted); font-size: .7rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-rl-row .t small b { color: var(--text-primary); font-weight: 700; }
.ib-rl-row .n { font-size: .66rem; color: var(--text-muted); white-space: nowrap; text-align: end; }
.ib-rl-acts { display: inline-flex; gap: 2px; }
.ib-tabpane{display:flex;flex-direction:column;gap:8px;font-size:.8rem}
/* Rich WhatsApp message modal: single-line fields and selects are chip-height (27px), like the Inbox filter bar; textareas keep their size. */
#waRichOv input.email-input{height:27px;padding:0 9px;font-size:.72rem}
#waRichOv select.email-input{height:27px;padding:0 24px 0 8px;font-size:.72rem;background-size:14px;background-position:right 6px center}
.ib-tabpane[hidden]{display:none} /* author display:flex would otherwise beat the UA [hidden] rule */
.ib-prev{border:1px solid var(--border);border-radius:12px 12px 12px 4px;background:var(--bg-hover);padding:9px 12px;font-size:.8rem;white-space:pre-wrap;line-height:1.45;max-height:180px;overflow-y:auto}
.ib-prev .ib-prev-btn{display:block;text-align:center;margin-top:6px;padding:5px;border-top:1px solid var(--border);color:var(--accent);font-weight:700}
.ib-mic.ib-rec{color:#fff!important;background:#dc2626!important;font-size:.72rem!important;font-weight:800;padding:6px 10px!important;animation:ibRecPulse 1s ease-in-out infinite}
@keyframes ibRecPulse{0%,100%{opacity:1}50%{opacity:.6}}
/* 2026-09-04 respond.io parity: conversation header tools, snippets / AI-assist
   popovers, AI summary card, keyboard focus ring, shortcuts table */
.gm-row.gm-kb{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
.ib-hdr-tools{display:flex;gap:5px;align-items:center;margin-inline-start:auto;flex:0 1 auto;min-width:0;flex-wrap:wrap;justify-content:flex-end}
.ib-hdr-sel{border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);border-radius:7px;padding:0 6px;height:24px;box-sizing:border-box;font-size:.7rem;font-family:inherit;max-width:140px}
.ib-hdr-btn{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);border-radius:7px;padding:0 8px;height:24px;box-sizing:border-box;font-size:.7rem;font-weight:700;line-height:1;cursor:pointer;font-family:inherit;white-space:nowrap}
.ib-hdr-btn svg{width:13px;height:13px;flex:none}
.ib-hdr-btn:hover{border-color:var(--accent);color:var(--accent)}
.ib-hdr-btn.ib-hdr-close{border-color:#16a34a;color:#16a34a}
.ib-hdr-btn.ib-hdr-close:hover{background:#16a34a14}
.ib-snip-pop{position:fixed;z-index:9999;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 34px rgba(0,0,0,.16);padding:6px;width:335px;max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.ib-snip-hd{display:flex;align-items:center;gap:7px;font-size:.72rem;font-weight:800;padding:5px 8px 6px;color:var(--text-secondary)}
.ib-snip-hd span{font-weight:400;color:var(--text-muted)}
.ib-snip-hd a{margin-inline-start:auto;color:var(--accent);text-decoration:none;font-weight:600}
.ib-snip-it{display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:none;background:none;text-align:start;padding:6px 9px;border-radius:9px;cursor:pointer;font-family:inherit;color:var(--text-primary);width:100%}
.ib-snip-it:hover,.ib-snip-it.first{background:var(--bg-hover)}
.ib-snip-it b{font-size:.78rem}
.ib-snip-it code{font-size:.66rem;color:var(--accent);margin-inline-start:6px;font-weight:600}
.ib-snip-it span{font-size:.7rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ib-snip-none{font-size:.74rem;color:var(--text-muted);padding:10px 9px}
.ib-snip-row{display:flex;gap:8px;align-items:flex-start;padding:8px 4px;border-bottom:1px solid var(--border)}
/* Saved replies — two panes (2026-10-12 redesign): list | editor */
.ib-sn-wrap { display: flex; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; min-height: 460px; background: var(--bg-card); }
.ib-sn-list { flex: 0 0 280px; border-inline-end: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; background: var(--bg-page); }
.ib-sn-tools { display: flex; gap: 6px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.ib-sn-tools input { flex: 1; min-width: 0; height: 30px; font-size: .74rem; }
.ib-sn-rows { flex: 1; min-height: 0; max-height: 520px; overflow-y: auto; }
.ib-sn-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: .78rem; cursor: pointer; }
.ib-sn-row:hover { background: var(--bg-hover); }
.ib-sn-row.cur { background: #d3e3fd55; box-shadow: inset 3px 0 0 var(--accent); }
.ib-sn-row code { font-family: ui-monospace, Menlo, monospace; font-size: .7rem; font-weight: 700; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-sn-row .t { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; }
.ib-sn-row .t small { display: block; font-weight: 500; color: var(--text-muted); font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-sn-row .n { font-size: .66rem; color: var(--text-muted); white-space: nowrap; }
.ib-sn-mac { font-style: normal; display: inline-flex; height: 15px; padding: 0 5px; border-radius: 8px; background: #f5f3ff; color: #6d28d9; font-size: .58rem; font-weight: 800; align-items: center; margin-inline-start: 5px; vertical-align: middle; }
.ib-sn-foot { padding: 8px 12px; font-size: .66rem; color: var(--text-muted); border-top: 1px solid var(--border); }
.ib-sn-editor { flex: 1; min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.ib-sn-fld { display: flex; flex-direction: column; gap: 4px; font-size: .72rem; font-weight: 700; color: var(--text-muted); }
.ib-sn-fld > small { order: 2; font-size: .64rem; font-weight: 500; color: var(--text-muted); }
.ib-sn-fld .email-input { font-weight: 500; }
.ib-sn-fld textarea { unicode-bidi: plaintext; line-height: 1.45; }
.ib-sn-vars { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; font-size: .7rem; font-weight: 700; color: var(--text-muted); }
.ib-sn-var { height: 24px; padding: 0 8px; border: none; border-radius: 12px; background: var(--bg-hover); font-size: .68rem; font-weight: 700; color: var(--text-primary); font-family: ui-monospace, Menlo, monospace; cursor: pointer; }
.ib-sn-var:hover { background: #d3e3fd55; color: var(--accent); }
.ib-sn-chans { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.ib-sn-chan { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 1px solid var(--border); border-radius: 14px; font-size: .72rem; font-weight: 600; color: var(--text-primary); background: var(--bg-card); cursor: pointer; }
.ib-sn-chan:has(input:checked) { border-color: var(--accent); background: #d3e3fd55; color: var(--accent); }
.ib-sn-chan input { margin: 0; }
.ib-sn-steps { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.ib-sn-steps label { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); font-size: .74rem; font-weight: 500; color: var(--text-primary); }
.ib-sn-steps .k { font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); width: 44px; flex: none; }
.ib-sn-steps .email-input { flex: 1; min-width: 0; height: 28px; padding: 0 8px; font-size: .74rem; margin-inline-start: auto; max-width: 60%; }
.ib-sn-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-size: .68rem; color: var(--text-muted); }
.ib-sn-actions span { flex: 1; }
@media (max-width: 760px) { .ib-sn-wrap { flex-direction: column; } .ib-sn-list { flex: none; border-inline-end: none; border-bottom: 1px solid var(--border); } .ib-sn-rows { max-height: 220px; } }
.ib-sum{margin:10px 14px 0;border:1px solid var(--border);border-inline-start:3px solid #8b5cf6;border-radius:10px;padding:8px 11px;background:var(--bg-hover);font-size:.78rem;line-height:1.5;flex:none}
.ib-sum-hd{display:flex;align-items:center;gap:6px;font-weight:800;font-size:.7rem;color:#8b5cf6;margin-bottom:4px}
.ib-sum-hd button{margin-inline-start:auto;border:none;background:none;cursor:pointer;color:var(--text-muted);font-size:.8rem}
.ib-kbd{display:inline-block;border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-size:.72rem;background:var(--bg-hover);font-family:inherit}

/* ג”€ג”€ 2026-09-01 wave: monday-parity polish (Leads restyle + new Projects bits) ג”€ג”€ */
/* Time-tracking cell button (ג–¶/ג¸ + running h:mm). */
.mnb-ttbtn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); border-radius: 6px; height: 22px; padding: 0 8px; font-size: .72rem; font-weight: 600; cursor: pointer; }
.mnb-ttbtn:hover { border-color: var(--accent); color: var(--accent); }
.mnb-ttbtn.run { border-color: #e2445c; color: #e2445c; background: color-mix(in srgb, #e2445c 8%, transparent); }

/* Kanban card extra fields (view cfg.cardFields). */
.mnbk-fields { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 6px; }
.mnbk-field { display: flex; align-items: center; gap: 6px; font-size: .7rem; color: var(--text-secondary); min-width: 0; }
.mnbk-field .mnb-tag { font-size: .62rem; padding: 1px 7px; border-radius: 3px; }
.mnbk-fname { color: var(--text-muted); font-size: .64rem; flex-shrink: 0; min-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Leads kanban cards ride .mnbk-card now ג€” keep drag affordance. */
.ukanban-card.mnbk-card { padding: 10px; }
.ukanban-card.mnbk-card[draggable="true"] { cursor: grab; }

/* Leads stat tiles ג†’ flat monday tiles (no lift/purple glow on the minis). */
.lf-stat-card--mini { border-radius: 8px; }
.lf-stat-card--mini:hover { transform: none; box-shadow: none; border-color: var(--accent); }
.lf-stat-card--mini::before { display: none; }

/* CRM tab pills ג†’ monday underline tabs (same control as .mnb-tabs). */
.crm-tab-bar { background: transparent; border-radius: 0; padding: 0; gap: 2px; border-bottom: 1px solid var(--border); width: 100%; margin-bottom: 14px; }
.crm-tab-btn { border-radius: 6px 6px 0 0; border-bottom: 2px solid transparent; padding: 7px 12px; color: var(--text-secondary); }
.crm-tab-btn:hover { background: var(--bg-hover); }
.crm-tab-btn.active { background: transparent; box-shadow: none; color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }


/* Compact fix: the app-wide input[type="text"]/select chrome (44px, 1089) must
   not leak into the monday table or its popovers — numbers cells write
   type="text" for inputmode and were inflating every row to 45px. */
.mnb-cell input[type="text"], .mnb-cell input[type="tel"], .mnb-cell input[type="email"] { height: 22px; padding: 2px 5px; background: transparent; border: 1px solid transparent; border-radius: 5px; font-size: .76rem; direction: inherit; transition: none; }
.mnb-cell input[type="text"]:hover, .mnb-cell input[type="tel"]:hover, .mnb-cell input[type="email"]:hover { border-color: var(--border); }
.mnb-cell input[type="text"]:focus, .mnb-cell input[type="tel"]:focus, .mnb-cell input[type="email"]:focus { border-color: var(--accent); background: var(--bg-card); }
select.mnb-pop-input, input.mnb-pop-input[type="text"] { height: 32px; padding: 0 9px; background: var(--bg-card); font-size: .78rem; direction: inherit; }
.mnb-addgroup { white-space: nowrap; }
/* Clean table: empty Timeline shows no gray pill (colored pill only when a
   range is set — the renderer inlines the background then). Hover hints. */
.mnb-tl { background: transparent; }
.mnb-cell--click:hover .mnb-tl { background: var(--bg-hover); }


/* ── Optimizer drawers: COMPACT density (Google / Meta / DV360 share these) ──
   Tighter paddings, smaller type, denser cards — the drawers list 15-45 cards
   and the old spacing needed a screen per 5 of them. */
.am-opt-header { padding: 10px 16px; }
.am-opt-header-icon { width: 30px; height: 30px; }
.am-opt-title { font-size: 14px; }
.am-opt-subtitle { font-size: 11px; }
.am-opt-hist-btn { padding: 4px 9px; font-size: 11px; }
.am-opt-body { padding: 10px 14px 18px; }
.am-opt-section-title { font-size: 10.5px; margin-bottom: 6px; margin-top: 12px; }
.am-opt-card { margin-bottom: 6px; border-radius: 10px; }
.am-opt-card-head { padding: 7px 10px; gap: 8px; }
.am-opt-card-icon-wrap { width: 26px; height: 26px; }
.am-opt-card-info { gap: 1px; }
.am-opt-card-title { font-size: 12.5px; }
.am-opt-card-title-row { gap: 5px; }
.am-opt-sev-badge { font-size: 9px; padding: 1px 6px; }
.gads-conf-badge { font-size: 9.5px; }
.am-opt-card-detail { padding: 0 12px 10px 44px; }
.am-opt-detail-text { font-size: 12px; line-height: 1.45; margin-top: 4px; }
.gads-opt-delta { font-size: 12px; margin-bottom: 5px; line-height: 1.4; }
.am-opt-apply-row { margin-top: 6px; gap: 6px; }
.am-opt-apply-btn { padding: 5px 11px; font-size: 11.5px; }
.am-opt-manual-note { font-size: 11px; }
.am-opt-entity-table { font-size: 11.5px; }
.am-opt-entity-table tbody td { padding: 4px 6px; }
.am-opt-entity-table thead th { padding: 3px 6px; font-size: 10px; }
.am-opt-entity-table-wrap { margin: 6px 0 2px; }
.am-rec-bd-name, .am-rec-bd-act { padding-top: 3px; padding-bottom: 3px; }
.am-opt-card .am-opt-card-detail p { margin: 4px 0 6px; }
.gads-opt-card .am-opt-card-detail { padding-left: 40px; }

/* ── PWA install nudge (sidebar footer, _app.html #fvPwaInstall) ──────────────
   Shown only while the browser holds a deferred beforeinstallprompt and the
   app is not already running standalone; dismiss is remembered (app.js
   fvPwa*). Hidden in the collapsed rail — there is no room for the label. */
.fv-pwa-install { display: flex; align-items: center; gap: 4px; margin: 0 0 6px; }
.fv-pwa-install[hidden] { display: none; }
.fv-pwa-install-btn { flex: 1; min-width: 0; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); border-radius: 8px; padding: 8px 10px; font-size: .78rem; font-weight: 700; cursor: pointer; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: inherit; }
.fv-pwa-install-btn:hover { border-color: var(--accent); color: var(--accent); }
.fv-pwa-install-x { flex: none; border: none; background: none; color: var(--text-muted); cursor: pointer; padding: 6px 7px; border-radius: 6px; font-size: .75rem; line-height: 1; }
.fv-pwa-install-x:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar.collapsed .fv-pwa-install { display: none; }

/* ── Phone pass ≤420px: Leads board + Inbox (the two screens a rep works from
   a phone). Only what was clearly broken at that width — overflow, unreachable
   controls, sub-32px tap targets. The 768px blocks above still apply. ──── */
@media (hover: none) {
  /* Call / SMS / WhatsApp on a lead's phone number only appeared on row :hover —
     on a touchscreen there is no hover, so they were invisible AND unreachable. */
  .lf-phone-actions { position: static; transform: none; padding-left: 0; background: none; opacity: 1; pointer-events: auto; }
}
@media (max-width: 420px) {
  .section { padding: 10px 8px; }
  /* Leads */
  .lf-crm-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .lf-stat-card { padding: 12px 14px; }
  .lf-stat-value { font-size: 1.15rem; }
  .lf-phone-act { width: 32px; height: 32px; }
  .lf-phone-actions { gap: 6px; }
  .lf-vt-btn { padding: 8px 12px; min-height: 36px; }
  .leads-tbl-wrap { max-height: calc(100vh - 200px); }
  .leads-tbl-wrap .am-table td .lf-cell-select, .leads-tbl-wrap .am-table td select { height: 30px; }
  .leads-tbl-wrap .am-table td .lf-cell-inp { height: 30px; }
  .leads-tbl-wrap input[type="checkbox"], .gm-row-chk { width: 18px; height: 18px; }
  .mnb-wrap { padding: 8px 8px 40px; }
  .mnb-tabs { padding: 6px 8px 0; }
  .crm-tab-btn { padding: 9px 10px; }
  .lf-side-panel { width: 100vw !important; max-width: 100vw !important; }
  #leadsMainPane { padding: 0 !important; }
  /* Inbox */
  .gm-shell { height: auto; min-height: 0; }
  .gm-main { padding: 10px 8px; }
  .gm-row { min-height: 44px; }
  .gm-row-from { width: 96px; }
  .ib-shell .ib-rail { max-height: 160px; }
  /* Conversation view is an inline-styled row: 280px list + thread + 224px
     contact card — three panes in 375px. Stack them; the list keeps a short
     scroll of its own and the thread gets the screen. */
  .ib-shell .gm-main div:has(> .gm-compact) { flex-direction: column; height: auto !important; min-height: 0 !important; }
  .ib-shell .gm-main .gm-compact { flex: 0 0 auto !important; max-width: 100% !important; max-height: 30vh; }
  .ib-shell .gm-main .gm-compact ~ div { min-height: 55vh; }
  .ib-info { flex: 0 0 auto !important; max-height: 34vh; }
  .ib-info-strip { flex: 0 0 auto !important; flex-direction: row; min-height: 30px; }
  .ib-info-vert { writing-mode: horizontal-tb; }
  .gm-compose { right: 0; width: 100vw; border-radius: 0; }
  #gmReplyText { min-height: 40px; }
  .gm-qt-btn { min-height: 34px; padding: 0 10px; }
  .ib-state-btn { min-height: 34px; }
  .um-save-btn, .proj-primary-btn, .proj-secondary-btn, .btn-secondary { min-height: 38px; }
}

/* ── Profile menu (sidebar avatar popover) + phone-install sheet ── */
.fvpm { position: fixed; z-index: 9600; width: 292px; max-height: 82vh; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.2); padding: 8px; text-align: start; }
.fvpm-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.fvpm-av { width: 36px; height: 36px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.fvpm-name { font-weight: 700; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fvpm-mail { font-size: .72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fvpm-role { margin-inline-start: auto; font-size: .64rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.fvpm-sec { font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); padding: 8px 10px 3px; }
.fvpm-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--text-primary); }
.fvpm-item:hover { background: var(--bg-hover); }
.fvpm-ic { width: 22px; text-align: center; flex: none; font-size: 15px; }
.fvpm-lab { display: flex; flex-direction: column; min-width: 0; }
.fvpm-lab small { font-size: .68rem; font-weight: 400; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fvpm-trust { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 10px 8px; }
.fvpm-trust a { font-size: .72rem; color: var(--text-secondary); text-decoration: none; border: 1px solid var(--border); border-radius: 100px; padding: 2px 10px; }
.fvpm-trust a:hover { border-color: var(--accent); color: var(--accent); }
.fvpm-out { border-top: 1px solid var(--border); margin-top: 4px; border-radius: 0 0 9px 9px; color: var(--text-secondary); }
.fvinst-grid { display: flex; gap: 22px; align-items: center; padding: 10px 4px; flex-wrap: wrap; }
.fvinst-qr { width: 196px; height: 196px; flex: none; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 8px; display: flex; align-items: center; justify-content: center; font-size: .78rem; color: #374151; text-align: center; }
.fvinst-qr img, .fvinst-qr canvas { display: block; }
.fvinst-steps { flex: 1; min-width: 220px; font-size: .88rem; line-height: 1.6; }
.fvinst-steps ol { margin: 0; padding-inline-start: 20px; }
.fvinst-steps li { margin-bottom: 6px; }
.fvinst-here { padding: 8px 4px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fvinst-ok { font-weight: 700; color: #085041; background: #E1F5EE; padding: 6px 14px; border-radius: 100px; font-size: .82rem; }
.fvinst-hint { font-size: .82rem; color: var(--text-secondary); }
.fvinst-url { padding: 4px 4px 2px; font-size: .74rem; color: var(--text-muted); direction: ltr; text-align: left; }

/* ── Optimization Insights drawer — compact density (2026-09-04) ──────────────
   The drawer is a working panel next to the table, not a landing page: one
   screen should show the ad-set overview AND several findings. Overrides the
   base rules above (same specificity, later in the file wins). */
.am-opt-header { padding: 9px 14px; gap: 8px; }
.am-opt-header-left { gap: 9px; min-width: 0; }
.am-opt-header-left > div:last-child { min-width: 0; }
.am-opt-header-icon { width: 28px; height: 28px; border-radius: 7px; }
.am-opt-header-icon svg { width: 16px; height: 16px; }
.am-opt-title { font-size: 13.5px; line-height: 1.2; }
.am-opt-subtitle { margin-top: 2px; font-size: 11px; padding: 1px 7px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
.am-opt-subtitle svg { vertical-align: -1px; margin-right: 3px; }
.am-opt-daterange { margin: 2px 0 0 4px; font-size: 10.5px; padding: 1px 7px; vertical-align: middle; }
.am-opt-header-actions { gap: 5px; }
.am-opt-hist-btn { padding: 4px 9px; font-size: 11.5px; border-radius: 6px; gap: 4px; }
.am-opt-close { width: 26px; height: 26px; font-size: 15px; }
.am-opt-body { padding: 10px 14px 16px; }
.am-opt-summary { gap: 4px; margin-bottom: 8px; }
.am-opt-summary-chip { padding: 3px 8px; font-size: 11px; border-radius: 6px; gap: 5px; }
.am-opt-affected { padding: 7px 10px; margin-bottom: 8px; border-radius: 8px; }
.am-opt-affected-title { margin-bottom: 5px; }
.am-opt-section-title { font-size: 10.5px; margin-bottom: 5px; }
.am-opt-section-desc { font-size: 11.5px; margin: 0 0 8px; line-height: 1.45; }
.am-opt-lq-empty { font-size: 11.5px; padding: 7px 10px; margin-bottom: 8px; line-height: 1.45; }
.am-opt-card { margin-bottom: 5px; border-radius: 8px; }
.am-opt-card-head { padding: 7px 10px; gap: 7px; }
.am-opt-card-title { font-size: 12.5px; line-height: 1.3; }
.am-opt-card-detail { padding: 0 10px 9px; }
.am-opt-card.expanded .am-opt-card-detail { padding-top: 7px; }
.am-opt-detail-text { font-size: 11.5px; margin: 0 0 6px; line-height: 1.45; }
.am-opt-why { font-size: 11.5px; padding: 6px 10px; margin-bottom: 7px; line-height: 1.45; }
.am-opt-toggle { padding: 3px; }
.am-opt-chart-section { margin: 6px 0; padding: 7px 9px; border-radius: 6px; }
.am-opt-chart-title { font-size: 10px; margin-bottom: 5px; }
.am-opt-chart-header { gap: 7px; font-size: 9.5px; padding-bottom: 4px; }
.am-opt-bar-row { gap: 7px; font-size: 11.5px; }
.am-opt-bar-label { width: 84px; }
.am-opt-bar-wrap { height: 12px; }
.am-opt-bar-results, .am-opt-bar-val, .am-opt-bar-metric { font-size: 11px; }
.am-opt-entity-table { font-size: 11.5px; }
.am-opt-entity-table-wrap { margin: 6px 0 2px; }
.am-opt-entity-table thead th, .am-opt-entity-table tbody td { padding: 4px 6px; }
.am-opt-apply-row { margin-top: 6px; gap: 6px; }
.am-opt-apply-btn { padding: 5px 11px; font-size: 11.5px; border-radius: 6px; }
.am-opt-manual-note { padding: 5px 9px; font-size: 11px; border-radius: 6px; }
.am-opt-vr { margin-top: 8px; padding: 8px 9px; border-radius: 7px; }
.am-opt-vr-title { font-size: 12px; margin-bottom: 2px; }
.am-opt-vr-explain { font-size: 11px; margin: 2px 0 6px; line-height: 1.4; }
.am-opt-vr-account { font-size: 10.5px; margin: 1px 0 5px; }
.am-opt-vr-rules { gap: 4px; }
.am-opt-vr-rule { gap: 8px; padding: 4px 8px; border-radius: 5px; }
.am-opt-vr-arrow { width: 20px; height: 20px; font-size: .78rem; }
.am-opt-vr-segment { font-size: 12px; }
.am-opt-vr-desc { font-size: 11px; }
.am-opt-vr-pct-wrap { font-size: 12px; }
.am-opt-vr-pct { width: 44px; padding: 2px 4px; font-size: 12px; }
.am-opt-vr-apply { margin-top: 7px; padding: 6px 12px; font-size: 12px; border-radius: 6px; }
.am-opt-bd-section { margin-bottom: 4px; border-radius: 6px; }
.am-opt-bd-label { padding: 6px 10px; font-size: 12px; }
.am-opt-bd-table table { font-size: 11px; }
.am-opt-bd-table th, .am-opt-bd-table td { padding: 3px 6px; }
.am-opt-empty { padding: 22px 16px; }
.am-opt-empty-icon { width: 44px; height: 44px; margin-bottom: 10px; }
.am-opt-empty-title { font-size: 14px; }
.am-opt-empty-desc { font-size: 12px; line-height: 1.5; }
.am-opt-loader { padding: 30px 20px 34px; }
.am-hist-list { gap: 6px; }
.am-hist-item { padding: 8px 10px; border-radius: 8px; gap: 8px; }

/* ── HubSpot-style record columns (company / deal) + list-scoped CRM tabs ── */
.crm-scope-chip { display:inline-flex; align-items:center; gap:5px; margin-left:8px; padding:3px 6px 3px 9px; border-radius:100px; background:#e5f5f8; color:#0091ae; font-size:.74rem; font-weight:500; white-space:nowrap; }
.crm-scope-chip b { font-weight:700; }
.crm-scope-chip button { background:none; border:none; cursor:pointer; color:inherit; font-size:.72rem; line-height:1; padding:2px 4px; border-radius:100px; }
.crm-scope-chip button:hover { background:rgba(0,145,174,.15); }
html.dark .crm-scope-chip { background:#0f3a46; color:#7fd1de; }
.hs-facts { display:flex; flex-direction:column; gap:3px; margin:2px 0 4px; font-size:.78rem; color:var(--hs-text-2); }
.hs-fact-row { display:flex; align-items:center; gap:5px; min-width:0; line-height:1.5; }
.hs-fact-k { flex-shrink:0; }
.hs-facts b { color:var(--hs-text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hs-fact-sub { color:var(--hs-text-2); font-weight:400; font-size:.72rem; }
.hs-link { color:#0091ae; text-decoration:none; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hs-link:hover { text-decoration:underline; }
.hs-copy { background:none; border:none; cursor:pointer; color:#7c98b6; padding:0 3px; font-size:.78rem; line-height:1; flex-shrink:0; }
.hs-copy:hover { color:#0091ae; }
.hs-card-empty { color:#99acc2; }
.hs-assoc-hd { border-bottom:none !important; padding-bottom:4px !important; }
.hs-assoc-title { text-transform:none !important; letter-spacing:0 !important; font-size:.86rem !important; color:var(--hs-text) !important; }
.hs-assoc-tog { background:none; border:none; cursor:pointer; color:var(--hs-text-2); padding:0 2px; display:flex; align-items:center; transition:transform .15s; }
.hs-assoc.collapsed .hs-assoc-tog { transform:rotate(-90deg); }
.hs-assoc.collapsed .hs-assoc-body { display:none; }
.hs-assoc-body { display:flex; flex-direction:column; gap:8px; }
.hs-assoc-tools { display:flex; gap:6px; }
.hs-assoc-search { flex:1; min-width:0; padding:5px 9px; border:1px solid var(--hs-line-2); border-radius:4px; font-size:.76rem; background:var(--bg-card); color:var(--text-primary); outline:none; }
.hs-assoc-search:focus { border-color:#0091ae; }
.hs-assoc-list { display:flex; flex-direction:column; gap:8px; }
.hs-assoc-list:not(.all) .hs-card:nth-child(n+6) { display:none; }
.hs-card { border-color:var(--hs-line-2) !important; background:var(--bg-card) !important; padding:12px 10px 10px 12px !important; }
.hs-card .crm-pr-entity-name { margin-bottom:2px; }
.hs-card-co { font-size:.74rem; color:var(--hs-text-2); margin:0 0 5px 27px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hs-card-row { font-size:.74rem; color:var(--hs-text-2); display:flex; align-items:center; gap:4px; min-width:0; line-height:1.6; }
.hs-card-row a { color:#0091ae; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hs-card-row a:hover { text-decoration:underline; }
.hs-card-k { flex-shrink:0; }
.hs-card-v { color:var(--hs-text); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Company description on the association card (2026-10-16): three clamped lines, full text on hover */
.hs-card-desc { font-size:.74rem; color:var(--hs-text-2); margin:4px 0 2px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
/* Per-contact Email / Call / WhatsApp / SMS on a deal / company card (2026-10-11) */
.hs-card-acts { display:flex; flex-wrap:wrap; gap:4px; margin:6px 0 2px 27px; }
.hs-card-acts button { font:inherit; font-size:.68rem; font-weight:600; line-height:1.4; padding:2px 8px; border:1px solid var(--hs-line-2, var(--border)); border-radius:999px; background:var(--bg-card); color:var(--text-secondary); cursor:pointer; white-space:nowrap; }
.hs-card-acts button:hover:not(:disabled) { border-color:#0091ae; color:#0091ae; }
.hs-card-acts button:disabled { opacity:.4; cursor:not-allowed; }
.hs-primary { display:inline-flex; align-items:center; background:#e5f5f8; color:#0091ae; border:1px solid #7fd1de; font-size:.64rem; font-weight:600; padding:1px 7px; border-radius:3px; margin-left:4px; flex-shrink:0; }
html.dark .hs-primary { background:#0f3a46; color:#7fd1de; border-color:#1f6f80; }
.hs-viewall { align-self:flex-start; font-size:.78rem; font-weight:600; color:#0091ae; background:none; border:none; cursor:pointer; padding:2px 0; }
.hs-viewall:hover { text-decoration:underline; }

/* ── CRM grid (Companies / Deals on the Leads table) ── */
.crm-grid-inp { width:100%; box-sizing:border-box; border:1px solid transparent; background:transparent; font:inherit; font-size:.8rem; color:var(--text-primary); padding:4px 6px; border-radius:6px; outline:none; }
.crm-grid-inp:hover { border-color:var(--border); background:var(--bg-page); }
.crm-grid-inp:focus { border-color:var(--accent); background:var(--bg-page); }
.crm-grid-prop > * { font-size:.8rem !important; }
.crm-grid-prop input, .crm-grid-prop select, .crm-grid-prop textarea { padding:4px 6px !important; }
.crm-table.lfg-table td, .crm-grid.lfg-table td { overflow:hidden; text-overflow:ellipsis; }
.crm-grid .crm-grid-inp { width: 100%; box-sizing: border-box; padding: 3px 6px; border: 1px solid transparent; border-radius: 5px; font-size: .82rem; background: transparent; color: var(--text-primary); outline: none; font-family: inherit; }
.crm-grid .crm-grid-inp:hover { border-color: #e2e8f0; }
.crm-grid .crm-grid-inp:focus { border-color: #3f76ff; background: var(--bg-page); }

/* ── Inbox wave 7: workflows pane, presence, escalation ── */
/* Presence chip in the Inbox header — sized like the .proj-secondary-btn chips next to it
   (the global select rule is 44px tall / 100% wide, which used to inflate the pill). */
/* Inbox header toolbar: every control the same 30px, flat corners, never clipped. */
.ib-topbtn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:30px;box-sizing:border-box;padding:0 12px;border-radius:8px;font-size:.72rem;font-weight:700;line-height:1;white-space:nowrap;flex:none}
.ib-topbtn.on{color:var(--accent);border-color:var(--accent)}
#ibPrefsOv .ib-rule-card{flex-direction:column;gap:6px}
.ib-pref-hd{font-size:.78rem;font-weight:800}
.ib-pref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 12px;width:100%}
.ib-pref-row{display:flex;align-items:center;gap:6px;font-size:.76rem;cursor:pointer;min-width:0}
.ib-pref-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-pref-row small{color:var(--text-muted);margin-inline-start:5px}
.ibsh-grp{border:1px solid var(--border);border-radius:9px;padding:6px 10px;margin-top:6px;font-size:.74rem}
.ibsh-grp summary{cursor:pointer;font-weight:700;display:flex;align-items:center;gap:8px;list-style:none}
.ibsh-grp summary::before{content:'▸';color:var(--text-muted);font-size:.7rem}
.ibsh-grp[open] summary::before{content:'▾'}
.ibsh-grp summary .ibsh-grp-n{font-weight:500;color:var(--text-muted);margin-inline-start:auto}
.ibsh-grp summary a{color:var(--accent);text-decoration:none;font-weight:600}
.ibsh-grp .ib-pref-grid{margin-top:6px;max-height:190px;overflow-y:auto}
.ib-pres-pill{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:8px;padding:0 8px;height:30px;box-sizing:border-box;font-size:.72rem;font-weight:600;line-height:1;background:var(--bg-card);white-space:nowrap;flex:none}
.ib-pres-pill:hover{background:var(--bg-hover);border-color:var(--border-hover)}
.ib-pres-pill select{border:none;background-color:transparent;background-position:right 0 center;background-size:11px;width:auto;height:auto;padding:0 13px 0 0;margin:0;box-shadow:none;font-size:.72rem;font-weight:600;line-height:1;color:var(--text-primary);cursor:pointer;outline:none}
.ib-pres-pill select:focus{box-shadow:none;border:none}
.ib-wf-wrap{display:flex;gap:12px;align-items:stretch;min-height:calc(100vh - 150px)}
.ib-wf-list{flex:0 0 290px;display:flex;flex-direction:column;gap:8px}
.ib-wf-card{border:1px solid var(--border);border-radius:12px;background:var(--bg-card);padding:10px 12px;cursor:pointer;display:flex;gap:9px;align-items:flex-start}
.ib-wf-card.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}
.ib-wf-card.off{opacity:.62}
.ib-wf-card b{display:block;font-size:.82rem}
.ib-wf-card small{display:block;color:var(--text-muted);font-size:.7rem;line-height:1.35;margin-top:2px}
.ib-wf-canvas{flex:1;border:1px solid var(--border);border-radius:16px;background:var(--bg-card);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.ib-wf-canvas .auto-canvas{border-radius:0 0 16px 16px;max-height:calc(100vh - 260px)}
.ib-wf-hd{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.ib-wf-hd input.ib-wf-name{font-size:1rem;font-weight:800;border:none;background:transparent;color:var(--text-primary);min-width:200px;flex:1;outline:none;border-bottom:1px dashed transparent}
.ib-wf-hd input.ib-wf-name:focus{border-bottom-color:var(--accent)}
.ib-wf-log{font-size:.72rem;border-top:1px solid var(--border);padding:8px 14px;max-height:170px;overflow:auto}
.ib-wf-log div{display:flex;gap:8px;padding:2px 0;border-bottom:1px dashed var(--border)}
.ib-wf-log div span:first-child{color:var(--text-muted);flex:0 0 74px}
.ib-wf-log div span:nth-child(2){flex:0 0 150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-wf-log div span:nth-child(3){color:var(--text-muted);flex:0 0 70px}
/* Phone (2026-10-05): the Workflows pane was a fixed 290px list + canvas row, so the
   editor sat off the right edge of a 375px screen. Stack it: the cards become a
   horizontal strip on top, the editor takes the full width below. */
@media (max-width: 768px) {
  .ib-wf-wrap{flex-direction:column;min-height:0;gap:10px}
  .ib-wf-list{flex:0 0 auto;flex-direction:row;align-items:stretch;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .ib-wf-list > .proj-primary-btn{flex:0 0 auto;align-self:center;white-space:nowrap}
  .ib-wf-list > .ib-snip-none{flex:0 0 auto;align-self:center;white-space:nowrap}
  .ib-wf-card{flex:0 0 220px}
  .ib-wf-list > div:last-child:not(.ib-wf-card):not(.ib-snip-none){display:none}
  .ib-wf-canvas{min-height:60vh}
  .ib-wf-canvas .auto-canvas{padding:14px 12px;max-height:none}
  .ib-wf-hd{padding:10px 12px;gap:8px}
  .ib-wf-hd input.ib-wf-name{min-width:0;flex:1 1 100%}
  .ib-wf-log div span:nth-child(2){flex:1 1 0;min-width:0}
}
.ib-esc-card .ib-rf-row{grid-template-columns:110px 1fr}
.ib-cap-table{width:100%;border-collapse:collapse;font-size:.76rem}
.ib-cap-table td,.ib-cap-table th{padding:5px 8px;border-bottom:1px solid var(--border);text-align:start}
.ib-cap-table input{width:64px}

/* ── Inbox wave 8: message search, DNS table ── */
.ib-search{border:1px solid var(--border);border-radius:12px;background:var(--bg-card);padding:9px 12px;margin-bottom:10px}
.ib-search-hit{display:flex;gap:8px;align-items:center;padding:6px 4px;border-top:1px dashed var(--border);cursor:pointer;font-size:.76rem}
.ib-search-hit:hover{background:var(--bg-hover)}
.ib-search-hit b{flex:0 0 150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ib-search-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary)}
.ib-search-txt mark{background:#fef08a;color:#111;border-radius:3px;padding:0 2px}
.ib-dns{width:100%;border-collapse:collapse;font-size:.72rem}
.ib-dns th,.ib-dns td{padding:5px 7px;border-bottom:1px solid var(--border);text-align:start;vertical-align:top}
.ib-dns code{font-size:.7rem;word-break:break-all}

/* ── Inbox wave 9: custom channels, translate, shared threads ── */
.ib-cc-kv{display:grid;grid-template-columns:110px 1fr auto;gap:8px;align-items:center;font-size:.72rem;margin:3px 0}
.ib-cc-kv>span{font-weight:700;color:var(--text-muted)}
.ib-cc-kv code{font-size:.7rem;word-break:break-all;background:var(--bg-hover);padding:3px 6px;border-radius:6px}
.ib-cc-pre{font-size:.68rem;background:var(--bg-hover);padding:8px 10px;border-radius:8px;overflow:auto;white-space:pre-wrap;word-break:break-all;margin:6px 0}
.ib-tr{margin-top:5px;padding:6px 9px;border-radius:9px;background:rgba(59,130,246,.08);border-inline-start:2px solid #3b82f6;font-size:.8rem;line-height:1.4;color:var(--text-primary)}
.ib-trbtn{border:none;background:none;cursor:pointer;font-size:.72rem;padding:0 3px;opacity:.55}
.ib-trbtn:hover{opacity:1}
/* ── WhatsApp emoji reactions (js/gmail-section.js _ibReactPill / ibWaReactOpen) ── */
.ib-rx-btn{position:absolute;top:50%;transform:translateY(-50%);inset-inline-end:-26px;width:22px;height:22px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);color:var(--text-muted);font-size:13px;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s;padding:0;display:flex;align-items:center;justify-content:center}
.ib-rx-btn.mine{inset-inline-end:auto;inset-inline-start:-26px}
.ib-bub-rx:hover .ib-rx-btn,.ib-rx-btn:focus-visible{opacity:.85}
.ib-rx-btn:hover{opacity:1!important;color:var(--text-primary)}
@media (hover:none){.ib-rx-btn{opacity:.5}}
.ib-rx-pill{display:inline-flex;align-items:center;gap:3px;margin:-9px 6px 0;padding:1px 7px;border-radius:12px;border:1px solid var(--border);background:var(--bg-card);font-size:.78rem;line-height:1.35;cursor:pointer;position:relative;z-index:1;box-shadow:0 1px 2px rgba(0,0,0,.12);color:var(--text-primary)}
.ib-rx-pill b{font-size:.66rem;font-weight:700;color:var(--text-muted)}
.ib-rx-pill.own{border-color:#25d366;background:rgba(37,211,102,.12)}
.ib-rx-pop{position:fixed;z-index:10050;display:flex;gap:2px;padding:4px;border-radius:24px;border:1px solid var(--border);background:var(--bg-card);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.ib-rx-pop button{border:none;background:none;cursor:pointer;font-size:20px;line-height:1;width:34px;height:34px;border-radius:50%;padding:0;transition:transform .1s}
.ib-rx-pop button:hover{transform:scale(1.25);background:var(--bg-hover)}
.ib-rx-pop button.on{background:rgba(37,211,102,.18);box-shadow:inset 0 0 0 1px #25d366}
.ib-sm-extras{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:6px 12px 0;font-size:.72rem}
.ib-sm-extras label{display:flex;gap:6px;align-items:center;font-weight:700}
.ib-sm-extras .email-input{width:auto;min-width:200px;padding:4px 8px;font-size:.72rem;font-weight:400}
.ib-sm-hint{color:var(--text-muted);font-size:.66rem;margin-inline-start:auto}

/* ── Inbox wave 11: HTML mail bubbles ── */
.ib-mailhtml{max-width:100%;overflow:auto;font-size:.83rem;line-height:1.45}
.ib-mailhtml img{max-width:100%;height:auto}
.ib-mailhtml table{max-width:100%}
.ib-mailhtml a{color:var(--accent)}
.ib-mailhtml blockquote{border-inline-start:2px solid var(--border);margin:6px 0;padding-inline-start:8px;color:var(--text-muted)}

/* Hash-stored boards (Tasks): the loaded-window bar + the Leads tab's Tasks view host */
.mnb-more{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 24px;font-size:.76rem;color:var(--text-muted);border-bottom:1px solid var(--border);background:var(--bg-card)}
.mnb-more b{color:var(--text-primary)}
.mnb-more-spin{opacity:.7;font-style:italic}
.lf-tasks-host{height:calc(100vh - 150px);margin:6px 12px 0 0;border-radius:12px}

/* ═══════════════════════════════════════════════════════════════════════
   ADS → CHANGE LOG drawer (js/ad-changelog.js)
   ═══════════════════════════════════════════════════════════════════════ */
.adl-modal { width: 800px; }
.adl-hicon { background: #334155; }
.adl-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.adl-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--text-secondary); background: var(--bg-hover); padding: 2px 9px; border-radius: 20px; line-height: 1.6; }
.adl-chip--entity { background: rgba(37,99,235,.08); color: var(--text-primary); padding-right: 4px; }
.adl-chip--entity b { font-weight: 700; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adl-chip-lvl { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.adl-chip-x { border: none; background: transparent; color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 10px; }
.adl-chip-x:hover { background: rgba(0,0,0,.08); color: var(--text-primary); }
.adl-chip--count { color: var(--text-muted); }
.adl-tools { display: flex; align-items: center; gap: 8px; padding: 10px 20px 8px; border-bottom: 1px solid var(--border); background: var(--bg-card); flex-shrink: 0; }
.adl-search { flex: 1; display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; height: 32px; background: var(--bg-card); color: var(--text-muted); min-width: 160px; }
.adl-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 12.5px; color: var(--text-primary); min-width: 0; }
.adl-sel { height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); font-size: 12px; padding: 0 8px; max-width: 150px; }
.adl-range { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; height: 32px; flex-shrink: 0; }
.adl-range button { border: none; background: var(--bg-card); color: var(--text-secondary); font-size: 11.5px; font-weight: 600; padding: 0 10px; cursor: pointer; border-right: 1px solid var(--border); }
.adl-range button:last-child { border-right: none; }
.adl-range button.active { background: var(--text-primary); color: var(--bg-card); }
.adl-kinds { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 20px 10px; border-bottom: 1px solid var(--border); background: var(--bg-card); flex-shrink: 0; }
.adl-kind { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); font-size: 11.5px; font-weight: 600; cursor: pointer; --kc: var(--text-primary); --kb: var(--bg-hover); }
.adl-kind svg { color: var(--kc); }
.adl-kind:hover { border-color: var(--kc); }
.adl-kind.active { background: var(--kb); border-color: var(--kc); color: var(--kc); }
.adl-kind-n { font-size: 10.5px; font-weight: 700; color: var(--text-muted); background: rgba(0,0,0,.06); padding: 0 6px; border-radius: 10px; line-height: 1.6; }
.adl-kind.active .adl-kind-n { color: var(--kc); background: rgba(255,255,255,.7); }
.adl-body { padding: 4px 20px 28px; }
.adl-day { position: sticky; top: 0; z-index: 2; background: #fafbfc; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: 14px 0 6px; }
html.dark .adl-day { background: var(--bg-secondary); }
.adl-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; transition: border-color .15s, box-shadow .15s; }
.adl-row:hover { border-color: rgba(37,99,235,.28); box-shadow: 0 1px 6px rgba(15,23,42,.05); }
.adl-row--rolled { opacity: .62; }
.adl-row--rolled .adl-title { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.35); }
.adl-row--failed { border-color: rgba(185,28,28,.35); }
.adl-ico { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.adl-main { flex: 1; min-width: 0; }
.adl-title { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.4; word-break: break-word; }
.adl-delta { font-weight: 500; color: var(--text-secondary); margin-left: 4px; white-space: nowrap; }
.adl-delta s { color: var(--text-muted); }
.adl-delta b { color: var(--text-primary); }
.adl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; font-size: 11.5px; color: var(--text-muted); }
.adl-plat { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 20px; line-height: 1.6; }
.adl-lvl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
.adl-ent { color: var(--text-primary); font-weight: 600; text-decoration: none; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adl-ent:hover { text-decoration: underline; color: #2563eb; }
.adl-parent { color: var(--text-muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adl-src { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-hover); color: var(--text-secondary); font-weight: 600; padding: 1px 8px; border-radius: 20px; font-size: 10.5px; line-height: 1.6; }
.adl-time { font-variant-numeric: tabular-nums; }
.adl-b { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 20px; background: var(--bg-hover); color: var(--text-secondary); line-height: 1.6; }
.adl-b--ok { color: #15803d; background: rgba(21,128,61,.10); }
.adl-b--rb { color: #b7770d; background: rgba(224,160,32,.12); }
.adl-b--fail { color: #b91c1c; background: rgba(185,28,28,.10); }
.adl-side { flex-shrink: 0; display: flex; align-items: center; }
.adl-expand { display: inline-flex; align-items: center; gap: 3px; background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border); font-weight: 600; padding: 1px 7px 1px 5px; border-radius: 20px; font-size: 10.5px; line-height: 1.6; cursor: pointer; }
.adl-expand:hover { color: #2563eb; border-color: rgba(37,99,235,.4); }
.adl-expand svg { transition: transform .15s; }
.adl-expand--open svg { transform: rotate(180deg); }
.adl-detail { margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-hover); padding: 6px 4px; }
.adl-det-line { display: flex; gap: 10px; align-items: baseline; padding: 3px 9px; font-size: 12px; line-height: 1.45; border-bottom: 1px solid var(--border); }
.adl-det-line:last-child { border-bottom: 0; }
.adl-det-k { flex-shrink: 0; min-width: 128px; max-width: 46%; font-weight: 600; color: var(--text-primary); word-break: break-word; }
.adl-det-v { flex: 1; color: var(--text-secondary); word-break: break-word; }
.adl-rb { padding: 5px 10px; font-size: 11.5px; }
.adl-more { display: block; width: 100%; margin-top: 8px; padding: 10px; border: 1px dashed var(--border); border-radius: 10px; background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; }
.adl-more:hover { background: var(--bg-hover); color: var(--text-primary); }
.adl-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px 0; color: var(--text-muted); font-size: 13px; }
.adl-empty-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-hover); color: var(--text-muted); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
/* per-row 🕘 icon next to the campaign / ad set / ad name */
.am-adlog-btn { position: relative; }
.am-adlog-btn .am-adlog-n { position: absolute; top: -6px; right: -6px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: #2563eb; color: #fff; font-size: 9px; font-weight: 800; line-height: 14px; text-align: center; pointer-events: none; }
.am-adlog-btn.has-log { color: #2563eb; border-color: rgba(37,99,235,.4); }
@media (max-width: 860px) { .adl-modal { width: 100vw; } .adl-tools { flex-wrap: wrap; } .adl-search { min-width: 100%; } }

/* ── Projects: group ⋯ menu + move-group-to-board dialog ── */
.mnb-gdel.mnb-gmenu { margin-left: 0; padding: 2px 3px; opacity: .4; }
.mnb-group:hover .mnb-gdel.mnb-gmenu { opacity: 1; }
.mnb-gdel.mnb-gmenu:hover { color: var(--text); }
.mnb-gmenu-item { display: flex; align-items: center; gap: 9px; }
.mnb-gmenu-item svg { flex-shrink: 0; color: var(--text-secondary); }
.mnb-mv-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 25000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.mnb-mv { width: 640px; max-width: 100%; max-height: 92vh; background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 64px rgba(16,24,40,.3); display: flex; flex-direction: column; overflow: hidden; }
.mnb-mv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px 12px; border-bottom: 1px solid var(--border); }
.mnb-mv-title { font-size: 1.02rem; font-weight: 700; }
.mnb-mv-sub { font-size: .76rem; color: var(--text-secondary); margin-top: 2px; }
.mnb-mv-x { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .9rem; padding: 4px 6px; border-radius: 6px; }
.mnb-mv-x:hover { background: var(--bg-hover); color: var(--text); }
.mnb-mv-body { padding: 14px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.mnb-mv-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mnb-mv-field { display: flex; flex-direction: column; gap: 4px; font-size: .72rem; font-weight: 600; color: var(--text-secondary); }
.mnb-mv-field select { width: 100%; }
.mnb-mv-sect { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-top: 4px; }
.mnb-mv-summary { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .72rem; }
.mnb-mv-rows { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.mnb-mv-row { display: grid; grid-template-columns: minmax(120px, 1fr) 22px minmax(200px, 1.5fr); align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.mnb-mv-row:last-child { border-bottom: none; }
.mnb-mv-row.lost { background: rgba(226,68,92,.06); }
.mnb-mv-src { display: flex; flex-direction: column; min-width: 0; }
.mnb-mv-cname { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mnb-mv-ctype { font-size: .68rem; color: var(--text-muted); }
.mnb-mv-arrow { color: var(--text-muted); text-align: center; font-size: .9rem; }
.mnb-mv-tgt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mnb-mv-tgt select { width: 100%; }
.mnb-mv-badge { font-size: .66rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; align-self: flex-start; }
.mnb-mv-badge.ok { background: rgba(0,200,117,.14); color: #0a8f54; }
.mnb-mv-badge.new { background: rgba(87,155,252,.16); color: #2b6fd6; }
.mnb-mv-badge.skip { background: rgba(226,68,92,.12); color: #c5273f; }
.mnb-mv-warn { font-size: .76rem; color: #c5273f; background: rgba(226,68,92,.08); border: 1px solid rgba(226,68,92,.3); border-radius: 8px; padding: 8px 10px; }
.mnb-mv-note { font-size: .74rem; color: var(--text-secondary); }
.mnb-mv-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px; border-top: 1px solid var(--border); }
@media (max-width: 640px) { .mnb-mv-grid2 { grid-template-columns: 1fr; } .mnb-mv-row { grid-template-columns: 1fr; } .mnb-mv-arrow { display: none; } }

/* ── Projects: dragging a group collapses every group to its header ── */
.mnb-wrap.mnb-gdrag .mnb-group > *:not(.mnb-ghead) { display: none !important; }
.mnb-wrap.mnb-gdrag .mnb-ghead { padding: 9px 12px; margin-bottom: 8px; border: 1px dashed var(--border); border-radius: 9px; background: var(--bg-card); transition: box-shadow .1s; }
.mnb-wrap.mnb-gdrag .mnb-ghead .mnb-gdel, .mnb-wrap.mnb-gdrag .mnb-ghead .mnb-gcolor { visibility: hidden; }
.mnb-wrap.mnb-gdrag .mnb-ghead.mnb-dropbefore { box-shadow: inset 0 3px 0 var(--accent), 0 0 0 1px var(--accent); }
.mnb-wrap.mnb-gdrag .mnb-gdrag-src .mnb-ghead { opacity: .45; border-style: solid; }
.mnb-wrap.mnb-gdrag .mnb-addgroup { border: 1px dashed var(--border); border-radius: 9px; padding: 12px; text-align: center; width: 100%; }
.mnb-wrap.mnb-gdrag .mnb-addgroup.mnb-dropbefore { box-shadow: inset 0 3px 0 var(--accent), 0 0 0 1px var(--accent); }

/* ── Projects: move dialog additions (conversion badge, automations checkbox, workspace move) ── */
.mnb-mv-badge.conv { background: rgba(253,171,61,.18); color: #b26a00; }
.mnb-mv-check { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--text); cursor: pointer; padding: 2px 0; }
.mnb-mv-check input { margin: 0; }
.mnb-mv-radios { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; }
.mnb-mv-radios label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* ═══ CRM Quotes (js/crm-quotes.js) ═══════════════════════════════════════ */
.crmq-pill { display:inline-block; padding:1px 8px; border-radius:99px; font-size:.68rem; font-weight:700; letter-spacing:.2px; vertical-align:middle; }
.crmq-card { cursor:pointer; }
.crmq-ov { position:fixed; inset:0; z-index:20040; background:var(--bg-hover); display:flex; flex-direction:column; animation:crmqIn .18s ease-out; }
@keyframes crmqIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.crmq-wrap { display:flex; flex-direction:column; height:100%; }
.crmq-top { display:flex; align-items:center; gap:12px; padding:10px 18px; background:var(--bg-card); border-bottom:1px solid var(--border); flex:none; }
.crmq-back { width:34px; height:34px; border-radius:8px; border:1px solid var(--border); background:var(--bg-card); cursor:pointer; color:var(--text-muted); font-size:1rem; }
.crmq-back:hover { background:var(--bg-hover); color:var(--text-primary); }
.crmq-title { flex:1; min-width:0; font-weight:700; font-size:1rem; color:var(--text-primary); }
.crmq-sub { font-size:.74rem; font-weight:500; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crmq-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.crmq-btn { padding:8px 13px; border:1px solid var(--border); border-radius:8px; background:var(--bg-card); color:var(--text-primary); font-size:.82rem; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; }
.crmq-btn:hover:not([disabled]) { background:var(--bg-hover); }
.crmq-btn.pri { background:var(--accent,#3f76ff); border-color:var(--accent,#3f76ff); color:#fff; }
.crmq-btn.pri:hover:not([disabled]) { filter:brightness(1.07); background:var(--accent,#3f76ff); }
.crmq-btn.sm { padding:5px 10px; font-size:.76rem; }
.crmq-btn[disabled] { opacity:.5; cursor:default; }
.crmq-body { flex:1; display:grid; grid-template-columns:minmax(380px,520px) 1fr; min-height:0; }
.crmq-form { overflow:auto; padding:14px 16px 40px; border-inline-end:1px solid var(--border); background:var(--bg-card); }
.crmq-preview { display:flex; flex-direction:column; min-width:0; background:#e9ecf1; }
.crmq-pv-tools { display:flex; justify-content:space-between; align-items:center; padding:7px 16px; font-size:.74rem; color:var(--text-muted); background:var(--bg-card); border-bottom:1px solid var(--border); }
.crmq-pv-tools b { color:var(--text-primary); font-size:.88rem; }
.crmq-preview iframe { flex:1; width:100%; border:0; background:#e9ecf1; }
.crmq-sec { border:1px solid var(--border); border-radius:10px; margin-bottom:10px; background:var(--bg-card); }
.crmq-sec > summary { cursor:pointer; padding:9px 12px; font-size:.8rem; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.4px; list-style:none; display:flex; align-items:center; gap:6px; }
.crmq-sec > summary::-webkit-details-marker { display:none; }
.crmq-sec > summary::before { content:'\25B8'; color:var(--text-muted); font-size:.7rem; transition:transform .15s; }
.crmq-sec[open] > summary::before { transform:rotate(90deg); }
.crmq-sec[open] > summary { border-bottom:1px solid var(--border); }
.crmq-sec > *:not(summary) { margin:8px 12px; }
.crmq-sum { text-transform:none; letter-spacing:0; color:var(--text-muted); font-weight:600; }
.crmq-f { display:flex; flex-direction:column; gap:3px; font-size:.78rem; color:var(--text-muted); font-weight:600; margin:0 0 8px; }
.crmq-f input, .crmq-f select, .crmq-f textarea { width:100%; box-sizing:border-box; padding:7px 9px; border:1px solid var(--border); border-radius:8px; font:inherit; font-size:.84rem; font-weight:500; color:var(--text-primary); background:var(--bg-card); }
.crmq-f input:focus, .crmq-f select:focus, .crmq-f textarea:focus { outline:none; border-color:#3f76ff; box-shadow:0 0 0 2px rgba(63,118,255,.12); }
.crmq-f textarea { resize:vertical; }
.crmq-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 8px; }
.crmq-grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 8px; }
.crmq-color { display:flex; align-items:center; gap:5px; }
.crmq-color input[type=color] { width:38px; height:32px; padding:2px; }
.crmq-color i { width:16px; height:16px; border-radius:50%; cursor:pointer; border:2px solid #fff; box-shadow:0 0 0 1px var(--border); }
.crmq-links { display:flex; gap:6px; flex-wrap:wrap; font-size:.72rem; color:var(--text-muted); }
.crmq-links span { background:var(--bg-hover); border-radius:6px; padding:2px 7px; }
.crmq-it { display:grid; grid-template-columns:1fr 60px 92px 56px 92px 30px; gap:6px; align-items:start; padding:6px 0; border-bottom:1px solid var(--border); }
.crmq-it-h { font-size:.68rem; font-weight:700; text-transform:uppercase; color:var(--text-muted); letter-spacing:.3px; padding:2px 0 4px; }
.crmq-it input { width:100%; box-sizing:border-box; padding:6px 7px; border:1px solid var(--border); border-radius:7px; font:inherit; font-size:.82rem; color:var(--text-primary); background:var(--bg-card); }
.crmq-it input:focus { outline:none; border-color:#3f76ff; }
.crmq-it input.crmq-desc { margin-top:4px; font-size:.74rem; color:var(--text-muted); }
.crmq-amt { font-size:.82rem; font-weight:700; text-align:end; padding-top:8px; font-variant-numeric:tabular-nums; }
.crmq-addrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:8px; }
.crmq-inline { display:inline-flex; align-items:center; gap:4px; font-size:.74rem; color:var(--text-muted); font-weight:600; }
.crmq-inline input, .crmq-inline select { padding:4px 6px; border:1px solid var(--border); border-radius:6px; font:inherit; font-size:.78rem; background:var(--bg-card); color:var(--text-primary); }
.crmq-lock { background:#fef3c7; color:#92400e; border-radius:8px; padding:8px 12px; font-size:.78rem; font-weight:600; margin-bottom:10px; }
.crmq-hint { font-size:.7rem; color:var(--text-muted); }
.crmq-hist { font-size:.74rem; color:var(--text-secondary); display:flex; flex-direction:column; gap:3px; }
.crmq-hist span { color:var(--text-muted); font-size:.68rem; }
.crmq-ai { border-color:#c7d2fe; background:linear-gradient(135deg,#eef2ff,#f5f3ff); }
.crmq-ai > summary { color:#4338ca; }
.crmq-ai textarea { width:100%; box-sizing:border-box; padding:9px 11px; border:1px solid #c7d2fe; border-radius:9px; font:inherit; font-size:.85rem; background:#fff; resize:vertical; color:var(--text-primary); }
.crmq-ai textarea:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15); }
.crmq-ai-row { display:flex; align-items:center; gap:10px; justify-content:space-between; margin-top:6px; }
.crmq-ai .crmq-btn.pri { background:#4f46e5; border-color:#4f46e5; }
.crmq-menu { position:fixed; z-index:20060; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; box-shadow:0 12px 32px rgba(16,24,40,.18); padding:6px; min-width:230px; display:flex; flex-direction:column; }
.crmq-menu button { text-align:start; padding:8px 10px; border:0; background:none; border-radius:7px; font:inherit; font-size:.82rem; color:var(--text-primary); cursor:pointer; }
.crmq-menu button:hover { background:var(--bg-hover); }
.crmq-menu button.danger { color:#dc2626; }
.crmq-modal { position:fixed; inset:0; z-index:20055; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; padding:14px; }
.crmq-dlg { background:var(--bg-card); border:1px solid var(--border); border-radius:14px; width:100%; max-width:460px; max-height:92vh; overflow:auto; padding:16px 18px; box-shadow:0 24px 60px rgba(16,24,40,.3); }
.crmq-dlg-hd { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; font-size:.95rem; }
.crmq-dlg-hd button { background:none; border:0; font-size:1.1rem; cursor:pointer; color:var(--text-muted); }
.crmq-dlg-ft { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.crmq-dlg .crmq-f select, .crmq-dlg .crmq-f input { font-size:.86rem; }
.crmq-catres { max-height:340px; overflow:auto; border:1px solid var(--border); border-radius:9px; }
.crmq-catrow { display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid var(--border); cursor:pointer; font-size:.82rem; }
.crmq-catrow:hover { background:var(--bg-hover); }
.crmq-catrow img, .crmq-catimg { width:36px; height:36px; border-radius:7px; object-fit:cover; background:var(--bg-hover); flex:none; }
.crmq-set-cols { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.crmq-set-h { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); margin:4px 0 8px; }
.crmq-logo-row { display:flex; align-items:center; gap:6px; }
.crmq-logo-row img { height:32px; max-width:90px; object-fit:contain; border:1px solid var(--border); border-radius:6px; padding:2px; background:#fff; }
.crmq-logo-row input { flex:1; min-width:0; }
@media (max-width: 900px) {
  .crmq-body { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .crmq-form { border-inline-end:0; border-bottom:1px solid var(--border); max-height:55vh; }
  .crmq-set-cols { grid-template-columns:1fr; }
  .crmq-it { grid-template-columns:1fr 52px 80px 48px 80px 26px; }
}

/* Notes written through an API token (MCP/REST) — "via ChatGPT" chip */
.crm-note-via { display:inline-block; margin-inline-start:6px; padding:1px 7px; border-radius:99px; background:#eef2ff; color:#4338ca; font-size:.66rem; font-weight:700; vertical-align:middle; }

/* Projects: Signature column — pad modal (cell) and board-form pad */
.proj-sign-ov { position: fixed; inset: 0; background: rgba(16,24,40,.45); z-index: 30500; display: flex; align-items: center; justify-content: center; padding: 16px; }
.proj-sign { background: var(--bg-card); border-radius: 14px; box-shadow: 0 18px 48px rgba(16,24,40,.28); width: min(640px, 100%); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.proj-sign-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.proj-sign-h b { font-size: .92rem; white-space: nowrap; }
.proj-sign-h .mnb-pop-x { margin-inline-start: auto; }
.proj-sign-cur { display: flex; flex-direction: column; gap: 3px; }
.proj-sign-cur img { max-height: 64px; align-self: flex-start; border: 1px solid var(--border); border-radius: 6px; background: #fff; padding: 2px; }
.proj-sign-pad { position: relative; border: 1.5px dashed var(--border); border-radius: 10px; background: #fff; height: 190px; }
.proj-sign-pad.form { height: 150px; }
.proj-sign-pad canvas { width: 100%; height: 100%; display: block; border-radius: 10px; touch-action: none; cursor: crosshair; }
.proj-sign-hint { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: var(--text-muted); pointer-events: none; font-size: .9rem; }
.proj-sign-pad.inked .proj-sign-hint { display: none; }
.proj-sign-f { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Dashboard: monday.com-style design system (2026-09-28) ──────────────────
   Big plain title, tab strip with a blue underline, white widget cards with a
   titled header row and a thin divider, "Numbers" widgets with one large
   figure, colored KPI figures, an AI card with a rainbow border, 16px gaps.
   Used by js/dashboard-section.js (all views) and js/dash-builder.js. */
:root {
  --mdb-bg: #f6f7fb; --mdb-blue: #0073ea; --mdb-green: #00c875; --mdb-yellow: #fdab3d; --mdb-red: #e2445c;
  --mdb-purple: #a25ddc; --mdb-teal: #00d2d2; --mdb-navy: #225091; --mdb-lime: #9cd326; --mdb-orange: #ff7575; --mdb-sky: #579bfc;
  --mdb-title: #323338; --mdb-card-radius: 8px; --mdb-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.03);
}
html.dark { --mdb-bg: #0a0b0f; --mdb-title: #e6e8ec; --mdb-shadow: 0 1px 2px rgba(0,0,0,.5); }
.mdb-page { padding: 22px 28px 40px; background: var(--mdb-bg); min-height: 100%; }
.mdb-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.mdb-title { font-size: 28px; font-weight: 600; color: var(--mdb-title); letter-spacing: -.01em; line-height: 1.2; display: flex; align-items: center; gap: 10px; }
.mdb-title small { font-size: 10px; font-weight: 400; color: var(--text-muted); letter-spacing: .3px; }
.mdb-sub { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }
.mdb-head-tools { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mdb-tabs { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--border); margin: 8px 0 18px; flex-wrap: wrap; }
.mdb-tab { border: none; background: none; cursor: pointer; padding: 10px 14px; font-size: 15px; font-weight: 500; color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mdb-tab:hover { color: var(--mdb-title); background: var(--bg-hover); border-radius: 6px 6px 0 0; }
.mdb-tab.on { color: var(--mdb-blue); border-bottom-color: var(--mdb-blue); font-weight: 600; }
.mdb-tabs .mdb-tab-tools { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; padding-bottom: 6px; flex-wrap: wrap; }
.mdb-sel { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--bg-card); border-radius: 6px; padding: 0 8px 0 10px; height: 34px; font-size: 13.5px; color: var(--text-secondary); }
.mdb-sel select { background-color: transparent; border: none; color: var(--mdb-title); font-weight: 600; cursor: pointer; outline: none; font-size: 13.5px; max-width: 200px; height: 32px; line-height: 32px; padding: 0 22px 0 2px; margin: 0; background-position: right 2px center; background-size: 16px; box-shadow: none; }
.mdb-sel.on { border-color: var(--mdb-blue); }
.mdb-btn { border: 1px solid var(--border); background: var(--bg-card); color: var(--mdb-title); border-radius: 6px; padding: 7px 13px; font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.mdb-btn:hover { background: var(--bg-hover); }
.mdb-btn.pri { background: var(--mdb-blue); border-color: var(--mdb-blue); color: #fff; }
.mdb-btn.pri:hover { background: #0060c2; }
.mdb-btn.ghost { border-color: transparent; background: transparent; color: var(--text-secondary); }
.mdb-menu { position: relative; }
.mdb-menu > summary { list-style: none; cursor: pointer; }
.mdb-menu > summary::-webkit-details-marker { display: none; }
.mdb-menu > div { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 130; min-width: 210px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-lg); padding: 6px; }
.mdb-menu > div button { display: flex; width: 100%; align-items: center; gap: 8px; border: none; background: none; text-align: start; padding: 9px 10px; border-radius: 6px; font-size: 14px; color: var(--mdb-title); cursor: pointer; }
.mdb-menu > div button:hover { background: var(--bg-hover); }
.mdb-blocks { display: flex; flex-direction: column; gap: 16px; }
.mdb-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.mdb-c2 { grid-column: span 2; } .mdb-c3 { grid-column: span 3; } .mdb-c4 { grid-column: span 4; } .mdb-c6 { grid-column: span 6; } .mdb-c8 { grid-column: span 8; } .mdb-c9 { grid-column: span 9; } .mdb-c12 { grid-column: span 12; }
.mdb-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.mdb-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--mdb-card-radius); box-shadow: var(--mdb-shadow); display: flex; flex-direction: column; min-width: 0; }
.mdb-card-h { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--border); min-height: 52px; }
.mdb-card-t { font-size: 17px; font-weight: 500; color: var(--mdb-title); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdb-card-t small { font-size: 13px; color: var(--text-muted); font-weight: 400; margin-inline-start: 6px; }
.mdb-card-b { padding: 16px 18px; flex: 1; min-width: 0; font-size: 14px; }
.mdb-card-b.tight { padding: 0; overflow-x: auto; }
.mdb-link { font-size: 13.5px; font-weight: 500; color: var(--mdb-blue); text-decoration: none; cursor: pointer; background: none; border: none; padding: 0; white-space: nowrap; }
.mdb-link:hover { text-decoration: underline; }
.mdb-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; color: var(--text-secondary); background: var(--bg-card); cursor: pointer; white-space: nowrap; }
.mdb-pill:hover { background: var(--bg-hover); }
/* Numbers widget: one large figure */
.mdb-num { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px 12px; gap: 4px; min-height: 96px; }
.mdb-num-v { font-size: 38px; font-weight: 700; color: var(--mdb-title); line-height: 1.1; letter-spacing: -.01em; }
.mdb-num-l { font-size: 14px; color: var(--text-secondary); }
/* KPI figure: colored number with label to the right (monday "65 projects on track") */
.mdb-kpi { display: flex; align-items: center; gap: 14px; padding: 18px 18px 14px; }
.mdb-kpi-v { font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.mdb-kpi-l { font-size: 15px; color: var(--mdb-title); font-weight: 600; line-height: 1.3; }
.mdb-kpi-s { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.mdb-kpi-foot { padding: 0 16px 12px; }
.mdb-bar { height: 6px; border-radius: 6px; background: var(--bg-hover); overflow: hidden; }
.mdb-bar > i { display: block; height: 100%; border-radius: 6px; }
.mdb-badge { font-size: 11px; font-weight: 600; border: 1px solid; padding: 1px 7px; border-radius: 4px; white-space: nowrap; }
.mdb-delta { font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 4px; white-space: nowrap; }
.mdb-delta.up { color: #027a48; background: #ecfdf3; } .mdb-delta.down { color: #b42318; background: #fef3f2; }
html.dark .mdb-delta.up { background: rgba(0,200,117,.15); color: #4ade80; } html.dark .mdb-delta.down { background: rgba(226,68,92,.18); color: #fb7185; }
/* AI card: rainbow border like monday Sidekick */
.mdb-ai { border: 1px solid transparent; background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(120deg, #ff7a59, #fdab3d, #00c875, #0073ea, #a25ddc) border-box; }
.mdb-ai .mdb-card-h { border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent); }
.mdb-ai-spark { display: inline-block; width: 18px; height: 18px; border-radius: 4px; background: linear-gradient(135deg, #0073ea, #a25ddc 60%, #ff7a59); color: #fff; font-size: 12px; line-height: 18px; text-align: center; }
.mdb-ai-task { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: var(--bg-card); }
.mdb-ai-task b { font-size: 15px; font-weight: 600; color: var(--mdb-title); }
.mdb-ai-task p { margin: 0; font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; flex: 1; }
.mdb-tag { display: inline-flex; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
/* Tables */
.mdb-table { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.mdb-table th { text-align: start; font-size: 12.5px; font-weight: 500; color: var(--text-muted); padding: 9px 16px; border-bottom: 1px solid var(--border); }
.mdb-table th.r, .mdb-table td.r { text-align: end; }
.mdb-table th.c, .mdb-table td.c { text-align: center; }
.mdb-table td { padding: 11px 16px; border-bottom: 1px solid var(--border); color: var(--mdb-title); }
.mdb-table tbody tr:last-child td { border-bottom: none; }
.mdb-table tbody tr.click { cursor: pointer; }
.mdb-table tbody tr.click:hover td { background: var(--bg-hover); }
.mdb-table td.name { font-weight: 500; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.mdb-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 7px; vertical-align: 0; }
.mdb-status { padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; color: #fff; display: inline-block; }
.mdb-legend { display: flex; flex-direction: column; gap: 7px; font-size: 14px; color: var(--mdb-title); }
.mdb-legend > div { display: flex; justify-content: space-between; gap: 10px; }
.mdb-kv { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.mdb-kv:last-child { border-bottom: none; }
.mdb-kv span { color: var(--text-secondary); } .mdb-kv b { font-weight: 600; color: var(--mdb-title); }
.mdb-empty { color: var(--text-muted); font-size: 14px; padding: 18px 16px; text-align: center; }
.mdb-bars { display: flex; gap: 3px; align-items: flex-end; height: 120px; }
.mdb-bars > div { flex: 1; display: flex; align-items: flex-end; min-width: 2px; }
.mdb-bars > div > i { display: block; width: 100%; border-radius: 3px 3px 0 0; }
@media (max-width: 1100px) { .mdb-c3 { grid-column: span 6; } .mdb-c4 { grid-column: span 6; } .mdb-c8, .mdb-c9 { grid-column: span 12; } }
@media (max-width: 700px) { .mdb-page { padding: 16px 16px 32px; } .mdb-grid > * { grid-column: span 12 !important; } .mdb-title { font-size: 22px; } .mdb-kpi-v { font-size: 30px; } }

/* Arrange mode (⇅ Arrange): every block gets a grip bar, drag to reorder, Hide/Show per block. */
.mdb-grip { display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin-bottom: 8px; border: 1px dashed var(--mdb-blue); border-radius: 8px; background: color-mix(in srgb, var(--mdb-blue) 7%, var(--bg-card)); font-size: 13.5px; font-weight: 600; color: var(--mdb-title); cursor: grab; user-select: none; }
.mdb-grip-h { font-size: 18px; color: var(--mdb-blue); line-height: 1; }
.mdb-grip .mdb-pill { margin-inline-start: auto; }
.mdb-arrange > [draggable="true"] { cursor: grab; }
.mdb-arrange .mdb-hidden-block > :not(.mdb-grip) { opacity: .35; }
.mdb-dragging { opacity: .4; }
.mdb-drop-before { box-shadow: 0 -3px 0 0 var(--mdb-blue); }
.mdb-drop-after { box-shadow: 0 3px 0 0 var(--mdb-blue); }
.dw-card.mdb-dragging { opacity: .4; }
.dw-card .mdb-card-t { white-space: normal; }
.dw-card .mdb-card-t small { display: block; margin: 2px 0 0; }
.dw-card .mdb-card-t { font-size: 16px; }

/* 9-dot grip (⠿) on hover: drag a whole section (right corner) or one tile / chart (left corner). */
.mdb-blocks > *, .mdb-card { position: relative; }
.mdb-grip9 { position: absolute; top: -11px; z-index: 6; height: 22px; min-width: 24px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-card); color: var(--mdb-blue); font-size: 15px; line-height: 20px; text-align: center; cursor: grab; opacity: 0; transition: opacity .15s, transform .15s; box-shadow: var(--mdb-shadow); user-select: none; }
.mdb-grip9.itm { inset-inline-start: 10px; }
.mdb-grip9.blk { left: 50%; transform: translateX(-50%); font-size: 12.5px; font-weight: 600; }
.mdb-grip9.blk:hover { transform: translateX(-50%) scale(1.08); }
.mdb-grip9.blk::before { content: '⠿ '; font-size: 15px; }
.mdb-grip9:hover { transform: scale(1.08); }
.mdb-grip9:active { cursor: grabbing; }
.mdb-blocks > *:hover > .mdb-grip9.blk, .mdb-card:hover > .mdb-grip9.itm, .dw-card:hover > .mdb-grip9.itm { opacity: 1; }
@media (hover: none) { .mdb-grip9 { display: none; } }

/* ── eCommerce tab loader (js/products-section.js _prodLoader) ── */
.pld { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 44px 16px 24px; }
.pld-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pld-ic { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; color: #3f76ff; background: rgba(63,118,255,.13); animation: pldBob 1.8s ease-in-out infinite; }
.pld-ic .fvi { width: 24px; height: 24px; }
.pld-head { width: 100%; display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.pld-title { font-size: 14.5px; font-weight: 700; color: var(--text-primary); }
.pld-pct { font-size: 12px; font-weight: 700; color: #3f76ff; font-variant-numeric: tabular-nums; }
.pld-bar { width: 100%; height: 8px; border-radius: 8px; background: rgba(63,118,255,.13); overflow: hidden; }
.pld-fill { position: relative; display: block; width: 0; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #1d4ed8, #3f76ff, #60a5fa); transition: width .3s ease-out; overflow: hidden; }
.pld-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-100%); animation: pldShine 1.3s ease-in-out infinite; }
.pld-line { margin-top: 12px; min-height: 1.2em; font-size: 12.5px; color: var(--text-secondary); transition: opacity .22s ease, transform .22s ease; }
.pld-line.out { opacity: 0; transform: translateY(4px); }
.pld-skel { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 10px; }
.pld-sk { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; opacity: 0; animation: pldIn .4s ease forwards; }
.pld-sk i, .pld-sk span i { display: block; border-radius: 6px; background: linear-gradient(90deg, rgba(148,163,184,.14) 25%, rgba(148,163,184,.3) 50%, rgba(148,163,184,.14) 75%); background-size: 200% 100%; animation: pldShimmer 1.4s linear infinite; }
.pld-sk-th { width: 38px; height: 38px; flex: none; border-radius: 9px !important; }
.pld-sk span { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.pld-sk span i { height: 9px; }
.pld-sk-pr { width: 54px; height: 12px; flex: none; }
@keyframes pldBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes pldShine { 100% { transform: translateX(100%); } }
@keyframes pldShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes pldIn { to { opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .pld-ic, .pld-fill::after, .pld-sk i, .pld-sk span i { animation: none; } }

/* Client-account editor rows: always one row per item (a stale display reset collapsed them into an inline jumble, 2026-09-30). */
#caModal label.ca-perm-item { display: flex; }
#caModal label.ca-perm-item[style*="display: none"] { display: none; }
/* Folded group: the summary is the only row — rounded like a card, click expands */
.mnb-sumrow--folded { border-radius: 8px; overflow: hidden; cursor: pointer; margin-bottom: 2px; min-height: 40px; }
.mnb-sumrow--folded .mnb-sumname { justify-content: flex-start; padding: 0 6px 0 2px; min-width: 0; overflow: hidden; }
.mnb-sumrow--folded .mnb-sumname .mnb-ghead { padding: 0; margin: 0; width: 100%; min-width: 0; }
.mnb-sumrow--folded .mnb-sumname .mnb-gname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnb-sumrow--folded:hover { filter: brightness(.98); }

/* ── RTL layout (Hebrew UI, 2026-10-01). html.fv-rtl + dir="rtl" is set by
   js/i18n-he.js (default for Hebrew; Profile → Language can turn it off).
   Only the PHYSICAL rules that matter for the shell and fixed UI are
   mirrored here — flex order, logical margins and text alignment flip on
   their own under dir=rtl. ───────────────────────────────────────────── */
html.fv-rtl .sidebar { left: auto; right: 0; border-right: none; border-left: 1px solid var(--border); box-shadow: -1px 0 0 rgba(255,255,255,.06); }
html.fv-rtl .main-content { margin-left: 0; margin-right: var(--sidebar-w); transition: margin-right .22s ease, width .22s ease, max-width .22s ease; }
html.fv-rtl .sidebar.collapsed ~ .main-content { margin-left: 0; margin-right: var(--sidebar-w-collapsed); }
html.fv-rtl .sidebar.collapsed .nav-item::after { left: auto; right: calc(100% + 10px); }
html.fv-rtl .sidebar.collapsed .nav-item .nav-badge { right: auto; left: 3px; }
html.fv-rtl .nav-badge, html.fv-rtl .sidebar-signout-btn { margin-left: 0; margin-inline-start: auto; }
@media (max-width: 768px) {
  html.fv-rtl .sidebar { transform: translateX(100%); }
  html.fv-rtl .sidebar.open { transform: translateX(0); box-shadow: -4px 0 24px rgba(0,0,0,.18); }
  html.fv-rtl .main-content, html.fv-rtl .sidebar.collapsed ~ .main-content { margin-right: 0; }
}
html.fv-rtl .toast { right: auto; left: 24px; }
html.fv-rtl .lf-side-panel { right: auto; left: -480px; border-left: none; border-right: 1px solid var(--border); box-shadow: 4px 0 24px rgba(0,0,0,.12); transition: left .25s ease; }
html.fv-rtl .lf-side-panel.open { left: 0; right: auto; }
@media (max-width: 768px) { html.fv-rtl .lf-side-panel { left: -100%; } html.fv-rtl .lf-side-panel.open { left: 0; } }
html.fv-rtl #fvNotifPop { right: auto !important; left: 0 !important; border-left: none !important; border-right: 1px solid var(--border) !important; box-shadow: 16px 0 50px rgba(0,0,0,.2) !important; }
html.fv-rtl #fvMfaNudge { right: auto !important; left: 18px !important; }
html.fv-rtl #fvDock { right: auto !important; left: 0 !important; }
html.fv-rtl #fvDockPill { border-radius: 0 10px 10px 0 !important; box-shadow: 4px 4px 18px rgba(63,118,255,.32) !important; }
html.fv-rtl #fvDockPill:hover { transform: translateX(2px) !important; }
html.fv-rtl #fvDockTeaser { right: auto !important; left: 100% !important; margin-right: 0 !important; margin-left: 8px !important; }
html.fv-rtl #fvDockPanel { right: auto !important; left: 0 !important; box-shadow: 16px 0 48px rgba(0,0,0,.22) !important; }
html.fv-rtl .fvDockMenu { right: auto !important; left: 8px !important; }
html.fv-rtl .gm-compose { right: auto; left: 28px; }
html.fv-rtl .ib-shell .ib-rail, html.fv-rtl .gm-rail { border-right: none; border-left: 1px solid var(--border); }
html.fv-rtl .gm-folder { text-align: right; border-radius: 100px 0 0 100px; }
html.fv-rtl .gm-row { border-left: none; border-right: 3px solid transparent; }
html.fv-rtl .gm-row.unread { border-right-color: var(--accent); }
html.fv-rtl .gmr.cur { box-shadow: inset -3px 0 0 var(--accent); }
html.fv-rtl .gmr .gm-row-acts { right: auto; left: 6px; }
html.fv-rtl .ib-chb { right: auto; left: -3px; }
html.fv-rtl .ib-lb-nav.prev { left: auto; right: 16px; } html.fv-rtl .ib-lb-nav.next { right: auto; left: 16px; }
html.fv-rtl .crm-scope-chip { margin-left: 0; margin-inline-start: 8px; }
html.fv-rtl .fvpm { text-align: right; }

/* Projects: ✨ AI board wizard */
.proj-ai-ov { position: fixed; inset: 0; background: rgba(16,24,40,.45); z-index: 30500; display: flex; align-items: center; justify-content: center; padding: 16px; }
.proj-ai { background: var(--bg-card); border-radius: 14px; box-shadow: 0 18px 48px rgba(16,24,40,.28); width: min(760px, 100%); max-height: 92vh; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.proj-ai-h { display: flex; align-items: center; gap: 10px; min-width: 0; } .proj-ai-h b { font-size: .95rem; white-space: nowrap; } .proj-ai-h .mnb-pop-x { margin-inline-start: auto; }
.proj-ai-body { overflow: auto; flex: 1; min-height: 160px; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.proj-ai-msg { border-radius: 12px; padding: 10px 12px; max-width: 92%; font-size: .84rem; line-height: 1.45; }
.proj-ai-msg.me { align-self: flex-end; background: var(--accent); color: #fff; white-space: pre-wrap; }
.proj-ai-msg.ai { align-self: flex-start; background: var(--bg-elevated); border: 1px solid var(--border); }
.proj-ai-q { margin-top: 6px; }
.proj-ai-chip { display: inline-block; border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: .76rem; margin: 4px 4px 0 0; cursor: pointer; background: var(--bg-card); color: var(--text); }
.proj-ai-chip:hover { border-color: var(--accent); color: var(--accent); }
.proj-ai-prev { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--bg-card); }
.proj-ai-prev table { width: 100%; border-collapse: collapse; font-size: .78rem; } .proj-ai-prev th, .proj-ai-prev td { padding: 4px 6px; border-bottom: 1px solid var(--border); text-align: start; vertical-align: top; } .proj-ai-prev th { color: var(--text-muted); font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.proj-ai-comp { display: flex; gap: 8px; align-items: stretch; }
.proj-ai-comp textarea { flex: 1; min-height: 64px; border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; font: inherit; font-size: .86rem; resize: vertical; background: var(--bg-card); color: var(--text); }
.proj-ai-side { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.proj-ai-busy { color: var(--text-muted); font-size: .78rem; padding: 2px 4px; }

/* ═══ Email editor v2 (2026-10-09): layout, brand kit, inline formatting, new blocks ═══ */
/* Hover tool bar on every top-level block (the CSS existed, nothing emitted it). */
.email-block-tools { z-index: 7; }
.email-block-tools button { display: inline-flex; align-items: center; justify-content: center; }
.email-block-tools button svg { width: 13px; height: 13px; }
.email-block-tools button.on { background: #fff; color: var(--accent); }
.email-block-tools button.on svg { stroke: var(--accent); }
/* Full-width blocks pull themselves out of the content margins (negative margins set inline). */
.email-block.email-block-full { outline-offset: -2px; }
/* Column width handle (between neighbouring columns of a row). */
.email-col-rs { position: absolute; top: 0; bottom: 0; right: -4px; width: 8px; cursor: col-resize; z-index: 6; border-radius: 3px; opacity: 0; transition: opacity .12s; }
.email-col-rs::after { content: ""; position: absolute; top: 50%; left: 3px; width: 2px; height: 28px; margin-top: -14px; border-radius: 1px; background: var(--accent); }
.email-canvas[dir="rtl"] .email-col-rs { right: auto; left: -4px; }
.email-block:hover .email-col-rs, .email-block.sel .email-col-rs { opacity: .55; }
.email-col-rs:hover, body.em-col-resizing .email-col-rs { opacity: 1 !important; background: rgba(63,118,255,.12); }
body.em-col-resizing, body.em-col-resizing * { cursor: col-resize !important; }
.email-col-tip { position: fixed; z-index: 100001; background: #0f172a; color: #fff; font: 600 11px system-ui, sans-serif; padding: 3px 7px; border-radius: 5px; pointer-events: none; white-space: nowrap; }
/* Drop placeholders only while something is being dragged (quieter canvas). */
body:not(.em-dragging) .email-col-add, body:not(.em-dragging) .email-col-hint { display: none; }
/* Colour field: empty value = "Transparent" chip instead of the picker's black. */
.email-color-wrap { position: relative; display: flex; align-items: center; gap: 4px; }
.email-color-wrap .email-color { flex: 1; min-width: 0; }
.email-color-wrap.is-empty .email-color { opacity: 0; }
.email-color-wrap.is-empty::before { content: "Transparent"; position: absolute; left: 0; top: 0; right: 0; height: 32px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 7px; background: repeating-conic-gradient(#e5e7eb 0 25%, #fff 0 50%) 0 0 / 12px 12px; font-size: 11px; color: #4b5563; display: flex; align-items: center; justify-content: center; pointer-events: none; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.email-color-wrap.is-empty:has(.email-color-x)::before { right: 26px; }
.email-color-x { flex: 0 0 auto; border: none; background: var(--bg-hover); border-radius: 5px; width: 22px; height: 22px; cursor: pointer; color: var(--text-muted); font-size: 11px; line-height: 1; }
.email-color-x:hover { color: var(--text); }
/* Inline formatting bar (text / heading editing). */
.email-fmt-bar { position: fixed; z-index: 100000; display: flex; align-items: center; gap: 2px; background: #0f172a; border-radius: 9px; padding: 4px; box-shadow: 0 10px 26px rgba(15,23,42,.35); }
.email-fmt-bar button { border: none; background: transparent; color: #fff; width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font: 700 13px system-ui, sans-serif; cursor: pointer; }
.email-fmt-bar button:hover { background: rgba(255,255,255,.14); }
.email-fmt-bar button svg { width: 15px; height: 15px; stroke: #fff; }
.email-fmt-bar .sep { width: 1px; height: 18px; background: rgba(255,255,255,.22); margin: 0 3px; }
.email-fmt-bar .fmt-color { position: relative; width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 700 13px system-ui, sans-serif; cursor: pointer; }
.email-fmt-bar .fmt-color:hover { background: rgba(255,255,255,.14); }
.email-fmt-bar .fmt-color span { border-bottom: 3px solid #f59e0b; line-height: 1; }
.email-fmt-bar .fmt-color input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.email-editing ul, .email-editing ol { margin: 6px 0; padding-left: 22px; }
/* Rail → Saved tab. */
.email-sv-row { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--bg-card); border-radius: 8px; padding: 7px 8px; margin-bottom: 6px; cursor: pointer; font-size: .74rem; color: var(--text); }
.email-sv-row:hover { border-color: var(--accent); background: var(--bg-hover); }
.email-sv-row[draggable="true"] { cursor: grab; }
.email-sv-ic { display: inline-flex; color: var(--accent); flex: 0 0 auto; }
.email-sv-ic svg { width: 16px; height: 16px; }
.email-sv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-sv-row .email-mi-del { flex: 0 0 auto; }
/* Footer preview is clickable → General → Footer. */
.email-footer-preview.email-footer-edit { pointer-events: auto; cursor: pointer; opacity: 1; }
.email-footer-preview.email-footer-edit:hover { outline: 2px dashed #c7d6ff; outline-offset: 2px; border-radius: 6px; }
/* Table block cell grid in the inspector. */
.email-table-grid { display: grid; gap: 3px; margin-bottom: 8px; align-items: center; }
.email-table-grid .email-mi-del { height: 22px; }
/* Brand kit dialog. */
.emkit { display: flex; flex-direction: column; gap: 14px; }
.emkit-sec { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.emkit-h { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.emkit-h span { font-weight: 400; color: var(--text-muted); font-size: 11.5px; }
.emkit-fonts { width: 100%; border-collapse: collapse; font-size: .78rem; }
.emkit-fonts th { text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 2px 6px 4px; font-weight: 600; }
.emkit-fonts td { padding: 4px 6px; border-top: 1px solid var(--border); vertical-align: middle; }
.emkit-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--border); }
.emkit-row:first-of-type { border-top: none; }
.emkit-prev { flex: 0 0 200px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.emkit-ctl { flex: 1; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.emkit-ctl .email-input { width: auto; padding: 5px 6px; font-size: .76rem; }
.emkit-ctl select.email-input { max-width: 150px; }
.emkit-ctl .email-color { height: 28px; padding: 1px; }
.emkit-chk { display: inline-flex; align-items: center; gap: 3px; font-size: .7rem; font-weight: 700; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; height: 28px; cursor: pointer; }
.emkit-sample { margin-top: 10px; padding: 14px 16px; border: 1px dashed var(--border); border-radius: 8px; background: #fff; }
.emkit-logo { margin-top: 6px; height: 64px; border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #fff; color: #9ca3af; font-size: 11px; }
.emkit-logo.dark { background: #0f172a; }
.emkit-logo img { max-height: 48px; max-width: 80%; }
.emkit-sw { width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(0,0,0,.12); }
.email-canvas.is-mobile a.em-bt-full { width: 100% !important; }

/* ═══ Email editor v2 — chrome restyle after the design mockup (2026-10-09) ═══ */
/* Top bar buttons: one compact look. */
.email-topbar .proj-secondary-btn, .email-topbar .proj-primary-btn { height: 32px; padding: 0 11px; border-radius: 7px; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.email-view-toggle { border: 1px solid var(--border); border-radius: 7px; background: var(--bg-card); padding: 2px; }
.email-view-toggle button { width: 30px; height: 26px; border-radius: 5px; }
/* Rail: tabs + grouped tiles. */
.email-rail { width: 196px; padding: 12px; }
.email-rail-tabs { margin-bottom: 12px; }
.email-rail-tabs button { padding: 5px 4px; font-size: .72rem; }
.email-rail .email-rail-title { margin: 12px 0 7px; font-size: 10.5px; letter-spacing: .6px; }
.email-rail .email-rail-title:first-of-type { margin-top: 2px; }
.email-rail .email-palette { gap: 7px; }
.email-rail .email-pal-btn { position: relative; padding: 10px 4px 9px; border-radius: 8px; border-color: #e3e7ee; color: #2b3240; font-size: .7rem; font-weight: 500; gap: 5px; }
html.dark .email-rail .email-pal-btn { border-color: var(--border); color: var(--text); }
.email-rail .email-pal-btn .email-pal-ic svg { width: 18px; height: 18px; stroke: #3b4252; stroke-width: 1.8; }
html.dark .email-rail .email-pal-btn .email-pal-ic svg { stroke: var(--text-secondary); }
.email-rail .email-pal-btn:hover .email-pal-ic svg { stroke: var(--accent); }
.email-pal-new { position: absolute; top: -6px; right: -4px; background: #0f9d7a; color: #fff; font: 700 9px system-ui, sans-serif; padding: 1px 5px; border-radius: 8px; letter-spacing: .3px; }
.email-rail .email-pal-gallery { width: 100%; margin-top: 14px; flex-direction: row; justify-content: center; padding: 8px; }
/* Inspector: label-left rows, switches, compact controls. */
.email-inspector { width: 300px; padding: 14px; }
.email-inspector .email-insp-sec { font-size: 10.5px; letter-spacing: .6px; margin: 14px 0 8px; }
.email-insp-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.email-insp-title-ic { display: inline-flex; color: var(--accent); }
.email-insp-title-ic svg { width: 18px; height: 18px; }
.email-insp-title button { margin-left: auto; background: none; border: 1px solid transparent; color: #ef4444; cursor: pointer; font-size: 11.5px; padding: 3px 8px; border-radius: 6px; }
.email-insp-title button:hover { background: rgba(239,68,68,.08); }
.email-inspector > .email-field:not(.email-field-stack):not(:has(textarea)) { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; min-height: 30px; }
.email-inspector > .email-field:not(.email-field-stack):not(:has(textarea)) > label { flex: 0 0 104px; margin: 0; font-size: 11.5px; line-height: 1.3; color: #4b5563; }
html.dark .email-inspector > .email-field > label { color: var(--text-secondary); }
.email-inspector > .email-field:not(.email-field-stack):not(:has(textarea)) > label > span { display: block; font-size: 10px; line-height: 1.25; }
.email-inspector > .email-field:not(.email-field-stack):not(:has(textarea)) > :not(label) { flex: 1; min-width: 0; }
.email-inspector .email-input { padding: 5px 8px; font-size: .78rem; border-radius: 6px; }
.email-inspector input[type="number"].email-input { padding-left: 6px; padding-right: 2px; }
.email-inspector .email-seg { border-radius: 6px; }
.email-inspector .email-seg button { padding: 5px 7px; font-size: .74rem; }
.email-inspector .email-align { border-radius: 6px; }
.email-inspector .email-color, .email-inspector .email-color-wrap.is-empty::before { height: 28px; border-radius: 6px; }
.email-inspector .fv-swatches { margin-top: 4px; }
.email-inspector .email-insp-hint { margin: -2px 0 10px; }
/* T R B L groups and "px" units. */
.email-trbl { display: flex; gap: 4px; }
.email-trbl .email-input { width: 100%; }
.email-unit { display: flex; align-items: center; gap: 5px; }
.email-unit .email-input { width: 64px; flex: 0 0 64px; text-align: center; }
.email-unit span { font-size: 11px; color: var(--text-muted); }
/* Column widths bar (mirrors the canvas handle). */
.email-colw-bar { display: flex; height: 22px; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.email-colw-bar span { display: flex; align-items: center; justify-content: center; font: 600 10.5px system-ui, sans-serif; color: #4b5563; background: #f3f6fb; border-left: 2px solid var(--accent); min-width: 0; }
.email-colw-bar span:first-child { border-left: none; background: #e8efff; color: #2f5fd9; }
html.dark .email-colw-bar span { background: var(--bg-hover); color: var(--text-secondary); }
.email-img-chip { width: 44px; height: 28px; flex: 0 0 44px; border-radius: 5px; border: 1px solid var(--border); background-size: cover; background-position: center; }
/* Booleans as switches (inspector + brand kit). */
.email-inspector .email-mob-hide, .emkit .email-mob-hide { justify-content: space-between; gap: 10px; font-size: .78rem; min-height: 28px; }
.email-inspector .email-mob-hide input[type="checkbox"], .emkit .email-mob-hide input[type="checkbox"] { order: 2; appearance: none; -webkit-appearance: none; width: 34px; height: 20px; border-radius: 10px; background: #cfd6e2; position: relative; cursor: pointer; flex: 0 0 auto; margin: 0; transition: background .15s; }
.email-inspector .email-mob-hide input[type="checkbox"]::after, .emkit .email-mob-hide input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
.email-inspector .email-mob-hide input[type="checkbox"]:checked, .emkit .email-mob-hide input[type="checkbox"]:checked { background: var(--accent); }
.email-inspector .email-mob-hide input[type="checkbox"]:checked::after, .emkit .email-mob-hide input[type="checkbox"]:checked::after { left: 16px; }
.email-mob-sec { padding: 7px 10px; }
/* Canvas: "Full width" badge on full-bleed blocks. */
.email-block.email-block-full::before { content: "Full width"; position: absolute; top: 6px; left: 8px; z-index: 6; background: rgba(15,23,42,.72); color: #fff; font: 600 10px system-ui, sans-serif; padding: 2px 7px; border-radius: 5px; pointer-events: none; opacity: 0; transition: opacity .12s; }
.email-block.email-block-full:hover::before, .email-block.email-block-full.sel::before { opacity: 1; }
.email-canvas[dir="rtl"] .email-block.email-block-full::before { left: auto; right: 8px; }
/* Brand kit: left navigation + cards. */
.emkit-wrap { display: flex; gap: 16px; align-items: flex-start; }
.emkit-nav { flex: 0 0 168px; position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; }
.emkit-nav-btn { text-align: left; border: none; background: none; padding: 8px 10px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; }
.emkit-nav-btn:hover { background: var(--bg-hover); color: var(--accent); }
.emkit-nav-note { font-size: 11.5px; line-height: 1.45; color: var(--text-muted); padding: 10px 8px 0; }
.emkit { flex: 1; min-width: 0; }
.emkit-sec { scroll-margin-top: 8px; }

/* ══ Clean top for Contacts / Companies / Deals (2026-10-10 · DealsClean / ContactsClean / CompaniesClean mockups) ═══
   Row 1 .lf-top-hd: title · count · kind/pipeline · views · New. Row 2 .lf-tb-row: search · saved views ·
   Filter · quick filters as quiet chips · tools · Hide · Column. Row 3: the slim KPI strip (.lf-stat-card--mini). */
.lf-top-hd { display: flex; align-items: center; gap: 10px; min-height: 34px; margin: 4px 0 8px; flex-wrap: wrap; }
.lf-top-title { font-size: 1.18rem; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; line-height: 1.2; }
.lf-top-count, .lf-top-hd .crm-count { font-size: .8rem; font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.lf-top-count #leadsResultOf { display: none; }   /* "of 28,137" = the whole workspace, not the list — meaningless beside a list count */
.lf-top-sub { display: inline-flex; align-items: center; height: 28px; padding: 0 8px; border-radius: 6px; border: 1px solid transparent; background: transparent; font: inherit; font-size: .76rem; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
select.lf-top-pipe { cursor: pointer; appearance: auto; }
select.lf-top-pipe:hover, .lf-top-hd .lf-top-quiet { border-color: transparent; background: var(--bg-hover); }
.lf-top-hd .lf-top-quiet { background: transparent; color: var(--accent); font-weight: 700; }
.lf-top-hd .lf-top-quiet:hover { background: var(--bg-hover); }
.lf-top-sp { flex: 1; }
.lf-top-hd .crm-add-btn.lf-top-new { height: 30px; padding: 0 14px; font-size: .8rem; }
.lf-top-hd .crm-scope-chip { margin-left: 0; }
.lf-tb-row { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.lf-tb-row #unifiedSearchInput { height: 30px !important; border-radius: 7px !important; border: 1px solid var(--border) !important; }
.lf-tb-row .mnb-toolbtn:not(.lf-tb-keep) { border-color: transparent; background: transparent; color: var(--text-secondary); }
.lf-tb-row .mnb-toolbtn:not(.lf-tb-keep):hover { background: var(--bg-hover); color: var(--text-primary); }
.lf-tb-row .mnb-toolbtn.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.lf-tb-row .lf-tb-keep { border-color: var(--border); background: var(--bg-card); color: var(--text-secondary); }
.lf-tb-row .lf-tb-keep.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.lf-tb-row .am-icon-btn.lf-tb-ico { border-color: transparent; background: transparent; }
.lf-tb-row .am-icon-btn.lf-tb-ico:hover { background: var(--bg-hover); }
.lf-tb-row .mnb-toolbtn.lf-tb-ico { width: 30px; padding: 0; justify-content: center; font-size: .9rem; }
.lf-tb-row .lf-quick-filters select, .lf-tb-row .lf-quick-filters .crm-db-filt { border-color: transparent; background-color: transparent; height: 30px; font-size: .74rem; }
.lf-tb-row .lf-quick-filters select { padding-left: 7px !important; padding-right: 22px !important; background-position: right 4px center; background-size: 16px; }
.lf-tb-row .lf-quick-filters #ufAssetBtn { padding: 0 8px !important; }
.lf-tb-row .am-icon-btn.lf-tb-ico { width: 28px; }
.lf-tb-row .lf-quick-filters select:hover, .lf-tb-row .lf-quick-filters .crm-db-filt:hover { background-color: var(--bg-hover); border-color: transparent; }
.lf-tb-row .lf-quick-filters .crm-db-filt.on { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: transparent; color: var(--accent); }
.lf-tb-row .lf-tb-cur { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 7px; min-width: 0; max-width: none; }
.lf-tb-row .lf-tb-cur:hover { background: var(--bg-hover); }
.lf-tb-row .lf-tb-cur > span { font-size: .9rem; }
.lf-tb-row .lf-tb-cur select { font-size: .72rem; }
/* saved-view tabs ("All leads · non rejected") as a segmented control inside the toolbar row */
.lf-tb-row .lf-viewtabs { display: inline-flex; gap: 0; margin: 0 4px 0 0; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; height: 30px; flex-wrap: nowrap; }
.lf-tb-row .lf-viewtab { border: 0; border-left: 1px solid var(--border); border-radius: 0; padding: 0 10px; font-size: .76rem; font-weight: 600; height: 28px; background: var(--bg-card); }
.lf-tb-row .lf-viewtab:first-child { border-left: 0; }
.lf-tb-row .lf-viewtab:hover { background: var(--bg-hover); border-radius: 0; }
.lf-tb-row .lf-viewtab.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border-bottom: 0; font-weight: 800; }
/* the slim KPI strip: grey blocks, 6 px apart, label over value · sub, ~40 px tall */
.lf-crm-stats--compact { gap: 6px; margin-bottom: 10px; }
.lf-stat-card--mini { border: 1px solid transparent; background: #f5f8fa; border-radius: 4px; padding: 5px 9px; min-height: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; column-gap: 5px; row-gap: 0; box-shadow: none; }
html.dark .lf-stat-card--mini { background: var(--bg-hover); }
.lf-stat-card--mini::before { display: none; }
.lf-stat-card--mini .lf-stat-label { flex-basis: 100%; font-size: .56rem; letter-spacing: .3px; color: var(--text-muted); margin: 0; }
.lf-stat-card--mini .lf-stat-value { font-size: .82rem; font-weight: 800; line-height: 1.3; flex: 0 0 auto; overflow: visible; }
.lf-stat-card--mini .lf-stat-sub { font-size: .6rem; line-height: 1.3; flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lf-stat-card--mini.clickable { cursor: pointer; }
.lf-stat-card--mini.clickable:hover { border-color: var(--accent); }
.lf-stat-card--mini.on { border-color: var(--accent); background: var(--accent-light, #eef3ff); }
@media (max-width: 1100px) { .lf-crm-stats--compact { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 640px) { .lf-crm-stats--compact { grid-template-columns: repeat(2, 1fr) !important; } .lf-top-title { max-width: 60vw; } }

/* ══ Deals bulk bar (2026-10-10): the same card as the Leads bulk bar — white, accent frame, labelled controls, never truncated ══ */
.crm-bulk-bar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 9999; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; width: max-content; max-width: min(96vw, 1200px); background: var(--bg-card); color: var(--text-primary); border: 1.5px solid var(--accent); border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.22); padding: 10px 16px; }
.crm-bulk-bar > b { font-size: .85rem; font-weight: 700; color: var(--accent); white-space: nowrap; margin-right: 4px; }
.crm-bulk-bar select, .crm-bulk-bar input, .crm-bulk-bar button, .crm-bulk-bar .crm-bulk-date { flex: none; height: 32px; box-sizing: border-box; font: inherit; font-size: .8rem; font-weight: 600; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); padding: 0 10px; outline: none; white-space: nowrap; width: auto; min-width: 0; max-width: none; }
.crm-bulk-bar select { padding-right: 28px; background-position: right 8px center; background-size: 16px; cursor: pointer; }
.crm-bulk-bar select option { color: #111; }
.crm-bulk-bar .crm-bulk-date { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px 0 10px; }
.crm-bulk-bar .crm-bulk-date span { font-size: .76rem; color: var(--text-secondary); font-weight: 600; }
.crm-bulk-bar .crm-bulk-date input { border: none; height: 28px; padding: 0 2px; font-weight: 500; }
.crm-bulk-bar button { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: #e0e7ff; color: #4338ca; border-color: transparent; }
.crm-bulk-bar button:hover { background: #c7d2fe; }
.crm-bulk-bar button.danger { background: #fee2e2; color: #dc2626; }
.crm-bulk-bar button.danger:hover { background: #fecaca; }
.crm-bulk-bar button.crm-bulk-x { background: transparent; color: var(--text-muted); border-color: transparent; padding: 0 8px; font-size: .95rem; }
.crm-bulk-bar button.crm-bulk-x:hover { background: var(--bg-hover); color: var(--text-primary); }
html.dark .crm-bulk-bar button { background: rgba(99,102,241,.22); color: #c7d2fe; }
html.dark .crm-bulk-bar button.danger { background: rgba(220,38,38,.22); color: #fca5a5; }
/* contact picker rows: name + e-mail · phone */
.crm-drop-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.crm-drop-txt > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-drop-txt small { font-size: .68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ══ List column chips (Deals / Companies, 2026-10-11): the lists of the linked contacts ══ */
.crm-chip-list { background: #eef2ff; color: #4338ca; border-radius: 100px; gap: 5px; }
.crm-chip-list-form { background: #e5f5f8; color: #1877f2; }
.crm-chip-list-lp { background: #fef3c7; color: #92400e; }
.crm-chip-list-more { background: #eef2f6; color: #516f90; cursor: default; }
.lf-srcorg-out { background: #eef2ff; color: #4338ca; border-radius: 10px; padding: 0 6px; margin-left: 4px; font-weight: 600; }
.crm-chip-task { background: #e5f5f8; color: #0091ae; border-radius: 100px; gap: 4px; max-width: 170px; }
.crm-chip-task.due-overdue { background: #fee2e2; color: #b91c1c; }
.crm-chip-task.due-today { background: #fef3c7; color: #92400e; }
.crm-chip-task.due-none { background: #eef2f6; color: #516f90; }
.crm-chip-task .crm-chip-task-ic { font-size: 10px; flex: none; }
.crm-chip-list-ic { display: inline-flex; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.85); align-items: center; justify-content: center; font-size: 9px; font-weight: 800; flex: none; }
/* ══ Filter panel, compact (2026-10-11): one header line, 28 px controls, Match all / any, ✕ always inside the viewport ══ */
.af-panel { padding: 12px 14px 12px; border-radius: 10px; min-width: min(560px, calc(100vw - 24px)); max-width: min(820px, calc(100vw - 24px)); }
.af-header { gap: 8px; margin-bottom: 10px; flex-wrap: nowrap; }
.af-title { font-weight: 800; font-size: .84rem; color: var(--text-primary); white-space: nowrap; }
.af-count { font-size: .72rem; color: var(--text-muted); background: var(--bg-hover); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.af-mode { display: inline-flex; align-items: center; gap: 0; margin-left: 4px; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; height: 26px; }
.af-mode-l { font-size: .68rem; color: var(--text-muted); padding: 0 7px; border-right: 1px solid var(--border); height: 100%; display: inline-flex; align-items: center; }
.af-mode button { border: none; background: var(--bg-card); color: var(--text-secondary); font: inherit; font-size: .72rem; font-weight: 700; padding: 0 9px; height: 100%; cursor: pointer; }
.af-mode button + button { border-left: 1px solid var(--border); }
.af-mode button.on { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.af-actions { margin-left: auto; display: flex; gap: 4px; align-items: center; flex: none; }
.af-x { width: 26px; height: 26px; border: none; background: none; color: var(--text-muted); border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.af-x:hover { background: var(--bg-hover); color: var(--text-primary); }
.af-btn-ghost, .af-btn-outline { height: 26px; padding: 0 9px; font-size: .74rem; }
.af-rules { gap: 6px; }
.af-rule-row { gap: 6px; }
.af-lbl { font-size: .74rem; color: var(--text-secondary); min-width: 40px; flex-shrink: 0; }
.af-rule-row select, .af-rule-row input[data-af-val], .af-rule-row select[data-af-val] { height: 28px !important; padding: 0 8px !important; font-size: .74rem !important; border-radius: 6px !important; }
.af-rule-row select { padding-right: 24px !important; background-position: right 6px center; background-size: 14px; }
.af-add-rule { margin-top: 8px; font-size: .76rem; }
@media (max-width: 720px) { .af-rule-row { flex-wrap: wrap; } .af-rule-row .af-lbl { flex-basis: 100%; } .af-header { flex-wrap: wrap; } }

/* ══ List sources (2026-10-11): icons in the rail, chips in the header, right-click menu, Source column origin ══ */
.lf-src-ics { display: inline-flex; gap: 2px; margin-left: 5px; vertical-align: middle; flex: none; }
.lf-src-ics i { display: inline-flex; width: 14px; height: 14px; border-radius: 50%; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; font-style: normal; }
.lf-src-ics i.more { background: var(--bg-hover); color: var(--text-muted); font-size: 8px; }
.lf-src-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px 2px 4px; font-size: .72rem; color: var(--text-primary); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.lf-src-chip i { display: inline-flex; width: 16px; height: 16px; border-radius: 50%; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; font-style: normal; flex: none; }
.lf-ctx { position: fixed; z-index: 10050; min-width: 190px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 28px rgba(16,24,40,.18); padding: 4px; }
.lf-ctx button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: none; font: inherit; font-size: .8rem; color: var(--text-primary); padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.lf-ctx button span { margin-left: auto; color: var(--text-muted); font-size: .72rem; }
.lf-ctx button:hover { background: var(--bg-hover); }
.lf-ctx button.on { color: var(--accent); font-weight: 700; }
.lf-ctx button.danger { color: #dc2626; }
.lf-ctx hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }
.lf-srcorg { display: block; font-size: .66rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-top: 1px; }

/* ── Tasks tab (js/tasks-section.js, 2026-10-11): the Deals grid applied to tasks.
   Reuses .lf-top-hd / .lf-tb-row / .lf-stat-card--mini / .lfg-card / .am-table.lf-grouped /
   .crm-grid-total; everything below is what tasks add — the related-to chips (contact ·
   company · deal), the hover quick actions, the inline add row and the detail drawer. ── */
.tk-wrap { display: flex; height: calc(100vh - 58px); min-height: 0; }
.tk-pane { flex: 1; min-width: 0; overflow-y: auto; padding: 0 0 70px 14px; position: relative; }
.tk-pane .lf-top-hd { margin-right: 14px; }
.tk-pane .lf-tb-row { margin-right: 14px; }
.tk-pane .lf-crm-stats { margin-right: 14px; margin-bottom: 10px; }
.tk-pane .leads-tbl-wrap { padding-right: 14px; max-height: none; overflow: auto; }
.tk-ent.contact.unlinked { border-style: dashed; color: var(--text-secondary); }
.tk-ent.contact.unlinked i { background: #a0a4ad; }
.tk-seg { display: inline-flex; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 7px; padding: 2px; gap: 2px; }
.tk-seg button { height: 24px; padding: 0 10px; border-radius: 5px; font: inherit; font-weight: 600; font-size: .74rem; color: var(--text-secondary); background: none; border: 0; cursor: pointer; white-space: nowrap; }
.tk-seg button.on { background: var(--bg-card); color: var(--text); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.tk-search { display: flex; align-items: center; gap: 6px; height: 30px; border: 1px solid var(--border); border-radius: 7px; padding: 0 9px; width: 250px; color: var(--text-muted); background: var(--bg-input); }
.tk-search input { border: 0; background: none; outline: 0; flex: 1; min-width: 0; font: inherit; font-size: 12.5px; color: var(--text); }
.mnb-toolbtn.tk-sm { height: 24px; font-size: .7rem; margin-left: 6px; }
.tk-table td { height: 32px !important; }
.tk-task { display: flex; align-items: center; gap: 7px; min-width: 0; height: 32px; }
.tk-cb { width: 18px; height: 18px; min-width: 18px; border-radius: 50%; border: 1.5px solid var(--border-hover); background: var(--bg-card); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; color: #fff; transition: all .12s; flex: none; }
.tk-cb svg { width: 9px; height: 9px; opacity: 0; }
.tk-cb:hover { border-color: #00c875; background: #e6faf1; }
tr.tk-row.done .tk-cb { background: #00c875; border-color: #00c875; }
tr.tk-row.done .tk-cb svg { opacity: 1; }
tr.tk-row.done .tk-ttl { text-decoration: line-through; color: var(--text-muted); }
.tk-ttl { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.tk-ex { color: var(--text-muted); font-size: 11px; flex: none; }
tr.tk-row { cursor: pointer; }
tr.tk-row.sel td { background: #eaf2ff; }
.tk-rel { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.tk-ent { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px 0 2px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); font: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--text); cursor: pointer; flex: none; max-width: 100%; overflow: hidden; }
.tk-ent:hover { border-color: var(--border-hover); background: var(--bg-hover); }
.tk-ent span { overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.tk-ent i { width: 17px; height: 17px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 8.5px; font-weight: 800; color: #fff; flex: none; }
.tk-ent.contact i { background: var(--c, #3f76ff); }
.tk-ent.company { border-radius: 5px; }
.tk-ent.company i { border-radius: 3px; background: #e3f6f5; color: #00a9a0; }
.tk-ent.deal { border-radius: 5px; background: #e6faf1; border-color: transparent; color: #118a5a; }
.tk-ent.deal i { border-radius: 3px; background: #118a5a; color: #fff; }
.tk-ent.deal.lost { background: #fdeef1; color: #e2445c; }
.tk-ent.deal.lost i { background: #e2445c; }
.tk-ent small { font-weight: 500; opacity: .8; font-size: 11px; }
.tk-ent-add { width: 20px; height: 20px; border-radius: 50%; border: 1px dashed var(--border-hover); background: none; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 800; font-size: 12px; cursor: pointer; flex: none; opacity: 0; padding: 0; }
tr.tk-row:hover .tk-ent-add { opacity: 1; }
.tk-nolink { font-size: 11.5px; color: var(--text-muted); }
.tk-av { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 800; color: #fff; background: var(--c, #6366f1); flex: none; }
.tk-av.none { background: none; border: 1px dashed var(--border-hover); color: var(--text-muted); }
.tk-av.sq { width: 34px; height: 34px; border-radius: 8px; }
.tk-owner { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 500; color: var(--text); background: none; border: 0; cursor: pointer; padding: 0; max-width: 100%; }
.tk-ownn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-due { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font: inherit; font-size: 11.5px; font-weight: 700; background: var(--bg-elevated); color: var(--text-secondary); border: 0; cursor: pointer; white-space: nowrap; }
.tk-due.over { background: #fdeef1; color: #e2445c; }
.tk-due.today { background: #fff4e3; color: #b7791f; }
.tk-due.none { color: var(--text-muted); background: none; border: 1px dashed var(--border); }
.tk-prio { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; font-size: 12px; color: var(--c); background: none; border: 0; cursor: pointer; padding: 0; }
.tk-prio i { width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
.tk-pdot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; flex: none; }
td.tk-status-td { padding: 0 !important; }
.tk-status { display: flex; align-items: center; justify-content: center; width: 100%; height: 32px; color: #fff; font: inherit; font-weight: 600; font-size: 12px; border: 0; cursor: pointer; }
.tk-status:hover { filter: brightness(.94); }
.tk-src { font-size: 12px; color: var(--text-secondary); }
.tk-note { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; display: block; }
.tk-quick { display: flex; gap: 2px; justify-content: center; }
.tk-quick .crm-icon-btn { width: 24px; height: 24px; }
.tk-quick .crm-quick.wa:hover { color: #25d366; }
.crm-grid .tk-quick .crm-quick { width: 24px; }
.tk-mini { display: flex; height: 14px; width: 100%; border-radius: 3px; overflow: hidden; margin: 6px 0; }
.tk-mini i { display: block; height: 100%; }
.tk-addrow { display: flex; align-items: center; gap: 6px; height: 34px; }
.tk-addrow input { flex: 1; min-width: 200px; border: 0; outline: 0; background: none; font: inherit; font-size: 12.5px; color: var(--text); height: 30px; }
.tk-parsed { display: inline-flex; gap: 4px; flex: none; }
.tk-addhint { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.tk-pch { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #eaf2ff; color: #579bfc; }
.tk-pch.p { background: #fdeef1; color: #e2445c; } .tk-pch.u { background: #f3ebfb; color: #a25ddc; } .tk-pch.t { background: #fff4e3; color: #b7791f; } .tk-pch.co { background: #e3f6f5; color: #00a9a0; } .tk-pch.dl { background: #e6faf1; color: #118a5a; }
tr.tk-add.on td { background: var(--bg-card); }
.tk-empty { padding: 22px; text-align: center; color: var(--text-muted); font-size: 12.5px; }
/* drawer */
.tk-aside { width: 0; flex: none; border-left: 1px solid var(--border); background: var(--bg-card); overflow: hidden; transition: width .2s cubic-bezier(.4,0,.2,1); }
.tk-aside.open { width: 420px; }
.tk-drawer { width: 420px; height: 100%; overflow-y: auto; padding: 16px 18px 30px; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; }
.tk-dhd { display: flex; align-items: flex-start; gap: 8px; }
.tk-dtitle { flex: 1; min-width: 0; font: inherit; font-size: 15px; font-weight: 800; line-height: 1.3; border: 1px solid transparent; border-radius: 6px; background: none; outline: 0; width: 100%; resize: none; color: var(--text); padding: 2px 4px; }
.tk-dtitle:hover { border-color: var(--border); } .tk-dtitle:focus { border-color: var(--accent); background: var(--bg-input); }
.tk-dclose { width: 28px; height: 28px; border-radius: 6px; color: var(--text-muted); border: 0; background: none; cursor: pointer; flex: none; font-size: 14px; }
.tk-dclose:hover { background: var(--bg-hover); }
.tk-dprops { display: grid; grid-template-columns: 76px 1fr; gap: 8px 10px; align-items: center; font-size: 12.5px; }
.tk-dprops label { color: var(--text-muted); font-weight: 600; }
.tk-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-card); font: inherit; font-weight: 600; font-size: 12px; color: var(--text); cursor: pointer; box-sizing: border-box; }
.tk-pill:hover { background: var(--bg-hover); }
.tk-dsec { display: flex; flex-direction: column; gap: 7px; }
.tk-dsec h4 { margin: 0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.tk-ecard { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--bg-card); position: relative; }
.tk-ecard::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c); }
.tk-ecard .who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tk-ecard .who > div { min-width: 0; flex: 1; }
.tk-ecard .who b { font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-ecard .who small { display: block; color: var(--text-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-ecard .kind { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; flex: none; }
.tk-ecard .ch { display: flex; gap: 6px; flex-wrap: wrap; }
.tk-ecard .ch button { height: 26px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-card); font: inherit; font-size: 11.5px; font-weight: 700; color: var(--text); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.tk-ecard .ch button:hover { background: var(--bg-hover); }
.tk-ecard .ch button.quiet { border-color: transparent; color: var(--text-muted); font-weight: 600; margin-left: auto; }
.tk-ecard .kv { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; font-size: 11.5px; }
.tk-ecard .kv div { background: var(--bg-elevated); border-radius: 6px; padding: 5px 8px; min-width: 0; }
.tk-ecard .kv b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-ecard .kv small { color: var(--text-muted); }
.tk-linkadd { display: flex; gap: 6px; flex-wrap: wrap; }
.tk-linkadd button { height: 26px; padding: 0 9px; border-radius: 6px; border: 1px dashed var(--border-hover); background: none; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--text-secondary); cursor: pointer; }
.tk-linkadd button:hover { border-style: solid; color: var(--text); }
.tk-notes { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 12.5px; line-height: 1.5; background: var(--bg-input); color: var(--text); width: 100%; box-sizing: border-box; resize: vertical; outline: 0; }
.tk-notes:focus { border-color: var(--accent); }
.tk-tl { display: flex; flex-direction: column; border-left: 2px solid var(--border); margin-left: 6px; padding-left: 12px; }
.tk-tl div { position: relative; padding: 3px 0 9px; font-size: 12px; color: var(--text-secondary); }
.tk-tl div::before { content: ''; position: absolute; left: -18px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--border-hover); }
.tk-tl div b { color: var(--text); font-weight: 700; }
.tk-tl div small { display: block; color: var(--text-muted); font-size: 11px; }
.tk-dfoot { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); }
.tk-dfoot .crm-add-btn { height: 30px; padding: 0 14px; font-size: .8rem; border: 0; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
/* popover (menus, link picker) */
.tk-pop { position: fixed; z-index: 100300; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; max-height: 360px; display: flex; flex-direction: column; }
.tk-pop .hd { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px 4px; }
.tk-pop input { width: 100%; box-sizing: border-box; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-page); color: var(--text); font: inherit; font-size: .78rem; margin-bottom: 4px; outline: 0; }
.tk-pop input:focus { border-color: var(--accent); }
.tk-pop-list { overflow-y: auto; min-height: 0; }
.tk-pop button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 9px; border-radius: 6px; font: inherit; font-weight: 600; font-size: 12.5px; color: var(--text); background: none; border: 0; cursor: pointer; text-align: left; }
.tk-pop button:hover { background: var(--bg-hover); }
.tk-pop button.on { background: rgba(63,118,255,.08); }
.tk-pop button span { color: var(--text-muted); font-weight: 500; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
/* bulk bar */
.tk-bulk { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: #1f2937; color: #fff; border-radius: 12px; padding: 8px 8px 8px 14px; display: flex; align-items: center; gap: 6px; box-shadow: 0 10px 28px rgba(16,24,40,.25); z-index: 9980; font-weight: 600; white-space: nowrap; font-size: 12.5px; }
.tk-bulk button { height: 28px; padding: 0 10px; border-radius: 7px; background: rgba(255,255,255,.14); color: #fff; font: inherit; font-weight: 600; font-size: 12px; border: 0; cursor: pointer; }
.tk-bulk button:hover { background: rgba(255,255,255,.24); }
.tk-bulk button.x { background: none; opacity: .7; }
/* board + week views */
.tk-board { display: grid; grid-template-columns: repeat(4, minmax(230px, 1fr)); gap: 12px; overflow-x: auto; padding: 4px 14px 8px 0; }
.tk-bcol { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 300px; }
.tk-bcol h3 { margin: 0; font-size: 12.5px; font-weight: 800; display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.tk-bcol h3 .dot { width: 8px; height: 8px; border-radius: 50%; }
.tk-bcol h3 .cnt { color: var(--text-muted); font-weight: 600; }
.tk-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; display: flex; flex-direction: column; gap: 7px; cursor: pointer; }
.tk-card:hover { border-color: var(--border-hover); box-shadow: 0 2px 8px rgba(16,24,40,.06); }
.tk-card .t { font-weight: 700; font-size: 12.5px; display: flex; gap: 6px; align-items: center; }
.tk-card .f { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tk-card .tk-rel { flex-wrap: wrap; }
.tk-calwrap { overflow-x: auto; padding: 4px 14px 0 0; }
.tk-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; min-width: 760px; }
.tk-day { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); min-height: 260px; min-width: 0; padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.tk-ev { min-width: 0; }
.tk-day.today { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(63,118,255,.1); }
.tk-day h3 { margin: 0 0 4px; font-size: 11.5px; font-weight: 800; color: var(--text-secondary); display: flex; justify-content: space-between; }
.tk-day h3 b { font-size: 16px; color: var(--text); }
.tk-day h3 .cnt { font-weight: 600; color: var(--text-muted); font-size: 11px; margin-left: auto; padding-top: 4px; }
.tk-day h3 { gap: 6px; }
.tk-day.today h3 b { color: var(--accent); }
.tk-ev { font-size: 11.5px; font-weight: 600; padding: 4px 7px; border-radius: 5px; background: #eaf2ff; border-left: 3px solid #c4c4c4; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-ev.over { background: #fdeef1; } .tk-ev.done { opacity: .5; text-decoration: line-through; }
.tk-ev small { color: var(--text-muted); font-weight: 500; margin-right: 4px; }
html.dark .tk-ent.deal { background: rgba(0,200,117,.16); color: #4ade80; }
html.dark .tk-ent.deal.lost { background: rgba(226,68,92,.18); color: #f87171; }
html.dark .tk-ent.company i { background: rgba(0,169,160,.2); }
html.dark .tk-due.over { background: rgba(226,68,92,.18); } html.dark .tk-due.today { background: rgba(253,171,61,.18); color: #fbbf24; }
html.dark tr.tk-row.sel td { background: rgba(91,138,255,.16); }
html.dark .tk-cb:hover { background: rgba(0,200,117,.16); }
@media (max-width: 900px) {
  .tk-wrap { height: auto; display: block; }
  .tk-aside.open { position: fixed; inset: 0; width: 100%; z-index: 20010; }
  .tk-drawer { width: 100%; }
  .tk-pane .lf-crm-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .tk-search { width: 160px; }
  .tk-pane .leads-tbl-wrap { overflow-x: auto; }
}

/* Task editor pills (2026-10-11): the hidden selects stay the source of truth; the pills + popovers are the UI (same look as the Tasks tab drawer). */
.crm-task-hidden, .crm-task-ed select.crm-task-hidden { display: none !important; }
.crm-task-props { display: grid; grid-template-columns: 84px 1fr; gap: 8px 10px; align-items: center; padding: 10px 16px 8px; }
.crm-task-prop { display: contents; }
.crm-task-props .crm-task-lbl { font-size: .74rem; font-weight: 600; color: var(--text-muted); margin: 0; }
.crm-task-props .crm-task-val { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 26px; font-size: .8rem; font-weight: 600; }
.crm-task-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-card); font: inherit; font-size: .78rem; font-weight: 600; color: var(--text-primary); cursor: pointer; box-sizing: border-box; max-width: 100%; }
.crm-task-pill:hover { background: var(--bg-hover); border-color: var(--border-hover); }
.crm-task-pill-ic { font-size: .78rem; line-height: 1; }
.crm-task-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--text-muted); margin-left: 2px; }
.crm-task-ed .crm-task-date { display: none; height: 26px !important; border-radius: 6px; padding: 0 6px; margin: 0; font-size: .78rem; }
.crm-task-ed .crm-task-timepill { padding-right: 6px; }
.crm-task-ed input[type="time"].crm-task-time { width: 58px !important; height: 24px !important; font-size: .78rem !important; font-weight: 600; color: var(--text-primary); }
.crm-task-ed .crm-task-pridot { width: 8px; height: 8px; border-radius: 2px; margin: 0; }
.crm-task-av { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .56rem; font-weight: 800; color: #fff; background: #6366f1; flex: none; }
.crm-task-av.none { background: none; border: 1px dashed var(--border-hover); color: var(--text-muted); }
.crm-task-ed input[type="text"].crm-task-title { font-weight: 700 !important; padding: 12px 16px 10px !important; }
.crm-task-ed .crm-task-notes { padding: 10px 16px; min-height: 110px; }
.crm-task-ed .crm-task-bar { padding: 5px 12px; }
.crm-task-ed .crm-task-assoc { padding: 10px 16px 12px; }
.crm-task-ed .crm-task-assoc .crm-task-lbl { font-size: .74rem; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }

/* ═══ Email editor UX wave (2026-10-13): toolbars, padding cross, inspector skeleton ═══ */
/* Block toolbar floats ABOVE the block (never over its content); on a wide screen it
   moves into the grey gutter beside the email, stacked, so it covers nothing at all. */
.email-block-tools { top: -28px; right: 0; }
.email-canvas[dir="rtl"] .email-block-tools { right: auto; left: 0; }
@media (min-width: 1380px) {
  .email-canvas:not(.is-mobile) { overflow: visible; }
  .email-canvas:not(.is-mobile) > .email-block > .email-block-tools { top: 0; right: auto; left: 100%; margin-left: 10px; flex-direction: column; }
  .email-canvas:not(.is-mobile)[dir="rtl"] > .email-block > .email-block-tools { left: auto; right: 100%; margin-left: 0; margin-right: 10px; }
}
.email-block-row { margin-top: 26px; }
.email-row-tab { position: absolute; left: 0; top: -24px; display: none; align-items: center; gap: 2px; background: #1f2937; color: #fff; border-radius: 6px 6px 0 0; padding: 2px 4px 2px 8px; font: 600 10.5px/1 -apple-system, "Segoe UI", system-ui, sans-serif; z-index: 6; white-space: nowrap; }
.email-canvas[dir="rtl"] .email-row-tab { left: auto; right: 0; }
.email-block:hover > .email-row-tab, .email-block.sel > .email-row-tab { display: flex; }
.email-row-tab-lbl { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; }
.email-row-tab-lbl svg { width: 12px; height: 12px; }
.email-row-tab button { border: none; background: rgba(255,255,255,.12); color: #fff; width: 20px; height: 20px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.email-row-tab button:hover { background: rgba(255,255,255,.3); }
.email-row-tab button.on { background: #fff; color: #1f2937; }
.email-row-tab button svg { width: 12px; height: 12px; }
.email-subtools { top: -26px; right: 0; z-index: 9; }
.email-canvas[dir="rtl"] .email-subtools { right: auto; left: 0; }
.email-subtools button { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.email-subtools button svg { width: 13px; height: 13px; }
.email-subblock { margin-top: 4px; }
/* Padding / margin cross */
.em-cross-wrap > .em-cross-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.em-cross-wrap > .em-cross-head > label { margin: 0; font-size: 11px; color: var(--text-secondary); font-weight: 500; }
.em-cross-mode { width: 128px; flex: 0 0 128px; }
.em-cross-mode button { padding: 3px 0; font-size: .7rem; }
.em-cross { display: grid; grid-template-columns: 62px minmax(0, 1fr) 62px; grid-template-rows: auto auto auto; gap: 5px; align-items: center; justify-items: center; }
.em-pin { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 62px; margin: 0; }
.em-pin > span { font-size: 10px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 3px; }
.em-pin > input { width: 56px; text-align: center; border: 1px solid var(--border); border-radius: 6px; padding: 5px 3px; font-size: .8rem; background: var(--bg-card); color: var(--text); box-sizing: border-box; outline: none; }
.em-pin > input:focus { border-color: var(--accent); }
.em-cross-t { grid-area: 1 / 2; } .em-cross-r { grid-area: 2 / 3; } .em-cross-b { grid-area: 3 / 2; } .em-cross-l { grid-area: 2 / 1; }
.em-cross-c { grid-area: 2 / 2; width: 100%; height: 42px; border: 1px dashed #8aa4ff; border-radius: 6px; background: rgba(63,118,255,.08); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--accent); }
.em-cross-all { display: flex; align-items: center; gap: 8px; }
.em-cross-all .email-input { width: 90px; flex: 0 0 90px; text-align: center; }
.em-cross-all span { font-size: 11px; color: var(--text-muted); }
/* Inspector skeleton */
.em-ih { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.em-ih-ic { display: inline-flex; color: var(--accent); } .em-ih-ic svg { width: 18px; height: 18px; }
.em-ih-name { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-ih-chip { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(63,118,255,.12); color: var(--accent); white-space: nowrap; }
.em-ih-more { margin-left: auto; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1; padding: 2px 7px; }
.em-ih-more:hover { border-color: var(--accent); color: var(--accent); }
.em-ih-crumb { font-size: 10.5px; color: var(--text-muted); margin: 0 0 8px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.em-ih-crumb a { color: var(--accent); text-decoration: none; } .em-ih-crumb b { color: var(--text); }
.em-dev { display: flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; margin: 6px 0 10px; }
.em-dev button { flex: 1; border: none; background: var(--bg-card); padding: 5px 0; font-size: .74rem; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
.em-dev button svg { width: 13px; height: 13px; }
.em-dev button.on { background: #1f2937; color: #fff; }
html.dark .em-dev button.on { background: #e6e8ec; color: #101218; }
.em-dot { display: inline-block; width: 7px; height: 7px; border-radius: 4px; background: var(--accent); vertical-align: middle; cursor: pointer; flex: 0 0 auto; }
.em-sum { display: flex; gap: 4px; flex-wrap: wrap; border: none; background: none; padding: 0; margin: 0 0 8px; cursor: pointer; }
.em-sum span { font-size: 10.5px; color: var(--text-secondary); background: var(--bg-hover); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.em-sum:hover span { color: var(--accent); }
.em-itabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 0 0 12px; }
.em-itabs button { border: none; background: none; padding: 6px 10px; font-size: 12px; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 600; }
.em-itabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.em-itab > .email-insp-sec:first-child { margin-top: 0; }
.em-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.em-actions .proj-secondary-btn { padding: 5px 8px; font-size: .72rem; white-space: nowrap; }
.em-adv { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 8px; }
.em-adv > summary { font-size: 11px; color: var(--text-secondary); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.em-adv > summary::before { content: "▸"; font-size: 10px; color: var(--text-muted); }
.em-adv[open] > summary::before { content: "▾"; }
.em-adv-body { padding: 8px 0 0; }
.em-adv-body code { font-size: 10px; background: var(--bg-hover); padding: 1px 4px; border-radius: 4px; }

/* Top bar (2026-10-13): place · view · tools */
.em-hd { gap: 8px; }
.em-hd .email-name { width: 220px; }
.em-hd-chip { display: inline-flex; align-items: center; gap: 5px; border: none; background: none; font-size: .74rem; color: var(--text-secondary); cursor: pointer; padding: 4px 6px; border-radius: 6px; white-space: nowrap; font-family: inherit; }
.em-hd-chip:hover { background: var(--bg-hover); }
.em-hd-dot { width: 7px; height: 7px; border-radius: 4px; display: inline-block; flex: 0 0 auto; }
.em-hd-view { margin: 0 auto; }
.em-hd-view button { width: auto; padding: 0 12px; gap: 5px; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.em-hd-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; margin-left: auto; }
.em-hd-actions .proj-secondary-btn, .em-hd-actions .proj-primary-btn { white-space: nowrap; }
.em-hd-pair { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.em-hd-pair button { border: none; background: var(--bg-card); width: 30px; height: 30px; font-size: 15px; color: var(--text); cursor: pointer; }
.em-hd-pair button + button { border-left: 1px solid var(--border); }
.em-hd-pair button[disabled] { color: var(--text-placeholder); cursor: default; }
.em-hd-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; border-radius: 9px; background: #d97706; color: #fff; font-size: 10.5px; font-weight: 700; padding: 0 5px; margin-left: 5px; }
.em-ctx-item .em-ctx-key { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-hd-foldm { display: none !important; }
@media (max-width: 1200px) {
  .em-hd .em-hd-fold { display: none !important; }
  .em-ctx .em-hd-foldm { display: flex !important; }
  .em-ctx div.em-hd-foldm { display: block !important; }
}
.em-ver-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-top: 1px solid var(--border); font-size: .8rem; }
.em-ver-row:first-of-type { border-top: none; }
.em-ver-row > span:first-child { flex: 1; }

/* Image block: Desktop / Phone picture tiles + phone preview (2026-10-13) */
.em-tiles { display: flex; gap: 6px; }
.em-tile { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 6px; background: var(--bg-card); }
.em-tile.on { border-color: var(--accent); background: rgba(63,118,255,.05); }
.em-tile.on.email-insp-drop, .em-tile.on { }
.em-tile-lbl { display: flex; justify-content: space-between; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--text); margin-bottom: 5px; white-space: nowrap; }
.em-tile-same { font-size: 9.5px; font-weight: 500; color: var(--text-muted); }
.em-tile-pic { height: 66px; border-radius: 5px; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.em-tile-pic img { max-width: 100%; max-height: 100%; display: block; }
.em-tile-dim { font-size: 9.5px; color: var(--text-muted); text-align: center; margin-top: 4px; min-height: 12px; }
.em-tile-acts { display: flex; gap: 3px; margin-top: 4px; }
.em-tile-acts button { flex: 1; border: 1px solid var(--border); background: var(--bg-card); border-radius: 5px; font-size: 10px; padding: 3px 0; color: var(--text); cursor: pointer; white-space: nowrap; font-family: inherit; }
.em-tile-acts button:hover { border-color: var(--accent); color: var(--accent); }
.em-phone-prev { align-self: flex-start; margin: 46px 0 0 28px; flex-shrink: 0; position: relative; }
.em-phone-cap { position: absolute; left: 0; right: 0; top: -38px; text-align: center; font-size: 10.5px; font-weight: 700; color: var(--accent); line-height: 1.3; }
.em-phone-cap span { display: block; font-weight: 400; color: var(--text-muted); }
.em-phone { width: 390px; background: #111827; border-radius: 30px; padding: 12px; box-sizing: border-box; box-shadow: 0 10px 30px rgba(15,23,42,.25); }
.em-phone-scr { background: #fff; border-radius: 20px; overflow: hidden; max-height: 70vh; overflow-y: auto; }
.em-phone-scr .email-canvas.is-mobile { min-height: 120px; }
.em-pp-sel { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 3px; }
@media (max-width: 1500px) { .em-phone-prev { display: none; } }

/* Header block (2026-10-13) */
.em-hd-lays { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.em-hd-lays button { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); padding: 7px 4px 5px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; color: var(--text-secondary); font-family: inherit; }
.em-hd-lays button svg { width: 26px; height: 26px; color: var(--accent); }
.em-hd-lays button span { font-size: 9.5px; line-height: 1.2; text-align: center; }
.em-hd-lays button.on { border-color: var(--accent); background: rgba(63,118,255,.06); color: var(--text); }
.emkit-thumb { width: 340px; flex: 0 0 340px; height: 190px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.emkit-thumb-in { width: 600px; transform: scale(.5633); transform-origin: 0 0; box-shadow: none !important; border-radius: 0 !important; }

/* Footer region — column layout mode (2026-10-13) */
.email-footer-region { position: relative; margin-top: 24px; border-radius: 0 0 8px 8px; outline: 1.5px dashed transparent; transition: outline-color .12s; cursor: pointer; }
.email-footer-region:hover { outline-color: #c7d2fe; }
.email-footer-region.editing { outline: 2px solid var(--accent); cursor: default; }
.email-footer-region.email-col-over { outline: 2px solid var(--accent); background-image: linear-gradient(rgba(63,118,255,.08), rgba(63,118,255,.08)); }
.em-fr-chip { position: absolute; left: 0; top: -22px; font: 600 10.5px/1 -apple-system, "Segoe UI", system-ui, sans-serif; color: var(--accent); background: rgba(63,118,255,.12); padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.email-canvas[dir="rtl"] .em-fr-chip { left: auto; right: 0; }
.em-fr-pinned { position: relative; margin-top: 10px; border-top: 1px dashed #d4d4d8; padding-top: 6px; }
.em-fr-lock { position: absolute; right: 0; top: -11px; display: inline-flex; align-items: center; gap: 4px; font: 500 10px/1 -apple-system, "Segoe UI", system-ui, sans-serif; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border); padding: 3px 8px; border-radius: 999px; }
.em-fr-lock svg { width: 10px; height: 10px; }
.email-canvas.em-footer-editing > .email-block { opacity: .45; }
.email-canvas.em-footer-editing > .email-block > .email-block-tools, .email-canvas.em-footer-editing > .email-block > .email-row-tab { display: none; }
.email-footer-region .email-block { cursor: pointer; }
.em-fr-b { }

/* Design-vs-production fixes (2026-10-13, round 2) */
/* Context menus: labels were squeezed to 16 px by the gallery menu's icon rule → every word on its own line */
.em-ctx .em-ctx-item > span:first-child { width: auto; flex: 1; text-align: start; white-space: nowrap; }
.em-ctx .em-ctx-item > span.em-ctx-key { width: auto; flex: 0 0 auto; white-space: nowrap; text-align: end; }
/* Gutter toolbar clears the email's own padding (and sits right beside a full-width block) */
@media (min-width: 1380px) {
  .email-canvas:not(.is-mobile) > .email-block > .email-block-tools { left: calc(100% + var(--em-pad-r, 28px) + 12px); margin-left: 0; }
  .email-canvas:not(.is-mobile) > .email-block.email-block-full > .email-block-tools { left: calc(100% + 12px); }
  .email-canvas:not(.is-mobile)[dir="rtl"] > .email-block > .email-block-tools { left: auto; right: calc(100% + var(--em-pad-l, 28px) + 12px); margin-right: 0; }
  .email-canvas:not(.is-mobile)[dir="rtl"] > .email-block.email-block-full > .email-block-tools { right: calc(100% + 12px); }
}
.email-block.email-block-hd::before { display: none; }
.email-block-row:has(.email-subblock.sel) > .email-row-tab { display: flex; }
/* Inspector rich-text field */
.em-rte { border: 1px solid var(--border); border-radius: 7px; overflow: hidden; background: var(--bg-card); }
.em-rte:focus-within { border-color: var(--accent); }
.em-rte-bar { display: flex; align-items: center; gap: 1px; padding: 3px 4px; border-bottom: 1px solid var(--border); background: var(--bg-hover); flex-wrap: wrap; }
.em-rte-bar button, .em-rte-color { border: none; background: transparent; color: var(--text); width: 24px; height: 24px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font: 700 12px system-ui, sans-serif; cursor: pointer; padding: 0; margin: 0; position: relative; }
.em-rte-bar button:hover, .em-rte-color:hover { background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--border); }
.em-rte-bar button svg { width: 13px; height: 13px; }
.em-rte-color > span { font-weight: 700; border-bottom: 3px solid #111827; line-height: 1; }
.em-rte-color > input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.em-rte-tok { font-family: ui-monospace, Consolas, monospace !important; font-size: 11px !important; margin-left: auto !important; width: auto !important; padding: 0 7px !important; }
.em-rte-ed { min-height: 84px; max-height: 240px; overflow-y: auto; padding: 8px 9px; font-size: .84rem; line-height: 1.5; color: var(--text); outline: none; white-space: pre-wrap; word-break: break-word; }
.em-rte-ed a { color: var(--accent); text-decoration: underline; }
.em-rte-ed ul, .em-rte-ed ol { margin: 4px 0; padding-inline-start: 20px; }
/* ══ CRM timeline · grouped browsing card (2026-10-14): a day's page views in ONE row ══ */
.crm-tl-grp .crm-tl-body { padding: 7px 12px; }
.crm-tl-grp-btn { margin-left: 6px; flex: none; background: none; border: none; padding: 0; font: inherit; font-size: .7rem; color: var(--primary, #0b6efd); cursor: pointer; }
.crm-tl-grp-btn:hover { text-decoration: underline; }
.crm-tl-grp-pages { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.crm-tl-grp-pg { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: var(--bg-card, #fff); border: 1px solid var(--border); font-size: .7rem; color: var(--text-secondary); line-height: 1.4; }
.crm-tl-grp-pg-more { color: var(--text-muted); border-style: dashed; }
.crm-tl-grp-rows { margin-top: 5px; display: grid; gap: 2px; }
.crm-tl-grp-row { display: flex; gap: 8px; align-items: baseline; font-size: .74rem; line-height: 1.45; min-width: 0; }
.crm-tl-grp-row-t { flex: none; font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: .68rem; }
.crm-tl-grp-row-k { flex: none; color: var(--text-muted); }
.crm-tl-grp-row-p { flex: 1; min-width: 0; color: var(--text-secondary); overflow-wrap: anywhere; }
html.dark .crm-tl-grp-pg { background: rgba(255,255,255,.04); }

/* ── People & Workspaces v2 (js/people-section.js, 2026-10-16) — the Users
   screen on the CRM pattern; everything else reuses .crm-* / .lf-* / .lfg-* ── */
.pv2-hide { display: none !important; }
.pv2 .lfg-card.pv2-card { width: 100%; max-width: none; margin-bottom: 4px; }
.pv2 .pv2-table td { white-space: nowrap; }
.pv2 .pv2-table td.crm-contact-cell { white-space: normal; }
.pv2 .lfg-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; padding: 14px 2px 5px; }
.pv2-gdot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; }
.pv2-gn { font-weight: 400; color: var(--text-secondary); }
.pv2-gwhy { font-weight: 400; color: var(--text-muted); font-size: 12px; margin-left: 6px; }
.pv2 td.pv2-nm, #pv2Rec td.pv2-nm { color: var(--text-primary); font-weight: 600; }
.pv2 td.pv2-nm small, #pv2Rec td.pv2-nm small { display: block; font-weight: 400; color: var(--text-muted); font-size: .74rem; line-height: 1.2; }
.pv2-nmrow { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.pv2-av { width: 28px; height: 28px; border-radius: 50%; background: #B5D4F4; color: #0C447C; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; flex: none; }
.pv2-av.big { width: 50px; height: 50px; font-size: 1.3rem; }
.pv2-av.co { border-radius: 12px; color: #042C53; }
.pv2-row { cursor: pointer; }
.pv2-row.sel td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.pv2-link { color: var(--text-primary); text-decoration: none; font-weight: 600; }
.pv2-link:hover { color: var(--accent); }
.pv2-search { height: 30px; border-radius: 7px; border: 1px solid var(--border); padding: 0 10px; font-size: .8rem; width: 260px; box-sizing: border-box; background: var(--bg-card); color: var(--text-primary); font-family: inherit; }
.pv2 select.mnb-toolbtn { appearance: auto; padding-right: 6px; }
.pv2-tabn { padding: 0 6px; font-size: .64rem; margin-left: 4px; }
.pv2-meter { display: inline-block; width: 60px; height: 5px; border-radius: 4px; background: var(--bg-hover); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.pv2-meter i { display: block; height: 100%; }
.pv2-fix { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--border); background: var(--bg-card); border-radius: 7px; font-size: .74rem; font-weight: 600; color: var(--text-primary); cursor: pointer; margin-right: 4px; font-family: inherit; white-space: nowrap; }
.pv2-fix.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.pv2-fix.danger { color: #dc2626; border-color: #fca5a5; }
.pv2-fix:hover { opacity: .85; }
.pv2-fixcell { white-space: nowrap; }
.pv2-found, .pv2-prob { white-space: normal !important; font-size: .8rem; }
.pv2-empty, .pv2-none { color: var(--text-muted); font-size: .82rem; padding: 14px 16px; }
.pv2-bulk { position: sticky; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; background: #1f2937; color: #fff; border-radius: 10px; padding: 8px 14px; font-size: .8rem; margin-top: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.pv2-bulk .mnb-toolbtn { background: rgba(255,255,255,.12); border-color: transparent; color: #fff; }
.pv2-bulk .mnb-toolbtn.danger { background: #dc2626; }
.pv2-chip-warn { background: #fef3c7 !important; color: #b45309 !important; }
.pv2-back { display: flex; align-items: center; gap: 12px; padding: 8px 0 12px; }
.pv2-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }
.pv2-dim td { color: var(--text-muted); }
.pv2-inline { font: inherit; font-size: .78rem; border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; background: var(--bg-card); color: var(--text-primary); }
#pv2Rec .crm-panel-body { grid-template-columns: 320px 1fr 300px; overflow: hidden; }
#pv2Rec .crm-panel-center { overflow-y: auto; }
#pv2Rec .pv2-feed { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
#pv2Rec .pv2-probcard { padding: 12px 14px; border-color: #fdba74; background: #fff7ed; }
#pv2Rec .pv2-probhd { font-weight: 700; font-size: .84rem; color: #9a3412; }
#pv2Rec .pv2-cardhd { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: .84rem; font-weight: 600; }
#pv2Rec .pv2-tabgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; padding: 12px 14px; }
#pv2Rec .pv2-tab { display: flex; align-items: center; gap: 7px; font-size: .78rem; border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; cursor: pointer; margin: 0; }
#pv2Rec .pv2-tab.off { color: var(--text-muted); background: var(--bg-hover); }
#pv2Rec .pv2-tab input { accent-color: var(--accent); }
#pv2Rec .lfg-card { width: 100%; max-width: none; }
#pv2Rec .crm-pr-section-header .crm-pr-section-title { flex: 1; }
@media (max-width: 1100px) { #pv2Rec .crm-panel-body { grid-template-columns: 1fr; overflow: auto; } #pv2Rec .crm-panel-left, #pv2Rec .crm-panel-right { border: none; } }
.pv2 .lfg-card.pv2-card { overflow-x: auto; }
.pv2-tabs { display: flex; gap: 3px; padding: 4px; background: var(--bg-hover); border-radius: 10px; width: fit-content; margin-bottom: 14px; }
.pv2-tabbtn { 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; font-family: inherit; }
.pv2-tabbtn.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); }
.pv2 select.mnb-toolbtn, .pv2 .pv2-sel { display: inline-block; width: auto; height: 30px; padding: 0 26px 0 10px; appearance: auto; -webkit-appearance: menulist; font-family: inherit; line-height: 28px; }