/* ==========================================================
   the company Team CRM — Design System
   Ported from the original site: dark premium, Space Grotesk +
   Inter, blue/purple/gold accents, glassmorphic cards.
   ========================================================== */

:root{
  --bg:#07070a;
  --bg-soft:#0d0e12;
  --bg-card:#111216;
  --bg-card-2:#15161b;
  --line:rgba(255,255,255,0.07);
  --line-strong:rgba(255,255,255,0.13);
  --text:#f5f5f7;
  --text-dim:#9b9ba6;
  --text-faint:#5c5c68;
  --accent:#4f74ff;
  --accent-2:#8a5cf6;
  --accent-soft:rgba(79,116,255,0.10);
  --gold:#cda86a;
  --gold-soft:rgba(205,168,106,0.10);
  --green:#4ade80;
  --green-soft:rgba(74,222,128,0.10);
  --red:#f87171;
  --red-soft:rgba(248,113,113,0.10);
  --radius:16px;
  --radius-sm:10px;
  --ease:cubic-bezier(.16,.8,.24,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;color-scheme:dark;background:var(--bg);min-height:100%;}
body{
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(79,116,255,0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(138,92,246,0.08), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  color-scheme:dark;
}
h1,h2,h3,h4,.brand,.stat-value,.nav-logo{font-family:'Space Grotesk',sans-serif;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;color-scheme:dark;}
::selection{background:var(--accent);color:#fff;}

/* ---------- Force every native form control dark (fixes white
   dropdowns / white popup lists / white date-picker fields) ---------- */
input,select,textarea{
  background:var(--bg-card-2);
  color:var(--text);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font-size:13.5px;
}
select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239b9ba6' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:34px;
}
select option{background:var(--bg-card-2);color:var(--text);}
input::placeholder,textarea::placeholder{color:var(--text-faint);}
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(0.75);cursor:pointer;}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:10px;}

/* ---------- Layout shell ---------- */
.shell{display:flex;min-height:100vh;}

.sidebar{
  width:250px;flex-shrink:0;
  background:rgba(13,14,18,0.7);
  backdrop-filter:blur(20px);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  padding:24px 18px;
  position:sticky;top:0;height:100vh;
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;
  z-index:20;
}
/* slim scrollbar so it doesn't look clunky */
.sidebar::-webkit-scrollbar{width:8px;}
.sidebar::-webkit-scrollbar-track{background:transparent;}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px;}
.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26);}
/* keep the account block pinned to the end of the scrollable list */
.sidebar-foot{flex-shrink:0;}
.nav-logo{font-size:19px;font-weight:700;letter-spacing:-0.02em;display:flex;align-items:center;gap:10px;padding:6px 10px 26px;}
.nav-logo .logo-img{width:26px;height:26px;flex-shrink:0;filter:drop-shadow(0 0 10px rgba(124,92,240,0.4));}
.nav-logo .dot{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 14px var(--accent);}
.nav-section-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);padding:0 10px;margin:14px 0 8px;font-weight:600;}
.nav-link{
  display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--radius-sm);
  color:var(--text-dim);font-size:14.5px;font-weight:500;margin-bottom:2px;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.nav-link svg{width:17px;height:17px;flex-shrink:0;opacity:.85;}
.nav-link:hover{background:rgba(255,255,255,0.045);color:var(--text);}
.nav-link.active{background:var(--accent-soft);color:#c9d6ff;}
.nav-link.active svg{opacity:1;}
.sidebar-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);}
.mini-profile{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);}
.avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:#fff;
}
.mini-profile .name{font-size:13.5px;font-weight:600;line-height:1.2;}
.mini-profile .role{font-size:11.5px;color:var(--text-faint);}
.mini-profile .reports-to{font-size:10.5px;color:var(--text-faint);margin-top:2px;
  display:flex;align-items:center;gap:4px;}
.mini-profile .reports-to::before{content:'';width:5px;height:5px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));flex-shrink:0;}
.logout-link{display:block;margin-top:10px;font-size:13px;color:var(--text-faint);padding:8px 10px;}
.logout-link:hover{color:var(--red);}

