* { box-sizing:border-box; margin:0; padding:0; -webkit-font-smoothing:antialiased; }

/* ── LIGHT THEME ── */
:root {
  --bg:#f2f2f7; --surface:#ffffff; --surface2:rgba(118,118,128,0.12); --surface3:rgba(118,118,128,0.06);
  --border:rgba(60,60,67,0.13); --sep:rgba(60,60,67,0.18);
  --t1:#1c1c1e; --t2:rgba(60,60,67,0.60); --t3:rgba(60,60,67,0.36);
  --hdr-bg:rgba(242,242,247,0.88);
  --card-bg:#ffffff; --col-bg:#ffffff;
  --blue:#007aff; --blue-l:rgba(0,122,255,0.11);
  --green:#34c759; --green-l:rgba(52,199,89,0.11);
  --orange:#ff9500; --orange-l:rgba(255,149,0,0.11);
  --red:#ff3b30; --red-l:rgba(255,59,48,0.11);
  --purple:#af52de; --purple-l:rgba(175,82,222,0.11);
  --teal:#32ade6; --teal-l:rgba(50,173,230,0.11);
  --sh:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.04);
  --sh-md:0 4px 16px rgba(0,0,0,0.09),0 2px 6px rgba(0,0,0,0.04);
  --r:12px; --r-sm:8px; --r-lg:16px;
  --toggle-bg:#e5e5ea; --toggle-knob:#fff;
  --seg-active-sh:0 1px 4px rgba(0,0,0,0.10),0 1px 2px rgba(0,0,0,0.06);
}

/* ── DARK THEME ── */
[data-theme="dark"] {
  --bg:#000000; --surface:#1c1c1e; --surface2:rgba(118,118,128,0.20); --surface3:rgba(118,118,128,0.10);
  --border:rgba(255,255,255,0.10); --sep:rgba(255,255,255,0.15);
  --t1:#ffffff; --t2:rgba(235,235,245,0.60); --t3:rgba(235,235,245,0.30);
  --hdr-bg:rgba(0,0,0,0.88);
  --card-bg:#1c1c1e; --col-bg:#1c1c1e;
  --blue:#0a84ff; --blue-l:rgba(10,132,255,0.15);
  --green:#30d158; --green-l:rgba(48,209,88,0.15);
  --orange:#ff9f0a; --orange-l:rgba(255,159,10,0.15);
  --red:#ff453a; --red-l:rgba(255,69,58,0.15);
  --purple:#bf5af2; --purple-l:rgba(191,90,242,0.15);
  --teal:#64d2ff; --teal-l:rgba(100,210,255,0.15);
  --sh:0 1px 6px rgba(0,0,0,0.35),0 1px 2px rgba(0,0,0,0.20);
  --sh-md:0 4px 20px rgba(0,0,0,0.40),0 2px 8px rgba(0,0,0,0.20);
  --toggle-bg:#0a84ff; --toggle-knob:#fff;
  --seg-active-sh:0 1px 4px rgba(0,0,0,0.40),0 1px 2px rgba(0,0,0,0.30);
}

html { transition: background 0.25s; }
body { font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif; background:var(--bg); color:var(--t1); min-height:100vh; font-size:15px; transition:background 0.25s,color 0.25s; }

/* ── HEADER ── */
.hdr { background:var(--hdr-bg); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:0.5px solid var(--sep); position:sticky; top:0; z-index:200; }
.hdr-inner { display:flex; align-items:center; justify-content:space-between; height:52px; padding:0 18px; gap:10px; }
.hdr-title { font-size:17px; font-weight:600; letter-spacing:-0.2px; flex-shrink:0; }
.hdr-right { display:flex; align-items:center; gap:10px; }

/* ── DARK MODE TOGGLE ── */
.dm-toggle { display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none; }
.dm-track { width:44px; height:26px; border-radius:13px; background:var(--toggle-bg); position:relative; transition:background 0.25s; flex-shrink:0; cursor:pointer; border:none; outline:none; }
.dm-knob { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--toggle-knob); transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1); box-shadow:0 1px 4px rgba(0,0,0,0.25); }
[data-theme="dark"] .dm-knob { transform:translateX(18px); }
.dm-label { font-size:13px; font-weight:500; color:var(--t2); }

/* ── TABS ── */
.tab-bar { background:var(--hdr-bg); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:0.5px solid var(--sep); position:sticky; top:52px; z-index:199; padding:8px 18px 10px; }
.seg { display:flex; background:var(--surface2); border-radius:9px; padding:2px; width:fit-content; gap:1px; }
.seg-btn { padding:6px 13px; border-radius:7px; border:none; background:none; font-family:inherit; font-size:13px; font-weight:500; color:var(--t2); cursor:pointer; transition:all 0.18s; white-space:nowrap; }
.seg-btn.active { background:var(--surface); color:var(--t1); box-shadow:var(--seg-active-sh); }

/* ── MAIN ── */
.main { padding:14px 16px; }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border-radius:20px; border:none; font-family:inherit; font-size:15px; font-weight:500; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.btn:active { transform:scale(0.96); }
.btn-blue { background:var(--blue); color:#fff; }
.btn-ghost { background:var(--blue-l); color:var(--blue); }
.btn-red { background:var(--red-l); color:var(--red); }
.btn-orange { background:var(--orange-l); color:var(--orange); }
.btn-sm { font-size:13px; padding:5px 12px; border-radius:16px; }
.btn-plain { background:var(--surface2); color:var(--t2); }

/* ── STATS ── */
.stats { display:flex; gap:10px; margin-bottom:14px; overflow-x:auto; padding-bottom:2px; }
.stats::-webkit-scrollbar{display:none;}
.stat { background:var(--surface); border-radius:var(--r); padding:12px 14px; min-width:128px; flex-shrink:0; box-shadow:var(--sh); transition:background 0.25s; }
.stat-lbl { font-size:11px; font-weight:500; color:var(--t3); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:3px; }
.stat-val { font-size:22px; font-weight:700; letter-spacing:-0.5px; }
.stat-sub { font-size:11px; color:var(--t3); margin-top:1px; }

/* ── BOARD TOOLBAR ── */
.board-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; flex-wrap:wrap; gap:8px; }
.view-toggle { display:flex; background:var(--surface2); border-radius:8px; padding:2px; gap:1px; }
.vt-btn { padding:5px 12px; border-radius:6px; border:none; background:none; font-family:inherit; font-size:12px; font-weight:500; color:var(--t2); cursor:pointer; transition:all 0.15s; }
.vt-btn.active { background:var(--surface); color:var(--t1); box-shadow:var(--seg-active-sh); }

/* ── BOARD ── */
/* Pipeline-only: board scrolls horizontally, each column scrolls vertically */
#v-pipeline .board-wrap {
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 0 16px;
  -webkit-overflow-scrolling:touch;
}
#v-pipeline .board-wrap::-webkit-scrollbar{height:10px;}
#v-pipeline .board-wrap::-webkit-scrollbar-thumb{background:rgba(128,128,128,0.35);border-radius:999px;}
#v-pipeline .board {
  display:flex;
  gap:12px;
  align-items:stretch;
  width:max-content;
  min-width:max-content;
}

/* ── COLUMN — fixed-height viewport inside pipeline only ── */
#v-pipeline .kcol {
  min-width:292px;
  width:292px;
  flex-shrink:0;
  background:var(--col-bg);
  border-radius:var(--r-lg);
  box-shadow:var(--sh);
  display:flex;
  flex-direction:column;
  transition:background 0.25s;
  height:clamp(420px, calc(100dvh - 290px), 760px);
  max-height:clamp(420px, calc(100dvh - 290px), 760px);
  overflow:hidden;
}
#v-pipeline .kcol-addwrap, #v-pipeline .kcol-minwrap { flex-shrink:0; }
.kcol-hdr { padding:11px 13px 9px; display:flex; align-items:center; justify-content:space-between; border-bottom:0.5px solid var(--border); flex-shrink:0; }
.kcol-left { display:flex; align-items:center; gap:7px; }
.kcol-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.kcol-name { font-size:14px; font-weight:600; }
.kcol-right { display:flex; align-items:center; gap:7px; }
.kcol-val { font-size:11px; font-weight:500; color:var(--t3); }
.kcol-cnt { background:var(--surface2); color:var(--t2); font-size:12px; font-weight:600; padding:1px 7px; border-radius:10px; }
.del-stage { width:20px; height:20px; border-radius:50%; border:none; background:var(--red-l); color:var(--red); font-size:14px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; transition:all 0.15s; flex-shrink:0; }
.del-stage:active { transform:scale(0.88); }
.move-stage { width:20px; height:20px; border-radius:50%; border:none; background:var(--surface2); color:var(--t2); font-size:11px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; flex-shrink:0; }
.move-stage:active { transform:scale(0.88); }
.move-stage:hover { background:var(--blue-l); color:var(--blue); }
.col-drag-handle { cursor:grab; color:var(--t3); font-size:13px; padding:0 2px; user-select:none; flex-shrink:0; transition:color 0.15s; }
.col-drag-handle:hover { color:var(--t2); }
.kcol.col-dragging { opacity:0.4; }
.kcol.col-drag-target { outline:2px dashed var(--blue); outline-offset:2px; }
/* per-column search */
.col-search-wrap { padding:7px 9px 0; position:relative; flex-shrink:0; }
.col-search-ico { position:absolute; left:17px; top:50%; transform:translateY(-40%); font-size:11px; color:var(--t3); pointer-events:none; }
.col-search { width:100%; background:var(--surface2); border:none; border-radius:8px; padding:6px 10px 6px 28px; font-family:inherit; font-size:12px; color:var(--t1); outline:none; }
.col-search::placeholder { color:var(--t3); }
/* cards — scroll inside each pipeline column */
#v-pipeline .kcards {
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#v-pipeline .kcards::-webkit-scrollbar{width:8px;}
#v-pipeline .kcards::-webkit-scrollbar-thumb{background:rgba(128,128,128,0.28);border-radius:999px;}
/* keep kanban cards at natural height; overflow should scroll, not squash */
#v-pipeline .kcards > * {
  flex: 0 0 auto !important;
}

