/* ============================================================
   The Rainmakers: full UI design system
   Implemented from the design handoff README + .dc.html prototypes.
   Token-driven; light/dark switches by toggling `.dark` on `.app`.
   ============================================================ */

/* ---------------- Brand fonts (self-hosted, pulled from therainmakers.uk) ----------------
   Handjet        → display / headline face
   JetBrains Mono → mono eyebrow + strapline
   Product Sans   → UI text (pills, inputs, chips)
   Space Grotesk  → reserved for secondary headings
------------------------------------------------------------------------------------------ */
@font-face{font-family:'Handjet';src:url('assets/fonts/handjet.woff2') format('woff2');font-display:swap;font-weight:100 900;font-style:normal}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/jetbrains-mono.woff2') format('woff2');font-display:swap;font-weight:100 800;font-style:normal}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/space-grotesk.woff2') format('woff2');font-display:swap;font-weight:300 700;font-style:normal}
@font-face{font-family:'Product Sans';src:url('assets/fonts/product-sans-400.woff2') format('woff2');font-display:swap;font-weight:400;font-style:normal}
@font-face{font-family:'Product Sans';src:url('assets/fonts/product-sans-500.woff2') format('woff2');font-display:swap;font-weight:500;font-style:normal}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;height:100%}
body{background:var(--bg)}
.side,.scroll,.lbody,.tablewrap,.boardwrap,.listwrap,.modal,.dbody,.compliance-card,.lead-drawer-body,.leads-section,.crm-section,.leads-table-scroll{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html,.side,.scroll,.lbody,.tablewrap,.boardwrap,.listwrap,.modal,.dbody,.compliance-card,.lead-drawer-body,.leads-section,.crm-section,.leads-table-scroll{scroll-behavior:auto}
}

/* ---------------- Design tokens ---------------- */
.app{
  --bg:#f9f9f8; --side-bg:#f2f2f0; --card:#fff;
  --side-border:rgba(0,0,0,.07); --card-border:rgba(0,0,0,.10); --tborder:rgba(0,0,0,.08);
  --text:#1a1a18; --text2:#3a3a34; --nav:#6b6b63; --label:#a9a99e; --sub:#9a9a90;
  --cellmute:#9a9a90; --cell:#2a2a25; --title:#23233a;
  --hover:rgba(0,0,0,.045); --hover2:rgba(0,0,0,.07); --row-hover:#faf7f1;
  --send-bg:#1a1a18; --send-fg:#fff;
  --dot:#cfcfc8; --icon:#6b6b63; --placeholder:#c2c2ba;
  --chip-border:rgba(0,0,0,.08); --chip-text:#6f6f67; --plan:#8a8a80; --track:#d8d8d2;
  --credit:#7b5cff; --pink:#e0218a; --li:#0a66c2;

  /* Brand type stack (therainmakers.uk) */
  --font-display:'Handjet',sans-serif;
  --font-site-mono:'JetBrains Mono',ui-monospace,monospace;
  --font-product:'Product Sans','Satoshi','Manrope',sans-serif;
  --font-grotesk:'Space Grotesk','Satoshi',sans-serif;
  --accent:#ff8f55;

  /* Signature amber/blue neon glow, shared by both themes */
  --glow-neon:0 0 11px rgba(255,170,70,.55),0 0 22px rgba(80,170,255,.40);
  --glow-neon-sm:0 0 10px rgba(255,170,70,.45),0 0 20px rgba(80,170,255,.28);
  --glow-edge:rgba(255,170,70,.5);

  /* Hero surface, light adaptation of the site's black canvas */
  --hero-bg:#f7f5ef; --hero-dot:#e4e2da;
  --hero-sh1:rgba(20,20,18,.30); --hero-sh2:rgba(20,20,18,.05);
  --hero-title-sheen:linear-gradient(#78766f 6%,#141413 28%,#2a2924 48%,#b3b1a9 80%);
  --hero-title-ink:#141413;
  /* Softer sheen for page-level headers */
  --title-sheen:linear-gradient(#3a3933 0%,#1a1a18 42%,#1f1e1b 62%,#63615a 100%);
  --hero-sub:#6b6960; --hero-label:#a3a099; --hero-pill-txt:#57554e;
  --hero-field-bg:#fff; --hero-field-border:#dfdcd3; --hero-field-focus:#b8b4a8;
  --hero-ring:#e0ddd4; --hero-ring-hover:#bfbbb0;
  --hero-placeholder:#a8a59d; --hero-icon:#8d8a82;
  --hero-go-bg:#141413; --hero-go-fg:#f7f5ef;
  --sunken:#edebe4;
  --mc-l0:#e4e2da; --mc-l1:#ffd9c2; --mc-l2:#ffb384; --mc-l3:#ff8f55; --mc-l4:#e0651f;
  --pi-new:#c7c1b6; --pi-contacted:#e8ac7c; --pi-qualified:#f0873b; --pi-proposal:#e0651f;
  --pi-won:#2f9e5a; --pi-lost:#c4736b;

  color-scheme:light;
  display:flex; height:100vh; width:100%; overflow:hidden; background:var(--bg);
  font-family:'Satoshi','Manrope',sans-serif; color:var(--text);
  -webkit-font-smoothing:antialiased; transition:background .22s,color .22s;
}
.app.dark{
  /* Surface ramp lifted straight from therainmakers.uk */
  --bg:#030303; --side-bg:#080808; --card:#0f0f0f;
  --side-border:rgba(255,255,255,.08); --card-border:#2a2925; --tborder:rgba(255,255,255,.07);
  --text:#f4f2ed; --text2:#d1cfcf; --nav:#9c9c92; --label:#736f68; --sub:rgba(255,255,255,.6);
  --cellmute:#8a8a80; --cell:#e4e4de; --title:#f4f2ed;
  --hover:rgba(255,255,255,.05); --hover2:rgba(255,255,255,.09); --row-hover:#171717;
  --send-bg:#f7f5ef; --send-fg:#000;
  --dot:#54544e; --icon:#9c9c9c; --placeholder:#5f5c56;
  --chip-border:#484741; --chip-text:#c9c6bf; --plan:#85857c; --track:#3a3a36;
  color-scheme:dark;
  --credit:#a08bff; --pink:#ff5fb0; --li:#4f9be8;

  /* Hero surface, 1:1 with therainmakers.uk */
  --hero-bg:#030303; --hero-dot:#121212;
  --hero-sh1:rgba(247,245,239,.5); --hero-sh2:rgba(247,245,239,.09);
  --hero-title-sheen:linear-gradient(#b9b7b2 6%,#fff 28%,#efede8 48%,#4a4945 80%);
  --hero-title-ink:#f4f2ed;
  /* Softer sheen for page-level headers */
  --title-sheen:linear-gradient(#fff 0%,#f4f2ed 42%,#e6e3dc 62%,#9a978f 100%);
  --hero-sub:rgba(255,255,255,.6); --hero-label:#736f68; --hero-pill-txt:#c9c6bf;
  --hero-field-bg:#080808; --hero-field-border:#45443f; --hero-field-focus:#6d6a62;
  --hero-ring:#484741; --hero-ring-hover:#6d6a62;
  --hero-placeholder:#5f5c56; --hero-icon:#9c9c9c;
  --hero-go-bg:#f7f5ef; --hero-go-fg:#000;
  --sunken:#131313;
  --mc-l0:#161616; --mc-l1:#5c2f14; --mc-l2:#994b1c; --mc-l3:#d9722c; --mc-l4:#ff8f55;
  --pi-new:#514b43; --pi-contacted:#8f5a34; --pi-qualified:#cf6a22; --pi-proposal:#ff9b62;
  --pi-won:#46b96f; --pi-lost:#7f4440;
}
.ic{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ---------------- Sidebar ---------------- */
.side{width:240px;flex-shrink:0;display:flex;flex-direction:column;padding:12px 0;overflow-y:auto;overflow-x:hidden;background:var(--side-bg);border-right:1px solid var(--side-border);transition:width .22s ease,background .22s,border-color .22s}
.wshead{display:flex;align-items:center;gap:9px;padding:6px 14px 6px 12px;margin-bottom:6px}
.chip{width:28px;height:28px;border-radius:8px;flex-shrink:0;display:none;align-items:center;justify-content:center;background:transparent;position:relative;cursor:pointer}
.chip img{width:27px;height:30px;object-fit:contain;display:block;transition:opacity .25s ease,transform .25s ease}
.chipicon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text2);opacity:0;transform:scale(.7);transition:opacity .25s ease,transform .25s ease}
.chip:hover img{opacity:0;transform:scale(.7)}
.chip:hover .chipicon{opacity:1;transform:scale(1)}
.wslogo{height:44px;width:auto;display:block;margin-right:auto}
.wslogo.dark{display:none}
.app.dark .wslogo.light{display:none}
.app.dark .wslogo.dark{display:block}
.wstoggle{margin-left:auto;display:flex;align-items:center;justify-content:center;padding:5px;border-radius:7px;color:var(--nav);background:none;border:none;cursor:pointer;transition:background .15s,color .15s}
.wstoggle:hover{background:var(--hover);color:var(--text2)}
.side.off{width:62px;min-width:62px;align-items:center}
.side.off .wshead{flex-direction:column;gap:12px;padding:6px 0 6px;margin-bottom:6px;width:100%}
.side.off .wstoggle{display:none}
.side.off .wslogo.light,.side.off .wslogo.dark{display:none}
.side.off .chip{display:flex}
.side.off .navwrap{padding:0;width:100%;align-items:center}
.side.off .navbtn{width:42px;justify-content:center;padding:10px 0;gap:0;font-size:0}
.side.off .seclabel{display:none}
.side.off .recnav{display:none}
.side.off .sidefoot{display:none}
.navwrap{padding:0 10px;display:flex;flex-direction:column;gap:2px}
.navbtn{width:100%;display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:9px;font-size:14.5px;font-weight:400;color:var(--nav);background:none;border:none;cursor:pointer;text-align:left;transition:background .12s,color .12s;font-family:'Satoshi','Manrope',sans-serif}
.navbtn:hover{background:var(--hover);color:var(--text2)}
.navbtn.on{background:var(--hover2);color:var(--text);font-weight:500}
.seclabel{display:flex;align-items:center;gap:5px;padding:0 14px;margin:18px 0 8px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--label)}
.secplus{margin-left:auto;color:var(--label);cursor:pointer;display:flex;padding:2px;border-radius:5px}
.secplus:hover{color:var(--text2);background:var(--hover)}
.recrow{position:relative}
.recbtn{width:100%;display:flex;align-items:center;gap:10px;padding:7px 32px 7px 14px;border-radius:9px;font-size:14px;color:var(--nav);background:none;border:none;cursor:pointer;text-align:left;font-family:'Satoshi','Manrope',sans-serif}
.recbtn:hover,.recrow:hover .recbtn{background:var(--hover);color:var(--text2)}

/* Delete control, hidden until the row is hovered, then springs in. */
.recdel{position:absolute;right:7px;top:50%;display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;border:none;border-radius:6px;cursor:pointer;
  color:var(--nav);background:none;opacity:0;pointer-events:none;
  transform:translateY(-50%) scale(.62);
  transition:opacity .18s ease,transform .3s cubic-bezier(.34,1.56,.64,1),color .15s,background .15s}
.recrow:hover .recdel,.recdel:focus-visible{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1)}
.recdel:hover{color:#ff6b6b;background:var(--hover2)}
.recdel:active{transform:translateY(-50%) scale(.9)}
/* Dwell on the bin and the lid lifts open on a slant: the delay is what makes
   it read as "hovering too long" rather than firing on every passing cursor. */
.binicon .bin-lid{transform-box:view-box;transform-origin:5px 6px;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1) 0s}
.recdel:hover .binicon .bin-lid,.recdel:focus-visible .binicon .bin-lid{
  transform:rotate(-22deg) translate(.5px,-1px);transition-delay:.55s}

.recrow.is-removing{overflow:hidden;pointer-events:none;
  animation:recOut .3s cubic-bezier(.4,0,1,1) forwards}
@keyframes recOut{
  0%{opacity:1}
  100%{opacity:0;height:0;margin-top:0;margin-bottom:0;transform:translateX(-18px)}
}
@media (prefers-reduced-motion:reduce){
  .recdel,.binicon .bin-lid{transition:opacity .15s ease}
  .recrow.is-removing{animation-duration:.01s}
}
.recbtn.on{background:var(--hover2);color:var(--text);font-weight:500}
.dot{width:6px;height:6px;border-radius:50%;background:var(--dot);flex-shrink:0}
.recbtn.on .dot{background:var(--accent)}
.recbtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recempty{padding:2px 14px 6px;font-size:12.5px;color:var(--sub)}
.side.off .recempty{display:none}
.sidefoot{margin-top:auto;padding:8px 10px 2px}
.themerow{display:flex;align-items:center;gap:10px;padding:7px 8px;border-top:1px solid var(--side-border);margin-bottom:2px}
.themelabel{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:400;color:var(--nav)}
.switch{margin-left:auto;width:40px;height:23px;border-radius:999px;background:var(--track);border:none;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0;padding:0}
.switch.dark{background:var(--accent)}
.knob{position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.knob.dark{transform:translateX(17px)}
.startover{width:100%;display:flex;align-items:center;gap:10px;padding:8px;margin-top:2px;font-size:13.5px;color:var(--nav);background:none;border:none;cursor:pointer;text-align:left;border-radius:9px;font-family:'Satoshi','Manrope',sans-serif}
.startover:hover{background:var(--hover);color:var(--text2)}
.side.off .startover{justify-content:center;font-size:0;gap:0}

/* ---------------- Main + view router ---------------- */
.main{flex:1;min-width:0;position:relative;overflow:hidden;display:flex;flex-direction:column}
.view{display:none;flex:1;min-height:0;flex-direction:column;overflow:hidden;transform-origin:center top;will-change:opacity,transform,filter}
.view.active{display:flex}
.view.active.view-enter{animation:viewPaneIn .46s cubic-bezier(.2,.72,.18,1) both}
.view.view-enter .hub,
.view.view-enter #leadsSection > *,
.view.view-enter .crm-section > *,
.view.view-enter #scrapeUrlPanel > *,
.view.view-enter #outreachGeneratorPanel,
.view.view-enter .prompt-library{animation:viewSurfaceIn .56s cubic-bezier(.2,.72,.18,1) both}
.view.view-enter #leadsSection > *:nth-child(2),
.view.view-enter .crm-section > *:nth-child(2),
.view.view-enter #scrapeUrlPanel > *:nth-child(2),
.view.view-enter .prompt-library{animation-delay:45ms}
.view.view-enter #leadsSection > *:nth-child(3),
.view.view-enter .crm-section > *:nth-child(3),
.view.view-enter #scrapeUrlPanel > *:nth-child(3){animation-delay:90ms}
@keyframes viewPaneIn{
  from{opacity:0;transform:translateY(12px) scale(.992);filter:blur(7px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@keyframes viewSurfaceIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .view.active.view-enter,
  .view.view-enter .hub,
  .view.view-enter #leadsSection > *,
  .view.view-enter .crm-section > *,
  .view.view-enter #scrapeUrlPanel > *,
  .view.view-enter #outreachGeneratorPanel,
  .view.view-enter .prompt-library,
  .view.view-enter .board .col{animation:none}
}

/* ============================================================
   Home screen, mirrors the therainmakers.uk hero
   ============================================================ */
.view[data-view-pane="home"],
.view[data-view-pane="mission"],
.view[data-view-pane="crm"],
.view[data-view-pane="outbound"],
.view[data-view-pane="directsearch"]{position:relative;background:var(--hero-bg);transition:background .22s}

/* Content scrollers ride above the dotted canvas; their cards stay opaque so the
   grid is occluded behind them, which is what reads as depth. */
.view[data-view-pane="crm"] .crm-section,
.view[data-view-pane="mission"] .lbody,
.view[data-view-pane="outbound"] .lbody,
.view[data-view-pane="directsearch"] .lbody{position:relative;z-index:1;background:transparent}

/* ---- Dotted canvas + drifting shimmer pools ---- */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--hero-bg);pointer-events:none}
.hero-dots{position:absolute;inset:0;
  background-image:radial-gradient(circle, var(--hero-dot) .75px, transparent .75px);
  background-size:8px 8px}
.dot-shimmer{position:absolute;inset:0;opacity:0;will-change:opacity;
  background-image:radial-gradient(circle, var(--hero-sh1) .75px, var(--hero-sh2) 1.425px, transparent 2.55px);
  background-size:8px 8px;
  -webkit-mask-image:var(--sh-mask);mask-image:var(--sh-mask);
  animation:dot-shimmer var(--shimmer-duration,10s) ease-in-out var(--shimmer-delay,0s) infinite}
@keyframes dot-shimmer{0%,100%{opacity:0}50%{opacity:calc(var(--shimmer-peak,.34) * var(--shimmer-damp,1))}}
@media (max-width:900px){.dot-shimmer{--shimmer-damp:.32}}

/* ---- Layout ---- */
.view[data-view-pane="home"] .scroll{position:relative;z-index:1;background:transparent}
.scroll{height:100%;overflow-y:auto;display:flex;align-items:center;justify-content:center;padding:48px 40px}
.hub{width:100%;max-width:900px;display:flex;flex-direction:column;align-items:center}

/* ---- Neon mark ---- */
.heromark{width:116px;height:auto;margin-bottom:8px;display:block;animation:heroFloat 5.5s ease-in-out infinite,heroGlow 3.4s ease-in-out infinite;will-change:transform,filter}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes heroGlow{0%,100%{filter:drop-shadow(0 0 5px rgba(255,170,70,.30)) drop-shadow(0 0 11px rgba(80,170,255,.18))}50%{filter:drop-shadow(0 0 12px rgba(255,170,70,.60)) drop-shadow(0 0 22px rgba(80,170,255,.40))}}

/* ---- Display headline (Handjet + metallic sheen) ---- */
.htitle{margin:0;width:100%;text-align:center;white-space:nowrap;
  font-family:var(--font-display);font-weight:600;font-size:clamp(28px,5.4vw,68px);
  line-height:1.05;letter-spacing:-.02em;text-transform:uppercase;
  color:var(--hero-title-ink);min-height:1.05em}
.htitle-txt{background-image:none;color:inherit;-webkit-text-fill-color:currentColor}
.app.dark .htitle-txt{background-image:var(--hero-title-sheen);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.caret{display:inline-block;width:.07em;height:.72em;background:currentColor;margin-left:.05em;
  vertical-align:baseline;animation:caret-flash 1s step-end infinite}
@keyframes caret-flash{50%{opacity:0}}

/* ---- Strapline (JetBrains Mono) ---- */
.sub{margin:12px 0 0;max-width:720px;text-align:center;
  font-family:var(--font-site-mono);font-size:clamp(12px,1.25vw,16px);font-weight:400;
  line-height:1.7;letter-spacing:-.08em;text-transform:uppercase;color:var(--hero-sub)}

/* ---- Search pill ---- */
.sbar{width:680px;max-width:100%;height:61px;margin-top:26px;display:flex;align-items:center;gap:12px;
  background:var(--hero-field-bg);border:1px solid var(--hero-field-border);border-radius:999px;
  padding:0 12px 0 20px;overflow:hidden;
  transition:border-color .25s,box-shadow .3s,background .22s}
.sbar.focus{border-color:rgba(0,0,0,.2);box-shadow:0 4px 22px rgba(0,0,0,.07)}
.app.dark .sbar.focus{border-color:var(--glow-edge);box-shadow:0 4px 22px rgba(0,0,0,.28)}
.sicon{color:var(--hero-icon);flex-shrink:0;transition:color .15s}
.iconbtn{width:24px;height:24px;padding:0;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--hero-icon);background:none;border:none;cursor:default;transition:color .15s}
.sfield{position:relative;flex:1 1 0;min-width:0;display:flex;align-items:center}
.sinput{flex:1 1 0;min-width:0;border:none;outline:none;background:none;
  font-family:var(--font-product);font-size:17px;font-weight:400;line-height:20.4px;
  color:var(--hero-title-ink);margin:0;padding:0}
.sinput::placeholder{color:var(--hero-placeholder)}
.sinput.loc{flex:0 1 235px}
/* animated ghost placeholder, mirrors the site's typing field */
.sghost{position:absolute;inset:0;display:flex;align-items:center;white-space:nowrap;pointer-events:none;
  font-family:var(--font-product);font-size:17px;line-height:20.4px;color:var(--hero-placeholder)}
.sghost[hidden]{display:none}
.sghost .gcaret{display:inline-block;width:2px;height:19px;margin-left:1px;vertical-align:middle;
  background:var(--hero-title-ink);animation:caret-flash 1s step-end infinite}
.sdiv{width:1px;height:24px;background:var(--hero-field-border);flex-shrink:0;transition:background .22s}
.go{width:36px;height:36px;border-radius:999px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--hero-go-bg);color:var(--hero-go-fg);border:none;cursor:pointer;
  transition:background .22s,color .22s,box-shadow .3s}
.go .ic{stroke-width:2.2}
.go:hover,.go:focus-visible{box-shadow:var(--glow-neon);outline:none}
@media (max-width:720px){
  .sbar{height:auto;border-radius:24px;align-items:stretch;flex-wrap:wrap;padding:12px 13px}
  .sbar .iconbtn,.sbar .go{align-self:center}
  .sfield{flex:1 1 calc(100% - 58px)}
  .sinput.loc{flex:1 1 100%;padding-left:44px}
  .sdiv{display:none}
}

/* ---- Popular searches ---- */
.poplabel{margin-top:44px;font-family:var(--font-product);font-size:12px;font-weight:500;
  line-height:12px;letter-spacing:1.68px;text-transform:uppercase;color:var(--hero-label)}
.chips{margin-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:560px}
.chipbtn{display:flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--font-product);font-size:14px;font-weight:400;line-height:14px;
  color:var(--hero-pill-txt);background:var(--hero-field-bg);border:none;border-radius:999px;
  padding:8px 14px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--hero-ring);
  transition:box-shadow .3s,color .2s,background .22s}
