/* ==========================================================================
   TracelyCRM — Meta Lead Ads CRM
   Design tokens, layout primitives and components. No framework, no build.
   ========================================================================== */

:root {
  --bg:            #f7f7f8;
  --surface:       #ffffff;
  --surface-alt:   #f4f4f5;
  --surface-raised:#ffffff;
  --surface-hover: #f1f1f3;
  --border:        #e6e6e9;
  --border-strong: #d4d4d8;

  --text:          #09090b;
  --text-muted:    #52525b;
  --text-subtle:   #71717a;

  --brand:         #1d4fd7;
  --brand-strong:  #1740ae;
  --brand-ink:     #12306f;
  --brand-tint:    #eef2ff;

  --teal:          #0e7c6b;
  --teal-tint:     #ddf3ec;
  --green:         #12805c;
  --green-tint:    #e3f5ec;
  --amber:         #9c6200;
  --amber-tint:    #fdf3dc;
  --red:           #c92a42;
  --red-tint:      #fdecee;
  --violet:        #6440d6;
  --violet-tint:   #efeafc;
  --slate-tint:    #f1f1f3;

  --sidebar-bg:    #fbfbfc;
  --sidebar-active:#ececef;

  --radius-sm: 8px;
  --radius:    10px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(9, 9, 11, .04);
  --shadow:    0 1px 2px rgba(9, 9, 11, .04), 0 8px 24px -14px rgba(9, 9, 11, .16);
  --shadow-lg: 0 2px 6px rgba(9, 9, 11, .06), 0 20px 44px -16px rgba(9, 9, 11, .24);

  --sidebar-w: 244px;
  --topbar-h: 58px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Pipeline stage colours (badges, pipeline bars). */
  --st-NEW: #2563eb;
  --st-ATTEMPTED_CONTACT: #ea580c;
  --st-CONTACTED: #0891b2;
  --st-FOLLOW_UP: #ca8a04;
  --st-PRE_QUALIFIED: #c026d3;
  --st-QUALIFIED: #7c3aed;
  --st-CONVERTED: #16a34a;
  --st-NOT_QUALIFIED: #64748b;
  --st-JUNK: #78716c;
  --st-LOST: #dc2626;
}
@media (min-width: 801px) { :root[data-sidebar='collapsed'] { --sidebar-w: 64px; } }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.011em; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; }

/* ---------- App shell ---------------------------------------------------- */

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 40;
  transition: width .18s var(--ease);
}

.sb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 12px 6px 16px; }
.sb-brand { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--text); }
.sb-brand:hover { text-decoration: none; }
.sb-brand__logo { width: 26px; height: 26px; flex-shrink: 0; object-fit: contain; }
.sb-brand__name { font-weight: 700; font-size: 15px; letter-spacing: -.02em; white-space: nowrap; }
.sb-icon-btn {
  width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0;
  border: 0; border-radius: 7px; background: transparent; color: var(--text-subtle); cursor: pointer;
}
.sb-icon-btn:hover { background: var(--surface-hover); color: var(--text); }

.sb-workspace {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 10px 4px; padding: 7px 8px; width: calc(100% - 20px);
  border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer;
  border-radius: var(--radius-sm); color: var(--text);
}
.sb-workspace:hover, .sb-workspace[aria-expanded="true"] { background: var(--surface-hover); text-decoration: none; }
.sb-workspace:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.sb-workspace > .icon { margin-left: auto; flex: none; width: 15px; height: 15px; color: var(--text-subtle); }
.sb-workspace__mark {
  width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 7px; background: linear-gradient(135deg, var(--brand), var(--violet)); color: #fff;
  font-size: 13px; font-weight: 700;
}
.sb-workspace__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sb-workspace__name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-workspace__meta { font-size: 12px; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sb-search {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 10px 10px; height: 34px; padding: 0 8px 0 10px;
  font: inherit; font-size: 13.5px; color: var(--text-subtle);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; text-align: left;
}
.sb-search:hover { border-color: var(--border-strong); color: var(--text-muted); }
.sb-search__label { flex: 1; white-space: nowrap; overflow: hidden; }
.sb-kbd, kbd {
  font: 600 11px/1 var(--font); color: var(--text-subtle);
  padding: 3px 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--surface-alt);
}

.sb-nav { flex: 1; overflow-y: auto; padding: 2px 10px 12px; display: flex; flex-direction: column; gap: 14px; }
.sb-group { display: flex; flex-direction: column; gap: 1px; }
.sb-label { margin: 0 0 4px; padding: 0 10px; font-size: 11.5px; font-weight: 600; color: var(--text-subtle); letter-spacing: .01em; }
.sb-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 10px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: background .12s, color .12s;
}
.sb-item .icon { color: var(--text-subtle); }
.sb-item:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.sb-item:hover .icon { color: var(--text-muted); }
.sb-item.is-active { background: var(--sidebar-active); color: var(--text); font-weight: 600; }
.sb-item.is-active .icon { color: var(--brand); }
.sb-item__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sb-badge {
  min-width: 20px; height: 19px; padding: 0 6px; display: inline-grid; place-items: center;
  border-radius: 999px; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums;
  background: var(--surface-alt); color: var(--text-muted); border: 1px solid var(--border);
}
.sb-badge[hidden] { display: none; }
.sb-badge[data-badge='waiting'] { background: var(--red-tint); color: var(--red); border-color: transparent; }

.sb-bottom { border-top: 1px solid var(--border); padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.sb-sync { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; color: var(--text-muted); }
.sb-sync__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-subtle); flex-shrink: 0; }
.sb-sync__dot.is-ok { background: var(--green); }
.sb-sync__dot.is-warn { background: var(--amber); }
.sb-sync__dot.is-bad { background: var(--red); }
.sb-sync__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user__btn {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 8px;
  font: inherit; text-align: left; color: var(--text);
  background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.sb-user__btn:hover, .sb-user__btn[aria-expanded='true'] { background: var(--surface-hover); }
.sb-user__meta { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sb-user__name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user__email { font-size: 11.5px; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user__chev { color: var(--text-subtle); width: 16px; height: 16px; }

/* Collapsed rail: icons only, labels become tooltips (title). */
@media (min-width: 801px) {
  :root[data-sidebar='collapsed'] .sb-brand__name,
  :root[data-sidebar='collapsed'] .sb-workspace__text,
  :root[data-sidebar='collapsed'] .sb-search__label,
  :root[data-sidebar='collapsed'] .sb-kbd,
  :root[data-sidebar='collapsed'] .sb-label,
  :root[data-sidebar='collapsed'] .sb-item__label,
  :root[data-sidebar='collapsed'] .sb-sync__text,
  :root[data-sidebar='collapsed'] .sb-user__meta,
  :root[data-sidebar='collapsed'] .sb-user__chev { display: none; }
  :root[data-sidebar='collapsed'] .sb-top { flex-direction: column; padding: 14px 0 6px; }
  :root[data-sidebar='collapsed'] .sb-workspace { justify-content: center; margin: 6px 8px 4px; }
  :root[data-sidebar='collapsed'] .sb-search { justify-content: center; margin: 6px 12px 10px; padding: 0; }
  :root[data-sidebar='collapsed'] .sb-nav { padding: 2px 12px 12px; gap: 10px; }
  :root[data-sidebar='collapsed'] .sb-group + .sb-group { border-top: 1px solid var(--border); padding-top: 10px; }
  :root[data-sidebar='collapsed'] .sb-item { justify-content: center; padding: 0; }
  :root[data-sidebar='collapsed'] .sb-badge { position: absolute; top: 5px; right: 6px; min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; border: 2px solid var(--sidebar-bg); background: var(--brand); }
  :root[data-sidebar='collapsed'] .sb-badge[data-badge='waiting'] { background: var(--red); }
  :root[data-sidebar='collapsed'] .sb-sync { justify-content: center; }
  :root[data-sidebar='collapsed'] .sb-user__btn { justify-content: center; padding: 6px 0; }
  :root[data-sidebar='collapsed'] .sb-plan { justify-content: center; padding: 7px 0; }
  :root[data-sidebar='collapsed'] .sb-plan__text,
  :root[data-sidebar='collapsed'] .sb-plan__cta { display: none; }
  :root[data-sidebar='collapsed'] .sb-item .lock-mark { position: absolute; top: 4px; right: 4px; }
  :root[data-sidebar='collapsed'] .sb-collapse .icon { transform: scaleX(-1); }
}

.sb-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .35); }
.sb-scrim[hidden] { display: none; }

.avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 700;
  flex-shrink: 0;
}

.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: margin-left .18s var(--ease);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--topbar-h);
  padding: 10px 24px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar__menu {
  display: none;
  width: 34px; height: 34px; place-items: center;
  background: none; color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 15px;
}
.topbar__titles { flex: 1; min-width: 0; }
.topbar__title { font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.topbar__subtitle { margin: 1px 0 0; font-size: 12.5px; color: var(--text-muted); }
.topbar__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.topbar__actions .input, .topbar__actions .select { width: auto; }

/* Global cluster on every page: New, notifications, AI. */
.tb-global { display: flex; align-items: center; gap: 4px; padding-left: 12px; margin-left: 2px; border-left: 1px solid var(--border); }
.tb-btn {
  height: 34px; min-width: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 9px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-muted);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap;
}
.tb-btn:hover, .tb-btn[aria-expanded='true'] { background: var(--surface-hover); color: var(--text); }
.tb-btn--new { color: var(--text); border-color: var(--border-strong); background: var(--surface); }
.tb-btn--ai { color: var(--text); }
.tb-btn--ai .icon { color: var(--violet); }
.tb-btn--search { display: none; }
.tb-global .notif { margin: 0; }
.tb-global .notif__bell { width: 34px; height: 34px; border: 0; background: transparent; color: var(--text-muted); border-radius: var(--radius-sm); }
.tb-global .notif__bell:hover { background: var(--surface-hover); color: var(--text); }
.tb-global .notif__panel { left: auto; right: 0; top: 42px; }

.content { padding: 24px 28px 64px; flex: 1; max-width: 1360px; width: 100%; margin: 0 auto; }
.content--narrow { max-width: 900px; }

/* ---------- Menus & command palette -------------------------------------- */

.menu {
  position: fixed; z-index: 95; min-width: 232px; max-width: calc(100vw - 16px);
  padding: 6px; background: var(--surface-raised); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  animation: menu-in .12s var(--ease);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
.menu__label { padding: 6px 10px 4px; font-size: 11.5px; font-weight: 600; color: var(--text-subtle); }
.menu__item {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  font: inherit; font-size: 13.5px; text-align: left; color: var(--text);
  background: transparent; border: 0; border-radius: 6px; cursor: pointer;
}
.menu__item:hover, .menu__item:focus-visible { background: var(--surface-hover); text-decoration: none; outline: none; }
.menu__item .icon { color: var(--text-subtle); }
.menu__item kbd { margin-left: auto; }
.menu__item--danger { color: var(--red); }
.menu__item--danger .icon { color: var(--red); }
.menu__sep { height: 1px; margin: 5px 4px; background: var(--border); }
.menu__head { padding: 8px 10px 6px; display: flex; flex-direction: column; }
.menu__head strong { font-size: 13.5px; }
.menu__head span { font-size: 12px; color: var(--text-muted); }
.menu__seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 2px 6px 6px; padding: 3px; background: var(--surface-alt); border-radius: 8px; }
.menu__seg button { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 0; font: inherit; font-size: 12.5px; color: var(--text-muted); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.menu__seg button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 600; }

.cmdk-overlay { position: fixed; inset: 0; z-index: 110; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: rgba(0, 0, 0, .4); backdrop-filter: blur(2px); }
.cmdk { width: min(640px, 100%); background: var(--surface-raised); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; animation: menu-in .12s var(--ease); }
.cmdk__search { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.cmdk__search .icon { color: var(--text-subtle); }
.cmdk__input { flex: 1; height: 52px; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 15.5px; }
.cmdk__list { max-height: min(440px, 60vh); overflow-y: auto; padding: 6px; }
.cmdk__group { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 600; color: var(--text-subtle); }
.cmdk__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.cmdk__item .icon { color: var(--text-subtle); }
.cmdk__item.is-active { background: var(--surface-hover); }
.cmdk__item.is-active .icon { color: var(--brand); }
.cmdk__item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmdk__item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk__item-sub { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk__hint { font-size: 12px; color: var(--text-subtle); }
.cmdk__empty { padding: 26px 16px; text-align: center; color: var(--text-muted); font-size: 13.5px; }
.cmdk__foot { display: flex; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-subtle); }
.cmdk__foot kbd { margin-right: 4px; }

/* ---------- Buttons ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 13px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background .14s var(--ease), border-color .14s, transform .14s var(--ease), box-shadow .14s;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--surface-hover); text-decoration: none; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(9, 9, 11, .12), inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn--primary:hover:not(:disabled) { background: var(--brand-strong); border-color: var(--brand-strong); }
:root[data-theme='dark'] .btn--primary:hover:not(:disabled) { color: #000; }
.btn--danger { background: var(--surface); border-color: var(--border-strong); color: var(--red); }
.btn--danger:hover:not(:disabled) { background: var(--red-tint); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--text-muted); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-alt); color: var(--text); }
.btn--sm { padding: 4px 10px; font-size: 12.5px; }
.btn--block { width: 100%; }

/* ---------- Forms -------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field__label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.field__hint { font-size: 12px; color: var(--text-subtle); }

.input, .select, .textarea {
  font: inherit;
  font-size: 14px;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  width: 100%;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.textarea { resize: vertical; min-height: 84px; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-subtle) 50%), linear-gradient(135deg, var(--text-subtle) 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; }

.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.switch input { accent-color: var(--brand); width: 16px; height: 16px; }

/* ---------- Cards & layout ---------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.card__title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.card__eyebrow { font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin: 0 0 4px; }
.card__body { padding: 20px; }
.card__body--flush { padding: 0; }

.grid { display: grid; gap: 16px; }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid--halves { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.grid--detail { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }

/* ---------- Stat tiles --------------------------------------------------- */

.stat { padding: 18px; position: relative; overflow: hidden; transition: transform .16s var(--ease), box-shadow .16s, border-color .16s; }
.stat__label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.stat__value { font-size: 29px; font-weight: 750; letter-spacing: -.03em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.stat__meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.stat__value--brand { color: var(--brand); }
.stat__value--green { color: var(--green); }
.stat__value--violet { color: var(--violet); }

/* ---------- Badges ------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  border: 1px solid transparent;
}
/* Pipeline stages: one colour each, tinted the same way as custom stages (.badge--custom). */
.badge--NEW               { --stage: var(--st-NEW); }
.badge--ATTEMPTED_CONTACT { --stage: var(--st-ATTEMPTED_CONTACT); }
.badge--CONTACTED         { --stage: var(--st-CONTACTED); }
.badge--FOLLOW_UP         { --stage: var(--st-FOLLOW_UP); }
.badge--PRE_QUALIFIED     { --stage: var(--st-PRE_QUALIFIED); }
.badge--QUALIFIED         { --stage: var(--st-QUALIFIED); }
.badge--CONVERTED         { --stage: var(--st-CONVERTED); }
.badge--NOT_QUALIFIED     { --stage: var(--st-NOT_QUALIFIED); }
.badge--JUNK              { --stage: var(--st-JUNK); text-decoration: line-through; }
.badge--LOST              { --stage: var(--st-LOST); }
.badge--NEW, .badge--ATTEMPTED_CONTACT, .badge--CONTACTED, .badge--FOLLOW_UP, .badge--PRE_QUALIFIED,
.badge--QUALIFIED, .badge--CONVERTED, .badge--NOT_QUALIFIED, .badge--JUNK, .badge--LOST {
  background: color-mix(in srgb, var(--stage) 11%, var(--surface));
  color: color-mix(in srgb, var(--stage) 80%, var(--text));
  border-color: color-mix(in srgb, var(--stage) 30%, var(--surface));
}
:is(.badge--NEW, .badge--ATTEMPTED_CONTACT, .badge--CONTACTED, .badge--FOLLOW_UP, .badge--PRE_QUALIFIED,
.badge--QUALIFIED, .badge--CONVERTED, .badge--NOT_QUALIFIED, .badge--JUNK, .badge--LOST) .dot { background: var(--stage); }

.badge--PENDING    { background: var(--amber-tint);  color: var(--amber); border-color: #f0dcae; }
.badge--PROCESSING { background: var(--brand-tint);  color: var(--brand-ink); border-color: #c9d9ff; }
.badge--SUCCESS    { background: var(--green-tint);  color: var(--green); border-color: #b9e4cd; }
.badge--FAILED     { background: var(--red-tint);    color: var(--red); border-color: #f3b8c2; }
.badge--muted      { background: var(--slate-tint);  color: var(--text-muted); border-color: #dbe1ee; }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Tables ------------------------------------------------------- */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-subtle);
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  white-space: nowrap;
}
.table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-alt); }
.table__primary { font-weight: 600; }
.table__muted { color: var(--text-muted); font-size: 13px; }

.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.toolbar .input, .toolbar .select { width: auto; min-width: 160px; }
.toolbar__search { flex: 1; min-width: 200px; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
  flex-wrap: wrap;
}

/* ---------- States ------------------------------------------------------- */

.state { padding: 46px 22px; text-align: center; color: var(--text-muted); }
.state__icon { font-size: 30px; opacity: .45; }
.state__title { margin: 10px 0 4px; font-size: 15px; font-weight: 650; color: var(--text); }
.state__text { font-size: 13.5px; margin: 0 auto; max-width: 420px; }
.state__actions { margin-top: 16px; }
.state--error .state__title { color: var(--red); }

.skeleton {
  background: linear-gradient(90deg, var(--surface-alt) 25%, #eef1f6 37%, var(--surface-alt) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease infinite;
  border-radius: var(--radius-sm);
  height: 13px;
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton-rows { display: flex; flex-direction: column; gap: 13px; padding: 18px; }

/* ---------- Timeline ----------------------------------------------------- */

.timeline { list-style: none; margin: 0; padding: 4px 0 0; position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  left: 6px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--border);
}
.timeline__item { position: relative; padding: 0 0 18px 24px; }
.timeline__item:last-child { padding-bottom: 2px; }
.timeline__marker {
  position: absolute;
  left: 0; top: 4px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border-strong);
}
.timeline__item--success .timeline__marker { border-color: var(--green); }
.timeline__item--error   .timeline__marker { border-color: var(--red); }
.timeline__item--status  .timeline__marker { border-color: var(--brand); }
.timeline__text { font-size: 13.5px; }
.timeline__meta { font-size: 12px; color: var(--text-subtle); margin-top: 2px; }

.note { padding: 12px 0; border-bottom: 1px solid var(--border); }
.note:last-child { border-bottom: none; }
.note__head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.note__author { font-size: 13px; font-weight: 600; }
.note__date { font-size: 11.5px; color: var(--text-subtle); }
.note__body { font-size: 13.5px; margin-top: 4px; white-space: pre-wrap; }
.note__actions { margin-top: 6px; display: flex; gap: 6px; }

/* ---------- Definition lists (lead detail) ------------------------------- */

.dl { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 9px 14px; font-size: 13.5px; }
.dl dt { color: var(--text-subtle); font-weight: 550; }
.dl dd { margin: 0; word-break: break-word; }

/* ---------- Charts (inline SVG / CSS bars) ------------------------------- */

.chart { width: 100%; height: 220px; display: block; }
.bars { display: flex; flex-direction: column; gap: 11px; }
.bar__head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; gap: 10px; }
.bar__track { height: 8px; background: var(--slate-tint); border-radius: 999px; overflow: hidden; }
.bar__fill { height: 100%; background: var(--brand); border-radius: 999px; transition: width .3s ease; }
.bar__fill--green { background: var(--green); }
.bar__fill--violet { background: var(--violet); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); }
.legend__key { display: inline-flex; align-items: center; gap: 6px; }
.legend__swatch { width: 10px; height: 10px; border-radius: 3px; }

/* ---------- Auth screens ------------------------------------------------- */

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 420px at 50% -8%, #e8eeff 0%, transparent 62%),
    var(--bg);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 30px;
}
.auth-card__brand { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.auth-card__logo { width: 38px; height: 38px; flex-shrink: 0; object-fit: contain; }
.auth-card__name { font-weight: 750; font-size: 20px; letter-spacing: -.02em; }
.auth-card__title { font-size: 20px; margin-top: 16px; }
.auth-card__subtitle { color: var(--text-muted); font-size: 13.5px; margin: 5px 0 22px; }
.auth-card__note { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--text-subtle); }
.auth-card__note[hidden] { display: none; }
.auth-card__footer { margin-top: 18px; text-align: center; font-size: 13.5px; color: var(--text-muted); }
.auth-alt[hidden] { display: none; }
.auth-alt__button { display: flex; justify-content: center; min-height: 44px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--text-subtle); font-size: 12.5px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.field__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.auth-link { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--brand); cursor: pointer; }
.auth-link:hover:not(:disabled) { text-decoration: underline; }
.auth-link:disabled { color: var(--text-subtle); font-weight: 500; cursor: default; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.input--code { font-family: var(--mono); font-size: 22px; letter-spacing: .4em; text-align: center; padding-left: .4em; }
[data-hide-on-code][hidden] { display: none; }
.auth-error {
  background: var(--red-tint);
  color: var(--red);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}

/* ---------- Sign-in screens: form beside a product panel ---------------- */

.auth-split {
  --auth-panel-bg: #0f1d44;
  --auth-panel-text: #f4f6fc;
  --auth-panel-muted: #aeb8d6;
  --auth-panel-line: rgba(255, 255, 255, .1);
  --auth-panel-card: rgba(255, 255, 255, .06);
  background: var(--surface);
  min-height: 100vh;
}
:root[data-theme='dark'] .auth-split {
  --auth-panel-bg: #0b0b0c;
  --auth-panel-text: #ededed;
  --auth-panel-muted: #9a9a9a;
  --auth-panel-line: #1f1f1f;
  --auth-panel-card: #141414;
  background: var(--bg);
}
.auth-split__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }

.auth-pane { display: flex; flex-direction: column; min-width: 0; padding: 28px 40px; }
.auth-pane__brand { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; color: var(--text); font-weight: 750; font-size: 17px; letter-spacing: -.02em; }
.auth-pane__brand:hover { text-decoration: none; }
.auth-pane__brand img { width: 30px; height: 30px; object-fit: contain; }
.auth-split .auth-card {
  width: 100%; max-width: 380px; margin: auto; padding: 40px 0;
  background: none; border: 0; box-shadow: none; border-radius: 0;
}
.auth-split .auth-card__title { font-size: 26px; margin-top: 0; letter-spacing: -.02em; }
.auth-split .auth-card__subtitle { font-size: 14px; margin: 6px 0 26px; line-height: 1.5; }
.auth-split .input { padding-top: 10px; padding-bottom: 10px; }
.auth-split .btn--block { padding-top: 10px; padding-bottom: 10px; font-size: 14px; }
.auth-split .auth-card__footer { margin-top: 22px; }
.auth-pane__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-subtle); }
.auth-pane__foot nav { display: flex; gap: 16px; }
.auth-pane__foot a { color: var(--text-subtle); }
.auth-pane__foot a:hover { color: var(--text); }
.auth-pane__theme { border: 0; background: none; padding: 0; font: inherit; color: var(--text-subtle); cursor: pointer; }
.auth-pane__theme:hover { color: var(--text); }

.auth-aside {
  background: var(--auth-panel-bg); color: var(--auth-panel-text);
  display: flex; align-items: center; justify-content: center; padding: 56px 48px;
  border-left: 1px solid var(--auth-panel-line);
}
.auth-aside__inner { width: 100%; max-width: 440px; }
.auth-aside__title { font-size: 32px; line-height: 1.2; letter-spacing: -.025em; font-weight: 700; color: var(--auth-panel-text); max-width: 380px; }

