/* ============================================================================
   REFINEMENTS — denser, bolder, more deliberate. Structure follows the house
   language used across our consoles: split auth screen, pill navigation, a
   section label beside the wordmark, stat-chip strips, and table cards that
   own their own search / export / pagination.
   ============================================================================ */

/* ---------- Brand lockup ---------- */
/* ── THE BRAND ────────────────────────────────────────────────────────────
   One image, not a tile plus typed text: the lockup is artwork, and rebuilding
   it out of a <div> and a <span> meant its spacing and weight were ours to get
   wrong at every size it appeared.

   Two files because the word is white on dark and near-black on light, and no
   one file is both. Sized by WIDTH — the two differ a little in height, and
   matching on width is what keeps the word the same size when the theme
   changes rather than jumping.

   Swapped here on [data-theme] rather than in JS: the theme toggle should not
   have to remember to touch an <img src>. */
.brand-lock{width:126px;height:auto;display:block;flex-shrink:0}
.brand-light,.brand-mark{display:none}
[data-theme="light"] .brand-dark{display:none}
[data-theme="light"] .brand-light{display:block}
/* Collapsed, there is no room for the word, so the mark stands alone. */
.shell.sb-min .brand-lock{display:none}
.shell.sb-min .brand-mark{display:block;width:30px;height:30px}
/* The icon's rounded corners are PAINTED into the artwork in its own dark
   navy, so they vanish on a dark ground and read as a hard square on a light
   one. Clipping in CSS rounds it on any background, and matches the radius
   already drawn inside it. */
.brand-mark{border-radius:22%}

/* ---------- Split auth screen ----------
   Left: the brand panel, always dark (the product's own colour, not the
   page theme). The logo leads; the headline is a statement, not a poster.
   Right: one sign-in card, centred, with the help line under it and the
   legal line centred at the foot of the page. */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}
.auth-brand{--ab-tx:#eef4fb;--ab-txm:#a9b8cc;--ab-bdr:rgba(148,178,214,.14);
  position:relative;overflow:hidden;display:flex;align-items:center;
  padding:56px clamp(32px,6vw,96px);color:var(--ab-tx);
  background:
    radial-gradient(700px 460px at 0% 0%, rgba(34,211,238,.15), transparent 60%),
    radial-gradient(640px 520px at 100% 100%, rgba(15,154,140,.20), transparent 62%),
    linear-gradient(165deg,#0b1626 0%,#070c15 72%)}
.auth-brand::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(rgba(148,178,214,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,178,214,.06) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 80% 70% at 30% 40%,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 30% 40%,#000 30%,transparent 80%)}
.auth-brand>*{position:relative;z-index:1}
.auth-brand .brand-light,.auth-brand .brand-mark{display:none!important}
.auth-brand .brand-dark{display:block!important}
.auth-mid{max-width:500px}
.auth-lock{margin-bottom:44px}
.auth-lock .brand-lock{width:236px;height:auto}
.auth-h{font-size:clamp(26px,2.4vw,32px);font-weight:650;line-height:1.22;letter-spacing:-.025em;
  margin-bottom:16px;text-wrap:balance}
.auth-h .l2{display:block;color:#5fd9ea}
.auth-p{font-size:15.5px;color:var(--ab-txm);line-height:1.7;max-width:46ch;margin-bottom:36px}
.auth-feat{display:grid;gap:20px;padding-top:28px;border-top:1px solid var(--ab-bdr)}
.auth-feat .af{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start}
.auth-feat .af-i{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#5fd9ea;
  background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.2)}
.auth-feat .af-t{font-size:15px;font-weight:600;margin:1px 0 3px;color:var(--ab-tx)}
.auth-feat .af-d{font-size:14px;color:var(--ab-txm);line-height:1.6}

.auth-form{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 32px 72px;
  background:
    radial-gradient(520px 380px at 50% 46%, color-mix(in srgb,var(--accent) 7%,transparent), transparent 70%),
    var(--bg)}
.auth-col{width:100%;max-width:420px;display:flex;flex-direction:column;gap:20px}
.auth-box{position:relative;padding:40px 40px 34px;border-radius:20px;text-align:center;
  background:linear-gradient(180deg,color-mix(in srgb,var(--card) 92%,var(--accent) 8%),var(--card) 38%);
  border:1px solid var(--bdr);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 24px 60px -24px rgba(0,0,0,.55)}
/* A hairline of the brand across the top edge. */
.auth-box::before{content:'';position:absolute;left:24px;right:24px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 70%,transparent),transparent)}
.auth-mark{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:16px;margin-bottom:20px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent)}
.auth-mark img{width:36px;height:36px;border-radius:22%}
.auth-mlock{display:none;margin-bottom:24px}
.auth-mlock .brand-lock{width:150px;margin:0 auto}
.auth-box h2{font-size:26px;font-weight:700;letter-spacing:-.025em;margin-bottom:8px}
.auth-box .sub{font-size:14.5px;color:var(--txm);line-height:1.6;margin-bottom:28px}
.fld{margin-bottom:16px;text-align:left}
.fld label{display:block;font-size:12.5px;font-weight:600;color:var(--txm);margin-bottom:7px}
.fld .wrap{position:relative;display:flex;align-items:center}
.fld .wrap .ic{position:absolute;left:13px;color:var(--txd);font-size:14px;pointer-events:none}
.fld input{width:100%;padding:12px 14px 12px 40px;border-radius:var(--r-md);border:1px solid var(--bdr);
  background:var(--ibg);color:var(--tx);font-size:14.5px;outline:none;transition:border-color .15s,box-shadow .15s}
.fld input:focus{border-color:var(--accent);box-shadow:var(--ring)}
.auth-btn{width:100%;padding:13px 16px;border-radius:12px;border:none;cursor:pointer;
  font-size:15px;font-weight:600;color:#04121a;margin-top:4px;
  background:linear-gradient(135deg,var(--accent-h),var(--brand-2));
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 26%,transparent);
  transition:filter .15s,transform .08s,box-shadow .15s}
.auth-btn:hover{filter:brightness(1.06)}
.auth-btn:active{transform:translateY(1px)}
.auth-btn.ghost{background:var(--ibg);border:1px solid var(--bdr-str);color:var(--tx);box-shadow:none;
  margin-top:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:13px 16px}
.auth-btn.ghost:hover{border-color:var(--accent);background:var(--card-h);filter:none}
.auth-sep{display:flex;align-items:center;gap:14px;margin:22px 0 12px;color:var(--txd);font-size:12px}
.auth-sep::before,.auth-sep::after{content:'';flex:1;height:1px;background:var(--bdr)}
.auth-admin summary{list-style:none;cursor:pointer;text-align:center;font-size:13.5px;color:var(--txm);
  padding:6px;border-radius:var(--r-sm)}
.auth-admin summary::-webkit-details-marker{display:none}
.auth-admin summary:hover{color:var(--tx)}
.auth-err{color:var(--red);font-size:13px;text-align:center}
.auth-err:not(:empty){margin-top:14px}
.auth-help{text-align:center;font-size:13px;color:var(--txd);line-height:1.6}
.auth-copy{position:absolute;left:0;right:0;bottom:24px;text-align:center;font-size:12px;color:var(--txd)}
@media(max-width:980px){
  .auth{grid-template-columns:1fr}
  .auth-brand{display:none}
  .auth-mlock{display:block}
  .auth-mark{display:none}
}
@media(max-width:460px){.auth-form{padding:24px 16px 64px}.auth-box{padding:30px 22px 26px}}

/* ---------- Header ---------- */
.hd{height:64px;gap:var(--sp4)}
.seclabel{font-size:13.5px;color:var(--txd);font-weight:500;padding-left:var(--sp4);
  border-left:1px solid var(--bdr);white-space:nowrap}
.navpills{display:flex;gap:var(--sp1);align-items:center}
.navpills button{padding:9px 17px;border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;
  font-size:14px;font-weight:600;background:transparent;color:var(--txm);white-space:nowrap;
  transition:all .15s;display:inline-flex;align-items:center;gap:7px}
.navpills button:hover{color:var(--tx);background:var(--card-h)}
.navpills button.active{background:var(--bg-alt);color:var(--tx);border-color:var(--bdr-str);font-weight:550}
.userblk{display:flex;align-items:center;gap:10px;padding:4px 4px 4px 10px;border-radius:var(--r-md);
  cursor:pointer;background:transparent;border:none;transition:background .15s}
.userblk:hover{background:var(--card-h)}
.userblk{cursor:default}
.userblk:hover{background:transparent}
.userblk .ub-t{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  text-align:right;line-height:1.3;gap:1px}
.userblk .ub-n{display:block;font-size:13.5px;font-weight:550;color:var(--tx);white-space:nowrap}
.userblk .ub-r{display:block;font-size:11.5px;color:var(--txd);white-space:nowrap;text-transform:capitalize}
.userblk .ub-a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  font-size:12.5px;font-weight:600;color:#04121a;
  background:linear-gradient(140deg,var(--accent-h),var(--brand-2))}
.hbtn{padding:9px 15px;border-radius:var(--r-md);border:1px solid var(--bdr);background:transparent;
  color:var(--txm);font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s;
  display:inline-flex;align-items:center;gap:7px}
.hbtn:hover{border-color:var(--bdr-str);color:var(--tx);background:var(--card-h)}
.hbtn.danger:hover{border-color:var(--red);color:var(--red)}

/* ---------- Page header + stat chips ---------- */
.phd{padding:var(--sp6) 0 var(--sp4);border-bottom:none;margin-bottom:var(--sp3)}
.phd-t{font-size:30px;font-weight:700;letter-spacing:-.035em}
.phd-d{font-size:14.5px;color:var(--txm);margin-top:7px}
.chips{display:flex;gap:var(--sp2);flex-wrap:wrap;margin-bottom:var(--sp5)}
.chip{display:inline-flex;align-items:baseline;gap:7px;padding:8px 15px;border-radius:999px;
  background:var(--card);border:1px solid var(--bdr);font-size:14px;font-weight:600;white-space:nowrap}
.chip .ck{font-size:12.5px;font-weight:500;color:var(--txd)}

/* ---------- Table card ---------- */
.tcard{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-lg);
  box-shadow:var(--shadow);overflow:hidden}
.tcard-hd{display:flex;align-items:center;gap:var(--sp3);padding:var(--sp4) var(--sp5);flex-wrap:wrap}
.tsearch{position:relative;display:flex;align-items:center;flex:0 1 380px;min-width:220px}
.tsearch .ic{position:absolute;left:13px;color:var(--txd);font-size:13px;pointer-events:none}
.tsearch input{width:100%;padding:10px 13px 10px 36px;border-radius:var(--r-md);border:1px solid var(--bdr);
  background:var(--ibg);color:var(--tx);font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s}
.tsearch input:focus{border-color:var(--accent);box-shadow:var(--ring)}
.trows{font-size:13px;color:var(--txd);white-space:nowrap}
.tcard table{font-size:14px}
.tcard thead th{padding:var(--sp3) var(--sp5);font-size:11.5px;letter-spacing:.09em;background:transparent}
.tcard tbody td{padding:var(--sp4) var(--sp5)}
.tcard tbody tr{cursor:pointer}
.pager{display:flex;align-items:center;justify-content:space-between;gap:var(--sp3);
  padding:var(--sp4) var(--sp5);flex-wrap:wrap;border-top:1px solid var(--bdr)}
.pager .pinfo{font-size:13px;color:var(--txd)}
.pager .pctl{display:flex;align-items:center;gap:var(--sp2)}
.pager select{padding:7px 10px;border-radius:var(--r-sm);border:1px solid var(--bdr);background:var(--ibg);
  color:var(--tx);font-size:13px;outline:none}
.pager .pb{min-width:34px;height:34px;padding:0 9px;display:grid;place-items:center;border-radius:var(--r-sm);
  border:1px solid var(--bdr);background:transparent;color:var(--txm);cursor:pointer;font-size:13px;
  transition:all .15s}
.pager .pb:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.pager .pb:disabled{opacity:.35;cursor:not-allowed}
.pager .pb.active{background:linear-gradient(135deg,var(--accent-h),var(--brand-2));color:#04121a;
  border-color:transparent;font-weight:600}

/* ---------- Filter bar ---------- */
.filters{display:flex;gap:var(--sp2);flex-wrap:wrap;align-items:center;margin-bottom:var(--sp4)}
.fsel{position:relative;flex:0 1 190px;min-width:150px}
.fsel select{width:100%;padding:11px 14px;border-radius:var(--r-md);border:1px solid var(--bdr);
  background:var(--card);color:var(--tx);font-size:13.5px;outline:none;cursor:pointer;
  appearance:none;transition:border-color .15s}
.fsel select:hover{border-color:var(--bdr-str)}
.fsel select:focus{border-color:var(--accent);box-shadow:var(--ring)}
.fsel::after{content:'▾';position:absolute;right:13px;top:50%;transform:translateY(-50%);
  color:var(--txd);pointer-events:none;font-size:11px}

/* ---------- Sub navigation ---------- */
.subtabs{display:flex;gap:var(--sp1);margin-bottom:var(--sp5);border-bottom:1px solid var(--bdr);
  padding-bottom:0;flex-wrap:wrap}
.subtabs button{padding:10px 17px;border:none;background:transparent;color:var(--txm);cursor:pointer;
  font-size:14px;font-weight:600;border-radius:var(--r-md) var(--r-md) 0 0;position:relative;
  transition:all .15s}
.subtabs button:hover{color:var(--tx);background:var(--card-h)}
.subtabs button.active{color:var(--tx);background:var(--bg-alt)}
.subtabs button.active::after{content:'';position:absolute;left:var(--sp3);right:var(--sp3);bottom:-1px;
  height:2px;background:var(--accent);border-radius:2px}

/* ---------- Section card (settings-style) ---------- */
.scard{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:var(--sp5);
  box-shadow:var(--shadow)}
.scard-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp4);
  margin-bottom:var(--sp4);flex-wrap:wrap}
.scard-t{font-size:17px;font-weight:600;letter-spacing:-.02em}
.scard-d{font-size:13.5px;color:var(--txm);margin-top:5px;line-height:1.6;max-width:70ch}
.drow{display:flex;align-items:center;justify-content:space-between;gap:var(--sp4);
  padding:var(--sp3) 0;border-bottom:1px solid var(--bdr)}
.drow:last-child{border-bottom:none}
.drow .dk{font-size:14px;color:var(--txm)}
.drow .dv{font-size:14px;font-weight:600}

/* Bigger KPI cards to match the heavier type scale */
.mc{padding:var(--sp5);border-radius:var(--r-lg)}
.mc .ml{font-size:11.5px;letter-spacing:.1em}
.mc .mv{font-size:34px}
.mc .mv .unit{font-size:15px;font-weight:600;color:var(--txm);margin-left:3px}
.mc .ms{font-size:12.5px;margin-top:7px}
.pn{border-radius:var(--r-lg);padding:var(--sp5)}
.pt{font-size:16px;font-weight:600}


/* ---------- Two-row header ----------
   One row could not hold logo + workspace + 5 tabs + product toggle + user +
   two buttons without colliding. Context on top, navigation beneath it. */
.hd{height:60px;padding:0 var(--sp5);gap:var(--sp3)}
.hd .hl{gap:var(--sp3);flex:1;min-width:0}
.hd .hr{gap:var(--sp2);flex-shrink:0}
.navbar{border-bottom:1px solid var(--bdr);background:var(--card);position:sticky;top:60px;
  z-index:590;padding:0 var(--sp5)}
.navbar-in{display:flex;align-items:center;gap:var(--sp4);max-width:1560px;margin:0 auto;
  min-height:52px;overflow-x:auto}
.navbar-in .navpills{flex:1;min-width:0}
.navbar-in .si{margin-left:auto;flex-shrink:0;font-size:12px}
.seclabel{padding-left:var(--sp3);margin-left:var(--sp1)}
@media(max-width:1240px){.seclabel{display:none}}
@media(max-width:1080px){.userblk .ub-t{display:none}}
@media(max-width:900px){
  .hd{height:auto;padding:var(--sp3) var(--sp4);flex-wrap:wrap;position:static}
  .navbar{position:static;padding:0 var(--sp4)}
}

/* ---------- Balanced overview grid ----------
   Cards previously stacked in two independent columns of unequal length, which
   left a ragged gap under the shorter one. Pairing them row by row keeps every
   section aligned. */
.orow{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp4);align-items:stretch;margin-bottom:var(--sp4)}
.orow>.pn{display:flex;flex-direction:column}
.orow>.pn>.obody{flex:1}
@media(max-width:980px){.orow{grid-template-columns:1fr}}
.ostrip{display:flex;align-items:center;justify-content:space-between;gap:var(--sp5);flex-wrap:wrap}
.ostrip .on{font-size:38px;font-weight:700;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}

/* ---------- Workspace mark ----------
   Emoji were the wrong call: they render at different sizes per platform, sit
   on different baselines, and read as informal. A monogram in the workspace's
   own accent is consistent, scales cleanly and looks deliberate. */