.notif-bell{
  display:flex;align-items:center;gap:9px;width:100%;margin-top:6px;
  padding:8px 10px;border-radius:var(--radius-sm);color:var(--text-dim);
  font-size:12.5px;font-family:inherit;background:none;border:none;cursor:pointer;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.notif-bell:hover{background:rgba(255,255,255,.05);color:var(--text);}
.notif-bell svg{width:16px;height:16px;flex-shrink:0;}

.notif-panel{
  position:relative;margin:2px 10px 6px;padding:10px;border-radius:12px;
  background:var(--bg-card-2,#15161b);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.notif-panel-head{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-faint);padding:2px 4px 8px;}
.notif-option{
  display:flex;align-items:center;gap:9px;padding:7px 6px;border-radius:9px;cursor:pointer;
  font-size:13px;color:var(--text-dim);transition:background .15s var(--ease);
}
.notif-option:hover{background:rgba(255,255,255,.045);}
.notif-option input[type="radio"]{accent-color:var(--accent,#4f74ff);width:14px;height:14px;flex-shrink:0;}
.notif-option span{flex:1;color:var(--text);}
.notif-preview{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;font-size:10px;
  color:var(--text-faint);background:rgba(255,255,255,.05);
  display:grid;place-items:center;transition:background .15s var(--ease),color .15s var(--ease);
}
.notif-preview:hover{background:var(--accent-soft);color:var(--accent,#4f74ff);}

.main{flex:1;min-width:0;padding:32px 40px 60px;}
.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap;}
.page-title{font-size:26px;font-weight:700;letter-spacing:-0.01em;}
.page-sub{color:var(--text-dim);font-size:14px;margin-top:4px;}

/* ---------- Mobile nav toggle ---------- */
.mobile-topbar{display:none;}
.nav-overlay{display:none;}

@media (max-width: 880px){
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .25s var(--ease);box-shadow:0 0 40px rgba(0,0,0,0.6);}
  .sidebar.open{transform:translateX(0);}
  .main{padding:20px 16px 50px;}
  .mobile-topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:6px 2px 18px;
  }
  .mobile-topbar .nav-logo{padding:0;}
  .burger{width:38px;height:38px;border-radius:10px;background:var(--bg-card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}
  .burger svg{width:19px;height:19px;}
  .nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:15;opacity:0;pointer-events:none;transition:opacity .2s;}
  .nav-overlay.open{opacity:1;pointer-events:auto;}
}

/* ---------- Cards ---------- */
.card{
  background:linear-gradient(180deg, var(--bg-card), var(--bg-card-2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(160deg, rgba(255,255,255,0.09), transparent 40%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.card-title{font-size:14.5px;font-weight:600;margin-bottom:2px;}
.card-sub{font-size:12.5px;color:var(--text-faint);}

/* ---------- Stat grid ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px;}
@media (max-width:1100px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.stat-grid{grid-template-columns:1fr;}}
.stat-card{padding:20px;}
.stat-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.stat-icon svg{width:17px;height:17px;}
.stat-value{font-size:26px;font-weight:700;letter-spacing:-0.01em;line-height:1;}
.stat-label{font-size:12.5px;color:var(--text-dim);margin-top:7px;}
.stat-delta{font-size:11.5px;margin-top:8px;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;font-weight:600;}
.stat-delta.up{background:var(--green-soft);color:var(--green);}
.stat-delta.flat{background:rgba(255,255,255,0.05);color:var(--text-faint);}

.icon-blue{background:var(--accent-soft);color:#8fa8ff;}
.icon-purple{background:rgba(138,92,246,0.12);color:#b79bfa;}
.icon-gold{background:var(--gold-soft);color:var(--gold);}
.icon-green{background:var(--green-soft);color:var(--green);}

/* ---------- Progress bars (daily goal) ---------- */
.goal-row{margin-bottom:16px;}
.goal-row:last-child{margin-bottom:0;}
.goal-row-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:7px;}
.goal-row-top .label{color:var(--text-dim);font-weight:500;}
.goal-row-top .val{font-weight:700;font-variant-numeric:tabular-nums;}
.goal-track{height:8px;border-radius:20px;background:rgba(255,255,255,0.06);overflow:hidden;}
.goal-fill{height:100%;border-radius:20px;transition:width .5s var(--ease);}
.goal-fill.ig{background:linear-gradient(90deg,var(--accent),var(--accent-2));}
.goal-fill.em{background:linear-gradient(90deg,var(--gold),#e7c98a);}
.goal-fill.li{background:linear-gradient(90deg,#0a66c2,#4f9ae8);}
.goal-fill.cf{background:linear-gradient(90deg,#05ce80,#6ee7b7);}

/* ---------- Two column layout ---------- */
.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start;}
@media (max-width:980px){.grid-2{grid-template-columns:1fr;}}
.stack{display:flex;flex-direction:column;gap:20px;}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{text-align:left;color:var(--text-faint);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;padding:0 12px 10px;white-space:nowrap;}
td{padding:12px;border-top:1px solid var(--line);vertical-align:middle;}
tr:hover td{background:rgba(255,255,255,0.02);}
.cell-name{font-weight:600;}
.cell-sub{color:var(--text-faint);font-size:12px;margin-top:1px;}
.chan-pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:20px;}
.chan-instagram{background:var(--accent-soft);color:#8fa8ff;}
.chan-email{background:var(--gold-soft);color:var(--gold);}
.chan-linkedin_note,.chan-linkedin_dm{background:rgba(10,102,194,.18);color:#6aa9e9;}
.chan-crowdfunding{background:rgba(5,206,128,.16);color:#4fd6a0;}
.status-pill{display:inline-block;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:20px;white-space:nowrap;}
.status-locked{background:rgba(167,139,250,0.14);color:#a78bfa;}
.status-scheduled{background:rgba(138,92,246,.16);color:#b79cf7;}
.status-contacted{background:rgba(255,255,255,0.06);color:var(--text-dim);}
.status-replied{background:var(--accent-soft);color:#8fa8ff;}
.status-interested{background:var(--gold-soft);color:var(--gold);}
.status-closed_won{background:var(--green-soft);color:var(--green);}
.status-closed_lost{background:var(--red-soft);color:var(--red);}
.status-cancelled{background:rgba(255,255,255,0.05);color:var(--text-faint);}
.row-actions{display:flex;gap:6px;}
.icon-btn{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:transparent;display:flex;align-items:center;justify-content:center;color:var(--text-faint);transition:all .15s;}
.icon-btn:hover{color:var(--text);background:rgba(255,255,255,0.05);}
.icon-btn svg{width:14px;height:14px;}

.empty-state{padding:40px 20px;text-align:center;color:var(--text-faint);font-size:13.5px;}
.empty-state svg{width:34px;height:34px;margin-bottom:12px;opacity:.5;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:10px;font-size:13.5px;font-weight:600;
  border:1px solid transparent;transition:transform .15s var(--ease),opacity .15s;
}
.btn:active{transform:scale(0.97);}
.btn svg{width:15px;height:15px;}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 6px 20px rgba(79,116,255,0.25);}
.btn-primary:hover{opacity:.92;}
.btn-ghost{background:rgba(255,255,255,0.04);border-color:var(--line-strong);color:var(--text);}
.btn-ghost:hover{background:rgba(255,255,255,0.07);}
.btn-danger{background:var(--red-soft);color:var(--red);border-color:rgba(248,113,113,0.2);}
.btn-sm{padding:8px 14px;font-size:12.5px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.5;pointer-events:none;}

/* ---------- Forms ---------- */
.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--text-dim);margin-bottom:7px;}
.field input,.field select,.field textarea{
  width:100%;background-color:rgba(255,255,255,0.03);border:1px solid var(--line-strong);
  color:var(--text);padding:11px 13px;border-radius:10px;font-size:14px;
  transition:border-color .15s;
}
.field select{padding-right:34px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);}
.field textarea{resize:vertical;min-height:80px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:520px){.field-row{grid-template-columns:1fr;}}
.field-hint{font-size:11.5px;color:var(--text-faint);margin-top:6px;}

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(4,4,6,0.72);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:100;
  opacity:0;pointer-events:none;transition:opacity .18s;padding:20px;
}
.modal-backdrop.open{opacity:1;pointer-events:auto;}
.modal{
  width:100%;max-width:480px;max-height:88vh;overflow-y:auto;
  background:var(--bg-card-2);border:1px solid var(--line-strong);border-radius:18px;
  padding:26px;transform:translateY(12px) scale(.98);transition:transform .2s var(--ease);
}
.modal-backdrop.open .modal{transform:translateY(0) scale(1);}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.modal-head h3{font-size:17px;font-weight:700;}
.modal-close{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;color:var(--text-dim);}
.modal-close svg{width:15px;height:15px;}
.modal-actions{display:flex;gap:10px;margin-top:22px;}

/* ---------- Tasks ---------- */
.task-item{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line);}
.task-item:last-child{border-bottom:none;}
.task-check{
  width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-strong);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.task-check svg{width:12px;height:12px;opacity:0;transition:opacity .15s;color:#fff;}
.task-item.done .task-check{background:var(--green);border-color:var(--green);}
.task-item.done .task-check svg{opacity:1;}
.task-text{font-size:13.5px;flex:1;transition:color .15s;}
.task-item.done .task-text{color:var(--text-faint);text-decoration:line-through;}
.task-badge{font-size:10.5px;color:var(--text-faint);background:rgba(255,255,255,0.05);padding:2px 7px;border-radius:8px;}

/* ---------- Leaderboard / motivation ---------- */
.lb-item{display:flex;align-items:center;gap:12px;padding:12px 4px;}
.lb-rank{width:22px;font-size:13px;font-weight:700;color:var(--text-faint);text-align:center;}
.lb-rank.gold{color:var(--gold);}
.lb-info{flex:1;min-width:0;}
.lb-name{font-size:13.5px;font-weight:600;}
.lb-meta{font-size:11.5px;color:var(--text-faint);margin-top:1px;}
.lb-val{font-size:16px;font-weight:700;font-family:'Space Grotesk',sans-serif;}

/* ---------- Mini bar chart ---------- */
.trend-chart{display:flex;align-items:flex-end;gap:6px;height:70px;padding-top:6px;}
.trend-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;}
.trend-bar{width:100%;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--accent-2),var(--accent));min-height:3px;transition:height .4s var(--ease);}
.trend-label{font-size:10px;color:var(--text-faint);}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--bg-card-2);border:1px solid var(--line-strong);color:var(--text);
  padding:13px 20px;border-radius:12px;font-size:13.5px;font-weight:500;
  box-shadow:0 10px 40px rgba(0,0,0,0.4);z-index:200;opacity:0;pointer-events:none;
  transition:all .25s var(--ease);display:flex;align-items:center;gap:10px;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.err{border-color:rgba(248,113,113,0.35);}
.toast .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;}
.toast.err .dot{background:var(--red);}

/* ---------- Login page ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login-card{width:100%;max-width:380px;}
.login-brand{text-align:center;margin-bottom:28px;}
.login-brand .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:inline-block;margin-right:8px;box-shadow:0 0 16px var(--accent);}
.login-brand .title{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:700;}
.login-brand .login-logo{width:56px;height:56px;display:block;margin:0 auto 14px;filter:drop-shadow(0 0 16px rgba(124,92,240,0.45));}
.login-brand .sub{color:var(--text-faint);font-size:13px;margin-top:6px;}
.login-error{background:var(--red-soft);border:1px solid rgba(248,113,113,0.25);color:#fca5a5;font-size:13px;padding:11px 14px;border-radius:10px;margin-bottom:18px;}
.login-foot{text-align:center;margin-top:22px;font-size:12px;color:var(--text-faint);}

/* ---------- Filters bar ---------- */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.filter-bar select,.filter-bar input{
  background-color:rgba(255,255,255,0.03);border:1px solid var(--line-strong);color:var(--text);
  padding:9px 12px;border-radius:9px;font-size:13px;
}
.filter-bar select{padding-right:34px;}
.filter-bar input[type=search]{min-width:200px;}

/* ---------- Badges by role ---------- */
.role-badge{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:6px;}
.role-badge.admin{background:var(--gold-soft);color:var(--gold);}
.role-badge.member{background:rgba(255,255,255,0.05);color:var(--text-faint);}

.divider{height:1px;background:var(--line);margin:18px 0;}
.line-items-table{width:100%;border-collapse:collapse;margin-bottom:10px;}
.line-items-table th{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-faint);text-align:left;padding:0 8px 8px 0;font-weight:600;}
.line-items-table td{padding:0 8px 8px 0;vertical-align:middle;}
.line-items-table td:last-child,.line-items-table th:last-child{padding-right:0;}
.li-input{width:100%;padding:9px 10px;border-radius:8px;border:1px solid var(--line-strong);background:rgba(255,255,255,0.02);color:var(--text);font-size:13px;font-family:inherit;box-sizing:border-box;}
.li-input:focus{outline:none;border-color:var(--accent);}
.li-amount{font-size:13px;color:var(--text-dim);white-space:nowrap;font-variant-numeric:tabular-nums;}
.li-remove{width:30px;height:30px;flex-shrink:0;}
.invoice-totals{margin:6px 0 18px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;align-items:flex-end;}
.invoice-totals .row{display:flex;justify-content:space-between;width:240px;font-size:13px;color:var(--text-dim);}
.invoice-totals .row.total{font-size:16px;font-weight:700;color:var(--text);border-top:1px solid var(--line);padding-top:8px;margin-top:4px;}
.text-faint{color:var(--text-faint);}
.text-dim{color:var(--text-dim);}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.mb-0{margin-bottom:0 !important;}

/* ==========================================================
   Nav badge (e.g. follow-ups due count)
   ========================================================== */
.nav-link{position:relative;}
.nav-badge{
  margin-left:auto;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;
  min-width:18px;height:18px;padding:0 5px;border-radius:20px;display:flex;align-items:center;justify-content:center;
}

/* ==========================================================
   Tabs
   ========================================================== */
.tab-bar{display:flex;gap:6px;background:rgba(255,255,255,0.03);border:1px solid var(--line);padding:4px;border-radius:12px;margin-bottom:18px;width:fit-content;}
.tab-btn{padding:9px 18px;border-radius:9px;font-size:13px;font-weight:600;color:var(--text-dim);transition:all .15s;}
.tab-btn.active{background:var(--bg-card-2);color:var(--text);box-shadow:0 2px 10px rgba(0,0,0,0.25);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ==========================================================
   Earnings
   ========================================================== */
.earn-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px;}
@media (max-width:880px){.earn-summary-grid{grid-template-columns:1fr;}}
.earn-summary-card{padding:22px;}
.earn-summary-card .stat-label{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.earn-summary-card .stat-value{font-size:28px;}
.earn-summary-card .stat-sub{font-size:12px;color:var(--text-faint);margin-top:6px;}
.earn-summary-card.lead{border-color:rgba(79,116,255,0.25);}
.earn-summary-card.threed{border-color:rgba(138,92,246,0.25);}
.earn-summary-card.total{border-color:rgba(205,168,106,0.3);}

.earn-type-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em;}
.earn-type-badge.lead{background:var(--accent-soft);color:#8fa8ff;}
.earn-type-badge.threed{background:rgba(138,92,246,0.14);color:#b79bfa;}
.mono-hint{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--gold);letter-spacing:.04em;}

/* ---- Privacy mode (v61) ---- */
.privacy-btn{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;cursor:pointer;
  padding:8px 10px;margin-bottom:4px;border-radius:9px;color:var(--text-dim);font-family:inherit;font-size:13px;
  font-weight:500;text-align:left;transition:background .15s,color .15s;}
.privacy-btn:hover{background:var(--surface-2);color:var(--text);}
.privacy-btn svg{width:16px;height:16px;flex-shrink:0;}
.privacy-btn.is-on{color:var(--gold);background:var(--gold-soft);}

/* The blur is heavy on purpose — a light blur is still readable at a glance,
   which defeats the point. select:none stops a drag-highlight revealing text. */
.privacy-on .sensitive{filter:blur(8px);cursor:pointer;user-select:none;
  transition:filter .12s ease;border-radius:4px;}
.privacy-on .sensitive.revealed{filter:none;user-select:auto;
  box-shadow:0 0 0 2px var(--gold-soft);}
.privacy-on .sensitive *{user-select:none;}
.privacy-on .sensitive.revealed *{user-select:auto;}
/* Never carry the blur into a printed invoice or report. */
@media print{ .privacy-on .sensitive{filter:none !important;} .privacy-btn{display:none !important;} }

.client-picker-field select{border-color:var(--accent);}
.client-picker-field label{color:var(--text);}

.client-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border);}
.client-row:last-child{border-bottom:none;}
.client-row.is-archived{opacity:.55;}
.origin-pill{display:inline-flex;align-items:center;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;}
.origin-pill.outreach{background:var(--accent-soft);color:#8fa8ff;}
.origin-pill.direct{background:var(--green-soft);color:var(--green);}
.origin-pill.archived{background:transparent;color:var(--text-faint);border:1px solid var(--border);}

.seen-tick{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;
  padding:3px 9px;border-radius:20px;white-space:nowrap;cursor:help;letter-spacing:.02em;}
.seen-tick.done{background:var(--green-soft);color:var(--green);}
.seen-tick.pending{background:transparent;color:var(--text-faint);border:1px dashed var(--border);}
.seen-tick svg{flex-shrink:0;}

/* ---- Client notifications (v66) ---- */
.notify-done{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:20px;background:var(--green-soft);color:var(--green);
  white-space:nowrap;cursor:help;}
.notify-done svg{width:12px;height:12px;flex-shrink:0;}
.notifyBtn[disabled]{opacity:.4;cursor:not-allowed;}

/* ---- Invoice pay link (v59) ---- */
.paylink-tag{display:inline-flex;align-items:center;gap:4px;margin-top:5px;font-size:10px;font-weight:700;
  padding:2px 7px;border-radius:20px;background:var(--green-soft);color:var(--green);
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;cursor:help;}
.paylink-tag svg{width:10px;height:10px;flex-shrink:0;}

/* ---- Confidential projects (v58) ---- */
.confidential-pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;
  background:var(--gold-soft);color:var(--gold);border:1px solid rgba(205,168,106,0.28);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;cursor:help;}
.confidential-pill svg{width:11px;height:11px;flex-shrink:0;}
.conf-mask{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--text-faint);cursor:help;white-space:nowrap;}
.conf-mask svg{width:11px;height:11px;flex-shrink:0;opacity:.75;}
.conf-field{margin-bottom:16px;padding:13px 15px;border-radius:12px;background:var(--gold-soft);border:1px solid rgba(205,168,106,0.22);}
.conf-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;margin:0;font-size:13px;font-weight:600;color:var(--text);}
.conf-toggle input{width:16px;height:16px;flex-shrink:0;accent-color:var(--gold);cursor:pointer;}

.pay-pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:20px;}
.pay-pill.paid{background:var(--green-soft);color:var(--green);}
.pay-pill.unpaid{background:var(--red-soft);color:var(--red);}
/* v63 — pending sits between paid and owed: real, but not yet counted. Muted
   on purpose so it doesn't read as money the member is currently due. */
.pay-pill.pending{background:var(--surface-3,rgba(255,255,255,0.06));color:var(--text-faint);border:1px dashed var(--border);}
.pay-pill.void{background:transparent;color:var(--text-faint);border:1px solid var(--border);text-decoration:line-through;}
.earn-summary-card.pending .stat-value{color:var(--text-dim);}

.pay-toggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none;}
.pay-toggle input{display:none;}
.pay-toggle .track{width:34px;height:19px;border-radius:20px;background:rgba(255,255,255,0.08);border:1px solid var(--line-strong);position:relative;transition:background .18s;flex-shrink:0;}
.pay-toggle .track::after{content:'';position:absolute;top:1px;left:1px;width:15px;height:15px;border-radius:50%;background:var(--text-faint);transition:all .18s var(--ease);}
.pay-toggle input:checked + .track{background:var(--green-soft);border-color:rgba(74,222,128,0.35);}
.pay-toggle input:checked + .track::after{transform:translateX(15px);background:var(--green);}
.pay-toggle .lbl{font-size:12px;font-weight:600;color:var(--text-dim);}

.member-earn-row{display:flex;align-items:center;gap:12px;padding:14px 4px;border-top:1px solid var(--line);}
.member-earn-row:first-child{border-top:none;}
.member-earn-row .lb-info{flex:1;}
.member-earn-figures{display:flex;gap:22px;text-align:right;}
.member-earn-figures .fig-val{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;}
.member-earn-figures .fig-lbl{font-size:10.5px;color:var(--text-faint);margin-top:2px;}

/* ==========================================================
   Projects
   ========================================================== */
.project-card{padding:18px;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none;}
.project-card::before{display:none;}
.project-card:first-child{border-top:none;}
.project-value{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;}
.project-commission-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:rgba(255,255,255,0.025);border:1px solid var(--line);border-radius:10px;margin-top:8px;}