.chipbtn .ic{color:var(--hero-icon);width:14px;height:14px}
.chipbtn:hover,.chipbtn:focus-visible{box-shadow:inset 0 0 0 1px var(--glow-edge),var(--glow-neon-sm);color:var(--text2);outline:none}
.chipbtn.on{background:var(--hero-go-bg);color:var(--hero-go-fg);box-shadow:inset 0 0 0 1px var(--hero-go-bg)}
.chipbtn.on .ic{color:var(--hero-go-fg);opacity:.75}

@media (prefers-reduced-motion:reduce){
  .dot-shimmer{opacity:calc(var(--shimmer-peak,.34) * var(--shimmer-damp,1) * .35);animation:none}
  .heromark{animation:none}
}
@media (min-width:1800px) and (min-height:900px){
  .view[data-view-pane="home"] .scroll{align-items:flex-start;padding-top:22vh}
}

/* ============================================================
   Mission Control
   ============================================================ */
.mc-card{margin:0 0 18px}
.mc-card-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:14px}
.mc-card-head .pt{margin-bottom:0}
.mc-stats{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
.mc-stat{font-size:12px;font-weight:500;color:var(--sub);background:var(--sunken);border-radius:999px;padding:5px 11px;white-space:nowrap}
.mc-ghost-btn{font-family:'Satoshi','Manrope',sans-serif;font-size:12px;font-weight:500;color:var(--nav);background:none;border:1px solid var(--card-border);border-radius:999px;padding:5px 11px;cursor:pointer;transition:color .15s,border-color .15s}
.mc-ghost-btn:hover{color:var(--text2);border-color:var(--cellmute)}

/* ---- Daily tasks board ---- */
.mc-daily{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:1180px){.mc-daily{grid-template-columns:1fr}}
.mc-daily-col{display:flex;flex-direction:column;min-width:0;
  background:var(--sunken);border:1px solid var(--tborder);border-radius:12px;padding:13px 14px 11px}
.mc-daily-h{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.mc-daily-t{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text2)}
.mc-daily-t .ic{color:var(--accent)}
.mc-daily-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;border-radius:999px;background:var(--hover2);color:var(--text2);font-size:10.5px;font-weight:600}
.mc-daily-badge:empty{display:none}
/* core progress ring: one arc segment per core task, drawn on as each is ticked */
.mc-ring{position:relative;margin-left:auto;flex-shrink:0;width:42px;height:42px;
  display:flex;align-items:center;justify-content:center}
.mc-ring-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mc-ring-track,.mc-ring-fill{fill:none;stroke-width:3.5}
.mc-ring-track{stroke-linecap:round}
.mc-ring-track{stroke:var(--track);opacity:.55}
/* pathLength="1" makes the dash maths a plain 0-1 fraction of each arc */
/* pathLength="1" puts the dash maths in plain 0-1 fractions of each arc.
   The gap is 2 rather than 1 so a fully-offset segment lands deep inside the
   gap instead of wrapping onto the next dash and painting a sliver, and the
   cap is butt while empty because a round cap on a zero-length dash still
   paints a dot. */
.mc-ring-fill{stroke:var(--accent);stroke-dasharray:1 2;stroke-dashoffset:1;stroke-linecap:butt;
  transition:stroke-dashoffset .55s cubic-bezier(.65,0,.35,1),filter .4s}
.mc-ring-fill.is-on{stroke-dashoffset:0;stroke-linecap:round}

