:root{--font:'Roboto',sans-serif;--mono:'Roboto',sans-serif;--r:10px;--rlg:14px;--rsm:7px;--tr:.18s cubic-bezier(.4,0,.2,1)}
[data-theme="dark"]{
  --bg:#0c0c11;--bg2:#131318;--bg3:#1e1e28;--bg4:#252530;--surf:#2e2e3a;
  --cal-invert:1;
  --b:rgba(255,255,255,.08);--b2:rgba(255,255,255,.15);--b3:rgba(255,255,255,.26);
  --t:#eeeef8;--t2:#b0b0c8;--t3:#808098;
  --ac:#7c6fff;--ac2:#c4bcff;--acb:rgba(124,111,255,.16);--acbr:rgba(124,111,255,.42);
  --gr:#34d399;--grb:rgba(52,211,153,.14);--grbr:rgba(52,211,153,.38);
  --am:#fbbf24;--amb:rgba(251,191,36,.14);--ambr:rgba(251,191,36,.35);
  --rd:#f87171;--rdb:rgba(248,113,113,.14);--rdbr:rgba(248,113,113,.35);
  --bl:#60a5fa;--blb:rgba(96,165,250,.14);
  /* WhatsApp channel accent. Kept distinct from --gr (success): a WhatsApp badge
     means "this campaign sends over WhatsApp", never "this went well", and the
     two must not be confused on a card that shows both. */
  --wa:#25d366;--wab:rgba(37,211,102,.15);--wabr:rgba(37,211,102,.40);
  --cg:rgba(255,255,255,.08);--ch:rgba(255,255,255,.04);
  --sh:0 4px 24px rgba(0,0,0,.55);
  /* Bootstrap dark-mode overrides — prevent Bootstrap CSS vars from leaking light-mode colours */
  --bs-body-color:#eeeef8;--bs-body-bg:#0c0c11;--bs-emphasis-color:#eeeef8;
  --bs-secondary-color:rgba(238,238,248,.6);--bs-tertiary-color:rgba(238,238,248,.38);
  --bs-border-color:rgba(255,255,255,.08);--bs-border-color-translucent:rgba(255,255,255,.1);
  --bs-modal-color:#eeeef8;--bs-modal-bg:#131318;--bs-modal-border-color:rgba(255,255,255,.08);
  --bs-form-control-bg:#1e1e28;--bs-form-control-border-color:rgba(255,255,255,.15);
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#f0f0f7;--bg2:#ffffff;--bg3:#e8e8f2;--bg4:#dddde8;--surf:#d4d4e0;
  --b:rgba(0,0,0,.08);--b2:rgba(0,0,0,.15);--b3:rgba(0,0,0,.26);
  --t:#141428;--t2:#484860;--t3:#787890;
  --cal-invert:0;
  --ac:#5e52e0;--ac2:#3d33c0;--acb:rgba(94,82,224,.1);--acbr:rgba(94,82,224,.32);
  --gr:#059669;--grb:rgba(5,150,105,.09);--grbr:rgba(5,150,105,.28);
  --am:#d97706;--amb:rgba(217,119,6,.09);--ambr:rgba(217,119,6,.28);
  --rd:#dc2626;--rdb:rgba(220,38,38,.09);--rdbr:rgba(220,38,38,.28);
  --bl:#2563eb;--blb:rgba(37,99,235,.09);
  /* Darker on light backgrounds — WhatsApp's own green fails contrast on white. */
  --wa:#128c4a;--wab:rgba(18,140,74,.10);--wabr:rgba(18,140,74,.30);
  --cg:rgba(0,0,0,.06);--ch:rgba(0,0,0,.025);
  --sh:0 4px 24px rgba(0,0,0,.1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:var(--font);font-size:13.5px;line-height:1.5;color:var(--t);background:var(--bg);overflow:hidden}
button{font-family:var(--font);cursor:pointer;border:none;background:none}
a{color:var(--bl);text-decoration:none}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--surf);border-radius:3px}
input[type=date],input[type=datetime-local]{color-scheme:dark light}
.app{display:flex;height:100vh;overflow:hidden}
/* ── sidebar ── */
.sidebar{width:224px;min-width:224px;background:var(--bg2);border-inline-end:1px solid var(--b);display:flex;flex-direction:column;padding:18px 10px;position:sticky;top:0;height:100vh;overflow:hidden}
.logo{display:flex;align-items:center;gap:9px;padding:5px 8px;margin-bottom:22px;flex-shrink:0}
.nav-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
.logo-mark{width:32px;height:32px;border-radius:8px;background:var(--ac);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.logo-name{font-size:15px;font-weight:700;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The client organisation, on its own line under the product name. Truncated
   rather than wrapped: the sidebar is a fixed width and a long company name
   would otherwise push the whole nav down. Not mono — it is a company name, not
   a version string. */
.logo-org{font-size:10.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px;margin-top:1px}
/* An uploaded mark sits where the stock one does. `contain`, so a wide or tall
   logo is letterboxed instead of cropped or stretched. */
.logo-img{width:32px;height:32px;border-radius:8px;object-fit:contain;background:var(--bg3);flex-shrink:0}
.nav-grp{margin-bottom:2px}
.nav-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);font-weight:600;padding:10px 8px 3px}
.nb{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border-radius:var(--rsm);color:var(--t2);font-size:12.5px;font-weight:400;transition:all var(--tr)}
.nb:hover{background:var(--bg3);color:var(--t)}
.nb.active{background:var(--acb);color:var(--ac2);border:1px solid var(--acbr);font-weight:500;border-inline-start:3px solid var(--ac);padding-inline-start:6px}
.nb.compose-active::after{content:'✏';font-size:9px;margin-inline-start:auto;opacity:.7;font-style:normal}
.ni{font-size:15px;width:18px;text-align:center;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.nbadge{margin-inline-start:auto;font-size:9.5px;font-family:var(--mono);padding:1px 5px;border-radius:20px;background:var(--acb);color:var(--ac2);border:1px solid var(--acbr)}
.nbadge.g{background:var(--grb);color:var(--gr);border-color:var(--grbr)}
.urow{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--rsm);cursor:default}
/* Flat theme accent, not a gradient: the old one ramped var(--ac) into a
   hard-coded #a855f7 purple, so the avatar was the one chip on screen that
   ignored the theme. Callers that set their own background (the group chips)
   still override it. */
.av{width:28px;height:28px;border-radius:50%;background:var(--ac);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#fff;flex-shrink:0}
.uname{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uemail{font-size:10px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ── main ── */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{height:56px;min-height:56px;border-bottom:1px solid var(--b);display:flex;align-items:center;justify-content:space-between;padding:0 26px;background:var(--bg2);position:sticky;top:0;z-index:20}
.pgtitle{font-size:16px;font-weight:700;letter-spacing:-.02em}
.topbar-r{display:flex;align-items:center;gap:8px}
#reminder-bell:hover{background:var(--bg3);color:var(--t)}
.rbell-dot{position:absolute;top:4px;inset-inline-end:5px;width:9px;height:9px;border-radius:50%;background:#ef4444;border:2px solid var(--bg2);animation:rbellblink 1.1s ease-in-out infinite}
@keyframes rbellblink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.6)}}
.content{flex:1;padding:18px 20px;overflow-y:auto}
/* ── cards ── */
.card{background:var(--bg2);border:1px solid var(--b);border-radius:var(--rlg);padding:16px;transition:border-color var(--tr)}
.card:hover{border-color:var(--b2)}
.chd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;gap:10px;flex-wrap:wrap}
.ctitle{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.csub{font-size:11px;color:var(--t3);margin-top:2px}
/* ── stats ── */
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin-bottom:20px}
.stat{background:var(--bg2);border:1px solid var(--b);border-radius:var(--r);padding:16px;position:relative;overflow:hidden;transition:border-color var(--tr),transform var(--tr)}
.stat:hover{border-color:var(--b2);transform:translateY(-1px)}
.stat::after{content:'';position:absolute;top:0;inset-inline-start:0;inset-inline-end:0;height:2px}
.stat.cp::after{background:var(--ac)}.stat.cg::after{background:var(--gr)}.stat.ca::after{background:var(--am)}.stat.cb::after{background:var(--bl)}.stat.cr::after{background:var(--rd)}
.slbl{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--t3);font-weight:600;margin-bottom:6px}
.sval{font-size:28px;font-weight:700;letter-spacing:-.04em;font-family:var(--mono)}
.stat.cp .sval{color:var(--ac2)}.stat.cg .sval{color:var(--gr)}.stat.ca .sval{color:var(--am)}.stat.cb .sval{color:var(--bl)}.stat.cr .sval{color:var(--rd)}
.smeta{font-size:10.5px;color:var(--t3);margin-top:4px}
/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:var(--rsm);font-size:12px;font-weight:500;transition:all var(--tr);white-space:nowrap;
  --bs-btn-hover-bg:transparent;--bs-btn-hover-color:inherit;--bs-btn-hover-border-color:transparent;
  --bs-btn-active-bg:transparent;--bs-btn-active-color:inherit;--bs-btn-focus-shadow-rgb:none}
.btn:disabled{opacity:.38;cursor:not-allowed;pointer-events:none}
.btn:hover,.btn:focus,.btn:focus-visible{outline:none;box-shadow:none}
.btn-p{background:var(--ac)!important;color:#fff!important}.btn-p:hover{filter:brightness(1.12)!important;transform:translateY(-1px);box-shadow:0 4px 14px rgba(124,111,255,.38)!important;background:var(--ac)!important;color:#fff!important}
.btn-s{background:var(--bg3)!important;color:var(--t)!important;border:1px solid var(--b2)!important}.btn-s:hover{background:var(--bg4)!important;border-color:var(--b3)!important;color:var(--t)!important}
.btn-d{background:var(--rdb)!important;color:var(--rd)!important;border:1px solid var(--rdbr)!important}.btn-d:hover{background:rgba(248,113,113,.22)!important;color:var(--rd)!important}
.btn-g{background:var(--grb)!important;color:var(--gr)!important;border:1px solid var(--grbr)!important}.btn-g:hover{background:rgba(52,211,153,.22)!important;color:var(--gr)!important}
.btn-ghost{color:var(--t2)!important;padding:6px 9px;background:transparent!important}.btn-ghost:hover{background:var(--bg3)!important;color:var(--t)!important}
.btn-sm{padding:4px 10px;font-size:11px}
.btn-icon{padding:7px;border-radius:var(--rsm);color:var(--t2)!important;display:flex;align-items:center;justify-content:center;transition:all var(--tr);background:var(--bg3)!important;border:1px solid var(--b2)!important}.btn-icon:hover{background:var(--bg4)!important;color:var(--t)!important;border-color:var(--b3)!important}
/* ── badges ── */
.badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:20px;font-size:10px;font-weight:500;background:var(--bg3);color:var(--t2)}
.bg{background:var(--grb);color:var(--gr);border:1px solid var(--grbr)}
.ba{background:var(--amb);color:var(--am);border:1px solid var(--ambr)}
.br{background:var(--rdb);color:var(--rd);border:1px solid var(--rdbr)}
.bp{background:var(--acb);color:var(--ac2);border:1px solid var(--acbr)}
.bb{background:var(--blb);color:var(--bl)}
.bgr{background:var(--bg3);color:var(--t2);border:1px solid var(--b2)}
/* ── forms ── */
.fg{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.flbl{font-size:10.5px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.04em}
.inp{background:var(--bg3);border:1px solid var(--b2);color:var(--t);border-radius:var(--rsm);padding:8px 12px;font-size:13px;font-family:var(--font);width:100%;transition:border-color var(--tr)}
.inp:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--acb)}
.inp::placeholder{color:var(--t3)}
textarea.inp{resize:vertical;min-height:130px;line-height:1.65}
/* ── editable vs read-only fields ─────────────────────────────────────────────
   A field you can type in reads in the primary text colour (near-black on light,
   near-white on dark, via --t). One you cannot is greyed to --t2 — the same grey
   the read-only value rows already use — over a flatter background, so
   "why won't this take my typing?" is answerable at a glance
   instead of by clicking. Covers BOTH disabled and readonly — indistinguishable
   to a user, different states in HTML — and the unclassed inputs too, so a form
   built without .inp/.popup-inp still follows the rule. */
.inp:disabled,.inp[readonly],.popup-inp:disabled,.popup-inp[readonly],
input:not([type=checkbox]):not([type=radio]):disabled,select:disabled,textarea:disabled,
input:not([type=checkbox]):not([type=radio])[readonly],textarea[readonly]{
  color:var(--t2);
  -webkit-text-fill-color:var(--t2);   /* WebKit ignores `color` on :disabled */
  background:var(--bg2);
  border-color:var(--b);
  opacity:1;                           /* keep the browser's own dimming out of it */
  cursor:not-allowed;
}
/* readonly text is still selectable/copyable, so it keeps a normal cursor */
.inp[readonly],.popup-inp[readonly],
input:not([type=checkbox]):not([type=radio])[readonly],textarea[readonly]{cursor:default}
.inp:disabled::placeholder,.inp[readonly]::placeholder,
.popup-inp:disabled::placeholder,.popup-inp[readonly]::placeholder{color:var(--t3);opacity:.65}
/* A read-only VALUE rendered as text rather than as an input (the popups show a
   few of these) — same grey, so the distinction reads the same either way. */
.ro-val{color:var(--t2)}
/* ── loading skeleton ────────────────────────────────────────────────────────
   Placeholder blocks in the shape of the real content, so a slow dashboard shows
   its layout arriving rather than a blank page or — because the widgets keep
   their previous values between visits — last visit's numbers. Built from theme
   vars so it works in both themes. */
@keyframes sk-shimmer{100%{transform:translateX(100%)}}
.sk{position:relative;overflow:hidden;background:var(--bg3);border-radius:6px}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--cg),transparent);
  animation:sk-shimmer 1.4s infinite}
@media (prefers-reduced-motion:reduce){.sk::after{animation:none}}
.sk-line{height:11px;margin-bottom:8px}
.sk-line.w40{width:40%}.sk-line.w60{width:60%}.sk-line.w80{width:80%}
.sk-card{background:var(--bg2);border:1px solid var(--b);border-radius:var(--rlg);
  padding:18px 20px;display:flex;flex-direction:column;gap:10px}
/* Covers the live dashboard rather than replacing it: the widgets underneath stay
   laid out, so gridstack and the chart canvases can still measure themselves. */
/* z-index 20 clears everything inside the dashboard (the widget edit button at 5
   is the highest) while staying well below the app's overlay range (500+), so
   popups, the command palette and toasts still open over it. */
#dash-skeleton{position:absolute;inset:0;z-index:20;background:var(--bg);
  padding:2px 2px 24px;overflow:hidden;min-height:calc(100vh - 130px)}
/* An overlay alone is not enough: before gridstack lays the widgets out they
   overflow past #p-dashboard's box, and anything outside it pokes out below the
   cover. Hide the siblings outright while loading — `visibility`, never
   `display:none`, so gridstack and the chart canvases keep real dimensions to
   measure themselves against underneath. */
#p-dashboard.dash-loading > *:not(#dash-skeleton){visibility:hidden}
/* ── checkout: choose users, see the total, then pay ─────────────────────────
   Step 2 of the plans dialog. Every plan is priced per user, so the card itself
   carries one price and this panel does the arithmetic — server-side, because
   the figure shown here has to be the figure charged. */
.co{max-width:420px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.co-back{background:none;border:0;padding:0;cursor:pointer;color:var(--t3);
  font:inherit;font-size:12px;display:flex;align-items:center;gap:5px;align-self:flex-start}
.co-back:hover{color:var(--t)}
.co-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:13px;color:var(--t2)}
.co-lbl{font-weight:600;color:var(--t)}
.co-step{display:flex;align-items:center;gap:6px}
.co-pm{width:28px;height:28px;border:1px solid var(--b);background:var(--bg2);
  border-radius:8px;color:var(--t2);font-size:15px;line-height:1;cursor:pointer}
.co-pm:hover{color:var(--t);border-color:var(--ac2)}
.co-step .co-n{width:78px;padding:5px 8px;font-size:13px;text-align:center}
.co-cap{font-size:11.5px;color:var(--t3);margin-top:-6px}
.co-ai{justify-content:flex-start;cursor:pointer;line-height:1.45;font-size:12.5px}
.co-ai input{flex:0 0 auto;width:14px;height:14px;cursor:pointer}
.co-lines{border:1px solid var(--b);border-radius:10px;background:var(--bg2);
  padding:11px 12px;display:flex;flex-direction:column;gap:5px;min-height:64px}
.co-line{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--t3)}
.co-line.co-sum{font-size:15px;font-weight:700;color:var(--t);padding-top:7px;
  margin-top:2px;border-top:1px solid var(--b)}
.co-tax,.co-note{font-size:11px;color:var(--t3);line-height:1.5}
.co-wait{font-size:12px;color:var(--t3)}
.co-err{font-size:12px;color:var(--rd)}
.co-go{width:100%;justify-content:center}
/* The seat top-up reuses the same panel inside the limit-reached popup. */
.seats-add{max-width:none;margin:12px 0}
/* ── upgrading a live subscription ───────────────────────────────────────────
   Three extra states the first purchase has no use for: which plan you are
   moving off, waiting for the payment to be confirmed (the plan is applied by
   the webhook, not by the button), and what you now have. */
.co-from{font-size:12px;color:var(--t3);margin-top:-4px}
.co-wait-panel,.co-done{align-items:center;text-align:center}
.co-wait-panel .co-line,.co-done .plan-feats{width:100%}
.co-pend-plan{font-size:17px;font-weight:700;color:var(--t)}
.co-spin{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--b);
  border-top-color:var(--ac2);animation:co-spin 900ms linear infinite}
@keyframes co-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.co-spin{animation:none}}
.co-done-badge{width:38px;height:38px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:var(--grb);color:var(--gr)}
.co-done .plan-feats{max-height:none;margin:0}
/* The card for the plan the org is already on: still readable, not clickable. */
.plan-card.cur{border-color:var(--ac2)}
.plan-badge.cur{background:var(--ac2)}
/* ── generic page loading cover ──────────────────────────────────────────────
   The same idea as #dash-skeleton, for every other page: while a page's loader is
   in flight the page shows a shimmer instead of a half-built table or an empty
   state that says "no records" before anything has been fetched.
   `visibility`, not `display:none`, for the same reason as the dashboard — the
   real content keeps its box, so charts and tables can still measure themselves
   underneath. The cover is inserted as the FIRST child and excluded from the rule
   so it stays visible itself. */
.pg-loading{position:relative;min-height:240px}
.pg-loading > *:not(.pg-skel){visibility:hidden}
/* z-index 20 matches #dash-skeleton: above everything inside a page, far below
   the app's overlay range (500+) so popups, toasts and ⌘K still open over it. */
.pg-skel{position:absolute;inset:0;z-index:20;background:var(--bg);
  padding:2px 0;overflow:hidden}
.pg-skel .pg-skrow{display:flex;align-items:center;gap:12px;padding:11px 2px;
  border-bottom:1px solid var(--b)}
@media (prefers-reduced-motion:reduce){.pg-skel{opacity:.85}}
/* ── sidebar skeleton ────────────────────────────────────────────────────────
   The nav ships with every button in the markup, and JS then hides the ones this
   plan/role/owner cannot use and moves them into the user's saved order. Doing
   that in front of the user means items visibly appear, vanish and jump on every
   load. So the real nav is covered until it has been arranged, and revealed once.
   Same .sk shimmer as the dashboard cover. */
#nav-skeleton{padding:2px 0}
/* display:none, not visibility — unlike the dashboard cover there is nothing
   underneath that needs to measure itself, and reserving space for buttons that
   are about to be hidden would make the sidebar jump when they go. */
.nav-scroll.nav-loading > .nav-grp{display:none}
/* Row heights match .nb (7px padding + an ~18px row) so the swap is quiet. */
.sk-nb{height:32px;border-radius:var(--rsm);margin-bottom:4px}
.sk-navlbl{height:8px;width:38%;margin:10px 8px 6px;border-radius:4px}
/* ── combo dropdown (region picker etc.) ── */
.combo-wrap{position:relative}
.combo-list{position:absolute;inset-inline-start:0;inset-inline-end:0;top:calc(100% + 4px);background:var(--bg2);border:1px solid var(--b2);border-radius:var(--rsm);box-shadow:var(--sh);max-height:200px;overflow-y:auto;z-index:9500}
.combo-item{padding:7px 12px;font-size:12.5px;color:var(--t2);cursor:pointer;transition:background var(--tr)}
.combo-item:hover{background:var(--bg3);color:var(--t)}
.combo-empty{padding:7px 12px;font-size:11.5px;color:var(--t3)}
input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:var(--bg4);border-radius:2px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--ac);cursor:pointer;box-shadow:0 0 0 3px var(--acb);transition:transform var(--tr)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}
/* ── table ── */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:start;padding:8px 13px;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--t3);font-weight:600;border-bottom:1px solid var(--b);white-space:nowrap}
td{padding:10px 13px;border-bottom:1px solid var(--b);font-size:12px;color:var(--t2)}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--ch);color:var(--t)}
/* ── record grids: one long value must not stretch the whole column ──────────
   Truncate with an ellipsis instead of wrapping, so rows stay one line tall and
   the columns keep their proportions no matter what a record contains. The full
   text is put on the cell's tooltip when (and only when) it is actually clipped
   — see the delegated hover handler, so no renderer has to remember to do it.
   The last column is the actions cell (kebab / buttons); it is left alone. Its
   menus are position:fixed and body-appended, so clipping cells is safe. */
#prospects-body td:not(:last-child), #leads-body td:not(:last-child),
#suppression-body td:not(:last-child), #accounts-body td:not(:last-child),
#opps-body td:not(:last-child), #contracts-body td:not(:last-child),
#contacts-body td:not(:last-child),
#utb td:not(:last-child){
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tdp{color:var(--t)!important;font-weight:500}
/* ── pinned actions column ───────────────────────────────────────────────────
   The last column holds the row's controls (note icon + kebab). Sticking it to
   the right edge means the horizontal scrollbar moves the DATA columns while the
   controls stay reachable — you never have to scroll to the end to open a menu.
   It needs an opaque background of its own, otherwise the columns sliding
   underneath show through. */
.tw-pin{position:relative}
.tw-pin th:last-child, .tw-pin td:last-child{
  position:sticky;inset-inline-end:0;z-index:2;
  background:var(--bg2);
  width:1%;white-space:nowrap;
  box-shadow:-7px 0 9px -7px rgba(0,0,0,.32);
}
.tw-pin thead th:last-child{z-index:3}
.tw-pin tbody tr:hover td:last-child{background:var(--bg3)}
/* ── row note ────────────────────────────────────────────────────────────────
   A record's own Notes field, surfaced as an icon rather than a column: hover to
   peek, click to pin it open so the text can be read at length or copied. */
.note-btn{background:none;border:1px solid transparent;color:var(--am);border-radius:7px;padding:3px 5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s;vertical-align:middle}
.note-btn:hover,.note-btn.on{background:var(--amb);border-color:var(--ambr);color:var(--am)}
.note-btn svg{width:14px;height:14px}
/* The scroll lives on the INNER body, not here: `overflow:auto` on the popover
   itself clips anything drawn outside it, which would eat the pointer. */
.note-pop{position:fixed;z-index:9998;max-width:340px;
  background:var(--bg3);color:var(--t2);border:1px solid var(--b2);border-radius:10px;
  box-shadow:var(--sh)}