/* ==========================================================
   Follow-ups
   ========================================================== */
.followup-row{display:flex;align-items:flex-start;gap:14px;padding:14px 4px;border-top:1px solid var(--line);}
.followup-row:first-child{border-top:none;}
.followup-dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex-shrink:0;background:var(--text-faint);}
.followup-row.overdue .followup-dot{background:var(--red);box-shadow:0 0 8px rgba(248,113,113,0.5);}
.followup-row.critical .followup-dot{background:var(--red);box-shadow:0 0 10px rgba(248,113,113,0.85);animation:pulseDot 1.6s ease-in-out infinite;}
.followup-row.today .followup-dot{background:var(--gold);box-shadow:0 0 8px rgba(205,168,106,0.5);}
@keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:0.45;}}
.followup-body{flex:1;min-width:0;}
.followup-title{font-size:13.5px;font-weight:600;}
.followup-meta{font-size:12px;color:var(--text-faint);margin-top:2px;}
.followup-reason{font-size:11px;color:var(--text-faint);margin-top:1px;font-style:italic;}
.followup-due{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;background:rgba(255,255,255,0.05);color:var(--text-dim);text-align:right;}
.followup-row.overdue .followup-due{background:var(--red-soft);color:var(--red);}
.followup-row.critical .followup-due{background:var(--red);color:#fff;}
.followup-row.today .followup-due{background:var(--gold-soft);color:var(--gold);}
.followup-due small{display:block;font-weight:500;opacity:0.8;font-size:10px;margin-top:1px;}
.followup-actions{display:flex;gap:6px;margin-top:9px;}
.followup-preview-hint{font-size:11.5px;color:var(--text-faint);margin:-10px 0 16px 2px;}
.dup-warning{
  background:rgba(245,158,11,0.09); border:1px solid rgba(245,158,11,0.3); border-radius:10px;
  padding:10px 13px; font-size:12.5px; color:#f5b942; margin:-10px 0 16px; line-height:1.55;
}
.dup-warning b{color:#ffcc70;}
.dup-warning .dup-item{margin-top:4px;}
.dup-warning .dup-item:first-of-type{margin-top:6px;}
.dup-warning.dup-warning-blocking{background:rgba(248,113,113,0.1); border-color:rgba(248,113,113,0.35); color:#f8a8a8;}
.dup-warning.dup-warning-blocking b{color:#ff9d9d;}
.dup-warning .dup-item.blocking{font-weight:600;}
.funnel-row{display:flex;align-items:center;gap:14px;padding:9px 0;}
.funnel-label{width:100px;flex-shrink:0;font-size:12.5px;color:var(--text-dim);font-weight:600;}
.funnel-bar-track{flex:1;height:10px;border-radius:6px;background:rgba(255,255,255,0.05);overflow:hidden;}
.funnel-bar-fill{height:100%;border-radius:6px;transition:width .3s ease;}
.funnel-count{width:90px;flex-shrink:0;text-align:right;font-size:12.5px;font-weight:700;}
.close-rate-pill{display:inline-block;padding:4px 11px;border-radius:20px;font-size:12px;font-weight:700;}
.close-rate-pill.good{background:var(--green-soft);color:var(--green);}
.close-rate-pill.ok{background:var(--gold-soft);color:var(--gold);}
.close-rate-pill.none{background:rgba(255,255,255,0.05);color:var(--text-faint);}

/* ==========================================================
   Notes board
   ========================================================== */
.note-card{margin-bottom:18px;}
.note-card:last-child{margin-bottom:0;}
.note-pin{color:var(--gold);}
.note-title-row{display:flex;align-items:center;gap:8px;}
.note-body{font-size:13.5px;color:var(--text-dim);line-height:1.6;margin:10px 0 12px;white-space:pre-wrap;}
.note-keywords{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.keyword-chip{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:20px;background:var(--gold-soft);color:var(--gold);}
.source-chip{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:20px;background:var(--green-soft);color:var(--green);}
.folder-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:20px;background:var(--accent-soft);color:#8fa8ff;}
.folder-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.folder-tab{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:20px;background:rgba(255,255,255,0.03);border:1px solid var(--line-strong);color:var(--text-dim);}
.folder-tab:hover{background:rgba(255,255,255,0.06);}
.folder-tab.active{background:var(--accent-soft);color:#8fa8ff;border-color:transparent;}
.folder-tab .count{opacity:0.65;font-weight:500;}
.folder-tab.manage{border-style:dashed;}
.note-select-row{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.note-select-cb{width:18px;height:18px;flex-shrink:0;cursor:pointer;accent-color:var(--accent);}
.note-select-cb-wrap{display:none;}
.notes-select-active .note-select-cb-wrap{display:flex;align-items:flex-start;padding-top:2px;}
.bulk-action-bar{position:sticky;top:10px;z-index:20;display:none;align-items:center;gap:12px;background:var(--bg-card-2);border:1px solid var(--accent);border-radius:12px;padding:12px 16px;margin-bottom:16px;box-shadow:0 8px 24px rgba(0,0,0,0.35);}
.bulk-action-bar.show{display:flex;flex-wrap:wrap;}
.bulk-action-bar .count{font-size:13px;font-weight:600;}
.bulk-action-bar select{max-width:220px;}
.folder-modal-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);}
.folder-modal-row:last-child{border-bottom:none;}
.note-foot{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-faint);padding-top:12px;border-top:1px solid var(--line);}
.comment-list{margin-top:14px;display:flex;flex-direction:column;gap:12px;}
.comment-item{display:flex;gap:10px;}
.comment-body{flex:1;background:rgba(255,255,255,0.025);border:1px solid var(--line);border-radius:12px;padding:10px 13px;}
.comment-head{display:flex;align-items:center;gap:8px;margin-bottom:3px;}
.comment-name{font-size:12.5px;font-weight:600;}
.comment-time{font-size:11px;color:var(--text-faint);}
.comment-text{font-size:13px;color:var(--text-dim);line-height:1.5;}
.comment-form{display:flex;gap:8px;margin-top:12px;}
.comment-form input{flex:1;background:rgba(255,255,255,0.03);border:1px solid var(--line-strong);color:var(--text);padding:9px 12px;border-radius:9px;font-size:13px;}

/* ==========================================================
   Entry detail modal / timeline
   ========================================================== */
.ed-section{margin-bottom:18px;}
.ed-section:last-child{margin-bottom:0;}
.ed-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);margin-bottom:8px;}
.ed-notes{background:rgba(255,255,255,0.025);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13.5px;color:var(--text-dim);line-height:1.6;white-space:pre-wrap;}
/* the message actually sent — tinted so it reads apart from manual notes */
.ed-msg-sent{background:rgba(138,92,246,.07);border-color:rgba(138,92,246,.28);color:var(--text,#e8e8ee);}
.ed-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;}
.ed-meta-item .k{font-size:11px;color:var(--text-faint);margin-bottom:2px;}
.ed-meta-item .v{font-size:13.5px;font-weight:600;}

.timeline{position:relative;padding-left:22px;}
.timeline::before{content:'';position:absolute;left:5px;top:4px;bottom:4px;width:1px;background:var(--line-strong);}
.timeline-item{position:relative;padding-bottom:16px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{content:'';position:absolute;left:-22px;top:3px;width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-card);}
.timeline-action{font-size:13px;font-weight:600;}
.timeline-detail{font-size:12.5px;color:var(--text-dim);margin-top:2px;}
.timeline-meta{font-size:11px;color:var(--text-faint);margin-top:3px;}

.assign-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;background:var(--gold-soft);color:var(--gold);text-transform:uppercase;letter-spacing:.02em;}

/* ==========================================================
   Email tracking badges — lead rows + entry detail modal
   ========================================================== */
.track-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.track-badges-lg{margin-top:0;gap:8px;}

.tb{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;letter-spacing:.01em;
  padding:5px 12px 5px 9px;border-radius:20px;white-space:nowrap;
  border:1px solid transparent;cursor:default;
  transition:transform .16s var(--ease,ease),box-shadow .16s var(--ease,ease),background .16s ease;
}
.tb:hover{transform:translateY(-1.5px);}

.tb-ico{display:inline-flex;font-size:12px;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));}

.tb-loc{
  display:inline-flex;align-items:center;
  padding-left:7px;margin-left:1px;
  border-left:1px solid rgba(255,255,255,.22);
  font-weight:600;opacity:.9;
  max-width:180px;overflow:hidden;text-overflow:ellipsis;
}

.tb-reply{
  background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;
  box-shadow:0 2px 8px rgba(34,197,94,.28);
}
.tb-reply:hover{box-shadow:0 4px 14px rgba(34,197,94,.42);}

.tb-click{
  background:linear-gradient(135deg,var(--accent),#3b5fe0);color:#fff;
  box-shadow:0 2px 8px rgba(79,116,255,.3);
}
.tb-click:hover{box-shadow:0 4px 14px rgba(79,116,255,.45);}

.tb-open{
  background:rgba(138,92,246,.14);color:#c4a8fb;
  border-color:rgba(138,92,246,.4);
}
.tb-open:hover{background:rgba(138,92,246,.22);box-shadow:0 4px 14px rgba(138,92,246,.25);}
.tb-open .tb-loc{border-left-color:rgba(196,168,251,.3);}

.tb-sent{
  background:rgba(255,255,255,.04);color:var(--text-faint);
  border-color:var(--line-strong);
}
.tb-sent:hover{background:rgba(255,255,255,.07);}

/* per-open / per-click history, shown in the entry detail modal */
.mail-event-list{margin-top:10px;display:flex;flex-direction:column;gap:2px;}
.mail-event-row{display:flex;gap:10px;align-items:flex-start;padding:8px 4px;border-bottom:1px solid var(--line);}
.mail-event-row:last-child{border-bottom:none;}
.mail-event-ico{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;
  margin-top:1px;
}
.mail-event-ico.is-click{background:rgba(79,116,255,.16);}
.mail-event-ico.is-open{background:rgba(138,92,246,.16);}
.mail-event-title{font-size:12.5px;font-weight:600;}
.mail-event-proxy{font-weight:500;color:var(--text-faint);text-transform:none;letter-spacing:0;}
.mail-event-meta{font-size:11.5px;color:var(--text-faint);margin-top:2px;}


.invoice-btn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:6px 12px;border-radius:20px;background:var(--green-soft);color:var(--green);}
.invoice-btn.proof{background:var(--accent-soft);color:var(--accent);}
.invoice-empty{font-size:12px;color:var(--text-faint);}
.invoice-upload-label{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:20px;background:rgba(255,255,255,0.05);color:var(--text-dim);cursor:pointer;border:1px dashed var(--line-strong);}
.invoice-upload-label:hover{background:rgba(255,255,255,0.08);}
.invoice-upload-label input{display:none;}
.invoice-preview-card{
  background:linear-gradient(135deg,rgba(79,116,255,0.10),rgba(138,92,246,0.08));
  border:1px solid var(--line-strong); border-radius:12px; padding:14px 16px; margin-bottom:18px;
}
.invoice-preview-card .ipc-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;}
.invoice-preview-card .ipc-title{font-weight:700;font-size:14px;}
.invoice-preview-card .ipc-sub{font-size:12px;color:var(--text-dim);margin-top:2px;}
.invoice-preview-card .ipc-amount{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;color:var(--gold);}
.invoice-preview-card .ipc-number{font-size:11px;color:var(--text-faint);margin-top:6px;}