#v-pipeline .card,
#v-pipeline .card.compact,
#v-pipeline .kcard {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: max-content;
  align-self: stretch;
}

.kcards.dov { background:rgba(0,122,255,0.04); outline:2px dashed rgba(0,122,255,0.28); border-radius:10px; }
.kadd { margin:0 8px 8px; padding:8px; border-radius:var(--r-sm); border:1.5px dashed var(--border); background:none; color:var(--t3); font-family:inherit; font-size:13px; font-weight:500; cursor:pointer; transition:all 0.15s; display:flex; align-items:center; justify-content:center; gap:5px; flex-shrink:0; }
.kadd:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-l); }
.add-stage-col { min-width:180px; width:180px; flex-shrink:0; border:2px dashed var(--border); border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; height:80px; cursor:pointer; color:var(--t3); font-size:13px; font-weight:500; transition:all 0.2s; align-self:flex-start; }
.add-stage-col:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-l); }

/* ── CARD (FULL) ── */
.card { background:var(--card-bg); border-radius:var(--r); border:0.5px solid var(--border); padding:11px; cursor:pointer; transition:background 0.25s,box-shadow 0.18s,transform 0.18s,border-color 0.18s; position:relative; overflow:hidden; animation:popIn 0.22s cubic-bezier(0.34,1.56,0.64,1); }
.card:hover { box-shadow:var(--sh-md); transform:translateY(-1px); }
.card:active { transform:scale(0.98); box-shadow:none; }
.card.dragging { opacity:0.3; transform:scale(0.96); }
@keyframes popIn { from{opacity:0;transform:translateY(-6px) scale(0.96);} to{opacity:1;transform:translateY(0) scale(1);} }
.card-stripe { position:absolute; top:0; left:0; right:0; height:3px; }
.card-top { display:flex; align-items:flex-start; gap:8px; margin-top:5px; margin-bottom:7px; }
.avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:#fff; flex-shrink:0; }
.card-name-block { flex:1; min-width:0; }
.card-name { font-size:14px; font-weight:600; letter-spacing:-0.1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-company { font-size:12px; color:var(--t2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.val-badge { background:var(--green-l); color:var(--green); font-size:11px; font-weight:600; padding:2px 7px; border-radius:7px; white-space:nowrap; flex-shrink:0; }
.card-info { display:flex; flex-direction:column; gap:3px; margin-bottom:6px; }
.ci-row { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--t2); }
.ci-icon { width:16px; height:16px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:9px; flex-shrink:0; }
.ci-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.ci-link { color:var(--blue); text-decoration:none; }
.card-tags { display:flex; gap:3px; flex-wrap:wrap; margin-bottom:5px; }
.tag { font-size:11px; font-weight:500; padding:2px 7px; border-radius:6px; }
.card-note { font-size:11px; color:var(--t3); line-height:1.45; background:var(--surface3); border-radius:7px; padding:5px 8px; margin-bottom:5px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.card-tasks-badge { display:inline-flex; align-items:center; gap:3px; background:var(--orange-l); color:var(--orange); font-size:11px; font-weight:500; padding:2px 7px; border-radius:6px; margin-bottom:5px; }
.card-actions { display:flex; gap:4px; flex-wrap:wrap; padding-top:7px; border-top:0.5px solid var(--border); }
.ca-btn { display:inline-flex; align-items:center; gap:3px; padding:4px 9px; border-radius:14px; border:none; font-family:inherit; font-size:12px; font-weight:500; cursor:pointer; transition:all 0.14s; text-decoration:none; color:inherit; }
.ca-btn:active { transform:scale(0.94); }
.ca-blue { background:var(--blue-l); color:var(--blue); }
.ca-purple { background:var(--purple-l); color:var(--purple); }
.ca-green { background:var(--green-l); color:var(--green); }
.ca-orange { background:var(--orange-l); color:var(--orange); }

/* ── COMPACT CARD ── */
.card-compact { background:var(--card-bg); border-radius:var(--r-sm); border:0.5px solid var(--border); padding:8px 10px; cursor:pointer; transition:background 0.25s,box-shadow 0.15s; position:relative; overflow:hidden; animation:popIn 0.2s ease; display:flex; align-items:center; gap:8px; }
.card-compact:hover { box-shadow:var(--sh-md); }
.card-compact:active { opacity:0.7; }
.card-compact.dragging { opacity:0.3; }
.cc-stripe { position:absolute; top:0; left:0; bottom:0; width:3px; border-radius:4px 0 0 4px; }
.cc-av { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; flex-shrink:0; margin-left:4px; }
.cc-body { flex:1; min-width:0; }
.cc-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-sub { font-size:11px; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.cc-right { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.cc-val { font-size:11px; font-weight:600; color:var(--green); }
.cc-email { display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--blue-l); color:var(--blue); font-size:11px; text-decoration:none; flex-shrink:0; }
.cc-task { display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; background:var(--orange-l); color:var(--orange); padding:2px 5px; border-radius:5px; }

/* ── CONTACTS LIST ── */
.clist { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh); overflow:hidden; transition:background 0.25s; }
.crow { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:0.5px solid var(--border); cursor:pointer; transition:background 0.1s; }
.crow:last-child { border-bottom:none; }
.crow:active { background:var(--surface2); }
.crow.selected { background:var(--blue-l); }
.cr-chk { width:22px; height:22px; border-radius:50%; border:2px solid var(--border); flex-shrink:0; cursor:pointer; transition:all 0.18s; display:flex; align-items:center; justify-content:center; }
.cr-chk.checked { background:var(--blue); border-color:var(--blue); }
.cr-chk.checked::after { content:'✓'; color:#fff; font-size:11px; font-weight:700; }
.cr-av { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; color:#fff; flex-shrink:0; }
.cr-info { flex:1; min-width:0; }
.cr-name { font-size:15px; font-weight:500; margin-bottom:1px; }
.cr-sub { font-size:13px; color:var(--t2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cr-right { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; }
.stg-chip { font-size:11px; font-weight:500; padding:2px 8px; border-radius:6px; }
.cr-val { font-size:12px; font-weight:600; color:var(--green); }
.email-btn { padding:3px 9px; border-radius:12px; border:none; background:var(--blue-l); color:var(--blue); font-family:inherit; font-size:12px; font-weight:500; cursor:pointer; text-decoration:none; display:inline-block; }

/* ── BULK BAR ── */
.bulk-bar { display:flex; align-items:center; gap:8px; padding:10px 16px; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh); margin-bottom:10px; flex-wrap:wrap; border:1.5px solid var(--blue-l); }
.bulk-count { font-size:14px; font-weight:600; color:var(--blue); flex:1; }
.bulk-actions { display:flex; gap:6px; flex-wrap:wrap; }

/* ── CONTACTS TOOLBAR ── */
.contacts-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.search-wrap { background:var(--surface2); border-radius:var(--r); display:flex; align-items:center; gap:8px; padding:8px 12px; flex:1; min-width:180px; }
.search-wrap input { background:none; border:none; outline:none; font-family:inherit; font-size:15px; color:var(--t1); width:100%; }
.search-wrap input::placeholder { color:var(--t3); }

/* ── TASKS ── */
.tcard { background:var(--surface); border-radius:var(--r); padding:11px 13px; box-shadow:var(--sh); display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; animation:popIn 0.2s ease; transition:background 0.25s; }
.tchk { width:22px; height:22px; border-radius:50%; border:2px solid var(--border); flex-shrink:0; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.tchk:hover { border-color:var(--blue); }
.tchk.done { background:var(--green); border-color:var(--green); }
.tchk.done::after { content:'✓'; color:#fff; font-size:11px; font-weight:700; }
.tbody { flex:1; min-width:0; }
.ttitle { font-size:15px; font-weight:500; margin-bottom:3px; }
.ttitle.done { text-decoration:line-through; color:var(--t3); }
.tmeta { font-size:13px; color:var(--t2); display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.tdue { font-size:13px; }
.overdue { color:var(--red); font-weight:500; }
.soon { color:var(--orange); font-weight:500; }
.pri { font-size:11px; font-weight:600; padding:2px 7px; border-radius:6px; }
.p-hi { background:var(--red-l); color:var(--red); }
.p-md { background:var(--orange-l); color:var(--orange); }
.p-lo { background:var(--green-l); color:var(--green); }
.tcal { padding:5px 11px; border-radius:12px; border:none; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; flex-shrink:0; transition:opacity 0.15s; line-height:1.4; }
.tdel { padding:5px 11px; border-radius:12px; border:none; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; flex-shrink:0; transition:opacity 0.15s; line-height:1.4; }
.tcal:hover,.tdel:hover { opacity:0.8; }
/* Task template action buttons */
.tact-row { display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; padding-top:6px; border-top:0.5px solid var(--border); }
.tact-btn { display:inline-flex; align-items:center; gap:4px; padding:5px 11px; border-radius:14px; border:none; font-family:inherit; font-size:12px; font-weight:500; cursor:pointer; transition:all 0.14s; white-space:nowrap; }
.tact-btn:active { transform:scale(0.94); }
.tact-email { background:var(--blue-l); color:var(--blue); }
.tact-copy { background:var(--purple-l); color:var(--purple); }
.tact-tpl-label { font-size:11px; color:var(--t3); align-self:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── NOTES ── */
.ncard { background:var(--surface); border-radius:var(--r-lg); padding:14px 16px; box-shadow:var(--sh); margin-bottom:10px; animation:popIn 0.2s ease; transition:background 0.25s; }
.ncard-title { font-size:16px; font-weight:600; margin-bottom:3px; }
.ncard-contact { font-size:12px; color:var(--blue); margin-bottom:8px; }
.ncard-body { font-size:14px; color:var(--t2); line-height:1.55; white-space:pre-wrap; }
.ncard-date { font-size:11px; color:var(--t3); margin-top:8px; }
.ncard-foot { display:flex; gap:6px; margin-top:10px; padding-top:10px; border-top:0.5px solid var(--border); }

/* ── IMPORT ── */
.drop-zone { background:var(--surface); border-radius:var(--r-lg); border:2px dashed var(--border); padding:44px 32px; text-align:center; cursor:pointer; transition:all 0.2s; position:relative; box-shadow:var(--sh); }
.drop-zone.dov { border-color:var(--blue); background:var(--blue-l); }
.drop-zone input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.drop-title { font-size:17px; font-weight:600; letter-spacing:-0.3px; margin-bottom:4px; }
.drop-sub { font-size:13px; color:var(--t2); }
.mcard { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh); overflow:hidden; margin-top:14px; }
.mhdr { padding:13px 16px; border-bottom:0.5px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.mrow { display:grid; grid-template-columns:1fr 22px 1fr; padding:9px 16px; border-bottom:0.5px solid var(--border); align-items:center; gap:8px; }
.mrow:last-child { border-bottom:none; }
.mrow span { font-size:14px; font-weight:500; }
.marrow { color:var(--t3); text-align:center; font-size:13px; }
.msel { background:var(--surface2); border:none; border-radius:7px; padding:6px 10px; color:var(--t1); font-family:inherit; font-size:13px; outline:none; cursor:pointer; width:100%; }

/* ── BOTTOM SHEET ── */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,0.42); z-index:500; display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.24s; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.overlay.open { opacity:1; pointer-events:all; }
.sheet { background:var(--bg); border-radius:22px 22px 0 0; width:100%; max-width:680px; max-height:92vh; overflow-y:auto; transform:translateY(100%); transition:transform 0.32s cubic-bezier(0.32,0.72,0,1); }
.overlay.open .sheet { transform:translateY(0); }
.sheet::-webkit-scrollbar{display:none;}
.sh-handle { width:36px; height:4px; background:rgba(128,128,128,0.3); border-radius:2px; margin:10px auto 4px; }
.sh-hdr { display:flex; align-items:center; justify-content:space-between; padding:4px 20px 14px; }
.sh-title { font-size:17px; font-weight:600; letter-spacing:-0.3px; }
.sh-close { width:30px; height:30px; border-radius:50%; background:var(--surface2); border:none; cursor:pointer; font-size:15px; color:var(--t2); display:flex; align-items:center; justify-content:center; }
.sh-close:active { background:var(--border); }
.sh-body { padding:0 16px 20px; display:flex; flex-direction:column; gap:13px; }
.sh-foot { padding:0 16px 16px; display:flex; flex-direction:column; gap:8px; }

/* ── FORM ── */
.slabel { font-size:13px; font-weight:500; color:var(--t2); padding:0 4px; text-transform:uppercase; letter-spacing:0.3px; }
.ssec { background:var(--surface); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh); transition:background 0.25s; }
.srow { display:flex; align-items:center; padding:12px 16px; border-bottom:0.5px solid var(--border); gap:10px; }
.srow:last-child { border-bottom:none; }
.srow-lbl { font-size:15px; color:var(--t1); min-width:90px; flex-shrink:0; }
.sinput { background:none; border:none; outline:none; font-family:inherit; font-size:15px; color:var(--t1); flex:1; text-align:right; min-width:0; }
.sinput::placeholder { color:var(--t3); }
.ssel { background:none; border:none; outline:none; font-family:inherit; font-size:15px; color:var(--blue); flex:1; text-align:right; cursor:pointer; -webkit-appearance:none; appearance:none; direction:rtl; }
.ssel option { background:var(--surface); color:var(--t1); direction:ltr; }
.starea { background:none; border:none; outline:none; font-family:inherit; font-size:15px; color:var(--t1); width:100%; resize:none; min-height:82px; line-height:1.5; }
.starea::placeholder { color:var(--t3); }

/* ── FRIENDLIER CONTACT DETAIL ── */
#sh-detail .sheet { max-width:760px; }
#sh-detail .sh-body { gap:14px; }
.detail-hero {
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:center;
  padding:18px;
  border:1px solid var(--border);
  border-radius:22px;
  background:
    radial-gradient(circle at 0% 0%, rgba(0,122,255,0.16), transparent 36%),
    linear-gradient(135deg, var(--surface), var(--surface2));
  box-shadow:var(--sh);
}
.detail-avatar {
  width:68px!important;
  height:68px!important;
  margin:0!important;
  font-size:23px!important;
}
.detail-hero-copy { min-width:0; }
.detail-hero-kicker {
  color:var(--t3);
  font-size:11px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.detail-hero-name {
  margin-top:3px;
  color:var(--t1);
  font-size:24px;
  font-weight:850;
  letter-spacing:-0.04em;
  line-height:1.05;
}
.detail-hero-company {
  margin-top:4px;
  color:var(--t2);
  font-size:14px;
  font-weight:600;
}
.detail-stage-wrap {
  grid-column:2;
  margin-top:-6px;
}
.detail-stage-btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border:0;
  border-radius:999px;
  font-family:inherit;
  font-size:12px;
  font-weight:750;
  cursor:pointer;
}
.detail-stage-picker {
  grid-column:1 / -1;
  margin-top:0!important;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px!important;
  box-shadow:var(--sh-md)!important;
  overflow:hidden;
  max-width:none!important;
}
.detail-section-title {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:2px 2px -4px;
}
.detail-section-title span {
  color:var(--t1);
  font-size:14px;
  font-weight:850;
}
.detail-section-title small {
  color:var(--t3);
  font-size:12px;
  font-weight:600;
  text-align:right;
}
.detail-info-card {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:10px;
  margin-bottom:0!important;
  border:1px solid var(--border);
}
.detail-info-card .srow {
  min-height:64px;
  align-items:flex-start;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  padding:12px;
  border:0;
  border-radius:14px;
  background:var(--surface2);
}
.detail-info-card .srow-lbl {
  min-width:0;
  color:var(--t3);
  font-size:11px;
  font-weight:850;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.detail-info-card .srow > button,
.detail-info-card .srow > span,
.detail-info-card .srow > a,
.detail-info-card .srow > div {
  width:100%;
  text-align:left!important;
  justify-content:flex-start!important;
  overflow-wrap:anywhere;
}
.detail-action-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:8px;
  margin-bottom:0;
}
.detail-action-grid .ca-btn {
  justify-content:center;
  min-height:42px;
  border-radius:14px;
  font-weight:800;
}
.detail-tags { margin-bottom:0!important; }
.detail-note-card {
  margin-bottom:0!important;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--sh);
}
.detail-work-title { margin-top:4px; }
#sh-detail .cd-tabs {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  padding:6px;
  margin:0 0 12px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  box-shadow:var(--sh);
}
#sh-detail .cd-tab {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-height:54px;
  border-radius:12px;
  white-space:normal;
}
#sh-detail .cd-tab strong {
  font-size:13px;
  font-weight:850;
}
#sh-detail .cd-tab span {
  color:var(--t3);
  font-size:10px;
  font-weight:700;
}
#sh-detail .cd-tab.active {
  background:linear-gradient(135deg, var(--blue), var(--teal));
  color:#fff;
  box-shadow:0 10px 22px rgba(0,122,255,0.18);
}
#sh-detail .cd-tab.active span { color:rgba(255,255,255,0.78); }
#sh-detail .itask-add-row,
#sh-detail .itask-row {
  border:1px solid var(--border);
  box-shadow:var(--sh);
}
#sh-detail .itask-label-row {
  margin:2px 2px 10px;
}