.mc-ring-num{position:relative;font-family:var(--font-site-mono);font-size:13px;font-weight:500;
  line-height:1;color:var(--sub);transition:color .25s,opacity .2s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.mc-ring-tick{position:absolute;color:var(--accent);opacity:0;transform:scale(.4);
  fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .25s,transform .4s cubic-bezier(.34,1.56,.64,1)}

/* all four in, the number gives way to a tick and the ring lights up */
.mc-ring.is-full .mc-ring-num{opacity:0;transform:scale(.5)}
.mc-ring.is-full .mc-ring-tick{opacity:1;transform:none;transition-delay:.18s}
.mc-ring.is-full .mc-ring-fill{filter:drop-shadow(0 0 4px rgba(255,143,85,.85))}
.mc-ring.is-full .mc-ring-svg{animation:mc-ring-breathe 2.8s ease-in-out infinite}
@keyframes mc-ring-breathe{0%,100%{filter:none}50%{filter:drop-shadow(0 0 7px rgba(255,143,85,.55))}}

/* one-shot burst the moment the fourth task lands */
.mc-ring-halo{fill:none;stroke:var(--accent);stroke-width:2;opacity:0}
.mc-ring.is-burst .mc-ring-halo{animation:mc-ring-halo .72s cubic-bezier(.2,.7,.3,1)}
@keyframes mc-ring-halo{
  0%{opacity:.75;transform:scale(1)}
  100%{opacity:0;transform:scale(1.38)}
}
.mc-ring-halo{transform-origin:22px 22px}
.mc-ring.is-burst .mc-ring-svg{animation:mc-ring-pop .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes mc-ring-pop{0%{transform:scale(1)}40%{transform:scale(1.13)}100%{transform:scale(1)}}
.mc-daily-note{margin:auto 0 0;padding-top:12px;font-size:11px;line-height:1.45;color:var(--label)}

/* sort toggle, "by date or by priority" */
.mc-sort{margin-left:auto;display:inline-flex;gap:2px;padding:2px;border-radius:999px;background:var(--hover2)}
.mc-sort-btn{font-family:'Satoshi','Manrope',sans-serif;font-size:11px;font-weight:500;color:var(--nav);
  background:none;border:none;border-radius:999px;padding:4px 10px;cursor:pointer;transition:background .16s,color .16s}
.mc-sort-btn:hover{color:var(--text2)}
.mc-sort-btn.on{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.18)}

/* shared row shell for both columns */
.mc-core,.mc-due{display:flex;flex-direction:column;gap:2px}
.mc-core-row,.mc-due-row{display:flex;align-items:center;gap:10px;min-width:0;
  padding:8px 8px;border-radius:9px;transition:background .16s}
.mc-core-row:hover,.mc-due-row:hover{background:var(--hover)}
.mc-core-ic{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0;
  border-radius:8px;background:var(--card);border:1px solid var(--tborder);color:var(--accent)}
.mc-core-txt,.mc-due-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.mc-core-title,.mc-due-title{font-size:13px;font-weight:500;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-core-sub,.mc-due-meta{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--sub);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-core-row.is-done .mc-core-title,.mc-due-row.is-done .mc-due-title{color:var(--sub);text-decoration:line-through}
.mc-core-row.is-done .mc-core-ic{color:var(--sub);opacity:.6}
.mc-due-row.is-late .mc-due-meta{color:#ff6b4a}

/* deep-work control on the core row */
.mc-core-act{flex-shrink:0;display:flex;align-items:center}
.mc-core-start{display:inline-flex;align-items:center;gap:6px;font-family:'Satoshi','Manrope',sans-serif;
  font-size:11.5px;font-weight:600;color:var(--send-fg);background:var(--send-bg);border:none;border-radius:999px;
  padding:5px 11px;cursor:pointer;transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .22s,filter .15s}
.mc-core-start .ic{fill:currentColor;stroke-width:1.5}
.mc-core-start:hover{box-shadow:var(--glow-neon-sm);filter:brightness(1.08)}
.mc-core-start:active{transform:scale(.95)}
.mc-core-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-site-mono);
  font-size:11.5px;font-weight:500;color:var(--accent);background:rgba(255,143,85,.13);
  border-radius:999px;padding:5px 10px;white-space:nowrap}
.mc-core-live.is-paused,.mc-core-live.is-done{color:var(--sub);background:var(--hover2)}
.mc-core-pulse{width:6px;height:6px;border-radius:50%;background:currentColor;animation:mc-pulse 1.6s ease-in-out infinite}
.mc-core-live.is-paused .mc-core-pulse,.mc-core-live.is-done .mc-core-pulse{animation:none;opacity:.5}
@keyframes mc-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* due column */
.mc-due-empty{padding:14px 8px;font-size:11.5px;line-height:1.5;color:var(--sub)}
.mc-due-open{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;
  border-radius:7px;color:var(--nav);background:none;border:none;cursor:pointer;opacity:0;
  transition:opacity .15s,color .15s,background .15s}
.mc-due-row:hover .mc-due-open,.mc-due-open:focus-visible{opacity:1}
.mc-due-open:hover{color:var(--text);background:var(--hover2)}
.mc-due-more{margin-top:4px;align-self:flex-start;font-family:'Satoshi','Manrope',sans-serif;font-size:11.5px;
  font-weight:500;color:var(--nav);background:none;border:none;padding:6px 8px;border-radius:8px;cursor:pointer;
  transition:color .15s,background .15s}
.mc-due-more:hover{color:var(--text2);background:var(--hover)}

/* ---- Profile (read-only; edited via sidebar Settings) ---- */
.mc-profile-card{padding:24px 26px}
.mc-profile{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.mc-avatar{width:132px;height:132px;flex-shrink:0;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--sunken);border:1px solid var(--card-border);color:var(--icon)}
.mc-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.mc-avatar .ic{width:46px;height:46px}
.mc-initials{font-size:44px;font-weight:700;color:var(--text2);letter-spacing:.02em;line-height:1}
.mc-identity{min-width:0;display:flex;flex-direction:column;gap:6px}
.mc-name{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--text);word-break:break-word}
.mc-position{font-size:15px;font-weight:400;color:var(--sub);word-break:break-word}
.mc-name.is-placeholder,.mc-position.is-placeholder{color:var(--placeholder);font-weight:400}
.mc-name.is-placeholder{font-size:22px}
/* Avatar inside the settings modal is interactive and smaller */
.mc-avatar-sm{width:84px;height:84px;cursor:pointer;transition:border-color .2s,box-shadow .25s}
.mc-avatar-sm .ic{width:30px;height:30px}
.mc-avatar-sm .mc-initials{font-size:28px}
.mc-avatar-sm:hover,.mc-avatar-sm:focus-visible{border-color:var(--glow-edge);box-shadow:var(--glow-neon-sm);outline:none}
.mc-set-avatar{display:flex;align-items:center;gap:18px}
.mc-set-avatar-actions{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.mc-set-hint{font-size:11.5px;color:var(--sub)}
.mc-avatar-remove{font-family:'Satoshi','Manrope',sans-serif;font-size:12px;color:var(--nav);background:none;border:none;cursor:pointer;padding:0}
.mc-avatar-remove:hover{color:var(--text2)}

/* Sidebar settings button */
.settingsrow{width:100%;display:flex;align-items:center;padding:7px 8px;border-radius:9px;
  background:none;border:none;cursor:pointer;text-align:left;transition:background .12s}
.settingsrow:hover{background:var(--hover)}
.settingsrow .themelabel{color:var(--nav);transition:color .12s}
.settingsrow:hover .themelabel{color:var(--text2)}
.side.off .settingsrow{justify-content:center}
.side.off .settingsrow .themelabel{font-size:0;gap:0}
.ovl.ovl-app{position:fixed}

/* ---- Heatmap (calendar year, GitHub grid) ----
   Columns and cells are fractional so the grid spans the full card width;
   cells stay square via aspect-ratio. Below min-width the wrapper scrolls
   rather than letting the squares shrink to nothing. */
/* The bar is hidden, not the scrolling: min-width below keeps the full year at a
   readable size, so on a narrow window the grid still has to pan. Removing
   overflow entirely would clip December instead. */
.mc-heat-scroll{overflow-x:auto;padding-bottom:0;scrollbar-width:none;-ms-overflow-style:none}
.mc-heat-scroll::-webkit-scrollbar{width:0;height:0;display:none}
.mc-heat{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:7px 9px;min-width:560px}
.mc-months{grid-column:2;grid-row:1;display:grid;gap:3px;font-size:10.5px;color:var(--label)}
.mc-month{white-space:nowrap}
/* Shares the row track with .mc-grid, so each label lines up with its own row
   (row 1 is Monday, matching the Mon-aligned columns built in JS). */
.mc-days{grid-column:1;grid-row:2;display:grid;grid-template-rows:repeat(7,1fr);gap:3px;
  align-items:center;justify-items:center;font-size:10px;line-height:1;color:var(--label)}
.mc-grid{grid-column:2;grid-row:2;display:grid;grid-template-rows:repeat(7,auto);
  grid-auto-flow:column;grid-auto-columns:1fr;gap:3px}
.mc-cell{width:11px;height:11px;border-radius:2px;background:var(--mc-l0);display:block}
.mc-grid .mc-cell{width:100%;height:auto;aspect-ratio:1;border-radius:3px}
.mc-cell[data-level="1"]{background:var(--mc-l1)}
.mc-cell[data-level="2"]{background:var(--mc-l2)}
.mc-cell[data-level="3"]{background:var(--mc-l3)}
.mc-cell[data-level="4"]{background:var(--mc-l4)}
.mc-cell.is-blank{background:none}

/* Only days with activity react. A quiet square stays inert, so the lit ones
   read as the ones worth pointing at. Same glow the rest of the UI uses. */
.mc-cell.is-live{cursor:pointer;transition:box-shadow .15s ease,transform .15s ease}
/* The glow does the work; the lift is barely there, just enough to separate the
   square from its neighbours. */
.mc-cell.is-live:hover,.mc-cell.is-live:focus-visible{
  box-shadow:var(--glow-neon-sm);transform:scale(1.08);outline:none;position:relative;z-index:2}

/* Fixed, and parented inside #rmApp: the heatmap scrolls horizontally inside its
   own overflow and would clip a tooltip placed within the grid, but every theme
   token lives on .app, so a node on <body> would inherit none of them. Font and
   colour are set outright rather than inherited, so this cannot fall back to the
   browser's serif default if it is ever reparented. */
.mc-heat-tip{position:fixed;z-index:60;pointer-events:none;
  background:var(--card);color:var(--text);border:1px solid var(--card-border);
  border-radius:8px;padding:7px 10px;
  font-family:'Satoshi','Manrope',sans-serif;font-size:12.5px;line-height:1.35;
  font-weight:500;letter-spacing:.01em;
  white-space:nowrap;box-shadow:0 10px 28px rgba(0,0,0,.45);
  animation:mcTipIn .12s ease both}
.mc-heat-tip[hidden]{display:none}
@keyframes mcTipIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.mc-heat-tip.is-below{animation-name:mcTipInBelow}
@keyframes mcTipInBelow{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.mc-heat-foot{display:flex;align-items:center;gap:16px;margin-top:14px;flex-wrap:wrap}
.mc-total{font-size:12.5px;color:var(--sub)}
.mc-legend{margin-left:auto;display:flex;align-items:center;gap:4px;font-size:11px;color:var(--label)}
.mc-legend .mc-cell{margin:0 1px}

/* ---- To-dos (Notion-style table) ---- */
/* Bar hidden, panning kept: .mct below is 1000px at minimum so the seven columns
   stay legible, and a narrower window still has to reach the Link column. */
.mct-scroll{overflow-x:auto;margin:0 -4px;padding:0 4px;scrollbar-width:none;-ms-overflow-style:none}
.mct-scroll::-webkit-scrollbar{width:0;height:0;display:none}
.mct{--mct-cols:32px minmax(210px,1.5fr) minmax(160px,1.2fr) 126px 136px 118px minmax(150px,1fr) 30px;
  min-width:1000px}
/* Cells stretch to the full row height and centre their own content, so the
   checkbox stays aligned with the title even when a note wraps to two lines. */
.mct-head,.mct-row{display:grid;grid-template-columns:var(--mct-cols);align-items:stretch}
.mct-head{padding:0 0 8px;border-bottom:1px solid var(--card-border)}
.mct-head span{display:flex;align-items:center;gap:6px;padding:0 8px;
  font-size:11.5px;font-weight:500;color:var(--label);white-space:nowrap}
.mct-head .ic{color:var(--label);opacity:.8}
.mct-rows{display:flex;flex-direction:column}
.mct-empty{padding:16px 8px;font-size:13px;color:var(--sub)}

.mct-row{position:relative;border-bottom:1px solid var(--tborder);
  transition:background .16s ease}
.mct-row:hover{background:var(--hover)}
.mct-c{min-width:0;display:flex;align-items:center;gap:6px;padding:9px 8px}
.mct-c-check{justify-content:center;padding-left:0;padding-right:0}
.mct-c-del{padding-left:0;padding-right:0;justify-content:center}

/* fields read as plain text until focused */
.mct-title,.mct-notes,.mct-date{width:100%;min-width:0;font-family:'Satoshi','Manrope',sans-serif;
  color:var(--text);background:none;border:1px solid transparent;border-radius:7px;outline:none;
  padding:5px 7px;transition:background .15s,border-color .15s,box-shadow .2s}
.mct-title{font-size:14px;font-weight:500}
.mct-notes{font-size:13px;color:var(--text2);line-height:1.45;resize:none;overflow:hidden;min-height:29px}
.mct-date{font-size:13px;color:var(--text2);cursor:pointer}
/* an unset native date input still prints dd/mm/yyyy, dim it so empty cells read as empty */
.mct-date.is-empty:not(:focus):not(:hover){color:var(--placeholder);opacity:.5}
.mct-title::placeholder,.mct-notes::placeholder{color:var(--placeholder)}
.mct-title:hover,.mct-notes:hover,.mct-date:hover{background:var(--hover2)}
.mct-title:focus,.mct-notes:focus,.mct-date:focus{background:var(--bg);border-color:var(--glow-edge);box-shadow:var(--glow-neon-sm)}
.mct-row.is-done .mct-title{color:var(--sub);text-decoration:line-through}

/* checkbox with an elastic pop on completion */
.mc-check{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--cellmute);border-radius:5px;background:none;color:transparent;cursor:pointer;padding:0;
  transition:background .18s,border-color .18s,color .18s}
.mc-check:hover{border-color:var(--accent)}
.mct-row.is-done .mc-check,
.mc-core-row.is-done .mc-check,
.mc-due-row.is-done .mc-check{background:var(--accent);border-color:var(--accent);color:#141413}
.mc-check.is-pop{animation:mct-pop .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes mct-pop{0%{transform:scale(1)}38%{transform:scale(1.38)}100%{transform:scale(1)}}

/* status pill + menu */
.mct-status{display:inline-flex;align-items:center;gap:7px;max-width:100%;
  font-family:'Satoshi','Manrope',sans-serif;font-size:12.5px;font-weight:500;
  border:none;border-radius:999px;padding:5px 11px;cursor:pointer;white-space:nowrap;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),filter .15s}
.mct-status:hover{filter:brightness(1.12)}
.mct-status:active{transform:scale(.96)}
.mct-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:currentColor}
.mct-status[data-status="todo"],.mct-dot[data-status="todo"]{color:#ef4444}
.mct-status[data-status="doing"],.mct-dot[data-status="doing"]{color:#eab308}
.mct-status[data-status="done"],.mct-dot[data-status="done"]{color:#22c55e}
.mct-status[data-status="todo"]{background:rgba(239,68,68,.14)}
.mct-status[data-status="doing"]{background:rgba(234,179,8,.14)}
.mct-status[data-status="done"]{background:rgba(34,197,94,.14)}
.mct-status-label,.mct-priority-label{color:var(--text2);overflow:hidden;text-overflow:ellipsis}

/* priority pill, its own hue ramp so it never reads as a second status */
.mct-priority{display:inline-flex;align-items:center;gap:7px;max-width:100%;
  font-family:'Satoshi','Manrope',sans-serif;font-size:12.5px;font-weight:500;
  background:var(--hover2);border:none;border-radius:999px;padding:5px 11px;cursor:pointer;white-space:nowrap;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),filter .15s}
.mct-priority:hover{filter:brightness(1.12)}
.mct-priority:active{transform:scale(.96)}
.mct-priority[data-priority="high"],.mct-dot[data-priority="high"]{color:#ff5f56}
.mct-priority[data-priority="med"],.mct-dot[data-priority="med"]{color:#ffa53d}
.mct-priority[data-priority="low"],.mct-dot[data-priority="low"]{color:#5aa9ff}
.mct-priority[data-priority=""],.mct-dot[data-priority=""]{color:var(--cellmute)}
.mct-priority[data-priority="high"]{background:rgba(255,95,86,.14)}
.mct-priority[data-priority="med"]{background:rgba(255,165,61,.14)}
.mct-priority[data-priority="low"]{background:rgba(90,169,255,.14)}
.mct-c-status{position:relative}
.mct-menu{position:absolute;top:calc(100% - 2px);left:8px;z-index:30;min-width:160px;padding:5px;
  background:var(--card);border:1px solid var(--card-border);border-radius:11px;
  box-shadow:0 14px 34px rgba(0,0,0,.34);display:flex;flex-direction:column;gap:2px;
  animation:mct-menu-in .18s cubic-bezier(.34,1.56,.64,1)}
@keyframes mct-menu-in{from{opacity:0;transform:translateY(-6px) scale(.96)}to{opacity:1;transform:none}}
.mct-menu-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  font-family:'Satoshi','Manrope',sans-serif;font-size:13px;color:var(--text2);
  background:none;border:none;border-radius:7px;padding:7px 9px;cursor:pointer;transition:background .12s,color .12s}
.mct-menu-item:hover{background:var(--hover2);color:var(--text)}
.mct-menu-item.is-on{color:var(--text);font-weight:500}

/* link */
.mct-c-link{gap:4px}
.mct-link{flex:1 1 0;min-width:0;font-family:'Satoshi','Manrope',sans-serif;font-size:13px;
  color:var(--text2);background:none;border:1px solid transparent;border-radius:7px;outline:none;
  padding:5px 7px;text-overflow:ellipsis;transition:background .15s,border-color .15s,box-shadow .2s}
.mct-link::placeholder{color:var(--placeholder)}
.mct-link:hover{background:var(--hover2)}
.mct-link:focus{background:var(--bg);border-color:var(--glow-edge);box-shadow:var(--glow-neon-sm);color:var(--text)}
.mct-link-open{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;
  border-radius:7px;color:var(--nav);background:none;border:none;cursor:pointer;
  transition:color .15s,background .15s,transform .16s cubic-bezier(.34,1.56,.64,1)}
.mct-link-open:hover{color:var(--text);background:var(--hover2);transform:scale(1.12)}
.mct-link-open[hidden]{display:none}

.mct-del{display:flex;align-items:center;justify-content:center;padding:4px;border-radius:6px;
  color:var(--nav);background:none;border:none;cursor:pointer;opacity:0;
  transition:opacity .15s,color .15s,background .15s}
.mct-row:hover .mct-del,.mct-del:focus-visible{opacity:1}
.mct-del:hover{color:var(--text);background:var(--hover2)}

/* new task */
.mct-new{display:flex;align-items:center;gap:8px;width:100%;margin-top:2px;
  font-family:'Satoshi','Manrope',sans-serif;font-size:13.5px;font-weight:500;color:var(--nav);
  background:none;border:none;border-radius:9px;padding:11px 8px;cursor:pointer;text-align:left;
  transition:background .15s,color .15s}
.mct-new:hover{background:var(--hover);color:var(--text2)}
.mct-new .ic{transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.mct-new:hover .ic{transform:rotate(90deg) scale(1.15)}

/* row enter / leave */
.mct-row.is-entering{animation:mct-row-in .44s cubic-bezier(.34,1.56,.64,1)}
@keyframes mct-row-in{
  0%{opacity:0;transform:translateY(-10px) scale(.97)}
  60%{opacity:1}
  100%{opacity:1;transform:none}
}
.mct-row.is-leaving{overflow:hidden;animation:mct-row-out .26s cubic-bezier(.4,0,1,1) forwards}
@keyframes mct-row-out{
  0%{opacity:1}
  100%{opacity:0;height:0;padding-top:0;padding-bottom:0;transform:translateX(-14px)}
}
@media (prefers-reduced-motion:reduce){
  .mct-row.is-entering,.mct-row.is-leaving,.mc-check.is-pop,.mct-menu{animation:none}
  .mct-new .ic,.mct-link-open,.mct-status{transition:none}
}

/* ============================================================
   Deep work timer, fixed bottom-right, sits above the panes but
   clear of the centre toast and below the compliance gate.
   ============================================================ */
.dw-widget{position:relative;
  display:flex;align-items:center;gap:13px;padding:12px 13px;min-width:244px;
  background:var(--card);border:1px solid var(--card-border);border-radius:16px;
  box-shadow:0 18px 44px rgba(0,0,0,.34),var(--glow-neon-sm);
  cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
.dw-widget[hidden]{display:none}
.dw-widget:hover{transform:translateY(-2px);box-shadow:0 22px 52px rgba(0,0,0,.4),var(--glow-neon)}
.dw-widget.is-entering{animation:dw-in .46s cubic-bezier(.34,1.56,.64,1)}
@keyframes dw-in{0%{opacity:0;transform:translateY(22px) scale(.94)}100%{opacity:1;transform:none}}

.dw-copy{flex:1 1 auto;min-width:0}
.dw-label{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--label)}
.dw-time{font-family:var(--font-site-mono);font-size:23px;font-weight:500;line-height:1.15;
  color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dw-bar{margin-top:7px;height:3px;border-radius:999px;background:var(--sunken);overflow:hidden}
.dw-bar i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#e0651f,var(--accent));transition:width .3s linear}

.dw-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.dw-btn{display:flex;align-items:center;justify-content:center;width:27px;height:27px;flex-shrink:0;
  border-radius:8px;color:var(--nav);background:none;border:none;cursor:pointer;
  transition:color .15s,background .15s,transform .16s cubic-bezier(.34,1.56,.64,1)}
.dw-btn:hover{color:var(--text);background:var(--hover2);transform:scale(1.1)}
.dw-btn[hidden]{display:none}
.dw-btn .ic{fill:currentColor;stroke:none}
.dw-btn#dwStop .ic{fill:none;stroke:currentColor}

/* ---- the hourglass ---- */
.dw-glass{width:40px;height:53px;flex-shrink:0;overflow:visible}
.dw-cap,.dw-bulb{fill:none;stroke:var(--cellmute);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
/* The `d` is repainted every tick and moves ~0.002 units at a time, so it needs
   no transition to look continuous. */
.dw-sand{fill:var(--accent);filter:drop-shadow(0 0 3px rgba(255,143,85,.5))}
/* A fine thread rather than marching dashes, stroked with a gradient that
   dissolves on the way down, so with an empty bulb it fades into the drop
   instead of drawing a hard line onto the floor. Once the heap is high enough
   it is painted over anyway, since the pile is drawn last. */
.dw-stream{stroke:url(#dwStreamFade);stroke-width:.7;stroke-linecap:round}
.dw-stream-top{stop-color:var(--accent);stop-opacity:.5}
.dw-stream-end{stop-color:var(--accent);stop-opacity:0}

/* Three grains falling into the heap. Transform + opacity only, so this stays
   on the compositor, no layout, no paint, no per-frame JS. */
.dw-grain{fill:var(--accent);opacity:0;animation:dw-grain 1.6s linear infinite}
.dw-grain:nth-child(1){--dx:-.9px}
.dw-grain:nth-child(2){--dx:1.1px;animation-duration:2.05s;animation-delay:-.75s}
.dw-grain:nth-child(3){--dx:-.35px;animation-duration:1.8s;animation-delay:-1.3s}
@keyframes dw-grain{
  0%{transform:translate(0,0);opacity:0}
  12%{opacity:.95}
  88%{opacity:.95}
  100%{transform:translate(var(--dx,0px),24.5px);opacity:0}
}

/* paused, the sand stops mid-fall */
.dw-widget.is-paused{box-shadow:0 18px 44px rgba(0,0,0,.34)}
.dw-widget.is-paused .dw-stream{opacity:.35}
.dw-widget.is-paused .dw-grain{animation-play-state:paused}
.dw-widget.is-paused .dw-sand{filter:none;opacity:.55}
.dw-widget.is-paused .dw-time{color:var(--sub)}

/* complete, the glass turns over and the hour is banked */
.dw-widget.is-done .dw-stream,.dw-widget.is-done .dw-grains{display:none}
.dw-widget.is-done .dw-glass{animation:dw-flip .95s cubic-bezier(.34,1.4,.5,1) both}
.dw-widget.is-done .dw-label{color:var(--accent)}
@keyframes dw-flip{0%{transform:rotate(0)}100%{transform:rotate(180deg)}}

@media (prefers-reduced-motion:reduce){
  .dw-grain{animation:none;opacity:0}
  .dw-widget.is-done .dw-glass{animation:none}
  .dw-widget.is-entering{animation:none}
  .dw-sand{transition:none}
  .mc-core-pulse{animation:none}
  .mc-ring-fill{transition:none}
  .mc-ring.is-full .mc-ring-svg,.mc-ring.is-burst .mc-ring-svg,.mc-ring.is-burst .mc-ring-halo{animation:none}
}
@media (max-width:640px){
  .dw-widget{min-width:0}
  .dw-bar{display:none}
}

/* ============================================================
   Corner dock, the deep-work timer stacked over Jarvis. Sits above
   the panes, clear of the centre toast, below the compliance gate.
   ============================================================ */
.rm-dock{position:fixed;right:22px;bottom:22px;z-index:58;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  max-height:calc(100vh - 44px);
  /* the container spans the gaps, so it must not eat clicks meant for the page */
  pointer-events:none}
.rm-dock > *,.rm-dock button,.rm-dock .jv-panel,.rm-dock .jv-bubble{pointer-events:auto}
@media (max-width:640px){.rm-dock{right:12px;bottom:12px;gap:9px}}

/* ============================================================
   Jarvis
   ============================================================ */
.jv{display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:0;pointer-events:none}
.jv > *{pointer-events:auto}

/* ---- the eye ----
   Jarvis watches the board, so it reads as an eye rather than a status light.
   It blinks on a long cycle: one transform on one group, nothing per-frame. */
.jv-orb{width:26px;height:26px;flex-shrink:0;overflow:visible}
.jv-eye{transform-box:fill-box;transform-origin:center;
  animation:jv-blink 6.5s ease-in-out infinite}
.jv-eye-lid{fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.jv-eye-iris{fill:var(--accent)}
/* fixed ink, not a token: the pupil sits on the orange iris in both themes */
.jv-eye-pupil{fill:#141413}
.jv-eye-glint{fill:#fff;opacity:.85}
@keyframes jv-blink{
  0%,93%,100%{transform:scaleY(1)}
  95.5%{transform:scaleY(.08)}
  98%{transform:scaleY(1)}
}

/* ---- launcher ---- */
.jv-launcher{position:relative;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;flex-shrink:0;border-radius:50%;cursor:pointer;
  background:var(--card);border:1px solid var(--card-border);
  box-shadow:0 14px 34px rgba(0,0,0,.34);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,border-color .2s}
.jv-launcher:hover{transform:scale(1.07);box-shadow:0 18px 40px rgba(0,0,0,.4),var(--glow-neon-sm)}
.jv-launcher:active{transform:scale(.96)}
.jv-launcher .jv-orb{width:28px;height:28px}
.jv.is-open .jv-launcher{border-color:var(--glow-edge);box-shadow:0 14px 34px rgba(0,0,0,.34),var(--glow-neon-sm)}
/* something urgent is waiting: a slow breath, not a flash */
.jv-root.has-urgent .jv-launcher,.jv.has-urgent .jv-launcher{animation:jv-attend 3.2s ease-in-out infinite}
@keyframes jv-attend{0%,100%{box-shadow:0 14px 34px rgba(0,0,0,.34)}50%{box-shadow:0 14px 34px rgba(0,0,0,.34),var(--glow-neon)}}

.jv-badge{position:absolute;top:-2px;right:-2px;min-width:19px;height:19px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;border-radius:999px;
  background:#ff5f56;color:#fff;font-size:10.5px;font-weight:700;line-height:1;
  border:2px solid var(--card)}
.jv-badge[hidden]{display:none}

/* ---- unprompted speech bubble ---- */
.jv-bubble{position:relative;display:flex;align-items:flex-start;gap:8px;
  max-width:300px;padding:11px 12px;cursor:pointer;
  background:var(--card);border:1px solid var(--card-border);border-radius:14px 14px 4px 14px;
  box-shadow:0 16px 38px rgba(0,0,0,.38);
  opacity:0;transform:translateY(8px) scale(.97);
  transition:opacity .2s,transform .24s cubic-bezier(.34,1.56,.64,1)}
.jv-bubble[hidden]{display:none}
.jv-bubble.is-in{opacity:1;transform:none}
.jv-bubble:hover{border-color:var(--glow-edge)}
.jv-bubble-txt{font-size:12.5px;line-height:1.45;color:var(--text2)}
.jv-bubble-x{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:18px;height:18px;
  margin-top:1px;border-radius:5px;color:var(--nav);background:none;border:none;cursor:pointer;
  transition:color .15s,background .15s}
.jv-bubble-x:hover{color:var(--text);background:var(--hover2)}

/* ---- panel ---- */
.jv-panel{display:flex;flex-direction:column;width:344px;max-width:calc(100vw - 44px);
  max-height:min(580px,calc(100vh - 170px));overflow:hidden;
  background:var(--card);border:1px solid var(--card-border);border-radius:18px;
  box-shadow:0 24px 58px rgba(0,0,0,.45);
  transform-origin:bottom right;animation:jv-open .3s cubic-bezier(.2,.8,.3,1)}
.jv-panel[hidden]{display:none}
@keyframes jv-open{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}

.jv-head{display:flex;align-items:center;gap:9px;padding:13px 13px 10px}
.jv-name{font-family:var(--font-product);font-size:14px;font-weight:500;color:var(--text);letter-spacing:.01em}
.jv-icon{margin-left:0;display:flex;align-items:center;justify-content:center;width:27px;height:27px;
  flex-shrink:0;border-radius:8px;color:var(--nav);background:none;border:none;cursor:pointer;
  transition:color .15s,background .15s}
.jv-icon:first-of-type{margin-left:auto}
.jv-icon:hover{color:var(--text);background:var(--hover2)}
.jv-icon.is-on{color:var(--accent);background:rgba(255,143,85,.13)}

/* the typed line */
.jv-scroll{flex:1 1 auto;overflow-y:auto;padding:0 12px 8px;
  display:flex;flex-direction:column;min-height:0}
/* Nothing in here may be compressed below its content height. Without this the
   column shrinks a wrapped greeting to one line and the rest of the text spills
   out behind the stats row: the scroller is what should give, not the items. */
.jv-scroll > *{flex:0 0 auto}
.jv-line{margin:0;padding:0 3px 12px;font-size:14.5px;line-height:1.45;font-weight:500;
  color:var(--text);min-height:21px}

.jv-stats{display:flex;flex-wrap:wrap;gap:6px;padding:0 1px 12px}
.jv-stat{display:inline-flex;align-items:baseline;gap:5px;padding:4px 9px;border-radius:999px;
  background:var(--sunken);font-family:var(--font-site-mono);font-size:11.5px;font-weight:500;color:var(--text2)}
.jv-stat i{font-style:normal;font-family:'Satoshi','Manrope',sans-serif;font-size:10px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--label)}
.jv-stat.is-on{color:var(--accent);background:rgba(255,143,85,.12)}

.jv-list{display:flex;flex-direction:column;gap:6px}
.jv-empty{padding:16px 6px 20px;font-size:12.5px;line-height:1.5;color:var(--sub);text-align:center}
.jv-muted{padding:8px 10px;margin-bottom:2px;border-radius:9px;background:var(--hover2);
  font-size:11.5px;line-height:1.4;color:var(--sub)}
.jv.is-muted .jv-eye{animation:none;transform:scaleY(.45)}
.jv.is-muted .jv-eye-iris,.jv.is-muted .jv-eye-lid{opacity:.55}

.jv-card{position:relative;display:flex;gap:10px;padding:11px 11px 11px 10px;border-radius:12px;
  background:var(--sunken);border-left:2px solid var(--cellmute);
  animation:jv-card-in .34s cubic-bezier(.2,.8,.3,1) backwards;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes jv-card-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.jv-card-ic{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;
  border-radius:7px;background:var(--card);color:var(--nav)}
.jv-card-body{min-width:0;flex:1 1 auto}
.jv-card-title{font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:3px}
.jv-card-text{font-size:12px;line-height:1.5;color:var(--sub)}
.jv-card-act{margin-top:8px;font-family:'Satoshi','Manrope',sans-serif;font-size:11.5px;font-weight:600;
  color:var(--text2);background:var(--card);border:1px solid var(--card-border);border-radius:999px;
  padding:5px 11px;cursor:pointer;transition:color .15s,border-color .15s,box-shadow .22s}
.jv-card-act:hover{color:var(--text);border-color:var(--glow-edge);box-shadow:var(--glow-neon-sm)}
.jv-card-x{position:absolute;top:7px;right:7px;display:flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:5px;color:var(--nav);background:none;border:none;cursor:pointer;
  opacity:0;transition:opacity .15s,color .15s,background .15s}
.jv-card:hover .jv-card-x,.jv-card-x:focus-visible{opacity:1}
.jv-card-x:hover{color:var(--text);background:var(--hover2)}

/* tone sets the accent stripe and icon colour */
.jv-urgent{border-left-color:#ff5f56}
.jv-urgent .jv-card-ic{color:#ff5f56}
.jv-push{border-left-color:var(--accent)}
.jv-push .jv-card-ic{color:var(--accent)}
.jv-info{border-left-color:#5aa9ff}
.jv-info .jv-card-ic{color:#5aa9ff}
.jv-win{border-left-color:#22c55e}
.jv-win .jv-card-ic{color:#22c55e}

/* ---- conversation ---- */
.jv-thread{display:flex;flex-direction:column;gap:8px;padding-top:2px}
.jv-thread:not(:empty){padding-top:10px}
.jv-msg{display:flex}
.jv-msg-you{justify-content:flex-end}
.jv-msg-body{max-width:88%;padding:9px 12px;border-radius:15px;font-size:12.5px;line-height:1.55;
  word-wrap:break-word;overflow-wrap:anywhere}
.jv-msg-you .jv-msg-body{background:var(--send-bg);color:var(--send-fg);border-bottom-right-radius:5px}
.jv-msg-jarvis .jv-msg-body{background:var(--sunken);color:var(--text2);border-bottom-left-radius:5px}
.jv-msg-act{display:block;margin-top:9px;font-family:'Satoshi','Manrope',sans-serif;font-size:11.5px;
  font-weight:600;color:var(--text2);background:var(--card);border:1px solid var(--card-border);
  border-radius:999px;padding:5px 11px;cursor:pointer;
  transition:color .15s,border-color .15s,box-shadow .22s}
.jv-msg-act:hover{color:var(--text);border-color:var(--glow-edge);box-shadow:var(--glow-neon-sm)}

.jv-typing{display:flex;align-items:center;gap:4px;padding:13px 14px}
.jv-typing i{width:5px;height:5px;border-radius:50%;background:var(--nav);
  animation:jv-dot 1.1s ease-in-out infinite}
.jv-typing i:nth-child(2){animation-delay:.15s}
.jv-typing i:nth-child(3){animation-delay:.3s}
@keyframes jv-dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ---- suggested questions ---- */
.jv-chips{position:relative;flex:0 0 auto;display:flex;gap:6px;padding:9px 12px 3px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.jv-chips::-webkit-scrollbar{display:none}
/* Fades the thread out above the chips so a clipped message reads as "scroll for
   more". It has to be a shadow, not a pseudo-element: overflow-x:auto forces
   overflow-y to auto too, which would clip anything positioned above the row. */
.jv-chips{background:var(--card);box-shadow:0 -14px 16px -8px var(--card)}
.jv-chip{flex-shrink:0;white-space:nowrap;font-family:'Satoshi','Manrope',sans-serif;
  font-size:11.5px;font-weight:500;color:var(--nav);background:var(--sunken);
  border:1px solid transparent;border-radius:999px;padding:6px 11px;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s}
.jv-chip:hover{color:var(--text);border-color:var(--glow-edge);background:var(--card)}

/* ---- composer ---- */
.jv-compose{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:9px 12px 12px}
.jv-input{flex:1 1 auto;min-width:0;font-family:'Satoshi','Manrope',sans-serif;font-size:12.5px;
  color:var(--text);background:var(--sunken);border:1px solid transparent;border-radius:999px;
  padding:10px 14px;outline:none;transition:background .15s,border-color .15s,box-shadow .2s}
.jv-input::placeholder{color:var(--placeholder)}
.jv-input:focus{background:var(--bg);border-color:var(--glow-edge);box-shadow:var(--glow-neon-sm)}
.jv-send{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:35px;height:35px;
  border-radius:50%;color:var(--send-fg);background:var(--send-bg);border:none;cursor:pointer;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .22s,filter .15s}
.jv-send:hover{box-shadow:var(--glow-neon-sm);filter:brightness(1.08)}
.jv-send:active{transform:scale(.92)}

@media (prefers-reduced-motion:reduce){
  .jv-eye,.jv-launcher{animation:none}
  .jv-panel,.jv-card,.jv-typing i{animation:none}
  .jv-bubble{transition:opacity .15s}
}

/* ============================================================
   Outreach, cadences and today's queue
   ============================================================ */
.cad-tabs{display:flex;gap:4px;margin-bottom:18px;padding:3px;border-radius:999px;
  background:var(--sunken);width:fit-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.cad-tabs::-webkit-scrollbar{display:none}
.cad-tab{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:'Satoshi','Manrope',sans-serif;font-size:13px;font-weight:500;color:var(--nav);
  background:none;border:none;border-radius:999px;padding:8px 15px;cursor:pointer;
  transition:background .16s,color .16s}
.cad-tab:hover{color:var(--text2)}
.cad-tab.on{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.cad-tab-n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;border-radius:999px;background:var(--accent);color:#141413;font-size:10.5px;font-weight:700}
.cad-tab-n[hidden]{display:none}

.cad-card{margin:0 0 18px}
.cad-card-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:14px}
.cad-card-head .pt{margin-bottom:0}
.cad-card-head .cad-link{margin-left:auto}

.cad-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:'Satoshi','Manrope',sans-serif;font-size:13px;font-weight:600;
  color:var(--text2);background:var(--sunken);border:1px solid transparent;border-radius:999px;
  padding:9px 16px;cursor:pointer;white-space:nowrap;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .22s,filter .15s,color .15s}
.cad-btn:hover{color:var(--text);box-shadow:var(--glow-neon-sm)}
.cad-btn:active{transform:scale(.97)}
.cad-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.cad-btn-primary{color:var(--send-fg);background:var(--send-bg)}
.cad-btn-primary:hover{color:var(--send-fg);filter:brightness(1.08)}
.cad-btn-good{color:#22c55e;background:rgba(34,197,94,.13)}
.cad-btn-bad{color:#ff5f56;background:rgba(255,95,86,.12)}
.cad-link{font-family:'Satoshi','Manrope',sans-serif;font-size:12.5px;font-weight:500;color:var(--nav);
  background:none;border:none;padding:6px 4px;cursor:pointer;transition:color .15s}
.cad-link:hover{color:var(--text2)}
.cad-note{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--label)}

/* ---- today's queue ---- */
.cad-q-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.cad-q-pos{font-family:var(--font-site-mono);font-size:12px;font-weight:500;color:var(--sub);white-space:nowrap}
.cad-q-bar{flex:1 1 auto;height:3px;border-radius:999px;background:var(--sunken);overflow:hidden}
.cad-q-bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#e0651f,var(--accent));transition:width .35s ease}
.cad-q-done{font-size:12px;color:var(--sub);white-space:nowrap}

.cad-q-lead{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.cad-q-id{min-width:0}
.cad-q-lead h2{margin:0 0 4px;font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--text);
  word-break:break-word}
.cad-q-sub{font-size:12.5px;color:var(--sub)}
.cad-q-late{margin-left:auto;flex-shrink:0;font-size:11.5px;font-weight:600;padding:5px 11px;
  border-radius:999px;background:var(--hover2);color:var(--sub);white-space:nowrap}
.cad-q-late.is-late{background:rgba(255,95,86,.14);color:#ff5f56}

.cad-q-contact{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.cad-chip{display:inline-flex;align-items:center;gap:7px;max-width:100%;
  font-size:12.5px;color:var(--text2);text-decoration:none;
  background:var(--sunken);border:1px solid transparent;border-radius:999px;padding:6px 12px;
  transition:color .15s,border-color .15s}
.cad-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cad-chip .ic{color:var(--accent);flex-shrink:0}
.cad-chip:hover{color:var(--text);border-color:var(--glow-edge)}
.cad-q-nocontact{font-size:12.5px;color:var(--label)}

.cad-q-script{position:relative;padding:15px 16px;border-radius:12px;
  background:var(--sunken);border:1px solid var(--tborder);margin-bottom:16px}
.cad-q-script-head{display:flex;align-items:center;gap:7px;margin-bottom:10px;
  font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--label)}
.cad-q-script-head .ic{color:var(--accent)}
.cad-q-subj{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--tborder);
  font-size:13.5px;font-weight:600;color:var(--text)}
.cad-q-subj i{display:block;font-style:normal;font-size:10px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--label);margin-bottom:3px}
.cad-q-body{font-size:13.5px;line-height:1.65;color:var(--text2);white-space:normal}
.cad-copy{position:absolute;top:11px;right:11px;display:inline-flex;align-items:center;gap:6px;
  font-family:'Satoshi','Manrope',sans-serif;font-size:11.5px;font-weight:600;color:var(--nav);
  background:var(--card);border:1px solid var(--card-border);border-radius:999px;padding:5px 11px;
  cursor:pointer;transition:color .15s,border-color .15s}
.cad-copy:hover{color:var(--text);border-color:var(--glow-edge)}
.cad-copy.is-done{color:var(--accent);border-color:var(--glow-edge)}

/* do the touch */
.cad-q-do{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}
.cad-do{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:'Satoshi','Manrope',sans-serif;font-size:13.5px;font-weight:600;
  color:var(--send-fg);background:var(--send-bg);border-radius:999px;padding:11px 20px;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .22s,filter .15s}
.cad-do .ic{color:currentColor}
.cad-do:hover{filter:brightness(1.08);box-shadow:var(--glow-neon-sm)}
.cad-do:active{transform:scale(.97)}
.cad-do-alt{font-family:'Satoshi','Manrope',sans-serif;font-size:12px;font-weight:500;
  color:var(--nav);text-decoration:none;padding:6px 2px;transition:color .15s}
.cad-do-alt:hover{color:var(--text2)}
.cad-do-none{font-size:12.5px;color:#ff5f56}
/* only shown once they've actually opened the composer or dialer */
.cad-do-hint{display:none;font-size:11.5px;font-weight:500;color:var(--accent)}
.cad-q-do.is-primed .cad-do-hint{display:inline}
.cad-btn.is-next{animation:cad-next 1.9s ease-in-out infinite}
@keyframes cad-next{0%,100%{box-shadow:var(--glow-neon-sm)}50%{box-shadow:var(--glow-neon)}}

.cad-q-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.cad-q-minor{display:flex;flex-wrap:wrap;gap:14px;padding-top:12px;border-top:1px solid var(--tborder)}

/* ---- empty queue ---- */
.cad-empty{text-align:center;padding:44px 26px}
.cad-empty-ic{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:0 auto 16px;
  border-radius:50%;background:rgba(34,197,94,.13);color:#22c55e}
.cad-empty h2{margin:0 0 7px;font-size:20px;font-weight:700;color:var(--text)}
.cad-empty p{margin:0 auto 18px;max-width:380px;font-size:13px;line-height:1.55;color:var(--sub)}

/* ---- cadence cards ---- */
.cad-seq-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px}
.cad-seq-head .cad-btn{margin-left:auto;flex-shrink:0}
/* One row whatever the step count - cadences run from four steps to six, and
   a wrapped timeline reads as two sequences rather than one. */
.cad-steps{display:flex;flex-wrap:nowrap;gap:0;margin-bottom:16px}
.cad-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  flex:1 1 0;min-width:0;padding:0 14px 0 0}
/* the connector between steps */
.cad-step:not(:last-child)::after{content:"";position:absolute;left:26px;right:6px;top:12px;height:1px;
  background:var(--tborder)}
.cad-step-dot{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:25px;height:25px;border-radius:50%;background:var(--sunken);
  border:1px solid var(--card-border);color:var(--accent)}
.cad-step[data-ch="call"] .cad-step-dot{color:#5aa9ff}
.cad-step[data-ch="dm"] .cad-step-dot{color:#c07aff}
/* the cadence's shape, so the vertical's rhythm reads before the steps do */
.cad-shape{display:inline-block;margin-top:7px;padding:3px 9px;border-radius:999px;
  font-family:var(--font-site-mono);font-size:10.5px;font-weight:500;letter-spacing:.02em;
  color:var(--label);background:var(--chip,rgba(255,255,255,.05));
  border:1px solid var(--card-border)}
.cad-step-day{font-family:var(--font-site-mono);font-size:11.5px;font-weight:500;color:var(--text2);margin-top:4px}
.cad-step-kind{font-size:11px;color:var(--label)}

.cad-stats{display:flex;flex-wrap:wrap;gap:7px}
.cad-stat{display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:999px;
  background:var(--sunken);font-family:var(--font-site-mono);font-size:13px;font-weight:500;color:var(--text2)}
.cad-stat i{font-style:normal;font-family:'Satoshi','Manrope',sans-serif;font-size:10px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--label)}
.cad-stat.is-good{color:#22c55e;background:rgba(34,197,94,.12)}

/* ---- enrol ---- */
.cad-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.cad-pick{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;
  font-family:'Satoshi','Manrope',sans-serif;padding:11px 13px;border-radius:11px;cursor:pointer;
  background:var(--sunken);border:1px solid transparent;transition:border-color .15s,background .15s}
.cad-pick strong{font-size:13px;font-weight:600;color:var(--text)}
.cad-pick span{font-size:11px;line-height:1.4;color:var(--sub)}
.cad-pick:hover{border-color:var(--cellmute)}
.cad-pick.on{border-color:var(--glow-edge);box-shadow:var(--glow-neon-sm)}

.cad-leads{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow-y:auto;
  margin:0 -6px;padding:0 6px}
.cad-lead{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;cursor:pointer;
  transition:background .14s}
.cad-lead:hover{background:var(--hover)}
.cad-lead.on{background:var(--hover2)}
.cad-lead input{width:15px;height:15px;flex-shrink:0;accent-color:var(--accent);cursor:pointer}
.cad-lead-name{font-size:13px;font-weight:500;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cad-lead-meta{margin-left:auto;flex-shrink:0;font-size:11.5px;color:var(--sub);white-space:nowrap}

.cad-enroll-foot{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--tborder)}
.cad-enroll-count{font-size:12.5px;color:var(--sub)}
.cad-enroll-foot .cad-btn{margin-left:auto}

@media (max-width:720px){
  .cad-q-lead h2{font-size:20px}
  .cad-q-actions .cad-btn{flex:1 1 calc(50% - 4px)}
}
@media (prefers-reduced-motion:reduce){
  .cad-btn,.cad-q-bar i,.cad-do{transition:none}
  .mc-cell.is-live{transition:none}
  .mc-cell.is-live:hover,.mc-cell.is-live:focus-visible{transform:none}
  .mc-heat-tip{animation:none}
  .cad-btn.is-next{animation:none;box-shadow:var(--glow-neon-sm)}
}

/* ============================================================
   Pipeline intelligence
   ============================================================ */

/* ---- rot: cards fracture the longer they sit ----
   Cracks are inline-SVG background layers on the card's two pseudo-elements -
   no images, no extra DOM. Severity gates which layer is drawn, so decay reads
   as spreading rather than just darkening: ::before carries the corner and edge
   fractures plus a rust bloom pooling where the metal has split, ::after carries
   the interior web that only badly-neglected cards develop. Strokes taper as
   they travel inward. Card content is lifted above both layers. */
.deal[data-rot="0"],.lrowc[data-rot="0"]{--rot-a:0}
.deal[data-rot],.lrowc[data-rot]{position:relative;transition:filter .4s,border-color .4s}
.deal[data-rot="1"]{border-color:rgba(180,120,60,.28)}
.deal[data-rot="2"]{border-color:rgba(168,98,42,.45);filter:saturate(.85)}
.deal[data-rot="3"]{border-color:rgba(150,80,32,.6);filter:saturate(.7) brightness(.97)}
.deal[data-rot="4"]{border-color:rgba(126,62,24,.82);filter:saturate(.5) brightness(.93)}

/* keep the fractures inside the rounded frame and under the card's content */
.deal[data-rot]{isolation:isolate;overflow:hidden}
.deal[data-rot] > *{position:relative;z-index:2}

/* corner fractures + edge fissures, biting inward from the frame */
.deal[data-rot="2"]::before,.deal[data-rot="3"]::before,.deal[data-rot="4"]::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 160' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23b8601f' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 14 L18 21 L31 17 L46 27' stroke-width='2.4' opacity='.9'/%3E%3Cpath d='M46 27 L58 24 L69 31' stroke-width='1.5' opacity='.68'/%3E%3Cpath d='M31 17 L34 5' stroke-width='1.4' opacity='.6'/%3E%3Cpath d='M46 27 L52 38 L49 47' stroke-width='1.2' opacity='.5'/%3E%3Cpath d='M300 132 L281 127 L268 133 L252 124' stroke-width='2.4' opacity='.9'/%3E%3Cpath d='M252 124 L241 128 L230 121' stroke-width='1.5' opacity='.68'/%3E%3Cpath d='M268 133 L266 146' stroke-width='1.4' opacity='.6'/%3E%3Cpath d='M252 124 L245 113 L248 103' stroke-width='1.2' opacity='.5'/%3E%3Cpath d='M0 96 L14 92 L25 99' stroke-width='2' opacity='.8'/%3E%3Cpath d='M25 99 L38 95 L47 101' stroke-width='1.25' opacity='.55'/%3E%3Cpath d='M25 99 L27 110 L22 118' stroke-width='1.1' opacity='.45'/%3E%3Cpath d='M300 44 L287 49 L276 42' stroke-width='2' opacity='.8'/%3E%3Cpath d='M276 42 L263 47 L255 43' stroke-width='1.25' opacity='.55'/%3E%3Cpath d='M276 42 L274 30' stroke-width='1.1' opacity='.45'/%3E%3Cpath d='M118 0 L123 12 L117 22' stroke-width='1.8' opacity='.72'/%3E%3Cpath d='M117 22 L122 33 L116 43' stroke-width='1.1' opacity='.45'/%3E%3Cpath d='M117 22 L106 26' stroke-width='1' opacity='.4'/%3E%3Cpath d='M196 160 L191 148 L197 138' stroke-width='1.8' opacity='.72'/%3E%3Cpath d='M197 138 L192 128 L198 119' stroke-width='1.1' opacity='.45'/%3E%3Cpath d='M197 138 L208 134' stroke-width='1' opacity='.4'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 42% 46% at 6% 12%, rgba(150,70,24,.2), transparent 70%),
    radial-gradient(ellipse 42% 46% at 94% 88%, rgba(150,70,24,.2), transparent 70%),
    radial-gradient(ellipse 30% 34% at 2% 62%, rgba(140,66,22,.14), transparent 72%),
    radial-gradient(ellipse 30% 34% at 98% 28%, rgba(140,66,22,.14), transparent 72%);
  background-size:100% 100%;background-repeat:no-repeat;
  opacity:var(--rot-a,.55)}
.deal[data-rot="2"]::before{--rot-a:.38}
.deal[data-rot="3"]::before{--rot-a:.6}
.deal[data-rot="4"]::before{--rot-a:.78}

/* interior web - only badly-neglected cards split through the middle; at the
   worst level a full-width fracture runs end to end and rust blooms under it */
.deal[data-rot="3"]::after,.deal[data-rot="4"]::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 160' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23a8551c' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 58 L21 64 L44 57' stroke-width='2.2' opacity='.85'/%3E%3Cpath d='M44 57 L63 68 L86 62' stroke-width='1.5' opacity='.62'/%3E%3Cpath d='M86 62 L104 73 L128 66' stroke-width='1.05' opacity='.44'/%3E%3Cpath d='M128 66 L149 74 L170 68' stroke-width='.85' opacity='.3'/%3E%3Cpath d='M63 68 L69 84 L62 97' stroke-width='1.2' opacity='.5'/%3E%3Cpath d='M62 97 L68 112' stroke-width='.9' opacity='.34'/%3E%3Cpath d='M104 73 L112 88 L128 93' stroke-width='.95' opacity='.36'/%3E%3Cpath d='M44 57 L40 42 L47 30' stroke-width='1.15' opacity='.46'/%3E%3Cpath d='M300 88 L279 82 L258 90' stroke-width='2.1' opacity='.8'/%3E%3Cpath d='M258 90 L238 80 L219 87' stroke-width='1.4' opacity='.58'/%3E%3Cpath d='M219 87 L201 79 L182 85' stroke-width='1' opacity='.4'/%3E%3Cpath d='M258 90 L253 105 L259 119' stroke-width='1.1' opacity='.44'/%3E%3Cpath d='M219 87 L212 101 L197 106' stroke-width='.9' opacity='.34'/%3E%3Cpath d='M238 80 L242 65' stroke-width='.95' opacity='.36'/%3E%3Cpath d='M170 68 L175 55 L169 43' stroke-width='.8' opacity='.28'/%3E%3C/g%3E%3C/svg%3E");
  background-size:100% 100%;background-repeat:no-repeat;
  opacity:var(--rot-a,.6)}
.deal[data-rot="3"]::after{--rot-a:.42}
.deal[data-rot="4"]::after{--rot-a:.66;animation:pi-creep 9s ease-in-out infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 160' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%238f4718' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 132 L26 121 L44 128 L67 112 L91 118 L118 103 L142 109 L166 96 L192 101 L216 88 L243 93 L268 79 L300 84' stroke-width='2.6' opacity='.72'/%3E%3Cpath d='M67 112 L74 134 L66 152' stroke-width='1.4' opacity='.5'/%3E%3Cpath d='M142 109 L150 130 L143 148' stroke-width='1.3' opacity='.46'/%3E%3Cpath d='M216 88 L224 108 L217 124' stroke-width='1.2' opacity='.42'/%3E%3Cpath d='M118 103 L112 84' stroke-width='1.1' opacity='.38'/%3E%3Cpath d='M268 79 L274 60' stroke-width='1' opacity='.34'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 160' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23a8551c' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 58 L21 64 L44 57' stroke-width='2.2' opacity='.85'/%3E%3Cpath d='M44 57 L63 68 L86 62' stroke-width='1.5' opacity='.62'/%3E%3Cpath d='M86 62 L104 73 L128 66' stroke-width='1.05' opacity='.44'/%3E%3Cpath d='M128 66 L149 74 L170 68' stroke-width='.85' opacity='.3'/%3E%3Cpath d='M63 68 L69 84 L62 97' stroke-width='1.2' opacity='.5'/%3E%3Cpath d='M62 97 L68 112' stroke-width='.9' opacity='.34'/%3E%3Cpath d='M104 73 L112 88 L128 93' stroke-width='.95' opacity='.36'/%3E%3Cpath d='M44 57 L40 42 L47 30' stroke-width='1.15' opacity='.46'/%3E%3Cpath d='M300 88 L279 82 L258 90' stroke-width='2.1' opacity='.8'/%3E%3Cpath d='M258 90 L238 80 L219 87' stroke-width='1.4' opacity='.58'/%3E%3Cpath d='M219 87 L201 79 L182 85' stroke-width='1' opacity='.4'/%3E%3Cpath d='M258 90 L253 105 L259 119' stroke-width='1.1' opacity='.44'/%3E%3Cpath d='M219 87 L212 101 L197 106' stroke-width='.9' opacity='.34'/%3E%3Cpath d='M238 80 L242 65' stroke-width='.95' opacity='.36'/%3E%3Cpath d='M170 68 L175 55 L169 43' stroke-width='.8' opacity='.28'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse 70% 40% at 50% 96%, rgba(126,58,18,.26), transparent 72%)}
@keyframes pi-creep{0%,100%{opacity:.58}50%{opacity:.72}}
.app.dark .deal[data-rot="3"] .dealco,.app.dark .deal[data-rot="4"] .dealco{color:#c9a58a}
.deal[data-rot="3"] .dealco,.deal[data-rot="4"] .dealco{color:#7a5238}
.lrowc[data-rot="3"],.lrowc[data-rot="4"]{filter:saturate(.6)}

/* align-self keeps the pill at its text width. The card is a flex column, whose
   default align-items:stretch makes every child fill the row - inline-flex does
   not override that, so the pill ran the full width of the card with the label
   stranded at the left. */
.rot-tag{display:inline-flex;align-self:flex-start;width:fit-content;max-width:100%;
  align-items:center;gap:5px;margin-top:9px;padding:3px 9px;border-radius:999px;
  font-size:10.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  background:rgba(150,74,26,.2);color:#d99a63}
.rot-tag[data-rot="1"]{background:rgba(180,120,60,.16);color:#c9a173}
.rot-tag[data-rot="4"]{background:rgba(126,62,24,.34);color:#e8a066}
.rot-tag.is-stuck{background:rgba(255,95,86,.15);color:#ff8f7a}

/* ---- placement inside the Pipeline view ---- */
.pi-wrap{flex-shrink:0;padding:0 24px 6px}
.pi-wrap .pi-card{margin:0 0 14px;padding-top:16px;padding-bottom:16px}
.pi-wrap .mc-card-head{margin-bottom:4px}
.pi-collapse{margin-left:auto;flex-shrink:0;font-family:'Satoshi','Manrope',sans-serif;font-size:12px;
  font-weight:500;color:var(--nav);background:none;border:1px solid var(--card-border);border-radius:999px;
  padding:5px 12px;cursor:pointer;transition:color .15s,border-color .15s}
.pi-collapse:hover{color:var(--text2);border-color:var(--cellmute)}
.pi-wrap.is-collapsed #piChart{display:none}
.pi-wrap.is-collapsed .pi-card{margin-bottom:0}

/* ---- revenue tiles ----
   Same shape as the Jarvis nudge cards: sunken panel, a 2px stripe carrying the
   tone, tone only on the figure. Keeps them quiet next to the chart. */
.pi-money{flex:0 0 234px;min-width:200px;display:flex;flex-direction:column;gap:7px}
.pi-money-tile{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 12px;
  padding:11px 13px;border-radius:11px;background:var(--sunken);
  border:1px solid var(--tborder);border-left:2px solid var(--cellmute)}
.pi-money-k{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.pi-money-v{justify-self:end;font-family:var(--font-site-mono);font-size:17px;font-weight:500;
  color:var(--text);line-height:1.15}
.pi-money-s{grid-column:1 / -1;font-size:10.5px;color:var(--sub)}
.pi-money-tile.is-won{border-left-color:var(--pi-won)}
.pi-money-tile.is-won .pi-money-v{color:var(--pi-won)}
.pi-money-tile.is-lost{border-left-color:var(--pi-lost)}
.pi-money-tile.is-lost .pi-money-v{color:var(--pi-lost)}
.pi-money-tile.is-pred{border-left-color:var(--accent)}
.pi-money-tile.is-pred .pi-money-v{color:var(--accent)}
.pi-hint{margin:3px 2px 0;font-size:10.5px;line-height:1.45;color:var(--label)}

/* ---- chart row ---- */
.pi-chart{display:flex;align-items:stretch;gap:16px;flex-wrap:wrap}
.pi-donut{position:relative;width:214px;height:214px;flex-shrink:0;align-self:center;margin:0 8px}
.pi-donut svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.pi-seg-bg,.pi-seg{fill:none}
.pi-seg-bg{stroke:var(--sunken);stroke-width:6.2}
/* r=15.915 makes the circumference exactly 100, so dash lengths are percentages */
.pi-seg{stroke-width:6.2;stroke-linecap:butt;
  animation:pi-draw .5s cubic-bezier(.3,.8,.4,1) backwards;animation-delay:var(--d,0ms);
  transition:opacity .18s,stroke-width .18s}
@keyframes pi-draw{from{opacity:0;stroke-dasharray:0 100}}
.pi-seg[data-b="new"]{stroke:var(--pi-new)}
.pi-seg[data-b="contacted"]{stroke:var(--pi-contacted)}
.pi-seg[data-b="qualified"]{stroke:var(--pi-qualified)}
.pi-seg[data-b="proposal"]{stroke:var(--pi-proposal)}
.pi-seg[data-b="won"]{stroke:var(--pi-won)}
.pi-seg[data-b="lost"]{stroke:var(--pi-lost)}

.pi-donut-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;pointer-events:none;text-align:center;padding:0 34px}
.pi-donut-cap{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);min-height:0;opacity:0;transition:opacity .16s}
.pi-donut-mid.is-focus .pi-donut-cap{opacity:1}
.pi-donut-num{font-family:var(--font-site-mono);font-size:32px;font-weight:500;color:var(--text);line-height:1.05}
.pi-donut-mid.is-focus .pi-donut-num{font-size:24px}
.pi-donut-lbl{font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--label)}

/* ---- legend panel ---- */
.pi-panel{flex:1 1 300px;min-width:260px;display:flex;flex-direction:column;
  background:var(--sunken);border:1px solid var(--tborder);border-radius:12px;padding:11px 12px 6px}
.pi-panel-h{display:flex;align-items:center;gap:10px;padding:0 8px 8px;
  border-bottom:1px solid var(--tborder)}
.pi-panel-t{flex:1 1 auto;font-size:12px;font-weight:600;color:var(--text2)}
.pi-col-h{font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.pi-col-n{width:34px;text-align:right}
.pi-col-v{width:86px;text-align:right}

.pi-legend{display:flex;flex-direction:column}
.pi-leg{display:flex;align-items:center;gap:11px;padding:8px;border-radius:8px;font-size:12.5px;
  border-bottom:1px solid var(--tborder);transition:background .15s}
.pi-leg:last-child{border-bottom:none}
.pi-leg:hover{background:var(--hover2)}
.pi-leg.is-zero{opacity:.4}
.pi-leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.pi-leg-dot[data-b="new"]{background:var(--pi-new)}
.pi-leg-dot[data-b="contacted"]{background:var(--pi-contacted)}
.pi-leg-dot[data-b="qualified"]{background:var(--pi-qualified)}
.pi-leg-dot[data-b="proposal"]{background:var(--pi-proposal)}
.pi-leg-dot[data-b="won"]{background:var(--pi-won)}
.pi-leg-dot[data-b="lost"]{background:var(--pi-lost)}
.pi-leg-name{flex:1 1 auto;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pi-leg-n{width:34px;text-align:right;font-family:var(--font-site-mono);font-size:11.5px;color:var(--sub)}
.pi-leg-val{width:86px;text-align:right;font-family:var(--font-site-mono);font-size:12px;color:var(--text)}

/* hovering a legend row isolates its slice */
#piChart[data-hi] .pi-seg{opacity:.2}
#piChart[data-hi="new"] .pi-seg[data-b="new"],
#piChart[data-hi="contacted"] .pi-seg[data-b="contacted"],
#piChart[data-hi="qualified"] .pi-seg[data-b="qualified"],
#piChart[data-hi="proposal"] .pi-seg[data-b="proposal"],
#piChart[data-hi="won"] .pi-seg[data-b="won"],
#piChart[data-hi="lost"] .pi-seg[data-b="lost"]{opacity:1;stroke-width:7.8}

.pi-chart-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--tborder)}
.pi-chart-note{font-size:12px;color:var(--sub)}
.pi-modes{display:inline-flex;gap:2px;padding:2px;border-radius:999px;background:var(--sunken)}
.pi-mode{font-family:'Satoshi','Manrope',sans-serif;font-size:11.5px;font-weight:500;color:var(--nav);
  background:none;border:none;border-radius:999px;padding:5px 12px;cursor:pointer;
  transition:background .16s,color .16s}
.pi-mode:hover{color:var(--text2)}
.pi-mode.on{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.2)}

.pi-note{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--sub)}

/* ---- close reason modal ---- */
.pi-reasons{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:7px}
.pi-reason{font-family:'Satoshi','Manrope',sans-serif;font-size:12.5px;font-weight:500;color:var(--text2);
  text-align:left;background:var(--sunken);border:1px solid transparent;border-radius:10px;
  padding:10px 12px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.pi-reason:hover{color:var(--text);border-color:var(--cellmute)}
.pi-reason.on{color:var(--text);border-color:var(--glow-edge);box-shadow:var(--glow-neon-sm);background:var(--card)}
#piReasonOvl .mfoot{display:flex;align-items:center;gap:12px}
#piReasonOvl .btn{margin-left:auto}

@media (prefers-reduced-motion:reduce){
  .deal[data-rot="4"]::after{animation:none}
  .pi-seg{animation:none}
  .deal[data-rot]{transition:none}
}

/* ---------------- Leads screen ---------------- */
.tabstrip{display:flex;align-items:center;gap:8px;padding:9px 18px;border-bottom:1px solid var(--tborder);flex-shrink:0}
.tab{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500;color:var(--text);background:var(--card);border:1px solid var(--card-border);border-radius:9px;padding:7px 12px;max-width:280px}
.tab .tname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabicon{width:18px;height:18px;color:var(--nav)}
.lbody{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-height:0}
.pad{padding:26px 34px 0}
.lhead{display:flex;align-items:center;gap:16px}
.ltitle{font-family:var(--font-display);font-size:42px;font-weight:600;letter-spacing:.015em;
  line-height:1.05;text-transform:uppercase;color:var(--text);margin:0;
  background-image:none;-webkit-text-fill-color:currentColor;width:fit-content}
.app.dark .ltitle{background-image:var(--title-sheen);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}
.flabel{font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--label);text-transform:uppercase;margin-right:2px}
.fchip{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--text2);background:var(--card);border:1px solid var(--card-border);border-radius:9px;padding:7px 12px;max-width:240px;cursor:pointer;transition:border-color .18s,box-shadow .18s,color .18s}
.fchip:hover{border-color:rgba(255,170,70,.5);color:var(--text);box-shadow:0 0 10px rgba(255,170,70,.45),0 0 20px rgba(80,170,255,.28)}
.fchip.on{border-color:var(--text);color:var(--text);background:var(--hover2)}
.fchip .ic{color:var(--cellmute)}
.fchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lfsearch{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--card-border);border-radius:9px;padding:7px 12px;min-width:220px}
.lfsearch input{border:none;outline:none;background:none;font-family:'Satoshi',sans-serif;font-size:13.5px;color:var(--text);width:100%}
.lfsearch input::placeholder{color:var(--placeholder)}
.lfsearch .ic{color:var(--icon)}
.lfsort{font-size:13.5px;color:var(--text2);background:var(--card);border:1px solid var(--card-border);border-radius:9px;padding:8px 11px;font-family:'Satoshi',sans-serif;cursor:pointer}

/* Consolidated filters dropdown */
.lfdrop{position:relative}
.lfdrop-toggle{user-select:none}
.lfdrop-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--text);color:var(--bg);font-size:11px;font-weight:700;line-height:1}
.lfdrop-count[hidden]{display:none}
.lfdrop-chev{color:var(--cellmute);transition:transform .18s}
.lfdrop-toggle.open .lfdrop-chev{transform:rotate(180deg)}
.lfdrop-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:50;min-width:208px;display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--card);border:1px solid var(--card-border);border-radius:11px;box-shadow:0 16px 40px rgba(0,0,0,.32)}
.lfdrop-menu[hidden]{display:none}
.lfdrop-item{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text2);padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .14s,color .14s}
.lfdrop-item:hover{background:var(--hover);color:var(--text)}
.lfdrop-item span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lfdrop-item .ic{color:var(--cellmute);flex-shrink:0}
.lfdrop-item .lfdrop-check{opacity:0;color:var(--text)}
.lfdrop-item.on{color:var(--text)}
.lfdrop-item.on .ic{color:var(--text)}
.lfdrop-item.on .lfdrop-check{opacity:1}
.toolbar{display:flex;align-items:center;gap:16px;padding:18px 34px;margin-top:22px;min-width:0;width:100%}
.tleft{display:flex;align-items:center;gap:16px;font-size:14.5px;color:var(--cellmute)}
.tleft b{color:var(--text);font-weight:700}
.tdiv{width:1px;height:18px;background:var(--tborder)}
.tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.export{display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:14.5px;font-weight:500;color:var(--text2);background:var(--card);border:1px solid var(--card-border);border-radius:10px;padding:10px 16px;cursor:pointer;font-family:'Satoshi',sans-serif;transition:border-color .18s,color .18s,box-shadow .18s}
.export:hover{border-color:rgba(255,170,70,.5);color:var(--text);box-shadow:0 0 11px rgba(255,170,70,.55),0 0 22px rgba(80,170,255,.40)}
.export:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;border-color:var(--card-border)}
.filter-settings{width:42px;height:40px;justify-content:center;padding:0;gap:0;flex-shrink:0}
.delbtn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;color:var(--text2);background:var(--card);border:1px solid var(--card-border);cursor:pointer;transition:border-color .18s,box-shadow .18s,color .18s;animation:expin .18s ease}
.delbtn:hover{border-color:rgba(255,170,70,.5);color:#eb5757;box-shadow:0 0 11px rgba(255,170,70,.55),0 0 22px rgba(80,170,255,.40)}
.expwrap{position:relative}
.expmenu{position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:224px;background:var(--card);border:1px solid var(--card-border);border-radius:13px;box-shadow:0 12px 36px rgba(0,0,0,.28);padding:6px;animation:expin .15s cubic-bezier(.2,.7,.3,1)}
@keyframes expin{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.emhead{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--label);padding:6px 10px 4px}
.emsep{height:1px;background:var(--card-border);margin:5px 4px}
.emitem{display:flex;align-items:center;gap:11px;width:100%;font-size:13.5px;font-weight:500;color:var(--text2);background:none;border:none;border-radius:9px;padding:10px 11px;cursor:pointer;text-align:left;font-family:'Satoshi',sans-serif;transition:background .12s,color .12s}
.emitem:hover{background:var(--hover);color:var(--text)}
.emitem .eico{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;font-weight:800;color:#fff}
.emitem .emeta{display:flex;flex-direction:column;gap:1px}
.emitem .ename{font-size:13.5px;font-weight:600;color:var(--text)}
.emitem .esub{font-size:11.5px;font-weight:400;color:var(--sub)}
.emitem.dim{cursor:default}
.emitem.dim:hover{background:none}
.emitem.dim .ename{color:var(--cellmute)}
.emitem.dim .eico{opacity:.5}
.eship{font-size:10px;font-weight:700;color:#fff;background:var(--credit);border-radius:5px;padding:1px 6px;margin-left:auto;flex-shrink:0}
.tablewrap{flex:1;overflow:auto;border-top:1px solid var(--tborder)}
.tinner{min-width:1300px}
.grid9{display:grid;grid-template-columns:56px 152px 150px 150px 200px 188px 202px 138px 180px}
.thead{position:sticky;top:0;z-index:2;background:var(--bg)}
.th{display:flex;align-items:center;gap:8px;padding:14px 14px;font-size:14px;font-weight:500;color:var(--text2);border-bottom:1px solid var(--tborder);border-right:1px solid var(--tborder);min-width:0}
.th:last-child{border-right:none}
.thandle{margin-left:auto;color:var(--cellmute)}
.trow{border-bottom:1px solid var(--tborder);transition:background .1s}
.trow:hover{background:var(--row-hover)}
.trow.sel{background:var(--row-hover)}
.td{display:flex;align-items:center;height:62px;padding:0 14px;font-size:14.5px;color:var(--cell);min-width:0;border-right:1px solid var(--tborder)}
.td:last-child{border-right:none}
.tnum{justify-content:center;color:var(--cellmute);font-size:14px}
.selcell{justify-content:center;cursor:pointer}
.cbox{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--cellmute);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;transition:background .12s,border-color .12s}
.ckmark,.ckminus{display:none}
.tnum .cbox{display:none}
.trow:hover .tnum .tnval{display:none}
.trow:hover .tnum .cbox{display:flex}
.trow:hover .tnum .ckmark{display:block}
.selcell.on .tnval{display:none}
.selcell.on .cbox{display:flex;background:#1a1a18;border-color:#1a1a18}
.selcell.on .ckmark{display:block}
.head .cbox{display:flex;border-color:var(--cellmute)}
.head.all .cbox,.head.some .cbox{background:#1a1a18;border-color:#1a1a18}
.head.all .ckmark{display:block}
.head.some .ckminus{display:block}
.tr1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fit{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--card-border);border-radius:9px;padding:5px 9px 5px 8px}
.fitsq{width:13px;height:13px;border-radius:3px;background:#22c55e;flex-shrink:0}
.fitnum{font-weight:600;font-size:14px;color:var(--text)}
.fitchev{color:var(--cellmute);margin-left:1px}
.dcell{display:flex;align-items:center;gap:9px;min-width:0}
.nores{color:var(--cellmute);font-style:italic}
.licell{display:flex;align-items:center;gap:9px;min-width:0}
.libox{width:21px;height:21px;border-radius:5px;background:var(--li);color:#fff;font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.libox.brand{transition:transform .12s ease,box-shadow .12s ease}
.libox.brand:hover{transform:translateY(-1px)}
.libox svg{display:block;pointer-events:none}
.lihandle{color:var(--li);font-size:14px}
.lempty{padding:60px 34px;text-align:center;color:var(--sub);font-size:15px}

/* ---------------- CRM / Pipeline screen ---------------- */
.crmhead{display:flex;align-items:center;gap:16px;padding:26px 34px 18px;flex-shrink:0}
.crmtitle{display:flex;flex-direction:column;gap:3px}
.crmh1{font-family:var(--font-display);font-size:40px;font-weight:600;letter-spacing:.015em;
  line-height:1.05;text-transform:uppercase;color:var(--text);margin:0;
  background-image:none;-webkit-text-fill-color:currentColor;width:fit-content}
.app.dark .crmh1{background-image:var(--title-sheen);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.crmcount{font-size:13px;color:var(--sub)}
.crmtools{margin-left:auto;display:flex;align-items:center;gap:10px}
.viewsw{display:flex;background:var(--sunken);border-radius:9px;padding:3px}
.vbtn{font-size:13.5px;font-weight:500;color:var(--nav);background:none;border:none;padding:6px 15px;border-radius:7px;cursor:pointer;white-space:nowrap;font-family:'Satoshi',sans-serif;transition:background .15s,color .15s}
.vbtn.on{background:var(--card);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.crmsearch{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--card-border);border-radius:9px;padding:8px 12px;width:210px}
.crmsearch input{border:none;outline:none;background:none;font-family:'Satoshi',sans-serif;font-size:14px;color:var(--text);width:100%}
.crmsearch input::placeholder{color:var(--placeholder)}
.crmsearch .ic{color:var(--icon)}
.newdeal{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--send-fg);background:var(--send-bg);border:none;border-radius:9px;padding:9px 15px;cursor:pointer;font-family:'Satoshi',sans-serif;transition:box-shadow .2s}
.newdeal:hover{box-shadow:0 0 11px rgba(255,170,70,.5),0 0 22px rgba(80,170,255,.35)}
.boardwrap{flex:1;overflow:auto;padding:22px 24px 28px}
.board{display:flex;gap:14px;align-items:flex-start;width:100%;height:100%}
.view.view-enter .board .col{animation:crmColumnIn .5s cubic-bezier(.2,.72,.18,1) both;animation-delay:calc(80ms + (var(--col-index,0) * 42ms))}
.view.view-enter .board .col:nth-child(1){--col-index:0}
.view.view-enter .board .col:nth-child(2){--col-index:1}
.view.view-enter .board .col:nth-child(3){--col-index:2}
.view.view-enter .board .col:nth-child(4){--col-index:3}
.view.view-enter .board .col:nth-child(5){--col-index:4}
@keyframes crmColumnIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
.col{flex:1 1 0;min-width:210px;display:flex;flex-direction:column;gap:12px;height:100%}
.colhead{display:flex;align-items:center;gap:9px;padding:2px 4px;flex-shrink:0;position:relative;z-index:1}
.cdot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--pi-new)}
.cdot[data-stage="new"]{background:var(--pi-new)}
.cdot[data-stage="contacted"]{background:var(--pi-contacted)}
.cdot[data-stage="qualified"]{background:var(--pi-qualified)}
.cdot[data-stage="proposal"]{background:var(--pi-proposal)}
.cdot[data-stage="won"]{background:var(--pi-won)}
.cdot[data-stage="lost"]{background:var(--pi-lost)}

/* ---- multi-select on the board ---- */
.deal{position:relative}
.dealsel{position:absolute;top:9px;left:9px;z-index:2;display:flex;align-items:center;justify-content:center;
  width:17px;height:17px;padding:0;border-radius:5px;cursor:pointer;
  background:var(--card);border:1.5px solid var(--cellmute);color:transparent;
  opacity:0;transition:opacity .14s,background .16s,border-color .16s,color .16s}
.deal:hover .dealsel,.deal.is-sel .dealsel,body.crm-selecting .dealsel,.dealsel:focus-visible{opacity:1}
.dealsel:hover{border-color:var(--accent)}
.deal.is-sel .dealsel{background:var(--accent);border-color:var(--accent);color:#141413}
/* the tick needs room, so nudge the card's own content across while it shows */
.deal:hover .dealtop,.deal.is-sel .dealtop,body.crm-selecting .dealtop{padding-left:24px}
.dealtop{transition:padding-left .14s}
.deal.is-sel{border-color:var(--glow-edge);box-shadow:var(--glow-neon-sm)}
body.crm-selecting .deal{cursor:pointer}

/* ---- bulk action bar ---- */
.crm-bulk{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:44;
  display:flex;align-items:center;gap:10px;padding:9px 10px 9px 16px;
  background:var(--card);border:1px solid var(--card-border);border-radius:999px;
  box-shadow:0 18px 44px rgba(0,0,0,.42),var(--glow-neon-sm);
  animation:crm-bulk-in .24s cubic-bezier(.34,1.4,.5,1)}
.crm-bulk[hidden]{display:none}
@keyframes crm-bulk-in{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%)}}
.crm-bulk-count{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap}
.crm-bulk-btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-family:'Satoshi','Manrope',sans-serif;font-size:12.5px;font-weight:500;color:var(--text2);
  background:var(--sunken);border:1px solid transparent;border-radius:999px;padding:7px 13px;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s}
.crm-bulk-btn:hover{color:var(--text);border-color:var(--glow-edge)}
.crm-bulk-btn.is-danger{color:#ff8f7a}
.crm-bulk-btn.is-danger:hover{color:#fff;background:rgba(255,95,86,.22);border-color:rgba(255,95,86,.5)}
.crm-bulk-x{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;
  border-radius:50%;color:var(--nav);background:none;border:none;cursor:pointer;transition:color .15s,background .15s}
.crm-bulk-x:hover{color:var(--text);background:var(--hover2)}

.crm-bulk-move{position:relative}
.crm-bulk-menu{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);
  min-width:172px;padding:5px;display:flex;flex-direction:column;gap:2px;
  background:var(--card);border:1px solid var(--card-border);border-radius:12px;
  box-shadow:0 16px 38px rgba(0,0,0,.42)}
.crm-bulk-menu[hidden]{display:none}
.crm-bulk-opt{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  font-family:'Satoshi','Manrope',sans-serif;font-size:13px;color:var(--text2);
  background:none;border:none;border-radius:8px;padding:8px 10px;cursor:pointer;transition:background .12s,color .12s}
.crm-bulk-opt:hover{background:var(--hover2);color:var(--text)}

@media (prefers-reduced-motion:reduce){
  .crm-bulk{animation:none}
  .dealsel,.dealtop{transition:none}
}

/* Lost is an outcome, not a stage you work, present but not competing.
   Nothing gets created straight into it either. */
.col[data-stage="lost"] .cname{color:var(--sub)}
.col[data-stage="lost"] .addcard{display:none}
.col[data-stage="lost"] .deal .dealco{color:var(--text2)}
.cname{font-size:14px;font-weight:600;color:var(--text)}
.ccount{font-size:11.5px;font-weight:600;color:var(--nav);background:var(--hover);border-radius:6px;padding:1px 7px}
.cval{margin-left:auto;font-size:12.5px;font-weight:500;color:var(--sub)}
.cards{display:flex;flex-direction:column;gap:10px;overflow:visible;flex:1;padding:4px;min-height:80px}
.col.over .cards{background:var(--hover);border-radius:12px}
.deal{background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:13px 14px;cursor:pointer;display:flex;flex-direction:column;gap:11px;transition:border-color .15s,box-shadow .15s,transform .1s}
.deal:hover{border-color:rgba(255,170,70,.5);box-shadow:0 0 10px rgba(255,170,70,.45),0 0 20px rgba(80,170,255,.28);transform:translateY(-1px)}
.deal.dragging{opacity:.5}
.dealtop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.dealco{font-size:14.5px;font-weight:600;color:var(--text);line-height:1.25}
.dealval{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap}
.dealperson{display:flex;align-items:center;gap:9px;min-width:0}
.davatar{width:27px;height:27px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#fff}
.pinfo{display:flex;flex-direction:column;min-width:0;gap:5px}
.dname{font-size:13px;font-weight:500;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtitle{font-size:11.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcline{display:flex;align-items:center;gap:7px;min-width:0;font-size:12.5px;color:var(--text2)}
.dcline .ic{flex-shrink:0;color:var(--sub)}
.dctext{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dealfoot{display:flex;align-items:center;gap:6px;border-top:1px solid var(--card-border);padding-top:10px;font-size:11.5px;color:var(--sub)}
.addcard{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:500;color:var(--nav);background:none;border:1px dashed var(--card-border);border-radius:10px;padding:10px;cursor:pointer;font-family:'Satoshi',sans-serif;flex-shrink:0;transition:color .15s,border-color .15s,background .15s}
.addcard:hover{color:var(--text2);border-color:var(--cellmute);background:var(--hover)}
.listwrap{flex:1;overflow:auto;padding:6px 34px 28px}
.ltable{border:1px solid var(--card-border);border-radius:13px;overflow:hidden;background:var(--card)}
.lrow{display:grid;grid-template-columns:1.7fr 1.8fr 1.1fr .8fr .7fr;align-items:center;gap:14px;padding:0 18px;height:60px;border-bottom:1px solid var(--card-border)}
.lrow:last-child{border-bottom:none}
.lhd{height:46px;background:var(--bg);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--label)}
.lco{font-size:14.5px;font-weight:600;color:var(--text)}
.lcontact{display:flex;align-items:center;gap:10px;min-width:0}
.lstage{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text2)}
.lval{font-size:14px;font-weight:700;color:var(--text)}
.lago{font-size:13px;color:var(--sub)}
.lrowc{cursor:pointer;transition:background .12s}
.lrowc:hover{background:var(--hover)}
.crmempty{padding:60px 34px;text-align:center;color:var(--sub);font-size:15px}

/* ---------------- Modals (New deal + Deal detail) ---------------- */
.ovl{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(10,10,9,.42);backdrop-filter:blur(3px);animation:ovlin .18s ease}
@keyframes ovlin{from{opacity:0}to{opacity:1}}
@keyframes modin{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.modal{width:480px;max-width:100%;max-height:100%;overflow-y:auto;background:var(--card);border:1px solid var(--card-border);border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.32);animation:modin .22s cubic-bezier(.2,.7,.3,1)}
.mhead{display:flex;align-items:flex-start;gap:14px;padding:22px 24px 16px;border-bottom:1px solid var(--card-border)}
.mtitle{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--text);margin:0}
.msub{font-size:13px;color:var(--sub);margin-top:3px}
.mclose{margin-left:auto;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;color:var(--nav);background:none;border:none;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}
.mclose:hover{background:var(--hover);color:var(--text2)}
.mbody{padding:20px 24px 6px;display:flex;flex-direction:column;gap:16px}
.frow{display:flex;gap:14px}
.fld{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.flabel2{font-size:12px;font-weight:600;color:var(--text2);letter-spacing:.01em}
.finput{font-family:'Satoshi','Manrope',sans-serif;font-size:14px;color:var(--text);background:var(--bg);border:1px solid var(--card-border);border-radius:10px;padding:11px 13px;outline:none;width:100%;transition:border-color .15s,box-shadow .15s}
.finput::placeholder{color:var(--placeholder)}
.finput:focus{border-color:var(--cellmute);box-shadow:0 0 0 3px var(--hover)}
.fval{position:relative}
.fval .cur{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--sub);pointer-events:none}
.fval .finput{padding-left:26px}
.stagepick{display:flex;flex-wrap:wrap;gap:8px}
.spill{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--text2);background:var(--bg);border:1px solid var(--card-border);border-radius:999px;padding:7px 13px;cursor:pointer;transition:border-color .15s,background .15s;font-family:'Satoshi',sans-serif}
.spill:hover{border-color:var(--cellmute)}
.spill.on{border-color:var(--text);background:var(--hover2);color:var(--text);font-weight:600}
.spill .cdot{width:8px;height:8px}
.mfoot{display:flex;align-items:center;gap:10px;padding:18px 24px 22px;margin-top:6px}
.mcancel{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--text2);background:none;border:1px solid var(--card-border);border-radius:10px;padding:10px 18px;cursor:pointer;font-family:'Satoshi',sans-serif;transition:border-color .15s}
.mcancel:hover{border-color:var(--cellmute)}
.msubmit{font-size:13.5px;font-weight:600;color:var(--send-fg);background:var(--send-bg);border:none;border-radius:10px;padding:10px 20px;cursor:pointer;font-family:'Satoshi',sans-serif;transition:box-shadow .2s,opacity .15s}
.msubmit:hover{box-shadow:0 0 11px rgba(255,170,70,.5),0 0 22px rgba(80,170,255,.35)}
.msubmit:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.dmodal{width:540px;max-width:100%;max-height:100%;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--card-border);border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.32);animation:modin .22s cubic-bezier(.2,.7,.3,1);overflow:hidden}
.dhead{display:flex;align-items:flex-start;gap:14px;padding:22px 24px 18px;border-bottom:1px solid var(--card-border)}
.dbavatar{width:46px;height:46px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff}
.dhinfo{min-width:0;flex:1}
.dhco{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--text);margin:0;line-height:1.2}
.dhname{font-size:13.5px;color:var(--sub);margin-top:3px}
.dhactions{display:flex;align-items:center;gap:6px;flex-shrink:0;position:relative}
.dotbtn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;color:var(--nav);background:none;border:none;cursor:pointer;transition:background .15s,color .15s}
.dotbtn:hover{background:var(--hover);color:var(--text2)}
.menu{position:absolute;top:38px;right:0;z-index:30;width:184px;background:var(--card);border:1px solid var(--card-border);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.26);padding:5px;animation:modin .14s ease}
.mitem{display:flex;align-items:center;gap:10px;width:100%;font-size:13.5px;font-weight:500;color:var(--text2);background:none;border:none;border-radius:8px;padding:9px 11px;cursor:pointer;text-align:left;font-family:'Satoshi',sans-serif;transition:background .12s,color .12s}
.mitem:hover{background:var(--hover)}
.mitem.danger{color:#eb5757}
.mitem.danger:hover{background:rgba(235,87,87,.1)}
.msep{height:1px;background:var(--card-border);margin:5px 4px}
.mfield{padding:8px 11px 6px}
.mfield-label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--label);margin-bottom:6px}
.mfield-input{position:relative;display:flex;align-items:center}
.mfield-cur{position:absolute;left:11px;font-size:14px;color:var(--sub);pointer-events:none}
.mfield-input input{width:100%;font-family:'Satoshi','Manrope',sans-serif;font-size:14px;font-weight:600;color:var(--text);background:var(--bg);border:1px solid var(--card-border);border-radius:9px;padding:8px 11px 8px 22px;outline:none;transition:border-color .15s,box-shadow .15s}
.mfield-input input:focus{border-color:rgba(255,170,70,.55);box-shadow:0 0 0 2px rgba(255,170,70,.14)}
.dbody{padding:20px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:20px}
.dd-edit-section{display:flex;flex-direction:column;gap:11px}
.dd-edit-title{font-size:13px;font-weight:700;color:var(--text2)}
.dd-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dd-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.dd-field span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--label)}
.dd-input{font-family:'Satoshi','Manrope',sans-serif;font-size:14px;font-weight:600;color:var(--text);background:var(--bg);border:1px solid var(--card-border);border-radius:10px;padding:10px 12px;outline:none;width:100%;min-width:0;transition:border-color .15s,box-shadow .15s,background .15s}
.dd-input::placeholder{color:var(--placeholder);font-weight:500}
.dd-input:focus{border-color:var(--cellmute);box-shadow:0 0 0 3px var(--hover)}
.dd-save-hint{min-height:14px;font-size:11.5px;color:var(--sub)}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.dcell2{display:flex;flex-direction:column;gap:5px}
.dclabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--label)}
.dcval{font-size:14.5px;font-weight:600;color:var(--text)}
.dcstage{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--text)}
.notesec{display:flex;flex-direction:column;gap:11px}
.nstitle{font-size:13px;font-weight:700;color:var(--text2);display:flex;align-items:center;gap:8px}
.nscount{font-size:11px;font-weight:600;color:var(--nav);background:var(--hover);border-radius:6px;padding:1px 7px}
.notelist{display:flex;flex-direction:column;gap:9px}
.note{background:var(--bg);border:1px solid var(--card-border);border-radius:11px;padding:11px 13px}
.notemeta{font-size:11px;color:var(--sub);font-weight:500;margin-bottom:4px;letter-spacing:.01em}
.notetext{font-size:13.5px;color:var(--text2);line-height:1.45;white-space:pre-wrap}
.notetime{font-size:11px;color:var(--sub);margin-top:6px}
.noteempty{font-size:13px;color:var(--sub);padding:4px 1px}
.notecompose{display:flex;flex-direction:column;gap:9px}
.ntextarea{font-family:'Satoshi','Manrope',sans-serif;font-size:14px;color:var(--text);background:var(--bg);border:1px solid var(--card-border);border-radius:11px;padding:12px 13px;outline:none;width:100%;resize:vertical;min-height:64px;line-height:1.45;transition:border-color .15s,box-shadow .15s}
.ntextarea::placeholder{color:var(--placeholder)}
.ntextarea:focus{border-color:var(--cellmute);box-shadow:0 0 0 3px var(--hover)}
.naddrow{display:flex;justify-content:flex-end}
.naddbtn{font-size:13px;font-weight:600;color:var(--send-fg);background:var(--send-bg);border:none;border-radius:9px;padding:9px 16px;cursor:pointer;font-family:'Satoshi',sans-serif;transition:opacity .15s,box-shadow .2s}
.naddbtn:hover{box-shadow:0 0 11px rgba(255,170,70,.5),0 0 22px rgba(80,170,255,.35)}
.naddbtn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

/* ---------------- Extension-only panels (tokenized) ---------------- */
.hidden{display:none !important}
.panelcard{background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:18px 20px;margin:0 34px 18px}
.panelcard .pk{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--label);margin-bottom:4px}
.panelcard .pt{font-size:16px;font-weight:700;color:var(--text);margin-bottom:12px}
.field{font-family:'Satoshi','Manrope',sans-serif;font-size:14px;color:var(--text);background:var(--bg);border:1px solid var(--card-border);border-radius:10px;padding:10px 12px;outline:none;transition:border-color .15s,box-shadow .15s}
.field::placeholder{color:var(--placeholder)}
.field:focus{border-color:var(--cellmute);box-shadow:0 0 0 3px var(--hover)}
.btn{font-family:'Satoshi','Manrope',sans-serif;font-size:13.5px;font-weight:600;color:var(--send-fg);background:var(--send-bg);border:none;border-radius:9px;padding:10px 16px;cursor:pointer;transition:box-shadow .2s,opacity .15s}
.btn:hover{box-shadow:0 0 11px rgba(255,170,70,.5),0 0 22px rgba(80,170,255,.35)}
.btn.ghost{color:var(--text2);background:var(--card);border:1px solid var(--card-border)}
.btn.ghost:hover{border-color:rgba(255,170,70,.5);box-shadow:0 0 10px rgba(255,170,70,.45),0 0 20px rgba(80,170,255,.28)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}

/* Progress + status, segmented pill loader (each pill eases in via opacity) */
.progwrap{margin:18px 34px 6px;background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:16px 18px}
.prog-head{display:flex;flex-direction:column;gap:2px;margin-bottom:13px}
.prog-title{font-size:14.5px;font-weight:600;color:var(--text)}
.prog-tip{display:inline-block;font-size:12.5px;color:var(--sub);min-height:1.2em;opacity:0;transform:translateY(5px);transition:opacity .45s ease,transform .45s cubic-bezier(.33,1,.68,1)}
.prog-tip.tip-visible{opacity:1;transform:translateY(0)}
#progressBar{display:none}
#progressContainer{display:flex;align-items:stretch;justify-content:flex-start;gap:5px;height:32px;border-radius:10px;overflow:hidden}
#progressContainer .seg{flex:0 0 4px;width:4px;min-width:4px;max-width:4px;border-radius:999px;background:var(--text);opacity:.13;transition:opacity 1s cubic-bezier(.33,1,.68,1)}
#progressContainer .seg.on{opacity:1}
#progressStatusRow{display:flex;align-items:center;gap:12px;margin-top:12px}
#progressStatusLabel{font-size:13px;color:var(--text2)}
#progressControls{display:flex;gap:8px;margin-left:auto}
.export.pcbtn{padding:6px 13px;font-size:12.5px;border-radius:8px;gap:0}
.export.pcbtn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;border-color:var(--card-border);color:var(--cellmute)}
.export.pcbtn:disabled:hover{box-shadow:none;border-color:var(--card-border)}