/* ═══════════════════ Premium Email Journey tree (v26) ═══════════════════ */
.ej-tree{ margin-top:6px; }
.ej-node{
  display:flex; gap:14px; opacity:0; transform:translateY(10px);
  animation:ejIn .5s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes ejIn{ to{ opacity:1; transform:translateY(0); } }

.ej-rail{ display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:34px; }
.ej-dot{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:14px; flex-shrink:0; position:relative; z-index:2;
  background:#1a1a22; border:2px solid var(--line-strong);
  transition:transform .2s;
}
.ej-line{ flex:1; width:2px; background:linear-gradient(var(--line-strong),transparent); min-height:22px; margin:2px 0; }

.ej-card{
  flex:1; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  border:1px solid var(--line); border-radius:13px; padding:13px 15px; margin-bottom:14px;
  transition:transform .2s, border-color .2s, box-shadow .3s;
}
.ej-card:hover{ transform:translateX(3px); border-color:var(--line-strong); box-shadow:0 8px 30px rgba(0,0,0,.25); }
.ej-card-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.ej-stage{ font-size:13px; font-weight:700; letter-spacing:.01em; }
.ej-when{ font-size:11px; color:var(--text-faint); flex-shrink:0; }
.ej-subject{ font-size:12.5px; color:var(--text-dim,#c3c4cc); margin-top:5px; line-height:1.5; }
.ej-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.ej-chip{ font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.ej-chip-won{ background:rgba(34,197,94,.16); color:#4ade80; border:1px solid rgba(34,197,94,.3); }
.ej-chip-open{ background:rgba(138,92,246,.16); color:#a78bfa; border:1px solid rgba(138,92,246,.3); }
.ej-chip-click{ background:rgba(79,116,255,.16); color:#7c9bff; border:1px solid rgba(79,116,255,.3); }
.ej-chip-mute{ background:rgba(255,255,255,.04); color:var(--text-faint); border:1px solid var(--line); }

/* node temperature colors the dot + a soft glow */
.ej-won .ej-dot{ background:rgba(34,197,94,.2); border-color:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.1); }
.ej-hot .ej-dot{ background:rgba(79,116,255,.2); border-color:var(--accent); box-shadow:0 0 0 4px rgba(79,116,255,.1); }
.ej-warm .ej-dot{ background:rgba(138,92,246,.2); border-color:var(--accent-2); box-shadow:0 0 0 4px rgba(138,92,246,.1); }
.ej-won .ej-card{ border-color:rgba(34,197,94,.25); }
.ej-hot .ej-card{ border-color:rgba(79,116,255,.25); }

/* replied node gets a gentle pulse to draw the eye */
.ej-won .ej-dot{ animation:ejPulse 2.4s ease-in-out infinite; }
@keyframes ejPulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(34,197,94,.1); }
  50%{ box-shadow:0 0 0 7px rgba(34,197,94,.02); }
}

/* Email Journey — expandable message body */
.ej-toggle{
  display:inline-flex; align-items:center; gap:5px; margin-top:11px;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  color:var(--text-dim,#c3c4cc); font-size:11px; font-weight:600;
  padding:5px 11px; border-radius:20px; cursor:pointer; transition:background .15s,border-color .15s;
}
.ej-toggle:hover{ background:rgba(255,255,255,.07); border-color:var(--line-strong); }
.ej-toggle-caret{ font-size:9px; transition:transform .2s; }
.ej-toggle.open .ej-toggle-caret{ transform:rotate(180deg); }
.ej-message{
  margin-top:11px; padding:13px 15px; border-radius:10px;
  background:rgba(0,0,0,.22); border:1px solid var(--line);
  font-size:12.5px; line-height:1.65; color:var(--text-dim,#c9cad2);
  white-space:normal; animation:ejMsgIn .28s ease;
}
@keyframes ejMsgIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }

/* ============ Lead conversation thread (their replies + ours) ============ */
.conv-thread{max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;
  padding:12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);}
.conv-loading,.conv-empty{color:var(--text-faint);font-size:13px;text-align:center;padding:18px 10px;line-height:1.5;}
.conv-msg{display:flex;max-width:86%;}
.conv-msg.in{align-self:flex-start;}
.conv-msg.out{align-self:flex-end;justify-content:flex-end;}
.conv-bubble{padding:10px 13px;border-radius:13px;font-size:13.5px;line-height:1.55;}
.conv-msg.in .conv-bubble{background:var(--bg-card-2);border:1px solid var(--line);border-bottom-left-radius:5px;}
.conv-msg.out .conv-bubble{background:linear-gradient(135deg,rgba(79,116,255,.22),rgba(138,92,246,.22));
  border:1px solid rgba(124,140,255,.32);border-bottom-right-radius:5px;}
.conv-subject{font-weight:600;font-size:12.5px;margin-bottom:5px;color:#c9d6ff;}
.conv-body{white-space:pre-wrap;word-break:break-word;}
.conv-meta{margin-top:7px;font-size:10.5px;color:var(--text-faint);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.conv-badge{background:rgba(74,222,128,.14);color:#7ee0a8;padding:1px 7px;border-radius:20px;font-size:10px;font-weight:600;}
.conv-del{background:none;border:none;color:var(--text-faint);cursor:pointer;font-size:14px;line-height:1;padding:0 2px;opacity:0;transition:opacity .15s,color .15s;}
.conv-msg:hover .conv-del{opacity:1;}
.conv-del:hover{color:#e57373;}

.conv-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.conv-composer{margin-top:12px;padding:14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--bg-card-2);}
.conv-composer-title{font-weight:600;font-size:13.5px;margin-bottom:10px;}
.conv-composer input[type="text"],.conv-composer textarea,.conv-composer input[type="datetime-local"]{
  width:100%;background:rgba(0,0,0,.25);border:1px solid var(--line);color:var(--text);
  border-radius:9px;padding:9px 11px;font-family:inherit;font-size:13.5px;margin-bottom:9px;}
.conv-composer textarea{resize:vertical;line-height:1.5;}
.conv-composer input:focus,.conv-composer textarea:focus{outline:none;border-color:var(--accent);}
.conv-composer-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.conv-composer-row input[type="datetime-local"]{width:auto;margin-bottom:0;}
.conv-hint{margin-top:8px;font-size:11.5px;color:var(--text-faint);line-height:1.45;}

/* Zoom lightbox for images attached to a conversation message */
.conv-msg-imgs img{cursor:zoom-in;transition:transform .12s ease,filter .12s ease;}
.conv-msg-imgs img:hover{transform:scale(1.04);filter:brightness(1.08);}
.img-lightbox{
  position:fixed;inset:0;z-index:2000;background:rgba(6,7,10,.88);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .16s ease;padding:40px;
}
.img-lightbox.open{opacity:1;pointer-events:auto;}
.img-lightbox-inner{position:relative;display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%;}
.img-lightbox img{max-width:88vw;max-height:86vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);object-fit:contain;}
.img-lightbox-close{
  position:absolute;top:-14px;right:-14px;width:34px;height:34px;border-radius:50%;
  background:#fff;color:#111;border:none;cursor:pointer;font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.img-lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;border:none;cursor:pointer;font-size:20px;
  display:flex;align-items:center;justify-content:center;
}
.img-lightbox-nav:hover{background:rgba(255,255,255,.22);}
.img-lightbox-nav.prev{left:-56px;}
.img-lightbox-nav.next{right:-56px;}
.img-lightbox-count{
  position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);
  color:var(--text-faint,#8a8d99);font-size:12px;
}

/* ---- Conversation avatars + delivery ticks (messenger style) ---- */
.conv-msg{align-items:flex-end;gap:9px;}
.conv-msg.out{flex-direction:row-reverse;}
.conv-av{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-size:11.5px;font-weight:700;color:#fff;letter-spacing:.02em;
  box-shadow:0 2px 8px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);}
.conv-av.mine{background:linear-gradient(135deg,var(--accent),var(--accent-2));}
.conv-ticks{display:inline-flex;align-items:center;margin-left:2px;color:var(--text-faint);}
.conv-ticks svg{width:14px;height:10px;}
.conv-ticks.seen{color:#5db8ff;}
.conv-ticks.seen svg{width:17px;height:11px;}

/* ============ Conversation bubbles: polished + animated ============ */
/* avatar sits beside the first line, like a messenger, not at the bottom */
.conv-msg{align-items:flex-start;gap:10px;max-width:88%;
  animation:convIn .42s cubic-bezier(.16,1,.3,1) both;}
@keyframes convIn{
  from{opacity:0;transform:translateY(12px) scale(.97);}
  to{opacity:1;transform:none;}
}
/* incoming slides from the left, ours from the right */
.conv-msg.in{animation-name:convInLeft;}
.conv-msg.out{animation-name:convInRight;}
@keyframes convInLeft{
  from{opacity:0;transform:translateX(-16px) translateY(8px) scale(.97);}
  to{opacity:1;transform:none;}
}
@keyframes convInRight{
  from{opacity:0;transform:translateX(16px) translateY(8px) scale(.97);}
  to{opacity:1;transform:none;}
}

.conv-av{width:34px;height:34px;font-size:12px;position:relative;margin-top:2px;
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;}
.conv-msg:hover .conv-av{transform:scale(1.08);}
/* soft ring so the avatar reads as a presence marker */
.conv-av::after{content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1px solid rgba(255,255,255,.10);pointer-events:none;}

.conv-bubble{position:relative;padding:12px 15px;border-radius:15px;
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .25s;}
.conv-msg:hover .conv-bubble{transform:translateY(-2px);}

/* THEIRS — soft glass with a coloured edge and a tail */
.conv-msg.in .conv-bubble{
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.10);
  border-bottom-left-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.conv-msg.in:hover .conv-bubble{border-color:rgba(255,255,255,.19);
  box-shadow:0 10px 26px rgba(0,0,0,.4);}
/* little pointer toward the avatar */
.conv-msg.in .conv-bubble::before{content:"";position:absolute;left:-6px;bottom:10px;
  width:12px;height:12px;transform:rotate(45deg);
  background:rgba(255,255,255,.04);border-left:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);border-bottom-left-radius:3px;}

/* OURS — brand gradient, subtle inner light, tail on the right */
.conv-msg.out .conv-bubble{
  background:linear-gradient(140deg, rgba(79,116,255,.30), rgba(138,92,246,.26));
  border:1px solid rgba(124,140,255,.36);
  border-bottom-right-radius:6px;
  box-shadow:0 6px 20px rgba(79,116,255,.18), inset 0 1px 0 rgba(255,255,255,.10);}
.conv-msg.out:hover .conv-bubble{border-color:rgba(150,165,255,.6);
  box-shadow:0 10px 28px rgba(99,102,241,.34), inset 0 1px 0 rgba(255,255,255,.14);}
.conv-msg.out .conv-bubble::before{content:"";position:absolute;right:-6px;bottom:10px;
  width:12px;height:12px;transform:rotate(45deg);
  background:rgba(122,104,246,.28);border-right:1px solid rgba(124,140,255,.36);
  border-bottom:1px solid rgba(124,140,255,.36);border-bottom-right-radius:3px;}

/* subject line reads like an email header */
.conv-subject{display:flex;align-items:center;gap:6px;font-weight:600;font-size:12.5px;
  margin-bottom:7px;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.09);color:#c9d6ff;}
.conv-msg.in .conv-subject{color:#a9c4ff;}

.conv-body{font-size:13.5px;line-height:1.6;}
/* make links inside replies clickable-looking */
.conv-body a{color:#8fb4ff;}

.conv-meta{margin-top:9px;padding-top:7px;border-top:1px solid rgba(255,255,255,.07);
  font-size:10.5px;opacity:.85;}
.conv-msg:hover .conv-meta{opacity:1;}

/* unread-style pulse on the newest incoming message */
.conv-msg.in.latest .conv-av{box-shadow:0 0 0 0 rgba(74,222,128,.55);animation:convPulse 2.4s ease-out 3;}
@keyframes convPulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,.5);}
  70%{box-shadow:0 0 0 10px rgba(74,222,128,0);}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}
}

@media (prefers-reduced-motion:reduce){
  .conv-msg,.conv-msg.in,.conv-msg.out{animation:none;}
  .conv-msg.in.latest .conv-av{animation:none;}
}

/* Give the thread its full width back — the boxed container was wasting
   horizontal space and squeezing every bubble. */
.conv-thread{
  max-height:none;overflow:visible;
  padding:2px 0;border:0;background:none;border-radius:0;gap:14px;}
.conv-msg{max-width:94%;}
@media(max-width:640px){.conv-msg{max-width:100%;}}

/* ============ Conversation cards match the Email Journey card ============ */
/* Full width, thin glowing border, no speech tails — reads as a card, not a chat bubble. */
.conv-msg{max-width:100%;width:100%;align-items:flex-start;}
.conv-bubble{flex:1;min-width:0;padding:13px 15px;border-radius:13px;}
.conv-msg .conv-bubble::before{display:none;}   /* drop the tails */

/* THEIRS — same base as .ej-card, with a soft green presence glow */
.conv-msg.in .conv-bubble{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  border:1px solid rgba(74,222,128,.28);
  border-radius:13px;
  box-shadow:0 0 0 1px rgba(74,222,128,.05), 0 6px 24px rgba(0,0,0,.25);
  backdrop-filter:none;-webkit-backdrop-filter:none;}
.conv-msg.in:hover .conv-bubble{
  transform:translateX(3px);
  border-color:rgba(74,222,128,.55);
  box-shadow:0 0 14px rgba(74,222,128,.16), 0 8px 30px rgba(0,0,0,.3);}

/* OURS — same card, brand-coloured glowing edge */
.conv-msg.out .conv-bubble{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  border:1px solid rgba(124,140,255,.30);
  border-radius:13px;
  box-shadow:0 0 0 1px rgba(124,140,255,.05), 0 6px 24px rgba(0,0,0,.25);}
.conv-msg.out:hover .conv-bubble{
  transform:translateX(-3px);
  border-color:rgba(124,140,255,.6);
  box-shadow:0 0 14px rgba(124,140,255,.18), 0 8px 30px rgba(0,0,0,.3);}

/* keep ours visually on the right without shrinking the card */
.conv-msg.out{flex-direction:row-reverse;}
.conv-msg.out .conv-meta{text-align:right;justify-content:flex-end;}
.conv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}

/* ==========================================================
   v33 — designation chips + recycle-bin note.
   (Conversation image styles live further up, with the rest
   of the .conv- rules.)
   ========================================================== */

/* ---------- Designation / job title under a name ---------- */
.designation{
  display:inline-block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.045em;
  text-transform:uppercase;
  line-height:1.3;
  margin-top:3px;
  padding:2px 9px;
  border-radius:20px;
  color:#c9b8ff;
  background:linear-gradient(135deg,rgba(79,116,255,.16),rgba(138,92,246,.16));
  border:1px solid rgba(138,92,246,.22);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Quieter variant: the name should lead, the title should support it.
   Long titles like "Head of E-Commerce Solutions" shout in all-caps
   with a border, so here we drop both. */
.designation-soft{
  text-transform:none;
  letter-spacing:.01em;
  font-weight:500;
  font-size:11.5px;
  padding:0;
  border:none;
  background:none;
  border-radius:0;
  color:#9aa0ad;
  margin-top:1px;
}
.lb-info .designation{margin-bottom:2px;}
.mini-profile .role{
  font-size:10.5px;font-weight:600;letter-spacing:.045em;text-transform:uppercase;
  color:#b6a4f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;
}

/* ---------- Recycle bin note for members ---------- */
.bin-note{
  display:flex;align-items:flex-start;gap:10px;
  margin-top:16px;padding:13px 15px;border-radius:12px;
  background:rgba(79,116,255,.06);
  border:1px solid rgba(79,116,255,.16);
  color:var(--text-dim);font-size:12.5px;line-height:1.55;
}
.bin-note svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:var(--accent);}

/* ==========================================================
   v34 — profile photos, animated Team pulse, glass member sheet
   ========================================================== */

/* ---------- Photos inside the existing initials circle ---------- */
.avatar.has-photo{padding:0;overflow:hidden;background:none;}
.avatar.has-photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}

/* ---------- Team pulse card ---------- */
.pulse-card{overflow:hidden;}
.pulse-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;}
.pulse-head .card-sub{font-size:12px;}