.note-pop-b{max-height:260px;overflow:auto;padding:10px 12px;
  font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.note-pop-h{font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--t3);margin-bottom:5px}
/* The pointer. Two triangles: the outer one is the border colour, the inner one
   sits 2px over it in the fill colour, so the tail carries the same hairline
   border as the box. `--ay` is set in JS to the icon's centre, because the
   popover's top is clamped to the viewport and a fixed arrow position would
   drift off the icon near the edges of the screen. */
.note-pop::before,.note-pop::after{content:'';position:absolute;width:0;height:0;
  border:7px solid transparent;top:var(--ay,14px);pointer-events:none}
.note-pop.np-left::before{right:-14px;border-left-color:var(--b2)}
.note-pop.np-left::after{right:-12px;border-left-color:var(--bg3)}
.note-pop.np-right::before{left:-14px;border-right-color:var(--b2)}
.note-pop.np-right::after{left:-12px;border-right-color:var(--bg3)}
/* ── Help assistant ──────────────────────────────────────────────────────────
   A docked panel rather than a modal: questions are usually asked *about* the
   thing on screen, so covering the screen would defeat the purpose. */
#helpbot-fab{position:fixed;inset-inline-end:22px;bottom:22px;z-index:8500;width:52px;height:52px;border-radius:50%;
  border:none;background:linear-gradient(145deg,var(--ac),#6f5ae0);color:#fff;cursor:pointer;display:flex;
  align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(90,98,170,.42);
  transition:transform .18s ease, box-shadow .18s ease}
#helpbot-fab:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 12px 30px rgba(90,98,170,.52)}
#helpbot-fab:active{transform:translateY(-1px) scale(.99)}
#helpbot-fab svg{width:29px;height:29px;stroke-width:1.6}
#helpbot{position:fixed;inset-inline-end:22px;bottom:80px;z-index:8500;width:380px;max-width:calc(100vw - 32px);
  max-height:min(560px,calc(100vh - 120px));display:flex;flex-direction:column;
  background:var(--bg2);border:1px solid var(--b2);border-radius:var(--rlg);box-shadow:var(--sh);overflow:hidden}
