/* ============================================================
   Chesapeake Pallets — INK + CHAMPAGNE rebrand (definitive)
   cockpit.css loads AFTER styles.css and has no other :root,
   so this :root wins. RULES: --accent/--accent-2 are DARK ink
   (white button text stays AA). Champagne #FAD9A9 = tints/glows/
   logo/numerals ONLY, never a fill behind white text. Champagne-
   as-TEXT uses the deepened --gold-ink. Status pills re-deepened
   so 11px white pill text clears WCAG AA (4.5:1).
   ============================================================ */
:root{
  /* PRIMARY = ink. Fills .btn.primary/.chip.on/.brand .mark/
     .side-foot .av/.cap-bar i/dropzone/login+auth marks.
     white on #141414 = 18.4:1 ; on #2b2b2b = 14.2:1. */
  --accent:#141414;        /* solid fills under white text */
  --accent-2:#2b2b2b;      /* hover + accent TEXT on light (but see --gold-ink) */

  /* champagne signature (pale fills + glows only) */
  --accent-soft:#f3ddbb;   /* ::selection + .tl.cur glow (champagne, soft) */
  --accent-tint:#fdf3e3;   /* active-nav/seg-on/skilltile/grade-chip/modal-icon fills */

  /* champagne working tokens (used by component overrides below) */
  --champagne:#FAD9A9;     /* logo mark, active-nav left-rail, KPI rule, numerals bg */
  --champagne-line:#ecc789;/* champagne hairline / focus border, a touch deeper */
  --gold-ink:#7a4f18;      /* champagne-derived TEXT: 7.10:1 on white, 6.46:1 on tint */
  --champagne-ico:#e8c58a; /* champagne icon/glyph on the DARK sidebar (11.2:1 on #141414) */

  /* sidebar: brand near-black, not navy */
  --navy:#141414; --navy-2:#1d1d1d; --navy-line:#000000; --side:#141414;

  /* surfaces: warm off-white so champagne tints read warm, not grey */
  --bg:#f6f4f0; --card:#ffffff; --card-2:#faf8f4; --hover:#f1ede6;

  /* ink ramp (warm-neutral, all AA) */
  --ink:#141414; --ink-2:#4b4742; --ink-3:#7c766d; --ink-4:#a8a299;

  /* warm hairlines */
  --line:#ece8e1; --line-2:#e0dbd2; --line-3:#cfc9be;

  /* STATUS — re-deepened so 11px WHITE .spill text clears AA 4.5:1.
     (stock green/teal/orange were 2.6-3.0:1 — a real failure.)
     --amber stays vivid: it is never a white-text pill fill. */
  --green:#0f7d4d;  /* white 5.17:1 */   --teal:#0c7b7a;   /* white 5.08:1 */
  --blue:#2a66d6;   /* white 5.29:1 */   --purple:#7848d6; /* white 5.68:1 */
  --orange:#bf5018; /* white 4.80:1 */   --red:#d23636;    /* white 4.86:1 */
  --gray:#666d78;   /* white 5.22:1 */   --slate:#666d78;
  --violet:#7848d6; --amber:#f5a623;     /* amber = dark-text contexts only */
  /* warm-tinted soft-badge backgrounds (dark text already AA on these) */
  --green-bg:#e4f3ea; --blue-bg:#e7effb; --purple-bg:#eee7fb; --teal-bg:#def1f0;
  --amber-bg:#f8ead0; --red-bg:#f8e4e2; --violet-bg:#eee7fb; --slate-bg:#eef0f3;

  /* focus ring: champagne glow (was terracotta) */
  --ring:0 0 0 3px rgba(250,217,169,.45);

  /* warm-tinted shadow so it doesn't go cold-grey on warm bg */
  --sh-lg:0 24px 56px -16px rgba(35,25,15,.30);
}

/* ============================================================
   Outreach Command — additions on top of the shared
   Load Command design system (styles.css). New components only.
   ============================================================ */