.pulse-toggle{
  position:relative;display:flex;flex-shrink:0;margin-left:auto;padding:3px;
  border-radius:11px;border:1px solid var(--line-strong);background:rgba(255,255,255,.03);
}
.pt-btn{
  position:relative;z-index:2;border:none;background:none;cursor:pointer;
  padding:4px 11px;border-radius:8px;font-size:11.5px;font-weight:600;
  color:var(--text-faint);transition:color .2s var(--ease);white-space:nowrap;
}
.pt-btn.active{color:#fff;}
.pt-glow{
  position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:8px;z-index:1;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 3px 12px rgba(79,116,255,.4);
  transition:left .32s var(--ease),width .32s var(--ease);
}

.pulse-list{display:flex;flex-direction:column;gap:4px;}

.pulse-row{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  padding:10px 11px;border-radius:13px;border:1px solid transparent;background:none;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
  animation:pulseRowIn .45s var(--ease) both;
  animation-delay:calc(var(--i,0) * 60ms);
}
@keyframes pulseRowIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.pulse-row:hover{background:rgba(255,255,255,.04);border-color:var(--line-strong);transform:translateX(2px);}
.pulse-row:active{transform:translateX(2px) scale(.995);}

/* your own row, so you can find yourself instantly */
.pulse-row.is-me{
  background:linear-gradient(135deg,rgba(79,116,255,.11),rgba(138,92,246,.07));
  border-color:rgba(138,92,246,.3);
}
.pulse-row.is-me:hover{background:linear-gradient(135deg,rgba(79,116,255,.16),rgba(138,92,246,.11));}

.pulse-rank{
  flex-shrink:0;width:26px;text-align:center;font-size:12px;font-weight:700;
  color:var(--text-faint);font-variant-numeric:tabular-nums;
}
.pulse-rank.gold,.pulse-rank.silver,.pulse-rank.bronze{font-size:15px;}
.pulse-row.is-top .pulse-av{
  box-shadow:0 0 0 2px rgba(250,204,21,.5),0 4px 14px rgba(250,204,21,.22);
}

.pulse-av{flex-shrink:0;}

.pulse-body{flex:1;min-width:0;display:block;}
.pulse-name-row{display:flex;align-items:baseline;gap:8px;}
.pulse-name{
  flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pulse-you{
  margin-left:6px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#c9b8ff;background:rgba(138,92,246,.2);padding:1px 6px;border-radius:20px;
  vertical-align:middle;
}
.pulse-val{
  flex-shrink:0;font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;
  color:var(--text);font-variant-numeric:tabular-nums;
}

.pulse-bar{
  display:block;height:6px;margin:7px 0 5px;border-radius:20px;overflow:hidden;
  background:rgba(255,255,255,.06);
}
.pulse-fill{
  display:block;height:100%;width:var(--pct,0%);border-radius:20px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .9s cubic-bezier(.16,1,.3,1);
  position:relative;overflow:hidden;
}
/* a slow sheen travelling along any bar that hit its goal */
.pulse-fill.full::after{
  content:"";position:absolute;inset:0;border-radius:20px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-100%);
  animation:pulseSheen 2.6s ease-in-out infinite;
}
@keyframes pulseSheen{0%{transform:translateX(-100%);}55%,100%{transform:translateX(200%);}}

.pulse-meta{display:block;font-size:11px;color:var(--text-faint);}

@media (prefers-reduced-motion: reduce){
  .pulse-row{animation:none;}
  .pulse-fill{transition:none;}
  .pulse-fill.full::after{animation:none;}
}

/* ---------- Member detail sheet (frosted glass) ---------- */
.member-sheet{
  position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:24px;
  background:rgba(4,4,8,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;transition:opacity .22s var(--ease);
}
.member-sheet.open{opacity:1;}
.member-sheet[hidden]{display:none;}

.member-sheet-card{
  position:relative;width:100%;max-width:470px;max-height:86vh;overflow-y:auto;
  padding:24px;border-radius:22px;
  background:linear-gradient(160deg,rgba(30,31,38,.92),rgba(19,20,25,.96));
  border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07);
  transform:translateY(16px) scale(.97);
  transition:transform .28s cubic-bezier(.16,1,.3,1);
}
.member-sheet.open .member-sheet-card{transform:none;}

.member-sheet-close{
  position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:9px;
  border:1px solid var(--line-strong);background:rgba(255,255,255,.05);
  color:var(--text-dim);display:grid;place-items:center;transition:all .18s var(--ease);
}
.member-sheet-close svg{width:14px;height:14px;}
.member-sheet-close:hover{background:rgba(255,255,255,.12);color:#fff;}

.ms-loading{display:flex;gap:6px;justify-content:center;padding:60px 0;}
.ms-loading span{
  width:9px;height:9px;border-radius:50%;background:var(--accent-2);
  animation:msBounce 1.2s ease-in-out infinite both;
}
.ms-loading span:nth-child(1){animation-delay:-.24s;}
.ms-loading span:nth-child(2){animation-delay:-.12s;}
@keyframes msBounce{0%,80%,100%{transform:scale(.5);opacity:.4;}40%{transform:scale(1);opacity:1;}}
.ms-empty{text-align:center;color:var(--text-faint);padding:50px 0;font-size:13.5px;}

.ms-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-right:34px;}
.ms-av{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-size:19px;font-weight:700;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 8px 22px rgba(79,116,255,.35);
}
.ms-av.has-photo{background:none;}
.ms-av img{width:100%;height:100%;object-fit:cover;display:block;}
.ms-id{min-width:0;flex:1;}
.ms-name{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;}
.ms-handle{font-size:11.5px;color:var(--text-faint);margin-top:2px;}

/* The streak badge is a traffic light for TODAY:
   red + pulsing while behind, amber on the way, green once the goal is hit. */
.ms-streak{
  flex-shrink:0;text-align:center;padding:8px 12px;border-radius:13px;
  border:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.ms-streak-n{display:block;font-size:19px;font-weight:700;line-height:1;}
.ms-streak-l{display:block;font-size:9px;opacity:.85;text-transform:uppercase;letter-spacing:.06em;margin-top:3px;}

/* behind — red, with a slow breathing glow so it asks for attention */
.ms-streak.is-behind{
  background:linear-gradient(135deg,rgba(239,68,68,.18),rgba(190,24,60,.12));
  border-color:rgba(248,113,113,.34);
  animation:streakPulse 2.4s ease-in-out infinite;
}
.ms-streak.is-behind .ms-streak-n,
.ms-streak.is-behind .ms-streak-l{color:#fca5a5;}
@keyframes streakPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.34);}
  50%    {box-shadow:0 0 16px 3px rgba(239,68,68,.30);}
}

/* on the way — amber */
.ms-streak.is-close{
  background:linear-gradient(135deg,rgba(251,191,36,.18),rgba(245,158,11,.12));
  border-color:rgba(251,191,36,.36);
  box-shadow:0 0 14px rgba(251,191,36,.16);
}
.ms-streak.is-close .ms-streak-n,
.ms-streak.is-close .ms-streak-l{color:#fcd34d;}

/* goal hit — green, with a soft steady glow */
.ms-streak.is-hit{
  background:linear-gradient(135deg,rgba(34,197,94,.20),rgba(21,128,61,.13));
  border-color:rgba(74,222,128,.4);
  box-shadow:0 0 18px rgba(34,197,94,.24);
}
.ms-streak.is-hit .ms-streak-n,
.ms-streak.is-hit .ms-streak-l{color:#86efac;}

@media (prefers-reduced-motion: reduce){
  .ms-streak.is-behind{animation:none;}
}

.ms-block{margin-bottom:20px;}
.ms-block-title{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-faint);margin-bottom:9px;
}
.ms-block-note{font-size:11px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--text-dim);}