/* Session stats */
.session-stats-row{display:flex;gap:40px;padding:18px 34px}
.session-stat-value{font-size:22px;font-weight:700;color:var(--text)}
.session-stat-label{font-size:12.5px;color:var(--sub)}

/* Compliance banner */
.compliance-banner{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(10,10,9,.5);backdrop-filter:blur(4px)}
.compliance-card{width:560px;max-width:100%;max-height:90vh;overflow-y:auto;background:var(--card);border:1px solid var(--card-border);border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.4);padding:26px 28px}
.compliance-title{font-size:20px;font-weight:700;color:var(--text);margin:0 0 12px}
.compliance-body{font-size:13.5px;line-height:1.55;color:var(--text2);margin:0 0 16px}
.compliance-label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px}
.compliance-required{color:#eb5757}
.compliance-card textarea{width:100%;font-family:'Satoshi',sans-serif;font-size:14px;color:var(--text);background:var(--bg);border:1px solid var(--card-border);border-radius:10px;padding:11px 13px;outline:none;resize:vertical}
.compliance-meta{margin:14px 0}
.compliance-check{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text2)}
.compliance-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.compliance-actions button{font-family:'Satoshi',sans-serif;font-size:13.5px;font-weight:600;border-radius:10px;padding:10px 18px;cursor:pointer}
#complianceAcceptBtn{color:var(--send-fg);background:var(--send-bg);border:none}
#complianceAcceptBtn:disabled{opacity:.45;cursor:not-allowed}
#complianceDeclineBtn{color:var(--text2);background:none;border:1px solid var(--card-border)}
.compliance-footnote{margin-top:14px;font-size:11px;color:var(--sub);line-height:1.45}