/* A picture of the product: a leads window with a response-time card on top. */
.auth-split { --mock-bg: #ffffff; --mock-text: #09090b; --mock-muted: #71717a; --mock-line: #ececef; }
:root[data-theme='dark'] .auth-split { --mock-bg: #161616; --mock-text: #ededed; --mock-muted: #8a8a8a; --mock-line: #242424; }
.auth-mock { position: relative; margin-top: 40px; }
.auth-mock__window {
  /* The bottom space is where the response-time card overlaps, clear of the rows. */
  background: var(--mock-bg); color: var(--mock-text); border-radius: 14px; overflow: hidden; padding-bottom: 36px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
}
.auth-mock__bar { display: flex; align-items: center; gap: 6px; padding: 11px 16px; border-bottom: 1px solid var(--mock-line); }
.auth-mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--mock-line); }
.auth-mock__bar span { margin-left: 8px; font-size: 12.5px; font-weight: 650; color: var(--mock-muted); }
.auth-mock__row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; }
.auth-mock__row + .auth-mock__row { border-top: 1px solid var(--mock-line); }
.auth-mock__avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; }
.auth-mock__avatar--blue { background: #3b5bdb; }
.auth-mock__avatar--teal { background: #0e8a75; }
.auth-mock__avatar--violet { background: #6d4fd8; }
.auth-mock__who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.auth-mock__who strong { font-size: 14px; font-weight: 650; }
.auth-mock__who small { font-size: 12px; color: var(--mock-muted); }
.auth-mock__tag { font-size: 11.5px; font-weight: 650; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.auth-mock__tag--new { background: #eef2ff; color: #2f4bc7; }
.auth-mock__tag--done { background: #f1f1f3; color: #52525b; }
.auth-mock__tag--won { background: #efeafc; color: #5b3fc4; }
:root[data-theme='dark'] .auth-mock__tag--new { background: #13203f; color: #9cb8ff; }
:root[data-theme='dark'] .auth-mock__tag--done { background: #222; color: #a3a3a3; }
:root[data-theme='dark'] .auth-mock__tag--won { background: #1f1838; color: #b8a6f5; }

.auth-mock__stat {
  position: absolute; right: -22px; bottom: -34px; width: 168px; padding: 12px 14px 10px;
  background: var(--mock-bg); color: var(--mock-text); border-radius: 12px;
  box-shadow: 0 24px 44px -18px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: end;
}
.auth-mock__stat small { grid-column: 1 / -1; font-size: 11.5px; color: var(--mock-muted); font-weight: 600; }
.auth-mock__stat strong { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.auth-mock__bars { display: flex; align-items: flex-end; gap: 3px; height: 26px; padding-bottom: 4px; }
.auth-mock__bars i { width: 5px; border-radius: 2px 2px 0 0; background: #4cc38f; }

@media (max-width: 960px) {
  .auth-split__layout { grid-template-columns: minmax(0, 1fr); }
  .auth-aside { display: none; }
}
@media (max-width: 520px) {
  .auth-pane { padding: 20px 16px; }
  .auth-split .auth-card { padding: 28px 0; }
  .auth-split .auth-card__title { font-size: 23px; }
}

/* ---------- Toasts ------------------------------------------------------- */

.toast-container {
  position: fixed;
  top: 18px; right: 18px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: min(360px, calc(100vw - 36px));
}
.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 11px 14px;
  font-size: 13.5px;
  animation: toast-in .18s ease;
}
.toast--success { border-left-color: var(--green); }
.toast--error   { border-left-color: var(--red); }
.toast--warn    { border-left-color: var(--amber); }
.toast__title { font-weight: 650; margin-bottom: 2px; }
.toast__body { color: var(--text-muted); }
@keyframes toast-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* ---------- Misc --------------------------------------------------------- */

.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.small { font-size: 12.5px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.hidden { display: none !important; }
.spacer { flex: 1; }
.code-block {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 12px;
  overflow-x: auto;
  white-space: pre;
  color: var(--text-muted);
}
.callout {
  background: var(--brand-tint);
  border: 1px solid #c9d9ff;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--brand-ink);
}
.callout--warn { background: var(--amber-tint); border-color: #edd3a0; color: var(--amber); }

/* ---------- Responsive --------------------------------------------------- */

@media (max-width: 960px) {
  .grid--detail { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  :root, :root[data-sidebar='collapsed'] { --sidebar-w: 268px; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); }
  .sidebar.is-open { transform: none; }
  .sb-collapse { display: none; }
  .main { margin-left: 0; }
  .topbar__menu { display: grid; }
  .tb-global { border-left: 0; padding-left: 0; margin-left: auto; }
  .tb-btn__label { display: none; }
  .tb-btn--search { display: inline-flex; }
  .topbar__titles { order: 0; }
  .tb-global { order: 1; }
  .topbar__actions { order: 2; }
  .content { padding: 18px 16px 48px; }
  .topbar { padding: 14px 16px; flex-wrap: wrap; row-gap: 10px; }
  .topbar__actions { flex-basis: 100%; }
  .dl { grid-template-columns: 1fr; gap: 3px 0; }
  .dl dd { margin-bottom: 8px; }
}

/* ==========================================================================
   Dark theme: true black surfaces (data-theme on <html>; "system" follows
   the OS). Only tokens are redefined, so every component adapts.
   ========================================================================== */

:root[data-theme='dark'] {
  --bg:            #000000;
  --surface:       #0a0a0a;
  --surface-alt:   #141414;
  --surface-raised:#111111;
  --surface-hover: #1a1a1a;
  --border:        #1f1f1f;
  --border-strong: #2e2e2e;

  --text:          #ededed;
  --text-muted:    #a3a3a3;
  --text-subtle:   #7a7a7a;

  --brand:         #4c8dff;
  --brand-strong:  #79a8ff;
  --brand-ink:     #c3d6ff;
  --brand-tint:    #0e1626;

  --teal:          #4fd1b5;
  --teal-tint:     #08221e;
  --green:         #4cc38f;
  --green-tint:    #0a2117;
  --amber:         #e8b44a;
  --amber-tint:    #261c06;
  --red:           #f47c8e;
  --red-tint:      #2a0e13;
  --violet:        #a78bfa;
  --violet-tint:   #18122e;
  --slate-tint:    #171717;

  --sidebar-bg:    #050505;
  --sidebar-active:#1c1c1c;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .6);
  --shadow:    0 0 0 1px rgba(255, 255, 255, .02), 0 8px 24px rgba(0, 0, 0, .6);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, .04), 0 24px 56px rgba(0, 0, 0, .8);

  /* Pipeline stage colours, lifted for dark surfaces. */
  --st-NEW: #60a5fa;
  --st-ATTEMPTED_CONTACT: #fb923c;
  --st-CONTACTED: #22d3ee;
  --st-FOLLOW_UP: #facc15;
  --st-PRE_QUALIFIED: #e879f9;
  --st-QUALIFIED: #a78bfa;
  --st-CONVERTED: #4ade80;
  --st-NOT_QUALIFIED: #94a3b8;
  --st-JUNK: #a8a29e;
  --st-LOST: #f87171;

  color-scheme: dark;
}

:root[data-theme='dark'] .select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-subtle) 50%),
    linear-gradient(135deg, var(--text-subtle) 50%, transparent 50%);
}
:root[data-theme='dark'] .skeleton {
  background: linear-gradient(90deg, var(--surface-alt) 25%, #1f1f1f 37%, var(--surface-alt) 63%);
}
:root[data-theme='dark'] .auth-shell {
  background: radial-gradient(900px 420px at 50% -8%, #151515 0%, transparent 62%), var(--bg);
}
:root[data-theme='dark'] .callout { background: var(--surface-alt); border-color: var(--border-strong); color: var(--text-muted); }
:root[data-theme='dark'] .callout--warn { background: var(--amber-tint); border-color: #4a3a17; color: #e8c88a; }
:root[data-theme='dark'] .btn--primary { box-shadow: none; }

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-bottom: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.theme-toggle:hover { background: var(--surface-alt); color: var(--text); }

/* ---------- Trend deltas ------------------------------------------------- */

.delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
.delta--up   { color: var(--green); }
.delta--down { color: var(--red); }
.delta--flat { color: var(--text-subtle); }

/* ---------- Bulk selection ---------------------------------------------- */

.table__check { width: 34px; }
.table__check input, .toolbar input[type='checkbox'] { accent-color: var(--brand); width: 15px; height: 15px; cursor: pointer; }
tr.is-selected td { background: var(--brand-tint); }

.bulkbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 18px;
  background: var(--brand-tint);
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-ink);
}
.bulkbar .select { width: auto; min-width: 150px; }

/* ---------- Quick actions (call / WhatsApp / email) ---------------------- */

.quick-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.quick-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  text-decoration: none;
}
.quick-action:hover { background: var(--surface-alt); text-decoration: none; }
.quick-action--whatsapp { border-color: #25d36644; color: #1da851; background: #25d36610; }
.quick-action--whatsapp:hover { background: #25d3661f; }
.quick-action[aria-disabled='true'] { opacity: .45; pointer-events: none; }
button.quick-action { font-family: inherit; }
.quick-action:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Follow-up ---------------------------------------------------- */

.followup { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.followup .input { width: auto; }
.followup__due { color: var(--red); font-weight: 600; }
.followup__upcoming { color: var(--text-muted); }

/* ---------- Kanban pipeline --------------------------------------------- */

.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(266px, 1fr);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 12px;
  align-items: start;
}

.column {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 210px);
}
.column__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface-alt);
  border-radius: var(--radius) var(--radius) 0 0;
}
.column__count {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--text-muted);
}
.column__body { padding: 10px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; min-height: 90px; }
.column.is-dropzone { outline: 2px dashed var(--brand); outline-offset: -3px; }
.column__empty { color: var(--text-subtle); font-size: 12.5px; text-align: center; padding: 18px 8px; }

.kcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  box-shadow: var(--shadow-sm);
  cursor: grab;
}
.kcard:active { cursor: grabbing; }
.kcard.is-dragging { opacity: .45; }
.kcard__name { font-weight: 600; font-size: 13.5px; margin-bottom: 3px; }
.kcard__meta { font-size: 12px; color: var(--text-subtle); display: flex; flex-direction: column; gap: 2px; }
.kcard__footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 9px; }
.kcard__link { font-size: 12px; }

/* ---------- Health tables ------------------------------------------------ */

.health-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.health-row:last-child { border-bottom: none; }

/* ---------- New-leads pill ----------------------------------------------- */

.newpill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  background: var(--green-tint);
  color: var(--green);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

@media (max-width: 800px) {
  .board { grid-auto-columns: minmax(240px, 82vw); }
  .column { max-height: none; }
}

/* ---------- Modal dialogs ------------------------------------------------ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 20, 30, .55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  z-index: 90;
  animation: overlay-in .12s ease;
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  animation: modal-in .14s ease;
}
.modal--wide { max-width: 760px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal__title { font-size: 16px; font-weight: 650; }
.modal__close {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--text-subtle);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.modal__close:hover { background: var(--surface-alt); color: var(--text); }
.modal__body { padding: 20px; }
.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 14px; }

/* Key/value rows for custom fields on the add-lead form. */
.kv-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 8px; }
.kv-row .btn { padding: 6px 10px; }

/* Drop zone for the CSV file picker. */
.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 26px 18px;
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--brand); background: var(--brand-tint); }
.dropzone__icon { font-size: 26px; opacity: .5; }
.dropzone__hint { font-size: 12.5px; color: var(--text-subtle); margin-top: 5px; }

.import-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
.import-summary__item { text-align: center; padding: 11px; background: var(--surface-alt); border-radius: var(--radius-sm); }
.import-summary__value { font-size: 21px; font-weight: 700; }
.import-summary__label { font-size: 11.5px; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .04em; }

.errors-list { max-height: 190px; overflow-y: auto; font-size: 13px; }
.errors-list div { padding: 6px 0; border-bottom: 1px solid var(--border); }
.errors-list div:last-child { border-bottom: none; }

/* ---------- Shared: segmented control, status pills, card headers -------- */

.seg {
  display: inline-flex; gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}
.seg__btn {
  border: none; background: transparent;
  font: inherit; font-size: 12.5px; font-weight: 650;
  color: var(--text-muted);
  padding: 6px 12px; border-radius: 7px; cursor: pointer;
  transition: background .14s, color .14s;
}
.seg__btn:hover { color: var(--text); background: var(--surface-alt); }
.seg__btn.is-active { background: var(--text); color: var(--surface); }

.ov-health { display: flex; flex-wrap: wrap; gap: 8px; }
.ov-health__pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 650;
  padding: 6px 11px; border-radius: 999px;
  background: var(--surface-alt); border: 1px solid var(--border);
  color: var(--text-muted);
}
.ov-health__pill .dot { width: 7px; height: 7px; }
.ov-health__pill.is-ok { background: var(--green-tint); border-color: #b9e4cd; color: var(--green); }
.ov-health__pill.is-warn { background: var(--amber-tint); border-color: #edd3a0; color: var(--amber); }
.ov-health__pill.is-bad { background: var(--red-tint); border-color: #f3b8c2; color: var(--red); }

.ov-card { box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0; }
.ov-card > .card__body { flex: 1; }
.ov-card .card__header { align-items: flex-start; padding: 16px 20px 14px; }
.ov-card .card__header > div:first-child { flex: 1; min-width: 0; }
.ov-card .card__header > .row,
.ov-card .card__header > .btn { flex-shrink: 0; flex-wrap: nowrap; gap: 8px; }
.card__title { margin: 0; }
.card__sub { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }

/* ---------- Dashboard ----------------------------------------------------- */

/* Chart colors: validated categorical slots (light and dark stepped separately). */
:root {
  --db-series-1: #2a78d6;
  --db-series-2: #1baf7a;
  --db-grid: #edf0f6;
  --db-axis: #c9d2e5;
  --db-good: #0b7a3e;
  --db-bad: #c92a42;
  --db-warning: #9c6200;
}
:root[data-theme='dark'] {
  --db-series-1: #3987e5;
  --db-series-2: #199e70;
  --db-grid: #1c1c1c;
  --db-axis: #333333;
  --db-good: #4cc38f;
  --db-bad: #f27d90;
  --db-warning: #e8b44a;
}

.db { display: flex; flex-direction: column; gap: 16px; max-width: 1360px; }
.db .db-card, .db .db-kpi { transition: opacity .15s ease, border-color .15s, box-shadow .15s; }
.db.is-refreshing .db-card, .db.is-refreshing .db-kpi { opacity: .55; }

/* KPI tiles */
.db-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.db-kpi { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; color: var(--text); text-decoration: none; }
.db-kpi:hover { border-color: var(--border-strong); box-shadow: var(--shadow); text-decoration: none; }
.db-kpi:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.db-kpi__label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.db-kpi__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-height: 32px; }
.db-kpi__value { font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1; }
.db-kpi__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; min-height: 22px; }
.db-kpi__vs { color: var(--text-subtle); }
.db-error { grid-column: 1 / -1; }

.db-delta { font-weight: 650; font-size: 12px; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.db-delta--good { color: var(--db-good); background: color-mix(in srgb, var(--db-good) 11%, transparent); }
.db-delta--bad { color: var(--db-bad); background: color-mix(in srgb, var(--db-bad) 11%, transparent); }
.db-delta--flat { color: var(--text-muted); background: var(--surface-alt); }

.db-spark { flex-shrink: 0; overflow: visible; }
.db-spark__line { fill: none; stroke: var(--text-subtle); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; opacity: .75; }
.db-spark__dot { fill: var(--db-series-1); stroke: var(--surface); stroke-width: 2; }

/* Status: always icon + label, never color alone */
.db-status { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.db-status--good { color: var(--db-good); }
.db-status--warning { color: var(--db-warning); }
.db-status--critical { color: var(--db-bad); }
.db-status--muted { color: var(--text-subtle); font-weight: 550; }

/* Rows and cards */
.db-row { display: grid; gap: 16px; align-items: stretch; }
.db-row--main { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.db-row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.db-card { display: flex; flex-direction: column; min-width: 0; }
.db-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 0; }
.db-card__title { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.db-card__sub { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.db-card__tools { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.db-card__body { flex: 1; min-width: 0; padding: 14px 18px 18px; }
.db-card__body--flush { padding: 8px 0 6px; }
.db-link { font-size: 13px; font-weight: 600; white-space: nowrap; }
.db-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Lead volume chart */
.db-legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--text-muted); }
.db-legend__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.db-legend__key { width: 14px; height: 2px; border-radius: 2px; }
.db-legend__key.db-series-1, .db-tooltip__key.db-series-1 { background: var(--db-series-1); }
.db-legend__key.db-series-2, .db-tooltip__key.db-series-2 { background: var(--db-series-2); }
.db-chart-frame { position: relative; border-radius: 8px; }
.db-chart-frame:focus { outline: none; }
.db-chart-frame:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.db-chart { display: block; overflow: visible; }
.db-grid { stroke: var(--db-grid); stroke-width: 1; }
.db-axis { stroke: var(--db-axis); stroke-width: 1; }
.db-tick { fill: var(--text-subtle); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.db-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.db-line.db-series-1 { stroke: var(--db-series-1); }
.db-line.db-series-2 { stroke: var(--db-series-2); }
.db-area.db-series-1 { fill: var(--db-series-1); fill-opacity: .1; stroke: none; }
.db-dot { stroke: var(--surface); stroke-width: 2; }
.db-dot.db-series-1 { fill: var(--db-series-1); }
.db-dot.db-series-2 { fill: var(--db-series-2); }
.db-endlabel { fill: var(--text); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.db-crosshair { stroke: var(--db-axis); stroke-width: 1; }
.db-tooltip {
  position: absolute; top: 6px; z-index: 2; min-width: 156px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  font-size: 12.5px; pointer-events: none;
}
.db-tooltip[hidden] { display: none; }
.db-tooltip__date { font-weight: 650; color: var(--text-muted); margin-bottom: 6px; }
.db-tooltip__row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.db-tooltip__row strong { min-width: 26px; font-size: 14px; font-variant-numeric: tabular-nums; }
.db-tooltip__name { color: var(--text-muted); }
.db-tooltip__key { width: 12px; height: 2px; border-radius: 2px; flex-shrink: 0; }
.db-tooltip__rate { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border); color: var(--text-muted); }
.db-chart-table { max-height: 264px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* Today's focus */
.db-focus { list-style: none; margin: 0; padding: 0; }
.db-focus li + li { border-top: 1px solid var(--border); }
.db-focus__item { display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: var(--text); text-decoration: none; }
.db-focus__item:hover { background: var(--surface-alt); text-decoration: none; }
.db-focus__icon { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; font-size: 14px; font-weight: 700; }
.db-focus__icon--brand { background: var(--brand-tint); color: var(--brand); }
.db-focus__icon--warning { background: var(--amber-tint); color: var(--amber); }
.db-focus__icon--critical { background: var(--red-tint); color: var(--red); }
.db-focus__icon--good { background: var(--green-tint); color: var(--green); }
.db-focus__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.db-focus__title { font-size: 13.5px; font-weight: 650; }
.db-focus__detail { font-size: 12.5px; color: var(--text-muted); }
.db-focus__go { color: var(--text-subtle); transition: transform .12s var(--ease), color .12s; }
.db-focus__item:hover .db-focus__go { color: var(--brand); transform: translateX(2px); }
.db-focus-clear { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; }
.db-focus-clear p { margin: 2px 0 0; }
.db-upnext { margin-top: 4px; padding: 12px 18px 6px; border-top: 1px solid var(--border); }
.db-upnext__label { margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); }
.db-upnext__lead { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--text); font-size: 13px; text-decoration: none; }
.db-upnext__lead:hover .db-upnext__name { color: var(--brand); }
.db-upnext__name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-upnext__time { color: var(--text-subtle); font-size: 12px; white-space: nowrap; }
.db-meeting-time { order: -1; width: 64px; color: var(--brand-ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.db-avatar {
  width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand-tint); color: var(--brand-ink);
  font-size: 11px; font-weight: 700;
}

/* Pipeline */
.db-stages { display: flex; flex-direction: column; gap: 2px; }
.db-stage {
  display: grid; grid-template-columns: 138px minmax(0, 1fr) 36px 40px; align-items: center; gap: 10px;
  margin: 0 -8px; padding: 4px 8px; border-radius: 8px;
  color: var(--text); font-size: 13px; text-decoration: none;
}
.db-stage:hover { background: var(--surface-alt); text-decoration: none; }
.db-stage__name { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-stage__track { height: 8px; }
.db-stage__bar { display: block; height: 100%; background: var(--db-series-1); border-radius: 0 4px 4px 0; }
.db-stage__count { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.db-stage__share { text-align: right; color: var(--text-subtle); font-size: 12px; font-variant-numeric: tabular-nums; }
.db-stage-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.db-stage-summary__value { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.db-stage-summary__label { font-size: 12px; color: var(--text-muted); }

/* Lead sources */
.db-sources th:first-child, .db-sources td:first-child { padding-left: 18px; }
.db-sources th:last-child, .db-sources td:last-child { padding-right: 18px; }
.db-source__name { max-width: 240px; font-weight: 600; }
.db-source__track { max-width: 180px; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--surface-alt); overflow: hidden; }
.db-source__track span { display: block; height: 100%; background: var(--db-series-1); border-radius: 0 2px 2px 0; }

/* Meta signals */
.db-signals__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.db-signals__rate { font-size: 28px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.db-meter { height: 8px; margin: 10px 0 12px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--db-series-1) 16%, var(--surface)); }
.db-meter__fill { display: block; height: 100%; background: var(--db-series-1); border-radius: 0 4px 4px 0; }
.db-signal-list { display: flex; flex-direction: column; }
.db-signal { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.db-signal:hover { text-decoration: none; }
.db-signal:hover .db-signal__value { color: var(--brand); }
.db-signal__value { font-weight: 650; font-variant-numeric: tabular-nums; }
.db-setup ol { margin: 8px 0 14px; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted); }
.db-setup strong { color: var(--text); }

/* Recent leads */
.db-recent th:first-child, .db-recent td:first-child { padding-left: 18px; }
.db-recent th:last-child, .db-recent td:last-child { padding-right: 18px; }
.db-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.db-person__text { display: flex; flex-direction: column; min-width: 0; }
.db-person__name { font-weight: 600; color: var(--text); }
.db-person__name:hover { color: var(--brand); }
.db-person__meta { font-size: 12px; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-recent__row { cursor: pointer; }
.db-recent__row:hover td { background: var(--surface-alt); }
.db-recent__row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

@media (max-width: 1200px) {
  .db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-row--main { grid-template-columns: 1fr; }
  .db-row--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-row--three > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .db { gap: 12px; }
  .db-kpis { gap: 10px; }
  .db-kpi { padding: 14px; }
  .db-kpi__value { font-size: 24px; }
  .db-spark { display: none; }
  .db-row--three { grid-template-columns: 1fr; }
  .db-card__head { flex-wrap: wrap; }
  .db-card__head > div:first-child { flex-basis: 100%; }
  .db-recent th:nth-child(2), .db-recent td:nth-child(2),
  .db-recent th:nth-child(4), .db-recent td:nth-child(4),
  .db-recent th:nth-child(5), .db-recent td:nth-child(5) { display: none; }
  .db-recent th:nth-child(3), .db-recent td:nth-child(3) { padding-right: 18px; }
  .ov-card .card__header { flex-wrap: wrap; }
  .ov-card .card__header > div:first-child { flex-basis: 100%; }
}

/* ---------- Roles --------------------------------------------------------- */

/* Server-side checks are the real guard; this only hides controls reps can't use. */
:root[data-role='REP'] .manager-only { display: none !important; }
/* Things a rep sees only when given the permission (members.js PERMISSIONS). */
:root[data-role='REP']:not([data-perms~='view_all_leads']) .needs-view_all_leads { display: none !important; }
:root[data-role='REP']:not([data-perms~='assign_leads']) .needs-assign_leads { display: none !important; }
:root[data-role='REP']:not([data-perms~='delete_leads']) .needs-delete_leads { display: none !important; }
:root[data-role='REP']:not([data-perms~='import_export']) .needs-import_export { display: none !important; }
:root[data-role='REP']:not([data-perms~='manage_integrations']) .needs-manage_integrations { display: none !important; }
:root[data-role='REP']:not([data-perms~='view_roi']) .needs-view_roi { display: none !important; }

/* ---------- Notifications (bell) ----------------------------------------- */

.notif { position: relative; margin-left: auto; }
.notif__bell { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 15px; }
.notif__bell:hover { background: var(--surface-alt); }
.notif__count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--surface); }
.notif__count[hidden] { display: none; }
.notif__panel { position: absolute; z-index: 60; top: 42px; left: 0; width: 340px; max-height: 460px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.notif__panel[hidden] { display: none; }
.notif__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.notif__enable { display: block; width: calc(100% - 20px); margin: 10px; padding: 9px 10px; font: inherit; font-size: 13px; font-weight: 600; text-align: left; color: var(--brand-ink); background: var(--brand-tint); border: 1px dashed var(--brand); border-radius: var(--radius-sm); cursor: pointer; }
.notif__empty { margin: 0; padding: 18px 14px; font-size: 13px; color: var(--text-muted); }
.notif__list { list-style: none; margin: 0; padding: 4px 0; }
.notif__item { display: flex; gap: 10px; padding: 10px 14px; color: var(--text); text-decoration: none; }
.notif__item:hover { background: var(--surface-alt); text-decoration: none; }
.notif__item.is-unread { background: color-mix(in srgb, var(--brand-tint) 55%, transparent); }
.notif__icon { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; font-size: 13px; font-weight: 700; }
.notif__icon--brand { background: var(--brand-tint); color: var(--brand); }
.notif__icon--warning { background: var(--amber-tint); color: var(--amber); }
.notif__text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.notif__title { font-size: 13px; font-weight: 650; }
.notif__body { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif__time { font-size: 11.5px; color: var(--text-subtle); }
@media (max-width: 800px) { .notif__panel { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; } }

/* ---------- Speed-to-lead badges ------------------------------------------ */

.speed-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 650; white-space: nowrap; vertical-align: middle; }
.speed-badge--overdue { background: var(--red-tint); color: var(--red); }
.speed-badge--waiting { background: var(--amber-tint); color: var(--amber); }
.speed-badge--good { background: var(--green-tint); color: var(--green); }
.speed-badge--slow { background: var(--surface-alt); color: var(--text-muted); }
#filter-waiting.is-on { background: var(--red-tint); border-color: transparent; color: var(--red); }

/* ---------- Team ---------------------------------------------------------- */

.team-table th:first-child, .team-table td:first-child { padding-left: 18px; }
.team-table th:last-child, .team-table td:last-child { padding-right: 18px; }
.team-role { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--surface-alt); color: var(--text-muted); border: 1px solid var(--border); }
.team-role--owner { background: var(--violet-tint); color: var(--violet); border-color: transparent; }
.team-role--manager { background: var(--brand-tint); color: var(--brand); border-color: transparent; }
.team-actions { justify-content: flex-end; flex-wrap: nowrap; }
.select--sm { width: auto; padding: 5px 28px 5px 9px; font-size: 13px; }
.team-remove { color: var(--red); }
.team-rank { width: 36px; color: var(--text-subtle); font-weight: 700; font-variant-numeric: tabular-nums; }
.team-empty { padding: 12px 18px; margin: 0; }

/* Rep permissions: the tick list on invites and the member editor */
.perm-picker__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.perm-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.perm-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  transition: border-color .12s, background .12s;
}
.perm-item:hover { border-color: var(--border-strong); }
.perm-item:has(input:checked) { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); background: var(--brand-tint); }
.perm-item input { accent-color: var(--brand); width: 16px; height: 16px; margin: 1px 0 0; flex-shrink: 0; cursor: pointer; }
.perm-item__text { display: grid; gap: 2px; min-width: 0; }
.perm-item__label { font-size: 13px; font-weight: 650; color: var(--text); }
.perm-item__hint { font-size: 12px; line-height: 1.35; color: var(--text-muted); }
.perm-summary { gap: 8px; font-weight: 550; }
.perm-summary__edit { font-size: 11.5px; color: var(--brand); }
.perm-extra { white-space: nowrap; }
@media (max-width: 560px) { .perm-list { grid-template-columns: 1fr; } }
.assignee { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.assignee .db-avatar { width: 24px; height: 24px; font-size: 10px; }
.kcard__assignee { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-ink); font-size: 10px; font-weight: 700; }

/* ---------- Calendar ------------------------------------------------------ */

:root {
  --ev-meeting: #2a78d6; --ev-site_visit: #eb6834; --ev-call: #1baf7a; --ev-follow_up: #eda100; --ev-other: #e87ba4;
}
:root[data-theme='dark'] {
  --ev-meeting: #3987e5; --ev-site_visit: #d95926; --ev-call: #199e70; --ev-follow_up: #c98500; --ev-other: #d55181;
}
.cal { display: flex; flex-direction: column; gap: 12px; max-width: 1360px; }
.cal.is-refreshing .cal-surface { opacity: .6; transition: opacity .15s; }
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cal-nav { display: inline-flex; }
.cal-nav .btn { font-size: 18px; line-height: 1; padding: 4px 10px; }
.cal-range { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-muted); }
.cal-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend__key { width: 12px; height: 12px; border-radius: 3px; border-left: 3px solid var(--ev-color); background: color-mix(in srgb, var(--ev-color) 18%, var(--surface)); }
.cal-surface { overflow: hidden; }

.cal-item { --ev-color: var(--ev-meeting); }
.cal-item--meeting { --ev-color: var(--ev-meeting); }
.cal-item--site_visit { --ev-color: var(--ev-site_visit); }
.cal-item--call { --ev-color: var(--ev-call); }
.cal-item--follow_up { --ev-color: var(--ev-follow_up); }
.cal-item--other { --ev-color: var(--ev-other); }
.cal-item--followup { --ev-color: var(--text-subtle); }
.cal-legend__key.cal-item--followup { border-left-style: dashed; background: var(--surface-alt); }

.cal-item--block, .cal-item--chip {
  font: inherit; text-align: left; cursor: pointer; color: var(--text);
  border: none; border-left: 3px solid var(--ev-color);
  background: color-mix(in srgb, var(--ev-color) 15%, var(--surface));
  border-radius: 0 6px 6px 0; overflow: hidden;
}
.cal-item--block { position: absolute; padding: 3px 6px; display: flex; flex-direction: column; gap: 1px; font-size: 12px; line-height: 1.25; }
.cal-item--block:hover, .cal-item--chip:hover { background: color-mix(in srgb, var(--ev-color) 26%, var(--surface)); }
.cal-item--block:focus-visible, .cal-item--chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; z-index: 3; }
.cal-item--followup.cal-item--block, .cal-item--followup.cal-item--chip { border-left-style: dashed; background: var(--surface-alt); }
.cal-item.is-cancelled .cal-item__title, .cal-agenda__title.is-cancelled { text-decoration: line-through; color: var(--text-subtle); }
.cal-item.is-completed { opacity: .7; }
.cal-item--short { flex-direction: row; align-items: center; gap: 4px; padding: 1px 6px; white-space: nowrap; }
.cal-item--short .cal-item__title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cal-item__time { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-item__title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

.cal-week__head { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.cal-week__day-label { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; font-size: 12px; color: var(--text-muted); border-left: 1px solid var(--border); }
.cal-week__day-label strong { font-size: 18px; color: var(--text); line-height: 1.2; }
.cal-week__day-label.is-today strong { color: #fff; background: var(--brand); border-radius: 999px; min-width: 30px; text-align: center; }
.cal-week__scroll { max-height: 640px; overflow-y: auto; }
.cal-week__grid { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.cal-week__gutter { position: relative; }
.cal-week__hour { height: 48px; font-size: 11px; color: var(--text-subtle); text-align: right; padding-right: 8px; transform: translateY(-7px); font-variant-numeric: tabular-nums; }
.cal-week__col {
  position: relative; border-left: 1px solid var(--border); cursor: cell;
  background-image: linear-gradient(to bottom, var(--db-grid) 1px, transparent 1px);
  background-size: 100% 48px;
}
.cal-week__col.is-today { background-color: color-mix(in srgb, var(--brand-tint) 40%, transparent); }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--red); z-index: 2; pointer-events: none; }
.cal-now::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }

.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-month__weekday { padding: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); border-bottom: 1px solid var(--border); }
.cal-month__cell { min-height: 112px; padding: 6px; display: flex; flex-direction: column; gap: 3px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-width: 0; }
.cal-month__cell:nth-child(7n + 7) { border-right: none; }
.cal-month__cell.is-outside { background: var(--surface-alt); }
.cal-month__cell.is-outside .cal-month__date { color: var(--text-subtle); }
.cal-month__date { align-self: flex-start; font: inherit; font-size: 12.5px; font-weight: 650; border: none; background: none; cursor: pointer; padding: 2px 6px; border-radius: 999px; color: var(--text); }
.cal-month__cell.is-today .cal-month__date { background: var(--brand); color: #fff; }
.cal-item--chip { display: flex; gap: 5px; align-items: baseline; padding: 2px 6px; font-size: 11.5px; min-width: 0; }
.cal-item--chip .cal-item__title { -webkit-line-clamp: 1; font-weight: 600; }
.cal-month__more { font: inherit; font-size: 11.5px; font-weight: 600; color: var(--brand); background: none; border: none; text-align: left; cursor: pointer; padding: 0 6px; }

.cal-agenda { display: flex; flex-direction: column; }
.cal-agenda__day + .cal-agenda__day { border-top: 1px solid var(--border); }
.cal-agenda__date { margin: 0; padding: 12px 18px 6px; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.cal-agenda__date.is-today { color: var(--brand); }
.cal-agenda__row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 18px; font: inherit; text-align: left; color: var(--text); background: none; border: none; cursor: pointer; }
.cal-agenda__row:hover { background: var(--surface-alt); }
.cal-agenda__time { width: 72px; flex-shrink: 0; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cal-agenda__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ev-color); flex-shrink: 0; }
.cal-agenda__dot.cal-item--followup { background: none; border: 2px dashed var(--text-subtle); }
.cal-agenda__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cal-agenda__title { font-weight: 650; font-size: 13.5px; }
.cal-agenda__meta { font-size: 12.5px; color: var(--text-muted); }
.cal-booked { font-size: 11.5px; font-weight: 650; padding: 2px 8px; border-radius: 999px; background: var(--green-tint); color: var(--green); white-space: nowrap; }

/* Event editor */
.ev-grid { gap: 0 12px; }
.ev-lead { position: relative; }
.ev-lead__results { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); overflow: hidden; }
.ev-lead__results[hidden], .ev-lead__chip[hidden], .ev-lead input[hidden] { display: none; }
.ev-lead__option { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 12px; font: inherit; font-size: 13px; text-align: left; background: none; border: none; cursor: pointer; color: var(--text); }
.ev-lead__option:hover { background: var(--surface-alt); }
.ev-lead__option span { color: var(--text-muted); }
.ev-lead__empty { padding: 10px 12px; font-size: 13px; color: var(--text-muted); }
.ev-lead__chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); font-weight: 600; font-size: 13.5px; }
.ev-lead__fixed { margin: 0 0 14px; font-size: 13.5px; }
.ev-delete { color: var(--red); }