.wmark{display:grid;place-items:center;flex-shrink:0;font-weight:600;
  letter-spacing:-.02em;line-height:1;text-transform:uppercase;
  border-radius:9px;color:var(--wm,var(--accent));
  background:color-mix(in srgb,var(--wm,var(--accent)) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--wm,var(--accent)) 28%,transparent)}
.wmark.s{width:26px;height:26px;font-size:11px;border-radius:8px}
.wmark.m{width:34px;height:34px;font-size:13.5px}
.wmark.l{width:44px;height:44px;font-size:17px;border-radius:12px}

/* Dropdown rows on a strict grid so nothing shifts with content length. */
.wsw-menu{min-width:340px;padding:var(--sp2)}
.wsw-item{display:grid;grid-template-columns:34px 1fr auto;align-items:center;
  gap:var(--sp3);padding:10px var(--sp3);text-align:left}
.wsw-item .wnm{font-size:13.5px;font-weight:600;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsw-item .wtg{font-size:12px;color:var(--txd);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsw-item.soon{opacity:.55}
.wsw-menu .wsh{font-size:10.5px;letter-spacing:.1em;padding:var(--sp3) var(--sp3) var(--sp2)}
.wsw-btn{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:10px;padding:6px 11px 6px 7px}

/* ---------- Workspace chooser ----------
   A SECOND COPY OF THE CHOOSER LIVED HERE and, loading later, won.
   It was written for an earlier markup shape: its `.wpick-bar{display:flex}`
   flexed the BAR, when the bar now holds an inner band (.wpick-bar-in) that
   does the flexing. Making the bar a flex container turned that band into a
   flex item, which shrink-wraps — so the lockup and the sign-out controls
   huddled in the middle of the screen while the content below sat on a
   1060px measure they no longer lined up with.

   Everything about these screens is in 04-picker.css now, which is where it
   was always described. The values worth keeping from this copy went with it:
   the 1060px measure, the 32px heading, the tighter eyebrow.

   The workspace-card and "planned workspaces" rules here were the same story
   and moved with them. */

/* ---------- Button colour inheritance ----------
   A <button> does not inherit `color` from its parent — user agents apply their
   own (near-black) default. Anything styled as a button but not given an
   explicit colour was therefore rendering dark-on-dark: the workspace card
   titles, and any hover state that only changed the background.
   Set the baseline once here; specific classes still override it. */
button{color:inherit}
.wcard,.wsoon-row,.wsw-item,.userblk{color:var(--tx)}
.wcard .wc-n{color:var(--tx)}
.wcard .wc-d{color:var(--txm)}

/* Hover should lift, never sink. --card-h is the lighter step, so state it
   explicitly rather than relying on inheritance. */
.btn:hover{background:var(--card-h);color:var(--accent);border-color:var(--accent)}

/* Every variant that paints its own background must repaint it on hover.
   `.btn:hover` is one class plus a pseudo-class, so it outranks the plain
   `.btn-p` that sets the gradient — meaning hovering a primary button replaced
   its gradient with the flat card-hover grey and the button appeared to go
   dark. Restating the background here is what keeps it lit; the brightness
   filter is then the only thing that changes. */
.btn-p{color:#04121a}
.btn-p:hover{background:linear-gradient(135deg,var(--accent-h),var(--brand-2));
  color:#04121a;filter:brightness(1.08);border-color:transparent}
.btn-a:hover{background:color-mix(in srgb,var(--accent) 18%,transparent);
  color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.btn-w:hover{background:color-mix(in srgb,var(--amber) 18%,transparent);
  color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent)}
.hbtn:hover{background:var(--card-h);color:var(--tx)}
.hbtn.danger:hover{background:color-mix(in srgb,var(--red) 10%,transparent);color:var(--red);border-color:var(--red)}
.opm-close:hover{background:color-mix(in srgb,var(--red) 10%,transparent)}
.navpills button:hover{background:var(--card-h);color:var(--tx)}
.subnav button:hover,.subtabs button:hover{background:var(--card-h);color:var(--tx)}
.pager .pb:hover:not(:disabled){background:var(--card-h)}

/* One footer per screen. The sign-in screen fills the viewport and carries its
   own copyright inside the panel, so the global footer is suppressed there
   rather than stranded below the fold. */
body.auth-screen .pg-footer{display:none}

/* ===================== PIPELINE FLOW (Activity → Pipeline runs) =============
   Twelve buttons became three numbered steps. The number carries the order, so
   nothing has to be read left-to-right to know what runs first — which is what
   made the old grid a puzzle for anyone who had not built the pipeline. */
.flow{display:flex;flex-direction:column;gap:8px;margin-top:var(--sp2)}
.flow-step{display:flex;align-items:flex-start;gap:var(--sp3);padding:var(--sp3) var(--sp4);
  background:var(--bg-alt);border:1px solid var(--bdr);border-radius:var(--r-md);
  transition:border-color .18s,background .18s}
.flow-step.is-running{border-color:color-mix(in srgb,var(--amber) 35%,transparent);
  background:color-mix(in srgb,var(--amber) 5%,transparent)}
.flow-n{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;
  font-variant-numeric:tabular-nums;margin-top:1px}
.flow-body{flex:1;min-width:0}
.flow-t{font-size:13.5px;font-weight:600;color:var(--tx);display:flex;align-items:center;
  gap:8px;flex-wrap:wrap;margin-bottom:3px}
/* The one thing a salesperson must not miss before clicking. */
.flow-cost{font-size:11px;font-weight:600;letter-spacing:.03em;padding:2px 7px;border-radius:20px;
  background:color-mix(in srgb,var(--amber) 13%,transparent);color:var(--amber);
  border:1px solid color-mix(in srgb,var(--amber) 30%,transparent)}
.flow-d{font-size:12.5px;color:var(--txm);line-height:1.5}
.flow-status{margin-top:6px;font-size:12.5px}
/* AI Personalize, on the campaign row it acts on. Styled as an action rather
   than left as bare text: it spends money per prospect, so it should not read
   like a label sitting next to the delete icon. */
.camp-ai{cursor:pointer;color:var(--accent);font-size:12px;font-weight:600;
  white-space:nowrap;margin-right:10px;padding:3px 8px;border-radius:5px;
  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
.camp-ai:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.flow-act{flex:none;display:flex;align-items:center;min-height:30px}
.flow-go{white-space:nowrap}
/* A composite's own stages, so one click still shows which part is running. */
.flow-substeps{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:7px}
.flow-sub{font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:720px){
  .flow-step{flex-wrap:wrap}
  .flow-act{width:100%;padding-left:38px}
  .flow-go{width:100%;justify-content:center}
}
/* --- the escape hatch, closed by default --- */
.adv{margin-top:var(--sp4);border-top:1px dashed var(--bdr);padding-top:var(--sp3)}
.adv summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--txd);
  letter-spacing:.04em;list-style:none;user-select:none;display:inline-flex;align-items:center;gap:6px}
.adv summary::-webkit-details-marker{display:none}
.adv summary::before{content:'▸';transition:transform .15s;display:inline-block}
.adv[open] summary::before{transform:rotate(90deg)}
.adv summary:hover{color:var(--accent)}
.adv-note{font-size:11.5px;color:var(--txd);margin:8px 0 10px;line-height:1.5}
.adv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:6px}
.mini-stage{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 10px;border:1px solid var(--bdr);border-radius:var(--r-sm);background:transparent;
  color:var(--txm);font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;
  text-align:left;transition:all .15s}
.mini-stage:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.mini-stage:disabled{opacity:.55;cursor:not-allowed}

/* ===================== SEND GATE ===========================================
   The only control in the app that reaches real people, so it reads as one
   sentence — what mode, what that means — rather than a label to decode. */
/* Where a create button would be, when there is no focus to create under.
   A sentence rather than a disabled button: a disabled control invites you to
   hunt for what would enable it, and the answer here is one word long. */
.ro-hint{font-size:12.5px;color:var(--txd);white-space:nowrap}

/* ── The send gate, as a pill ─────────────────────────────────────────────
   It was a full-width banner: coloured left rule, icon, title, a sentence and
   the switch, above the campaign list on every render. It is a STATUS, and a
   status that reads the same every day does not earn a block of the page.
   Small, on the right, still coloured — because the one moment it matters is
   the moment it says Live. */
.gate-mini{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.gate-mini-d{width:7px;height:7px;border-radius:50%;background:var(--gc);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gc) 18%,transparent)}
.gate-mini-t{font-size:11.5px;font-weight:700;color:var(--gc);letter-spacing:.02em;
  text-transform:none}
.gate-mini.load{font-size:11.5px;color:var(--txd);text-transform:none;font-weight:500}
.gate-sw{display:flex;gap:3px;background:var(--ibg);border:1px solid var(--bdr);
  border-radius:7px;padding:2px}
.gate-btn{padding:3px 9px;border-radius:5px;border:1px solid transparent;background:transparent;
  color:var(--txd);font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;
  letter-spacing:.01em;text-transform:none;white-space:nowrap}
.gate-btn:hover:not(.on){color:var(--tx);background:var(--card-h)}

.gate-warn{margin-top:7px;font-size:12px;color:var(--red);line-height:1.5}

/* ===================== SEND A CAMPAIGN ===================================== */
.oc .oc-n{background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal);
  border-color:color-mix(in srgb,var(--teal) 32%,transparent)}
.oc .who-n{color:var(--teal);font-size:14px;font-variant-numeric:tabular-nums}
.oc .who-n.warn{color:var(--amber)}
.oc-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:9px}
.oc-controls input{background:var(--ibg);color:var(--tx);border:1px solid var(--bdr);
  border-radius:var(--r-sm);font-size:12.5px;padding:6px 9px;outline:none;font-family:inherit}
.oc-controls input:focus{border-color:var(--accent);box-shadow:var(--ring)}
.oc-controls>input{flex:1;min-width:170px}
.oc-controls label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--txd);
  white-space:nowrap}
.oc-controls label input{width:58px;text-align:center;font-variant-numeric:tabular-nums}
.oc .flow-act{flex-direction:column;align-items:stretch;gap:6px}
/* The benchmark, stated beside the panel title. Not editable here: it belongs
   to the offering, and nudging it on the way to creating one campaign is how
   it stopped being one number. */
.oc-bench{margin-left:10px;font-size:11.5px;font-weight:500;color:var(--txd);
  letter-spacing:.01em;text-transform:none}

/* ===================== THE BENCHMARK, IN SETTINGS ========================== */
.bm-sep{height:1px;background:var(--bdr);margin:var(--sp5) 0 var(--sp4)}
.bm-counts{display:flex;gap:var(--sp4);flex-wrap:wrap}
.bm-c{flex:1;min-width:190px;border:1px solid var(--bdr);border-radius:var(--r-md);
  padding:var(--sp3) var(--sp4);background:var(--ibg)}
.bm-c b{display:block;font-size:26px;line-height:1.15;color:var(--teal);
  font-variant-numeric:tabular-nums}
.bm-c b.warn{color:var(--amber)}
.bm-c span{display:block;font-size:12.5px;font-weight:600;color:var(--tx);margin-top:2px}
.bm-c em{display:block;font-style:normal;font-size:12px;color:var(--txd);margin-top:3px;
  line-height:1.5}
.bm-act{display:flex;align-items:center;gap:var(--sp3);flex-wrap:wrap;margin-top:var(--sp4)}
/* What it costs, beside the button that spends it — not in a tooltip, and not
   only in the dialog that follows. */
.bm-cost{flex:1;min-width:220px;font-size:12px;color:var(--txd);line-height:1.5}
/* Live is the one state worth showing on the step itself — it is the moment
   the button stops being a rehearsal. */
.oc .flow-step.is-live{border-color:color-mix(in srgb,var(--red) 32%,transparent);
  background:color-mix(in srgb,var(--red) 5%,transparent)}
.oc .flow-step.is-live .oc-n{background:color-mix(in srgb,var(--red) 14%,transparent);
  color:var(--red);border-color:color-mix(in srgb,var(--red) 32%,transparent)}

/* ===================== BREADCRUMB =========================================
   Every cross-screen jump ("Open Data Sources", "View the emails") used to be
   one-way: the tab row shows where you are, never where you came from. */
.crumb{display:inline-flex;align-items:center;gap:6px;margin-bottom:var(--sp3);
  padding:5px 11px;border-radius:var(--r-sm);border:1px solid var(--bdr);
  background:transparent;color:var(--txm);font-size:12.5px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all .15s}
.crumb:hover{border-color:var(--accent);color:var(--accent);background:var(--card-h)}

/* ===================== THE RUN PANEL'S FOOTER =============================
   The two places you go BEFORE and AFTER the one button: where companies
   come from, and where they get written to. Links rather than buttons —
   nothing here runs anything, and a row of equal-weight buttons under a
   primary one is what the four-button flow looked like. */
.run-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  margin-top:var(--sp3);padding-top:var(--sp3);border-top:1px dashed var(--bdr);
  font-size:12px;color:var(--txd)}
.run-foot .lk{background:none;border:0;padding:0;font-family:inherit;
  font-size:12px;font-weight:600;color:var(--accent);cursor:pointer}
.run-foot .lk:hover{text-decoration:underline}

/* One line under the button: what there is to run on. Not a metric card —
   a card would make it look like a reading of the result, and every reading
   of the result is on Pipeline. */
.run-have{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  margin-top:var(--sp3);padding:11px 14px;border:1px solid var(--bdr);
  border-radius:var(--r-md);background:var(--card);
  font-size:12.5px;color:var(--txm)}
.run-have b{color:var(--tx);font-weight:650;font-variant-numeric:tabular-nums}
.run-have .lk{margin-left:auto;background:none;border:0;padding:0;
  font-family:inherit;font-size:12px;font-weight:600;color:var(--accent);
  cursor:pointer}
.run-have .lk:hover{text-decoration:underline}

/* ===================== PROSPECT VIEWS =====================================
   Two questions decide a salesperson's day — is this worth calling, and can I
   call them — and neither was answerable from a single dropdown. They are the
   tabs now; everything else is a refinement, behind a disclosure. */
.pfilters{margin-bottom:var(--sp4)}
/* Companies uses the same `.views` tabs as Contacts now. The pill group it
   had before was a second shape for the same idea, and two shapes for one
   idea is how people come to believe they are two ideas. */
.pfilters .views{margin-bottom:var(--sp3)}
.vtabs{display:inline-flex;gap:3px;background:var(--ibg);border:1px solid var(--bdr);
  border-radius:var(--r-md);padding:3px}
.vtab{padding:7px 16px;border-radius:var(--r-sm);border:none;background:transparent;
  color:var(--txd);font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:all .15s;white-space:nowrap}
.vtab:hover:not(.on){color:var(--tx);background:var(--card-h)}
.vtab.on{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
/* What is narrowing the list, and how to undo it. A filter you cannot see is
   an empty screen with no explanation. */
.fchips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.fchip{padding:3px 9px;border-radius:20px;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);
  font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.fchip:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.fchip.clear{border-color:var(--bdr);background:transparent;color:var(--txd)}
.fchip.clear:hover{border-color:var(--red);color:var(--red);background:transparent}
.more{margin-top:10px}
.more summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--txd);list-style:none;
  user-select:none;display:inline-flex;align-items:center;gap:6px}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:'▸';transition:transform .15s;display:inline-block}
.more[open] summary::before{transform:rotate(90deg)}
.more summary:hover{color:var(--accent)}
.more .filters{margin-top:9px}
/* ===================== OUTCOME BAR =========================================
   One line at the top of a company's detail. The only control here whose value
   compounds: every scoring weight is currently a judgement, and these are what
   eventually replace the argument with evidence. Kept to three buttons because
   a form asking for five fields is how a habit dies in week two. */
.ocbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px var(--sp4);border:1px dashed var(--bdr);border-radius:var(--r-md);
  background:var(--bg-alt);margin-bottom:var(--sp3)}