/* ── CALENDAR BLOCK ── */
.cal-blk { background:var(--teal-l); border-radius:var(--r); padding:12px 14px; border:0.5px solid rgba(50,173,230,0.25); }
.cal-blk-title { font-size:13px; font-weight:600; color:var(--teal); margin-bottom:8px; }
.cal-btns { display:flex; gap:7px; flex-wrap:wrap; }
.cal-btn { padding:7px 14px; border-radius:20px; border:none; background:rgba(50,173,230,0.18); color:var(--teal); font-family:inherit; font-size:13px; font-weight:500; cursor:pointer; }

/* ── SWATCHES ── */
.swatches { display:flex; gap:8px; flex-wrap:wrap; padding:4px 0; }
.swatch { width:26px; height:26px; border-radius:50%; cursor:pointer; border:2.5px solid transparent; transition:all 0.15s; }
.swatch.sel { border-color:var(--t1); transform:scale(1.15); }

/* ── BULK EDIT SHEET ── */
.bulk-field-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:0.5px solid var(--border); }
.bulk-field-row:last-child { border-bottom:none; }
.bfr-chk { width:20px; height:20px; border-radius:6px; border:2px solid var(--border); flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.bfr-chk.on { background:var(--blue); border-color:var(--blue); }
.bfr-chk.on::after { content:'✓'; color:#fff; font-size:10px; font-weight:700; }

/* ── EMPTY ── */
.empty { text-align:center; padding:36px 20px; }
.empty-ico { font-size:36px; margin-bottom:10px; }
.empty-ttl { font-size:17px; font-weight:600; color:var(--t2); margin-bottom:4px; }
.empty-sub { font-size:14px; color:var(--t3); }

/* ── TOAST ── */
.toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(90px); background:rgba(44,44,48,0.94); color:#fff; padding:10px 20px; border-radius:24px; font-size:14px; font-weight:500; z-index:9999; backdrop-filter:blur(20px); transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1); white-space:nowrap; box-shadow:0 4px 20px rgba(0,0,0,0.25); }
.toast.show { transform:translateX(-50%) translateY(0); }

input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{opacity:0.5;cursor:pointer;}
::-webkit-scrollbar{width:4px;height:4px;} ::-webkit-scrollbar-thumb{background:rgba(128,128,128,0.22);border-radius:4px;}

/* ── FILTER BAR ── */
.filter-bar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; align-items:center; }
.filter-pill { display:inline-flex; align-items:center; gap:4px; padding:5px 11px; border-radius:20px; border:1.5px solid var(--border); background:var(--surface); font-family:inherit; font-size:12px; font-weight:500; color:var(--t2); cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.filter-pill:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-l); }
.filter-pill.active { border-color:var(--blue); background:var(--blue-l); color:var(--blue); }
.filter-pill .fp-x { margin-left:2px; font-size:11px; opacity:0.7; }
.filter-select { background:var(--surface); border:1.5px solid var(--border); border-radius:20px; padding:5px 11px; font-family:inherit; font-size:12px; font-weight:500; color:var(--t2); cursor:pointer; outline:none; transition:all 0.15s; appearance:none; -webkit-appearance:none; }
.filter-select:focus, .filter-select:hover { border-color:var(--blue); color:var(--blue); }
.filter-divider { width:1px; height:20px; background:var(--border); flex-shrink:0; }
.filter-label { font-size:12px; color:var(--t3); font-weight:500; white-space:nowrap; }