/* Booking settings */
.bk-linkbox { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; background: var(--surface-alt); border-radius: var(--radius-sm); }
.bk-link { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; flex: 1; min-width: 200px; }
.bk-days { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.bk-day { display: grid; grid-template-columns: 140px 130px 20px 130px; justify-content: start; align-items: center; gap: 8px; }
.bk-day .input { padding: 6px 8px; }
@media (max-width: 640px) {
  .cal-week__head, .cal-week__grid { grid-template-columns: 40px repeat(7, minmax(44px, 1fr)); }
  .cal-month__cell { min-height: 72px; }
  .bk-day { grid-template-columns: 1fr 1fr 20px 1fr; justify-content: stretch; }
}

/* Lead page: meetings card */
.lead-events { list-style: none; margin: 0; padding: 4px 0; }
.lead-event { --ev-color: var(--ev-meeting); width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 18px; font: inherit; text-align: left; color: var(--text); background: none; border: none; cursor: pointer; }
.lead-event:hover { background: var(--surface-alt); }
.lead-event__bar { width: 4px; align-self: stretch; border-radius: 2px; background: var(--ev-color); }
.lead-event__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lead-event__title { font-weight: 650; font-size: 13.5px; }
.lead-event__meta { font-size: 12px; color: var(--text-muted); }
.lead-event__status { font-size: 11.5px; font-weight: 650; color: var(--text-muted); text-transform: capitalize; }
.lead-event.is-muted { opacity: .65; }

/* ---------- Public booking page ------------------------------------------- */

.book-shell { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; }
.book { width: 100%; max-width: 960px; display: grid; grid-template-columns: 300px minmax(0, 1fr); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.book__host { padding: 28px; border-right: 1px solid var(--border); background: var(--surface-alt); }
.book__logo { width: 40px; height: 40px; margin-bottom: 18px; }
.book__eyebrow { margin: 0; font-size: 13px; font-weight: 650; color: var(--text-muted); }
.book__title { margin: 4px 0 14px; font-size: 22px; letter-spacing: -.02em; line-height: 1.2; }
.book__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--text-muted); }
.book__desc { margin-top: 14px; font-size: 13.5px; color: var(--text-muted); }
.book__picker { padding: 28px; min-height: 420px; }
.book__step { margin: 0 0 12px; font-size: 16px; }
.book__days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.book__day { flex: 0 0 auto; width: 68px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; font: inherit; font-size: 12px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.book__day strong { font-size: 19px; color: var(--text); }
.book__day:hover { border-color: var(--brand); }
.book__day.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.book__day.is-active strong { color: #fff; }
.book__daylabel { margin: 16px 0 8px; font-weight: 650; font-size: 14px; }
.book__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.book__slot { padding: 9px 6px; font: inherit; font-size: 13.5px; font-weight: 650; color: var(--brand); background: var(--surface); border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--border)); border-radius: var(--radius-sm); cursor: pointer; font-variant-numeric: tabular-nums; }
.book__slot:hover { background: var(--brand-tint); }
.book__slot.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.book__form { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.book__chosen { margin: 0 0 14px; font-weight: 650; color: var(--brand-ink); }
.book__done, .book__empty { text-align: center; padding: 40px 10px; }
.book__check { width: 56px; height: 56px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: var(--green-tint); color: var(--green); font-size: 26px; font-weight: 700; }
.book__footer { margin-top: 18px; font-size: 12.5px; color: var(--text-subtle); }
@media (max-width: 760px) {
  .book { grid-template-columns: 1fr; }
  .book__host { border-right: none; border-bottom: 1px solid var(--border); padding: 20px; }
  .book__picker { padding: 20px; }
}

/* ---------- Campaign ROI -------------------------------------------------- */

.db-kpi--static:hover { border-color: var(--border); box-shadow: var(--shadow-sm); }
.roi-key { display: inline-block; width: 12px; height: 8px; border-radius: 2px; }
.roi-key--spend { background: var(--db-series-1); }
.roi-key--revenue { background: var(--db-series-2); }
.db-tooltip__key.roi-key--spend { background: var(--db-series-1); }
.db-tooltip__key.roi-key--revenue { background: var(--db-series-2); }
.roi-tip { position: absolute; top: 0; left: 0; }
.roi-bars { display: flex; flex-direction: column; gap: 14px; }
.roi-bars__row { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); gap: 16px; align-items: center; }
.roi-bars__name { font-size: 13px; font-weight: 600; }
.roi-bars__track { display: flex; flex-direction: column; gap: 2px; }
.roi-bar-line { display: flex; align-items: center; gap: 8px; min-height: 12px; }
.roi-bar { height: 10px; border-radius: 0 4px 4px 0; flex-shrink: 0; outline: none; transition: filter .12s; }
.roi-bar:hover, .roi-bar:focus-visible { filter: brightness(1.12); }
.roi-bar:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }
.roi-bar--spend { background: var(--db-series-1); }
.roi-bar--revenue { background: var(--db-series-2); }
.roi-bar__value { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.roi-table th:first-child, .roi-table td:first-child { padding-left: 18px; }
.roi-table th:last-child, .roi-table td:last-child { padding-right: 18px; }
.roi-sort { font: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; white-space: nowrap; }
.roi-sort:hover, .roi-sort.is-active { color: var(--text); }
.roi-name { font-weight: 600; max-width: 280px; }
.roi-id { font-size: 11.5px; color: var(--text-subtle); font-family: var(--mono); }
.roi-row--muted td { color: var(--text-muted); background: var(--surface-alt); }
.roi-row--total td { font-weight: 700; border-top: 2px solid var(--border); }
@media (max-width: 640px) {
  .roi-bars__row { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Templates ---------------------------------------------------- */

.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.tpl-empty { grid-column: 1 / -1; }
.tpl-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; }
.tpl-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tpl-card__name { font-size: 15px; font-weight: 700; margin: 0; }
.tpl-card__subject { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.tpl-card__body {
  margin: 0; font-size: 13px; color: var(--text-muted); white-space: pre-line;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.tpl-card__actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }

.tpl-editor { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; }
.tpl-editor__body { font-family: inherit; line-height: 1.5; }
.tpl-ai { background: var(--brand-tint); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 14px; }
.tpl-ai .row { flex-wrap: nowrap; }
.tpl-ai .input { flex: 1; min-width: 0; }
.tpl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.tpl-chip {
  font: inherit; font-family: var(--mono); font-size: 11.5px;
  padding: 4px 8px; border-radius: 999px; cursor: pointer;
  background: var(--surface-alt); border: 1px solid var(--border); color: var(--brand-ink);
}
.tpl-chip:hover { border-color: var(--brand); background: var(--brand-tint); }
.tpl-preview { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tpl-preview__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); }
.tpl-preview__frame { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--surface); min-height: 160px; }
.tpl-preview__frame--whatsapp { background: #e7f7e3; border-color: #cfe9c8; }
:root[data-theme='dark'] .tpl-preview__frame--whatsapp { background: #13301f; border-color: #1f4a30; }
.tpl-preview__subject { font-weight: 700; font-size: 14px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.tpl-preview__subject:empty { display: none; }
.tpl-preview__body { font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.tpl-preview__warn { color: var(--amber); }

/* ---------- Composer ----------------------------------------------------- */

.composer__meta { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 13.5px; padding: 10px 12px; background: var(--surface-alt); border-radius: var(--radius-sm); }
.composer__template .row { flex-wrap: nowrap; }
.composer__template .select { flex: 1; min-width: 0; }
.composer__ai { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--brand-tint); margin-bottom: 14px; }
.composer__ai summary { cursor: pointer; padding: 10px 12px; font-size: 13.5px; font-weight: 650; color: var(--brand-ink); }
.composer__ai-body { padding: 0 12px 12px; gap: 10px; }
.composer__ai-body .select { width: auto; flex: 1; min-width: 120px; }
.composer__warn { color: var(--amber); min-height: 1em; }
.composer .textarea { font-family: inherit; line-height: 1.5; }

/* ---------- Settings ----------------------------------------------------- */

.settings { max-width: 980px; }
.settings-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 16px; }
.settings-switch { justify-content: flex-end; }
.settings .callout { margin-bottom: 14px; }

/* ---------- AI insights -------------------------------------------------- */

.ai-card { border-color: color-mix(in srgb, var(--violet) 30%, var(--border)); }
.ai-insights { display: flex; flex-direction: column; gap: 12px; }
.ai-insights p { margin: 0; }
.ai-insights__summary { font-size: 14px; line-height: 1.55; }
.ai-insights__next { background: var(--surface-alt); border-radius: var(--radius-sm); padding: 10px 12px; }
.ai-insights__next p { font-weight: 600; margin-top: 4px; }
.ai-insights__points { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; display: flex; flex-direction: column; gap: 4px; }
.ai-insights__suggest { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ai-temp { font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.ai-temp--hot { background: var(--red-tint); color: var(--red); }
.ai-temp--warm { background: var(--amber-tint); color: var(--amber); }
.ai-temp--cold { background: var(--brand-tint); color: var(--brand); }

@media (max-width: 800px) {
  .tpl-editor { grid-template-columns: 1fr; }
  .settings-switch { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .kv-row { grid-template-columns: 1fr; }
  .modal-overlay { padding: 16px 10px; }
}

/* ---------- AI assistant -------------------------------------------------- */

.ai-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px 11px 15px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--brand), var(--violet)); color: #fff;
  font: inherit; font-size: 14px; font-weight: 650; box-shadow: var(--shadow-lg);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.ai-launcher:hover { transform: translateY(-1px); }
.ai-launcher:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 40%, transparent); outline-offset: 2px; }
.ai-launcher__spark { font-size: 15px; }
body.ai-open .ai-launcher { display: none; }

.ai-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
  width: min(460px, 100vw); display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg);
  animation: ai-slide .22s var(--ease);
}
.ai-panel[hidden] { display: none; }
.ai-panel.is-wide { width: min(780px, 100vw); }
@keyframes ai-slide { from { transform: translateX(24px); opacity: 0; } }