.ocbar-t{font-size:12.5px;font-weight:600;color:var(--tx);white-space:nowrap}
.ocbar-h{font-size:11.5px;color:var(--txd);line-height:1.4}
.ocbar-b{margin-left:auto;display:flex;gap:5px}
.oc-btn{padding:5px 13px;border-radius:var(--r-sm);border:1px solid var(--bdr);
  background:transparent;color:var(--txm);font-size:12.5px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.oc-btn:hover:not(.on){border-color:var(--bdr-str);color:var(--tx);background:var(--card-h)}
@media(max-width:640px){.ocbar-b{margin-left:0;width:100%}.oc-btn{flex:1}}

/* A score's age, shown only once it is old enough to matter. A badge on every
   row is noise, and noise is what people learn to stop reading. */
.stale{font-size:10px;font-weight:600;color:var(--txd);letter-spacing:.02em;
  margin-top:2px;white-space:nowrap;font-family:'Inter',sans-serif}
.stale.warn{color:var(--amber)}
/* Stopping a running job is a real decision, so it reads as one. */
.btn-cancel-job{border-color:color-mix(in srgb,var(--red) 35%,transparent);color:var(--red)}
.btn-cancel-job:hover:not(:disabled){border-color:var(--red);color:var(--red);
  background:color-mix(in srgb,var(--red) 12%,transparent)}

/* ---------- Preview & edit: the generated emails, before they send ----------
   A review screen that can only be read puts a problem in front of somebody
   with no way to fix it. AI writes 78 openers and some will be wrong, so the
   subject and body are inputs, and each card saves on its own — 78 emails is
   too many to hold behind one Save-all button that could half-fail. */
.air-box{background:var(--card);border:1px solid var(--bdr);border-radius:14px;
  width:100%;max-width:760px;max-height:88vh;display:flex;flex-direction:column;
  box-shadow:0 24px 70px rgba(0,0,0,.5)}
.air-hd{display:flex;align-items:flex-start;gap:var(--sp3);
  padding:var(--sp5) var(--sp5) var(--sp3);border-bottom:1px solid var(--bdr)}
.air-t{font-size:17px;font-weight:650;letter-spacing:-.02em}
.air-s{font-size:13px;color:var(--txd);margin-top:2px}
.air-body{overflow-y:auto;padding:var(--sp4) var(--sp5) var(--sp5)}
.air-count{font-size:13px;color:var(--txd);margin-bottom:var(--sp4);line-height:1.5}
.air-card{border:1px solid var(--bdr);border-radius:10px;padding:13px 15px;
  margin-bottom:12px;background:var(--bg)}
.air-co{font-size:13.5px;font-weight:600}
.air-meta{font-size:12.5px;color:var(--txd);font-weight:400}
.air-to{font-size:12.5px;color:var(--txd);margin:2px 0 10px}
.air-sub,.air-txt{width:100%;padding:9px 11px;border-radius:7px;
  border:1px solid var(--bdr);background:var(--ibg);color:var(--tx);
  font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
.air-sub{font-size:13.5px;font-weight:600;margin-bottom:8px}
.air-txt{font-size:13px;line-height:1.6;resize:vertical;min-height:140px}
.air-sub:focus,.air-txt:focus{border-color:var(--accent);box-shadow:var(--ring)}
.air-sub-ro{font-size:13.5px;font-weight:600;margin-bottom:6px}
.air-body-ro{font-size:13px;line-height:1.6;white-space:pre-wrap;color:var(--txm)}
.air-note{font-size:12px;color:var(--txd);margin-top:8px;font-style:italic}
.air-foot{display:flex;align-items:center;gap:10px;margin-top:9px}
.air-st{flex:1;font-size:12.5px}
.air-save{padding:6px 16px;font-size:13px}
.air-save:disabled{opacity:.4;cursor:default}
/* Quieter than AI Personalize beside it: reading costs nothing, generating
   costs money per prospect, and the styling should say which is which. */
.camp-rev{cursor:pointer;color:var(--txm);font-size:12px;font-weight:600;
  white-space:nowrap;margin-right:10px;padding:3px 8px;border-radius:5px;
  border:1px solid var(--bdr)}
.camp-rev:hover{color:var(--tx);border-color:var(--bdr-str);background:var(--card-h)}

/* ---------- Recent activity feed ---------- */
.feed{margin-top:var(--sp2)}
.feed-day{font-size:11.5px;font-weight:600;color:var(--txd);text-transform:uppercase;
  letter-spacing:.05em;margin:var(--sp4) 0 var(--sp2)}
.feed-day:first-child{margin-top:var(--sp2)}
.feed-row{display:flex;align-items:center;gap:11px;padding:7px 0;
  border-bottom:1px solid color-mix(in srgb,var(--bdr) 55%,transparent)}
.feed-row:last-child{border-bottom:none}
.feed-i{width:22px;height:22px;border-radius:6px;flex-shrink:0;display:grid;
  place-items:center;font-size:11px;border:1px solid transparent}
.feed-t{font-size:13px;font-weight:550;white-space:nowrap}
.feed-d{font-size:12.5px;color:var(--txd);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.feed-w{font-size:12px;color:var(--txd);white-space:nowrap;
  font-variant-numeric:tabular-nums}
@media(max-width:640px){.feed-d{display:none}}

/* ---------- Contacts ----------------------------------------------------
   The people half of the universe. Shares .tcard / .tsearch / .pg with
   Companies deliberately — same job, different record — so only what is
   genuinely new is defined here. */
.ct-filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin-bottom:var(--sp3)}
.ct-filters select{padding:6px 10px;border-radius:var(--r-sm);
  border:1px solid var(--bdr);background:var(--ibg);color:var(--tx);
  font-family:inherit;font-size:12.5px}
.ct-sep{width:1px;height:20px;background:var(--bdr);margin:0 4px}
.ct-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;
  border-radius:999px;border:1px solid var(--bdr);background:transparent;
  color:var(--txm);font-family:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;text-transform:capitalize;transition:all .14s}
.ct-chip:hover{border-color:var(--bdr-str);color:var(--tx)}
.ct-chip.on{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
.ct-n{font-variant-numeric:tabular-nums;font-size:11.5px;opacity:.72}
/* .ct-scope was here: the strip saying "Showing only contacts from <file>"
   with a way out. It existed because that filter could only be arrived at
   from Import history and was otherwise invisible. The Came from picker in
   the filter row shows its own state and offers Anywhere, so the strip was
   a second place saying what a control now says itself. */
/* An unresolved company is a FACT about the record, not a warning, so it is
   quiet — but it has to be visible, or "unlinked" silently becomes "missing". */
.ct-unres{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--txd);border:1px solid var(--bdr);border-radius:3px;padding:1px 5px}

/* ---------- One contact, and the import wizard ---------- */
.ct-box,.imp-box{background:var(--card);border:1px solid var(--bdr);
  border-radius:14px;width:100%;display:flex;flex-direction:column;
  box-shadow:0 24px 70px rgba(0,0,0,.5);max-height:88vh}
.ct-box{max-width:680px}
.imp-box{max-width:820px}
.ct-hd{display:flex;align-items:flex-start;gap:var(--sp3);
  padding:var(--sp5) var(--sp5) var(--sp3)}
.ct-name{font-size:18px;font-weight:650;letter-spacing:-.02em}
.ct-sub{font-size:12.5px;color:var(--txd);margin-top:3px}
.ct-tabs{padding:0 var(--sp5);margin:0}
.ct-body,.imp-body{overflow-y:auto;padding:var(--sp4) var(--sp5) var(--sp5)}
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp3)}
@media(max-width:560px){.ct-grid{grid-template-columns:1fr}}
.ct-fld{display:flex;flex-direction:column;gap:5px}
.ct-fld>span{font-size:12px;font-weight:600;color:var(--txm)}
.ct-fld input{padding:9px 11px;border-radius:var(--r-sm);
  border:1px solid var(--bdr);background:var(--ibg);color:var(--tx);
  font-family:inherit;font-size:13.5px;outline:none;
  transition:border-color .15s,box-shadow .15s}
.ct-fld input:focus{border-color:var(--accent);box-shadow:var(--ring)}
.ct-fld em{font-style:normal;font-size:11.5px;color:var(--txd)}
.ct-foot{display:flex;align-items:center;gap:10px;margin-top:var(--sp4);
  padding-top:var(--sp3);border-top:1px solid var(--bdr)}
.ct-msg{flex:1;font-size:12.5px;color:var(--txd)}
.ct-empty{padding:26px 0;text-align:center;font-size:13px;color:var(--txd)}

.ct-tl{display:flex;flex-direction:column}
/* A fifth column for the remove button. Fixed width and always present, even
   as an empty span on the rows that cannot be removed — a column that appears
   only on some rows makes every timestamp above it shift sideways. */
.ct-tl-row{display:grid;grid-template-columns:10px 84px 1fr auto 18px;gap:11px;
  align-items:baseline;padding:8px 0;
  border-bottom:1px solid color-mix(in srgb,var(--bdr) 55%,transparent)}
.ct-tl-row:last-child{border-bottom:none}
.ct-tl-dot{width:7px;height:7px;border-radius:50%;align-self:center}
.ct-tl-k{font-size:11.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--txm)}
.ct-tl-d{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ct-tl-w{font-size:12px;color:var(--txd);white-space:nowrap}
/* Quiet until the row is under the cursor. A delete on every line of a
   timeline reads as an invitation; this one has to be looked for. */
/* The same idea on a table row: an action that belongs to one row, quiet
   until the row is under the cursor, and holding its column either way so
   nothing shifts when it appears. */
.ct-row-x{background:none;border:1px solid transparent;border-radius:7px;
  cursor:pointer;padding:3px 7px;font-size:13px;color:var(--txd);
  opacity:0;transition:opacity .12s,color .12s,border-color .12s}
tr:hover .ct-row-x,tr:focus-within .ct-row-x{opacity:1}
.ct-row-x:hover{color:var(--tx);border-color:var(--bdr);background:var(--card-h)}

button.ct-tl-x{background:none;border:none;cursor:pointer;padding:0;
  font-size:15px;line-height:1;color:var(--txd);opacity:0;
  transition:opacity .12s,color .12s}
.ct-tl-row:hover button.ct-tl-x{opacity:1}
button.ct-tl-x:hover{color:var(--red)}
.ct-tl-row:focus-within button.ct-tl-x{opacity:1}

.ct-src{display:flex;flex-direction:column;gap:9px}
.ct-src-row{border:1px solid var(--bdr);border-radius:8px;padding:11px 13px;
  background:var(--bg)}
.ct-src-t{font-size:13.5px;font-weight:600}
.ct-src-d{font-size:12.5px;color:var(--txm);margin-top:2px}
.ct-src-f{font-size:11.5px;color:var(--txd);margin-top:4px}

/* ---------- Import ---------- */
.imp-drop{border:2px dashed var(--bdr-str);border-radius:12px;
  padding:40px 24px;text-align:center;cursor:pointer;transition:all .15s}
.imp-drop:hover{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 5%,transparent)}
.imp-drop-i{font-size:26px;color:var(--accent);margin-bottom:8px}
.imp-drop-t{font-size:15px;font-weight:600}
.imp-drop-d{font-size:12.5px;color:var(--txd);margin-top:5px;line-height:1.6;
  max-width:44ch;margin-left:auto;margin-right:auto}
.imp-busy{padding:48px 0;text-align:center;font-size:13.5px;color:var(--txm);
  display:flex;flex-direction:column;align-items:center;gap:14px}
.imp-spin{width:26px;height:26px;border-radius:50%;
  border:2.5px solid var(--bdr);border-top-color:var(--accent);
  animation:imp-spin .8s linear infinite}
@keyframes imp-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.imp-spin{animation-duration:2.4s}}

/* Counts lead, because they ARE the decision — everything under them is the
   evidence for it. */
.imp-counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:1px;background:var(--bdr);border:1px solid var(--bdr);border-radius:10px;
  overflow:hidden;margin-bottom:var(--sp4)}
.imp-c{background:var(--card);padding:14px 16px}
.imp-c.warn{background:color-mix(in srgb,var(--amber) 8%,var(--card))}
.imp-cv{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;
  line-height:1.1}
.imp-c.warn .imp-cv{color:var(--amber)}
.imp-cl{font-size:12px;color:var(--txm);margin-top:4px;line-height:1.45}
.imp-cl em{display:block;font-style:normal;font-size:11px;color:var(--txd);
  margin-top:2px}
.imp-sec{font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.07em;color:var(--txm);margin:var(--sp4) 0 var(--sp2);
  display:flex;align-items:baseline;gap:9px}
.imp-sec span{font-size:11.5px;font-weight:400;text-transform:none;
  letter-spacing:0;color:var(--txd)}
/* The heading of the first section is already the top of the panel — the
   step rail above it is the separation, so its own top margin is a void. */
.imp-sec:first-child{margin-top:0}
.imp-batch{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp3);
  /* The fold that follows carries margin-bottom but no margin-top, so
     without this the Columns section sits flush against these inputs. */
  margin-bottom:var(--sp3)}
@media(max-width:560px){.imp-batch{grid-template-columns:1fr}}
/* One control, full width. A lone select sitting in the left half of a
   two-column grid reads as a field whose partner failed to render. */
.imp-batch.one{grid-template-columns:1fr}
.imp-batch label{display:flex;flex-direction:column;gap:5px}
.imp-batch span{font-size:12px;font-weight:600;color:var(--txm)}
.imp-batch input,.imp-batch select{padding:8px 11px;border-radius:var(--r-sm);
  border:1px solid var(--bdr);background:var(--ibg);color:var(--tx);
  font-family:inherit;font-size:13px;outline:none}
.imp-batch input:focus,.imp-batch select:focus{border-color:var(--accent);box-shadow:var(--ring)}
/* The hint under a field. Small and grey on purpose: it is the reason the
   field is worth filling in, read once, and it must not compete with the
   label above it. `em` rather than a class because every one of these sits
   inside its own <label> and there is nothing else it could be. */
.imp-batch em{font-size:11px;font-style:normal;color:var(--txd);line-height:1.45}


/* A second line under a cell — the type under a source. Quieter than the
   cell it hangs off. */
.sb-sub{font-size:11px;color:var(--txd);margin-top:1px}

/* ===================== IMPORT: TYPE, AND TAGS ============================
   A PICKER BUTTON WEARING A FORM FIELD.
   The Type control is `pickerBtn`, the same component as the focus selector
   and every filter, because a native <select> draws its open list with the
   operating system and nothing about that answers to this stylesheet — the
   one control on the screen that opens was the one that did not look like
   the application. It is a filter chip everywhere else, so here it borrows
   the height, width and border of the inputs beside it. A skin, not a
   second dropdown. */
.imp-batch .pkb{width:100%;max-width:none;justify-content:flex-start;
  padding:8px 11px;border-radius:var(--r-sm);border:1px solid var(--bdr);
  background:var(--ibg);color:var(--tx);font-size:13px;min-height:35px}
.imp-batch .pkb:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--bdr))}

/* KEY AND VALUE, side by side, one pair per row. Two inputs rather than a
   "name:value" string, because a string has to be parsed and a colon in a
   value is then a bug nobody sees until the label is wrong. */
.imp-tags{display:flex;flex-direction:column;gap:6px}
.imp-tag{display:flex;gap:6px;align-items:center}
.imp-tag .imp-tag-k{flex:0 0 34%;min-width:0}
.imp-tag .imp-tag-v{flex:1 1 0;min-width:0}
.imp-tag-x{flex:0 0 auto;width:28px;height:30px;border-radius:var(--r-sm);
  border:1px solid var(--bdr);background:transparent;color:var(--txd);
  cursor:pointer;font-family:inherit;font-size:11px}
.imp-tag-x:hover:not(:disabled){border-color:var(--red);color:var(--red)}
.imp-tag-x:disabled{opacity:.35;cursor:default}
.imp-tag-add{align-self:flex-start;background:none;border:0;padding:2px 0;
  font-family:inherit;font-size:12px;font-weight:600;color:var(--accent);
  cursor:pointer}
.imp-tag-add:hover{text-decoration:underline}
/* The same pair, read back on the import list. */
.imp-tag-p{display:inline-block;font-size:11px;padding:1px 7px;margin:1px 0;
  border-radius:20px;border:1px solid var(--bdr);background:var(--bg-alt);
  color:var(--txm);white-space:nowrap}
.imp-tag-p b{color:var(--tx);font-weight:600}
.imp-note{font-size:12px;color:var(--txd);margin-top:9px;line-height:1.55}
/* NOT A SCROLL CONTAINER. It was one — 300px with its own overflow — inside
   a dialog body that already scrolls, so the wheel handed off between two
   scrollers as the pointer crossed the table and the step felt endless.
   One scroller, the dialog body, and the table is simply as long as the
   file's column count. */
.imp-map{min-width:0}
.imp-done{text-align:center;padding:30px 0 10px}
.imp-done-i{width:46px;height:46px;border-radius:50%;margin:0 auto 14px;
  display:grid;place-items:center;font-size:21px;color:var(--green);
  background:color-mix(in srgb,var(--green) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--green) 30%,transparent)}
.imp-done-t{font-size:17px;font-weight:650}
.imp-done-d{font-size:13px;color:var(--txm);margin-top:6px}
.imp-done-e{font-size:12.5px;color:var(--amber);margin-top:12px;
  max-width:52ch;margin-left:auto;margin-right:auto;line-height:1.55}

/* The audience the import made. Left-aligned inside a centred panel on
   purpose: it is a row with a name, a count and a button, and centring those
   three makes the eye hunt for the button on every line. */
.imp-aud{margin-top:22px;padding:14px 16px;border-radius:var(--r-md);
  border:1px solid var(--bdr);background:var(--bg-alt);text-align:left}
.imp-aud-t{font-size:13px;font-weight:650;margin-bottom:10px}
.imp-aud-r{display:flex;align-items:center;gap:10px;padding:7px 0;
  border-top:1px solid var(--bdr)}
