/* ============================================================
   PULSE-THEME27-V2 — "The Framed Instrument"
   THESIS: a CRM read for eight hours is an instrument: matte, evenly lit,
   quiet at rest, and it shows emotion only through motion. It refuses the
   category default of a card for everything and a purple on everything.
   OWN-WORLD: cool grey canvas, white hairline panels, three inks, pill
   controls, Geist at a fixed scale; every panel wears a thin double FRAME
   ring (hairline / sunken band / hairline, the reference's Frame+FramePanel)
   and overlays a wider one; the Pulse gradient marks the one primary action, the current
   selection and the active nav item; the segmented pill slides on a spring.
   STORY: nothing moved, everything reads faster; the user trusts numbers
   because the surface is calm around them.
   FIRST VIEWPORT: dark neutral sidebar left, title + one gradient action top
   right, a segmented control, then panels with hairlines and tabular data.
   FORM: pinned by the brief (Affan's reference component); no roll.
   REVERSIBLE: every rule gated on html.t27 (ui_theme setting). Base
   style.css untouched. Fallbacks: cubic-bezier for linear(), print reset.
   ============================================================ */

/* ── 1. Tokens ─────────────────────────────────────────────── */
html.t27 {
  --bg: #F6F6F8;
  --surface: #FFFFFF;
  --surface-2: #F6F6F8;
  --border: #DCDDE3;
  --frame: #F2F2F2;
  --text: #17171C;
  --ink-2: #2F3140;   /* LIGHT-INK-V1: was #4B4D5A */
  --ink-3: #454757;   /* LIGHT-INK-V1: was #666876 */
  --border-strong: #D6D7DE;
  --muted: #2F3140;   /* LIGHT-INK-V1 */
  --primary: #4338CA;
  --primary-2: #6366F1;
  --primary-hover: #3730A3;
  --primary-soft: #EEEEFC;
  --primary-ring: rgba(99, 102, 241, .18);
  --t27-grad: linear-gradient(135deg, #4338CA 0%, #6366F1 55%, #8B5CF6 100%);
  --success: #0F7B4F; --danger: #B42318; --warning: #B45309;
  --r-card: 16px; --r-panel: 20px; --r-overlay: 24px; --r-field: 12px; --r-row: 10px;
  --sh-panel: 0 1px 2px rgba(23, 23, 28, .04), 0 8px 24px -16px rgba(23, 23, 28, .12);
  --ring-frame: 0 0 0 6px var(--frame), 0 0 0 7px rgba(23, 23, 28, .05);
  --ring-overlay: 0 0 0 10px var(--frame), 0 0 0 11px rgba(23, 23, 28, .06);
  --sh-lift: 0 6px 18px -10px rgba(23, 23, 28, .18);
  --sh-overlay: 0 0 0 10px var(--frame), 0 0 0 11px rgba(23, 23, 28, .06), 0 30px 80px -30px rgba(23, 23, 28, .35);
  --sh-accent: 0 8px 20px -12px rgba(99, 102, 241, .6);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(.34, 1.25, .64, 1);
  --spring-snap: cubic-bezier(.3, 1.4, .5, 1);
  --sidebar-top: #111114; --sidebar-bot: #111114; --sidebar-text: #B6B7C2;
  --shadow: var(--sh-panel);
}
@supports (animation-timing-function: linear(0, 1)) {
  html.t27 {
    --spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
                     0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
    --spring-snap: linear(0, 0.216 5.4%, 0.574 12.4%, 0.845 20%, 1.012 28.3%, 1.077 37.7%, 1.06 45%,
                          1.023 55.4%, 0.996 66.9%, 0.992 78.3%, 1);
  }
}
html.t27[data-theme="dark"] {
  --bg: #0B0B0D;
  --surface: #131313;
  --surface-2: #1B1B1B;
  --border: rgba(255, 255, 255, .09);
  --frame: #232323;
  --text: #ECECF1;
  --ink-2: #A3A4AF;
  --ink-3: #8A8B95;
  --border-strong: rgba(255, 255, 255, .18);
  --muted: #A3A4AF;
  --primary-soft: rgba(99, 102, 241, .16);
  --primary-ring: rgba(129, 140, 248, .28);
  --sh-panel: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -16px rgba(0, 0, 0, .8);
  --sh-lift: 0 6px 18px -10px rgba(0, 0, 0, .8);
  --sh-overlay: 0 0 0 10px var(--frame), 0 0 0 11px rgba(0, 0, 0, .6), 0 30px 80px -30px rgba(0, 0, 0, .9);
}

/* ── 2. Type: one family, fixed roles, three inks ─────────── */
html.t27 body, html.t27 input, html.t27 select, html.t27 textarea, html.t27 button, html.t27 .btn {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html.t27 body { background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html.t27 .page-head h1, html.t27 h1, html.t27 .kpi-value, html.t27 .card-head h2 { font-feature-settings: "ss01", "cv11"; }
html.t27 .main { padding: 28px 32px; }
html.t27 .page-head { margin-bottom: 24px; align-items: center; }
html.t27 .page-head h1, html.t27 h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); margin: 0 0 4px; }
html.t27 h2 { font-weight: 600; letter-spacing: -0.01em; }
html.t27 h3 { font-weight: 600; }
html.t27 .card-head h2, html.t27 .card-head h3, html.t27 .card > h2, html.t27 .card > h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
html.t27 .page-head .muted, html.t27 .page-head p { color: var(--ink-2); font-size: 14px; margin: 0; }
html.t27 .muted { color: var(--ink-2); }
html.t27 .muted.small, html.t27 small, html.t27 .small { color: var(--ink-3); font-size: 12.5px; }
html.t27 .crumbs { font-size: 12.5px; color: var(--ink-3); text-transform: none; letter-spacing: 0; font-weight: 500; }
html.t27 .crumbs a { color: var(--ink-3); }
html.t27 .crumbs a:hover { color: var(--text); }
/* labels: sentence case, medium, secondary ink */
html.t27 label, html.t27 .form-card label, html.t27 .form-label, html.t27 .field-label {
  font-size: 12.5px; font-weight: 500; color: var(--ink-2); text-transform: none; letter-spacing: 0;
}
/* links inside content are ink; the accent is for actions */
html.t27 .table a:not(.btn), html.t27 .card a:not(.btn):not(.cb-link):not(.pill), html.t27 .contact-name a {
  color: var(--text); font-weight: 500; text-decoration: none;
}
html.t27 .table a:not(.btn):hover, html.t27 .card a:not(.btn):not(.cb-link):not(.pill):hover { color: var(--primary); text-decoration: none; }
html.t27 a { text-decoration: none; }
html.t27 .card p a:not(.btn), html.t27 .chatbot-bubble a.cb-link { text-decoration: underline; text-underline-offset: 2px; }
html.t27 .seg > a, html.t27 .t27-seg > a, html.t27 .dash-preset-btn, html.t27 .dash-scope-btn, html.t27 .dashboard-preset-bar a { text-decoration: none !important; }
html.t27 .dashboard-preset-bar a:hover, html.t27 .seg > a:hover { color: var(--text); }
html.t27 .dashboard-preset-bar a.active:hover, html.t27 .seg > a.active:hover { color: #fff; }

/* ── 3. Panels: hairline + one soft shadow, never a frame ─── */
html.t27 .card, html.t27 .kpi, html.t27 .perf-card, html.t27 .contacts-card, html.t27 .att-card,
html.t27 .sm-kpi, html.t27 .settings-card, html.t27 .form-card, html.t27 .auth-card,
html.t27 .email-folders, html.t27 .email-list-card, html.t27 .pagination-bar, html.t27 .deal-card,
html.t27 .leaderboard, html.t27 .mis-filter-grid, html.t27 .filter-bar {
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--r-card);
  box-shadow: var(--ring-frame), var(--sh-panel);
  margin-bottom: 24px;
}
html.t27 .card { padding: 20px 22px; }
html.t27 .kpi-grid, html.t27 .grid-2 { gap: 20px; }
html.t27 .card-head { margin-bottom: 14px; }
html.t27 .grid-2 { gap: 24px; }
html.t27 .kpi-grid { gap: 16px; margin-bottom: 24px; }
/* inner regions are flat: dividers, not boxes */
html.t27 .card .card, html.t27 .card .kpi, html.t27 .card .form-card {
  border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; background: transparent;
}
html.t27 .card .card + .card { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }
html.t27 .search-result, html.t27 .notif-item, html.t27 .reminder-toast { border-radius: var(--r-row); }
/* top-performer tiles: sunken, flat, ink names (no cards inside the card) */
html.t27 .card .perf-card, html.t27 .perf-card, html.t27 .perf-card.highlight {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; box-shadow: none; padding: 14px 16px;
}
html.t27 .perf-label { font-size: 11.5px; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
html.t27 .perf-name { color: var(--text); font-size: 16px; font-weight: 600; }
html.t27 .perf-value { color: var(--text); font-weight: 500; }
html.t27 .mis-diag-info, html.t27 .mis-diag-warn { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-field); color: var(--ink-2); }
html.t27 .mis-diag-info strong, html.t27 .mis-diag-warn strong { color: var(--text); }

/* KPI: metric, label, note */
html.t27 .kpi { padding: 18px 20px; }
html.t27 .kpi-label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
html.t27 .kpi-value, html.t27 .kpi b, html.t27 .kpi strong, html.t27 .sm-kpi b, html.t27 .sm-kpi strong {
  font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); margin: 8px 0 6px;
}
html.t27 .kpi-sub { color: var(--ink-3); font-size: 12.5px; }

/* ── 4. Buttons: pills, one gradient primary ─────────────── */
html.t27 .btn, html.t27 button.btn, html.t27 a.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500; line-height: 1.2;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease,
              transform 150ms var(--ease-out), box-shadow 180ms ease, filter 180ms ease;
}
html.t27 .btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
html.t27 .btn:active { transform: scale(.96); }
html.t27 .btn.small, html.t27 .btn.sm { min-height: 32px; padding: 5px 13px; font-size: 13px; }
html.t27 .btn.full { width: 100%; }
html.t27 .btn-primary, html.t27 .btn.primary {
  background: var(--t27-grad); border-color: transparent; color: #fff; box-shadow: var(--sh-accent);
}
html.t27 .btn-primary:hover, html.t27 .btn.primary:hover { background: var(--t27-grad); border-color: transparent; filter: brightness(1.06); }
html.t27 .btn-danger, html.t27 .btn.danger { background: var(--surface); border-color: #F2C6C2; color: var(--danger); }
html.t27 .btn-danger:hover, html.t27 .btn.danger:hover { background: #FEF3F2; border-color: #E9A9A3; }
html.t27 .btn.ghost, html.t27 .btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
html.t27 .btn.ghost:hover, html.t27 .btn-ghost:hover { background: var(--surface-2); color: var(--text); }
html.t27 .btn:disabled, html.t27 .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
html.t27 .btn:focus-visible, html.t27 input:focus-visible, html.t27 select:focus-visible,
html.t27 textarea:focus-visible, html.t27 .seg > a:focus-visible, html.t27 .nav-item:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
/* the page's one primary action: the last button in the page head */
html.t27 .page-head .actions > .btn:last-child:not(.btn-danger):not(.danger):not(.ghost) {
  background: var(--t27-grad); border-color: transparent; color: #fff; box-shadow: var(--sh-accent);
}
html.t27 .page-head .actions > .btn:last-child:not(.btn-danger):not(.danger):not(.ghost):hover { filter: brightness(1.06); background: var(--t27-grad); }
/* row actions inside tables are quiet until hovered */
html.t27 .table .btn.small:not(.btn-primary):not(.primary):not(.btn-danger):not(.danger) {
  border-color: transparent; background: transparent; color: var(--ink-2);
}
html.t27 .table .btn.small:not(.btn-primary):not(.primary):not(.btn-danger):not(.danger):hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
html.t27 .table .btn.small.btn-danger, html.t27 .table .btn.small.danger { border-color: transparent; background: transparent; }
html.t27 .table .btn.small.btn-danger:hover, html.t27 .table .btn.small.danger:hover { background: #FEF3F2; border-color: #F2C6C2; }
html.t27 .icon-btn { color: var(--ink-3); border-radius: 999px; transition: color 150ms ease, background-color 150ms ease; }
html.t27 .icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* ── 5. Fields: sunken, hairline, ring on focus ───────────── */
html.t27 input[type="text"], html.t27 input[type="email"], html.t27 input[type="password"],
html.t27 input[type="number"], html.t27 input[type="search"], html.t27 input[type="tel"],
html.t27 input[type="date"], html.t27 input[type="datetime-local"], html.t27 input[type="time"],
html.t27 input[type="url"], html.t27 select, html.t27 textarea,
html.t27 .form-card input, html.t27 .form-card select, html.t27 .form-card textarea, html.t27 .search input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  color: var(--text);
  font-size: 14px;
  min-height: 40px;
  padding: 9px 14px;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
html.t27 textarea { min-height: 96px; line-height: 1.5; }
html.t27 input:focus, html.t27 select:focus, html.t27 textarea:focus,
html.t27 .form-card input:focus, html.t27 .form-card select:focus, html.t27 .form-card textarea:focus {
  background: var(--surface); border-color: var(--border-strong); box-shadow: 0 0 0 3px var(--primary-ring); outline: none;
}
html.t27 ::placeholder { color: var(--ink-3); opacity: 1; }
html.t27 .form-card form { gap: 16px; }
html.t27 .form-card label { gap: 6px; }
html.t27 .ts-control { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-field); min-height: 40px; padding: 8px 12px; }
html.t27 .ts-control.focus { background: var(--surface); box-shadow: 0 0 0 3px var(--primary-ring); }

/* ── 6. Segmented control: the sliding pill ──────────────── */
html.t27 .seg, html.t27 .t27-seg {
  position: relative; display: inline-flex; gap: 2px; padding: 4px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; isolation: isolate;
}
html.t27 .seg > a, html.t27 .seg > button, html.t27 .t27-seg > a, html.t27 .t27-seg > button {
  position: relative; z-index: 1;
  min-height: 34px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px; border-radius: 999px; border: 0;
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap;
  color: var(--ink-2); background: transparent !important; box-shadow: none !important; text-decoration: none;
  transition: color 280ms ease;
}
html.t27 .seg > a:hover, html.t27 .t27-seg > a:hover { color: var(--text); }
html.t27 .seg > a.active, html.t27 .seg > button.active, html.t27 .t27-seg > .active { color: #fff; }
html.t27 .seg > a.active .muted, html.t27 .t27-seg > .active .muted { color: rgba(255, 255, 255, .8); }
html.t27 .t27-ind {
  position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none;
  background: var(--t27-grad); border-radius: 999px; box-shadow: var(--sh-accent);
  opacity: 0;
  transition: transform 480ms var(--spring), width 480ms var(--spring), height 480ms var(--spring), opacity 180ms ease;
}
html.t27 .t27-ind.on { opacity: 1; }
html.t27 .dash-scope-btn, html.t27 .opp-tab, html.t27 .pipe-tab { border-radius: 999px; }

/* ── 7. Toggle: spring knob ──────────────────────────────── */
html.t27 .auto-toggle {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-field); color: var(--ink-2); font-size: 14px;
}
html.t27 .auto-toggle input[type="checkbox"], html.t27 input.t27-switch {
  appearance: none; -webkit-appearance: none; width: 40px; height: 24px; margin: 0; flex: 0 0 40px;
  border-radius: 999px; border: 0; background: #D9DAE1; position: relative; cursor: pointer;
  transition: background-color 280ms ease;
}
html.t27 .auto-toggle input[type="checkbox"]::before, html.t27 input.t27-switch::before {
  content: ""; position: absolute; top: 2px; left: 0; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(23, 23, 28, .2);
  transform: translateX(2px);
  transition: transform 420ms var(--spring-snap);
}
html.t27 .auto-toggle input[type="checkbox"]:checked, html.t27 input.t27-switch:checked { background: var(--t27-grad); }
html.t27 .auto-toggle input[type="checkbox"]:checked::before, html.t27 input.t27-switch:checked::before { transform: translateX(18px); }
html.t27[data-theme="dark"] .auto-toggle input[type="checkbox"] { background: #34343B; }

/* ── 8. Chips ────────────────────────────────────────────── */
html.t27 .pill, html.t27 [class*="status-pill"], html.t27 [class*="tag-pill"], html.t27 .stage-badge,
html.t27 .role-badge, html.t27 .source-badge, html.t27 .contact-source-badge, html.t27 .tc-pill, html.t27 .badge {
  border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: 0; padding: 3px 10px; text-transform: none;
}
html.t27 .pill { background: var(--surface-2); color: var(--ink-2); }
html.t27 .flash { border-radius: var(--r-field); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--sh-panel); font-weight: 500; color: var(--text); }

/* ── 9. Tables: regular weight, three inks ────────────────── */
html.t27 .table th, html.t27 table.table th {
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  padding: 10px 14px; background: transparent; border-bottom: 1px solid var(--border);
}
html.t27 .table td { padding: 9px 12px; font-size: 13px; color: var(--ink-2); border-bottom: 1px solid var(--border); font-weight: 400; }
html.t27 .table td:last-child { white-space: normal; min-width: 210px; }
html.t27 .table td:last-child .btn.small { margin: 1px 2px 1px 0; }
html.t27 .table td strong, html.t27 .table td b { font-weight: 500; color: var(--text); }
html.t27 .table td:first-child { color: var(--text); }
html.t27 .table tbody tr { transition: background-color 140ms ease; }
html.t27 .table tbody tr:hover { background: var(--surface-2); }
html.t27 .table tbody tr:last-child td { border-bottom: 0; }
html.t27 .card > .table, html.t27 .card > .table-wrap { margin: 0 -22px -20px; width: calc(100% + 44px); }
html.t27 .card > .table th:first-child, html.t27 .card > .table td:first-child { padding-left: 22px; }
html.t27 .card > .table th:last-child, html.t27 .card > .table td:last-child { padding-right: 22px; }
html.t27 .card > .table tbody tr:last-child td { border-bottom: 0; }

/* Contacts filter bar: compact fields, soft selected state */
html.t27 .contacts-filter-grid select, html.t27 .contacts-filter-grid input { min-height: 36px; padding: 6px 10px; min-width: 0; font-size: 13px; }
html.t27 .contacts-filter-grid .btn-primary, html.t27 .contacts-filter-grid .btn.active, html.t27 .contacts-filter-grid .pill.active,
html.t27 .contacts-filter-grid .ts-control .item, html.t27 .ts-control .item { background: var(--primary-soft) !important; color: var(--primary) !important; border: 0; border-radius: 999px; font-weight: 500; font-size: 12.5px; padding: 2px 9px; box-shadow: none; }
html.t27 .contacts-filter-grid .ts-control, html.t27 .contacts-filter-grid .ts-wrapper { min-height: 36px; padding: 4px 8px; min-width: 0; overflow: hidden; }
html.t27 .contacts-filter-grid > * { min-width: 0; }
/* Contacts list rows */
html.t27 .contact-row { padding: 10px 16px; transition: background-color 140ms ease; }
html.t27 .contact-row:hover { background: var(--surface-2); }
html.t27 .contact-row:hover::before { background: var(--t27-grad); }
html.t27 .contact-row .muted, html.t27 .contact-row small { color: var(--ink-3); }
html.t27 .contact-avatar, html.t27 .opp-avatar { font-weight: 600; box-shadow: none; }

/* ── 10. Kanban: sunken columns, quiet cards ─────────────── */
html.t27 .opp-col { background: var(--surface-2); border-radius: var(--r-card); border: 1px solid var(--border); }
html.t27 .opp-col::before { height: 3px; }
html.t27 .opp-col-head { background: transparent; border-bottom: 1px solid var(--border); padding: 14px 14px 10px; }
html.t27 .opp-col-title { font-weight: 600; font-size: 14px; letter-spacing: 0; }
html.t27 .opp-col-count { font-weight: 600; border-radius: 999px; background: var(--surface); }
html.t27 .opp-col-sub { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; color: var(--ink-3); }
html.t27 .opp-card-new {
  background: var(--surface); border: 1px solid var(--border); border-left-width: 1px; border-radius: 12px; padding: 12px;
  box-shadow: 0 1px 2px rgba(23, 23, 28, .04);
  transition: transform 160ms var(--ease-out), box-shadow 160ms ease, border-color 160ms ease;
}
html.t27 .opp-card-new:hover { transform: translateY(-1px); box-shadow: var(--sh-lift); border-color: var(--border-strong); }
html.t27 .opp-name { font-weight: 500; font-size: 14px; }
html.t27 .opp-meta { color: var(--ink-3); font-size: 12.5px; }

/* ── 11. Sidebar: the one dark region ────────────────────── */
html.t27 .sidebar { background: #111114; border-right: 1px solid rgba(255, 255, 255, .06); box-shadow: none; padding: 18px 12px 14px; }
html.t27 .brand { border-bottom-color: rgba(255, 255, 255, .06); }
html.t27 .sidebar .nav-item {
  border-radius: var(--r-row); margin: 2px 4px; padding: 9px 12px;
  font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #B6B7C2;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms var(--ease-out);
}
html.t27 .sidebar .nav-item span:not(.nav-badge):not(.badge):not(.nav-ico) { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; }
html.t27 .sidebar .nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
html.t27 .sidebar .nav-item:active { transform: scale(.985); }
html.t27 .sidebar .nav-item.active, html.t27 .sidebar .nav-item[aria-current] { background: rgba(255, 255, 255, .09); color: #fff; box-shadow: none; }
html.t27 .sidebar .nav-item { position: relative; }
html.t27 .sidebar .nav-item.active::before { left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--t27-grad); border-radius: 3px; box-shadow: none; }
html.t27 .sidebar .nav-label, html.t27 .sidebar .nav-section, html.t27 .sidebar .nav-group-title {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #8A8B96; font-weight: 600;
}
html.t27 .sidebar .nav-badge, html.t27 .sidebar .badge { border-radius: 999px; font-weight: 600; }
html.t27 .user-chip-top, html.t27 .sidebar .logout, html.t27 .sidebar .logout-btn { border-radius: var(--r-row); }
html.t27 .notif-bell, html.t27 .sidebar .bell { border-radius: var(--r-row); }

/* ── 12. Overlays: the frame is for arrivals ─────────────── */
@keyframes t27-rise { from { opacity: 0; transform: translateY(30px) scale(.92); } 66% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes t27-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }   /* dropdowns keep their width */
@keyframes t27-fade { from { opacity: 0; } to { opacity: 1; } }
html.t27 .modal-content, html.t27 .tc-modal, html.t27 [class$="-modal"]:not(.tc-modal), html.t27 .ep-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-overlay);
  box-shadow: var(--sh-overlay); -webkit-backdrop-filter: none; backdrop-filter: none;
  animation: t27-rise 600ms var(--ease-out) both;
}
html.t27 .modal-content h2, html.t27 .modal-content h3, html.t27 .tc-modal h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
html.t27 .modal-backdrop, html.t27 .tc-overlay, html.t27 [class$="-overlay"] {
  background: rgba(23, 23, 28, .32); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: t27-fade 400ms cubic-bezier(.22, 1, .36, 1) both;
}
html.t27[data-theme="dark"] .modal-backdrop, html.t27[data-theme="dark"] .tc-overlay { background: rgba(0, 0, 0, .7); }
html.t27 .notif-dropdown {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-panel);
  box-shadow: var(--sh-overlay); -webkit-backdrop-filter: none; backdrop-filter: none; animation: t27-drop 360ms var(--ease-out) both;
}
html.t27 .chatbot-panel { border-radius: var(--r-panel); border: 1px solid var(--border); box-shadow: var(--sh-overlay); }
html.t27 .chatbot-header { background: var(--t27-grad); }
html.t27 .chatbot-fab { background: var(--t27-grad); box-shadow: var(--sh-accent); }
html.t27 .chatbot-user .chatbot-bubble { background: var(--t27-grad); }
html.t27 .chatbot-bubble { color: var(--text); }
html.t27 .cb-card { border-left-width: 1px; border-radius: 14px; }
html.t27 .cb-card.done, html.t27 .cb-card.undone { border-left-width: 1px; }
html.t27 .cb-card-title { color: var(--primary); }
html.t27 .cb-btn { border-radius: 999px; }
html.t27 .cb-btn-primary { background: var(--t27-grad); border-color: transparent; }
html.t27 .cb-chip { background: var(--primary-soft); color: var(--primary); border-color: transparent; }