.ai-panel__head { display: flex; align-items: center; gap: 2px; padding: 12px 12px 12px 18px; background: var(--surface); border-bottom: 1px solid var(--border); }
.ai-panel__title { font-weight: 700; font-size: 15px; }
.ai-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 17px; cursor: pointer; }
.ai-icon:hover { background: var(--surface-alt); color: var(--text); }
.ai-icon:focus-visible { outline: 2px solid var(--brand); }

.ai-history { max-height: 50%; overflow-y: auto; padding: 8px; background: var(--surface); border-bottom: 1px solid var(--border); }
.ai-history[hidden] { display: none; }
.ai-history__row { display: flex; align-items: center; gap: 4px; }
.ai-history__open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ai-history__open:hover { background: var(--surface-alt); }

.ai-log { flex: 1; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; }

.ai-welcome { margin: auto 0; text-align: center; padding: 10px 6px 20px; }
.ai-welcome h3 { margin: 10px 0 6px; font-size: 18px; }
.ai-welcome p { margin: 0 auto 18px; max-width: 330px; font-size: 13.5px; line-height: 1.5; }
.ai-welcome__badge { width: 48px; height: 48px; margin: 0 auto; display: grid; place-items: center; border-radius: 14px; font-size: 22px; background: linear-gradient(135deg, var(--brand-tint), var(--violet-tint)); }
.ai-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ai-chip { padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.ai-chip:hover { border-color: var(--brand); color: var(--brand); }

.ai-msg { display: flex; flex-direction: column; gap: 10px; max-width: 100%; }
.ai-msg--user { align-self: flex-end; max-width: 85%; }
.ai-msg--user .ai-text { padding: 9px 14px; border-radius: 16px 16px 4px 16px; background: var(--brand); color: #fff; white-space: pre-wrap; }
.ai-msg--assistant .ai-text { font-size: 14px; line-height: 1.55; color: var(--text); }
.ai-text p { margin: 0 0 8px; }
.ai-text p:last-child, .ai-text ul:last-child { margin-bottom: 0; }
.ai-text ul { margin: 0 0 8px; padding-left: 20px; }
.ai-text li { margin: 2px 0; }

.ai-typing { display: flex; align-items: center; gap: 4px; padding: 4px 18px 10px; font-size: 12.5px; color: var(--text-subtle); }
.ai-typing[hidden] { display: none; }
.ai-typing span:not(:last-child) { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); animation: ai-bounce 1s infinite ease-in-out; }
.ai-typing span:nth-child(2) { animation-delay: .15s; }
.ai-typing span:nth-child(3) { animation-delay: .3s; margin-right: 6px; }
@keyframes ai-bounce { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ai-typing span, .ai-panel { animation: none !important; } }

.ai-compose { display: flex; align-items: flex-end; gap: 8px; margin: 0 12px 12px; padding: 8px 8px 8px 14px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow-sm); }
.ai-compose:focus-within { border-color: var(--brand); }
.ai-input { flex: 1; min-height: 24px; max-height: 140px; padding: 6px 0; border: 0; outline: 0; resize: none; background: transparent; color: var(--text); font: inherit; font-size: 14px; line-height: 1.45; }
.ai-send { width: 36px; height: 36px; padding: 0; border-radius: 10px; font-size: 17px; flex-shrink: 0; }

/* cards */
.ai-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-sm); min-width: 0; }
.ai-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ai-card__title { font-size: 12.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--text-subtle); }
.ai-empty { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.ai-link { align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--brand); text-decoration: none; }
.ai-link:hover { text-decoration: underline; }

.ai-rows { display: flex; flex-direction: column; margin: 0 -8px; }
.ai-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; color: inherit; text-decoration: none; min-width: 0; }
a.ai-row:hover { background: var(--surface-alt); }
.ai-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ai-row__title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-row__meta { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-avatar { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--brand-tint); color: var(--brand); font-size: 12px; font-weight: 700; }
.ai-avatar--lg { width: 42px; height: 42px; font-size: 14px; }
.ai-event-dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: 3px; background: var(--ev-color); }

.ai-lead { display: flex; align-items: center; gap: 12px; }
.ai-lead__name { font-size: 16px; font-weight: 700; color: var(--text); text-decoration: none; }
.ai-lead__name:hover { color: var(--brand); }
.ai-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-dl { display: grid; grid-template-columns: minmax(90px, max-content) 1fr; gap: 5px 14px; margin: 0; font-size: 13px; }
.ai-dl dt { color: var(--text-muted); text-transform: capitalize; }
.ai-dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; }
.ai-sub { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
.ai-sub__label { font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--text-subtle); }
.ai-mini { font-size: 13px; color: var(--text-muted); line-height: 1.4; }

.ai-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.ai-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-alt); border: 1px solid var(--border); }
.ai-stat__label { font-size: 12px; color: var(--text-muted); }
.ai-stat__value { font-size: 20px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ai-stat__sub { font-size: 11.5px; color: var(--text-subtle); }

.ai-trend { position: relative; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: 120px auto; column-gap: 6px; }
.ai-trend__svg { grid-column: 2; grid-row: 1; width: 100%; height: 100%; overflow: visible; }
.ai-trend__y { position: absolute; color: var(--text-subtle); left: 0; width: 28px; text-align: right; font-size: 11.5px; line-height: 1; }
.ai-trend__y--max { top: 0; }
.ai-trend__y--min { top: 112px; }
.ai-trend__x { grid-column: 2; color: var(--text-subtle); display: flex; justify-content: space-between; margin-top: 4px; font-size: 11.5px; }
.ai-legend { font-size: 12px; }

.ai-bars { display: flex; flex-direction: column; gap: 6px; }
.ai-bar { display: grid; grid-template-columns: 92px 1fr 40px; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-size: 13px; padding: 2px 0; border-radius: 6px; }
.ai-bar:hover .ai-bar__label { color: var(--brand); }
.ai-bar__label { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-bar__track { height: 10px; border-radius: 0 4px 4px 0; background: var(--slate-tint); overflow: hidden; }
.ai-bar__fill { display: block; height: 100%; background: var(--db-series-1); border-radius: 0 4px 4px 0; }
.ai-bar__value { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }

.ai-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ai-table th { text-align: right; font-weight: 600; font-size: 11.5px; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .03em; padding: 0 6px 6px; border-bottom: 1px solid var(--border); }
.ai-table td { text-align: right; padding: 7px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ai-table th:first-child, .ai-table td:first-child { text-align: left; padding-left: 0; }
.ai-table tr:last-child td { border-bottom: 0; }
.ai-table__name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }

/* confirm cards */
.ai-confirm { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent); }
.ai-confirm.is-done { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); box-shadow: none; }
.ai-confirm.is-failed { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); box-shadow: none; }
.ai-confirm.is-cancelled { opacity: .7; box-shadow: none; border-color: var(--border); }
.ai-confirm__head { display: flex; align-items: flex-start; gap: 10px; }
.ai-confirm__icon { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; background: var(--brand-tint); color: var(--brand); font-size: 13px; font-weight: 700; }
.is-done .ai-confirm__icon { background: var(--green-tint); color: var(--green); }
.is-failed .ai-confirm__icon { background: var(--red-tint); color: var(--red); }
.is-cancelled .ai-confirm__icon { background: var(--slate-tint); color: var(--text-muted); }
.ai-confirm__summary { flex: 1; font-weight: 650; font-size: 14px; line-height: 1.4; padding-top: 3px; }
.ai-confirm__state { flex-shrink: 0; font-size: 12px; font-weight: 650; padding: 3px 9px; border-radius: 999px; background: var(--slate-tint); color: var(--text-muted); }
.ai-confirm__state--done { background: var(--green-tint); color: var(--green); }
.ai-confirm__state--failed { background: var(--red-tint); color: var(--red); }
.ai-confirm__state--running { background: var(--brand-tint); color: var(--brand); }
.ai-confirm__result { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.ai-confirm__result.is-error { color: var(--red); }
.ai-confirm__result a { color: var(--brand); font-weight: 600; }
.ai-field { display: flex; flex-direction: column; gap: 4px; }
.ai-edit { width: 100%; font-size: 13.5px; }
textarea.ai-edit { resize: vertical; line-height: 1.5; }

@media (max-width: 640px) {
  .ai-launcher { right: 14px; bottom: 14px; padding: 12px; }
  .ai-launcher__label { display: none; }
  .ai-panel, .ai-panel.is-wide { width: 100vw; border-left: 0; }
  .ai-icon--wide { display: none; }
  .ai-bar { grid-template-columns: 76px 1fr 34px; }
}

/* ---------- Lead sources -------------------------------------------------- */

.src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.src-tile {
  --src: var(--brand);
  width: 38px; height: 38px; flex-shrink: 0; display: inline-grid; place-items: center;
  border-radius: 10px; color: var(--src);
  background: color-mix(in srgb, var(--src) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--src) 20%, var(--border));
  font-size: 14px; font-weight: 750; letter-spacing: -.02em; font-family: ui-sans-serif, system-ui, sans-serif;
}
.src-tile svg { width: 56%; height: 56%; fill: currentColor; }
:root[data-theme='dark'] .src-tile { background: color-mix(in srgb, var(--src) 16%, var(--surface)); border-color: color-mix(in srgb, var(--src) 30%, var(--border)); }
:root[data-theme='dark'] .src-tile.is-dark-brand { color: var(--text); background: var(--surface-alt); border-color: var(--border-strong); }
.src-tile--lg { width: 46px; height: 46px; font-size: 16px; border-radius: 12px; }

.src-card, .src-option {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  color: inherit; text-decoration: none; min-width: 0;
}
a.src-card { transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
a.src-card:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); box-shadow: var(--shadow); }
a.src-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.src-card__top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.src-card__titles { display: flex; flex-direction: column; min-width: 0; }
.src-card__name { font-weight: 650; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-card__kind { font-size: 12.5px; color: var(--text-muted); }
.src-card__stats { display: flex; gap: 16px; font-size: 13px; color: var(--text-muted); }
.src-card__stats strong { color: var(--text); font-variant-numeric: tabular-nums; }
.src-card__foot { font-size: 12.5px; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-option__blurb { margin: 0; flex: 1; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.src-option .btn { align-self: flex-start; }
.src-catalog { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 20px; }

.src-status { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; }
.src-status--active { background: var(--green-tint); color: var(--green); }
.src-status--waiting { background: var(--slate-tint); color: var(--text-muted); }
.src-status--paused { background: var(--amber-tint); color: var(--amber); }
.src-status--error { background: var(--red-tint); color: var(--red); }

.src-create__head { display: flex; align-items: center; gap: 14px; }
.src-create__head p { margin: 0; font-size: 13.5px; line-height: 1.5; }

/* detail page */
.src-head { display: flex; align-items: center; gap: 14px; }
.src-back { margin: 0 0 2px; font-size: 12.5px; }
.src-back a { color: var(--text-muted); text-decoration: none; }
.src-back a:hover { color: var(--brand); }
#src-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.src-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.src-stat { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; }
.src-stat__label { font-size: 12.5px; color: var(--text-muted); }
.src-stat__value { font-size: 22px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.src-stat__sub { font-size: 12px; color: var(--text-subtle); }
.src-alert { grid-column: 1 / -1; margin: 0; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--red-tint); color: var(--red); font-size: 13.5px; line-height: 1.5; }

.src-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.src-step { display: grid; grid-template-columns: 30px 1fr; gap: 14px; }
.src-step__num { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-tint); color: var(--brand); font-weight: 700; font-size: 13.5px; }
.src-step__body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.src-step__title { margin: 3px 0 0; font-size: 15px; }
.src-text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); max-width: 760px; }
.src-options { display: flex; flex-direction: column; gap: 8px; }
.src-options__inline { flex-wrap: wrap; }
.switch .src-options__text, .src-options__inline input.input { width: 170px; height: auto; accent-color: auto; }
.input--sm { width: auto; padding: 5px 9px; font-size: 13px; }

.src-code-wrap { position: relative; }
.src-code-wrap > .btn { position: absolute; top: 8px; right: 8px; }
.src-code {
  margin: 0; padding: 14px 16px; padding-right: 92px; overflow-x: auto;
  background: #0f172a; color: #e2e8f0; border-radius: var(--radius-sm);
  font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre;
}
.src-code--sm { max-height: 280px; overflow: auto; padding-right: 16px; }
:root[data-theme='dark'] .src-code { background: #050505; border: 1px solid var(--border); }
.src-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.src-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 8px 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); }
.src-link__url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--brand); }

.src-builder { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 24px; align-items: start; }
.src-builder__editor { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.src-builder__preview { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 6px; }
.src-preview { width: 100%; height: 640px; border: 1px solid var(--border); border-radius: var(--radius); background: #f4f6fb; }
.src-fields { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.src-field { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); }
.src-field__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; }
.src-field__row .input { width: 100%; }
.src-field__req { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.src-field__tools { display: flex; }
.src-field__tools .btn { padding: 4px 8px; }
.src-field__options { width: 100%; }
.src-color { width: 54px; height: 38px; padding: 3px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); cursor: pointer; }
.src-actions { display: flex; gap: 8px; justify-content: flex-start; }

.src-settings { display: flex; flex-direction: column; gap: 16px; }
.src-details { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 14px; }
.src-details[open] { padding-bottom: 14px; }
.src-details > summary { cursor: pointer; padding: 12px 0; font-weight: 650; font-size: 14px; }
.src-details > *:not(summary) + * { margin-top: 12px; }
.src-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.src-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; cursor: pointer; background: var(--surface); }
.src-chip input { accent-color: var(--brand); }
.src-preview-result:empty { display: none; }

.src-log td { vertical-align: top; }
.src-log__when { white-space: nowrap; }
.src-log__msg { font-size: 13.5px; line-height: 1.45; max-width: 620px; }
.src-log__msg > span { display: block; }
.src-log__origin { margin-top: 2px; font-size: 12px; overflow-wrap: anywhere; }
.db-card[hidden] { display: none; }
.src-log__tools { white-space: nowrap; text-align: right; }
.src-log__tools .btn + .btn { margin-left: 6px; }
.src-log__payload td { background: var(--surface-alt); }
.src-outcome { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.src-outcome--created { background: var(--green-tint); color: var(--green); }
.src-outcome--duplicate { background: var(--brand-tint); color: var(--brand); }
.src-outcome--test { background: var(--violet-tint); color: var(--violet); }
.src-outcome--rejected { background: var(--amber-tint); color: var(--amber); }
.src-outcome--error { background: var(--red-tint); color: var(--red); }
.src-empty { display: flex; align-items: center; gap: 12px; padding: 22px 20px; color: var(--text-muted); font-size: 13.5px; }
.src-empty p { margin: 0; }
.src-empty__pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); animation: src-pulse 1.6s ease-in-out infinite; }
@keyframes src-pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .src-empty__pulse { animation: none; } }

.src-danger { display: flex; flex-direction: column; gap: 14px; }
.src-danger__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.src-danger__row p { margin: 2px 0 0; }

@media (max-width: 1000px) {
  .src-builder { grid-template-columns: 1fr; }
  .src-builder__preview { position: static; }
  .src-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .src-field__row { grid-template-columns: 1fr 1fr; }
  .src-danger__row { flex-direction: column; align-items: flex-start; }
  .src-log thead { display: none; }
  .src-log tr:not(.src-log__payload) { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 10px 14px; }
  .src-log tr:not(.src-log__payload) td { padding: 0; border: 0; }
  .src-log__msg { grid-column: 1 / -1; }
  .src-log__tools { grid-column: 1 / -1; text-align: left; }
}

/* ---------- Keyboard shortcuts dialog ------------------------------------ */
.shortcut-list { display: flex; flex-direction: column; }
.shortcut-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 2px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.shortcut-row:last-child { border-bottom: 0; }
.shortcut-keys { display: inline-flex; gap: 4px; }

/* ---------- Home (command center) ---------------------------------------- */