/* Outreach generator */
#outreachResults .outreach-variation{background:var(--bg);border:1px solid var(--card-border);border-radius:12px;padding:14px 16px}

/* Lead drawer (CRM detail slide-in fallback) */
.lead-drawer{position:fixed;top:0;right:0;height:100vh;width:420px;max-width:92vw;z-index:50;background:var(--card);border-left:1px solid var(--card-border);box-shadow:-12px 0 40px rgba(0,0,0,.28);transform:translateX(102%);transition:transform .26s cubic-bezier(.2,.7,.3,1);display:flex;flex-direction:column}
.lead-drawer.is-open{transform:translateX(0)}
.lead-drawer-body{flex:1;overflow-y:auto;padding:20px}
.lead-drawer-footer{display:flex;align-items:center;gap:12px;padding:16px 20px;border-top:1px solid var(--card-border)}

/* utility: hide legacy bits we no longer use */
#particleCanvas,.app-preloader,.cinematic-headline,.start-over,.nav-trigger,.nav-backdrop{display:none !important}

/* sidebar nav count pill */
.rm-pill{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;color:var(--send-fg);background:#ffaa46}
.rm-pill[hidden]{display:none}
.side.off .rm-pill{display:none}
.view[data-view-pane="outbound"] #outreachGeneratorPanel{display:block}

/* =========================================================
   INTERIM tokenized styling for the legacy Leads + CRM markup.
   These two screens get a pixel-perfect rebuild next; until then
   this keeps them readable inside the new shell.
   ========================================================= */
.leads-section,.crm-section{display:block;padding:26px 34px 40px;overflow-y:auto;flex:1}
.section-kicker,.crm-sales-subtitle{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.section-title,.crm-sales-title{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--text);margin:4px 0 16px}
.results-rail,.crm-sales-header,.crm-results-bar{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.results-rail-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--label)}
.results-rail-query,.crm-results-title{font-size:15px;font-weight:600;color:var(--text)}
.results-count-chip,.crm-visible-pill{margin-left:auto;font-size:12.5px;color:var(--plan);padding:6px 14px;border-radius:999px;border:1px solid var(--card-border);background:var(--card)}
.filter-toolbar,.crm-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.filter-toolbar input,.filter-toolbar select,.crm-toolbar input,.crm-toolbar select{font-family:'Satoshi',sans-serif;font-size:13.5px;color:var(--text);background:var(--card);border:1px solid var(--card-border);border-radius:9px;padding:9px 12px;outline:none}
#leadActions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
#leadActions button,.crm-toolbar-action{font-family:'Satoshi',sans-serif;font-size:13.5px;font-weight:600;color:var(--text2);background:var(--card);border:1px solid var(--card-border);border-radius:10px;padding:10px 16px;cursor:pointer;transition:border-color .18s,box-shadow .18s}
#leadActions button:hover,.crm-toolbar-action:hover{border-color:rgba(255,170,70,.5);box-shadow:0 0 10px rgba(255,170,70,.45),0 0 20px rgba(80,170,255,.28)}
#add-emails-btn,#downloadCsvBtn{color:var(--send-fg)!important;background:var(--send-bg)!important;border:none!important}
.session-stat-card{display:flex;flex-direction:column;gap:4px}
.results-empty-state,.crm-empty-state{padding:40px;text-align:center;color:var(--sub)}
.results-empty-title,.crm-empty-title{font-size:16px;font-weight:600;color:var(--text2)}
.selection-bar{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:12px 16px;margin-bottom:14px}
.selection-bar[hidden]{display:none}
.selection-primary{color:var(--send-fg);background:var(--send-bg);border:none;border-radius:9px;padding:8px 14px;font-weight:600;cursor:pointer}
.selection-secondary{color:var(--text2);background:none;border:1px solid var(--card-border);border-radius:9px;padding:8px 14px;cursor:pointer}
.leads-table-shell{border:1px solid var(--tborder);border-radius:13px;overflow:hidden;background:var(--card)}
.leads-table-scroll{overflow-x:auto}
#leadsTable{width:100%;border-collapse:collapse;font-size:14px}
#leadsTable th{position:sticky;top:0;background:var(--bg);text-align:left;font-weight:500;color:var(--text2);padding:12px 14px;border-bottom:1px solid var(--tborder);white-space:nowrap}
#leadsTable td{padding:12px 14px;border-bottom:1px solid var(--tborder);color:var(--cell);vertical-align:middle}
#leadsTable tr:hover td{background:var(--row-hover)}
.crm-dashboard{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.crm-stat{flex:1;min-width:110px;background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:12px 14px;cursor:pointer}
.crm-stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--label)}
.crm-stat-value{font-size:22px;font-weight:700;color:var(--text)}
.crm-stat-sub{font-size:11.5px;color:var(--sub)}
.crm-stage-rail{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.crm-sales-body{display:grid;grid-template-columns:1fr 300px;gap:18px}
.crm-card-list{display:flex;flex-direction:column;gap:10px}
.crm-record-head{display:none}
.crm-rail-panel,.crm-results-shell{background:var(--card);border:1px solid var(--card-border);border-radius:13px;padding:16px}
.crm-mini-metric{display:flex;justify-content:space-between;padding:6px 0;font-size:13px;color:var(--text2)}
.crm-mini-metric-value{font-weight:700}
@media (max-width:900px){.crm-sales-body{grid-template-columns:1fr}}

.compliance-banner[hidden]{display:none}
.lead-drawer-backdrop{position:fixed;inset:0;z-index:49;background:rgba(10,10,9,.4)}
.lead-drawer-backdrop[hidden]{display:none}

/* Leads grid: real-data column widths (select, fit, business, founder, phone, email, website, address, socials) */
.leadinner{min-width:1490px}
.gridL{display:grid;grid-template-columns:56px 130px minmax(200px,1.6fr) minmax(140px,1fr) minmax(140px,1fr) minmax(200px,1.3fr) minmax(200px,1.3fr) minmax(190px,1.3fr) minmax(190px,1.4fr) minmax(150px,1fr)}
.leadtitlebadge{display:inline-flex;align-items:center;gap:8px}
.leadbin[hidden]{display:none}

/* leads selection toast */
.leadtoast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(8px);z-index:60;background:var(--send-bg);color:var(--send-fg);font-size:13px;font-weight:600;padding:10px 16px;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.3);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.leadtoast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}
.leadtoast[hidden]{display:none}
.licell a.libox{cursor:pointer}
.dcell{text-decoration:none}