.ms-goalbar{height:9px;border-radius:20px;background:rgba(255,255,255,.06);overflow:hidden;}
.ms-goalfill{
  display:block;height:100%;border-radius:20px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width 1s cubic-bezier(.16,1,.3,1);
}
.ms-goalfill.done{background:linear-gradient(90deg,#22c55e,#4ade80);}

.ms-split{display:flex;gap:16px;margin-top:8px;font-size:11.5px;color:var(--text-dim);}
.ms-split b{color:var(--text);font-weight:700;}
.ms-split .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;}
.ms-split .dot.ig{background:var(--accent-2);}
.ms-split .dot.em{background:var(--accent);}

/* 14 day sparkline */
.ms-spark{display:flex;align-items:flex-end;gap:4px;height:66px;}
.ms-spark-col{flex:1;height:100%;display:flex;align-items:flex-end;border-radius:5px;}
.ms-spark-bar{
  display:block;width:100%;border-radius:5px;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  opacity:.75;transition:height .7s cubic-bezier(.16,1,.3,1),opacity .2s;
}
.ms-spark-col:hover .ms-spark-bar{opacity:1;}
.ms-spark-col.today .ms-spark-bar{
  background:linear-gradient(180deg,#4ade80,#22c55e);opacity:1;
}
.ms-spark-x{display:flex;justify-content:space-between;margin-top:6px;font-size:10px;color:var(--text-faint);}

/* pipeline tiles */
.ms-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.ms-stat{
  text-align:center;padding:11px 6px;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  transition:transform .18s var(--ease),border-color .18s;
}
.ms-stat:hover{transform:translateY(-2px);border-color:var(--line-strong);}
.ms-stat.win{background:rgba(34,197,94,.09);border-color:rgba(34,197,94,.22);}
.ms-stat-v{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:700;line-height:1;}
.ms-stat.win .ms-stat-v{color:#4ade80;}
.ms-stat-l{font-size:9.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;margin-top:5px;}
.ms-stat-s{font-size:10px;color:var(--text-dim);margin-top:2px;font-weight:600;}

/* channel mix */
.ms-mix{height:9px;border-radius:20px;background:var(--accent);overflow:hidden;}
.ms-mix-ig{display:block;height:100%;background:var(--accent-2);transition:width 1s cubic-bezier(.16,1,.3,1);}

.ms-foot{
  margin-top:4px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--text-faint);text-align:center;
}
.ms-foot b{color:var(--text);}

@media (max-width:520px){
  .ms-stats{grid-template-columns:repeat(2,1fr);}
  .member-sheet{padding:14px;}
  .member-sheet-card{padding:20px;}
}

/* ---------- Photo upload controls ---------- */
.photo-row{display:flex;align-items:center;gap:14px;}
.photo-preview{
  width:64px;height:64px;border-radius:50%;flex-shrink:0;overflow:hidden;
  display:grid;place-items:center;
  background:rgba(255,255,255,.04);border:1px dashed var(--line-strong);
}
.photo-preview.has-photo{border-style:solid;border-color:var(--line-strong);background:none;}
.photo-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.pp-empty{font-size:9.5px;color:var(--text-faint);text-align:center;letter-spacing:.03em;}
.photo-actions{display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.photo-actions .btn{width:auto;}

/* sidebar: click your own avatar to change it */
.mp-photo{
  position:relative;border:none;background:none;padding:0;cursor:pointer;
  border-radius:50%;flex-shrink:0;display:block;line-height:0;
}
.mp-photo-hint{
  position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.6);opacity:0;transition:opacity .18s var(--ease);
}
.mp-photo-hint svg{width:15px;height:15px;color:#fff;}
.mp-photo:hover .mp-photo-hint{opacity:1;}

.shrink-0{flex-shrink:0;}
.pc-owner .avatar{display:inline-grid;vertical-align:middle;}

/* A zero still shows — a badge that vanishes reads as a bug. It keeps its
   traffic-light colour, so a 0 in red is a nudge rather than dead weight. */
.ms-streak-b{
  display:block;margin-top:4px;font-size:9px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-faint);opacity:.85;
}

/* ==========================================================
   v36 — Notes: glass cards, animated folders, table paging
   ========================================================== */

/* ---------- Folder tabs ---------- */
.folder-tabs{gap:9px;}
.folder-tab{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .2s var(--ease),border-color .2s var(--ease),
             box-shadow .2s var(--ease),color .2s var(--ease);
}
/* a sheen that sweeps across on hover */
.folder-tab::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  transform:skewX(-18deg);transition:left .55s var(--ease);
}
.folder-tab:hover{
  transform:translateY(-2px);
  border-color:rgba(138,92,246,.34);
  box-shadow:0 8px 22px rgba(0,0,0,.34);
  color:var(--text);
}
.folder-tab:hover::after{left:120%;}
.folder-tab.active{
  background:linear-gradient(135deg,rgba(79,116,255,.24),rgba(138,92,246,.18));
  color:#fff;border-color:rgba(138,92,246,.4);
  box-shadow:0 6px 20px rgba(79,116,255,.28);
}
.folder-tab .count{
  display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 6px;
  border-radius:20px;background:rgba(255,255,255,.12);
  font-size:10.5px;font-weight:700;opacity:1;
}
.folder-tab.active .count{background:rgba(255,255,255,.22);}
.folder-tab.manage:hover{border-color:var(--accent);}

/* ---------- Note cards ---------- */
.note-card{
  position:relative;overflow:hidden;
  background:linear-gradient(158deg,rgba(32,33,40,.72),rgba(20,21,26,.86));
  border:1px solid rgba(255,255,255,.075);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 10px 30px rgba(0,0,0,.26);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease);
  animation:noteIn .45s var(--ease) both;
  animation-delay:calc(var(--i,0) * 55ms);
}
@keyframes noteIn{from{opacity:0;transform:translateY(14px) scale(.99);}to{opacity:1;transform:none;}}

/* soft light that follows the top edge */
.note-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}
.note-card:hover{
  transform:translateY(-3px);
  border-color:rgba(138,92,246,.26);
  box-shadow:0 18px 44px rgba(0,0,0,.42),0 0 0 1px rgba(138,92,246,.08);
}

/* pinned notes get a warm edge so they read first */
.note-card:has(.note-pin){
  border-color:rgba(251,191,36,.26);
  background:linear-gradient(158deg,rgba(42,36,26,.7),rgba(22,20,17,.88));
}
.note-card:has(.note-pin)::before{
  background:linear-gradient(90deg,transparent,rgba(251,191,36,.4),transparent);
}
.note-pin{color:#fbbf24;filter:drop-shadow(0 0 6px rgba(251,191,36,.5));}

.note-body{transition:color .2s var(--ease);}
.note-card:hover .note-body{color:var(--text);}

.folder-chip{
  background:linear-gradient(135deg,rgba(79,116,255,.2),rgba(138,92,246,.16));
  border:1px solid rgba(138,92,246,.24);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.folder-chip:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(79,116,255,.26);}

/* keyword pills */
.note-keywords span,.note-keywords .kw{
  transition:transform .16s var(--ease),background .16s var(--ease);
}
.note-keywords span:hover,.note-keywords .kw:hover{
  transform:translateY(-1px);background:rgba(138,92,246,.2);
}

/* selection state */
.note-card:has(.note-select-cb:checked){
  border-color:rgba(79,116,255,.5);
  box-shadow:0 0 0 1px rgba(79,116,255,.3),0 14px 36px rgba(79,116,255,.16);
}

/* comment avatars sit flush */
.note-foot .avatar{flex-shrink:0;}

@media (prefers-reduced-motion: reduce){
  .note-card{animation:none;}
  .note-card:hover,.folder-tab:hover{transform:none;}
}

/* ---------- "Showing N of M" + Load more ---------- */
.table-more{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 4px 2px;margin-top:6px;
  border-top:1px solid var(--line);
  font-size:12.5px;color:var(--text-faint);
}
.table-more b{color:var(--text);font-weight:700;}
.table-more .btn{margin-left:auto;}
.table-more .btn + .btn{margin-left:0;}

/* ---------- Attributed sending ("on behalf of") ---------- */
.conv-sender{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 10px;padding:9px 11px;border-radius:11px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-strong);
}
.conv-sender[hidden]{display:none;}
.conv-sender label{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-faint);margin:0;
}
.conv-sender select{
  flex:1;min-width:150px;padding:6px 10px;border-radius:9px;
  background:var(--bg-card-2);border:1px solid var(--line-strong);
  color:var(--text);font-size:12.5px;
}
.conv-sender-note{
  flex-basis:100%;font-size:11.5px;color:var(--text-faint);display:none;
}
.conv-sender-note.on{
  display:block;color:#fcd34d;
}

/* the badge on a message that was sent for someone else */
.behalf-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10.5px;font-weight:600;padding:1px 8px;border-radius:20px;
  background:linear-gradient(135deg,rgba(251,191,36,.16),rgba(245,158,11,.1));
  border:1px solid rgba(251,191,36,.3);
  color:#fcd34d;white-space:nowrap;
}