/* ── QUICK ACTIONS MENU ── */
.qa-wrap { position:relative; display:inline-block; }
.qa-menu { position:absolute; top:calc(100% + 6px); right:0; background:#ffffff; border:1px solid rgba(100,116,139,0.2); border-radius:var(--r); box-shadow:0 8px 32px rgba(0,0,0,0.16),0 2px 8px rgba(0,0,0,0.08); min-width:220px; z-index:9000; overflow:hidden; opacity:0; pointer-events:none; transform:translateY(-6px) scale(0.97); transition:all 0.18s cubic-bezier(0.34,1.56,0.64,1); backdrop-filter:none; }
.qa-menu.open { opacity:1; pointer-events:all; transform:translateY(0) scale(1); }
.qa-item { display:flex; align-items:center; gap:9px; padding:11px 14px; font-size:14px; font-weight:500; color:#111827; cursor:pointer; border-bottom:0.5px solid rgba(100,116,139,0.15); transition:background 0.1s; }
.qa-item:last-child { border-bottom:none; }
.qa-item:hover { background:rgba(241,245,249,0.8); }
.qa-item-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.qa-section { font-size:11px; font-weight:600; color:rgba(100,116,139,0.8); text-transform:uppercase; letter-spacing:0.5px; padding:8px 14px 4px; }

/* ── IMPORT STATUS MAP ── */
.smap-card { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh); overflow:hidden; }
.smap-hdr { padding:11px 16px; border-bottom:0.5px solid var(--border); display:flex; align-items:center; gap:8px; }
.smap-hdr-title { font-size:14px; font-weight:700; flex:1; }
.smap-hdr-sub { font-size:12px; color:var(--t3); }
.smap-row { display:grid; grid-template-columns:1fr 22px 1fr; padding:9px 16px; border-bottom:0.5px solid var(--border); align-items:center; gap:8px; }
.smap-row:last-child { border-bottom:none; }
.smap-csv-val { font-size:13px; font-weight:500; background:var(--surface2); padding:4px 9px; border-radius:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.smap-arrow { color:var(--t3); text-align:center; font-size:13px; }
.smap-sel { background:var(--surface2); border:none; border-radius:7px; padding:6px 10px; color:var(--t1); font-family:inherit; font-size:13px; outline:none; cursor:pointer; width:100%; }
.import-export-row { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; align-items:center; }
.btn-green { background:var(--green-l); color:var(--green); }

/* ── LAST UPDATED BADGE ── */
.cr-updated { font-size:11px; color:var(--t3); }

/* ── OPP FILTER BAR ── */
.opp-filter-row { display:flex; gap:6px; margin-bottom:10px; overflow-x:auto; padding-bottom:2px; }
.opp-filter-row::-webkit-scrollbar{display:none;}

/* ── EMAIL SETTINGS ── */
.es-client-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:10px; margin-bottom:18px; }
.es-client { background:var(--surface); border-radius:var(--r); box-shadow:var(--sh); padding:14px 12px; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; border:2px solid transparent; transition:all 0.18s; text-align:center; }
.es-client:hover { border-color:var(--blue); box-shadow:var(--sh-md); transform:translateY(-1px); }
.es-client.selected { border-color:var(--blue); background:var(--blue-l); }
.es-client-icon { font-size:30px; line-height:1; }
.es-client-name { font-size:13px; font-weight:600; color:var(--t1); }
.es-client-desc { font-size:11px; color:var(--t3); line-height:1.4; }
.es-preview { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh); padding:14px 16px; margin-bottom:14px; }
.es-preview-lbl { font-size:11px; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:8px; }
.es-preview-link { font-size:13px; color:var(--blue); word-break:break-all; line-height:1.5; font-family:monospace; background:var(--surface2); padding:8px 10px; border-radius:8px; }
.es-section-title { font-size:16px; font-weight:700; letter-spacing:-.2px; margin-bottom:10px; }
.es-custom-row { display:flex; gap:8px; align-items:center; }
.es-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:12px; font-size:12px; font-weight:600; background:var(--green-l); color:var(--green); }
.tpl-grid { display:flex; flex-direction:column; gap:8px; }
.tpl-card { background:var(--surface); border-radius:var(--r); box-shadow:var(--sh); padding:13px 15px; display:flex; align-items:flex-start; gap:12px; transition:background 0.25s; animation:popIn 0.2s ease; }
.tpl-card-body { flex:1; min-width:0; }
.tpl-card-name { font-size:15px; font-weight:600; margin-bottom:3px; }
.tpl-card-type { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:2px 8px; border-radius:6px; margin-bottom:6px; }
.tpl-type-email { background:var(--blue-l); color:var(--blue); }
.tpl-type-sms { background:var(--green-l); color:var(--green); }
.tpl-type-dm { background:var(--purple-l); color:var(--purple); }
.tpl-card-preview { font-size:13px; color:var(--t2); line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:pre-wrap; }
.tpl-card-actions { display:flex; gap:5px; margin-top:10px; flex-wrap:wrap; }
.tpl-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
/* Quick message picker inside detail sheet */
.qm-picker { background:var(--surface2); border-radius:var(--r); overflow:hidden; }
.qm-picker-item { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:0.5px solid var(--border); cursor:pointer; transition:background 0.1s; }
.qm-picker-item:last-child { border-bottom:none; }
.qm-picker-item:hover, .qm-picker-item:active { background:var(--blue-l); }
.qm-picker-item-icon { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.qm-picker-name { font-size:14px; font-weight:600; flex:1; }
.qm-picker-type { font-size:11px; font-weight:600; padding:2px 7px; border-radius:6px; }
.qm-empty { text-align:center; padding:20px; font-size:13px; color:var(--t3); }
/* template action panel — shown after picking a template */
.qm-action-panel { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-md); overflow:hidden; margin-top:4px; animation:popIn 0.2s cubic-bezier(0.34,1.56,0.64,1); }
.qm-action-header { display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:0.5px solid var(--border); }
.qm-action-back { width:28px; height:28px; border-radius:50%; border:none; background:var(--surface2); color:var(--t2); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.qm-action-title { font-size:15px; font-weight:600; flex:1; }
.qm-action-preview { font-size:13px; color:var(--t2); line-height:1.55; padding:12px 16px; border-bottom:0.5px solid var(--border); max-height:140px; overflow-y:auto; white-space:pre-wrap; background:var(--surface3); }
.qm-action-subject { font-size:12px; font-weight:600; color:var(--t3); padding:8px 16px 0; }
.qm-action-btns { display:flex; flex-direction:column; gap:0; }
.qm-action-btn { display:flex; align-items:center; gap:12px; padding:14px 16px; border:none; background:none; font-family:inherit; font-size:15px; font-weight:500; color:var(--t1); cursor:pointer; border-bottom:0.5px solid var(--border); text-align:left; transition:background 0.1s; width:100%; }
.qm-action-btn:last-child { border-bottom:none; }
.qm-action-btn:hover { background:var(--surface2); }
.qm-action-btn-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
/* variable chips in template editor */
.var-chips { display:flex; gap:5px; flex-wrap:wrap; padding:6px 2px; }
.var-chip { display:inline-flex; align-items:center; padding:4px 10px; border-radius:14px; background:var(--surface2); color:var(--t2); font-size:12px; font-weight:500; cursor:pointer; border:1.5px solid var(--border); transition:all 0.15s; }
.var-chip:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-l); }

