/* ==========================================================
   VelarVisuals Team CRM — Design System
   Ported from velarvisuals.com: 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-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;}
.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);}

.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;}
.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;}
}