.imp-aud-r:first-of-type{border-top:0}
.imp-aud-n{font-weight:550;font-size:13px;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.imp-aud-c{font-size:12px;color:var(--txm);margin-left:auto;flex-shrink:0}
.imp-aud-r button{flex-shrink:0}
.imp-aud-d{font-size:12px;color:var(--txd);line-height:1.55;margin-top:10px}

/* ---------- Segments ---------- */
.sg-hd{display:flex;align-items:flex-start;gap:var(--sp4);margin-bottom:var(--sp4)}
.sg-hd-d{font-size:13px;color:var(--txm);line-height:1.6;max-width:66ch}
.sg-hd button{margin-left:auto;flex-shrink:0}
.sg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:var(--sp3)}
.sg-card{background:var(--card);border:1px solid var(--bdr);
  border-radius:var(--r-lg);padding:16px 17px;cursor:pointer;
  transition:border-color .15s,transform .08s;display:flex;
  flex-direction:column;gap:8px}
.sg-card:hover{border-color:var(--accent)}
.sg-card:active{transform:translateY(1px)}
.sg-card-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sg-name{font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.sg-card-d{font-size:12.5px;color:var(--txd);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.sg-card-n{display:flex;align-items:baseline;gap:10px;margin-top:auto;
  padding-top:6px}
.sg-v{font-size:21px;font-weight:600;font-variant-numeric:tabular-nums}
.sg-l{font-size:12px;color:var(--txm);margin-left:5px}
.sg-used{margin-left:auto;font-size:11.5px;color:var(--txd)}

/* Its own line, between the description and the numbers. Sharing the footer
   row with the member count squeezed both into two-line ellipses. */
.sg-meta{margin-top:7px}

/* The owning workspace on a card. A dot in the workspace's own colour and
   the name in the same muted grey as everything else on this line — it is
   where the thing lives, not a status, and it should not read as one. */
.ws-note{display:inline-flex;align-items:center;gap:5px;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-note i{width:6px;height:6px;flex:0 0 6px;border-radius:50%;
  background:var(--wsc,var(--txm))}
/* .sg-rule was here: the tinted box that printed a saved rule inside the
   New audience dialog on this screen. That dialog is gone (see 13-segments.js)
   and the rule is read on the audience card instead, which is plain text in a
   card that already has a border. */

/* ---------- Campaign audience: segments vs score ---------- */
.oc-mode{display:inline-flex;border:1px solid var(--bdr);border-radius:999px;
  overflow:hidden}
.oc-mode button{padding:6px 14px;border:none;background:transparent;
  color:var(--txm);font-family:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;transition:all .14s}
.oc-mode button.on{background:color-mix(in srgb,var(--accent) 14%,transparent);
  color:var(--accent)}
.oc-segs{margin-top:12px}
.oc-seg-h{font-size:11.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.07em;color:var(--txm);margin:10px 0 6px;
  display:flex;align-items:baseline;gap:8px}
.oc-seg-h em{font-style:normal;font-size:11px;text-transform:none;
  letter-spacing:0;color:var(--txd);font-weight:400}
.oc-seg-row{display:flex;flex-wrap:wrap;gap:6px}
.oc-seg{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;
  border-radius:999px;border:1px solid var(--bdr);background:transparent;
  color:var(--txm);font-family:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;transition:all .14s}
.oc-seg:hover{border-color:var(--bdr-str);color:var(--tx)}
.oc-seg span{font-variant-numeric:tabular-nums;font-size:11.5px;opacity:.7}
.oc-seg.on{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
/* Exclusion is destructive to an audience, so it reads as a removal rather
   than as a second kind of selection. */
.oc-seg.ex.on{border-color:var(--red);color:var(--red);
  background:color-mix(in srgb,var(--red) 10%,transparent)}

/* ---------- Campaign performance ----------------------------------------
   Every rate twice: as measured, and with proxy fetches removed. The
   excluding-bots figure is the large one because it is the one to believe;
   the raw figure stays beside it rather than hidden, because the filtering is
   a heuristic and burying its input would be dishonest in the other
   direction. */
.camp-name{background:none;border:none;padding:0;font-family:inherit;
  font-size:12.5px;font-weight:600;color:var(--accent);cursor:pointer;
  text-align:left;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;display:block}
.camp-name:hover{text-decoration:underline}

.perf-box{background:var(--card);border:1px solid var(--bdr);border-radius:14px;
  width:100%;max-width:720px;max-height:88vh;display:flex;flex-direction:column;
  box-shadow:0 24px 70px rgba(0,0,0,.5)}
.perf-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp3);
  margin-bottom:var(--sp3)}
@media(max-width:560px){.perf-grid{grid-template-columns:1fr}}
.perf-card{border:1px solid var(--bdr);border-radius:10px;padding:15px 17px;
  background:var(--bg)}
.perf-l{font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.07em;color:var(--txm)}
.perf-v{font-size:30px;font-weight:600;letter-spacing:-.02em;margin-top:6px;
  font-variant-numeric:tabular-nums;line-height:1.05}
.perf-n{font-size:12px;color:var(--txd);margin-top:3px}
.perf-raw{display:flex;align-items:baseline;gap:7px;margin-top:10px;
  padding-top:9px;border-top:1px solid var(--bdr);
  font-size:12px;color:var(--txd);font-variant-numeric:tabular-nums}
.perf-raw span{margin-left:auto;opacity:.75}
.perf-note{font-size:11.5px;color:var(--txm);margin-top:7px;line-height:1.45}

.perf-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--bdr);border:1px solid var(--bdr);border-radius:10px;
  overflow:hidden}
.perf-s{background:var(--card);padding:13px 15px;display:flex;
  align-items:baseline;gap:9px}
.perf-s.hot{background:color-mix(in srgb,var(--red) 9%,var(--card))}
.perf-sv{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.perf-s.hot .perf-sv{color:var(--red)}
.perf-sl{font-size:12px;color:var(--txm);line-height:1.4}
.perf-sl em{display:block;font-style:normal;font-size:11px;color:var(--txd);
  margin-top:1px}
.perf-warn{margin-top:var(--sp3);padding:11px 13px;border-radius:var(--r-md);
  font-size:12.5px;line-height:1.6;color:var(--tx);
  background:color-mix(in srgb,var(--red) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--red) 28%,transparent)}

/* ── The workspace, now that it is a column rather than a container ──────
   Contacts, Segments, Campaigns and Templates show everything the person
   can see, so each row has to say where it lives. These are all quiet by
   design: the workspace is context, not the thing being read. */

/* The workspace filter row sits above the stage filters and is labelled,
   because two unlabelled chip rows stacked on each other are a puzzle. */
.ct-wsrow{margin-bottom:2px}
.ct-wsl{font-size:11.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--txd);margin-right:2px}
.ct-chip.ws{padding:5px 10px;font-size:12px}

/* The scope switcher when nothing is selected. The mark is a ring rather
   than initials — there is no single workspace to take initials from. */
.wsw-all{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex:0 0 26px;border-radius:var(--r-sm);
  font-size:13px;line-height:1;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.wsw-menu .wsw-all{width:30px;height:30px;flex:0 0 30px;font-size:15px}

/* A segment chip carries its workspace so the audience shows where the
   campaign will land, before the create button is pressed. */
.oc-seg-ws{font-style:normal;font-size:10.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;opacity:.55;
  margin-left:2px;padding-left:7px;border-left:1px solid var(--bdr)}

/* Under the campaign name, not beside it — the name column is narrow and
   an inline tag would push the name into an ellipsis. */
.camp-ws{font-size:11px;color:var(--txd);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── HOME — the global screen ────────────────────────────────────────────
   Deliberately quieter than the workspace Overview. This screen is read
   once, to decide where to go; the workspace screens are worked in. Big
   metric cards here would compete with the ones that matter. */

.hm-strip{display:flex;flex-wrap:wrap;gap:0;margin-bottom:var(--sp5);
  border:1px solid var(--bdr);border-radius:var(--r-lg);background:var(--card);
  overflow:hidden}
.hm-stat{flex:1 1 130px;min-width:0;display:flex;flex-direction:column;gap:3px;
  padding:15px 18px;border-right:1px solid var(--bdr);background:none;
  border-top:0;border-bottom:0;border-left:0;font-family:inherit;text-align:left}
.hm-strip>*:last-child{border-right:0}
button.hm-stat{cursor:pointer}
button.hm-stat:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.hm-sv{font-size:23px;font-weight:650;letter-spacing:-.02em;color:var(--tx);
  font-variant-numeric:tabular-nums;line-height:1.1}
.hm-sl{font-size:11.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--txd)}
@media(max-width:720px){.hm-stat{flex-basis:50%;border-bottom:1px solid var(--bdr)}}

/* One card per workspace, every card showing the same three figures in the
/* The offering CARDS are gone with the grid that held them: Home listed
   what we sell and clicking one was how you navigated. The focus selector
   does that now, in a line that does not grow with the tenth product. */

/* A global screen saying where the workspace-level thing is done. One line,
   one way in — not a disabled form that asks which workspace first. */
.gl-note{display:flex;align-items:center;gap:var(--sp4);flex-wrap:wrap;
  padding:13px 16px;margin-bottom:var(--sp4);font-size:13px;color:var(--txm);
  line-height:1.55}
.gl-note>span{flex:1;min-width:240px}

/* The product badge, when it is the way back to the other half of the app.
   Reads as the same pill until you go near it — it is a label first and a
   control second, which is the right weight for something used rarely. */
.phd-prod{cursor:pointer;font-family:inherit;border-color:var(--bdr);
  color:var(--txd);background:none}
.phd-prod:hover{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,transparent)}
.phd-prod span{opacity:.6;font-size:11px}

/* A send that came from ANOTHER workspace, on a contact's timeline. Marked
   only when it is not the workspace you are standing in — inside Niyantrac,
   Niyantrac's own sends need no label, and the two that came from a
   marketing programme are exactly what you need to notice before mailing
   this person again. */
.ct-tl-ws{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:20px;
  font-size:10.5px;font-weight:600;letter-spacing:.02em;
  color:var(--txd);border:1px solid var(--bdr);white-space:nowrap}

/* ── Settings: two groups, because they answer two questions ─────────────
   "This workspace" and "Everywhere" are not two sets of tabs, they are two
   scopes — and a person changing how much mail one human may receive has to
   be able to see, without reading the panel, that it is not a per-workspace
   knob. The label above each row is doing that work. */
.set-hd{display:flex;flex-wrap:wrap;gap:var(--sp5);align-items:flex-end;
  margin-bottom:var(--sp5)}
.set-grp{min-width:0}
.set-grp-l{font-size:12.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--txm)}
.set-grp-h{font-size:12px;color:var(--txd);margin:2px 0 8px}
.set-hd .subtabs{border-bottom:1px solid var(--bdr)}

/* One row of small numeric fields reading as a sentence: "at most 2 emails
   in the last 7 days". Laid out as a sentence on purpose — a form with two
   labelled boxes makes the reader assemble the rule themselves. */
.srow{display:flex;align-items:flex-end;gap:var(--sp3);flex-wrap:wrap;
  margin:var(--sp4) 0}
.sfield{display:flex;flex-direction:column;gap:5px;font-size:13.5px;color:var(--txm)}
.sfield span{font-size:13.5px;color:var(--txm)}
.sfield-u{font-size:13.5px;color:var(--txm);padding-bottom:10px}
.scheck{display:flex;gap:10px;align-items:flex-start;font-size:13px;
  color:var(--txm);line-height:1.55;max-width:70ch}
.scheck input{margin-top:3px;accent-color:var(--accent);flex:0 0 auto}
.scard-ft{display:flex;align-items:center;gap:var(--sp4);margin-top:var(--sp5);
  padding-top:var(--sp4);border-top:1px solid var(--bdr)}
.scard-note{font-size:12px;color:var(--txd)}

/* The note in the "Add to workspace" dialog. It is doing real work: the
   single most likely fear at this moment is "am I about to duplicate 674
   people?", and the answer is no, for a reason worth stating once. */
.atw-note{margin-top:14px;padding:11px 13px;border-radius:var(--r-md);
  font-size:12.5px;line-height:1.6;color:var(--txm);
  background:color-mix(in srgb,var(--accent) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent)}

/* ── Breadcrumb ──────────────────────────────────────────────────────────
   Replaces the workspace pill. The pill said where you were; this says
   where you are, what contains it, and how to get out — in the same line,
   in the same place, on every screen. */
.crumb2{display:flex;align-items:center;gap:7px;font-size:12.5px;
  color:var(--txd);flex-wrap:wrap;min-width:0;
  /* `.cnt` has no top padding — `.phd` supplied it, and the breadcrumb now
     sits above `.phd`, so it was flush against the top edge of the window. */
  padding-top:var(--sp5);margin-bottom:2px}
/* ...and the header below it must not add the gap a second time. */
.crumb2 + .phd{padding-top:var(--sp2)}
.crumb2 a{color:var(--txm);text-decoration:none;cursor:pointer}
.crumb2 a:hover{color:var(--accent);text-decoration:underline}
/* Three weights, so the line is read at a glance rather than parsed: the
   ancestor you can click is brightest of the three lead-in levels, the group
   heading is quiet because it is a container and not a place, and the page
   you are on is the only thing in full contrast. */
.crumb2 .grp{color:var(--txd)}
.crumb2 .cur{color:var(--tx);font-weight:600}
.crumb2 .sep{opacity:.45}

/* ── Saved views ─────────────────────────────────────────────────────────
   Named questions across the top of a list, the way every CRM does it.
   "Mailable" is one click instead of two dropdowns that had to be combined
   correctly — which meant most people never combined them and worked the
   whole list instead. */
.views{display:flex;gap:2px;border-bottom:1px solid var(--bdr);
  margin:0 0 14px;flex-wrap:wrap}
.views button{padding:9px 15px;border:none;background:none;color:var(--txm);
  cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.views button:hover{color:var(--tx)}
.views button .n{margin-left:7px;font-size:11.5px;color:var(--txd);
  font-variant-numeric:tabular-nums}
.views button.on{color:var(--accent);border-bottom-color:var(--accent)}
.views button.on .n{color:var(--accent);opacity:.75}

/* ── Bulk selection ──────────────────────────────────────────────────────
   Sits ON the table rather than near it, so it reads as that table's lid.
   "Select all N matching" is a SEPARATE click from ticking the page on
   purpose: 25 boxes quietly meaning 412 is how somebody mails four hundred
   people they never looked at. */
.bulk{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:9px 14px;font-size:12.5px;color:var(--txm);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  border-bottom:0;border-radius:var(--r-md) var(--r-md) 0 0}
.bulk b{color:var(--accent)}
.bulk .btn{padding:3px 11px;font-size:12px}
.bulk-all{background:none;border:0;padding:0;font-family:inherit;font-size:12.5px;
  color:var(--accent);text-decoration:underline;cursor:pointer}
.bulk-note{color:var(--txd)}
.tcard.has-bulk{border-top-left-radius:0;border-top-right-radius:0}

/* The checkbox column, and the row it belongs to. */
th.chk,td.chk{width:34px;padding-left:14px;padding-right:0}
th.chk input,td.chk input{accent-color:var(--accent);cursor:pointer;margin:0}
tr.sel{background:color-mix(in srgb,var(--accent) 7%,transparent)}

/* The score, where it sits on a contact. Tabular so a column of them lines
   up, and weighted because it is the number people scan for. */
td.sc{font-variant-numeric:tabular-nums;font-weight:600}

/* Page size. The pager already said "1–25 of 412" and had no way to change
   the 25, which is the first thing anybody with 412 rows wants. */
.pgz{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--txd)}
.pgz select{padding:4px 8px;border-radius:var(--r-sm);border:1px solid var(--bdr);
  background:var(--ibg);color:var(--tx);font-family:inherit;font-size:12.5px}

/* The stage filter moved into the toolbar when the chip row became views. */
.tsel{padding:6px 10px;border-radius:var(--r-sm);border:1px solid var(--bdr);
  background:var(--ibg);color:var(--txm);font-family:inherit;font-size:12.5px;
  max-width:190px}
.tsel:focus{border-color:var(--accent);outline:none}

/* A domain in a contact row: a link out to the company, not a third way to
   open the same panel the row already opens. */
.ct-dom{color:var(--accent);text-decoration:none}
.ct-dom:hover{text-decoration:underline}

/* The type-ahead filters. A <select> of 300 industries is a scroll, not a
   choice; a datalist keeps the control one line wide and still offers
   everything once three letters have been typed. */
input.tsel{max-width:170px}
input.tsel::placeholder{color:var(--txd)}

/* A read-only fact on the contact panel, shaped like the editable fields
   beside it so the panel does not have two visual languages. */
.ct-ro{padding:9px 12px;border-radius:var(--r-md);border:1px solid var(--bdr);
  background:color-mix(in srgb,var(--bdr) 22%,transparent);
  font-size:13.5px;color:var(--tx);display:flex;align-items:baseline;
  gap:9px;flex-wrap:wrap}
.ct-ro-d{font-size:12px;color:var(--txd)}