/* ── UNDO BAR ── */
.undo-bar { position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(120px); background:rgba(28,28,30,0.97); color:#fff; padding:11px 14px 11px 18px; border-radius:16px; font-size:14px; font-weight:500; z-index:10000; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1); white-space:nowrap; box-shadow:0 6px 28px rgba(0,0,0,0.35); display:flex; align-items:center; gap:12px; pointer-events:none; }
.undo-bar.show { transform:translateX(-50%) translateY(0); pointer-events:all; }
.undo-bar-btn { background:var(--blue); color:#fff; border:none; border-radius:10px; padding:6px 14px; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.undo-bar-x { background:none; border:none; color:rgba(255,255,255,0.4); cursor:pointer; font-size:18px; padding:0 2px; line-height:1; }

/* ── COLUMN HIDE (replaces old minimise) ── */
.kcol-min-btn { width:22px; height:22px; border-radius:6px; border:none; background:var(--surface2); color:var(--t2); font-size:12px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; flex-shrink:0; }
.kcol-min-btn:hover { background:var(--orange-l); color:var(--orange); }
/* Hidden stages bar */
.hidden-stages-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; padding:10px 14px; background:var(--surface); border-radius:var(--r); box-shadow:var(--sh); }
.hidden-stages-lbl { font-size:11px; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:0.4px; white-space:nowrap; }
.hidden-stage-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:20px; border:1.5px solid var(--border); background:var(--surface2); font-family:inherit; font-size:12px; font-weight:500; color:var(--t2); cursor:pointer; transition:all 0.15s; }
.hidden-stage-pill:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-l); }
.hidden-stage-pill-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.hidden-stage-pill-count { font-size:11px; font-weight:600; padding:1px 6px; border-radius:8px; background:var(--surface); color:var(--t3); }

/* ── KANBAN FILTER BAR ── */
.kfb { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:10px; padding:8px 12px; background:var(--surface); border-radius:var(--r); box-shadow:var(--sh); }
.kfb-lbl { font-size:11px; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:0.4px; white-space:nowrap; }
.kfb-pill { display:inline-flex; align-items:center; gap:3px; padding:4px 10px; border-radius:16px; border:1.5px solid var(--border); background:none; font-family:inherit; font-size:12px; font-weight:500; color:var(--t2); cursor:pointer; transition:all 0.14s; white-space:nowrap; }
.kfb-pill:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-l); }
.kfb-pill.on { border-color:var(--blue); background:var(--blue-l); color:var(--blue); }
.kfb-sep { width:1px; height:18px; background:var(--border); flex-shrink:0; }

/* ── DUPLICATE MODAL ── */
.dup-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:600; display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.22s; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.dup-overlay.open { opacity:1; pointer-events:all; }
.dup-sheet { background:var(--bg); border-radius:22px 22px 0 0; width:100%; max-width:680px; max-height:88vh; overflow-y:auto; transform:translateY(100%); transition:transform 0.32s cubic-bezier(0.32,0.72,0,1); display:flex; flex-direction:column; }
.dup-overlay.open .dup-sheet { transform:translateY(0); }
.dup-sheet::-webkit-scrollbar { display:none; }
.dup-group { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh); overflow:hidden; margin-bottom:12px; }
.dup-ghdr { padding:8px 14px; background:var(--orange-l); border-bottom:0.5px solid var(--border); display:flex; align-items:center; gap:8px; }
.dup-ghdr-txt { font-size:12px; font-weight:600; color:var(--orange); flex:1; }
.dup-row { display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:0.5px solid var(--border); }
.dup-row:last-child { border-bottom:none; }
.dup-av { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; flex-shrink:0; }
.dup-info { flex:1; min-width:0; }
.dup-name { font-size:14px; font-weight:600; }
.dup-sub { font-size:11px; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.dup-keep { padding:4px 11px; border-radius:12px; border:none; background:var(--green-l); color:var(--green); font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; flex-shrink:0; }
.dup-del { padding:4px 11px; border-radius:12px; border:none; background:var(--red-l); color:var(--red); font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; flex-shrink:0; }

/* ── QUICK-ADD TASK BAR ── */
.qadd-wrap { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh); overflow:hidden; margin-bottom:14px; transition:background 0.25s; }
.qadd-row { display:flex; align-items:center; gap:0; padding:0; }
.qadd-input { flex:1; background:none; border:none; outline:none; font-family:inherit; font-size:16px; color:var(--t1); padding:15px 16px; min-width:0; }
.qadd-input::placeholder { color:var(--t3); }
.qadd-go { padding:10px 18px; border:none; background:var(--blue); color:#fff; font-family:inherit; font-size:15px; font-weight:600; cursor:pointer; transition:opacity 0.15s; flex-shrink:0; border-radius:0 var(--r-lg) var(--r-lg) 0; }
.qadd-go:hover { opacity:0.88; }
.qadd-go:active { opacity:0.7; }
.qadd-chips { display:flex; gap:6px; flex-wrap:wrap; padding:0 14px 12px; align-items:center; }
.qadd-chip { display:inline-flex; align-items:center; gap:3px; padding:4px 10px; border-radius:14px; border:1.5px solid var(--border); background:none; font-family:inherit; font-size:12px; font-weight:500; color:var(--t2); cursor:pointer; transition:all 0.13s; white-space:nowrap; }
.qadd-chip:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-l); }
.qadd-chip.sel { border-color:var(--blue); color:var(--blue); background:var(--blue-l); }
.qadd-chip.pri-hi { border-color:var(--red); color:var(--red); background:var(--red-l); }
.qadd-chip.pri-lo { border-color:var(--green); color:var(--green); background:var(--green-l); }
.qadd-sep { width:1px; height:14px; background:var(--border); flex-shrink:0; }
.qadd-preview { font-size:12px; color:var(--t3); padding:0 16px 10px; min-height:0; transition:all 0.15s; }
.qadd-preview span { color:var(--blue); font-weight:500; }