.seg--sm .seg__btn { padding: 4px 10px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.seg__count { min-width: 18px; height: 17px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: var(--surface-alt); color: var(--text-muted); }
.seg__btn.is-active .seg__count { background: color-mix(in srgb, var(--surface) 22%, transparent); color: inherit; }
.seg__count--alert { background: var(--red-tint); color: var(--red); }
.db-card__head--tabs { align-items: center; }

.db-setup-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.db-setup-card[hidden] { display: none; }
.db-setup__head { display: flex; align-items: center; gap: 18px; }
.db-setup__head > div:first-child { flex: 1; min-width: 0; }
.db-setup__progress { width: 160px; height: 6px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.db-setup__progress span { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.db-setup__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.db-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.db-step.is-next { border-color: color-mix(in srgb, var(--brand) 50%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent); }
.db-step.is-done { background: var(--surface-alt); }
.db-step__mark { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-strong); font-size: 12px; font-weight: 650; color: var(--text-muted); }
.db-step.is-done .db-step__mark { background: var(--green); border-color: var(--green); color: #fff; }
.db-step__text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.db-step__title { font-size: 13.5px; font-weight: 600; }
.db-step.is-done .db-step__title { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.db-step__sub { font-size: 12px; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.db-alerts { display: flex; flex-direction: column; gap: 6px; padding: 6px 18px 12px; border-bottom: 1px solid var(--border); }
.db-alerts--clear { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--green); }
.db-alert { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; }
.db-alert:hover { text-decoration: none; filter: brightness(.98); }
.db-alert--critical { background: var(--red-tint); }
.db-alert--critical .icon:first-child { color: var(--red); }
.db-alert--warning { background: var(--amber-tint); }
.db-alert--warning .icon:first-child { color: var(--amber); }
.db-alert span { flex: 1; }
.db-alert__go { color: var(--text-subtle); }

.db-agenda { list-style: none; margin: 0; padding: 6px 8px; }
.db-agenda__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.db-agenda__item:hover { background: var(--surface-hover); text-decoration: none; }
.db-agenda__item.is-past { opacity: .55; }
.db-agenda__time { width: 62px; flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.db-agenda__bar { width: 3px; align-self: stretch; border-radius: 2px; background: var(--ev-color, var(--brand)); }
.db-agenda__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.db-agenda__title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-agenda__meta { font-size: 12px; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-live { font-size: 11px; font-weight: 700; color: var(--green); background: var(--green-tint); padding: 2px 7px; border-radius: 999px; }
.db-agenda-empty { display: flex; align-items: center; gap: 10px; padding: 18px; font-size: 13px; color: var(--text-muted); }
.db-agenda-empty span { flex: 1; }

.db-queue { list-style: none; margin: 0; padding: 4px 8px; }
.db-queue__row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 86px auto; align-items: center; gap: 12px; padding: 7px 10px; border-radius: var(--radius-sm); }
.db-queue__row:hover { background: var(--surface-hover); }
.db-queue__main { display: flex; flex-direction: column; min-width: 0; color: var(--text); text-decoration: none; }
.db-queue__main:hover { text-decoration: none; }
.db-queue__main:hover .db-queue__name { color: var(--brand); }
.db-queue__name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-queue__meta { font-size: 12px; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-queue__when { font-size: 12px; color: var(--text-subtle); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.db-queue__when.is-late { color: var(--red); font-weight: 600; }
.db-queue__actions { display: flex; gap: 2px; min-width: 96px; justify-content: flex-end; }
.db-qbtn { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; color: var(--text-muted); border: 1px solid transparent; }
.db-qbtn:hover { background: var(--surface); border-color: var(--border); color: var(--brand); text-decoration: none; }
.db-queue__all { display: inline-flex; align-items: center; gap: 5px; margin: 4px 18px 8px; font-size: 13px; font-weight: 600; }

.db-team th, .db-team td { padding: 9px 18px; }
.db-team .db-person__name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-team .db-person { min-width: 0; max-width: 100%; }
/* Fixed columns so a long name truncates instead of pushing the numbers out of the card. */
.db-team { table-layout: fixed; width: 100%; }
.db-team th, .db-team td { padding-left: 8px; padding-right: 8px; }
.db-team th:first-child, .db-team td:first-child { padding-left: 18px; }
.db-team th:last-child, .db-team td:last-child { padding-right: 18px; }
.db-team th:nth-child(2), .db-team td:nth-child(2) { width: 58px; }
.db-team th:nth-child(3), .db-team td:nth-child(3) { width: 72px; }
.db-team th:nth-child(4), .db-team td:nth-child(4) { width: 62px; }
.db-good { color: var(--db-good); font-weight: 600; }
.db-warn { color: var(--db-warning); font-weight: 600; }

.db-quicks { display: flex; flex-direction: column; gap: 4px; margin: -4px -8px 0; }
.db-quick { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.db-quick:hover { background: var(--surface-hover); text-decoration: none; }
.db-quick__icon { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; background: var(--brand-tint); color: var(--brand); }
.db-quick__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.db-quick__title { font-size: 13.5px; font-weight: 600; }
.db-quick__sub { font-size: 12px; color: var(--text-subtle); }
.db-quick__go { color: var(--text-subtle); }

@media (max-width: 1200px) { .db-setup__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .db-setup__head { flex-wrap: wrap; }
  .db-setup__progress { order: 3; width: 100%; }
  .db-setup__steps { grid-template-columns: 1fr; }
  .db-queue__row { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .db-queue__row .badge, .db-queue__when { display: none; }
}
.anchor { display: block; position: relative; top: -80px; visibility: hidden; }

/* ---------- API & MCP ----------------------------------------------------- */
.dev-url { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 8px 8px 12px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); }
.dev-url__label { font-size: 12px; font-weight: 600; color: var(--text-subtle); }
.dev-url__value { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.dev-tabs { margin-bottom: 18px; flex-wrap: wrap; }
.dev-note { display: flex; gap: 8px; align-items: flex-start; margin: 18px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-alt); font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.dev-note .icon { margin-top: 2px; color: var(--text-subtle); }
.dev-scope { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--surface-alt); color: var(--text-muted); border: 1px solid var(--border); }
.dev-scope--write { background: var(--amber-tint); color: var(--amber); border-color: transparent; }
.dev-empty { margin: 0; padding: 14px 18px 18px; font-size: 13.5px; color: var(--text-muted); }
.dev-endpoints { margin: 14px 0; }
.dev-endpoints td { padding: 8px 10px 8px 0; }
.dev-method { display: inline-block; min-width: 54px; text-align: center; padding: 2px 6px; border-radius: 5px; font: 700 11px/1.6 var(--mono); }
.dev-method--get { background: var(--green-tint); color: var(--green); }
.dev-method--post { background: var(--brand-tint); color: var(--brand); }
.dev-method--patch { background: var(--amber-tint); color: var(--amber); }
.dev-choice { display: flex; flex-direction: column; gap: 8px; }
.dev-choice__item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.dev-choice__item:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); }
.dev-choice__item input { margin-top: 3px; accent-color: var(--brand); }
.dev-choice__item > span { display: flex; flex-direction: column; font-size: 13.5px; }
.dev-choice__item > span span { font-size: 12.5px; color: var(--text-muted); }
.dev-secret .src-code { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- OAuth consent ------------------------------------------------- */
.oauth-card { max-width: 440px; }
.oauth-app { color: var(--brand); }
.oauth-perms { list-style: none; margin: 4px 0 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13.5px; }
.oauth-perms__muted { color: var(--text-muted); font-size: 12.5px; }
.oauth-write { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.oauth-write input { margin-top: 3px; accent-color: var(--brand); width: 16px; height: 16px; }
.oauth-write > span { display: flex; flex-direction: column; font-size: 13.5px; }
.oauth-write > span span { font-size: 12.5px; color: var(--text-muted); }
.oauth-actions { display: flex; flex-direction: column; gap: 6px; }
.oauth-fine { font-size: 12px; }

/* ---------- Lead sources catalog (global) -------------------------------- */
.src-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.src-toolbar__title { font-size: 16px; margin-right: auto; }
.src-search { width: min(360px, 100%); }
.src-regions { flex-wrap: wrap; }
.src-catalog__grid { display: flex; flex-direction: column; gap: 16px; }
.src-option.is-unavailable { opacity: .7; }
.src-option.is-unavailable .src-tile { filter: grayscale(.6); }
.src-none { padding: 24px; text-align: center; }
.src-none p { margin: 0 0 4px; }
@media (max-width: 760px) { .src-toolbar__title { width: 100%; } .src-search { width: 100%; } }
.src-legal { margin: 0; font-size: 12px; color: var(--text-subtle); text-align: center; }

/* ---------- Chat layout and small badges (AI Agents, Outreach) ------------- */
.pf { display: flex; flex-direction: column; gap: 16px; max-width: 1440px; }
.pf-badge { display: inline-flex; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.pf-badge--warn { background: var(--amber-tint); color: var(--amber); }
.pf-badge--ok { background: var(--green-tint); color: var(--green); }
.pf-badge--found { background: var(--brand-tint); color: var(--brand); }
.pf-badge--bad { background: var(--red-tint); color: var(--red); }
.pf-badge--muted { background: var(--surface-alt); color: var(--text-subtle); }
.page-chat .main { height: 100vh; height: 100dvh; overflow: hidden; }
.lfc { flex: 1; min-height: 0; display: flex; }
.lfc-avatar { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--brand-tint); color: var(--brand-ink); font-size: 12.5px; font-weight: 700; }
.lfc-notice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--radius); font-size: 13.5px; border: 1px solid var(--border); background: var(--surface); }
.lfc-notice a { font-weight: 650; margin-left: auto; }
.lfc-notice--success { background: var(--green-tint); border-color: transparent; color: var(--green); }
.lfc-notice--success span { color: var(--text); }
.lfc-empty__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--brand-tint); color: var(--brand); }
.lfc-empty__icon .icon { width: 24px; height: 24px; }
@media (max-width: 900px) {
  .lfc { position: relative; }
}

/* ---------- Outreach mailbox ---------------------------------------------------- */
.ob { flex: 1; min-height: 0; display: flex; }
.ob-list { width: 360px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--surface); min-height: 0; }
.ob-list__tools { padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--border); }
.ob-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.ob-tab { flex-shrink: 0; padding: 5px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ob-tab:hover { background: var(--surface-hover); color: var(--text); }
.ob-tab.is-on { background: var(--brand-tint); color: var(--brand-ink); }
.ob-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 12px 0; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--brand-tint); font-size: 12.5px; color: var(--text); }
.ob-banner .icon { color: var(--brand); }
.ob-banner a { margin-left: auto; font-weight: 650; }
.ob-banner[hidden] { display: none; }
.ob-banner.is-warn { background: var(--amber-tint); }
.ob-banner.is-warn .icon { color: var(--amber); }
.ob-threads { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
.ob-empty-list { padding: 18px 12px; font-size: 13px; }
.ob-thread { all: unset; box-sizing: border-box; width: 100%; display: flex; gap: 10px; padding: 10px; border-radius: var(--radius); cursor: pointer; }
.ob-thread:hover { background: var(--surface-hover); }
.ob-thread.is-on { background: var(--brand-tint); }
.ob-thread__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ob-thread__top { display: flex; align-items: baseline; gap: 8px; }
.ob-thread__name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-thread.is-unread .ob-thread__name, .ob-thread.is-unread .ob-thread__subject { font-weight: 750; }
.ob-thread__time { font-size: 11.5px; color: var(--text-subtle); white-space: nowrap; }
.ob-thread__subject { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-thread__snippet { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-thread__tags { display: flex; gap: 6px; align-items: center; margin-top: 3px; }
.ob-unread { padding: 1px 7px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; }

.ob-view { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.ob-placeholder { flex: 1; display: grid; place-items: center; padding: 24px; }
.ob-view__head { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.ob-view__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ob-view__who strong { font-size: 15px; }
.ob-back { display: none; }
.ob-log { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.ob-msg { max-width: min(680px, 85%); padding: 12px 16px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); }
.ob-msg--out { align-self: flex-end; background: color-mix(in srgb, var(--brand) 7%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 22%, var(--border)); }
.ob-msg--in { align-self: flex-start; }
.ob-msg.is-failed { border-color: var(--red); }
.ob-msg__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12.5px; margin-bottom: 4px; }
.ob-msg__subject { font-size: 13.5px; font-weight: 650; margin-bottom: 6px; }
.ob-msg__body { font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.ob-msg__error { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--red); }
.ob-reply { padding: 12px 20px 16px; border-top: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.ob-reply__input { min-height: 90px; }
.ob-reply__actions { display: flex; align-items: center; gap: 8px; }
.ob-compose { display: flex; flex-direction: column; gap: 12px; }
.ob-to { position: relative; }
.ob-suggest { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin-top: 4px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.12)); padding: 4px; }
.ob-suggest[hidden] { display: none; }
.ob-suggest__item { all: unset; box-sizing: border-box; width: 100%; display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.ob-suggest__item:hover { background: var(--surface-hover); }

@media (max-width: 900px) {
  .ob-list { width: 100%; border-right: 0; }
  .ob-view { display: none; }
  .ob.is-reading .ob-list { display: none; }
  .ob.is-reading .ob-view { display: flex; }
  .ob-back { display: inline-flex; }
  .ob-view__head { padding: 10px 12px; }
  .ob-log { padding: 14px 12px; }
  .ob-msg { max-width: 92%; }
  .ob-reply { padding: 10px 12px 12px; }
  #ob-refresh span { display: none; }
}

/* ---------- AI Agents -------------------------------------------------------------- */
.ag-section { margin-bottom: 28px; }
.ag-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ag-section__head h2 { font-size: 16px; }
.ag-hero { padding: 36px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.ag-hero h2 { font-size: 22px; letter-spacing: -.02em; margin: 6px 0 0; }
.ag-hero > p { max-width: 620px; margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; }
.ag-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; width: 100%; text-align: left; }
.ag-template { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ag-template:hover { border-color: var(--brand); }
.ag-template.is-featured { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.ag-template__text { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.ag-template__text strong { font-size: 14.5px; color: var(--text); }
.ag-template__trigger { margin-top: 4px; font-size: 11.5px; font-weight: 650; color: var(--brand); }
.ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ag-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.ag-card.is-paused { opacity: .75; }
.ag-card__head { display: flex; align-items: center; gap: 12px; }
.ag-card__icon { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--violet) 12%, var(--surface)); color: var(--violet); }
.ag-card__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ag-card__name { font-size: 15px; font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-card__meta { font-size: 12.5px; color: var(--text-muted); }
.ag-card__goal { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.ag-card__error { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12.5px; color: var(--amber); }
.ag-card__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.ag-switch input { width: 34px; height: 20px; appearance: none; border-radius: 999px; background: var(--border-strong); position: relative; cursor: pointer; transition: background .15s; }
.ag-switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ag-switch input:checked { background: var(--green); }
.ag-switch input:checked::after { transform: translateX(14px); }
.ag-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ag-stat { display: flex; flex-direction: column; gap: 1px; }
.ag-stat strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.ag-stat span { font-size: 11.5px; color: var(--text-subtle); }
.ag-approvals { display: flex; flex-direction: column; gap: 12px; }
.ag-approval { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: var(--radius-lg); background: var(--surface); }
.ag-approval__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.ag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--violet) 12%, var(--surface)); color: var(--violet); font-size: 12px; font-weight: 650; }
.ag-approval__lead { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.ag-approval__lead a { font-weight: 600; }
.ag-approval__reason { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12.5px; color: var(--text-muted); }
.ag-approval__body { min-height: 130px; font-size: 13.5px; line-height: 1.5; }
.ag-approval__actions { display: flex; gap: 6px; }
.ag-details { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 13px; }
.ag-details dt { color: var(--text-subtle); font-weight: 600; }
.ag-details dd { margin: 0; overflow-wrap: anywhere; }
.ag-pre { white-space: pre-wrap; }
.ag-builder { display: flex; flex-direction: column; gap: 14px; }
.ag-inline { display: flex; gap: 8px; }
.ag-inline .input { flex: 1; }
.ag-understood { display: flex; align-items: center; gap: 6px; margin: -6px 0 0; font-size: 12.5px; color: var(--green); }
.ag-understood[hidden] { display: none; }
.ag-caps { display: flex; flex-direction: column; gap: 6px; }
.ag-cap { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.ag-cap input { accent-color: var(--brand); }
.ag-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ag-mode { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.ag-mode:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.ag-mode span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ag-mode input { margin-top: 3px; accent-color: var(--brand); }
.ag-detail__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ag-tabs { display: flex; gap: 4px; margin: 14px 0; border-bottom: 1px solid var(--border); padding-bottom: 8px; overflow-x: auto; }
.ag-activity { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ag-activity h3 { font-size: 14px; margin-bottom: 10px; }
.ag-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ag-run { display: flex; gap: 10px; }
.ag-run__dot { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.ag-run.is-failed .ag-run__dot { background: var(--red); }
.ag-run.is-queued .ag-run__dot, .ag-run.is-running .ag-run__dot { background: var(--amber); }
.ag-run__head { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; }
.ag-run p { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.ag-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ag-log li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ag-settings { padding: 18px; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 760px) {
  .ag-activity { grid-template-columns: 1fr; }
  .ag-modes { grid-template-columns: 1fr; }
  .ag-grid { grid-template-columns: 1fr; }
}
.ag-builder [hidden] { display: none !important; }
.lfc-li-search { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border: 1px solid var(--border); border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.lfc-li-search:hover { color: #0a66c2; border-color: #0a66c2; text-decoration: none; }
:root[data-theme='dark'] .lfc-li-search:hover { color: #70b5f9; border-color: #70b5f9; }

/* =========================================================================
   Date range picker, custom stages, tags, tasks
   ========================================================================= */

.icon--xs { width: 13px; height: 13px; }

/* ---------- date range picker ---------- */
.dr { position: relative; display: inline-flex; }
.dr-trigger { gap: 7px; white-space: nowrap; }
.dr-trigger__label { font-weight: 600; }
.dr-trigger__chev { opacity: .6; }
.dr-pop {
  position: absolute; z-index: 40; top: calc(100% + 6px); right: 0;
  display: grid; grid-template-columns: 170px 220px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.dr-presets { display: flex; flex-direction: column; padding: 6px; border-right: 1px solid var(--border); background: var(--surface-alt); }
.dr-preset {
  text-align: left; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--text);
  padding: 7px 10px; border-radius: 7px; cursor: pointer;
}
.dr-preset:hover, .dr-preset:focus-visible { background: var(--surface-hover); outline: none; }
.dr-preset.is-on { background: var(--brand-tint); color: var(--brand-ink); font-weight: 650; }
.dr-custom { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.dr-custom__title { font-size: 12px; font-weight: 700; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .06em; }
.dr-field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-muted); }
.dr-field .input { padding: 7px 9px; font-size: 13px; }
.dr-error { margin: 0; font-size: 12.5px; color: var(--red); }
.dr-custom .btn { align-self: flex-start; }
@media (max-width: 640px) {
  .dr-pop { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; grid-template-columns: 1fr; }
  .dr-presets { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); }
}

/* ---------- custom stages ---------- */
.badge--custom {
  background: color-mix(in srgb, var(--stage) 11%, var(--surface));
  color: color-mix(in srgb, var(--stage) 78%, var(--text));
  border-color: color-mix(in srgb, var(--stage) 30%, var(--surface));
}
.badge--custom .dot { background: var(--stage); }
.column--custom .column__header { border-top: 3px solid var(--stage, var(--border-strong)); }

.stages__list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 4px; }
.stages__group { padding: 8px 0; border-bottom: 1px solid var(--border); }
.stages__group:last-child { border-bottom: 0; }
.stages__system { display: flex; align-items: center; gap: 10px; }
.stages__children { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.stages__row { display: grid; grid-template-columns: 18px 30px minmax(0, 260px) auto auto; align-items: center; gap: 10px; padding-left: 8px; }
.stages__elbow { color: var(--text-subtle); }
.stages__name { padding: 6px 9px; font-size: 13.5px; }
.stages__count { white-space: nowrap; }
.stage-color { width: 30px; height: 30px; padding: 2px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); cursor: pointer; }
.stage-color::-webkit-color-swatch-wrapper { padding: 0; }
.stage-color::-webkit-color-swatch { border: 0; border-radius: 5px; }
.stage-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.stage-form .input { flex: 1 1 200px; max-width: 280px; }
.stage-form .select { width: auto; }

/* ---------- tags ---------- */
.tag-list { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.kcard .tag-list { margin: 6px 0 0; }
.tag {
  display: inline-flex; align-items: center; gap: 5px; max-width: 160px;
  padding: 1px 8px 1px 7px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface-alt); color: var(--text-muted);
  font: inherit; font-size: 11.5px; font-weight: 600; line-height: 18px; white-space: nowrap;
}
.tag__dot { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--tag-h, 220) 55% 50%); flex: none; }
.tag--link { cursor: pointer; }
.tag--link:hover { border-color: var(--border-strong); color: var(--text); }
.tag--more { color: var(--text-subtle); }
.tag__x { display: inline-grid; place-items: center; margin-left: 1px; padding: 0; border: 0; background: none; color: var(--text-subtle); cursor: pointer; border-radius: 4px; }
.tag__x:hover { color: var(--red); }
.tag-editor {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 38px;
  padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); cursor: text;
}
.tag-editor:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.tag-editor__chips { display: contents; }
.tag-editor__input { flex: 1 1 90px; min-width: 90px; border: 0; outline: none; background: transparent; font: inherit; font-size: 13.5px; color: var(--text); padding: 3px 2px; }
.dl dd .tag-editor { min-height: 34px; }

/* ---------- tasks page ---------- */
.tk { padding: 0; overflow: visible; }
.tk-toolbar { padding: 14px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tk-toolbar .toolbar__search { max-width: 240px; }
.tk-quick { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.tk-quick__icon { color: var(--text-subtle); flex: none; }
.tk-quick__input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14.5px; color: var(--text); padding: 6px 0; }
.tk-quick .select { width: auto; }
#tk-list { padding: 4px 0 8px; }
#tk-list > .state { padding: 48px 16px; }
.tk-group { padding: 10px 0 2px; }
.tk-group__title { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 16px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); }
.tk-group--overdue .tk-group__title { color: var(--red); }
.tk-group__count { padding: 0 7px; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border); font-size: 11px; color: var(--text-muted); letter-spacing: 0; }
.tk-group__list { list-style: none; margin: 0; padding: 0; }
.tk-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--border); transition: background .12s, opacity .25s; }
.tk-row:last-child { border-bottom: 0; }
.tk-row:hover { background: var(--surface-hover); }
.tk-row.is-done .tk-row__title { text-decoration: line-through; color: var(--text-subtle); }
.tk-row__check { display: grid; place-items: center; flex: none; }
.tk-check { appearance: none; width: 19px; height: 19px; margin: 0; border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--surface); cursor: pointer; display: grid; place-items: center; transition: background .15s, border-color .15s; }
.tk-row--high .tk-check { border-color: color-mix(in srgb, var(--red) 55%, var(--border-strong)); }
.tk-check:hover { border-color: var(--brand); }
.tk-check:checked { background: var(--green); border-color: var(--green); }
.tk-check:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.tk-check:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tk-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; border: 0; background: none; font: inherit; color: inherit; padding: 2px 0; cursor: pointer; }
.tk-row__title { font-size: 14.5px; font-weight: 550; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-muted); }
.tk-due { display: inline-flex; align-items: center; gap: 4px; }
.tk-due--overdue { color: var(--red); font-weight: 600; }
.tk-due--today { color: var(--brand); font-weight: 600; }
.tk-prio { padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 700; line-height: 17px; }
.tk-prio--high { background: var(--red-tint); color: var(--red); }
.tk-prio--low { background: var(--surface-alt); color: var(--text-subtle); }
.tk-note { display: inline-flex; align-items: center; gap: 3px; color: var(--text-subtle); }
.tk-lead { display: inline-flex; align-items: center; gap: 5px; max-width: 200px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 7px; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.tk-lead:hover { border-color: var(--border-strong); color: var(--text); }
.tk-avatar { flex: none; }
@media (max-width: 640px) {
  .tk-lead { display: none; }
  .tk-toolbar .toolbar__search { max-width: none; flex: 1 1 100%; }
}

/* ---------- task editor ---------- */
.task-form { display: flex; flex-direction: column; gap: 14px; }
.task-form__row { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.task-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; cursor: pointer; }
.chip-btn:hover { border-color: var(--border-strong); color: var(--text); }
.chip-btn--ghost { border-style: dashed; }
.btn--danger-text { color: var(--red); }
.btn--danger-text:hover:not(:disabled) { background: var(--red-tint); color: var(--red); }
@media (max-width: 640px) { .task-form__row { grid-template-columns: 1fr; } }

/* ---------- lead page tasks ---------- */
.lead-tasks { list-style: none; margin: 0; padding: 0; }
.lead-tasks__empty { padding: 14px 18px; margin: 0; }
.lead-task { display: flex; align-items: flex-start; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--border); }
.lead-task:last-child { border-bottom: 0; }
.lead-task .tk-check { margin-top: 2px; }
.lead-task__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; border: 0; background: none; font: inherit; color: inherit; padding: 0; cursor: pointer; }
.lead-task__title { font-size: 14px; font-weight: 550; }
.lead-task__meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-muted); }
.lead-task__meta > span { display: inline-flex; align-items: center; gap: 4px; }
.lead-task__late { color: var(--red); font-weight: 600; }
.lead-task.is-done .lead-task__title { text-decoration: line-through; color: var(--text-subtle); }