/* Where to go next, inside a workspace. Four destinations in the order the
   work happens — "you are in Niyantrac" is not by itself a screen. */
.hm-next{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--sp3);margin-bottom:var(--sp5)}
.hm-next-c{display:flex;flex-direction:column;gap:4px;text-align:left;
  padding:15px 17px;border:1px solid var(--bdr);border-radius:var(--r-lg);
  background:var(--card);cursor:pointer;font-family:inherit;
  transition:border-color .12s,transform .12s}
.hm-next-c:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--bdr));
  transform:translateY(-1px)}
.hm-next-t{display:flex;align-items:center;gap:8px;font-size:14px;
  font-weight:650;color:var(--tx)}
.hm-next-c:hover .hm-go{color:var(--accent)}
.hm-next-d{font-size:12.5px;color:var(--txd);line-height:1.5}

/* ── Campaigns ───────────────────────────────────────────────────────────
   The whole row opens the campaign's performance, so the name is a heading
   rather than a link inside a row that does something else. The actions at
   the end stop the click, because they are not "look at this". */
tr.camp-row{cursor:pointer}
tr.camp-row:hover{background:var(--card-h)}
.camp-row .camp-name{background:none;border:0;padding:0;font-family:inherit;
  font-size:13px;font-weight:600;color:var(--tx);text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.camp-row:hover .camp-name{color:var(--accent)}
.camp-del{cursor:pointer;color:var(--red);font-size:13px;margin-left:8px;opacity:.65}
.camp-del:hover{opacity:1}
.camp-test{margin-left:8px;font-size:11.5px;padding:1px 7px;border-radius:20px;
  color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 30%,transparent);
  background:color-mix(in srgb,var(--amber) 12%,transparent);white-space:nowrap}

/* ── The long-list picker ────────────────────────────────────────────────
   A button that opens a small searchable panel, at most eight rows tall.
   Replaces both the 300-row <select> and the <datalist>, which dropped the
   same 300 under the field. What is chosen sits ON the button, so the
   current filter is readable without opening anything. */
/* ---------- The picker: one dropdown, used everywhere ---------- */
/* Industry, country and the focus all open this. A native <select> is drawn
   by the operating system — no colour, no second line, no say over the group
   headings, and on a dark theme it opens as a slab of system chrome in the
   middle of the page. */
.pkb{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  max-width:230px;white-space:nowrap;overflow:hidden}
.pkb.on{border-color:color-mix(in srgb,var(--wsc,var(--accent)) 40%,transparent);
  color:var(--tx);background:color-mix(in srgb,var(--wsc,var(--accent)) 9%,transparent)}
/* The chosen thing's own colour, so "which focus am I on" is answerable
   without reading. Set as a variable on the button so the border, the tint
   and the dot are one colour rather than three that drift. */
.pkb-d{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.pkb-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pkb-s{font-size:11px;color:var(--txd);text-transform:uppercase;
  letter-spacing:.07em;flex:0 0 auto}
.pkb-c{margin-left:auto;font-size:9px;opacity:.6;flex:0 0 auto;padding-left:2px}

/* ABOVE THE MODAL, because the picker is now used INSIDE one.
   It sat at 120 while .opm-overlay sits at 9000, which was fine for as long
   as every picker was a filter on a page. The Type control in the import
   wizard is the first one inside a dialog, and at 120 the panel opened
   correctly, sized correctly, and rendered underneath the dialog that owns
   the button that opened it — a control that appears to do nothing. */
.pk{position:fixed;z-index:9100;width:288px;padding:7px;border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--bdr-str);
  box-shadow:var(--shadow-lg);
  animation:pkIn .11s ease-out}
@keyframes pkIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pk-s{width:100%;box-sizing:border-box;padding:8px 11px;border-radius:var(--r-md);
  border:1px solid var(--bdr);background:var(--ibg);color:var(--tx);
  font-family:inherit;font-size:13px;outline:none}
.pk-s:focus{border-color:var(--accent)}
/* Bounded and scrollable rather than allowed to grow: twenty services must
   not produce a panel taller than the window. */
.pk-l{margin-top:5px;display:flex;flex-direction:column;
  max-height:min(52vh,340px);overflow-y:auto}
/* A group heading. Small, spaced, and NOT clickable — it names the rows
   under it and is not one of them. */
.pk-g{padding:9px 9px 4px;font-size:10.5px;font-weight:600;color:var(--txd);
  text-transform:uppercase;letter-spacing:.1em}
.pk-g:first-child{padding-top:4px}
.pk-i{display:flex;align-items:center;gap:9px;text-align:left;
  padding:8px 9px;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:13.5px;color:var(--txm);border-radius:var(--r-sm);
  white-space:nowrap;overflow:hidden}
.pk-i:hover{background:var(--card-h);color:var(--tx)}
/* Focus-visible and not :focus — arrowing through the list must be visible,
   and clicking must not leave a ring behind on the row you just chose. */
.pk-i:focus-visible{outline:none;background:var(--card-h);color:var(--tx);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.pk-i.on{color:var(--tx);font-weight:600;background:var(--card-h)}
/* The tick goes on the right, in the gutter the chevron leaves, so the
   labels stay aligned whether or not a row is the chosen one. */
.pk-i.on::after{content:'✓';margin-left:auto;color:var(--accent);
  font-size:12px;flex:0 0 auto}
.pk-d{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.pk-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pk-sub{font-size:11px;color:var(--txd);flex:0 0 auto}
.pk-i.on .pk-sub{margin-right:2px}
/* Long names (runs, files): wider, the name may wrap, the detail sits below. */
.pk.stack{width:400px}
.pk.stack .pk-i{flex-direction:column;align-items:flex-start;gap:2px;white-space:normal;position:relative;padding-right:26px}
.pk.stack .pk-t{overflow:visible;line-height:1.3}
.pk.stack .pk-i.on::after{position:absolute;right:9px;top:9px}
.pk.stack .pk-sub{line-height:1.3}
/* Rows never shrink: in a bounded flex column they were squeezed to fit and
   their text clipped through the middle, instead of the list scrolling. */
.pk-i,.pk-g{flex:0 0 auto}
/* Tabs across the top of a picker whose groups are different kinds of thing. */
.pk-tabs{display:flex;gap:2px;margin-bottom:6px;padding:3px;border-radius:var(--r-md);background:var(--ibg);border:1px solid var(--bdr)}
.pk-tab{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px;border:0;border-radius:var(--r-sm);
  background:none;color:var(--txm);font-family:inherit;font-size:12.5px;font-weight:550;cursor:pointer;white-space:nowrap}
.pk-tab span{font-size:11px;color:var(--txd);font-weight:500}
.pk-tab:hover{color:var(--tx)}
.pk-tab.on{background:var(--card-h);color:var(--tx);box-shadow:inset 0 0 0 1px var(--bdr-str)}
/* Multi-pick: a box per row, ticked when chosen; Done applies. */
.pk.multi .pk-i.on::after{content:none}
.pk-cb{width:15px;height:15px;flex:0 0 auto;border-radius:4px;border:1.5px solid var(--bdr-str);background:var(--ibg);
  display:inline-flex;align-items:center;justify-content:center;font-size:10px;line-height:1;color:#fff}
.pk-i.on .pk-cb{background:var(--accent);border-color:var(--accent)}
.pk-i.on .pk-cb::after{content:'✓';font-weight:700}
.pk-ft{display:flex;align-items:center;gap:6px;margin-top:5px;border-top:1px solid var(--bdr)}
.pk-ft .pk-any{margin-top:0;border-top:0;flex:1}
.pk-done{border:0;border-radius:var(--r-sm);background:var(--accent);color:#0b1220;font-family:inherit;font-size:12.5px;font-weight:600;
  padding:6px 14px;margin:5px 2px 0;cursor:pointer}
.pk-more{padding:7px 9px;font-size:11.5px;color:var(--txd)}
.pk-any{width:100%;margin-top:5px;padding:8px;border:0;border-top:1px solid var(--bdr);
  background:none;color:var(--txm);font-family:inherit;font-size:12.5px;
  cursor:pointer;border-radius:0;text-align:left;padding-left:9px}
.pk-any:hover{color:var(--accent)}

/* A company name in a contact row: goes to that company in Companies, which
   is the question the name actually raises. */
.ct-co{color:var(--accent);cursor:pointer}
.ct-co:hover{text-decoration:underline}

/* How a contact arrived. Quiet — it is provenance, not status. */
.ct-src-p{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11px;
  font-weight:600;color:var(--txm);border:1px solid var(--bdr);white-space:nowrap}

/* A contact's name and company must not wrap. Two lines per row turns a
   page of 25 into a page of 40 and makes scanning it impossible — and
   these are the two columns the eye actually travels down. */
.ct-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:block;max-width:190px}
td .ct-co{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:inline-block;max-width:180px;vertical-align:bottom}

/* The toolbar has four controls and two buttons now. Let the search shrink
   rather than pushing Import onto its own line — a primary action that
   wraps below the search reads as belonging to the search. */
.tcard-hd .tsearch{flex:1 1 200px;min-width:170px}
.tcard-hd .pkb,.tcard-hd .tsel{max-width:158px}
/* One line per row, everywhere it matters. Two-line rows turn a page of 25
   into a page of 40 and make it unscannable. */
.ct-jt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:block;max-width:200px}

/* ── Home ────────────────────────────────────────────────────────────────
   One column, bounded and centred. The two-column version put the
   cross-workspace links in a right-hand sidebar, and on a wide monitor that
   sidebar sat a thousand pixels from the cards it belongs with — two
   clusters pinned to opposite edges of an empty page.

   A page with five things on it cannot fill a tall window. Bounded, the
   space around it reads as margin rather than as a gap where something
   failed to load. */
.hm-page .sec{margin-top:0}

/* The cross-offering lists, side by side above the offerings. A number and
   a noun — the second line under each, which explained what "Contacts"
   counts, is gone, so these are one row of text instead of two and the card
   is shorter for it. */
.hm-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));
  gap:var(--sp3);margin-bottom:var(--sp6)}
.hm-link{display:flex;align-items:baseline;gap:11px;text-align:left;
  padding:15px 16px;border:1px solid var(--bdr);border-radius:var(--r-lg);
  background:var(--card);cursor:pointer;font-family:inherit;
  transition:border-color .12s,transform .12s}
.hm-link:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--bdr));
  transform:translateY(-1px)}
.hm-link-v{font-size:22px;font-weight:650;color:var(--tx);
  font-variant-numeric:tabular-nums;line-height:1.1;flex:0 0 auto}
.hm-link-l{font-size:13.5px;font-weight:650;color:var(--tx);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-link .hm-go{margin-left:auto;color:var(--txd);flex:0 0 auto}
.hm-link:hover .hm-go{color:var(--accent)}

/* A screen with little on it does not want the full width of a wide
   monitor. Same column for the header and the content, so the two line up. */
/* The narrow-column rule lives in 19-sidebar.css, which loads after this
   file: `.main .cnt` there and `.cnt.cnt-narrow` here have identical
   specificity, so source order decides and this one lost. */

/* What has happened lately. The part of Home that moves — five static
   counts are read once and never again; this is the reason to come back,
   and the honest answer to "is anything working". */
.hm-feed{border:1px solid var(--bdr);border-radius:var(--r-lg);
  background:var(--card);overflow:hidden}
.hm-ev{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.2fr) auto;
  align-items:center;gap:12px;padding:10px 16px;
  border-bottom:1px solid var(--bdr);font-size:13px}
.hm-ev:last-child{border-bottom:0}
.hm-ev-d{width:6px;height:6px;border-radius:50%}
.hm-ev-t{font-weight:600;color:var(--tx);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.hm-ev-s{color:var(--txm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-ev-w{color:var(--txd);font-size:12px;white-space:nowrap}
@media(max-width:620px){.hm-ev{grid-template-columns:auto 1fr auto}
  .hm-ev-s{display:none}}

/* ── The import wizard ───────────────────────────────────────────────────
   Three named steps. Choosing a file, saying what each column means, and
   reading what is about to happen are three decisions — run together, they
   are how somebody confirms an import while looking at numbers produced by
   a mapping they then corrected. */
.imp-steps{display:inline-flex;align-items:center;gap:7px}
.imp-step{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  color:var(--txd)}
.imp-step em{display:grid;place-items:center;width:17px;height:17px;
  border-radius:50%;font-style:normal;font-size:10.5px;font-weight:700;
  border:1px solid var(--bdr);color:var(--txd)}
.imp-step.on{color:var(--accent)}
.imp-step.on em{border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
.imp-step.done{color:var(--txm)}
.imp-step.done em{border-color:var(--txm);color:var(--txm)}
.imp-arr{color:var(--txd);opacity:.5;font-size:12px}

.imp-warn{margin-top:10px;padding:10px 13px;border-radius:var(--r-md);
  font-size:12.5px;line-height:1.55;color:var(--txm);
  background:color-mix(in srgb,var(--amber) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--amber) 28%,transparent)}
/* The default warning is amber. A bounce or complaint rate past the level
   Amazon reviews an account at is not a warning — the whole product stops
   sending — so that one is red, and the amber `.soft` variant is the
   "watch this" reading below it. */
.imp-warn:not(.soft){color:var(--tx);
  background:color-mix(in srgb,var(--red) 10%,transparent);
  border-color:color-mix(in srgb,var(--red) 32%,transparent)}
.imp-ok{padding:14px 16px;border-radius:var(--r-md);font-size:13px;
  color:var(--green);background:color-mix(in srgb,var(--green) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--green) 25%,transparent)}

/* The rows that will not make it, with the row number they are on. "43
   unusable" is a dead end; "row 118 has no email address" is something
   somebody can go and fix. */
.imp-probs{max-height:260px;overflow:auto;border:1px solid var(--bdr);
  border-radius:var(--r-md)}
.imp-probs table{width:100%;border-collapse:collapse;font-size:12.5px}
.imp-probs th{position:sticky;top:0;background:var(--card);text-align:left;
  padding:8px 12px;font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--txd);border-bottom:1px solid var(--bdr)}
.imp-probs td{padding:7px 12px;border-bottom:1px solid var(--bdr);
  color:var(--txm);max-width:280px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.imp-probs tr:last-child td{border-bottom:0}
.imp-probs tr.bad td:last-child{color:var(--amber)}

/* Which half a new workspace belongs to. Two options, stated with what each
   half is for — "pursuit or pulse" means nothing to somebody creating their
   first workspace, and it is the one choice here that cannot be guessed
   from the name. */
.ws-half{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp3)}
@media(max-width:560px){.ws-half{grid-template-columns:1fr}}
.ws-half-c{display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  padding:12px 14px;border:1px solid var(--bdr);border-radius:var(--r-md);
  background:var(--bg-alt)}
.ws-half-c:has(input:checked){border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,transparent)}
.ws-half-c input{accent-color:var(--accent);margin-top:2px;flex:0 0 auto}
.ws-half-c b{display:block;font-size:13.5px;color:var(--tx)}
.ws-half-c em{display:block;font-style:normal;font-size:12px;color:var(--txd);
  line-height:1.5;margin-top:3px}

/* QUICK ACTIONS on a workspace overview. The three things somebody comes to
   this screen to do, and they are permanent.

   They were a numbered checklist whose finished steps were ticked and then
   hidden, which was wrong twice: importing a CSV is not something you do
   once, and hiding the done ones removed the Import button from every
   workspace that had ever imported anything — exactly the workspace that
   imports again next week.

   Side by side rather than stacked. Three full-width rows read as a sequence
   to work through; three cards read as a choice, which is what they are. */
.ov-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp3);
  margin-bottom:var(--sp5)}
@media(max-width:900px){.ov-acts{grid-template-columns:1fr}}
.ov-act{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:16px;border:1px solid var(--bdr);border-radius:var(--r-lg);
  background:var(--card)}
.ov-act-t{font-size:13.5px;font-weight:650;color:var(--tx)}
.ov-act-d{font-size:12.5px;color:var(--txd);line-height:1.5;flex:1}
/* The button sits on its own line at the bottom of the card, so three cards
   of unequal description length still line their buttons up. */
.ov-act .btn{margin-top:var(--sp2)}

/* ── Folded sections on the mapping step ─────────────────────────────────
   Everything here used to be open at once: three hundred campaigns,
   thirteen column selects and eight sample rows, on a screen whose only
   job is "is this mapping right?". Each section states its answer on the
   summary line and opens only if the answer needs checking.

   Native <details>: the browser keeps the open state, so a re-render after
   a column change does not collapse what somebody was reading. */
.imp-fold{border:1px solid var(--bdr);border-radius:var(--r-md);
  margin-bottom:var(--sp3);background:var(--bg-alt)}
.imp-fold>summary{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:11px 14px;cursor:pointer;list-style:none;user-select:none}
.imp-fold>summary::-webkit-details-marker{display:none}
.imp-fold>summary::before{content:'›';color:var(--txd);font-size:15px;
  line-height:1;transition:transform .12s;display:inline-block}