/* status light + health badge */
.hlight{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:12px}
.hlight .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-bg)}
.hlight.warn .dot{background:var(--amber);box-shadow:0 0 0 3px var(--amber-bg)}
.hlight.fail .dot{background:var(--red);box-shadow:0 0 0 3px var(--red-bg)}
.hbadge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;font-weight:700;font-size:12.5px;letter-spacing:-.1px}
.hbadge.pass{background:var(--green-bg);color:#177e4e}
.hbadge.warn{background:var(--amber-bg);color:#9a6914}
.hbadge.fail{background:var(--red-bg);color:#b4322a}
.hbadge svg{width:13px;height:13px;flex-shrink:0}

/* send-mode chip in the top bar */
.mode-chip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:20px;border:1px solid var(--line-2);background:var(--card)}
.mode-chip .dot{width:7px;height:7px;border-radius:50%}
.mode-chip.armed{color:#b4322a;border-color:#f1c4c4;background:var(--red-bg)} .mode-chip.armed .dot{background:var(--red)}
.mode-chip.draft{color:var(--ink-3)} .mode-chip.draft .dot{background:var(--ink-4)}
/* Global sending status + kill switch in the top bar */
.send-switch{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;padding:5px 8px 5px 11px;border-radius:20px;border:1px solid var(--line-2);background:var(--card);cursor:pointer;transition:background .15s,border-color .15s}
.send-switch .dot{width:8px;height:8px;border-radius:50%}
.send-switch .act{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:14px;letter-spacing:.2px}
.send-switch.on{color:#177e4e;border-color:#bfe3cd;background:var(--green-bg)} .send-switch.on .dot{background:var(--green);box-shadow:0 0 0 3px rgba(15,125,77,.15)}
.send-switch.on .act{background:var(--green);color:#fff}
.send-switch.on:hover{border-color:var(--green)}
.send-switch.off{color:#b4322a;border-color:#f1c4c4;background:var(--red-bg)} .send-switch.off .dot{background:var(--red)}
.send-switch.off .act{background:var(--red);color:#fff}
.send-switch.off:hover{border-color:var(--red)}

/* CSV dropzone */
.dropzone{border:2px dashed var(--line-3);border-radius:var(--r);padding:32px 20px;text-align:center;color:var(--ink-3);background:var(--card-2);transition:.15s;cursor:pointer}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:var(--accent-tint);color:var(--accent-2)}
.dropzone .dz-ic{width:42px;height:42px;border-radius:11px;background:var(--card);border:1px solid var(--line-2);display:grid;place-items:center;margin:0 auto 12px;color:var(--accent)}
.dz-ic svg{width:21px;height:21px}
.dropzone b{color:var(--ink);font-size:14px;display:block;margin-bottom:3px}

/* toggle switch (Draft ⇄ Live) */
.switch{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;user-select:none}
.switch .track{width:38px;height:22px;border-radius:20px;background:var(--line-3);position:relative;transition:.15s;flex-shrink:0}
.switch .track:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--sh-sm);transition:.15s}
.switch.on .track{background:var(--red)}
.switch.on .track:after{transform:translateX(16px)}

/* auth-check rows */
.auth-row{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;border:1px solid var(--line);border-radius:10px;margin-bottom:9px;background:var(--card)}
.auth-row .ar-mark{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;flex-shrink:0;font-size:9px;font-weight:700;color:#fff;margin-top:1px;letter-spacing:.2px}
.auth-row .ar-mark.pass{background:var(--green)} .auth-row .ar-mark.warn{background:var(--amber);color:#141414} .auth-row .ar-mark.fail{background:var(--red)}
.auth-row .ar-b{flex:1;min-width:0}
.auth-row .ar-b b{font-size:13px;font-weight:700}
.auth-row .ar-detail{font-size:12px;color:var(--ink-2);margin-top:2px}
.auth-row .ar-val{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:6px;word-break:break-all;background:var(--card-2);border:1px solid var(--line);border-radius:6px;padding:5px 8px}
.auth-row .ar-fix{font-size:11.5px;color:var(--accent-2);margin-top:6px;font-weight:600}
.auth-row .ar-fix svg{width:13px;height:13px;vertical-align:-2px}

/* daily-cap bar + key/value rows */
.cap-bar{height:7px;border-radius:6px;background:var(--line-2);overflow:hidden;width:170px}
.cap-bar i{display:block;height:100%;background:var(--accent);transition:width .3s}
.cap-bar i.hot{background:var(--amber)}
.kv{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.kv:last-child{border:0}
.kv b{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.mini-empty{padding:30px;text-align:center;color:var(--ink-3);font-size:12.5px}
.mini-empty svg{width:14px;height:14px;vertical-align:-2px;opacity:.6}

/* login / first-run setup gate */
.authgate{position:fixed;inset:0;z-index:300;display:none;place-items:center;background:var(--bg);
  overflow-y:auto;padding:24px 0}
.authgate.show{display:grid}
/* a tall card (the invite/create-account form) must stay fully reachable on a short
   screen — margin:auto centers it when it fits, and lets it scroll when it doesn't */
.authcard{width:min(390px,92vw);margin:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:30px 30px 26px}
.authcard .brandrow{display:flex;align-items:center;gap:11px;margin-bottom:20px}
.authcard .brandrow .mark{width:34px;height:34px;border-radius:8px;background:var(--accent);display:grid;place-items:center;flex-shrink:0}
.authcard .brandrow .mark svg{width:20px;height:20px}
.authcard h1{font-size:19px;font-weight:700;margin:0;letter-spacing:-.3px}
.authcard .sub{color:var(--ink-3);font-size:12.5px;margin-top:2px}
.authcard .err{color:var(--red);font-size:12px;margin-top:10px;min-height:15px}
.side-foot .gear{cursor:pointer}

/* ============================================================
   Ink + Champagne brand overrides — component level (reaches the
   hardcoded values the :root block can't). Champagne is signature,
   never a fill behind white text; status fills cleared to WCAG AA.
   ============================================================ */
/* sidebar text: warm on near-black (was navy-era cool) */
.nav a{color:#c2bbb0}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav .lbl{color:#8a8276}
/* active nav: champagne rail + tint + gold icon (replaces hardcoded blues) */
.nav a.active{background:rgba(250,217,169,.16);color:#fff;font-weight:600}
.nav a.active:before{background:var(--champagne)}
.nav a.active svg{color:var(--champagne-ico);opacity:1}
.nav a .badge.amber,.nav a.active .badge{background:var(--champagne);color:#141414}
/* brand mark = gold tile + ink glyph; side-foot avatar = dark tile, gold monogram */
.brand .mark{background:var(--champagne)}
.side-foot .av{background:#262626;color:var(--champagne-ico)}
/* KPI signature: champagne cap on the hero card + gold hero numeral */
.kpi{border-top:2px solid transparent}
.kpis .kpi:first-child{border-top-color:var(--champagne)}
.kpis .kpi:first-child .val{color:var(--gold-ink)}
/* gold text affordances (champagne-derived, AA via --gold-ink) */
.seg button.on{color:var(--gold-ink)}
.mc-name b,.cc-logo,.mc .gradechip,.tag.grade{color:var(--gold-ink)}
.dtab.on{color:var(--gold-ink);border-bottom-color:var(--champagne-line)}
.tbl tbody tr.row-click:hover{box-shadow:inset 3px 0 0 var(--champagne)}
/* email-preview modal: gold accents + warm scrim */
.modal-h .mi{color:var(--gold-ink)}
.att-pill svg{color:var(--gold-ink)}
.email-preview{border-top:2px solid var(--champagne)}
.modal-scrim{background:rgba(35,25,15,.5)}
.scrim{background:rgba(35,25,15,.4)}
/* champagne focus edges */
.search:focus-within,.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--champagne-line)}
/* status pills: deepen the one hardcoded fail + owner avatars (AA white text) */
.sp-outreach{background:#3a68cf}
.oav-d{background:#2a66d6} .oav-g{background:#7848d6}
/* capacity meter gold */
.cap-bar i{background:var(--champagne-line)}
.cap-bar i.hot{background:var(--amber)}
/* login / auth card marks: gold tile + ink glyph; gold links */
.login-brand .mark,.authcard .brandrow .mark{background:var(--champagne)}
.login-form .eyebrow,.login-form .row a{color:var(--gold-ink)}
.stack{display:flex;flex-direction:column;gap:16px}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
/* editable email preview (Send Queue) — subject input + body textarea share the preview look */
.email-preview .ev-edit{flex:1;border:1px solid var(--line-2);background:var(--bg);border-radius:6px;
  padding:4px 8px;font:inherit;font-weight:500;color:var(--ink)}
.email-preview .eb-edit{display:block;width:100%;border:0;border-radius:0;resize:vertical;
  white-space:pre-wrap;font-family:inherit;font-size:13px;line-height:1.65;color:var(--ink);background:var(--card)}
.email-preview .ev-edit:focus,.email-preview .eb-edit:focus{outline:none;border-color:var(--champagne-line)}
/* Controls screen: pacing/safety toggle rows */
.ctrl-list{padding:4px 0}
.ctrl-row{display:flex;align-items:center;gap:14px;padding:13px 17px;border-bottom:1px solid var(--line)}
.ctrl-row:last-child{border-bottom:0}
.ctrl-meta{flex:1;min-width:0}
.ctrl-name{font-weight:600;font-size:13.5px;color:var(--ink)}
.ctrl-sub{font-size:12px;color:var(--ink-3);margin-top:2px}
.ctrl-num{display:flex;align-items:center;gap:6px}
.ctrl-num input{width:72px;padding:5px 8px;border:1px solid var(--line-2);border-radius:6px;font:inherit;color:var(--ink);background:var(--bg)}
.ctrl-num input:focus{outline:none;border-color:var(--champagne-line)}
.ctrl-num span{font-size:11.5px;color:var(--ink-3)}
.ctrl-row .switch{cursor:pointer;flex:0 0 auto}
/* Campaign modal: weekday picker */
.dchk-row{display:flex;flex-wrap:wrap;gap:8px}
.dchk{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--ink-2);
  padding:5px 10px;border:1px solid var(--line-2);border-radius:7px;cursor:pointer;user-select:none}
.dchk input{margin:0}
/* Campaign wizard: step indicator + roomier modal */
.wz-steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.wz-step{font-size:11px;font-weight:600;color:var(--ink-3);padding:3px 9px;border-radius:20px;background:var(--card-2);border:1px solid var(--line-2);cursor:pointer;white-space:nowrap}
.wz-step.on{background:var(--champagne);color:#141414;border-color:var(--champagne-line)}
.wz-step.done{color:var(--gold-ink)}
.modal-scrim.show .modal:has(.wz-steps){max-width:860px;width:94vw}
/* ===== MOBILE / phone layout ===== */
/* Bottom tab bar — mobile only (display:flex turned on in the @media below) */
.tabbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:280;background:var(--navy);
  border-top:1px solid var(--navy-line);padding-bottom:env(safe-area-inset-bottom);justify-content:space-around}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:8px 2px 7px;color:#8194ab;font-size:9.5px;font-weight:600;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent}
.tabbar a svg{width:21px;height:21px;opacity:.85}
.tabbar a.active{color:#fff} .tabbar a.active svg{color:#6ea2ff;opacity:1}
.tabbar a .tb-badge{position:absolute;top:5px;margin-left:16px;min-width:15px;height:15px;border-radius:8px;background:var(--accent);color:#fff;font-size:9px;font-weight:700;display:grid;place-items:center;padding:0 3px}
.drawer-scrim{display:none}

@media (max-width: 820px){
  .app{grid-template-columns:1fr}
  /* sidebar → off-canvas drawer, opened by the Menu tab */
  .side{display:flex;position:fixed;top:0;left:0;height:100dvh;width:252px;z-index:300;flex-direction:column;
    padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top));border-right:1px solid var(--navy-line);
    border-bottom:0;transform:translateX(-100%);transition:transform .24s ease;box-shadow:2px 0 44px rgba(0,0,0,.45);overflow-y:auto}
  .side.open{transform:none}
  .nav{flex-direction:column;overflow-x:hidden;overflow-y:auto;gap:1px;margin-top:6px;padding-bottom:4px}
  .nav .lbl{display:block}
  .nav a{white-space:normal;flex:0 0 auto;padding:11px 10px}     /* bigger touch targets */
  .nav a.active:before{display:block}
  .side-foot{margin-top:8px}
  .drawer-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:250}
  .drawer-scrim.show{display:block}
  .tabbar{display:flex}
  .main{min-height:auto}
  .top{padding:0 13px;min-height:48px;height:auto;padding-top:env(safe-area-inset-top)}
  .top .h{min-width:0}
  .top h1{font-size:16px}
  .top .sub{display:none}
  .content{padding:12px 12px calc(76px + env(safe-area-inset-bottom))}
  .kpis{grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:14px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  /* compact top bar: title truncates, kill-switch → dot, refresh → icon */
  .top{gap:7px;padding-right:10px}
  .top .h h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
  .top .send-switch{width:32px;height:32px;padding:0;border-radius:50%;justify-content:center;gap:0;flex:0 0 auto}
  .top .send-switch .lbl,.top .send-switch .act{display:none}
  .top .send-switch .dot{width:11px;height:11px}
  #refreshBtn{width:34px;padding:7px;justify-content:center;flex:0 0 auto}
  #refreshBtn span{display:none}
  .xp-chip{flex:0 0 auto}
  /* panel headers wrap so the action button never gets cut off */
  .panel-h{flex-wrap:wrap;row-gap:8px}
  /* tables scroll horizontally instead of crushing/overflowing */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl{font-size:12px;min-width:max-content}
  /* kanban: swipe one full-width column at a time */
  .kan{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:10px;padding:12px}
  .kan-col{flex:0 0 82vw;scroll-snap-align:start;max-height:none}
  /* full-screen modals on phones */
  .modal-scrim{padding:0;place-items:stretch}
  .modal-scrim.show .modal,.modal-scrim.show .modal:has(.wz-steps){width:100%;max-width:100%;
    max-height:100dvh;height:100dvh;border-radius:0;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
  .modal-b{flex:1;overflow:auto}
  .wz-steps{gap:4px}
  .wz-step{font-size:10px;padding:3px 7px}
}
/* Dashboard: sends sparkline bars + funnel/usage bars */
.spark{display:flex;align-items:flex-end;gap:5px;height:96px}
.spark-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.spark-col i{display:block;width:100%;max-width:26px;background:var(--champagne-line);border-radius:3px 3px 0 0;min-height:2px}
.spark-col u{font-size:9px;color:var(--ink-3);text-decoration:none;white-space:nowrap}
.fbar{height:6px;background:var(--line-2);border-radius:4px;overflow:hidden;margin:2px 0 9px}
.fbar i{display:block;height:100%;background:var(--champagne-line);border-radius:4px}
/* Call Mode — phone-first power-through queue */
.call-wrap{max-width:520px;margin:0 auto}
.call-head{padding:12px 16px}
.ch-top{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);margin-bottom:7px}
.call-card{padding:20px 18px;text-align:center}
.cc-name{font-size:23px;font-weight:800;letter-spacing:-.3px}
.cc-co{font-size:13px;color:var(--ink-3);margin:3px 0 10px}
.cc-stage{margin-bottom:14px;display:inline-block}
.call-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--green);color:#fff;font-size:18px;font-weight:800;padding:16px;border-radius:14px;text-decoration:none;box-shadow:0 4px 16px rgba(15,125,77,.35);margin:6px 0 14px}
.call-btn:active{transform:scale(.98)}
.cc-last{font-size:13px;color:var(--ink-2);background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px;text-align:left}
.cc-label{font-size:12px;color:var(--ink-3);margin:16px 0 8px;font-weight:600}
.cc-outcomes{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.oc-btn{padding:15px 10px;font-size:14px;font-weight:700;border:1px solid var(--line-2);border-radius:12px;background:var(--card);cursor:pointer;transition:.12s}
.oc-btn:hover{border-color:var(--ink-4)}
.oc-btn:active{transform:scale(.97)}
.oc-btn.hot{background:var(--green-bg);border-color:#bfe3cd;color:#177e4e}
.oc-btn:disabled{opacity:.45}
.cc-due{display:inline-block;margin:10px 0 0;font-size:12.5px;font-weight:700;color:#9a6914;background:var(--amber-bg);border-radius:8px;padding:6px 11px}
.cc-due.over{color:#b4322a;background:var(--red-bg)}
.cc-note{width:100%;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;font:inherit;font-size:16px;color:var(--ink);background:var(--card-2);resize:vertical;margin-bottom:12px}
.cc-note:focus{outline:none;border-color:var(--champagne-line)}
/* size-the-deal row — capture pallets × $/pallet so the pipeline carries real money */
.cc-econ{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.cc-econ-lbl{font-size:12px;font-weight:700;color:var(--gold-ink);flex:0 0 auto}
.cc-econ .cc-x{color:var(--ink-3);font-weight:700}
.cc-econ input{flex:1;min-width:90px;border:1px solid var(--line-2);border-radius:10px;padding:11px 12px;font-size:16px;background:var(--card-2);color:var(--ink);outline:none}
.cc-econ input:focus{border-color:var(--champagne-line)}
.cc-econ .cc-eq{flex-basis:100%;font-family:var(--num);font-weight:800;color:var(--gold-ink);font-size:15px;text-shadow:0 0 14px rgba(246,197,96,.35)}
/* gold money chip on a call card — the deal's value, so brokers chase the biggest */
.cc-money{display:inline-block;margin-left:8px;font-family:var(--num);font-weight:800;font-size:13px;color:#06140b;
  background:linear-gradient(180deg,#ffe08a,#f6c560);padding:3px 10px;border-radius:14px;box-shadow:0 0 14px rgba(246,197,96,.5)}
.cc-hist{text-align:left;margin:8px 0}
.cc-hist>div{padding:6px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;font-size:12px}
.cc-hist .h-in{color:#177e4e;font-weight:600}
.cc-hist .h-out{color:var(--ink-3)}
.cc-hist span{color:var(--ink-4);font-family:var(--num);font-size:10.5px;white-space:nowrap}
.call-done{text-align:center;padding:44px 20px}
.call-done .cd-emoji{font-size:50px}
.call-done h2{margin:10px 0 4px}
/* Top-bar live XP chip */
.xp-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:var(--card);border-radius:20px;padding:3px 12px 3px 3px;cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s}
.xp-chip:hover{border-color:var(--champagne-line)}
.xp-chip .xc-lvl{width:26px;height:26px;border-radius:50%;background:var(--champagne);color:#141414;display:grid;place-items:center;font-family:var(--num);font-weight:800;font-size:13px}
.xp-chip .xc-meta{display:flex;flex-direction:column;line-height:1.15;font-family:var(--num);font-size:11.5px;text-align:left}
.xp-chip .xc-meta small{color:var(--ink-3);font-size:10px;font-weight:500}
.xp-chip.bumped{animation:xpbump .9s ease}
@keyframes xpbump{0%,100%{transform:scale(1)}30%{transform:scale(1.16);box-shadow:0 0 0 4px rgba(232,176,75,.28)}}
@media (max-width:820px){.xp-chip .xc-meta{display:none}}
/* Win FX: full-screen flash + screen shake + richer banner */
.screen-flash{position:fixed;inset:0;z-index:9998;pointer-events:none;background:radial-gradient(circle at 50% 36%,rgba(232,176,75,.5),rgba(232,176,75,0) 60%);animation:flashfade .72s ease-out forwards}
.screen-flash.mega{background:radial-gradient(circle at 50% 36%,rgba(255,214,92,.82),rgba(232,176,75,0) 66%)}
@keyframes flashfade{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
body.shake{animation:shakefx .55s cubic-bezier(.36,.07,.19,.97)}
@keyframes shakefx{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.win-banner.mega .wb-xp{font-size:60px}
.win-banner .wb-jackpot{font-size:19px;font-weight:900;color:#fff;background:linear-gradient(90deg,#d4533f,#e8b04b);display:inline-block;padding:5px 16px;border-radius:20px;margin-bottom:7px;box-shadow:0 4px 18px rgba(212,83,63,.5);animation:pulse .5s ease infinite}
.win-banner .wb-combo{font-size:15px;font-weight:800;color:#d4533f;margin-bottom:4px}
.win-banner .wb-levelup{font-size:18px;font-weight:900;color:#fff;background:linear-gradient(90deg,#6b44c4,#2b6cb0);display:inline-block;padding:6px 16px;border-radius:20px;margin-top:7px;box-shadow:0 4px 18px rgba(107,68,196,.5)}
/* Streak danger + notify CTA + daily spin + missions */
.streak-warn{background:linear-gradient(90deg,#fdeede,#fbe0c8);border:1px solid #f1c98c;border-radius:var(--r);padding:12px 16px;font-size:13px;color:#8a4b12;animation:pulse 2s ease-in-out infinite}
.notify-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;font-size:13px}
.spin-card{text-align:center;padding:18px 17px}
.spin-card .sc-h{font-size:16px;font-weight:800;margin-bottom:4px}
.spin-card .sc-sub{font-size:12px;color:var(--ink-3);margin-bottom:12px}
.btn.block{width:100%;justify-content:center}
#spinBtn{font-size:16px;font-weight:800;letter-spacing:1px;padding:11px}
#spinBtn.spinning{animation:spinwobble .5s linear infinite}
@keyframes spinwobble{50%{transform:scale(1.04) rotate(-1deg)}}
.mission{display:flex;align-items:center;gap:11px;padding:9px 17px;border-bottom:1px solid var(--line)}
.mission.done .mi-top span{color:var(--ink-1)}
.mi-ic{font-size:19px}
.mi-body{flex:1}
.mi-top{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;margin-bottom:4px}
.mi-top b{color:var(--gold-ink);font-family:var(--num)}
.mi-prog{font-size:10.5px;color:var(--ink-3);font-family:var(--num);margin-top:2px}
.mi-claimed{color:var(--green);font-weight:800;font-size:16px}
/* ============================ Gamification — the Today/Game screen ===== */
.game-hero{display:flex;justify-content:space-between;gap:18px;padding:20px 22px;flex-wrap:wrap;
  background:linear-gradient(120deg,#141414 0%,#2b2b2b 60%,#3a2f12 100%);color:#fff;border:none}
.game-hero .gh-left{flex:1;min-width:240px}
.gh-id{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.gh-num{width:54px;height:54px;border-radius:14px;background:var(--champagne);color:#141414;
  display:grid;place-items:center;font-family:var(--num);font-size:26px;font-weight:800;box-shadow:0 4px 14px rgba(232,176,75,.4)}
.gh-title{font-size:19px;font-weight:800;letter-spacing:-.3px}
.gh-sub{font-size:12px;color:#cbb88e;font-family:var(--num)}
.xpbar{height:11px;background:rgba(255,255,255,.13);border-radius:7px;overflow:hidden}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,#e8b04b,#f4d089);border-radius:7px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.gh-xpnote{font-size:11.5px;color:#cbb88e;margin-top:6px;font-family:var(--num)}
.gh-right{display:flex;gap:20px;align-items:center}
.gh-stat{text-align:center}
.gs-big{font-size:26px;font-weight:800;font-family:var(--num)}
.gs-big.hot{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.12)}}
.gs-lbl{font-size:11px;color:#cbb88e;margin-top:2px}
.ring{width:52px;height:52px}
.ring .rbg{fill:none;stroke:rgba(255,255,255,.14);stroke-width:5}
.ring .rfg{fill:none;stroke:var(--champagne);stroke-width:5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .6s}
.ring text{fill:#fff;font-size:14px;font-weight:700;font-family:var(--num)}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;padding:14px 17px}
.badge-tile{text-align:center;padding:12px 6px;border:1px solid var(--line);border-radius:11px;background:var(--card-2)}
.badge-tile.got{border-color:#e7c48f;background:linear-gradient(180deg,#fff,#fdf3e3)}
.badge-tile.locked{opacity:.5}
.bt-ic{font-size:26px;line-height:1}
.bt-name{font-size:11px;font-weight:600;margin-top:5px}
.game-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:820px){.game-cols{grid-template-columns:1fr}}
.lb-row{display:flex;align-items:center;gap:11px;padding:9px 17px;border-bottom:1px solid var(--line)}
.lb-row.me{background:var(--accent-tint)}
.lb-rank{width:26px;text-align:center;font-weight:700;font-family:var(--num)}
.lb-name{flex:1;font-weight:600;font-size:13px}
.lb-lvl{display:block;font-size:10.5px;color:var(--ink-3);font-weight:500}
.lb-pts{font-size:12px;font-family:var(--num);color:var(--ink-2)}
.feed{max-height:340px;overflow-y:auto}
.feed-item{display:flex;align-items:center;gap:9px;padding:9px 17px;border-bottom:1px solid var(--line);font-size:12.5px}
.fi-ic{font-size:16px}
.fi-txt{flex:1}
.fi-time{font-size:11px;color:var(--ink-4);font-family:var(--num)}
.win-banner{position:fixed;top:30%;left:50%;width:320px;margin-left:-160px;z-index:10000;pointer-events:none;text-align:center;
  animation:wbpop 3.4s cubic-bezier(.2,.9,.2,1) forwards}
.win-banner .wb-xp{font-size:46px;font-weight:900;color:#e8b04b;text-shadow:0 3px 16px rgba(0,0,0,.35);font-family:var(--num)}
.win-banner .wb-lvl{font-size:16px;font-weight:800;color:#141414;background:#fff;display:inline-block;padding:5px 14px;border-radius:20px;box-shadow:var(--sh);margin-top:6px}
.win-banner .wb-badge{margin-top:8px;font-size:13px;font-weight:700;color:#fff;background:#0f7d4d;display:inline-block;padding:5px 12px;border-radius:16px}
@keyframes wbpop{0%{opacity:0;transform:scale(.6)}12%{opacity:1;transform:scale(1.05)}22%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-30px)}}
/* CRM pipeline kanban + win celebration */
.kan{display:flex;gap:12px;overflow-x:auto;padding:14px}
.kan-col{flex:0 0 220px;background:var(--card-2);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;max-height:600px}
.kan-h{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;font-size:12px;font-weight:700;border-bottom:1px solid var(--line)}
.kan-h .kan-n{font-weight:600;color:var(--ink-3);font-size:10.5px}
.kan-body{padding:8px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.kan-more{text-align:center;font-size:11px;color:var(--ink-3);padding:8px 0 2px}
.kan-empty{color:var(--ink-4);font-size:12px;text-align:center;padding:12px 0}
.deal-card{background:var(--card);border:1px solid var(--line-2);border-radius:8px;padding:9px 10px;transition:border-color .12s}
.deal-card:hover{border-color:var(--line-3)}
.dc-title{font-size:12.5px;font-weight:600;margin-bottom:3px;line-height:1.25}
.dc-meta{font-size:11px;color:var(--ink-3);margin-bottom:7px}
.dc-stage{width:100%;font-size:11px;padding:3px 6px;border:1px solid var(--line-2);border-radius:6px;background:var(--card-2);cursor:pointer}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.confetti i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;animation:cfall 2.4s linear forwards}
@keyframes cfall{to{transform:translateY(106vh) rotate(560deg);opacity:.8}}
/* ICP Insights */
.ins-bar{display:flex;align-items:center;font-size:12px;margin:3px 0}
.ins-bar .ib-k{min-width:78px;font-weight:600;color:var(--ink-2)}
.ins-bar .ib-v{min-width:78px;text-align:right;font-family:var(--num);font-weight:600}
.ins-dim{opacity:.45}
tr.ins-dim td{opacity:.5}
.wicp{display:grid;grid-template-columns:1fr 1fr;gap:9px 22px}
.wicp-row{display:flex;align-items:baseline;gap:8px;font-size:13px;padding:5px 0;border-bottom:1px solid var(--line)}
.wicp-row .wl{color:var(--ink-3);min-width:118px;font-size:11.5px}
.wicp-row b{font-size:13.5px}
.wicp-row .sub{margin-left:auto}
@media (max-width:820px){.wicp{grid-template-columns:1fr}}
/* Campaign progress cell (Campaigns table) */
.cprog{min-width:210px}
.cprog-bar{height:6px;background:var(--line-2);border-radius:4px;overflow:hidden;margin:0 0 5px}
.cprog-bar i{display:block;height:100%;background:var(--green);border-radius:4px;transition:width .3s}
.cprog-bar.sm{height:5px;margin:0;flex:1}
.cprog-head{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-2);margin-bottom:5px}
.cprog-head b{font-weight:700;color:var(--ink)}
.cprog-head .badge{font-size:9.5px;padding:1px 6px}
.cprog-meta{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink-3);flex-wrap:wrap}
.cprog-meta .badge{font-size:9.5px;padding:1px 6px}
.cp-steps{margin-top:7px;display:flex;flex-direction:column;gap:4px}
.cp-step{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--ink-3)}
.cp-step.hit .cp-sl{color:var(--ink-2);font-weight:600}
.cp-step.todo{opacity:.7}
.cp-step.todo .cprog-bar i{background:var(--line-3)}
.cp-sl{flex:0 0 92px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-sn{flex:0 0 auto;font-family:var(--num);white-space:nowrap;text-align:right}
/* Master Inbox: highlight unhandled responses */
.feed .fitem.unread{box-shadow:inset 3px 0 0 var(--champagne);background:var(--champagne-tint,rgba(250,217,169,.06))}
/* Manual follow-up builder rows in the compose modal */
.fu-row{border:1px solid var(--line-2);border-radius:8px;padding:10px;margin-top:8px;background:var(--card-2)}
.fu-head{display:flex;align-items:center;gap:6px;font-size:12.5px}
.fu-head .fu-delay{width:54px;padding:3px 6px;border:1px solid var(--line-2);border-radius:5px;font:inherit}
.fu-row .fu-subj{border:1px solid var(--line-2);border-radius:6px;padding:5px 8px;font:inherit}
/* ── iOS no-zoom: keep EVERY form control ≥16px on phones ──────────────────
   Safari zooms the whole page in on focus of any field smaller than 16px and
   leaves it zoomed. This block sits at the END of the file ON PURPOSE so it wins
   source-order over the base control styles above (.dc-stage, .ctrl-num input,
   .fu-* etc.), without needing !important. Fix the font size, never the viewport. */
@media (max-width: 820px){
  input,select,textarea,
  .fg input,.fg select,.fg textarea,.search input,.ev-edit,.eb-edit,
  .ctrl-num input,.dc-stage,.login-form .fg input,
  .fu-head .fu-delay,.fu-row .fu-subj{font-size:16px}
}

/* ── Mobile: action-heavy management tables → stacked cards ────────────────
   On a 390px phone a .tbl{min-width:max-content} table pushes the per-row
   actions (Send / Edit / Pause) off-screen, forcing sideways scroll per row.
   Below 820px we turn .tbl-cards rows into self-contained cards with the
   actions wrapped full-width underneath — the screens brokers run the
   business from (Send Queue, Campaigns) stop fighting the thumb. */
@media (max-width: 820px){
  .tbl-cards{min-width:0;width:100%;font-size:13px}
  .tbl-cards thead{display:none}
  .tbl-cards tbody,.tbl-cards tr,.tbl-cards td{display:block;width:auto}
  .tbl-cards tr{border:1px solid var(--line-2);border-radius:12px;padding:11px 13px;margin-bottom:11px;background:var(--card)}
  .tbl-cards td{padding:3px 0;border:0;text-align:left!important}
  .tbl-cards td.num{font-family:var(--num)}
  .tbl-cards td:empty{display:none}
  .tbl-cards .cprog{min-width:0}
  .tbl-cards .row-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
  .tbl-cards .row-actions .btn{flex:1 1 auto;justify-content:center;min-height:38px}
  .tbl-cards .row-actions .btn.primary{flex-basis:100%;order:-1}  /* Send up top, full width */
}

/* ============================================================
   Pipeline + CRM redesign — rich cards, detail/account drawer,
   funnel, search/filters, and the Today worklist.
   ============================================================ */
/* clickable KPI tiles + funnel */
.kpi-click{cursor:pointer}
.kpi-click:hover{border-color:var(--ink-4)}
.crm-funnel{margin-top:13px;display:flex;flex-direction:column;gap:5px}
.cf-row{display:flex;align-items:center;gap:9px;font-size:11px}
.cf-k{width:80px;color:var(--ink-3);flex:0 0 auto}
.cf-row .fbar{flex:1;margin:0}
.cf-n{width:42px;text-align:right;font-family:var(--num);color:var(--ink-2);font-weight:600}

/* board/list toolbar */
.crm-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.crm-search{display:flex;gap:8px;flex:1;min-width:200px}
.crm-search input{flex:1;border:1px solid var(--line-2);border-radius:8px;padding:8px 11px;font-size:13px;background:var(--card);color:var(--ink);outline:none}
.crm-search input:focus{border-color:var(--champagne-line)}
.crm-search select{border:1px solid var(--line-2);border-radius:8px;padding:8px;font-size:13px;background:var(--card);color:var(--ink)}
.crm-chips{display:flex;flex-wrap:wrap;gap:7px;width:100%}

/* richer deal cards */
.deal-card{cursor:pointer}
.deal-card.hot{box-shadow:inset 3px 0 0 var(--accent)}
.dc-contact{font-size:11px;color:var(--ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:5px;font-size:11px}
.dc-val{font-weight:700;font-family:var(--num);color:var(--ink-2)}
.dc-addv{color:var(--ink-4);font-weight:500}
.dc-ago{color:var(--ink-4);font-family:var(--num)}
.dc-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.deal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:10px;padding:12px 17px}

/* detail / account drawer (right-anchored on desktop; full-screen sheet on phone) */
@media (min-width:821px){
  .modal-scrim.show .modal.drawer{justify-self:end;align-self:stretch;width:466px;max-width:94vw;height:100dvh;max-height:100dvh;border-radius:0;display:flex;flex-direction:column;animation:ddslide .22s ease}
  .modal.drawer .modal-b{flex:1;overflow:auto}
}
@keyframes ddslide{from{transform:translateX(44px);opacity:.5}to{transform:none;opacity:1}}
.dd-head{align-items:flex-start}
.dd-id{min-width:0;flex:1}
.dd-id h3{font-size:18px;font-weight:800;letter-spacing:-.3px;margin:0;line-height:1.2}
.dd-sub{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.dd-co{color:var(--accent-2);font-weight:600;cursor:pointer;text-decoration:underline}
.dd-badges{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:9px}
.dd-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.dd-chip{font-size:12.5px;font-weight:600;border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);border-radius:18px;padding:8px 13px;cursor:pointer;transition:.12s}
.dd-chip:hover{border-color:var(--ink-4);background:var(--hover)}
.dd-editor:not(:empty){margin-bottom:14px;padding:12px;background:var(--card-2);border:1px solid var(--line);border-radius:10px}
.dd-edit{display:flex;flex-direction:column;gap:9px}
.dd-edit .fg{margin:0}
.dd-stages{display:flex;flex-wrap:wrap;gap:7px}
.dd-stages .spill{cursor:pointer;opacity:.62;min-width:0;border:0}
.dd-stages .spill.cur{opacity:1;box-shadow:0 0 0 2px var(--accent)}
.dd-foot{display:flex;flex-direction:column;gap:8px}

/* shared timeline (deal + account) */
.dd-tl{display:flex;flex-direction:column}
.tl-row{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.tl-ic{flex:0 0 20px;text-align:center;font-size:13px;line-height:1.5}
.tl-b{flex:1;min-width:0}
.tl-t{font-size:12.5px;color:var(--ink);line-height:1.4;word-break:break-word}
.tl-row.h-in .tl-t{font-weight:600;color:#177e4e}
.tl-s{font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.45;word-break:break-word}
.tl-time{flex:0 0 auto;font-size:10.5px;color:var(--ink-4);font-family:var(--num);white-space:nowrap}

/* account view rows */
.acct-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.acct-row .sub{font-size:11px;color:var(--ink-3);margin-top:1px}

/* Today worklist */
.wl-banner{padding:13px 16px;background:var(--amber-bg);border-radius:10px;font-size:13.5px;color:#7a4f18;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:10px}
.wl-banner.clear{background:var(--green-bg);color:#177e4e}
.wl-banner b{font-size:17px}
.wl-list{display:flex;flex-direction:column}
.wl-item{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line)}
.wl-main{flex:1;min-width:0}
.wl-name{font-size:14px;font-weight:700;cursor:pointer;display:inline-block}
.wl-name:hover{color:var(--accent-2);text-decoration:underline}
.wl-co{font-size:11.5px;color:var(--ink-3)}
.wl-reason{font-size:11px;color:var(--ink-4);margin-top:2px}
.wl-acts{display:flex;gap:6px;flex:0 0 auto;align-items:center}

/* ── Instantly-style per-campaign DETAIL screen ── */
.cd-head{padding:14px 17px}
.cd-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.cd-name{font-size:20px;font-weight:800;letter-spacing:-.3px;margin:2px 0}
.cd-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.cd-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cd-tabs button{white-space:nowrap}
.camp-open{color:var(--accent-2);cursor:pointer;text-decoration:underline;font-weight:700}
.cd-step{padding:14px 17px}
.cd-step-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.cd-step .eb{white-space:pre-wrap;font-size:13px;line-height:1.5;color:var(--ink-2);padding:11px 13px}
.cd-search{margin-top:8px;width:100%;border:1px solid var(--line-2);border-radius:8px;padding:8px 11px;font-size:16px;background:var(--card);color:var(--ink);outline:none}
.cd-search:focus{border-color:var(--champagne-line)}
.cd-kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.cd-kv-k{color:var(--ink-3);flex:0 0 auto}
.cd-kv-v{color:var(--ink);font-weight:600;text-align:right}

/* ============================================================
   MASTER INBOX polish + the FORCED CALL-LOCK
   ============================================================ */
/* tiny inline button (e.g. "Call now" on an inbox card) */
.btn.xs{padding:5px 10px;font-size:12px;border-radius:7px;min-height:0}
/* horizontally scrollable filter seg so 4 chips never clip on a phone */
.seg.seg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
.seg.seg-scroll button{white-space:nowrap;flex:0 0 auto}
.btn.cl-blitz-btn,.cl-blitz-btn{margin-bottom:11px;font-weight:800;background:linear-gradient(90deg,#0f7d4d,#16a34a);border:0;color:#fff;box-shadow:0 4px 16px rgba(15,125,77,.32);animation:clbreath 2.4s ease-in-out infinite}
@keyframes clbreath{0%,100%{box-shadow:0 4px 16px rgba(15,125,77,.32)}50%{box-shadow:0 6px 24px rgba(15,125,77,.5)}}
/* an unworked hot response gets a green spine + tint so it can't be ignored */
.feed .fitem.owe-call{box-shadow:inset 3px 0 0 var(--green);background:var(--green-bg)}
.feed .fitem .cl-call-one{margin-top:8px}
.inbox-manual{padding:0}
.inbox-manual summary{cursor:pointer;list-style:none;padding:13px 17px;font-size:13px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:7px}
.inbox-manual summary::-webkit-details-marker{display:none}
.inbox-manual summary svg{width:14px;height:14px}
.inbox-manual[open] summary{border-bottom:1px solid var(--line)}

/* full-screen lock: only the Call button or the shame button gets you out */
body.cl-run{overflow:hidden}
.cl-card{position:relative}
.cl-x{position:absolute;top:-4px;right:-4px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#cdd6cf;
  font-size:15px;line-height:1;cursor:pointer;z-index:3;transition:.15s}
.cl-x:hover{background:rgba(255,255,255,.16);color:#fff}
.cl-x:active{transform:scale(.92)}
.cl-card .cl-hud{padding-right:40px}   /* keep the combo pill clear of the ✕ */
.calllock{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9995;display:flex;align-items:center;justify-content:center;padding:20px;
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
  background:radial-gradient(circle at 50% 22%,#15321f,#0c0c0c 72%);
  animation:clin .22s ease-out}
@keyframes clin{from{opacity:0}to{opacity:1}}
.cl-card{width:100%;max-width:440px;text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;gap:10px;
  max-height:100%;overflow-y:auto}
.cl-pulse{font-size:54px;line-height:1;animation:clshake 1s ease-in-out infinite;filter:drop-shadow(0 6px 18px rgba(15,125,77,.6))}
@keyframes clshake{0%,100%{transform:rotate(-12deg) scale(1)}10%,30%,50%{transform:rotate(13deg) scale(1.08)}20%,40%{transform:rotate(-13deg) scale(1.08)}60%{transform:rotate(0) scale(1)}}
.cl-kicker{text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;font-weight:800;color:#7ee0a6}
.cl-name{font-size:27px;font-weight:900;letter-spacing:-.5px;line-height:1.12;margin-top:2px}
.cl-sub{font-size:13px;color:#b9c4bd;word-break:break-word}
.cl-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:2px}
.cl-msg{font-size:15px;line-height:1.5;color:#e9efe9;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:14px 16px;margin-top:6px;font-style:italic;max-width:100%}
.cl-phonewrap{width:100%;margin-top:6px;display:flex;flex-direction:column;align-items:stretch;gap:8px}
.cl-call{display:block;width:100%;background:linear-gradient(180deg,#15a85e,#0f7d4d);color:#fff;font-size:21px;font-weight:900;
  text-decoration:none;border-radius:16px;padding:19px 18px;box-shadow:0 10px 30px rgba(15,125,77,.55);
  animation:clbreath 2s ease-in-out infinite;transition:transform .08s}
.cl-call:active{transform:scale(.97)}
.cl-hint{font-size:12px;color:#9fb0a6}
.cl-nonum{font-size:13.5px;color:#e6b8b8;font-weight:600}
.cl-numin{width:100%;font-size:18px;text-align:center;border-radius:12px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);color:#fff;padding:13px 14px;outline:none}
.cl-numin::placeholder{color:#8a978d}
.cl-numin.shake-in{animation:clnumshake .4s}
@keyframes clnumshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.cl-skip{margin-top:14px;background:transparent;border:1px solid rgba(255,255,255,.18);color:#8a978d;font-size:12px;
  font-weight:600;line-height:1.4;border-radius:11px;padding:11px 14px;cursor:pointer;max-width:100%}
.cl-skip:hover{color:#cdd6cf;border-color:rgba(255,255,255,.3)}
.cl-skip:active{transform:scale(.98)}
/* the call-waiting tab badge is alarm-red so it nags */
.tabbar a .tb-badge.tb-call{background:#d23636}
.tabbar a .tb-badge.bumpfx{animation:badgepop .5s ease}
@keyframes badgepop{0%{transform:scale(1)}35%{transform:scale(1.6)}100%{transform:scale(1)}}

/* ============================================================
   RUN ENGINE — combo HUD, escalating juice, recap (the addiction loop)
   ============================================================ */
/* each new prospect "deals in" off the deck instead of a hard innerHTML swap */
.calllock .cl-card{animation:cldeal .26s cubic-bezier(.2,.8,.25,1)}
@keyframes cldeal{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
/* live HUD: queue progress + combo meter */
.cl-hud{width:100%;display:flex;align-items:center;gap:12px;margin-bottom:4px}
.cl-prog{flex:1;min-width:0}
.cl-prog .fbar{height:7px;border-radius:6px;background:rgba(255,255,255,.14);overflow:hidden;margin:0 0 4px}
.cl-prog .fbar i{display:block;height:100%;background:linear-gradient(90deg,#15a85e,#7ee0a6);border-radius:6px;transition:width .4s ease}
.cl-prog span{font-size:11px;color:#9fb0a6;font-family:var(--num)}
.cl-combo{flex:0 0 auto;font-size:13px;font-weight:800;color:#9fb0a6;padding:5px 11px;border-radius:14px;border:1px solid rgba(255,255,255,.16);white-space:nowrap}
.cl-combo.hot{color:#fff;background:linear-gradient(90deg,#d4533f,#e8b04b);border-color:transparent;box-shadow:0 3px 14px rgba(232,176,75,.4)}
.cl-combo.cl-combo-pop{animation:combopop .4s ease}
@keyframes combopop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.cl-combo.cl-combo-break{animation:clnumshake .4s;color:#ff8a8a;border-color:#ff8a8a}
.cl-telegraph{font-size:11.5px;color:#e8b04b;font-weight:700;margin:-2px 0 2px}
.cl-next{margin-top:12px;font-size:11px;color:#7a8a80;text-transform:uppercase;letter-spacing:.06em}
/* transient bonus banner over the lock */
.cl-bonus{position:absolute;top:18%;left:50%;transform:translateX(-50%);z-index:2;font-size:18px;font-weight:900;color:#fff;
  background:linear-gradient(90deg,#0f7d4d,#15a85e);padding:9px 20px;border-radius:22px;box-shadow:0 8px 28px rgba(0,0,0,.4);
  white-space:nowrap;animation:bonuspop 1.5s ease forwards}
.cl-bonus.pal-gold{background:linear-gradient(90deg,#e8b04b,#ffd76a);color:#3a2a06}
@keyframes bonuspop{0%{opacity:0;transform:translate(-50%,12px) scale(.8)}15%{opacity:1;transform:translate(-50%,0) scale(1.05)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-10px)}}
/* RUN COMPLETE recap */
.cl-recap .cl-recap-stats{display:flex;gap:10px;width:100%;margin:6px 0 4px}
.rc-stat{flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:13px 6px;text-align:center}
.rc-stat b{display:block;font-size:28px;font-weight:900;color:#fff;font-family:var(--num);line-height:1}
.rc-stat span{font-size:10.5px;color:#9fb0a6;text-transform:uppercase;letter-spacing:.05em}
.cl-recap-clean{color:#7ee0a6;font-weight:700;font-size:14px}
.cl-recap-dodge{color:#e8b04b;font-weight:700;font-size:14px}
.cl-recap-list{width:100%;max-height:34vh;overflow-y:auto;text-align:left;margin:2px 0 6px}
.cl-recap-list .rc-row{font-size:13px;color:#cdd6cf;padding:6px 4px;border-bottom:1px solid rgba(255,255,255,.07);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-recap-list .rc-row span{margin-right:6px}

/* ============================================================
   WORK HUB — one urgent number, one button, then the run
   ============================================================ */
.work-hero{text-align:center;padding:22px 18px 18px}
.work-hero .wh-num{margin-bottom:14px}
.work-hero .wh-num b{display:block;font-size:52px;font-weight:900;line-height:1;font-family:var(--num);color:var(--accent);letter-spacing:-1px}
.work-hero .wh-num span{font-size:13.5px;color:var(--ink-3);font-weight:600}
.work-lastrun{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 16px;font-size:12.5px;color:var(--ink-2)}
.work-lastrun b{font-family:var(--num);color:var(--ink)}
.work-lastrun .wl-beat{color:var(--accent-2);font-weight:700;cursor:pointer;white-space:nowrap;text-decoration:underline}

/* sidebar Log out button (visible in the drawer on mobile, footer on desktop) */
.side-logout{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:7px;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:transparent;color:#9fb0c6;font-size:12.5px;font-weight:600;cursor:pointer;transition:.14s;font-family:inherit}
.side-logout:hover{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.22)}
.side-logout svg{width:15px;height:15px}

/* ============================================================
   ARENA — dark game-HUD skin. Loads LAST so this :root wins and
   flips the whole app from a light CRM into a dark, neon, dopamine
   game surface: deep charcoal canvas + ambient glow, money-green
   "GO" actions, champagne-gold XP, glowing panels + HUD, motion.
   ============================================================ */
:root{
  /* surfaces — deep charcoal, layered */
  --bg:#0a0c0e; --card:#15191d; --card-2:#1b2025; --hover:#232a31;
  /* ink ramp — near-white down to muted */
  --ink:#f1f5f3; --ink-2:#bbc4be; --ink-3:#8b938d; --ink-4:#5c645e;
  /* hairlines on dark */
  --line:#232a30; --line-2:#2d353c; --line-3:#3b444c;
  /* PRIMARY = neon money-green (was ink-black; invisible on dark) */
  --accent:#16a34a; --accent-2:#22c55e;
  --accent-tint:rgba(34,197,94,.13); --accent-soft:rgba(34,197,94,.26);
  /* champagne kept for XP / level / numerals, brightened for dark */
  --champagne:#f6c560; --champagne-line:#caa24e; --gold-ink:#f4cd74; --champagne-ico:#f0c674;
  /* sidebar / tabbar — blackest */
  --navy:#0c0f11; --navy-2:#141a1e; --navy-line:#000; --side:#0a0d0f;
  /* status — neon on dark */
  --green:#22c55e; --teal:#16c0ad; --blue:#4d8bff; --purple:#a07bff;
  --orange:#ff7a3c; --red:#ff5252; --gray:#8a93a0; --slate:#8a93a0;
  --violet:#a07bff; --amber:#ffb627;
  /* soft-badge backgrounds — translucent tints (text re-brightened below) */
  --green-bg:rgba(34,197,94,.16); --blue-bg:rgba(77,139,255,.16); --purple-bg:rgba(160,123,255,.16);
  --teal-bg:rgba(22,192,173,.16); --amber-bg:rgba(255,182,39,.17); --red-bg:rgba(255,82,82,.16);
  --violet-bg:rgba(160,123,255,.16); --slate-bg:rgba(138,147,160,.16);
  --ring:0 0 0 3px rgba(34,197,94,.4);
  --sh:0 10px 26px -12px rgba(0,0,0,.7); --sh-lg:0 30px 70px -20px rgba(0,0,0,.8); --sh-sm:0 2px 10px rgba(0,0,0,.55);
}
/* ambient arena glow behind the scrolling content */
.content{background:
  radial-gradient(1100px 600px at 100% -8%, rgba(34,197,94,.09), transparent 60%),
  radial-gradient(900px 600px at -10% 105%, rgba(246,197,96,.06), transparent 55%),
  var(--bg) !important;}
body{background:var(--bg)}

/* badge text re-brightened for dark tints */
.b-green{color:#5ee08b} .b-amber{color:#ffcf6b} .b-red{color:#ff8f8f} .b-blue{color:#8fb6ff}
.b-teal{color:#5fded2} .b-violet{color:#c4b0ff} .b-slate{color:#b3bcc6}

/* buttons → tactile + glowing */
.btn{background:var(--card-2);border-color:var(--line-2);color:var(--ink-2)}
.btn:hover{background:var(--hover);color:var(--ink);border-color:var(--line-3)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-3)}
.btn.ghost:hover{background:var(--hover);color:var(--ink)}
.btn.primary{background:linear-gradient(180deg,#22c55e,#16a34a);border:0;color:#06140b;font-weight:800;
  box-shadow:0 6px 20px -6px rgba(34,197,94,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.primary:hover{filter:brightness(1.08)}

/* panels / cards → dark glass with a top sheen + hover lift */
.panel{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 40%),var(--card);
  border:1px solid var(--line);box-shadow:var(--sh)}
.kpi{background:var(--card);border:1px solid var(--line)}
.kpi:hover{border-color:var(--accent);box-shadow:0 0 0 1px rgba(34,197,94,.25),var(--sh);transform:translateY(-2px)}
.kpi .val{color:var(--ink)}
.kpis .kpi:first-child .val{color:var(--gold-ink);text-shadow:0 0 18px rgba(246,197,96,.35)}
.kpi .ic{background:var(--card-2);border-color:var(--line-2);color:var(--champagne-ico)}

/* inputs on dark */
input,select,textarea,.cd-search,.crm-search input,.crm-search select{
  background:var(--card-2)!important;border-color:var(--line-2)!important;color:var(--ink)!important}
input::placeholder,textarea::placeholder{color:var(--ink-4)}
input:focus,select:focus,textarea:focus{border-color:var(--accent)!important;box-shadow:var(--ring)}

/* segmented control */
.seg{background:var(--card-2);border-color:var(--line-2)}
.seg button{color:var(--ink-3)}
.seg button.on{background:var(--accent-tint);color:var(--accent-2);box-shadow:inset 0 0 0 1px rgba(34,197,94,.4)}

/* modal on dark */
.modal{background:var(--card);border:1px solid var(--line-2);box-shadow:var(--sh-lg)}

/* bottom tabbar → glowing active tab */
.tabbar a{color:#6f7a74}
.tabbar a.active{color:#fff}
.tabbar a.active svg{filter:drop-shadow(0 0 8px rgba(34,197,94,.9));color:var(--accent-2)}
.tabbar a.active::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:30px;height:3px;border-radius:0 0 4px 4px;background:var(--accent-2);box-shadow:0 0 10px rgba(34,197,94,.9)}

/* TODAY hero → game medallion + shimmering XP bar */
.game-hero{background:
  radial-gradient(600px 300px at 90% -20%, rgba(34,197,94,.18), transparent 60%),
  linear-gradient(125deg,#0e1614 0%,#15191d 55%,#1c1606 100%)!important;
  border:1px solid var(--line-2)!important;box-shadow:var(--sh),0 0 50px -20px rgba(34,197,94,.4)!important}
.gh-num{background:linear-gradient(150deg,#ffe08a,#f6c560);box-shadow:0 0 22px rgba(246,197,96,.55),inset 0 1px 0 rgba(255,255,255,.5)}
.gh-title{text-shadow:0 0 16px rgba(246,197,96,.25)}
.xpbar{background:rgba(255,255,255,.1);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.xpbar i{background:linear-gradient(90deg,#f6c560,#ffe08a);box-shadow:0 0 14px rgba(246,197,96,.7);position:relative;overflow:hidden}
.xpbar i::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);
  transform:translateX(-120%);animation:xpshimmer 2.6s ease-in-out infinite}
@keyframes xpshimmer{0%{transform:translateX(-120%)}55%,100%{transform:translateX(220%)}}
.gs-big{text-shadow:0 0 14px rgba(34,197,94,.3)}

/* xp chip (top bar) → glowing gold medallion */
.xp-chip{background:var(--card-2);border-color:var(--line-2)}
.xp-chip .xc-lvl{background:linear-gradient(150deg,#ffe08a,#f6c560);box-shadow:0 0 14px rgba(246,197,96,.6)}

/* fix hardcoded-light components on dark */
.streak-warn{background:linear-gradient(90deg,rgba(255,140,40,.16),rgba(255,182,39,.12))!important;
  border:1px solid rgba(255,140,40,.4)!important;color:#ffcf9e!important}
.hbadge.pass{background:var(--green-bg);color:#5ee08b} .hbadge.warn{background:var(--amber-bg);color:#ffcf6b} .hbadge.fail{background:var(--red-bg);color:#ff8f8f}
.badge-tile{background:var(--card-2);border-color:var(--line)}
.badge-tile.got{background:linear-gradient(180deg,rgba(246,197,96,.18),rgba(246,197,96,.06))!important;border-color:rgba(246,197,96,.5)!important;box-shadow:0 0 18px -6px rgba(246,197,96,.5)}
.work-hero .wh-num b{color:var(--accent-2);text-shadow:0 0 26px rgba(34,197,94,.55)}

/* thin dark scrollbars */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--line-3);border-radius:6px}
*::-webkit-scrollbar-track{background:transparent}

/* ============================================================
   MOTION — the juice. Stagger-in, level-up takeover, coin rain,
   tactile feedback. All transform/opacity; honors reduced-motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  /* panels deal in, lightly staggered, each time a screen renders */
  .view.active .stack > *{animation:panelIn .34s cubic-bezier(.2,.8,.2,1) both}
  .view.active .stack > *:nth-child(2){animation-delay:.05s}
  .view.active .stack > *:nth-child(3){animation-delay:.10s}
  .view.active .stack > *:nth-child(4){animation-delay:.15s}
  .view.active .stack > *:nth-child(n+5){animation-delay:.19s}
  .kpis > *{animation:panelIn .34s cubic-bezier(.2,.8,.2,1) both}
  .kpis > *:nth-child(2){animation-delay:.04s} .kpis > *:nth-child(3){animation-delay:.08s}
  .kpis > *:nth-child(4){animation-delay:.12s} .kpis > *:nth-child(5){animation-delay:.16s}
}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* tactile press on everything clickable */
.btn:active,.oc-btn:active,.dd-chip:active,.seg button:active,.kpi-click:active,.deal-card:active,.fitem:active,.tabbar a:active{transform:scale(.97)}

/* coin rain — the money moment */
.coinrain{position:fixed;inset:0;pointer-events:none;z-index:10001;overflow:hidden}
.coinrain i{position:absolute;top:-9vh;font-style:normal;animation:coinfall linear forwards;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}
@keyframes coinfall{to{transform:translateY(120vh) rotate(560deg)}}

/* LEVEL-UP takeover — full-screen rank reveal */
.levelup{position:fixed;inset:0;z-index:10002;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 44%,rgba(18,44,28,.94),rgba(0,0,0,.97));animation:lufade .3s ease}
.levelup.out{animation:lufadeout .5s ease forwards}
@keyframes lufade{from{opacity:0}to{opacity:1}} @keyframes lufadeout{to{opacity:0}}
.lu-rays{position:absolute;width:200vmax;height:200vmax;opacity:.5;
  background:repeating-conic-gradient(from 0deg,rgba(246,197,96,.16) 0deg 7deg,transparent 7deg 15deg);animation:luspin 10s linear infinite}
@keyframes luspin{to{transform:rotate(360deg)}}
.lu-card{position:relative;text-align:center;animation:lupop .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes lupop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.lu-kick{color:#7ee0a6;font-weight:900;letter-spacing:.32em;font-size:14px;margin-bottom:16px}
.lu-medal{width:132px;height:132px;margin:0 auto;border-radius:34px;display:grid;place-items:center;
  font-family:var(--num);font-size:62px;font-weight:900;color:#3a2a06;background:linear-gradient(150deg,#ffe08a,#f6c560);
  box-shadow:0 0 70px rgba(246,197,96,.85),inset 0 2px 0 rgba(255,255,255,.6);animation:lumedal 2.4s ease-in-out infinite}
@keyframes lumedal{50%{transform:scale(1.06)}}
.lu-title{margin-top:18px;font-size:27px;font-weight:900;color:#fff;letter-spacing:-.5px;text-shadow:0 0 26px rgba(246,197,96,.55)}
.lu-sub{margin-top:10px;font-size:12px;color:#8b938d;letter-spacing:.05em}

/* team credentials list (Users screen → Add my whole team) */
.cred-list{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.cred-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--card-2)}
.cred-who{font-weight:700;color:var(--ink)}
.cred-who small{color:var(--ink-3);font-weight:500;font-family:var(--num)}
.cred-pw{font-family:var(--mono,monospace);font-size:14px;font-weight:700;color:var(--gold-ink);background:rgba(246,197,96,.12);
  border:1px solid var(--champagne-line);border-radius:8px;padding:5px 12px;user-select:all}

/* ============================================================
   READABILITY — fix every old light-theme hardcoded color that
   went invisible/low-contrast on dark (from the contrast audit),
   + crisp HD text rendering. This block loads LAST so it wins.
   ============================================================ */
/* HD / crisp text everywhere */
body,input,select,textarea,button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* CRITICAL: toast used background:var(--ink) → flipped to near-white → invisible */
.toast{background:var(--card-2);color:var(--ink);border:1px solid var(--line-2)}
/* toasts were rendering BEHIND the bottom tab bar on mobile — lift above it */
.toast-wrap{z-index:9000}
@media (max-width:820px){.toast-wrap{bottom:84px}}

/* note callouts: dark olive/green text on translucent tints → bright */
.note{background:var(--amber-bg);border-color:rgba(255,182,39,.35);color:#ffcf6b}
.note.ok{background:var(--green-bg);border-color:rgba(34,197,94,.35);color:#5ee08b}

/* positive money-green (#177e4e) everywhere → bright green */
.fi.money,.field b.pos,.acct-row b.pos,.cc-stats b.pos,.qd-econ b.pos,.qd-annual b.pos,
.mc.marg,.lfoot .marg,.cc-hist .h-in,.tl-row.h-in .tl-t,.wl-banner.clear,.send-switch.on{color:#5ee08b}
.send-switch.on{border-color:rgba(34,197,94,.4)} .send-switch.on .dot{background:var(--green)}
.oc-btn.hot{background:var(--green-bg);border-color:rgba(34,197,94,.4);color:#5ee08b}

/* alert reds (#b4322a) → bright red */
.mode-chip.armed,.send-switch.off,.cc-due.over{color:#ff8f8f}
.mode-chip.armed,.send-switch.off{border-color:rgba(255,82,82,.4)}
.send-switch.off .dot,.mode-chip.armed .dot{background:var(--red)}

/* amber/gold hints (#9a6914 / #7a4f18 / #86600f) → bright gold */
.cc-due,.wl-banner{color:#ffcf6b}

/* the big green Call button — match the call-lock (readable white on a deeper green) */
.call-btn{background:linear-gradient(180deg,#15a85e,#0f7d4d);color:#fff}

/* tiny hints that were too dim on dark (--ink-4) → one step brighter */
.kan-empty,.dc-addv,.dc-ago{color:var(--ink-3)}

/* ── TRIAGE cards: review a reply → dispatch a call or kill it ── */
.triage-card{padding:13px 15px}
.tg-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:7px}
.tg-who{font-size:14.5px;font-weight:800;cursor:pointer}
.tg-who:hover{color:var(--accent-2);text-decoration:underline}
.tg-ph{margin-left:auto;font-family:var(--num);font-size:12px;font-weight:700;color:#5ee08b}
.tg-noph{margin-left:auto;font-size:11px;color:var(--ink-4)}
.tg-msg{font-size:12.5px;color:var(--ink-2);line-height:1.45;cursor:pointer;margin-bottom:11px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tg-acts{display:flex;gap:9px}
.tg-acts .btn{flex:1;justify-content:center;min-height:42px;font-size:14px}
.tg-acts .tg-irr{color:var(--ink-2)}

/* ============================================================
   Marketing Channels board
   ============================================================ */
.mk-exist-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 14px;font-size:12.5px;color:var(--ink-3)}
.mk-exist-lbl{font-weight:650;color:var(--ink-2)}
.mk-exist{background:var(--green-bg);color:var(--green);border-radius:999px;padding:3px 10px;font-weight:600}
.mk-exist b{text-transform:uppercase;font-size:10px;letter-spacing:.4px;opacity:.8;margin-left:3px}

.mk-actions{margin-bottom:16px}
.mk-act-list{display:flex;flex-direction:column;gap:8px;padding:4px 14px 14px}
.mk-act{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--card-2);
  border:1px solid var(--line);border-radius:12px;padding:11px 13px;cursor:pointer;transition:.15s}
.mk-act:hover{background:var(--hover);border-color:var(--line-2)}
.mk-act-emoji{font-size:20px;flex:none}
.mk-act-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mk-act-body b{font-size:14px;color:var(--ink)}
.mk-act-body span{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-act-go{color:var(--ink-4);font-size:18px;font-weight:700;flex:none}

.mk-lane{margin-bottom:22px}
.mk-lane-h{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.mk-lane-emoji{font-size:22px}
.mk-lane-h h3{margin:0;font-size:16px;letter-spacing:.2px}
.mk-lane-sub{font-size:12px;color:var(--ink-3);margin-top:1px}
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:11px}

.mk-card{display:flex;flex-direction:column;gap:7px;text-align:left;background:var(--card);
  border:1px solid var(--line);border-radius:15px;padding:14px;cursor:pointer;transition:.16s;box-shadow:var(--sh-sm)}
.mk-card:hover{border-color:var(--champagne-line);transform:translateY(-2px);box-shadow:var(--sh)}
.mk-card-top{display:flex;align-items:center;justify-content:space-between}
.mk-emoji{font-size:24px}
.mk-name{font-weight:700;font-size:14.5px;line-height:1.25;color:var(--ink)}
.mk-tag{font-size:12px;color:var(--ink-3);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mk-prog{display:flex;align-items:center;gap:8px;margin-top:2px}
.mk-bar{flex:1;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.mk-bar i{display:block;height:100%;border-radius:99px;background:var(--green);transition:width .3s}
.mk-bar-n{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;flex:none}
.mk-foot{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;margin-top:1px}
.mk-leads{color:var(--green);font-weight:650}.mk-leads.dim{color:var(--ink-4);font-weight:500}
.mk-owner{background:var(--slate-bg);color:var(--ink-2);border-radius:999px;padding:2px 8px;font-weight:600}

.mk-pill{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;border-radius:999px;padding:3px 9px}
.mk-s-idle{background:var(--slate-bg);color:var(--ink-3)}
.mk-s-setup{background:var(--amber-bg);color:var(--orange)}
.mk-s-live{background:var(--green-bg);color:var(--green)}
.mk-s-paused{background:var(--red-bg);color:var(--red)}

/* ---- channel detail drawer ---- */
.mk-detail{display:flex;flex-direction:column;gap:15px}
.mk-d-head{display:flex;align-items:flex-start;gap:12px}
.mk-d-emoji{font-size:34px;flex:none;line-height:1}
.mk-d-title{flex:1;min-width:0}
.mk-d-title h2{margin:0 0 3px;font-size:20px}
.mk-d-head .x{flex:none;background:none;border:0;cursor:pointer;color:var(--ink-3);padding:4px}
.mk-d-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.mk-ctl{display:flex;flex-direction:column;gap:4px}
.mk-ctl label{font-size:11px;font-weight:650;color:var(--ink-3);text-transform:uppercase;letter-spacing:.3px}
.mk-status-sel,.mk-owner-sel{padding:8px 11px;border:1px solid var(--line-2);border-radius:9px;background:var(--card-2);color:var(--ink);font:inherit;font-size:13px}
.mk-d-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.mk-chip{font-size:11.5px;background:var(--card-2);border:1px solid var(--line);border-radius:999px;padding:3px 9px;color:var(--ink-2)}
.mk-chip b{color:var(--ink);text-transform:capitalize}
.mk-chip.mk-hi{background:var(--green-bg);border-color:transparent;color:var(--green)}
.mk-chip.mk-md{background:var(--amber-bg);border-color:transparent;color:var(--orange)}
.mk-chip.mk-auto{background:var(--blue-bg);border-color:transparent;color:var(--blue);text-transform:capitalize}

.mk-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.mk-metrics>div{background:var(--card-2);border:1px solid var(--line);border-radius:11px;padding:11px 8px;text-align:center}
.mk-metrics b{display:block;font-size:19px;color:var(--ink);font-variant-numeric:tabular-nums}
.mk-metrics span{font-size:11px;color:var(--ink-3)}

.mk-tool-h{font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:7px}
.mk-why p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.mk-firstweek{background:var(--accent-tint);border:1px solid var(--champagne-line);border-radius:12px;padding:11px 13px;font-size:13.5px;line-height:1.5;color:var(--ink)}
.mk-kpis ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
.mk-kpis li{font-size:13px;color:var(--ink-2)}

.mk-playbook{display:flex;flex-direction:column;gap:7px}
.mk-task{display:flex;gap:10px;align-items:flex-start;background:var(--card-2);border:1px solid var(--line);
  border-radius:11px;padding:11px 12px;cursor:pointer;transition:.14s}
.mk-task:hover{border-color:var(--line-2)}
.mk-task input{margin-top:2px;flex:none;width:17px;height:17px;accent-color:var(--green)}
.mk-task-body{display:flex;flex-direction:column;gap:2px}
.mk-task-body b{font-size:13.5px;color:var(--ink);font-weight:650}
.mk-task-body span{font-size:12px;color:var(--ink-3);line-height:1.45}
.mk-task.done b{text-decoration:line-through;color:var(--ink-4)}
.mk-task.done{opacity:.7}

.mk-tools{display:flex;flex-direction:column;gap:12px}
.mk-tool{background:var(--card-2);border:1px solid var(--line);border-radius:13px;padding:13px}
.mk-linkrow{display:flex;gap:7px;margin-bottom:7px}
.mk-linkrow input{flex:1;min-width:0;padding:9px 11px;border:1px solid var(--line-2);border-radius:9px;background:var(--card);color:var(--ink);font:inherit;font-size:12.5px}
.mk-logrow{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:7px}
.btn-sm{padding:9px 13px;border:1px solid var(--line-2);border-radius:9px;background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.14s}
.btn-sm:hover{background:var(--hover)}
.btn-sm.primary{background:var(--green);border-color:var(--green);color:#fff}
.mk-hint{font-size:11.5px;color:var(--ink-3);line-height:1.5}
.mk-codes{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.mk-code{display:flex;align-items:center;gap:8px;font-size:12.5px;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:7px 10px}
.mk-code b{font-family:ui-monospace,Menlo,monospace;color:var(--green)}
.mk-code span{flex:1;color:var(--ink-3)}
.mk-code em{font-style:normal;color:var(--ink-2);font-weight:600}
.mk-notesbox textarea{width:100%;min-height:70px;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--card-2);color:var(--ink);font:inherit;font-size:13px;resize:vertical;margin-bottom:8px}
@media (max-width:600px){
  .mk-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
  .mk-metrics{grid-template-columns:repeat(2,1fr)}
}

/* Reports — winning campaign row */
.tbl tr.rep-winner{background:rgba(246,197,96,.10)}
.tbl tr.rep-winner td{border-color:rgba(246,197,96,.3)}
.tbl-cards tr.rep-winner{border-color:var(--champagne-line)!important;box-shadow:0 0 16px -4px rgba(246,197,96,.4)}

/* Reports — campaign leaderboard rows */
.rep-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.rep-row:hover{background:var(--hover)}
.rep-row.rep-winner{background:rgba(246,197,96,.08);box-shadow:inset 3px 0 0 var(--champagne)}
.rep-rank{flex:0 0 26px;text-align:center;font-family:var(--num);font-weight:800;font-size:16px;color:var(--ink-3)}
.rep-main{flex:1;min-width:0}
.rep-name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rep-stats{font-size:12px;color:var(--ink-3);margin-top:3px}
.rep-score{flex:0 0 auto;text-align:center}
.rep-score b{display:block;font-family:var(--num);font-size:20px;font-weight:800;color:var(--gold-ink)}
.rep-score span{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-4)}

/* ============ Campaigns — clean, fast card grid (redesign) ============ */
.camp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
@media(max-width:560px){.camp-grid{grid-template-columns:1fr}}
.camp-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 15px;
  display:flex;flex-direction:column;gap:8px;transition:border-color .15s,transform .15s,box-shadow .15s}
.camp-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.28)}
.camp-card.cc-paused{opacity:.62}
.cc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.cc-name{min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cc-name a{font-weight:700;color:var(--ink);cursor:pointer;font-size:14.5px;line-height:1.25;word-break:break-word}
.cc-name a:hover{color:var(--accent-2)}
.cc-name .chip{font-size:9.5px;padding:2px 7px;background:var(--accent-tint,rgba(34,197,94,.14));color:var(--accent-2);border-radius:20px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.cc-sub{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-bar{height:8px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden}
.cc-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .5s ease}
.cc-barmeta{font-size:10.5px;color:var(--ink-3);margin-top:-2px}
.cc-stats{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--ink-2);padding-top:1px}
.cc-stats .cc-rep{color:var(--accent-2);font-weight:700}
.cc-actions{display:flex;gap:8px;margin-top:4px}
.cc-actions .btn{flex:1;justify-content:center}
.camp-ctrl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px !important}
.camp-search{flex:1;min-width:160px;background:rgba(255,255,255,.05);border:1px solid var(--line-2);
  border-radius:10px;padding:9px 13px;color:var(--ink);font-size:13px;outline:none}
.camp-search:focus{border-color:var(--accent)}
.sheet-acts{display:flex;flex-direction:column;gap:7px}
.sheet-acts button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink);
  padding:13px 15px;border-radius:11px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.12s}
.sheet-acts button svg,.sheet-acts button i{width:16px;height:16px;flex-shrink:0}
.sheet-acts button:hover{background:var(--hover);border-color:var(--line-3)}
.sheet-acts button:active{transform:scale(.99)}
.sheet-acts button.danger{color:var(--red);border-color:rgba(239,68,68,.22)}
.sheet-acts button.danger:hover{background:rgba(239,68,68,.1)}

/* stall alarm state on the global send chip — should be sending but is NOT */
.send-switch.stall{color:#f59e0b;border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.1);animation:stallpulse 1.6s ease-in-out infinite}
.send-switch.stall .dot{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.send-switch.stall .act{background:#f59e0b;color:#141414}
@keyframes stallpulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,0)}50%{box-shadow:0 0 0 5px rgba(245,158,11,.14)}}
/* archived campaign chip + broker filter select */
.spill.sp-arch{background:rgba(148,163,184,.14);color:#94a3b8;border:1px solid rgba(148,163,184,.25)}
.camp-broker{background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:10px;
  padding:9px 11px;color:var(--ink);font-size:12.5px;outline:none;min-width:130px}
.camp-broker:focus{border-color:var(--accent)}

/* stale-deal pressure strip on the pipeline board */
.stale-strip{margin:0 0 10px;padding:11px 14px;border-radius:11px;font-size:12.5px;color:#f5c169;
  background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.3)}
/* call-run: secondary actions + snooze picker */
.cl-secondary{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.cl-snoozerow{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px}
.cl-snoozerow button{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#cdd6cf;
  font-size:12px;padding:8px 13px;border-radius:9px;cursor:pointer}
.cl-snoozerow button:hover{color:#fff;border-color:rgba(255,255,255,.35)}
.cl-snoozerow input{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#cdd6cf;
  font-size:12px;padding:7px 9px;border-radius:9px;color-scheme:dark}
/* mailbox error badge on the accounts table */
.acct-err{margin-top:5px;font-size:10.5px;color:var(--red);max-width:230px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* invite-by-link (Users screen) */
.inv-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.inv-row:last-child{border-bottom:none}
.inv-meta b{font-size:13px}
.inv-actions{display:flex;gap:7px;flex-shrink:0}
.inv-linkbox{display:flex;gap:8px;margin-top:10px}
.inv-linkbox input{flex:1;min-width:0;background:var(--panel-2,#11201a);border:1px solid var(--line-2);border-radius:8px;
  padding:9px 11px;color:var(--ink,#dfe9e2);font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
/* join / create-account page */
.join-badge{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;padding:7px 12px;border-radius:9px;
  font-size:12.5px;background:rgba(94,224,139,.1);border:1px solid rgba(94,224,139,.3);color:#bfeccd}

/* duplicate review modal — company groups with per-person checkboxes */
.dupe-list{max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:4px 0}
.dupe-group{border-bottom:1px solid var(--line);padding:6px 12px 8px}
.dupe-group:last-child{border-bottom:none}
.dupe-co{display:flex;align-items:center;gap:9px;padding:6px 0;cursor:pointer;font-size:13px}
.dupe-person{display:flex;align-items:center;gap:9px;padding:4px 0 4px 26px;cursor:pointer;font-size:12px}
.dupe-person .dp-mail{color:var(--ink-2,#c8d2ca)}
.dupe-person .dp-meta{margin-left:auto;color:var(--ink-3,#8b968d);font-size:11px;text-align:right}
.dp-warn{color:var(--red,#e2574f)}
.dupe-co input,.dupe-person input{accent-color:var(--green,#37b96b)}

/* power dialer overlay */
.pd-status{margin:14px 0 4px;font-size:16px;font-weight:700;color:#eaf3ec}
.pd-queuemeta{font-size:11.5px;color:#93a29a;margin-bottom:12px}
.pd-dispo{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;width:100%}
.pd-dispo button{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#eef4ef;
  font-size:14px;font-weight:600;padding:15px 12px;border-radius:12px;cursor:pointer;min-height:52px}
.pd-dispo button:hover{border-color:rgba(94,224,139,.5);color:#fff;background:rgba(255,255,255,.11)}

/* ============================================================
   POWER DIALER v2 — multi-line board (.cl-board) + launcher (.dl-*)
   ============================================================ */
.calllock.cl-board{justify-content:center;align-items:flex-start;overflow-y:auto;padding-top:4vh}
.calllock.cl-board .cl-card{width:100%;max-width:760px;text-align:left;align-items:stretch;gap:14px;margin:0}
.pd-head{display:flex;align-items:center;gap:10px;width:100%}
.pd-head .spacer{flex:1}
.pd-pause{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#dfe9e2;
  border-radius:10px;font-size:12px;font-weight:700;padding:7px 12px;cursor:pointer}
.pd-pause:hover{border-color:rgba(94,224,139,.5);color:#fff}
.pd-conn{font-size:13.5px;font-weight:600;color:#ffd88a;background:rgba(255,196,66,.08);
  border:1px solid rgba(255,196,66,.25);border-radius:12px;padding:10px 14px}
.pd-stats{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pd-stats::-webkit-scrollbar{display:none}
.pd-stat{flex:1;min-width:74px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:9px 10px;text-align:center}
.pd-stat b{display:block;font-size:19px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.pd-stat b.bad{color:#ff9d9d}
.pd-stat span{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#93a29a}
.pd-pace{font-size:12px;font-weight:700;color:#8fd8ac}
.pd-pace.governed{color:#ffb86b}
/* line tiles */
.pd-lines{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;min-height:0}
.pd-tile{display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:12px;
  padding:10px 12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);
  transition:opacity .9s,border-color .2s}
.pd-tile-id{min-width:0}
.pd-tile-id b{display:block;font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-tile-id span{display:block;font-size:10.5px;color:#93a29a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-tile-state{font-size:10.5px;font-weight:800;white-space:nowrap;color:#aab7ae}
.pd-tile.st-dialing{border-color:rgba(255,255,255,.14)}
.pd-tile.st-dialing .pd-tile-state{animation:pdblink 1.2s ease-in-out infinite}
.pd-tile.st-ringing{border-color:rgba(255,196,66,.45)}
.pd-tile.st-ringing .pd-tile-state{color:#ffd88a}
.pd-tile.st-amd_pending{border-color:rgba(178,140,255,.45)}
.pd-tile.st-amd_pending .pd-tile-state{color:#cdb6ff}
.pd-tile.st-gone{opacity:0}
@keyframes pdblink{0%,100%{opacity:.5}50%{opacity:1}}
/* bridged hero */
.pd-bridged{border:1.5px solid rgba(94,224,139,.6);border-radius:18px;padding:18px 20px;
  background:radial-gradient(120% 140% at 0% 0%,rgba(34,197,94,.22),transparent 60%),linear-gradient(180deg,rgba(21,168,94,.14),rgba(21,168,94,.04));
  box-shadow:0 10px 34px rgba(15,125,77,.42);animation:pdbridgein .3s cubic-bezier(.2,.8,.25,1)}
@keyframes pdbridgein{from{transform:scale(.97);opacity:.4}to{transform:scale(1);opacity:1}}
.pd-br-top{display:flex;align-items:center;gap:11px}
.pd-br-top b{font-size:25px;font-weight:900;color:#fff;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.3px}
.pd-live-dot{width:10px;height:10px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:pddot 1.6s infinite}
@keyframes pddot{70%{box-shadow:0 0 0 9px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.pd-br-timer{font-variant-numeric:tabular-nums;font-weight:800;color:#8fd8ac}
.pd-br-sub{font-size:12.5px;color:#b9c4bd;margin-top:3px}
.pd-br-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.pd-br-why{font-size:12px;color:#8fd8ac;font-weight:700;margin-top:7px}
.pd-br-snip{font-size:13.5px;line-height:1.45;color:#e9efe9;font-style:italic;background:rgba(255,255,255,.06);
  border-radius:10px;padding:9px 12px;margin-top:8px}
.pd-br-last{font-size:11.5px;color:#93a29a;margin-top:6px}
/* bridged-call actions: small secondary chips + a big unmissable End Call */
.pd-actions-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}
.pd-chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#e9efe9;
  border-radius:999px;font-size:12.5px;font-weight:600;padding:9px 14px;cursor:pointer;white-space:nowrap;transition:border-color .12s,background .12s}
.pd-chip:hover{border-color:rgba(94,224,139,.5);background:rgba(255,255,255,.13)}
.pd-chip.on{background:rgba(255,196,66,.2);border-color:rgba(255,196,66,.5);color:#ffd88a}
.pd-endcall{display:block;width:100%;margin-top:12px;background:linear-gradient(180deg,#e5484d,#c0343a);
  border:none;color:#fff;font-size:17px;font-weight:900;border-radius:14px;padding:16px;cursor:pointer;
  box-shadow:0 8px 22px rgba(200,50,55,.4);transition:transform .08s,filter .12s}
.pd-endcall:hover{filter:brightness(1.06)}
.pd-endcall:active{transform:scale(.98)}
/* legacy row kept for any old references */
.pd-callctl{display:flex;gap:8px;align-items:center;margin-top:12px}
.pd-callctl .spacer{flex:1}
/* disposition form — prominent so it's never missed after a call */
.pd-dispoform{border:2px solid rgba(94,224,139,.5);border-radius:16px;padding:16px;
  background:linear-gradient(180deg,rgba(21,168,94,.1),rgba(255,255,255,.03));
  box-shadow:0 6px 20px rgba(0,0,0,.3);animation:pddispoin .3s ease-out}
@keyframes pddispoin{from{transform:translateY(8px);opacity:.3}to{transform:translateY(0);opacity:1}}
.pd-df-head{font-size:15px;font-weight:700;color:#fff;margin-bottom:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pd-df-dur{font-variant-numeric:tabular-nums;color:#8fd8ac;font-weight:800}
.pd-dispoform .pd-dispo{max-width:none;grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.pd-dispo button.on{border-color:rgba(94,224,139,.7);color:#fff;background:rgba(94,224,139,.12)}
.pd-cbrow{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:10px;font-size:12px;color:#b9c4bd}
.pd-cbrow input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:9px;padding:6px 8px;font-size:12px}
.pd-cbrow .btn{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);color:#e9efe9}
.pd-notes{width:100%;margin-top:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  color:#fff;border-radius:11px;padding:10px 12px;font-size:13.5px;resize:vertical;outline:none}
.pd-notes::placeholder{color:#8a978d}
/* recap */
.pd-recap{display:flex;flex-direction:column;gap:14px;align-items:stretch;text-align:center}
.pd-recap-stats{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pd-recap-stats>div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 14px;min-width:86px}
.pd-recap-stats b{display:block;font-size:22px;font-weight:900;color:#fff}
.pd-recap-stats span{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:#93a29a}
.pd-recap-bars{display:flex;flex-direction:column;gap:6px;text-align:left}
.pd-rb{display:grid;grid-template-columns:130px 1fr 30px;gap:9px;align-items:center;font-size:12.5px;color:#dfe9e2}
.pd-rb i{display:block;height:9px;border-radius:5px;background:linear-gradient(90deg,#15a85e,#7ee0a6);min-width:3px}
.pd-rb b{text-align:right;color:#fff}
.pd-recap-note{font-size:12.5px;color:#ffd88a}
/* week stats strip (Calls screen + Today) */
.pd-weekstats{display:flex;gap:8px;padding:14px;overflow-x:auto}
.pd-weekstats>div{flex:1;min-width:80px;text-align:center;background:var(--card-2,#faf8f4);border:1px solid var(--line,#e3e8e3);border-radius:12px;padding:10px}
.pd-weekstats b{display:block;font-size:18px;font-weight:900}
.pd-weekstats span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.pd-weekstats .bad b{color:var(--red)}
/* calls history rows */
.call-row{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line,#e8ece8);cursor:pointer}
.call-row:last-child{border-bottom:none}
.call-row:hover{background:var(--hover,#f1ede6)}
.cr-main{min-width:0}
.cr-notes{font-size:12px;color:var(--ink-3);margin-top:3px;font-style:italic}
.cr-side{text-align:right;flex-shrink:0}
.cr-side .badge{margin-left:4px}
/* launcher */
.dl-panel.off .dl-modes,.dl-panel.off .dl-lines,.dl-panel.off .dl-opts{opacity:.55;pointer-events:none}
.dl-body{padding:0 14px 14px;display:flex;flex-direction:column;gap:11px}
.dl-src{display:flex;align-items:center}
.dl-src .dl-edit{margin-left:auto;border:1px solid var(--line,#dfe5df);background:none;border-radius:9px;
  padding:6px 10px;cursor:pointer;color:var(--ink-3);font-size:13px}
.dl-src button b{font-weight:900}
.dl-preview{font-size:12.5px;color:var(--ink-2);background:var(--card-2,#faf8f4);border-radius:10px;padding:9px 12px}
.dl-preview .dl-skip{color:var(--amber,#c07b18)}
.dl-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dl-mode{border:1.5px solid var(--line,#dfe5df);background:none;border-radius:12px;padding:10px 8px;cursor:pointer;text-align:center}
.dl-mode b{display:block;font-size:13px}
.dl-mode span{display:block;font-size:10.5px;color:var(--ink-3);margin-top:2px}
.dl-mode.on{border-color:var(--green,#0f7d4d);background:rgba(21,168,94,.07)}
.dl-lines{display:flex;align-items:center;gap:12px}
.dl-lines label{font-size:12.5px;font-weight:700;white-space:nowrap}
.dl-lines label b{color:var(--green,#0f7d4d);font-size:15px}
.dl-slider{flex:1;accent-color:var(--green,#0f7d4d)}
.dl-opts{display:flex;flex-direction:column;gap:9px}
.dl-opt{display:flex;align-items:center;gap:9px;font-size:12.5px;flex-wrap:wrap}
.dl-opt>span:first-child{flex:1;min-width:120px}
.dl-opt select{border:1px solid var(--line,#dfe5df);border-radius:8px;padding:5px 8px;font-size:12px}
.dl-opt .switch.disabled{opacity:.45}
@media (max-width:640px){
  .calllock.cl-board{padding:10px;padding-top:10px;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .calllock.cl-board .cl-card{max-width:100%;margin:0}
  /* stats strip scrolls sideways instead of shrinking to nothing */
  .pd-stats{gap:7px}
  .pd-stat{min-width:88px}
  .pd-br-top b{font-size:22px;white-space:normal}
  .pd-lines{display:flex;flex-direction:column;gap:6px}
  .pd-tile{padding:11px 13px}
  .pd-actions-row{gap:7px}
  .pd-chip{padding:11px 13px;font-size:13px}          /* ≥44px tap targets */
  .pd-endcall{padding:18px;font-size:18px}
  .pd-dispo{grid-template-columns:1fr 1fr;gap:8px}
  .pd-dispo button{min-height:56px;font-size:13.5px}
  .pd-rb{grid-template-columns:104px 1fr 26px}
  .dl-modes{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .dl-mode span{display:none}
  /* the top ✕ / pause need room from the notch */
  .pd-head{padding-top:2px}
}
/* Dialer section: list management + list picker */
.dial-list-row{display:flex;align-items:center;gap:9px;padding:11px 14px;border-top:1px solid var(--line,#e8ece8)}
.dial-list-row .dlr-main{flex:1;min-width:0}
.dial-list-row .dlr-main b{font-size:14px}
.dl-listrow{display:flex;gap:8px;align-items:center}
.dl-listrow select{flex:1;border:1px solid var(--line,#dfe5df);border-radius:9px;padding:8px 10px;font-size:13px}
#imCsv{width:100%;font-family:ui-monospace,monospace;font-size:12px;border:1px solid var(--line,#dfe5df);border-radius:10px;padding:10px;resize:vertical}

/* Phone-features additions: script on the card, transfer list, SMS */
.pd-script{margin-top:10px;border:1px solid rgba(255,196,66,.3);background:rgba(255,196,66,.06);border-radius:12px;overflow:hidden}
.pd-script-h{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#ffd88a;padding:8px 12px;border-bottom:1px solid rgba(255,196,66,.2)}
.pd-script-b{font-size:14px;line-height:1.55;color:#f1f5f3;padding:11px 13px;white-space:pre-wrap;max-height:210px;overflow-y:auto}
.pd-callctl{flex-wrap:wrap}
.xfer-list{display:flex;flex-direction:column;gap:8px}
.sms-tpls{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}

/* ============================================================
   DIALER FACELIFT — premium skin, zero behavior change
   ============================================================ */
/* week stats → accent KPI tiles */
.pd-weekstats{gap:10px;padding:16px}
.pd-weekstats>div{position:relative;overflow:hidden;border-radius:14px;padding:14px 10px 12px;
  background:linear-gradient(180deg,var(--card,#fff),var(--card-2,#f6f4ef));box-shadow:0 1px 2px rgba(0,0,0,.05)}
.pd-weekstats>div::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#15a85e,#57c98a);opacity:.85}
.pd-weekstats>div:nth-child(2)::before{background:linear-gradient(90deg,#2f7fe0,#6db1ff)}
.pd-weekstats>div:nth-child(3)::before{background:linear-gradient(90deg,#7a5cff,#a98eff)}
.pd-weekstats>div:nth-child(4)::before{background:linear-gradient(90deg,#c07b18,#ecad4e)}
.pd-weekstats>div:nth-child(5)::before{background:linear-gradient(90deg,#d05252,#ef8f8f)}
.pd-weekstats b{font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pd-weekstats span{font-size:9.5px;font-weight:700}
/* launcher: source picker → count cards */
.dl-src{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:none;border:none;padding:0}
.dl-src button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:13px 6px 11px;
  border:1.5px solid var(--line,#dfe5df);border-radius:14px;background:var(--card,#fff);cursor:pointer;
  font-size:12px;font-weight:600;color:var(--ink-2);transition:transform .12s,border-color .12s,box-shadow .12s}
.dl-src button b{font-size:21px;font-weight:900;letter-spacing:-.02em;color:var(--ink,#1c231d);
  font-variant-numeric:tabular-nums;order:-1}
.dl-src button:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.07)}
.dl-src button.on{border-color:var(--green,#0f7d4d);background:linear-gradient(180deg,rgba(21,168,94,.09),rgba(21,168,94,.03));
  box-shadow:0 0 0 3px rgba(21,168,94,.12)}
.dl-preview{display:flex;align-items:center;gap:9px;font-size:12.5px;border:1px solid var(--line,#e3e8e3);
  background:linear-gradient(180deg,var(--card-2,#faf8f4),var(--card,#fff));border-radius:12px;padding:11px 14px}
.dl-preview::before{content:"";width:8px;height:8px;border-radius:50%;background:#15a85e;flex-shrink:0;
  box-shadow:0 0 0 3px rgba(21,168,94,.18);animation:pdblink 2s infinite}
@keyframes pdblink{50%{opacity:.45}}
/* mode cards */
.dl-mode{border-radius:14px;padding:12px 8px;transition:transform .12s,border-color .12s,box-shadow .12s;background:var(--card,#fff)}
.dl-mode:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.07)}
.dl-mode b{font-size:14px}
.dl-mode.on{box-shadow:0 0 0 3px rgba(21,168,94,.12);background:linear-gradient(180deg,rgba(21,168,94,.1),rgba(21,168,94,.03))}
/* the big start button */
#dlStart{font-size:16.5px;font-weight:800;padding:17px;border-radius:16px;letter-spacing:.01em;
  background:linear-gradient(135deg,#0f7d4d,#15a85e 55%,#2fbf74);border:none;
  box-shadow:0 6px 22px rgba(21,168,94,.35),inset 0 1px 0 rgba(255,255,255,.25)}
#dlStart:hover{box-shadow:0 8px 28px rgba(21,168,94,.45),inset 0 1px 0 rgba(255,255,255,.25)}
/* options: quiet zebra card */
.dl-opts{border:1px solid var(--line,#e6eae6);border-radius:14px;padding:4px 12px;gap:0;background:var(--card,#fff)}
.dl-opt{padding:10px 2px;border-bottom:1px solid var(--line,#eef1ee)}
.dl-opt:last-child{border-bottom:none}
/* ---------- SESSION BOARD (dark command center) ---------- */
.pd-card{border-radius:22px;box-shadow:0 24px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
.pd-conn{display:flex;align-items:center;gap:9px;border-radius:12px;padding:10px 14px}
.pd-conn::before{content:"";width:8px;height:8px;border-radius:50%;background:#ffd88a;flex-shrink:0;animation:pdblink 1.6s infinite}
.pd-stats{gap:9px}
.pd-stat{border-radius:13px;padding:11px 6px 9px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.09)}
.pd-stat b{font-size:21px;letter-spacing:-.02em}
.pd-stat:nth-child(1) b{color:#8fd8ac}.pd-stat:nth-child(2) b{color:#7fc0ff}
.pd-stat:nth-child(3) b{color:#c9b3ff}.pd-stat:nth-child(4) b{color:#ffd88a}
.pd-stat:nth-child(6) b{color:#e8f0ea}
/* line tiles: state-colored, animated */
.pd-tile{border-radius:12px;transition:border-color .2s,background .2s}
.pd-tile.dialing{border-color:rgba(255,196,66,.4);background:rgba(255,196,66,.05)}
.pd-tile.ringing{border-color:rgba(109,177,255,.5);background:rgba(109,177,255,.07);animation:pdring 1.1s infinite}
.pd-tile.screening{border-color:rgba(169,142,255,.5);background:rgba(169,142,255,.07)}
@keyframes pdring{50%{border-color:rgba(109,177,255,.9)}}
/* the bridged (live human) card gets the spotlight */
.pd-bridged{border-radius:18px;animation:pdglow 2.4s infinite;box-shadow:0 0 0 1px rgba(94,224,139,.35)}
@keyframes pdglow{50%{box-shadow:0 0 26px 2px rgba(94,224,139,.28)}}
/* dispositions: color-coded by outcome */
.pd-dispo button{border-radius:12px;padding:13px 10px;font-weight:600;transition:transform .1s,border-color .12s}
.pd-dispo button:hover{transform:translateY(-1px)}
.pd-dispo button[data-d="interested"]{border-color:rgba(94,224,139,.45);color:#a9ecc2}
.pd-dispo button[data-d="callback"]{border-color:rgba(255,216,138,.45);color:#ffe3ad}
.pd-dispo button[data-d="voicemail"]{border-color:rgba(169,142,255,.4);color:#cdbcff}
.pd-dispo button[data-d="not_interested"]{border-color:rgba(255,157,157,.4);color:#ffc4c4}
.pd-dispo button[data-d="bad_number"],.pd-dispo button[data-d="gatekeeper"]{opacity:.85}
/* pause + end controls */
.pd-pause{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#dfe9e2;
  border-radius:10px;padding:7px 13px;font-size:12.5px;font-weight:700;cursor:pointer}
.pd-pause:hover{background:rgba(255,255,255,.12)}

/* ============================================================
   PHONE PORTAL — self-contained dialer suite chrome
   ============================================================ */
.pp-wrap{gap:0}
.pp-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 4px 10px;background:var(--bg);border-bottom:1px solid var(--line);margin-bottom:12px}
.pp-status{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  padding:5px 11px;border-radius:999px;border:1px solid var(--line-2)}
.pp-status.ok{color:var(--green);background:var(--accent-tint)}
.pp-status.warn{color:var(--champagne);background:rgba(246,197,96,.1)}
.pp-dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:ppdot 2s infinite}
@keyframes ppdot{70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
.pp-presence{margin-left:auto}
.pp-tabs{flex-basis:100%;order:5}
.pp-tabs button{font-size:13.5px;font-weight:700;white-space:nowrap}
.pp-body{min-height:200px}
/* go-live checklist */
.pp-golive .pp-check{display:flex;align-items:center;gap:10px;padding:9px 2px;font-size:13.5px;cursor:pointer;border-bottom:1px solid var(--line)}
.pp-golive .pp-check:last-child{border-bottom:none}
.pp-golive .pp-check.done{color:var(--ink-3);cursor:default}
.pp-check-box{font-size:15px}
.pp-check-go{margin-left:auto;font-size:12px;color:var(--green);font-weight:700}
/* KPI grid */
.pp-kpigrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.pp-kpigrid>div{background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:11px 8px;text-align:center}
.pp-kpigrid b{display:block;font-size:19px;font-weight:900;font-variant-numeric:tabular-nums}
.pp-kpigrid span{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.pp-kpigrid .bad b{color:var(--red)}
.pp-winlabel{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin:12px 0 6px;font-weight:800}
.pp-winlabel:first-child{margin-top:0}
/* 14-day CSS bar chart */
.pp-chart{display:flex;align-items:flex-end;gap:4px;height:120px;padding:8px 16px 0}
.pp-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.pp-bar-fill{width:70%;min-height:2px;background:var(--accent-tint);border-radius:4px 4px 0 0;display:flex;align-items:flex-end;position:relative}
.pp-bar-conn{width:100%;background:var(--green);border-radius:4px 4px 0 0}
.pp-bar-lbl{font-size:9px;color:var(--ink-4);margin-top:4px}
.pp-legend{display:flex;gap:14px;align-items:center;padding:8px 16px 14px;font-size:11.5px;color:var(--ink-3)}
.pp-lg-dial,.pp-lg-conn{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.pp-lg-dial{background:var(--accent-tint)}.pp-lg-conn{background:var(--green)}
.pp-goresp b{color:var(--green)}
@media (max-width:640px){
  .pp-kpigrid{grid-template-columns:repeat(3,1fr)}
  .pp-head{padding:10px 2px 8px}
  .pp-chart{height:96px}
}

/* Dialer-only subdomain (dialer.*): hide the email cockpit's sending-status banner */
body.dialer-only #send-mode{display:none}
body.dialer-only .side .nav{padding-top:6px}

/* Dialer-only: NO sidebar — one full-width focused app */
body.dialer-only .app{grid-template-columns:1fr}
body.dialer-only .side{display:none!important}
body.dialer-only .drawer-scrim{display:none!important}
body.dialer-only .content{padding-bottom:24px}
body.dialer-only .pp-tabs button{font-size:14.5px;padding:10px 16px}
.dl-account{display:flex;align-items:center;gap:9px;margin-left:6px}
.dl-av{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800}
/* Dashboard hero — the dopamine block */
.pp-hero{display:flex;align-items:center;gap:22px;padding:20px 22px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--accent-tint),transparent 60%)}
.pp-hero-num b{display:block;font-size:56px;line-height:1;font-weight:900;
  font-variant-numeric:tabular-nums;color:var(--green)}
.pp-hero-num span{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:800}
.pp-hero-side{display:flex;gap:16px}
.pp-hero-mini b{display:block;font-size:24px;font-weight:900;font-variant-numeric:tabular-nums}
.pp-hero-mini span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.pp-hero-cta{margin-left:auto;max-width:280px;font-size:17px!important;padding:16px 22px!important}
@media (max-width:640px){
  .pp-hero{gap:14px;padding:16px}
  .pp-hero-num b{font-size:44px}
  .pp-hero-cta{max-width:100%;margin-left:0;flex-basis:100%}
}

/* ============================================================
   DIALER APP — polished standalone chrome (overrides earlier .pp/.dl rules)
   ============================================================ */
/* branded top header */
body.dialer-only .top.dl-top{
  display:flex;align-items:center;gap:12px;
  padding:12px 20px;padding-top:calc(12px + env(safe-area-inset-top));
  background:linear-gradient(180deg,#10151a,#0b0f12);
  border-bottom:1px solid var(--line-2);position:sticky;top:0;z-index:40}
.dl-brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.dl-mark{width:38px;height:38px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#1c8f4e,#0e6b3a);box-shadow:0 4px 14px rgba(21,168,94,.4),inset 0 1px 0 rgba(255,255,255,.15)}
.dl-mark svg{width:22px;height:22px;fill:#fff}
.dl-wm{font-size:19px;font-weight:800;letter-spacing:-.3px;color:var(--ink);line-height:1}
.dl-wm b{color:var(--green);font-weight:900;margin-left:5px}
.dl-back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-size:13px;font-weight:700;
  color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;padding:8px 15px;transition:.15s;background:rgba(255,255,255,.02)}
.dl-back:hover{color:var(--ink);border-color:var(--green);background:var(--accent-tint)}
.dl-back span{font-size:15px;line-height:1}
.dl-account{display:flex;align-items:center;gap:9px}
.dl-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(150deg,var(--accent-2),var(--accent));
  color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
@media (max-width:640px){
  body.dialer-only .top.dl-top{padding:10px 12px;gap:8px;flex-wrap:wrap}
  .dl-wm{font-size:16px}.dl-mark{width:32px;height:32px}
  .dl-back span+*{display:none}  /* arrow-only on mobile */
  .dl-account #dlLogout{display:none}
}

/* portal head → premium pill tabs + status */
.pp-head{background:transparent;border-bottom:none;padding:16px 4px 6px;gap:12px}
.pp-status{border-radius:999px;padding:6px 13px;font-size:12px;font-weight:800;letter-spacing:.02em}
.pp-tabs{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:5px;gap:3px;flex-basis:100%;order:5;margin-top:4px}
.pp-tabs button{border:none;background:transparent;color:var(--ink-3);border-radius:10px;padding:10px 18px;
  font-size:14px;font-weight:800;transition:.15s;cursor:pointer}
.pp-tabs button:hover{color:var(--ink-2);background:rgba(255,255,255,.03)}
.pp-tabs button.on{color:#fff;background:linear-gradient(180deg,#1b9e52,#137a3d);box-shadow:0 3px 10px rgba(21,168,94,.35)}

/* HERO — the dopamine block, premium */
.pp-hero{position:relative;overflow:hidden;border:1px solid rgba(34,197,94,.28);
  background:radial-gradient(120% 160% at 0% 0%,rgba(34,197,94,.20),transparent 55%),linear-gradient(180deg,#141b18,#10161a);
  border-radius:20px;padding:24px 26px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
.pp-hero::before{content:"";position:absolute;right:-40px;top:-40px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,197,94,.16),transparent 70%);pointer-events:none}
.pp-hero-num b{font-size:64px;line-height:.95;font-weight:900;font-variant-numeric:tabular-nums;
  color:#fff;text-shadow:0 0 26px rgba(34,197,94,.5);display:block}
.pp-hero-num span{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#7fd8a2;font-weight:800;margin-top:4px;display:block}
.pp-hero-side{display:flex;gap:26px;padding-left:4px}
.pp-hero-mini b{font-size:27px;font-weight:900;color:var(--ink);display:block;font-variant-numeric:tabular-nums}
.pp-hero-mini span{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3)}
.pp-hero-cta{margin-left:auto;max-width:290px;font-size:18px!important;font-weight:900!important;
  padding:18px 26px!important;border-radius:15px!important;
  box-shadow:0 10px 26px rgba(21,168,94,.5)!important}
@media (max-width:640px){
  .pp-hero{padding:18px;gap:16px}
  .pp-hero-num b{font-size:50px}
  .pp-hero-side{gap:18px;padding-left:0}
  .pp-hero-cta{max-width:100%;margin-left:0;flex-basis:100%}
}

/* KPI + panels — a touch more refined in the dialer app */
body.dialer-only .content{width:100%;max-width:1180px;margin-inline:auto;padding:4px 22px 44px}
.pp-kpigrid>div{border-radius:14px}
.pp-kpigrid b{font-size:21px}

/* Responses tab — callback + interested rows */
.resp-row{display:flex;align-items:flex-start;gap:13px;padding:14px 16px;border-top:1px solid var(--line)}
.resp-row:hover{background:var(--hover)}
.resp-row.clickable{cursor:pointer}
.resp-av{flex-shrink:0;width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:900;color:#fff;background:linear-gradient(150deg,#2b3a44,#1b252c);border:1px solid var(--line-2)}
.resp-av.fire{background:linear-gradient(150deg,#1b9e52,#0e6b3a);border-color:transparent;box-shadow:0 3px 10px rgba(21,168,94,.35)}
.resp-main{flex:1;min-width:0}
.resp-main b{font-size:15px;display:block}
.resp-meta{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-3);margin-top:2px;flex-wrap:wrap}
.resp-age{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--card-2);border:1px solid var(--line-2);color:var(--ink-3)}
.resp-age.warm{color:var(--amber);border-color:rgba(255,182,39,.4);background:var(--amber-bg)}
.resp-age.hot{color:var(--red);border-color:rgba(255,82,82,.4);background:var(--red-bg)}
.resp-quote{font-size:13px;line-height:1.45;color:var(--ink-2);font-style:italic;margin-top:6px;
  background:var(--card-2);border-left:3px solid var(--accent-soft);border-radius:0 10px 10px 0;padding:7px 11px;max-width:640px}
.resp-call{flex-shrink:0;align-self:center;font-weight:800!important;padding:10px 18px!important;border-radius:12px!important;text-decoration:none}
@media (max-width:640px){
  .resp-row{padding:12px;gap:10px}
  .resp-av{width:34px;height:34px;font-size:13px;border-radius:10px}
  .resp-call{padding:9px 14px!important}
}

/* Calls tab rows — richer hover + badges */
.call-row{border-radius:0;transition:background .12s}
.call-row .cr-main b{font-size:14.5px}
.call-row .badge{font-size:10.5px;padding:3px 9px;border-radius:999px}

/* dial-list rows in the Dial tab */
.dial-list-row{transition:background .12s}
.dial-list-row:hover{background:var(--hover)}
.dial-list-row .dlr-main b{font-size:14.5px}

/* Calls filter bar — visible, tactile controls */
.fbar select,.fbar input{background:var(--card-2);border:1px solid var(--line-2);color:var(--ink);
  border-radius:10px;padding:8px 12px;font-size:13px;outline:none}
.fbar input:focus,.fbar select:focus{border-color:var(--accent)}
.fbar .seg{background:var(--card-2);border:1px solid var(--line-2);border-radius:10px;padding:3px}
.fbar .seg button{border:none;background:transparent;color:var(--ink-3);font-weight:700;font-size:12.5px;
  padding:6px 13px;border-radius:8px;cursor:pointer}
.fbar .seg button.on{color:#fff;background:var(--accent);box-shadow:0 2px 8px rgba(21,168,94
/* Calls tab filter bar (own class — .fbar is the progress-track style) */
.ch-filters{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.ch-filters select,.ch-filters #chQ{background:var(--card-2);border:1px solid var(--line-2);color:var(--ink);
  border-radius:10px;padding:9px 12px;font-size:13px;outline:none}
.ch-filters select:focus,.ch-filters #chQ:focus{border-color:var(--green)}
.ch-filters #chQ{flex:1;min-width:180px}