/* ============================================================
   LeadFlow AI  |  design tokens
   ============================================================ */
:root{
  --blue-50:#eff5ff;  --blue-100:#dbe8fe; --blue-200:#bfd6fe;
  --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8;
  --ink-900:#0b1220; --ink-800:#131c2e; --ink-700:#243044;
  --ink-500:#5b6779; --ink-400:#7d8797; --ink-300:#a6aebc;
  --line:#e8ebf0;  --line-soft:#f1f3f7;
  --bg:#f7f8fb;    --card:#ffffff;
  --green:#0fa958; --green-bg:#e8f8ef;
  --amber:#c2790a; --amber-bg:#fdf4e3;
  --red:#dc3545;   --red-bg:#fdecee;
  --violet:#7c3aed;--violet-bg:#f3edff;
  --cyan:#0891b2;  --cyan-bg:#e6f7fb;

  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --sh-1:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
  --sh-2:0 4px 10px rgba(16,24,40,.05), 0 12px 28px rgba(16,24,40,.06);
  --sh-3:0 18px 48px rgba(16,24,40,.14);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink-900);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  font-feature-settings:'cv02','cv03','ss01';
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input{font:inherit}
svg{width:100%;height:100%;display:block}
::selection{background:var(--blue-100)}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#d9dee6;border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#c3cad6;background-clip:content-box;border:3px solid transparent}
*::-webkit-scrollbar-track{background:transparent}

/* ============================================================
   layout
   ============================================================ */
.app{display:flex;min-height:100vh}
.sidebar{
  width:252px;flex:0 0 252px;background:#fff;border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.main{flex:1;min-width:0;display:flex;flex-direction:column}

/* brand */
.brand{display:flex;gap:11px;align-items:center;padding:20px 18px 16px}
.brand-mark{
  width:36px;height:36px;flex:0 0 36px;border-radius:11px;color:#fff;padding:8px;
  background:linear-gradient(135deg,var(--blue-600),var(--violet));
  box-shadow:0 6px 16px rgba(37,99,235,.32);
}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-weight:800;font-size:15.5px;letter-spacing:-.3px}
.brand-name span{color:var(--blue-600)}
.brand-sub{font-size:11px;color:var(--ink-400);font-weight:500}

/* nav */
.nav{flex:1;overflow-y:auto;padding:6px 12px 16px;display:flex;flex-direction:column;gap:2px}
.nav-label{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-300);padding:16px 10px 6px;
}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;
  color:var(--ink-700);font-weight:500;font-size:13.5px;position:relative;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.nav-item svg{width:18px;height:18px;flex:0 0 18px;fill:var(--ink-400);transition:fill .16s}
.nav-item:hover{background:var(--line-soft)}
.nav-item.active{background:var(--blue-50);color:var(--blue-700);font-weight:600}
.nav-item.active svg{fill:var(--blue-600)}
.nav-item.active::before{
  content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:var(--blue-600);
}
.nav-count{
  margin-left:auto;font-style:normal;font-size:11px;font-weight:700;
  background:var(--blue-600);color:#fff;padding:1px 7px;border-radius:99px;min-width:22px;text-align:center;
}
.nav-count.muted{background:var(--line);color:var(--ink-500)}
.nav-count.warn{background:var(--amber-bg);color:var(--amber)}
.nav-count.alert{background:var(--red-bg);color:var(--red)}

/* sidebar footer */
.sidebar-foot{padding:12px}
.auto-card{background:linear-gradient(160deg,#f4f8ff,#f7f5ff);border:1px solid var(--blue-100);border-radius:14px;padding:12px 13px}
.auto-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:650;color:var(--ink-800)}
.auto-bar{height:5px;border-radius:99px;background:#dfe7f7;margin:10px 0 8px;overflow:hidden}
.auto-bar i{display:block;height:100%;width:40%;border-radius:99px;background:linear-gradient(90deg,var(--blue-500),var(--violet));animation:slide 2.4s var(--ease) infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.auto-meta{margin:0;font-size:11.5px;color:var(--ink-500)}
.auto-meta b{color:var(--ink-900)}

/* pulse dot */
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--blue-600);position:relative;flex:0 0 7px}
.pulse-dot.green{background:var(--green)}
.pulse-dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid currentColor;color:inherit;background:inherit;opacity:.35;
  animation:ping 1.9s var(--ease) infinite;
}
@keyframes ping{0%{transform:scale(.5);opacity:.6}80%,100%{transform:scale(1.9);opacity:0}}