.hb-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--b);
  background:linear-gradient(135deg,var(--ac),#6f5ae0);color:#fff}
/* Her avatar, reused in the header and beside every reply, so the thread reads
   as a conversation with someone rather than a log of responses. */
.hb-av{width:30px;height:30px;border-radius:50%;flex:0 0 30px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.18);color:#fff}
.hb-av svg{width:20px;height:20px;stroke-width:1.6}
.hb-title{font-size:14px;font-weight:700;color:#fff;letter-spacing:.1px}
.hb-sub{font-size:10.5px;color:rgba(255,255,255,.78);margin-top:1px;display:flex;align-items:center;gap:5px}
.hb-dot{width:6px;height:6px;border-radius:50%;background:#5ee3a1;box-shadow:0 0 0 2px rgba(94,227,161,.25)}
.hb-x{margin-inline-start:auto;background:none;border:none;color:rgba(255,255,255,.8);border-radius:7px;
  padding:4px 5px;cursor:pointer;display:inline-flex;line-height:0}
.hb-x:hover{background:rgba(255,255,255,.16);color:#fff}
.hb-x svg{width:15px;height:15px}
.hb-log{flex:1;min-height:150px;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:11px;
  background:var(--bg)}
/* One row = avatar + bubble. The avatar column stays even on the messages that
   don't show one, so consecutive replies stay aligned. */
.hb-row{display:flex;gap:8px;align-items:flex-start;max-width:100%}
.hb-row .hb-av{width:26px;height:26px;flex:0 0 26px;background:linear-gradient(145deg,var(--ac),#6f5ae0)}
.hb-row .hb-av svg{width:17px;height:17px}
.hb-row.tail .hb-av{visibility:hidden}
.hb-you{align-self:flex-end;max-width:82%;background:linear-gradient(145deg,var(--ac),#6f5ae0);color:#fff;
  border-radius:14px 14px 4px 14px;padding:8px 12px;font-size:12.5px;line-height:1.45;word-break:break-word;
  box-shadow:0 2px 8px rgba(90,98,170,.22)}
.hb-bot{min-width:0;max-width:calc(100% - 34px);background:var(--bg2);border:1px solid var(--b);
  border-radius:14px 14px 14px 4px;padding:9px 12px;font-size:12.5px;color:var(--t2);line-height:1.55;
  word-break:break-word;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.hb-bot b{color:var(--t);font-weight:650}
.hb-cite{margin-top:7px;padding-top:6px;border-top:1px dashed var(--b);font-size:10.5px;color:var(--t3)}
.hb-tbl{width:100%;border-collapse:collapse;margin-top:9px;font-size:12px}
.hb-tbl td{padding:5px 0;border-bottom:1px solid var(--b);color:var(--t2)}
.hb-tbl td:last-child{text-align:end;color:var(--t);font-weight:600;font-family:var(--mono);white-space:nowrap;padding-inline-start:10px}
.hb-tbl tr:last-child td{border-bottom:none}
/* Listing rather than figures: the second column is a name, so drop the
   tabular treatment and let the first column carry the weight. */
/* The TEXT variant of the table (a listing, or the CRM records Lilly offers as
   related). `nowrap` above is right for figures - "1,300,000" must never break -
   but a descriptive value like "Lead - savvypharma - Customer" then demanded its
   full width and starved the label column until it wrapped one character per
   line and the table overflowed the panel. Text columns wrap and share. */
.hb-tbl-text{table-layout:fixed}
.hb-tbl-text td:last-child{font-family:inherit;font-weight:400;color:var(--t3);
  white-space:normal;overflow-wrap:anywhere}
.hb-tbl-text td:first-child{width:54%;overflow-wrap:anywhere}
.hb-tbl-text td:first-child{color:var(--t);font-weight:600}
/* Meeting rows open in place. */
.hb-tbl tr.hb-open{cursor:pointer}
.hb-tbl tr.hb-open:hover td{color:var(--ac)}
.hb-tbl tr.hb-open svg{opacity:.45;transition:transform .15s}
.hb-tbl tr.hb-open.is-open svg{transform:rotate(90deg);opacity:.9}
/* The detail cell spans the row, so it is also the LAST cell — which the
   numeric column styling would right-align and set in mono. Undo all of it. */
.hb-tbl tr.hb-detail td{padding:2px 0 8px;border-bottom:1px solid var(--b);
  text-align:start;font-family:inherit;font-weight:400;color:var(--t2);white-space:normal}
.hb-momwrap{margin-top:6px}
.hb-src{margin-top:7px;border-inline-start:2px solid var(--acbr);padding-inline-start:9px;font-size:11.5px;color:var(--t3);line-height:1.5}
/* Step-by-step answers. <ol> owns the numbering so it can never disagree with
   numbers baked into the text. */
.hb-steps{margin:8px 0 2px;padding-inline-start:20px;display:flex;flex-direction:column;gap:5px}
.hb-steps li{font-size:12.5px;color:var(--t2);line-height:1.5}
.hb-steps li::marker{color:var(--ac);font-weight:600}
/* Meeting detail: a labelled block of prose or bullet points (description,
   minutes) under the summary table. */
.hb-sec{margin-top:10px}
.hb-sec-h{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--t3);margin-bottom:4px}
.hb-para{font-size:12.5px;color:var(--t2);line-height:1.55}
.hb-points{margin:0;padding-inline-start:18px;display:flex;flex-direction:column;gap:4px}
.hb-points li{font-size:12.5px;color:var(--t2);line-height:1.5}
.hb-points li::marker{color:var(--ac)}
/* A draft reminder / to-do awaiting confirmation. */
.hb-draft{margin-top:9px;padding:10px;border:1px solid var(--b2);border-radius:10px;
  background:var(--bg);display:flex;flex-direction:column;gap:7px}
.hb-fl{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--t3)}
.hb-fi{width:100%;box-sizing:border-box;height:30px;padding:4px 8px;font-size:12.5px;
  border:1px solid var(--b2);border-radius:7px;background:var(--bg2);color:var(--t);
  font-family:inherit}
.hb-fi:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 2px var(--acb)}
/* What Lilly still needs, marked rather than described in a sentence. */
.hb-fi.hb-need{border-color:var(--am);background:var(--amb)}
.hb-frow{display:flex;gap:8px}
.hb-frow>div{flex:1;min-width:0}
.hb-dact{display:flex;gap:7px;margin-top:2px}
.hb-done{display:flex;align-items:center;gap:7px;margin-top:9px;padding:8px 10px;
  border-radius:9px;background:var(--grb);border:1px solid var(--grbr);
  font-size:12.5px;color:var(--t)}
.hb-done svg{color:var(--gr);flex:0 0 auto}
.hb-hint{font-size:12px;color:var(--t3);line-height:1.5}
.hb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.hb-chip{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--bg2);
  border:1px solid var(--b2);color:var(--t2);font-size:11.5px;cursor:pointer;transition:all .14s}
.hb-chip:hover{background:var(--acb);border-color:var(--acbr);color:var(--t);transform:translateY(-1px)}
/* Typing indicator - three dots, so a slow answer looks like thinking rather
   than a stall. */
.hb-typing{display:flex;gap:4px;padding:3px 2px}
.hb-typing i{width:6px;height:6px;border-radius:50%;background:var(--t3);animation:hbBounce 1.2s infinite}
.hb-typing i:nth-child(2){animation-delay:.15s}
.hb-typing i:nth-child(3){animation-delay:.3s}
@keyframes hbBounce{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.hb-ask{display:flex;gap:8px;padding:11px 12px;border-top:1px solid var(--b);background:var(--bg2)}
.hb-ask .inp{flex:1;min-width:0;height:34px;font-size:12.5px;padding:5px 11px;border-radius:999px}
.hb-ask .btn{border-radius:999px;padding-inline-start:14px;padding-inline-end:14px}
@media(max-width:520px){#helpbot{inset-inline-end:8px;inset-inline-start:8px;width:auto;bottom:72px}}
/* ── Reports · record pipeline ──────────────────────────────────────────────
   One small palette, used consistently: a hue means the same thing in the
   milestone rail, the stat tiles, the stage bars and the timeline. Tints are
   set with colour-mix against the surface, so the same rules read correctly in
   both themes instead of needing a second set. */
.jr-pick{position:relative}
.jr-menu{position:absolute;z-index:60;inset-inline-start:0;inset-inline-end:0;top:calc(100% + 6px);
  background:var(--bg2);border:1px solid var(--b2);border-radius:12px;
  box-shadow:0 16px 40px rgba(16,18,40,.18);overflow:hidden;max-height:340px;
  overflow-y:auto;padding:5px}
.jr-item{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:9px;cursor:pointer}
.jr-item:hover,.jr-item.on{background:var(--acb)}
.jr-ini{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:11px;font-weight:700;
  color:#fff;background:linear-gradient(145deg,var(--ac),#6f5ae0)}
.jr-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.jr-txt b{font-size:12.5px;color:var(--t);font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.jr-mail{font-size:11.5px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jr-menu mark{background:transparent;color:var(--ac);font-weight:700}
.jr-tag{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;
  padding:2px 7px;border-radius:99px;flex:0 0 auto}
.jr-tag-lead{background:var(--acb);color:var(--ac)}
.jr-tag-prospect{background:var(--amb);color:var(--am)}
.jr-tag-contact{background:var(--grb);color:var(--gr)}
.jr-tag-opportunity{background:rgba(99,102,241,.12);color:#6366f1}
.jr-empty{padding:12px;text-align:center;font-size:12px;color:var(--t3)}

/* The palette. */
.h-sky{--h:#0ea5e9}
.h-indigo{--h:#6366f1}
.h-violet{--h:#8b5cf6}
.h-emerald{--h:#10b981}
.h-amber{--h:#f59e0b}
.h-slate{--h:#64748b}
.h-rose{--h:#f43f5e}

/* ── Popup kit ── shared chrome for the reminders digest and the release
   notes. Both are edge-to-edge inside a .pop-flush box: the hero and footer
   bleed to the border and only the middle scrolls, so the heading stays put
   while a long list moves under it. Every colour derives from --h, set by a
   palette class on the block. */
.popup-box.pop-flush{padding:0;overflow:hidden}
.pk-hero{position:relative;padding:20px 22px 15px;
  background:
    radial-gradient(120% 170% at 0% 0%, color-mix(in srgb,var(--h) 20%, transparent) 0%, transparent 62%),
    radial-gradient(110% 150% at 100% 10%, color-mix(in srgb,var(--ac) 13%, transparent) 0%, transparent 58%),
    var(--bg2)}
.pk-hero::after{content:'';position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--h),color-mix(in srgb,var(--h) 22%, transparent))}
.pk-top{display:flex;align-items:center;gap:12px}
.pk-ico{width:42px;height:42px;flex:0 0 42px;border-radius:13px;display:flex;
  align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(150deg,var(--h),color-mix(in srgb,var(--h) 62%, #4c1d95));
  box-shadow:0 8px 20px color-mix(in srgb,var(--h) 34%, transparent)}
.pk-h1{font-size:15px;font-weight:700;color:var(--t);letter-spacing:-.012em;line-height:1.25}
.pk-sub{font-size:11.5px;color:var(--t3);margin-top:3px;line-height:1.4}
.pk-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px}
.pk-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  padding:4px 10px 4px 8px;border-radius:99px;color:var(--h);
  background:color-mix(in srgb,var(--h) 13%, var(--bg2));
  border:1px solid color-mix(in srgb,var(--h) 28%, transparent)}
.pk-chip i{width:6px;height:6px;border-radius:50%;background:var(--h);flex:0 0 6px}
.pk-body{padding:4px 22px 10px;max-height:min(58vh,460px);overflow-y:auto}
.pk-foot{padding:13px 22px;border-top:1px solid var(--b);
  background:color-mix(in srgb,var(--h) 5%, var(--bg2));
  display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* Section heading: label, count, and a rule that fades out to the right. */
.pk-sec{margin-top:15px}
.pk-sec-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pk-sec-h b{font-size:9.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.11em;color:var(--h)}
.pk-sec-h s{flex:1;height:1px;text-decoration:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--h) 32%, transparent),transparent)}
.pk-n{font-size:10px;font-weight:800;color:var(--h);border-radius:99px;padding:1px 7px;
  background:color-mix(in srgb,var(--h) 14%, var(--bg2))}

.pk-row{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:11px;
  margin-bottom:6px;background:color-mix(in srgb,var(--h) 6%, var(--bg2));
  border:1px solid color-mix(in srgb,var(--h) 15%, transparent);
  border-inline-start:3px solid color-mix(in srgb,var(--h) 60%, transparent);
  transition:background var(--tr),transform var(--tr)}
.pk-row.tap{cursor:pointer}
.pk-row.tap:hover{background:color-mix(in srgb,var(--h) 13%, var(--bg2));transform:translateX(2px)}
.pk-row>.pk-gl{color:var(--h);flex:0 0 auto;display:flex;margin-top:1px}
.pk-txt{flex:1;min-width:0;font-size:12.5px;color:var(--t);line-height:1.45;word-break:break-word}
.pk-meta{font-size:11px;color:var(--h);font-weight:650;margin-top:3px}
.pk-meta em{font-style:normal;font-weight:500;color:var(--t3)}
.pk-go{color:var(--h);font-size:11px;cursor:pointer;opacity:.75}
.pk-go:hover{opacity:1}
.pk-desc{font-size:11.5px;color:var(--t2);margin-top:7px;padding:7px 10px;background:var(--bg);
  border:1px solid var(--b);border-radius:9px;white-space:pre-wrap;word-break:break-word}
.pk-more{font-size:11px;color:var(--t3);padding:1px 4px 4px}
/* Write-an-email dialog. */
.ce-wait{display:flex;align-items:center;gap:9px;padding:26px 4px;justify-content:center;
  font-size:12.5px;color:var(--t3)}
.ce-wait svg{animation:spin 1.1s linear infinite;color:var(--h)}
.ce-count{font-size:11.5px;color:var(--t3);padding:10px 2px 8px;line-height:1.45}

.pk-empty{text-align:center;padding:26px 10px 20px}
.pk-empty i{width:54px;height:54px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;color:var(--gr);background:var(--grb);
  border:1px solid var(--grbr);margin-bottom:11px}
.pk-empty b{display:block;font-size:13.5px;color:var(--t);font-weight:650}
.pk-empty p{font-size:12px;color:var(--t3);margin-top:5px}

/* Release notes: one numbered line per change. */
.pk-note{display:flex;gap:11px;align-items:flex-start;padding:10px 2px;
  border-bottom:1px dashed var(--b)}
.pk-note:last-child{border-bottom:0}
.pk-num{width:22px;height:22px;flex:0 0 22px;border-radius:7px;display:flex;align-items:center;
  justify-content:center;font-size:10.5px;font-weight:800;color:var(--h);
  background:color-mix(in srgb,var(--h) 14%, var(--bg2));
  border:1px solid color-mix(in srgb,var(--h) 28%, transparent)}
.pk-ver{display:inline-flex;align-items:center;font-size:11px;font-weight:800;letter-spacing:.02em;
  padding:3px 10px;border-radius:99px;color:#fff;
  background:linear-gradient(135deg,var(--h),color-mix(in srgb,var(--h) 45%, var(--ac)))}
.pk-when{font-size:11px;color:var(--t3)}
/* About — label/value pairs. The value wraps and the label does not, so a long
   company name or email reflows instead of stretching the popup. */
.ab-row{display:flex;gap:14px;align-items:baseline;padding:7px 2px;border-bottom:1px dashed var(--b)}
.ab-row:last-child{border-bottom:0}
.ab-k{flex:0 0 108px;font-size:11px;color:var(--t3)}
.ab-v{flex:1;min-width:0;font-size:12.5px;color:var(--t);word-break:break-word}
.ab-h{font-size:10.5px;font-weight:700;color:var(--t3);text-transform:uppercase;
  letter-spacing:.5px;padding:14px 2px 2px}
/* The org's own mark in the hero, where the stock icon otherwise sits. */
.ab-mark{width:44px;height:44px;border-radius:12px;object-fit:contain;
  background:rgba(255,255,255,.16);flex-shrink:0}

@media(max-width:600px){
  .pk-hero{padding:16px 16px 13px}
  .pk-body{padding:4px 16px 10px;max-height:52vh}
  .pk-foot{padding:12px 16px}
}

.jr-hero{background:
  radial-gradient(120% 140% at 0% 0%, color-mix(in srgb,var(--ac) 9%, transparent) 0%, transparent 60%),
  var(--bg2)}
.jr-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.jr-ava{width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:flex;
  align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;
  background:linear-gradient(145deg,var(--ac),#8b5cf6);
  box-shadow:0 6px 16px color-mix(in srgb,var(--ac) 32%, transparent)}
.jr-name{font-size:19px;font-weight:700;color:var(--t);line-height:1.2}
.jr-sub{font-size:12.5px;color:var(--t3);margin-top:2px}
.jr-span{margin-inline-start:auto;text-align:end;font-size:11px;color:var(--t3)}
.jr-span b{display:block;font-size:26px;color:var(--ac);line-height:1.05;font-weight:700}

/* Milestone rail. */
.jr-rail{display:flex;align-items:center;margin:18px 0 4px;overflow-x:auto;padding-bottom:2px}
.jr-mile{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto}
.jr-mile-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--bg3);border:2px solid var(--b2);color:var(--t3)}
.jr-mile.done .jr-mile-dot{background:color-mix(in srgb,var(--h) 15%, var(--bg2));
  border-color:var(--h);color:var(--h)}
.jr-mile-l{font-size:10.5px;font-weight:600;color:var(--t3);white-space:nowrap}
.jr-mile.done .jr-mile-l{color:var(--t)}
.jr-mile-bar{flex:1;min-width:22px;height:3px;border-radius:99px;background:var(--b2);
  margin:0 6px;margin-bottom:18px}
.jr-mile-bar.done{background:linear-gradient(90deg,var(--ac),#8b5cf6)}

/* Stat tiles. */
/* Grid, not flex-wrap: with flex the last row stretches its two tiles across
   the full width and the set stops looking like a set. */
.jr-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;margin-top:16px}
.jr-stats>div{padding:10px 12px;border-radius:12px;
  background:color-mix(in srgb,var(--h) 9%, var(--bg2));
  border:1px solid color-mix(in srgb,var(--h) 22%, transparent)}
.jr-stats span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--t3);margin-bottom:2px}
.jr-stats b{font-size:15.5px;color:var(--t);font-weight:700}

/* Stage durations. */
.jr-st{display:flex;align-items:center;gap:12px;padding:6px 0}
.jr-st-n{width:180px;flex:0 0 180px;font-size:12.5px;color:var(--t);display:flex;
  align-items:center;gap:6px}
.jr-st-n em{font-style:normal;font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;padding:1px 6px;border-radius:99px;
  background:color-mix(in srgb,var(--h) 16%, transparent);color:var(--h)}
.jr-st-bar{flex:1;height:10px;border-radius:99px;
  background:color-mix(in srgb,var(--h) 8%, var(--bg3));overflow:hidden}
.jr-st-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--h) 70%, #fff),var(--h))}
.jr-st.slow .jr-st-bar i{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.jr-st-d{width:52px;text-align:end;font-size:13px;font-weight:700;color:var(--t2)}
.jr-st-d span{font-size:10px;font-weight:600;color:var(--t3);margin-inline-start:1px}

/* Attachments. */
.jr-count{display:inline-block;margin-inline-start:6px;font-size:10.5px;font-weight:700;
  padding:1px 7px;border-radius:99px;background:var(--acb);color:var(--ac)}
.jr-files{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.jr-file{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;
  background:var(--bg3);color:var(--t3)}
.jr-file-n{flex:1;min-width:0;font-size:12.5px;color:var(--t);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jr-file-m{font-size:11px;color:var(--t3);white-space:nowrap}

/* Timeline — the dot's colour says what kind of event it was. */
.jr-line{position:relative;margin-top:10px;padding-inline-start:4px}
.jr-line:before{content:'';position:absolute;inset-inline-start:15px;top:10px;bottom:10px;width:2px;
  background:linear-gradient(180deg,var(--b2),color-mix(in srgb,var(--ac) 25%, transparent),var(--b2))}
.jr-ev{position:relative;display:flex;gap:13px;padding:8px 0;--h:#64748b}
.jr-ev.k-prospect{--h:#0ea5e9} .jr-ev.k-lead{--h:#6366f1}
.jr-ev.k-stage{--h:#8b5cf6}    .jr-ev.k-meeting{--h:#0ea5e9}
.jr-ev.k-opportunity{--h:#8b5cf6} .jr-ev.k-won{--h:#10b981}
.jr-ev.k-contract{--h:#f59e0b} .jr-ev.k-invoice{--h:#f59e0b}
.jr-ev.k-file{--h:#64748b}     .jr-ev.k-call{--h:#10b981}
.jr-ev.k-email{--h:#6366f1}    .jr-ev.k-note{--h:#64748b}
.jr-ev.k-reply{--h:#10b981}    .jr-ev.k-bounce{--h:#ef4444}
/* Engagement table. */
.jr-camp{width:100%;border-collapse:collapse;margin-top:14px;font-size:12.5px}
.jr-camp th{text-align:start;font-size:10px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--t3);font-weight:700;padding:0 8px 6px 0;border-bottom:1px solid var(--b)}
.jr-camp td{padding:8px 8px 8px 0;border-bottom:1px solid var(--b);color:var(--t2)}
.jr-camp tr:last-child td{border-bottom:none}
.jr-cn{color:var(--t);font-weight:600}
.jr-yes,.jr-no{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  padding:2px 7px;border-radius:99px;margin-inline-end:4px}
.jr-yes{background:color-mix(in srgb,#10b981 14%, transparent);color:#059669}
.jr-no{background:color-mix(in srgb,#ef4444 14%, transparent);color:#dc2626}
.jr-stats b em{font-style:normal;font-size:10.5px;font-weight:600;color:var(--t3);
  margin-inline-start:3px}
.jr-dot{position:relative;z-index:1;width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--h) 13%, var(--bg2));
  border:2px solid color-mix(in srgb,var(--h) 34%, transparent);color:var(--h)}
.jr-body{padding-top:2px}
.jr-t{font-size:13px;color:var(--t);font-weight:600}
.jr-d{font-size:12px;color:var(--t2);margin-top:2px;line-height:1.45}
.jr-m{font-size:11px;color:var(--t3);margin-top:3px}
@media print{.sb,.tb,#helpbot,#helpbot-fab,.jr-pick,.btn{display:none!important}
  .card{break-inside:avoid;box-shadow:none}}
/* ── progress ── */
.pw{background:var(--bg4);border-radius:100px;height:4px;overflow:hidden}
.pb{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--ac),var(--gr));transition:width .4s ease}
/* ── toast ── */
#toasts{position:fixed;top:16px;inset-inline-end:16px;z-index:9999;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{background:var(--bg3);border:1px solid var(--b2);border-radius:var(--r);padding:10px 14px;display:flex;align-items:center;gap:8px;min-width:250px;max-width:320px;font-size:12px;box-shadow:var(--sh);animation:tIn .2s ease;pointer-events:all}
.toast.s{border-color:var(--grbr)}.toast.e{border-color:var(--rdbr)}.toast.i{border-color:var(--acbr)}
.tdot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.toast.s .tdot{background:var(--gr)}.toast.e .tdot{background:var(--rd)}.toast.i .tdot{background:var(--ac)}
@keyframes tIn{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOutLeft{0%{transform:translateX(0);opacity:1;max-height:80px}60%{transform:translateX(-110%);opacity:0;max-height:80px}100%{transform:translateX(-110%);opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin:0;border:0}}
.mail-deleting{animation:slideOutLeft .32s cubic-bezier(.4,0,.2,1) forwards;overflow:hidden;pointer-events:none}
/* ── custom popup system ── */
.popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9000;padding:20px}
.popup-box{background:var(--bg2);border:1px solid var(--b2);border-radius:var(--rlg);padding:24px;min-width:320px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--sh);animation:popIn .15s ease}
@keyframes popIn{from{opacity:0;transform:scale(.95) translateY(-6px)}to{opacity:1;transform:scale(1) translateY(0)}}
.popup-title{font-size:14px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.popup-msg{font-size:12.5px;color:var(--t2);margin-bottom:18px;line-height:1.6}
.popup-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.popup-inp{width:100%;padding:8px 10px;background:var(--bg3);border:1px solid var(--b2);border-radius:var(--rsm);color:var(--t);font-size:13px;font-family:var(--font);outline:none;transition:border-color var(--tr)}
.popup-inp:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--acb)}
.popup-inp::placeholder{color:var(--t3)}
.popup-sep{height:1px;background:var(--b);margin:14px 0}
.esig-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:10.5px;font-weight:600;background:var(--amb);color:var(--am);border:1px solid var(--ambr);margin-bottom:14px}
/* ── overlay/modal ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:500;padding:20px}
.mf-dialog{background:var(--bg2);border:1px solid var(--b2);border-radius:var(--rlg);padding:28px;width:100%;box-shadow:var(--sh);max-height:90vh;overflow-y:auto}
.mf-dialog-sm{max-width:440px;text-align:center}.mf-dialog-sm .btn.wf,.login-card .btn.wf{display:block;margin-inline-start:auto;margin-inline-end:auto;text-align:center}
.mf-dialog-md{max-width:600px}
.mf-dialog-lg{max-width:820px}
.micon{font-size:36px;margin-bottom:12px}
.mtitle{font-size:16px;font-weight:700;margin-bottom:6px}
.msub{font-size:12px;color:var(--t2);margin-bottom:20px;line-height:1.65}
.code-box{background:var(--bg4);border:1px solid var(--b2);border-radius:var(--r);padding:13px 20px;font-family:var(--mono);font-size:24px;font-weight:600;letter-spacing:.18em;color:var(--ac2);margin-bottom:10px}
.code-url{font-size:11.5px;color:var(--t2);margin-bottom:20px}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--b2);border-top-color:var(--ac);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-inline-end:5px}
@keyframes spin{to{transform:rotate(360deg)}}
/* ── org chart (reporting hierarchy) ── */
.orgwrap{overflow-x:auto;padding:10px 4px 18px}
.orgchart{display:inline-block;min-width:100%}
.orgchart ul{position:relative;padding-top:20px;display:flex;justify-content:center;margin:0;list-style:none}
.orgchart li{position:relative;padding:20px 10px 0;text-align:center}
.orgchart li::before,.orgchart li::after{content:'';position:absolute;top:0;right:50%;border-top:2px solid var(--b2);width:50%;height:20px}
.orgchart li::after{inset-inline-end:auto;left:50%;border-inline-start:2px solid var(--b2)}
.orgchart li:only-child::after,.orgchart li:only-child::before{display:none}
.orgchart li:only-child{padding-top:0}
.orgchart li:first-child::before,.orgchart li:last-child::after{border:0 none}
.orgchart li:last-child::before{border-inline-end:2px solid var(--b2);border-radius:0 6px 0 0}
.orgchart li:first-child::after{border-radius:6px 0 0 0}
.orgchart ul ul::before{content:'';position:absolute;top:0;left:50%;border-inline-start:2px solid var(--b2);width:0;height:20px}
.orgchart>ul>li::before,.orgchart>ul>li::after{display:none}
.orgchart>ul>li{padding-top:0}
.org-node{display:inline-flex;flex-direction:column;align-items:center;gap:3px;min-width:130px;max-width:180px;padding:10px 12px;border:1px solid var(--b2);border-radius:10px;background:var(--bg2);box-shadow:0 1px 3px rgba(0,0,0,.06);position:relative;transition:border-color .15s,box-shadow .15s}
.org-node:hover{border-color:var(--ac);box-shadow:0 3px 10px rgba(0,0,0,.1)}
.org-node.me{border-color:var(--ac);background:var(--acb)}
.org-node.org-deleted{border-color:var(--rd);background:rgba(239,68,68,.10);border-style:dashed}
.org-node.org-deleted:hover{border-color:var(--rd);box-shadow:0 3px 10px rgba(239,68,68,.18)}
.org-desig{font-size:9px;text-align:center;border:1px dashed var(--b2);border-radius:5px;padding:2px 5px;width:100%;max-width:150px;background:transparent;color:var(--t2)}
.org-desig::placeholder{color:var(--t3);font-style:italic}
.org-desig:focus{outline:none;border-color:var(--ac);border-style:solid}
.org-desig-txt{font-size:9.5px;color:var(--t2);font-style:italic;text-align:center}
.org-av{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.org-nm{font-size:12px;font-weight:700;color:var(--t);line-height:1.2;word-break:break-word}
.org-em{font-size:10px;color:var(--t3);word-break:break-all;line-height:1.2}
/* ── modern group cards (directory) ── */
.gcard{position:relative;background:var(--bg2);border:1px solid var(--b);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.gcard:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.13);border-color:var(--ac)}
.gcard-top{height:5px;background:linear-gradient(90deg,var(--ac),#a78bfa)}
.gcard-body{padding:16px 18px 14px;display:flex;flex-direction:column;gap:12px;flex:1}
.gcard-head{display:flex;gap:12px;align-items:flex-start}
.gcard-icon{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;flex-shrink:0;box-shadow:0 4px 10px rgba(0,0,0,.18)}
.gcard-name{font-size:14.5px;font-weight:800;color:var(--t);line-height:1.2;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.gcard-desc{font-size:11.5px;color:var(--t3);margin-top:3px;line-height:1.45}
.gcard-mem{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:10px;transition:background .12s}
.gcard-mem:hover{background:var(--b)}
.gcard-mem-av{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.avstack{display:flex;align-items:center}
.avstack>span{width:30px;height:30px;border-radius:50%;border:2px solid var(--bg2);margin-inline-start:-9px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.avstack>span:first-child{margin-inline-start:0}
.avstack .av-more{color:var(--t2);background:var(--b)}
.gcard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 18px;border-top:1px solid var(--b);background:linear-gradient(180deg,transparent,rgba(124,111,255,.04))}
.gcard-mlist{display:flex;flex-direction:column;max-height:230px;overflow-y:auto;scrollbar-width:thin}
/* ── draft items ── */
.di{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--b);transition:background var(--tr)}
.di:last-child{border-bottom:none}.di:hover{background:var(--ch)}
.ddot{width:5px;height:5px;border-radius:50%;background:var(--ac);flex-shrink:0}
.dinf{flex:1;min-width:0}
.dsub{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t)}
.dto{font-size:10.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
/* ── pulse ── */
.pulse{width:7px;height:7px;border-radius:50%;background:var(--gr);display:inline-block;animation:pulse 1.2s ease-in-out infinite;margin-inline-end:5px}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.45)}}
/* ── filter bar ── */
.fbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--bg2);border:1px solid var(--b);border-radius:var(--r);padding:10px 14px;margin-bottom:18px}
.flabel{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500;cursor:pointer;border:1px solid var(--b2);background:var(--bg3);color:var(--t2);transition:all var(--tr)}
.chip:hover{border-color:var(--acbr);color:var(--ac2);background:var(--acb)}
.chip.active{background:var(--ac);color:#fff;border-color:var(--ac);box-shadow:0 2px 8px rgba(124,111,255,.3)}
.chip.cr-active{background:var(--rdb);color:var(--rd);border-color:var(--rdbr)}
.chip.ca-active{background:var(--amb);color:var(--am);border-color:var(--ambr)}
.fsep{width:1px;height:18px;background:var(--b2);flex-shrink:0}
.dpair{display:flex;align-items:center;gap:6px}
.dpair input[type=date]{background:var(--bg3);border:1px solid var(--b2);color:var(--t);border-radius:var(--rsm);padding:4px 9px;font-size:11px;font-family:var(--mono);cursor:pointer;transition:border-color var(--tr)}
.dpair input:focus{outline:none;border-color:var(--ac)}
/* ── charts ── */
.cwrap{position:relative;height:220px}.cwrap-lg{position:relative;height:280px}
/* ── analytics rows ── */
.uarow{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--b);transition:background var(--tr);cursor:pointer}
.uarow:last-child{border-bottom:none}.uarow:hover{background:var(--ch)}.uarow.selected{background:var(--acb)!important}
#leaderboard::-webkit-scrollbar{width:4px}#leaderboard::-webkit-scrollbar-track{background:transparent}#leaderboard::-webkit-scrollbar-thumb{background:var(--b2);border-radius:4px}
.uarank{font-family:var(--mono);font-size:11px;color:var(--t3);width:20px;text-align:end;flex-shrink:0}
.uainf{flex:1;min-width:0}
.uaname{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t)}
.uaemail{font-size:10.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uacount{font-family:var(--mono);font-size:17px;font-weight:700;min-width:44px;text-align:end}
.uabar{width:88px;background:var(--bg4);border-radius:100px;height:3.5px;overflow:hidden;flex-shrink:0}
.uabar-f{height:100%;border-radius:100px;transition:width .5s ease}
.ua-check{width:14px;height:14px;border-radius:3px;border:1.5px solid var(--b2);background:var(--bg3);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all var(--tr)}
.uarow.selected .ua-check{background:var(--ac);border-color:var(--ac)}
.ua-check::after{content:'✓';font-size:9px;color:#fff;opacity:0;transition:opacity var(--tr)}
.uarow.selected .ua-check::after{opacity:1}
/* ── theme toggle ── */
.theme-btn{width:32px;height:32px;border-radius:var(--rsm);display:flex;align-items:center;justify-content:center;background:var(--bg4);border:1.5px solid var(--b3);cursor:pointer;transition:all var(--tr)}
.theme-btn:hover{background:var(--surf);border-color:var(--t3)}
[data-theme="dark"] .theme-btn{background:#2a2a3a;border-color:rgba(255,255,255,.3)}
[data-theme="light"] .theme-btn{background:#e0e0ec;border-color:rgba(0,0,0,.25)}
/* ── recent scroll ── */
.recent-scroll{max-height:280px;overflow-y:auto}
.lazy-loading{display:flex;align-items:center;justify-content:center;padding:12px;color:var(--t3);font-size:11px;gap:6px}
/* ── banners ── */
.sbanner{background:var(--bg2);border:1px solid var(--grbr);border-radius:var(--r);padding:14px;margin-bottom:16px}
.schbanner{background:var(--bg2);border:1px solid var(--acbr);border-radius:var(--r);padding:14px;margin-bottom:16px}
/* ── toggle switch ── */
.toggle-wrap{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.toggle{width:40px;height:22px;border-radius:11px;background:var(--bg4);border:1.5px solid var(--b2);position:relative;transition:background var(--tr),border-color var(--tr);flex-shrink:0}
.toggle.on{background:var(--ac);border-color:var(--ac)}
.toggle::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform var(--tr);opacity:.7}
.toggle.on::after{transform:translateX(18px);opacity:1}
.toggle-lbl{font-size:12.5px;font-weight:500;color:var(--t2)}
.toggle-lbl.on{color:var(--ac2)}
/* ── file drop ── */
.dropzone{border:2px dashed var(--b2);border-radius:var(--r);padding:24px;text-align:center;cursor:pointer;transition:all var(--tr);background:var(--bg3)}
.dropzone:hover,.dropzone.drag{border-color:var(--acbr);background:var(--acb)}
.dropzone-icon{font-size:28px;margin-bottom:8px;opacity:.6}
.dropzone-text{font-size:12.5px;color:var(--t2);font-weight:500}
.dropzone-hint{font-size:11px;color:var(--t3);margin-top:4px}
/* ── email preview ── */
.ep{background:var(--bg3);border:1px solid var(--b2);border-radius:var(--r);padding:16px}
.ep-hd{border-bottom:1px solid var(--b);padding-bottom:10px;margin-bottom:12px}
.ep-field{display:flex;gap:8px;margin-bottom:4px;font-size:12px}
.ep-key{color:var(--t3);font-weight:600;min-width:64px;text-transform:uppercase;font-size:10px;letter-spacing:.05em;padding-top:2px;flex-shrink:0}
.ep-val{color:var(--t);flex:1}
.ep-body{color:var(--t2);line-height:1.75;white-space:pre-wrap;font-size:12.5px;max-height:280px;overflow-y:auto}
/* ── filter tags (bulk) ── */
.filter-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;background:var(--acb);color:var(--ac2);border:1px solid var(--acbr);font-size:11px;font-weight:500;cursor:pointer;transition:all var(--tr)}
.filter-tag:hover{background:var(--acb);filter:brightness(1.2)}
.filter-tag.active{background:var(--ac);color:#fff;border-color:var(--ac)}
/* ── template list ── */
.tpl-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--b);transition:background var(--tr);cursor:pointer}
.tpl-item:last-child{border-bottom:none}.tpl-item:hover{background:var(--ch)}
.tpl-item.active-tpl{background:var(--acb);border-inline-start:3px solid var(--ac)}
.tpl-name{font-size:12.5px;font-weight:500;color:var(--t);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpl-sub{font-size:10.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ── pill btn ── */
.tpill{padding:3px 10px;border-radius:20px;border:1px solid var(--b2);background:var(--bg3);color:var(--t2);font-size:11px;cursor:pointer;transition:all var(--tr)}
.tpill:hover,.tpill.active{background:var(--acb);color:var(--ac2);border-color:var(--acbr)}
/* ── misc ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.flex{display:flex}.aic{align-items:center}.jb{justify-content:space-between}.jc{justify-content:center}
.g8{gap:8px}.g12{gap:12px}.wf{width:100%}
.mb12{margin-bottom:12px}.mb18{margin-bottom:18px}.mt12{margin-top:12px}.mt6{margin-top:6px}
.tm{color:var(--t2)}.tp{color:var(--t3)}.mono{font-family:var(--mono)}
.tred{color:var(--rd)}.tgr{color:var(--gr)}.tam{color:var(--am)}.tac{color:var(--ac2)}
.stitle{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);font-weight:600;margin-bottom:9px;display:flex;align-items:center;gap:8px}
.sline{flex:1;height:1px;background:var(--b)}
.hidden{display:none!important}
.empty{text-align:center;padding:36px 16px;color:var(--t3)}
.empty-i{font-size:28px;opacity:.35;margin-bottom:8px}
/* Outline icon system — every UI/action icon is an inline outline SVG that
   inherits the current text colour (no filled/emoji glyphs). */
.ic{display:inline-block;width:1em;height:1em;vertical-align:-0.15em;flex:none}
.empty-i .ic{width:34px;height:34px;vertical-align:middle}
.dropzone-icon .ic{width:28px;height:28px;vertical-align:middle}
button .ic,a .ic{pointer-events:none}
/* ── login ── */
.login-page{min-height:100vh;background:var(--bg)}
/* ── Split login: animated product-workflow showcase + auth panel ────────── */
.login-split{min-height:100vh;display:grid;grid-template-columns:1.08fr .92fr}
.login-hero{position:relative;overflow:hidden;display:flex;align-items:center;padding:44px 52px;color:#fff;
  background:radial-gradient(1100px 560px at 18% 8%,#4b3fca 0%,transparent 55%),
             radial-gradient(820px 480px at 92% 96%,#241c66 0%,transparent 60%),
             linear-gradient(158deg,#171238 0%,#2a2068 52%,#3f32a8 100%)}
/* moving grid + floating colour orbs */
.login-hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.09;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:46px 46px;-webkit-mask:radial-gradient(ellipse 72% 72% at 46% 42%,#000 28%,transparent 76%);mask:radial-gradient(ellipse 72% 72% at 46% 42%,#000 28%,transparent 76%);
  animation:lhGrid 22s linear infinite}
@keyframes lhGrid{from{background-position:0 0}to{background-position:46px 46px}}
.lh-orb{position:absolute;border-radius:50%;filter:blur(64px);pointer-events:none;opacity:.5}
.lh-orb1{width:340px;height:340px;top:-90px;inset-inline-end:-70px;background:radial-gradient(circle,#8a7bff,transparent 70%);animation:lhFloat 15s ease-in-out infinite}
.lh-orb2{width:300px;height:300px;bottom:-100px;inset-inline-start:-80px;background:radial-gradient(circle,#34d399,transparent 70%);animation:lhFloat 19s ease-in-out infinite reverse}
@keyframes lhFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(28px,-32px)}}
.login-hero-inner{position:relative;z-index:1;width:100%;max-width:490px}
/* An <a> now (it links to the product site), so it has to be told not to look
   like a link: same lockup as before, plus a hover that says it is clickable. */
.login-hero-brand{display:inline-flex;align-items:center;gap:11px;font-size:18px;font-weight:800;letter-spacing:-.02em;margin-bottom:22px;color:inherit;text-decoration:none;border-radius:12px;transition:opacity .18s}
.login-hero-brand:hover{opacity:.86}
.login-hero-brand:hover .lhb-mark{background:rgba(255,255,255,.26)}
.login-hero-brand:focus-visible,.login-logo:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:3px}
.login-hero-brand .lhb-mark{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center}
.login-hero-h{font-size:28px;font-weight:800;line-height:1.2;letter-spacing:-.03em;margin:0 0 7px}
.login-hero-h .grad{background:linear-gradient(90deg,#c8c0ff,#8affc8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.login-hero-p{font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.72);margin:0 0 20px}
/* animated vertical workflow flowchart */
.lh-flow{position:relative;padding-inline-start:34px}
.lh-flow::before{content:'';position:absolute;inset-inline-start:15px;top:20px;bottom:20px;width:2px;background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.30),rgba(255,255,255,.08))}
.lh-flow-dot{position:absolute;inset-inline-start:9px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.16),0 0 20px rgba(200,192,255,.95);animation:lhDot 7.5s cubic-bezier(.5,0,.5,1) infinite}
@keyframes lhDot{0%,8%{top:6%}18%,30%{top:27%}40%,50%{top:48.5%}60%,72%{top:70%}82%,94%{top:90%}100%{top:6%}}
.lh-node{display:flex;align-items:center;gap:12px;padding:8px 13px;margin:6px 0;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);animation:lhNode 7.5s ease-in-out infinite;animation-delay:calc(var(--i)*1.5s)}
@keyframes lhNode{0%,7%{background:rgba(255,255,255,.17);border-color:rgba(200,192,255,.6);box-shadow:0 10px 30px rgba(124,111,255,.3);transform:translateX(6px)}20%,100%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);box-shadow:none;transform:translateX(0)}}
.lh-node .ic{width:33px;height:33px;border-radius:9px;background:rgba(255,255,255,.13);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lh-node .ic svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lh-node .tt{font-size:12.5px;font-weight:700;line-height:1.15}
.lh-node .ss{font-size:10px;color:rgba(255,255,255,.6);margin-top:1px}
/* animated stat widgets (the "live" mini-gifs) */
.lh-widgets{display:flex;gap:11px;margin-top:18px}
.lh-w{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:13px;padding:11px 12px}
.lh-w-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.6);font-weight:700}
.lh-ring{width:52px;height:52px;display:block;margin:5px auto 0}
.lh-ring .fg{animation:lhRing 4.2s ease-in-out infinite}
@keyframes lhRing{0%{stroke-dashoffset:100}46%,62%{stroke-dashoffset:2}100%{stroke-dashoffset:100}}
.lh-bars{display:flex;align-items:flex-end;gap:5px;height:40px;margin-top:8px}
.lh-bars span{flex:1;height:100%;background:linear-gradient(#c8c0ff,#7c6fff);border-radius:3px 3px 0 0;transform-origin:bottom;animation:lhBar 3s ease-in-out infinite}
@keyframes lhBar{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(1)}}
.lh-live{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;margin-top:7px}
.lh-live .dot{width:7px;height:7px;border-radius:50%;background:#8affc8;box-shadow:0 0 0 0 rgba(138,255,200,.7);animation:lhPulse 1.6s ease-out infinite}
@keyframes lhPulse{0%{box-shadow:0 0 0 0 rgba(138,255,200,.7)}100%{box-shadow:0 0 0 9px rgba(138,255,200,0)}}
.lh-prog{height:7px;border-radius:5px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:9px}
.lh-prog i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#8affc8,#c8c0ff);animation:lhProg 3.6s ease-in-out infinite}
@keyframes lhProg{0%{width:8%}70%{width:96%}100%{width:8%}}
/* extra capability badges (partnerships / shared templates / reports) */
.lh-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.lh-tag{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);font-size:11px;font-weight:600;color:rgba(255,255,255,.92)}
.lh-tag svg{width:13px;height:13px;stroke:#8affc8;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
@media(prefers-reduced-motion:reduce){.lh-orb,.login-hero::before,.lh-flow-dot,.lh-node,.lh-ring .fg,.lh-bars span,.lh-prog i,.lh-live .dot{animation:none!important}}
.login-authwrap{display:flex;align-items:center;justify-content:center;padding:40px 24px;position:relative;overflow:hidden;background:var(--bg)}
.login-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 50% 30%,var(--acb) 0%,transparent 70%)}
.login-card{background:var(--bg2);border:1px solid var(--b);border-radius:18px;padding:34px 32px;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.14);position:relative;z-index:1}
.login-logo{width:46px;height:46px;background:linear-gradient(135deg,var(--ac),#a78bfa);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin:0 auto 14px;box-shadow:0 6px 18px rgba(124,111,255,.35);text-decoration:none;transition:transform .18s,box-shadow .18s}
.login-logo:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(124,111,255,.45)}
.login-title{font-size:21px;font-weight:800;text-align:center;letter-spacing:-.03em}
.login-sub{font-size:12px;color:var(--t3);text-align:center;margin-bottom:22px;margin-top:4px}
.login-tabs{display:flex;gap:4px;background:var(--bg3);border:1px solid var(--b);border-radius:11px;padding:4px;margin-bottom:20px}
.login-tab{flex:1;padding:8px 6px;border:none;background:transparent;border-radius:8px;font-size:12.5px;font-weight:700;color:var(--t3);cursor:pointer;transition:all .18s}
.login-tab.active{background:var(--bg2);color:var(--t);box-shadow:0 2px 6px rgba(0,0,0,.1)}
.reg-info{background:var(--acb);border:1px solid var(--acbr);border-radius:12px;padding:14px 15px;margin-bottom:18px}
.reg-info .rf-row{display:flex;align-items:flex-start;gap:9px;font-size:12px;color:var(--t2);line-height:1.4;margin-bottom:9px}
.reg-info .rf-row:last-child{margin-bottom:0}
.reg-info .rf-ic{color:var(--gr);flex-shrink:0;margin-top:1px}
/* ── Gmail-themed cards (email-first login + org registration) ──
   Deliberately Google-inspired (light card, Roboto, #1a73e8) but plainly a
   Qivity surface — the "on Qivity" tag and layout keep it distinct. */
.gg-card{background:#fff;border:1px solid #dadce0;border-radius:12px;padding:20px 20px 18px;
  font-family:'Roboto','Segoe UI',Arial,sans-serif;color:#202124;box-shadow:0 1px 3px rgba(60,64,67,.15)}
.gg-card .gg-brand{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.gg-card .gg-brand .gg-ml{font-size:10.5px;font-weight:600;letter-spacing:.04em;color:#5f6368;
  border:1px solid #e0e0e0;border-radius:20px;padding:2px 9px;text-transform:uppercase}
.gg-card .gg-head{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:500;color:#202124}
.gg-card .gg-g{width:22px;height:22px;flex-shrink:0}
.gg-card .gg-sub{font-size:12.5px;color:#5f6368;line-height:1.5;margin:8px 0 14px}
.gg-card .gg-sub a{color:#1a73e8;text-decoration:none}
.gg-card .gg-lbl{display:block;font-size:11.5px;color:#5f6368;font-weight:500;margin:12px 0 5px}
.gg-card .gg-inp{width:100%;padding:11px 13px;border:1px solid #dadce0;border-radius:8px;font-size:14px;
  color:#202124;background:#fff;outline:none;font-family:inherit;transition:border-color .15s,box-shadow .15s}
.gg-card .gg-inp::placeholder{color:#9aa0a6}
.gg-card .gg-inp:focus{border-color:#1a73e8;box-shadow:0 0 0 1px #1a73e8}
.gg-card .gg-btn{width:100%;margin-top:16px;padding:11px;background:#1a73e8;color:#fff;border:none;
  border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;transition:background .15s,box-shadow .15s}
.gg-card .gg-btn:hover{background:#1765cc;box-shadow:0 1px 4px rgba(26,115,232,.5)}
.gg-card .gg-btn:disabled{background:#a9c7f5;cursor:default;box-shadow:none}
.gg-card .gg-hint{font-size:11px;color:#5f6368;line-height:1.5;margin-top:12px;background:#f8f9fa;
  border:1px solid #edeef0;border-radius:8px;padding:9px 11px}
.gg-card .gg-hint code{font-size:10.5px;word-break:break-all;color:#202124}
.gg-card .gg-err{font-size:12px;color:#d93025;margin-top:10px;min-height:14px;line-height:1.4}
.gg-card .gg-ok{font-size:12px;color:#188038;margin-top:10px;line-height:1.45}
.gg-card .gg-link{background:none;border:none;color:#1a73e8;font-size:12.5px;cursor:pointer;
  margin-top:12px;padding:0;font-family:inherit}
.gg-card .gg-steps{display:flex;gap:8px;margin:2px 0 16px}
.gg-card .gg-step{flex:1;display:flex;align-items:center;gap:7px;font-size:11.5px;color:#5f6368;font-weight:500}
.gg-card .gg-step .gg-num{width:20px;height:20px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:600;background:#e8eaed;color:#5f6368}
.gg-card .gg-step.active{color:#1a73e8}
.gg-card .gg-step.active .gg-num{background:#1a73e8;color:#fff}
.gg-card .gg-step.done .gg-num{background:#188038;color:#fff}
.gg-card .gg-row{display:flex;gap:10px;align-items:center;margin-top:16px}
.gg-card .gg-row .gg-btn{margin-top:0}
.gg-card .gg-scopes{list-style:none;margin:6px 0 0;padding:0}
.gg-card .gg-scopes li{font-size:11px;color:#3c4043;padding:2px 0;display:flex;gap:6px;align-items:center}
.gg-card .gg-scopes li::before{content:'';width:5px;height:5px;border-radius:50%;background:#1a73e8;flex-shrink:0}
/* Wider registration layout: two-column fields + internal scroll so the card
   never runs off the viewport. */
.login-card.reg-wide{max-width:560px;max-height:92vh;overflow-y:auto}
.gg-card .gg-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.gg-card .gg-fld{display:flex;flex-direction:column;min-width:0}
.gg-card .gg-fld .gg-lbl{margin-top:0}
.gg-card .gg-fld .gg-inp{width:100%}
.gg-card .gg-btn.sm{width:auto;margin-top:0;padding:8px 20px;font-size:13px}
.gg-card .gg-perms{display:flex;flex-direction:column;gap:2px;margin:8px 0 4px}
.gg-card .gg-perm{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:#3c4043;cursor:pointer;padding:5px 0}
.gg-card .gg-perm input{margin-top:2px;accent-color:#1a73e8;flex-shrink:0}
.gg-card .gg-perm code{font-size:11px;color:#5f6368}
/* Staged wizard body — the EMAIL card only (it is the sole .gg-body in the page;
   the Google registration card keeps its outer .reg-wide card scroll instead).
   Only this region scrolls, so the heading, the step rail and the Back/Next row
   stay put rather than the whole login card growing past the viewport.
   The cap is deliberately below the height of the mail-server step, so that step
   scrolls inside the card instead of stretching it — with the IMAP section open it
   is roughly twice this tall. `scrollbar-gutter:stable` reserves the track width up
   front so fields don't shift sideways when the scrollbar appears. The negative
   margin + matching padding keep the input focus ring (a 1px outset box-shadow)
   from being clipped against the scroll edge. */
.gg-card .gg-body{max-height:min(42vh,320px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-gutter:stable;margin:0 -4px;padding:0 4px}
.gg-card .gg-body::-webkit-scrollbar{width:8px}
.gg-card .gg-body::-webkit-scrollbar-track{background:transparent}
.gg-card .gg-body::-webkit-scrollbar-thumb{background:#dadce0;border-radius:8px}
.gg-card .gg-body::-webkit-scrollbar-thumb:hover{background:#bdc1c6}
.gg-card .gg-body{scrollbar-width:thin;scrollbar-color:#dadce0 transparent}
/* Scroll shadows: the two `local` gradients scroll WITH the content and mask the
   shadow at each end, so a soft edge shows only while there is more to see. Pure
   CSS — no scroll listener. Relies on the card being white (.gg-card). */
.gg-card .gg-body{
  background:
    linear-gradient(#fff 30%, rgba(255,255,255,0)) top/100% 16px no-repeat local,
    linear-gradient(rgba(255,255,255,0), #fff 70%) bottom/100% 16px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(60,64,67,.14), rgba(60,64,67,0)) top/100% 7px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(60,64,67,.14), rgba(60,64,67,0)) bottom/100% 7px no-repeat scroll;
}
/* Native selects and number inputs default to the OS chrome, which disagrees with
   .gg-inp on border colour, radius and height. Normalise them so every control in
   a row lines up. */
.gg-card select.gg-inp{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-inline-end:34px;cursor:pointer;background-repeat:no-repeat;
  background-position:right 11px center;background-size:11px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235f6368' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E")}
.gg-card input[type=number].gg-inp{-moz-appearance:textfield}
.gg-card input[type=number].gg-inp::-webkit-outer-spin-button,
.gg-card input[type=number].gg-inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Same box width as the Google registration card (.reg-wide), but width ONLY —
   .reg-wide also scrolls the whole login card, which is exactly what .gg-body's
   internal scroll replaces here.

   Height: .login-authwrap CLIPS overflow (overflow:hidden), so a card taller than
   the viewport doesn't scroll — its bottom is simply cut off, taking the Back /
   Next row with it. So cap the card to the space that column actually offers (its
   40px padding, top and bottom) and lay it out as a flex column: every fixed part
   keeps its natural height, and only .gg-body absorbs what is left. The actions are
   then always on screen, and the body scrolls exactly as much as it must. */
.login-card.eml-wide{max-width:560px;display:flex;flex-direction:column;
  max-height:calc(100vh - 80px)}
.login-card.eml-wide>*{flex:0 0 auto}
.login-card.eml-wide>#email-login{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.login-card.eml-wide #email-login>*{flex:0 0 auto}
/* min-height:0 is what lets a flex item shrink below its content height — without
   it the body refuses to shrink and the clipping comes straight back. */
.login-card.eml-wide #email-login>.gg-body{flex:1 1 auto;min-height:0;max-height:none}
/* On a short window the fixed chrome above the wizard is what squeezes the body,
   so trim it there rather than letting the scroll area collapse to nothing. */
@media(max-height:820px){
  /* max-height stays tied to the wrapper's 40px padding — only the chrome shrinks. */
  .login-card.eml-wide{padding:20px 26px}
  .login-card.eml-wide .login-logo{width:34px;height:34px;margin-bottom:8px}
  .login-card.eml-wide .login-tabs{margin-bottom:12px}
  .login-card.eml-wide .login-sub{margin-bottom:12px}
  .login-card.eml-wide .gg-card{padding:14px 16px 14px}
  .login-card.eml-wide .gg-steps{margin:0 0 10px}
}
.gg-card .gg-body .gg-hint:first-child{margin-top:0}
@media(max-width:560px){.gg-card .gg-grid{grid-template-columns:1fr}}
@media(max-width:900px){.login-split{grid-template-columns:1fr}.login-hero{display:none}}
svg.ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
/* info hint box */
.hint{font-size:11.5px;background:var(--acb);border:1px solid var(--acbr);border-radius:var(--rsm);padding:8px 12px;color:var(--ac2);margin-bottom:12px}
/* ══ CAMPAIGN WIZARD ══ */
.wiz-step{background:var(--bg3);color:var(--t3);text-align:center;user-select:none}
.wiz-step:hover{background:var(--bg4);color:var(--t2)}
.wiz-step.active{background:var(--acb);color:var(--ac2);font-weight:700}
.wiz-step.done{background:var(--grb);color:var(--gr)}
/* campaign card */
.camp-card{background:var(--bg2);border:1px solid var(--b);border-radius:var(--rlg);padding:16px 18px;transition:all var(--tr);cursor:pointer;position:relative;overflow:hidden}
.camp-card:hover{border-color:var(--acbr);transform:translateY(-2px);box-shadow:0 6px 28px rgba(0,0,0,.32)}
.camp-card::before{content:'';position:absolute;top:0;inset-inline-start:0;inset-inline-end:0;height:2px}
.camp-card.status-active::before{background:linear-gradient(90deg,#7c6fff,#a78bfa)}
.camp-card.status-draft::before{background:linear-gradient(90deg,#a5b4fc,#c4bcff)}
.camp-card.status-paused::before{background:linear-gradient(90deg,#f87171,#fca5a5)}
.camp-card.status-completed::before{background:linear-gradient(90deg,#059669,#34d399)}
.camp-card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.camp-card-name{font-size:14px;font-weight:700;color:var(--t);letter-spacing:-.01em;flex:1;margin-inline-end:8px}
.camp-mini-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.camp-mini-stat{text-align:center;padding:8px;background:var(--bg3);border-radius:var(--rsm)}
.camp-mini-stat-val{font-size:17px;font-weight:700;font-family:var(--mono)}
.camp-mini-stat-lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--t3);margin-top:2px}
/* template editor in wizard */
.camp-tpl-card{background:var(--bg3);border:1px solid var(--b2);border-radius:var(--r);padding:14px 16px;margin-bottom:12px}
.camp-tpl-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.camp-tpl-step-badge{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
/* The body editor. Same contenteditable + execCommand shape as .sig-rich, which
   is the app's established rich-text idiom (see sigExec). Sized like the
   textarea it replaced so the step's rhythm is unchanged. */
.camp-rich{min-height:160px;max-height:46vh;overflow-y:auto;padding:9px 11px;background:var(--bg2);
  border:1px solid var(--b2);border-radius:var(--rsm);color:var(--t);font-size:13px;line-height:1.65;outline:none}
.camp-rich:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--acb)}
.camp-rich:empty:before{content:attr(data-ph);color:var(--t3)}
.camp-rich img{max-width:100%;height:auto}
.camp-rich blockquote{margin:0 0 0 12px;padding-inline-start:10px;border-inline-start:2px solid var(--b2);color:var(--t2)}
.camp-tb{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.camp-tb .btn{padding:4px 8px;font-size:11px;min-width:26px}
.camp-tb .camp-tb-sep{width:1px;height:16px;background:var(--b2);margin:0 3px}
/* Audience columns, one chip per header. Clicking one drops {{Header}} into the
   body at the caret — the whole point of showing them here. */
.camp-fields{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-bottom:7px}
.camp-field-chip{font-family:var(--mono);font-size:10.5px;padding:3px 8px;border-radius:20px;cursor:pointer;
  background:var(--acb);color:var(--ac2);border:1px solid var(--acbr);white-space:nowrap;
  max-width:190px;overflow:hidden;text-overflow:ellipsis}
.camp-field-chip:hover{background:var(--ac);color:#fff;border-color:var(--ac)}
.camp-field-lbl{font-size:10.5px;color:var(--t3);margin-inline-end:2px}
/* A placeholder that matches no column in the audience. The server sends those
   as an empty string, so this is the difference between a merge and a blank. */
.camp-warn{font-size:10.5px;color:var(--am);margin-top:5px;display:flex;gap:5px;align-items:flex-start;line-height:1.5}
.camp-warn code{background:var(--amb);color:var(--am)}
/* recipient status badges */
.rs-pending{color:var(--t3)}.rs-active{color:var(--gr)}.rs-replied{color:var(--ac2)}.rs-positive{color:var(--gr);font-weight:700}.rs-bounced{color:var(--rd)}.rs-completed{color:var(--bl)}
code{font-family:var(--mono);background:var(--bg4);padding:1px 5px;border-radius:3px;font-size:11px}

/* ══ INBOX THREE-PANE LAYOUT ══ */
.inbox-wrap{display:flex;height:calc(100vh - 108px);background:var(--bg2);border:1px solid var(--b);border-radius:var(--rlg);overflow:hidden;margin:-2px}
.inbox-folders{width:198px;min-width:198px;border-inline-end:1px solid var(--b);display:flex;flex-direction:column;background:var(--bg3)}
.inbox-folders-hdr{padding:14px 12px 8px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.inbox-folders-lbl{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em}
/* folder list scrolls only when needed */
#folder-list{overflow-y:auto;flex:1}
#folder-list:not(:hover)::-webkit-scrollbar{width:0}
#folder-list::-webkit-scrollbar{width:4px}
#folder-list::-webkit-scrollbar-thumb{background:var(--b2);border-radius:4px}
.ifolder{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--rsm);cursor:pointer;font-size:12.5px;color:var(--t2);transition:all var(--tr);margin:1px 6px}
.ifolder.fdragover{background:var(--acb);border:1px dashed var(--acbr);color:var(--ac2)}
.inbox-item[draggable]{cursor:pointer}.inbox-item[draggable]:active{opacity:.7;cursor:grabbing}
.ifolder:hover{background:var(--bg4);color:var(--t)}
.ifolder.active{background:var(--acb);color:var(--ac2);font-weight:500}
.ifolder-ico{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.75}.ifolder.active .ifolder-ico{opacity:1}
.ifolder-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ifolder-badge{font-size:9.5px;font-family:var(--mono);padding:1px 5px;border-radius:10px;background:var(--acb);color:var(--ac2);min-width:18px;text-align:center;flex-shrink:0}
.inbox-messages{width:290px;min-width:260px;border-inline-end:1px solid var(--b);display:flex;flex-direction:column;background:var(--bg2)}
.inbox-msg-hdr{padding:10px 12px 8px;border-bottom:1px solid var(--b);flex-shrink:0}
.inbox-msg-title{font-size:13px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em}
.inbox-search-row{display:flex;gap:6px;align-items:center}
.inbox-search-wrap{flex:1;position:relative}
.inbox-search-inp{background:var(--bg3);border:1px solid var(--b2);border-radius:20px;padding:6px 12px 6px 32px;font-size:12px;color:var(--t);font-family:var(--font);width:100%;transition:all var(--tr)}
.inbox-search-inp:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--acb)}
.inbox-search-inp::placeholder{color:var(--t3)}
.inbox-search-ico{position:absolute;inset-inline-start:10px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none;transition:opacity .15s}
.inbox-search-clear{display:none;position:absolute;inset-inline-end:9px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--t3);font-size:13px;padding:0;line-height:1;width:16px;height:16px;align-items:center;justify-content:center;border-radius:50%;transition:all .15s}
.inbox-search-clear:hover{background:var(--bg4);color:var(--t)}
.inbox-msg-list{flex:1;overflow-y:auto}
.inbox-date-sep{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.07em;padding:8px 14px;background:var(--bg2);position:sticky;top:0;z-index:1;border-bottom:1px solid var(--b);cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;transition:background var(--tr)}.inbox-date-sep:hover{background:var(--bg3)}.inbox-date-sep .sep-chev{font-size:9px;transition:transform .2s;opacity:.6}.inbox-date-sep.collapsed .sep-chev{transform:rotate(-90deg)}
.inbox-item{padding:11px 14px;padding-inline-end:72px;cursor:pointer;transition:background var(--tr);border-bottom:1px solid var(--b);position:relative;overflow:visible}
.inbox-item:hover{background:var(--bg3)}
.inbox-item.selected{background:var(--acb)!important}
.inbox-item.unread .imsg-from{font-weight:700;color:var(--t)}
.inbox-item.unread .imsg-subj{font-weight:600;color:var(--t)}
.unread-dot{position:absolute;inset-inline-start:4px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--ac)}
.imsg-row1{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:2px}
.imsg-from{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;color:var(--t2)}
.imsg-time{font-size:9.5px;color:var(--t3);white-space:nowrap;font-family:var(--mono);flex-shrink:0}
.imsg-subj{font-size:11.5px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px}
.imsg-prev{font-size:11px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.search-hl{background:rgba(124,111,255,.28);color:var(--ac2);border-radius:3px;padding:0 2px;font-weight:600}
.mention-hl{color:#9d93ff;font-weight:600;background:rgba(157,147,255,.14);border-radius:3px;padding:0 2px}
/* pin / flag action icons on each message row */
/* msg-actions: hidden by default, shown on hover OR when any button is active */
.msg-actions{display:none;position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);gap:4px;align-items:center}
.inbox-item:hover .msg-actions{display:flex}
/* Always show the whole actions bar when the mail is pinned or flagged */
.inbox-item:has(.msg-act-btn.pinned-active) .msg-actions,
.inbox-item:has(.msg-act-btn.active) .msg-actions{display:flex}
/* Always show the individual active button even if bar is hidden (fallback for older browsers) */
.msg-act-btn.pinned-active,.msg-act-btn.active{display:flex!important}
.msg-act-btn{background:none;border:none;cursor:pointer;padding:3px;border-radius:4px;color:var(--t3);display:flex;align-items:center;justify-content:center;transition:all .15s;line-height:1}
.msg-act-btn:hover{background:var(--bg4);color:var(--t)}
.msg-act-btn.active{color:#f59e0b}
.msg-act-btn.pinned-active{color:var(--ac)}
/* date filter bar */
.date-filter-bar{display:none;align-items:center;gap:6px;padding:5px 10px;border-bottom:1px solid var(--b);background:var(--bg3);flex-shrink:0;flex-wrap:wrap}
.date-filter-bar.open{display:flex}
.date-filter-bar input[type=date]{background:var(--bg4);border:1px solid var(--b2);color:var(--t);border-radius:6px;padding:3px 7px;font-size:11px;font-family:var(--mono);cursor:pointer;transition:border-color var(--tr)}
.date-filter-bar input[type=date]:focus{outline:none;border-color:var(--ac)}
.date-filter-bar input[type=date]::-webkit-calendar-picker-indicator{filter:invert(var(--cal-invert,1))}
/* importance pill selector in compose */
.imp-pills{display:flex;gap:4px}
.imp-pill{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500;border:1px solid var(--b2);background:var(--bg3);color:var(--t2);cursor:pointer;transition:all .15s;white-space:nowrap}
.imp-pill:hover{border-color:var(--ac);color:var(--ac2)}
.imp-pill.active-normal{background:var(--bg4);border-color:var(--ac);color:var(--ac2)}
.imp-pill.active-high{background:rgba(239,68,68,.15);border-color:#ef4444;color:#f87171}
.imp-pill.active-low{background:rgba(34,197,94,.12);border-color:#22c55e;color:#4ade80}
.inbox-load-more{text-align:center;padding:12px;font-size:11.5px;color:var(--t3);border-top:1px solid var(--b)}
.inbox-reader{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg2);overflow:hidden}
.reader-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--t3)}
.reader-empty-ico{font-size:40px;opacity:.25}
.reader-hdr{padding:16px 20px 14px;border-bottom:1px solid var(--b);flex-shrink:0}
.reader-subj{font-size:18px;font-weight:700;letter-spacing:-.025em;margin-bottom:12px;color:var(--t);line-height:1.25}
.reader-meta{display:flex;align-items:flex-start;gap:12px}
.reader-av{width:36px;height:36px;border-radius:50%;background:var(--ac);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.reader-from-name{font-size:13px;font-weight:600;color:var(--t)}
.reader-from-email{font-size:11px;color:var(--t3)}
.reader-to-line{font-size:11px;color:var(--t3);margin-top:2px}
.reader-acts{margin-inline-start:auto;display:flex;gap:6px;align-items:flex-start;flex-shrink:0}
.thread-prev-msg{border-top:1px solid var(--b);background:var(--bg)}
.thr-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border:1px solid var(--b2);border-radius:6px;background:none;color:var(--t2);cursor:pointer;font-size:12px;font-family:inherit;transition:all .15s}
.thr-btn:hover{background:var(--bg3);border-color:var(--ac2);color:var(--ac2)}
.thread-prev-hdr{display:flex;align-items:center;gap:9px;padding:9px 16px;cursor:pointer;transition:background .15s}
.thread-prev-hdr:hover{background:var(--bg3)}
.thread-prev-av{width:26px;height:26px;border-radius:50%;background:var(--acb);border:1px solid var(--acbr);color:var(--ac2);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.thread-prev-meta{flex:1;min-width:0}
.thread-prev-from{font-size:12px;font-weight:600;color:var(--t)}
.thread-prev-preview{font-size:11px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread-prev-body{padding:0;max-height:0;overflow:hidden;transition:max-height .4s ease}
.thread-prev-body.open{max-height:9999px}
.thread-prev-iframe,.email-body-div{width:100%;min-height:120px;display:block;background:var(--bg2);overflow-x:auto}
.thread-dots-btn{display:flex;align-items:center;gap:5px;margin:6px 16px 0;padding:4px 10px;border:1px solid var(--b2);border-radius:6px;background:var(--bg3);color:var(--t3);cursor:pointer;font-size:11px;width:fit-content}
.thread-dots-btn:hover{color:var(--t);background:var(--bg4)}
.thread-chain{display:flex;align-items:center;gap:0;padding:8px 16px 4px;flex-wrap:wrap;font-size:10.5px;border-top:2px solid var(--b)}
.thread-chain-item{display:flex;align-items:center;gap:4px;color:var(--t3);white-space:nowrap;cursor:pointer;padding:2px 5px;border-radius:4px;transition:background .15s;max-width:140px}
.thread-chain-item:hover{background:var(--bg3);color:var(--t2)}
.thread-chain-item.current{color:var(--ac2);font-weight:600}
.thread-chain-av{width:16px;height:16px;border-radius:50%;background:var(--ac);color:#fff;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.thread-chain-arrow{color:var(--b2);font-size:11px;margin:0 1px;user-select:none}
.thread-chain-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100px;font-size:10px}
.reader-body-scroll{flex:1;overflow-y:auto}
.reader-iframe{width:100%;min-height:100%;display:block;overflow-x:auto}
/* Bootstrap modal overrides — match Qivity theme */
:root{--bs-backdrop-opacity:0.72}
.modal-backdrop{backdrop-filter:blur(6px)}
.modal .modal-content{background:var(--bg);border:1px solid var(--b);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.28);color:var(--t)}
/* Prevent Bootstrap from adding border to our buttons */
.btn{border:none}
/* email shadow-host divs grow with content */
[data-mf-emailbody]{display:block;overflow-x:auto}

/* ══ FLOATING COMPOSE ══ */
.compose-float{position:fixed;bottom:0;inset-inline-end:36px;width:540px;max-width:calc(100vw - 72px);background:var(--bg2);border:1px solid var(--b2);border-top:3px solid var(--ac);border-radius:12px 12px 0 0;box-shadow:0 -6px 40px rgba(0,0,0,.48);z-index:400;display:flex;flex-direction:column;max-height:78vh;transition:transform .22s ease}
.compose-float.minimized{transform:translateY(calc(100% - 46px))}
.cmp-hdr{display:flex;align-items:center;padding:11px 14px 10px;border-bottom:1px solid var(--b);cursor:pointer;user-select:none;gap:8px}
.cmp-hdr-title{font-size:13px;font-weight:600;flex:1}
.cmp-hdr-btn{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--t3);background:var(--bg3);border:1px solid var(--b2);transition:all var(--tr);cursor:pointer;flex-shrink:0}
.cmp-hdr-btn:hover{background:var(--bg4);color:var(--t)}
.cmp-fields{flex-shrink:0}
/* flex-shrink:0 is load-bearing. These rows live in #cmp-body-wrap, a column
   flex container with overflow:hidden inside a max-height:78vh float. With the
   default flex-shrink:1, a row whose chips wrap onto a second line gets squashed
   back to min-height once the float hits its cap — the overflowing chips and the
   text input then paint ON TOP of the row below. */
.cmp-row{display:flex;align-items:center;border-bottom:1px solid var(--b);min-height:38px;flex-shrink:0}
.cmp-lbl{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;padding:0 6px 0 14px;width:38px;flex-shrink:0}
/* Recipient rows grow downwards, so the label rides the FIRST chip line instead
   of drifting to the vertical middle of a tall row (Outlook/Gmail behaviour). */
.cmp-row-recip{align-items:flex-start}
.cmp-row-recip .cmp-lbl{padding-top:10px}
.cmp-row-recip .btn-ghost{margin-top:6px}
/* Chip input for recipients */
.chip-input{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:5px 8px;cursor:text;flex:1;min-height:38px;min-width:0}
/* Bound the growth: past ~3 lines the recipient list scrolls instead of eating
   the message body. .suggest-drop is a SIBLING (inside .suggest-wrap), so the
   autocomplete popup is not clipped by this scroll container. */
.chip-input{max-height:96px;overflow-y:auto}
.chip-text{background:none;border:none;outline:none;color:var(--t);font-size:12.5px;font-family:var(--font);flex:1;min-width:80px;padding:2px 0}
.chip-text::placeholder{color:var(--t3)}
/* Click between two chips and the input MOVES into that gap, so the caret is
   literally where you clicked. There it must size to its content instead of
   flex:1 — a greedy input would eat the rest of the row and push every chip
   after the caret onto the next line. Width comes from the `size` attribute,
   which renderChips keeps in step with what is typed. */
.chip-text.chip-text-mid{flex:0 1 auto;min-width:0}
.chip-text.chip-text-mid::placeholder{color:transparent}
/* 200px is a fitted value, not a round number: the To row loses ~26px to the
   Bcc button, and two chips + gap must still fit on one line there (2×200+4 <
   ~433px available). Going wider drops the To row to one chip per line, which
   doubles its height for no gain. The title tooltip carries the full address. */
.recip-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 8px 2px 9px;border-radius:12px;background:var(--acb);color:var(--ac2);border:1px solid var(--acbr);font-size:11px;max-width:min(200px,100%);flex-shrink:0;min-width:0}
.recip-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recip-chip-x{cursor:pointer;opacity:.55;font-size:9px;margin-inline-start:1px;line-height:1;display:inline-flex;align-items:center}
.recip-chip-x:hover{opacity:1}
/* Dragging a recipient between To / Cc / Bcc. Keyed off [draggable] rather than
   .recip-chip, because the lead-thread reply box borrows the chip LOOK but keeps
   its state in the DOM and has no drag — a grab cursor there would promise a
   gesture that does nothing. The ✕ keeps its own pointer cursor (declared after
   this in specificity terms it is a child, so state its cursor again below). */
/* Compose's chips can be dragged between To / Cc / Bcc and reordered along a
   line. Keyed off .recip-movable, which renderChips adds, because the lead-
   thread reply box borrows the chip LOOK while keeping its own DOM state — a
   grab cursor there would promise a gesture that does nothing.

   user-select and touch-action are load-bearing, not polish: a mousedown on
   selectable text starts a SELECTION instead of a drag, and on touch the
   browser pans the page unless the element opts out. renderChips sets both
   inline as well, so the gesture survives a stale or slow stylesheet. */
.recip-chip.recip-movable{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.recip-chip.recip-movable:active{cursor:grabbing}
.recip-chip.recip-movable .recip-chip-x{cursor:pointer}
.recip-chip-dragging{opacity:.35}
/* The chip that follows the pointer. Centred on the cursor and inert, so
   elementFromPoint sees the row underneath rather than the ghost itself. */
.recip-chip-ghost{position:fixed;z-index:9999;pointer-events:none;opacity:.9;
  transform:translate(-50%,-50%);box-shadow:0 4px 14px rgba(0,0,0,.28)}
/* The drop target. outline rather than border: .chip-input is a flex box with no
   border of its own, so a border would resize the row and nudge every chip as
   the pointer crosses it. */
.chip-input-drop{background:var(--acb);outline:2px dashed var(--acbr);outline-offset:-3px;border-radius:8px}
/* Chip input used OUTSIDE compose (the lead thread reply box). Compose's own
   .chip-input sits inside .cmp-row, which supplies the frame; standalone it has
   to draw its own, matching .inp so the reply form reads as one set of fields. */
.chip-field{background:var(--bg3);border:1px solid var(--b2);border-radius:var(--rsm);
  transition:border-color var(--tr);min-height:36px}
.chip-field:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px var(--acb)}
/* Suggestion dropdown */
.suggest-wrap{position:relative;flex:1;display:flex;min-width:0}
.suggest-drop{position:absolute;top:calc(100% + 2px);inset-inline-start:0;min-width:280px;z-index:600;background:var(--bg2);border:1px solid var(--b2);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;display:none}
.suggest-drop.open{display:block}
.sug-item{padding:8px 12px;cursor:pointer;font-size:12px;display:flex;align-items:center;gap:10px;transition:background var(--tr)}
.sug-item:hover,.sug-item.active{background:var(--acb);color:var(--ac2)}
.sug-av{width:26px;height:26px;border-radius:50%;background:var(--ac);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sug-name{font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug-email{font-size:10.5px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-subj-input{flex:1;background:none;border:none;outline:none;color:var(--t);font-size:12.5px;font-family:var(--font);padding:0 10px;height:38px}
.cmp-subj-input::placeholder{color:var(--t3)}
.cmp-body-wrap{flex:1;overflow-y:auto;padding:10px 14px}
.cmp-textarea{width:100%;background:none;border:none;outline:none;color:var(--t);font-size:12.5px;font-family:var(--font);line-height:1.65;resize:none;min-height:160px}
.cmp-textarea::placeholder{color:var(--t3)}
/* contenteditable compose body (rich, supports signature images) */
.cmp-editable{display:block;min-height:160px;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.cmp-editable:empty:before{content:attr(data-ph);color:var(--t3);pointer-events:none}
.cmp-editable img{max-width:100%;height:auto}
.cmp-editable a{color:var(--ac2)}
.cmp-sig-block{margin-top:6px}
.cmp-quote-toggle{display:inline-block;cursor:pointer;background:var(--bg3);border:1px solid var(--b);border-radius:4px;padding:0 6px;line-height:14px;font-size:10px;color:var(--t3);user-select:none;font-weight:900;letter-spacing:1.5px;margin:4px 0;vertical-align:middle}
.cmp-quote-toggle:hover{background:var(--bg2);color:var(--t);border-color:var(--ac)}
.cmp-quote-toggle.open{color:var(--ac);border-color:var(--ac)}
/* signature manager modal */
.sig-wrap{display:flex;gap:14px;min-height:300px}
.sig-list{width:200px;flex-shrink:0;border-inline-end:1px solid var(--b2);padding-inline-end:12px;overflow-y:auto;max-height:60vh}
.sig-item{padding:9px 10px;border-radius:var(--rsm);cursor:pointer;font-size:12.5px;color:var(--t2);display:flex;align-items:center;gap:7px;margin-bottom:3px;border:1px solid transparent}
.sig-item:hover{background:var(--bg3)}
.sig-item.active{background:var(--acb);border-color:var(--acbr);color:var(--t)}
.sig-item .sig-star{margin-inline-start:auto;font-size:11px;color:var(--ac2)}
.sig-edit{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.sig-rich{min-height:170px;max-height:40vh;overflow-y:auto;padding:10px 12px;background:var(--bg3);border:1px solid var(--b2);border-radius:var(--rsm);color:var(--t);font-size:13px;line-height:1.6;outline:none}
.sig-rich:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--acb)}
.sig-rich img{max-width:100%;height:auto}
.sig-rich:empty:before{content:attr(data-ph);color:var(--t3)}
.sig-tb{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sig-tb .btn{padding:5px 9px;font-size:11px}
.cmp-footer{padding:10px 14px;border-top:1px solid var(--b);display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:wrap}
.cmp-opt{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--t3);cursor:pointer;white-space:nowrap}
.cmp-opt input{width:13px;height:13px;cursor:pointer}
.cmp-opt:hover{color:var(--t2)}

/* ══ OPENS CARD IN HISTORY ══ */
.opens-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:16px}
.opens-list{display:flex;flex-direction:column;gap:8px}
.open-row{background:var(--bg3);border:1px solid var(--b);border-radius:var(--r);padding:12px 14px;transition:border-color var(--tr)}
.open-row:hover{border-color:var(--acbr)}
.open-row-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.open-row-subj{font-size:12.5px;font-weight:600;color:var(--t);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.open-row-count{background:var(--acb);color:var(--ac2);border:1px solid var(--acbr);border-radius:20px;padding:2px 9px;font-size:11px;font-weight:700;font-family:var(--mono);flex-shrink:0}
.open-row-recip{font-size:11px;color:var(--t3);margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.open-ts-grid{display:flex;gap:16px;flex-wrap:wrap}
.open-ts-item{display:flex;flex-direction:column;gap:2px}
.open-ts-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:var(--t3);font-weight:700}
.open-ts-val{font-size:11px;font-family:var(--mono);color:var(--t2)}

/* ══ New mail notification banner ══ */
.new-mail-banner{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--acb);border-bottom:1px solid var(--acbr);font-size:12px;color:var(--ac2);cursor:pointer;flex-shrink:0}
.new-mail-banner:hover{background:var(--acb);filter:brightness(1.15)}

/* ══ DASHBOARD REDESIGN ══ */
.dash-period-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 18px;background:var(--bg2);border:1px solid var(--b);border-radius:var(--rlg);margin-bottom:22px}
/* ── Customizable widget grid (GridStack) ── */
/* No vertical scroll at the widget-container level (was showing a scrollbar
   whenever content was even a few px taller than the grid cell). Any element
   that legitimately needs its own scroll (region-list, team-grid, groups
   list, the per-day chart's horizontal scroll) declares that scroll itself. */
.grid-stack-item-content{overflow:hidden;position:relative}
/* Edit affordances are hidden until "Customize" (edit mode) is turned on */
.dash-widget-edit{position:absolute;top:8px;inset-inline-end:10px;z-index:5;width:26px;height:26px;border-radius:50%;display:none;align-items:center;justify-content:center;background:var(--bg3);border:1px solid var(--b2);color:var(--t2);cursor:pointer;transition:background .15s;padding:0}
.dash-editing .dash-widget-edit{display:flex}
.dash-widget-edit:hover{background:var(--bg4);color:var(--t)}
.dash-widget-edit svg{width:13px;height:13px}
.dash-editing .grid-stack-item-content{outline:1px dashed var(--acbr);outline-offset:-1px}
.grid-stack-item.ui-draggable-dragging .grid-stack-item-content,
.grid-stack-item.ui-resizable-resizing .grid-stack-item-content{box-shadow:0 0 0 2px var(--ac)}
/* Drag handle — only shown/usable in edit mode; sticky so it stays reachable */
.dash-drag-handle{display:none;align-items:center;gap:7px;padding:6px 10px;margin:-2px -2px 6px;cursor:move;color:var(--ac2);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:var(--acb);border-bottom:1px solid var(--acbr);border-radius:8px 8px 0 0;position:sticky;top:0;z-index:4}
.dash-editing .dash-drag-handle{display:flex}
.dash-drag-handle .grip{letter-spacing:-1px;font-size:13px;opacity:.7}
.dash-editing .dash-widget-edit{top:5px}
.dwe-chip{padding:6px 10px;border-radius:8px;border:1px solid var(--b2);background:var(--bg3);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:9.5px;color:var(--t2);transition:all .15s}
.dwe-chip.active{background:var(--acb);border-color:var(--acbr);color:var(--ac2)}
.dwe-chip:hover{background:var(--bg4)}
.dwe-chip svg{width:20px;height:20px}
.dash-theme-swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-shadow:0 0 0 1px var(--b);transition:transform .12s}
.dash-theme-swatch:hover{transform:scale(1.12)}
.dash-theme-swatch.active{border-color:var(--t)}
/* 5 dashboard style presets */
.dash-style-card{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;padding:6px 6px 5px;border-radius:10px;border:2px solid transparent;transition:all .15s}
.dash-style-card:hover{background:var(--bg3)}
.dash-style-card.active{border-color:var(--ac);background:var(--acb)}
.dash-style-preview{width:58px;height:36px;border-radius:7px;box-shadow:0 0 0 1px var(--b);overflow:hidden;display:flex;flex-direction:column}
.dash-style-name{font-size:10px;font-weight:600;color:var(--t2)}
/* Unified colour mode — force every KPI card in the dashboard to the single accent
   (overrides the per-card inline colours; !important beats inline styles) */
.dash-unified .dash-kpi::before{background:var(--ac)!important}
.dash-unified .dash-kpi-icon{background:var(--acb)!important;color:var(--ac)!important}
.dash-unified .dash-kpi-icon svg{color:var(--ac)!important;stroke:var(--ac)!important}
.dash-unified .dash-kpi-val{color:var(--ac)!important}
/* Per-widget colour override: when a single widget has a picked colour, recolour
   its KPI cards to that (scoped) accent — same effect as unified, one widget only. */
.dash-wcolor .dash-kpi::before{background:var(--ac)!important}
.dash-wcolor .dash-kpi-icon{background:var(--acb)!important;color:var(--ac)!important}
.dash-wcolor .dash-kpi-icon svg{color:var(--ac)!important;stroke:var(--ac)!important}
.dash-wcolor .dash-kpi-val{color:var(--ac)!important}
/* ── Build-your-own (custom) widgets ─────────────────────────────────────── */
/* The body of a user-built card. Everything the five presentations render lives
   inside it, so one scroll container serves them all. */
.cw-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px}
.cw-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px}
.cw-metric{background:var(--bg3);border:1px solid var(--b);border-radius:12px;padding:12px 13px;min-width:0}
.cw-metric-lbl{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--t3);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-metric-val{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--ac);line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono)}
.cw-chartwrap{position:relative;flex:1;min-height:120px}
.cw-table{width:100%;border-collapse:collapse;font-size:12px}
.cw-table th{text-align:start;font-size:10px;font-weight:700;color:var(--t3);padding:6px 8px;border-bottom:1px solid var(--b);position:sticky;top:0;background:var(--bg2);z-index:1}
.cw-table td{padding:6px 8px;border-bottom:1px solid var(--b);color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.cw-table tr:last-child td{border-bottom:none}
.cw-rich{font-size:13px;color:var(--t2);line-height:1.55;word-break:break-word}
.cw-rich h1,.cw-rich h2,.cw-rich h3,.cw-rich b,.cw-rich strong{color:var(--t)}
.cw-rich h1{font-size:19px;margin:.2em 0}.cw-rich h2{font-size:16px;margin:.2em 0}.cw-rich h3{font-size:14px;margin:.2em 0}
.cw-rich a{color:var(--ac)}
.cw-rich table{border-collapse:collapse}.cw-rich td,.cw-rich th{border:1px solid var(--b);padding:4px 7px}
/* Code widgets render in a sandboxed iframe — transparent so the card shows through */
.cw-frame{width:100%;flex:1;min-height:110px;border:0;background:transparent;display:block;color-scheme:normal}
.cw-empty{font-size:12px;color:var(--t3);text-align:center;padding:18px;margin:auto}
/* ── Widget builder popup ── */
.cw-build{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}
.cw-build-cfg{max-height:60vh;overflow:auto;padding-inline-end:4px}
.cw-build-prev{position:sticky;top:0}
@media(max-width:760px){.cw-build{grid-template-columns:1fr}.cw-build-prev{position:static}}
.cw-type{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;border:1px solid var(--b2);border-radius:10px;background:var(--bg3);cursor:pointer;font-size:10px;color:var(--t2);text-align:center;transition:all .15s;line-height:1.2}
.cw-type:hover{background:var(--bg4)}
.cw-type.active{background:var(--acb);border-color:var(--acbr);color:var(--ac2)}
.cw-type svg{width:18px;height:18px;flex-shrink:0}
.cw-pick{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--t2)}
.cw-pick:hover{background:var(--ch)}
.cw-pick input{accent-color:var(--ac);width:15px;height:15px;flex-shrink:0}
.cw-pick span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-pick-v{font-size:11px;color:var(--t3);font-family:var(--mono);flex-shrink:0}
.cw-code{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.55;background:var(--bg3);color:var(--t);border:1px solid var(--b2);border-radius:9px;padding:9px 10px;resize:vertical;min-height:96px;tab-size:2;white-space:pre;overflow-wrap:normal;overflow-x:auto}
.cw-code:focus{outline:none;border-color:var(--acbr);background:var(--bg4)}
.cw-tokens{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.cw-token{font-family:var(--mono);font-size:10.5px;padding:2px 8px;border-radius:999px;background:var(--acb);color:var(--ac2);border:1px solid var(--acbr);cursor:pointer}
.cw-token:hover{background:var(--acbr);color:var(--t)}
.cw-hint{font-size:11px;color:var(--t3);line-height:1.5;margin:-2px 0 8px}
/* A mandatory control left empty on save — same red border + tint the
   opportunity money fields use. Cleared as soon as the field is touched. */
.cw-invalid{border-color:var(--rd)!important;background:var(--rdb)!important}
.cw-req{color:var(--rd);font-weight:700}
/* jsVectorMap theming to match app surfaces */
#region-map .jvm-container{background:var(--bg3)!important;border-radius:10px}
#region-map .jvm-region{stroke:var(--bg2);stroke-width:.5}
.jvm-tooltip{background:var(--bg4)!important;color:var(--t)!important;border:1px solid var(--b2)!important;font-family:var(--font)!important;font-size:12px!important;box-shadow:var(--sh)!important}
.dash-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:22px}
.dash-kpi{display:flex;align-items:center;gap:15px;background:var(--bg2);border:1px solid var(--b);border-radius:16px;padding:18px 20px;position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.05);transition:border-color var(--tr),transform var(--tr),box-shadow var(--tr)}
.dash-kpi:hover{border-color:var(--b2);transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.16)}
.dash-kpi::before{content:'';position:absolute;top:0;inset-inline-start:0;inset-inline-end:0;height:3px;border-radius:16px 16px 0 0;z-index:2}
/* Soft coloured glow bleeding from the top-right — gives each card depth. */
.dash-kpi::after{content:'';position:absolute;top:-55%;inset-inline-end:-12%;width:130px;height:130px;border-radius:50%;opacity:.13;filter:blur(8px);pointer-events:none}
.dash-kpi.cp::before{background:linear-gradient(90deg,var(--ac),#a78bfa)}
.dash-kpi.cg::before{background:linear-gradient(90deg,var(--gr),#6ee7b7)}
.dash-kpi.ca::before{background:linear-gradient(90deg,var(--am),#fde68a)}
.dash-kpi.cb::before{background:linear-gradient(90deg,var(--bl),#93c5fd)}
.dash-kpi.ci::before{background:linear-gradient(90deg,#14b8a6,#06b6d4)}
.dash-kpi.cp::after{background:var(--ac)}
.dash-kpi.cg::after{background:var(--gr)}
.dash-kpi.ca::after{background:var(--am)}
.dash-kpi.cb::after{background:var(--bl)}
.dash-kpi.ci::after{background:#14b8a6}
.dash-kpi-icon{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 2px 6px rgba(0,0,0,.08)}
.dash-kpi-icon svg{width:19px;height:19px}
.dash-kpi-body{flex:1;min-width:0;position:relative;z-index:1}
.dash-kpi-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);font-weight:700;margin-bottom:5px}
.dash-kpi-val{font-size:27px;font-weight:800;letter-spacing:-.04em;font-family:var(--mono);line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
/* Never uppercase text anywhere (per design) — show labels in their authored case */
*{text-transform:none!important}
.dash-kpi.cp .dash-kpi-val{color:var(--ac2)}
.dash-kpi.cg .dash-kpi-val{color:var(--gr)}
.dash-kpi.ca .dash-kpi-val{color:var(--am)}
.dash-kpi.cb .dash-kpi-val{color:var(--bl)}
.dash-kpi-meta{font-size:10.5px;color:var(--t3);margin-top:5px}
/* ── Dashboard hero / welcome banner ─────────────────────────────────────── */
.dash-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:22px 26px;margin-bottom:18px;border-radius:18px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--acb),transparent 55%),var(--bg2);border:1px solid var(--b)}
.dash-hero::after{content:'';position:absolute;inset-inline-end:-70px;top:-90px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,var(--acb),transparent 70%);pointer-events:none}
.dash-hero-txt{position:relative;z-index:1;min-width:0}
.dash-hero-hi{font-size:23px;font-weight:800;letter-spacing:-.025em;color:var(--t);line-height:1.15}
.dash-hero-hi .wave{display:inline-block;animation:hero-wave 2.4s ease-in-out infinite;transform-origin:70% 70%}
@keyframes hero-wave{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}
.dash-hero-sub{font-size:12.5px;color:var(--t3);margin-top:4px}
.dash-hero-badges{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.dash-hero-pill{display:flex;flex-direction:column;gap:1px;padding:9px 15px;border-radius:13px;background:var(--bg2);border:1px solid var(--b);min-width:78px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.dash-hero-pill b{font-size:17px;font-weight:800;color:var(--t);font-family:var(--mono);line-height:1.1;letter-spacing:-.02em}
.dash-hero-pill span{font-size:9.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-top:2px}
.dash-hero-pill.hp-ac b{color:var(--ac2)} .dash-hero-pill.hp-gr b{color:var(--gr)} .dash-hero-pill.hp-am b{color:var(--am)}
/* ── Radial ring cards (Sending Performance / Leads Overview) ─────────────── */
.dash-ring-wrap{position:relative;flex-shrink:0}
.dash-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center}
.dash-ring-center b{font-size:25px;font-weight:800;font-family:var(--mono);color:var(--t);letter-spacing:-.03em;line-height:1}
.dash-ring-center span{font-size:9px;color:var(--t3);letter-spacing:.06em;font-weight:700;margin-top:3px}
.dash-ring-legend{display:flex;flex-direction:column;gap:10px;flex:1;min-width:140px}
.dash-lg-row{display:flex;align-items:center;gap:10px}
.dash-lg-dot{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.dash-lg-name{font-size:12px;color:var(--t2);flex:1;min-width:0}
.dash-lg-val{font-size:14.5px;font-weight:800;font-family:var(--mono);color:var(--t);letter-spacing:-.02em}
.dash-chip-strip{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px solid var(--b)}
.dash-chip{display:flex;flex-direction:column;gap:1px;padding:8px 13px;border-radius:12px;background:var(--bg3);border:1px solid var(--b);cursor:pointer;transition:border-color var(--tr),transform var(--tr),box-shadow var(--tr);flex:1 1 84px;min-width:84px}
.dash-chip:hover{border-color:var(--b2);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.1)}
.dash-chip b{font-size:16px;font-weight:800;font-family:var(--mono);color:var(--t);line-height:1.05;letter-spacing:-.02em}
.dash-chip span{font-size:9.5px;color:var(--t3);letter-spacing:.04em;font-weight:600;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-rings-row{display:flex;align-items:center;gap:22px;flex:1;flex-wrap:wrap}
.dash-hero-pill{cursor:pointer;transition:border-color var(--tr),transform var(--tr)}
.dash-hero-pill:hover{border-color:var(--b2);transform:translateY(-2px)}
/* ── Leads pipeline (horizontal stacked bar) ─────────────────────────────── */
.dash-pipe{display:flex;height:16px;border-radius:9px;overflow:hidden;background:var(--bg3);margin:2px 0 4px;gap:2px}
.dash-pipe-seg{height:100%;min-width:0;transition:width .6s cubic-bezier(.4,0,.2,1);border-radius:4px}
.dash-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 14px;margin-top:16px}
.dash-stat{display:flex;flex-direction:column;gap:3px;cursor:pointer}
.dash-stat-top{display:flex;align-items:center;gap:6px}
.dash-stat-dot{width:8px;height:8px;border-radius:3px;flex-shrink:0}
.dash-stat-name{font-size:10.5px;color:var(--t3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-stat-val{font-size:19px;font-weight:800;font-family:var(--mono);color:var(--t);letter-spacing:-.02em;line-height:1}
/* Deal value vs Won value — horizontal value bars */
.dash-vbar-wrap{display:flex;flex-direction:column;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--b)}
.dash-vbar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.dash-vbar-head span{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--t3);font-weight:600}
.dash-vbar-head span .dash-stat-dot{width:8px;height:8px;border-radius:3px}
.dash-vbar-head b{font-size:14.5px;font-weight:800;font-family:var(--mono);color:var(--t);letter-spacing:-.02em}
.dash-vbar-track{height:11px;border-radius:6px;background:var(--bg3);overflow:hidden}
.dash-vbar-fill{height:100%;border-radius:6px;transition:width .6s cubic-bezier(.4,0,.2,1)}
/* Profile mail-connect status */
#mail-dot{position:absolute;top:0;inset-inline-start:24px;width:10px;height:10px;border-radius:50%;background:var(--rd);border:2px solid var(--bg2);display:none;animation:mailBlink 1.2s ease-in-out infinite;z-index:1}
.mail-dot-blink{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rd);animation:mailBlink 1.2s ease-in-out infinite;flex-shrink:0}
@keyframes mailBlink{0%,100%{opacity:1}50%{opacity:.2}}
/* Mailbox connect block in the profile menu */
.mail-status{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;margin-bottom:9px}
.mail-status.warn{color:var(--rd)}
.mail-status.ok{color:var(--gr);background:var(--grb);border:1px solid var(--grbr);padding:8px 11px;border-radius:10px;margin-bottom:0}
.mail-status.ok .ms-ico{width:19px;height:19px;border-radius:50%;background:var(--gr);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0}
.mail-status.ok .ms-t{font-size:11.5px;font-weight:700;color:var(--t);line-height:1.2}
.mail-status.ok .ms-s{font-size:10px;color:var(--t3);font-weight:500}
.mail-status.ok .ms-disc{background:none;border:none;color:var(--rd);font-size:10.5px;cursor:pointer;text-decoration:underline;padding:0;flex-shrink:0}
.mail-connect-btns{display:flex;flex-direction:column;gap:7px}
.mail-connect-btn{width:100%;display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--bg3);border:1px solid var(--b2);border-radius:10px;font-size:12.5px;font-weight:600;color:var(--t);cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.mail-connect-btn:hover{border-color:var(--ac);background:var(--acb);transform:translateY(-1px)}
.mail-connect-btn:active{transform:none}
.mail-connect-btn svg{flex-shrink:0}
.mail-connect-btn .chev{margin-inline-start:auto;color:var(--t3);font-size:14px}
/* Meetings widget */
.mtg-row{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:12px;border:1px solid var(--b);background:var(--bg2);margin-bottom:8px;transition:border-color var(--tr),transform var(--tr)}
.mtg-row:hover{border-color:var(--b2);transform:translateY(-1px)}
.mtg-row.ongoing{border-color:var(--grbr);background:var(--grb)}
.mtg-time{min-width:96px;font-size:11.5px;font-weight:700;color:var(--t2);white-space:nowrap}
.mtg-title{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtg-org{font-size:10.5px;color:var(--t3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtg-live{display:inline-flex;align-items:center;gap:5px;color:var(--gr);font-weight:800}
.mtg-live::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--gr);animation:lhPulseG 1.6s ease-out infinite}
@keyframes lhPulseG{0%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}100%{box-shadow:0 0 0 8px rgba(16,185,129,0)}}
.mtg-join{flex-shrink:0;text-decoration:none}
/* Meetings: date badge, provider tag, tabs, actions */
.mtg-date{min-width:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:7px 6px;border-radius:10px;background:var(--bg3);border:1px solid var(--b);flex-shrink:0}
.mtg-date .d{font-size:17px;font-weight:800;line-height:1;color:var(--t)}
.mtg-date .m{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ac2)}
.mtg-date .t{font-size:9.5px;color:var(--t3);margin-top:1px;white-space:nowrap}
.mtg-row.ongoing .mtg-date{background:var(--grb);border-color:var(--grbr)}
.mtg-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px}
.mtg-when{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--t2);white-space:nowrap}
.mtg-when .mtg-clk{width:12px;height:12px;color:var(--ac2);flex-shrink:0}
.mtg-org-e{font-size:10.5px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtg-dot-sep{color:var(--t3);font-size:10px}
.mtg-row.past{opacity:.72}
.mtg-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.mtg-resched{background:none;border:1px solid var(--b2);color:var(--t2);font-size:11px;font-weight:600;padding:5px 9px;border-radius:7px;cursor:pointer;white-space:nowrap}
.mtg-resched:hover{border-color:var(--ac);color:var(--ac2)}
.mtg-tabs{display:inline-flex;background:var(--bg3);border:1px solid var(--b);border-radius:9px;padding:2px}
.mtg-tab{border:none;background:none;font-size:11.5px;font-weight:600;color:var(--t3);padding:4px 11px;border-radius:7px;cursor:pointer;transition:all .15s}
.mtg-tab.active{background:var(--ac);color:#fff}
.mtg-datefilter{font-size:11px;padding:4px 7px;border:1px solid var(--b);border-radius:8px;background:var(--bg3);color:var(--t);height:28px;cursor:pointer}
.mtg-datefilter::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6}
.mtg-online-tag{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;color:var(--ac2);background:var(--acb);padding:1px 6px;border-radius:5px;margin-inline-start:6px}
/* ── To-Do widget ── */
.td-tabs{display:inline-flex;background:var(--bg3);border:1px solid var(--b);border-radius:9px;padding:2px}
.td-tab{position:relative;border:none;background:none;font-size:11.5px;font-weight:600;color:var(--t3);padding:4px 11px;border-radius:7px;cursor:pointer;transition:all .15s}
.td-tab.active{background:var(--ac);color:#fff}
/* Blinking red dot on the Reminder tab when un-opened reminders exist */
.td-dot{display:none;position:absolute;top:1px;inset-inline-end:2px;width:8px;height:8px;border-radius:50%;background:var(--rd);box-shadow:0 0 0 2px var(--bg2)}
.td-dot.on{display:block;animation:tdBlink 1.1s ease-in-out infinite}
@keyframes tdBlink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(239,68,68,.6)}50%{opacity:.35;box-shadow:0 0 0 5px rgba(239,68,68,0)}}
/* Row description — expands in place, mirroring the header calendar. */
.td-desc-body{font-size:11.5px;color:var(--t2);margin-top:6px;padding:6px 9px;background:var(--bg);border:1px solid var(--b);border-radius:8px;white-space:pre-wrap;word-break:break-word;max-height:150px;overflow-y:auto}
.td-chev{flex-shrink:0;width:20px;height:20px;padding:0;border:none;background:none;color:var(--t3);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:6px;transition:transform var(--tr),background var(--tr),color var(--tr)}
.td-chev:hover{background:var(--bg3);color:var(--t)}
.td-item{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border-radius:10px;border:1px solid var(--b);background:var(--bg2);margin-bottom:7px;transition:border-color var(--tr)}
.td-item:hover{border-color:var(--b2)}
.td-item.done{opacity:.55}
.td-item.done .td-text{text-decoration:line-through;color:var(--t3)}
.td-check{flex-shrink:0;width:17px;height:17px;margin-top:1px;border:1.8px solid var(--b2);border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .15s}
.td-check.on{background:var(--gr);border-color:var(--gr)}
.td-body{flex:1;min-width:0}
.td-text{font-size:12.5px;font-weight:500;color:var(--t);word-break:break-word;white-space:pre-wrap}
.td-due-tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--ac2);margin-top:3px}
.td-due-tag.overdue{color:var(--rd)}
.td-del{flex-shrink:0;background:none;border:none;color:var(--t3);cursor:pointer;font-size:15px;line-height:1;padding:2px 4px;border-radius:6px;transition:all .15s}
.td-del:hover{color:var(--rd);background:var(--rdb)}
/* Reminder items: un-opened stand out (accent bar + unread dot); opened are muted */
.td-item.rem-unopened{border-color:var(--acbr);background:var(--acb);border-inline-start:3px solid var(--ac)}
.td-item.rem-opened{opacity:.72}
/* Future follow-ups: shown as calm "scheduled" items, no alert styling */
.td-item.rem-scheduled{border-inline-start:3px solid var(--b2)}
.td-due-tag.scheduled{color:var(--t3);font-weight:600}
.td-unread{flex-shrink:0;width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--rd);animation:tdBlink 1.1s ease-in-out infinite}
/* Row kebab (⋮) action menu */
.lead-kebab{background:none;border:1px solid transparent;color:var(--t3);border-radius:7px;padding:3px 5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s}
.lead-kebab:hover{background:var(--bg3);border-color:var(--b);color:var(--t)}
.ctx-menu{position:fixed;z-index:4000;min-width:200px;background:var(--bg2);border:1px solid var(--b2);border-radius:11px;box-shadow:0 12px 34px rgba(0,0,0,.28);padding:5px;animation:ctxIn .13s ease}
@keyframes ctxIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ctx-item{display:flex;align-items:center;gap:9px;padding:9px 11px;font-size:12.5px;font-weight:500;color:var(--t2);border-radius:8px;cursor:pointer;transition:background .12s}
.ctx-item:hover{background:var(--acb);color:var(--ac2)}
.ctx-item svg{width:15px;height:15px;flex-shrink:0;opacity:.85}
/* Email-thread popup */
.lm-thread{border:1px solid var(--b);border-radius:9px;margin-top:7px;overflow:hidden}
.lm-thead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;cursor:pointer;background:var(--bg2)}
.lm-thead:hover{background:var(--bg3)}
.lm-msg{border-top:1px solid var(--b);padding:9px 11px;font-size:12px}
.lm-msg .from{font-weight:600;font-size:11.5px;color:var(--t)}
.lm-msg .body{color:var(--t2);margin-top:4px;white-space:pre-wrap;word-break:break-word;max-height:150px;overflow:auto}
/* Compact Groups chips */
.dash-grp-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:11px;background:var(--bg3);border:1px solid var(--b);font-size:12px;transition:border-color var(--tr),transform var(--tr)}
.dash-grp-chip:hover{border-color:var(--b2);transform:translateY(-1px)}
.dash-grp-chip .av{width:22px;height:22px;border-radius:6px;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dash-grp-chip .cnt{font-weight:800;font-family:var(--mono);color:var(--t)}
/* Subtle depth for every dashboard card + smoother section headings. */
#p-dashboard .grid-stack-item-content>.card{box-shadow:0 1px 2px rgba(0,0,0,.04)}
#p-dashboard .grid-stack-item-content>.card:hover{border-color:var(--b2)}
#p-dashboard .ctitle{font-size:14px;font-weight:700}
#p-dashboard .dash-period-bar{border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.dash-send-banner{background:linear-gradient(135deg,rgba(124,111,255,.12),rgba(124,111,255,.06));border:1px solid var(--acbr);border-radius:var(--rlg);padding:16px 20px;margin-bottom:18px}
.dash-send-banner-inner{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.dash-pulse-ring{width:34px;height:34px;border-radius:10px;background:var(--acb);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dash-progress-track{height:5px;background:var(--bg4);border-radius:3px;overflow:hidden}
.dash-progress-fill{height:100%;background:linear-gradient(90deg,var(--ac),#a78bfa);border-radius:3px;transition:width .4s ease}
.dash-sch-banner{background:linear-gradient(135deg,rgba(251,191,36,.1),rgba(251,191,36,.05));border:1px solid var(--ambr);border-radius:var(--rlg);padding:16px 20px;margin-bottom:18px}
.dash-chart-card{background:var(--bg2)}
.dash-activity-card{background:var(--bg2)}
.dash-activity-dot{width:8px;height:8px;border-radius:50%;background:var(--gr);box-shadow:0 0 0 3px var(--grb);animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 3px var(--grb)}50%{box-shadow:0 0 0 6px var(--grb)}}
.dash-chart-legend{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* dashboard scrollable panels */
.dash-panel-scroll{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--b2) transparent}
.dash-panel-scroll::-webkit-scrollbar{width:3px}
.dash-panel-scroll::-webkit-scrollbar-track{background:transparent}
.dash-panel-scroll::-webkit-scrollbar-thumb{background:var(--b2);border-radius:3px}
.dash-panel-scroll::-webkit-scrollbar-thumb:hover{background:var(--b)}
/* Time-series drill-down bar chart ("Leads added per day/month/year") —
   horizontal ("bottom") scroller only; never scrolls vertically. */
.ts-bar-row{display:flex;align-items:flex-end;gap:14px;height:100%;overflow-x:auto;overflow-y:hidden;padding-top:8px;padding-bottom:4px;scrollbar-width:thin;scrollbar-color:var(--b2) transparent;
  /* faint horizontal gridlines behind the bars (see screenshot) */
  background-image:repeating-linear-gradient(to top, var(--b) 0, var(--b) 1px, transparent 1px, transparent 16.6667%)}
.ts-bar-row::-webkit-scrollbar{height:6px}
.ts-bar-row::-webkit-scrollbar-track{background:var(--bg3);border-radius:3px}
.ts-bar-row::-webkit-scrollbar-thumb{background:var(--b2);border-radius:3px}
.ts-bar-row::-webkit-scrollbar-thumb:hover{background:var(--b)}
.ts-bar-col{flex:1 0 42px;min-width:34px;max-width:72px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.ts-bar-col.ts-clickable{cursor:pointer}
.ts-bar-col.ts-clickable:hover .ts-bar-fill{filter:brightness(1.08)}
.ts-bar-fill{transition:height .5s cubic-bezier(.4,0,.2,1),filter .15s}
/* Quick Create menu rows (topbar +) */
.qc-item{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:none;
  background:none;color:var(--t);font-size:12.5px;font-family:inherit;text-align:start;
  border-radius:8px;cursor:pointer;transition:background var(--tr)}
.qc-item:hover,.qc-item:focus-visible{background:var(--bg3);outline:none}
.qc-ic{display:flex;align-items:center;justify-content:center;width:22px;height:22px;
  flex-shrink:0;color:var(--ac2)}
.qc-head{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;
  letter-spacing:.5px;padding:10px 10px 4px}
.qc-head:first-child{padding-top:6px}
/* Revenue over time — ONE measure, so one hue and no legend; the card title
   names what is plotted. The plot band is boxed between two fixed label rows
   (value on top, period underneath) so the y-axis ticks, the gridlines and the
   bar baselines all land on the same pixels. */
/* ── My Profile ─────────────────────────────────────────────────────────────
   A hero band, a row of stat tiles, then two panels. Tiles auto-fit rather than
   using a fixed column count, so the row reflows instead of overflowing when a
   plan hides one of them. */
.prof-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px;
  padding:18px 20px;border-radius:var(--rlg);border:1px solid var(--b);
  background:linear-gradient(120deg,var(--acb),transparent 60%),var(--bg2)}
.prof-av{width:56px;height:56px;border-radius:50%;background:var(--ac);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;flex-shrink:0}
.prof-name{font-size:20px;font-weight:800;letter-spacing:-.02em}
.prof-sub{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12px;color:var(--t3);margin-top:3px}
.prof-chip{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 9px;border-radius:20px;background:var(--acb);color:var(--ac2);border:1px solid var(--acbr)}
.prof-period{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-inline-start:auto}
.prof-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
/* The money figures lead, three across and larger; the counts follow in a
   four-across band. Both are auto-fit so a narrow window collapses them
   gracefully rather than squeezing seven tiles onto one line. */
.prof-tiles-lead{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-bottom:12px}
.prof-tiles-rest{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.prof-tile-lg{padding:18px 20px;border-radius:16px}
.prof-tile-lg .prof-v{font-size:32px;margin-top:6px}
.prof-tile-lg .prof-k{font-size:10.5px}
.prof-tile-lg .prof-m{font-size:11px;margin-top:4px}
.prof-tile-lg::before{width:4px}
/* A two-line sub-label must not change the tile's height relative to its
   neighbours, or the row looks broken. */
.prof-tiles-lead .prof-tile{display:flex;flex-direction:column}
.prof-tiles-lead .prof-m{margin-top:auto;padding-top:4px}
.prof-tile{border:1px solid var(--b);border-radius:14px;background:var(--bg2);padding:14px 16px;
  position:relative;overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
/* A wash of the tile's own colour, strongest at the accent bar and gone by
   the middle - identity per card without tinting the text behind it. */
.prof-tile::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,var(--th,var(--ac)) 0%,transparent 58%);opacity:.07}
.prof-tile:hover{transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(15,23,42,.11);border-color:var(--th,var(--ac))}
/* The icon sits in a tinted chip and is drawn at FULL strength. As a faded
   watermark it was barely legible against the card; the tint goes on the chip
   behind it instead, so the glyph stays bright and the colour still reads.
   The tint is a separate layer rather than color-mix() so it works wherever
   the app does. */
/* The chip sits in normal flow beside the label, not absolutely positioned
   over the card. Absolute placement looked fine until a figure like 3,226,767
   grew wide enough at 32px to run underneath it; a flex row cannot collide. */
.prof-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;position:relative;z-index:1}
.prof-ico{position:relative;flex-shrink:0;width:34px;height:34px;
  border-radius:11px;display:flex;align-items:center;justify-content:center;
  color:var(--th,var(--ac));margin-top:-2px;
  transition:transform .16s ease}
.prof-ico::before{content:'';position:absolute;inset:0;border-radius:inherit;
  background:var(--th,var(--ac));opacity:.15}
.prof-ico svg{position:relative;width:18px;height:18px;stroke-width:2.1}
.prof-tile:hover .prof-ico{transform:scale(1.06)}
.prof-tile-lg .prof-ico{width:42px;height:42px;border-radius:13px}
.prof-tile-lg .prof-ico svg{width:22px;height:22px}
/* Keep the text above the wash. */
.prof-k,.prof-v,.prof-m{position:relative;z-index:1}
/* Figures line up column to column when they are tabular. */
.prof-v{font-variant-numeric:tabular-nums}
/* A hairline in the tile's own hue — enough to group them without four loud blocks. */
.prof-tile::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--th,var(--ac)) 0%,var(--th,var(--ac)) 55%,transparent 100%)}
.prof-k{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.06em}
.prof-v{font-size:24px;font-weight:800;letter-spacing:-.03em;margin-top:3px;line-height:1.1}
.prof-m{font-size:10.5px;color:var(--t3);margin-top:2px}
.prof-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start}
@media(max-width:900px){.prof-grid{grid-template-columns:1fr}.prof-period{margin-inline-start:0;width:100%}}
.prof-inc-row{display:flex;align-items:baseline;gap:10px;padding:9px 2px;border-bottom:1px solid var(--b)}
.prof-inc-row:last-child{border-bottom:0}
.prof-inc-open{cursor:pointer;border-radius:8px;transition:background var(--tr)}
.prof-inc-open:hover{background:var(--bg3)}
.claim-chip{font-size:10px;font-weight:700;text-transform:capitalize;padding:2px 9px;
  border-radius:20px;white-space:nowrap;margin-inline-start:10px}
.claim-chip.s-pending{background:#f59e0b22;color:#f59e0b}
.claim-chip.s-paid{background:#22c55e22;color:#22c55e}
.claim-chip.s-rejected{background:#ef444422;color:#ef4444}
.prof-inc-amt{margin-inline-start:auto;font-family:var(--mono);font-weight:700;color:var(--gr);white-space:nowrap}
/* ── Incentive rates (product form) ── */
.inc-mode{display:flex;gap:16px;flex-wrap:wrap;margin:4px 0 9px;font-size:12px;color:var(--t2)}
.inc-mode label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.inc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.inc-cell{display:flex;flex-direction:column;gap:3px}
.inc-cell>span:first-child{font-size:10.5px;color:var(--t3)}
/* The % sits inside the field so the number reads as a rate, not a quantity. */
.inc-pct{position:relative;display:block}
.inc-pct .inp{width:100%;padding-inline-end:22px;text-align:end;font-family:var(--mono);font-size:12.5px}
.inc-pct i{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);
  font-style:normal;font-size:11px;color:var(--t3);pointer-events:none}
.inc-region{border:1px solid var(--b);border-radius:9px;padding:9px 10px;margin-bottom:8px;background:var(--bg3)}
.inc-region-h{font-size:11.5px;font-weight:700;color:var(--t2);margin-bottom:6px}
.inc-ro{font-size:11px;color:var(--t3);background:var(--bg3);border:1px solid var(--b);
  border-radius:7px;padding:6px 9px;margin-bottom:8px}
@media(max-width:620px){.inc-grid{grid-template-columns:repeat(2,1fr)}}
.rev-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* Every <select> is swapped for a searchable button (see _ssEnhance), and the
   wrapper it inserts defaults to display:block/width:100% — which is what made
   these render as full-width bars overlapping the row. Size the WRAPPER and its
   button, not the native select: that one is hidden and no longer occupies the
   slot. Same fix the toolbar already carries as `.tbar .ss`. */
.rev-filters .ss{display:inline-block;width:auto;flex:0 0 auto}
.rev-filters .ss-btn{height:28px;font-size:11.5px;padding:4px 8px;width:132px;
  border-radius:7px;background:var(--bg3)}
/* Not scoped to .rev-filters — the profile's period picker uses the same
   control and would otherwise fall back to a full-width .inp. */
.rev-date{font-size:11.5px;height:28px;padding:3px 7px;width:auto;
  min-width:126px;border-radius:7px}
.rev-fl{font-size:11px;color:var(--t3)}
.rev-wrap{display:flex;gap:9px;flex:1;min-height:0}
.rev-yaxis{display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0;
  padding:14px 0 18px;text-align:end;font-size:9px;color:var(--t3);
  font-variant-numeric:tabular-nums}
.rev-plot{position:relative;flex:1;min-width:0}
/* Hairline, solid, one shade off the surface — never dashed, never competing
   with the bars. Sits behind them and takes no clicks. */
.rev-grid{position:absolute;inset-inline-start:0;inset-inline-end:0;top:14px;bottom:18px;pointer-events:none}
.rev-grid i{position:absolute;inset-inline-start:0;inset-inline-end:0;height:1px;background:var(--b)}
.rev-bars{position:relative;display:flex;align-items:stretch;gap:2px;height:100%;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--b2) transparent;
  /* A handful of bars centre instead of bunching at the left edge; `safe` keeps
     a scrolling month of days from having its first column clipped. */
  justify-content:flex-start;justify-content:safe center}
.rev-bars::-webkit-scrollbar{height:6px}
.rev-bars::-webkit-scrollbar-track{background:var(--bg3);border-radius:3px}
.rev-bars::-webkit-scrollbar-thumb{background:var(--b2);border-radius:3px}
.rev-col{flex:1 0 26px;min-width:22px;max-width:64px;display:flex;flex-direction:column;
  padding-top:14px}
.rev-col.ts-clickable{cursor:pointer}
.rev-col.ts-clickable:hover .rev-fill{filter:brightness(1.08)}
/* The track IS the gridded plot band, so a label anchored to bottom:<bar
   height> lands on that bar's cap. Parking labels in a fixed row at the top of
   the card instead detaches a short bar's value from the bar it belongs to.
   Values and period labels wear TEXT tokens; only the bar carries the series
   colour — a light hue is unreadable as text on the card surface. */
.rev-track{position:relative;flex:1;min-height:0;display:flex;align-items:flex-end;
  justify-content:center}
.rev-val{position:absolute;inset-inline-start:-6px;inset-inline-end:-6px;text-align:center;font-size:9px;
  line-height:12px;color:var(--t2);white-space:nowrap;font-variant-numeric:tabular-nums;
  pointer-events:none}
/* Capped at 24px so a wide slot leaves air rather than a fat block; 4px rounded
   at the data end, square on the baseline it grows from. */
.rev-fill{width:100%;max-width:24px;border-radius:4px 4px 0 0;
  transition:height .5s cubic-bezier(.4,0,.2,1),filter .15s}
.rev-x{height:18px;line-height:18px;font-size:8.5px;color:var(--t3);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* campaign + group rows */
.dash-camp-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--b);transition:background var(--tr);cursor:pointer}
.dash-camp-row:last-child{border-bottom:none}
.dash-camp-row:hover{background:var(--ch)}
.dash-grp-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--b)}
.dash-grp-row:last-child{border-bottom:none}
.dash-grp-bar-track{flex:1;height:5px;background:var(--b2);border-radius:4px;overflow:hidden}
.dash-grp-bar-fill{height:100%;border-radius:4px;transition:width .7s cubic-bezier(.4,0,.2,1)}
/* team cards — redesigned */
.dash-team-card{position:relative;background:var(--bg2);border:1px solid var(--b);border-radius:14px;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.dash-team-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.11);border-color:var(--b2)}
.dash-team-card-bar{height:3px;width:100%}
.dash-team-card-body{padding:14px 14px 13px;display:flex;flex-direction:column;gap:11px}
.dash-team-av{width:44px;height:44px;border-radius:50%;color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 10px rgba(0,0,0,.2)}
.dash-team-role-badge{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em}
@media(max-width:900px){.dash-charts-row{grid-template-columns:1fr!important}.dash-mid-row{grid-template-columns:1fr!important}}

/* ══ SHARED TEMPLATES REDESIGN ══ */
.st-page-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.st-page-header-left{display:flex;align-items:center;gap:14px}
.st-page-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--acb),rgba(168,85,247,.15));border:1px solid var(--acbr);display:flex;align-items:center;justify-content:center;color:var(--ac2);flex-shrink:0}
.st-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap;padding:10px 16px;background:var(--bg2);border:1px solid var(--b);border-radius:var(--r)}
.st-search-wrap{position:relative;display:flex;align-items:center}
.st-search-ico{position:absolute;inset-inline-start:10px;color:var(--t3);pointer-events:none}
.st-search-inp{padding-inline-start:30px!important;min-width:240px;font-size:12px}
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
/* ── settings toggle ──────────────────────────────────────────────────────── */
/* One switch for every org setting. Previously this was ~10 lines of inline
   style copy-pasted into 14 cards, each paired with a JS painter that set
   background/left by hand — so a tweak meant 30 edits and the copies had already
   drifted. Driven by :checked here, so the markup is three tags and the JS only
   has to set .checked. */
.stog{position:relative;display:inline-block;width:40px;height:22px;cursor:pointer;flex-shrink:0}
.stog input{position:absolute;opacity:0;width:0;height:0}
.stog-sl{position:absolute;inset:0;background:var(--b2);border-radius:22px;transition:background .25s}
.stog-kn{position:absolute;inset-inline-start:3px;top:3px;width:16px;height:16px;background:#fff;border-radius:50%;
  transition:transform .25s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.stog input:checked ~ .stog-sl{background:var(--ac)}
.stog input:checked ~ .stog-kn{transform:translateX(18px)}
.stog input:disabled ~ .stog-sl{opacity:.5}
.stog input:disabled ~ .stog-kn{opacity:.6}
.stog input:disabled{cursor:not-allowed}
.stog input:focus-visible ~ .stog-sl{outline:2px solid var(--ac);outline-offset:2px}
/* The "On / Off" word beside a switch — same size and colour everywhere. */
.stog-lbl{font-size:11.5px;color:var(--t3);white-space:nowrap}
/* The row a switch sits in, and the footnote under a settings card. */
.set-row{display:flex;align-items:center;gap:8px}
.set-foot{padding-top:10px;border-top:1px solid var(--b);font-size:11px;color:var(--t3)}

/* One setting inside a card: title, description, and a control on the right,
   separated from its neighbours by a hairline. This is the shape every settings
   card should use — it was six inline copies before, which is how one of them
   (Allow deleting prospects) ended up with no On/Off label at all. */
.set-item{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 0;border-top:1px solid var(--b)}
.set-item:first-child{border-top:none;padding-top:2px}
.set-item:last-child{padding-bottom:2px}
.set-item-txt{min-width:0}
.set-item-t{font-size:12.5px;font-weight:600}
.set-item-d{font-size:11px;color:var(--t3);line-height:1.55;margin-top:2px}
/* Sub-block hanging off a setting (the auto-assign strategy chips, the webhook
   fields) — indented under its row rather than floating between rows. */
.set-sub{padding:0 0 13px;border-top:1px solid var(--b);padding-top:12px}
@media(max-width:560px){
  /* Stack rather than squeeze the description into a column of single words. */
  .set-item{align-items:flex-start;flex-direction:column;gap:9px}
  .set-item .set-row{align-self:flex-end}
}
/* One stage in the Pipeline Stages editor: drag handle, on/off tick, badge
   colour, name, and (for a stage the owner added) a remove button. The name
   column is the flexible one so a long custom name truncates rather than
   pushing the controls off the card. */
.cs-row{display:grid;grid-template-columns:16px 16px 16px 1fr 30px;gap:8px;align-items:center;
  padding:5px 4px;border-radius:6px;border:1px solid transparent}
.cs-row:hover{background:var(--bg2);border-color:var(--b)}
.cs-row.cs-dragging{opacity:.4}
.cs-grip{cursor:grab;color:var(--t3);font-size:13px;line-height:1;user-select:none}
.cs-grip:active{cursor:grabbing}
.cs-sw{width:14px;height:14px;border-radius:4px;cursor:pointer;border:1px solid var(--b);display:inline-block}
.cs-row .inp{padding:4px 7px;font-size:12px}
@media(max-width:760px){
  /* Two pipelines side by side stop being readable well before the sidebar
     collapses — stack them instead of shrinking each to a sliver. */
  #cs-wrap{grid-template-columns:1fr}
}

/* ── WhatsApp workspace ───────────────────────────────────────────────────── */
/* Fills the content area exactly, so the message list scrolls INSIDE the thread
   rather than the whole page scrolling away from the composer. */
.wa-shell{display:flex;height:calc(100vh - 56px);min-height:420px;overflow:hidden}  /* 56px = .topbar */
.wa-list{width:320px;flex-shrink:0;border-inline-end:1px solid var(--b);display:flex;flex-direction:column;min-height:0;background:var(--bg2)}
.wa-list-hd{padding:12px;border-bottom:1px solid var(--b);flex-shrink:0}
.wa-convs{flex:1;overflow-y:auto;min-height:0}
.wa-conv{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;cursor:pointer;border-bottom:1px solid var(--b);transition:background var(--tr)}
.wa-conv:hover{background:var(--ch)}
.wa-conv.active{background:var(--wab);box-shadow:inset 3px 0 0 var(--wa)}
.wa-av{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;color:var(--wa);background:var(--wab);border:1px solid var(--wabr)}
.wa-conv-nm{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-conv-sub{font-size:11px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.wa-unread{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--wa);color:#fff;
  font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wa-thread{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
/* Insights replaces the THREAD pane, not the whole shell: the Chats/Calls/
   Insights chips live in the list header, so hiding the list on a desktop would
   leave no way back to the inbox. Below 860px it does take over — see the media
   query, where the panel's own back button is the way out. */
.wa-insights{flex:1;overflow-y:auto;min-height:0;padding:18px}
.wa-shell.insights-open .wa-thread{display:none}
.wa-shell:not(.insights-open) .wa-insights{display:none}
.wa-stat{background:var(--bg2);border:1px solid var(--b);border-radius:12px;padding:13px 15px;height:100%}
.wa-stat-v{font-size:23px;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.wa-stat-l{font-size:11px;color:var(--t3);margin-top:3px}
.wa-chart{background:var(--bg2);border:1px solid var(--b);border-radius:12px;padding:14px 16px 10px}
.wa-chart h4{font-size:13px;font-weight:700;margin:0 0 2px}
.wa-chart .sub{font-size:11px;color:var(--t3);margin-bottom:10px}
.wa-chart .box{position:relative;height:230px}
/* Series identity is never colour alone: every legend entry carries its name. */
.wa-key{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--t2);margin-bottom:8px}
.wa-key span{display:inline-flex;align-items:center;gap:6px}
.wa-key i{width:10px;height:10px;border-radius:3px;display:inline-block}
.wa-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--t3);font-size:13px}
.wa-empty .empty-i{width:54px;height:54px;opacity:.55}
.wa-thread-hd{display:flex;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--b);flex-shrink:0;background:var(--bg2)}
.wa-msgs{flex:1;overflow-y:auto;min-height:0;padding:16px 15px;display:flex;flex-direction:column;gap:7px}
.wa-bub{max-width:min(74%,520px);padding:8px 11px;border-radius:12px;font-size:13px;line-height:1.5;
  word-break:break-word;white-space:pre-wrap;position:relative}
.wa-bub.in{align-self:flex-start;background:var(--bg3);border:1px solid var(--b);border-end-start-radius:4px}
.wa-bub.out{align-self:flex-end;background:var(--wab);border:1px solid var(--wabr);border-end-end-radius:4px}
.wa-meta{font-size:9.5px;color:var(--t3);margin-top:4px;display:flex;align-items:center;gap:5px;justify-content:flex-end}
.wa-day{align-self:center;font-size:10px;color:var(--t3);background:var(--bg3);border:1px solid var(--b);
  border-radius:20px;padding:2px 11px;margin:6px 0}
.wa-att{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;
  background:var(--bg2);border:1px solid var(--b);border-radius:9px;padding:7px 9px;margin-bottom:5px}
.wa-att svg{width:15px;height:15px;flex-shrink:0;color:var(--wa)}
.wa-img{max-width:100%;border-radius:9px;display:block;margin-bottom:5px}
.wa-composer{padding:11px 15px;border-top:1px solid var(--b);flex-shrink:0;background:var(--bg2)}
/* Call window — a floating panel the user can put wherever they like, not a
   modal: a rep needs to keep reading the customer's record while they talk to
   them. Dragged by its header, resizable from the corner, and able to go
   full-screen. Its position is remembered. */
.wa-call-ov{position:fixed;inset-inline-end:20px;bottom:20px;z-index:1400;
  /* `left`/`top` take over once the window has been dragged (see waCallDrag). */
  width:266px}
.wa-call-card{padding:0;background:var(--bg2);border:1px solid var(--b2);
  border-radius:16px;box-shadow:var(--sh);display:flex;flex-direction:column;overflow:hidden;
  min-width:210px;min-height:150px;height:100%}
/* The grab handle. `cursor:move` all along it, so the whole strip is the target
   rather than a fiddly dot. */
.wa-call-hd{display:flex;align-items:center;gap:6px;padding:7px 8px 7px 11px;
  background:var(--bg3);border-bottom:1px solid var(--b);cursor:move;user-select:none;flex-shrink:0}
.wa-call-hd-t{flex:1;font-size:11px;font-weight:700;color:var(--t2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.wa-call-icon{width:24px;height:24px;border-radius:7px;border:1px solid var(--b2);background:var(--bg2);
  color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.wa-call-icon:hover{color:var(--t);border-color:var(--b3)}
.wa-call-icon svg{width:12px;height:12px}
.wa-call-body{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:16px 14px 14px;overflow:auto}
.wa-call-av{width:54px;height:54px;border-radius:50%;background:var(--wab);border:1px solid var(--wabr);
  color:var(--wa);display:flex;align-items:center;justify-content:center;margin-bottom:10px;flex-shrink:0}
.wa-call-av svg{width:26px;height:26px}
/* A ringing call should catch the eye without being a klaxon. */
#wa-call-overlay:not(.hidden) .wa-call-av{animation:wa-pulse 1.6s ease-in-out infinite}
@keyframes wa-pulse{0%,100%{box-shadow:0 0 0 0 var(--wab)}50%{box-shadow:0 0 0 10px transparent}}
/* Drag from the bottom-right corner. */
.wa-call-grip{position:absolute;inset-inline-end:2px;bottom:2px;width:16px;height:16px;cursor:nwse-resize;
  color:var(--t3);display:flex;align-items:flex-end;justify-content:flex-end;padding:2px}
.wa-call-grip svg{width:10px;height:10px}
/* Collapsed to a WhatsApp bubble — what clicking outside the popup leaves
   behind. Still ringing, still counting, but out of the way of the record you
   were reading. Click it to bring the call back. */
.wa-call-ov.bubble{width:auto!important;height:auto!important}
.wa-call-ov.bubble .wa-call-card{min-width:0;min-height:0;border:none;background:transparent;box-shadow:none}
.wa-call-ov.bubble .wa-call-hd,.wa-call-ov.bubble .wa-call-body,.wa-call-ov.bubble .wa-call-grip{display:none}
.wa-call-bub{display:none;position:relative;width:56px;height:56px;border-radius:50%;
  background:var(--wa);color:#fff;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:var(--sh);border:2px solid var(--bg2)}
.wa-call-ov.bubble .wa-call-bub{display:flex}
.wa-call-bub svg{width:26px;height:26px}
/* The bubble has to say what it is without being opened. */
.wa-call-bub-t{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);
  background:var(--bg2);color:var(--t);border:1px solid var(--b2);border-radius:20px;
  font-size:9.5px;font-weight:700;padding:1px 7px;white-space:nowrap;font-family:var(--mono)}
.wa-call-ov.bubble .wa-call-bub{animation:wa-pulse 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.wa-call-ov.bubble .wa-call-bub{animation:none}}
/* Collapsed to a pill: still there, still counting, out of the way. */
.wa-call-ov.mini{width:auto!important;height:auto!important}
.wa-call-ov.mini .wa-call-body,.wa-call-ov.mini .wa-call-grip{display:none}
.wa-call-ov.mini .wa-call-card{min-height:0;min-width:0;border-radius:24px}
.wa-call-ov.mini .wa-call-hd{border-bottom:none;padding:6px 8px 6px 12px}
/* Full screen. `position:fixed` with the offsets cleared beats the Fullscreen
   API here: it keeps the app's own chrome reachable and needs no permission. */
.wa-call-ov.full{inset:0!important;width:auto!important;height:auto!important;z-index:1500}
.wa-call-ov.full .wa-call-card{border-radius:0;height:100vh}
.wa-call-ov.full .wa-call-grip{display:none}
.wa-call-ov.full .wa-call-av{width:96px;height:96px}
.wa-call-ov.full .wa-call-av svg{width:46px;height:46px}
@media(max-width:520px){
  .wa-call-ov{inset-inline-start:12px!important;inset-inline-end:12px!important;bottom:12px!important;top:auto!important;width:auto!important}
  .wa-call-ov .wa-call-grip{display:none}          /* no room to resize on a phone */
}
/* Recording: a red dot that is impossible to miss, because someone's voice is
   being written to disk. */
.wa-rec-dot{width:8px;height:8px;border-radius:50%;background:var(--rd);flex-shrink:0;
  animation:wa-rec 1.4s ease-in-out infinite}
@keyframes wa-rec{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){
  .wa-rec-dot,#wa-call-overlay:not(.hidden) .wa-call-av{animation:none}
}
.wa-back{display:none}
/* The thread header carries a lot on a narrow screen (back, name, call, CRM
   chip, window badge). Below 620px the call buttons keep their icons and drop
   their words rather than pushing the contact's name off the row. */
@media(max-width:620px){
  #wa-th-call a{padding:5px 7px;gap:0}
  #wa-th-call a span.wa-call-lbl{display:none}
}
@media(max-width:860px){
  /* One pane at a time: the list, or the open thread. */
  .wa-list{width:100%}
  .wa-shell.thread-open .wa-list{display:none}
  .wa-shell:not(.thread-open) .wa-thread{display:none}
  /* Insights is the third "pane" on a phone: 320px of list plus a chart leaves
     room for neither, so it takes the width and its back button returns. */
  .wa-shell.insights-open .wa-list{display:none}
  .wa-back{display:inline-flex}
  .wa-bub{max-width:86%}
  .wa-insights{padding:12px}
  .wa-chart .box{height:200px}
}
/* ── campaign channel: picker cards + badge ───────────────────────────────── */
.chan-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.chan-pick{grid-template-columns:1fr}}
.chan-opt{display:flex;align-items:flex-start;gap:11px;text-align:start;padding:13px 13px 13px 12px;
  background:var(--bg2);border:1.5px solid var(--b2);border-radius:12px;cursor:pointer;position:relative;
  transition:border-color var(--tr),background var(--tr),transform var(--tr),box-shadow var(--tr);font:inherit;color:inherit}
.chan-opt:hover{border-color:var(--b3);transform:translateY(-1px)}
.chan-opt.active{border-color:var(--ac);background:var(--acb);box-shadow:0 0 0 3px var(--acb)}
/* The WhatsApp option turns green when selected, so the chosen channel is
   legible from colour alone and matches the badge the campaign will carry. */
.chan-opt#chan-opt-whatsapp.active{border-color:var(--wa);background:var(--wab);box-shadow:0 0 0 3px var(--wab)}
.chan-opt:disabled{opacity:.5;cursor:not-allowed;transform:none}
.chan-ic{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;
  border:1px solid transparent;border-radius:9px}
.chan-ic svg{width:17px;height:17px}
.chan-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.chan-nm{font-size:13px;font-weight:700;letter-spacing:-.01em}
.chan-sub{font-size:10.5px;line-height:1.4;color:var(--t3)}
.chan-tick{position:absolute;top:9px;inset-inline-end:9px;width:15px;height:15px;opacity:0;color:var(--ac);transition:opacity var(--tr)}
.chan-tick svg{width:100%;height:100%}
.chan-opt.active .chan-tick{opacity:1}
.chan-opt#chan-opt-whatsapp.active .chan-tick{color:var(--wa)}
/* Channel badge shown on campaign cards, the wizard header and the results page */
.chan-badge{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;line-height:1;
  letter-spacing:.02em;padding:3px 8px;border-radius:20px;border:1px solid;white-space:nowrap;flex-shrink:0}
.chan-badge svg{width:10px;height:10px;flex-shrink:0}
.chan-badge.email{color:var(--ac2);background:var(--acb);border-color:var(--acbr)}
.chan-badge.whatsapp{color:var(--wa);background:var(--wab);border-color:var(--wabr)}
/* notification toggle */
.notif-lbl{position:relative;display:inline-block;width:36px;height:20px;cursor:pointer;flex-shrink:0;margin-inline-start:16px}
.ntog-sl{position:absolute;inset:0;border-radius:20px;background:var(--b2);transition:.25s;cursor:pointer}
.ntog-kn{position:absolute;inset-inline-start:2px;top:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:.25s;cursor:pointer}
/* Landscape notification-settings popup: sections side-by-side, card-like rows */
.notif-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;padding:18px 0 6px}
.notif-col{display:flex;flex-direction:column;min-width:0}
.notif-sec-hd{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.notif-sec-hd span{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.notif-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;margin-bottom:8px;background:var(--bg2);border:1px solid var(--b);border-radius:11px;transition:border-color var(--tr),transform var(--tr),box-shadow var(--tr)}
.notif-row:hover{border-color:var(--b2);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.notif-row .nrt{font-size:12.5px;font-weight:600}
.notif-row .nrs{font-size:10.5px;color:var(--t3);margin-top:2px;line-height:1.35}
/* ── Narrow viewports (phone / small tablet) ──────────────────────────────
   The 224px sidebar is most of a phone screen, so below 860px it becomes an
   off-canvas drawer behind a hamburger, and everything else tightens up. */
#side-toggle{display:none}
.side-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:29}
@media(max-width:860px){
  /* dvh, not vh: mobile browsers include the collapsing URL bar in vh, which
     leaves the bottom of the app unreachable. */
  .app{height:100dvh}
  #side-toggle{display:inline-flex}
  .sidebar{position:fixed;inset-inline-start:0;top:0;bottom:0;height:100dvh;width:252px;min-width:252px;
    z-index:30;transform:translateX(-100%);transition:transform var(--tr);box-shadow:var(--sh)}
  .sidebar.open{transform:translateX(0)}
  .side-scrim.on{display:block}
  .topbar{padding:0 12px;gap:8px;min-width:0}
  /* The title yields; the action icons keep their size. Without min-width:0 a
     flex item refuses to shrink below its content and pushes the row off-screen. */
  .topbar>div:first-child{flex:1 1 auto;min-width:0}
  .topbar-r{flex:0 0 auto}
  .content{padding:12px;min-width:0}
  .card{padding:12px;min-width:0}
  .pgtitle{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* The search button keeps its icon; the word and the ⌘K hint go. */
  #crm-search-btn span{display:none}
  #crm-search-btn{padding:0 9px}
  .popup-overlay{padding:10px}
  .popup-box{min-width:0;padding:18px;max-height:92dvh}
  .plans-modal{max-height:94dvh}
  /* Detail views stop reserving desktop gutters. */
  #lead-detail-view>div,#prospect-detail-view>div,#account-detail-view>div,#opp-detail-view>div{max-width:100%!important}
}
@media(max-width:520px){
  /* Five actions plus a title on a ~360px row: shave the icon buttons rather
     than dropping any of them. */
  .topbar-r{gap:4px}
  .topbar-r>button,#crm-search-btn{width:31px!important;height:31px!important;padding:0!important}
  #user-chip{padding:2px 4px 2px 2px}
  #user-chip .av{width:24px;height:24px;font-size:10px}
  .content{padding:10px 8px}
  .card{padding:10px}
}

/* ── Dashboard news ticker ────────────────────────────────────────────────
   One line scrolling LEFT TO RIGHT. The track carries padding-inline-start:100% (one
   container width), so translating it from -100% of its own width to 0 walks
   the text from just off the left edge to just off the right edge. */
.news-bar{display:flex;align-items:center;gap:10px;overflow:hidden;margin-bottom:14px;
  padding:8px 12px;border:1px solid var(--b);border-radius:var(--r);background:var(--bg2)}
.news-ico{flex-shrink:0;display:flex;opacity:.9}
.news-vp{flex:1;min-width:0;overflow:hidden}
.news-track{display:inline-block;white-space:nowrap;padding-inline-start:100%;font-size:12.5px;
  font-weight:600;letter-spacing:.01em;animation:newsLTR var(--news-dur,26s) linear infinite}
@keyframes newsLTR{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.news-bar:hover .news-track{animation-play-state:paused}
/* Dismiss. Sits outside the clipped viewport so the crawling text passes behind
   the edge of the bar, not behind the button. */
.news-x{flex-shrink:0;background:none;border:1px solid transparent;color:var(--t3);
  border-radius:6px;padding:3px 5px;cursor:pointer;display:inline-flex;align-items:center;
  line-height:0;transition:all .15s}
.news-x:hover{background:var(--bg3);border-color:var(--b);color:var(--t)}
.news-x svg{width:13px;height:13px}
@media (prefers-reduced-motion:reduce){
  /* No crawl for anyone who asked for less motion — show the line, still. */
  .news-track{animation:none;padding-inline-start:0;white-space:normal}
}

/* ── Record-list toolbar ──────────────────────────────────────────────────
   One row, always. Controls are sized down so a full filter set fits; if a
   very narrow window still can't take them the row scrolls sideways rather
   than wrapping to a second line. Actions are icon-only (title = the label). */
.tbar{display:flex;flex-wrap:nowrap;gap:8px;align-items:center;overflow-x:auto;padding-bottom:2px}
.tbar::-webkit-scrollbar{height:4px}
.tbar>*{flex-shrink:0}
.tbar input.inp{flex:1 1 200px;min-width:150px;max-width:250px;height:32px;font-size:12px;padding:5px 9px}
.tbar select.inp{flex:0 1 auto;width:auto;max-width:152px;height:32px;font-size:12px;padding:5px 24px 5px 8px}
.tbar .tbar-end{margin-inline-start:auto}
/* ── Searchable select (type-to-filter dropdown) ──────────────────────────
   Upgrades a plain <select> in place: the native control stays in the DOM as
   the value (so every existing onchange handler keeps working) and this is
   what the user sees. The PANEL is appended to <body> and positioned fixed —
   a toolbar scrolls sideways (.tbar) and popups scroll vertically, so a panel
   living inside either gets clipped. */
/* width:auto, NOT 100%. A block element already fills its parent, so the
   explicit 100% bought nothing in a form — while as a flex item it forced
   every dropdown to a full-width bar, stacking filter rows vertically
   (the Pending Tasks filters were one). With auto it fills a block
   container exactly as before and sizes to its content in a flex row,
   which is what .rev-filters and .tbar were each patching by hand. */
.ss{position:relative;display:block;width:auto;min-width:0}
/* The native control is kept (it holds the value and fires the events) but not
   shown. NOT `display:none`: pages hide a filter by toggling .hidden on the
   select itself, and that has to stay readable — see _ssHidden. */
.ss>select{position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;opacity:0;
           pointer-events:none;margin:0;padding:0;border:0;overflow:hidden}
.ss-btn{display:flex;align-items:center;gap:6px;width:100%;text-align:start;cursor:pointer;
        background:var(--bg3);border:1px solid var(--b2);color:var(--t);
        border-radius:var(--rsm);padding:8px 12px;font-size:13px;font-family:var(--font);
        transition:border-color var(--tr)}
.ss-btn:hover{border-color:var(--b3,var(--b2))}
.ss.open .ss-btn{border-color:var(--ac)}
.ss-btn .ss-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-btn .ss-chev{width:13px;height:13px;flex-shrink:0;opacity:.55;fill:none;stroke:currentColor;
                 stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--tr)}
.ss.open .ss-btn .ss-chev{transform:rotate(180deg)}
.ss-btn.ss-placeholder .ss-lbl{color:var(--t3)}
/* Toolbar sizing mirrors `.tbar select.inp`, which no longer matches. */
.tbar .ss{display:inline-block;width:auto;flex:0 1 auto}
/* Rows-per-page. _ssEnhance copies the select's inline style onto the
   WRAPPER, so the 26px height landed there - but the button inside keeps
   the default control height, and the button is what you see. Size that. */
.pager-size .ss{width:auto}
.pager-size .ss-btn{height:26px;min-height:26px;padding:2px 7px;font-size:11.5px;
  border-radius:7px;min-width:54px}
.pager-size .ss-btn .ss-chev{width:12px;height:12px}
.tbar .ss-btn{height:32px;font-size:12px;padding:5px 8px;max-width:152px}
.ss-panel{position:fixed;z-index:9500;background:var(--bg2);border:1px solid var(--b2);
          border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.24);padding:6px;
          display:flex;flex-direction:column;min-width:180px;max-width:min(92vw,420px)}
.ss-panel input.ss-search{width:100%;background:var(--bg3);border:1px solid var(--b2);color:var(--t);
          border-radius:8px;padding:7px 10px;font-size:12.5px;font-family:var(--font);margin-bottom:6px}
/* Short list: the field stays (focused, so type-ahead works and a screen
   reader still announces it) but takes no room. */
.ss-panel.compact input.ss-search{position:absolute;width:1px;height:1px;padding:0;margin:0;
          border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ss-list{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0}
.ss-opt{padding:7px 9px;border-radius:7px;font-size:12.5px;color:var(--t2);cursor:pointer;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-opt:hover,.ss-opt.on{background:var(--bg3);color:var(--t)}
.ss-opt.sel{color:var(--ac2);font-weight:600}
.ss-grp{padding:7px 9px 3px;font-size:10.5px;font-weight:700;letter-spacing:.04em;
        text-transform:uppercase;color:var(--t3)}
.ss-empty{padding:10px 9px;font-size:12px;color:var(--t3)}
/* Square icon-only action button */
.ibtn{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.ibtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Header calendar (month grid + selected-day panel) ────────────────────
   A day carrying meetings/reminders/tasks gets a red dot; clicking it opens
   that day's list underneath, which is the only part that scrolls. */
.cal-nav{display:flex;align-items:center;gap:6px;padding:10px 12px 8px}
.cal-month{flex:1;font-size:12.5px;font-weight:700;letter-spacing:-.01em;text-align:center}
.cal-navbtn{width:26px;height:26px;border-radius:8px;border:1px solid var(--b2);background:var(--bg2);color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background var(--tr),color var(--tr)}
.cal-navbtn:hover{background:var(--bg3);color:var(--t)}
.cal-today-btn{font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:8px;border:1px solid var(--b2);background:var(--bg2);color:var(--t2);cursor:pointer;flex-shrink:0}
.cal-today-btn:hover{background:var(--bg3);color:var(--t)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:0 10px 8px}
.cal-wd{font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--t3);text-align:center;padding:2px 0 4px;text-transform:uppercase}
.cal-day{position:relative;aspect-ratio:1;min-height:30px;display:flex;align-items:center;justify-content:center;font-size:11.5px;border-radius:8px;border:1px solid transparent;color:var(--t2);cursor:pointer;transition:background var(--tr),border-color var(--tr)}
.cal-day:hover{background:var(--bg3)}
.cal-day.out{color:var(--t3);opacity:.42}
.cal-day.today{border-color:var(--acbr);color:var(--t);font-weight:700}
.cal-day.sel{background:var(--ac);border-color:var(--ac);color:#fff;font-weight:700}
.cal-day.sel:hover{background:var(--ac)}
.cal-dot{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--rd)}
.cal-day.sel .cal-dot{background:#fff}
/* The nav and grid keep their size; the day list absorbs whatever height is
   left and scrolls. A fixed max-height here made the panel overflow its own
   dropdown on short screens. */
.cal-nav,.cal-grid{flex-shrink:0}
.cal-panel{border-top:1px solid var(--b);flex:1 1 auto;min-height:120px;overflow-y:auto}
.cal-panel-hd{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);padding:10px 12px 4px;position:sticky;top:0;background:var(--bg2)}
.cal-item{display:flex;gap:9px;padding:8px 12px;border-bottom:1px solid var(--b);align-items:flex-start}
.cal-item.clk{cursor:pointer}
.cal-item.clk:hover{background:var(--ch)}
.cal-bullet{width:7px;height:7px;border-radius:50%;margin-top:5px;flex-shrink:0}
.cal-item-t{font-size:12.5px;line-height:1.35}
.cal-item-m{font-size:10.5px;color:var(--t3);margin-top:2px}
.cal-desc{font-size:11.5px;color:var(--t2);margin-top:5px;padding:6px 9px;background:var(--bg);border:1px solid var(--b);border-radius:8px;white-space:pre-wrap;word-break:break-word;max-height:170px;overflow-y:auto}
.cal-empty{padding:20px 12px;text-align:center;color:var(--t3);font-size:12px}

/* ── Plans / upgrade modal ────────────────────────────────────────────────
   The modal owns the viewport height: header and footer are fixed, and the
   plan grid is the only thing that scrolls. Each card is capped too, with its
   feature list scrolling inside — so a 12-plan catalogue with long feature
   lists can never push the title or the CTAs off-screen. */
.plans-ov{position:fixed;inset:0;z-index:100000;background:rgba(8,8,16,.72);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px}
.plans-modal{background:var(--bg);border:1px solid var(--b2);border-radius:var(--rlg);box-shadow:var(--sh);width:100%;max-width:1060px;max-height:min(900px,90vh);display:flex;flex-direction:column;overflow:hidden}
.plans-hd{flex-shrink:0;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:22px 26px 16px;border-bottom:1px solid var(--b)}
.plans-title{font-size:19px;font-weight:800;letter-spacing:-.025em}
.plans-sub{font-size:12.5px;color:var(--t3);margin-top:5px;line-height:1.55;max-width:74ch}
.plans-body{flex:1;min-height:0;overflow-y:auto;padding:20px 26px 24px}
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:14px;align-items:stretch}
/* Capped so a long feature list scrolls inside the card instead of stretching
   it — and capped against the VIEWPORT too, so on a short laptop screen the
   card never outgrows the modal body and leaves you scrolling two things. */
.plan-card{position:relative;display:flex;flex-direction:column;min-width:0;max-height:min(430px,56vh);border:1.5px solid var(--b2);border-radius:var(--rlg);padding:20px 18px;background:var(--bg2);transition:border-color var(--tr),transform var(--tr),box-shadow var(--tr)}
.plan-card:hover{border-color:var(--b3);transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.14)}
/* The accent wash layers OVER the card surface — listing var(--bg2) second
   keeps a solid base, otherwise the modal background shows through the tint. */
.plan-card.hl{border-color:var(--ac);background:linear-gradient(180deg,var(--acb),transparent 45%),var(--bg2)}
.plan-card.hl:hover{border-color:var(--ac)}
.plan-badge{position:absolute;top:0;inset-inline-end:16px;transform:translateY(-50%);font-size:8.5px;font-weight:800;letter-spacing:.09em;color:#fff;background:var(--ac);padding:3px 9px;border-radius:20px;white-space:nowrap}
.plan-name{font-size:15px;font-weight:700;letter-spacing:-.01em}
.plan-price{display:flex;align-items:baseline;gap:3px;margin:9px 0 2px;flex-wrap:wrap}
.plan-cur{font-size:15px;font-weight:600;color:var(--t2)}
.plan-amt{font-size:30px;font-weight:800;letter-spacing:-.035em;line-height:1.05;word-break:break-word}
.plan-meta{font-size:11px;color:var(--t3);margin-bottom:14px;min-height:15px;line-height:1.4}
/* "From" marks an indicative price on a contact-sales plan — a figure sales
   quotes from, never one anybody is charged. */
.plan-from{font-size:11px;font-weight:600;color:var(--t3);text-transform:uppercase;
  letter-spacing:.04em}
.plan-custom{font-size:20px}
.plan-limits{font-size:11.5px;color:var(--t2);margin:-8px 0 12px;line-height:1.45}
.plan-feats{list-style:none;margin:0;padding:0 6px 2px 0;flex:1;min-height:0;overflow-y:auto}
/* A touch wider/darker than the global 5px bar: inside a card it's the only
   cue that the list continues below. */
.plan-feats::-webkit-scrollbar{width:6px}
.plan-feats::-webkit-scrollbar-thumb{background:var(--b3);border-radius:3px}
.plan-feat{display:flex;gap:7px;align-items:flex-start;padding:4px 0;font-size:12px;color:var(--t2);line-height:1.45}
.plan-feat .ic{color:var(--gr);flex-shrink:0;margin-top:2.5px}
.plan-none{font-size:11.5px;color:var(--t3);font-style:italic;padding:4px 0}
.plan-cta{margin-top:14px;flex-shrink:0}
/* <a> and <button> CTAs must sit on the same baseline — normalize the box so a
   "Contact sales" link can't ride a few px higher than "Subscribe". */
.plan-cta .btn{width:100%;display:flex;align-items:center;justify-content:center;text-decoration:none;min-height:30px}
.plans-ft{flex-shrink:0;padding:14px 26px;border-top:1px solid var(--b);text-align:center;background:var(--bg2)}
.plans-empty{grid-column:1/-1;text-align:center;color:var(--t3);font-size:13px;padding:38px 12px;border:1px dashed var(--b2);border-radius:var(--rlg)}
@media(max-width:600px){
  .plans-ov{padding:10px}
  .plans-hd{padding:18px 18px 14px}
  .plans-body{padding:16px 18px 20px}
  .plans-ft{padding:12px 18px}
  /* Phones: let each card size to its content and scroll the modal instead —
     a capped card plus a capped list is two scrollbars in a tiny space. */
  .plan-card{max-height:none}
  .plan-feats{overflow:visible}
}
/* Modern SMTP field grid — landscape multi-column */
.smtp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.smtp-grid .fg{margin:0;min-width:0}
.smtp-grid .inp{font-size:12.5px}
/* template card */
.st-card{background:var(--bg2);border:1px solid var(--b);border-radius:var(--r);padding:12px 14px;cursor:pointer;transition:border-color var(--tr),box-shadow var(--tr);display:flex;flex-direction:column;gap:0}
.st-card:hover{border-color:var(--acbr);box-shadow:0 2px 12px rgba(0,0,0,.2)}
.st-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.st-card-avatar{width:28px;height:28px;border-radius:7px;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:-.02em}
.st-card-badges{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.st-card-name{font-size:13px;font-weight:600;letter-spacing:-.01em;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-card-desc{font-size:11px;color:var(--t3);margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-card-subject{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;color:var(--t2);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-card-subject span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.cg-list li{position:relative;padding-inline-start:20px;font-size:12px;line-height:1.55;color:var(--t2)}
.cg-list li::before{content:"";position:absolute;inset-inline-start:4px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--ac)}
.cg-list li b{color:var(--t);font-weight:600}
.cg-list li code{background:var(--bg3);border:1px solid var(--b);border-radius:4px;padding:0 4px;font-size:11px}
.st-card-preview{font-size:11px;color:var(--t3);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin-bottom:8px;min-height:0}
.st-card-tags{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.st-tag{background:var(--acb);color:var(--ac2);border:1px solid var(--acbr);border-radius:20px;padding:2px 8px;font-size:10px;font-weight:500}
.st-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:8px;border-top:1px solid var(--b);margin-top:auto;gap:6px;flex-wrap:wrap}
.st-card-owner{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--t3)}
.st-card-owner-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.st-card-actions{display:flex;gap:5px;flex-wrap:wrap}
/* editor */
.st-editor-header{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--b);margin-bottom:22px;flex-wrap:wrap}
.st-editor-body{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
@media(max-width:900px){.st-editor-body{grid-template-columns:1fr}.st-editor-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:16px}}
.st-editor-main{min-width:0;display:flex;flex-direction:column;gap:16px}
.st-editor-card{background:var(--bg2)}
.st-editor-card-title{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px}
.st-hint-bar{background:linear-gradient(135deg,var(--acb),rgba(168,85,247,.08));border:1px solid var(--acbr);border-radius:var(--rsm);padding:8px 12px;font-size:11.5px;color:var(--ac2);margin-bottom:16px;line-height:1.5}
.st-hint-bar code{background:rgba(124,111,255,.2);padding:1px 5px;border-radius:4px;font-family:var(--mono);font-size:10.5px}
.st-editor-sidebar{display:flex;flex-direction:column;gap:16px}
.st-access-card{background:var(--bg2)}
.st-access-public-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--b);margin-bottom:14px;gap:12px}
.st-toggle{position:relative;display:inline-block;width:42px;height:24px;cursor:pointer;flex-shrink:0}
.st-toggle input{opacity:0;width:0;height:0}
.st-toggle-track{position:absolute;inset:0;background:var(--bg4);border-radius:24px;transition:.3s;border:1px solid var(--b2)}
.st-toggle input:checked~.st-toggle-track{background:var(--ac);border-color:var(--ac)}
.st-toggle-knob{position:absolute;inset-inline-start:3px;top:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 1px 4px rgba(0,0,0,.3);pointer-events:none}
.st-toggle input:checked~.st-toggle-knob{inset-inline-start:21px}
.st-access-section-label{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.st-allowed-list{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;min-height:28px}
.st-preview-card{background:var(--bg2)}
.st-preview-subject{font-size:12.5px;font-weight:700;color:var(--t);padding:10px 0;border-bottom:1px solid var(--b);margin-bottom:10px;min-height:36px}
.st-preview-body-wrap{max-height:180px;overflow-y:auto;border-radius:var(--rsm)}
.st-preview-body{font-size:12px;color:var(--t2);line-height:1.7;white-space:pre-wrap;min-height:40px}

/* ══════════════ RIGHT-TO-LEFT (Arabic) ══════════════
   Everything logical properties already handle — margin/padding/border-inline,
   text-align:start|end, inset-inline — is direction-agnostic and needs nothing
   here. What remains is what CSS cannot express logically: `transform` is
   always physical, so slides and knobs must be mirrored explicitly, and a few
   glyphs point the wrong way once the layout flips.
   `dir` is set on <html> by _i18nApply() from the locale registry.

   NB @keyframes cannot be nested inside a selector — each mirrored animation
   needs its own top-level name, and must NOT reuse an existing one or it
   silently redefines the left-to-right animation too.                       */

@keyframes tIn-rtl{from{transform:translateX(-110%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes sk-shimmer-rtl{100%{transform:translateX(-100%)}}

/* Toasts fly in from the inline-end edge, which is the left in RTL. */
[dir="rtl"] .toast{animation-name:tIn-rtl}

/* The mobile drawer parks off the right edge in RTL, not the left.

   MUST stay inside the same 860px query as the rule it mirrors. Written at top
   level it applied at EVERY width, so on desktop the Arabic sidebar was
   translated 100% to the right and pushed clean off the screen — the whole
   navigation, invisible, in one language only. Nothing in the test suite could
   see it; the first browser render did, immediately. */
@media(max-width:860px){
  [dir="rtl"] .sidebar{transform:translateX(100%)}
  [dir="rtl"] .sidebar.open{transform:translateX(0)}
}

/* Content that is still English inside an RTL page must be ISOLATED, or the
   bidi algorithm reorders its neutrals: a trailing full stop jumps to the left
   edge (".Acme Inc", ".organization", ":in Google Cloud") and "Next →" renders
   as "→ Next". The signup wizards carry lang="en" because they are deliberately
   untranslated (see docs/I18N_SCOPE.md); when one is translated, drop the
   attribute and this stops applying to it.

   Only visible in a browser — the text is byte-identical either way. */
[dir="rtl"] [lang="en"]{direction:ltr;text-align:start}

/* Toggle knobs travel the other way, or the switch reads backwards. */
[dir="rtl"] .toggle.on::after{transform:translateX(-18px)}
[dir="rtl"] .stog input:checked ~ .stog-kn{transform:translateX(-18px)}

/* Skeleton shimmer sweeps with the reading direction. */
[dir="rtl"] .sk::after{transform:translateX(100%);animation-name:sk-shimmer-rtl}

/* Hover nudge follows the text. */
[dir="rtl"] .pk-row.tap:hover{transform:translateX(-2px)}

/* No icon mirroring rule here on purpose. The ICONS map holds only vertical
   directional glyphs (chevronDown, arrowUp, arrowDown) and those must NOT flip.
   The horizontal arrows users actually see are characters inside labels
   ("Next: Audience →", "← Back"), and those are flipped in the Arabic strings
   themselves — see camp.next_audience / camp.back_name in ar.json. A blanket
   scaleX(-1) on .ic would mirror clocks, logos and charts as well. */

/* Latin runs embedded in Arabic prose keep their own direction, or an address
   like user@host.com renders with its parts reordered. */
[dir="rtl"] .mono,[dir="rtl"] code,[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],[dir="rtl"] input[type="tel"]{direction:ltr;text-align:end}