.ovl[hidden]{display:none}
.crmempty[hidden]{display:none}

/* ---------------- Scrape Settings panel (results view) ---------------- */
#scrapeSettingsPanel{margin:18px 34px 6px;background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:18px 20px}
#scrapeSettingsPanel[hidden]{display:none}
.settings-title{font-size:14.5px;font-weight:600;color:var(--text);margin:0 0 4px}
.settings-hint{font-size:12.5px;color:var(--sub);margin:0 0 16px;line-height:1.45}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 18px;align-items:start}
.settings-row{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600;color:var(--text2)}
.settings-row span{font-size:12px;font-weight:600;color:var(--text2);letter-spacing:.01em}
.settings-desc{font-size:11px;font-weight:400;color:var(--sub);line-height:1.45;letter-spacing:0}
.settings-textwrap{display:flex;flex-direction:column;gap:3px;min-width:0}
.settings-row input[type="number"]{font-family:'Satoshi','Manrope',sans-serif;font-size:14px;color:var(--text);background:var(--bg);border:1px solid var(--card-border);border-radius:9px;padding:9px 11px;outline:none;width:100%;transition:border-color .15s,box-shadow .15s}
.settings-row input[type="number"]:focus{border-color:var(--cellmute);box-shadow:0 0 0 3px var(--hover)}
/* boolean rows render as a labelled toggle pill */
.settings-row:has(input[type="checkbox"]){flex-direction:row;align-items:center;justify-content:space-between;gap:10px;background:var(--bg);border:1px solid var(--card-border);border-radius:10px;padding:11px 13px;cursor:pointer}
.settings-row input[type="checkbox"]{appearance:none;-webkit-appearance:none;margin:0;width:38px;height:22px;border-radius:999px;background:var(--track);position:relative;cursor:pointer;flex-shrink:0;transition:background .2s}
.settings-row input[type="checkbox"]::after{content:"";position:absolute;top:2.5px;left:2.5px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.settings-row input[type="checkbox"]:checked{background:#ffaa46}
.settings-row input[type="checkbox"]:checked::after{transform:translateX(16px)}
.settings-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.settings-actions button{font-family:'Satoshi','Manrope',sans-serif;font-size:13px;font-weight:600;border-radius:9px;padding:9px 15px;cursor:pointer;transition:border-color .18s,box-shadow .18s}
#saveScrapeSettingsBtn{color:var(--send-fg);background:var(--send-bg);border:none}
#saveScrapeSettingsBtn:hover{box-shadow:0 0 11px rgba(255,170,70,.5),0 0 22px rgba(80,170,255,.35)}
#resetScrapeSettingsBtn,#clearScrapeCacheBtn{color:var(--text2);background:var(--card);border:1px solid var(--card-border)}
#resetScrapeSettingsBtn:hover,#clearScrapeCacheBtn:hover{border-color:rgba(255,170,70,.5);box-shadow:0 0 10px rgba(255,170,70,.45),0 0 20px rgba(80,170,255,.28)}
#scrapeSettingsSavedHint{font-size:12.5px;color:#27ae60;font-weight:600}
#scrapeSettingsSavedHint[hidden]{display:none}

/* ---------------- Outbound / Outreach generator ---------------- */
.view[data-view-pane="outbound"] .pad{width:100%;padding-right:34px}
#outreachGeneratorPanel{width:100%;max-width:none}
#outreachGeneratorPanel .panel-heading{margin-bottom:16px}
#outreachGeneratorPanel .panel-kicker{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--label);margin-bottom:4px}
#outreachGeneratorPanel .panel-title{font-size:16px;font-weight:700;color:var(--text)}
#outreachGeneratorPanel .drawer-label{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:7px}
#outreachGeneratorPanel select{font-family:'Satoshi','Manrope',sans-serif;font-size:14px;color:var(--text);background-color:var(--bg);border:1px solid var(--card-border);border-radius:9px;padding:9px 32px 9px 11px;outline:none;width:100%;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a9a90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 11px center;transition:border-color .15s,box-shadow .15s}
#outreachGeneratorPanel select:focus{border-color:var(--cellmute);box-shadow:0 0 0 3px var(--hover)}
#outreachGenerateBtn{font-family:'Satoshi','Manrope',sans-serif;font-size:13.5px;font-weight:600;color:var(--send-fg);background:var(--send-bg);border:none;border-radius:9px;padding:0 20px;height:38px;cursor:pointer;transition:box-shadow .2s;white-space:nowrap}
#outreachGenerateBtn:hover{box-shadow:0 0 11px rgba(255,170,70,.5),0 0 22px rgba(80,170,255,.35)}
#outreachResults{margin-top:16px}
#outreachResults .outreach-variation{background:var(--bg);border:1px solid var(--card-border);border-radius:12px;padding:14px 16px;overflow:hidden}
#outreachResults .outreach-variation-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
#outreachResults .outreach-variation-header > div:first-child{color:var(--text) !important;font-weight:600;font-size:13.5px}
#outreachResults .outreach-variation-meta{display:flex;gap:6px}
#outreachResults .outreach-chip{font-size:11px;font-weight:600;color:var(--chip-text);background:var(--card);border:1px solid var(--chip-border);border-radius:999px;padding:3px 9px;text-transform:capitalize}
#outreachResults .outreach-collapse-btn{width:26px;height:26px;border-radius:7px;border:1px solid var(--card-border);background:var(--card);color:var(--text2);cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center}
#outreachResults .outreach-collapse-btn:hover{border-color:var(--cellmute)}
#outreachResults .outreach-variation-body{display:flex;flex-direction:column;gap:10px}
#outreachResults .outreach-collapsed .outreach-variation-body{display:none}
#outreachResults .outreach-subject{font-size:13.5px;font-weight:600;color:var(--text)}
#outreachResults .outreach-body{font-size:13px;line-height:1.55;color:var(--text2);white-space:pre-wrap;background:var(--card);border:1px solid var(--card-border);border-radius:10px;padding:12px 13px}
#outreachResults .outreach-actions{display:flex;gap:8px;flex-wrap:wrap}
#outreachResults .outreach-actions button{font-family:'Satoshi','Manrope',sans-serif;font-size:12.5px;font-weight:600;color:var(--text2);background:var(--card);border:1px solid var(--card-border);border-radius:8px;padding:7px 12px;cursor:pointer;transition:border-color .18s,box-shadow .18s}
#outreachResults .outreach-actions button:hover{border-color:rgba(255,170,70,.5);box-shadow:0 0 10px rgba(255,170,70,.45),0 0 20px rgba(80,170,255,.28)}
.prompt-library{width:100%;max-width:none;margin:24px 0 34px}
.prompt-library-head{display:block;margin-bottom:16px}
.prompt-library-titleblock{display:flex;align-items:flex-start;gap:12px}
.prompt-library-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:10px;color:var(--text);background:var(--card);border:1px solid var(--card-border);box-shadow:0 0 10px rgba(255,170,70,.18),0 0 18px rgba(80,170,255,.12)}
.prompt-library-head h2{margin:3px 0 0;font-size:20px;font-weight:700;letter-spacing:0;line-height:1.15;color:var(--text)}
/* Filter bar: Build / Sell / Run, plus a search over title, tag and keywords.
   Three stages only, so the choice is never a decision. */
.prompt-library-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.prompt-filters{display:flex;gap:6px;flex-wrap:wrap}
.prompt-filter{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  font-size:12.5px;font-weight:600;color:var(--sub);background:var(--card);
  border:1px solid var(--card-border);cursor:pointer;transition:color .14s,border-color .14s,background .14s}
.prompt-filter:hover{color:var(--text);border-color:var(--cellmute)}
.prompt-filter.is-active{color:var(--text);border-color:var(--glow-edge);background:var(--sunken)}
.prompt-filter-n{font-family:var(--font-site-mono);font-size:10.5px;font-weight:500;opacity:.65}
.prompt-search{position:relative;display:flex;align-items:center;min-width:200px}
.prompt-search .ic{position:absolute;left:10px;stroke:var(--sub);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.prompt-search input{width:100%;margin:0;padding:7px 10px 7px 30px;font-size:12.5px;
  color:var(--text);background:var(--card);border:1px solid var(--card-border);border-radius:8px}
.prompt-search input:focus{outline:none;border-color:var(--glow-edge)}
.prompt-search input::-webkit-search-cancel-button{filter:invert(.5)}
.prompt-library-count{margin-left:auto;font-family:var(--font-site-mono);font-size:11px;color:var(--sub);white-space:nowrap}
.prompt-empty{grid-column:1/-1;margin:0;padding:26px 0;text-align:center;font-size:13px;color:var(--sub)}
.prompt-library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.prompt-card{min-width:0;display:flex;flex-direction:column;gap:12px;background:var(--bg);border:1px solid var(--card-border);border-radius:8px;padding:14px;opacity:0;transform:translateY(10px);will-change:opacity,transform;transition:border-color .2s,box-shadow .24s,background .2s}
.prompt-card:hover{border-color:rgba(255,170,70,.55);box-shadow:0 0 14px rgba(255,170,70,.38),0 0 30px rgba(80,170,255,.24),inset 0 1px 0 rgba(255,255,255,.04);background:var(--card)}
.prompt-card[hidden]{display:none}
.prompt-library-grid.is-visible .prompt-card{animation:promptCardIn .38s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--prompt-delay,0ms)}
@keyframes promptCardIn{to{opacity:1;transform:translateY(0)}}
.prompt-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.prompt-card-titleline{display:flex;align-items:flex-start;gap:10px;min-width:0}
.prompt-card-icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:8px;color:var(--text);background:var(--card);border:1px solid var(--card-border)}
.prompt-card-title{font-size:15px;font-weight:700;line-height:1.2;color:var(--text);margin:0}
.prompt-card-desc{font-size:12.8px;line-height:1.45;color:var(--text2);margin:0}
.prompt-copy-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:8px;border:1px solid var(--card-border);background:var(--card);color:var(--text2);cursor:pointer;transition:border-color .18s,box-shadow .18s,color .18s}
.prompt-copy-btn:hover{color:var(--text);border-color:rgba(255,170,70,.5);box-shadow:0 0 10px rgba(255,170,70,.45),0 0 20px rgba(80,170,255,.28)}
.prompt-copy-btn.copied{color:var(--send-fg);background:var(--send-bg);border-color:var(--send-bg)}
.prompt-preview{display:flex;flex-direction:column;min-height:184px;border:1px solid var(--card-border);border-radius:8px;overflow:hidden;background:var(--card)}
.prompt-preview-tab{display:flex;align-items:center;gap:7px;width:max-content;max-width:100%;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--label);padding:8px 11px;border-right:1px solid var(--card-border);border-bottom:1px solid var(--card-border);background:var(--bg)}
.prompt-preview-tab .ic{color:var(--icon)}
.prompt-preview pre{margin:0;flex:1;white-space:pre-wrap;word-break:break-word;overflow:hidden;font-family:'Satoshi','Manrope',sans-serif;font-size:12.5px;line-height:1.5;color:var(--text2);padding:11px 12px}
.prompt-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--sub)}
.prompt-card-tag{display:inline-flex;margin-bottom:9px;font-size:11px;font-weight:700;color:var(--chip-text);background:var(--card);border:1px solid var(--chip-border);border-radius:999px;padding:3px 8px;text-transform:uppercase;letter-spacing:.04em}
@media (max-width:1100px){.prompt-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.prompt-library-grid{grid-template-columns:1fr}.prompt-preview{min-height:156px}}