/* ============================================================
   topbar
   ============================================================ */
.topbar{
  height:64px;flex:0 0 64px;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;
  padding:0 24px;position:sticky;top:0;z-index:40;
}
.search{
  flex:1 1 0;min-width:0;max-width:460px;display:flex;align-items:center;gap:9px;height:38px;padding:0 12px;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;transition:.18s var(--ease);
}
.search:focus-within{background:#fff;border-color:var(--blue-200);box-shadow:0 0 0 4px var(--blue-50)}
.search svg{width:16px;height:16px;flex:0 0 16px;fill:var(--ink-400)}
.search input{flex:1;border:0;background:none;outline:none;font-size:13.5px;color:var(--ink-900)}
.search input::placeholder{color:var(--ink-300)}
.search kbd{
  font-size:10.5px;font-family:inherit;font-weight:600;color:var(--ink-400);
  border:1px solid var(--line);border-radius:5px;padding:2px 5px;background:#fff;
}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.ai-status{
  display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:650;color:#0a7c43;
  background:var(--green-bg);border:1px solid #c6ecd7;padding:6px 12px;border-radius:99px;
}
.icon-btn{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;position:relative;
  border:1px solid var(--line);background:#fff;transition:.16s var(--ease);
}
.icon-btn:hover{background:var(--line-soft)}
.icon-btn svg{width:18px;height:18px;fill:var(--ink-500)}
.badge{
  position:absolute;top:-5px;right:-5px;font-style:normal;font-size:10px;font-weight:700;
  background:var(--red);color:#fff;border-radius:99px;padding:1px 5px;border:2px solid #fff;
}
.user{display:flex;align-items:center;gap:9px;padding-left:12px;border-left:1px solid var(--line)}
.user img{width:34px;height:34px;border-radius:50%}
.user-text{display:flex;flex-direction:column;line-height:1.25}
.user-text b{font-size:13px;font-weight:650}
.user-text span{font-size:11px;color:var(--ink-400)}

/* ============================================================
   view + shared
   ============================================================ */
.view{padding:26px 28px 90px;max-width:1440px;width:100%;margin:0 auto}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.page-head h1{margin:0;font-size:23px;font-weight:750;letter-spacing:-.5px}
.page-head p{margin:5px 0 0;color:var(--ink-500);font-size:13.5px}
.head-actions{display:flex;gap:9px;align-items:center}

.btn{
  display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:9px;
  font-size:13px;font-weight:600;border:1px solid var(--line);background:#fff;color:var(--ink-800);
  transition:.16s var(--ease);white-space:nowrap;
}
.btn:hover{background:var(--line-soft)}
.btn svg{width:15px;height:15px;fill:currentColor}
.btn-primary{background:var(--blue-600);border-color:var(--blue-600);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.24)}
.btn-primary:hover{background:var(--blue-700);border-color:var(--blue-700)}
.btn-green{background:var(--green);border-color:var(--green);color:#fff}
.btn-green:hover{background:#0c8f4a}
.btn-ghost-red{color:var(--red);border-color:#f6d5d9}
.btn-ghost-red:hover{background:var(--red-bg)}
.btn-sm{height:31px;padding:0 11px;font-size:12.5px;border-radius:8px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.card-head h3{margin:0;font-size:14.5px;font-weight:680;letter-spacing:-.2px}
.card-head p{margin:3px 0 0;font-size:12px;color:var(--ink-400)}

/* badges */
.tag{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:650;
  padding:3px 9px;border-radius:99px;white-space:nowrap;line-height:1.6;
}
.tag.sponsorship{background:var(--violet-bg);color:var(--violet)}
.tag.consulting{background:var(--cyan-bg);color:var(--cyan)}
.tag.speaker{background:var(--amber-bg);color:var(--amber)}
.tag.client{background:var(--blue-50);color:var(--blue-700)}
.tag.green{background:var(--green-bg);color:var(--green)}
.tag.red{background:var(--red-bg);color:var(--red)}
.tag.grey{background:var(--line-soft);color:var(--ink-500)}
.tag.dot::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}

.prio{font-size:11px;font-weight:700;letter-spacing:.02em}
.prio.High{color:var(--red)} .prio.Medium{color:var(--amber)} .prio.Low{color:var(--ink-400)}

/* confidence meter */
.conf{display:flex;align-items:center;gap:7px;min-width:74px}
.conf-bar{flex:1;height:5px;border-radius:99px;background:var(--line);overflow:hidden}
.conf-bar i{display:block;height:100%;border-radius:99px;background:var(--green);transition:width .9s var(--ease)}
.conf-bar.mid i{background:var(--amber)}
.conf-bar.low i{background:var(--red)}
.conf b{font-size:11.5px;font-weight:700;color:var(--ink-700);min-width:30px;text-align:right}

/* ============================================================
   dashboard
   ============================================================ */
.metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:18px}
@media(max-width:1360px){.metrics{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.metrics{grid-template-columns:repeat(2,1fr)}}
.metric{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 16px 14px;
  box-shadow:var(--sh-1);position:relative;overflow:hidden;transition:.22s var(--ease);
  animation:rise .5s var(--ease) both;
}
.metric:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--blue-200)}
.metric::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--accent,var(--blue-500));opacity:.9}
.metric-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.metric-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;padding:7px}
.metric-ico svg{fill:currentColor}
.metric-delta{font-size:11px;font-weight:700;color:var(--green);display:flex;align-items:center;gap:3px}
.metric-delta.down{color:var(--red)}
.metric-val{font-size:26px;font-weight:780;letter-spacing:-1px;line-height:1.1;font-variant-numeric:tabular-nums}
.metric-lab{font-size:12px;color:var(--ink-500);margin-top:3px;font-weight:500}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.grid-2{display:grid;grid-template-columns:1.35fr .9fr;gap:16px;align-items:start}
@media(max-width:1120px){.grid-2{grid-template-columns:1fr}}