.imp-fold[open]>summary::before{transform:rotate(90deg)}
.imp-fold>summary:hover{background:var(--card-h)}
.imp-fold-t{font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--txm)}
.imp-fold-v{font-size:12.5px;color:var(--txd)}
.imp-fold>*:not(summary){padding:0 14px 12px}
.imp-fold .imp-note{margin-top:10px}
.imp-fold .imp-cps{margin-top:2px}

/* A list inside a fold: a table, capped, with its header pinned. The
   campaigns were laid out as sentences — "Name · Source · Date · N rows" —
   and a column of sentences cannot be scanned. Three hundred of them makes
   that worse rather than different. */
.imp-tbl{max-height:236px;overflow:auto;border:1px solid var(--bdr);
  border-radius:var(--r-md);background:var(--card)}
.imp-tbl table{width:100%;border-collapse:collapse;font-size:12.5px;
  table-layout:fixed}
.imp-tbl th{position:sticky;top:0;z-index:1;background:var(--card);
  text-align:left;padding:8px 12px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--txd);border-bottom:1px solid var(--bdr)}
.imp-tbl td{padding:7px 12px;border-bottom:1px solid var(--bdr);
  color:var(--txm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-tbl tr:last-child td{border-bottom:0}
.imp-tbl td:first-child{color:var(--tx);font-weight:550}
.imp-tbl th.n,.imp-tbl td.n{text-align:right;width:68px;
  font-variant-numeric:tabular-nums}
.imp-tbl th:nth-child(2),.imp-tbl td:nth-child(2){width:26%}
.imp-tbl th:nth-child(3),.imp-tbl td:nth-child(3){width:96px}
.imp-tbl tr.more td{color:var(--txd);font-weight:400;text-align:center}

/* ===================== MAPPING: ONE TABLE ================================
   Two lists side by side, each in its own scroll box, read as two competing
   jobs. HubSpot, Salesforce, Pipedrive and Zoho all do the same one thing
   instead: a single table, one row per column of the file, with an example
   value from the file and the target field as a select.

   Four tracks: the column name, the example, the arrow, the select. The
   example gets the elastic one — a name is short and predictable and a cell
   value is neither. */
.imp-t{width:100%;border-collapse:collapse;table-layout:fixed}
/* STICKY, because the list scrolls. Nine columns fit and a HubSpot export
   is forty — and a table that scrolls its headings away leaves the reader
   guessing which of the four things a cell is. */
.imp-t th{position:sticky;top:0;z-index:1;
  text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txd);padding:7px 10px;
  border-bottom:1px solid var(--bdr);background:var(--card)}
.imp-t th:nth-child(1){width:26%}
.imp-t th:nth-child(2){width:auto}
.imp-t th:nth-child(3){width:20px;padding:0}
.imp-t th:nth-child(4){width:34%}
.imp-t td{padding:5px 10px;border-bottom:1px solid var(--bdr-f,transparent);
  vertical-align:middle}
.imp-t tbody tr:hover td{background:var(--card-h)}

/* The file's own words, in the file's own typeface. Mono because it is data
   quoted back, and the reader is comparing it against a spreadsheet. */
.imp-t-h{font-family:var(--mono,ui-monospace,monospace);font-size:12.5px;
  font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.imp-t-v{font-family:var(--mono,ui-monospace,monospace);font-size:12px;
  color:var(--txm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-t-v i{font-style:normal;color:var(--txd);opacity:.75}
.imp-t-a{color:var(--txd);font-size:11px;text-align:center;padding:0}
.imp-t-f select{width:100%;min-width:0;padding:6px 8px;border-radius:var(--r-sm);
  border:1px solid var(--bdr);background:var(--ibg);color:var(--tx);
  font-family:inherit;font-size:12.5px;outline:none}
.imp-t-f select:focus{border-color:var(--accent);box-shadow:var(--ring)}
/* THE ADDRESS IS THE KEY, so its row is marked — and a row going nowhere
   is dimmed rather than hidden, because "not imported" is a decision the
   reader should be able to see they made. */
.imp-t tr.key .imp-t-h{color:var(--accent)}
.imp-t tr.off .imp-t-h,.imp-t tr.off .imp-t-v{opacity:.45}


/* Fields a workspace defines for itself. Two lists with the same shape: the
   ones that exist, and the ones sitting in past imports waiting to be
   named. Same row so the second reads as "these could be the first". */
.fld-list{display:flex;flex-direction:column;border:1px solid var(--bdr);
  border-radius:var(--r-md);overflow:hidden;margin-top:12px}
.fld-row{display:grid;grid-template-columns:minmax(0,1.1fr) 120px minmax(0,1.4fr) auto;
  align-items:center;gap:14px;padding:11px 14px;
  border-bottom:1px solid var(--bdr);font-size:13px}
.fld-row:last-child{border-bottom:0}
.fld-row.found{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.fld-n{font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.fld-k{color:var(--txm);font-size:12px}
.fld-s{color:var(--txd);font-size:12px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.fld-row .btn{padding:3px 11px;font-size:12px}
@media(max-width:700px){.fld-row{grid-template-columns:1fr auto}
  .fld-k,.fld-s{display:none}}

/* ===========================================================================
   CAMPAIGNS
   ===========================================================================
   Six rates across the top, in the order they are caused: delivered, opened,
   clicked, click-to-open, replied, bounced. Six rather than the usual four
   because the funnel has six stages and dropping two of them is what made the
   old screen unable to answer "why".

   Six across needs a narrower card than .g4 gives, and it has to fold rather
   than shrink — a percentage at 11px is not a number anybody reads. */
.g6{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp3);
  margin-bottom:var(--sp4)}
@media(max-width:1400px){.g6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.g6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.g6{grid-template-columns:1fr}}
/* The rate cards carry a fraction under each number, which is longer than the
   one-line subtitle .mc was built for. */
.g6 .mc .mv{font-size:25px}
.g6 .mc .ms{min-height:32px}

/* The funnel. Counts rather than percentages, because "how many people" is
   the form somebody uses to decide whether to act — 4% sounds small and is
   ninety people. */
.cp-funnel{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp3);
  padding:var(--sp3) 0}
@media(max-width:900px){.cp-funnel{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.cp-funnel{grid-template-columns:repeat(2,1fr)}}
.cp-step-n{font-size:22px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.cp-step-l{font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txd);margin:3px 0 7px}
.cp-bar{height:4px;border-radius:2px;background:var(--bdr);overflow:hidden}
.cp-bar i{display:block;height:100%;background:var(--accent);
  transition:width .25s}

/* What went wrong, kept apart from the funnel. These are not stages people
   pass through — they are the ways a send fails — and mixing them into the
   same row implied a sequence that does not exist. */
.cp-neg{display:flex;flex-wrap:wrap;gap:var(--sp2) var(--sp4);
  border-top:1px solid var(--bdr);padding-top:var(--sp3)}
.cp-neg-i{display:flex;align-items:baseline;gap:7px;font-size:12.5px}
.cp-neg-l{color:var(--txm)}
.cp-neg-v{font-weight:600;font-variant-numeric:tabular-nums}

/* One line back to the list, with enough of the campaign on it to know which
   one is open. The shell's own title says "Campaigns" and cannot say which. */
.cp-back{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:var(--sp4)}
.cp-back-n{font-size:17px;font-weight:650;letter-spacing:-.01em}
.cp-back-m{font-size:12.5px;color:var(--txd)}

/* ---------- The timeline, and logging into it ---------- */
/* Three sources on one line since 033, so the label column carries more than
   one word: "inbound call · connected · 6 min" is one reading, and three
   separate pills would be three. Wider, and allowed to wrap rather than being
   clipped — a truncated outcome is the one part nobody can guess. */
.ct-tl-row{grid-template-columns:10px minmax(120px,168px) 1fr auto}
.ct-tl-k{white-space:normal;text-transform:none;font-size:12px;letter-spacing:0}
/* Logged by a person, not sent by a campaign. MARKED, not separated — two
   lists would be two timelines again, which is what this replaced. */
.ct-tl-row.by-hand{box-shadow:inset 2px 0 0 var(--purple)}
.ct-tl-row.by-hand .ct-tl-k{color:var(--tx);font-weight:600}
.ct-tl-d{white-space:normal}
.ct-tl-by{font-size:11px;color:var(--txd);margin-left:7px;padding:1px 6px;
  border:1px solid var(--bdr);border-radius:20px;white-space:nowrap}
.ct-tl-ws{font-size:11px;color:var(--txm);margin-left:7px}

.ct-log-bar{display:flex;flex-wrap:wrap;gap:7px;padding-bottom:var(--sp3);
  margin-bottom:var(--sp3);border-bottom:1px solid var(--bdr)}
.ct-log-ro{font-size:12.5px;color:var(--txd);padding:10px 12px;
  border:1px dashed var(--bdr);border-radius:8px;margin-bottom:var(--sp3)}
.ct-log{border:1px solid var(--accent);border-radius:10px;padding:13px 14px;
  margin-bottom:var(--sp4);background:var(--bg)}
.ct-log-hd{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--sp3)}
.ct-log-hd>span{font-size:13.5px;font-weight:600}
.ct-log-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp3)}
.ct-log-grid .ct-wide{grid-column:1/-1}
@media(max-width:560px){.ct-log-grid{grid-template-columns:1fr}}
/* The panel styled inputs only. A textarea and a select in the same form
   looked like a different application. */
.ct-fld textarea,.ct-fld select{padding:9px 11px;border-radius:var(--r-sm);
  border:1px solid var(--bdr);background:var(--ibg);color:var(--tx);
  font-family:inherit;font-size:13.5px;outline:none;resize:vertical;
  transition:border-color .15s,box-shadow .15s}
.ct-fld textarea:focus,.ct-fld select:focus{border-color:var(--accent);
  box-shadow:var(--ring)}
.ct-log .ct-foot{margin-top:var(--sp3)}

/* ---------- Audiences: what uses one, and one chosen for a campaign ---------- */
.sg-used-by{border:1px solid var(--bdr);border-radius:8px;padding:11px 13px;
  margin-top:var(--sp4);background:var(--bg)}
.sg-used-t{font-size:12px;font-weight:600;color:var(--txm);margin-bottom:7px}
.sg-used-r{display:flex;justify-content:space-between;gap:12px;font-size:13px;
  padding:4px 0}
.sg-used-r+.sg-used-r{border-top:1px solid color-mix(in srgb,var(--bdr) 55%,transparent)}
.sg-used-s{font-size:11.5px;color:var(--txd);text-transform:uppercase;
  letter-spacing:.05em;white-space:nowrap}
/* .cpn-aud* was here: the card a handed-in audience was shown in, beside a
   "Choose differently" button that swapped it for the batch and industry
   boxes. There is one control now — a select listing every saved audience —
   so the card, the button and the two shapes they toggled between are gone.
   Styling left behind for a block nothing renders reads as a component to
   reuse and is not one. */
/* The text field inside a dialog — uiAsk. Matches the panel inputs so asking
   for a name does not look like a different application. */
.dlg-in{width:100%;padding:9px 11px;border-radius:var(--r-sm);
  border:1px solid var(--bdr);background:var(--ibg);color:var(--tx);
  font-family:inherit;font-size:13.5px;outline:none;
  transition:border-color .15s,box-shadow .15s}
.dlg-in:focus{border-color:var(--accent);box-shadow:var(--ring)}

/* Fixed or Live, when saving an audience from Contacts. This was built from
   inline style strings assembled in JS and re-assigned on every change, which
   is a stylesheet written one property at a time in the wrong file; the state
   is a class now and the rules live here. */
.aud-k-q{margin:14px 0 7px;font-weight:600;color:var(--tx);font-size:13px;
  white-space:normal}
.aud-k-fixed{margin-top:12px;font-size:12.5px;color:var(--txm);line-height:1.55;
  white-space:normal}
/* white-space:normal is NOT optional here. These cards live inside .dlg-d,
   which is `pre-line` so a dialog body can use \n\n for paragraphs — and that
   turns every newline in this markup into a visible line break, which put the
   radio button on one line and the word beside it on the next. Reset at the
   card, so the markup can stay readable. */
.aud-k{display:block;white-space:normal;line-height:1.45;
  border:1px solid var(--bdr);border-radius:8px;
  padding:10px 12px;margin-bottom:8px;cursor:pointer;text-align:left;
  transition:border-color .15s,background .15s}
.aud-k:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--bdr))}
.aud-k.on{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
.aud-k input{accent-color:var(--accent);margin-right:8px}
.aud-k b{font-size:13px}
/* Indented to clear the radio, so the explanation reads as belonging to the
   title above it rather than as a second line of the same sentence. */
.aud-k span{display:block;font-size:12px;color:var(--txd);
  margin:3px 0 0 24px;line-height:1.5}

/* ---------- Audiences: the three steps, on the screen ---------- */
/* "I do not understand this tab" is what got the last version removed. An
   audience only makes sense as the middle of three things, so the screen
   shows all three and marks where you are. */
.sg-flow{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;
  margin-bottom:var(--sp4)}
.sg-step{flex:1 1 200px;min-width:0;border:1px solid var(--bdr);border-radius:10px;
  padding:11px 13px;display:flex;flex-direction:column;gap:3px;cursor:pointer;
  background:var(--card);transition:border-color .15s,background .15s}
.sg-step:hover{border-color:var(--accent)}
.sg-step.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent);
  cursor:default}
.sg-step-n{font-size:11px;font-weight:700;color:var(--txd);letter-spacing:.1em}
.sg-step.on .sg-step-n{color:var(--accent)}
.sg-step-t{font-size:13.5px;font-weight:600;color:var(--tx)}
.sg-step-d{font-size:12px;color:var(--txm);line-height:1.4}
.sg-step-arrow{align-self:center;color:var(--txd);font-size:15px}
@media(max-width:720px){.sg-step-arrow{display:none}.sg-step{flex-basis:100%}}

/* ---------- Ready to send? ---------- */
/* The exclusions lead, the button is the smallest thing on the panel: every
   one of those counts is a decision, and each is otherwise discovered after
   the send rather than before it. */
.cp-ready{margin-bottom:var(--sp4)}
.cp-row{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--bdr);font-size:13px;color:var(--tx)}
.cp-row:last-of-type{border-bottom:0}
.cp-row-l{font-size:12px;color:var(--txd)}
.cp-row select{max-width:360px}
.cp-row .cp-how{margin:0}
.cp-step-p{font-size:12px;color:var(--txd);margin-left:8px;font-weight:400}
.cp-how{display:flex;flex-direction:column;gap:9px;margin-bottom:var(--sp3);font-size:13px;color:var(--tx)}
.cp-how label{display:flex;align-items:center;gap:8px}
.cp-how input[type=number]{width:72px;padding:4px 7px;border:1px solid var(--bdr);border-radius:6px;
  background:var(--bg);color:var(--tx);font:inherit}
.cp-bar{height:10px;border-radius:6px;background:var(--bg);border:1px solid var(--bdr);overflow:hidden}
.cp-bar i{display:block;height:100%;background:var(--green);transition:width .4s}
.cp-bar-l{font-size:12.5px;color:var(--txm);margin:8px 0 var(--sp3)}
.cp-ready-b{padding:var(--sp4)}
.cp-ready-n{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:var(--sp3)}
.cp-rn{display:flex;gap:9px;align-items:baseline}
.cp-rv{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--txm);line-height:1}
.cp-rn.ok .cp-rv{color:var(--green)}
.cp-rl{font-size:12.5px;color:var(--txm);display:flex;flex-direction:column}
.cp-rl em{font-style:normal;font-size:11.5px;color:var(--txd)}
.cp-excl{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:var(--sp3)}
.cp-excl-r{display:flex;gap:7px;align-items:baseline;border:1px solid var(--bdr);
  border-radius:20px;padding:3px 11px;background:var(--bg)}
.cp-excl-n{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--amber)}
.cp-excl-l{font-size:12px;color:var(--txm)}
.cp-sample{font-size:12px;color:var(--txd);margin-bottom:var(--sp3)}
.cp-sample span{color:var(--txm)}
/* A panel title's secondary note — the class was used before it existed. */
.pt .pt-m{font-size:12px;font-weight:400;color:var(--txd);margin-left:auto}

/* ---------- Offerings: what a thing IS, said on screen ---------- */
/* `kind` has been stored since 031 and shown nowhere, so six things Cloud.in
   sells read as one undifferentiated list. These are the smallest marks that
   make a product and a service legible as different things. */
.off-tag{font-size:11px;color:var(--txd);margin-left:7px;padding:1px 7px;
  border:1px solid var(--bdr);border-radius:20px;text-transform:lowercase;
  letter-spacing:.02em;vertical-align:middle}
.sec-d{font-size:12px;color:var(--txd);font-weight:400;margin-left:9px}
.sec-n{font-size:12px;color:var(--txd);font-variant-numeric:tabular-nums;
  margin-left:auto}
/* Choosing a kind, and choosing whether it prospects. A radio list that reads
   as sentences rather than as a dropdown of nouns: the difference between a
   product and a service decides what the whole screen then shows. */