/* ---------------- Direct Search, URL scrape result ---------------- */
.view[data-view-pane="directsearch"] .pad{width:100%;padding-right:34px}
#scrapeUrlPanel{width:100%;max-width:none}
#scrapeUrlStatus{font-size:13px;color:var(--text2);font-weight:500}
#scrapeUrlResult{margin-top:14px}
.url-scrape-card{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden}
.url-scrape-row{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:baseline;padding:11px 16px;font-size:13.5px;color:var(--text);border-bottom:1px solid var(--card-border)}
.url-scrape-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--label)}
.url-scrape-row > span:last-child{color:var(--text);word-break:break-word;font-weight:500}
.url-scrape-row .lead-link{color:var(--li);text-decoration:none;margin-right:10px;text-transform:capitalize}
.url-scrape-row .lead-link:hover{text-decoration:underline}
.url-scrape-card > div:last-child{padding:13px 16px;margin:0}
#addUrlScrapeToLeads{font-family:'Satoshi','Manrope',sans-serif;font-size:13px;font-weight:600;color:var(--send-fg);background:var(--send-bg);border:none;border-radius:9px;padding:9px 16px;cursor:pointer;transition:box-shadow .2s}
#addUrlScrapeToLeads:hover{box-shadow:0 0 11px rgba(255,170,70,.5),0 0 22px rgba(80,170,255,.35)}