/* autocomplete dropdown */
.qadd-autocomplete { position:absolute; left:0; right:0; top:100%; background:var(--surface); border:0.5px solid var(--border); border-radius:0 0 var(--r-lg) var(--r-lg); box-shadow:var(--sh-md); z-index:300; overflow:hidden; max-height:200px; overflow-y:auto; }
.qadd-autocomplete::-webkit-scrollbar{display:none;}
.qadd-ac-item { display:flex; align-items:center; gap:10px; padding:10px 16px; cursor:pointer; transition:background 0.1s; border-bottom:0.5px solid var(--border); }
.qadd-ac-item:last-child { border-bottom:none; }
.qadd-ac-item:hover { background:var(--surface2); }
.qadd-ac-av { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:#fff; flex-shrink:0; }
.qadd-ac-name { font-size:14px; font-weight:500; }
.qadd-ac-sub { font-size:12px; color:var(--t2); }
.qadd-relative { position:relative; }

/* improved task card inline date+time editor */
.tcard-quick { display:flex; align-items:center; gap:0; padding:6px 13px 6px 10px; background:var(--surface2); border-radius:var(--r-sm); margin-top:5px; }
.tcard-quick input { background:none; border:none; outline:none; font-family:inherit; font-size:12px; color:var(--t1); padding:3px 6px; border-radius:6px; cursor:pointer; }
.tcard-quick input:focus { background:var(--blue-l); }
.tcard-quick-sep { color:var(--border); font-size:11px; padding:0 2px; }

/* ── INLINE QUICK TASK ── */
.itask-section { margin-bottom:4px; }
.itask-label-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.itask-label { font-size:13px; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.4px; }
.itask-full-link { font-size:12px; color:var(--blue); background:none; border:none; cursor:pointer; font-family:inherit; padding:0; }

/* add row */
.itask-add-row { background:var(--surface); border-radius:14px; border:0.5px solid var(--border); box-shadow:var(--sh); overflow:hidden; margin-bottom:10px; }
.itask-title-wrap { display:flex; align-items:center; padding:12px 14px; gap:10px; border-bottom:0.5px solid var(--border); }
.itask-input { flex:1; background:none; border:none; outline:none; font-family:inherit; font-size:15px; font-weight:500; color:var(--t1); min-width:0; }
.itask-input::placeholder { color:var(--t3); font-weight:400; }
.itask-save-btn { flex-shrink:0; background:var(--blue); color:#fff; border:none; border-radius:10px; padding:7px 16px; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.itask-save-btn:active { opacity:.8; }

/* options row */
.itask-opts-row { display:flex; align-items:center; gap:0; }
.itask-opt-btn { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:10px 8px; background:none; border:none; border-right:0.5px solid var(--border); cursor:pointer; font-family:inherit; transition:background .14s; min-width:0; }
.itask-opt-btn:last-child { border-right:none; }
.itask-opt-btn:hover { background:var(--surface2); }
.itask-opt-btn.set { background:var(--blue-l); }
.itask-opt-btn.set-hi { background:var(--red-l); }
.itask-opt-btn.set-lo { background:var(--green-l); }
.itask-opt-icon { font-size:14px; line-height:1; font-weight:800; letter-spacing:-0.3px; }
.itask-opt-label { font-size:10px; font-weight:600; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; text-transform:uppercase; letter-spacing:.3px; }
.itask-opt-btn.set .itask-opt-label { color:var(--blue); }
.itask-opt-btn.set-hi .itask-opt-label { color:var(--red); }
.itask-opt-btn.set-lo .itask-opt-label { color:var(--green); }
.itask-opt-val { font-size:11px; font-weight:600; color:var(--blue); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* task list rows */
.itask-row { display:flex; align-items:flex-start; gap:10px; padding:11px 14px; background:var(--surface); border-radius:12px; margin-bottom:6px; border:0.5px solid var(--border); box-shadow:var(--sh); }
.itask-chk { width:22px; height:22px; border-radius:50%; border:2px solid var(--border); flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .18s; margin-top:1px; }
.itask-chk:hover { border-color:var(--blue); }
.itask-chk.done { background:var(--green); border-color:var(--green); }
.itask-chk.done::after { content:'✓'; color:#fff; font-size:11px; font-weight:700; }
.itask-body { flex:1; min-width:0; }
.itask-title { font-size:14px; font-weight:500; line-height:1.35; word-break:break-word; }
.itask-title.done { text-decoration:line-through; color:var(--t3); }
.itask-meta { display:flex; gap:5px; flex-wrap:wrap; margin-top:5px; }
.itask-chip { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:500; padding:2px 7px; border-radius:6px; white-space:nowrap; }
.itask-actions { display:flex; gap:4px; flex-shrink:0; }
.itask-edit { padding:5px 9px; border-radius:8px; border:none; background:var(--surface2); color:var(--t2); font-size:12px; font-family:inherit; cursor:pointer; }
.itask-del { padding:5px 9px; border-radius:8px; border:none; background:var(--red-l); color:var(--red); font-size:12px; font-family:inherit; cursor:pointer; font-weight:600; }

/* ── CUSTOM DATE/TIME PICKER ── */
.dtp-overlay { position:fixed; inset:0; z-index:3000; }
.dtp-popup { position:fixed; z-index:10000; background:#ffffff; border-radius:20px; box-shadow:0 12px 48px rgba(0,0,0,0.22),0 2px 8px rgba(0,0,0,0.10); border:1px solid rgba(100,116,139,0.18); overflow:hidden; animation:dtpIn .18s cubic-bezier(.34,1.56,.64,1); backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
@keyframes dtpIn { from{opacity:0;transform:scale(.9) translateY(8px)} to{opacity:1;transform:scale(1) translateY(0)} }
.dtp-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; }
.dtp-head-title { font-size:15px; font-weight:700; }
.dtp-head-x { width:28px; height:28px; border-radius:50%; border:none; background:rgba(100,116,139,0.12); color:rgba(75,85,105,0.8); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; }

/* calendar */
.dtp-nav { display:flex; align-items:center; justify-content:space-between; padding:4px 12px 8px; }
.dtp-nav-month { font-size:14px; font-weight:600; }
.dtp-nav-btn { width:30px; height:30px; border-radius:9px; border:none; background:rgba(241,245,249,0.8); color:#374151; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.dtp-nav-btn:hover { background:var(--blue-l); color:var(--blue); }
.dtp-wdays { display:grid; grid-template-columns:repeat(7,1fr); padding:0 10px 4px; }
.dtp-wdays span { text-align:center; font-size:10px; font-weight:700; color:rgba(100,116,139,0.7); padding:2px 0; text-transform:uppercase; }
.dtp-days { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; padding:0 10px 8px; }
.dtp-day { height:36px; border-radius:9px; border:none; background:none; font-family:inherit; font-size:13px; font-weight:500; color:#111827; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .12s; }
.dtp-day:hover:not(:disabled) { background:rgba(241,245,249,0.8); }
.dtp-day.today { color:#2563eb; font-weight:800; }
.dtp-day.sel { background:var(--blue) !important; color:#fff !important; font-weight:700; border-radius:50%; }
.dtp-day.other { color:rgba(100,116,139,0.4); }
.dtp-day:disabled { opacity:.25; cursor:default; }
.dtp-shortcuts { display:flex; gap:6px; padding:0 12px 12px; flex-wrap:wrap; }
.dtp-sc { padding:5px 12px; border-radius:14px; border:1.5px solid rgba(100,116,139,0.22); background:rgba(241,245,249,0.8); font-family:inherit; font-size:12px; font-weight:600; color:#475569; cursor:pointer; transition:all .12s; }
.dtp-sc:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-l); }
.dtp-div { height:1px; background:rgba(100,116,139,0.15); margin:0 12px 12px; }

/* time grid */
.dtp-time-lbl { padding:0 14px 8px; font-size:11px; font-weight:700; color:rgba(100,116,139,0.7); text-transform:uppercase; letter-spacing:.4px; }
.dtp-times { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; padding:0 12px 12px; }
.dtp-t { padding:8px 4px; border-radius:10px; border:1.5px solid rgba(100,116,139,0.22); background:rgba(241,245,249,0.8); font-family:inherit; font-size:12px; font-weight:600; color:#475569; cursor:pointer; text-align:center; transition:all .12s; }
.dtp-t:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-l); }
.dtp-t.sel { border-color:var(--blue); color:var(--blue); background:var(--blue-l); }
.dtp-custom-time { display:flex; gap:8px; padding:0 12px 14px; }
.dtp-custom-inp { flex:1; background:rgba(241,245,249,0.9); border:1.5px solid rgba(100,116,139,0.2); border-radius:10px; padding:8px 12px; font-family:inherit; font-size:13px; color:#111827; outline:none; }
.dtp-custom-inp:focus { border-color:var(--blue); }
.dtp-custom-inp::placeholder { color:rgba(100,116,139,0.6); }
.dtp-apply { flex-shrink:0; background:#2563eb; color:#fff; border:none; border-radius:10px; padding:8px 14px; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.dtp-clear { width:calc(100% - 24px); margin:0 12px 14px; padding:9px; border-radius:10px; border:1.5px solid rgba(220,38,38,0.22); background:rgba(220,38,38,0.07); font-family:inherit; font-size:13px; font-weight:500; color:#dc2626; cursor:pointer; display:block; }
.dtp-clear:hover { background:var(--red-l); border-color:var(--red); }
/* ── TIME SPINNER ── */
.spin-btn { width:44px;height:32px;border-radius:9px;border:1.5px solid rgba(100,116,139,0.2);background:rgba(241,245,249,0.8);color:#374151;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;flex-shrink:0; }
.spin-btn:hover { background:var(--blue-l);border-color:var(--blue);color:var(--blue); }
.spin-btn:active { transform:scale(.92); }
.spin-val { width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#111827;background:rgba(241,245,249,0.9);border-radius:10px;letter-spacing:-.5px; }
.spin-ap-btn { padding:8px 10px;border-radius:8px;border:1.5px solid rgba(100,116,139,0.22);background:rgba(241,245,249,0.8);color:#475569;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .12s;width:48px;text-align:center; }
.spin-ap-btn:hover { border-color:var(--blue);color:var(--blue);background:var(--blue-l); }
.spin-ap-btn.spin-ap-sel { border-color:#2563eb;background:#2563eb;color:#fff; }

.imp-dup-row { display:flex; align-items:center; gap:8px; }
.imp-dup-txt { flex:1; font-size:13px; font-weight:500; color:var(--orange); }
.imp-dup-skip { padding:5px 11px; border-radius:12px; border:none; background:var(--orange); color:#fff; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.imp-dup-all { padding:5px 11px; border-radius:12px; border:none; background:var(--surface2); color:var(--t2); font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; margin-left:4px; }

/* ── WORKFLOW ── */
.wf-card { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh); margin-bottom:14px; overflow:hidden; transition:background 0.25s; }
.wf-card-hdr { display:flex; align-items:center; gap:10px; padding:13px 16px; cursor:pointer; border-bottom:0.5px solid var(--border); }
.wf-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.wf-name { font-size:16px; font-weight:700; flex:1; }
.wf-meta { font-size:12px; color:var(--t3); }
.wf-badges { display:flex; gap:6px; align-items:center; }
.wf-badge { font-size:11px; font-weight:600; padding:2px 8px; border-radius:8px; }
.wf-actions { display:flex; gap:6px; align-items:center; flex-shrink:0; }
.wf-body { padding:14px 16px; }
/* Steps */
.wf-steps { margin-bottom:14px; }
.wf-step { display:flex; align-items:flex-start; gap:10px; margin-bottom:4px; position:relative; }
.wf-step-line { position:absolute; left:15px; top:30px; bottom:-4px; width:2px; background:var(--border); }
.wf-step:last-child .wf-step-line { display:none; }
.wf-step-num { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; flex-shrink:0; z-index:1; }
.wf-step-body { flex:1; background:var(--surface2); border-radius:var(--r-sm); padding:9px 12px; min-width:0; }
.wf-step-title { font-size:14px; font-weight:600; margin-bottom:2px; }
.wf-step-desc { font-size:12px; color:var(--t2); }
.wf-step-tasks { margin-top:6px; display:flex; flex-direction:column; gap:3px; }
.wf-step-task { font-size:11px; color:var(--t2); display:flex; align-items:center; gap:5px; }
.wf-step-task::before { content:'↳'; color:var(--t3); }
.wf-step-actions { display:flex; gap:5px; align-items:center; flex-shrink:0; margin-top:2px; }
.wf-step-del { width:22px; height:22px; border-radius:50%; border:none; background:var(--red-l); color:var(--red); font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
/* Add-step inline */
.wf-add-step { display:flex; align-items:center; gap:8px; padding:8px 4px; }
.wf-add-step-line { flex:1; height:1px; background:var(--border); }
/* Enrolled leads section */
.wf-enrolled-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.wf-enrolled-title { font-size:13px; font-weight:600; color:var(--t2); text-transform:uppercase; letter-spacing:0.4px; }
.wf-lead-row { display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--surface2); border-radius:var(--r-sm); margin-bottom:5px; }
.wf-lead-av { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; flex-shrink:0; }
.wf-lead-info { flex:1; min-width:0; }
.wf-lead-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf-lead-sub { font-size:11px; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf-lead-step { font-size:11px; font-weight:600; padding:2px 7px; border-radius:6px; flex-shrink:0; }
.wf-lead-del { width:20px; height:20px; border-radius:50%; border:none; background:var(--red-l); color:var(--red); font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
/* Enrol modal */
.enrol-row { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r-sm); border-bottom:0.5px solid var(--border); cursor:pointer; transition:background 0.1s; }
.enrol-row:last-child { border-bottom:none; }
.enrol-row:hover { background:var(--surface2); }
.enrol-chk { width:20px; height:20px; border-radius:50%; border:2px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.enrol-chk.on { background:var(--blue); border-color:var(--blue); }
.enrol-chk.on::after { content:'✓'; color:#fff; font-size:10px; font-weight:700; }
.enrol-av { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; flex-shrink:0; }
.enrol-info { flex:1; min-width:0; }
.enrol-name { font-size:14px; font-weight:500; }
.enrol-sub { font-size:12px; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Step task list in sheet */
.wf-task-item { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--surface2); border-radius:var(--r-sm); margin-bottom:5px; }
.wf-task-item-title { flex:1; font-size:13px; }
.wf-task-item-del { width:20px; height:20px; border-radius:50%; border:none; background:var(--red-l); color:var(--red); font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; }

/* ══════════════════════════════════════════
   MOBILE — ALL RESPONSIVE STYLES
   Phones ≤ 768px. Desktop unchanged above.
══════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── HEADER — stop overflow ── */
  .hdr-inner { padding: 0 10px; height: 48px; gap: 6px; flex-wrap: nowrap; overflow: hidden; }
  .hdr-title { font-size: 14px; flex-shrink: 0; }
  .hdr-right { gap: 6px; flex-shrink: 0; overflow: hidden; }

  /* Hide text labels in header — keep only icons/toggles */
  .dm-label { display: none; }
  .sync-status { display: none; }

  /* Shrink the dark mode toggle */
  .dm-track { width: 36px; height: 22px; }
  .dm-knob { width: 16px; height: 16px; top: 3px; left: 3px; }
  [data-theme="dark"] .dm-knob { transform: translateX(14px); }

  /* ── TABS — scrollable, don't wrap ── */
  .tab-bar { padding: 5px 8px 7px; top: 48px; }
  .seg { overflow-x: auto; width: 100%; flex-wrap: nowrap; }
  .seg::-webkit-scrollbar { display: none; }
  .seg-btn { padding: 5px 10px; font-size: 12px; flex-shrink: 0; white-space: nowrap; }

  /* ── MAIN ── */
  .main { padding: 10px; }

  /* ── STATS ── */
  .stat { min-width: 100px; padding: 8px 10px; }
  .stat-val { font-size: 17px; }

  /* ── BOARD TOOLBAR ── */
  .board-toolbar { flex-wrap: wrap; gap: 6px; }

  /* ── KANBAN — swipe horizontally, scroll vertically inside each stage ── */
  #v-pipeline .board-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
  }
  #v-pipeline .board-wrap::-webkit-scrollbar { display: none; }

  #v-pipeline .board {
    display: flex;
    flex-direction: row;
    gap: 0;
    width: max-content;
    min-width: max-content;
    align-items: stretch;
  }

  /* Each column = full phone width, snaps into place */
  #v-pipeline .kcol {
    width: calc(100vw - 20px) !important;
    min-width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    flex-shrink: 0;
    scroll-snap-align: center;
    margin: 0 10px 0 0;
    height: calc(100dvh - 240px);
    min-height: 360px;
    max-height: calc(100dvh - 240px);
    overflow: hidden;
  }
  /* First column gets left margin too */
  #v-pipeline .kcol:first-child { margin-left: 10px; }
  #v-pipeline .kcards {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  #v-pipeline .kcards > * {
    flex: 0 0 auto !important;
  }
  #v-pipeline .card,
  #v-pipeline .card.compact,
  #v-pipeline .kcard {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: max-content;
  }


  /* Cards must be readable — restore normal sizing */
  .card {
    padding: 11px;
    margin-bottom: 0;
  }

  /* Card stripe stays thin */
  .card-stripe { height: 3px; }

  /* Card text readable */
  .card-name { font-size: 14px; }
  .card-company { font-size: 12px; }

  /* ── FILTER BAR ── */
  .kfb { overflow-x: auto; flex-wrap: nowrap; padding: 6px 8px; }
  .kfb::-webkit-scrollbar { display: none; }
  .kfb-pill { font-size: 11px; padding: 3px 8px; flex-shrink: 0; }
  .kfb-sep { display: none; }

  /* ── CONTACTS ── */
  .contacts-toolbar { gap: 6px; flex-wrap: wrap; }
  .filter-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-pill { flex-shrink: 0; }

  /* ── SHEETS ── */
  .sheet { max-height: 94vh; border-radius: 18px 18px 0 0; }
  .sh-body { padding: 0 12px 16px; gap: 10px; }
  .sh-foot { padding: 0 12px 20px; }
  .srow { padding: 10px 12px; }
  .srow-lbl { font-size: 14px; min-width: 70px; }
  .sinput { font-size: 14px; }

  /* ── TASKS QUICK ADD ── */
  .qadd-input { font-size: 15px; padding: 13px 12px; }
  .qadd-chips { gap: 4px; padding: 0 10px 10px; }
  .qadd-chip { font-size: 11px; padding: 3px 8px; }

  /* ── BUTTONS ── */
  .btn { font-size: 14px; padding: 6px 12px; }
  .btn-sm { font-size: 12px; padding: 4px 10px; }

  /* ── IMPORT ── */
  .import-export-row { flex-direction: column; }
  .import-export-row .btn { width: 100%; justify-content: center; }
  .drop-zone { padding: 28px 16px; }

  /* ── URL / LINK TRUNCATION ── */
  .ci-row { min-width: 0; overflow: hidden; }
  .ci-text { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .ci-link { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ca-btn { flex-shrink: 0; white-space: nowrap; font-size: 11px; padding: 4px 7px; }
  .card-actions { flex-wrap: wrap; gap: 3px; width: 100%; }

}

/* ── Tiny phones ── */
@media (max-width: 375px) {
  .seg-btn { font-size: 11px; padding: 4px 8px; }
  .ci-text { max-width: 26vw; }
}

/* ── Mobile nav dots & arrows (injected by JS) ── */
.board-col-dots {
  display: none;
  justify-content: center;
  gap: 6px;
  padding: 6px 0 2px;
}
.board-col-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s;
  flex-shrink: 0;
}
.board-col-dot.active {
  background: var(--blue);
  width: 20px;
  border-radius: 4px;
}
.board-swipe-hint {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 6px;
}
.board-swipe-arrow {
  background: var(--surface2);
  border: none;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  color: var(--t2);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}
.board-swipe-arrow:active { opacity: 0.6; }
.board-swipe-arrow.hidden { opacity: 0; pointer-events: none; }
.board-col-counter { font-size: 12px; color: var(--t3); font-weight: 500; }

@media (max-width: 768px) {
  .board-col-dots { display: flex; }
  .board-swipe-hint { display: flex; }
}
@media (min-width: 769px) {
  #mobile-board-nav { display: none !important; }
}

/* ══ CONTACT DETAIL TABS ══ */
.cd-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface2);
  border-radius: 12px;
  padding: 4px;
  margin: 16px 0 12px;
  flex-wrap: wrap;
}
.cd-tab {
  flex: 1;
  min-width: 0;
  padding: 7px 6px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--t2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.cd-tab.active {
  background: var(--surface);
  color: var(--t1);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

/* ── Template filter pills inside contact detail ── */
.cd-tpl-filter {
  padding: 4px 12px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--t2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.cd-tpl-filter.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 600;
}
.cd-tpl-filter:hover:not(.active) {
  background: var(--surface2);
}

/* ── Workflow step progress bar row ── */
.wf-step-bar {
  display: flex;
  gap: 3px;
  margin-bottom: 8px;
}
.wf-step-bar-seg {
  flex: 1;
  height: 4px;
  border-radius: 2px;
}

/* ── Community template globe badge ── */
.comm-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--blue-l);
  color: var(--blue);
}

@media(max-width:640px){
  #sh-detail .sh-body { padding:0 12px 16px; }
  .detail-hero {
    grid-template-columns:1fr;
    text-align:left;
    padding:16px;
  }
  .detail-stage-wrap { grid-column:auto; margin-top:0; }
  .detail-avatar {
    width:58px!important;
    height:58px!important;
    font-size:20px!important;
  }
  .detail-hero-name { font-size:22px; }
  .detail-section-title {
    align-items:flex-start;
    flex-direction:column;
    gap:2px;
  }
  .detail-section-title small { text-align:left; }
  .detail-info-card { grid-template-columns:1fr; }
  .detail-info-card .srow {
    min-height:auto;
    padding:12px;
  }
  .detail-action-grid { grid-template-columns:1fr 1fr; }
  #sh-detail .cd-tabs { grid-template-columns:1fr 1fr; }
  #sh-detail .cd-tab { min-height:50px; }
  #sh-detail .itask-title-wrap {
    align-items:stretch;
    flex-direction:column;
  }
  #sh-detail .itask-save-btn { width:100%; }
}

/* ══ MOBILE BOTTOM NAV — REMOVED ══ */
#mobile-bottom-nav,
.mob-nav-btn,
.mob-nav-icon,
.mob-nav-label,
#mobile-more-menu,
#mobile-more-backdrop,
.mob-more-item,
.mob-more-icon,
.mob-more-title,
.mob-more-grid { display: none !important; }

/* ══ COMMUNITY SHARE TOGGLE ══ */
.comm-toggle {
  position: relative;
  width: 48px;
  height: 28px;
  background: var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.comm-toggle.on {
  background: var(--blue);
}
.comm-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: transform 0.2s;
}
.comm-toggle.on .comm-toggle-knob {
  transform: translateX(20px);
}

/* ══ COMMUNITY CONTACTS ══ */

/* User pills */
.comm-user-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px;
  border: 1.5px solid var(--border);
  background: none; font-family: inherit;
  font-size: 13px; font-weight: 500; color: var(--t2);
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.comm-user-pill:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-l); }
.comm-user-pill.active { border-color: var(--blue); background: var(--blue); color: #fff; }
.comm-user-pill .comm-user-av {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.comm-user-pill.active .comm-user-av { background: rgba(255,255,255,0.3); }

/* Community card */
.comm-card {
  background: var(--card-bg); border-radius: var(--r);
  border: 0.5px solid var(--border); padding: 12px;
  cursor: pointer; transition: box-shadow 0.18s, transform 0.18s;
  animation: popIn 0.22s cubic-bezier(0.34,1.56,0.64,1);
  position: relative; overflow: hidden;
}
.comm-card:hover { box-shadow: var(--sh-md); transform: translateY(-1px); }
.comm-card:active { transform: scale(0.98); }

.comm-card-stripe { position: absolute; top: 0; left: 0; right: 0; height: 3px; }

.comm-card-top { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; margin-bottom: 6px; }
.comm-card-name { font-size: 14px; font-weight: 600; letter-spacing: -0.1px; }
.comm-card-company { font-size: 12px; color: var(--t2); margin-top: 1px; }

.comm-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.comm-card-author { font-size: 11px; color: var(--t3); }
.comm-card-date { font-size: 11px; color: var(--t3); }
.comm-card-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border); flex-shrink: 0; }

.comm-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 7px; border-top: 0.5px solid var(--border); }
.comm-note-count { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--t3); font-weight: 500; }

/* Community detail sheet */
.comm-detail-header { margin-bottom: 16px; }
.comm-detail-name { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 2px; }
.comm-detail-company { font-size: 14px; color: var(--t2); margin-bottom: 8px; }
.comm-detail-meta { font-size: 12px; color: var(--t3); display: flex; gap: 8px; flex-wrap: wrap; }

.comm-detail-fields { background: var(--surface2); border-radius: var(--r); padding: 12px 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.comm-detail-field { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.comm-detail-field-lbl { color: var(--t3); font-weight: 500; min-width: 70px; flex-shrink: 0; }
.comm-detail-field-val { color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comm-detail-field-val a { color: var(--blue); text-decoration: none; }

/* Community notes list */
.comm-notes-section { margin-bottom: 14px; }
.comm-notes-title { font-size: 13px; font-weight: 600; color: var(--t2); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.3px; }
.comm-note-item { background: var(--surface2); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 6px; }
.comm-note-text { font-size: 13px; color: var(--t1); line-height: 1.5; margin-bottom: 4px; white-space: pre-wrap; }
.comm-note-meta { font-size: 11px; color: var(--t3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.comm-note-delete { background: none; border: none; color: var(--red); font-size: 11px; cursor: pointer; padding: 0; margin-left: auto; font-family: inherit; }
.comm-note-delete:hover { text-decoration: underline; }

/* Contact sheet community toggle */
.comm-toggle {
  width: 44px; height: 26px; border-radius: 13px;
  background: var(--surface2); border: 1.5px solid var(--border);
  position: relative; cursor: pointer; transition: all 0.2s; flex-shrink: 0;
}
.comm-toggle.on { background: var(--blue); border-color: var(--blue); }
.comm-toggle-knob {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--t3); transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.comm-toggle.on .comm-toggle-knob { transform: translateX(18px); background: #fff; }

/* Stage filter pills for community */
.comm-stage-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 16px;
  border: 1.5px solid var(--border); background: none;
  font-family: inherit; font-size: 12px; font-weight: 500; color: var(--t2);
  cursor: pointer; transition: all 0.14s; white-space: nowrap;
}
.comm-stage-pill.active { border-color: var(--blue); background: var(--blue-l); color: var(--blue); }
.comm-stage-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }


/* ══ COMMUNITY PREVIEW SHEET ══ */
.comm-preview-meta {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--t3);
  margin-bottom:14px;
}
.comm-preview-badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
}
.comm-preview-block {
  background:var(--surface2);
  border-radius:var(--r);
  padding:14px;
  margin-bottom:14px;
}
.comm-preview-label {
  font-size:11px;
  font-weight:700;
  letter-spacing:0.35px;
  text-transform:uppercase;
  color:var(--t3);
  margin-bottom:8px;
}
.comm-preview-message {
  font-size:14px;
  line-height:1.65;
  color:var(--t1);
  white-space:pre-wrap;
  word-break:break-word;
}
.comm-preview-tip {
  font-size:12px;
  color:var(--t3);
  line-height:1.55;
}
.comm-card-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:8px;
}
.comm-card-hint {
  font-size:11px;
  color:var(--t3);
}

/* ── Dark mode qa-menu override ── */
[data-theme="dark"] .qa-menu {
  background:#1e2130;
  border-color:rgba(255,255,255,0.12);
  box-shadow:0 8px 40px rgba(0,0,0,0.55),0 2px 10px rgba(0,0,0,0.35);
}
[data-theme="dark"] .qa-item {
  color:#f1f5f9;
  border-bottom-color:rgba(255,255,255,0.08);
}
[data-theme="dark"] .qa-item:hover {
  background:rgba(255,255,255,0.07);
}
[data-theme="dark"] .qa-section {
  color:rgba(241,245,249,0.4);
}

/* ── DTP dark mode overrides ── */
[data-theme="dark"] .dtp-popup {
  background:#1e2130;
  border-color:rgba(255,255,255,0.12);
  box-shadow:0 12px 48px rgba(0,0,0,0.55),0 2px 8px rgba(0,0,0,0.35);
  color:#f1f5f9;
}
[data-theme="dark"] .dtp-head-x { background:rgba(255,255,255,0.10); color:rgba(241,245,249,0.7); }
[data-theme="dark"] .dtp-nav-btn { background:rgba(255,255,255,0.08); color:#f1f5f9; }
[data-theme="dark"] .dtp-nav-month { color:#f1f5f9; }
[data-theme="dark"] .dtp-wdays span { color:rgba(241,245,249,0.4); }
[data-theme="dark"] .dtp-day { color:#f1f5f9; }
[data-theme="dark"] .dtp-day:hover:not(:disabled) { background:rgba(255,255,255,0.08); }
[data-theme="dark"] .dtp-day.today { color:#60a5fa; }
[data-theme="dark"] .dtp-day.other { color:rgba(241,245,249,0.25); }
[data-theme="dark"] .dtp-sc { background:rgba(255,255,255,0.08); color:rgba(241,245,249,0.75); border-color:rgba(255,255,255,0.12); }
[data-theme="dark"] .dtp-div { background:rgba(255,255,255,0.10); }
[data-theme="dark"] .dtp-time-lbl { color:rgba(241,245,249,0.4); }
[data-theme="dark"] .dtp-t { background:rgba(255,255,255,0.08); color:rgba(241,245,249,0.75); border-color:rgba(255,255,255,0.12); }
[data-theme="dark"] .dtp-custom-inp { background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.15); color:#f1f5f9; }
[data-theme="dark"] .dtp-custom-inp::placeholder { color:rgba(241,245,249,0.3); }
[data-theme="dark"] .dtp-apply { background:#3b82f6; }
[data-theme="dark"] .dtp-clear { background:rgba(239,68,68,0.15); border-color:rgba(239,68,68,0.3); color:#fb7185; }
[data-theme="dark"] .dtp-head-title { color:#f1f5f9; }
[data-theme="dark"] .spin-btn { background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.12); color:#f1f5f9; }
[data-theme="dark"] .spin-val { background:rgba(255,255,255,0.10); color:#f1f5f9; }
[data-theme="dark"] .spin-ap-btn { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.12); color:rgba(241,245,249,0.75); }
[data-theme="dark"] .spin-ap-btn.spin-ap-sel { background:#3b82f6; border-color:#3b82f6; color:#fff; }