.off-pick{display:flex;gap:9px;align-items:flex-start;font-size:13px;
  color:var(--txm);cursor:pointer;padding:7px 9px;border-radius:7px;
  border:1px solid transparent}
.off-pick:hover{background:var(--card-h);border-color:var(--bdr)}
.off-pick input{margin-top:2px;flex:0 0 auto;cursor:pointer}
.off-pick b{color:var(--tx);font-weight:600}



/* ---------- THE FOCUS ---------- */
/* "What are we marketing?" — one control, in the page header, on every screen
   it applies to.

   A SELECT AND NOT A ROW OF TABS. Tabs are a rail by another name: they stop
   fitting at about six, and this list is meant to reach thirty without the
   navigation noticing. A grouped select shows Company, Products and Services
   as three headings inside one line of chrome, and costs the same line
   whether there are three entries or thirty. */
.fcs{display:flex;align-items:center;gap:9px}
.fcs-l{font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--txd);flex:0 0 auto}
/* Clearing it is the "Everything" row inside the panel, not a separate ✕
   beside the control. Two ways to say "no focus" is two things to learn. */
@media(max-width:720px){
  .phd{flex-direction:column;align-items:stretch}
  .phd-r{justify-content:flex-start}
  .fcs .pkb{flex:1;max-width:none}
}

/* ---------- campaign: the Send card ---------- */
.cp2{padding:0;margin-bottom:var(--sp4);overflow:hidden}
.cp2-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:20px 24px 16px;border-bottom:1px solid var(--bdr)}
.cp2-t{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--tx)}
.cp2-s{font-size:12.5px;color:var(--txd);margin-top:3px}
.cp2-mode{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:20px;letter-spacing:.02em;white-space:nowrap}
.cp2-mode.test{color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,transparent)}
.cp2-mode.live{color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent)}
.cp2-mode.off{color:var(--txm);background:color-mix(in srgb,var(--tx) 8%,transparent)}
.cp2-grid{display:grid;grid-template-columns:1.3fr 1fr 1.2fr}
.cp2-cell{padding:18px 24px;border-right:1px solid var(--bdr);min-width:0}
.cp2-cell:last-child{border-right:0}
.cp2-l{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--txd);margin-bottom:9px}
.cp2-v{font-size:24px;font-weight:600;color:var(--tx);font-variant-numeric:tabular-nums;line-height:1.1}
.cp2-v span{font-size:13px;font-weight:400;color:var(--txm)}
.cp2-v.sm{font-size:14px;font-weight:500}
.cp2-sub{font-size:12px;color:var(--txd);margin-top:6px}
.cp2-sel{width:100%;padding:9px 34px 9px 12px;border-radius:var(--r-sm);border:1px solid var(--bdr);
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a93a6' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  color:var(--tx);font:inherit;font-size:13.5px;-webkit-appearance:none;appearance:none;cursor:pointer}
.cp2-sel:focus{outline:none;border-color:var(--accent)}
.cp2-seg{display:inline-flex;border:1px solid var(--bdr);border-radius:var(--r-sm);overflow:hidden;background:var(--bg)}
.cp2-seg button{display:flex;align-items:center;gap:6px;padding:7px 14px;border:0;background:transparent;
  color:var(--txm);font:inherit;font-size:13px;cursor:pointer}
.cp2-seg button+button{border-left:1px solid var(--bdr)}
.cp2-seg button.on{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--tx);font-weight:500}
.cp2-seg input{width:52px;padding:3px 6px;border-radius:4px;border:1px solid var(--bdr);background:var(--card);
  color:var(--tx);font:inherit;font-size:13px;text-align:center}
.cp2-last{padding:10px 24px 0}
.cp2-prog{padding:18px 24px}
.cp2-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;
  border-top:1px solid var(--bdr);background:color-mix(in srgb,var(--tx) 2%,transparent)}
.cp2-note{font-size:12.5px;color:var(--txm)}
.cp2-go{padding:9px 20px;border-radius:var(--r-sm);border:0;font:inherit;font-size:13.5px;font-weight:600;
  color:#04131a;background:var(--accent);cursor:pointer;white-space:nowrap}
.cp2-go:hover:not(:disabled){background:var(--accent-h)}
.cp2-go:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:900px){.cp2-grid{grid-template-columns:1fr}.cp2-cell{border-right:0;border-bottom:1px solid var(--bdr)}}

/* Send card, second pass: calmer grid, the mode switch where the button is. */
.cp2-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.cp2-cell{padding:20px 24px 22px}
.cp2-seg button{padding:8px 16px}
.cp2-foot{align-items:center;padding:16px 24px}
.cp2-gate{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.cp2-gate .cp2-l{margin:0}
.cp2-gseg{display:inline-flex;padding:3px;gap:2px;border-radius:8px;background:color-mix(in srgb,var(--tx) 6%,transparent)}
.cp2-gseg button{border:0;background:transparent;color:var(--txm);font:inherit;font-size:12.5px;
  padding:5px 12px;border-radius:6px;cursor:pointer}
.cp2-gseg button:hover{color:var(--tx)}
.cp2-gseg button.on{cursor:default;font-weight:600}
.cp2-gseg button.on.test{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber)}
.cp2-gseg button.on.live{background:color-mix(in srgb,var(--red) 18%,transparent);color:var(--red)}
.cp2-gseg button.on.off{background:color-mix(in srgb,var(--tx) 12%,transparent);color:var(--tx)}
.cp2-go.live{background:var(--red);color:#fff}
.cp2-go.live:hover:not(:disabled){background:color-mix(in srgb,var(--red) 85%,#fff)}
.cp2-empty{margin-top:4px;padding:28px 24px;border:1px dashed var(--bdr);border-radius:var(--r-lg);
  text-align:center;color:var(--txd);font-size:13.5px}
@media(max-width:900px){.cp2-grid{grid-template-columns:1fr}.cp2-foot{flex-direction:column;align-items:stretch}}

/* Copy me row */
.cp2-copy{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 24px;
  border-top:1px solid var(--bdr);font-size:13px;color:var(--tx)}
.cp2-copy input[type=number]{width:64px}
.cp2-copy input[type=email]{width:220px}
.cp2-copy input[type=number],.cp2-copy input[type=email]{padding:5px 8px;border-radius:6px;
  border:1px solid var(--bdr);background:var(--bg);color:var(--tx);font:inherit;font-size:13px}
.cp2-copy input:disabled{opacity:.45}
.cp2-copy-h{flex-basis:100%;font-size:12px;color:var(--txd);margin-left:42px}
.cp2-tgl{position:relative;display:inline-block;width:34px;height:20px;cursor:pointer;flex-shrink:0}
.cp2-tgl input{position:absolute;opacity:0;width:0;height:0}
.cp2-tgl-t{position:absolute;inset:0;border-radius:20px;background:color-mix(in srgb,var(--tx) 18%,transparent);transition:background .15s}
.cp2-tgl-t::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s}
.cp2-tgl input:checked+.cp2-tgl-t{background:var(--accent)}
.cp2-tgl input:checked+.cp2-tgl-t::after{transform:translateX(14px)}
.cp2-tgl input:focus-visible+.cp2-tgl-t{outline:2px solid var(--accent);outline-offset:2px}

/* Test mode's count: one labelled box, not a First/All choice. */
.cp2-segl{display:flex;align-items:center;padding:0 4px 0 14px;font-size:13px;color:var(--txm)}
.cp2-seg .cp2-segl+input{margin:5px 6px 5px 6px}
/* The focus a new campaign is for, beside its title. */
.cpn-for{font-weight:500;color:var(--txm)}
/* Test samples, second pass: a stepper and a field of address chips, drawn
   like the Template select beside them rather than as boxes inside boxes. */
.cps-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cps-step{display:inline-flex;align-items:center;height:34px;border:1px solid var(--bdr);
  border-radius:var(--r-sm);background:var(--bg)}
.cps-step button{width:32px;height:100%;border:0;background:transparent;color:var(--txm);
  font:inherit;font-size:16px;line-height:1;cursor:pointer;border-radius:var(--r-sm)}
.cps-step button:hover:not(:disabled){color:var(--tx);background:var(--card-h)}
.cps-step button:disabled{opacity:.35;cursor:default}
.cps-step button:focus-visible{outline:none;box-shadow:var(--ring)}
.cps-n{min-width:26px;text-align:center;font-size:14px;font-weight:600;color:var(--tx);
  font-variant-numeric:tabular-nums}
.cps-of{font-size:12.5px;color:var(--txm)}
.cps-to{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;min-height:38px;
  padding:5px 8px;border:1px solid var(--bdr);border-radius:var(--r-sm);background:var(--bg);cursor:text}
.cps-to:focus-within{border-color:var(--accent)}
.cps-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:3px 4px 3px 10px;
  border-radius:999px;background:color-mix(in srgb,var(--accent) 13%,transparent);
  color:var(--tx);font-size:12.5px;line-height:1.3;overflow-wrap:anywhere}
.cps-chip.bad{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.cps-chip button{width:18px;height:18px;display:grid;place-items:center;border:0;border-radius:50%;
  background:transparent;color:var(--txm);font-size:13px;line-height:1;cursor:pointer;padding:0}
.cps-chip button:hover{background:color-mix(in srgb,var(--tx) 12%,transparent);color:var(--tx)}
.cps-to input{flex:1 1 140px;min-width:120px;border:0;background:transparent;outline:none;
  color:var(--tx);font:inherit;font-size:13px;padding:4px 2px}
.cps-to input::placeholder{color:var(--txd)}

/* The recipients pager: where you are, numbered pages, and page size, inside
   the card's own padding rather than flush against its edge. */
.cpg{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 20px;border-top:1px solid var(--bdr)}
.cpg-info{font-size:12.5px;color:var(--txm);font-variant-numeric:tabular-nums}
.cpg-info b{color:var(--tx);font-weight:600}
.cpg-pages{display:flex;align-items:center;gap:4px}
.cpg-n{min-width:32px;height:32px;padding:0 8px;display:inline-grid;place-items:center;
  border-radius:var(--r-sm);border:1px solid transparent;background:transparent;color:var(--txm);
  font:inherit;font-size:13px;font-variant-numeric:tabular-nums;cursor:pointer}
.cpg-n:hover:not(:disabled):not(.on){background:var(--card-h);color:var(--tx)}
.cpg-n.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 35%,transparent);font-weight:600;cursor:default}
.cpg-n:disabled{opacity:.35;cursor:default}
.cpg-n:focus-visible{outline:none;box-shadow:var(--ring)}
.cpg-arr{font-size:17px;line-height:1}
.cpg-gap{min-width:20px;text-align:center;color:var(--txd);font-size:13px}
.cpg-size{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--txm)}
.cpg-size select{padding:5px 8px;border-radius:var(--r-sm);border:1px solid var(--bdr);
  background:var(--bg);color:var(--tx);font:inherit;font-size:12.5px}
@media(max-width:640px){.cpg{justify-content:center}.cpg-info,.cpg-size{width:100%;justify-content:center;text-align:center}}

/* GENUINE AND AUTOMATED. One bar is the raw count: the solid part is people,
   the hatched part is scanners and prefetch. Same two marks everywhere. */
.cp-step .cp-bar{display:flex}
.cp-step .cp-bar i{flex:none}
.cp-bar i.auto,.gsplit::after{background:repeating-linear-gradient(135deg,
  color-mix(in srgb,var(--txd) 55%,transparent) 0 3px,transparent 3px 6px)}
.gsplit{position:relative;display:flex;height:6px;margin-top:12px;border-radius:3px;overflow:hidden;
  background:transparent}
.gsplit i{display:block;height:100%;background:var(--gc);flex:none}
.gsplit::after{content:"";flex:1 1 auto}
.gsplit-l{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:7px;font-size:11.5px;color:var(--txm)}
.gsplit-l span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.gdot{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--gc,var(--accent));flex:none}
.gdot.auto{background:repeating-linear-gradient(135deg,
  color-mix(in srgb,var(--txd) 70%,transparent) 0 2px,transparent 2px 4px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--txd) 45%,transparent)}
.gauto{font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--txd);white-space:nowrap}
.gchip{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11.5px;color:var(--txm);
  border:1px dashed color-mix(in srgb,var(--txd) 55%,transparent);cursor:help}
.gexp{display:grid;grid-template-columns:auto 1fr;gap:6px 8px;align-items:baseline;margin-top:14px;
  padding:12px 14px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--tx) 3%,transparent);
  font-size:12.5px;line-height:1.55;color:var(--txm)}
.gexp .gdot{margin-top:4px}
.gexp b{color:var(--tx);font-weight:600}

/* ── RESULTS: Overview · Activity · People ───────────────────────────────── */
.cpr{margin-top:var(--sp4);background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-lg);overflow:hidden}
.cpr-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 24px 0;border-bottom:1px solid var(--bdr)}
.cpr-t{font-size:16px;font-weight:650;color:var(--tx);padding-bottom:14px}
.cpr-tabs{display:flex;gap:2px}
.cpr-tabs button{position:relative;padding:10px 14px 13px;border:0;background:transparent;color:var(--txm);
  font:inherit;font-size:13.5px;font-weight:550;cursor:pointer}
.cpr-tabs button:hover{color:var(--tx)}
.cpr-tabs button.on{color:var(--tx)}
.cpr-tabs button.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;
  border-radius:2px;background:var(--accent)}
.cpr-tabs .n{margin-left:7px;font-size:11.5px;font-weight:600;color:var(--txd)}
.cpr .tcard{border:0;border-radius:0;background:transparent;margin:0;box-shadow:none}

.cpr-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:20px 24px 0}
.cpt{padding:14px 16px 15px;border-radius:var(--r-md,10px);border:1px solid var(--bdr);
  background:color-mix(in srgb,var(--tx) 2%,transparent);min-width:0}
.cpt-l{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--txd)}
.cpt-v{margin-top:8px;font-size:26px;font-weight:650;color:var(--tx);line-height:1.1;letter-spacing:-.02em}
.cpt-r{margin-left:8px;font-size:13px;font-weight:500;color:var(--gc);letter-spacing:0}
.cpt-s{margin-top:4px;font-size:12px;color:var(--txd)}
.cpt .gsplit{margin-top:12px}
.cpt-a{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:11.5px;color:var(--txd)}
.cpt.bad{border-color:color-mix(in srgb,var(--red) 35%,transparent);
  background:color-mix(in srgb,var(--red) 6%,transparent)}
.cpt.bad .cpt-v{color:var(--red)}

.cpr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding:14px 24px 4px;
  font-size:12.5px;color:var(--txm)}
.cpr-meta b{color:var(--tx);font-weight:600;margin-left:4px;font-variant-numeric:tabular-nums}
.cpr-why{margin-left:auto;display:inline-flex;align-items:center;gap:6px;cursor:help;
  color:var(--txd);border-bottom:1px dashed color-mix(in srgb,var(--txd) 50%,transparent)}

.cpr-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 24px 0}
.cpr-p{padding:16px 18px;border:1px solid var(--bdr);border-radius:var(--r-md,10px);min-width:0}
.cpr > .cpr-p{margin:12px 24px 0}
.cpr > .cpr-p:last-child{margin-bottom:24px}
.cpr-2:last-child{padding-bottom:24px}
.cpr-pt{font-size:13.5px;font-weight:650;color:var(--tx)}
.cpr-ps{font-size:12px;color:var(--txd);margin:2px 0 12px}
.cpr-empty{font-size:13px;color:var(--txd);padding:10px 0}
.cpr-note{font-size:11.5px;color:var(--txd);margin-top:10px}
.cpr-leg{display:flex;gap:14px;margin-top:10px;font-size:11.5px;color:var(--txd)}
.cpr-leg span{display:inline-flex;align-items:center;gap:6px}
.hb{display:grid;grid-template-columns:118px 1fr 58px;align-items:center;gap:10px;padding:5px 0;font-size:12.5px}
.hb-l{color:var(--txm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-bar{display:flex;height:8px;border-radius:4px;background:color-mix(in srgb,var(--tx) 5%,transparent);overflow:hidden}
.hb-bar i{display:block;height:100%;flex:none}
.hb-bar i.auto{background:repeating-linear-gradient(135deg,
  color-mix(in srgb,var(--txd) 55%,transparent) 0 3px,transparent 3px 6px)}
.hb-n{text-align:right;color:var(--tx)}
.hb-n em{font-style:normal;color:var(--txd)}
.cpr-tbl{width:100%;border-collapse:collapse;font-size:13px}
.cpr-tbl th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--txd);padding:0 10px 8px;border-bottom:1px solid var(--bdr)}
.cpr-tbl td{padding:10px;border-bottom:1px solid color-mix(in srgb,var(--bdr) 60%,transparent)}
.cpr-tbl tr:last-child td{border-bottom:0}
.cpr-tbl .n{text-align:right}
.cpr-co{display:block;color:var(--tx);font-weight:550}
.cpr-dom{display:block;font-size:11.5px;color:var(--txd)}
.cpr-pc{margin-left:6px;font-size:11px;color:var(--txd)}
.cpr-link{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;
  border-top:1px solid color-mix(in srgb,var(--bdr) 60%,transparent)}