/* ---------- Deliverability checker ---------- */
.del-summary{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.del-pill{
  display:flex;align-items:center;gap:7px;padding:8px 15px;border-radius:20px;
  font-size:12.5px;font-weight:600;border:1px solid var(--line-strong);
  background:rgba(255,255,255,.03);color:var(--text-dim);
}
.del-pill b{font-size:15px;font-weight:700;}
.del-pill.pass{background:rgba(34,197,94,.1);border-color:rgba(74,222,128,.28);color:#86efac;}
.del-pill.warn{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.28);color:#fcd34d;}
.del-pill.fail{background:rgba(239,68,68,.1);border-color:rgba(248,113,113,.3);color:#fca5a5;}

.del-list{display:flex;flex-direction:column;gap:10px;}
.del-item{
  display:flex;gap:13px;padding:15px 17px;border-radius:15px;
  background:linear-gradient(158deg,rgba(30,31,38,.7),rgba(19,20,25,.84));
  border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:delIn .4s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms);
}
@keyframes delIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.del-item.pass{border-color:rgba(74,222,128,.2);}
.del-item.warn{border-color:rgba(251,191,36,.24);}
.del-item.fail{border-color:rgba(248,113,113,.28);box-shadow:0 0 22px rgba(239,68,68,.08);}

.del-ico{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:14px;font-weight:700;
}
.del-item.pass .del-ico{background:rgba(34,197,94,.18);color:#4ade80;}
.del-item.warn .del-ico{background:rgba(251,191,36,.18);color:#fbbf24;}
.del-item.fail .del-ico{background:rgba(239,68,68,.18);color:#f87171;}

.del-body{min-width:0;flex:1;}
.del-name{font-size:14px;font-weight:700;margin-bottom:3px;}
.del-detail{font-size:12.5px;color:var(--text-dim);line-height:1.6;}
.del-fix{
  margin-top:8px;padding:9px 11px;border-radius:9px;font-size:12px;line-height:1.6;
  background:rgba(79,116,255,.07);border:1px solid rgba(79,116,255,.16);color:var(--text-dim);
  word-break:break-word;
}
.del-fix b{color:#8fa8ff;}

@media (prefers-reduced-motion: reduce){ .del-item{animation:none;} }

/* ==========================================================
   v38 — sequences, do-not-contact, Today priority list
   ========================================================== */

/* ---------- tabs ---------- */
.seq-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.seq-tab{
  padding:8px 16px;border-radius:20px;font-size:12.5px;font-weight:600;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--line-strong);color:var(--text-dim);
  transition:all .2s var(--ease);
}
.seq-tab:hover{color:var(--text);background:rgba(255,255,255,.06);}
.seq-tab.active{
  background:linear-gradient(135deg,rgba(79,116,255,.24),rgba(138,92,246,.18));
  color:#fff;border-color:rgba(138,92,246,.4);
}
.seq-count{
  display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:5px;
  border-radius:20px;background:rgba(255,255,255,.16);font-size:10px;font-weight:700;
}
.seq-pane{display:none;}
.seq-pane.active{display:block;}

/* ---------- cadence cards ---------- */
.seq-card{
  margin-bottom:14px;
  background:linear-gradient(158deg,rgba(32,33,40,.72),rgba(20,21,26,.86));
  border:1px solid rgba(255,255,255,.075);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:noteIn .42s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms);
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.seq-card:hover{transform:translateY(-2px);border-color:rgba(138,92,246,.24);}
.seq-card.off{opacity:.6;}
.seq-head{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px;}
.seq-name{font-family:'Space Grotesk',sans-serif;font-size:15.5px;font-weight:700;}
.seq-off-tag{
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:2px 7px;border-radius:20px;background:rgba(255,255,255,.08);color:var(--text-faint);
  vertical-align:middle;margin-left:6px;
}
.seq-desc{font-size:12.5px;color:var(--text-faint);margin-top:2px;}
.seq-stats{display:flex;gap:14px;font-size:11.5px;color:var(--text-faint);white-space:nowrap;}
.seq-stats b{color:var(--text);font-size:14px;font-weight:700;}

.seq-timeline{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;}
.seq-step{
  display:flex;gap:11px;align-items:flex-start;padding:9px 12px;border-radius:10px;
  background:rgba(255,255,255,.028);border-left:2px solid var(--accent-2);
}
.seq-step-day{
  flex-shrink:0;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:#a99af0;min-width:46px;padding-top:1px;
}
.seq-step-body{font-size:12.5px;color:var(--text-dim);line-height:1.55;}
.seq-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:11px;border-top:1px solid var(--line);}

.seq-hint{
  padding:14px 16px;border-radius:12px;font-size:12.5px;line-height:1.65;color:var(--text-dim);
  background:rgba(79,116,255,.06);border:1px solid rgba(79,116,255,.16);
}
.seq-hint b{color:var(--text);}
.seq-hint code{
  background:rgba(138,92,246,.16);padding:1px 6px;border-radius:5px;
  font-size:11.5px;color:#c9b8ff;
}
.seq-stop-tag{
  font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:20px;
  background:rgba(255,255,255,.06);color:var(--text-faint);
}

/* step editor */
.field-label-row{display:flex;align-items:center;justify-content:space-between;margin:16px 0 8px;}
.step-row{
  padding:12px;border-radius:11px;margin-bottom:10px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-strong);
}
.step-row-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap;}
.step-no{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#a99af0;}
.step-row-head label{font-size:12px;color:var(--text-dim);margin:0;display:flex;align-items:center;gap:6px;}
.step-delay{width:56px;padding:4px 7px;border-radius:7px;background:var(--bg-card-2);
  border:1px solid var(--line-strong);color:var(--text);font-size:12px;}
.step-del{
  margin-left:auto;width:24px;height:24px;border-radius:7px;border:none;
  background:rgba(239,68,68,.14);color:#f87171;font-size:15px;line-height:1;cursor:pointer;
}
.step-row input[type=text],.step-row textarea{width:100%;margin-bottom:7px;}
.step-row textarea{resize:vertical;}

/* ---------- do not contact ---------- */
.dnc-add{display:flex;gap:9px;flex-wrap:wrap;}
.dnc-add input{flex:1;min-width:170px;}
.dnc-tag{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 9px;border-radius:20px;
}
.dnc-tag.bounce{background:rgba(239,68,68,.16);color:#fca5a5;}
.dnc-tag.unsubscribe{background:rgba(251,191,36,.16);color:#fcd34d;}
.dnc-tag.manual{background:rgba(255,255,255,.08);color:var(--text-dim);}
.dnc-tag.complaint{background:rgba(239,68,68,.22);color:#fca5a5;}

/* ---------- Today ---------- */
.today-scope{display:flex;gap:6px;}
.today-scope .btn.active{
  background:linear-gradient(135deg,rgba(79,116,255,.24),rgba(138,92,246,.18));
  color:#fff;border-color:rgba(138,92,246,.4);
}

.today-list{display:flex;flex-direction:column;gap:9px;}
.today-row{
  display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;cursor:pointer;
  background:linear-gradient(158deg,rgba(32,33,40,.7),rgba(20,21,26,.86));
  border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:noteIn .42s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms);
  transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.today-row:hover{transform:translateX(3px);border-color:rgba(138,92,246,.3);box-shadow:0 12px 32px rgba(0,0,0,.34);}
.today-row.hot{border-color:rgba(239,68,68,.3);}
.today-row.warm{border-color:rgba(251,191,36,.24);}

.today-rank{
  flex-shrink:0;width:34px;font-size:12px;font-weight:700;color:var(--text-faint);
  font-variant-numeric:tabular-nums;
}
.today-flame{
  flex-shrink:0;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid var(--line-strong);
}
.today-row.hot .today-flame{
  background:linear-gradient(135deg,rgba(239,68,68,.22),rgba(190,24,60,.14));
  border-color:rgba(248,113,113,.36);
  animation:streakPulse 2.6s ease-in-out infinite;
}
.today-row.warm .today-flame{
  background:linear-gradient(135deg,rgba(251,191,36,.2),rgba(245,158,11,.12));
  border-color:rgba(251,191,36,.34);
}
.today-score{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;}
.today-row.hot .today-score{color:#fca5a5;}
.today-row.warm .today-score{color:#fcd34d;}

.today-main{flex:1;min-width:0;}
.today-name{font-size:14px;font-weight:700;}
.today-co{font-size:12px;font-weight:500;color:var(--text-faint);margin-left:7px;}
.today-why{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;}
.why-chip{
  font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:20px;
  background:rgba(138,92,246,.14);border:1px solid rgba(138,92,246,.2);color:#c9b8ff;
}
.today-owner{font-size:11px;color:var(--text-faint);margin-top:4px;}
.today-act{display:flex;align-items:center;gap:9px;flex-shrink:0;}

@media (max-width:640px){
  .today-row{flex-wrap:wrap;}
  .today-act{width:100%;justify-content:flex-end;}
}
@media (prefers-reduced-motion: reduce){
  .seq-card,.today-row{animation:none;}
  .today-row:hover{transform:none;}
  .today-row.hot .today-flame{animation:none;}
}

/* step editor fields (referenced by sequences.js) */
.step-subject,.step-body{
  padding:8px 11px;border-radius:9px;background:var(--bg-card-2);
  border:1px solid var(--line-strong);color:var(--text);
  font-family:inherit;font-size:12.5px;line-height:1.55;
}
.step-subject:focus,.step-body:focus{outline:none;border-color:var(--accent);}

/* shared simple table used by sequences, recycle bin and the DNC list */
.data-table{font-size:13px;}
.data-table th{
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-faint);background:rgba(255,255,255,.02);
}
.data-table tr:hover td{background:rgba(255,255,255,.02);}

/* ---------- Best time to send ---------- */
.timing-card{margin-bottom:16px;}
.timing-head{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.timing-head .card-sub b{color:#c9b8ff;font-weight:700;}
.timing-total{
  flex-shrink:0;font-size:11.5px;color:var(--text-faint);white-space:nowrap;
  padding:6px 12px;border-radius:20px;background:rgba(255,255,255,.04);
  border:1px solid var(--line-strong);height:fit-content;
}
.timing-total b{color:var(--text);font-size:14px;font-weight:700;}

.timing-chart{display:flex;align-items:flex-end;gap:3px;height:74px;}
.timing-col{flex:1;height:100%;display:flex;align-items:flex-end;border-radius:4px;}
.timing-bar{
  display:block;width:100%;border-radius:4px;
  background:linear-gradient(180deg,rgba(138,92,246,.75),rgba(79,116,255,.55));
  transition:height .8s cubic-bezier(.16,1,.3,1),opacity .18s;
}
.timing-col:hover .timing-bar{opacity:.85;}
.timing-col.best .timing-bar{
  background:linear-gradient(180deg,#4ade80,#22c55e);
  box-shadow:0 0 14px rgba(34,197,94,.35);
}
.timing-axis{
  display:flex;justify-content:space-between;margin-top:6px;
  font-size:10px;color:var(--text-faint);
}
.timing-note{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--text-faint);line-height:1.6;
}

/* ---------- Instructions on the dashboard ----------
   Surfaced here because this is the page people actually open. A notice
   only visible on another page is a notice that gets missed. */
.dash-instructions{
  margin-bottom:18px;padding:16px 18px;border-radius:16px;
  background:linear-gradient(150deg,rgba(34,211,238,.1),rgba(138,92,246,.07));
  border:1px solid rgba(34,211,238,.26);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:diIn .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes diIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.di-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.di-ico{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:17px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(34,211,238,.24),rgba(138,92,246,.18));
  border:1px solid rgba(34,211,238,.3);
  animation:diPulse 2.6s ease-in-out infinite;
}
@keyframes diPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,.34);}
  55%{box-shadow:0 0 0 9px rgba(34,211,238,0);}
}
.di-title{font-size:14.5px;font-weight:700;}
.di-sub{font-size:11.5px;color:var(--text-faint);margin-top:1px;}
.di-head .btn{margin-left:auto;}

.di-item{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;margin-bottom:7px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
}
.di-item.high{border-color:rgba(251,191,36,.3);}
.di-item.urgent{border-color:rgba(248,113,113,.36);background:rgba(239,68,68,.07);}
.di-pri{
  flex-shrink:0;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  padding:2px 8px;border-radius:20px;background:rgba(255,255,255,.08);color:var(--text-faint);
}
.di-item.high .di-pri{background:rgba(251,191,36,.2);color:#fcd34d;}
.di-item.urgent .di-pri{background:rgba(239,68,68,.22);color:#fca5a5;}
.di-body{flex:1;min-width:0;}
.di-name{font-size:13px;font-weight:700;}
.di-text{font-size:12px;color:var(--text-dim);line-height:1.5;margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.di-meta{font-size:10.5px;color:var(--text-faint);margin-top:3px;}
.di-more{font-size:11.5px;color:var(--text-faint);text-align:center;padding-top:4px;}

@media (prefers-reduced-motion: reduce){
  .dash-instructions{animation:none;}
  .di-ico{animation:none;}
}

/* ---------- Manager's team strip on the dashboard ---------- */
.my-team-strip{
  margin-bottom:18px;padding:16px 18px;border-radius:16px;
  background:linear-gradient(150deg,rgba(59,130,246,.11),rgba(138,92,246,.07));
  border:1px solid rgba(96,165,250,.26);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:diIn .5s cubic-bezier(.16,1,.3,1) both;
}
.mt-head{display:flex;align-items:center;gap:12px;margin-bottom:13px;flex-wrap:wrap;}
.mt-ico{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:16px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(59,130,246,.24),rgba(138,92,246,.18));
  border:1px solid rgba(96,165,250,.3);
}
.mt-title{font-size:14.5px;font-weight:700;}
.mt-sub{font-size:11.5px;color:var(--text-faint);margin-top:1px;}
.mt-head .btn{margin-left:auto;}

.mt-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:10px;}
.mt-card{
  display:block;padding:12px 14px;border-radius:12px;text-decoration:none;color:inherit;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
  animation:diIn .42s var(--ease) both;animation-delay:calc(var(--i,0)*55ms);
}
.mt-card:hover{transform:translateY(-2px);border-color:rgba(96,165,250,.42);
  box-shadow:0 12px 28px rgba(0,0,0,.34);}
.mt-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mt-nums{display:flex;gap:12px;font-size:11px;color:var(--text-faint);margin:5px 0 7px;}
.mt-nums b{color:var(--text);font-size:13px;font-weight:700;}
.mt-bar{height:5px;border-radius:20px;background:rgba(255,255,255,.07);overflow:hidden;}
.mt-bar span{display:block;height:100%;border-radius:20px;
  background:linear-gradient(90deg,#3b82f6,var(--accent-2));
  transition:width .9s cubic-bezier(.16,1,.3,1);}

@media (prefers-reduced-motion: reduce){
  .my-team-strip,.mt-card{animation:none;}
  .mt-card:hover{transform:none;}
}

/* ---------- Team Leads list ---------- */
.tl-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.tl-stat{
  padding:11px 16px;border-radius:13px;min-width:96px;
  background:linear-gradient(158deg,rgba(32,33,40,.7),rgba(20,21,26,.86));
  border:1px solid var(--line);
}
.tl-stat b{display:block;font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;line-height:1;}
.tl-stat span{display:block;font-size:9.5px;color:var(--text-faint);text-transform:uppercase;
  letter-spacing:.06em;margin-top:5px;white-space:nowrap;}
.tl-stat.replied{border-color:rgba(138,92,246,.3);}
.tl-stat.replied b{color:#c9b8ff;}
.tl-stat.interested{border-color:rgba(251,191,36,.3);}
.tl-stat.interested b{color:#fcd34d;}
.tl-stat.won{border-color:rgba(74,222,128,.3);}
.tl-stat.won b{color:#86efac;}

.tl-filters{display:flex;gap:9px;flex-wrap:wrap;align-items:center;}
.tl-filters select,.tl-filters input{
  padding:8px 12px;border-radius:10px;background:var(--bg-card-2);
  border:1px solid var(--line-strong);color:var(--text);font-size:13px;
}
.tl-filters input[type=search]{flex:1;min-width:180px;}

.tl-table{width:100%;border-collapse:collapse;}
.tl-table th{text-align:left;padding:11px 14px;}
.tl-table td{padding:11px 14px;border-top:1px solid rgba(255,255,255,.055);vertical-align:middle;}
.tl-row{cursor:pointer;transition:background .16s var(--ease),box-shadow .16s var(--ease);
  animation:tlIn .35s var(--ease) both;animation-delay:calc(var(--i,0)*18ms);
  box-shadow:inset 3px 0 0 0 transparent;}
@keyframes tlIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
.tl-row:hover{box-shadow:inset 3px 0 0 0 var(--accent);}
.tl-row:hover td{background:rgba(79,116,255,.045);}
.tl-name{font-weight:600;font-size:13.5px;}
.tl-co{font-size:11.5px;color:var(--text-faint);margin-top:1px;}
.tl-owner{font-size:12.5px;color:var(--text-dim);white-space:nowrap;display:flex;align-items:center;gap:7px;}
.tl-owner-av{width:22px;height:22px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:9.5px;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));}
.tl-chan{font-size:11px;padding:2px 9px;border-radius:20px;
  background:rgba(255,255,255,.06);color:var(--text-dim);text-transform:capitalize;}
.tl-date{font-size:12px;color:var(--text-faint);white-space:nowrap;}
.tl-act{font-size:11px;padding:2px 8px;border-radius:20px;margin-right:4px;
  background:rgba(79,116,255,.14);color:#a5c0ff;white-space:nowrap;}
.tl-act.click{background:rgba(34,197,94,.16);color:#86efac;}

.status-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;white-space:nowrap;
  display:inline-block;letter-spacing:.01em;border:1px solid transparent;}
.status-badge.contacted{background:rgba(255,255,255,.06);color:var(--text-dim);border-color:rgba(255,255,255,.08);}
.status-badge.replied{background:rgba(138,92,246,.14);color:#c9b8ff;border-color:rgba(138,92,246,.3);}
.status-badge.interested{background:rgba(251,191,36,.14);color:#fcd34d;border-color:rgba(251,191,36,.3);}
.status-badge.closed_won{background:rgba(52,211,153,.16);color:#6ee7b7;border-color:rgba(52,211,153,.35);
  box-shadow:0 0 10px -3px rgba(52,211,153,.5);}
.status-badge.closed_lost{background:rgba(248,113,113,.12);color:#fca5a5;border-color:rgba(248,113,113,.28);}
.status-badge.locked{background:rgba(255,255,255,.04);color:var(--text-faint);border-color:rgba(255,255,255,.06);}

@media (max-width:760px){
  .tl-table th:nth-child(3),.tl-table td:nth-child(3),
  .tl-table th:nth-child(5),.tl-table td:nth-child(5){display:none;}
}
@media (prefers-reduced-motion: reduce){ .tl-row{animation:none;} }

/* ---------- Site-wide incoming-message popup (glassy toast, top-right) ----------
   Chat's own version lives in chat.css too; this copy is here so the SAME
   look works on every other page (Dashboard, Mail, Replies, etc.) where
   chat.css isn't loaded. */
.chat-popups{
  position:fixed;top:20px;right:20px;z-index:9999;
  display:flex;flex-direction:column;gap:10px;width:min(360px,calc(100vw - 40px));
  pointer-events:none;
}
.chat-popup{
  pointer-events:auto;cursor:pointer;padding:13px 14px;border-radius:16px;
  background:linear-gradient(160deg,rgba(24,25,31,.94),rgba(17,18,22,.97));
  border:1px solid rgba(138,92,246,.28);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 18px 44px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.02) inset;
  transform:translateX(24px) scale(.96);opacity:0;
  transition:transform .32s cubic-bezier(.2,.9,.25,1.1),opacity .28s ease;
}
.chat-popup.in{transform:translateX(0) scale(1);opacity:1;}
.chat-popup.out{transform:translateX(24px) scale(.97);opacity:0;}
.chat-popup:hover{border-color:rgba(138,92,246,.5);}
.cpop-row{display:flex;align-items:flex-start;gap:10px;}
.cpop-av{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-size:14px;font-weight:700;color:#fff;overflow:hidden;
}
.cpop-av.has-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.cpop-body{flex:1;min-width:0;}
.cpop-name{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cpop-in{font-weight:500;color:var(--text-faint);}
.cpop-msg{
  font-size:12.5px;color:var(--text-dim);margin-top:2px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cpop-close{
  flex-shrink:0;width:20px;height:20px;border-radius:50%;color:var(--text-faint);
  font-size:15px;line-height:1;display:grid;place-items:center;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.cpop-close:hover{background:rgba(255,255,255,.08);color:#fff;}
@media (prefers-reduced-motion: reduce){
  .chat-popup{transition:opacity .2s ease;transform:none;}
}

/* Follow-up action in the lead drawer — reads as a sibling of "Reply by
   email" but distinct, and turns amber once the follow-up is overdue. */
.conv-fu-btn{
  background:rgba(138,92,246,.16);border:1px solid rgba(138,92,246,.42);color:#c4b5fd;
}
.conv-fu-btn:hover{background:rgba(138,92,246,.3);color:#fff;}
.conv-fu-btn.overdue{
  background:rgba(240,163,94,.16);border-color:rgba(240,163,94,.5);color:#f0a35e;
}
.conv-fu-btn.overdue:hover{background:rgba(240,163,94,.3);color:#fff;}

/* ============================================================
   Mobile overflow guard
   ============================================================
   The dashboard cards all appeared too wide on a phone, and the whole
   page scaled down to fit. The cause was one element, not the layout:
   the Recent outreach table is five columns with nowrap headers, and a
   grid item defaults to min-width:auto — so it refuses to shrink below
   its content, stretches its grid column, and every card sharing that
   column is stretched with it.

   Two rules fix it. Let grid children shrink, and let a table that is
   genuinely too wide scroll inside its own card instead of pushing the
   page out. Nothing is hidden or truncated — the table scrolls
   sideways under your finger, which is the normal way to read a wide
   table on a phone.
   ============================================================ */
@media (max-width: 880px){
  /* the actual fix: children may be narrower than their content */
  .grid-2, .grid-2 > *,
  .stat-grid > *,
  .card{ min-width: 0; }

  /* a wide table scrolls within its card rather than widening the page */
  .card{ overflow-x: auto; }
  .card > table,
  .card .table-wrap > table{
    display: block;
    width: max-content;
    min-width: 100%;
    overflow-x: auto;
  }

  /* long unbroken strings — email addresses, URLs, company names —
     are the other classic way a card gets shoved wide */
  .cell-name, .cell-sub, .card-title, .card-sub{ overflow-wrap: anywhere; }
}

/* Belt and braces: nothing should ever scroll the PAGE sideways. A card
   that still misbehaves will scroll itself, not drag the layout with it. */
@media (max-width: 880px){
  html, body{ max-width: 100%; overflow-x: hidden; }
}

/* ============================================================
   Phone layout
   ============================================================
   Fitting the screen and being usable on it are different things. At
   380px the dashboard fitted, but four stat cards stacked one per row
   meant scrolling past four numbers to reach anything, desktop padding
   ate a third of the width, and the outreach table scrolled sideways —
   which people don't discover and don't enjoy.

   Everything here is spacing and arrangement. No feature behaves
   differently on a phone; it just stops wasting the space.
   ============================================================ */
@media (max-width: 560px){

  /* ---- the four headline numbers, two-up ----
     Four numbers are a glance, not a scroll. Two columns fits them on
     one screen with the chart still visible underneath. */
  .stat-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
  .stat-card{ padding: 13px; }
  .stat-icon{ width: 28px; height: 28px; border-radius: 8px; margin-bottom: 8px; }
  .stat-icon svg{ width: 14px; height: 14px; }
  .stat-value{ font-size: 21px; }
  .stat-label{ font-size: 11px; }

  /* ---- reclaim the padding ----
     22px each side of a 380px screen is 12% of the width spent on
     nothing. 15px still reads as a card. */
  .card{ padding: 15px; }
  .grid-2{ gap: 14px; }
  .main{ padding: 16px 12px 44px; }

  /* ---- headings sized for the screen they are on ---- */
  .page-title{ font-size: 21px; }
  .page-sub{ font-size: 12.5px; }
  .topbar{ gap: 12px; margin-bottom: 18px; }
  .card-title{ font-size: 13.5px; }

  /* ---- a primary action worth hitting with a thumb ---- */
  .topbar .btn{ width: 100%; padding: 13px 18px; }

  /* ---- the outreach table, as rows instead of a sideways scroll ----
     Sideways scrolling inside a card is a thing people do not find.
     Each row becomes a block: the prospect on its own line, then the
     channel, status and date inline underneath like a caption. */
  .card > table{ display: block; width: 100%; min-width: 0; }
  .card > table thead{ display: none; }
  .card > table tbody{ display: block; }
  .card > table tr{
    display: block; padding: 11px 0;
    border-top: 1px solid var(--line);
  }
  .card > table tr:first-child{ border-top: 0; }
  .card > table td{
    display: inline-block; border: 0; padding: 0 10px 0 0;
    vertical-align: middle;
  }
  .card > table td:first-child{ display: block; padding: 0 0 6px; }
  .card > table td:empty{ display: none; }

  /* ---- team pulse, tightened ---- */
  .pulse-row{ padding: 9px 8px; gap: 9px; }

  /* ---- long values must wrap rather than push ---- */
  .cell-name, .cell-sub{ overflow-wrap: anywhere; }
}

/* Very small phones: one column of stats is genuinely better than two
   squeezed ones. */
@media (max-width: 340px){
  .stat-grid{ grid-template-columns: 1fr; }
}

/* ---- Team Overview: the member rows on a phone ----
   The header is space-between: name and role badge on the left, the
   total and "n won · n% rate" on the right. A role like "CREATIVE
   PROJECT DIRECTOR" eats the width, and the score column collapses to
   about 40px — so "0 won · 0% rate" wraps one word per line beside a
   giant number. Nothing overflows; it is just squeezed.

   On a phone the score goes underneath instead, on one line, where
   there is room for it to read as a sentence. */
@media (max-width: 560px){
  .member-head{ flex-wrap: wrap; gap: 10px; }
  .member-who{ flex: 1 1 100%; min-width: 0; }
  .member-who > div{ min-width: 0; }

  .member-score{
    flex: 1 1 100%;
    text-align: left !important;
    display: flex; align-items: baseline; gap: 8px;
    padding-left: 50px;              /* line up under the name, past the avatar */
  }
  .member-score-num{ font-size: 16px !important; }
  .member-score-sub{ white-space: nowrap; }

  /* a long job title should wrap rather than push everything sideways */
  .member-head .designation{
    white-space: normal; overflow-wrap: anywhere;
    font-size: 10px; line-height: 1.35;
  }
}


/* ---------- follow-up panel on the lead window (entrydetail.js) ---------- */
.ed-fu{padding:12px 14px;border-radius:14px;border:1px solid rgba(138,92,246,.28);background:linear-gradient(160deg,rgba(138,92,246,.08),rgba(255,255,255,.01));}
.ed-fu-now{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;}
.ed-fu-when{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;}
.ed-fu-now.late .ed-fu-when{color:#f87171;}
.ed-fu-p{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:rgba(138,92,246,.14);color:#8a5cf6;}
.ed-fu-p.p-high{background:rgba(255,122,89,.14);color:#ff7a59;} .ed-fu-p.p-low{background:rgba(139,143,156,.14);color:#8b8f9c;}
.ed-fu-note{flex-basis:100%;font-size:12.5px;color:var(--text-dim);}
.ed-fu-none{font-size:13px;color:var(--text-dim);margin-bottom:10px;}
.ed-fu-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;}
.ed-fu-k{font-size:11.5px;color:var(--text-faint);min-width:58px;}
.ed-fu-q{padding:6px 10px;border-radius:9px;font-size:12px;font-weight:600;color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--line);transition:all .15s;}
.ed-fu-q:hover{background:rgba(138,92,246,.16);border-color:rgba(138,92,246,.4);}
.ed-fu-q.on{background:rgba(138,92,246,.24);border-color:rgba(138,92,246,.6);}
.ed-fu-date{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:5px 8px;font-size:12px;}
.ed-fu-seg{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);}
.ed-fu-seg button{padding:5px 10px;border-radius:7px;font-size:12px;font-weight:600;color:var(--text-dim);background:none;border:0;}
.ed-fu-seg button.on{background:rgba(138,92,246,.2);color:#fff;}
.ed-fu-seg button.p-high.on{background:rgba(255,122,89,.2);color:#ff7a59;}
.ed-fu-text{flex:1 1 200px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:7px 10px;font-size:12.5px;}

.ed-fu-sug{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 11px;border-radius:11px;margin-bottom:10px;font-size:12.5px;
  background:linear-gradient(135deg,rgba(138,92,246,.14),rgba(138,92,246,.04));border:1px solid rgba(138,92,246,.3);}
.ed-fu-sug > div{flex:1 1 220px;}
.ed-fu-sug span{color:#c4b5fd;font-weight:600;}
.ed-fu-sug small{display:block;margin-top:3px;color:var(--text-dim);font-size:11.8px;line-height:1.45;}
.ed-fu-sug.s-reply,.ed-fu-sug.s-interested,.ed-fu-sug.s-talking{background:linear-gradient(135deg,rgba(255,122,89,.15),rgba(255,122,89,.04));border-color:rgba(255,122,89,.35);}
.ed-fu-sug.s-autopilot,.ed-fu-sug.s-closed,.ed-fu-sug.s-rest{background:rgba(255,255,255,.03);border-color:var(--line);}
.ed-fu-sug[hidden]{display:none !important;}

/* fit score chip on lead lists */
.fit-chip{display:inline-flex;align-items:center;margin:4px 0 0 4px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.02em;vertical-align:middle;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--text-dim,#9b9ba6);}
.fit-chip.hi{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.35);color:#86efac;}
.fit-chip.mid{background:rgba(245,180,80,.1);border-color:rgba(245,180,80,.35);color:#f5c26b;}