/* activity feed */
.feed{max-height:430px;overflow-y:auto;padding:6px 6px 10px}
.feed-item{
  display:flex;gap:11px;padding:10px 12px;border-radius:11px;align-items:flex-start;
  animation:feedin .45s var(--ease) both;
}
.feed-item:hover{background:var(--line-soft)}
@keyframes feedin{from{opacity:0;transform:translateY(-8px) scale(.99)}to{opacity:1;transform:none}}
.feed-ico{width:28px;height:28px;flex:0 0 28px;border-radius:9px;display:grid;place-items:center;padding:6px}
.feed-body{flex:1;min-width:0}
.feed-body b{font-size:13px;font-weight:600;display:block}
.feed-body span{font-size:12px;color:var(--ink-400)}
.feed-time{font-size:11px;color:var(--ink-300);white-space:nowrap;padding-top:2px}

/* mini workflow strip */
.wf-strip{display:flex;align-items:center;gap:6px;padding:16px 18px;overflow-x:auto}
.wf-node{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:7px;padding:11px 12px;
  border:1px solid var(--line);border-radius:13px;min-width:104px;background:#fff;
  transition:.35s var(--ease);position:relative;
}
.wf-node .wf-ico{width:30px;height:30px;border-radius:9px;background:var(--line-soft);display:grid;place-items:center;padding:7px;transition:.35s var(--ease)}
.wf-node .wf-ico svg{fill:var(--ink-400);transition:.35s}
.wf-node span{font-size:11.5px;font-weight:600;color:var(--ink-500);text-align:center;line-height:1.3}
.wf-node.on{border-color:var(--blue-500);box-shadow:0 8px 22px rgba(37,99,235,.18);transform:translateY(-3px)}
.wf-node.on .wf-ico{background:var(--blue-600)}
.wf-node.on .wf-ico svg{fill:#fff}
.wf-node.on span{color:var(--blue-700)}
.wf-node.done{border-color:#c6ecd7}
.wf-node.done .wf-ico{background:var(--green-bg)}
.wf-node.done .wf-ico svg{fill:var(--green)}
.wf-link{flex:0 0 26px;height:2px;background:var(--line);border-radius:2px;position:relative;overflow:hidden}
.wf-link i{position:absolute;inset:0;background:linear-gradient(90deg,var(--blue-500),var(--violet));transform:translateX(-100%);transition:transform .45s var(--ease)}
.wf-link.on i{transform:translateX(0)}

/* ============================================================
   inbox
   ============================================================ */
.inbox-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.chip{
  height:32px;padding:0 13px;border-radius:99px;border:1px solid var(--line);background:#fff;
  font-size:12.5px;font-weight:600;color:var(--ink-600,var(--ink-500));display:inline-flex;align-items:center;gap:7px;
  transition:.16s var(--ease);
}
.chip:hover{border-color:var(--blue-200);color:var(--blue-700)}
.chip.on{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.chip em{font-style:normal;opacity:.65;font-weight:600}

.mail-list{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
.mail-head{
  display:grid;grid-template-columns:26px 1.55fr 2.1fr 118px 96px 108px 92px 84px;gap:12px;align-items:center;
  padding:11px 18px;border-bottom:1px solid var(--line);background:#fcfcfe;
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-300);
}
.mail-row{
  display:grid;grid-template-columns:26px 1.55fr 2.1fr 118px 96px 108px 92px 84px;gap:12px;align-items:center;
  padding:13px 18px;border-bottom:1px solid var(--line-soft);cursor:pointer;position:relative;
  transition:background .15s var(--ease);
}
.mail-row:last-child{border-bottom:0}
.mail-row:hover{background:#fafbff}
.mail-row.unread .m-subject b{font-weight:700}
.mail-row.new{animation:mailin .6s var(--ease) both}
@keyframes mailin{
  0%{opacity:0;transform:translateY(-14px);background:#eef4ff}
  60%{background:#eef4ff}
  100%{opacity:1;transform:none;background:transparent}
}
.m-dot{width:8px;height:8px;border-radius:50%;background:var(--blue-600);margin:0 auto}
.mail-row.read .m-dot{background:var(--line)}
.m-sender{min-width:0}
.m-sender b{display:block;font-size:13px;font-weight:620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-sender span{font-size:11.5px;color:var(--ink-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.m-subject{min-width:0}
.m-subject b{display:block;font-size:13px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-subject span{font-size:11.5px;color:var(--ink-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.m-val{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.m-time{font-size:11.5px;color:var(--ink-400);text-align:right;white-space:nowrap}
.m-status{display:flex;justify-content:flex-start}

.analyzing{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:650;color:var(--blue-700)}
.spinner{width:13px;height:13px;flex:0 0 13px;border-radius:50%;border:2px solid var(--blue-200);border-top-color:var(--blue-600);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{height:9px;border-radius:99px;background:linear-gradient(90deg,#eef0f4 25%,#f7f8fa 37%,#eef0f4 63%);background-size:400% 100%;animation:shimmer 1.3s ease infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

@media(max-width:1240px){
  .mail-head,.mail-row{grid-template-columns:26px 1.4fr 2fr 110px 96px 90px}
  .mail-head span:nth-child(7),.mail-head span:nth-child(8),
  .mail-row .col-conf,.mail-row .m-time{display:none}
}

/* ============================================================
   drawer (email detail)
   ============================================================ */
.drawer-scrim{
  position:fixed;inset:0;background:rgba(11,18,32,.42);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);z-index:60;
}
.drawer-scrim.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;height:100vh;width:min(1020px,94vw);background:var(--bg);
  box-shadow:var(--sh-3);z-index:61;transform:translateX(102%);transition:transform .38s var(--ease);
  display:flex;flex-direction:column;
}
.drawer.on{transform:none}
.drawer-top{
  display:flex;align-items:center;gap:12px;padding:15px 20px;background:#fff;border-bottom:1px solid var(--line);
}
.drawer-top h2{margin:0;font-size:15.5px;font-weight:680;letter-spacing:-.2px;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer-cols{flex:1;display:grid;grid-template-columns:1.25fr .95fr;gap:16px;padding:18px 20px 30px;overflow-y:auto}
@media(max-width:900px){.drawer-cols{grid-template-columns:1fr}}
.mail-doc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--sh-1)}
.mail-doc .from{display:flex;gap:12px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line-soft);margin-bottom:16px}
.avatar{
  width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;
  font-weight:700;font-size:14px;color:#fff;letter-spacing:-.3px;
}
.mail-doc .from b{display:block;font-size:14px}
.mail-doc .from span{font-size:12px;color:var(--ink-400)}
.mail-body{font-size:13.5px;line-height:1.72;color:var(--ink-700);white-space:pre-line}
.reply-box{margin-top:18px;border:1px solid #c6ecd7;background:#fbfffd;border-radius:var(--r);padding:15px 16px}
.reply-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.reply-head b{font-size:12.5px;font-weight:680;color:#0a7c43;display:flex;align-items:center;gap:6px}
.reply-head b svg{width:15px;height:15px;flex:0 0 15px;fill:#0a7c43}
.avatar svg{width:17px;height:17px;fill:currentColor}
.avatar.zoho{
  width:36px;height:36px;flex:0 0 36px;border-radius:10px;
  background:#fff;border:1px solid var(--line);padding:8px;
}
.avatar.zoho svg{width:100%;height:100%}

/* mailbox pill in the topbar */
.mailbox{
  display:flex;align-items:center;gap:8px;height:34px;padding:0 11px;border-radius:99px;
  border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:600;color:var(--ink-700);
  white-space:nowrap;
}
.mailbox .mark{width:15px;height:15px;flex:0 0 15px}
.mailbox small{color:var(--ink-400);font-weight:500}
@media(max-width:1180px){.mailbox{display:none}}
.reply-text{font-size:13px;line-height:1.7;color:var(--ink-700);white-space:pre-line}

.insight{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
.insight-head{
  display:flex;align-items:center;gap:9px;padding:14px 16px;
  background:linear-gradient(120deg,#f5f8ff,#f8f5ff);border-bottom:1px solid var(--line-soft);
}
.insight-head b{font-size:13.5px;font-weight:700}
.ai-chip{
  margin-left:auto;font-size:10.5px;font-weight:700;color:var(--violet);
  background:#fff;border:1px solid #e3d8ff;padding:2px 8px;border-radius:99px;
}
.insight-sec{padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.insight-sec:last-child{border-bottom:0}
.insight-sec h4{margin:0 0 7px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-300);font-weight:700}
.insight-sec p{margin:0;font-size:13px;line-height:1.65;color:var(--ink-700)}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kv-item{background:var(--bg);border:1px solid var(--line-soft);border-radius:10px;padding:9px 11px}
.kv-item span{font-size:10.5px;color:var(--ink-400);font-weight:600;display:block}
.kv-item b{font-size:14px;font-weight:700;letter-spacing:-.2px}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 14px 20px;font-size:12.5px;color:var(--ink-700)}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:0;top:5px;width:8px;height:8px;border-radius:50%;background:var(--blue-500);box-shadow:0 0 0 3px var(--blue-50)}
.timeline li::after{content:"";position:absolute;left:3.5px;top:15px;bottom:0;width:1px;background:var(--line)}
.timeline li:last-child::after{display:none}
.timeline li span{display:block;font-size:11px;color:var(--ink-400)}

/* ============================================================
   kanban follow ups
   ============================================================ */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start}
@media(max-width:1120px){.kanban{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.kanban{grid-template-columns:1fr}}
.col{background:#f2f4f8;border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;min-height:220px}
.col-head{display:flex;align-items:center;gap:8px;padding:2px 4px 12px}
.col-head b{font-size:13px;font-weight:680}
.col-head .n{margin-left:auto;font-size:11px;font-weight:700;background:#fff;border:1px solid var(--line);border-radius:99px;padding:1px 8px;color:var(--ink-500)}
.col-head .swatch{width:8px;height:8px;border-radius:3px}
.kcard{
  background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px 14px;margin-bottom:10px;
  box-shadow:var(--sh-1);cursor:pointer;transition:.2s var(--ease);animation:rise .45s var(--ease) both;
}
.kcard:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--blue-200)}
.kcard.moving{animation:moveflash .9s var(--ease)}
@keyframes moveflash{0%{box-shadow:0 0 0 0 rgba(37,99,235,.45)}100%{box-shadow:0 0 0 14px rgba(37,99,235,0)}}
.kcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px}
.kcard-top b{font-size:13.5px;font-weight:680;letter-spacing:-.2px}
.kcard-top span{font-size:11.5px;color:var(--ink-400);display:block}
.kcard-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.silent{font-size:11px;font-weight:650;color:var(--amber);background:var(--amber-bg);padding:2px 8px;border-radius:99px}
.silent.hot{color:var(--red);background:var(--red-bg)}
.silent.cool{color:var(--ink-500);background:var(--line-soft)}
.kval{margin-left:auto;font-size:13.5px;font-weight:750;font-variant-numeric:tabular-nums}
.kbar{height:4px;border-radius:99px;background:var(--line-soft);margin-top:11px;overflow:hidden}
.kbar i{display:block;height:100%;border-radius:99px;background:var(--blue-500);transition:width .8s var(--ease)}

/* ============================================================
   draft queue
   ============================================================ */
.draft{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:17px 18px;margin-bottom:12px;animation:rise .45s var(--ease) both}
.draft.gone{animation:collapse .5s var(--ease) forwards}
@keyframes collapse{to{opacity:0;transform:translateX(28px) scale(.97);margin-bottom:-8px;max-height:0;padding-top:0;padding-bottom:0}}
.draft-top{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.draft-top .t{flex:1;min-width:220px}
.draft-top h4{margin:0 0 4px;font-size:14px;font-weight:680;letter-spacing:-.2px}
.draft-top .sub{font-size:12px;color:var(--ink-400)}
.draft-why{
  margin-top:12px;background:var(--amber-bg);border:1px solid #f5e2bd;border-radius:10px;
  padding:10px 12px;font-size:12.5px;color:#8a5b06;display:flex;gap:9px;align-items:flex-start;
}
.draft-why svg{width:15px;height:15px;flex:0 0 15px;fill:var(--amber);margin-top:1px}
.draft-preview{
  margin-top:12px;background:var(--bg);border:1px solid var(--line-soft);border-radius:10px;
  padding:12px 14px;font-size:12.5px;line-height:1.7;color:var(--ink-700);white-space:pre-line;
}
.draft-actions{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}

/* ============================================================
   analytics
   ============================================================ */
.stat-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px}
@media(max-width:1120px){.stat-row{grid-template-columns:repeat(2,1fr)}}
.donut-wrap{display:flex;align-items:center;gap:24px;padding:20px 22px;flex-wrap:wrap}
.donut{width:186px;height:186px;flex:0 0 186px;position:relative}
.donut svg{transform:rotate(-90deg);overflow:visible}
.donut circle{fill:none;stroke-width:20;stroke-linecap:round;transition:stroke-dasharray 1.1s var(--ease)}
.donut-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.donut-center b{font-size:24px;font-weight:780;letter-spacing:-1px;display:block}
.donut-center span{font-size:11px;color:var(--ink-400)}
.legend{flex:1;min-width:200px;display:flex;flex-direction:column;gap:11px}
.legend-item{display:flex;align-items:center;gap:10px;font-size:13px}
.legend-item .sw{width:10px;height:10px;border-radius:3px;flex:0 0 10px}
.legend-item b{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.legend-item .pct{color:var(--ink-400);font-size:12px;width:42px;text-align:right}

.funnel{padding:20px 22px;display:flex;flex-direction:column;gap:11px}
.fstage{display:flex;align-items:center;gap:14px}
.fstage .lab{width:150px;flex:0 0 150px;font-size:12.5px;font-weight:600;color:var(--ink-700)}
.ftrack{flex:1;height:34px;background:var(--line-soft);border-radius:9px;overflow:hidden;position:relative}
.ftrack i{
  display:block;height:100%;border-radius:9px;width:0;
  background:linear-gradient(90deg,var(--blue-600),var(--blue-500));
  transition:width 1.15s var(--ease);
}
.ftrack.won i{background:linear-gradient(90deg,#0fa958,#34c77b)}
.ftrack.lost i{background:linear-gradient(90deg,#dc3545,#f2707c)}
.fstage .num{width:74px;flex:0 0 74px;text-align:right;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}

.bars{padding:20px 22px;display:flex;align-items:flex-end;gap:14px;height:230px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;height:100%;justify-content:flex-end}
.bar{
  width:100%;max-width:46px;border-radius:9px 9px 4px 4px;height:0;
  background:linear-gradient(180deg,var(--blue-500),var(--blue-600));
  transition:height 1s var(--ease);position:relative;
}
.bar span{position:absolute;top:-20px;left:0;right:0;text-align:center;font-size:11.5px;font-weight:700;color:var(--ink-700)}
.bar-col .lab{font-size:11.5px;color:var(--ink-400);font-weight:600}

/* ============================================================
   full workflow page
   ============================================================ */
.flow{
  padding:36px 18px;display:flex;align-items:center;justify-content:center;gap:0;
  flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
}
.fnode{
  width:136px;flex:0 0 136px;border:1px solid var(--line);border-radius:16px;background:#fff;padding:16px 12px;
  display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;transition:.4s var(--ease);position:relative;
}
.fnode .ico{width:40px;height:40px;border-radius:12px;background:var(--line-soft);display:grid;place-items:center;padding:9px;transition:.4s var(--ease)}
.fnode .ico svg{fill:var(--ink-400);transition:.4s}
.fnode b{font-size:12.5px;font-weight:650;color:var(--ink-700);line-height:1.35}
.fnode small{font-size:10.5px;color:var(--ink-300)}
.fnode.on{border-color:var(--blue-500);box-shadow:0 14px 34px rgba(37,99,235,.2);transform:translateY(-6px) scale(1.03)}
.fnode.on .ico{background:linear-gradient(135deg,var(--blue-600),var(--violet))}
.fnode.on .ico svg{fill:#fff}
.fnode.on b{color:var(--blue-700)}
.fnode.done .ico{background:var(--green-bg)}
.fnode.done .ico svg{fill:var(--green)}
.fconn{flex:0 0 30px;height:2px;background:var(--line);position:relative;margin:0 2px;border-radius:2px;overflow:hidden}
.fconn i{position:absolute;inset:0;background:linear-gradient(90deg,var(--blue-500),var(--violet));transform:translateX(-101%);transition:transform .5s var(--ease)}
.fconn.on i{transform:translateX(0)}
@media(max-width:1180px){.fconn{flex:0 0 20px}.fnode{width:124px;flex:0 0 124px}}

/* ============================================================
   tables (clients / pipelines)
   ============================================================ */
.tbl{width:100%;border-collapse:collapse}
.tbl th{
  text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-300);
  font-weight:700;padding:11px 18px;border-bottom:1px solid var(--line);background:#fcfcfe;
}
.tbl td{padding:13px 18px;border-bottom:1px solid var(--line-soft);font-size:13px;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover{background:#fafbff}
.cell-co{display:flex;align-items:center;gap:11px}
.cell-co b{font-weight:620;font-size:13px}
.cell-co span{font-size:11.5px;color:var(--ink-400);display:block}
.mono{font-variant-numeric:tabular-nums;font-weight:700}

/* pipeline board summary */
.pipe-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
@media(max-width:900px){.pipe-summary{grid-template-columns:repeat(2,1fr)}}

/* settings */
.set-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:900px){.set-grid{grid-template-columns:1fr}}
.set-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.set-row:last-child{border-bottom:0}
.set-row .t{flex:1}
.set-row .t b{display:block;font-size:13.5px;font-weight:620}
.set-row .t span{font-size:12px;color:var(--ink-400)}
.switch{width:42px;height:24px;flex:0 0 42px;border-radius:99px;background:var(--line);position:relative;transition:.22s var(--ease)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:.22s var(--ease)}
.switch.on{background:var(--green)}
.switch.on::after{transform:translateX(18px)}
.slider{width:100%;height:5px;border-radius:99px;background:var(--line);position:relative;margin-top:10px}
.slider i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--blue-600)}
.slider b{position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:#fff;border:2px solid var(--blue-600);transform:translate(-50%,-50%)}

/* ============================================================
   assistant
   ============================================================ */
.assistant{
  position:fixed;right:22px;bottom:22px;width:326px;background:#fff;border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--sh-3);z-index:55;overflow:hidden;transition:.34s var(--ease);
}
.assistant.min{transform:translateY(calc(100% - 58px))}
.assistant-head{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line-soft);background:linear-gradient(120deg,#f6f9ff,#faf7ff)}
.assistant-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.assistant-title b{font-size:13.5px;font-weight:700;display:block;letter-spacing:-.2px}
.assistant-title small{font-size:11px;color:var(--ink-400)}
.orb{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--blue-600),var(--violet),#06b6d4,var(--blue-600));
  animation:orbspin 3.4s linear infinite;box-shadow:0 0 0 4px rgba(37,99,235,.09);
}
@keyframes orbspin{to{transform:rotate(360deg)}}
.assistant-toggle{width:26px;height:26px;border-radius:7px;display:grid;place-items:center}
.assistant-toggle svg{width:18px;height:18px;fill:var(--ink-400);transition:transform .3s var(--ease)}
.assistant.min .assistant-toggle svg{transform:rotate(180deg)}
.assistant-body{height:212px;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.a-msg{
  display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--ink-700);
  animation:amsg .4s var(--ease) both;
}
@keyframes amsg{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.a-msg .ai{width:6px;height:6px;border-radius:50%;background:var(--blue-500);margin-top:6px;flex:0 0 6px}
.a-msg.ok .ai{background:var(--green)}
.a-msg.warn .ai{background:var(--amber)}
.a-msg .txt{flex:1}
.a-msg time{display:block;font-size:10.5px;color:var(--ink-300);margin-top:1px}
.a-typing{display:flex;gap:4px;padding:2px 0}
.a-typing i{width:5px;height:5px;border-radius:50%;background:var(--ink-300);animation:blink 1.1s infinite}
.a-typing i:nth-child(2){animation-delay:.16s}
.a-typing i:nth-child(3){animation-delay:.32s}
@keyframes blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.assistant-foot{
  display:flex;align-items:center;gap:8px;padding:10px 15px;border-top:1px solid var(--line-soft);
  font-size:11.5px;color:var(--ink-400);background:#fcfcfe;
}
.assistant-foot b{margin-left:auto;color:var(--ink-700);font-variant-numeric:tabular-nums}

/* ============================================================
   toasts
   ============================================================ */
.toasts{position:fixed;top:76px;right:22px;z-index:70;display:flex;flex-direction:column;gap:10px;pointer-events:none;transition:.3s var(--ease)}
/* keep toasts clear of the email drawer while it is open */
.drawer.on ~ .toasts{right:auto;left:22px}
.toast{
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue-600);border-radius:12px;
  box-shadow:var(--sh-2);padding:11px 15px;min-width:274px;max-width:330px;display:flex;gap:10px;align-items:flex-start;
  animation:toastin .4s var(--ease) both;
}
.toast.out{animation:toastout .35s var(--ease) forwards}
.toast.green{border-left-color:var(--green)}
.toast.violet{border-left-color:var(--violet)}
.toast b{font-size:12.5px;font-weight:650;display:block}
.toast span{font-size:11.5px;color:var(--ink-400)}
.toast .ti{width:26px;height:26px;flex:0 0 26px;border-radius:8px;display:grid;place-items:center;padding:6px}
@keyframes toastin{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes toastout{to{opacity:0;transform:translateX(28px)}}

/* ============================================================
   sign-in gate (live mode)
   ============================================================ */
.gate{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  background:linear-gradient(160deg,#f4f7ff,#f8f5ff);
}
.gate[hidden]{display:none}
.gate-card{
  width:min(380px,100%);background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--sh-3);padding:32px 30px;text-align:center;
}
.gate-mark{
  width:46px;height:46px;margin:0 auto 16px;border-radius:14px;color:#fff;padding:11px;
  background:linear-gradient(135deg,var(--blue-600),var(--violet));
  box-shadow:0 8px 20px rgba(37,99,235,.3);
}
.gate-card h2{margin:0 0 5px;font-size:20px;font-weight:750;letter-spacing:-.4px}
.gate-card p{margin:0 0 20px;font-size:13px;color:var(--ink-400)}
.gate-card input{
  width:100%;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:11px;
  background:var(--bg);font:inherit;font-size:14px;margin-bottom:12px;
}
.gate-card input:focus{outline:none;border-color:var(--blue-200);background:#fff;box-shadow:0 0 0 4px var(--blue-50)}
.gate-card .btn{width:100%;height:44px;justify-content:center;font-size:14.5px}
.gate-err{display:block;margin-top:12px;font-size:12.5px;color:var(--red);min-height:16px}

/* ============================================================
   forms (template editor, import)
   ============================================================ */
.lbl{display:block;font-size:12px;font-weight:650;color:var(--ink-700);margin:14px 0 5px}
.lbl:first-child{margin-top:0}
.fld{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);font:inherit;font-size:13.5px;color:var(--ink-900);
}
select.fld{height:40px;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235b6779'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;background-size:18px;padding-right:34px}
textarea.fld{resize:vertical;line-height:1.65}
.fld:focus{outline:none;border-color:var(--blue-200);background:#fff;box-shadow:0 0 0 4px var(--blue-50)}
.fld.mono-ish{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chips-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chips-row .chip{height:26px;padding:0 9px;font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.amber-tag{background:var(--amber-bg);color:var(--amber);font-size:10.5px;font-weight:650;padding:1px 7px;border-radius:99px}

/* live-mode badge */
.live-pill{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  background:var(--red-bg);color:var(--red);padding:2px 8px;border-radius:99px;
}

/* empty state */
.empty{padding:52px 20px;text-align:center;color:var(--ink-400)}
.empty b{display:block;font-size:14px;color:var(--ink-700);margin-bottom:4px}

/* utilities */
.mb-16{margin-bottom:16px}
.mt-16{margin-top:16px}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:14px}
.muted-txt{color:var(--ink-400);font-size:12.5px}
.count-up{font-variant-numeric:tabular-nums}

.menu-btn{display:none}
@media(max-width:1024px){
  .menu-btn{display:grid}
  .sidebar{position:fixed;left:0;top:0;z-index:80;transform:translateX(-100%);transition:transform .3s var(--ease);box-shadow:var(--sh-3)}
  .sidebar.open{transform:none}
  .search kbd{display:none}
  .user-text{display:none}
  .ai-status{padding:6px 10px}
  .topbar{gap:9px;padding:0 14px}
  .topbar-right{gap:8px;flex:0 0 auto}
  .user{padding-left:8px}
  .page-head{flex-wrap:wrap;align-items:flex-start}
  .head-actions{flex-wrap:wrap}
  .drawer-top{flex-wrap:wrap}
  .view{padding:20px 16px 90px}
  .assistant{width:min(326px,92vw);right:12px;bottom:12px}
}