/* Team Chart page controls ride the same grammar */
html.t27 .tc-btn { border-radius: 999px; font-weight: 500; }
html.t27 .tc-btn:not(.ghost) { background: var(--t27-grad); box-shadow: var(--sh-accent); }
html.t27 .tc-btn.ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: none; }
html.t27 .tc-search input, html.t27 .tc-tools select { border-radius: var(--r-field); background: var(--surface-2); }
html.t27 .tc-table th { color: var(--ink-3); }
html.t27 .tc-pill { background: var(--primary-soft); color: var(--primary); }

/* ── 13. Dashboard chips (date presets) + kanban source tags ─ */
html.t27 .dashboard-preset-bar { position: relative; display: inline-flex; gap: 2px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; isolation: isolate; }
html.t27 .dash-preset-btn, html.t27 .dash-scope-btn { position: relative; z-index: 1; border-radius: 999px; font-weight: 500; font-size: 13px; min-height: 34px; display: inline-flex; align-items: center; border: 0; background: transparent; color: var(--ink-2); transition: color 280ms ease; }
html.t27 .dash-preset-btn:hover, html.t27 .dash-scope-btn:hover { color: var(--text); }
html.t27 .dash-preset-btn.active, html.t27 .dash-scope-btn.active { color: #fff; background: transparent; }
html.t27 .dashboard-preset-bar:not(.t27-seg) .dash-preset-btn.active { background: var(--t27-grad); }
html.t27 .opp-tag, html.t27 .opp-tag-referrer { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; border-radius: 999px; padding: 2px 9px; }

/* ── 14. App-mode harmony ────────────────────────────────── */
html.t27.pulse-app .pulse-sheet { border-radius: 24px 24px 0 0; }
html.t27.pulse-app .pulse-fab { background: var(--t27-grad); }

/* ── 15. Print, motion, contrast ─────────────────────────── */
@media print {
  html.t27 body { background: #fff; color: #000; }
  html.t27 .card, html.t27 .kpi, html.t27 .table, html.t27 .opp-card-new, html.t27 .modal-content { box-shadow: none !important; border-color: #bbb !important; }
  html.t27 .btn, html.t27 .chatbot-fab, html.t27 .chatbot-panel, html.t27 .t27-ind, html.t27 .sidebar, html.t27 .notif-dropdown, html.t27 .mobile-menu-btn { display: none !important; }
  html.t27 { --ink-2: #222; --ink-3: #444; --border: #bbb; --surface-2: #fff; }
  html.t27 .main { padding: 0 !important; max-width: 100% !important; }
  html.t27 .seg > a.active { color: #000; text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce) {
  html.t27 .t27-ind, html.t27 .auto-toggle input[type="checkbox"]::before, html.t27 .btn, html.t27 .opp-card-new { transition: none; }
  html.t27 .modal-content, html.t27 .tc-modal, html.t27 .modal-backdrop, html.t27 .tc-overlay, html.t27 .notif-dropdown { animation: none; }
  html.t27 .btn:active, html.t27 .sidebar .nav-item:active { transform: none; }
}
@media (prefers-contrast: more) {
  html.t27 { --border: #B4B5BE; --ink-3: #3A3C4A; }
}

/* ── 16. Dark mode floor: the base dark rules use !important, so this
   block re-asserts the t27 neutrals (the only !important in the layer) ── */
html.t27[data-theme="dark"] input[type="text"], html.t27[data-theme="dark"] input[type="email"], html.t27[data-theme="dark"] input[type="password"],
html.t27[data-theme="dark"] input[type="number"], html.t27[data-theme="dark"] input[type="search"], html.t27[data-theme="dark"] input[type="tel"],
html.t27[data-theme="dark"] input[type="date"], html.t27[data-theme="dark"] input[type="datetime-local"], html.t27[data-theme="dark"] input[type="time"],
html.t27[data-theme="dark"] select, html.t27[data-theme="dark"] textarea { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; }
html.t27[data-theme="dark"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success) { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }
html.t27[data-theme="dark"] .page-head .actions > .btn:last-child:not(.btn-danger):not(.danger):not(.ghost) { background: var(--t27-grad) !important; border-color: transparent !important; color: #fff !important; }
html.t27[data-theme="dark"] .table th { background: transparent !important; color: var(--ink-3) !important; }
html.t27[data-theme="dark"] .pill, html.t27[data-theme="dark"] .opp-tag { filter: none !important; }
html.t27[data-theme="dark"] .card, html.t27[data-theme="dark"] .kpi, html.t27[data-theme="dark"] .perf-card, html.t27[data-theme="dark"] .opp-col { background: var(--surface) !important; border-color: var(--border) !important; }
html.t27[data-theme="dark"] .perf-card, html.t27[data-theme="dark"] .opp-col, html.t27[data-theme="dark"] .mis-diag-info, html.t27[data-theme="dark"] .mis-diag-warn { background: var(--surface-2) !important; }
html.t27[data-theme="dark"] .opp-card-new { background: var(--surface) !important; border-color: var(--border) !important; }
html.t27[data-theme="dark"] .modal-content, html.t27[data-theme="dark"] .tc-modal, html.t27[data-theme="dark"] .chatbot-panel { background: var(--surface) !important; border-color: var(--border) !important; }

/* ── 17. Checkboxes: 18px, hairline, gradient when checked ─── */
/* :where() keeps this base rule below the :hover / :checked rules in specificity (a bare :not(.auto-toggle input) outranked :checked and the tick never showed) */
html.t27 input[type="checkbox"]:not(.t27-switch):not(:where(.auto-toggle input)) {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; flex: 0 0 18px; vertical-align: middle;
  border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
html.t27 input[type="checkbox"]:not(.t27-switch):hover { border-color: var(--primary-2); }
html.t27 input[type="checkbox"]:not(.t27-switch):checked {
  /* two layers: the tick on top of the gradient (a gradient and a url in ONE layer is invalid CSS and the tick never painted) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 8.5l3 3 6-7'/></svg>"), var(--t27-grad);
  background-position: center; background-size: 12px, auto; background-repeat: no-repeat; background-color: transparent;
  border-color: transparent;
}
html.t27 input[type="checkbox"]:not(.t27-switch):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
html.t27 .auto-toggle input[type="checkbox"] { width: 40px; height: 24px; border: 0; border-radius: 999px; }
html.t27 .auto-toggle input[type="checkbox"]:checked { background: var(--t27-grad); }

/* ── 18. Search bars + dropdowns: floating pills (Affan's reference) ── */
html.t27 input[type="search"], html.t27 .search input, html.t27 input[name="q"], html.t27 input[id*="search" i],
html.t27 input[placeholder*="search" i], html.t27 .tc-search input, html.t27 .filter-search input, html.t27 select {
  border-radius: 999px !important;
  background-color: var(--surface) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 1px 2px rgba(23, 23, 28, .04), 0 10px 28px -12px rgba(23, 23, 28, .22);
  min-height: 42px;
  padding: 10px 20px;
  color: var(--text);
  transition: box-shadow 180ms ease, border-color 180ms ease, transform 150ms var(--ease-out);
}
html.t27 input[type="search"]:hover, html.t27 .search input:hover, html.t27 input[name="q"]:hover, html.t27 select:hover {
  box-shadow: 0 2px 4px rgba(23, 23, 28, .05), 0 14px 32px -12px rgba(23, 23, 28, .28);
}
html.t27 input[type="search"]:focus, html.t27 .search input:focus, html.t27 input[name="q"]:focus, html.t27 input[placeholder*="search" i]:focus,
html.t27 .tc-search input:focus, html.t27 select:focus {
  border-color: transparent !important;
  box-shadow: 0 0 0 3px var(--primary-ring), 0 14px 32px -12px rgba(23, 23, 28, .28);
}
html.t27 select {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235F6170' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 14px;
  cursor: pointer;
}
html.t27 select[multiple] { border-radius: 16px !important; background-image: none; padding: 10px 14px; }
html.t27 .tc-search input { padding-left: 44px !important; }
html.t27 .tc-search .ico { left: 18px; }
html.t27[data-theme="dark"] input[type="search"], html.t27[data-theme="dark"] .search input, html.t27[data-theme="dark"] input[name="q"],
html.t27[data-theme="dark"] .tc-search input, html.t27[data-theme="dark"] select {
  background-color: var(--surface-2) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px -12px rgba(0, 0, 0, .8);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A3A4AF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
}
html.t27[data-theme="dark"] input[type="search"], html.t27[data-theme="dark"] .search input, html.t27[data-theme="dark"] input[name="q"], html.t27[data-theme="dark"] .tc-search input { background-image: none; }
/* the Tom Select control (multi pickers) wears the same pill */
html.t27 .ts-wrapper .ts-control { border-radius: 999px; background: var(--surface); border: 1px solid transparent; box-shadow: 0 1px 2px rgba(23, 23, 28, .04), 0 10px 28px -12px rgba(23, 23, 28, .22); padding: 6px 16px; min-height: 42px; }
html.t27 .ts-dropdown { border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--sh-overlay); margin-top: 8px; overflow: hidden; }
html.t27 .ts-dropdown .option { padding: 9px 14px; }
html.t27 .ts-dropdown .option.active { background: var(--primary-soft); color: var(--primary); }
/* search inputs that carry a leading icon glyph need room for it */
html.t27 input[type="search"], html.t27 .search input, html.t27 input[name="q"], html.t27 input[id*="search" i], html.t27 input[placeholder*="search" i], html.t27 .filter-search input { padding-left: 44px !important; }
html.t27 .filter-search, html.t27 .search { position: relative; }

/* ── 19. Real icons (emoji replaced at runtime by pulse-theme27-icons.js) ── */
html.t27 .t27-ic { width: 1.1em; height: 1.1em; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; display: inline-block; }
html.t27 .t27-ic-whatsapp { fill: currentColor; stroke: none; }
html.t27 .btn .t27-ic, html.t27 .seg .t27-ic, html.t27 .nav-item .t27-ic { width: 1.05em; height: 1.05em; margin-right: .1em; }
html.t27 .page-head h1 .t27-ic, html.t27 h1 .t27-ic, html.t27 h2 .t27-ic, html.t27 h3 .t27-ic { width: .9em; height: .9em; vertical-align: -0.08em; margin-right: .25em; color: var(--ink-3); }
html.t27 .card-head h2 .t27-ic { color: var(--primary-2); }
/* round action buttons (kanban + contact rows): icon-only, one size */
html.t27 .om-qa, html.t27 .cm-qa, html.t27 .opp-actions a, html.t27 .opp-actions button, html.t27 .contact-action-btn, html.t27 .contact-actions a {
  width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0; line-height: 0;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); box-shadow: none;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms var(--ease-out);
}
html.t27 .om-qa .t27-ic, html.t27 .cm-qa .t27-ic, html.t27 .opp-actions .t27-ic, html.t27 .contact-action-btn .t27-ic, html.t27 .contact-actions .t27-ic { width: 15px; height: 15px; margin: 0; vertical-align: 0; }
html.t27 .om-qa:hover, html.t27 .cm-qa:hover, html.t27 .opp-actions a:hover, html.t27 .contact-action-btn:hover, html.t27 .contact-actions a:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); }
html.t27 .om-qa.wa, html.t27 .cm-qa.wa, html.t27 .wa-btn, html.t27 [class*="-wa"], html.t27 a[href*="wa.me"] { color: #1FAF5A; }
html.t27 .om-qa.wa:hover, html.t27 .cm-qa.wa:hover, html.t27 a[href*="wa.me"]:hover { background: #E9F9EF; border-color: #BFE9CF; color: #128C45; }
html.t27 .wa-btn.btn, html.t27 .btn.wa-btn { background: #25D366; border-color: transparent; color: #fff; }
html.t27 .wa-btn.btn:hover { background: #1FBF5B; }
html.t27 .wa-btn.btn .t27-ic { fill: #fff; }
html.t27 [class*="delete"] .t27-ic-trash, html.t27 .btn-danger .t27-ic { color: var(--danger); }

/* ── 20. Search: icon inside the pill, no submit button ─────── */
html.t27 input[type="search"], html.t27 .search input, html.t27 input[name="q"], html.t27 input[id*="search" i], html.t27 input[placeholder*="search" i], html.t27 .tc-search input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666876' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>") !important;
  background-repeat: no-repeat !important; background-position: left 16px center !important; background-size: 16px !important;
}
html.t27 .tc-search .ico { display: none; }
html.t27 input[type="search"] + button[type="submit"]:not(.t27-search-go), html.t27 input[name="q"] + button[type="submit"]:not(.t27-search-go), html.t27 input[name="q"] + .btn[type="submit"],
html.t27 .t27-search + button[type="submit"], html.t27 .t27-search + .btn[type="submit"] { display: none !important; }
html.t27 input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ── 21. Filter bars: one height, one shape, aligned ────────── */
html.t27 .contacts-filter-grid { gap: 10px; align-items: center; }
html.t27 .contacts-filter-grid > * { min-width: 0; }
html.t27 .contacts-filter-grid select, html.t27 .contacts-filter-grid input, html.t27 .contacts-filter-grid input[type="date"], html.t27 .contacts-filter-grid input[type="datetime-local"] {
  min-height: 40px !important; height: 40px; padding: 6px 14px !important; font-size: 13.5px; border-radius: 999px !important; background-color: var(--surface) !important;
  border: 1px solid transparent !important; box-shadow: 0 1px 2px rgba(23, 23, 28, .04), 0 10px 28px -12px rgba(23, 23, 28, .22); width: 100%; box-sizing: border-box;
}
html.t27 .contacts-filter-grid select { padding-right: 38px !important; }
html.t27 .contacts-filter-grid .ts-wrapper { padding: 0; border: 0; background: transparent; box-shadow: none; min-height: 0; }
html.t27 .contacts-filter-grid .ts-wrapper .ts-control, html.t27 .ts-wrapper .ts-control { min-height: 40px; height: 40px; padding: 4px 38px 4px 12px; border-radius: 999px; background: var(--surface); border: 1px solid transparent; box-shadow: 0 1px 2px rgba(23, 23, 28, .04), 0 10px 28px -12px rgba(23, 23, 28, .22); display: flex; align-items: center; gap: 6px; overflow: hidden; }
html.t27 .ts-wrapper .ts-control .item { background: var(--primary-soft) !important; color: var(--primary) !important; border: 0; border-radius: 999px; font-weight: 500; font-size: 12.5px; padding: 3px 10px; line-height: 1.3; white-space: nowrap; }
html.t27 .ts-wrapper .ts-control input { min-height: 0 !important; height: auto !important; box-shadow: none !important; padding: 0 !important; background: transparent !important; }
html.t27 .contacts-filter-grid .lu-lbl { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; padding: 0 4px; }
html.t27 .contacts-filter-grid .lu-dash { color: var(--ink-3); }
html.t27 .contacts-filter-grid .btn-primary, html.t27 .contacts-filter-grid .btn { min-height: 40px; height: 40px; padding: 6px 18px; border-radius: 999px; }
html.t27 .contacts-filter-grid .btn-primary { background: var(--t27-grad); color: #fff; border-color: transparent; box-shadow: var(--sh-accent); }
html.t27 .contacts-filter-grid .bulk-strip, html.t27 .bulk-strip { border-radius: 999px; }
/* generic filter rows elsewhere (opportunities toolbar etc.) */
html.t27 .opp-toolbar select, html.t27 .filter-bar select, html.t27 form[method="get"] select { min-height: 40px; }

/* ── 22. Filter grid geometry + form dropdowns ──────────────── */
html.t27 .contacts-filter-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 10px; }
html.t27 .contacts-filter-grid select { padding-right: 34px !important; font-size: 13px; text-overflow: ellipsis; }
html.t27 .contacts-filter-grid .lu-group, html.t27 .contacts-filter-grid > span:not(.lu-lbl):not(.lu-dash) {
  grid-column: span 2; display: flex; align-items: center; gap: 6px; min-width: 0;
}
html.t27 .contacts-filter-grid .lu-group input, html.t27 .contacts-filter-grid > span input { flex: 1 1 0; width: auto; min-width: 0; padding: 6px 10px !important; font-size: 12.5px; }
html.t27 .contacts-filter-grid .lu-lbl { font-size: 10.5px; padding: 0 2px; }
@media (max-width: 1200px) { html.t27 .contacts-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { html.t27 .contacts-filter-grid { grid-template-columns: 1fr; } html.t27 .contacts-filter-grid .lu-group, html.t27 .contacts-filter-grid > span { grid-column: span 1; } }
/* dropdowns that sit inside a form match the fields beside them */
html.t27 .card select:not(.contacts-filter-grid select), html.t27 .form-card select, html.t27 .modal-content select, html.t27 .tc-modal select {
  border-radius: 12px !important; background-color: var(--surface-2) !important; border: 1px solid var(--border) !important; box-shadow: none;
}
html.t27 .card select:not(.contacts-filter-grid select):focus, html.t27 .form-card select:focus, html.t27 .modal-content select:focus, html.t27 .tc-modal select:focus {
  background-color: var(--surface) !important; border-color: var(--border-strong) !important; box-shadow: 0 0 0 3px var(--primary-ring);
}
html.t27 .contacts-filter-grid select, html.t27 .contacts-filter-grid .ts-control { box-shadow: 0 1px 2px rgba(23, 23, 28, .04), 0 10px 28px -12px rgba(23, 23, 28, .22); }

/* ── 23. Contacts rows: every row is its own grid, so fixed tracks keep columns aligned ── */
html.t27 .contact-row { grid-template-columns: 28px 36px minmax(0, 2.7fr) minmax(0, .9fr) minmax(0, .9fr) 140px 170px; gap: 12px; }
html.t27 .contact-row:not(:has(.contact-bulk-check)) { grid-template-columns: 36px minmax(0, 2.7fr) minmax(0, .9fr) minmax(0, .9fr) 140px 170px; }
html.t27 .contact-row > * { min-width: 0; }
html.t27 .contact-row .contact-actions, html.t27 .contact-row > :last-child { display: flex; justify-content: flex-end; gap: 6px; }
html.t27 .contact-row .contact-name, html.t27 .contact-row .contact-meta { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) {
  html.t27 .contact-row { grid-template-columns: 28px 36px minmax(0, 1fr) 176px; }
  html.t27 .contact-row:not(:has(.contact-bulk-check)) { grid-template-columns: 36px minmax(0, 1fr) 176px; }
}

/* ── 24. The dropdown picker (pulse-theme27-select.js): title, search, roomy list ── */
html.t27 .t27-menu {
  position: fixed; z-index: 10050; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden;
  background: var(--surface); border: 1px solid transparent; border-radius: 22px;
  box-shadow: 0 0 0 8px var(--frame), 0 0 0 9px rgba(23, 23, 28, .05), 0 30px 80px -30px rgba(23, 23, 28, .4);
  opacity: 0; transform: translateY(-8px);
  transition: opacity 160ms ease, transform 240ms var(--ease-out);
  font-size: 15px; color: var(--text);
}
html.t27 .t27-menu.in { opacity: 1; transform: none; }
html.t27 .t27-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 10px; }
html.t27 .t27-menu-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
html.t27 .t27-menu-close { width: 32px; height: 32px; border-radius: 999px; border: 0; background: transparent; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
html.t27 .t27-menu-close:hover { background: var(--surface-2); color: var(--text); }
html.t27 .t27-menu-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
html.t27 .t27-menu-search { position: relative; margin: 0 16px 8px; }
html.t27 .t27-menu-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
html.t27 .t27-menu-search input {
  width: 100%; box-sizing: border-box; min-height: 48px !important; padding: 12px 16px 12px 46px !important; border-radius: 14px !important;
  background: var(--surface-2) !important; border: 1px solid var(--border) !important; box-shadow: none !important; font-size: 15px; color: var(--text); background-image: none !important;
}
html.t27 .t27-menu-search input:focus { background: var(--surface) !important; box-shadow: 0 0 0 3px var(--primary-ring) !important; border-color: var(--border-strong) !important; }
html.t27 .t27-menu-list { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 12px; scrollbar-width: thin; }
html.t27 .t27-menu-item {
  display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 8px 14px; border-radius: 12px; cursor: pointer; color: var(--text); line-height: 1.3;
  transition: background-color 120ms ease, color 120ms ease;
}
html.t27 .t27-menu-item[hidden] { display: none; }
html.t27 .t27-menu-item:hover, html.t27 .t27-menu-item.hi { background: var(--surface-2); }
html.t27 .t27-menu-item.on { color: var(--primary); font-weight: 500; }
html.t27 .t27-menu-item.on:hover, html.t27 .t27-menu-item.on.hi { background: var(--primary-soft); }
html.t27 .t27-menu-item.off { color: var(--ink-3); cursor: default; }
html.t27 .t27-menu-ic { width: 30px; height: 30px; border-radius: 999px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 30px; }
html.t27 .t27-menu-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.t27 .t27-menu-check { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
html.t27 .t27-menu-item.on .t27-menu-check { opacity: 1; }
html.t27 .t27-menu-group { padding: 12px 14px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
html.t27 .t27-menu-empty { padding: 18px 14px; color: var(--ink-3); text-align: center; }
html.t27 select.t27-select-open { box-shadow: 0 0 0 3px var(--primary-ring), 0 14px 32px -12px rgba(23, 23, 28, .28) !important; }
html.t27[data-theme="dark"] .t27-menu { box-shadow: 0 0 0 8px var(--frame), 0 0 0 9px rgba(0,0,0,.6), 0 30px 80px -30px rgba(0,0,0,.9); }
@media (prefers-reduced-motion: reduce) { html.t27 .t27-menu { transition: none; } }

/* ── 25. Search pill with the round go button (reference) ─── */
html.t27 .t27-search { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
html.t27 .t27-search > input { width: 100%; flex: 1 1 auto; padding-right: 52px !important; }
html.t27 .t27-search-go {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: #17171C; color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px -4px rgba(23, 23, 28, .5);
  transition: background-color 160ms ease, transform 150ms var(--ease-out);
}
html.t27 .t27-search-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.t27 .t27-search-go:hover { background: #2B2B33; }
html.t27 .t27-search-go:active { transform: translateY(-50%) scale(.94); }
html.t27 .t27-search-go:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
html.t27[data-theme="dark"] .t27-search-go { background: #EDEDED; color: #111; }
html.t27 .filter-search { position: relative; margin-bottom: 0 !important; flex: 1 1 auto; min-width: 0; }
html.t27 .filter-search-icon { display: none; }

/* ── 26. Contacts: Filters button + right drawer ─────────── */
html.t27 .t27-filter-bar { display: flex; align-items: center; gap: 10px; }
html.t27 .t27-filter-btn { min-height: 42px; padding: 8px 18px; gap: 8px; white-space: nowrap; }
html.t27 .t27-filter-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.t27 .t27-filter-btn.has { border-color: transparent; background: var(--primary-soft); color: var(--primary); }
html.t27 .t27-filter-count { background: var(--t27-grad); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
html.t27 .t27-filter-count[hidden] { display: none; }
html.t27 .contacts-filter-card { padding: 12px 14px; }
html.t27 .t27-drawer-backdrop { position: fixed; inset: 0; z-index: 10040; background: rgba(23, 23, 28, .32); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 320ms ease; }
html.t27 .t27-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
html.t27 .t27-drawer {
  position: fixed; top: 12px; right: 12px; bottom: 12px; z-index: 10041; width: 400px; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column; box-sizing: border-box;
  background: var(--surface); border-radius: 24px;
  box-shadow: 0 0 0 8px var(--frame), 0 0 0 9px rgba(23, 23, 28, .05), 0 30px 80px -30px rgba(23, 23, 28, .45);
  transform: translateX(calc(100% + 40px)); transition: transform 460ms var(--ease-out);
}
html.t27 .t27-drawer.open { transform: none; }
html.t27 .t27-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 22px 12px; }
html.t27 .t27-drawer-head h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
html.t27 .t27-drawer-close { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
html.t27 .t27-drawer-close:hover { background: var(--surface-2); color: var(--text); }
html.t27 .t27-drawer-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
html.t27 .t27-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 22px 16px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }
html.t27 .t27-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
html.t27 .t27-field-cap { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
html.t27 .t27-field-row, html.t27 .t27-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html.t27 .t27-field-pair .t27-field { min-width: 0; }
html.t27 .t27-drawer select, html.t27 .t27-drawer input, html.t27 .t27-drawer .ts-wrapper .ts-control {
  width: 100%; box-sizing: border-box; min-height: 42px !important; height: 42px; border-radius: 12px !important;
  background-color: var(--surface-2) !important; border: 1px solid var(--border) !important; box-shadow: none !important; padding: 8px 14px !important; font-size: 14px;
}
html.t27 .t27-drawer select { padding-right: 38px !important; }
html.t27 .t27-drawer select:focus, html.t27 .t27-drawer input:focus { background-color: var(--surface) !important; box-shadow: 0 0 0 3px var(--primary-ring) !important; border-color: var(--border-strong) !important; }
html.t27 .t27-drawer .ts-wrapper .ts-control { height: auto; min-height: 42px !important; padding: 5px 12px !important; }
html.t27 .t27-drawer .lu-lbl, html.t27 .t27-drawer .lu-dash { display: none; }
html.t27 .t27-drawer-foot { display: flex; gap: 10px; padding: 14px 22px 22px; border-top: 1px solid var(--border); }
html.t27 .t27-drawer-foot .t27-drawer-btn { flex: 1 1 auto; min-height: 42px; justify-content: center; }
html.t27 .t27-drawer-foot .btn-primary { background: var(--t27-grad) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--sh-accent); }
html.t27 body.t27-drawer-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html.t27 .t27-drawer, html.t27 .t27-drawer-backdrop { transition: none; } }

/* ── 27. Sidebar: fractal glass + liquid-glass cards ──
   Background: fractal glass (ribbed refraction stripes at 98deg, grain,
   indigo/violet/cyan glows on near-black). The crystal render
   (img/sidebar-crystal.webp) was tried and set aside on 2026-09-14; the
   file is kept for an easy swap back.
   Everything you touch sits on liquid glass (after Apple's Liquid Glass):
   a faint tint, a heavy blur + saturation that frosts the crystal behind,
   a bright specular top edge, a gradient rim that catches light top-left,
   a soft drop shadow, and a sheen that follows the pointer. */
html.t27 .sidebar {
  --glass-smoke: linear-gradient(rgba(10,10,15,.42), rgba(10,10,15,.42));   /* keeps white text readable over bright crystal */
  --glass-tint: linear-gradient(165deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.035) 45%, rgba(255,255,255,.02) 100%), var(--glass-smoke);
  --glass-blur: blur(20px) saturate(150%);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -16px 28px -22px rgba(255,255,255,.10);
  --glass-drop: 0 18px 40px -20px rgba(0,0,0,.75), 0 2px 6px -2px rgba(0,0,0,.4);
  --glass-rim: linear-gradient(150deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,.10) 26%, rgba(255,255,255,.02) 58%, rgba(165,180,252,.30) 100%);
  background-color: #0E0E12;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(98deg, rgba(255,255,255,.055) 0 1.5px, rgba(255,255,255,0) 1.5px 7px, rgba(0,0,0,.22) 7px 9px, rgba(0,0,0,0) 9px 17px),
    radial-gradient(55% 34% at 18% 6%, rgba(var(--sg1), var(--sg1a)), rgba(var(--sg1), 0) 70%),
    radial-gradient(70% 46% at 78% 42%, rgba(var(--sg2), var(--sg2a)), rgba(var(--sg2), 0) 72%),
    radial-gradient(48% 30% at 72% 92%, rgba(var(--sg3), var(--sg3a)), rgba(var(--sg3), 0) 70%),
    linear-gradient(180deg, #14141B 0%, #0E0E12 55%, #0B0B0F 100%);
  border-right: 1px solid rgba(255,255,255,.07);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.03), 14px 0 44px -32px rgba(0,0,0,.7);
}

/* the shared glass recipe */
html.t27 .sidebar > nav,
html.t27 .sidebar .user-chip-top,
html.t27 .sidebar .notif-bell,
html.t27 .sidebar .logout-btn {
  position: relative;
  background: var(--glass-tint);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 0;
  box-shadow: var(--glass-edge), var(--glass-drop);
}
/* the rim: a 1px gradient border that is brightest where the light hits */
html.t27 .sidebar > nav::after,
html.t27 .sidebar .user-chip-top::after,
html.t27 .sidebar .notif-bell::after,
html.t27 .sidebar .logout-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--glass-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* the options card */
html.t27 .sidebar > nav {
  flex: 0 0 auto; gap: 2px;
  margin: 2px 2px 0; padding: 10px 8px 8px;
  border-radius: 24px;
}
html.t27 .sidebar > nav::before {                                     /* pointer-lit sheen */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(220px 160px at var(--gx, 22%) var(--gy, 0%), rgba(255,255,255,.13), rgba(255,255,255,0) 70%);
  transition: opacity .4s ease;
}
html.t27 .sidebar .nav-section { margin-bottom: 0; padding: 2px 0; }
html.t27 .sidebar .nav-section + .nav-section { border-top: 1px solid rgba(255,255,255,.055); padding-top: 4px; }
html.t27 .sidebar .nav-label, html.t27 .sidebar .nav-group-title {
  color: rgba(226,228,240,.52); font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  padding: 8px 10px 6px; margin-top: 0; opacity: 1;
}
html.t27 .sidebar .nav-item {
  color: rgba(236,237,246,.80); border-radius: 14px; padding: 9px 11px;
  transition: background-color .22s ease, color .22s ease, box-shadow .22s ease;
}
html.t27 .sidebar .nav-item:hover { background: rgba(255,255,255,.075); color: #fff; transform: none; }
html.t27 .sidebar .nav-item.active, html.t27 .sidebar .nav-item[aria-current] {
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.07) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 0 0 1px rgba(255,255,255,.09), 0 8px 18px -10px rgba(0,0,0,.7);
}
html.t27 .sidebar .nav-item.active::before { display: none; }          /* the glass capsule is the marker */
html.t27 .sidebar .nav-item.active .nav-ico, html.t27 .sidebar .nav-item.active svg { color: #C7D2FE; }

/* top chrome */
html.t27 .sidebar .brand-pulse { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.t27 .brand { border-bottom-color: transparent; }
html.t27 .sidebar .notif-bell-wrap { margin: 0 2px 10px; }
html.t27 .sidebar .notif-bell { border-radius: 999px; color: rgba(236,237,246,.85); }
html.t27 .sidebar .notif-bell:hover { background: linear-gradient(165deg, rgba(255,255,255,.17), rgba(255,255,255,.06)), var(--glass-smoke); color: #fff; }
html.t27 .sidebar .user-chip-top { margin: 0 2px 12px; border-radius: 20px; }
html.t27 .sidebar .user-chip-top:hover { background: linear-gradient(165deg, rgba(255,255,255,.16), rgba(255,255,255,.05)), var(--glass-smoke); }

/* footer: pushed to the bottom so the crystal shows between card and footer */
html.t27 .sidebar-footer { margin-top: auto; padding-top: 14px; border-top: 0; }
html.t27 .sidebar .logout-btn { margin: 0 2px; border-radius: 999px; color: rgba(236,237,246,.85); }
html.t27 .sidebar .logout-btn:hover { color: #FECACA; background: linear-gradient(165deg, rgba(248,113,113,.22), rgba(248,113,113,.06)), var(--glass-smoke); }

/* no blur support, or the viewer asked for less transparency: solid smoked glass */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.t27 .sidebar > nav, html.t27 .sidebar .user-chip-top, html.t27 .sidebar .notif-bell, html.t27 .sidebar .logout-btn { background: rgba(22,22,30,.9); }
}
@media (prefers-reduced-transparency: reduce) {
  html.t27 .sidebar > nav, html.t27 .sidebar .user-chip-top, html.t27 .sidebar .notif-bell, html.t27 .sidebar .logout-btn {
    background: rgba(22,22,30,.94); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html.t27 .sidebar > nav::before { display: none; }
}

/* webapp drawer (html.pulse-app): same crystal and glass, over the a26 navy drawer */
html.t27.pulse-app .sidebar {
  background-color: #0E0E12;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(98deg, rgba(255,255,255,.055) 0 1.5px, rgba(255,255,255,0) 1.5px 7px, rgba(0,0,0,.22) 7px 9px, rgba(0,0,0,0) 9px 17px),
    radial-gradient(55% 34% at 18% 6%, rgba(var(--sg1), var(--sg1a)), rgba(var(--sg1), 0) 70%),
    radial-gradient(70% 46% at 78% 42%, rgba(var(--sg2), var(--sg2a)), rgba(var(--sg2), 0) 72%),
    radial-gradient(48% 30% at 72% 92%, rgba(var(--sg3), var(--sg3a)), rgba(var(--sg3), 0) 70%),
    linear-gradient(180deg, #14141B 0%, #0E0E12 55%, #0B0B0F 100%);
}
html.t27.pulse-app .sidebar .nav-item.active {
  font-weight: 500;
  background: linear-gradient(180deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.07) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 0 0 1px rgba(255,255,255,.09), 0 8px 18px -10px rgba(0,0,0,.7);
}
html.t27.pulse-app .sidebar .nav-item.active::before { display: none; }
html.t27.pulse-app .sidebar .a26-dr-x {
  background: linear-gradient(165deg, rgba(255,255,255,.12), rgba(255,255,255,.03)), linear-gradient(rgba(10,10,15,.42), rgba(10,10,15,.42));
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  border: 0; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 0 1px rgba(255,255,255,.08);
}
/* the webapp drawer's close button must stay hidden on the website (a t27 button rule was un-hiding it) */
html.t27:not(.pulse-app) .sidebar .a26-dr-x { display: none !important; }

/* ── 28. Drop-down motion: sidebar sections + picker panels ──
   Sections unfold with grid-template-rows (no height measuring, no layout
   thrash per frame beyond the one track), rows cascade 28ms apart, closing
   is faster and simultaneous. Transitions switch on one frame after load so
   nothing animates on page load. */
html.t27 .sidebar .nav-section.nav-collapsed .t27-nav-body .nav-item { display: flex !important; }
html.t27 .sidebar .nav-section.nav-collapsed .t27-nav-body .nav-group { display: flex !important; }
html.t27 .sidebar .t27-nav-body { display: grid; grid-template-rows: 1fr; }
html.t27 .sidebar .nav-section.nav-collapsed .t27-nav-body { grid-template-rows: 0fr; }
html.t27 .sidebar .t27-nav-inner {
  min-height: 0; display: flex; flex-direction: column; gap: 2px;
  overflow: hidden; overflow: clip; overflow-clip-margin: 14px;   /* let the glass capsule's shadow breathe */
}
html.t27 .sidebar .nav-section.nav-collapsed .t27-nav-inner { visibility: hidden; transition: visibility 0s linear 320ms; }
html.t27 .sidebar .nav-section.nav-collapsed .t27-nav-body .nav-item,
html.t27 .sidebar .nav-section.nav-collapsed .t27-nav-body .nav-group { opacity: 0; transform: translateY(-8px); }

html.t27 .sidebar.t27-nav-ready .t27-nav-body { transition: grid-template-rows 460ms var(--ease-out); }
html.t27 .sidebar.t27-nav-ready .nav-section.nav-collapsed .t27-nav-body { transition-duration: 300ms; }
html.t27 .sidebar.t27-nav-ready .t27-nav-body .nav-item,
html.t27 .sidebar.t27-nav-ready .t27-nav-body .nav-group {
  transition:
    opacity 260ms ease calc(var(--i, 0) * 28ms + 70ms),
    transform 480ms var(--ease-out) calc(var(--i, 0) * 28ms + 50ms),
    background-color .22s ease, color .22s ease, box-shadow .22s ease;
}
html.t27 .sidebar.t27-nav-ready .nav-section.nav-collapsed .t27-nav-body .nav-item,
html.t27 .sidebar.t27-nav-ready .nav-section.nav-collapsed .t27-nav-body .nav-group {
  transition: opacity 140ms ease, transform 220ms ease, background-color .22s ease, color .22s ease, box-shadow .22s ease;
}

/* + that becomes − : two bars, the vertical one folds away as the mark turns */
html.t27 .sidebar .nav-label::after {
  content: ""; flex: 0 0 10px; width: 10px; height: 10px; margin-left: 8px; opacity: .75;
  background:
    linear-gradient(currentColor, currentColor) center / 10px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 0 no-repeat;
  border-radius: 1px;
  transform: rotate(180deg);
  transition: transform 420ms var(--ease-out), background-size 320ms var(--ease-out), opacity 150ms ease;
}
html.t27 .sidebar .nav-section.nav-collapsed .nav-label::after {
  content: "";
  background-size: 10px 1.6px, 1.6px 10px;
  transform: rotate(0deg);
}
html.t27 .sidebar .nav-label:hover::after { opacity: 1; }
html.t27 .sidebar .nav-label:focus-visible { outline: 2px solid rgba(199, 210, 254, .7); outline-offset: 2px; border-radius: 10px; }

/* picker panel: drops out of its field, rows cascade */
html.t27 .t27-menu { transform: translateY(-10px); transition: opacity 180ms ease, transform 420ms var(--ease-out); }
html.t27 .t27-menu[data-side="above"] { transform: translateY(10px); }
html.t27 .t27-menu.in, html.t27 .t27-menu[data-side="above"].in { transform: none; }
html.t27 .t27-menu:not(.in) { transition: opacity 130ms ease, transform 180ms ease; }
html.t27 .t27-menu .t27-menu-item, html.t27 .t27-menu .t27-menu-group { opacity: 0; transform: translateY(-4px); }
html.t27 .t27-menu.in .t27-menu-item, html.t27 .t27-menu.in .t27-menu-group {
  opacity: 1; transform: none;
  transition: opacity 220ms ease calc(var(--i, 0) * 16ms + 50ms), transform 360ms var(--ease-out) calc(var(--i, 0) * 16ms + 40ms), background-color 120ms ease, color 120ms ease;
}
html.t27 .t27-menu[data-side="above"] .t27-menu-item, html.t27 .t27-menu[data-side="above"] .t27-menu-group { transform: translateY(4px); }

@media (prefers-reduced-motion: reduce) {
  html.t27 .sidebar.t27-nav-ready .t27-nav-body,
  html.t27 .sidebar.t27-nav-ready .t27-nav-body .nav-item,
  html.t27 .sidebar.t27-nav-ready .t27-nav-body .nav-group,
  html.t27 .sidebar .nav-label::after,
  html.t27 .t27-menu .t27-menu-item, html.t27 .t27-menu .t27-menu-group { transition: none !important; }
  html.t27 .sidebar .nav-section.nav-collapsed .t27-nav-body .nav-item,
  html.t27 .t27-menu .t27-menu-item, html.t27 .t27-menu .t27-menu-group { transform: none; }
}

/* ── 29. Content glass: cards and pill tracks wear the sidebar's liquid glass ──
   Same material language as §27, tuned for a light canvas: a white tint that
   fades slightly toward the bottom, a 1px rim brightest where the light hits
   (top-left) and darkest bottom-right, a crisp top edge, a soft two-step
   drop, and a faint Pulse-violet sheen under the pointer (T27-CONTENT-LIGHT).
   Nested cards stay flat (§3); inner tiles get the lite version. */
html.t27 {
  --lg-tint: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(252,252,254,.94) 100%);
  --lg-rim: linear-gradient(158deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.85) 18%, rgba(205,207,222,.55) 48%, rgba(170,172,190,.55) 100%);
  --lg-edge: inset 0 1px 0 rgba(255,255,255,1);
  --lg-drop: 0 1px 1px rgba(23,23,28,.04), 0 6px 14px -8px rgba(23,23,28,.10), 0 22px 44px -26px rgba(23,23,28,.22);
  --lg-track: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(238,238,243,.62) 100%);
  --lg-track-edge: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(23,23,28,.06), inset 0 -1px 0 rgba(23,23,28,.035), 0 8px 20px -14px rgba(23,23,28,.22);
}
html.t27[data-theme="dark"] {
  --lg-tint: linear-gradient(180deg, rgba(30,30,35,.96) 0%, rgba(20,20,24,.96) 100%);
  --lg-rim: linear-gradient(158deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.08) 26%, rgba(255,255,255,.03) 58%, rgba(165,180,252,.16) 100%);
  --lg-edge: inset 0 1px 0 rgba(255,255,255,.07);
  --lg-drop: 0 1px 1px rgba(0,0,0,.4), 0 10px 24px -12px rgba(0,0,0,.6), 0 26px 50px -28px rgba(0,0,0,.8);
  --lg-track: linear-gradient(180deg, rgba(40,40,46,.72) 0%, rgba(24,24,28,.62) 100%);
  --lg-track-edge: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.07), 0 8px 20px -14px rgba(0,0,0,.7);
}

/* cards */
html.t27 .card,
html.t27 .kpi,
html.t27 .contacts-card,
html.t27 .att-card,
html.t27 .sm-kpi,
html.t27 .settings-card,
html.t27 .form-card,
html.t27 .auth-card,
html.t27 .email-folders,
html.t27 .email-list-card,
html.t27 .pagination-bar,
html.t27 .deal-card,
html.t27 .leaderboard,
html.t27 .mis-filter-grid,
html.t27 .filter-bar {
  --lg-sheen: radial-gradient(320px circle at var(--gx, 50%) var(--gy, -60%), rgba(139,92,246,var(--gs, 0)), rgba(139,92,246,0) 70%);
  --lg-edgelight: radial-gradient(170px circle at var(--gx, -400px) var(--gy, -400px), rgba(139,92,246,var(--ge)), rgba(139,92,246,0) 72%);
  border: 1px solid transparent;
  background: var(--lg-sheen) padding-box, var(--lg-tint) padding-box, linear-gradient(var(--bg), var(--bg)) padding-box, var(--lg-edgelight) border-box, var(--lg-rim) border-box;
  box-shadow: var(--lg-edge), var(--lg-drop);
  transition: box-shadow 260ms ease;
}
html.t27[data-theme="dark"] .card,
html.t27[data-theme="dark"] .kpi,
html.t27[data-theme="dark"] .contacts-card,
html.t27[data-theme="dark"] .att-card,
html.t27[data-theme="dark"] .sm-kpi,
html.t27[data-theme="dark"] .settings-card,
html.t27[data-theme="dark"] .form-card,
html.t27[data-theme="dark"] .auth-card,
html.t27[data-theme="dark"] .email-folders,
html.t27[data-theme="dark"] .email-list-card,
html.t27[data-theme="dark"] .pagination-bar,
html.t27[data-theme="dark"] .deal-card,
html.t27[data-theme="dark"] .leaderboard,
html.t27[data-theme="dark"] .mis-filter-grid,
html.t27[data-theme="dark"] .filter-bar {
  --lg-sheen: radial-gradient(320px circle at var(--gx, 50%) var(--gy, -60%), rgba(165,180,252,calc(var(--gs, 0) * 1.4)), rgba(165,180,252,0) 70%);
  --lg-edgelight: radial-gradient(170px circle at var(--gx, -400px) var(--gy, -400px), rgba(199,210,254,var(--ge)), rgba(199,210,254,0) 72%);
  background: var(--lg-sheen) padding-box, var(--lg-tint) padding-box, linear-gradient(var(--bg), var(--bg)) padding-box, var(--lg-edgelight) border-box, var(--lg-rim) border-box !important;
  border-color: transparent !important;
}
/* nested stays flat, exactly as §3 */
html.t27 .card .card, html.t27 .card .kpi, html.t27 .card .form-card,
html.t27[data-theme="dark"] .card .card, html.t27[data-theme="dark"] .card .kpi, html.t27[data-theme="dark"] .card .form-card {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}

/* inner tiles (top performers and friends): glass lite, no drop, no sheen */
html.t27 .perf-card, html.t27 .card .perf-card, html.t27 .perf-card.highlight {
  border: 1px solid transparent;
  background: var(--lg-tint) padding-box, linear-gradient(var(--bg), var(--bg)) padding-box, var(--lg-rim) border-box;
  box-shadow: var(--lg-edge), 0 1px 2px rgba(23,23,28,.04), 0 10px 22px -18px rgba(23,23,28,.22);
}
html.t27[data-theme="dark"] .perf-card {
  background: var(--lg-tint) padding-box, linear-gradient(var(--bg), var(--bg)) padding-box, var(--lg-rim) border-box !important;
  border-color: transparent !important;
}

/* pill tracks: real frosted glass */
html.t27 .seg,
html.t27 .t27-seg,
html.t27 .dashboard-preset-bar {
  background: var(--lg-track);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid transparent;
  box-shadow: var(--lg-track-edge);
}
/* the sliding pill: Pulse gradient under a glass gloss */
html.t27 .t27-ind {
  background:
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 46%, rgba(255,255,255,0) 54%, rgba(255,255,255,.10) 100%),
    var(--t27-grad);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(30,20,90,.18), inset 0 0 0 1px rgba(255,255,255,.12), var(--sh-accent);
}

@media (prefers-reduced-transparency: reduce) {
  html.t27 .seg,
html.t27 .t27-seg,
html.t27 .dashboard-preset-bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface-2); }
}
@media print {
  html.t27 .card,
html.t27 .kpi,
html.t27 .contacts-card,
html.t27 .att-card,
html.t27 .sm-kpi,
html.t27 .settings-card,
html.t27 .form-card,
html.t27 .auth-card,
html.t27 .email-folders,
html.t27 .email-list-card,
html.t27 .pagination-bar,
html.t27 .deal-card,
html.t27 .leaderboard,
html.t27 .mis-filter-grid,
html.t27 .filter-bar { background: #fff !important; box-shadow: none !important; border: 1px solid #ddd !important; }
}
/* glass inside a glass card: keep the rim and top edge, drop the heavy shadow and the sheen */
html.t27 .card .filter-bar, html.t27 .card .mis-filter-grid, html.t27 .card .pagination-bar, html.t27 .card .leaderboard,
html.t27 .card .contacts-card, html.t27 .card .att-card, html.t27 .card .sm-kpi, html.t27 .card .deal-card, html.t27 .card .settings-card {
  box-shadow: var(--lg-edge), 0 1px 2px rgba(23,23,28,.04);
  --gs: 0 !important;
}
html.t27[data-theme="dark"] .card .filter-bar, html.t27[data-theme="dark"] .card .mis-filter-grid, html.t27[data-theme="dark"] .card .leaderboard,
html.t27[data-theme="dark"] .card .deal-card, html.t27[data-theme="dark"] .card .sm-kpi { box-shadow: var(--lg-edge), 0 1px 2px rgba(0,0,0,.35); }

/* webapp (html.pulse-app): the same content glass on the a26 cards, chips and the header switch */
html.t27.pulse-app .a26-hero, html.t27.pulse-app .a26-stat {
  --lg-sheen: linear-gradient(transparent, transparent);
  border: 1px solid transparent;
  background: var(--lg-tint) padding-box, linear-gradient(var(--bg), var(--bg)) padding-box, var(--lg-rim) border-box;
  box-shadow: var(--lg-edge), var(--lg-drop);
}
html.t27.pulse-app .a26-chip:not(.on) {
  border: 1px solid transparent;
  background: var(--lg-track) padding-box, linear-gradient(var(--bg), var(--bg)) padding-box, var(--lg-rim) border-box;
  box-shadow: var(--lg-edge), 0 4px 12px -8px rgba(23,23,28,.25);
}
html.t27.pulse-app .a26-chip.on {
  border-color: transparent;
  background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.06) 48%, rgba(255,255,255,0) 55%, rgba(255,255,255,.10) 100%), var(--t27-grad);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.12), var(--sh-accent);
}
/* the switch sits on the dark header: dark glass, like the sidebar */
html.t27.pulse-app .a26-seg {
  background: linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.07), 0 10px 24px -16px rgba(0,0,0,.6);
}
html.t27.pulse-app .a26-seg a.on {
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F2F7 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(23,23,28,.06), 0 4px 12px -4px rgba(0,0,0,.45);
}

/* ── 30. The living dashboard ──
   Page glow behind every page head, a living header (date, today's load, a
   heartbeat drawn once), one toolbar for scope and dates, bento numbers with
   trend lines and change chips, an area chart, a podium, presence rings on
   people, brand marks on sources, tinted stage chips, and a hover lift on the
   cards you can act on. Numbers never use the gradient on text. */

/* page glow: Pulse light pooled at the top of the content, fading before the cards */
html.t27:not(.pulse-app) .main { position: relative; isolation: isolate; }
html.t27:not(.pulse-app) .main::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 760px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 70% at 4% -8%, rgba(99, 102, 241, .34), rgba(99, 102, 241, 0) 72%),
    radial-gradient(46% 62% at 54% -14%, rgba(139, 92, 246, .28), rgba(139, 92, 246, 0) 72%),
    radial-gradient(36% 54% at 100% 0%, rgba(34, 211, 238, .22), rgba(34, 211, 238, 0) 72%),
    radial-gradient(30% 34% at 30% 38%, rgba(168, 85, 247, .10), rgba(168, 85, 247, 0) 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 100%);
}
html.t27[data-theme="dark"]:not(.pulse-app) .main::before {
  background:
    radial-gradient(58% 70% at 4% -8%, rgba(99, 102, 241, .46), rgba(99, 102, 241, 0) 72%),
    radial-gradient(46% 62% at 54% -14%, rgba(139, 92, 246, .36), rgba(139, 92, 246, 0) 72%),
    radial-gradient(36% 54% at 100% 0%, rgba(34, 211, 238, .22), rgba(34, 211, 238, 0) 72%),
    radial-gradient(30% 34% at 30% 38%, rgba(168, 85, 247, .14), rgba(168, 85, 247, 0) 70%);
}

/* living header */
html.t27 .t27-today { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
html.t27 .t27-h1-pulse { display: inline-flex; align-items: center; gap: 12px; }
html.t27 .t27-ekg { width: 132px; height: 26px; flex: 0 0 auto; overflow: visible; }
html.t27 .t27-ekg path {
  fill: none; stroke: url(#t27ekgGrad); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: t27-ekg 1500ms var(--ease-out) 250ms forwards;
  filter: drop-shadow(0 0 5px rgba(139, 92, 246, .45));
}
@keyframes t27-ekg { to { stroke-dashoffset: 0; } }
html.t27 .t27-head-line { font-size: 15px; color: var(--ink-2); margin-top: 6px; }
html.t27 .t27-head-scope { color: var(--ink-3); }

/* one toolbar: scope switch left, dates right */
html.t27 .t27-dash-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 2px 0 22px; }
html.t27 .t27-dash-toolbar .dashboard-scope-bar { margin: 0; }
html.t27 .t27-range { position: relative; }
html.t27 .t27-range-pop {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 60; width: 348px; box-sizing: border-box; padding: 18px 18px 16px;
  border-radius: 20px; background: var(--surface); box-shadow: var(--sh-overlay);
  animation: t27-drop 320ms var(--ease-out) both;
}
html.t27 .t27-range-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; color: var(--text); }
html.t27 .t27-range-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html.t27 .t27-range-fields label { margin: 0; }
html.t27 .t27-range-fields label span { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 6px; }
html.t27 .t27-range-fields input { width: 100%; box-sizing: border-box; }
html.t27 .t27-range-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* bento */
html.t27 .t27-bento { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-bottom: 24px; align-items: stretch; }
html.t27 .t27-bento > .t27-hero { margin: 0; display: flex; flex-direction: column; }
html.t27 .t27-bento-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
html.t27 .t27-bento-side .kpi { margin: 0; }
@media (max-width: 1180px) { html.t27 .t27-bento { grid-template-columns: minmax(0, 1fr); } }

/* hero number + area chart */
html.t27 .t27-hero { padding: 22px 24px 14px; }
html.t27 .t27-hero-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
html.t27 .t27-eyebrow { font-size: 13px; font-weight: 500; color: var(--ink-3); }
html.t27 .t27-hero-value { font-size: clamp(32px, 3.1vw, 46px); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; margin: 8px 0; color: var(--text); font-variant-numeric: tabular-nums; }
html.t27 .t27-hero-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
html.t27 .t27-chart { position: relative; flex: 1 1 auto; min-height: 170px; margin: 16px -4px 0; }
html.t27 .t27-chart svg.t27-chart-svg { position: absolute; inset: 0 0 22px 0; width: 100%; height: calc(100% - 22px); overflow: visible; }
html.t27 .t27-chart-x { position: absolute; left: 4px; right: 4px; bottom: 0; height: 18px; display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
html.t27 .t27-chart-tip {
  position: absolute; top: 0; left: 0; transform: translate(-50%, calc(-100% - 12px)); pointer-events: none; white-space: nowrap;
  padding: 7px 10px; border-radius: 10px; background: #17171C; color: #fff; font-size: 12px; line-height: 1.3;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); opacity: 0; transition: opacity 120ms ease;
}
html.t27 .t27-chart-tip b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
html.t27 .t27-chart-tip.on { opacity: 1; }
html.t27 .t27-chart-empty { margin: 24px 0 10px; }

/* stat cards */
html.t27 .t27-stat { padding: 16px 18px 14px; display: flex; flex-direction: column; min-height: 136px; box-sizing: border-box; container-type: inline-size; }   /* the number scales to its card */
html.t27 .t27-stat-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
html.t27 .t27-stat-top .kpi-label { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 500; color: var(--ink-2); text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.t27 .t27-stat-ic {
  width: 32px; height: 32px; border-radius: 999px; display: inline-grid; place-items: center; flex: 0 0 auto; color: var(--primary);
  background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(236, 236, 246, .75));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(99, 102, 241, .16), 0 5px 12px -7px rgba(67, 56, 202, .45);
}
html.t27 .t27-stat-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.t27 .t27-stat-ic.lg { width: 46px; height: 46px; }
html.t27 .t27-stat-ic.lg svg { width: 21px; height: 21px; }
html.t27[data-theme="dark"] .t27-stat-ic { background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03)); color: #C7D2FE; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(165, 180, 252, .18); }
html.t27 .t27-stat .kpi-value { font-size: 22px; font-size: clamp(17px, 8.6cqi, 25px); font-weight: 600; letter-spacing: -.02em; margin: 12px 0 auto; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.t27 .t27-stat-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 10px; min-height: 28px; }
html.t27 .t27-stat-foot .kpi-sub { flex: 1 1 auto; font-size: 12px; line-height: 1.35; color: var(--ink-3); min-width: 0; margin: 0; }
html.t27 .t27-trend { width: 64px; height: 26px; flex: 0 0 64px; overflow: visible; }

/* change chips */
html.t27 .t27-delta { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
html.t27 .t27-delta.up { color: #15803D; background: rgba(34, 197, 94, .12); box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .24); }
html.t27 .t27-delta.down { color: #B91C1C; background: rgba(239, 68, 68, .10); box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .22); }
html.t27[data-theme="dark"] .t27-delta.up { color: #86EFAC; }
html.t27[data-theme="dark"] .t27-delta.down { color: #FCA5A5; }

/* podium */
html.t27 .t27-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 14px; margin: 14px 0 6px; }
html.t27 .t27-pod {
  grid-row: 1; position: relative; text-align: center; padding: 18px 12px 16px; border-radius: 20px; box-sizing: border-box; min-width: 0;
  border: 1px solid transparent;
  background: var(--lg-tint) padding-box, linear-gradient(var(--bg), var(--bg)) padding-box, var(--lg-rim) border-box;
  box-shadow: var(--lg-edge), 0 1px 2px rgba(23, 23, 28, .04), 0 12px 26px -20px rgba(23, 23, 28, .28);
}
html.t27 .t27-pod.p1 { grid-column: 2; padding: 26px 14px 24px; }
html.t27 .t27-pod.p2 { grid-column: 1; }
html.t27 .t27-pod.p3 { grid-column: 3; }
html.t27 .t27-pod-av { position: relative; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; padding: 3px; box-sizing: border-box; background: linear-gradient(135deg, #E5E7EB, #9CA3AF); }
html.t27 .t27-pod.p1 .t27-pod-av { width: 92px; height: 92px; background: var(--t27-grad); box-shadow: 0 12px 28px -12px rgba(99, 102, 241, .65); }
html.t27 .t27-pod.p3 .t27-pod-av { background: linear-gradient(135deg, #FBD5B0, #B45309); }
html.t27 .t27-pod-img {
  width: 100% !important; height: 100% !important; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box; object-fit: cover;
  background: var(--surface); color: var(--text); font-weight: 600; font-size: 22px; border: 2px solid var(--surface);
}
html.t27 .t27-pod.p1 .t27-pod-img { font-size: 30px; }
html.t27 .t27-pod-rank {
  position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: #fff; background: #17171C; box-shadow: 0 0 0 3px var(--surface);
}
html.t27 .t27-pod.p1 .t27-pod-rank { width: 30px; height: 30px; font-size: 13px; background: var(--t27-grad); }
html.t27 .t27-pod-name { font-weight: 600; font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.t27 .t27-pod.p1 .t27-pod-name { font-size: 17px; }
html.t27 .t27-pod-val { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin-top: 4px; color: var(--text); font-variant-numeric: tabular-nums; }
html.t27 .t27-pod.p1 .t27-pod-val { font-size: 21px; }
html.t27 .t27-pod-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
html.t27 .t27-pod-rest { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
html.t27 .t27-pod-rest li { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 14px; background: var(--surface-2); }
html.t27 .t27-rest-rank { width: 20px; text-align: center; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
html.t27 .t27-rest-img { width: 32px !important; height: 32px !important; flex: 0 0 32px; border-radius: 50%; display: grid; place-items: center; object-fit: cover; background: var(--surface); color: var(--text); font-weight: 600; font-size: 13px; box-shadow: inset 0 0 0 1px var(--border); }
html.t27 .t27-rest-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.t27 .t27-pod-rest strong { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { html.t27 .t27-podium { grid-template-columns: minmax(0, 1fr); } html.t27 .t27-pod.p1, html.t27 .t27-pod.p2, html.t27 .t27-pod.p3 { grid-column: 1; grid-row: auto; } }

/* presence: a green ring on people punched in today */
html.t27 .is-in { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #22C55E !important; }
html.t27 .t27-pod-img.is-in { box-shadow: none !important; }
html.t27 .t27-pod-av:has(.is-in)::after {
  content: ""; position: absolute; left: 2px; bottom: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #22C55E; box-shadow: 0 0 0 3px var(--surface);
}
html.t27 .t27-pod.p1 .t27-pod-av:has(.is-in)::after { width: 18px; height: 18px; left: 5px; bottom: 5px; }

/* source badges with real brand marks (added by pulse-theme27-icons.js) */
html.t27 .contact-source-badge.has-brand {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 5px;
  background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important;
  box-shadow: 0 1px 2px rgba(23, 23, 28, .04); font-weight: 500;
}
html.t27 .t27-brand { width: 16px; height: 16px; flex: 0 0 16px; display: block; }

/* stage chips: one quiet tint per kind of stage (class set by pulse-theme27-icons.js) */
html.t27 .contact-stage-pill[class*="t27-st-"] { border: 0 !important; font-weight: 500; }
html.t27 .t27-st-indigo { background: rgba(99, 102, 241, .12) !important; color: #4338CA !important; box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .22); }
html.t27 .t27-st-amber  { background: rgba(245, 158, 11, .14) !important; color: #B45309 !important; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .26); }
html.t27 .t27-st-violet { background: rgba(139, 92, 246, .12) !important; color: #6D28D9 !important; box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .22); }
html.t27 .t27-st-cyan   { background: rgba(6, 182, 212, .12) !important; color: #0E7490 !important; box-shadow: inset 0 0 0 1px rgba(6, 182, 212, .24); }
html.t27 .t27-st-green  { background: rgba(34, 197, 94, .13) !important; color: #15803D !important; box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .25); }
html.t27 .t27-st-slate  { background: rgba(100, 116, 139, .12) !important; color: #475569 !important; box-shadow: inset 0 0 0 1px rgba(100, 116, 139, .22); }
html.t27 .t27-st-orange { background: rgba(249, 115, 22, .12) !important; color: #C2410C !important; box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .24); }
html.t27 .t27-st-rose   { background: rgba(244, 63, 94, .11) !important; color: #BE123C !important; box-shadow: inset 0 0 0 1px rgba(244, 63, 94, .22); }
html.t27[data-theme="dark"] [class*="t27-st-"] { filter: brightness(1.45) saturate(.9); }

/* hover lift on the cards you act on */
html.t27 .t27-stat, html.t27 .t27-pod, html.t27 .kpi:not(.card .kpi), html.t27 .perf-card, html.t27 .deal-card, html.t27 .sm-kpi {
  transition: transform 340ms var(--ease-out), box-shadow 340ms var(--ease-out);
}
@media (hover: hover) {
  html.t27 .t27-stat:hover, html.t27 .t27-pod:hover, html.t27 .kpi:not(.card .kpi):hover,
  html.t27 .perf-card:hover, html.t27 .deal-card:hover, html.t27 .sm-kpi:hover {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px);   /* T27-CARD-MOTION-V1 tilt */
    transition: transform 200ms var(--ease-out), box-shadow 340ms var(--ease-out);
    box-shadow: var(--lg-edge), 0 2px 4px rgba(23, 23, 28, .05), 0 22px 40px -20px rgba(23, 23, 28, .30);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.t27 .t27-ekg path { animation: none; stroke-dashoffset: 0; }
  html.t27 .t27-stat, html.t27 .t27-pod, html.t27 .kpi, html.t27 .perf-card, html.t27 .deal-card, html.t27 .sm-kpi { transition: none; }
  html.t27 .t27-stat:hover, html.t27 .t27-pod:hover, html.t27 .kpi:hover, html.t27 .perf-card:hover { transform: none; }
  html.t27 .t27-range-pop { animation: none; }
}
@media print { html.t27 .main::before, html.t27 .t27-ekg { display: none; } }

/* MIS diagnostic banners: a clear warning tone and a quiet info line, not stray link colours */
html.t27 .mis-diag-warn { background: linear-gradient(180deg, rgba(254, 243, 199, .75), rgba(254, 243, 199, .45)) !important; border: 1px solid rgba(245, 158, 11, .30) !important; border-radius: 14px; color: #92400E !important; }
html.t27 .mis-diag-warn p, html.t27 .mis-diag-warn strong { color: #78350F !important; }
html.t27 .mis-diag-warn a { color: #B45309 !important; font-weight: 600; }
html.t27 .mis-diag-info { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 14px; color: var(--ink-2) !important; }
html.t27 .mis-diag-info .muted { color: var(--ink-3) !important; }
html.t27[data-theme="dark"] .mis-diag-warn { background: rgba(245, 158, 11, .10) !important; border-color: rgba(245, 158, 11, .28) !important; color: #FCD34D !important; }
html.t27[data-theme="dark"] .mis-diag-warn p, html.t27[data-theme="dark"] .mis-diag-warn strong { color: #FDE68A !important; }

/* T27-BOARDS-V1: leaderboards as one horizontal scroller, one board per view, switcher below */
html.t27 .t27-boards { margin-bottom: 24px; }
html.t27 .t27-boards-track {
  display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  scroll-padding-inline: 10px; padding: 10px 10px 16px; margin: -10px -10px 0;
  scrollbar-width: none; outline: none;
}
html.t27 .t27-boards-track::-webkit-scrollbar { display: none; }
html.t27 .t27-boards-track:focus-visible { box-shadow: inset 0 0 0 2px var(--primary-ring); border-radius: 24px; }
html.t27 .t27-board { flex: 0 0 100%; box-sizing: border-box; scroll-snap-align: start; margin: 0 !important; }
html.t27 .t27-boards-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; }
html.t27 .t27-boards-arrow {
  width: 38px; height: 38px; border-radius: 999px; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--ink-2);
  background: var(--lg-track); box-shadow: var(--lg-track-edge);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  transition: color 200ms ease, transform 200ms var(--ease-out), opacity 200ms ease;
}
html.t27 .t27-boards-arrow:hover { color: var(--text); }
html.t27 .t27-boards-arrow:active { transform: scale(.94); }
html.t27 .t27-boards-arrow:disabled { opacity: .38; cursor: default; transform: none; }
html.t27 .t27-boards-arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
html.t27 .t27-boards-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { html.t27 .t27-boards-track { scroll-behavior: auto; } }

/* T27-LEADERBOARD-V2: leaderboard rows
   rank | photo | name + deals | bar (share of the leader) | amount */
html.t27 .t27-board { padding: 22px 22px 14px; }
html.t27 .t27-board-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 4px 14px; }
html.t27 .t27-board-head h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
html.t27 .t27-board-sub { margin: 3px 0 0; font-size: 13px; color: var(--ink-3); }
html.t27 .t27-board-count { flex: 0 0 auto; height: 26px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; color: var(--ink-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
html.t27 .t27-board-empty { margin: 8px 4px 12px; }

html.t27 .t27-lb { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: none; }
html.t27 .t27-lb-row {
  display: grid; grid-template-columns: 28px 42px minmax(0, 1fr) minmax(48px, 1.4fr) minmax(158px, max-content);   /* the amount never shrinks; the bar gives way first */ align-items: center; column-gap: 14px;
  min-height: 58px; padding: 8px 14px; border-radius: 16px; position: relative;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
html.t27 .t27-lb-row::before { margin: 0; content: none; }
html.t27 .t27-lb-row + .t27-lb-row::after {
  content: ""; position: absolute; left: 100px; right: 14px; top: -1px; height: 1px; background: var(--border); opacity: .55; pointer-events: none;
}
html.t27 .t27-lb-row:hover { background: var(--surface-2); }
html.t27 .t27-lb-row:hover::after, html.t27 .t27-lb-row:hover + .t27-lb-row::after { opacity: 0; }

/* rank */
html.t27 .t27-lb-rank {
  width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center;
  font-size: 13px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
html.t27 .t27-lb-row.is-top .t27-lb-rank { color: #fff; font-size: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 10px -5px rgba(23, 23, 28, .45); }
html.t27 .t27-lb-row.t1 .t27-lb-rank { background: linear-gradient(145deg, #FCD34D, #D97706); }
html.t27 .t27-lb-row.t2 .t27-lb-rank { background: linear-gradient(145deg, #E5E7EB, #8B93A1); }
html.t27 .t27-lb-row.t3 .t27-lb-rank { background: linear-gradient(145deg, #F5C59B, #B45309); }

/* photo */
html.t27 .t27-lb-av { position: relative; width: 42px; height: 42px; border-radius: 50%; padding: 2px; box-sizing: border-box; background: transparent; }
html.t27 .t27-lb-row.t1 .t27-lb-av { background: linear-gradient(145deg, #FCD34D, #D97706); }
html.t27 .t27-lb-row.t2 .t27-lb-av { background: linear-gradient(145deg, #E5E7EB, #8B93A1); }
html.t27 .t27-lb-row.t3 .t27-lb-av { background: linear-gradient(145deg, #F5C59B, #B45309); }
html.t27 .t27-lb-img {
  width: 100% !important; height: 100% !important; border-radius: 50% !important; display: grid; place-items: center; box-sizing: border-box; object-fit: cover;
  font-size: 15px; font-weight: 600; color: #fff; background: var(--ink-3);
}
html.t27 .t27-lb-row.is-top .t27-lb-img { border: 2px solid var(--surface); }
html.t27 .t27-lb-img.is-in { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px #22C55E !important; }
html.t27 .t27-tint-0 { background: linear-gradient(145deg, #818CF8, #4F46E5) !important; }
html.t27 .t27-tint-1 { background: linear-gradient(145deg, #C4B5FD, #7C3AED) !important; }
html.t27 .t27-tint-2 { background: linear-gradient(145deg, #67E8F9, #0891B2) !important; }
html.t27 .t27-tint-3 { background: linear-gradient(145deg, #F9A8D4, #DB2777) !important; }
html.t27 .t27-tint-4 { background: linear-gradient(145deg, #86EFAC, #16A34A) !important; }
html.t27 .t27-tint-5 { background: linear-gradient(145deg, #FDBA74, #EA580C) !important; }

/* name + deals */
html.t27 .t27-lb-who { display: flex; flex-direction: column; min-width: 0; gap: 1px; text-align: left; }
html.t27 .t27-lb-name { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.t27 .t27-lb-meta { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* share of the leader */
html.t27 .t27-lb-bar { display: block; height: 6px; border-radius: 999px; background: rgba(23, 23, 28, .06); overflow: hidden; }
html.t27 .t27-lb-bar i {
  display: block; height: 100%; border-radius: inherit; background: var(--t27-grad);
  width: calc(var(--w, 0) * 100%); min-width: 6px;
  transform-origin: left center; transform: scaleX(0); opacity: .4;   /* waits until the list is on screen */
}
html.t27 .t27-lb-row:not(.is-top) .t27-lb-bar i { background: linear-gradient(90deg, rgba(99, 102, 241, .55), rgba(139, 92, 246, .55)); }
/* grow: each bar stretches out from the left when its board comes into view, one row after another */
html.t27 .t27-lb.lb-in .t27-lb-bar i { animation: t27-lb-grow 1100ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
@keyframes t27-lb-grow {
  0%   { transform: scaleX(0); opacity: .4; border-radius: 999px; }
  100% { transform: scaleX(1); opacity: 1; }
}
html.t27[data-theme="dark"] .t27-lb-bar { background: rgba(255, 255, 255, .08); }

/* amount */
html.t27 .t27-lb-amt { justify-self: end; padding-left: 4px; font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.005em; }
html.t27 .t27-lb-row.t1 .t27-lb-amt { font-size: 16px; }

/* podium places 4 and 5 use the same row */
html.t27 .t27-lb-rest { margin-top: 12px; }

@media (max-width: 900px) {
  html.t27 .t27-lb-row { grid-template-columns: 28px 40px minmax(0, 1fr) auto; }
  html.t27 .t27-lb-bar { display: none; }
  html.t27 .t27-lb-row + .t27-lb-row::after { left: 96px; }
}
@media (prefers-reduced-motion: reduce) { html.t27 .t27-lb-bar i, html.t27 .t27-lb.lb-in .t27-lb-bar i { animation: none; transform: none; opacity: 1; } }

/* charts removed (2026-09-15): the deal value card holds the number on its own, spread top to bottom */
html.t27 .t27-hero { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; padding-bottom: 22px; }
html.t27 .t27-hero .t27-hero-head { flex: 1 1 auto; align-items: stretch; }
html.t27 .t27-hero .t27-hero-head > div { display: flex; flex-direction: column; }
html.t27 .t27-hero .t27-hero-value { margin-top: auto; padding-top: 18px; font-size: clamp(38px, 3.8vw, 58px); }
html.t27 .t27-hero .t27-hero-sub { margin-top: 10px; }
html.t27 .t27-stat-foot { min-height: 0; }

/* ── T27-CARD-MOTION-V1 ─────────────────────────────────────────────────────
   1. soft entrance: dashboard cards rise in 60ms apart (CSS only, runs once
      per page, never hides content if scripts fail)
   2. tilt + edge light: the card under the pointer leans up to 2deg toward it
      and its 1px glass rim lights up where the pointer is (pulse-theme27.js)
   3. heartbeat watermark: a faint Pulse line drawn once behind the deal value */
@property --ge { syntax: "<number>"; inherits: true; initial-value: 0; }
html.t27 .card, html.t27 .kpi, html.t27 .t27-pod { transition: transform 340ms var(--ease-out), box-shadow 340ms var(--ease-out), --ge 320ms ease; }
html.t27 .t27-pod { --lg-edgelight: radial-gradient(150px circle at var(--gx, -400px) var(--gy, -400px), rgba(139,92,246,var(--ge)), rgba(139,92,246,0) 72%);
  background: var(--lg-tint) padding-box, linear-gradient(var(--bg), var(--bg)) padding-box, var(--lg-edgelight) border-box, var(--lg-rim) border-box; }
@media (hover: hover) {
  html.t27 .t27-hero:hover { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 220ms var(--ease-out), --ge 320ms ease; }
}

@keyframes t27-enter { from { opacity: 0; transform: translateY(14px); } }
html.t27 .dash-desktop .t27-bento > .t27-hero,
html.t27 .dash-desktop .t27-bento-side > *,
html.t27 .dash-desktop .t27-race,
html.t27 .dash-desktop .t27-boards,
html.t27 .dash-desktop > section.card,
html.t27 .dash-desktop > .grid-2 > .card {
  animation: t27-enter 560ms var(--ease-out) backwards;
  animation-delay: calc(var(--ei, 6) * 60ms);
}
html.t27 .dash-desktop .t27-bento > .t27-hero { --ei: 0; }
html.t27 .dash-desktop .t27-bento-side > :nth-child(1) { --ei: 1; }
html.t27 .dash-desktop .t27-bento-side > :nth-child(2) { --ei: 2; }
html.t27 .dash-desktop .t27-bento-side > :nth-child(3) { --ei: 3; }
html.t27 .dash-desktop .t27-bento-side > :nth-child(4) { --ei: 4; }
html.t27 .dash-desktop .t27-race { --ei: 5; }

html.t27 .t27-hero { position: relative; overflow: hidden; isolation: isolate; }
html.t27 .t27-hero > *:not(.t27-hero-ekg) { position: relative; z-index: 1; }
html.t27 .t27-hero-ekg { position: absolute; left: 0; right: 0; top: 14%; height: 38%; width: 100%; z-index: 0; pointer-events: none; color: var(--primary); opacity: .14; }
html.t27[data-theme="dark"] .t27-hero-ekg { color: #A5B4FC; opacity: .2; }
html.t27 .t27-hero-ekg path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: t27-ekg 1800ms var(--ease-out) 350ms forwards; }
html.t27 .t27-hero-ekg path.glow { stroke-width: 7; opacity: .35; filter: blur(3px); }

@media (prefers-reduced-motion: reduce) {
  html.t27 .dash-desktop .t27-bento > .t27-hero, html.t27 .dash-desktop .t27-bento-side > *, html.t27 .dash-desktop .t27-race,
  html.t27 .dash-desktop .t27-boards, html.t27 .dash-desktop > section.card, html.t27 .dash-desktop > .grid-2 > .card { animation: none; }
  html.t27 .t27-hero-ekg path { animation: none; stroke-dashoffset: 0; }
}


/* ============================================================
   CONTRAST-SWEEP-V1 (15 Sep): automated sweep of every page, three
   surfaces, light + dark. Fixes text that measured under 3:1.
   A. Dark: inline light literals left over from the pre-theme pages.
   B. Dark: components that hard-code white panels.
   C. Dark: tinted pills whose ink was tuned for a white ground.
   D. Light: status inks too pale to read as text.
   ============================================================ */
html.t27[data-theme="dark"] { --ink-link: #A5B4FC; }

/* A. inline literals. Only text colour with no inline background, so the
   light-tint + dark-ink chips (which stay readable) are left alone. */
html.t27[data-theme="dark"] [style*="color: #0D1320"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color: #0F172A"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color: #0f172a"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color: #111827"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color: #12172B"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color: #1A1D29"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color: #1E293B"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color: #1E3A8A"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color: #1F2937"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color: #1a1d29"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color: #1e293b"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color: #1e3a8a"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color: #1f2937"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color: #334155"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color: #374151"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color:#0D1320"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color:#0F172A"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color:#0f172a"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color:#111827"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color:#12172B"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color:#1A1D29"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color:#1E293B"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color:#1E3A8A"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color:#1F2937"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color:#1a1d29"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color:#1e293b"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color:#1e3a8a"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color:#1f2937"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color:#334155"]:not([style*="background"]),
html.t27[data-theme="dark"] [style*="color:#374151"]:not([style*="background"]) { color: var(--text) !important; }
html.t27[data-theme="dark"] [style*="background-color: #F1F5F9"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color: #F8FAFC"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color: #FFF;"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color: #FFFFFF"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color: #f1f5f9"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color: #f3f4f6"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color: #f8fafc"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color: #f9fafb"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color: #fafafa"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color: #fff;"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color: #ffffff"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color: white"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color:#F1F5F9"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color:#F8FAFC"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color:#FFF;"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color:#FFFFFF"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color:#f1f5f9"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color:#f3f4f6"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color:#f8fafc"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color:#f9fafb"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color:#fafafa"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color:#fff;"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color:#ffffff"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background-color:white"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background: #F1F5F9"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background: #F8FAFC"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background: #FFF;"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background: #FFFFFF"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background: #f1f5f9"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background: #f3f4f6"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background: #f8fafc"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background: #f9fafb"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background: #fafafa"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background: #fff;"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background: #ffffff"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background: white"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background:#F1F5F9"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background:#F8FAFC"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background:#FFF;"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background:#FFFFFF"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background:#f1f5f9"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background:#f3f4f6"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background:#f8fafc"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background:#f9fafb"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background:#fafafa"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background:#fff;"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background:#ffffff"]:not([style*="color:"]),
html.t27[data-theme="dark"] [style*="background:white"]:not([style*="color:"]) { background: var(--surface-2) !important; }

/* B. white panels */
html.t27[data-theme="dark"] .fc,
html.t27[data-theme="dark"] .tc-table,
html.t27[data-theme="dark"] .tc-empty,
html.t27[data-theme="dark"] .tc-modal,
html.t27[data-theme="dark"] .chat-empty,
html.t27[data-theme="dark"] .deal-card,
html.t27[data-theme="dark"] .hr-stat,
html.t27[data-theme="dark"] .inv-fixed,
html.t27[data-theme="dark"] .bdoc,
html.t27[data-theme="dark"] .docs-section .checkbox-row,
html.t27[data-theme="dark"] .perm-pick,
html.t27[data-theme="dark"] .perm-group .perm-pick:hover,
html.t27[data-theme="dark"] .selected-location,
html.t27[data-theme="dark"] .manual-punch-form,
html.t27[data-theme="dark"] .att-card,
html.t27[data-theme="dark"] .report-kpi,
html.t27[data-theme="dark"] .ar-kpi,
html.t27[data-theme="dark"] .preset,
html.t27[data-theme="dark"] .preset-sidebar,
html.t27[data-theme="dark"] .theme-preview { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }
html.t27[data-theme="dark"] .kanban-col,
html.t27[data-theme="dark"] .tc-table th,
html.t27[data-theme="dark"] .tc-who,
html.t27[data-theme="dark"] .ar-chip:not(.on),
html.t27[data-theme="dark"] section.card pre,
html.t27[data-theme="dark"] .card pre { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--ink-2) !important; }
html.t27[data-theme="dark"] .tc-table td,
html.t27[data-theme="dark"] .fc td,
html.t27[data-theme="dark"] .fc th,
html.t27[data-theme="dark"] .fc .fc-scrollgrid { border-color: var(--border) !important; }
html.t27[data-theme="dark"] .tc-table tbody tr:hover,
html.t27[data-theme="dark"] .tc-table tbody tr.on { background: rgba(255,255,255,.04) !important; }
html.t27[data-theme="dark"] .fc a,
html.t27[data-theme="dark"] .fc .fc-toolbar-title,
html.t27[data-theme="dark"] .fc-col-header-cell-cushion,
html.t27[data-theme="dark"] .fc-daygrid-day-number,
html.t27[data-theme="dark"] .tc-name,
html.t27[data-theme="dark"] .deal-title,
html.t27[data-theme="dark"] .kanban-col-title,
html.t27[data-theme="dark"] .hr-stat-value,
html.t27[data-theme="dark"] .sm-kpi-num,
html.t27[data-theme="dark"] .bdoc-title,
html.t27[data-theme="dark"] .notif-row-title,
html.t27[data-theme="dark"] td > strong:not([style*="color"]),
html.t27[data-theme="dark"] .chat-empty h2 { color: var(--text) !important; }
html.t27[data-theme="dark"] .fc .fc-day-other .fc-daygrid-day-number { color: var(--ink-3) !important; }
html.t27[data-theme="dark"] .fc .fc-day-today { background: rgba(129,140,248,.12) !important; }
html.t27[data-theme="dark"] .tc-sub,
html.t27[data-theme="dark"] .tc-role,
html.t27[data-theme="dark"] .report-kpi-sub,
html.t27[data-theme="dark"] .ar-kpi-label,
html.t27[data-theme="dark"] .kanban-col-sub,
html.t27[data-theme="dark"] .deal-meta,
html.t27[data-theme="dark"] .hr-stat-sub,
html.t27[data-theme="dark"] .tc-pill.none { color: var(--ink-2) !important; }
html.t27[data-theme="dark"] .tc-pill,
html.t27[data-theme="dark"] .tc-btn.ghost { background: rgba(129,140,248,.16) !important; color: var(--ink-link) !important; }
html.t27[data-theme="dark"] .map-row.suggested { background: rgba(234,179,8,.08) !important; }
html.t27[data-theme="dark"] .map-row.ambiguous { background: rgba(249,115,22,.08) !important; }
html.t27[data-theme="dark"] .map-row td { border-color: var(--border) !important; }
html.t27[data-theme="dark"] .report-kpi-icon { background: var(--surface-2) !important; }
html.t27[data-theme="dark"] .wf-tab.on,
html.t27[data-theme="dark"] .auto-tab.active,
html.t27[data-theme="dark"] .wf-tab:hover,
html.t27[data-theme="dark"] .auto-tab:hover,
html.t27[data-theme="dark"] .ts-control .item,
html.t27[data-theme="dark"] .ts-wrapper .ts-control .item { color: var(--ink-link) !important; }
html.t27[data-theme="dark"] body > h1,
html.t27[data-theme="dark"] body > p,
html.t27[data-theme="dark"] body > h2,
html.t27[data-theme="dark"] body > ul li { color: var(--text); }

/* C. tinted pills: explicit night inks instead of the brightness filter */
html.t27[data-theme="dark"] [class*="t27-st-"] { filter: none; }
html.t27[data-theme="dark"] .t27-st-indigo { color: #A5B4FC !important; }
html.t27[data-theme="dark"] .t27-st-amber { color: #FCD34D !important; }
html.t27[data-theme="dark"] .t27-st-violet { color: #C4B5FD !important; }
html.t27[data-theme="dark"] .t27-st-cyan { color: #67E8F9 !important; }
html.t27[data-theme="dark"] .t27-st-green { color: #86EFAC !important; }
html.t27[data-theme="dark"] .t27-st-slate { color: #CBD5E1 !important; }
html.t27[data-theme="dark"] .t27-st-orange { color: #FDBA74 !important; }
html.t27[data-theme="dark"] .t27-st-rose { color: #FDA4AF !important; }
html.t27[data-theme="dark"] .pill.small,
html.t27[data-theme="dark"] .contact-source-badge.source-other,
html.t27[data-theme="dark"] .user-badge { color: var(--text) !important; }
html.t27[data-theme="dark"] .leave-status-pill,
html.t27[data-theme="dark"] .lv-pill,
html.t27[data-theme="dark"] .cr-pill,
html.t27[data-theme="dark"] .opp-tag { filter: none; }

/* D. light mode: status inks that were too pale for text */
html.t27:not([data-theme="dark"]) [style*="color:#10b981"],
html.t27:not([data-theme="dark"]) [style*="color: #10b981"],
html.t27:not([data-theme="dark"]) [style*="color:#10B981"],
html.t27:not([data-theme="dark"]) [style*="color: #10B981"] { color: #047857 !important; }
html.t27:not([data-theme="dark"]) .att-pill[style*="20;"],
html.t27:not([data-theme="dark"]) .ath-pill[style*="20;"] { filter: brightness(.68) saturate(1.3); }
html.t27:not([data-theme="dark"]) .leave-status-pill,
html.t27:not([data-theme="dark"]) .lv-pill,
html.t27:not([data-theme="dark"]) .cr-pill,
html.t27:not([data-theme="dark"]) .opp-col-count { filter: brightness(.72) saturate(1.25); }
html.t27:not([data-theme="dark"]) .report-kpi-sub,
html.t27:not([data-theme="dark"]) .ar-kpi-label,
html.t27:not([data-theme="dark"]) .opp-more-note,
html.t27:not([data-theme="dark"]) .user-badge,
html.t27:not([data-theme="dark"]) table th { color: var(--ink-3) !important; }   /* LIGHT-INK-V1 */
html.t27:not([data-theme="dark"]) .split-block .muted { color: rgba(255,255,255,.9) !important; }
html.t27:not([data-theme="dark"]) .form-actions a.btn[style*="#10b981"],
html.t27:not([data-theme="dark"]) .btn-success { background: #047857 !important; }
html.t27:not([data-theme="dark"]) .social-link-platform.has-brand strong { filter: brightness(.72); }


/* CONTRAST-SWEEP-V1b: pastel info boxes written inline (background:#eff6ff
   and friends). In dark mode the box turns into a translucent tint of the
   same hue, and the deep inline inks inside it lift to the matching light
   ink. Chips that set both inline get the same tint + light ink. */
html.t27[data-theme="dark"] [style*="background-color: #DBEAFE"],
html.t27[data-theme="dark"] [style*="background-color: #E0E7FF"],
html.t27[data-theme="dark"] [style*="background-color: #E0F2FE"],
html.t27[data-theme="dark"] [style*="background-color: #EDE9FE"],
html.t27[data-theme="dark"] [style*="background-color: #EEF0FD"],
html.t27[data-theme="dark"] [style*="background-color: #EEF2FF"],
html.t27[data-theme="dark"] [style*="background-color: #EFF6FF"],
html.t27[data-theme="dark"] [style*="background-color: #F0F9FF"],
html.t27[data-theme="dark"] [style*="background-color: #F5F3FF"],
html.t27[data-theme="dark"] [style*="background-color: #dbeafe"],
html.t27[data-theme="dark"] [style*="background-color: #e0e7ff"],
html.t27[data-theme="dark"] [style*="background-color: #e0f2fe"],
html.t27[data-theme="dark"] [style*="background-color: #ede9fe"],
html.t27[data-theme="dark"] [style*="background-color: #eef0fd"],
html.t27[data-theme="dark"] [style*="background-color: #eef2ff"],
html.t27[data-theme="dark"] [style*="background-color: #eff6ff"],
html.t27[data-theme="dark"] [style*="background-color: #f0f9ff"],
html.t27[data-theme="dark"] [style*="background-color: #f5f3ff"],
html.t27[data-theme="dark"] [style*="background-color:#DBEAFE"],
html.t27[data-theme="dark"] [style*="background-color:#E0E7FF"],
html.t27[data-theme="dark"] [style*="background-color:#E0F2FE"],
html.t27[data-theme="dark"] [style*="background-color:#EDE9FE"],
html.t27[data-theme="dark"] [style*="background-color:#EEF0FD"],
html.t27[data-theme="dark"] [style*="background-color:#EEF2FF"],
html.t27[data-theme="dark"] [style*="background-color:#EFF6FF"],
html.t27[data-theme="dark"] [style*="background-color:#F0F9FF"],
html.t27[data-theme="dark"] [style*="background-color:#F5F3FF"],
html.t27[data-theme="dark"] [style*="background-color:#dbeafe"],
html.t27[data-theme="dark"] [style*="background-color:#e0e7ff"],
html.t27[data-theme="dark"] [style*="background-color:#e0f2fe"],
html.t27[data-theme="dark"] [style*="background-color:#ede9fe"],
html.t27[data-theme="dark"] [style*="background-color:#eef0fd"],
html.t27[data-theme="dark"] [style*="background-color:#eef2ff"],
html.t27[data-theme="dark"] [style*="background-color:#eff6ff"],
html.t27[data-theme="dark"] [style*="background-color:#f0f9ff"],
html.t27[data-theme="dark"] [style*="background-color:#f5f3ff"],
html.t27[data-theme="dark"] [style*="background: #DBEAFE"],
html.t27[data-theme="dark"] [style*="background: #E0E7FF"],
html.t27[data-theme="dark"] [style*="background: #E0F2FE"],
html.t27[data-theme="dark"] [style*="background: #EDE9FE"],
html.t27[data-theme="dark"] [style*="background: #EEF0FD"],
html.t27[data-theme="dark"] [style*="background: #EEF2FF"],
html.t27[data-theme="dark"] [style*="background: #EFF6FF"],
html.t27[data-theme="dark"] [style*="background: #F0F9FF"],
html.t27[data-theme="dark"] [style*="background: #F5F3FF"],
html.t27[data-theme="dark"] [style*="background: #dbeafe"],
html.t27[data-theme="dark"] [style*="background: #e0e7ff"],
html.t27[data-theme="dark"] [style*="background: #e0f2fe"],
html.t27[data-theme="dark"] [style*="background: #ede9fe"],
html.t27[data-theme="dark"] [style*="background: #eef0fd"],
html.t27[data-theme="dark"] [style*="background: #eef2ff"],
html.t27[data-theme="dark"] [style*="background: #eff6ff"],
html.t27[data-theme="dark"] [style*="background: #f0f9ff"],
html.t27[data-theme="dark"] [style*="background: #f5f3ff"],
html.t27[data-theme="dark"] [style*="background:#DBEAFE"],
html.t27[data-theme="dark"] [style*="background:#E0E7FF"],
html.t27[data-theme="dark"] [style*="background:#E0F2FE"],
html.t27[data-theme="dark"] [style*="background:#EDE9FE"],
html.t27[data-theme="dark"] [style*="background:#EEF0FD"],
html.t27[data-theme="dark"] [style*="background:#EEF2FF"],
html.t27[data-theme="dark"] [style*="background:#EFF6FF"],
html.t27[data-theme="dark"] [style*="background:#F0F9FF"],
html.t27[data-theme="dark"] [style*="background:#F5F3FF"],
html.t27[data-theme="dark"] [style*="background:#dbeafe"],
html.t27[data-theme="dark"] [style*="background:#e0e7ff"],
html.t27[data-theme="dark"] [style*="background:#e0f2fe"],
html.t27[data-theme="dark"] [style*="background:#ede9fe"],
html.t27[data-theme="dark"] [style*="background:#eef0fd"],
html.t27[data-theme="dark"] [style*="background:#eef2ff"],
html.t27[data-theme="dark"] [style*="background:#eff6ff"],
html.t27[data-theme="dark"] [style*="background:#f0f9ff"],
html.t27[data-theme="dark"] [style*="background:#f5f3ff"] { background: rgba(99,102,241,.12) !important; border-color: rgba(129,140,248,.30) !important; }
html.t27[data-theme="dark"] [style*="color: #075985"],
html.t27[data-theme="dark"] [style*="color: #0C4A6E"],
html.t27[data-theme="dark"] [style*="color: #0c4a6e"],
html.t27[data-theme="dark"] [style*="color: #1D4ED8"],
html.t27[data-theme="dark"] [style*="color: #1E3A8A"],
html.t27[data-theme="dark"] [style*="color: #1E40AF"],
html.t27[data-theme="dark"] [style*="color: #1d4ed8"],
html.t27[data-theme="dark"] [style*="color: #1e3a8a"],
html.t27[data-theme="dark"] [style*="color: #1e40af"],
html.t27[data-theme="dark"] [style*="color: #3730A3"],
html.t27[data-theme="dark"] [style*="color: #3730a3"],
html.t27[data-theme="dark"] [style*="color: #4338CA"],
html.t27[data-theme="dark"] [style*="color: #4338ca"],
html.t27[data-theme="dark"] [style*="color: #5B21B6"],
html.t27[data-theme="dark"] [style*="color: #5b21b6"],
html.t27[data-theme="dark"] [style*="color:#075985"],
html.t27[data-theme="dark"] [style*="color:#0C4A6E"],
html.t27[data-theme="dark"] [style*="color:#0c4a6e"],
html.t27[data-theme="dark"] [style*="color:#1D4ED8"],
html.t27[data-theme="dark"] [style*="color:#1E3A8A"],
html.t27[data-theme="dark"] [style*="color:#1E40AF"],
html.t27[data-theme="dark"] [style*="color:#1d4ed8"],
html.t27[data-theme="dark"] [style*="color:#1e3a8a"],
html.t27[data-theme="dark"] [style*="color:#1e40af"],
html.t27[data-theme="dark"] [style*="color:#3730A3"],
html.t27[data-theme="dark"] [style*="color:#3730a3"],
html.t27[data-theme="dark"] [style*="color:#4338CA"],
html.t27[data-theme="dark"] [style*="color:#4338ca"],
html.t27[data-theme="dark"] [style*="color:#5B21B6"],
html.t27[data-theme="dark"] [style*="color:#5b21b6"] { color: #BFD0FF !important; }
html.t27[data-theme="dark"] [style*="background-color: #FEF3C7"],
html.t27[data-theme="dark"] [style*="background-color: #FEF9C3"],
html.t27[data-theme="dark"] [style*="background-color: #FEFCE8"],
html.t27[data-theme="dark"] [style*="background-color: #FFEDD5"],
html.t27[data-theme="dark"] [style*="background-color: #FFF7ED"],
html.t27[data-theme="dark"] [style*="background-color: #FFFBEB"],
html.t27[data-theme="dark"] [style*="background-color: #fef3c7"],
html.t27[data-theme="dark"] [style*="background-color: #fef9c3"],
html.t27[data-theme="dark"] [style*="background-color: #fefce8"],
html.t27[data-theme="dark"] [style*="background-color: #ffedd5"],
html.t27[data-theme="dark"] [style*="background-color: #fff7ed"],
html.t27[data-theme="dark"] [style*="background-color: #fffbeb"],
html.t27[data-theme="dark"] [style*="background-color:#FEF3C7"],
html.t27[data-theme="dark"] [style*="background-color:#FEF9C3"],
html.t27[data-theme="dark"] [style*="background-color:#FEFCE8"],
html.t27[data-theme="dark"] [style*="background-color:#FFEDD5"],
html.t27[data-theme="dark"] [style*="background-color:#FFF7ED"],
html.t27[data-theme="dark"] [style*="background-color:#FFFBEB"],
html.t27[data-theme="dark"] [style*="background-color:#fef3c7"],
html.t27[data-theme="dark"] [style*="background-color:#fef9c3"],
html.t27[data-theme="dark"] [style*="background-color:#fefce8"],
html.t27[data-theme="dark"] [style*="background-color:#ffedd5"],
html.t27[data-theme="dark"] [style*="background-color:#fff7ed"],
html.t27[data-theme="dark"] [style*="background-color:#fffbeb"],
html.t27[data-theme="dark"] [style*="background: #FEF3C7"],
html.t27[data-theme="dark"] [style*="background: #FEF9C3"],
html.t27[data-theme="dark"] [style*="background: #FEFCE8"],
html.t27[data-theme="dark"] [style*="background: #FFEDD5"],
html.t27[data-theme="dark"] [style*="background: #FFF7ED"],
html.t27[data-theme="dark"] [style*="background: #FFFBEB"],
html.t27[data-theme="dark"] [style*="background: #fef3c7"],
html.t27[data-theme="dark"] [style*="background: #fef9c3"],
html.t27[data-theme="dark"] [style*="background: #fefce8"],
html.t27[data-theme="dark"] [style*="background: #ffedd5"],
html.t27[data-theme="dark"] [style*="background: #fff7ed"],
html.t27[data-theme="dark"] [style*="background: #fffbeb"],
html.t27[data-theme="dark"] [style*="background:#FEF3C7"],
html.t27[data-theme="dark"] [style*="background:#FEF9C3"],
html.t27[data-theme="dark"] [style*="background:#FEFCE8"],
html.t27[data-theme="dark"] [style*="background:#FFEDD5"],
html.t27[data-theme="dark"] [style*="background:#FFF7ED"],
html.t27[data-theme="dark"] [style*="background:#FFFBEB"],
html.t27[data-theme="dark"] [style*="background:#fef3c7"],
html.t27[data-theme="dark"] [style*="background:#fef9c3"],
html.t27[data-theme="dark"] [style*="background:#fefce8"],
html.t27[data-theme="dark"] [style*="background:#ffedd5"],
html.t27[data-theme="dark"] [style*="background:#fff7ed"],
html.t27[data-theme="dark"] [style*="background:#fffbeb"] { background: rgba(245,158,11,.10) !important; border-color: rgba(245,158,11,.30) !important; }
html.t27[data-theme="dark"] [style*="color: #78350F"],
html.t27[data-theme="dark"] [style*="color: #78350f"],
html.t27[data-theme="dark"] [style*="color: #854D0E"],
html.t27[data-theme="dark"] [style*="color: #854d0e"],
html.t27[data-theme="dark"] [style*="color: #92400E"],
html.t27[data-theme="dark"] [style*="color: #92400e"],
html.t27[data-theme="dark"] [style*="color: #9A3412"],
html.t27[data-theme="dark"] [style*="color: #9a3412"],
html.t27[data-theme="dark"] [style*="color: #A16207"],
html.t27[data-theme="dark"] [style*="color: #B45309"],
html.t27[data-theme="dark"] [style*="color: #a16207"],
html.t27[data-theme="dark"] [style*="color: #b45309"],
html.t27[data-theme="dark"] [style*="color:#78350F"],
html.t27[data-theme="dark"] [style*="color:#78350f"],
html.t27[data-theme="dark"] [style*="color:#854D0E"],
html.t27[data-theme="dark"] [style*="color:#854d0e"],
html.t27[data-theme="dark"] [style*="color:#92400E"],
html.t27[data-theme="dark"] [style*="color:#92400e"],
html.t27[data-theme="dark"] [style*="color:#9A3412"],
html.t27[data-theme="dark"] [style*="color:#9a3412"],
html.t27[data-theme="dark"] [style*="color:#A16207"],
html.t27[data-theme="dark"] [style*="color:#B45309"],
html.t27[data-theme="dark"] [style*="color:#a16207"],
html.t27[data-theme="dark"] [style*="color:#b45309"] { color: #FCD34D !important; }
html.t27[data-theme="dark"] [style*="background-color: #FCE7F3"],
html.t27[data-theme="dark"] [style*="background-color: #FEE2E2"],
html.t27[data-theme="dark"] [style*="background-color: #FEF2F2"],
html.t27[data-theme="dark"] [style*="background-color: #FFE4E6"],
html.t27[data-theme="dark"] [style*="background-color: #fce7f3"],
html.t27[data-theme="dark"] [style*="background-color: #fee2e2"],
html.t27[data-theme="dark"] [style*="background-color: #fef2f2"],
html.t27[data-theme="dark"] [style*="background-color: #ffe4e6"],
html.t27[data-theme="dark"] [style*="background-color:#FCE7F3"],
html.t27[data-theme="dark"] [style*="background-color:#FEE2E2"],
html.t27[data-theme="dark"] [style*="background-color:#FEF2F2"],
html.t27[data-theme="dark"] [style*="background-color:#FFE4E6"],
html.t27[data-theme="dark"] [style*="background-color:#fce7f3"],
html.t27[data-theme="dark"] [style*="background-color:#fee2e2"],
html.t27[data-theme="dark"] [style*="background-color:#fef2f2"],
html.t27[data-theme="dark"] [style*="background-color:#ffe4e6"],
html.t27[data-theme="dark"] [style*="background: #FCE7F3"],
html.t27[data-theme="dark"] [style*="background: #FEE2E2"],
html.t27[data-theme="dark"] [style*="background: #FEF2F2"],
html.t27[data-theme="dark"] [style*="background: #FFE4E6"],
html.t27[data-theme="dark"] [style*="background: #fce7f3"],
html.t27[data-theme="dark"] [style*="background: #fee2e2"],
html.t27[data-theme="dark"] [style*="background: #fef2f2"],
html.t27[data-theme="dark"] [style*="background: #ffe4e6"],
html.t27[data-theme="dark"] [style*="background:#FCE7F3"],
html.t27[data-theme="dark"] [style*="background:#FEE2E2"],
html.t27[data-theme="dark"] [style*="background:#FEF2F2"],
html.t27[data-theme="dark"] [style*="background:#FFE4E6"],
html.t27[data-theme="dark"] [style*="background:#fce7f3"],
html.t27[data-theme="dark"] [style*="background:#fee2e2"],
html.t27[data-theme="dark"] [style*="background:#fef2f2"],
html.t27[data-theme="dark"] [style*="background:#ffe4e6"] { background: rgba(239,68,68,.10) !important; border-color: rgba(248,113,113,.30) !important; }
html.t27[data-theme="dark"] [style*="color: #991B1B"],
html.t27[data-theme="dark"] [style*="color: #991b1b"],
html.t27[data-theme="dark"] [style*="color: #9D174D"],
html.t27[data-theme="dark"] [style*="color: #9d174d"],
html.t27[data-theme="dark"] [style*="color: #B91C1C"],
html.t27[data-theme="dark"] [style*="color: #BE123C"],
html.t27[data-theme="dark"] [style*="color: #DC2626"],
html.t27[data-theme="dark"] [style*="color: #b91c1c"],
html.t27[data-theme="dark"] [style*="color: #be123c"],
html.t27[data-theme="dark"] [style*="color: #dc2626"],
html.t27[data-theme="dark"] [style*="color:#991B1B"],
html.t27[data-theme="dark"] [style*="color:#991b1b"],
html.t27[data-theme="dark"] [style*="color:#9D174D"],
html.t27[data-theme="dark"] [style*="color:#9d174d"],
html.t27[data-theme="dark"] [style*="color:#B91C1C"],
html.t27[data-theme="dark"] [style*="color:#BE123C"],
html.t27[data-theme="dark"] [style*="color:#DC2626"],
html.t27[data-theme="dark"] [style*="color:#b91c1c"],
html.t27[data-theme="dark"] [style*="color:#be123c"],
html.t27[data-theme="dark"] [style*="color:#dc2626"] { color: #FCA5A5 !important; }
html.t27[data-theme="dark"] [style*="background-color: #D1FAE5"],
html.t27[data-theme="dark"] [style*="background-color: #DCFCE7"],
html.t27[data-theme="dark"] [style*="background-color: #ECFDF5"],
html.t27[data-theme="dark"] [style*="background-color: #F0FDF4"],
html.t27[data-theme="dark"] [style*="background-color: #d1fae5"],
html.t27[data-theme="dark"] [style*="background-color: #dcfce7"],
html.t27[data-theme="dark"] [style*="background-color: #ecfdf5"],
html.t27[data-theme="dark"] [style*="background-color: #f0fdf4"],
html.t27[data-theme="dark"] [style*="background-color:#D1FAE5"],
html.t27[data-theme="dark"] [style*="background-color:#DCFCE7"],
html.t27[data-theme="dark"] [style*="background-color:#ECFDF5"],
html.t27[data-theme="dark"] [style*="background-color:#F0FDF4"],
html.t27[data-theme="dark"] [style*="background-color:#d1fae5"],
html.t27[data-theme="dark"] [style*="background-color:#dcfce7"],
html.t27[data-theme="dark"] [style*="background-color:#ecfdf5"],
html.t27[data-theme="dark"] [style*="background-color:#f0fdf4"],
html.t27[data-theme="dark"] [style*="background: #D1FAE5"],
html.t27[data-theme="dark"] [style*="background: #DCFCE7"],
html.t27[data-theme="dark"] [style*="background: #ECFDF5"],
html.t27[data-theme="dark"] [style*="background: #F0FDF4"],
html.t27[data-theme="dark"] [style*="background: #d1fae5"],
html.t27[data-theme="dark"] [style*="background: #dcfce7"],
html.t27[data-theme="dark"] [style*="background: #ecfdf5"],
html.t27[data-theme="dark"] [style*="background: #f0fdf4"],
html.t27[data-theme="dark"] [style*="background:#D1FAE5"],
html.t27[data-theme="dark"] [style*="background:#DCFCE7"],
html.t27[data-theme="dark"] [style*="background:#ECFDF5"],
html.t27[data-theme="dark"] [style*="background:#F0FDF4"],
html.t27[data-theme="dark"] [style*="background:#d1fae5"],
html.t27[data-theme="dark"] [style*="background:#dcfce7"],
html.t27[data-theme="dark"] [style*="background:#ecfdf5"],
html.t27[data-theme="dark"] [style*="background:#f0fdf4"] { background: rgba(34,197,94,.10) !important; border-color: rgba(74,222,128,.28) !important; }
html.t27[data-theme="dark"] [style*="color: #047857"],
html.t27[data-theme="dark"] [style*="color: #065F46"],
html.t27[data-theme="dark"] [style*="color: #065f46"],
html.t27[data-theme="dark"] [style*="color: #14532D"],
html.t27[data-theme="dark"] [style*="color: #14532d"],
html.t27[data-theme="dark"] [style*="color: #15803D"],
html.t27[data-theme="dark"] [style*="color: #15803d"],
html.t27[data-theme="dark"] [style*="color: #166534"],
html.t27[data-theme="dark"] [style*="color:#047857"],
html.t27[data-theme="dark"] [style*="color:#065F46"],
html.t27[data-theme="dark"] [style*="color:#065f46"],
html.t27[data-theme="dark"] [style*="color:#14532D"],
html.t27[data-theme="dark"] [style*="color:#14532d"],
html.t27[data-theme="dark"] [style*="color:#15803D"],
html.t27[data-theme="dark"] [style*="color:#15803d"],
html.t27[data-theme="dark"] [style*="color:#166534"] { color: #86EFAC !important; }

/* grids that cannot shrink below their longest <option>, and inline
   two-column grids that never collapsed on a phone */
html.t27 .grid-2 > *, html.t27 .form-grid > *, html.t27 [style*="grid-template-columns"] > * { min-width: 0; }
html.t27 .form-card select, html.t27 .form-card input:not([type=checkbox]):not([type=radio]), html.t27 .form-card textarea { max-width: 100%; }
@media (max-width: 768px) {
  html.t27 .grid-2, html.t27 .grid-2[style], html.t27 .form-grid[style*="1fr 1fr"], html.t27 main [style*="grid-template-columns:1fr 1fr"], html.t27 main [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* CONTRAST-SWEEP-V1c: second sweep. Undo two V1 over-reaches and cover the
   components the first pass missed. */
html.t27[data-theme="dark"] .pill.small, html.t27[data-theme="dark"] .contact-source-badge.source-other,
html.t27[data-theme="dark"] .user-badge:not(.admin) { background: rgba(255,255,255,.08) !important; color: var(--text) !important; box-shadow: inset 0 0 0 1px var(--border); }
html.t27[data-theme="dark"] .user-badge.admin { color: #fff !important; }
html.t27:not([data-theme="dark"]) .user-badge.admin { color: #fff !important; }
html.t27[data-theme="dark"] .member-pick, html.t27[data-theme="dark"] .member-grid, html.t27[data-theme="dark"] .seq-step,
html.t27[data-theme="dark"] .lead-origin-card, html.t27[data-theme="dark"] .bdoc-col, html.t27[data-theme="dark"] .bdoc-form,
html.t27[data-theme="dark"] .docs-section, html.t27[data-theme="dark"] .cr-foot { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; }
html.t27[data-theme="dark"] .developer-info { background: rgba(56,189,248,.08) !important; border-color: rgba(56,189,248,.25) !important; }
html.t27[data-theme="dark"] .bdoc-col.ok { background: rgba(34,197,94,.07) !important; }
html.t27[data-theme="dark"] .ar-kpi-val, html.t27[data-theme="dark"] .report-kpi-value, html.t27[data-theme="dark"] .ar-wrap td,
html.t27[data-theme="dark"] .cr-foot-who { color: var(--text) !important; }
html.t27[data-theme="dark"] .cr-foot-lbl { color: var(--ink-2) !important; }
html.t27[data-theme="dark"] table thead th, html.t27[data-theme="dark"] table tr > th { background: var(--surface-2) !important; color: var(--ink-2) !important; border-color: var(--border) !important; }
html.t27[data-theme="dark"] .perm-pick input[type=checkbox]:checked + span { color: var(--ink-link) !important; }
html.t27[data-theme="dark"] .seg a[style], html.t27[data-theme="dark"] .t27-seg a[style] { background: transparent !important; }
html.t27[data-theme="dark"] .fc .fc-scrollgrid, html.t27[data-theme="dark"] .fc table, html.t27[data-theme="dark"] .fc th,
html.t27[data-theme="dark"] .fc .fc-view-harness, html.t27[data-theme="dark"] .fc-theme-standard .fc-scrollgrid { background: transparent !important; }
html.t27[data-theme="dark"] span[style*="#b91c1c"], html.t27[data-theme="dark"] span[style*="#B91C1C"] { color: #FCA5A5 !important; }
html.t27:not([data-theme="dark"]) [style*="color:#f59e0b"], html.t27:not([data-theme="dark"]) [style*="color: #f59e0b"] { color: #B45309 !important; }
html.t27 .actions a.btn[style*="#25D366"], html.t27 .actions a.btn[style*="#25d366"] { background: #128C4A !important; }

/* CONTRAST-SWEEP-V1d: final sweep leftovers */
html.t27:not([data-theme="dark"]) [style*="color: rgb(16, 185, 129)"] { color: #047857 !important; }
html.t27:not([data-theme="dark"]) [style*="color: rgb(245, 158, 11)"] { color: #B45309 !important; }
html.t27[data-theme="dark"] [style*="#fde68a"], html.t27[data-theme="dark"] [style*="#FDE68A"] { background: rgba(245,158,11,.10) !important; border-color: rgba(245,158,11,.30) !important; }
html.t27[data-theme="dark"] [style*="color:#78350f"], html.t27[data-theme="dark"] [style*="color: #78350f"] { color: #FCD34D !important; }
html.t27[data-theme="dark"] .kv span { color: var(--text) !important; }
html.t27[data-theme="dark"] .leaflet-control-attribution { background: rgba(19,19,19,.85) !important; color: var(--ink-2) !important; }
html.t27[data-theme="dark"] .leaflet-control-attribution a { color: var(--ink-link) !important; }
html.t27 .split-block .muted { color: rgba(255,255,255,.9) !important; }
html.t27 .cr-opt { color: #5F6583 !important; }
html.t27[data-theme="dark"] .cr-opt { background: rgba(255,255,255,.08) !important; color: var(--ink-2) !important; }
html.t27[data-theme="dark"] .kv strong { color: var(--ink-2) !important; }
/* PERSONAL-TASKS-V1: task check circles read in both themes */
html.t27 .task-list .checkbox { border-radius: 50%; border: 2px solid var(--border-strong); background: transparent !important; }
html.t27 .task-list .checkbox.checked { background: #0f7b4f !important; border-color: #0f7b4f; position: relative; }
html.t27 .task-list .checkbox.checked::after { content: ""; position: absolute; left: 50%; top: 45%; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); }
html.t27[data-theme="dark"] .task-list .checkbox { border-color: rgba(255,255,255,.28); }

/* CONTRAST-SWEEP-V1e: P&L summary cards were white in dark mode; social "no leads" note faded */
html.t27[data-theme="dark"] .pnl-top-card { background: var(--surface, #16161a) !important; border-color: var(--line, rgba(255,255,255,.08)) !important; }
html.t27[data-theme="dark"] .pnl-top-num { color: var(--ink, #f4f4f6) !important; }
html.t27[data-theme="dark"] .pnl-profit .pnl-top-num { color: #34d399 !important; }
html.t27[data-theme="dark"] .pnl-loss .pnl-top-num { color: #f87171 !important; }
html.t27[data-theme="dark"] .pnl-top-card .muted.small { color: var(--ink-3, #9a9aa6) !important; }
html.t27 .sm-platform-label .muted.small { opacity: 1 !important; }
/* empty social channels stay quieter but readable (55% made the text 2.2:1) */
html.t27 .sm-platform-row.sm-platform-empty { opacity: .8 !important; }
html.t27[data-theme="dark"] .pnl-expense .pnl-top-icon, html.t27[data-theme="dark"] .pnl-loss .pnl-top-icon { background: rgba(248,113,113,.14) !important; }
html.t27[data-theme="dark"] .pnl-revenue .pnl-top-icon, html.t27[data-theme="dark"] .pnl-profit .pnl-top-icon { background: rgba(52,211,153,.14) !important; }
html.t27[data-theme="dark"] .pnl-per-user .pnl-top-icon { background: rgba(167,139,250,.16) !important; }

/* ============================================================
   CHARITY-PODIUM-V1: giving back, given its own space
   ============================================================ */
html.t27 .ch-block { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line, #e9e9ef); }
html.t27 .ch-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
html.t27 .ch-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
html.t27 .ch-sub { margin: 3px 0 0; font-size: 13px; color: var(--ink-3, #6E7494); }
html.t27 .ch-total { text-align: right; }
html.t27 .ch-total-num { font-size: 20px; font-weight: 800; color: #B45309; font-variant-numeric: tabular-nums; }
html.t27[data-theme="dark"] .ch-total-num { color: #FBBF24; }
html.t27 .ch-total-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3, #6E7494); font-weight: 700; }

html.t27 .ch-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; margin: 18px 0 0; }
html.t27 .ch-pod {
  border-radius: 20px; padding: 18px 12px 16px; text-align: center;
  background: linear-gradient(180deg, rgba(251,191,36,.16), rgba(251,191,36,.05));
  border: 1px solid rgba(217,119,6,.22);
}
html.t27 .ch-pod.p1 { grid-column: 2; padding: 26px 14px 22px; background: linear-gradient(180deg, rgba(251,191,36,.34), rgba(251,191,36,.10)); border-color: rgba(217,119,6,.42); }
html.t27 .ch-pod.p2 { grid-column: 1; }
html.t27 .ch-pod.p3 { grid-column: 3; }
html.t27 .ch-pod-av { position: relative; width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #fcd34d, #f59e0b); }
html.t27 .ch-pod.p1 .ch-pod-av { width: 84px; height: 84px; }
html.t27 .ch-pod-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center;
  background: var(--surface, #fff); color: #B45309; font-weight: 800; font-size: 20px; }
html.t27 .ch-pod-rank {
  position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%;
  background: #B45309; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface, #fff);
}
html.t27 .ch-pod-name { font-weight: 700; font-size: 14px; margin-top: 2px; }
html.t27 .ch-pod-val { font-size: 17px; font-weight: 800; color: #B45309; font-variant-numeric: tabular-nums; margin-top: 4px; }
html.t27[data-theme="dark"] .ch-pod-val, html.t27[data-theme="dark"] .ch-pod-img { color: #FBBF24; }
html.t27 .ch-pod.p1 .ch-pod-val { font-size: 21px; }
html.t27 .ch-pod-meta { font-size: 11.5px; color: var(--ink-3, #6E7494); margin-top: 2px; }

html.t27 .ch-rest { list-style: none; margin: 12px 0 0; padding: 0; }
html.t27 .ch-rest li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; }
html.t27 .ch-rest li:nth-child(odd) { background: rgba(251,191,36,.07); }
html.t27 .ch-rest-rank { width: 20px; font-weight: 800; color: var(--ink-3, #6E7494); font-size: 12px; }
html.t27 .ch-rest-name { flex: 1; font-weight: 600; font-size: 13.5px; }
html.t27 .ch-rest-amt { font-weight: 700; font-size: 13.5px; color: #B45309; font-variant-numeric: tabular-nums; }
html.t27[data-theme="dark"] .ch-rest-amt { color: #FBBF24; }

html.t27 .ch-note {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px;
  border-radius: 16px; background: rgba(251,191,36,.10); border: 1px solid rgba(217,119,6,.20);
  font-size: 13.5px; line-height: 1.6;
}
html.t27 .ch-note-me { background: linear-gradient(135deg, rgba(251,191,36,.20), rgba(236,72,153,.10)); border-color: rgba(217,119,6,.34); }
html.t27 .ch-note-mark { font-size: 18px; color: #DC2626; line-height: 1.3; }
html.t27 .ch-foot { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: var(--ink-2, #4b4b57); }
html.t27 .ch-foot-lbl { text-transform: uppercase; letter-spacing: .4px; font-size: 10.5px; font-weight: 700; color: var(--ink-3, #6E7494); margin-right: 4px; }
@media (max-width: 700px) {
  html.t27 .ch-podium { grid-template-columns: 1fr; }
  html.t27 .ch-pod, html.t27 .ch-pod.p1, html.t27 .ch-pod.p2, html.t27 .ch-pod.p3 { grid-column: 1; }
}
html.t27 .ch-note-top { margin: 0 0 16px; }

/* ============================================================
   NOTIF-DARK-V1: the header notifications dropdown was written
   for light only — its title was #0f172a on a dark panel, so it
   only appeared on hover.
   ============================================================ */
html.t27[data-theme="dark"] .notif-dropdown-head {
  background: rgba(255,255,255,.04) !important; border-bottom-color: var(--line, rgba(255,255,255,.08)) !important;
}
html.t27[data-theme="dark"] .notif-dropdown-head > *:first-child { color: var(--ink, #f3f4f8) !important; }
html.t27[data-theme="dark"] .notif-title { color: var(--ink, #f3f4f8) !important; }
html.t27[data-theme="dark"] .notif-body-text { color: var(--ink-2, #c3c6d4) !important; }
html.t27[data-theme="dark"] .notif-time { color: var(--ink-3, #9096a8) !important; }
html.t27[data-theme="dark"] .notif-item { border-bottom-color: var(--line, rgba(255,255,255,.07)) !important; }
html.t27[data-theme="dark"] .notif-item:hover { background: rgba(255,255,255,.06) !important; }
html.t27[data-theme="dark"] .notif-item.unread { background: rgba(99,102,241,.14) !important; }
html.t27[data-theme="dark"] .notif-item.unread:hover { background: rgba(99,102,241,.22) !important; }
html.t27[data-theme="dark"] .notif-view-all { color: #A5B4FC !important; }
html.t27[data-theme="dark"] .notif-empty { color: var(--ink-2, #c3c6d4) !important; }

/* ============================================================
   TOMSELECT-DARK-V1: the lead picker (Tom Select) had no dark face —
   white box, pale-blue chip, invisible typed text.
   ============================================================ */
html.t27[data-theme="dark"] .ts-wrapper .ts-control {
  background: var(--surface-2, #1B1B1B) !important; border-color: var(--border, rgba(255,255,255,.12)) !important;
  color: var(--text, #ECECF1) !important; box-shadow: none !important;
}
html.t27[data-theme="dark"] .ts-wrapper.focus .ts-control { border-color: var(--primary-2, #818CF8) !important; box-shadow: 0 0 0 3px var(--primary-ring, rgba(129,140,248,.28)) !important; }
html.t27[data-theme="dark"] .ts-control input, html.t27[data-theme="dark"] .ts-control input::placeholder { color: var(--text, #ECECF1) !important; opacity: 1; }
html.t27[data-theme="dark"] .ts-control input::placeholder { color: var(--ink-3, #8A8B95) !important; }
html.t27[data-theme="dark"] .ts-control .item {
  background: var(--primary-soft, rgba(99,102,241,.16)) !important; color: var(--primary-hover, #A5B4FC) !important; border-color: transparent !important;
}
html.t27[data-theme="dark"] .ts-dropdown {
  background: var(--surface, #131313) !important; color: var(--text, #ECECF1) !important;
  border: 1px solid var(--border, rgba(255,255,255,.12)) !important; box-shadow: 0 18px 40px -16px rgba(0,0,0,.8) !important;
}
html.t27[data-theme="dark"] .ts-dropdown .option { color: var(--text, #ECECF1) !important; }
html.t27[data-theme="dark"] .ts-dropdown .option.active, html.t27[data-theme="dark"] .ts-dropdown .option:hover {
  background: var(--primary-soft, rgba(99,102,241,.16)) !important; color: var(--primary-hover, #A5B4FC) !important;
}
html.t27[data-theme="dark"] .ts-dropdown .no-results, html.t27[data-theme="dark"] .ts-dropdown .spinner { color: var(--ink-3, #8A8B95) !important; }
/* light: the selected chip's pale-blue-on-pale-blue default reads badly too */
html.t27 .ts-control .item { background: var(--primary-soft, #EEEEFC); color: var(--primary, #4338CA); border-color: transparent; }
html.t27 .ts-dropdown .option.active { background: var(--primary-soft, #EEEEFC); color: var(--primary, #4338CA); }

/* ── LIGHT-INK-V1: no grey text in light mode (generated from the templates' own grey colours; dark mode keeps its tokens) ── */
html.t27:not([data-theme="dark"]) [style*="color:#5a6182"],
html.t27:not([data-theme="dark"]) [style*="color: #5a6182"],
html.t27:not([data-theme="dark"]) [style*="color:#5A6182"],
html.t27:not([data-theme="dark"]) [style*="color: #5A6182"],
html.t27:not([data-theme="dark"]) [style*="color:#64748b"],
html.t27:not([data-theme="dark"]) [style*="color: #64748b"],
html.t27:not([data-theme="dark"]) [style*="color:#64748B"],
html.t27:not([data-theme="dark"]) [style*="color: #64748B"],
html.t27:not([data-theme="dark"]) [style*="color:#6b7089"],
html.t27:not([data-theme="dark"]) [style*="color: #6b7089"],
html.t27:not([data-theme="dark"]) [style*="color:#6B7089"],
html.t27:not([data-theme="dark"]) [style*="color: #6B7089"],
html.t27:not([data-theme="dark"]) [style*="color:#6b7280"],
html.t27:not([data-theme="dark"]) [style*="color: #6b7280"],
html.t27:not([data-theme="dark"]) [style*="color:#6B7280"],
html.t27:not([data-theme="dark"]) [style*="color: #6B7280"],
html.t27:not([data-theme="dark"]) [style*="color:#7a8294"],
html.t27:not([data-theme="dark"]) [style*="color: #7a8294"],
html.t27:not([data-theme="dark"]) [style*="color:#7A8294"],
html.t27:not([data-theme="dark"]) [style*="color: #7A8294"],
html.t27:not([data-theme="dark"]) [style*="color:#94a3b8"],
html.t27:not([data-theme="dark"]) [style*="color: #94a3b8"],
html.t27:not([data-theme="dark"]) [style*="color:#94A3B8"],
html.t27:not([data-theme="dark"]) [style*="color: #94A3B8"] { color: var(--ink-3) !important; }
html.t27:not([data-theme="dark"]) .ai-loading,
html.t27:not([data-theme="dark"]) .ar-counter-label,
html.t27:not([data-theme="dark"]) .ar-field label,
html.t27:not([data-theme="dark"]) .ar-kpi-label,
html.t27:not([data-theme="dark"]) .ar-table th,
html.t27:not([data-theme="dark"]) .at-hint,
html.t27:not([data-theme="dark"]) .at-modal label,
html.t27:not([data-theme="dark"]) .ath-empty,
html.t27:not([data-theme="dark"]) .ath-h,
html.t27:not([data-theme="dark"]) .ath-sub,
html.t27:not([data-theme="dark"]) .atm-date,
html.t27:not([data-theme="dark"]) .atm-doneout,
html.t27:not([data-theme="dark"]) .atm-foot.none,
html.t27:not([data-theme="dark"]) .atm-t span,
html.t27:not([data-theme="dark"]) .att-label,
html.t27:not([data-theme="dark"]) .auto-tab,
html.t27:not([data-theme="dark"]) .back a,
html.t27:not([data-theme="dark"]) .bdoc-empty,
html.t27:not([data-theme="dark"]) .bdoc-extra summary,
html.t27:not([data-theme="dark"]) .bdoc-meta,
html.t27:not([data-theme="dark"]) .bdoc-sub,
html.t27:not([data-theme="dark"]) .cal-empty,
html.t27:not([data-theme="dark"]) .cal-grp,
html.t27:not([data-theme="dark"]) .cal-sub,
html.t27:not([data-theme="dark"]) .ch-empty,
html.t27:not([data-theme="dark"]) .ch-grp,
html.t27:not([data-theme="dark"]) .ch-prev,
html.t27:not([data-theme="dark"]) .claim-notes,
html.t27:not([data-theme="dark"]) .cm-chip,
html.t27:not([data-theme="dark"]) .cm-country > svg,
html.t27:not([data-theme="dark"]) .cm-country-lbl,
html.t27:not([data-theme="dark"]) .cm-empty,
html.t27:not([data-theme="dark"]) .cm-mt,
html.t27:not([data-theme="dark"]) .cm-pg-btn.off,
html.t27:not([data-theme="dark"]) .cm-pg-info,
html.t27:not([data-theme="dark"]) .co small,
html.t27:not([data-theme="dark"]) .cr-opt,
html.t27:not([data-theme="dark"]) .dropdown-options-label,
html.t27:not([data-theme="dark"]) .em-date,
html.t27:not([data-theme="dark"]) .em-empty,
html.t27:not([data-theme="dark"]) .em-snip,
html.t27:not([data-theme="dark"]) .ep-meta span,
html.t27:not([data-theme="dark"]) .ep-x,
html.t27:not([data-theme="dark"]) .field-drag,
html.t27:not([data-theme="dark"]) .foot,
html.t27:not([data-theme="dark"]) .fttr-item .muted,
html.t27:not([data-theme="dark"]) .fttr-list li:nth-child(2) .fttr-rank,
html.t27:not([data-theme="dark"]) .fttr-rank,
html.t27:not([data-theme="dark"]) .hr-stat-label,
html.t27:not([data-theme="dark"]) .intro .exp,
html.t27:not([data-theme="dark"]) .kv strong,
html.t27:not([data-theme="dark"]) .lu-dash,
html.t27:not([data-theme="dark"]) .lu-lbl,
html.t27:not([data-theme="dark"]) .lv-empty,
html.t27:not([data-theme="dark"]) .lv-grp,
html.t27:not([data-theme="dark"]) .lv-sub,
html.t27:not([data-theme="dark"]) .lv-tabs a,
html.t27:not([data-theme="dark"]) .md-bell,
html.t27:not([data-theme="dark"]) .md-empty,
html.t27:not([data-theme="dark"]) .md-hi,
html.t27:not([data-theme="dark"]) .md-lead-mt,
html.t27:not([data-theme="dark"]) .md-scope a,
html.t27:not([data-theme="dark"]) .md-standing,
html.t27:not([data-theme="dark"]) .md-standing .sep,
html.t27:not([data-theme="dark"]) .meta,
html.t27:not([data-theme="dark"]) .msg-ticks.delivered,
html.t27:not([data-theme="dark"]) .msg-ticks.sent,
html.t27:not([data-theme="dark"]) .mt-empty,
html.t27:not([data-theme="dark"]) .mt-sub,
html.t27:not([data-theme="dark"]) .muted,
html.t27:not([data-theme="dark"]) .nm-empty,
html.t27:not([data-theme="dark"]) .no-touch-list-head,
html.t27:not([data-theme="dark"]) .om-dd > svg,
html.t27:not([data-theme="dark"]) .om-dl,
html.t27:not([data-theme="dark"]) .om-empty,
html.t27:not([data-theme="dark"]) .om-more,
html.t27:not([data-theme="dark"]) .om-mt,
html.t27:not([data-theme="dark"]) .om-sum,
html.t27:not([data-theme="dark"]) .padrow .ph,
html.t27:not([data-theme="dark"]) .pnl-top-label,
html.t27:not([data-theme="dark"]) .report-kpi-label,
html.t27:not([data-theme="dark"]) .report-kpi-sub,
html.t27:not([data-theme="dark"]) .resend,
html.t27:not([data-theme="dark"]) .row .lbl,
html.t27:not([data-theme="dark"]) .slug-prefix,
html.t27:not([data-theme="dark"]) .sm-kpi-label,
html.t27:not([data-theme="dark"]) .sub,
html.t27:not([data-theme="dark"]) .tc-count small,
html.t27:not([data-theme="dark"]) .tc-empty,
html.t27:not([data-theme="dark"]) .tc-modal .row b,
html.t27:not([data-theme="dark"]) .tc-pill.none,
html.t27:not([data-theme="dark"]) .tc-role,
html.t27:not([data-theme="dark"]) .tc-search .ico,
html.t27:not([data-theme="dark"]) .tc-sub,
html.t27:not([data-theme="dark"]) .tc-table th,
html.t27:not([data-theme="dark"]) .tc-who,
html.t27:not([data-theme="dark"]) .teamhead .meta,
html.t27:not([data-theme="dark"]) .toolbar .hint,
html.t27:not([data-theme="dark"]) .tt-pri-low,
html.t27:not([data-theme="dark"]) .tt-table th,
html.t27:not([data-theme="dark"]) .ty-foot,
html.t27:not([data-theme="dark"]) .wa-csub,
html.t27:not([data-theme="dark"]) .wa-grp,
html.t27:not([data-theme="dark"]) .wa-lbl,
html.t27:not([data-theme="dark"]) .wf-lbl,
html.t27:not([data-theme="dark"]) .wf-tab,
html.t27:not([data-theme="dark"]) .wf-toggle-label,
html.t27:not([data-theme="dark"]) label,
html.t27:not([data-theme="dark"]) p,
html.t27:not([data-theme="dark"]) p.sub,
html.t27:not([data-theme="dark"]) th { color: var(--ink-3); }
/* LIGHT-INK-V1: greys from style.css on light surfaces (notifications dropdown, chatbot panel, previews); sidebar rules untouched */
html.t27:not([data-theme="dark"]) .notif-body-text, html.t27:not([data-theme="dark"]) .notif-time,
html.t27:not([data-theme="dark"]) .cb-card-sub, html.t27:not([data-theme="dark"]) .cb-card-status, html.t27:not([data-theme="dark"]) .cb-pick-meta,
html.t27:not([data-theme="dark"]) .cb-pick-phone, html.t27:not([data-theme="dark"]) .cb-time, html.t27:not([data-theme="dark"]) .cb-day,
html.t27:not([data-theme="dark"]) .cb-hist-day, html.t27:not([data-theme="dark"]) .cb-hist-meta, html.t27:not([data-theme="dark"]) .cb-hist-empty,
html.t27:not([data-theme="dark"]) .preview-head, html.t27:not([data-theme="dark"]) .chatbot-typing { color: var(--ink-3); }
/* ── OPP-TAG-V1: lead-source tag on pipeline cards, readable in both modes (Affan: "instagram, facebook tags are not visible") ──
   The tag takes its column's --stage-color. Light: dark ink of that colour on a light tint. Dark: light ink on a deep tint. No filters. */
html.t27 .opp-tag { filter: none !important; font-weight: 600; }
html.t27:not([data-theme="dark"]) .opp-tag {
  background: color-mix(in srgb, var(--stage-color, var(--primary)) 14%, #FFFFFF);
  color: color-mix(in srgb, var(--stage-color, var(--primary)) 62%, #17171C);
  border: 1px solid color-mix(in srgb, var(--stage-color, var(--primary)) 38%, #FFFFFF);
}
html.t27[data-theme="dark"] .opp-tag {
  background: color-mix(in srgb, var(--stage-color, var(--primary)) 24%, #111621);
  color: color-mix(in srgb, var(--stage-color, var(--primary)) 45%, #FFFFFF);
  border: 1px solid color-mix(in srgb, var(--stage-color, var(--primary)) 45%, #111621);
}
html.t27:not([data-theme="dark"]) .opp-tag-referrer { background: #FDECB3; color: #6B3E00; border-color: #F2C94C; }
html.t27[data-theme="dark"] .opp-tag-referrer { background: #4A3608; color: #FFE08A; border-color: #7A5A10; }

/* LEGAL-V1: privacy / terms links under Sign out, and the sign-in agreement line */
.sidebar-legal { display: flex; justify-content: center; gap: 8px; padding: 8px 0 2px; font-size: 11px; letter-spacing: .2px; }
.sidebar-legal a { color: rgba(236,237,246,.55); text-decoration: none; }
.sidebar-legal a:hover { color: rgba(236,237,246,.9); text-decoration: underline; }
.sidebar-legal span { color: rgba(236,237,246,.3); }
html.t27:not([data-theme="dark"]) .sidebar:not(.sidebar-dark) .sidebar-legal a { color: var(--ink-3); }
.au-legal { margin-top: 6px; }
.au-legal a { color: inherit; text-decoration: underline; }

/* ── DARK-PAGES-V1 (23 Sep 2026, Affan: "broken UI in dark mode"): pages whose own <style> hard-codes
   light surfaces (white toolbars, #f8fafc hover rows, lavender tag pills) now follow the dark tokens.
   Light mode is untouched: every rule below is scoped to html.t27[data-theme="dark"]. ── */
/* Reports: view toggle + period bar */
html.t27[data-theme="dark"] .report-view-toggle { background: var(--surface-2); border-color: var(--border); }
html.t27[data-theme="dark"] .view-btn { background: var(--surface); border-color: var(--border); color: var(--ink-2); }
html.t27[data-theme="dark"] .view-btn:hover { background: var(--frame); color: var(--text); }
html.t27[data-theme="dark"] .view-btn.active { background: var(--t27-grad); color: #fff; border-color: transparent; }
html.t27[data-theme="dark"] .report-period-bar { background: var(--surface-2); border-color: var(--border); }
html.t27[data-theme="dark"] .period-btn { background: var(--surface); border-color: var(--border); color: var(--ink-2); }
html.t27[data-theme="dark"] .period-btn:hover { border-color: var(--border-strong); color: var(--text); }
html.t27[data-theme="dark"] .period-btn.active { color: #fff; }
/* P&L: period bar */
html.t27[data-theme="dark"] .pnl-period-bar { background: var(--surface-2); border-color: var(--border); }
html.t27[data-theme="dark"] .pnl-period-btn { background: var(--surface); border-color: var(--border); color: var(--ink-2); }
html.t27[data-theme="dark"] .pnl-period-btn.active { color: #fff; }
/* Social media: row hover highlight + empty-channel stripes */
html.t27[data-theme="dark"] .sm-platform-row:hover { background: var(--surface-2); }
html.t27[data-theme="dark"] .sm-platform-row.sm-platform-empty { opacity: .6; }
html.t27[data-theme="dark"] .sm-platform-row.sm-platform-empty:hover { opacity: .9; }
html.t27[data-theme="dark"] .sm-platform-row.sm-platform-empty .sm-platform-bar-wrap {
  background: repeating-linear-gradient(45deg, #1F1F23, #1F1F23 4px, #2A2A30 4px, #2A2A30 8px);
}
html.t27[data-theme="dark"] .sm-period-btn { background: var(--surface); border-color: var(--border); color: var(--ink-2); }
html.t27[data-theme="dark"] .sm-period-btn:hover { border-color: var(--border-strong); }
html.t27[data-theme="dark"] .sm-period-btn.active { color: #fff; }
/* User activity: chips, counters, table hover, filters */
html.t27[data-theme="dark"] .ar-chip { background: var(--surface-2); color: var(--ink-2); }
html.t27[data-theme="dark"] .ar-chip.on { background: #6D5EFC; color: #fff; }
html.t27[data-theme="dark"] .ar-kpi, html.t27[data-theme="dark"] .ar-counter { background: var(--surface); border-color: var(--border); }
html.t27[data-theme="dark"] .ar-kv td { border-bottom-color: var(--border); }
html.t27[data-theme="dark"] .ar-table tbody tr:hover { background: var(--surface-2); }
html.t27[data-theme="dark"] .ar-select, html.t27[data-theme="dark"] .ar-filters select, html.t27[data-theme="dark"] .ar-filters input {
  background: var(--surface-2); color: var(--text); border-color: var(--border);
}
/* Contacts: campaign tag pill + referrer / budget tags */
html.t27[data-theme="dark"] .contact-tag-pill { background: rgba(129, 140, 248, .18); color: #C7D2FE; border-color: rgba(129, 140, 248, .45); }
html.t27[data-theme="dark"] .contact-tag-pill:hover { background: rgba(129, 140, 248, .3); color: #E0E7FF; }
html.t27[data-theme="dark"] .contact-tag.tag-referrer { background: rgba(251, 191, 36, .16); color: #FCD34D; border-color: rgba(251, 191, 36, .4); }
html.t27[data-theme="dark"] .contact-tag.tag-budget { background: rgba(52, 211, 153, .14); color: #6EE7B7; border-color: rgba(52, 211, 153, .35); }
/* DARK-PAGES-V1 (continued): attendance biometric banner, social period bar + trend chips, insurance status pills */
html.t27[data-theme="dark"] .bio-sync { background: var(--surface-2); border-color: var(--border); color: var(--ink-2); }
html.t27[data-theme="dark"] .bio-sync.warn { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .4); color: #FCD34D; }
html.t27[data-theme="dark"] .sm-period-bar { background: var(--surface-2); border-color: var(--border); }
html.t27[data-theme="dark"] .sm-kpi-trend.up { background: rgba(52, 211, 153, .16); color: #6EE7B7; }
html.t27[data-theme="dark"] .sm-kpi-trend.down { background: rgba(248, 113, 113, .16); color: #FCA5A5; }
/* insurance pills: same light colours as before (moved out of inline styles), dark variants added */
html.t27 .pill.ins-none { background: #f1f5f9; color: #475569; }
html.t27 .pill.ins-bad { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
html.t27 .pill.ins-warn { background: #fef3c7; color: #78350f; border: 1px solid #fde68a; }
html.t27 .pill.ins-ok { background: #dcfce7; color: #065f46; border: 1px solid #86efac; }
html.t27[data-theme="dark"] .pill.ins-none { background: var(--surface-2); color: var(--ink-2); }
html.t27[data-theme="dark"] .pill.ins-bad { background: rgba(248, 113, 113, .16); color: #FCA5A5; border-color: rgba(248, 113, 113, .4); }
html.t27[data-theme="dark"] .pill.ins-warn { background: rgba(251, 191, 36, .16); color: #FCD34D; border-color: rgba(251, 191, 36, .4); }
html.t27[data-theme="dark"] .pill.ins-ok { background: rgba(52, 211, 153, .16); color: #6EE7B7; border-color: rgba(52, 211, 153, .4); }
/* DARK-PAGES-V1 (continued): month pickers and the MIS filter inputs */
html.t27[data-theme="dark"] input[type="month"], html.t27[data-theme="dark"] #mis_filter_form input:not([type="checkbox"]):not([type="radio"]) {
  background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important;
}