/* =========================================================
   Loft UI v3 — design system
   ========================================================= */

:root {
  --nav-bg: #1e1e2c;
  --nav-text: #c5c5d8;
  --nav-text-strong: #ffffff;
  --nav-field: #2b2b3e;
  --nav-border: #3d3d55;

  --band-bg-1: #26266b;
  --band-bg-2: #1f1f59;
  --band-card: #1c1c50;
  --band-card-border: rgba(255, 255, 255, 0.08);
  --band-text-dim: rgba(255, 255, 255, 0.55);
  --band-label: rgba(255, 255, 255, 0.38);
  --lime: #c9c9fb;
  --cream: #efe3b0;

  /* Brand accent — indigo (2026 rebrand away from green) */
  --accent-800: #32328f;
  --accent-700: #3d3dae;
  --accent-600: #4a4ac4;
  --accent-500: #5b5bd6;
  --accent-100: #e4e4fa;
  --accent-50: #f1f1fd;

  /* Legacy aliases — 112 var(--green-*) usages below resolve here; migrate names
     opportunistically when touching those rules. Values are the accent indigo. */
  --green-800: var(--accent-800);
  --green-700: var(--accent-700);
  --green-600: var(--accent-600);
  --green-500: var(--accent-500);
  --green-100: var(--accent-100);
  --green-50: var(--accent-50);

  /* True green, reserved for success semantics (.badge.green, .tag.green, etc.) */
  --good-700: #0c7a4d;
  --good-600: #128a58;
  --good-100: #dcf3e7;
  --good: #128a58;

  --bg: #f5f5f7;
  --surface: #ffffff;
  --border: #e6e6ec;
  --border-strong: #cfcfda;
  --text-strong: #22222e;
  --text: #42424f;
  --text-muted: #75757f;

  /* step-type circles */
  --st-email: #b3479b;    --st-email-bg: #f5e3f2;
  --st-call: #5b9bc9;     --st-call-bg: #e1eef7;
  --st-other: #a08a46;    --st-other-bg: #f2ecd9;
  --st-research: #ffffff; --st-research-bg: #4a79c4;

  /* feed kinds */
  --c-hotlead: #e8762f;    --c-hotlead-bg: #fceade;
  --c-voicemail: #2a9d9d;  --c-voicemail-bg: #e0f2f2;
  --c-reply: #7a5fc7;      --c-reply-bg: #ece7f9;
  --c-open: #c05a9e;       --c-open-bg: #f8e7f2;
  --c-meeting: #1f9d6b;    --c-meeting-bg: #e2f4ec;
  --c-task: #71817c;       --c-task-bg: #eef1f0;
  --c-call: #5b9bc9;       --c-call-bg: #e1eef7;
  --c-email: #b3479b;      --c-email-bg: #f5e3f2;

  --amber-500: #dd9a2f; --amber-100: #fbf1dd;
  --red-500: #d6543f;   --red-100: #fbe6e1;
  --blue-500: #4a79c4;  --blue-100: #e7eef9;

  --radius-sm: 6px;
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(18, 18, 40, 0.06);
  --shadow: 0 8px 28px rgba(18, 18, 40, 0.14);
  --shadow-lg: 0 18px 60px rgba(18, 18, 40, 0.28);

  --nav-h: 52px;
  --rail-w: 316px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }
a { text-decoration: none; color: inherit; }
svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* =========================================================
   Top navigation bar
   ========================================================= */
.topnav {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
  background: var(--nav-bg);
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px;
}
.topnav-brand { display: flex; align-items: center; padding: 0 8px 0 2px; }
.brand-glyph { color: #fff; font-weight: 800; font-size: 21px; letter-spacing: -0.02em; line-height: 1; }
.brand-dot { color: var(--green-500); }

.topnav-menu { display: flex; align-items: center; gap: 2px; }
.topnav-link {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none;
  color: var(--nav-text);
  font-size: 13.5px; font-weight: 500;
  padding: 8px 12px; border-radius: 7px;
  transition: color 0.12s, background 0.12s;
  position: relative;
}
.topnav-link:hover { color: var(--nav-text-strong); background: rgba(255,255,255,0.06); }
.topnav-link .caret { width: 13px; height: 13px; opacity: 0.7; }
.topnav-link.active, .topnav-group.active > .topnav-link {
  color: var(--nav-text-strong); background: rgba(255,255,255,0.09); font-weight: 600;
}

.topnav-group { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
  display: none; z-index: 70;
}
.dropdown.right { left: auto; right: 0; }
.topnav-group.open .dropdown, .menu.open .dropdown { display: block; }
.dropdown a, .dropdown .dd-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 500;
  color: var(--text-strong);
  background: none; border: none;
}
.dropdown a:hover, .dropdown .dd-item:hover { background: var(--green-50); color: var(--green-700); }

.menu { position: relative; display: inline-block; }

.topnav-search {
  flex: 1; max-width: 420px; margin: 0 auto;
  display: flex; align-items: center; gap: 9px;
  background: var(--nav-field);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 12px;
  color: #8fa09a;
}
.topnav-search svg { width: 15px; height: 15px; }
.topnav-search input { flex: 1; border: none; outline: none; background: transparent; font: inherit; font-size: 13.5px; color: #fff; }
.topnav-search input::placeholder { color: #8fa09a; }
.topnav-search:focus-within { border-color: var(--green-500); }

.topnav-right { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.actions-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid var(--nav-border);
  color: var(--nav-text-strong);
  font-size: 13px; font-weight: 600;
  padding: 7px 12px; border-radius: 8px; margin-right: 6px;
  transition: background 0.12s, border-color 0.12s;
}
.actions-btn svg { width: 14px; height: 14px; }
.actions-btn:hover { background: rgba(255,255,255,0.07); border-color: #4d5854; }

.topnav-icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: none; border: none;
  color: var(--nav-text);
  border-radius: 7px; position: relative;
  transition: color 0.12s, background 0.12s;
}
.topnav-icon svg { width: 17px; height: 17px; }
.topnav-icon:hover { color: #fff; background: rgba(255,255,255,0.07); }
.topnav-icon.has-dot::after {
  content: ""; position: absolute; top: 6px; right: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #e8762f; border: 2px solid var(--nav-bg);
}
.topnav-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #4a79c4, #7a5fc7);
  color: #fff; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; margin-left: 6px; cursor: pointer;
}
.topnav-hamburger { display: none; background: none; border: none; color: #fff; }

/* =========================================================
   Focus-zone band
   ========================================================= */
.band { background: linear-gradient(180deg, var(--band-bg-1), var(--band-bg-2)); padding: 18px 24px 20px; }
.band-inner {
  max-width: 1400px; margin: 0 auto;
  display: grid;
  grid-template-columns: 26px 300px minmax(300px, 1fr) 26px 340px;
  gap: 14px; align-items: stretch;
}
.band-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  text-align: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--band-label); text-transform: uppercase; user-select: none;
}
.band-card {
  background: var(--band-card);
  border: 1px solid var(--band-card-border);
  border-radius: 12px;
  padding: 13px 16px 12px;
  color: #fff;
  display: flex; flex-direction: column;
  min-height: 108px;
}
.band-card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.band-card-title { font-size: 13.5px; font-weight: 600; }
.band-card-period { font-size: 11.5px; color: var(--band-text-dim); }
.band-info {
  width: 13px; height: 13px;
  border: 1.2px solid var(--band-text-dim);
  border-radius: 50%;
  color: var(--band-text-dim);
  font-size: 9px;
  display: inline-grid; place-items: center;
  font-style: normal; cursor: default;
}
.band-card-top .chart-glyph { margin-left: auto; color: var(--band-text-dim); width: 15px; height: 15px; }
.band-metrics { display: flex; gap: 34px; align-items: flex-end; flex: 1; }
.band-metric .num { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.band-metric .sub { font-size: 11.5px; color: var(--band-text-dim); margin-top: 3px; }
.band-split { display: flex; align-items: flex-end; gap: 18px; flex: 1; }
.band-chart { flex: 1; min-width: 0; }
.band-chart svg { display: block; width: 100%; height: 62px; }
.band-axis { font-size: 8.5px; fill: var(--band-text-dim); }

/* =========================================================
   Workspace tabs + body + rail
   ========================================================= */
.ws-tabs-wrap { background: var(--bg); border-bottom: 2px solid var(--green-500); }
.ws-tabs { max-width: 1400px; margin: 0 auto; padding: 14px 24px 0; display: flex; gap: 6px; }
.ws-tab {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid transparent; border-bottom: none;
  background: transparent;
  border-radius: 10px 10px 0 0;
  padding: 10px 18px 11px;
  text-align: left;
  transition: background 0.12s;
}
.ws-tab:hover { background: rgba(23, 160, 95, 0.07); }
.ws-tab .t-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #e6ebe9; color: var(--text-muted); }
.ws-tab .t-icon svg { width: 16px; height: 16px; }
.ws-tab .t-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.15; }
.ws-tab .t-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.ws-tab.active { background: var(--surface); border-color: var(--border); box-shadow: 0 -4px 10px rgba(18, 18, 40, 0.04); position: relative; }
.ws-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--surface); }
.ws-tab.active .t-title { color: var(--green-700); }
.ws-tab.active .t-icon { background: var(--green-100); color: var(--green-600); }

