*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Kept hidden until initAuth() resolves and either shows the login screen or
   removes this class — otherwise the app shell (topbar, table) briefly
   flashes visible-but-empty on every load while the auth check is in flight. */
body.pre-auth .topbar,body.pre-auth .subtoolbar,body.pre-auth .table-wrap,body.pre-auth .pagination-bar{display:none!important}
:root{--bg:#f0f4f8;--bg2:#e4ecf4;--bg3:#d6e4f0;--tx:#1a2433;--tx2:#4a6080;--tx3:#8aa0b8;--bl:rgba(30,70,120,.12);--bm:rgba(30,70,120,.22);--rm:8px;--rl:12px;--ac:#1e6ab0;--ah:#155a96;--fn:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --overdue-bg:#FCEBEB;--overdue-border:#F0A8A8;--overdue-tx:#8a2020;
  --done-bg:#E1F5EE;--done-border:#7FD4AE;--done-tx:#0d5c42;}
@media(prefers-color-scheme:dark){:root{--bg:#0f1923;--bg2:#162334;--bg3:#1c2e42;--tx:#e0eaf4;--tx2:#7a9ab8;--tx3:#4a6880;--bl:rgba(80,140,200,.15);--bm:rgba(80,140,200,.28);
  --overdue-bg:#3a1c1c;--overdue-border:#7a3535;--overdue-tx:#ffb8b8;
  --done-bg:#15332a;--done-border:#2f6350;--done-tx:#8fe6c4;}}
body{font-family:var(--fn);font-size:13px;background:var(--bg3);color:var(--tx);height:100vh;display:flex;flex-direction:column;overflow:hidden}
.topbar{background:linear-gradient(135deg,#0f2540 0%,#1a3a5c 60%,#1e6ab0 100%);border-bottom:1px solid rgba(80,160,240,.25);padding:0 18px;display:flex;align-items:center;gap:10px;height:60px;flex-shrink:0;box-shadow:0 2px 12px rgba(10,30,60,.35)}
.logo{display:flex;align-items:center;gap:9px}.logo-text strong{font-size:15px;font-weight:700;color:#e8f4ff;letter-spacing:-.3px;display:block;line-height:1.1;text-shadow:0 1px 4px rgba(0,0,0,.3)}.logo-text span{font-size:10px;color:rgba(180,210,240,.75);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.sep{width:.5px;height:28px;background:rgba(100,170,240,.3);margin:0 4px}.tl-tabs{display:flex;gap:2px}
.tl-tab{padding:6px 13px;border-radius:var(--rm);border:none;background:none;font-size:13px;font-weight:500;color:rgba(160,200,240,.75);cursor:pointer;transition:background .15s}.tl-tab:hover{background:rgba(255,255,255,.1);color:#cce4ff}.tl-tab.active{background:rgba(255,255,255,.15);color:#fff;box-shadow:inset 0 0 0 .5px rgba(100,180,255,.3)}
.sp{flex:1}#stats{font-size:12px;color:rgba(180,215,245,.85)}
.tbtn{padding:7px 12px;border-radius:var(--rm);border:.5px solid rgba(100,170,240,.3);background:rgba(255,255,255,.08);font-size:13px;cursor:pointer;color:#cce4ff;display:flex;align-items:center;gap:6px;white-space:nowrap;transition:background .15s,border-color .15s}.tbtn:hover{background:rgba(255,255,255,.15);border-color:rgba(100,170,240,.5)}.tbtn.pri{background:linear-gradient(135deg,#1e6ab0,#1a9ed4);color:#fff;border-color:rgba(100,200,255,.4);box-shadow:0 2px 8px rgba(30,100,180,.4)}.tbtn.pri:hover{background:linear-gradient(135deg,#155a96,#1588b8)}.tbtn svg{width:14px;height:14px;flex-shrink:0}
.bulk-bar{background:rgba(30,106,176,.1);border-bottom:1px solid rgba(30,106,176,.2);padding:0 18px;display:flex;align-items:center;gap:10px;height:42px;flex-shrink:0}.bulk-bar.hidden{display:none}
.bulk-count{font-size:13px;font-weight:600;color:var(--ac)}.bbtn{padding:6px 13px;border-radius:var(--rm);border:.5px solid var(--bm);background:var(--bg);font-size:12px;font-weight:500;cursor:pointer;color:var(--tx);display:flex;align-items:center;gap:5px}.bbtn:hover{background:var(--bg2)}.bbtn.del{border-color:#F7C1C1;color:#A32D2D;background:#FCEBEB}.bbtn.del:hover{background:#F7C1C1}.bbtn svg{width:13px;height:13px}
.subtoolbar{background:var(--bg2);border-bottom:1px solid var(--bl);padding:0 18px;display:flex;align-items:center;gap:10px;height:44px;flex-shrink:0;box-shadow:0 1px 4px rgba(30,70,120,.08)}
.search-box{display:flex;align-items:center;gap:6px;background:var(--bg);border:.5px solid var(--bm);border-radius:var(--rm);padding:0 10px;height:30px;min-width:220px;box-shadow:inset 0 1px 3px rgba(30,70,120,.08)}.search-box svg{width:14px;height:14px;color:var(--tx3);flex-shrink:0}.search-box input{border:none;background:none;font-size:13px;color:var(--tx);outline:none;width:170px}
.ftag{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:500;background:var(--bg);border:.5px solid var(--bm);cursor:pointer;color:var(--tx2);transition:all .15s}.ftag:hover{border-color:var(--ac);color:var(--ac)}.ftag.on{background:rgba(30,106,176,.12);color:var(--ac);border-color:var(--ac)}
.col-btn{padding:5px 10px;border-radius:var(--rm);border:.5px solid var(--bl);background:none;font-size:12px;cursor:pointer;color:var(--tx2);display:flex;align-items:center;gap:5px}.col-btn:hover{background:var(--bg2)}.col-btn svg{width:13px;height:13px}
.table-wrap{flex:1;overflow:auto;background:var(--bg3)}
.pagination-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;
  background:var(--bg);border-top:.5px solid var(--bl);flex-shrink:0}
.pg-btn{width:26px;height:26px;border-radius:6px;border:.5px solid var(--bm);background:var(--bg2);
  color:var(--tx2);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center}
.pg-btn:hover:not(:disabled){border-color:var(--ac);color:var(--ac)}
.pg-btn:disabled{opacity:.4;cursor:default}
.pagination-help-btn{display:flex;align-items:center;gap:5px;padding:5px 12px;border-radius:14px;
  border:.5px solid var(--bm);background:var(--bg2);color:var(--tx2);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.pagination-help-btn:hover{border-color:var(--ac);color:var(--ac)}
table{width:max-content;min-width:100%;border-collapse:collapse;background:var(--bg)}
thead tr{background:linear-gradient(180deg,#daeaf8 0%,#cde0f2 100%);position:sticky;top:0;z-index:10;box-shadow:0 1px 0 rgba(30,106,176,.2)}
th{padding:0;white-space:nowrap;font-weight:700;font-size:11px;color:#2a5080;border-bottom:.5px solid rgba(30,106,176,.2);border-right:.5px solid rgba(30,106,176,.12);user-select:none;position:relative;letter-spacing:.02em;text-transform:uppercase}th:last-child{border-right:none}th.th-cb{width:42px;min-width:42px}
.th-inner{display:flex;align-items:center;gap:4px;padding:9px 10px 9px 12px;cursor:grab;overflow:hidden}.th-inner:active{cursor:grabbing}.th-cb-inner{display:flex;align-items:center;justify-content:center;padding:9px 0;cursor:default}
.th-dh{color:var(--tx3);opacity:0;transition:opacity .1s;flex-shrink:0}th:hover .th-dh{opacity:1}th.drag-over{background:#EEEDFE}th.dragging{opacity:.4}
.th-resize{position:absolute;right:0;top:0;width:5px;height:100%;cursor:col-resize;z-index:2}.th-resize:hover,.th-resize.on{background:var(--ac);opacity:.5}
td{padding:10px 12px;border-bottom:.5px solid var(--bl);border-right:.5px solid var(--bl);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}td.wrap{white-space:normal;word-break:break-word;text-overflow:unset;overflow:visible}td:last-child{border-right:none}td.td-cb{width:42px;min-width:42px;padding:0;text-align:center;vertical-align:middle}
tr:hover td{background:rgba(30,106,176,.06)}tr.row-open td{background:rgba(30,106,176,.1);color:var(--tx)}tr.row-open td .tdn{color:#1a1a18}tr.row-checked td{background:rgba(30,106,176,.08);color:var(--tx)}tr.row-checked:hover td{background:rgba(30,106,176,.13);color:var(--tx)}tr.row-checked td .tdn{color:#1a1a18}
.cb{width:16px;height:16px;accent-color:var(--ac);cursor:pointer}.td-cb .cb{display:block;margin:0 auto}
.tdn{display:flex;align-items:center;gap:8px;font-weight:500}.av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0}.av-lead{background:rgba(30,106,176,.15);color:#1e6ab0}.av-contact{background:#E1F5EE;color:#085041}
.badge{display:inline-block;font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px}.badge-lead{background:rgba(30,106,176,.15);color:#1e6ab0}.badge-contact{background:#E1F5EE;color:#085041}
.sb{display:inline-block;font-size:11px;font-weight:500;padding:3px 9px;border-radius:20px;border:.5px solid transparent}
.dyn-badge{background:var(--bg2);color:var(--tx);border:.5px solid var(--bl)}
.dyn-badge:hover{border-color:var(--ac);color:var(--ac)}
.status-badge-editable:hover{opacity:.8}
.status-cell-edit{font-size:12px;padding:4px 6px;border-radius:var(--rm);border:.5px solid var(--ac);background:var(--bg);color:var(--tx);outline:none;max-width:100%}
.td-acts{display:flex;gap:4px;opacity:0;transition:opacity .1s}tr:hover .td-acts{opacity:1}.rbtn{width:26px;height:26px;border-radius:6px;border:.5px solid var(--bl);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--tx2)}.rbtn:hover{background:var(--bg3);color:var(--tx)}.rbtn svg{width:13px;height:13px}
.empty-t{text-align:center;padding:60px 20px;color:var(--tx3)}.empty-t svg{width:48px;height:48px;opacity:.2;margin-bottom:12px}
.dp{position:fixed;top:0;right:0;width:640px;height:100vh;background:var(--bg);border-left:1px solid rgba(30,106,176,.2);display:flex;flex-direction:column;z-index:50;transform:translateX(100%);transition:transform .25s ease,width .25s ease;box-shadow:-4px 0 20px rgba(10,30,60,.15)}.dp.open{transform:translateX(0)}.dp.wide{width:min(1400px,92vw)}
.dp-hdr{padding:16px 18px;border-bottom:1px solid rgba(30,106,176,.15);display:flex;align-items:center;gap:12px;flex-shrink:0;background:linear-gradient(135deg,var(--bg2),var(--bg))}.dp-av{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex-shrink:0}
.dp-meta{flex:1;min-width:0}.dp-meta h3{font-size:16px;font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap}.dp-meta p{font-size:12px;color:var(--tx2);margin-top:2px}
.dp-x{width:30px;height:30px;border-radius:var(--rm);border:.5px solid var(--bl);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--tx2)}.dp-x:hover{background:var(--bg2)}.dp-x svg{width:15px;height:15px}
.sbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 18px;border-bottom:1px solid rgba(30,106,176,.15);flex-shrink:0;background:var(--bg2)}.slabel{font-size:11px;color:var(--tx2);font-weight:500;margin-right:2px}
.spill{padding:4px 11px;border-radius:20px;font-size:11px;font-weight:500;cursor:pointer;border:.5px solid transparent}.spill.on{outline:2px solid var(--ac);outline-offset:1px}
.dp-tabs{display:flex;border-bottom:.5px solid var(--bl);flex-shrink:0}.dptab{flex:1;padding:9px 0;font-size:12px;font-weight:500;cursor:pointer;border:none;background:none;color:var(--tx2);border-bottom:2px solid transparent;transition:color .15s}.dptab.active{color:var(--ac);border-bottom-color:var(--ac);font-weight:600}
.dp-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:16px 18px}.dp-sec{margin-bottom:20px}.dp-sec-ttl{font-size:11px;font-weight:600;color:var(--tx2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.dp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dpf label{font-size:11px;color:var(--tx2);display:block;margin-bottom:3px}
.dpf-copy{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:5px;padding:0;
  border:.5px solid var(--bl);background:var(--bg2);color:var(--tx2);cursor:pointer;border-radius:5px;vertical-align:-4px;transition:color .15s,background .15s,border-color .15s}
.dpf-copy:hover{color:#fff;background:var(--ac);border-color:var(--ac)}
.dp-meta h3 .dpf-copy{vertical-align:-2px}
.dp.wide .dp-grid{grid-template-columns:repeat(3,1fr)}
.dpi{width:100%;padding:6px 9px;border-radius:var(--rm);border:.5px solid var(--bl);background:var(--bg2);font-size:13px;color:var(--tx);font-family:var(--fn);outline:none}.dpi:hover{border-color:var(--bm)}.dpi:focus{border-color:var(--ac);background:var(--bg)}.dpta{resize:vertical;min-height:120px;line-height:1.6;overflow-y:hidden}
.dp-save{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--rm);border:none;background:linear-gradient(135deg,var(--ac),#1a9ed4);color:#fff;font-size:13px;font-weight:500;cursor:pointer;box-shadow:0 2px 8px rgba(30,106,176,.3)}.dp-save:hover{background:linear-gradient(135deg,var(--ah),#1588b8);box-shadow:0 3px 12px rgba(30,106,176,.4)}
.nc{background:var(--bg2);border-radius:var(--rm);padding:9px 12px;border:.5px solid var(--bl);margin-bottom:8px;position:relative}.nd{font-size:11px;color:var(--tx2);margin-bottom:4px}.nt{font-size:13px;line-height:1.5;white-space:pre-wrap}
.notes-tab{display:flex;flex-direction:column}
.notes-scroll{max-height:calc(100vh - 240px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;min-height:0;padding-right:2px;margin-top:10px}
.ncomp{flex-shrink:0;margin-top:0}
.notes-preview{border:.5px solid var(--bl);border-radius:var(--rm);background:var(--bg2);padding:8px 10px;cursor:pointer;transition:border-color .15s}
.notes-preview:hover{border-color:var(--ac)}
.notes-preview-list{max-height:120px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-right:2px}
.notes-preview-row{padding:4px 0;border-bottom:.5px solid var(--bl);display:flex;flex-direction:column;gap:1px}
.notes-preview-row:last-child{border-bottom:none}
.notes-preview-date{font-size:10px;color:var(--tx3);font-weight:500}
.notes-preview-txt{font-size:12.5px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notes-preview-empty{font-size:12px;color:var(--tx3);font-style:italic;text-align:center;padding:10px 0}
.notes-preview-more{font-size:11px;color:var(--ac);font-weight:600;padding-top:6px;margin-top:4px;border-top:.5px solid var(--bl)}
.dp-inline-notes{border:.5px solid var(--bl);border-radius:var(--rm);background:var(--bg2);padding:10px}
.dp-inline-notes .ncomp{margin-top:0}
.dp-inline-notes-scroll{max-height:380px;margin-top:10px}
.notes-cell{display:inline-flex;align-items:center;gap:5px;max-width:100%;color:var(--tx2)}
.notes-cell-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notes-cell-badge{background:rgba(30,106,176,.12);color:var(--ac);border-radius:20px;font-size:10px;font-weight:600;padding:1px 6px;flex-shrink:0}
.nx{position:absolute;top:7px;right:7px;width:20px;height:20px;border-radius:5px;border:none;background:none;cursor:pointer;color:var(--tx3);display:flex;align-items:center;justify-content:center}.nx:hover{background:var(--bg3)}.nx svg{width:12px;height:12px}
.ne{position:absolute;top:7px;right:29px;width:20px;height:20px;border-radius:5px;border:none;background:none;cursor:pointer;color:var(--tx3);display:flex;align-items:center;justify-content:center}.ne:hover{background:var(--bg3);color:var(--ac)}.ne svg{width:12px;height:12px}
.note-edited-tag{font-style:italic;color:var(--tx3)}
.note-edit-ta{width:100%;min-height:60px;padding:8px 10px;border-radius:var(--rm);border:.5px solid var(--ac);background:var(--bg);font-size:13px;line-height:1.5;color:var(--tx);font-family:var(--fn);resize:none;outline:none;box-sizing:border-box}
.note-edit-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.note-edit-cancel{padding:6px 12px;border-radius:var(--rm);border:.5px solid var(--bm);background:none;font-size:12px;color:var(--tx2);cursor:pointer}.note-edit-cancel:hover{background:var(--bg2)}
.note-edit-save{padding:6px 14px;border-radius:var(--rm);border:none;background:var(--ac);color:#fff;font-size:12px;font-weight:600;cursor:pointer}.note-edit-save:hover{background:var(--ah)}
.ncomp{display:flex;gap:8px;margin-top:10px}.ncomp textarea{flex:1;padding:8px 10px;border-radius:var(--rm);border:.5px solid var(--bl);background:var(--bg);font-size:13px;resize:none;height:60px;font-family:var(--fn);color:var(--tx);outline:none}.ncomp textarea:focus{border-color:var(--ac)}.ncomp button{align-self:flex-end;padding:8px 12px;border-radius:var(--rm);border:.5px solid var(--bm);background:none;font-size:13px;cursor:pointer;color:var(--tx)}.ncomp button:hover{background:var(--bg2)}
.tl-r{display:flex;gap:10px;padding-bottom:14px;position:relative}.tl-r:not(:last-child)::before{content:'';position:absolute;left:13px;top:28px;bottom:0;width:1px;background:var(--bl)}.tl-d{width:26px;height:26px;border-radius:50%;border:.5px solid var(--bm);background:var(--bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1;color:var(--tx2)}.tl-d svg{width:12px;height:12px}.tl-i{padding-top:4px}.tl-m{font-size:13px;font-weight:500}.tl-s{font-size:11px;color:var(--tx2);margin-top:1px}
.bk{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:320}
.modal{background:var(--bg);border-radius:var(--rl);padding:22px;width:500px;max-width:96vw;border:.5px solid var(--bm);max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.modal h3{font-size:16px;font-weight:600;margin-bottom:5px}.modal-sub{font-size:12px;color:var(--tx2);margin-bottom:18px}
.mrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mf{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}.mf label{font-size:12px;color:var(--tx2);font-weight:500}.mf input,.mf select,.mf textarea{padding:8px 10px;border-radius:var(--rm);border:.5px solid var(--bm);background:var(--bg2);font-size:13px;color:var(--tx);font-family:var(--fn);outline:none}.mf input:focus,.mf select:focus,.mf textarea:focus{border-color:var(--ac)}
.logcall-outcomes{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.logcall-outcome-btn{padding:6px 12px;border-radius:16px;border:.5px solid var(--bm);background:var(--bg2);
  color:var(--tx2);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--fn)}
.logcall-outcome-btn:hover{border-color:var(--ac);color:var(--ac)}
.logcall-outcome-btn.active{background:var(--ac);border-color:var(--ac);color:#fff}
.logcall-outcome-pill-wrap{display:inline-flex;align-items:center;position:relative}
.logcall-outcome-pill-wrap .logcall-outcome-btn{padding-right:22px}
.logcall-outcome-remove{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:14px;height:14px;
  border:none;background:none;color:inherit;opacity:.6;cursor:pointer;font-size:13px;line-height:1;padding:0;border-radius:50%}
.logcall-outcome-remove:hover{opacity:1;background:rgba(0,0,0,.15)}
.logcall-outcome-add{padding:6px 12px;border-radius:16px;border:1px dashed var(--bm);background:none;
  color:var(--tx3);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--fn)}
.logcall-outcome-add:hover{border-color:var(--ac);color:var(--ac)}
.logcall-add-input-wrap{display:inline-flex;align-items:center;gap:4px}
.logcall-add-input{padding:5px 8px;border-radius:12px;border:.5px solid var(--ac);background:var(--bg);
  color:var(--tx);font-size:12px;font-family:var(--fn);outline:none;width:130px}
.logcall-add-confirm{padding:5px 10px;border-radius:12px;border:none;background:var(--ac);color:#fff;
  font-size:11px;font-weight:600;cursor:pointer}
.logcall-add-cancel{width:20px;height:20px;border:none;background:none;color:var(--tx3);cursor:pointer;font-size:12px;border-radius:50%}
.logcall-add-cancel:hover{color:var(--tx);background:var(--bg3)}
.macts{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.mbtn{padding:9px 18px;border-radius:var(--rm);font-size:13px;cursor:pointer;font-weight:500}.mbtn-c{border:.5px solid var(--bm);background:none;color:var(--tx2)}.mbtn-c:hover{background:var(--bg2)}.mbtn-p{border:none;background:linear-gradient(135deg,var(--ac),#1a9ed4);color:#fff;box-shadow:0 2px 8px rgba(30,106,176,.3)}.mbtn-p:hover{opacity:.9}
.imp-drop{border:1.5px dashed var(--bm);border-radius:var(--rl);padding:24px 16px;text-align:center;cursor:pointer;margin-bottom:14px}.imp-drop:hover,.imp-drop.dov{border-color:var(--ac);background:rgba(83,58,183,.04)}.imp-drop svg{width:30px;height:30px;color:var(--tx3);margin-bottom:8px}.imp-drop p{font-size:13px;color:var(--tx2)}.imp-drop small{font-size:11px;color:var(--tx3)}
.imp-prev{background:var(--bg2);border-radius:var(--rm);border:.5px solid var(--bl);overflow:auto;max-height:150px;margin-bottom:14px}.imp-prev table{width:100%;font-size:12px;border-collapse:collapse}.imp-prev th{padding:6px 10px;background:var(--bg3);text-align:left;font-weight:600;color:var(--tx2);border-bottom:.5px solid var(--bl);white-space:nowrap}.imp-prev td{padding:5px 10px;border-bottom:.5px solid var(--bl);white-space:nowrap}
.col-map{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.cmi{display:flex;flex-direction:column;gap:4px}.cmi label{font-size:11px;color:var(--tx2);font-weight:500}.cmi select{padding:6px 8px;border-radius:var(--rm);border:.5px solid var(--bm);background:var(--bg2);font-size:12px;color:var(--tx);outline:none}
.imp-info{font-size:12px;color:var(--tx2);background:var(--bg2);border-radius:var(--rm);padding:9px 12px;margin-bottom:14px;border:.5px solid var(--bl)}.imp-info strong{color:var(--tx)}
.imp-mrow{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--rm);background:var(--bg);border:.5px solid var(--bl);flex-wrap:wrap}
.imp-mrow-name{font-size:13px;color:var(--tx);flex:1;min-width:120px;display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-flag{font-size:10px;font-weight:600;color:var(--ac);background:rgba(30,106,176,.12);border:.5px solid rgba(30,106,176,.3);border-radius:20px;padding:1px 7px;flex-shrink:0}
.imp-mrow-actions{display:flex;gap:6px;flex-shrink:0}
.imp-mode-btn{padding:5px 10px;border-radius:var(--rm);border:.5px solid var(--bm);background:var(--bg2);font-size:11px;font-weight:500;color:var(--tx2);cursor:pointer;white-space:nowrap}
.imp-mode-btn:hover{background:var(--bg3)}
.imp-mode-btn.on{background:var(--ac);border-color:var(--ac);color:#fff}
.imp-mrow-target{flex-basis:100%;display:flex;gap:8px;align-items:center;margin-top:2px}
.imp-mrow-target select{flex:1;padding:6px 8px;border-radius:var(--rm);border:.5px solid var(--bm);background:var(--bg2);font-size:12px;color:var(--tx);outline:none}
.imp-mrow-target.err select{border-color:#C0392B}
.col-list{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;max-height:380px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.cli{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg2);border-radius:var(--rm);border:.5px solid var(--bl);cursor:grab}.cli:active{cursor:grabbing}.cli.ci-ov{background:#EEEDFE}.cli.ci-dr{opacity:.4}
.ci-g{color:var(--tx3);flex-shrink:0}.ci-g svg{width:14px;height:14px}.ci-lbl{flex:1;font-size:13px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-w{width:58px;padding:4px 6px;border-radius:6px;border:.5px solid var(--bm);background:var(--bg);font-size:12px;color:var(--tx);text-align:center;outline:none}.ci-w:focus{border-color:var(--ac)}
.tog{width:34px;height:20px;border-radius:10px;background:var(--bg3);border:.5px solid var(--bm);cursor:pointer;position:relative;transition:background .15s;flex-shrink:0}.tog.on{background:var(--ac);border-color:var(--ac)}.tog::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s}.tog.on::after{left:16px}
.ci-arr{display:flex;flex-direction:column;gap:2px}.ci-a{width:20px;height:20px;border-radius:4px;border:.5px solid var(--bl);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--tx2)}.ci-a:hover{background:var(--bg3)}.ci-a svg{width:11px;height:11px}
.conf-modal{background:var(--bg);border-radius:var(--rl);padding:28px 26px 24px;width:360px;max-width:92vw;border:.5px solid var(--bm);text-align:center}.conf-modal h4{font-size:16px;font-weight:600;margin-bottom:8px}.conf-modal p{font-size:13px;color:var(--tx2);margin-bottom:24px;line-height:1.6}
.conf-icon{width:44px;height:44px;border-radius:50%;background:#FCEBEB;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}.conf-icon svg{width:22px;height:22px;color:#E24B4A}
.conf-btns{display:flex;gap:10px;justify-content:center}.cbtn{padding:10px 32px;border-radius:var(--rm);font-size:14px;font-weight:500;cursor:pointer}.cbtn-n{border:.5px solid var(--bm);background:none;color:var(--tx2)}.cbtn-n:hover{background:var(--bg2)}.cbtn-y{border:none;background:#E24B4A;color:#fff}.cbtn-y:hover{background:#A32D2D}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1a1a18;color:#fff;font-size:13px;font-weight:500;padding:10px 20px;border-radius:var(--rl);z-index:200;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}.toast.show{opacity:1}
::-webkit-scrollbar{width:6px;height:12px}::-webkit-scrollbar-track{background:var(--bg2);border-radius:6px}::-webkit-scrollbar-thumb{background:var(--bm);border-radius:6px;border:2px solid var(--bg2)}::-webkit-scrollbar-thumb:hover{background:var(--ac)}

/* ── Auth screens ── */
.auth-screen{position:fixed;inset:0;background:linear-gradient(160deg,#0f2540 0%,#1a3a5c 50%,#0f2540 100%);display:flex;align-items:center;justify-content:center;z-index:1000;flex-direction:column;gap:16px}
.auth-card{background:var(--bg);border-radius:var(--rl);padding:32px;width:400px;max-width:94vw;border:.5px solid rgba(30,106,176,.2);box-shadow:0 8px 40px rgba(10,30,80,.2),0 0 0 .5px rgba(30,106,176,.08)}
.auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.auth-logo-text strong{font-size:18px;font-weight:700;color:var(--ac);display:block}
.auth-logo-text span{font-size:11px;color:var(--tx2);text-transform:uppercase;letter-spacing:.08em}
.auth-card h2{font-size:18px;font-weight:600;margin-bottom:4px}
.auth-card .sub{font-size:13px;color:var(--tx2);margin-bottom:22px}
.auth-field{display:flex;flex-direction:column;gap:5px;margin-bottom:16px}
.auth-field label{font-size:12px;font-weight:500;color:var(--tx2)}
.auth-field input{padding:10px 12px;border-radius:var(--rm);border:.5px solid rgba(30,106,176,.25);background:var(--bg2);font-size:14px;color:var(--tx);font-family:var(--fn);outline:none;transition:border-color .15s}
.auth-field input:focus{border-color:var(--ac);background:var(--bg);box-shadow:0 0 0 3px rgba(30,106,176,.1)}
.auth-btn{width:100%;padding:11px;border-radius:var(--rm);border:none;background:linear-gradient(135deg,var(--ac),#1a9ed4);color:#fff;font-size:14px;font-weight:600;cursor:pointer;margin-top:6px;box-shadow:0 2px 10px rgba(30,106,176,.35);transition:opacity .15s}
.auth-btn:hover{opacity:.9}
.auth-err{background:#FCEBEB;color:#A32D2D;border:.5px solid #F7C1C1;border-radius:var(--rm);padding:10px 14px;font-size:13px;margin-bottom:14px;display:none}
.auth-field input.field-err,.pw-wrap input.field-err{border-color:#E24B4A!important;background:rgba(226,75,74,.12)!important;color:#fff!important}
.auth-field input.field-err::placeholder,.pw-wrap input.field-err::placeholder{color:#ff8080!important;opacity:1!important;font-weight:500}
.field-err-msg{font-size:12px;color:#ff8080;margin-top:4px;font-weight:500;display:none}
.field-err-msg.show{display:block}
.auth-err.show{display:block}
.auth-link{font-size:12px;color:var(--ac);cursor:pointer;text-align:center;margin-top:12px;display:block}
.auth-link:hover{text-decoration:underline}
.auth-token-box{background:var(--bg2);border-radius:var(--rm);padding:12px 14px;font-size:13px;font-family:monospace;color:var(--tx);border:.5px solid var(--bl);word-break:break-all;margin-bottom:10px;text-align:center;letter-spacing:.03em}
/* ── User management ── */
.users-panel{padding:24px}
.users-panel h2{font-size:17px;font-weight:600;margin-bottom:4px}
.users-panel .sub{font-size:13px;color:var(--tx2);margin-bottom:20px}
.seat-bar{display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.seat-card{background:var(--bg);border-radius:var(--rm);border:.5px solid var(--bl);padding:12px 18px;display:flex;flex-direction:column;gap:2px;min-width:140px}
.seat-card .seat-num{font-size:24px;font-weight:700;color:var(--ac)}
.seat-card .seat-lbl{font-size:11px;color:var(--tx2);text-transform:uppercase;letter-spacing:.05em}
.user-table{width:100%;border-collapse:collapse;background:var(--bg);border-radius:var(--rm);overflow:hidden;border:.5px solid var(--bl)}
.user-table th{padding:9px 14px;text-align:left;font-size:11px;font-weight:600;color:var(--tx2);text-transform:uppercase;letter-spacing:.04em;background:var(--bg2);border-bottom:.5px solid var(--bl)}
.user-table td{padding:11px 14px;border-bottom:.5px solid var(--bl);font-size:13px;vertical-align:middle}
.user-table tr:last-child td{border-bottom:none}
.role-badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.role-admin{background:rgba(30,106,176,.15);color:#1e6ab0}
.role-user{background:var(--bg2);color:var(--tx2)}
.invite-badge{background:#E1F5EE;color:#085041;display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.users-actions{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.invite-token{font-family:monospace;font-size:12px;background:var(--bg2);padding:3px 8px;border-radius:4px;color:var(--tx2);max-width:180px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle}
.copy-btn{font-size:11px;padding:3px 8px;border-radius:var(--rm);border:.5px solid var(--bl);background:none;cursor:pointer;color:var(--tx2);margin-left:4px}
.copy-btn:hover{background:var(--bg2)}

/* ── Sortable columns ── */
.th-sortable { cursor: pointer !important; }
.th-sortable:hover .th-inner { background: rgba(83,58,183,.06); }
.sort-icon { width: 13px; height: 13px; flex-shrink: 0; color: var(--tx3); margin-left: 2px; transition: color .15s; }
.sort-icon.asc, .sort-icon.desc { color: var(--ac); }
.th-filter-icon{width:11px;height:11px;flex-shrink:0;color:var(--tx3);margin-left:3px;cursor:pointer;transition:color .15s}
.th-filter-icon:hover{color:var(--ac)}
.th-filter-icon.active{color:var(--ac)}
.col-filter-menu{position:fixed;background:var(--bg);border:.5px solid var(--bm);border-radius:var(--rl);
  box-shadow:0 8px 24px rgba(0,0,0,.15);min-width:200px;max-width:260px;max-height:320px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  z-index:800;padding:8px;animation:fadeIn .12s ease}
.sort-menu { position: absolute; top: 100%; left: 0; z-index: 30; background: var(--bg); border: .5px solid var(--bm); border-radius: var(--rm); box-shadow: 0 4px 16px rgba(0,0,0,.12); min-width: 160px; overflow: hidden; }
.sort-menu-item { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 13px; cursor: pointer; color: var(--tx); white-space: nowrap; }
.sort-menu-item:hover { background: var(--bg2); }
.sort-menu-item.active { background: #EEEDFE; color: var(--ac); font-weight: 600; }
.sort-menu-item svg { width: 14px; height: 14px; flex-shrink: 0; }
/* ── Company name + role badge in topbar ── */
.topbar-context { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.topbar-company { font-size: 12px; font-weight: 600; color: var(--tx); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-role { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 20px; text-transform: uppercase; letter-spacing: .05em; }
.role-superadmin-badge { background: linear-gradient(135deg,#0f2540,#1a3a5c); color: #7dd3fc; border: .5px solid rgba(100,180,255,.4); }
.role-admin-badge { background: rgba(30,106,176,.15); color: #1e6ab0; }
.role-user-badge { background: var(--bg2); color: var(--tx2); }

/* ── Show password toggle ── */
.pw-wrap { position: relative; }
.pw-wrap input { width: 100%; padding-right: 40px; }
.pw-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--tx3); padding: 4px; display: flex; align-items: center; justify-content: center; }
.pw-toggle:hover { color: var(--tx); }
.pw-toggle svg { width: 16px; height: 16px; pointer-events: none; }

/* ── Auth full-page background with logo ── */
.auth-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000;overflow:hidden}
/* Logo as massive background — bleeds outside the viewport */
.auth-screen-bg{position:absolute;inset:-10%;background-image:url('/static/logo.jpg');background-size:cover;background-position:center center;filter:blur(2px) brightness(0.35) saturate(1.4);transform:scale(1.1)}
/* Subtle radial vignette to focus the eye on the centre */
.auth-screen-vignette{position:absolute;inset:0;background:radial-gradient(ellipse 80% 80% at 50% 50%,transparent 30%,rgba(0,5,15,.7) 100%)}
/* Top-left watermark logo — large, sits in background above the blurred bg */
.auth-screen-watermark{position:absolute;top:-40px;left:-40px;z-index:1;opacity:.25;pointer-events:none}
.auth-screen-watermark img{width:340px;height:340px;border-radius:16px;object-fit:contain;filter:saturate(0.6) brightness(1.2)}
/* The floating login card */
.auth-screen-inner{position:relative;z-index:2;display:flex;width:100%;max-width:900px;min-height:520px;border-radius:16px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.7),0 0 0 .5px rgba(100,180,255,.15)}
/* Left panel — semi-transparent over the bg */
.auth-marketing{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;background:rgba(5,15,30,.55);backdrop-filter:blur(16px);border-right:.5px solid rgba(100,180,255,.1)}
.auth-mkt-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:40px 32px;gap:20px;height:100%}
.auth-mkt-hero{display:flex;flex-direction:column;align-items:center;gap:8px}
/* Logo in the left panel — bigger and more prominent */
.auth-mkt-hero-logo{width:110px;height:110px;border-radius:50%;object-fit:cover;display:block;border:.5px solid rgba(100,180,255,.3);box-shadow:0 6px 28px rgba(0,0,0,.6)}
.auth-mkt-hero strong{font-size:28px;font-weight:900;color:#fff;letter-spacing:-.5px;text-shadow:0 2px 16px rgba(0,0,0,.8);text-align:center}
.auth-mkt-hero span{font-size:10px;color:rgba(140,200,255,.7);letter-spacing:.2em;text-transform:uppercase;text-align:center}
.auth-mkt-hero-divider{width:40px;height:1.5px;background:linear-gradient(90deg,transparent,rgba(100,180,255,.5),transparent);border-radius:1px;margin-top:4px}
.auth-mkt-tagline{font-size:13px;color:rgba(180,220,255,.8);line-height:1.65;text-align:center;font-style:italic;max-width:280px}
.auth-mkt-features{display:flex;flex-direction:column;gap:12px;width:100%}
.auth-mkt-feature{display:flex;align-items:flex-start;gap:12px}
.auth-mkt-feature-icon{width:30px;height:30px;border-radius:8px;background:rgba(30,106,176,.3);border:.5px solid rgba(100,180,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.auth-mkt-feature-icon svg{width:14px;height:14px;color:#7dd3fc}
.auth-mkt-feature-text strong{font-size:12px;font-weight:600;color:#e0f0ff;display:block;margin-bottom:2px}
.auth-mkt-feature-text span{font-size:11px;color:rgba(140,200,255,.65);line-height:1.45}
.auth-mkt-footer{font-size:10px;color:rgba(120,170,220,.45);text-align:center;padding-top:16px;border-top:.5px solid rgba(100,180,255,.08);width:100%;margin-top:auto}
/* Right panel — the login form */
.auth-form-panel{width:370px;flex-shrink:0;background:rgba(8,14,26,.88);backdrop-filter:blur(20px);padding:28px 32px;display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;max-height:98vh}
.auth-form-panel h2{font-size:20px;font-weight:700;color:#e8f4ff;margin-bottom:4px}
.auth-form-panel .sub{font-size:13px;color:rgba(140,190,255,.65);margin-bottom:20px}
.auth-tab-row{display:flex;gap:0;margin-bottom:22px;border:.5px solid rgba(100,180,255,.2);border-radius:var(--rm);overflow:hidden}
.auth-tab{flex:1;padding:9px 0;font-size:13px;font-weight:500;text-align:center;cursor:pointer;border:none;background:none;color:rgba(140,190,255,.55);transition:all .15s}
.auth-tab:hover{background:rgba(255,255,255,.05)}
.auth-tab.active{background:linear-gradient(135deg,#1e6ab0,#1a9ed4);color:#fff}
.auth-field label{font-size:12px;font-weight:500;color:rgba(150,200,255,.7)}
.auth-field input{background:rgba(255,255,255,.06);border:.5px solid rgba(100,180,255,.18);color:#e8f4ff}
.auth-field input::placeholder{color:rgba(140,190,255,.3)}
.auth-field input:focus{border-color:#1e6ab0;background:rgba(255,255,255,.1);box-shadow:0 0 0 3px rgba(30,106,176,.18)}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.pw-toggle{color:rgba(140,190,255,.4)}
.pw-toggle:hover{color:rgba(140,190,255,.8)}
/* Setup/invite/profile card — also floats over the background */
.auth-card{position:relative;z-index:2;background:#0a1424;border-radius:var(--rl);padding:32px;width:420px;max-width:94vw;border:.5px solid rgba(100,180,255,.15);box-shadow:0 24px 60px rgba(0,0,0,.6)}
.auth-card.profile-card{width:600px;padding:26px;max-height:calc(100vh - 40px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.profile-card .auth-field{margin-bottom:12px}
.profile-card h3{margin-bottom:8px!important}
.back-to-crm-btn{display:block;position:sticky;bottom:-26px;margin:18px -26px -26px;padding:12px 26px 18px;
  background:#0a1424;border-top:.5px solid rgba(100,180,255,.15);text-align:center;box-sizing:border-box;
  color:#cfe8ff;font-size:13px;font-weight:600;cursor:pointer;transition:color .15s}
.back-to-crm-btn:hover{color:#8fc6ff}
.auth-card h2{color:#e8f4ff}
.auth-card .sub{color:rgba(140,190,255,.65)}
.auth-field label{font-size:12px;font-weight:500;color:rgba(150,200,255,.7)}
/* The profile card is reached AFTER logging in, so unlike setup/invite/login
   (which are intentionally always dark, branded pre-login screens) it should
   follow the same light/dark preference as the rest of the app the person is
   actually using. Scoped narrowly so it doesn't affect those other screens,
   which also share the base .auth-card class. */
.profile-card{background:var(--bg)!important}
.profile-card h2{color:var(--tx)!important}
.profile-card .sub{color:var(--tx2)!important}
.profile-card .auth-field label{color:var(--tx2)!important}
.profile-card .auth-field input{background:var(--bg2)!important;border-color:rgba(30,106,176,.25)!important;color:var(--tx)!important}
.profile-card .auth-field input::placeholder{color:var(--tx3)!important}
.profile-card .auth-field input:focus{border-color:var(--ac)!important;background:var(--bg)!important}
.profile-card .back-to-crm-btn{background:var(--bg2)!important;border-top-color:var(--bl)!important;color:var(--ac)!important}
.profile-card .back-to-crm-btn:hover{color:var(--ah)!important}
@media(max-width:700px){
  .auth-screen-inner{flex-direction:column;max-width:400px;min-height:auto}
  .auth-marketing{padding:0}
  .auth-mkt-content{padding:24px 20px 16px;gap:12px}
  .auth-mkt-feature-extra{display:none}
  .auth-mkt-tagline{display:none}
  .auth-mkt-hero-logo{width:60px;height:60px}
  .auth-form-panel{width:100%;padding:24px 20px;max-height:none}
}

/* ── Super admin account switcher ── */
.sa-switcher{position:relative;display:none}
.sa-switcher-btn{padding:6px 12px;border-radius:var(--rm);border:.5px solid rgba(100,200,255,.3);background:rgba(100,200,255,.1);color:#7dd3fc;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap}
.sa-switcher-btn:hover{background:rgba(100,200,255,.18)}
.sa-switcher-btn svg{width:13px;height:13px;flex-shrink:0}
.sa-switcher-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:var(--bg);border:.5px solid var(--bm);border-radius:var(--rl);box-shadow:0 8px 28px rgba(0,0,0,.18);min-width:240px;z-index:200;overflow:hidden}
.sa-switcher-hdr{padding:10px 14px;font-size:11px;font-weight:600;color:var(--tx2);text-transform:uppercase;letter-spacing:.05em;border-bottom:.5px solid var(--bl);background:var(--bg2)}
.sa-company-row{padding:10px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;color:var(--tx);border-bottom:.5px solid var(--bl);transition:background .1s}
.sa-company-row:last-child{border-bottom:none}
.sa-company-row:hover{background:var(--bg2)}
.sa-company-row.active{background:rgba(30,106,176,.08);color:var(--ac)}
.sa-company-avatar{width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,var(--ac),#1a9ed4);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.sa-company-info{flex:1;min-width:0}
.sa-company-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-company-meta{font-size:11px;color:var(--tx2);margin-top:1px}
.sa-active-dot{width:7px;height:7px;border-radius:50%;background:#1D9E75;flex-shrink:0}

/* ── Notification bell ── */
.notif-btn{position:relative;padding:7px 10px;border-radius:var(--rm);border:.5px solid rgba(100,180,255,.3);background:rgba(100,180,255,.08);color:#7dd3fc;cursor:pointer;display:none;align-items:center;justify-content:center}
.notif-btn:hover{background:rgba(100,180,255,.16)}
.notif-btn svg{width:18px;height:18px}
.notif-badge{position:absolute;top:-4px;right:-4px;background:#E24B4A;color:#fff;font-size:10px;font-weight:700;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #0f2540;animation:notif-pulse 2s infinite}
@keyframes notif-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.notif-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--bg);border:.5px solid var(--bm);border-radius:var(--rl);box-shadow:0 8px 32px rgba(0,0,0,.18);width:360px;z-index:300;overflow:hidden}
.notif-header{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:.5px solid var(--bl);background:var(--bg2)}
.notif-header strong{font-size:13px;font-weight:600}
.notif-header button{font-size:11px;color:var(--ac);background:none;border:none;cursor:pointer;padding:0}
.notif-header button:hover{text-decoration:underline}
.notif-list{max-height:400px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* Team chat */
.chat-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--bg);border:.5px solid var(--bm);
  border-radius:var(--rl);box-shadow:0 8px 32px rgba(0,0,0,.18);width:340px;height:460px;z-index:300;
  overflow:hidden;display:flex;flex-direction:column;transition:width .18s,height .18s}
.chat-dropdown.expanded{width:600px;height:680px}
@media(max-width:680px){.chat-dropdown.expanded{width:calc(100vw - 24px)}}
.chat-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;
  border-bottom:.5px solid var(--bl);flex-shrink:0}
.chat-hdr strong{font-size:14px;color:var(--tx)}
.chat-hdr-actions{display:flex;align-items:center;gap:8px}
.chat-close-x{background:none;border:none;color:var(--tx3);cursor:pointer;padding:2px;display:flex}
.chat-status-btn{display:flex;align-items:center;gap:5px;padding:4px 9px;border-radius:12px;
  border:.5px solid var(--bm);background:var(--bg2);color:var(--tx2);font-size:11px;font-weight:600;cursor:pointer}
.chat-status-menu{position:absolute;top:44px;right:14px;background:var(--bg);border:.5px solid var(--bm);
  border-radius:var(--rm);box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:310;overflow:hidden;min-width:150px}
.chat-status-opt{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:12px;color:var(--tx);
  cursor:pointer;background:none;border:none;width:100%;text-align:left}
.chat-status-opt:hover{background:var(--bg2)}
.presence-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;display:inline-block}
.presence-dot.online{background:#22c55e}
.presence-dot.away{background:#eab308}
.presence-dot.busy{background:#ef4444}
.presence-dot.dnd{background:#ef4444}
.presence-dot.offline{background:var(--tx3)}
.chat-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;min-height:0}
.chat-new-btn{margin:10px 14px;padding:8px;border-radius:var(--rm);border:.5px dashed var(--bm);
  background:none;color:var(--ac);font-size:12px;font-weight:600;cursor:pointer;width:calc(100% - 28px)}
.chat-conv-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-bottom:.5px solid var(--bl)}
.chat-conv-item:hover{background:var(--bg2)}
.chat-conv-avatar{position:relative;width:34px;height:34px;border-radius:50%;background:var(--ac);
  color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-conv-avatar .presence-dot{position:absolute;bottom:-1px;right:-1px;border:2px solid var(--bg)}
.chat-group-avatar{background:var(--tx2)}
.chat-msg-sender{font-size:10px;font-weight:700;color:var(--ac);margin-bottom:2px}
.chat-conv-info{flex:1;min-width:0}
.chat-conv-name{font-size:13px;font-weight:600;color:var(--tx);display:flex;justify-content:space-between;gap:6px}
.chat-conv-preview{font-size:12px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.chat-conv-time{font-size:10px;color:var(--tx3);flex-shrink:0}
.chat-unread-dot{background:var(--ac);color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;
  border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;flex-shrink:0}
.chat-empty{padding:40px 20px;text-align:center;color:var(--tx3);font-size:12px}
.chat-pick-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer}
.chat-pick-item:hover{background:var(--bg2)}
.chat-thread-hdr{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:.5px solid var(--bl);flex-shrink:0}
.chat-back-btn{background:none;border:none;color:var(--tx2);cursor:pointer;display:flex;padding:2px}
.chat-thread-name{font-size:13px;font-weight:600;color:var(--tx);display:flex;align-items:center;gap:6px}
.chat-thread-status{font-size:11px;color:var(--tx3);margin-top:1px}
.chat-msgs{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.chat-msg{max-width:75%;padding:8px 11px;border-radius:12px;font-size:13px;line-height:1.4;word-wrap:break-word}
.chat-msg.mine{align-self:flex-end;background:var(--ac);color:#fff;border-bottom-right-radius:3px}
.chat-msg.theirs{align-self:flex-start;background:var(--bg2);color:var(--tx);border-bottom-left-radius:3px}
.chat-msg-time{font-size:9px;opacity:.65;margin-top:3px}
.chat-input-row{display:flex;gap:8px;padding:10px 14px;border-top:.5px solid var(--bl);flex-shrink:0}
.chat-input-row input{flex:1;padding:8px 12px;border-radius:16px;border:.5px solid var(--bm);
  background:var(--bg2);color:var(--tx);font-size:13px;outline:none}
.chat-send-btn{width:34px;height:34px;border-radius:50%;background:var(--ac);border:none;color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-send-btn:hover{background:var(--ah)}
.chat-attach-btn{width:34px;height:34px;border-radius:50%;background:var(--bg2);border:.5px solid var(--bm);
  color:var(--tx2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-attach-btn:hover{border-color:var(--ac);color:var(--ac)}
.chat-msg.has-image{padding:4px;background:none!important}
.chat-msg-img{max-width:220px;max-height:220px;border-radius:10px;cursor:pointer;display:block}
.chat-img-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:2000;
  display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.chat-img-lightbox img{max-width:90vw;max-height:90vh;border-radius:6px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.chat-img-lightbox-close{position:absolute;top:20px;right:24px;background:rgba(255,255,255,.12);
  border:none;color:#fff;width:36px;height:36px;border-radius:50%;font-size:16px;cursor:pointer}
.notif-item{padding:12px 16px;border-bottom:.5px solid var(--bl);display:flex;gap:12px;align-items:flex-start;cursor:default}
.notif-item.unread{background:rgba(30,106,176,.04)}
.notif-item:last-child{border-bottom:none}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--ac);flex-shrink:0;margin-top:5px}
.notif-dot.read{background:transparent}
.notif-info{flex:1;min-width:0}
.notif-title{font-size:13px;font-weight:600;color:var(--tx);margin-bottom:2px}
.notif-msg{font-size:12px;color:var(--tx2);line-height:1.4;margin-bottom:6px}
.notif-time{font-size:11px;color:var(--tx3)}
.notif-actions{display:flex;gap:6px;margin-top:6px}
.notif-approve{padding:4px 12px;border-radius:20px;border:none;background:#1D9E75;color:#fff;font-size:11px;font-weight:600;cursor:pointer}
.notif-approve:hover{background:#158a62}
.notif-dismiss{padding:4px 10px;border-radius:20px;border:.5px solid var(--bm);background:none;color:var(--tx2);font-size:11px;cursor:pointer}
.notif-dismiss:hover{background:var(--bg2)}
.notif-empty{padding:32px 16px;text-align:center;color:var(--tx3);font-size:13px}
/* ── Pending approval screen ── */
.pending-screen{position:fixed;inset:0;background:linear-gradient(160deg,#0f2540,#1a3a5c);display:flex;align-items:center;justify-content:center;z-index:900;flex-direction:column;gap:0}
.pending-card{background:var(--bg);border-radius:var(--rl);padding:40px 36px;width:420px;max-width:94vw;text-align:center;border:.5px solid rgba(30,106,176,.2);box-shadow:0 16px 48px rgba(0,0,0,.2)}
.pending-icon{width:64px;height:64px;border-radius:50%;background:rgba(30,106,176,.1);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.pending-icon svg{width:32px;height:32px;color:var(--ac)}
.pending-card h2{font-size:20px;font-weight:700;margin-bottom:8px}
.pending-card p{font-size:14px;color:var(--tx2);line-height:1.6;margin-bottom:20px}
.pending-card .pending-email{font-size:12px;background:var(--bg2);border-radius:var(--rm);padding:8px 14px;color:var(--tx2);margin-bottom:20px}
/* ── Super admin company management panel ── */
.co-status-badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.co-status-pending{background:#FEF3C7;color:#92400E}
.co-status-active{background:#D1FAE5;color:#065F46}
.co-status-suspended{background:#FEE2E2;color:#991B1B}

/* ── Dashboard ── */
.dash-screen{position:fixed;inset:0;background:var(--bg3);z-index:5;display:none;flex-direction:column;overflow:hidden}
.dash-screen.tasks-panel{position:static;inset:auto;flex:1;min-height:0;z-index:auto}
.dash-wrap{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:24px}
.dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.dash-card{background:var(--bg);border-radius:var(--rl);border:.5px solid var(--bl);padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.dash-card-num{font-size:32px;font-weight:800;color:var(--ac);letter-spacing:-1px}
.dash-card-lbl{font-size:12px;font-weight:600;color:var(--tx2);text-transform:uppercase;letter-spacing:.05em}
.dash-card-sub{font-size:12px;color:var(--tx3)}
.dash-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.dash-panel{background:var(--bg);border-radius:var(--rl);border:.5px solid var(--bl);padding:20px 22px}
.dash-panel h3{font-size:14px;font-weight:600;margin-bottom:14px;color:var(--tx)}
.dash-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dash-bar-lbl{font-size:12px;color:var(--tx2);width:90px;flex-shrink:0;text-align:right}
.dash-bar-track{flex:1;height:8px;background:var(--bg3);border-radius:4px;overflow:hidden}
.dash-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--ac),#1a9ed4);transition:width .4s ease}
.dash-bar-count{font-size:12px;color:var(--tx2);width:30px;text-align:right}
.dash-recent-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:.5px solid var(--bl)}
.dash-recent-row:last-child{border-bottom:none}
.dash-recent-av{width:28px;height:28px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--ac);flex-shrink:0}
.dash-recent-info{flex:1;min-width:0}
.dash-recent-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-recent-sub{font-size:11px;color:var(--tx2)}
/* ── Tasks ── */
.task-list{display:flex;flex-direction:column;gap:6px}
.task-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:var(--bg2);border-radius:var(--rm);border:.5px solid var(--bl)}
.task-item.overdue{border-color:var(--overdue-border);background:var(--overdue-bg)}
.task-item.overdue .task-title{color:var(--overdue-tx);font-weight:600}
.task-item.done{border-color:var(--done-border);background:var(--done-bg);opacity:1}
.task-item.archived-item{background:var(--bg2);opacity:.75}
.task-item.archived-item .task-title{color:var(--tx2)}
.task-section{margin-bottom:18px}
.task-section:last-child{margin-bottom:0}
.task-section-hdr{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--tx2);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.task-section-count{font-size:11px;font-weight:600;background:var(--bg2);color:var(--tx2);
  padding:1px 8px;border-radius:10px}
.task-section-overdue .task-section-hdr{color:var(--overdue-tx)}
.task-section-overdue .task-section-count{background:var(--overdue-bg);color:var(--overdue-tx)}
.task-section-done .task-section-hdr{color:var(--done-tx)}
.task-section-done .task-section-count{background:var(--done-bg);color:var(--done-tx)}
.task-cb{width:16px;height:16px;accent-color:var(--ac);flex-shrink:0;margin-top:2px;cursor:pointer}
.task-info{flex:1;min-width:0}
.task-title{font-size:13px;font-weight:500;color:var(--tx)}
.task-item.done .task-title{text-decoration:line-through;color:var(--tx3)}
.task-meta{font-size:11px;color:var(--tx2);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}
.task-assignee{background:var(--bg3);color:var(--tx2);padding:1px 7px;border-radius:10px;font-weight:600}
.task-due{font-size:11px;font-weight:600}
.task-due.overdue{color:var(--overdue-tx)}
.task-due.today{color:#1D9E75}
.task-due.soon{color:#B45309}
.task-del{width:20px;height:20px;border-radius:4px;border:none;background:none;cursor:pointer;color:var(--tx3);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.task-del:hover{background:var(--bg3);color:var(--tx)}
.task-del svg{width:12px;height:12px}
.task-badge{position:absolute;top:-4px;right:-4px;background:#E24B4A;color:#fff;font-size:10px;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg)}

/* ── Lead capture panel ── */
.capture-section{background:var(--bg2);border-radius:var(--rm);border:.5px solid var(--bl);padding:16px 18px;margin-bottom:16px}
.capture-section h4{font-size:13px;font-weight:600;margin-bottom:4px;color:var(--tx)}
.capture-section p{font-size:12px;color:var(--tx2);line-height:1.5;margin-bottom:12px}
.capture-endpoint{font-family:monospace;font-size:11px;background:var(--bg);border:.5px solid var(--bm);border-radius:var(--rm);padding:10px 12px;word-break:break-all;color:var(--tx2);margin-bottom:10px;display:flex;align-items:flex-start;gap:8px}
.capture-endpoint code{flex:1;line-height:1.6}
.capture-copy{padding:5px 10px;border-radius:var(--rm);border:.5px solid var(--bm);background:none;font-size:11px;cursor:pointer;color:var(--tx2);white-space:nowrap;flex-shrink:0}
.capture-copy:hover{background:var(--bg3)}
.capture-field-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:11px;color:var(--tx2);margin-bottom:8px}
.capture-field-row code{background:var(--bg);padding:2px 6px;border-radius:4px;font-family:monospace;color:var(--ac);font-size:11px}
.capture-tab-row{display:flex;gap:4px;margin-bottom:14px}
.capture-tab{padding:5px 12px;border-radius:var(--rm);border:.5px solid var(--bm);background:none;font-size:12px;font-weight:500;cursor:pointer;color:var(--tx2)}
.capture-tab:hover{background:var(--bg2)}
.capture-tab.active{background:var(--ac);color:#fff;border-color:var(--ac)}

/* ══ ONBOARDING TOUR ══════════════════════════════════════════════════════ */
.tour-overlay{position:fixed;inset:0;z-index:10000;pointer-events:none;background:transparent}
.tour-highlight{position:fixed;border-radius:8px;box-shadow:0 0 0 9999px rgba(0,0,0,.55);z-index:10001;pointer-events:none;transition:all .3s ease}
.tour-tooltip{position:fixed;z-index:10002;background:var(--bg);border-radius:var(--rl);padding:20px 22px;width:320px;box-shadow:0 12px 40px rgba(0,0,0,.25);border:.5px solid rgba(30,106,176,.2);pointer-events:all}
.tour-tooltip::before{content:'';position:absolute;width:12px;height:12px;background:var(--bg);border:.5px solid rgba(30,106,176,.2);transform:rotate(45deg)}
.tour-tooltip.arrow-top::before{top:-7px;left:50%;margin-left:-6px;border-bottom:none;border-right:none}
.tour-tooltip.arrow-bottom::before{bottom:-7px;left:50%;margin-left:-6px;border-top:none;border-left:none}
.tour-tooltip.arrow-left::before{left:-7px;top:24px;border-top:none;border-right:none}
.tour-tooltip.arrow-right::before{right:-7px;top:24px;border-bottom:none;border-left:none}
.tour-step-num{font-size:10px;font-weight:700;color:var(--ac);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.tour-tooltip h4{font-size:15px;font-weight:700;margin-bottom:6px;color:var(--tx)}
.tour-tooltip p{font-size:13px;color:var(--tx2);line-height:1.55;margin-bottom:16px}
.tour-actions{display:flex;align-items:center;justify-content:space-between}
.tour-dots{display:flex;gap:5px}
.tour-dot{width:6px;height:6px;border-radius:50%;background:var(--bg3)}
.tour-dot.active{background:var(--ac);width:18px;border-radius:3px}
.tour-skip{font-size:12px;color:var(--tx3);background:none;border:none;cursor:pointer;padding:0}
.tour-skip:hover{color:var(--tx2)}
.tour-btns{display:flex;gap:8px}
.tour-next{padding:7px 16px;border-radius:var(--rm);border:none;background:linear-gradient(135deg,var(--ac),#1a9ed4);color:#fff;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(30,106,176,.3)}
.tour-next:hover{opacity:.9}
.tour-back{padding:7px 12px;border-radius:var(--rm);border:.5px solid var(--bm);background:none;color:var(--tx2);font-size:13px;cursor:pointer}
.tour-back:hover{background:var(--bg2)}
/* Welcome modal */
.welcome-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:850;display:flex;align-items:center;justify-content:center}
.welcome-card{background:var(--bg);border-radius:var(--rl);padding:36px;width:480px;max-width:94vw;box-shadow:0 20px 60px rgba(0,0,0,.25);border:.5px solid rgba(30,106,176,.15);text-align:center}
.welcome-card img{width:72px;height:72px;border-radius:50%;object-fit:cover;margin-bottom:16px;border:2px solid rgba(30,106,176,.2)}
.welcome-card h2{font-size:22px;font-weight:800;margin-bottom:8px}
.welcome-card p{font-size:14px;color:var(--tx2);line-height:1.6;margin-bottom:20px}
.welcome-checklist{text-align:left;background:var(--bg2);border-radius:var(--rm);padding:14px 18px;margin-bottom:22px}
.welcome-check-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:.5px solid var(--bl);font-size:13px;color:var(--tx2)}
.welcome-check-item:last-child{border-bottom:none}
.welcome-check-icon{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--bm);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--tx3)}
.welcome-check-icon.done{background:var(--ac);border-color:var(--ac);color:#fff}
/* ══ HELP BUTTON & PANEL ══════════════════════════════════════════════════ */
.help-btn{position:fixed;bottom:24px;right:24px;z-index:600;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--ac),#1a9ed4);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(30,106,176,.5);transition:transform .2s}
body:has(.dp.open) .help-btn{display:none!important}
body:has(.dp.open) .help-panel{display:none}
.help-btn:hover{transform:scale(1.1)}
.help-btn svg{width:22px;height:22px}
.help-panel{position:fixed;bottom:82px;right:24px;z-index:700;width:360px;background:var(--bg);border-radius:var(--rl);border:.5px solid var(--bm);box-shadow:0 8px 32px rgba(0,0,0,.18);overflow:hidden;display:none}
.help-panel.open{display:flex;flex-direction:column}
.help-hdr{padding:14px 16px;background:linear-gradient(135deg,#0f2540,#1a3a5c);display:flex;align-items:center;gap:10px}
.help-hdr img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.help-hdr-text strong{font-size:13px;font-weight:700;color:#fff;display:block}
.help-hdr-text span{font-size:11px;color:rgba(160,210,255,.7)}
.help-hdr-close{margin-left:auto;background:none;border:none;color:rgba(160,210,255,.6);cursor:pointer;padding:2px;display:flex}
.help-hdr-close:hover{color:#fff}
.help-tabs{display:flex;border-bottom:.5px solid var(--bl)}
.help-tab{flex:1;padding:9px 0;font-size:12px;font-weight:500;text-align:center;cursor:pointer;border:none;background:none;color:var(--tx2)}
.help-tab:hover{background:var(--bg2)}
.help-tab.active{color:var(--ac);border-bottom:2px solid var(--ac);font-weight:600}
.help-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;max-height:400px}
#hp-faq,#hp-chat,#hp-tour{flex-direction:column}
/* Chat */
.chat-messages{padding:12px;display:flex;flex-direction:column;gap:10px;min-height:200px}
.chat-msg{max-width:85%;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.5}
.chat-msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--ac),#1a9ed4);color:#fff;border-bottom-right-radius:3px}
.chat-msg.bot{align-self:flex-start;background:var(--bg2);color:var(--tx);border-bottom-left-radius:3px;border:.5px solid var(--bl)}
.chat-msg.bot.loading{color:var(--tx3)}
.chat-input-row{display:flex;gap:8px;padding:10px;border-top:.5px solid var(--bl);background:var(--bg)}
.chat-input{flex:1;padding:8px 10px;border-radius:var(--rm);border:.5px solid var(--bm);background:var(--bg2);font-size:13px;color:var(--tx);outline:none;font-family:var(--fn)}
.chat-input:focus{border-color:var(--ac)}
.chat-send{padding:8px 12px;border-radius:var(--rm);border:none;background:var(--ac);color:#fff;cursor:pointer;display:flex;align-items:center}
.chat-send:hover{background:var(--ah)}
.chat-send svg{width:14px;height:14px}
/* FAQ */
.faq-list{padding:12px}
.faq-top-row{display:flex;align-items:center;gap:8px;margin:12px 12px 0}
.faq-search-wrap{display:flex;align-items:center;gap:6px;background:var(--bg);border:.5px solid var(--bm);border-radius:var(--rm);
  padding:0 10px;height:34px;flex:1;min-width:0}
.faq-search-wrap svg{width:14px;height:14px;color:var(--tx3);flex-shrink:0}
.faq-search-wrap input{border:none;background:none;font-size:13px;color:var(--tx);outline:none;width:100%;min-width:0}
.faq-ask-btn{flex-shrink:0;padding:0 14px;height:34px;border-radius:var(--rm);border:none;
  background:var(--ac);color:#fff;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:var(--fn)}
.faq-ask-btn:hover{background:var(--ah)}
.faq-cat-list{display:flex;flex-wrap:wrap;gap:6px;padding:14px 0 10px}
.faq-cat-link{background:var(--bg2);border:.5px solid var(--bm);border-radius:14px;padding:5px 12px;
  margin:0;font-size:12px;font-weight:600;color:var(--tx2);
  cursor:pointer;font-family:var(--fn);white-space:nowrap;transition:background .12s,color .12s,border-color .12s}
.faq-cat-link:hover{border-color:var(--done-tx);color:var(--done-tx)}
.faq-cat-link.active{background:rgba(13,92,66,.14);border-color:var(--done-tx);color:var(--done-tx);font-weight:700}
@media(prefers-color-scheme:dark){.faq-cat-link.active{background:rgba(143,230,196,.16)}}
.faq-item{border-bottom:.5px solid var(--bl)}
.faq-item:last-child{border-bottom:none}
.faq-q{width:100%;text-align:left;padding:11px 0;background:none;border:none;font-size:13px;font-weight:500;color:var(--tx);cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-q:hover{color:var(--ac)}
.faq-q svg{width:14px;height:14px;color:var(--tx3);flex-shrink:0;transition:transform .2s}
.faq-q.open svg{transform:rotate(180deg)}
.faq-a{font-size:12px;color:var(--tx2);line-height:1.6;padding:0 0 12px;display:none}
.faq-a.open{display:block}
/* Tour restart link in FAQ */
.tour-restart-btn{width:100%;padding:10px;margin-top:8px;border-radius:var(--rm);border:.5px solid var(--ac);background:rgba(30,106,176,.06);color:var(--ac);font-size:13px;font-weight:500;cursor:pointer;text-align:center}
.tour-restart-btn:hover{background:rgba(30,106,176,.12)}

/* ── Company email settings ── */
.email-setup-panel{background:var(--bg2);border-radius:var(--rm);padding:16px 18px;margin-bottom:12px}
.email-setup-panel h4{font-size:13px;font-weight:600;margin-bottom:6px;color:var(--tx)}
.email-setup-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:3px 10px;border-radius:10px;font-weight:600;margin-bottom:10px}
.email-setup-status.ok{background:#D1FAE5;color:#065F46}
.email-setup-status.not-set{background:#FEF3C7;color:#92400E}
/* ── Send email modal ── */
.compose-field{margin-bottom:12px}
.compose-field label{font-size:12px;color:var(--tx2);display:block;margin-bottom:4px;font-weight:500}
.compose-field input,.compose-field textarea{width:100%;padding:9px 11px;border-radius:var(--rm);border:.5px solid var(--bm);background:var(--bg2);font-size:13px;color:var(--tx);font-family:var(--fn);box-sizing:border-box;outline:none}
.compose-field input:focus,.compose-field textarea:focus{border-color:var(--ac)}
.compose-field textarea{resize:vertical;min-height:120px;line-height:1.6}
.compose-to-badge{background:var(--bg3);border-radius:var(--rm);padding:6px 10px;font-size:12px;color:var(--tx2);margin-bottom:14px;display:flex;align-items:center;gap:6px}
.compose-to-badge strong{color:var(--tx)}
/* Email history entry */
.hist-email{background:rgba(30,106,176,.05);border-left:3px solid var(--ac);padding:8px 10px;border-radius:0 var(--rm) var(--rm) 0;font-size:12px}
.hist-email-subj{font-weight:600;color:var(--tx);margin-bottom:3px}
.hist-email-preview{color:var(--tx2);font-size:11px;line-height:1.5}

/* ── Files tab ── */
.files-drop{border:2px dashed var(--bm);border-radius:var(--rm);padding:24px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg2);margin-bottom:14px}
.files-drop:hover,.files-drop.drag-over{border-color:var(--ac);background:rgba(30,106,176,.06)}
.files-drop svg{width:28px;height:28px;color:var(--tx3);margin-bottom:8px}
.files-drop p{font-size:13px;color:var(--tx2);margin:0}
.files-drop small{font-size:11px;color:var(--tx3)}
.files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin-bottom:14px}
.file-thumb{border-radius:var(--rm);overflow:hidden;border:.5px solid var(--bl);background:var(--bg2);aspect-ratio:1;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center}
.file-thumb img{width:100%;height:100%;object-fit:cover}
.file-thumb-del{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.6);border:none;border-radius:50%;width:18px;height:18px;cursor:pointer;color:#fff;font-size:10px;display:none;align-items:center;justify-content:center;padding:0}
.file-thumb:hover .file-thumb-del{display:flex}
.files-list{display:flex;flex-direction:column;gap:6px}
.file-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg2);border-radius:var(--rm);border:.5px solid var(--bl)}
.file-row-icon{width:28px;height:28px;border-radius:6px;background:rgba(30,106,176,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.file-row-icon svg{width:14px;height:14px;color:var(--ac)}
.file-row-info{flex:1;min-width:0}
.file-row-name{font-size:12px;font-weight:500;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.file-row-name:hover{color:var(--ac);text-decoration:underline}
.file-row-size{font-size:11px;color:var(--tx3)}
.file-row-del{background:none;border:none;cursor:pointer;color:var(--tx3);padding:2px;border-radius:4px;display:flex}
.file-row-del:hover{color:#A32D2D;background:#FCEBEB}
.files-empty{text-align:center;padding:24px;color:var(--tx3);font-size:13px}
.file-upload-progress{height:3px;background:rgba(30,106,176,.15);border-radius:2px;margin-top:8px;overflow:hidden}
.file-upload-bar{height:100%;background:var(--ac);border-radius:2px;width:0;transition:width .3s}
/* Image lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:10500;display:flex;align-items:center;justify-content:center;cursor:pointer}
.lightbox img{max-width:90vw;max-height:90vh;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.lightbox-close{position:absolute;top:20px;right:24px;color:#fff;font-size:28px;cursor:pointer;background:none;border:none;line-height:1}

/* ── Email opt-out ── */
.optout-badge{display:inline-flex;align-items:center;gap:4px;background:#FEF3C7;color:#92400E;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;border:.5px solid #FDE68A;white-space:nowrap}
.optout-badge svg{width:10px;height:10px}
.optout-toggle{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg2);border-radius:var(--rm);border:.5px solid var(--bl);margin-bottom:12px;cursor:pointer}
.optout-toggle:hover{border-color:var(--bm)}
.optout-toggle-label{flex:1;font-size:13px;color:var(--tx)}
.optout-toggle-sub{font-size:11px;color:var(--tx2);margin-top:2px}
.optout-switch{position:relative;width:36px;height:20px;flex-shrink:0}
.optout-switch input{opacity:0;width:0;height:0}
.optout-switch-track{position:absolute;inset:0;border-radius:10px;background:var(--bg3);border:.5px solid var(--bm);transition:.2s;cursor:pointer}
.optout-switch input:checked + .optout-switch-track{background:#F59E0B;border-color:#D97706}
.optout-switch-track::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.optout-switch input:checked + .optout-switch-track::after{left:18px}
.optout-warning{background:#FEF3C7;border:.5px solid #FDE68A;border-radius:var(--rm);padding:10px 12px;font-size:12px;color:#92400E;line-height:1.5;margin-bottom:12px}

/* ── Import / Export dropdown ── */
.ie-wrap{display:flex;align-items:center}
.ie-menu{position:absolute;top:calc(100% + 6px);left:0;background:var(--bg);border:.5px solid var(--bm);border-radius:var(--rl);box-shadow:0 8px 24px rgba(0,0,0,.18);min-width:200px;z-index:800;padding:6px;animation:fadeIn .12s ease}
.ie-section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);padding:4px 8px 2px}
.ie-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border-radius:var(--rm);border:none;background:none;color:var(--tx);font-size:13px;cursor:pointer;text-align:left;transition:background .12s}
.ie-item:hover{background:var(--bg2);color:var(--ac)}
.ie-item svg{flex-shrink:0;color:var(--tx2)}
.ie-divider{height:.5px;background:var(--bl);margin:4px 0}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — max-width: 768px, or max-height: 500px (landscape phones
   are often wider than 768px once rotated, but still short — same treatment
   needed either way, or the layout silently reverts to desktop sizing in a
   viewport that's only ~360-430px tall)
   ══════════════════════════════════════════════════════════════════════════════ */
@media(max-width:768px),(max-height:500px){

  /* ── Topbar ── */
  .topbar{height:auto;flex-wrap:wrap;padding:8px 12px;gap:6px}
  .logo-text{display:none}
  .logo img{width:36px;height:36px}
  .sep{display:none}

  /* Tabs: scrollable horizontal strip */
  .tl-tabs{order:10;width:100%;display:flex;overflow-x:auto;gap:2px;padding:4px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tl-tabs::-webkit-scrollbar{display:none}
  .tl-tab{flex-shrink:0;padding:6px 14px;font-size:12px;white-space:nowrap}

  /* Hide non-essential topbar items */
  #stats{display:none!important}
  .topbar-company{display:none!important}
  .topbar-role{display:none!important}
  .topbar-context span:first-child{display:none}

  /* Shrink remaining topbar buttons */
  .tbtn{padding:6px 8px;font-size:11px;gap:4px}
  .tbtn svg{width:13px;height:13px}
  .sp{display:none}

  /* Hide text labels on small buttons, keep icons */
  #email-settings-btn span,
  #ie-btn .ie-label{display:none}

  /* Import/Export dropdown full width on mobile */
  .ie-menu{left:auto;right:0;min-width:180px}

  /* ── Sub-toolbar (fields/edit/add) ── */
  .subtoolbar{flex-wrap:wrap;gap:6px;padding:8px 10px;height:auto}
  .search-box{flex:1 1 100%;min-width:0;width:100%}
  .search-box input{width:100%;flex:1}
  .col-btn{padding:5px 8px;font-size:11px}
  .tbtn.pri{padding:7px 12px;font-size:12px}
  #add-new-btn{padding:7px 12px;font-size:12px}

  /* ── Main table ── */
  .table-wrap{font-size:12px}
  th,td{padding:8px 10px;white-space:nowrap}

  /* ── Detail panel — full screen on mobile, always in its normal (non-wide)
     state so there's nothing extra to navigate around on a small screen.
     Only width/shape are overridden here — open/closed sliding is handled
     by the base .dp / .dp.open transform rule, which works correctly at
     any width (this is what fixed the "won't fully close from wide mode"
     bug on desktop, and keeps mobile consistent with the same mechanism
     rather than a second, separate one). ── */
  .dp{width:100%!important;min-width:0!important;max-width:100vw!important;
    position:fixed!important;top:0!important;bottom:0!important;left:auto!important;right:0!important;
    z-index:500;border-radius:0!important;border-left:none!important}
  .dp-expand-btn{display:none} /* already full-screen on mobile — nothing to expand */

  /* ── Modals — full screen on mobile ── */
  .modal{width:95vw!important;max-width:95vw!important;max-height:90vh;overflow-y:auto;
    margin:0;border-radius:12px}
  .bk{align-items:flex-end!important;padding-bottom:0}

  /* ── Dashboard ── */
  .dash-grid{grid-template-columns:1fr 1fr!important;gap:10px}
  .dash-row{grid-template-columns:1fr!important;gap:10px}
  .dash-card-num{font-size:24px}
  .dash-wrap{padding:12px}

  /* ── Help panel — full width ── */
  .help-panel{width:calc(100vw - 24px)!important;right:12px!important;bottom:78px!important}
  .help-btn{bottom:16px;right:16px;width:46px;height:46px}

  /* ── Edit cols modal columns ── */
  .col-map{grid-template-columns:1fr!important}

  /* ── Tour tooltip — narrower on mobile ── */
  .tour-tooltip{width:280px!important}

  /* ── Welcome card ── */
  .welcome-card{padding:24px 18px}

  /* ── Auth screens already handled by existing 700px query ── */
}

/* ── Landscape phones specifically (short but reasonably wide) ──
   The block above already applies (max-height:500px is part of its query),
   but a landscape phone has width to spare that a portrait phone doesn't —
   use it instead of wrapping the tab strip to its own row, which was eating
   ~50px of an already-short screen for no reason. Also tighten table padding
   further so more than 3-4 contacts fit without scrolling. ── */
@media(max-height:500px) and (min-width:600px){
  .topbar{flex-wrap:nowrap;height:44px;padding:6px 14px}
  .tl-tabs{order:0;width:auto;flex-shrink:1;overflow-x:auto;padding:0}
  .logo img{width:28px;height:28px}
  .tl-tab{padding:5px 10px;font-size:11px}

  .subtoolbar{padding:5px 10px;min-height:0}

  th{padding:5px 8px}
  td{padding:5px 8px;font-size:11px}
}

/* ── Very small screens (iPhone SE etc) ── */
@media(max-width:375px){
  .tl-tab{padding:5px 10px;font-size:11px}
  .dash-grid{grid-template-columns:1fr!important}
  .dash-card-num{font-size:20px}
  .modal{width:100vw!important;border-radius:12px 12px 0 0}
}

/* ── Task reminder banner ── */
.task-banner{display:none;position:fixed;top:56px;left:0;right:0;z-index:600;
  background:linear-gradient(135deg,#0f2540,#1a3a5c);color:#fff;
  padding:10px 20px;display:flex;align-items:center;gap:12px;
  box-shadow:0 2px 12px rgba(0,0,0,.25);animation:slideDown .3s ease}
.task-banner.show{display:flex}
@keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
.task-banner-icon{background:rgba(255,255,255,.12);border-radius:50%;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.task-banner-text{flex:1;font-size:13px;line-height:1.4}
.task-banner-text strong{display:block;font-size:14px;margin-bottom:2px}
.task-banner-btns{display:flex;gap:8px;flex-shrink:0}
.task-banner-btn{padding:5px 12px;border-radius:var(--rm);font-size:12px;
  font-weight:600;cursor:pointer;border:none}
.task-banner-btn.view{background:#1e6ab0;color:#fff}
.task-banner-btn.view:hover{background:#1a9ed4}
.task-banner-btn.dismiss{background:rgba(255,255,255,.15);color:#fff}
.task-banner-btn.dismiss:hover{background:rgba(255,255,255,.25)}
/* ── 15-min task popup ── */
.task-popup{position:fixed;bottom:86px;right:24px;z-index:800;
  background:var(--bg);border-radius:var(--rl);padding:16px 18px;width:300px;
  box-shadow:0 8px 32px rgba(0,0,0,.2);border:.5px solid rgba(30,106,176,.2);
  animation:popUp .3s ease;display:none}
.task-popup.show{display:block}
@keyframes popUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.task-popup-hdr{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.task-popup-hdr svg{color:#F59E0B;flex-shrink:0}
.task-popup-hdr strong{font-size:13px;color:var(--tx)}
.task-popup-close{margin-left:auto;background:none;border:none;cursor:pointer;
  color:var(--tx3);font-size:16px;line-height:1}
.task-popup-title{font-size:14px;font-weight:600;color:var(--tx);margin-bottom:4px}
.task-popup-meta{font-size:12px;color:var(--tx2);margin-bottom:12px}
.task-popup-actions{display:flex;gap:8px}
.task-popup-actions button{flex:1;padding:7px;border-radius:var(--rm);
  font-size:12px;font-weight:600;cursor:pointer;border:none}
.task-popup-actions .view{background:var(--ac);color:#fff}
.task-popup-actions .done{background:var(--bg2);color:var(--tx2);border:.5px solid var(--bm)}

/* ── File rename + rotate ── */
.file-thumb{position:relative;overflow:visible}
.file-thumb-rot{position:absolute;top:4px;left:4px;background:rgba(0,0,0,.55);
  color:#fff;border:none;border-radius:50%;width:24px;height:24px;font-size:14px;
  cursor:pointer;display:none;align-items:center;justify-content:center;
  transition:background .15s;z-index:2}
.file-thumb:hover .file-thumb-rot{display:flex}
.file-thumb-rot:hover{background:rgba(30,106,176,.85)}
.file-thumb-cap{font-size:11px;color:var(--tx2);padding:3px 4px;
  text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  cursor:text;max-width:100%;border-radius:4px;margin-top:2px}
.file-thumb-cap:hover{background:var(--bg2);color:var(--ac)}
.files-badge{background:var(--ac);color:#fff;border-radius:10px;padding:1px 6px;font-size:10px;font-weight:700;margin-left:3px;display:inline-block}
  border:.5px solid var(--ac);background:var(--bg);color:var(--tx);
  width:100%;box-sizing:border-box;outline:none}
.file-row-name{cursor:pointer}
.file-row-name:hover{color:var(--ac)}

/* ── Enhanced lightbox with rotate + rename ── */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.lb-toolbar{width:100%;display:flex;align-items:center;padding:12px 20px;
  gap:12px;background:rgba(0,0,0,.6);flex-shrink:0;backdrop-filter:blur(8px)}
.lb-filename{flex:1;color:#fff;font-size:14px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-actions{display:flex;gap:8px;flex-shrink:0}
.lb-btn{padding:6px 12px;border-radius:var(--rm);border:none;
  background:rgba(255,255,255,.15);color:#fff;font-size:12px;
  font-weight:600;cursor:pointer;transition:background .15s;white-space:nowrap}
.lb-btn:hover{background:rgba(255,255,255,.28)}
.lb-save-btn{background:rgba(30,106,176,.8)}
.lb-save-btn:hover{background:var(--blue)}
.lb-close-btn{background:rgba(255,255,255,.1)}
.lb-img-wrap{flex:1;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:20px;width:100%;cursor:default}
.lb-img{max-width:90vw;max-height:80vh;object-fit:contain;
  border-radius:4px;transition:transform .3s ease;cursor:default}

/* ── Edit Stages modal ── */
.stg-row{display:flex;align-items:center;gap:8px;padding:8px 10px;
  background:var(--bg2);border-radius:var(--rm);border:.5px solid var(--bl);
  transition:opacity .15s}
.stg-row.stg-drag-over{border-color:var(--ac);background:rgba(30,106,176,.06)}
.stg-drag{cursor:grab;color:var(--tx3);font-size:18px;flex-shrink:0;user-select:none;padding:0 2px}
.stg-drag:active{cursor:grabbing}
.stg-name-input{flex:1;padding:5px 8px;border-radius:var(--rm);border:.5px solid var(--bm);
  background:var(--bg);font-size:13px;color:var(--tx);min-width:0}
.stg-name-input:focus{border-color:var(--ac);outline:none}
.stg-colours{display:flex;gap:4px;flex-wrap:wrap;max-width:160px}
.stg-col-swatch{width:18px;height:18px;border-radius:4px;cursor:pointer;flex-shrink:0;transition:transform .1s}
.stg-col-swatch:hover{transform:scale(1.25)}
.stg-del{background:none;border:none;color:var(--tx3);cursor:pointer;padding:3px;
  border-radius:4px;flex-shrink:0;display:flex;align-items:center}
.stg-del:hover:not(:disabled){color:#C0392B;background:rgba(192,57,43,.08)}
.stg-del:disabled{opacity:.3;cursor:not-allowed}

/* ── Status filter dropdown ── */
.status-filter-menu{position:absolute;top:calc(100% + 6px);left:0;
  background:var(--bg);border:.5px solid var(--bm);border-radius:var(--rl);
  box-shadow:0 8px 24px rgba(0,0,0,.15);min-width:200px;z-index:800;
  padding:8px;animation:fadeIn .12s ease}
.sf-stage-row{display:flex;align-items:center;gap:8px;padding:5px 6px;
  border-radius:var(--rm);cursor:pointer;transition:background .1s}
.sf-stage-row:hover{background:var(--bg2)}
.sf-stage-row input[type=checkbox]{width:14px;height:14px;cursor:pointer;flex-shrink:0}
.sf-stage-pill{font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;
  border:.5px solid;white-space:nowrap}
.sf-actions{display:flex;gap:6px;padding:6px 6px 2px;border-top:.5px solid var(--bl);margin-top:4px}
.sf-action-btn{flex:1;padding:4px;border:none;background:var(--bg2);
  color:var(--tx2);font-size:11px;border-radius:var(--rm);cursor:pointer;font-weight:500}
.sf-action-btn:hover{background:var(--bg3);color:var(--ac)}
#status-filter-btn.active{background:rgba(30,106,176,.12);border-color:var(--ac);color:var(--ac)}