/* ---------- outreach range ---------- */
.ob-range .dr-trigger { width: 100%; justify-content: flex-start; }
.ob-range .dr-pop { left: 0; right: auto; }
.dr-pop--left { left: 0; right: auto; }

/* ---------- Meta: access-token connection ---------- */
.callout--info { background: var(--brand-tint); border-color: #c9d9ff; color: var(--brand-ink); }
.table--compact th, .table--compact td { padding: 8px 12px; }
.meta-guide { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; background: var(--surface-alt); }
.meta-guide > summary { cursor: pointer; font-weight: 650; font-size: 13.5px; }
.meta-guide[open] > summary { margin-bottom: 10px; }
.meta-guide .table-wrap { margin: 8px 0 4px; background: var(--surface); border-radius: var(--radius); }
.meta-guide__h { margin: 14px 0 4px; font-size: 13px; font-weight: 700; }
.meta-guide__list { margin: 4px 0; padding-left: 20px; font-size: 13px; color: var(--text-muted); display: grid; gap: 4px; }
.meta-token__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.meta-token__grid > div { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); min-width: 0; }
.meta-token__grid dt { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-subtle); margin-bottom: 4px; }
.meta-token__grid dd { margin: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.meta-token__locked { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.meta-token__locked:hover { color: var(--brand); }
.meta-token__edit { padding: 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.meta-prefix { display: grid; gap: 4px; min-width: 200px; }
.meta-prefix .input { width: 130px; }
.lead-id { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 5px; background: var(--surface-alt); border: 1px solid var(--border); font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text-muted); vertical-align: middle; }
.lead-id--lg { font-size: 12.5px; padding: 1px 8px; }
@media (max-width: 900px) { .meta-token__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .meta-token__grid { grid-template-columns: 1fr; } }

/* Meta signals studio (integrations): funnel strip, stage × signal grid, match quality, value */
.msig .card__body { display: flex; flex-direction: column; gap: 16px; }
.msig [hidden] { display: none !important; }
.msig .card__header { flex-wrap: wrap; gap: 8px; }
.msig .card__header .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.msig__foot { align-items: center; border-top: 1px solid var(--border); padding-top: 14px; }

.msig-funnel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; counter-reset: none; }
.msig-funnel__step { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.msig-funnel__step + .msig-funnel__step::before { content: '›'; position: absolute; left: -10px; top: 14px; width: 10px; text-align: center; color: var(--text-subtle); font-weight: 700; }
.msig-funnel__step.is-auto { background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 30%, var(--border)); }
.msig-funnel__step p { margin: 0; flex: 1; }
.msig-funnel__top { display: flex; align-items: center; gap: 8px; }
.msig-funnel__num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--text); color: var(--surface); font-size: 11px; font-weight: 700; flex: none; }
.msig-funnel__label { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--text-subtle); }
.msig-funnel__name { width: 100%; }
.msig-funnel__count { min-height: 1em; }
@media (max-width: 1100px) { .msig-funnel { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .msig-funnel__step + .msig-funnel__step::before { display: none; } }

.msig-grid th.msig-grid__col, .msig-grid td.msig-grid__cell { text-align: center; width: 1%; white-space: nowrap; }
.msig-grid td.msig-grid__cell input { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }
.msig-grid td.msig-grid__custom { padding-left: 26px; font-size: 13px; }
.msig-grid tr.is-dead td:first-child { opacity: .7; }

.msig-score { display: flex; gap: 16px; align-items: center; }
.msig-score p { margin: 4px 0 0; }
.msig-score__ring { --p: 0; --c: var(--red); flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-alt) 0); }
.msig-score__ring span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--surface); font-size: 20px; font-weight: 750; }
.msig-score__ring--good { --c: var(--green); }
.msig-score__ring--ok { --c: var(--amber); }
.msig-match { display: flex; flex-direction: column; gap: 14px; }
.msig-match__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); column-gap: 28px; }
.msig-match__row { display: grid; grid-template-columns: 112px 1fr 40px minmax(0, 190px); align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.msig-match__pct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.msig-match__from { display: flex; align-items: center; gap: 6px; min-width: 0; }
.msig-match__from .select { width: 100%; min-width: 0; }
.msig-meter { height: 8px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.msig-meter span { display: block; height: 100%; border-radius: inherit; background: var(--red); }
.msig-meter--good span { background: var(--green); }
.msig-meter--ok span { background: var(--amber); }
@media (max-width: 640px) { .msig-match__row { grid-template-columns: 1fr 44px; } .msig-meter { grid-column: 1 / -1; grid-row: 2; } .msig-match__from { grid-column: 1 / -1; } }

.msig-value__flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border: 1px dashed var(--border-strong, var(--border)); border-radius: var(--radius-sm); }

/* ---------- Agency mode: workspace switcher and Agency page ---------------- */

.ws-pick { align-items: center; }
.ws-pick__mark { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--surface-alt); color: var(--text); font-size: 12px; font-weight: 700; }
.ws-pick.is-current .ws-pick__mark { background: linear-gradient(135deg, var(--brand), var(--violet)); color: #fff; }
.ws-pick__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ws-pick__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-pick__meta { font-size: 12px; color: var(--text-subtle); }
.ws-pick__check { margin-left: auto; color: var(--brand); font-weight: 700; }

.agency-search { width: min(260px, 100%); }
.agency-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.agency-tile { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; border-top: 3px solid transparent; }
.agency-tile.has-waiting { border-top-color: var(--amber); }
.agency-tile.is-current { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent); }
.agency-tile__head { display: flex; align-items: center; gap: 12px; }
.agency-tile__mark { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(135deg, var(--brand), var(--violet)); color: #fff; font-weight: 750; }
.agency-tile__title { min-width: 0; display: flex; flex-direction: column; }
.agency-tile__title h2 { margin: 0; font-size: 15.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agency-tile__more { margin-left: auto; font-size: 18px; line-height: 1; }
.agency-tile__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px 0; border-block: 1px solid var(--border); }
.agency-metric { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agency-metric__value { display: flex; align-items: baseline; gap: 6px; font-size: 21px; font-weight: 720; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.agency-metric__label { font-size: 11.5px; line-height: 1.25; color: var(--text-subtle); }
.agency-metric--warn .agency-metric__value { color: var(--amber); }
.agency-metric--good .agency-metric__value { color: var(--green); }
.agency-trend { font-size: 11.5px; font-weight: 650; color: var(--text-subtle); }
.agency-trend.is-up { color: var(--green); }
.agency-trend.is-down { color: var(--red); }
.agency-tile__foot { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.agency-tile__status { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.agency-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.agency-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.agency-dot--good::before { background: var(--green); }
.agency-dot--ok::before { background: var(--brand); }
.agency-dot--bad::before { background: var(--red); }
@media (max-width: 420px) { .agency-tile__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.agency-access { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.agency-access li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.agency-access__who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.agency-access__who strong { font-size: 13.5px; }
.agency-access__add { display: grid; grid-template-columns: minmax(0, 1fr) 140px auto; gap: 10px; align-items: end; }
@media (max-width: 560px) { .agency-access__add { grid-template-columns: 1fr; } }
.avatar--sm { width: 28px; height: 28px; font-size: 11px; }

/* ---------- Leads table: Columns panel ------------------------------------ */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.colp__head { display: flex; flex-direction: column; padding: 6px 10px 8px; }
.colp__head strong { font-size: 13.5px; }
.colp__body { max-height: min(60vh, 460px); overflow-y: auto; padding: 0 2px; }
.colp__section { padding: 10px 8px 4px; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); }
.colp__row { position: relative; display: flex; align-items: center; gap: 4px; padding: 2px 6px 2px 4px; border-radius: 6px; }
.colp__row:hover { background: var(--surface-hover); }
.colp__row.is-shown { cursor: grab; }
.colp__row.is-dragging { opacity: .45; }
.colp__row.drop-before { box-shadow: inset 0 2px 0 var(--brand); }
.colp__row.drop-after { box-shadow: inset 0 -2px 0 var(--brand); }
.colp__grip { width: 22px; height: 26px; flex: none; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; color: var(--text-subtle); font-size: 13px; cursor: grab; }
.colp__grip:hover, .colp__grip:focus-visible { background: var(--surface-alt); color: var(--text); outline: none; }
.colp__label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 13.5px; cursor: pointer; }
.colp__row:not(.is-shown) .colp__label { padding-left: 28px; }
.colp__label input { accent-color: var(--brand); }
.colp__label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colp__pos { font-size: 11px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.colp__foot { display: flex; justify-content: space-between; gap: 8px; padding: 4px 6px 2px; }
.table__actions { width: 1%; }

/* ---------- Lead page: stage and owner -------------------------------------- */

.lead-owner__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px 18px; }
.lead-owner__body .field { margin: 0; }
.lead-owner__body .select { width: 100%; }
.lead-owner__body .field__hint:empty { display: none; }

/* ---------- Leads table: stage dropdown that looks like the stage badge ---- */

.stage-select {
  max-width: 190px; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700;
  padding: 4px 24px 4px 10px; text-align: left;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 12px) 52%, calc(100% - 8px) 52%; background-size: 4px 4px; background-repeat: no-repeat;
}
.stage-select__text { overflow: hidden; text-overflow: ellipsis; }
.stage-select:hover:not(:disabled), .stage-select[aria-expanded='true'] { filter: brightness(.97); border-color: currentColor; }
.stage-select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.stage-select:disabled { opacity: .6; cursor: progress; }
.stage-menu { max-height: min(60vh, 420px); overflow-y: auto; display: grid; gap: 1px; }
.stage-menu__item { padding: 5px 8px; }
.stage-menu__item.is-custom { padding-left: 24px; }
.stage-menu__item.is-current { background: var(--surface-hover); }
.stage-menu__item .badge { cursor: inherit; }
.stage-menu__check { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--brand); }

/* ---------- Plans: locks, plan chip, upgrade dialog, billing page -------- */

.lock-mark { display: inline-grid; place-items: center; color: var(--text-subtle); flex-shrink: 0; }
.lock-mark .icon { width: 14px; height: 14px; }
.sb-item.is-locked { color: var(--text-subtle); }
.sb-item.is-locked .icon { color: var(--text-subtle); }
.sb-item.is-locked:hover .lock-mark { color: var(--brand); }
.tb-btn.is-locked .lock-mark { margin-left: -2px; }

.sb-plan {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text-muted); font-size: 12.5px; font-weight: 500;
}
.sb-plan[hidden] { display: none; }
.sb-plan:hover { text-decoration: none; border-color: var(--border-strong); color: var(--text); }
.sb-plan > .icon { width: 16px; height: 16px; color: var(--brand); }
.sb-plan__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-plan__cta { font-weight: 650; color: var(--brand); white-space: nowrap; }
.sb-plan__cta[hidden] { display: none; }
.sb-plan[data-tone='warn'] { background: var(--amber-tint); border-color: transparent; color: var(--amber); }
.sb-plan[data-tone='warn'] > .icon, .sb-plan[data-tone='warn'] .sb-plan__cta { color: var(--amber); }
.sb-plan[data-tone='bad'] { background: var(--red-tint); border-color: transparent; color: var(--red); }
.sb-plan[data-tone='bad'] > .icon, .sb-plan[data-tone='bad'] .sb-plan__cta { color: var(--red); }

.upgrade-overlay { z-index: 95; }
.upgrade { max-width: 980px; }
.upgrade__title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.upgrade__icon { width: 32px; height: 32px; display: grid; place-items: center; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--brand-tint); color: var(--brand); }
.upgrade__lead { margin: 0; color: var(--text-muted); max-width: 640px; }
.upgrade__toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.upgrade__toolbar:empty { display: none; }
.upgrade__note { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.upgrade__loading { margin: 0; padding: 32px 0; text-align: center; color: var(--text-muted); }
.upgrade__footer { justify-content: space-between; }
.plan-confirm__text { margin: 0; color: var(--text-muted); }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.plan-card {
  display: flex; flex-direction: column; gap: 10px; padding: 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.plan-card.is-highlight { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow); }
.plan-card.is-current { border-color: var(--green); }
.plan-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.plan-card__name { font-size: 16px; }
.plan-card__tagline { margin: 0; font-size: 13px; color: var(--text-muted); }
.plan-card__price { margin: 4px 0 0; display: flex; align-items: baseline; gap: 3px; }
.plan-card__price strong { font-size: 28px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan-card__price span { color: var(--text-muted); }
.plan-card__note { margin: -6px 0 4px; font-size: 12px; color: var(--text-subtle); }
.plan-card__hint { margin: -4px 0 0; font-size: 12px; color: var(--text-subtle); }
.plan-card__list { list-style: none; margin: 6px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.plan-card__list li { display: flex; gap: 8px; align-items: flex-start; }
.plan-card__list .icon { color: var(--green); margin-top: 2px; }

.billing { max-width: 1100px; }
.billing__plans-head { align-items: flex-end; }
.billing__usage { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.billing__usage-text { color: var(--text-muted); font-size: 13px; margin: 0; }
.meter { height: 8px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.meter__fill { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.meter--warn .meter__fill { background: var(--amber); }

@media (max-width: 640px) {
  .plan-grid { grid-template-columns: 1fr; }
  .upgrade__footer { justify-content: flex-end; }
}

/* ---------- Switch: a checkbox drawn as an on/off pill ------------------- */

.switch-ui { display: inline-flex; flex-shrink: 0; }
.switch-ui input {
  appearance: none; -webkit-appearance: none; margin: 0; width: 36px; height: 20px; border-radius: 999px; cursor: pointer;
  background: var(--border-strong); position: relative; transition: background .15s var(--ease);
}
.switch-ui input::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s var(--ease);
}
.switch-ui input:checked { background: var(--brand); }
.switch-ui input:checked::after { transform: translateX(16px); }
.switch-ui input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.switch-ui input:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Settings: lead routing & alerts ------------------------------ */

.rt { display: grid; gap: 0; }
.rt-step { padding: 0 0 20px; min-width: 0; }
.rt-step + .rt-step { border-top: 1px solid var(--border); padding-top: 18px; }
.rt-step__head { display: flex; gap: 12px; align-items: flex-start; padding: 0; margin-bottom: 12px; }
.rt-step__head > span:last-child { display: grid; gap: 2px; }
.rt-step__num {
  display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  font-size: 12px; font-weight: 700; background: var(--brand-tint); color: var(--brand);
}
.rt-step__title { font-size: 14px; font-weight: 650; color: var(--text); }
.rt-step__text { font-size: 12.5px; color: var(--text-muted); }
.rt-step__body { padding-left: 34px; display: grid; gap: 12px; min-width: 0; }

.rt-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rt-mode {
  position: relative; display: grid; gap: 4px; align-content: start; padding: 14px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.rt-mode:hover { border-color: var(--border-strong); }
.rt-mode.is-active { border-color: var(--brand); background: var(--brand-tint); box-shadow: 0 0 0 1px var(--brand); }
.rt-mode:has(.rt-mode__input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.rt-mode__input { position: absolute; opacity: 0; pointer-events: none; }
.rt-mode__icon {
  display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 4px; border-radius: 8px;
  background: var(--surface-alt); color: var(--text-muted);
}
.rt-mode.is-active .rt-mode__icon { background: var(--surface); color: var(--brand); }
.rt-mode__icon .icon { width: 16px; height: 16px; }
.rt-mode__title { font-size: 13.5px; font-weight: 650; color: var(--text); }
.rt-mode__text { font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }

.rt-detail { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-alt); }
.rt-detail .select { max-width: 360px; background-color: var(--surface); }
.rt-detail--note p { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.rt-detail__head { display: flex; align-items: center; justify-content: space-between; }
.rt-detail__title { font-size: 12.5px; font-weight: 650; color: var(--text-muted); }
.rt-count { font-size: 12px; font-weight: 650; padding: 2px 8px; border-radius: 999px; background: var(--surface); color: var(--text-muted); }
.rt-count.is-empty { background: var(--red-tint); color: var(--red); }
.rt-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.rt-person { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); }
.rt-person__text { display: grid; flex: 1; min-width: 0; cursor: pointer; }
.rt-person__name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-person__role { font-size: 11.5px; color: var(--text-subtle); }
.rt-warn { margin: 0; font-size: 12.5px; color: var(--red); }

.rt-sla-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rt-sla { flex-wrap: wrap; }
.rt-sla .seg__btn { white-space: nowrap; }
.rt-sla__custom { display: inline-flex; align-items: center; gap: 8px; }
.rt-sla__input { width: 90px; }

.rt-toggles { display: grid; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.rt-toggle { display: flex; align-items: center; gap: 16px; padding: 12px 14px; cursor: pointer; background: var(--surface); }
.rt-toggle + .rt-toggle { border-top: 1px solid var(--border); }
.rt-toggle.is-disabled { cursor: default; }
.rt-toggle__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.rt-toggle__title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.rt-toggle__desc { font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }
.rt-toggle__warn { font-size: 12px; color: var(--amber); }

.rt-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 -20px -20px; padding: 14px 20px;
  border-top: 1px solid var(--border); background: var(--surface-alt); border-radius: 0 0 var(--radius) var(--radius);
}
.rt-summary { flex: 1 1 320px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--text); }
.rt-summary__label { font-weight: 650; }
.rt-foot__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.rt-state { font-size: 12.5px; color: var(--text-subtle); white-space: nowrap; }
.rt-state.is-dirty { color: var(--amber); font-weight: 600; }

@media (max-width: 760px) {
  .rt-modes { grid-template-columns: 1fr; }
  .rt-mode { grid-template-columns: auto 1fr; column-gap: 12px; }
  .rt-mode__icon { grid-row: span 2; margin: 0; }
  .rt-step__body { padding-left: 0; }
  .rt-sla .seg__btn { padding-left: 8px; padding-right: 8px; }
}

/* ---------- Home: needs you now ------------------------------------------ */

.db-focus-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.db-focus-strip:empty { display: none; }
.db-focus-tile {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; font: inherit; color: var(--text);
  cursor: pointer; text-decoration: none; border-left: 3px solid var(--tone, var(--border-strong));
  transition: border-color .15s, box-shadow .15s, transform .15s var(--ease);
}
.db-focus-tile:hover { text-decoration: none; box-shadow: var(--shadow); transform: translateY(-1px); }
.db-focus-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.db-focus-tile--critical { --tone: var(--red); }
.db-focus-tile--warning { --tone: var(--amber); }
.db-focus-tile--brand { --tone: var(--brand); }
.db-focus-tile__icon { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; }
.db-focus-tile__icon--critical { background: var(--red-tint); color: var(--red); }
.db-focus-tile__icon--warning { background: var(--amber-tint); color: var(--amber); }
.db-focus-tile__icon--brand { background: var(--brand-tint); color: var(--brand); }
.db-focus-tile__icon--good { background: var(--green-tint); color: var(--green); }
.db-focus-tile__text { display: grid; flex: 1; min-width: 0; }
.db-focus-tile__value { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.db-focus-tile__label { font-size: 12.5px; line-height: 1.35; color: var(--text-muted); }
.db-focus-tile__action { display: inline-grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; color: var(--tone); background: color-mix(in srgb, var(--tone) 10%, transparent); }
.db-focus-tile__action .icon { transition: transform .15s var(--ease); }
.db-focus-tile:hover .db-focus-tile__action .icon { transform: translateX(2px); }
.db-focus-clear-bar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 13.5px;
  border: 1px solid color-mix(in srgb, var(--green) 25%, var(--border)); border-radius: var(--radius);
  background: color-mix(in srgb, var(--green) 6%, var(--surface));
}

/* ---------- Home: today (meetings + tasks) ------------------------------- */

.db-today__section { padding: 4px 18px 12px; }
.db-today__section + .db-today__section { border-top: 1px solid var(--border); padding-top: 12px; }
.db-today__label {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle);
}
.db-today__label .btn { text-transform: none; letter-spacing: 0; font-size: 12.5px; padding: 3px 8px; margin-right: -8px; }
.db-today__empty { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); }
.db-today__section .db-agenda { margin: 0 -18px; }
.db-tasks { list-style: none; margin: 0; padding: 0; display: grid; }
.db-task { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; }
.db-task + .db-task { border-top: 1px dashed var(--border); }
.db-task .tk-check { margin-top: 2px; flex-shrink: 0; }
.db-task__text { display: grid; flex: 1; min-width: 0; }
.db-task__title { font-size: 13.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-task__meta { font-size: 12px; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-task__late { color: var(--red); font-weight: 600; }
.db-task__flag { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--red-tint); color: var(--red); }

/* ---------- Home: compact setup ------------------------------------------ */

.db-setup-card { padding: 12px 16px; gap: 12px; }
.db-setup-card .db-setup__head { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; }
.db-setup-card .db-setup__head > div:first-child { flex: 0 1 auto; }
.db-setup__intro { display: flex; align-items: center; gap: 12px; }
.db-setup__count { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.db-setup-card .db-setup__progress { width: 96px; }
.db-setup__next { display: flex; align-items: center; gap: 12px; flex: 1 1 340px; min-width: 0; padding-left: 20px; border-left: 1px solid var(--border); }
.db-setup__next-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.db-setup__next-text { display: grid; flex: 1; min-width: 0; font-size: 13px; }
.db-setup__next-text span { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-setup__tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.db-setup__chev { transition: transform .15s var(--ease); }
.db-setup__chev.is-open { transform: rotate(180deg); }

/* ---------- Home: pipeline in stage colours ------------------------------ */

.db-stages__group {
  margin: 10px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle);
}
.db-stages__group:first-child { margin-top: 0; }
.db-stage .db-stage__name { display: inline-flex; align-items: center; gap: 7px; }
.db-stage .dot { background: var(--stage); flex-shrink: 0; }
.db-stage .db-stage__bar { background: var(--stage); }
.db-stage .db-stage__track { border-radius: 0 4px 4px 0; background: color-mix(in srgb, var(--stage) 9%, transparent); }
.db-stage .db-stage__name { width: 100%; }

@media (max-width: 640px) {
  .db-focus-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
  .db-focus-tile { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .db-focus-tile__action { display: none; }
  .db-setup__next { padding-left: 0; border-left: 0; flex-basis: 100%; }
  .db-setup__next-text span { display: none; }
}
/* ---------- Onboarding --------------------------------------------------- */

body.ob-page { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); }
.ob { min-height: 100vh; display: flex; flex-direction: column; }
.ob__top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 16px 24px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.ob__top > :last-child { justify-self: end; }
.ob__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.ob-steps { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ob-step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-subtle); }
.ob-step + .ob-step::before { content: ''; width: 28px; height: 1px; background: var(--border-strong); margin-right: 2px; }
.ob-step__num {
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  font-size: 12px; font-weight: 700; border: 1px solid var(--border-strong); background: var(--surface);
}
.ob-step.is-active { color: var(--text); font-weight: 600; }
.ob-step.is-active .ob-step__num { background: var(--brand); border-color: var(--brand); color: #fff; }
.ob-step.is-done .ob-step__num { background: var(--green); border-color: var(--green); color: #fff; }
.ob__main { flex: 1; display: flex; justify-content: center; padding: 40px 20px 64px; }
.ob-card {
  width: 100%; max-width: 820px; align-self: flex-start; padding: 32px 36px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow);
}
.ob-title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.ob-title:focus { outline: none; }
.ob-sub { margin: 6px 0 24px; font-size: 14px; line-height: 1.5; color: var(--text-muted); max-width: 600px; }
.ob-form { display: grid; gap: 4px; }
.ob-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 28px; align-items: start; }
.ob-fields { display: grid; }
.ob-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ob-linkbtn { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--brand); cursor: pointer; }
.ob-linkbtn:hover { text-decoration: underline; }
.ob-foot { display: flex; align-items: center; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.input--lg { height: 46px; font-size: 16px; }

.ob-prices { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--surface-alt); position: sticky; top: 20px; }
.ob-prices:empty { display: none; }
.ob-prices__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ob-prices__title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); }
.ob-prices__cur { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.ob-prices__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ob-prices__list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; }
.ob-prices__list li + li { border-top: 1px solid var(--border); }
.ob-prices__name { display: grid; font-weight: 650; font-size: 14px; }
.ob-prices__name small, .ob-prices__amount small { font-size: 11.5px; font-weight: 500; color: var(--text-subtle); }
.ob-prices__amount { text-align: right; display: grid; }
.ob-prices__amount strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.ob-prices__note { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.ob-prices__note .icon { color: var(--green); flex-shrink: 0; margin-top: 1px; }

.ob-website-row { display: flex; gap: 8px; }
.ob-website-row .input { flex: 1; min-width: 0; }
.ob-website-row .btn { height: 46px; flex-shrink: 0; }
.ob-profile { min-height: 160px; height: auto; padding: 12px 14px; line-height: 1.5; resize: vertical; font: inherit; font-size: 14px; }
.ob-count { font-size: 11.5px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.ob-profile__note { margin: 6px 0 0; font-size: 12.5px; color: var(--text-muted); }
.ob-profile__note:empty { display: none; }
.ob-why {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 4px; padding: 12px 14px; border-radius: 10px;
  font-size: 13px; line-height: 1.5; color: var(--text-muted); background: var(--brand-tint);
}
.ob-why .icon { color: var(--brand); flex-shrink: 0; margin-top: 2px; }

.ob-meta {
  display: grid; gap: 14px; padding: 20px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, #0866ff 35%, var(--border)); background: color-mix(in srgb, #0866ff 5%, var(--surface));
}
.ob-meta.is-connected { border-color: color-mix(in srgb, var(--green) 40%, var(--border)); background: color-mix(in srgb, var(--green) 6%, var(--surface)); }
.ob-meta__head { display: flex; align-items: center; gap: 14px; }
.ob-meta__badge { display: inline-block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #0866ff; }
:root[data-theme='dark'] .ob-meta__badge { color: #6ea8ff; }
.ob-meta__title { margin: 0; font-size: 18px; font-weight: 700; }
.ob-meta__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; color: var(--text-muted); }
.ob-meta__points li { display: flex; gap: 8px; align-items: flex-start; }
.ob-meta__points .icon { color: var(--green); margin-top: 2px; flex-shrink: 0; }
.ob-meta__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.ob-meta__btn { background: #0866ff; border-color: #0866ff; padding-left: 20px; padding-right: 20px; }
.ob-meta__btn:hover:not(:disabled) { background: #0759d8; border-color: #0759d8; }
.ob-meta__done { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--green); }
.ob-meta__error { margin: 0; font-size: 13px; color: var(--red); }

.ob-more { margin-top: 24px; }
.ob-more__title { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); }
.ob-more__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ob-source {
  display: flex; align-items: center; gap: 12px; padding: 12px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: border-color .12s, box-shadow .12s;
}
.ob-source:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.ob-source:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ob-source__text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ob-source__text strong { font-size: 13.5px; }
.ob-source__text span { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-source--all { border-style: dashed; color: var(--brand); }
.plan-card__charge { margin: -6px 0 12px; font-size: 12px; color: var(--text-subtle); }

@media (max-width: 760px) {
  .ob__top { grid-template-columns: 1fr auto; padding: 12px 16px; }
  .ob-steps { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .ob-step__title { display: none; }
  .ob-step.is-active .ob-step__title { display: inline; }
  .ob__main { padding: 16px 12px 40px; }
  .ob-card { padding: 22px 18px; border-radius: 12px; }
  .ob-title { font-size: 20px; }
  .ob-grid { grid-template-columns: 1fr; gap: 16px; }
  .ob-prices { position: static; }
  .ob-more__grid { grid-template-columns: 1fr; }
  .ob-foot { flex-wrap: wrap; }
  .ob-website-row { flex-direction: column; }
}

@media (max-width: 640px) {
  .db-team th, .db-team td { padding-left: 12px; padding-right: 12px; }
  .db-team th:nth-child(2), .db-team td:nth-child(2) { width: 56px; }
  .db-team th:nth-child(3), .db-team td:nth-child(3) { width: 72px; }
  .db-team th:nth-child(4), .db-team td:nth-child(4) { width: 50px; }
}