.ws-body {
  max-width: 1400px; margin: 0 auto;
  padding: 18px 24px 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  gap: 18px; align-items: start;
}
.ws-note { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.ws-note strong { color: var(--text-strong); font-weight: 600; }
.ws-note .note-info, .mini-info {
  display: inline-grid; place-items: center;
  width: 13px; height: 13px;
  border: 1.2px solid currentColor;
  border-radius: 50%;
  font-size: 9px; font-style: normal;
  margin-left: 3px; vertical-align: 1px; opacity: 0.75;
}

/* ---- Calendar (Schedule tab) ---- */
.cal-card { overflow: hidden; }
.cal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.cal-title { font-size: 16px; font-weight: 700; color: var(--text-strong); }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-dows {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
  background: #fafcfb;
}
.cal-dows div { padding: 8px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); text-align: right; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell {
  min-height: 86px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 7px 8px;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
  cursor: pointer;
  transition: background 0.1s;
  position: relative;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:hover { background: #fafcfb; }
.cal-cell.out { background: #fafbfb; cursor: default; }
.cal-num { font-size: 12.5px; font-weight: 600; color: var(--text); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.cal-cell.today .cal-num { background: var(--green-600); color: #fff; font-weight: 700; }
.cal-cell.sel { background: var(--green-50); box-shadow: inset 0 0 0 2px var(--green-500); }
.cal-count {
  align-self: stretch;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--green-100); color: var(--green-700);
  font-size: 11px; font-weight: 700;
  border-radius: 6px; padding: 3.5px 7px;
}
.cal-count svg { width: 12px; height: 12px; }
.cal-count.past { background: #edf1f0; color: var(--text-muted); }

/* ---- Right rail ---- */
.rail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  position: sticky;
  top: calc(var(--nav-h) + 14px);
  max-height: calc(100vh - var(--nav-h) - 28px);
  display: flex; flex-direction: column;
}
.rail-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 8px; }
.rail-tab {
  background: none; border: none;
  padding: 13px 10px 11px; margin: 0 8px;
  font-size: 13.5px; font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.rail-tab.active { color: var(--text-strong); border-bottom-color: var(--green-500); }
.rail-body { overflow-y: auto; }

.feed-item { display: flex; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.feed-item:last-child { border-bottom: none; }
.feed-text { font-size: 13px; line-height: 1.45; color: var(--text); }
.feed-text .fname { font-weight: 700; color: var(--text-strong); }
.feed-text a.fname:hover { color: var(--green-700); }
.feed-text .pipe { color: var(--border-strong); margin: 0 4px; }
.feed-text .fco { font-weight: 600; color: var(--text-muted); }
.feed-time { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }

.kind-icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.kind-icon svg { width: 15px; height: 15px; }
.kind-icon.hotlead   { background: var(--c-hotlead-bg);   color: var(--c-hotlead); }
.kind-icon.voicemail { background: var(--c-voicemail-bg); color: var(--c-voicemail); }
.kind-icon.reply     { background: var(--c-reply-bg);     color: var(--c-reply); }
.kind-icon.open      { background: var(--c-open-bg);      color: var(--c-open); }
.kind-icon.meeting   { background: var(--c-meeting-bg);   color: var(--c-meeting); }
.kind-icon.task      { background: var(--c-task-bg);      color: var(--c-task); }
.kind-icon.call      { background: var(--c-call-bg);      color: var(--c-call); }
.kind-icon.email     { background: var(--c-email-bg);     color: var(--c-email); }

.rail-date { padding: 14px 16px 10px; border-bottom: 1px solid var(--border); background: #fafcfb; }
.rd-day { font-weight: 700; color: var(--text-strong); font-size: 14px; display: flex; align-items: center; }
.rd-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.sched-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.sched-item:hover { background: #fafcfb; }
.sched-item:last-child { border-bottom: none; }
.sched-time { font-size: 11.5px; font-weight: 700; color: var(--text-muted); width: 56px; flex-shrink: 0; padding-top: 2px; }
.sched-main { flex: 1; min-width: 0; }
.sched-subject { font-size: 13px; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.sched-meta.dim { font-size: 11.5px; opacity: 0.85; }

/* ---- Close tab ---- */
.close-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.close-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px; }
.close-stat .lbl { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.close-stat .val { font-size: 21px; font-weight: 700; color: var(--text-strong); margin-top: 4px; letter-spacing: -0.01em; }

/* =========================================================
   Standard pages
   ========================================================= */
.page-wrap { max-width: 1400px; margin: 0 auto; padding: 22px 24px 56px; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-title { font-size: 21px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.01em; }
.page-sub { color: var(--text-muted); margin-top: 3px; font-size: 13.5px; }
.page-actions { display: flex; gap: 10px; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 600; font-size: 13.5px;
  transition: background 0.12s, border-color 0.12s;
}
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--green-600); color: #fff; }
.btn-primary:hover { background: var(--green-700); }
.btn-secondary { background: var(--surface); color: var(--text-strong); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--text-muted); }
.btn-secondary.danger { color: var(--red-500); border-color: #ecc9c1; }
.btn-secondary.danger:hover { border-color: var(--red-500); }
/* Destructive action in a toolbar: red text on a tinted fill, sized like any other
   .btn (unlike .danger-btn, which carries its own padding for standalone use). */
.btn-danger { background: var(--red-100); color: var(--red-500); border-color: #f3c9c0; }
.btn-danger:hover:not([disabled]) { background: var(--red-500); color: #fff; border-color: var(--red-500); }
.btn-danger[disabled] { background: transparent; color: var(--text-muted); border-color: var(--border-strong); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: #e9edec; color: var(--text-strong); }
.btn-sm { padding: 5px 11px; font-size: 12.5px; }

.icon-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: none; border: none;
  color: var(--text-muted);
  border-radius: 7px;
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { background: #e9edec; color: var(--text-strong); }
.icon-btn.light { color: #a9bab4; }
.icon-btn.light:hover { background: rgba(255,255,255,0.1); color: #fff; }

.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .spacer, .spacer { flex: 1; }

.seg-tabs { display: flex; gap: 2px; background: #e7ebea; padding: 3px; border-radius: 8px; }
.seg-tab { border: none; background: transparent; padding: 6px 14px; border-radius: 6px; font-weight: 600; font-size: 13px; color: var(--text-muted); }
.seg-tab.active { background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-sm); }

.search-input {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 11px;
  color: var(--text-muted);
  min-width: 230px;
}
.search-input svg { width: 15px; height: 15px; }
.search-input input { border: none; outline: none; background: transparent; font: inherit; flex: 1; color: var(--text-strong); }
.search-input:focus-within { border-color: var(--green-500); box-shadow: 0 0 0 3px var(--green-100); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); }
.card + .card { margin-top: 16px; }
.card-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--border); }
.card-header.slim { padding: 12px 16px; }
.card-title { font-weight: 700; color: var(--text-strong); font-size: 14.5px; }
.card-body { padding: 20px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: #fafcfb;
}
tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; font-size: 13.5px; }
tbody tr { transition: background 0.1s; }
tbody tr:hover { background: #fafcfb; }
tbody tr:last-child td { border-bottom: none; }
tr.row-link { cursor: pointer; }

.cell-person { display: flex; align-items: center; gap: 11px; }
.cell-person .who .name { font-weight: 600; color: var(--text-strong); }
.cell-person .who .sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }

.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff;
  flex-shrink: 0; user-select: none;
}

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 600;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.green { background: var(--good-100); color: var(--good-700); }
.badge.amber { background: var(--amber-100); color: #a5721c; }
.badge.red   { background: var(--red-100); color: var(--red-500); }
.badge.blue  { background: var(--blue-100); color: var(--blue-500); }
.badge.gray  { background: #edf1f0; color: var(--text-muted); }
.badge.orange{ background: var(--c-hotlead-bg); color: var(--c-hotlead); }

.tag {
  display: inline-block;
  padding: 2.5px 9px; border-radius: 999px;
  background: #edf1f0; color: #5f6c68;
  font-size: 11.5px; font-weight: 600;
}
.tag.green { background: var(--good-100); color: var(--good-700); }
.tag.amber { background: var(--amber-100); color: #a5721c; }

.switch { position: relative; width: 38px; height: 21px; flex-shrink: 0; display: inline-block; }
.switch input { opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; background: var(--border-strong); border-radius: 99px; transition: background 0.15s; }
.switch i::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; transition: transform 0.15s; box-shadow: var(--shadow-sm);
}
.switch input:checked + i { background: var(--green-600); }
.switch input:checked + i::after { transform: translateX(17px); }

/* =========================================================
   Cadence detail
   ========================================================= */
.cad-topline { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.cad-crumb { font-size: 17px; color: var(--text-muted); }
.cad-crumb a { color: var(--text-strong); font-weight: 700; }
.cad-crumb a:hover { color: var(--green-700); }
.cad-crumb strong { color: var(--text-muted); font-weight: 600; }
.crumb-sep { margin: 0 6px; color: var(--border-strong); }
.cad-top-actions { display: flex; gap: 4px; }
.cad-top-actions .btn .chev { width: 13px; height: 13px; }

.subtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.subtab {
  padding: 10px 14px 9px;
  font-size: 13.5px; font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.subtab:hover { color: var(--text-strong); }
.subtab.active { color: var(--text-strong); border-bottom-color: var(--green-500); }

.cad-cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.cad-stat-card { padding: 15px 20px 17px; }
.csc-title { font-weight: 700; color: var(--text-strong); font-size: 14.5px; margin-bottom: 12px; }
.csc-since { color: var(--text-muted); font-weight: 500; font-size: 12.5px; }
.csc-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.csc-stats.wide { gap: 34px; }
.csc-lbl { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.csc-val { font-size: 21px; font-weight: 700; color: var(--text-strong); margin-top: 4px; letter-spacing: -0.01em; }
.csc-unit { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.outcomes-card { margin-bottom: 22px; }
.delta-chip { font-size: 12px; font-weight: 700; vertical-align: 2px; margin-left: 2px; }
.delta-chip.up { color: var(--green-600); }
.delta-chip.down { color: var(--amber-500); }

.cad-day-lbl { font-size: 13px; font-weight: 700; color: var(--text); margin: 4px 2px 8px; }
.cad-day { margin-bottom: 8px; }

.cstep {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.grip { width: 14px; height: 16px; color: var(--border-strong); cursor: grab; flex-shrink: 0; }
.cstep:hover .grip { color: var(--text-muted); }

.sicon {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
}
.sicon svg { width: 16px; height: 16px; }
.sicon.sm { width: 26px; height: 26px; }
.sicon.sm svg { width: 13px; height: 13px; }
.sicon.email    { background: var(--st-email-bg);    color: var(--st-email); }
.sicon.call     { background: var(--st-call-bg);     color: var(--st-call); }
.sicon.other    { background: var(--st-other-bg);    color: var(--st-other); }
.sicon.research { background: var(--st-research-bg); color: var(--st-research); }

.cstep-main { flex: 1; min-width: 0; }
.cstep-name { font-size: 14px; font-weight: 700; color: var(--text-strong); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cstep-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ai-pill {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  white-space: nowrap;
}
.ai-pill svg { width: 11px; height: 11px; color: #b3479b; }

.cstep-stats { display: flex; gap: 22px; flex-shrink: 0; }
.cstat { text-align: left; min-width: 54px; }
.cstat-lbl { font-size: 10.5px; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.cstat-val { font-size: 13px; font-weight: 700; color: var(--text-strong); margin-top: 2px; }

.cstep-flags { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; min-width: 96px; }
.cstep-flag { font-size: 12px; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.cstep-flag.strong { color: var(--text-strong); font-weight: 700; }

.due-btn {
  background: var(--green-800);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
  transition: background 0.12s;
  min-width: 88px;
}
.due-btn:hover { background: var(--green-700); }
.due-btn.muted { background: #9dbfb2; }
.due-btn.muted:hover { background: #8bb2a3; }

.add-step-row { display: flex; justify-content: center; padding: 4px 0 14px; }

/* settings tab */
.settings-card .card-body { max-width: 640px; }
.field { margin-bottom: 14px; }
.field.slim { margin-bottom: 10px; }
.field label { display: block; font-weight: 600; color: var(--text-strong); font-size: 12.5px; margin-bottom: 5px; }
.field label .req { color: var(--text-muted); font-weight: 500; margin-left: 4px; }
.field input, .field textarea, .field select {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 9px 12px;
  font: inherit; font-size: 13.5px;
  outline: none;
  background: var(--surface);
  color: var(--text-strong);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--green-500); box-shadow: 0 0 0 3px var(--green-100); }
.field textarea { resize: vertical; line-height: 1.55; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.check-row { display: flex; gap: 14px; flex-wrap: wrap; }
.check-row.col { flex-direction: column; gap: 8px; }
.check { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.check input { accent-color: var(--green-600); width: 15px; height: 15px; }
.char-count { text-align: left; font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.danger-card { margin-top: 16px; }

/* =========================================================
   Task panel (right sidebar)
   ========================================================= */
.task-panel {
  position: fixed;
  top: var(--nav-h); right: 0; bottom: 0;
  width: 336px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -10px 0 34px rgba(13, 24, 21, 0.16);
  transform: translateX(103%);
  transition: transform 0.22s ease;
  z-index: 65;
  display: flex; flex-direction: column;
}
.task-panel.open { transform: translateX(0); }

.tp-head {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--nav-bg); color: #fff;
  padding: 10px 12px 10px 16px;
}
.tp-head-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; }
.tp-head-title svg { width: 15px; height: 15px; color: var(--green-500); }

.tp-step { display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.tp-step-name { font-size: 13.5px; font-weight: 700; color: var(--text-strong); }
.tp-step-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }

.tp-note { font-size: 12px; color: var(--text-muted); padding: 10px 16px; background: #fafcfb; border-bottom: 1px solid var(--border); }
.tp-progress { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--text-muted); }
.tp-bar { flex: 1; height: 5px; background: #e7ebea; border-radius: 99px; overflow: hidden; }
.tp-bar i { display: block; height: 100%; background: var(--green-500); border-radius: 99px; }

.tp-list { overflow-y: auto; flex: 1; padding: 10px 12px; }
.tp-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--green-500);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
  background: var(--surface);
}
.tp-card:hover { background: var(--green-50); }
.tp-card-top { display: flex; align-items: center; gap: 8px; }
.tp-card-cad { font-size: 12.5px; font-weight: 700; color: var(--text-strong); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-card-when { font-size: 11.5px; color: var(--text-muted); }
.tp-card-step { font-size: 11.5px; color: var(--green-700); font-weight: 600; margin: 5px 0 4px; }
.tp-card-person { font-size: 12.5px; color: var(--text); }
.tp-name { font-weight: 700; color: var(--text-strong); }
.tp-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.tp-role { font-size: 11.5px; color: var(--text-muted); }

/* =========================================================
   Email composer (floating window)
   ========================================================= */
.composer {
  position: fixed;
  right: 20px; bottom: 0;
  width: 560px; max-width: calc(100vw - 40px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  box-shadow: var(--shadow-lg);
  z-index: 85;
  display: none;
  flex-direction: column;
  max-height: min(640px, calc(100vh - var(--nav-h) - 20px));
}
.composer.open { display: flex; }
body.has-panel .composer { right: 356px; }

.cw-head {
  display: flex; align-items: center; gap: 6px;
  background: var(--nav-bg); color: #fff;
  padding: 8px 10px 8px 12px;
  border-radius: 11px 11px 0 0;
  flex-shrink: 0;
}
.cw-nav {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: none; border: none; color: #c3cfca;
  border-radius: 5px;
}
.cw-nav svg { width: 14px; height: 14px; }
.cw-nav:hover:not(:disabled) { background: rgba(255,255,255,0.1); color: #fff; }
.cw-nav:disabled { opacity: 0.35; cursor: default; }
.cw-count { font-size: 12.5px; font-weight: 700; }
.cw-edited { font-size: 12px; color: #a9bab4; margin-left: 12px; }
.cw-spacer { flex: 1; }
.cw-ctrl { width: 26px; height: 26px; display: grid; place-items: center; background: none; border: none; color: #a9bab4; border-radius: 5px; }
.cw-ctrl svg { width: 14px; height: 14px; }
.cw-ctrl:hover { background: rgba(255,255,255,0.1); color: #fff; }

.cw-body { display: flex; flex-direction: column; overflow: hidden; position: relative; }
.composer.min .cw-body { display: none; }

.cw-row { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); padding: 8px 14px; flex-shrink: 0; }
.cw-lbl { font-size: 12.5px; color: var(--text-muted); font-weight: 600; width: 52px; flex-shrink: 0; }
.cw-input { flex: 1; border: none; outline: none; font: inherit; font-size: 13.5px; color: var(--text-strong); background: transparent; }
.cw-cc { background: none; border: none; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.cw-cc:hover { color: var(--text-strong); }
.cw-meta { font-size: 11.5px; color: var(--text-muted); padding: 6px 14px; background: #fafcfb; border-bottom: 1px solid var(--border); flex-shrink: 0; }

.cw-toolbar { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cw-font { font-size: 12px; color: var(--text-muted); padding: 3px 8px; border-right: 1px solid var(--border); }
.cw-tool { width: 26px; height: 24px; display: grid; place-items: center; background: none; border: none; color: var(--text-muted); border-radius: 5px; font-size: 12.5px; }
.cw-tool:hover { background: #e9edec; color: var(--text-strong); }

.cw-editor {
  border: none; outline: none; resize: none;
  padding: 14px;
  font: inherit; font-size: 13.5px; line-height: 1.6;
  color: var(--text-strong);
  min-height: 210px;
  overflow-y: auto;
}

.cw-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border); background: #fafbfb; flex-shrink: 0; }
.cw-send-group { display: flex; }
.cw-send-group .btn { border-radius: 8px 0 0 8px; }
.cw-clock {
  width: 38px;
  display: grid; place-items: center;
  background: var(--green-600);
  border: none; border-left: 1px solid rgba(255,255,255,0.25);
  border-radius: 0 8px 8px 0;
  color: #fff;
}
.cw-clock svg { width: 15px; height: 15px; }
.cw-clock:hover, .cw-clock.on { background: var(--green-700); }

.cw-sched {
  position: absolute;
  left: 14px; bottom: 62px;
  width: 250px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 10px 12px 12px;
  display: none;
  z-index: 5;
}
.cw-sched.open { display: block; }
.cw-sched-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--text-strong); margin-bottom: 6px; }
.cw-sched-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 8px 0 5px; }
.cw-sched-opt {
  display: block; width: 100%; text-align: left;
  background: none; border: none;
  padding: 7px 9px; border-radius: 6px;
  font-size: 13px; font-weight: 500; color: var(--text);
}
.cw-sched-opt:hover { background: #f0f4f2; }
.cw-sched-opt.sel { background: var(--green-100); color: var(--green-800); font-weight: 700; }
.cw-sched-custom { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; }
.cw-sched-custom .field, .cw-sched > .field { margin-bottom: 8px; }
.cw-sched-actions { display: flex; gap: 8px; margin-top: 4px; }
.cw-sched-note { font-size: 11.5px; color: var(--text-muted); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); line-height: 1.5; }

/* =========================================================
   Modals
   ========================================================= */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(13, 24, 21, 0.45);
  display: none;
  align-items: flex-start; justify-content: center;
  padding: 48px 16px;
  overflow-y: auto;
  z-index: 100;
}
.modal-overlay.show { display: flex; }
.modal {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  width: 640px; max-width: 100%;
}
.modal.wide { width: 960px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 12px; }
.modal-title { font-size: 18px; font-weight: 700; color: var(--text-strong); }
.modal-body { padding: 6px 22px 20px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); }
.modal-foot.inset { border-top: none; padding: 4px 0 0; justify-content: flex-start; }

.info-box {
  background: #f0f4f2;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 13px; color: var(--text);
  line-height: 1.5;
  margin-top: 6px;
}
.info-box.blue { background: #eef3fb; color: #3a5a8c; }

.steptype-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 18px; padding: 4px 0 12px; }
.steptype {
  display: flex; align-items: center; gap: 11px;
  background: none;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 14px; font-weight: 600; color: var(--text-strong);
  text-align: left;
}
.steptype:hover { background: #f4f7f6; }
.steptype.sel { background: #eef1f0; border-color: var(--border-strong); }

.step-extra { border-top: 1px solid var(--border); padding-top: 14px; }
.modal-sec-title { font-size: 15px; font-weight: 700; color: var(--text-strong); margin-bottom: 4px; }
.modal-sec-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.modal-sec-sub a { color: var(--blue-500); font-weight: 600; }

.email-opt {
  display: flex; align-items: center; gap: 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 15px;
  margin-bottom: 10px;
}
.email-opt-main { flex: 1; }
.email-opt-name { font-weight: 700; color: var(--text-strong); font-size: 14px; }
.email-opt-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* AI email settings modal */
.ai-grid { display: grid; grid-template-columns: 1fr 1.1fr; }
.ai-left { padding: 8px 22px 18px; border-right: 1px solid var(--border); }
.ai-right { padding: 8px 22px 18px; }
.ai-kv { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.ai-kv span { width: 56px; font-size: 13px; font-weight: 700; color: var(--text-strong); flex-shrink: 0; }
.ai-kv input, .ai-kv select {
  flex: 1;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit; font-size: 13px;
  outline: none;
}
.ai-kv input:focus, .ai-kv select:focus { border-color: var(--green-500); }
.ai-p { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 6px 0 12px; }
.ai-sec { font-size: 13.5px; font-weight: 700; color: var(--text-strong); margin: 12px 0 7px; }
.ai-note { font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #eef1f0;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12.5px; font-weight: 600; color: var(--text);
}
.ai-ex-head { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; color: var(--text-strong); margin: 14px 0 10px; flex-wrap: wrap; }
.ai-ex-lbl { font-size: 13px; font-weight: 700; color: var(--text-strong); margin: 12px 0 4px; }
.ai-ex-subject { font-size: 13.5px; color: var(--text); }
.ai-ex-body { font-size: 13px; color: var(--text); line-height: 1.6; white-space: pre-line; }

/* add-people modal rows */
.addp-row { display: flex; align-items: center; gap: 11px; padding: 9px 2px; border-bottom: 1px solid var(--border); }
.addp-row:last-child { border-bottom: none; }
.addp-main { flex: 1; }
.addp-name { font-weight: 600; color: var(--text-strong); font-size: 13.5px; }
.addp-sub { font-size: 12px; color: var(--text-muted); }

/* =========================================================
   Person profile page
   ========================================================= */
.person-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 290px;
  gap: 16px;
  align-items: start;
}
.person-left .card + .card, .person-right .card + .card { margin-top: 14px; }

.person-card { padding: 20px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pc-name { font-size: 16px; font-weight: 700; color: var(--text-strong); margin-top: 10px; }
.pc-title { font-size: 13px; color: var(--text); margin-top: 2px; }
.pc-co { font-size: 12.5px; color: var(--text-muted); margin-top: 1px; }
.pc-last { font-size: 11.5px; color: var(--text-muted); margin-top: 10px; }

.qa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 10px; }
.qa {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none;
  padding: 10px 4px;
  border-radius: 8px;
  font-size: 11.5px; font-weight: 600; color: var(--text);
}
.qa:hover { background: var(--green-50); color: var(--green-700); }
.qa-ic { width: 34px; height: 34px; border-radius: 50%; background: #eef1f0; display: grid; place-items: center; color: var(--text); }
.qa:hover .qa-ic { background: var(--green-100); color: var(--green-700); }
.qa-ic svg { width: 15px; height: 15px; }

.pstats { display: grid; grid-template-columns: repeat(2, 1fr); }
.pstat { padding: 12px 16px; border-top: 1px solid var(--border); }
.pstat:nth-child(1), .pstat:nth-child(2) { border-top: none; }
.pstat:nth-child(odd) { border-right: 1px solid var(--border); }
.pstat-v { font-size: 19px; font-weight: 700; color: var(--text-strong); }
.pstat-l { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

.pdetails { padding: 6px 0; }
.pd-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 16px; font-size: 12.5px; color: var(--text-muted); }
.pd-row .pd-v { color: var(--text-strong); font-weight: 500; text-align: right; overflow: hidden; text-overflow: ellipsis; }

.pc-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.ptabs { display: flex; gap: 2px; border-bottom: 1px solid transparent; }
.ptab {
  background: none; border: none;
  padding: 8px 11px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
}
.ptab:hover { color: var(--text-strong); }
.ptab.active { color: var(--text-strong); border-bottom-color: var(--green-500); }

.pc-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin: 16px 2px 8px; }
.pc-section-title:first-of-type { margin-top: 4px; }

.tl-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.tl-item:last-child { border-bottom: none; }
.tl-main { flex: 1; min-width: 0; }
.tl-title { font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.tl-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.tl-date { font-size: 12px; color: var(--text-muted); white-space: nowrap; font-weight: 600; }
.tl-date.amber { color: #a5721c; }

.person-right .pr-body { padding: 12px 14px; }
.pr-cad {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
  margin-top: 10px;
  cursor: pointer;
  transition: border-color 0.1s, background 0.1s;
}
.pr-cad:hover { border-color: var(--green-500); background: var(--green-50); }
.pr-cad-name { font-size: 13px; font-weight: 700; color: var(--text-strong); }
.pr-cad-next { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.pr-cad-date { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; text-align: right; }

.pr-person { display: flex; align-items: center; gap: 10px; padding: 8px 2px; cursor: pointer; border-radius: 7px; }
.pr-person:hover { background: #fafcfb; }
.pr-person.me { cursor: default; }
.pr-p-name { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.pr-p-sub { font-size: 11.5px; color: var(--text-muted); }

/* =========================================================
   Analytics bits
   ========================================================= */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi { padding: 15px 18px; }
.kpi .lbl { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.kpi .val { font-size: 26px; font-weight: 700; color: var(--text-strong); margin-top: 5px; letter-spacing: -0.02em; }
.kpi .delta { font-size: 12px; font-weight: 700; margin-top: 4px; }
.kpi .delta.up { color: var(--green-600); }
.kpi .delta.down { color: var(--red-500); }
.chart-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-bottom: 16px; }
.chart-grid .card + .card { margin-top: 0; }
.chart-svg { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 18px; margin-top: 10px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; }
.rank-row { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--border); }
.rank-row:last-child { border-bottom: none; }
.rank-num { width: 20px; text-align: center; font-weight: 700; color: var(--text-muted); font-size: 13px; }
.rank-main { flex: 1; }
.rank-name { font-weight: 600; color: var(--text-strong); font-size: 13.5px; }
.rank-sub { font-size: 12px; color: var(--text-muted); }
.rank-val { font-weight: 700; color: var(--text-strong); }

/* =========================================================
   Toast / misc
   ========================================================= */
.toast {
  position: fixed;
  bottom: 22px; left: 50%;
  transform: translateX(-50%) translateY(14px);
  background: var(--nav-bg); color: #fff;
  padding: 11px 18px;
  border-radius: 10px;
  font-weight: 500; font-size: 13.5px;
  box-shadow: var(--shadow);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 130;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.empty { padding: 40px 24px; text-align: center; color: var(--text-muted); font-size: 13.5px; }
.empty .empty-title { font-weight: 700; color: var(--text-strong); margin-bottom: 4px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1180px) {
  /* The 5-col band grid (label,card,card,label,card) can't collapse to "20px 1fr" —
     auto-placement drops the 2nd card into the 20px LABEL column, so the cards render
     squeezed at min-content against the left edge. Below the breakpoint, stack the
     cards full-width and drop the vertical rail labels entirely. */
  .band-inner { grid-template-columns: 1fr; grid-auto-rows: auto; row-gap: 12px; }
  .band-label { display: none; }
  .ws-body { grid-template-columns: 1fr; }
  .rail { position: static; max-height: none; }
  .kpi-grid, .close-summary { grid-template-columns: repeat(2, 1fr); }
  .chart-grid, .cad-cards-row { grid-template-columns: 1fr; }
  .person-grid { grid-template-columns: 1fr; }
  .cstep-stats { display: none; }
  .ai-grid { grid-template-columns: 1fr; }
  .ai-left { border-right: none; border-bottom: 1px solid var(--border); }
}

@media (max-width: 900px) {
  .topnav-menu {
    display: none;
    position: absolute;
    top: var(--nav-h); left: 0; right: 0;
    background: var(--nav-bg);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 12px 14px;
    gap: 4px;
    border-top: 1px solid #2c3431;
    z-index: 65;
  }
  .topnav-menu.open { display: flex; }
  .topnav-menu .dropdown { position: static; display: block; background: transparent; border: none; box-shadow: none; padding: 0 0 0 20px; }
  .topnav-menu .dropdown a { color: var(--nav-text); }
  .topnav-menu .dropdown a:hover { background: rgba(255,255,255,0.06); color: #fff; }
  .topnav-hamburger { display: grid; place-items: center; width: 36px; height: 36px; }
  .topnav-search { max-width: none; }
  .ws-tab .t-sub { display: none; }
  .cstep-flags { display: none; }
  .cal-cell { min-height: 64px; }
  .composer { right: 0; width: 100vw; max-width: 100vw; border-radius: 0; }
  body.has-panel .composer { right: 0; }
  .task-panel { width: 100vw; }
  .steptype-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

:focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; }

/* =========================================================
   SalesWind additions — auth, paywall, analytics, strategy
   ========================================================= */

/* ── Auth screens ── */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--band-bg-1), var(--band-bg-2) 60%, #071f1a); padding: 24px; }
/* Boot loader: same dark canvas as auth/plan screens, shown while /me and the Stripe
   price load so route changes never flash the bare page background. */
.boot-load { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(160deg, var(--band-bg-1), var(--band-bg-2) 60%, #071f1a); }
.boot-load .boot-mark { width: 46px; height: auto; animation: bootPulse 1.1s ease-in-out infinite; }
.boot-load .brand-word { color: #fff; font-size: 18px; letter-spacing: .2px; }
@keyframes bootPulse { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.1); opacity: 1; } }
/* Expandable field-change detail under "contact edited" feed rows. */
.feed-detail { margin: -4px 0 8px 44px; padding: 8px 12px; background: var(--surface-2, rgba(0,0,0,.04));
  border-radius: 8px; font-size: 12.5px; }
.feed-detail .fd-row { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; flex-wrap: wrap; }
.feed-detail .fd-row b { min-width: 90px; text-transform: capitalize; }
.feed-detail .fd-old { color: var(--muted, #777); text-decoration: line-through; }
.feed-detail .fd-arrow { color: var(--muted, #777); }
.feed-detail .linkish { display: inline-block; margin-top: 4px; }
.auth-card { width: 100%; max-width: 420px; background: var(--surface); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 34px 34px 28px; }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.auth-brand .brand-glyph { width: 38px; height: 38px; border-radius: 10px; background: var(--band-bg-1);
  color: var(--lime); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; }
.auth-brand b { font-size: 18px; color: var(--text-strong); letter-spacing: -0.2px; }
.auth-card h1 { font-size: 21px; margin: 0 0 4px; color: var(--text-strong); letter-spacing: -0.3px; }
.auth-card .auth-sub { font-size: 13.5px; color: var(--text-muted); margin: 0 0 20px; }
.auth-field { margin-bottom: 13px; }
.auth-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.auth-field input { width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px;
  font: inherit; font-size: 14px; }
.auth-field input:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px var(--green-100); }
.auth-btn { width: 100%; padding: 11px; border: 0; border-radius: 8px; background: var(--green-700); color: #fff;
  font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; margin-top: 4px; }
.auth-btn:hover { background: var(--green-800); }
.auth-btn[disabled] { opacity: .6; cursor: default; }
/* In-button spinner while an auth request is in flight (reuses the jspin keyframes).
   White-on-green to sit on the button's own background. */
.auth-btn .spin { display: inline-block; vertical-align: -2px; margin-right: 8px;
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff; animation: jspin .7s linear infinite; }
.auth-alt { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 16px; }
.auth-alt a { color: var(--green-700); font-weight: 600; text-decoration: none; cursor: pointer; }
.auth-error { background: var(--red-100); color: var(--red-500); border-radius: 8px; padding: 9px 12px;
  font-size: 13px; margin-bottom: 13px; display: none; }
.auth-error.show { display: block; }
.auth-ok { background: var(--green-50); color: var(--green-800); border-radius: 8px; padding: 9px 12px;
  font-size: 13px; margin-bottom: 13px; }
.auth-links { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12.5px; }
.auth-links a { color: var(--text-muted); cursor: pointer; text-decoration: none; }
.auth-links a:hover { color: var(--green-700); }
.auth-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--text-muted); margin: 8px 0 2px; }
.auth-consent input { margin-top: 2px; }

/* ── Paywall / gates ── */
.gate-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(13, 33, 28, 0.55);
  backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; }
.gate-card { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg);
  max-width: 460px; width: 92%; padding: 32px; text-align: center; }
.gate-card h2 { margin: 0 0 8px; font-size: 20px; color: var(--text-strong); }
.gate-card p { margin: 0 0 20px; font-size: 14px; color: var(--text-muted); line-height: 1.55; }

/* ── Plan-selection gate ── */
.plan-wrap { align-items: flex-start; padding-top: 7vh; }
.plan-card { max-width: 500px; text-align: left; }
.plan-card h2 { font-size: 24px; text-align: center; margin: 0 0 8px; color: var(--text-strong); }
.plan-brand { justify-content: center; margin-bottom: 22px; }
/* Plan card is the first thing a new signup sees — give the brand more presence than
   the compact auth-card lockup. */
.plan-brand .brand-mark { width: 46px; height: 46px; }
.plan-brand .brand-word { font-size: 27px; letter-spacing: -0.4px; }
.plan-kicker { text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--green-700); margin-bottom: 10px; }
.plan-toggle { display: flex; justify-content: center; gap: 0; margin: 4px 0 10px;
  background: var(--green-50); border-radius: 999px; padding: 4px; width: max-content;
  margin-left: auto; margin-right: auto; }
.pt-btn { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-muted); padding: 7px 18px; border-radius: 999px; cursor: pointer; }
.pt-btn.on { background: var(--surface); color: var(--text-strong); box-shadow: 0 1px 3px rgba(13,33,28,0.18); }
.pt-save { display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 999px;
  background: var(--green-100); color: var(--green-800); font-size: 11px; font-weight: 800; }
.plan-price { text-align: center; font-size: 38px; font-weight: 800; color: var(--text-strong);
  margin: 6px 0 2px; line-height: 1.1; }
.plan-per { font-size: 15px; font-weight: 600; color: var(--text-muted); margin-left: 4px; }
.plan-eq { text-align: center; font-size: 12.5px; color: var(--green-700); font-weight: 600; margin-bottom: 2px; }
.plan-note { background: var(--amber-100); color: #8a6420; font-size: 12.5px; border-radius: 9px;
  padding: 9px 13px; margin: 0 0 14px; line-height: 1.45; }
.plan-note a { color: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.plan-fine { margin-top: 11px; font-size: 11.5px; color: var(--text-muted); text-align: center; line-height: 1.5; }
.plan-fine a { color: inherit; text-decoration: underline; }
.auth-fine { margin-top: 10px; font-size: 11.5px; color: var(--text-muted); text-align: center; line-height: 1.5; }
.auth-fine a { color: inherit; text-decoration: underline; }
.plan-benefits { list-style: none; margin: 18px 0 22px; padding: 0; }
.plan-benefits li { position: relative; padding: 7px 0 7px 30px; font-size: 14px;
  color: var(--text-strong); line-height: 1.45; }
.plan-benefits li + li { border-top: 1px solid var(--green-50); }
.plan-benefits li::before { content: "\2713"; position: absolute; left: 2px; top: 6px;
  width: 19px; height: 19px; border-radius: 999px; background: var(--green-100);
  color: var(--green-800); font-size: 12px; font-weight: 800; display: inline-flex;
  align-items: center; justify-content: center; }
.plan-card .auth-btn { width: 100%; }

/* ── Verify banner ── */
.verify-banner { background: var(--amber-100); color: #8a6420; font-size: 13px; padding: 8px 18px;
  display: flex; align-items: center; gap: 10px; justify-content: center; }
.verify-banner button { border: 0; background: none; color: #8a6420; font-weight: 700; cursor: pointer; text-decoration: underline; font: inherit; }

/* ── Score badge / status pills ── */
.score-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; }
.score-badge.good { background: var(--green-100); color: var(--green-800); }
.score-badge.warn { background: var(--amber-100); color: #8a6420; }
.score-badge.bad  { background: var(--red-100); color: var(--red-500); }
.seq-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.seq-pill.approved { background: var(--green-100); color: var(--green-800); }
.seq-pill.below { background: var(--amber-100); color: #8a6420; }
.seq-pill.failed { background: var(--red-100); color: var(--red-500); }
.seq-pill.none { background: var(--c-task-bg); color: var(--text-muted); }
.seq-pill.pending { background: var(--blue-100); color: var(--blue-500); }

/* ── Strategy editor ── */
.strategy-list { display: flex; flex-direction: column; gap: 10px; }
.strategy-card { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.strategy-card > .sc-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; }
.sc-head .step-circle { flex: none; }
.sc-head b { font-size: 13.5px; color: var(--text-strong); }
.sc-head .sc-sub { font-size: 12px; color: var(--text-muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-head .caret { width: 15px; height: 15px; stroke: var(--text-muted); fill: none; stroke-width: 2; transition: transform .15s; }
.strategy-card.open .sc-head .caret { transform: rotate(180deg); }
.strategy-card .sc-body { display: none; padding: 2px 14px 14px; border-top: 1px solid var(--border); }
.strategy-card.open .sc-body { display: block; }
.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.sc-field label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .4px; }
.sc-field input, .sc-field textarea, .sc-field select { width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: 7px; font: inherit; font-size: 13px; }
.sc-field textarea { min-height: 58px; resize: vertical; }
.sc-field.full { grid-column: 1 / -1; }
.preview-box { border: 1px dashed var(--border-strong); border-radius: 10px; padding: 14px 16px; background: var(--green-50); margin-top: 12px; }
.preview-box .pv-subject { font-weight: 700; font-size: 14px; color: var(--text-strong); margin-bottom: 6px; }
.preview-box .pv-body { font-size: 13px; white-space: pre-wrap; color: var(--text); line-height: 1.55; }
.preview-box .pv-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 8px; }

/* ── Analytics extras ── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.kpi-card .kpi-label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.kpi-card .kpi-value { font-size: 26px; font-weight: 800; color: var(--text-strong); margin-top: 4px; letter-spacing: -0.5px; }
.kpi-card .kpi-hint { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.dist-row { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding: 8px 0 0; }
.dist-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.dist-col .bar { width: 100%; border-radius: 5px 5px 0 0; background: var(--green-600); min-height: 3px; }
.dist-col.warn .bar { background: var(--amber-500); }
.dist-col span { font-size: 10.5px; color: var(--text-muted); }

/* ── Calendar day states ── */
.cal-day .cd-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 3px; }
.cd-dot.sent { background: var(--green-600); }
.cd-dot.sched { background: var(--blue-500); }
.cd-dot.fail { background: var(--red-500); }

/* ── Job pill ── */
.job-pill { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 380;
  background: var(--nav-bg); color: #fff; border-radius: 999px; padding: 9px 18px; font-size: 13px;
  display: none; align-items: center; gap: 10px; box-shadow: var(--shadow); }
.job-pill.show { display: inline-flex; }
.job-pill .spin { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: var(--lime);
  border-radius: 50%; animation: jspin .8s linear infinite; }
@keyframes jspin { to { transform: rotate(360deg); } }
.job-pill button { background: none; border: 0; color: var(--lime); font: inherit; font-weight: 700; cursor: pointer; }

/* ── Misc ── */
.empty-note { padding: 28px; text-align: center; color: var(--text-muted); font-size: 13.5px; }
/* Animated green loading state — replaces the stagnant "Loading…" text so it's clear
   something is actually happening. Spinner reuses the job-pill's jspin keyframes. */
.loading-note { display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 28px; color: var(--green-700); font-size: 13.5px; font-weight: 600; }
.loading-note .spin { width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 2px solid var(--green-100); border-top-color: var(--green-500);
  animation: jspin .7s linear infinite; }
.loading-note.inline { padding: 0; justify-content: flex-start; display: inline-flex; }
.linkish { color: var(--green-700); font-weight: 600; cursor: pointer; }
.danger-btn { background: var(--red-100); color: var(--red-500); border: 1px solid #f3c9c0; border-radius: 8px;
  padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.settings-grid { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.settings-nav { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; }
.settings-nav a { padding: 8px 12px; border-radius: 8px; font-size: 13.5px; color: var(--text); cursor: pointer; text-decoration: none; }
.settings-nav a.active { background: var(--green-100); color: var(--green-800); font-weight: 700; }
@media (max-width: 900px) { .settings-grid { grid-template-columns: 1fr; } .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; } }

/* =========================================================
   SalesWind page scaffolding (classes new to this build)
   ========================================================= */

.page-pad { max-width: 1180px; margin: 0 auto; padding: 26px 26px 80px; }
.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.page-head h1 { font-size: 24px; letter-spacing: -0.4px; color: var(--text-strong); margin: 0 0 3px; }
.page-head .muted { margin: 0; }
.page-head .head-actions, .head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.crumbs { font-size: 12.5px; color: var(--text-muted); margin-bottom: 8px; }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--green-700); }
.muted { color: var(--text-muted); }
.muted.sm, .sm.muted, .sm { font-size: 12px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; }
.card-head { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 14px; }
.card-head b { color: var(--text-strong); }
.pad-14 { padding: 14px 16px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 980px) { .two-col { grid-template-columns: 1fr; } }

/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-muted); padding: 10px 14px; border-bottom: 1px solid var(--border); }
.table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); }
.table tr:last-child td { border-bottom: 0; }
.table .rowlink, .rowlink { cursor: pointer; }
.table tr.rowlink:hover td, .table td.rowlink:hover { background: var(--green-50); }
.table td .avatar { vertical-align: middle; margin-right: 7px; }
.ckbox { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; }
.progress { width: 110px; height: 6px; border-radius: 4px; background: var(--border); overflow: hidden; margin-bottom: 3px; }
.progress i { display: block; height: 100%; background: var(--green-600); border-radius: 4px; }

/* Workspace band */
.ws-band { background: linear-gradient(150deg, var(--band-bg-1), var(--band-bg-2)); color: #fff; }
.ws-band-inner { max-width: 1180px; margin: 0 auto; padding: 28px 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ws-hello { display: flex; align-items: center; gap: 14px; }
.ws-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--band-card); color: var(--lime);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; border: 1px solid var(--band-card-border); }
.ws-hello h1 { margin: 0; font-size: 21px; letter-spacing: -0.3px; }
.ws-hello p { margin: 3px 0 0; font-size: 13px; color: var(--band-text-dim); }
.ws-band-actions { margin-left: auto; display: flex; gap: 9px; }
.band-btn { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 9px; padding: 10px 16px;
  background: var(--lime); color: #202052; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.band-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.band-btn.ghost { background: var(--band-card); color: #fff; border: 1px solid var(--band-card-border); }
.band-btn .badge { background: #202052; color: var(--lime); border-radius: 999px; min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; padding: 0 5px; }

.ws-layout { max-width: 1180px; margin: 18px auto 80px; padding: 0 26px; display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
@media (max-width: 1020px) { .ws-layout { grid-template-columns: 1fr; } }
.ws-main {} .ws-rail { position: sticky; top: 70px; }

/* Calendar */
.cal-dow { font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.cal-dow > div { padding: 8px 6px 4px; text-align: center; }
.cal-day .cd-num { font-size: 12.5px; font-weight: 600; color: var(--text); }
.cal-day.today .cd-num { background: var(--green-700); color: #fff; border-radius: 50%; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center; }
.cal-day.selected { outline: 2px solid var(--green-600); outline-offset: -2px; border-radius: 8px; background: var(--green-50); }
.cal-day.pad { pointer-events: none; }
.cal-day .cd-count { display: block; margin-top: 3px; font-size: 10.5px; color: var(--text-muted); }

/* Agenda / feed rows */
.agenda { display: flex; flex-direction: column; }
.agenda-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
.agenda-row:last-child { border-bottom: 0; }
.agenda-row:hover { background: var(--green-50); }
.agenda-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.agenda-main b { font-size: 13.5px; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-main span { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda-time { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.feed-ic { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.feed-ic svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.feed-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.feed-main b { font-size: 12.5px; color: var(--text-strong); }
.feed-main span { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Steps (cadence overview) */
.steps { display: flex; flex-direction: column; }
.step-row { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.step-row:last-child { border-bottom: 0; }
.step-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.step-main b { font-size: 13.5px; color: var(--text-strong); }
.step-main .muted { font-size: 12px; }
.step-metrics { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.step-metrics b { color: var(--text-strong); font-size: 13px; }
.step-metrics .bad b { color: var(--red-500); }

/* Cadence emails browser */
.cad-emails { display: grid; grid-template-columns: 290px 1fr; gap: 14px; align-items: start; }
@media (max-width: 980px) { .cad-emails { grid-template-columns: 1fr; } }
.ce-list { display: flex; flex-direction: column; max-height: 640px; overflow: auto; }
.ce-person { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.ce-person:hover { background: var(--green-50); }
.ce-person.active { background: var(--green-100); }
.ce-detail { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.seq-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.review-note { display: flex; gap: 10px; background: var(--amber-100); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
/* Research-confidence warning. Deliberately red, not the amber the AI review uses — the
   review is informational, this is "stop and check before you send to a real prospect". */
.research-warn { background: var(--red-100); border: 1px solid #f3c9c0; border-radius: 10px;
  padding: 12px 14px; margin-bottom: 12px; }
.research-warn b { font-size: 12.5px; color: var(--red-500); }
.research-warn p { margin: 3px 0 0; font-size: 12.5px; color: #93412f; }
.rw-src { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.rw-src span { font-size: 11.5px; font-weight: 600; color: #93412f; text-transform: uppercase; letter-spacing: .04em; }
.rw-src a { font-size: 12.5px; color: var(--red-500); font-weight: 600; text-decoration: underline; }
.review-note svg { width: 17px; height: 17px; stroke: #8a6420; fill: none; stroke-width: 2; flex: none; margin-top: 2px; }
.review-note b { font-size: 12.5px; color: #8a6420; }
.review-note p { margin: 3px 0 0; font-size: 12.5px; color: #8a6420; white-space: pre-wrap; }
.review-note.bad-note { background: var(--red-100); }
.review-note.bad-note b, .review-note.bad-note p { color: var(--red-500); }
.review-note.bad-note svg { stroke: var(--red-500); }
.email-card { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.email-card.in-list { margin: 12px 16px; }
.ec-head { display: flex; align-items: center; gap: 8px; padding: 10px 13px; background: var(--bg); border-bottom: 1px solid var(--border); }
.ec-head b { font-size: 13px; color: var(--text-strong); }
.ec-subject { padding: 11px 14px 0; font-size: 14px; font-weight: 700; color: var(--text-strong); }
.ec-body { padding: 8px 14px 14px; font-size: 13px; color: var(--text); white-space: pre-wrap; line-height: 1.55; }
.icon-btn.fav svg { fill: var(--amber-500); stroke: var(--amber-500); }

/* Forms */
.form-card .form-grid { padding: 14px 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid input, .form-grid textarea, .form-grid select { width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; font-size: 13.5px; }
.form-grid textarea { min-height: 68px; resize: vertical; }
.toggles { display: flex; flex-wrap: wrap; gap: 14px; }
.save-bar { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.filter-bar select { padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; font-size: 13px; background: var(--surface); }
.search-mini { position: relative; }
.search-mini svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; stroke: var(--text-muted); fill: none; stroke-width: 2; }
.search-mini input { padding: 8px 12px 8px 31px; border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; font-size: 13px; min-width: 240px; background: var(--surface); }

/* Person page */
.person-head { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.ph-main { flex: 1; min-width: 0; }
.ph-main h1 { margin: 0 0 2px; font-size: 21px; letter-spacing: -0.3px; color: var(--text-strong); }
.ph-main p { margin: 2px 0 0; font-size: 13px; }
.note-add { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.note-add textarea { flex: 1; min-height: 44px; padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; font-size: 13px; resize: vertical; }
.note-item { border-top: 1px solid var(--border); padding: 10px 0 4px; }
.note-item p { margin: 0 0 3px; font-size: 13px; white-space: pre-wrap; }
.blk-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin: 12px 0 5px; }
.dotlist { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text); }
.dotlist li { margin-bottom: 4px; }
.co-glyph { display: inline-flex; width: 26px; height: 26px; border-radius: 7px; background: var(--green-100); color: var(--green-800); align-items: center; justify-content: center; vertical-align: middle; margin-right: 6px; }
.co-glyph svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Reference rows / pick lists */
.ref-row { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); }
.ref-row:last-child { border-bottom: 0; }
.ap-list { max-height: 380px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; margin-top: 10px; }
.ap-list.slim { max-height: 180px; margin-top: 6px; }
.ap-list:empty { display: none; }
.ap-row { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13.5px; }
.ap-row:last-child { border-bottom: 0; }
.ap-row:hover { background: var(--green-50); }
.ap-row svg { width: 15px; height: 15px; stroke: var(--text-muted); fill: none; stroke-width: 2; }

/* Composer internals */
.comp-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 8px; }
.comp-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.comp-title b { font-size: 15px; color: var(--text-strong); }
.comp-title .muted { font-size: 12px; }
.comp-nav { display: flex; align-items: center; gap: 5px; }
.comp-meta { display: flex; align-items: center; gap: 9px; padding: 0 16px 10px; flex-wrap: wrap; }
.comp-when-pop { display: flex; gap: 10px; align-items: flex-end; margin: 0 16px 10px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.comp-when-pop label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; }
.comp-when-pop input { padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: 7px; font: inherit; font-size: 13px; }
.comp-subject { margin: 0 16px 8px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; font-size: 14px; font-weight: 600; }
.comp-body { flex: 1; margin: 0 16px; padding: 11px 12px; border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; font-size: 13.5px; line-height: 1.55; resize: none; min-height: 240px; }
.comp-foot { display: flex; align-items: center; gap: 9px; padding: 12px 16px 16px; }

/* Task panel internals */
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.panel-head b { font-size: 15px; color: var(--text-strong); }
.panel-body { flex: 1; overflow: auto; }
.panel-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
.panel-item:hover { background: var(--green-50); }
.panel-foot { padding: 12px 16px; border-top: 1px solid var(--border); }
.panel-foot .btn-primary { width: 100%; }

/* Search results dropdown */
.search-results { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; z-index: 320; }
.search-results.open { display: block; }
.sr-row { display: flex; align-items: center; gap: 9px; padding: 10px 13px; font-size: 13px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }
.sr-row:last-child { border-bottom: 0; }
.sr-row:hover { background: var(--green-50); }
.sr-row svg { width: 14px; height: 14px; stroke: var(--text-muted); fill: none; stroke-width: 2; }
.sr-row .muted { margin-left: auto; font-size: 12px; }
.dropdown-right { left: auto; right: 0; }

/* Modal internals */
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.modal-head b { font-size: 15.5px; color: var(--text-strong); }
.modal-body { padding: 16px 18px; max-height: 64vh; overflow: auto; }
.modal-body .sc-field input, .modal-body .sc-field textarea, .modal-body .sc-field select { width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; font-size: 13.5px; }
.modal-body .sc-field textarea { min-height: 70px; resize: vertical; }
.modal-foot { display: flex; align-items: center; gap: 9px; justify-content: flex-end; padding: 13px 18px; border-top: 1px solid var(--border); background: var(--bg); }

.btn-primary.danger { background: var(--red-500); }
.btn-ghost.danger { color: var(--red-500); }
.preview-slot:empty { display: none; }
.tone-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 720px) { .tone-cards { grid-template-columns: 1fr; } }
.tone-card { border: 1.5px solid var(--border-strong); border-radius: 10px; padding: 12px 13px; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; background: var(--surface); transition: border-color .12s, background .12s; }
.tone-card:hover { border-color: var(--green-600); }
.tone-card.selected { border-color: var(--green-700); background: var(--green-50); box-shadow: 0 0 0 1px var(--green-700) inset; }
.tone-card b { font-size: 13.5px; color: var(--text-strong); }
.tone-card span { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

/* ── Social sign-in buttons ── */
.oauth-sep { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--text-muted); font-size: 12px; }
.oauth-sep::before, .oauth-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.oauth-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface);
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text-strong); cursor: pointer; margin-bottom: 9px; }
.oauth-btn:hover { border-color: var(--text-muted); background: #fafcfb; }

/* ── Real brand: pinwheel mark + SalesWind wordmark ── */
:root { --brand-wind: #8f8fec; }
.brand-mark { width: 28px; height: 28px; flex-shrink: 0; display: block; }
.topnav-brand { gap: 9px; }
.topnav-brand .brand-word { color: #fff; font-weight: 700; font-size: 18px; letter-spacing: -0.2px; line-height: 1; }
.topnav-brand .brand-word span { font-weight: 500; color: var(--brand-wind); }
.auth-brand .brand-mark { width: 38px; height: 38px; }
.auth-brand .brand-word { font-size: 19px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.2px; }
.auth-brand .brand-word span { font-weight: 500; color: var(--brand-wind); }

/* ── Band action buttons + profile view rows ── */
.band-actions { display: flex; gap: 8px; margin-top: 12px; }
.band-card .band-btn { padding: 7px 12px; font-size: 12.5px; }
.pv-rows .pv-row { padding: 13px 20px; border-top: 1px solid var(--border); }
.pv-rows .pv-row:first-child { border-top: 0; }
.pv-row .pv-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 5px; }
.pv-row .pv-t { font-size: 13.5px; color: var(--text); line-height: 1.6; white-space: pre-wrap; }
.pv-cols3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.pv-cols3 .pv-row { border-top: 0; border-left: 1px solid var(--border); }
.pv-cols3 .pv-row:first-child { border-left: 0; }
@media (max-width: 720px) { .pv-cols3 { grid-template-columns: 1fr; } .pv-cols3 .pv-row { border-left: 0; border-top: 1px solid var(--border); } .pv-cols3 .pv-row:first-child { border-top: 0; } }

/* ═══════════════════ v3.1 — tables, person page, email detail, activity ═══════════════════ */

/* ── Sortable headers + numeric alignment ── */
.table-wrap { overflow-x: auto; }
.table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.table th.sortable:hover { color: var(--text); }
.table th.sortable .s-arrow { display: inline-block; width: 12px; margin-left: 3px; font-size: 9px; color: var(--green-700); }
.table th.on { color: var(--text); }
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table th.ck, .table td.ck { width: 34px; }
.co-glyph { display: inline-flex; width: 26px; height: 26px; border-radius: 7px; background: var(--green-100); color: var(--green-700); align-items: center; justify-content: center; vertical-align: middle; margin-right: 6px; }
.co-glyph svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ── Pagination bar ── */
.pager { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.pg-per { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.pg-per select { padding: 4px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); font: inherit; font-size: 12px; color: var(--text); }
.pg-info { font-size: 12px; color: var(--text-muted); margin-left: 8px; }
.pg-btn { min-width: 28px; height: 28px; padding: 0 7px; border: 1px solid var(--border); background: var(--surface); border-radius: 7px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; }
.pg-btn:hover:not(:disabled) { border-color: var(--green-600); color: var(--green-800); }
.pg-btn.on { background: var(--green-700); border-color: var(--green-700); color: #fff; cursor: default; }
.pg-btn:disabled { opacity: 0.4; cursor: default; }
.pg-ellipsis { color: var(--text-muted); padding: 0 2px; font-size: 12px; }

/* ── Small pills/chips used inside tight rows ── */
.seq-pill.sm { padding: 1px 7px; font-size: 10px; }
.chip.sm { padding: 1px 7px; font-size: 10.5px; }
.chip.sm svg { width: 11px; height: 11px; vertical-align: -1.5px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ── Person page grid ── */
.person-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1200px) { .person-grid { grid-template-columns: 270px minmax(0, 1fr); } .p-right { grid-column: 1 / -1; } }
@media (max-width: 860px) { .person-grid { grid-template-columns: 1fr; } }
.p-left, .p-right { display: flex; flex-direction: column; gap: 14px; }

.id-card { padding: 16px; }
.idc-top { display: flex; gap: 12px; align-items: center; }
.idc-top h1 { font-size: 18px; font-weight: 800; margin: 0 0 2px; letter-spacing: -0.2px; }
.idc-rows { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.idc-row { display: flex; gap: 9px; align-items: center; font-size: 13px; color: var(--text); min-width: 0; }
.idc-row > svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: var(--text-muted); stroke-width: 1.8; }
.idc-row span, .idc-row a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idc-actions { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }

.stats-card .stats-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
.stats-mini > div { background: var(--surface); padding: 12px 14px; }
.stats-mini b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }
.stats-mini span { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }

.p-center { min-width: 0; }
.ptabs { display: flex; gap: 2px; padding: 6px 10px 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
.ptab { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 9px 12px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ptab:hover { color: var(--text); }
.ptab.active { color: var(--green-800); border-bottom-color: var(--green-700); }
.pbody { padding: 14px; }
.pb-sec { margin-bottom: 20px; }
.pb-sec:last-child { margin-bottom: 4px; }
.pb-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 9px; }
.research-p { font-size: 13.5px; line-height: 1.65; color: var(--text); white-space: pre-wrap; margin: 0; }

.cadp-row { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-top: 1px solid var(--border); }
.cadp-row .agenda-main { min-width: 0; }

/* ── Sequence email accordion ── */
.em-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.em-acc { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.em-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px; cursor: pointer; min-width: 0; }
.em-head:hover { background: var(--green-50); }
.em-head > * { pointer-events: none; }
.em-head .em-n { flex: 0 0 auto; font-size: 13px; }
.em-head .em-subj { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-muted); }
.em-head .caret { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: var(--text-muted); stroke-width: 2; transition: transform 0.16s ease; }
.em-acc.open .em-head .caret { transform: rotate(180deg); }
.em-acc .em-body { display: none; padding: 4px 14px 13px; border-top: 1px solid var(--border); }
.em-acc.open .em-body { display: block; }
.em-body .ec-subject { margin-top: 9px; }
.em-actions { display: flex; align-items: center; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.fav-dot { display: inline-flex; color: var(--amber-600, #d97706); flex: 0 0 auto; }
.fav-dot svg { width: 13px; height: 13px; fill: currentColor; stroke: currentColor; }

/* ── Collapsible AI review ── */
.review-note.collapsible { display: block; padding: 0; }
.review-note.collapsible .rn-toggle { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; font: inherit; font-size: 13px; color: var(--text); padding: 10px 12px; cursor: pointer; text-align: left; }
.review-note.collapsible .rn-toggle svg.caret { width: 13px; height: 13px; margin-left: auto; fill: none; stroke: var(--text-muted); stroke-width: 2; transition: transform 0.16s ease; }
.review-note.collapsible.open .rn-toggle svg.caret { transform: rotate(180deg); }
.review-note.collapsible .rn-body { display: none; padding: 0 14px 12px; }
.review-note.collapsible.open .rn-body { display: block; }
.review-note.collapsible .rn-body p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text); }

/* ── Email detail page ── */
.ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 960px) { .ed-grid { grid-template-columns: 1fr; } }
.ed-grid > div, .ed-grid > aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ed-head { padding: 16px; }
.ed-title { display: flex; align-items: flex-start; gap: 10px; }
.ed-title h1 { font-size: 19px; font-weight: 800; letter-spacing: -0.2px; margin: 0; flex: 1; min-width: 0; }
.ed-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; }
.ed-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ec-body.big { font-size: 14px; line-height: 1.7; }
.opens-list { max-height: 420px; overflow-y: auto; }
.open-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border); }
.open-row:first-child { border-top: 0; }
.warn-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px; border-radius: 9px; background: var(--red-50, #fef2f2); color: var(--red-700, #b91c1c); font-size: 13px; }
.warn-note svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ── Chip buttons (cadence switcher on person page) ── */
.chip-btn { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.chip-btn:hover { border-color: var(--green-600); }
.chip-btn.on { background: var(--green-700); border-color: var(--green-700); color: #fff; }

/* ── Create-cadence source picker ── */
.cc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 760px) { .cc-grid { grid-template-columns: 1fr; } }
.src-cards { display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; padding-right: 2px; }
.src-card { border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; background: var(--surface); }
.src-card:hover { border-color: var(--green-600); }
.src-card.selected { border-color: var(--green-700); background: var(--green-50); }
.src-card b { display: block; font-size: 13px; }
.src-card span { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.src-preview { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; max-height: 240px; overflow-y: auto; }
.pv-step { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-top: 1px solid var(--border); }
.pv-step:first-child { border-top: 0; }

/* ── Inherited / overridden tags on strategy cards ── */
.tag-inh, .tag-ov { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.tag-inh { background: var(--green-100); color: var(--green-800); }
.tag-ov { background: var(--amber-100, #fef3c7); color: var(--amber-700, #b45309); }

/* ── Version history modal ── */
.ver-row { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--surface); }
.ver-row.on { border-color: var(--green-700); background: var(--green-50); }
.ver-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; flex-wrap: wrap; }
.ec-body.clamp { max-height: 130px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }

/* ═══════════════════ v3.2 — fixed tables, resizing, tags, activity tabs, person v3 ═══════════════════ */

/* ── Fixed-layout tables: long values truncate with ellipsis instead of blowing out columns ── */
.table.fixed { table-layout: fixed; }
.table.fixed td.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table.fixed td.ell .muted.sm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Draggable column resize handles ── */
.table th { position: relative; }
.th-rs { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 2; }
.th-rs::after { content: ""; position: absolute; top: 22%; bottom: 22%; right: 4px; width: 1px; background: var(--border); }
.th-rs:hover::after, body.col-resizing .th-rs::after { background: var(--green-600); width: 2px; }
body.col-resizing { cursor: col-resize; user-select: none; }

/* ── Dark band charts: value labels above bars ── */
.band-axis.strong { font-size: 9px; font-weight: 700; fill: var(--cream); }

/* ── Activity page tabs (workspace tab styling, standalone placement) ── */
.act-tabs { max-width: none; margin: 2px 0 0; padding: 0 0 0 2px; border-bottom: 2px solid var(--green-500); }
.act-tabs .ws-tab { cursor: pointer; font: inherit; }
.act-tabs + .filter-bar { margin-top: 14px; }
.date-f { display: flex; align-items: center; gap: 6px; }
.date-f input { padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: inherit; font-size: 12.5px; color: var(--text); }

/* ── Person tags ── */
.idc-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border); }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--green-100); color: var(--green-800); border-radius: 999px; padding: 3px 6px 3px 10px; font-size: 12px; font-weight: 600; }
.tag-x { border: 0; background: none; color: var(--green-800); font-size: 13px; line-height: 1; cursor: pointer; padding: 1px 4px; border-radius: 999px; opacity: 0.65; }
.tag-x:hover { opacity: 1; background: rgba(0,0,0,0.06); }
.idc-tags input { flex: 1; min-width: 64px; border: 1px dashed var(--border); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; background: transparent; color: var(--text); }
.idc-tags input:focus { outline: none; border-color: var(--green-600); border-style: solid; }

/* ── Person page: collapsed sequence rows ── */
.seq-item { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); margin-bottom: 8px; overflow: hidden; }
.seq-item-head { display: flex; align-items: center; gap: 10px; padding: 11px 13px; cursor: pointer; }
.seq-item-head:hover { background: var(--green-50); }
.seq-item-head > * { pointer-events: none; }
.seq-item-head .caret { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: var(--text-muted); stroke-width: 2; transition: transform 0.16s ease; }
.seq-item.open .seq-item-head .caret { transform: rotate(180deg); }
.seq-item-body { display: none; padding: 4px 13px 13px; border-top: 1px solid var(--border); }
.seq-item.open .seq-item-body { display: block; }

/* ── Card footers + view-all links + right-rail sent rows ── */
.card-foot { padding: 9px 14px; border-top: 1px solid var(--border); }
.viewall { font-size: 12.5px; font-weight: 600; }
.em-subj-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.p-right .agenda-row { padding: 10px 14px; border-top: 1px solid var(--border); }
.p-right .agenda-row:first-of-type { border-top: 0; }

/* ── v3.3: column picker + header drag-reorder ── */
.col-picker { position: relative; }
.col-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 70;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(10, 30, 20, 0.14); padding: 10px 12px; min-width: 195px; }
.col-picker.open .col-menu { display: block; }
.col-menu-title { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.col-item { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 2px; cursor: pointer; white-space: nowrap; color: var(--text); }
.col-item input { accent-color: var(--green-700); }
.col-reset { margin-top: 8px; width: 100%; }
th[data-col] { cursor: grab; }
th[data-col].sortable { cursor: pointer; }
th.col-dragging { opacity: 0.45; }
th.col-drop-hint { background: var(--green-100); box-shadow: inset 3px 0 0 var(--green-600); }

/* ── v3.3.1: charts opt out of the global icon stroke (svg { stroke: currentColor }).
   Without this, chart text/bars/dots inherit a 1.8px outline — the "bubble text" bug. ── */
svg.cx { stroke: none; stroke-width: 0; }
svg.cx text { stroke: none; paint-order: fill; }

/* ── People table: bigger, vertically-centered names ── */
.name-cell .nm-wrap { display: flex; align-items: center; gap: 9px; min-height: 34px; }
.name-cell .nm-wrap .avatar { margin-right: 0; flex: 0 0 auto; }
.name-cell b { font-size: 14.5px; font-weight: 650; letter-spacing: -0.1px; color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Two-line name cells (e.g. Team: name over email) — the stack centers as one unit. */
.name-cell .nm-stack { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.name-cell .nm-stack .muted { font-size: 12px; }

/* ── Checkbox + Name columns stay pinned while the People table scrolls sideways ── */
.table.fixed th.ck, .table.fixed td.ck { position: sticky; left: 0; z-index: 3; background: var(--surface); }
.table.fixed th.sticky-col, .table.fixed td.name-cell { position: sticky; left: 34px; z-index: 2; background: #fafbfa;
  box-shadow: 6px 0 8px -6px rgba(18, 18, 40, 0.10); }
.table.fixed thead th.ck, .table.fixed thead th.sticky-col { z-index: 4; }
.table.fixed td.name-cell:hover { background: var(--green-50); }

/* ── Zebra columns: every other column carries a whisper of shade for scannability ── */
.table th:nth-child(even), .table td:nth-child(even) { background: rgba(18, 18, 40, 0.022); }
.table tbody tr:hover td { background: transparent; }  /* row hover reads evenly through the zebra */

/* ── Schedule modal: same-company concentration warning ── */
/* Schedule-sends modal: option radios/checkbox rows + send-order drag list */
.radio-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; cursor: pointer;
  font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text); }
.radio-row input { accent-color: var(--green-700); width: 14px; height: 14px; margin: 0; flex: 0 0 auto; }
.so-list { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; }
.so-row { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-bottom: 1px solid var(--border);
  font-size: 13px; background: #fff; }
.so-row:last-child { border-bottom: 0; }
.so-row.dragging { opacity: .45; }
.so-row.drag-over { box-shadow: inset 0 2px 0 var(--green-600); }
.so-row .so-grip { cursor: grab; color: var(--text-muted); display: inline-flex; }
.so-row .so-grip svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.so-row.locked { background: var(--green-50); color: var(--text-muted); }
.so-row .so-when { margin-left: auto; color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.so-row .icon-btn svg { width: 13px; height: 13px; }

.sched-warn { display: flex; gap: 9px; align-items: flex-start; margin-top: 10px;
  background: var(--amber-100); color: #8a6420; border: 1px solid rgba(138, 100, 32, 0.25);
  border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.45; }
.sched-warn svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }

/* ── In-place navigation: the old page stays put while the next route's data loads.
   pointer-events locks stale UI instantly; the dim only fades in after a delay, so
   fast swaps (the normal case) show no visual change at all — zero flash. ── */
#page { transition: opacity .12s ease; }
#page.page-loading { pointer-events: none; opacity: .55; transition-delay: .18s; }

/* ── CSV import dropzone ── */
.dropzone { border: 1.5px dashed var(--border-strong); border-radius: 12px; padding: 26px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  cursor: pointer; color: var(--text); background: var(--bg); transition: border-color .15s, background .15s; }
.dropzone svg { width: 22px; height: 22px; color: var(--green-700); }
.dropzone b { font-size: 14px; color: var(--text-strong); }
.dropzone.drag { border-color: var(--green-500); background: var(--green-50); }
.dropzone.has-file { border-style: solid; border-color: var(--green-500); background: var(--green-50); }
.dropzone .dz-file { font-size: 12.5px; font-weight: 700; color: var(--green-800); }
.dropzone .dz-file:empty { display: none; }

/* ── Generation progress banner (same family as the verify-email banner) ── */
.job-banner { background: var(--amber-100); color: #8a6420; font-size: 13px; padding: 8px 18px;
  display: flex; align-items: center; gap: 12px; justify-content: center; }
.job-banner .jb-text { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-banner .jb-track { flex: 0 1 260px; min-width: 120px; height: 6px; border-radius: 999px;
  background: rgba(138, 100, 32, 0.18); overflow: hidden; }
.job-banner .jb-track i { display: block; height: 100%; border-radius: 999px; background: #8a6420;
  transition: width .5s ease; }
.job-banner .jb-spin { width: 13px; height: 13px; flex: 0 0 auto; border: 2px solid rgba(138, 100, 32, 0.25);
  border-top-color: #8a6420; border-radius: 50%; animation: jspin .8s linear infinite; }
.job-banner .jb-stop { flex: 0 0 auto; color: #8a6420; border: 1px solid rgba(138, 100, 32, 0.4);
  background: transparent; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.job-banner .jb-stop:hover:not(:disabled) { background: rgba(138, 100, 32, 0.12); }
.job-banner .jb-stop:disabled { opacity: .6; cursor: default; }

/* ── Assistant (workspace copilot) ──
   Layers: above the composer (85), below modals (100) so dialogs still win. */
.asst-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 95;
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(145deg, var(--band-bg-1), var(--band-bg-2));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s, box-shadow 0.12s;
}
.asst-fab:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.asst-fab.active { transform: none; }
.asst-fab svg { width: 24px; height: 24px; fill: var(--lime); stroke: none; }
body.has-panel .asst-fab, body.has-panel .asst-panel { right: 376px; }

.asst-panel {
  position: fixed; right: 20px; bottom: 84px; z-index: 95;
  width: 400px; max-width: calc(100vw - 32px);
  height: min(620px, calc(100vh - 120px));
  display: none; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.asst-panel.open { display: flex; }

.asst-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: linear-gradient(135deg, var(--band-bg-1), var(--band-bg-2)); color: #fff;
}
.asst-head-ic { display: flex; }
.asst-head-ic svg { width: 20px; height: 20px; fill: var(--lime); stroke: none; }
.asst-head-t { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.asst-head-t strong { font-size: 14px; }
.asst-head-t span { font-size: 11.5px; color: var(--band-text-dim); }
.asst-x { background: none; border: 0; color: rgba(255, 255, 255, 0.7); display: flex; padding: 4px; }
.asst-x:hover { color: #fff; }
.asst-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.asst-body {
  flex: 1; overflow-y: auto; padding: 14px 12px; background: var(--bg);
  display: flex; flex-direction: column; gap: 10px;
}
.asst-msg { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; }
.asst-msg.user { align-self: flex-end; background: var(--green-700); color: #fff;
  border-bottom-right-radius: 4px; white-space: pre-wrap; }
.asst-msg.bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--border);
  border-bottom-left-radius: 4px; color: var(--text-strong); }
.asst-msg.bot p { margin: 0 0 6px; }
.asst-msg.bot p:last-child { margin-bottom: 0; }
.asst-msg.bot ul { margin: 4px 0 6px; padding-left: 18px; }
.asst-msg.bot ul:last-child { margin-bottom: 0; }
.asst-msg.bot li { margin: 2.5px 0; }
.asst-msg.bot code { background: var(--green-50); border: 1px solid var(--green-100);
  padding: 0 4px; border-radius: 4px; font-size: 12.5px; }
.asst-msg.bot strong { color: var(--text-strong); }

.asst-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.asst-chip, .asst-sugg {
  display: inline-block; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-strong); border-radius: 999px; padding: 5px 11px;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.asst-chip:hover, .asst-sugg:hover { border-color: var(--green-600); color: var(--green-700); }
.asst-suggs { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.asst-sugg { text-align: left; }

.asst-msg.typing { display: flex; gap: 4px; padding: 13px 14px; }
.asst-msg.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
  animation: asstBlink 1.1s infinite; }
.asst-msg.typing span:nth-child(2) { animation-delay: 0.18s; }
.asst-msg.typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes asstBlink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

.asst-card { align-self: stretch; background: var(--surface); border: 1px solid var(--green-100);
  border-left: 3px solid var(--green-600); border-radius: 10px; padding: 11px 12px;
  box-shadow: var(--shadow-sm); }
.asst-card.done { border-left-color: var(--green-500); }
.asst-card-title { font-weight: 700; font-size: 13.5px; color: var(--text-strong); }
.asst-card-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.asst-card-list { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text); }
.asst-card-list li { margin: 2px 0; }
.asst-dim { color: var(--text-muted); font-weight: 400; font-size: 12px; margin-top: 4px; }
.asst-card-note { margin-top: 8px; font-size: 12px; background: var(--amber-100); color: #8a6420;
  border-radius: 6px; padding: 5px 8px; }
.asst-card-btns { display: flex; gap: 8px; margin-top: 10px; }

.asst-foot { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border);
  background: var(--surface); }
.asst-foot input { flex: 1; border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 9px 12px; font-size: 13.5px; font-family: inherit; }
.asst-foot input:focus { outline: none; border-color: var(--green-600); }
.asst-send { width: 38px; height: 38px; flex: 0 0 auto; border: 0; border-radius: 10px;
  background: var(--green-600); color: #fff; display: flex; align-items: center; justify-content: center; }
.asst-send:hover { background: var(--green-700); }
.asst-send svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 640px) {
  .asst-fab { right: 16px; bottom: 16px; }
  .asst-panel { right: 0; bottom: 0; width: 100vw; max-width: 100vw;
    height: min(80vh, 640px); border-radius: 14px 14px 0 0; }
  body.has-panel .asst-fab { right: 16px; }
  body.has-panel .asst-panel { right: 0; }
}
/* ── Repeat-open badge + compact feed icon (activity table & live feed) ──
   record_open() writes one activity on the FIRST open and increments open_count
   thereafter, so a repeat open shows as a count on the existing row rather than
   another near-identical entry in the feed. */
.open-badge {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 17px;
  color: var(--c-open); background: var(--c-open-bg); vertical-align: middle;
}
.feed-ic.sm { width: 20px; height: 20px; border-radius: 6px; }
.feed-ic.sm svg { width: 11px; height: 11px; }
/* The contact_edited diff now lives in a table row spanning every column. */
.feed-detail-row > td { padding: 8px 12px 12px; background: var(--surface-2, rgba(0,0,0,.02)); }

/* ── Analytics: period filter + engagement lists ────────────────────────────
   Opens are counted from tracking_events, which has one row per pixel hit, so
   these figures are for the selected bucket rather than all-time running totals. */
.seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--surface-2, rgba(0,0,0,.04)); }
.seg-btn {
  border: 0; background: transparent; cursor: pointer;
  padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500;
  color: var(--text-muted); white-space: nowrap;
}
.seg-btn:hover { color: var(--text-strong); }
.seg-btn.on { background: var(--surface, #fff); color: var(--text-strong); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.eng-list { display: flex; flex-direction: column; gap: 2px; }
.eng-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-radius: 6px; }
.eng-row.rowlink { cursor: pointer; }
.eng-row.rowlink:hover { background: var(--surface-2, rgba(0,0,0,.03)); }
.eng-main { flex: 1; min-width: 0; }
.eng-name { font-size: 13px; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eng-sub { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Bar is proportional to the top row, so the list reads as a ranking at a glance. */
.eng-bar-wrap { width: 84px; height: 6px; border-radius: 999px; background: var(--surface-2, rgba(0,0,0,.06)); flex: none; overflow: hidden; }
.eng-bar { height: 100%; border-radius: 999px; background: var(--c-open, #16a34a); min-width: 3px; }
.eng-count { width: 34px; text-align: right; font-size: 13px; font-weight: 700; color: var(--c-open, #16a34a); flex: none; }
/* ── People: per-column filter builder ──────────────────────────────────────
   Column keys mirror database.py's CONTACT_FILTER_COLS, which is the whitelist the
   server validates against — anything else is dropped there rather than reaching SQL. */
.filt-wrap { position: relative; display: inline-block; }
.filt-badge {
  display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 4px;
  border-radius: 999px; background: var(--accent, #4361ee); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center;
}
.filt-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 430px; padding: 10px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface, #fff);
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
}
.filt-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.filt-row select, .filt-row input { height: 30px; font-size: 12.5px; }
.filt-col { flex: 0 0 140px; }
.filt-op  { flex: 0 0 132px; }
.filt-val { flex: 1; min-width: 80px; }
.filt-val-none { flex: 1; }
.filt-x { flex: none; padding: 0 8px; font-size: 15px; line-height: 1; color: var(--text-muted); }
.filt-x:hover { color: var(--c-failed, #dc2626); }
.filt-foot { display: flex; align-items: center; gap: 6px; padding-top: 6px; border-top: 1px solid var(--border); }