/* ---------------- Minimal preloader (splash on open) ---------------- */
#rmPreloader{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  background:var(--bg); /* theme-aware: matches light/dark */
  opacity:1; transition:opacity .45s ease, visibility .45s ease;
}
#rmPreloader.rm-pre-hide{ opacity:0; visibility:hidden; pointer-events:none; }
/* logo with the same soft glow as the home-page heromark */
#rmPreloader .rm-pre-mark{
  width:72px; height:72px; object-fit:contain;
  animation:heroGlow 3.4s ease-in-out infinite;
}
/* thin indeterminate loading bar */
#rmPreloader .rm-pre-bar{
  position:relative; width:128px; height:2px; border-radius:2px;
  background:var(--track); overflow:hidden;
}
#rmPreloader .rm-pre-bar span{
  position:absolute; top:0; left:0; height:100%; width:40%; border-radius:2px;
  background:#ff9a28;
  animation:rmSlide 1.15s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes rmSlide{ 0%{ transform:translateX(-110%); } 100%{ transform:translateX(360%); } }
/* subtle brand tagline */
#rmPreloader .rm-pre-tag{
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sub); margin-top:2px;
  animation:rmFade 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  #rmPreloader .rm-pre-mark,
  #rmPreloader .rm-pre-tag{ animation:none; opacity:1; }
  #rmPreloader .rm-pre-bar span{ animation:none; width:100%; }
}

/* ---------------- Lead badges & email-verify pills ---------------- */
.lead-badge{
  display:inline-block; vertical-align:middle; margin-left:6px;
  padding:1px 6px; border-radius:6px;
  font-size:9px; font-weight:700; letter-spacing:.04em; line-height:1.5;
  white-space:nowrap; border:1px solid transparent;
}
.lead-badge-cache{ background:rgba(123,92,255,.12); color:var(--credit); border-color:rgba(123,92,255,.25); }
.lead-badge-seen{ background:rgba(245,158,11,.14); color:#b4690e; border-color:rgba(245,158,11,.3); }
.lead-badge-contacted{ background:rgba(34,197,94,.14); color:#15803d; border-color:rgba(34,197,94,.3); }
.app.dark .lead-badge-seen{ color:#f0b35b; }
.app.dark .lead-badge-contacted{ color:#5fd58a; }

.email-pill{
  display:inline-block; vertical-align:middle; margin-left:6px;
  padding:1px 6px; border-radius:6px;
  font-size:9px; font-weight:700; letter-spacing:.02em; line-height:1.5;
  white-space:nowrap; border:1px solid transparent;
}
.email-pill-valid{ background:rgba(34,197,94,.14); color:#15803d; border-color:rgba(34,197,94,.3); }
.email-pill-risky{ background:rgba(245,158,11,.14); color:#b4690e; border-color:rgba(245,158,11,.3); }
.email-pill-invalid{ background:rgba(235,87,87,.14); color:#c0392b; border-color:rgba(235,87,87,.32); }
.app.dark .email-pill-valid{ color:#5fd58a; }
.app.dark .email-pill-risky{ color:#f0b35b; }
.app.dark .email-pill-invalid{ color:#f08585; }

.outreach-gmail-btn{
  background:rgba(10,102,194,.12); color:var(--li);
  border:1px solid rgba(10,102,194,.32); font-weight:600;
}
.outreach-gmail-btn:hover{ background:rgba(10,102,194,.2); }

/* CRM contact-card call / email actions */
.dd-contact-actions{ display:flex; gap:8px; margin-top:10px; }
.dd-action-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:8px; cursor:pointer;
  font-size:12.5px; font-weight:600; line-height:1;
  border:1px solid var(--card-border); background:var(--card); color:var(--text);
  transition:background .15s,border-color .15s;
}
.dd-action-btn .ic{ width:15px; height:15px; }
.dd-call-btn{ color:#15803d; border-color:rgba(34,197,94,.32); background:rgba(34,197,94,.1); }
.dd-call-btn:hover{ background:rgba(34,197,94,.18); }
.dd-email-btn{ color:var(--li); border-color:rgba(10,102,194,.32); background:rgba(10,102,194,.1); }
.dd-email-btn:hover{ background:rgba(10,102,194,.18); }
.app.dark .dd-call-btn{ color:#5fd58a; }
.app.dark .dd-email-btn{ color:#4f9be8; }

/* Deliverability + inferred-email affordances (lead drawer snapshot).
   Guessed addresses must never read like discovered ones. */
.snap-badge{ display:inline-block; margin-left:6px; padding:1px 6px; border-radius:999px;
  font-size:11px; font-weight:600; line-height:1.6; vertical-align:middle; }
.snap-badge-ok{ color:#15803d; background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.32); }
.snap-badge-bad{ color:#b91c1c; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.32); }
.app.dark .snap-badge-ok{ color:#5fd58a; }
.app.dark .snap-badge-bad{ color:#f18b8b; }

.snap-guess{ display:inline-block; padding:1px 6px; border-radius:6px; font-size:12px;
  color:var(--sub); background:var(--hover); border:1px dashed var(--card-border); }
.snap-guess-note{ margin-left:6px; font-size:11px; font-style:italic; color:var(--sub); opacity:.85; }

/* ============================================================
   Campus — the learning pane. Five video lessons, in order.
   ============================================================ */
.view[data-view-pane="campus"]{position:relative;background:var(--hero-bg);transition:background .22s}
.view[data-view-pane="campus"] .lbody{position:relative;z-index:1;background:transparent}
.view[data-view-pane="campus"] .pad{width:100%;padding-right:34px}
.view.view-enter .campus{animation:viewSurfaceIn .56s cubic-bezier(.2,.72,.18,1) both;animation-delay:45ms}
@media (prefers-reduced-motion:reduce){.view.view-enter .campus{animation:none}}

.campus{width:100%;max-width:none;margin:24px 0 34px}
.campus-head{display:block;margin-bottom:18px}
.campus-titleblock{display:flex;align-items:flex-start;gap:12px}
.campus-icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  border-radius:9px;color:var(--text);background:var(--card);border:1px solid var(--card-border)}
.campus-head h2{margin:3px 0 0;font-size:20px;font-weight:700;letter-spacing:0;line-height:1.15;color:var(--text)}
.campus-sub{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--sub);max-width:62ch}

/* ---- Progress rail ---- */
.campus-progress{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.campus-progress-bar{flex:1;min-width:180px;height:6px;border-radius:999px;background:var(--track);overflow:hidden}
.campus-progress-bar span{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--mc-l2),var(--accent));transition:width .35s cubic-bezier(.2,.7,.3,1)}
.campus-progress-text{font-size:12px;color:var(--sub);white-space:nowrap}
.campus-reset{font-size:11.5px;font-weight:600;color:var(--sub);background:none;border:none;cursor:pointer;
  padding:2px 0;text-decoration:underline;text-underline-offset:3px;transition:color .15s}
.campus-reset:hover{color:var(--text2)}
.campus-reset[hidden]{display:none}

/* ---- The five lessons ---- */
.campus-lessons{display:flex;flex-direction:column;gap:14px}
.campus-lesson{min-width:0;display:flex;gap:18px;align-items:stretch;
  background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:16px;
  opacity:0;transform:translateY(10px);will-change:opacity,transform;
  transition:border-color .2s,box-shadow .24s}
.campus-lessons.is-visible .campus-lesson{animation:campusLessonIn .42s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--campus-delay,0ms)}
@keyframes campusLessonIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .campus-lessons.is-visible .campus-lesson{animation:none;opacity:1;transform:none}
}
.campus-lesson:not(.is-soon):hover{border-color:rgba(255,170,70,.55);
  box-shadow:0 0 14px rgba(255,170,70,.38),0 0 30px rgba(80,170,255,.24),inset 0 1px 0 rgba(255,255,255,.04)}
.campus-lesson.is-soon{opacity:.72}
.campus-lesson.is-done{border-color:rgba(47,158,90,.42)}

.campus-thumb{position:relative;flex-shrink:0;width:196px;aspect-ratio:16/9;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border-radius:10px;border:1px solid var(--card-border);background:var(--sunken);overflow:hidden}
.campus-thumb.is-ready{cursor:pointer;padding:0;transition:border-color .2s,background .2s}
.campus-thumb.is-ready:hover{border-color:rgba(255,170,70,.55);background:var(--hover)}
.campus-play{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;
  background:var(--send-bg);color:var(--send-fg);transition:transform .2s}
.campus-play svg{fill:currentColor;stroke:none;margin-left:2px}
.campus-thumb.is-ready:hover .campus-play{transform:scale(1.08)}
.campus-soon-mark{display:flex;align-items:center;justify-content:center;color:var(--sub)}
.campus-soon-text{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--label)}

.campus-lesson-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:7px;padding:2px 0}
.campus-lesson-top{display:flex;flex-direction:column;gap:4px;min-width:0}
.campus-lesson-num{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.campus-lesson-title{margin:0;font-size:17px;font-weight:700;line-height:1.2;color:var(--text);min-width:0}
.campus-lesson-desc{margin:0;font-size:13px;line-height:1.5;color:var(--text2);max-width:74ch}
.campus-lesson-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:8px}
.campus-dur{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--sub);white-space:nowrap}
.campus-soon-pill{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--chip-text);
  background:var(--bg);border:1px solid var(--chip-border);border-radius:999px;padding:4px 9px}

.campus-done-btn{display:inline-flex;align-items:center;gap:5px;font-family:'Satoshi','Manrope',sans-serif;
  font-size:11.5px;font-weight:600;color:var(--sub);background:var(--bg);border:1px solid var(--card-border);
  border-radius:999px;padding:5px 11px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.campus-done-btn:hover{color:var(--text2);border-color:var(--chip-border)}
.campus-done-btn svg{opacity:.5;transition:opacity .15s,color .15s}
.campus-done-btn[aria-pressed="true"]{color:var(--pi-won);border-color:rgba(47,158,90,.45)}
.campus-done-btn[aria-pressed="true"] svg{opacity:1;color:var(--pi-won)}

/* ---- Lesson player ---- */
.campus-player-ovl{padding:32px}
.campus-player{width:860px;max-width:100%;max-height:100%;overflow-y:auto;background:var(--card);
  border:1px solid var(--card-border);border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.32);
  animation:modin .22s cubic-bezier(.2,.7,.3,1)}
.campus-player-head{display:flex;align-items:flex-start;gap:14px;padding:20px 22px 14px}
.campus-player-kicker{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--label);margin-bottom:4px}
.campus-player-title{margin:0;font-size:18px;font-weight:700;line-height:1.2;color:var(--text)}
.campus-player-stage{position:relative;aspect-ratio:16/9;width:100%;background:#000;overflow:hidden;
  border-top:1px solid var(--card-border);border-bottom:1px solid var(--card-border)}
.campus-player-stage iframe,
.campus-player-stage video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.campus-player-foot{display:flex;align-items:center;gap:16px;padding:16px 22px 20px}
.campus-player-desc{margin:0;flex:1;font-size:12.8px;line-height:1.5;color:var(--text2)}
.campus-player-foot .btn{flex-shrink:0}

@media (max-width:820px){
  .campus-lesson{flex-direction:column;gap:14px}
  .campus-thumb{width:100%}
}
@media (max-width:720px){
  .campus-player-foot{flex-direction:column;align-items:stretch}
}