.cpr-link:first-of-type{border-top:0}

/* Activity */
.cpa-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 24px}
.cpa-seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--tx) 5%,transparent)}
.cpa-seg button{padding:6px 12px;border:0;border-radius:6px;background:transparent;color:var(--txm);
  font:inherit;font-size:12.5px;font-weight:550;cursor:pointer}
.cpa-seg button:hover{color:var(--tx)}
.cpa-seg button.on{background:var(--card);color:var(--tx);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.cpa-tog{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--txm);cursor:pointer;user-select:none}
.cpa-tog input{position:absolute;opacity:0;pointer-events:none}
.cpa-tog span{position:relative;width:30px;height:17px;border-radius:999px;background:var(--bdr);transition:background .15s}
.cpa-tog span::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:var(--tx);transition:transform .15s}
.cpa-tog input:checked+span{background:var(--accent)}
.cpa-tog input:checked+span::after{transform:translateX(13px);background:#04121a}
.cpa-tog input:focus-visible+span{box-shadow:var(--ring)}
.cpa-list{border-top:1px solid var(--bdr)}
.cpa-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:13px 24px;border-bottom:1px solid color-mix(in srgb,var(--bdr) 60%,transparent)}
.cpa-row:hover{background:color-mix(in srgb,var(--tx) 2.5%,transparent)}
.cpa-row.auto{opacity:.62}
.cpa-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ic) 14%,transparent);color:var(--ic)}
.cpa-ic.t-open{--ic:var(--amber)} .cpa-ic.t-click{--ic:var(--accent)} .cpa-ic.t-unsubscribe{--ic:var(--txm)}
.cpa-ic.t-bounce{--ic:var(--red)} .cpa-ic.t-complaint{--ic:var(--red)} .cpa-ic.t-delivered{--ic:var(--teal)}
.cpa-line{font-size:13.5px;color:var(--txm);line-height:1.4}
.cpa-line b{color:var(--tx);font-weight:600}
.cpa-url{color:var(--accent)}
.cpa-muted{color:var(--txd)}
.cpa-sub{margin-top:2px;font-size:12px;color:var(--txd);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpa-right{display:grid;justify-items:end;gap:2px;text-align:right}
.cpa-time{font-size:12.5px;color:var(--tx);font-variant-numeric:tabular-nums;white-space:nowrap}
.cpa-after{font-size:11.5px;color:var(--txd);white-space:nowrap}
.gchip.gen{border-style:solid;border-color:color-mix(in srgb,var(--green) 40%,transparent);
  color:var(--green);background:color-mix(in srgb,var(--green) 10%,transparent);cursor:default}

@media(max-width:1100px){.cpr-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.cpr-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.cpr-2{grid-template-columns:1fr}
  .cpr-why{margin-left:0}.cpa-row{grid-template-columns:28px minmax(0,1fr)}.cpa-right{grid-column:2;justify-items:start;text-align:left}}

/* People and scanners: the info mark, and cards with a footer so none is a
   lone number in empty space. */
.cpi{position:relative;display:inline-grid;place-items:center;width:15px;height:15px;margin-left:4px;
  border-radius:50%;border:1px solid color-mix(in srgb,var(--txd) 60%,transparent);color:var(--txd);
  font:italic 600 9.5px/1 Georgia,serif;letter-spacing:0;text-transform:none;vertical-align:1px;cursor:help}
.cpi:hover,.cpi:focus-visible{color:var(--tx);border-color:var(--tx);outline:none}
.cpi-pop{position:absolute;z-index:40;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-4px);
  width:290px;padding:12px 14px;border-radius:10px;border:1px solid var(--bdr);background:var(--card-h,var(--card));
  box-shadow:0 12px 32px rgba(0,0,0,.35);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:12.5px;font-weight:400;line-height:1.55;font-style:normal;letter-spacing:0;text-transform:none;
  color:var(--txm);text-align:left;white-space:normal;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s}
.cpi-pop b{display:block;margin-top:6px;color:var(--tx);font-weight:600}
.cpi-pop b:first-child{margin-top:0}
.cpi-x{display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--bdr);color:var(--txd)}
.cpi:hover .cpi-pop,.cpi:focus .cpi-pop{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.g6 .mc,.cpr,.cpt{overflow:visible}
.g6 .mc .mb{border-radius:var(--r-lg) var(--r-lg) 0 0}
.cpr-hd{border-radius:var(--r-lg) var(--r-lg) 0 0}
.cpk .mv{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cpk-f{margin-top:auto;padding-top:14px}
.cpk-t{font-size:11.5px;line-height:1.5;color:var(--txd);border-top:1px solid color-mix(in srgb,var(--bdr) 70%,transparent);
  margin-top:auto;padding-top:10px}
.cpk .ms{min-height:0}
.cpk-v{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:10.5px;font-weight:650;line-height:1;letter-spacing:.05em;
  text-transform:uppercase;padding:4px 8px;border-radius:999px;align-self:center;white-space:nowrap}
.cpk .mv{flex-wrap:nowrap}
.cpk-v.ok{color:var(--green);background:color-mix(in srgb,var(--green) 13%,transparent)}
.cpk-v.warn{color:var(--amber);background:color-mix(in srgb,var(--amber) 14%,transparent)}
.cpk-v.bad{color:var(--red);background:color-mix(in srgb,var(--red) 14%,transparent)}
.cpk .gsplit{margin-top:0}
.cpr-why{border-bottom:0;cursor:default}
.cpa-bar .cpi{margin-left:-2px}
.g6 .mc:hover,.g6 .mc:focus-within,.cpt:hover,.cpt:focus-within,.cpr-p:hover,.cpa-bar:hover{position:relative;z-index:6}

/* ── TABLE TOOLBARS, APPLICATION-WIDE ───────────────────────────────────────
   One row: search, count, filters, then icon actions and the one primary
   button. Icon buttons are square and carry their words in title and
   aria-label. The row only wraps when the window genuinely cannot hold it. */
.tcard-hd{flex-wrap:nowrap;gap:8px;padding:14px 18px}
.tcard-hd > *{flex-shrink:0}
.tcard-hd .tsearch{flex:1 1 220px;min-width:140px;max-width:300px}
.tcard-hd .trows{font-size:12.5px}
.tcard-hd .tsel,.tcard-hd .pkb{height:34px;font-size:12.5px;padding-top:0;padding-bottom:0;max-width:170px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcard-hd .btn{height:34px}
@media(max-width:1280px){.tcard-hd{flex-wrap:wrap}}
/* Row 2 of every list: its filters, as one kind of picker, wrapping freely.
   Row 1 above keeps only search, count, actions and the main button. */
.tcard-flt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 18px 14px}
.tcard-flt:empty{display:none}
.tcard-flt .tsel,.tcard-flt .pkb{height:32px;font-size:12.5px;padding-top:0;padding-bottom:0;max-width:220px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tflt-clr{border:0;background:none;color:var(--accent);font:inherit;font-size:12.5px;cursor:pointer;padding:0 6px;height:32px}
.tflt-clr:hover{text-decoration:underline}

.btn.ibtn{width:34px;min-width:34px;height:34px;padding:0;display:inline-grid;place-items:center;
  color:var(--txm)}
.btn.ibtn:hover{color:var(--tx)}
.btn.ibtn.ibtn-n{width:auto;grid-auto-flow:column;gap:5px;padding:0 10px}
.btn.ibtn.ibtn-n span{font-size:12px;font-weight:650;color:var(--accent)}
.btn.ibtn-t{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px}
.colp > summary.ibtn{list-style:none}
.colp > summary.ibtn::-webkit-details-marker{display:none}
.colp > summary.ibtn::after{content:none}

/* The search field: a drawn magnifier instead of the emoji, and a quieter
   field that brightens when you use it. */
.tsearch .ic{left:11px;width:15px;height:15px;font-size:0;color:var(--txd)}
.tsearch .ic::before{content:"";display:block;width:15px;height:15px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.8-4.8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.8-4.8'/%3E%3C/svg%3E") center/contain no-repeat}
.tsearch input{height:34px;padding:0 12px 0 33px;font-size:13px;background:var(--bg)}
.tsearch input::placeholder{color:var(--txd)}
.tsearch:focus-within .ic{color:var(--accent)}
.colp > summary.ibtn{display:inline-grid}

/* ── Settings: one page, a section list on the left, one card on the right ── */
.stg{display:grid;grid-template-columns:200px minmax(0,720px);gap:28px;align-items:start}
.stg-nav{position:sticky;top:16px;display:flex;flex-direction:column;gap:2px}
.stg-g{display:flex;align-items:center;gap:7px;margin:14px 0 6px;padding:0 10px;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--txd)}
.stg-g:first-child{margin-top:0}
.stg-g i{width:7px;height:7px;border-radius:50%;flex:none}
.stg-nav button{display:block;width:100%;padding:8px 10px;border:0;border-radius:8px;background:none;font:inherit;
  font-size:13.5px;color:var(--txm);text-align:left;cursor:pointer;transition:background .12s,color .12s}
.stg-nav button:hover{background:color-mix(in srgb,var(--tx) 5%,transparent);color:var(--tx)}
.stg-nav button.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--tx);font-weight:600;
  box-shadow:inset 2px 0 0 var(--accent)}
.stg-main{display:flex;flex-direction:column;gap:14px;min-width:0}

.stc{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:20px 22px}
.stc-hd h2{margin:0;font-size:16px;font-weight:650;letter-spacing:-.01em;color:var(--tx)}
.stc-hd p{margin:4px 0 0;font-size:13px;line-height:1.55;color:var(--txm);max-width:62ch}
.stc-rows{margin-top:14px}
.str{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0;
  border-top:1px solid color-mix(in srgb,var(--bdr) 70%,transparent)}
.str-t{font-size:14px;font-weight:550;color:var(--tx)}
.str-h{font-size:12.5px;color:var(--txd);margin-top:2px;line-height:1.45}
.str-c{flex:none;display:flex;align-items:center;gap:10px}
.stn{display:inline-flex;align-items:center;gap:8px}
.stn input{width:96px;height:36px;padding:0 10px;border-radius:var(--r-md);border:1px solid var(--bdr);background:var(--ibg);
  color:var(--tx);font:inherit;font-size:14px;font-variant-numeric:tabular-nums;text-align:right}
.stn input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.stn-u{min-width:52px;font-size:12.5px;color:var(--txd)}
.stn-ro{font-size:13px;color:var(--txm)}
.stn b{font-size:14px;color:var(--tx)}
.stc-ft{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:6px;padding-top:14px;
  border-top:1px solid color-mix(in srgb,var(--bdr) 70%,transparent)}
.stc-msg{font-size:12.5px;color:var(--txd);margin-right:auto}
.stc-ro{font-size:12.5px;color:var(--txd);margin-right:auto}
.stc-plain{padding:16px 18px}
.stm-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:8px}
.stm{padding:12px 14px;border:1px solid var(--bdr);border-radius:10px}
.stm-l{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--txd)}
.stm-v{margin-top:4px;font-size:20px;font-weight:650;color:var(--tx)}
.stm-v span{font-size:13px;font-weight:500;color:var(--txd)}
.stm-bar{margin-top:8px;height:5px;border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--tx) 6%,transparent)}
.stm-bar i{display:block;height:100%}
.stm-n{margin-top:6px;font-size:11.5px;color:var(--txd)}
@media(max-width:900px){
  .stg{grid-template-columns:1fr;gap:14px}
  .stg-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}
  .stg-g{display:none}
  .stg-nav button{width:auto;border:1px solid var(--bdr);border-radius:999px;padding:6px 12px;font-size:13px}
  .stg-nav button.on{box-shadow:none;border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
}
@media(max-width:560px){.str{flex-direction:column;align-items:flex-start;gap:8px}.stm-row{grid-template-columns:1fr}}

/* Settings › Email verification */
.vf-st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--txm)}
.vf-st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.vf-st.ok{color:var(--green)}.vf-st.bad{color:var(--amber)}.vf-st.off{color:var(--txd)}.str-h a:hover{color:var(--accent)}
.vf-run{font-size:12px;color:var(--accent);margin-top:2px}
.vf-err{font-size:12px;color:var(--amber);margin-top:2px}
@media(max-width:560px){.stc-ft{flex-wrap:wrap}}
.stc-ft .btn{white-space:nowrap;flex:none}
.stg-g span{margin-left:auto;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--txd);opacity:.8}

/* Settings › Integrations — one card per service */
.ig{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:18px;align-items:start}
@media(max-width:560px){.ig{grid-template-columns:1fr}}
.ig-card{position:relative;background:var(--card);border:1px solid var(--bdr);border-radius:16px;padding:20px 22px;
  display:flex;flex-direction:column;gap:18px;overflow:hidden}
.ig-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 20%,transparent))}
.ig-hd{display:flex;align-items:center;gap:14px}
.ig-logo{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:19px;font-weight:700;
  color:var(--brand);background:color-mix(in srgb,var(--brand) 14%,transparent);border:1px solid color-mix(in srgb,var(--brand) 30%,transparent)}
.ig-id{flex:1;min-width:0}
.ig-id h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--tx);line-height:1.2}
.ig-id p{margin:2px 0 0;font-size:12.5px;color:var(--txd)}
.ig-hd .vf-st{flex:none;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,currentColor 10%,transparent);font-weight:500}

.ig-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.ig-kpi{padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--tx) 3.5%,transparent);
  border:1px solid color-mix(in srgb,var(--tx) 6%,transparent);display:flex;flex-direction:column;gap:2px;min-width:0}
.ig-kpi b{font-size:24px;font-weight:700;color:var(--tx);line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ig-kpi span{font-size:12px;color:var(--txm);font-weight:500}
.ig-kpi em{font-style:normal;font-size:11.5px;color:var(--txd)}
.ig-kpi.warn b{color:var(--amber)}
.ig-kpi.full b{color:color-mix(in srgb,var(--red) 75%,var(--tx))}

.ig-sec{display:flex;flex-direction:column;gap:9px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--tx) 7%,transparent)}
.ig-sec-t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:11.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--txd)}
.ig-sec-t span{font-weight:500;letter-spacing:0;text-transform:none;color:var(--txd);font-size:12px}

.ig-row{display:grid;grid-template-columns:minmax(96px,140px) 1fr 118px 64px;align-items:center;gap:12px;font-size:13px}
.ig-row-v{text-align:right}.ig-row-t{display:flex;justify-content:flex-end}
@media(max-width:560px){.ig-row{grid-template-columns:100px 1fr auto;}.ig-row-t{display:none}}
.ig-row-l{color:var(--tx);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-row-v{color:var(--tx);font-size:12.5px;white-space:nowrap}
.ig-row-v em{font-style:normal;color:var(--txd)}
.ig-track{height:6px;border-radius:999px;background:color-mix(in srgb,var(--tx) 8%,transparent);overflow:hidden}
.ig-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 70%,transparent),var(--accent))}
.ig-row.warn .ig-track i{background:linear-gradient(90deg,color-mix(in srgb,var(--amber) 65%,transparent),var(--amber))}
.ig-row.full .ig-track i{background:color-mix(in srgb,var(--red) 55%,var(--card))}
.ig-tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap;
  color:color-mix(in srgb,var(--red) 70%,var(--tx));background:color-mix(in srgb,var(--red) 12%,transparent)}

.ig-stack{height:8px;border-radius:999px;background:color-mix(in srgb,var(--tx) 8%,transparent);overflow:hidden;display:flex;gap:2px}
.ig-stack i{display:block;height:100%}
.ig-stack i:first-child{border-radius:999px 0 0 999px}
.ig-leg{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--txm)}
.ig-leg span{display:inline-flex;align-items:center;gap:7px}
.ig-leg i{width:8px;height:8px;border-radius:50%}
.ig-leg b{color:var(--tx);font-weight:600;margin-left:2px}

.ig-note{font-size:12.5px;color:var(--txm);line-height:1.5;margin-top:-4px}
.ig-note a{color:var(--accent);text-decoration:none}.ig-note a:hover{text-decoration:underline}
.st-link{color:var(--accent);text-decoration:none;font-size:12.5px;white-space:nowrap}
.st-link:hover{text-decoration:underline}
.ig-cap{display:inline-flex;gap:6px;align-items:center;margin-left:8px;vertical-align:middle}
.ig-cap[hidden]{display:none}
.ig-cap input{width:100px;height:32px;padding:0 8px;border-radius:var(--r-sm);border:1px solid var(--bdr);background:var(--ibg);
  color:var(--tx);font:inherit;font-size:15px;font-variant-numeric:tabular-nums;text-align:right}
.ig-cap input:focus{outline:none;border-color:var(--accent)}
.ig-cap .btn{height:32px;padding:0 10px}
.ct-li{color:var(--accent);font-size:12.5px;text-decoration:none;white-space:nowrap}
.ct-li:hover{text-decoration:underline}
.dp-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;margin-top:6px}
.dp-people .contact-card{margin:0}