:root{
  /* Crimbox brand — Indigo is PRIMARY, Orange is ACCENT/CTA only ("like salt") */
  --indigo:#2D3DAA; --indigo-700:#25329A; --indigo-50:#EEF0FB;
  --orange:#FF7617; --orange-600:#E9690F;
  --charcoal:#1A1A1A; --ink:#1A1A1A;
  --muted:#666666; --line:#E5E7EB; --bg:#FAFAF7; --card:#fff;
  /* Status / semantic */
  --ok:#15803d; --err:#b91c1c;
  --success:#10B981; --warning:#F59E0B; --error:#EF4444;
  /* Storage bar states (used from V3) */
  --bar-ok:#2D3DAA; --bar-warn:#F59E0B; --bar-danger:#EF4444;
  /* Typeface */
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box} 
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.5}
a{color:var(--indigo);text-decoration:none}

/* ---- Brand mark ---- */
.brand{font-weight:800;letter-spacing:.04em;color:var(--charcoal);display:flex;align-items:center;gap:.5rem;font-size:1.05rem}
.brand small{font-weight:600;color:var(--indigo)}
.brand .dot{width:14px;height:14px;border-radius:50%;background:var(--indigo);display:inline-block}

/* ---- Crimbox lockup (platform brand in chrome) ---- */
.cb-lockup{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}
.cb-lockup .cb-mark{width:26px;height:26px;display:block;border-radius:7px}
.cb-word{font-family:var(--font);font-weight:700;font-size:1.18rem;letter-spacing:-.03em;color:var(--indigo);line-height:1}
.cb-ws{margin-left:.6rem;padding-left:.65rem;border-left:1px solid var(--line);color:var(--muted);font-weight:600;font-size:.92rem;letter-spacing:0}
@media(max-width:760px){.cb-ws{display:none}}
/* ---- Trial / plan badge + lightweight notice ---- */
.cb-trial{display:inline-flex;align-items:center;gap:.35rem;background:var(--indigo-50);color:var(--indigo-700);border:1px solid #C7CEF2;border-radius:999px;padding:.2rem .6rem;font-size:.78rem;font-weight:700}
.cb-notice{margin:1rem 0;padding:.85rem 1rem;background:var(--indigo-50);border:1px solid #C7CEF2;border-radius:12px;color:var(--charcoal);font-size:.92rem}

/* ---- Auth screens (login / install) ---- */
.auth-bg{min-height:100vh;display:grid;place-items:center;background:
  radial-gradient(1200px 500px at 50% -10%, #fff, var(--bg))}
.auth-card{background:var(--card);width:min(420px,92vw);padding:2rem;border:1px solid var(--line);
  border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.06)}
.auth-card h1{margin:1rem 0 .25rem;font-size:1.5rem;color:var(--charcoal)}
.auth-card form{margin-top:1rem;display:grid;gap:.85rem}
label{display:grid;gap:.3rem;font-size:.9rem;font-weight:600;color:var(--charcoal)}
input{padding:.7rem .8rem;border:1px solid var(--line);border-radius:10px;font-size:1rem}
input:focus{outline:2px solid var(--indigo);border-color:var(--indigo)}
button{background:var(--indigo);color:#fff;border:0;padding:.8rem 1rem;border-radius:10px;
  font-weight:700;font-size:1rem;cursor:pointer}
button:hover{filter:brightness(.95)}
.muted{color:var(--muted)} .ok{color:var(--ok);font-weight:600} .err{color:var(--err);font-weight:600}
.steps,.steps li{margin:.4rem 0} code{background:#f1f1f1;padding:.1rem .35rem;border-radius:5px}

/* ---- App shell ---- */
.topbar{display:flex;justify-content:space-between;align-items:center;background:#fff;
  padding:.85rem 1.25rem;border-bottom:1px solid var(--line)}
.topbar-right{display:flex;align-items:center;gap:1rem}
.who{color:var(--muted);font-size:.9rem}
.btn-ghost{border:1px solid var(--line);padding:.45rem .8rem;border-radius:8px;color:var(--charcoal)}
.wrap{max-width:920px;margin:2rem auto;padding:0 1.25rem}
h1{color:var(--charcoal)} h2{color:var(--charcoal);margin-top:2rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:1.25rem 0}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem}
.card-k{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.card-v{font-size:1.4rem;font-weight:800;color:var(--charcoal);margin-top:.25rem}
.roadmap{list-style:none;padding:0;display:grid;gap:.5rem}
.roadmap li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;display:flex;gap:.7rem;align-items:center}
.roadmap .tick{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;flex:none}
.roadmap li.ok .tick{background:var(--ok)} .roadmap li.todo .tick{background:#cbd5e1;color:#fff}
.roadmap li.todo{color:var(--muted)}
.note{margin-top:1.5rem;padding:1rem;background:var(--indigo-50);border:1px solid #C7CEF2;border-radius:10px}

/* ======================= PHASE 1: APP CHROME ======================= */
.app{background:var(--bg)}
.shell{display:flex;min-height:calc(100vh - 58px)}
.sidenav{width:210px;background:#fff;border-right:1px solid var(--line);padding:1rem .75rem;flex:none}
.sidenav a{display:block;padding:.6rem .8rem;border-radius:9px;color:var(--charcoal);font-weight:600;margin-bottom:.2rem}
.sidenav a:hover{background:var(--indigo-50)}
.sidenav a.on{background:var(--indigo);color:#fff}
.nav-sep{margin:1rem .4rem .4rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#9aa1ab}
.nav-soon{display:block;padding:.5rem .8rem;color:#b6bcc4;font-size:.9rem}
.content{flex:1;padding:1.5rem 2rem;min-width:0}
.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:.75rem}
.page-head h1{margin:0;font-size:1.5rem}
.head-actions{display:flex;gap:.5rem}
.count{background:#f0f1f3;color:var(--muted);font-size:.85rem;padding:.1rem .55rem;border-radius:20px;vertical-align:middle}
.btn{background:var(--indigo);color:#fff;border:0;padding:.6rem .95rem;border-radius:9px;font-weight:700;cursor:pointer;font-size:.92rem}
.btn:hover{filter:brightness(.95)}
.btn-ghost{border:1px solid var(--line);background:#fff;padding:.55rem .85rem;border-radius:9px;color:var(--charcoal);font-weight:600;cursor:pointer;font-size:.9rem}
.btn-ghost:hover{border-color:var(--indigo);color:var(--indigo)}
/* ===== GLOBAL BUTTON COLOUR RULE =====================================================
   The bare `button{}` rule above paints EVERY <button> orange. So a button that only
   sets a border/colour (but not background) keeps an orange background by surprise.
   RULE: every button must carry ONE of these classes, and each one sets background +
   colour + border explicitly so nothing inherits the orange default unexpectedly.
   .btn = primary orange · .btn-ghost = white/outline · .btn-danger/.btn-red = red
   .btn-success/.btn-green = green · .icon-btn = transparent icon · .btn-link = text link
   (class selectors beat the element selector, so these always win.) */
.btn-danger,.btn-red{background:#fff;color:#b3261e;border:1px solid #e7b4ae;padding:.5rem .85rem;border-radius:9px;font-weight:700;cursor:pointer;font-size:.9rem}
.btn-danger:hover,.btn-red:hover{background:#b3261e;color:#fff;filter:none}
.btn-success,.btn-green{background:#fff;color:#1c7a43;border:1px solid #b6dcc4;padding:.5rem .85rem;border-radius:9px;font-weight:700;cursor:pointer;font-size:.9rem}
.btn-success:hover,.btn-green:hover{background:#1c7a43;color:#fff;filter:none}
.icon-btn{background:transparent;color:inherit;border:0;padding:.2rem;cursor:pointer;line-height:1;font-size:1rem}
.btn-link{background:transparent;color:var(--indigo);border:0;padding:0;cursor:pointer;font-weight:600;text-decoration:none;font-size:inherit}
.flash{background:#ecfdf3;border:1px solid #bbf7d0;color:#15803d;padding:.7rem 1rem;border-radius:9px;margin-bottom:1rem;font-weight:600}
.hint{color:var(--muted);font-size:.9rem} .small{font-size:.82rem} .muted{color:var(--muted)}

/* panels & forms */
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.25rem;margin-bottom:1.25rem}
.panel h3{margin:.1rem 0 .9rem;color:var(--charcoal)}
.collapsible{display:none} .collapsible.open{display:block}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.85rem 1rem;align-items:end}
.grid-form>label{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.grid-form label{font-size:.82rem} .form-actions{grid-column:1/-1}
.filters{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.filters input{flex:1;min-width:200px;padding:.55rem .7rem;border:1px solid var(--line);border-radius:9px}
.filters select{padding:.55rem;border:1px solid var(--line);border-radius:9px}

/* tables */
.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tbl th{text-align:left;padding:.7rem .9rem;background:#fafafa;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#8a909a;border-bottom:1px solid var(--line)}
.tbl td{padding:.75rem .9rem;border-bottom:1px solid #f1f1f1;font-size:.92rem}
.tbl tbody tr{cursor:pointer} .tbl tbody tr:hover{background:#fcf7f3}
.tbl .empty{text-align:center;color:var(--muted);padding:2rem}
.badge{display:inline-block;padding:.15rem .55rem;border-radius:20px;font-size:.75rem;font-weight:700}
.s-lead{background:#eef2ff;color:#4338ca}.s-enquiry{background:#fef9c3;color:#854d0e}
.s-paid{background:#dcfce7;color:#15803d}.s-lost{background:#fee2e2;color:#b91c1c}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.25rem}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem;display:block}
.card:hover{border-color:var(--indigo)} .card.alert{border-color:#fca5a5;background:#fff5f5}
.card-k{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
.card-v{font-size:1.5rem;font-weight:800;color:var(--charcoal);margin-top:.25rem}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media(max-width:800px){.two-col{grid-template-columns:1fr}.sidenav{width:64px}.sidenav a{font-size:0;padding:.6rem}.content{padding:1rem}}
.webhook{display:block;background:#1d1d1d;color:#7CFFB2;padding:.7rem;border-radius:8px;font-size:.78rem;word-break:break-all;margin:.5rem 0}

/* profile 360 */
.profile{display:grid;grid-template-columns:280px 1fr;gap:1.25rem}
@media(max-width:800px){.profile{grid-template-columns:1fr}}
.profile-side{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.25rem}
.avatar{width:56px;height:56px;border-radius:50%;background:var(--indigo);color:#fff;font-weight:800;font-size:1.5rem;display:grid;place-items:center}
.profile-side h1{font-size:1.25rem;margin:.6rem 0 .1rem}
.inline-status select{width:100%;margin:.6rem 0;padding:.5rem;border:1px solid var(--line);border-radius:8px}
.meta{font-size:.85rem;margin:.8rem 0}
.meta div{display:flex;justify-content:space-between;padding:.3rem 0;border-bottom:1px solid #f3f3f3}
.meta span{color:var(--muted)}
.tags{margin:.5rem 0}.tag{display:inline-block;background:#f0f1f3;border-radius:6px;padding:.1rem .5rem;font-size:.78rem;margin:.1rem}
.idents{list-style:none;padding:0;margin:.5rem 0;font-size:.85rem}
.idents li{padding:.35rem 0;border-bottom:1px solid #f3f3f3}
.ic{display:inline-block;min-width:62px;font-size:.68rem;text-transform:uppercase;color:#fff;background:#9aa1ab;border-radius:5px;padding:.05rem .35rem;text-align:center;margin-right:.4rem}
.ic-email{background:#3b82f6}.ic-phone{background:#22c55e}.ic-whatsapp{background:#16a34a}.ic-instagram{background:#d946ef}
.auto{color:var(--indigo);font-style:normal;font-size:.7rem;font-weight:700;margin-left:.3rem}
.ident-add{display:flex;gap:.3rem;margin-top:.5rem}.ident-add select,.ident-add input{padding:.4rem;border:1px solid var(--line);border-radius:7px;font-size:.8rem}.ident-add input{flex:1;min-width:0}
.tab-cards{display:flex;gap:.75rem;margin-bottom:1rem}
.mini{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.6rem .9rem;flex:1}
.mini span{color:var(--muted);font-size:.72rem;display:block}.mini strong{font-size:1.15rem}
.log-form textarea{width:100%;padding:.6rem;border:1px solid var(--line);border-radius:9px;margin:.5rem 0;font-family:inherit}
.log-row{display:flex;gap:.5rem}.log-row select{padding:.5rem;border:1px solid var(--line);border-radius:9px}.log-row input{flex:1;padding:.5rem;border:1px solid var(--line);border-radius:9px}
.deal-line{display:flex;gap:.6rem;align-items:center;padding:.4rem 0;border-bottom:1px solid #f3f3f3;font-size:.9rem}

/* timeline */
.timeline{list-style:none;padding:0;margin:0}
.tl{display:flex;gap:.8rem;padding:.2rem 0}
.tl-dot{width:11px;height:11px;border-radius:50%;background:#cbd5e1;margin-top:.35rem;flex:none;position:relative}
.tl::before{content:'';position:absolute;margin-left:5px;margin-top:1rem;width:1px;height:100%;background:#eee}
.tl-whatsapp .tl-dot{background:#16a34a}.tl-email .tl-dot{background:#3b82f6}.tl-call .tl-dot{background:#f59e0b}
.tl-task .tl-dot{background:#8b5cf6}.tl-system .tl-dot{background:#cbd5e1}.tl-note .tl-dot{background:var(--indigo)}
.tl-body{padding-bottom:1rem;flex:1}.tl-text{font-size:.9rem;margin-top:.2rem;color:#374151}
.timeline.tight .tl-body{padding-bottom:.5rem}

/* kanban */
.kanban{display:flex;gap:.85rem;overflow-x:auto;padding-bottom:1rem}
.col{background:#f4f5f7;border-radius:11px;width:230px;flex:none;display:flex;flex-direction:column}
.col-head{padding:.65rem .8rem;font-weight:700;font-size:.85rem;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #e3e5e9}
.col-head.won{color:#15803d}.col-head.lost{color:#b91c1c}
.col-sum{font-weight:600;color:var(--muted);font-size:.72rem}
.col-body{padding:.6rem;min-height:80px;display:flex;flex-direction:column;gap:.5rem}
.card-deal{background:#fff;border:1px solid var(--line);border-radius:9px;padding:.6rem .7rem;cursor:grab;display:flex;flex-direction:column;gap:.15rem}
.card-deal:hover{border-color:var(--indigo)}.card-deal strong{font-size:.88rem}
.deal-val{font-weight:700;color:var(--indigo);font-size:.85rem}

/* dup review + tasks */
.dup-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;margin-bottom:.8rem}
.dup-vs{color:var(--muted);font-size:1.3rem}
.dup-actions{display:flex;gap:.5rem;align-items:center}
.task-list{display:flex;flex-direction:column;gap:.6rem}
.task{display:flex;gap:.8rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem}
.task.overdue{border-color:#fca5a5;background:#fff7f7}
.check{background:none;border:2px solid #cbd5e1;border-radius:50%;width:24px;height:24px;cursor:pointer;color:transparent}
.check:hover{border-color:var(--indigo)}
.due-red{color:#b91c1c;font-weight:600}
.steps code{background:#f1f1f1;padding:.05rem .3rem;border-radius:4px}

/* ============ FIELDS SYSTEM UI ============ */
.tbl-scroll{overflow-x:auto}
.pill{display:inline-block;background:#fff3e9;color:var(--indigo);border:1px solid #C7CEF2;border-radius:20px;font-size:.66rem;font-weight:700;padding:.05rem .45rem;vertical-align:middle}
.pill.sys{background:#eef2f7;color:#5b6b80;border-color:#dde3ea}
.chk{display:flex;align-items:center;gap:.4rem;font-size:.85rem}
.multi{display:flex;flex-wrap:wrap;gap:.4rem .9rem;border:1px solid var(--line);border-radius:9px;padding:.5rem}
.fields-tbl td{vertical-align:middle}
.fields-tbl .nowrap{white-space:nowrap}
.mini-btn{border:1px solid var(--line);background:#fff;border-radius:6px;padding:.2rem .5rem;font-size:.75rem;cursor:pointer;color:var(--charcoal)}
.mini-btn:hover{border-color:var(--indigo)} .mini-btn.del{color:#b91c1c;border-color:#f3c4c4}
.switch{border:1px solid var(--line);background:#f3f4f6;color:#8a909a;border-radius:20px;padding:.2rem .7rem;font-size:.75rem;font-weight:700;cursor:pointer}
.switch.on{background:#dcfce7;color:#15803d;border-color:#bbf7d0}
.opt-row td{background:#faf7f4}
.opt-editor{padding:.4rem 0}
.opts{display:flex;flex-direction:column;gap:.35rem;margin:.5rem 0}
.opt{display:flex;gap:.4rem;align-items:center}
.opt-ren{display:flex;gap:.3rem;align-items:center}
.opt-ren input{padding:.3rem .5rem;border:1px solid var(--line);border-radius:6px;font-size:.85rem}
.opt-add{display:flex;gap:.4rem;margin-top:.4rem}
.opt-add input{padding:.4rem .5rem;border:1px solid var(--line);border-radius:7px}
.panel-head{display:flex;justify-content:space-between;align-items:center}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.7rem}
.detail{display:flex;flex-direction:column;border-bottom:1px solid #f3f3f3;padding:.3rem 0}
.detail .dl{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.detail .dv{font-size:.95rem;color:var(--charcoal)}
.idents .lbl{font-style:normal;font-size:.68rem;color:#5b6b80;background:#eef2f7;border-radius:5px;padding:.02rem .3rem;margin-left:.3rem}
.grid-form select,.grid-form input[type=text],.grid-form input[type=email],.grid-form input[type=number],.grid-form input[type=date],.grid-form textarea{width:100%;padding:.5rem;border:1px solid var(--line);border-radius:8px;font-family:inherit;margin-top:.2rem}

/* ============ REMARKS + CAMPAIGNS ============ */
.remark-form textarea{width:100%;padding:.6rem;border:1px solid var(--line);border-radius:9px;font-family:inherit}
.remark-actions{display:flex;gap:.5rem;align-items:center;margin-top:.4rem}
.remark-actions select{padding:.45rem;border:1px solid var(--line);border-radius:8px}
.remark-list{list-style:none;padding:0;margin:1rem 0 0}
.remark{border-left:3px solid var(--line);padding:.5rem .8rem;margin-bottom:.6rem;background:#fafafa;border-radius:0 8px 8px 0}
.remark.private{border-left-color:var(--indigo);background:var(--indigo-50)}
.remark-head{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.remark-tools{margin-left:auto;display:flex;gap:.3rem}
.remark-body{margin-top:.25rem;font-size:.92rem;color:#374151}
.vis-badge{background:var(--indigo);color:#fff;border-radius:5px;padding:.02rem .35rem;font-size:.68rem;font-weight:700}
.remark-edit{margin-top:.5rem}
.remark-edit textarea{width:100%;padding:.5rem;border:1px solid var(--line);border-radius:8px;font-family:inherit}
.remark-edit select{padding:.4rem;border:1px solid var(--line);border-radius:8px;margin:.4rem .4rem 0 0}
.campaign-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem}
.campaign-stat{text-align:center}.campaign-stat .big{display:block;font-size:1.6rem;font-weight:800;color:var(--indigo)}
.camp-edit{margin-top:.6rem}.camp-edit summary{cursor:pointer;color:var(--muted);font-size:.85rem}

/* ============ WEBHOOK MAPPING + LEAD HISTORY ============ */
.map-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.5rem 0;border-bottom:1px solid #f3f3f3}
.map-row.inline{border:0;padding:0}
.map-key{display:flex;flex-direction:column;min-width:160px}
.map-arrow{color:var(--muted)}
.map-row select{padding:.45rem;border:1px solid var(--line);border-radius:8px}
.map-row .newlbl{padding:.45rem;border:1px solid var(--line);border-radius:8px;width:170px}
.subs{list-style:none;padding:0;margin:0}
.sub{border-left:3px solid var(--line);padding:.5rem .8rem;margin-bottom:.5rem;background:#fafafa;border-radius:0 8px 8px 0}
.sub.dup{border-left-color:#f59e0b;background:#fffbeb}
.sub-head{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.sub details{margin-top:.35rem}.sub summary{cursor:pointer}
.raw-tbl{width:100%;border-collapse:collapse;margin-top:.4rem;font-size:.82rem}
.raw-tbl td{border:1px solid #eee;padding:.25rem .5rem}
.raw-tbl .rk{color:var(--muted);width:38%;font-weight:600}

/* ============ CAMPAIGN ANALYTICS + PAGER ============ */
.card-sub{font-size:.72rem;color:var(--muted);margin-top:.15rem}
.campaign-link{display:block;text-decoration:none;color:inherit}
.campaign-link:hover{border-color:var(--indigo)}
.del-btn{color:#b91c1c;border-color:#f3c4c4}
.bar-row{display:flex;align-items:center;gap:.6rem;margin:.35rem 0;font-size:.85rem}
.bar-label{width:90px;flex:none;color:var(--charcoal)}
.bar-track{flex:1;background:#f0f1f3;border-radius:6px;height:14px;overflow:hidden}
.bar-fill{display:block;height:100%;background:var(--indigo);border-radius:6px}
.bar-n{width:34px;text-align:right;font-weight:700}
.velocity{margin-top:.8rem;padding-top:.6rem;border-top:1px solid #f1f1f1;font-size:.85rem;color:var(--muted)}
.velocity strong{color:var(--charcoal)}
.staff-row{display:flex;justify-content:space-between;padding:.25rem 0;border-bottom:1px solid #f3f3f3;font-size:.88rem}
.reassign{display:flex;gap:.4rem;margin-top:.7rem;flex-wrap:wrap}
.reassign select{padding:.4rem;border:1px solid var(--line);border-radius:8px}
.copy-wrap{display:flex;gap:.4rem;align-items:center}.copy-wrap .webhook{flex:1}
.pager{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1rem;font-size:.85rem;color:var(--muted)}
.pager select{padding:.3rem .4rem;border:1px solid var(--line);border-radius:7px}
.pager-nav{display:flex;align-items:center;gap:.5rem}
.pager .disabled{opacity:.4;pointer-events:none}
.pager-pos{font-weight:600;color:var(--charcoal)}

/* ============ BRANDING + INVITES + SETTINGS ============ */
.brand-logo{height:30px;width:auto;display:block}
.topbar-right{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.invite-ok{border-color:#bbf7d0;background:#ecfdf3}
.invite-warn{border-color:#fde68a;background:#fffbeb}
.invite-creds{margin-top:.5rem;font-size:.88rem;display:flex;flex-direction:column;gap:.25rem}
.invite-creds code{background:#fff;border:1px solid var(--line);padding:.15rem .4rem;border-radius:5px;word-break:break-all}
input[type=color]{height:40px;padding:.2rem;border:1px solid var(--line);border-radius:8px;width:100%}

/* ============ PHASE 2: INBOX ============ */
.form-sec{grid-column:1/-1;font-weight:700;color:var(--charcoal);border-bottom:1px solid var(--line);padding-bottom:.3rem;margin-top:.5rem;font-size:.85rem}
.tbl tr.unseen td{font-weight:700;background:#fffdf7}
.tbl tr.unseen td:first-child{box-shadow:inset 3px 0 0 var(--indigo)}
.thread{display:flex;flex-direction:column;gap:.8rem;margin-top:.5rem}
.msg{border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;max-width:90%}
.msg.in{background:#fafafa;align-self:flex-start;border-bottom-left-radius:2px}
.msg.out{background:var(--indigo-50);align-self:flex-end;border-bottom-right-radius:2px;border-color:#C7CEF2}
.msg-head{display:flex;gap:.6rem;align-items:baseline;margin-bottom:.35rem}
.msg-body{font-size:.92rem;line-height:1.5;color:#374151;word-wrap:break-word}
.grid-form textarea{width:100%;padding:.5rem;border:1px solid var(--line);border-radius:8px;font-family:inherit}

/* ============ v6: modal, bulk bar, badges, rich text, signatures ============ */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(20,20,25,.45);z-index:60;align-items:flex-start;justify-content:center;padding:6vh 1rem}
.modal-overlay.open{display:flex}
.modal-card{background:#fff;border-radius:14px;padding:1.4rem 1.5rem;max-width:560px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.modal-card h3{margin:0 0 1rem}

.mini-btn{display:inline-block;font-size:.78rem;padding:.3rem .6rem;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer;margin-left:.25rem;color:var(--charcoal)}
.mini-btn:hover{background:#faf7f4}
.del-btn{color:#c0392b;border-color:#f1c9c2}
.del-btn:hover{background:#fdf1ef}

.bulk-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.5rem .25rem;border-bottom:1px solid var(--line);margin-bottom:.25rem}
.bulk-bar .inline{margin-right:.5rem}
label.inline{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--charcoal)}

.nav-badge{display:inline-block;min-width:18px;text-align:center;background:var(--indigo);color:#fff;font-size:.7rem;font-weight:700;border-radius:10px;padding:0 6px;line-height:18px;margin-left:6px;vertical-align:middle}

.rt-toolbar{display:flex;gap:.25rem;flex-wrap:wrap;border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;padding:.4rem;background:#faf9f8}
.rt-toolbar button{border:1px solid var(--line);background:#fff;border-radius:6px;padding:.25rem .55rem;cursor:pointer;font-size:.85rem;min-width:32px}
.rt-toolbar button:hover{background:#f1ece8}
.rt-editor{border:1px solid var(--line);border-radius:0 0 8px 8px;min-height:140px;padding:.7rem .8rem;font-size:.92rem;line-height:1.5;outline:none;background:#fff}
.rt-editor:focus{border-color:var(--indigo)}
.send-row{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.7rem}
.send-row select,.send-row input{margin-left:.35rem}

.email-html{font-size:.92rem;line-height:1.55;color:#374151;word-wrap:break-word;overflow-wrap:anywhere}
.email-html img{max-width:100%;height:auto}
.email-html a{color:var(--indigo)}

.sig-row{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;margin-bottom:.6rem}
.sig-preview{margin-top:.4rem;padding:.5rem .6rem;background:#faf9f8;border-radius:8px;max-width:480px}
.block-form{margin:.4rem 0}

/* ============ v7: tags, new chips, bulk groups ============ */
.tag-chip{display:inline-block;font-size:.7rem;font-weight:600;padding:1px 8px;border-radius:11px;border:1px solid;margin:1px 2px;white-space:nowrap;line-height:1.5}
.new-chip{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.04em;background:var(--indigo);color:#fff;border-radius:9px;padding:1px 7px;margin-left:5px;vertical-align:middle}
.new-chip.blocked-chip{background:#dc2626}
tr.is-new-row td{background:#fffdf6}
tr.is-new-row td:nth-child(2){box-shadow:inset 3px 0 0 var(--indigo)}
.bulk-grp{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;color:var(--charcoal);border-left:1px solid var(--line);padding-left:.6rem;margin-left:.2rem}
.bulk-grp select{font-size:.8rem;padding:.2rem .3rem}
.tag-show{display:flex;flex-wrap:wrap;gap:2px;margin-bottom:.4rem}
.tag-edit summary{display:inline-block;cursor:pointer;list-style:none}
.tag-opt{display:flex;align-items:center;gap:.4rem;padding:.15rem 0}
.tag-manage{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.5rem 0}
.tag-manage .break{flex-basis:100%;height:0}
.tag-row-edit{display:inline-flex;align-items:center;gap:.35rem}
.tag-row-edit input[type=text],.tag-row-edit input:not([type=color]){width:130px;padding:.25rem .4rem;border:1px solid var(--line);border-radius:6px;font-size:.82rem}
.tag-row-edit input[type=color],.tag-add-form input[type=color]{width:34px;height:30px;border:1px solid var(--line);border-radius:6px;padding:1px;background:#fff}
.tag-add-form{display:flex;align-items:center;gap:.4rem;margin-top:.6rem;border-top:1px solid var(--line);padding-top:.7rem}
.tag-add-form input[name=name]{padding:.4rem .5rem;border:1px solid var(--line);border-radius:7px;min-width:220px}
.btn.small,.btn-ghost.small{font-size:.78rem;padding:.3rem .6rem}

/* ============ v8: tag manager, field matrix, inbox/tasks contact panel ============ */
.tag-table{border-collapse:collapse;margin:.4rem 0}
.tag-table td{padding:.3rem .6rem .3rem 0;vertical-align:middle;border:none}
.tag-table .tt-chip{min-width:110px}
.tt-form{display:flex;align-items:center;gap:.45rem}
.tt-name{padding:.35rem .5rem;border:1px solid var(--line);border-radius:7px;font-size:.86rem;width:180px}
.tt-form input[type=color],.tt-add input[type=color]{width:34px;height:30px;border:1px solid var(--line);border-radius:6px;padding:1px;background:#fff;cursor:pointer}
.tt-add{display:flex;align-items:center;gap:.5rem;margin-top:.7rem;padding-top:.8rem;border-top:1px solid var(--line)}
.tt-add .tt-name{width:260px}
.fields-tbl th,.fields-tbl td{white-space:nowrap}
.contact-mini{display:flex;flex-wrap:wrap;gap:.35rem .9rem;background:#faf9f8;border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;margin:.5rem 0}
.contact-mini .cm-row{font-size:.84rem;color:#374151}
.contact-mini .cm-row span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:#9aa1ab}
.contact-mini .cm-tags{flex-basis:100%;display:flex;flex-wrap:wrap;gap:2px}

/* ============ v9: contacts clean list (bulk hidden until toggled) ============ */
.cbulk .bulk-bar{display:none}
.cbulk .col-check{display:none}
.cbulk.bulk-on .bulk-bar{display:flex}
.cbulk.bulk-on .col-check{display:table-cell}
/* tighter contact rows so the list reads cleanly */
.tbl td{padding:.55rem .7rem}

/* ============ v9.1: table cells must wrap long unbreakable strings ============ */
.tbl th,.tbl td{overflow-wrap:anywhere;word-break:break-word}
.contacts-tbl .c-name{max-width:300px}
.contacts-tbl .c-name strong{display:inline-block;max-width:100%;overflow-wrap:anywhere}

/* ============ v9.1: email reading + reply editor polish ============ */
.thread{gap:1rem}
.msg{max-width:100%;border-radius:12px}
.msg.in{background:#fff;border:1px solid var(--line)}
.msg-body.email-html{max-width:760px;font-size:.94rem;line-height:1.6}
.msg-body.email-html table{max-width:100%}
.rt-toolbar{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;border:1px solid var(--line);border-bottom:none;border-radius:10px 10px 0 0;padding:.45rem .5rem;background:#f7f6f5}
.rt-toolbar button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:.32rem .6rem;cursor:pointer;font-size:.9rem;min-width:34px;color:#333;line-height:1}
.rt-toolbar button:hover{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.rt-sep{width:1px;height:20px;background:var(--line);margin:0 .25rem}
.rt-editor{border:1px solid var(--line);border-radius:0 0 10px 10px;min-height:170px;padding:.8rem .9rem;font-size:.95rem;line-height:1.6;outline:none;background:#fff}
.rt-editor:focus{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(45,61,170,.12)}
.rt-editor:empty:before{content:attr(data-placeholder);color:#aab0b8}
.send-row{display:flex;gap:1.1rem;flex-wrap:wrap;align-items:center;margin-top:.7rem}
.att-label input[type=file]{font-size:.8rem;max-width:230px}

/* ============ v10: contacts list tabs + bulk bar ============ */
.list-tabs{display:flex;gap:.4rem;margin:.2rem 0 .6rem}
.list-tabs .tab{padding:.4rem .9rem;border-radius:8px;font-weight:600;font-size:.9rem;color:#555;text-decoration:none;border:1px solid transparent}
.list-tabs .tab:hover{background:#f1efee}
.list-tabs .tab.on{background:var(--indigo);color:#fff}
.bulk-bar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;background:#faf9f8;border:1px solid var(--line);border-radius:10px;padding:.5rem .8rem;margin-bottom:.6rem}
.bulk-bar .bulk-grp{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;color:#555}
.bulk-bar select{padding:.3rem .4rem;border:1px solid var(--line);border-radius:7px;font-size:.85rem}
.bulk-bar .sel-hint{margin-left:auto}
.contacts-tbl .col-check{width:30px}
.contacts-tbl tbody tr{cursor:pointer}

/* ============ v12: pipeline card move dropdown + empty col ============ */
.card-deal{position:relative}
.card-deal strong{cursor:pointer}
.card-stage{margin-top:.45rem;width:100%;font-size:.78rem;padding:.25rem .3rem;border:1px solid var(--line);border-radius:6px;background:#fff;color:#444;cursor:pointer}
.col-empty{color:#c8ccd2;text-align:center;padding:.8rem 0;font-size:1.1rem}

/* ============ v13: full-width email, dashboard charts, clickable timeline, deal owner, profile polish ============ */
/* email reading + reply: use full width, tighten spacing */
.msg{max-width:100%}
.msg-body.email-html{max-width:100%;font-size:.94rem;line-height:1.45}
.email-html p{margin:.35rem 0}
.email-html div{margin:0}
.email-html br+br{line-height:.6}
.thread{gap:.7rem}
.deal-page-form,.panel.deal-edit{max-width:100%!important}
/* clickable timeline rows */
.tl-link{cursor:pointer;border-radius:8px;transition:background .12s}
.tl-link:hover{background:#fcf7f3}
.tl-open{color:var(--indigo);font-weight:600}
/* deal owner chip on cards */
.deal-owner{display:inline-block;margin-top:.3rem;font-size:.72rem;color:#555;background:#f1efee;border-radius:6px;padding:.1rem .4rem}
/* dashboard charts */
.dash-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-bottom:1.25rem}
.dash-grid .wide{grid-column:1/-1}
@media(max-width:800px){.dash-grid{grid-template-columns:1fr}}
.chart-panel h3{margin-bottom:1rem}
.vchart{display:flex;align-items:flex-end;gap:5px;height:150px}
.vbar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.vbar{width:100%;max-width:26px;background:linear-gradient(180deg,#586AD0,var(--indigo));border-radius:4px 4px 0 0;min-height:2px}
.vbar-x{font-size:.62rem;color:#9aa1ab;margin-top:.3rem}
.hchart{display:flex;flex-direction:column;gap:.55rem}
.hrow{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:.6rem;font-size:.85rem}
.hlbl{color:#444;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.htrack{background:#f1efee;border-radius:6px;height:14px;overflow:hidden}
.hbar{display:block;height:100%;border-radius:6px}
.hval{color:#555;font-weight:600;font-size:.8rem;text-align:right;min-width:54px}
/* profile polish */
.profile-side{box-shadow:0 1px 2px rgba(0,0,0,.04)}
.profile-main .panel{box-shadow:0 1px 2px rgba(0,0,0,.03)}
.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem 1.5rem}
@media(max-width:600px){.detail-grid{grid-template-columns:1fr}}

/* ============ v14: timeline line fix + sticky columns + campaign medium ============ */
/* anchor the timeline connector to each item (was drawing a full-page line into blank space) */
.tl{position:relative}
.tl:last-child::before{display:none}
/* don't stretch the short side column to match the tall main column */
.profile{align-items:start}
.profile-side{position:sticky;top:1rem;align-self:start}
/* keep the left menu in view while the page scrolls */
.sidenav{position:sticky;top:0;align-self:flex-start;max-height:calc(100vh - 58px);overflow-y:auto}
.medium-pill{display:inline-block;font-size:.72rem;background:#eef2ff;color:#3730a3;border-radius:6px;padding:.05rem .4rem;margin-left:.3rem}

/* ============ v15: dashboard period bar + comparison deltas + state field ============ */
.period-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.2rem 0 1rem}
.period-bar .chip{padding:.4rem .85rem;border-radius:20px;font-size:.85rem;font-weight:600;color:#555;background:#fff;border:1px solid var(--line);text-decoration:none}
.period-bar .chip:hover{border-color:var(--indigo)}
.period-bar .chip.on{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.period-custom{display:inline-flex;align-items:center;gap:.35rem}
.period-custom input[type=date]{padding:.3rem .4rem;border:1px solid var(--line);border-radius:7px;font-size:.8rem}
.period-range{margin-left:auto}
.delta{font-size:.72rem;margin-top:.3rem;font-weight:600}
.delta-up{color:#16a34a}.delta-down{color:#dc2626}.delta-flat{color:#9aa1ab}
.card-sub{font-size:.72rem;color:#9aa1ab;margin-top:.2rem}

/* ============ v16.1: task tabs / filter / assignee ============ */
.task-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:.3rem 0 1rem}
.tabs{display:flex;gap:.4rem}
.tabs .tab{padding:.45rem .9rem;border-radius:9px;font-weight:600;color:#555;background:#fff;border:1px solid var(--line);text-decoration:none;font-size:.9rem}
.tabs .tab.on{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.tabs .tab .count{background:rgba(0,0,0,.12);border-radius:10px;padding:0 .4rem;margin-left:.25rem;font-size:.78rem}
.tabs .tab.on .count{background:rgba(255,255,255,.3)}
.who-filter select{padding:.35rem .5rem;border:1px solid var(--line);border-radius:8px}
.task.done .check{background:#16a34a;color:#fff;border-color:#16a34a}
.task.done strong{color:#6b7280}
.task-assignee{color:#475569;background:#f1f5f9;border-radius:6px;padding:.02rem .4rem}
.log-form #duewrap{display:flex;gap:1rem;flex-wrap:wrap;background:#faf7f4;border:1px solid var(--line);border-radius:9px;padding:.6rem .7rem;margin:.2rem 0 .5rem}
.log-form #duewrap label{display:flex;flex-direction:column;gap:.2rem;font-weight:600}

/* ============ v17: nicer dropdowns, teams, reports, donut ============ */
/* prettier selects in the log-activity + general selects */
.log-row select, .log-form select{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%232D3DAA' stroke-width='2'/></svg>") no-repeat right .7rem center;padding:.55rem 2rem .55rem .8rem;border:1px solid var(--line);border-radius:9px;font-weight:600;color:var(--charcoal);cursor:pointer}
.log-row select:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(45,61,170,.15)}
.log-row{display:flex;gap:.6rem;margin-bottom:.5rem}.log-row select{min-width:130px}.log-row input{flex:1}
/* teams */
.team-form{border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;margin-bottom:.8rem;background:#fcfbfa}
.team-head{margin-bottom:.5rem}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.4rem .8rem;margin-bottom:.6rem}
/* report donut */
.donut-wrap{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.donut{width:150px;height:150px;flex:none}
.donut-num{font-size:28px;font-weight:800;fill:var(--charcoal)}
.donut-lbl{font-size:10px;fill:#9aa1ab;text-transform:uppercase;letter-spacing:.04em}
.donut-empty{width:150px;height:150px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#f3f4f6;color:#9aa1ab;font-size:.8rem;text-align:center;padding:1rem}
.donut-legend{display:flex;flex-direction:column;gap:.5rem}
.donut-legend .leg{display:flex;align-items:center;gap:.5rem;font-size:.9rem}
.donut-legend .dot{width:11px;height:11px;border-radius:3px;display:inline-block}
.team-select{appearance:none;-webkit-appearance:none;background:#fff;border:1px solid var(--line);border-radius:20px;padding:.4rem 1.6rem .4rem .9rem;font-weight:700;color:var(--charcoal);cursor:pointer}
.period-spacer{flex:1}
.report-tbl td,.report-tbl th{padding:.6rem .7rem}
.conv-pill{background:#ecfdf5;color:#047857;border-radius:20px;padding:.1rem .5rem;font-size:.8rem;font-weight:700}

/* ============ v18: WhatsApp ============ */
.wa-status{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:10px;padding:.6rem .9rem;margin-bottom:1rem;font-size:.9rem}
.wa-dot{width:10px;height:10px;border-radius:50%}.wa-dot.on{background:#16a34a}.wa-dot.off{background:#cbd5e1}
.ok-badge{background:#ecfdf5;color:#047857;border-radius:20px;padding:.05rem .5rem;font-size:.7rem;font-weight:700}
.wa-connect{display:grid;gap:1rem;margin-bottom:1.25rem}
.grid-form .wide{grid-column:1/-1}
.wa-shell{display:grid;grid-template-columns:300px 1fr;gap:1rem;height:calc(100vh - 230px);min-height:420px}
@media(max-width:800px){.wa-shell{grid-template-columns:1fr;height:auto}}
.wa-list{background:#fff;border:1px solid var(--line);border-radius:12px;overflow-y:auto}
.wa-conv{display:block;padding:.7rem .9rem;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.wa-conv:hover{background:#faf7f4}.wa-conv.on{background:#fff4ec;border-left:3px solid var(--indigo)}
.wa-conv-top{display:flex;justify-content:space-between;gap:.5rem}
.wa-snip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-thread-wrap{background:#fff;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;overflow:hidden}
.wa-thread-head{padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.wa-thread{flex:1;overflow-y:auto;padding:1rem;background:#f5f3ef;display:flex;flex-direction:column;gap:.5rem}
.wa-msg{display:flex}.wa-msg.out{justify-content:flex-end}
.wa-bubble{max-width:72%;background:#fff;border-radius:12px;padding:.5rem .7rem;font-size:.92rem;box-shadow:0 1px 1px rgba(0,0,0,.06);position:relative}
.wa-msg.out .wa-bubble{background:#dcf8c6}
.wa-time{display:block;font-size:.66rem;color:#9aa1ab;text-align:right;margin-top:.2rem}
.wa-compose{display:flex;gap:.5rem;padding:.7rem;border-top:1px solid var(--line)}
.wa-compose input{flex:1;padding:.6rem .8rem;border:1px solid var(--line);border-radius:22px}
.wa-window-note{padding:0 .7rem .5rem}
.wa-empty{display:flex;align-items:center;justify-content:center;height:100%;color:#9aa1ab}
.link-danger{background:none;border:none;color:#dc2626;cursor:pointer;font-weight:600}

/* ============ v19: WhatsApp suite ============ */
.rcpt{margin-left:.2rem;color:#9aa1ab}.rcpt.read{color:#34b7f1}.rcpt.fail{color:#dc2626}
.wa-quickbar{display:flex;gap:.5rem;align-items:center;padding:.4rem .7rem 0;flex-wrap:wrap}
.wa-quickbar select{padding:.35rem .5rem;border:1px solid var(--line);border-radius:8px;font-size:.82rem}
.wa-extra{padding:.6rem .7rem;border-top:1px dashed var(--line);background:#faf9f8}
.wa-extra.collapsible{display:none}.wa-extra.collapsible.open{display:block}
.tpl-status{font-size:.72rem;font-weight:700;border-radius:20px;padding:.05rem .5rem}
.tpl-status.s-approved{background:#ecfdf5;color:#047857}.tpl-status.s-pending{background:#fff7ed;color:#c2410c}
.tpl-status.s-rejected{background:#fef2f2;color:#dc2626}.tpl-status.s-local{background:#eef2ff;color:#3730a3}
.day-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.3rem}
.pill.on{background:#16a34a;color:#fff;border-color:#16a34a}

/* ============ v20: WA dashboard + campaigns + window ============ */
.wa-dash-filters{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.wa-dash-filters select,.wa-dash-filters input{padding:.45rem .6rem;border:1px solid var(--line);border-radius:8px}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin-bottom:1.25rem}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem}
.kpi-n{font-size:1.7rem;font-weight:800;color:var(--charcoal)}.kpi-l{color:#6b7280;font-size:.82rem;margin-top:.2rem}
.wa-bars{display:flex;gap:6px;align-items:flex-end;height:160px;overflow-x:auto;padding-top:1rem}
.wa-bar-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;min-width:26px}
.wa-bar{width:10px;border-radius:3px 3px 0 0}.wa-bar.out{background:var(--indigo)}.wa-bar.in{background:#94a3b8}
.wa-bar-col{flex-direction:row;align-items:flex-end}.wa-bar-col .wa-bar-x{position:absolute}
.wa-bars .wa-bar-col{position:relative;flex-direction:column}
.wa-bar-x{font-size:.6rem;color:#9aa1ab;margin-top:3px;white-space:nowrap}
.wa-legend{margin-top:1.4rem;font-size:.8rem;color:#6b7280;display:flex;gap:.4rem;align-items:center}
.dot-out,.dot-in{width:10px;height:10px;border-radius:2px;display:inline-block}.dot-out{background:var(--indigo)}.dot-in{background:#94a3b8;margin-left:.8rem}
.win-badge{font-size:.72rem;font-weight:700;border-radius:20px;padding:.12rem .6rem;margin-left:.5rem}
.win-badge.open{background:#ecfdf5;color:#047857}.win-badge.closed{background:#fef2f2;color:#b91c1c}
.link-plain{background:none;border:none;color:var(--indigo);cursor:pointer;font-weight:600;padding:0}

/* ============ v21: template builder + live preview ============ */
.tpl-builder{display:grid;grid-template-columns:1fr 320px;gap:1.5rem}
@media(max-width:820px){.tpl-builder{grid-template-columns:1fr}}
.tpl-form .grid-form{margin-bottom:.4rem}
.btn-builder{border:1px dashed var(--line);border-radius:10px;padding:.8rem;margin:.6rem 0}
.tpl-preview-wrap{position:sticky;top:1rem;align-self:start}
.tpl-preview-label{font-size:.8rem;color:#6b7280;margin-bottom:.4rem;font-weight:600}
.wa-phone{background:#e6ddd3;border-radius:18px;padding:1rem;min-height:260px}
.wa-bubble-pv{background:#fff;border-radius:10px;padding:.5rem .6rem;box-shadow:0 1px 2px rgba(0,0,0,.12);font-size:.9rem;max-width:100%}
.pv-header{font-weight:700;margin-bottom:.35rem}
.pv-media{background:#f1ede8;border-radius:8px;padding:1.2rem .6rem;text-align:center;color:#6b7280;font-weight:600}
.pv-media-ico{font-size:1.3rem}
.pv-body{white-space:pre-wrap;line-height:1.4}
.pv-var{background:#fff4ec;color:#c2410c;border-radius:4px;padding:0 .2rem;font-size:.85em}
.pv-footer{color:#8a929c;font-size:.76rem;margin-top:.4rem}
.pv-buttons{margin-top:.5rem;display:flex;flex-direction:column;gap:2px}
.pv-btn{text-align:center;color:#1ea1e0;border-top:1px solid #eef0f2;padding:.45rem;font-size:.86rem;font-weight:600}

/* ============ v22: template form polish + register ============ */
.tpl-form > label{display:block;margin-bottom:.85rem;font-weight:600;font-size:.86rem;color:var(--charcoal)}
.tpl-form > label > input,.tpl-form > label > select,.tpl-form > label > textarea{
  display:block;width:100%;margin-top:.35rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:8px;font-size:.92rem;font-weight:400;box-sizing:border-box}
.tpl-form > label > textarea{resize:vertical;font-family:inherit}
.lbl-hint{display:inline;font-weight:400;color:#9aa1ab;font-size:.78rem}
.btn-builder{border:1px dashed var(--line);border-radius:10px;padding:.9rem;margin:.4rem 0 .9rem}
.btn-builder > strong{display:block;margin-bottom:.6rem}
.btn-builder .grid-form{margin-bottom:.5rem}
.wa-reg-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.5rem 0;border-top:1px solid #f1e3d4}
.wa-reg-row:first-of-type{border-top:none}
.wa-reg-row span{flex:1;min-width:160px}
.wa-reg-row input{width:130px;padding:.45rem .6rem;border:1px solid var(--line);border-radius:8px;letter-spacing:2px;text-align:center}

/* ============ v23: quality dots + compact panel ============ */
.q-dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle}
.q-green{background:#16a34a}.q-yellow{background:#eab308}.q-red{background:#dc2626}
.panel.compact{padding:.8rem 1rem}
.panel.compact h3{margin:0 0 .5rem}

/* ============ v24: WA subnav + inbox polish ============ */
.wa-subnav{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;margin:0 0 1rem;border-bottom:2px solid var(--line);padding-bottom:.5rem}
.wa-subnav .wa-tab{flex:0 0 auto;padding:.5rem .9rem;border-radius:9px;text-decoration:none;color:#5b626b;font-weight:600;font-size:.9rem;border:1px solid transparent;background:#f1ede9;transition:background .12s,color .12s,border-color .12s}
.wa-subnav .wa-tab:hover{background:var(--indigo-50);color:var(--indigo);border-color:#C7CEF2}
.wa-subnav .wa-tab.active{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.wa-subnav .wa-tab.active:hover{background:#e9650f;color:#fff;border-color:#e9650f}
.wa-subnav .wa-refresh{margin-left:auto;background:#fff;color:var(--charcoal);border:1px solid var(--line);cursor:pointer}
.wa-subnav .wa-refresh:hover{background:#fff;border-color:var(--indigo);color:var(--indigo)}
.wa-hooklog{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.6rem .9rem;margin-bottom:1rem;font-size:.9rem}
.wa-hooklog summary{cursor:pointer;font-weight:600}
.wa-hooklog table{margin-top:.6rem}
.wa-inbox-pick{padding:.5rem;border-bottom:1px solid var(--line)}
.wa-inbox-pick select{width:100%;padding:.4rem .5rem;border:1px solid var(--line);border-radius:8px}
.fmt-btn{width:30px;height:30px;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;font-size:.85rem}
.fmt-btn:hover{background:#f5f2ef}
.wa-attach{background:#f1ede8;border-radius:6px;padding:.4rem .55rem;font-weight:600;font-size:.85rem}
.wa-attach a{color:var(--indigo)}
.wa-cap{margin-top:.25rem}

/* ============ v26: webhook setup panel ============ */
.hook-row{border-top:1px dashed var(--line);padding-top:.7rem;margin-top:.7rem}
.hook-row .form-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}

/* ============ v28: WhatsApp-style chat redesign ============ */
.wa-shell{box-shadow:0 6px 24px rgba(50,50,50,.08);border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff}
.wa-list{border:none;border-right:1px solid var(--line);border-radius:0}
.wa-conv{display:flex;align-items:center;gap:.65rem;padding:.7rem .85rem}
.wa-conv.on{background:#fff4ec;border-left:3px solid var(--indigo)}
.wa-conv-body{flex:1;min-width:0;display:block}
.wa-conv-top{display:flex;justify-content:space-between;gap:.5rem}
.wa-snip{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-avatar{flex:none;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#586AD0,var(--indigo));color:#fff;font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center;letter-spacing:.5px}
.wa-avatar.lg{width:40px;height:40px}
.wa-thread-wrap{border:none;border-radius:0}
.wa-thread-head{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;background:#fff;border-bottom:1px solid var(--line)}
.wa-th-meta{flex:1;min-width:0;line-height:1.3}
.wa-th-meta a{text-decoration:none;color:var(--charcoal)}
.wa-th-meta a:hover strong{text-decoration:underline}
.wa-thread{flex:1;overflow-y:auto;padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;
  background-color:#efe7df;
  background-image:radial-gradient(rgba(120,100,80,.06) 1.4px,transparent 1.4px);background-size:22px 22px}
.wa-msg{display:flex}.wa-msg.out{justify-content:flex-end}
.wa-bubble{max-width:74%;background:#fff;border-radius:12px 12px 12px 4px;padding:.5rem .7rem .35rem;font-size:.92rem;line-height:1.4;box-shadow:0 1px 1.5px rgba(0,0,0,.12);position:relative;word-wrap:break-word}
.wa-msg.out .wa-bubble{background:#d9fdd3;border-radius:12px 12px 4px 12px}
.wa-time{display:block;font-size:.64rem;color:#7d8590;text-align:right;margin-top:.15rem}
.wa-attach{background:rgba(0,0,0,.05);border-radius:7px;padding:.45rem .6rem;font-weight:600;font-size:.85rem}
.wa-compose{display:flex;gap:.6rem;padding:.7rem .9rem;border-top:1px solid var(--line);background:#fff;align-items:center}
.wa-compose input{flex:1;padding:.7rem 1rem;border:1px solid var(--line);border-radius:24px;font-size:.95rem}
.wa-compose input:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(45,61,170,.12)}
.wa-compose .btn{border-radius:24px;padding:.6rem 1.3rem}
.wa-quickbar{display:flex;gap:.45rem;align-items:center;padding:.5rem .9rem 0;flex-wrap:wrap;background:#fff}
.fmt-btn{width:32px;height:32px;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer}
.fmt-btn:hover{background:#f5f2ef;border-color:var(--indigo)}
.win-badge{font-size:.7rem;font-weight:700;border-radius:20px;padding:.2rem .65rem;white-space:nowrap}
.wa-status{border-radius:12px}
@media(max-width:800px){.wa-shell{height:auto}.wa-list{border-right:none;border-bottom:1px solid var(--line)}}

/* ============ v30: live-chat 3-pane + profile + reactions ============ */
.wa-shell{grid-template-columns:280px 1fr 300px}
@media(max-width:1100px){.wa-shell{grid-template-columns:240px 1fr}.wa-profile{display:none}.wa-shell.show-prof{grid-template-columns:1fr;position:relative}.wa-shell.show-prof .wa-profile{display:block;position:absolute;right:0;top:0;bottom:0;width:300px;z-index:5;box-shadow:-6px 0 18px rgba(0,0,0,.12)}}
@media(max-width:800px){.wa-shell{grid-template-columns:1fr}}
.wa-prof-toggle{margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;width:34px;height:34px;cursor:pointer;display:none}
@media(max-width:1100px){.wa-prof-toggle{display:block}}
.wa-profile{background:#fff;border-left:1px solid var(--line);padding:1rem;overflow-y:auto}
.wa-prof-head{display:flex;gap:.6rem;align-items:center;margin-bottom:.6rem}
.wa-prof-sec{border-top:1px solid var(--line);padding:.8rem 0}
.wa-prof-sec h4{margin:0 0 .5rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.4px;color:#7d8590}
.wa-prof-sec select{width:100%;padding:.45rem .5rem;border:1px solid var(--line);border-radius:8px}
.wa-tagwrap{display:flex;flex-wrap:wrap;gap:.4rem}
.wa-tagchip{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;border:1px solid var(--tc,#ccc);color:#333;border-radius:20px;padding:.15rem .55rem;cursor:pointer;border-left:5px solid var(--tc,#ccc)}
.wa-deal{margin-bottom:.5rem}
.wa-deal select{margin-top:.2rem}
.wa-compose-note{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.6rem}
.wa-compose-note textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:.45rem;font:inherit;resize:vertical}
.wa-note-item{border-top:1px dashed var(--line);padding:.4rem 0}
.wa-daysep{text-align:center;margin:.5rem 0}
.wa-daysep span{background:rgba(255,255,255,.85);border-radius:10px;padding:.15rem .7rem;font-size:.7rem;color:#5b6470;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.wa-quote{border-left:3px solid var(--indigo);background:rgba(0,0,0,.05);border-radius:5px;padding:.25rem .45rem;font-size:.8rem;color:#555;margin-bottom:.25rem}
.wa-bubble{position:relative}
.wa-msg-actions{position:absolute;top:2px;right:4px;display:none;gap:2px}
.wa-bubble:hover .wa-msg-actions{display:flex}
.wa-act{background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:6px;width:22px;height:22px;font-size:.72rem;cursor:pointer;line-height:1;padding:0}
.wa-react-badge{position:absolute;bottom:-10px;right:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 .3rem;font-size:.78rem;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.wa-reactbar{position:absolute;z-index:50;background:#fff;border:1px solid var(--line);border-radius:24px;padding:.25rem .4rem;display:flex;gap:.15rem;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.wa-reactbar button{border:none;background:none;font-size:1.1rem;cursor:pointer;padding:.1rem .2rem;border-radius:50%}
.wa-reactbar button:hover{background:#f0ece8}
.wa-replybar{display:flex;align-items:center;gap:.5rem;padding:.4rem .9rem;background:#fff;border-top:1px solid var(--line);font-size:.85rem}
.wa-replybar-txt{flex:1;color:#555;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-compose{position:relative}
.wa-compose textarea{flex:1;padding:.7rem 1rem;border:1px solid var(--line);border-radius:18px;font:inherit;resize:none;max-height:120px;line-height:1.4}
.wa-compose textarea:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(45,61,170,.12)}
.wa-canned{position:absolute;bottom:64px;left:.9rem;right:.9rem;max-height:210px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:20}
.wa-canned-item{padding:.5rem .7rem;cursor:pointer;border-bottom:1px solid var(--line)}
.wa-canned-item:hover{background:#fff4ec}

/* ============ v31: fix button text color + tabs + search ============ */
.fmt-btn{color:var(--charcoal)!important;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem}
.fmt-btn b,.fmt-btn i,.fmt-btn s{color:var(--charcoal)}
.wa-act{color:var(--charcoal)!important;display:inline-flex;align-items:center;justify-content:center;background:#fff!important;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.wa-act:hover{background:#fff4ec!important;border-color:var(--indigo)}
.wa-msg-actions{top:-12px;right:6px;gap:4px}
.wa-reactbar button{color:initial}
.wa-replybar .wa-act{width:26px;height:26px;font-size:.9rem}
/* conversation tabs + search */
.wa-tabs{display:flex;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:3}
.wa-tab{flex:1;text-align:center;padding:.6rem .3rem;font-size:.8rem;font-weight:700;color:#7d8590;text-decoration:none;border-bottom:2px solid transparent}
.wa-tab.on{color:var(--indigo);border-bottom-color:var(--indigo)}
.wa-tab:hover{background:#faf7f4}
.wa-search{padding:.5rem .6rem;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:34px;z-index:2}
.wa-search input{width:100%;border:1px solid var(--line);border-radius:18px;padding:.45rem .8rem;font-size:.85rem}
.wa-search input:focus{outline:none;border-color:var(--indigo)}
.wa-resolve-btn{margin-left:.5rem;border:1px solid var(--line);background:#fff!important;color:var(--charcoal)!important;border-radius:8px;padding:.3rem .7rem;font-size:.78rem;font-weight:700;cursor:pointer}
.wa-resolve-btn:hover{border-color:var(--ok);color:var(--ok)!important}
.wa-resolve-btn.resolved{border-color:var(--ok);color:var(--ok)!important}
.wa-canned-empty{padding:.7rem;color:#7d8590;font-size:.85rem}
.wa-canned-foot{padding:.5rem .7rem;border-top:1px solid var(--line);font-size:.78rem}
.wa-conv.resolved-row{opacity:.7}

/* ============ v32: number picker, assignment, date timeline ============ */
.wa-status{flex-wrap:wrap}
.wa-numpick{padding:.4rem .6rem;border:1px solid var(--line);border-radius:8px;font-size:.85rem;max-width:60%}
.wa-tabs button.wa-tab{background:none;border:0;border-bottom:2px solid transparent}
.wa-assignbar{padding:.4rem .6rem;border-bottom:1px solid var(--line);background:#fff}
.wa-assignbar select{width:100%;padding:.4rem .5rem;border:1px solid var(--line);border-radius:8px;font-size:.82rem;color:var(--charcoal)}
.wa-assignee{display:inline-block;margin-top:.2rem;font-size:.7rem;color:var(--indigo);background:#fff4ec;border-radius:10px;padding:0 .45rem}
.wa-datefilter{border:1px solid var(--line);border-radius:8px;padding:.25rem .4rem;font-size:.78rem;color:var(--charcoal)}
.wa-noconv{color:#7d8590}

/* ============ v33: toast + voice recording + attach ============ */
.wa-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#323232;color:#fff;padding:.55rem 1.1rem;border-radius:22px;z-index:200;font-size:.85rem;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.btn-ghost.rec{background:#fde8e8!important;border-color:#dc2626!important;color:#dc2626!important;font-weight:700}
.wa-cap{margin-top:.25rem}

/* ============ v34: inline media (images, audio, video) ============ */
.wa-media-img{max-width:240px;max-height:280px;border-radius:10px;display:block;cursor:pointer}
.wa-msg.out .wa-media-img{margin-left:auto}
.wa-media-vid{max-width:260px;border-radius:10px;display:block}
.wa-media-audio{height:40px;max-width:240px;display:block}
a.wa-attach{display:inline-block;text-decoration:none;color:var(--charcoal)}
a.wa-attach:hover{text-decoration:underline}

/* ============ v36: blocked contacts ============ */
.wa-blocked-banner{background:#fef2f2;color:#b91c1c;border-bottom:1px solid #fecaca;padding:.5rem .9rem;font-size:.85rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.wa-blocked-banner .wa-resolve-btn{margin-left:auto;border-color:#b91c1c;color:#b91c1c!important}
.wa-conv.blocked-row{opacity:.65}
#wa-blockbtn.blocked{border-color:#b91c1c;color:#b91c1c!important}

/* ============ v38: alternative names ============ */
.aka{margin:.2rem 0 .5rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;justify-content:center}
.aka-label{font-size:.72rem;color:#888;text-transform:uppercase;letter-spacing:.04em;width:100%;text-align:center}
.aka-chip{display:inline-flex;align-items:center;gap:.25rem;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;padding:.12rem .5rem;font-size:.82rem}
.aka-chip form{display:inline;margin:0}
.aka-btn{border:none;background:none;cursor:pointer;font-size:.78rem;line-height:1;padding:0 .1rem;color:#9aa0a6}
.aka-btn:hover{color:var(--indigo)}
.aka-add{margin:.2rem auto .4rem;font-size:.82rem;max-width:260px}
.aka-add summary{cursor:pointer;color:var(--indigo);text-align:center;list-style:none}
.aka-addform{display:flex;gap:.3rem;margin-top:.4rem}
.aka-addform input{flex:1;padding:.3rem .5rem;border:1px solid #ddd;border-radius:8px;font-size:.82rem}

/* ============ v39: top-bar live clock ============ */
.topclock{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;padding:0 .9rem;margin-left:.2rem;border-left:1px solid rgba(0,0,0,.08);min-width:118px}
.topclock .tc-time{font-weight:700;font-size:.95rem;color:var(--indigo);font-variant-numeric:tabular-nums}
.topclock .tc-date{font-size:.7rem;color:#888}
@media (max-width:720px){.topclock{display:none}}

/* ============ v41: contact outreach ============ */
.reach-row{display:flex;gap:.5rem;flex-wrap:wrap}
.reach-row .btn,.reach-row .btn-ghost{text-decoration:none}

/* ============ v43: task notification bell ============ */
.notif-bell{position:relative;display:inline-flex;align-items:center}
.bell-btn{background:none;border:none;cursor:pointer;font-size:1.15rem;position:relative;padding:.2rem .35rem;line-height:1}
.bell-count{position:absolute;top:-2px;right:-4px;background:#ef4444;color:#fff;font-size:.62rem;font-weight:700;min-width:15px;height:15px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 3px}
.notif-pop{position:absolute;top:120%;right:0;width:330px;max-width:86vw;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.16);z-index:60;display:none;overflow:hidden}
.notif-pop.show{display:block}
.notif-head{padding:.6rem .8rem;font-weight:700;font-size:.82rem;border-bottom:1px solid #f0f0f0;color:#323232}
.notif-list{max-height:340px;overflow:auto}
.notif-empty{padding:1.1rem .8rem;color:#888;font-size:.85rem;text-align:center}
.notif-item{padding:.55rem .8rem;border-bottom:1px solid #f5f5f5;display:grid;grid-template-columns:1fr auto;gap:.15rem .5rem;align-items:center;font-size:.82rem}
.notif-item .ni-main{grid-column:1}
.notif-item .ni-due{grid-column:1;font-size:.72rem}
.notif-item .ni-done{grid-column:2;grid-row:1/3;align-self:center;background:#fff;border:1px solid var(--indigo);color:var(--indigo);border-radius:7px;padding:.2rem .5rem;font-size:.74rem;cursor:pointer;white-space:nowrap}
.notif-item .ni-done:hover{background:var(--indigo);color:#fff}
.notif-item.od .ni-main{color:#b91c1c}
.ni-od{background:#fef2f2;color:#b91c1c;font-size:.62rem;font-weight:700;padding:.05rem .3rem;border-radius:5px}
.notif-foot{display:block;padding:.55rem .8rem;text-align:center;font-size:.8rem;color:var(--indigo);text-decoration:none;border-top:1px solid #f0f0f0}
.notif-foot:hover{background:var(--indigo-50)}

/* ============ v44: incoming WhatsApp call popup + call button ============ */
.wa-callpop{position:fixed;top:18px;right:18px;z-index:9999;display:flex;flex-direction:column;gap:.6rem;background:#fff;border:1px solid #e5e7eb;border-left:5px solid #16a34a;border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.22);padding:.85rem 1rem;max-width:320px;animation:cpIn .25s ease}
@keyframes cpIn{from{transform:translateY(-12px);opacity:0}to{transform:translateY(0);opacity:1}}
.wa-callpop .cp-top{display:flex;align-items:center;gap:.7rem}
.wa-callpop .cp-ic{font-size:1.7rem;animation:cpRing .8s ease-in-out infinite}
@keyframes cpRing{0%,100%{transform:rotate(0)}25%{transform:rotate(-18deg)}75%{transform:rotate(18deg)}}
.wa-callpop .cp-tx{font-size:.86rem;line-height:1.3;color:#323232}
.wa-callpop .cp-actions{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.wa-callpop .cp-answer{flex:1 1 auto;text-align:center;text-decoration:none;background:#16a34a;color:#fff;border-radius:9px;padding:.5rem .7rem;font-size:.82rem;font-weight:700;white-space:nowrap}
.wa-callpop .cp-answer:hover{background:#128a3c}
.wa-callpop .cp-tel{text-decoration:none;color:#323232;border:1px solid #d7dbe0;border-radius:9px;padding:.5rem .7rem;font-size:.82rem;font-weight:600;white-space:nowrap}
.wa-callpop .cp-tel:hover{background:#f3f4f6}
.wa-callpop .cp-open{text-decoration:none;color:#16a34a;border:1px solid #16a34a;border-radius:9px;padding:.5rem .7rem;font-size:.82rem;font-weight:600;white-space:nowrap}
.wa-callpop .cp-open:hover{background:#f0fdf4}
.wa-callpop .cp-x{background:#eef0f2;color:#323232;border:1px solid #d7dbe0;border-radius:9px;padding:.5rem .7rem;font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap}
.wa-callpop .cp-x:hover{background:#e2e6ea}
.wa-callbtn{text-decoration:none;color:#16a34a !important;border-color:#16a34a !important}
.wa-callbtn:hover{background:#16a34a !important;color:#fff !important}

/* ============ v46: chat header toolbar + date popover + identity tools ============ */
.wa-thread-head{flex-wrap:wrap}
.wa-th-meta{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.wa-head-actions{display:flex;align-items:center;gap:.35rem;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.wa-hbtn{display:inline-flex;align-items:center;gap:.28rem;border:1px solid var(--line);background:#fff;color:var(--charcoal);border-radius:8px;padding:.34rem .62rem;font-size:.76rem;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1.1}
.wa-hbtn:hover{border-color:var(--indigo);color:var(--indigo)}
.wa-hbtn.active{border-color:var(--indigo);color:var(--indigo);background:var(--indigo-50)}
.wa-hbtn.resolved{border-color:var(--ok);color:var(--ok)}
.wa-hbtn.blocked{border-color:#b91c1c;color:#b91c1c}
.wa-hbtn.wa-hbtn-wa{color:#16a34a;border-color:#bfe3c6}
.wa-hbtn.wa-hbtn-wa:hover{background:#16a34a;color:#fff;border-color:#16a34a}
.wa-hbtn.wa-hbtn-del:hover{border-color:#b91c1c;color:#b91c1c}
.wa-datepop-wrap{position:relative}
.wa-datepop{position:absolute;right:0;top:130%;z-index:40;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.16);padding:.65rem;display:none;min-width:210px}
.wa-datepop.show{display:block}
.wa-datepop-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.45rem}
.wa-datepop-row label{font-size:.74rem;color:#7d8590;font-weight:600}
.wa-datepop .wa-datefilter{border:1px solid var(--line);border-radius:7px;padding:.22rem .35rem;font-size:.76rem;color:var(--charcoal)}

/* ============ v45: date-range filters (global inbox) ============ */
.wa-datebar{padding:.55rem .6rem;border-bottom:1px solid var(--line);background:#fff;display:flex;flex-direction:column;gap:.45rem}
.wa-datebar-row{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.wa-datebar-row label{display:flex;align-items:center;gap:.3rem;font-size:.72rem;color:#7d8590;margin:0;flex:1}
.wa-datebar-row input[type=date]{flex:1;min-width:0;border:1px solid var(--line);border-radius:7px;padding:.28rem .4rem;font-size:.76rem;color:var(--charcoal)}
.btn.xsmall,.btn-ghost.xsmall{padding:.28rem .6rem;font-size:.72rem;border-radius:7px;line-height:1.2}
.wa-datebar-note{font-size:.72rem;color:var(--indigo);font-weight:600}

/* contact identities: default / move / remove */
.idents li{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;padding:.25rem 0;border-bottom:1px solid #f3f4f6}
.idents li .id-val{font-weight:600}
.ident-tools{display:inline-flex;gap:.3rem;margin-left:auto}
.ident-tools button{border:1px solid var(--line);background:#fff;border-radius:6px;font-size:.72rem;padding:.12rem .4rem;cursor:pointer;color:#555}
.ident-tools button:hover{border-color:var(--indigo);color:var(--indigo)}
.ident-tools button.danger:hover{border-color:#b91c1c;color:#b91c1c}
.id-default{font-size:.66rem;font-weight:700;color:#047857;background:#ecfdf5;border-radius:10px;padding:.05rem .4rem}
.ident-move{margin:.3rem 0 .5rem;padding:.5rem;border:1px dashed var(--line);border-radius:8px;background:#fafafa}
.ident-move select,.ident-move input{width:100%;padding:.35rem .5rem;border:1px solid var(--line);border-radius:7px;font-size:.82rem;margin-bottom:.4rem}

/* ============ v47: form field overflow fixes (settings / branding) ============ */
.grid-form label{min-width:0}
.grid-form input[type=file]{display:block;width:100%;max-width:100%;box-sizing:border-box;margin-top:.3rem;font-size:.82rem}
.grid-form input[type=file]::-webkit-file-upload-button,.grid-form input[type=file]::file-selector-button{margin-right:.55rem;border:1px solid var(--line);background:#f7f7f7;border-radius:6px;padding:.3rem .6rem;cursor:pointer;font-size:.8rem}
.grid-form input[type=color]{width:100%;height:40px;padding:.15rem;border:1px solid var(--line);border-radius:8px;margin-top:.2rem;cursor:pointer;background:#fff;box-sizing:border-box}
.grid-form .small img{max-width:100%;height:auto}

/* ============ v49: field rename/type editor + audit details ============ */
.field-edit{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem;margin-bottom:.6rem}
.field-edit label{display:flex;flex-direction:column;font-size:.78rem;color:#7d8590;gap:.2rem}
.field-edit input,.field-edit select{border:1px solid var(--line);border-radius:8px;padding:.4rem .5rem;font-size:.85rem;min-width:160px}
.field-edit input:disabled{background:#f3f4f6;color:#888}
.tbl td.small{white-space:normal;max-width:360px;word-break:break-word}

/* ============ v50: template library actions + view ============ */
.tpl-actions{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center}
.tpl-actions .btn-ghost.small,.tpl-actions button{font-size:.74rem;padding:.25rem .5rem}
.tpl-actions .del-btn{color:#b91c1c;border-color:#f0c4c4}
.tpl-actions .del-btn:hover{background:#b91c1c;color:#fff;border-color:#b91c1c}
.tpl-viewrow>td{background:#faf8f5;border-top:0}
.tpl-view{padding:.4rem .2rem}
.tpl-view-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:1rem}
@media(max-width:760px){.tpl-view-cols{grid-template-columns:1fr}}
.tv-line{margin:.35rem 0;font-size:.86rem;color:var(--charcoal)}
.tpl-fixcat{border-left:1px solid var(--line);padding-left:1rem}
.tpl-fixcat .form-actions{margin-top:.4rem}
.tv-media{margin:.4rem 0}
.tv-media img,.tv-media video{max-width:260px;max-height:200px;border-radius:10px;border:1px solid var(--line);display:block}
.ar-test{margin-top:1rem;padding:.8rem;border:1px dashed var(--line);border-radius:10px;background:#fafafa}

/* ============ v54: email template rich editor ============ */
.rte-toolbar{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.35rem;align-items:center}
.rte-toolbar button{border:1px solid #c9cdd3;background:#fff;color:#323232;border-radius:6px;padding:.3rem .55rem;cursor:pointer;font-size:.85rem;line-height:1;font-weight:600}
.rte-toolbar button:hover{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.rte-toolbar .rte-var{border:1px solid #c9cdd3;border-radius:6px;padding:.3rem .4rem;font-size:.8rem;color:#323232;background:#fff;cursor:pointer}
.rte-toolbar .rte-html.on{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.rte-editor{min-height:130px;border:1px solid #c9cdd3;border-radius:8px;padding:.6rem;background:#fff;font-size:.92rem;overflow:auto;color:#222}
.rte-editor:empty:before{content:attr(data-ph);color:#9aa0a6}
.rte-emoji-wrap{position:relative;display:inline-block}
.rte-emoji-pop{display:none;position:absolute;top:110%;left:0;z-index:20;background:#fff;border:1px solid var(--line);border-radius:8px;padding:.4rem;width:210px;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.rte-emoji-pop.open{display:block}
.rte-em{cursor:pointer;font-size:1.2rem;padding:.15rem .25rem;display:inline-block}
.rte-em:hover{background:#f3f4f6;border-radius:6px}

/* ============ v48: collapsible event log + top-bar gap + global notify ============ */
.wa-hooklog{padding:0}
.wa-hooklog>summary{cursor:pointer;list-style:none;padding:1rem;font-weight:700;color:var(--charcoal);display:flex;align-items:center;gap:.4rem}
.wa-hooklog>summary::-webkit-details-marker{display:none}
.wa-hooklog>summary::before{content:'▸';color:var(--indigo);font-weight:700}
.wa-hooklog[open]>summary::before{content:'▾'}
.wa-hooklog>summary:hover{background:#faf7f4}
.wa-hooklog>*:not(summary){padding:0 1rem}
.wa-hooklog .hint{padding-left:1rem;padding-right:1rem}
.wa-hooklog-scroll{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:8px;margin:0 1rem 1rem}
.wa-hooklog-scroll table{margin:0}
.wa-hooklog-scroll thead th{position:sticky;top:0;background:#f7f5f2;z-index:1}
/* #13: remove the big gap between logo and clock in the top bar */
.topbar{justify-content:flex-start;gap:1rem}
.topbar .brand{margin-right:.25rem}
.topbar .topbar-right{margin-left:auto}

/* =====================================================================
   #11 RESPONSIVE PASS — phones & tablets
   ===================================================================== */
.tbl-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
input,select,textarea{max-width:100%}

/* Tablet and below */
@media(max-width:900px){
  .content{padding:1.1rem 1rem}
  .grid-form{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .panel{overflow-x:auto}                 /* wide tables scroll inside their card */
}

/* Phones */
@media(max-width:760px){
  .topbar{flex-wrap:wrap;height:auto;padding:.5rem .75rem;gap:.5rem}
  .topclock{display:none}
  .topbar-right{gap:.4rem;flex-wrap:wrap}
  .topbar-right .btn-ghost{font-size:.78rem;padding:.3rem .5rem}

  .shell{flex-direction:column;min-height:0}
  .sidenav{width:100%;flex:none;display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:.3rem;
           padding:.5rem .6rem;border-right:none;border-bottom:1px solid var(--line);position:static;max-height:none}
  .sidenav a{font-size:.8rem;white-space:nowrap;padding:.45rem .7rem;margin-bottom:0}
  .sidenav a span.nav-badge{display:inline}
  .nav-sep,.nav-soon{display:none}        /* hide "coming next phase" rail on phones */
  .content{padding:.9rem .8rem}

  .grid-form{grid-template-columns:1fr}
  .page-head{flex-direction:column;align-items:flex-start}
  .page-head h1{font-size:1.3rem}

  .tbl{font-size:.85rem}
  .tbl th,.tbl td{padding:.5rem .55rem}

  /* WhatsApp inbox: stack panes, cap the conversation list height */
  .wa-shell{grid-template-columns:1fr!important;height:auto}
  .wa-list{max-height:38vh;border-right:none;border-bottom:1px solid var(--line)}
  .wa-thread{max-height:55vh}
  .wa-subnav{overflow-x:auto;flex-wrap:nowrap}
  .wa-subnav .wa-tab{white-space:nowrap}

  /* Modal / form niceties */
  .form-actions{flex-wrap:wrap}
  .btn,.btn-ghost{min-height:40px}        /* easier tap targets */
}

/* Small phones */
@media(max-width:430px){
  .topbar-right .btn-ghost{font-size:.72rem}
  .content{padding:.7rem .6rem}
  .panel{padding:.8rem}
  .wa-window-closed{padding:.7rem}
}

/* 24-hour window closed composer panel */
.wa-window-closed{background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:1rem;margin:.4rem .2rem}
.wa-window-closed .wa-wc-head{font-weight:800;color:#9a3412;margin-bottom:.25rem}
.wa-window-closed .wa-wc-form{margin-top:.6rem}

/* Campaign detail — WhatsApp-style template preview */
.wa-preview-bubble{background:#dcf8c6;border-radius:10px;padding:.7rem .8rem;max-width:340px;box-shadow:0 1px 2px rgba(0,0,0,.12);font-size:.92rem;color:#111}
.wa-preview-bubble .wa-pv-h{font-weight:700;margin-bottom:.3rem}
.wa-preview-bubble .wa-pv-media{background:#cfe8bd;border-radius:8px;padding:1.4rem;text-align:center;color:#4b5563;font-size:.8rem;margin-bottom:.4rem}
.wa-preview-bubble .wa-pv-body{white-space:pre-wrap;line-height:1.4}
.wa-preview-bubble .wa-pv-foot{color:#667781;font-size:.78rem;margin-top:.4rem}
.wa-preview-bubble .wa-pv-btns{margin-top:.5rem;border-top:1px solid rgba(0,0,0,.08);padding-top:.3rem}
.wa-preview-bubble .wa-pv-btn{color:#0a7cff;text-align:center;padding:.4rem;font-size:.86rem;border-top:1px solid rgba(0,0,0,.06)}
.wa-preview-bubble .wa-pv-btn:first-child{border-top:none}
@media(max-width:760px){ .detail-grid{grid-template-columns:1fr!important} }

/* ===== #1 Security panel ===== */
.sec-panel .sec-hd{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
.sec-panel .sec-ico{font-size:1.6rem;background:#fff3e9;border:1px solid #C7CEF2;border-radius:12px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;flex:none}
.sec-panel .sec-state{margin-left:auto;font-weight:700;font-size:.82rem;padding:.3rem .6rem;border-radius:999px}
.sec-panel .sec-state.on{background:#eafaf0;color:#15803d;border:1px solid #bbf7d0}
.sec-panel .sec-state.off{background:#f3f4f6;color:#6b7280;border:1px solid #e5e7eb}
.sec-rule{background:#faf7f3;border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;font-size:.88rem;color:#444;margin-bottom:.7rem}
.sec-banner{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;border-radius:10px;padding:.7rem .8rem;margin-bottom:.3rem}
.sec-banner.ok{background:#eafaf0;border:1px solid #bbf7d0}
.sec-banner.warn{background:#fff6e9;border:1px solid #fed7aa}
.sec-banner .sec-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.3rem}
.sec-banner.ok .sec-dot{background:#22c55e}.sec-banner.warn .sec-dot{background:#f59e0b}
.sec-banner-actions{display:flex;gap:.4rem;flex-wrap:wrap}
.sec-banner-actions form{display:inline}
.sec-section{border:1px solid var(--line);border-radius:12px;padding:.8rem;margin-top:.8rem;background:#fff}
.sec-section-h{font-weight:700;color:#323232;margin-bottom:.5rem;font-size:.95rem}
.sec-tbl td{vertical-align:middle}

/* ===== #7 campaign preview media ===== */
.wa-preview-bubble .wa-pv-img{max-width:100%;border-radius:8px;margin-bottom:.4rem;display:block}
.wa-preview-bubble .wa-pv-doc{display:inline-block;background:#cfe8bd;border-radius:8px;padding:.5rem .7rem;color:#1f6e34;text-decoration:none;font-size:.85rem;margin-bottom:.4rem}

/* =====================================================================
   #4 MOBILE — make each screen behave like a focused mobile app
   ===================================================================== */
@media(max-width:760px){
  /* sticky app-style top bar + nav */
  .topbar{position:sticky;top:0;z-index:50}
  .sidenav{position:sticky;top:0;z-index:40;background:#fff;gap:.4rem;padding:.5rem .6rem;
           box-shadow:0 2px 6px rgba(0,0,0,.05)}
  .sidenav a{background:#f4f5f7;border-radius:999px;color:#374151;font-weight:600;display:inline-flex;align-items:center;gap:.3rem}
  .sidenav a.active{background:var(--indigo);color:#fff}

  /* roomy, tappable controls */
  .content{padding:.8rem .7rem 2.2rem}
  .panel{padding:.95rem;border-radius:14px;margin-bottom:.8rem}
  input,select,textarea,.btn,.btn-ghost{font-size:16px}        /* 16px stops iOS zoom-on-focus */
  input,select,textarea{min-height:44px;border-radius:10px}
  .btn,.btn-ghost{min-height:46px;border-radius:10px;padding:.6rem 1rem}
  .form-actions .btn,.form-actions .btn-ghost{flex:1 1 auto}    /* full-width primary actions */
  label{font-size:.92rem}

  /* sticky section/page headers feel native */
  .page-head{position:sticky;top:54px;background:var(--bg,#faf7f3);z-index:30;padding:.5rem 0;margin:0 -.1rem .4rem}
  .wa-subnav{position:sticky;top:0;background:#fff;z-index:20;border-radius:10px;padding:.3rem}

  /* tables: horizontal scroll with a readable sticky first column */
  .tbl-wrap{border:1px solid var(--line);border-radius:10px}
  .panel>table.tbl, .tbl{min-width:520px}
  .tbl th:first-child,.tbl td:first-child{position:sticky;left:0;background:#fff;z-index:1}
  .tbl thead th{position:sticky;top:0;background:#faf7f3;z-index:2}

  /* KPI tiles 2-up on phones */
  .kpi-grid{grid-template-columns:repeat(2,1fr)!important}

  /* security banner stacks */
  .sec-banner{align-items:flex-start}
  .sec-panel .sec-state{margin-left:0}
  .sec-panel .sec-hd{flex-wrap:wrap}
}
@media(max-width:430px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)!important}
  .sidenav a{font-size:.78rem;padding:.4rem .6rem}
}

/* ===== #1 security toggle button + cleaner add forms ===== */
.sec-toggle-form{margin-left:auto}
button.sec-state{cursor:pointer;border:1px solid transparent;font:inherit;font-weight:700;font-size:.82rem;padding:.35rem .7rem;border-radius:999px}
button.sec-state.on{background:#eafaf0;color:#15803d;border-color:#bbf7d0}
button.sec-state.on:hover{background:#dcf6e6}
button.sec-state.off{background:#f3f4f6;color:#6b7280;border-color:#e5e7eb}
button.sec-state.off:hover{background:#e9eaee}
.sec-section .grid-form{grid-template-columns:1fr 1fr;gap:.7rem;align-items:end}
.sec-section .grid-form label{display:flex;flex-direction:column}
.sec-section .grid-form input{width:100%;box-sizing:border-box}
.sec-section .grid-form .form-actions{grid-column:1/-1;margin-top:.1rem}
@media(max-width:600px){ .sec-section .grid-form{grid-template-columns:1fr} }

/* ===== #2 cost form ===== */
.cost-form{grid-template-columns:repeat(5,minmax(90px,1fr));align-items:end}
.cost-form .form-actions{grid-column:1/-1}
@media(max-width:700px){ .cost-form{grid-template-columns:1fr 1fr} }

/* ===== #3 campaign bulk bar ===== */
.camp-bulkbar{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:.5rem;padding:.6rem .7rem;background:#faf7f3;border:1px solid var(--line);border-radius:10px}
.camp-bulkbar-left{display:flex;flex-direction:column;gap:.35rem}
.camp-total{font-size:.95rem;color:#323232}
.camp-selectall{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:600;color:#374151;cursor:pointer}
.camp-selcount{font-size:.8rem;color:var(--indigo);font-weight:600;min-height:1em}
.camp-newbtn{white-space:nowrap}
.camp-newbtn:disabled{opacity:.45;cursor:not-allowed}

/* ===== #13 in-chat search ===== */
.wa-search-wrap{position:relative;display:flex;align-items:center}
.wa-search{height:34px;border:1px solid var(--line);border-radius:999px;padding:0 .8rem;font-size:.85rem;width:160px;max-width:42vw}
.wa-search:focus{outline:none;border-color:var(--indigo);width:200px}
.wa-search-count{font-size:.72rem;color:#888;margin-left:.35rem;white-space:nowrap}
.wa-bubble.wa-hit{box-shadow:0 0 0 2px var(--indigo)}
@media(max-width:760px){ .wa-search{width:120px} .wa-search:focus{width:140px} }

/* ===== Inbox triage (New / Open / Resolved / All / Blocked) ===== */
.wa-unread-dot{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#25D366;color:#fff;font-size:.66rem;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-sizing:border-box}
.wa-avatar{position:relative}
.wa-snip-unread{color:#222!important;font-weight:600}
.wa-conv-tags{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center;margin-top:.15rem}
.wa-tag-new{background:#dcfce7;color:#15803d;border-radius:6px;font-size:.68rem;font-weight:700;padding:.05rem .35rem}
.wa-tag-window{background:#fef3c7;color:#92400e;border-radius:6px;font-size:.68rem;font-weight:600;padding:.05rem .35rem}
.wa-conv.new-row{background:linear-gradient(90deg,#f0fdf4, #fff 60%)}
.wa-conv.new-row strong{color:#15803d}
.wa-newgate{margin:.6rem;padding:1rem;border:1px dashed #cbd5e1;border-radius:12px;background:#f8fafc;text-align:center}
.wa-newgate-h{font-weight:700;color:#323232;margin-bottom:.2rem}
.wa-newgate .wa-open-btn{margin-top:.5rem}

/* ===== #5 Reports: clickable cards/legend + source breakdown ===== */
a.card-link{text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s}
a.card-link:hover{box-shadow:0 4px 14px rgba(0,0,0,.08);transform:translateY(-1px)}
a.card-link .card-sub{color:var(--indigo);font-size:.72rem}
.leg-link{text-decoration:none;color:inherit;cursor:pointer;border-radius:6px;padding:.1rem .25rem}
.leg-link:hover{background:#f3f4f6}
.src-list{display:flex;flex-direction:column;gap:.3rem;margin-top:.4rem}
.src-row{display:grid;grid-template-columns:130px 1fr 90px;align-items:center;gap:.6rem;text-decoration:none;color:inherit;padding:.35rem .4rem;border-radius:8px}
.src-row:hover{background:#faf7f3}
.src-name{font-weight:600;font-size:.9rem;text-transform:capitalize}
.src-barwrap{background:#eee;border-radius:6px;height:12px;overflow:hidden}
.src-bar{display:block;height:100%;background:linear-gradient(90deg,var(--indigo),#586AD0)}
.src-n{text-align:right;font-size:.85rem}
@media(max-width:600px){ .src-row{grid-template-columns:90px 1fr 70px} }

/* ===== #2 Automation page — polished sections ===== */
.auto-page .panel{border:1px solid #ececec;border-radius:14px;padding:1.25rem 1.4rem;margin-bottom:1.1rem;box-shadow:0 1px 3px rgba(0,0,0,.04);position:relative}
.auto-page .panel>h3{display:flex;align-items:center;gap:.45rem;font-size:1.05rem;margin:0 0 .25rem;padding-bottom:.55rem;border-bottom:1px solid #f0f0f0}
.auto-page .panel>h3::before{content:"";width:4px;height:18px;border-radius:3px;background:var(--indigo);display:inline-block}
.auto-page .panel>p, .auto-page .panel>.hint{margin-top:.1rem}
.auto-page .grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.85rem 1.1rem;align-items:end;margin-top:.9rem}
.auto-page .grid-form>label{display:flex;flex-direction:column;gap:.32rem;font-weight:600;font-size:.85rem;color:#3a3a3a}
.auto-page .grid-form>label .lbl-hint{font-weight:400}
.auto-page .grid-form input[type=text],.auto-page .grid-form input[type=number],.auto-page .grid-form input:not([type]),.auto-page .grid-form select,.auto-page .grid-form textarea{width:100%;box-sizing:border-box;padding:.55rem .65rem;border:1px solid #dcdcdc;border-radius:9px;font-size:.92rem;background:#fff;transition:border-color .15s,box-shadow .15s}
.auto-page .grid-form input:focus,.auto-page .grid-form select:focus,.auto-page .grid-form textarea:focus{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(45,61,170,.12);outline:none}
.auto-page .grid-form label.wide{grid-column:1/-1}
.auto-page .grid-form label.chk{flex-direction:row;align-items:center;gap:.5rem;font-weight:500;background:#faf9f7;border:1px solid #eee;border-radius:9px;padding:.55rem .7rem}
.auto-page .grid-form label.chk input{width:auto}
.auto-page .form-actions{grid-column:1/-1;margin-top:.2rem}
/* cost-by-category: tidy equal-width inline row */
.auto-page .cost-form{grid-template-columns:120px repeat(4,1fr)}
@media(max-width:680px){ .auto-page .cost-form{grid-template-columns:1fr 1fr} }
/* office-hours day toggles as pills */
.auto-page .grid-form label.chk.day{display:inline-flex;width:auto;padding:.35rem .6rem;border-radius:999px}
/* file inputs */
.auto-page input[type=file]{font-size:.85rem;padding:.4rem;border:1px dashed #d3d3d3;border-radius:9px;background:#fafafa;width:100%;box-sizing:border-box}
/* existing-rules table breathing room */
.auto-page table.tbl{margin-top:.6rem}
.auto-page .ar-test{margin-top:1rem;padding:.9rem 1rem;background:#faf9f7;border:1px solid #eee;border-radius:11px}
.auto-page .day-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.3rem}

/* ===== #3 Create-campaign — polished form ===== */
.camp-create>h3{display:flex;align-items:center;gap:.45rem;padding-bottom:.55rem;border-bottom:1px solid #f0f0f0;margin-top:0}
.camp-create>h3::before{content:"";width:4px;height:18px;border-radius:3px;background:var(--indigo);display:inline-block}
.camp-create h4{margin:1rem 0 .35rem;font-size:.95rem;color:var(--indigo);display:flex;align-items:center;gap:.4rem}
.camp-create .grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.85rem 1.1rem;align-items:end}
.camp-create .grid-form>label{display:flex;flex-direction:column;gap:.32rem;font-weight:600;font-size:.85rem;color:#3a3a3a}
.camp-create .grid-form>label.wide{grid-column:1/-1}
.camp-create .grid-form .lbl-hint{font-weight:400}
.camp-create .grid-form input[type=text],.camp-create .grid-form input:not([type]),.camp-create .grid-form input[name],.camp-create .grid-form select,.camp-create .grid-form textarea,.camp-create .grid-form input[type=datetime-local]{width:100%;box-sizing:border-box;padding:.55rem .65rem;border:1px solid #dcdcdc;border-radius:9px;font-size:.92rem;background:#fff;transition:border-color .15s,box-shadow .15s}
.camp-create .grid-form input:focus,.camp-create .grid-form select:focus,.camp-create .grid-form textarea:focus{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(45,61,170,.12);outline:none}
.camp-create .grid-form label.chk{flex-direction:row;align-items:center;gap:.5rem;font-weight:500;background:#faf9f7;border:1px solid #eee;border-radius:9px;padding:.55rem .7rem}
.camp-create .grid-form label.chk input{width:auto}
.camp-create input[type=file]{font-size:.85rem;padding:.5rem;border:1px dashed #d3d3d3;border-radius:9px;background:#fafafa;width:100%;box-sizing:border-box}
.camp-create .form-actions{margin-top:.9rem;align-items:center}
.camp-create .hint{background:#f7fbff;border:1px solid #e3f0fb;border-radius:9px;padding:.55rem .7rem;margin:.7rem 0}

/* --- v73: contacts unread badge, company chip, timeline filter --- */
.unread-badge{display:inline-block;min-width:18px;height:18px;line-height:18px;padding:0 5px;border-radius:9px;background:var(--indigo);color:#fff;font-size:.7rem;font-weight:700;text-align:center;vertical-align:middle;margin-left:.25rem}
.aka-chip.on{background:#fff3ea;border-color:#ffd2ac}
.filters .flt-date{display:inline-flex;align-items:center;gap:.25rem;font-size:.82rem;color:#666}
.filters .flt-date input[type=date]{padding:.35rem .4rem}
.tl-filter .grid-form{gap:.5rem}
.mini-btn{display:inline-block;border:1px solid #e2e2e2;background:#fff;border-radius:7px;padding:.15rem .4rem;cursor:pointer;text-decoration:none;color:#333;font-size:.8rem;vertical-align:middle}
.mini-btn:hover{background:#f6f6f6}

/* --- v74: WhatsApp automation builder + flow --- */
.auto-stage{border:1px solid #ececec;border-radius:12px;padding:.8rem .9rem;margin-bottom:.7rem;background:#fcfcfc;position:relative}
.auto-stage-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem}
.auto-stage-no{font-weight:700;color:var(--indigo);font-size:.9rem;letter-spacing:.02em}
.auto-stage-del{color:#b00;border-color:#f0caca}
.auto-stage .st-vars label{font-size:.82rem}
.auto-flow{list-style:none;margin:.4rem 0 0;padding:0;counter-reset:af}
.auto-flow-step{position:relative;padding:.6rem .8rem .6rem 2.2rem;border-left:2px solid #ffd2ac;margin-left:.6rem}
.auto-flow-step:before{counter-increment:af;content:counter(af);position:absolute;left:-0.85rem;top:.55rem;width:1.5rem;height:1.5rem;line-height:1.5rem;text-align:center;border-radius:50%;background:var(--indigo);color:#fff;font-size:.75rem;font-weight:700}
.auto-flow-when{display:inline-block;background:#fff3ea;border:1px solid #C7CEF2;color:#9a4b08;border-radius:7px;padding:.05rem .4rem;font-size:.72rem;margin-right:.4rem}

/* =====================================================================
   #3 MOBILE-APP SHELL — off-canvas drawer + app polish
   Desktop (>=861px) is unchanged: hamburger hidden, sidebar static.
   ===================================================================== */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;
  border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;padding:0;flex:none}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--charcoal);margin:0 auto;border-radius:2px;transition:transform .25s,opacity .2s}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(20,20,20,.45);z-index:38;opacity:0;transition:opacity .25s}
.nav-mobile-extra{display:none}

@media(max-width:860px){
  /* hamburger + single-row top bar */
  .nav-toggle{display:flex}
  .topbar{flex-wrap:nowrap!important;height:auto;padding:.5rem .7rem;gap:.6rem;position:sticky;top:0;z-index:40}
  .topbar .brand{margin-right:0;font-size:1rem}
  .topbar-right{margin-left:auto;gap:.5rem;flex-wrap:nowrap}
  .topbar-right .btn-ghost{display:none}          /* these live in the drawer on mobile */
  .topclock{display:none}

  /* shell + off-canvas drawer (override the old horizontal strip) */
  .shell{flex-direction:column;min-height:0;position:relative}
  .sidenav{position:fixed!important;top:0;left:0;bottom:0;width:80%;max-width:300px;z-index:39;
    flex-direction:column!important;flex-wrap:nowrap!important;overflow-y:auto!important;overflow-x:hidden!important;
    background:#fff;border-right:1px solid var(--line);border-bottom:none;padding:1rem .8rem 2rem;max-height:none!important;
    transform:translateX(-100%);transition:transform .28s ease;box-shadow:6px 0 24px rgba(0,0,0,.14)}
  .sidenav a{font-size:1rem!important;white-space:normal;padding:.75rem .9rem;margin-bottom:.15rem;border-radius:10px}
  .sidenav a span.nav-badge{display:inline}
  .nav-sep{display:block;margin:.8rem 0 .3rem;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#9aa0a6;padding:0 .3rem}
  .nav-soon{display:block}
  .nav-mobile-extra{display:block;margin-top:.4rem;border-top:1px solid var(--line);padding-top:.4rem}

  body.nav-open .sidenav{transform:translateX(0)}
  body.nav-open .nav-overlay{display:block;opacity:1}
  body.nav-open{overflow:hidden}                  /* lock background scroll while drawer open */

  .content{padding:1rem .85rem}

  /* hamburger -> X when open */
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* app polish: comfortable tap targets, no iOS zoom, tidy tiles */
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .btn,.btn-ghost,.btn.small,.btn-ghost.small{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  input,select,textarea{font-size:16px}        /* iOS won't zoom on focus at >=16px */
  .filters input,.filters select{min-height:44px}
  .page-head{flex-direction:column;align-items:flex-start}
}

@media(max-width:430px){
  .kpi-grid{grid-template-columns:1fr 1fr}
  .sidenav{width:86%}
}

/* ===== v77: mobile-app polish (refines the existing ≤860 drawer pass) ===== */
@media(max-width:860px){
  html,body{overflow-x:hidden;max-width:100%}
  .page-head h1{font-size:1.25rem}
  .page-head{gap:.55rem}
  /* action buttons under a page heading: full, tappable row */
  .page-head > div{display:flex;flex-wrap:wrap;gap:.4rem;width:100%}
  .page-head > div > .btn,.page-head > div > .btn-ghost,
  .page-head > .btn,.page-head > .btn-ghost{flex:1 1 auto;justify-content:center;text-align:center}
  .panel{padding:.9rem .85rem;border-radius:11px}

  /* filter bars: each control its own comfortable, tappable row */
  .filters{gap:.45rem}
  .filters input,.filters select{flex:1 1 100%;min-width:0;width:100%;min-height:44px}
  .filters .flt-date{flex:1 1 100%}
  .filters .flt-date input[type=date]{flex:1;min-height:40px}

  /* forms: single clean column */
  .grid-form{grid-template-columns:1fr;gap:.65rem}
  .form-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:stretch}
  .form-actions > .btn,.form-actions > .btn-ghost{flex:1 1 auto;justify-content:center}

  /* wide tables: scroll inside a clear rounded frame, keep action buttons tidy */
  .tbl-wrap{border:1px solid var(--line);border-radius:11px;overflow-x:auto}
  .tbl-wrap .tbl{border:0;border-radius:0}
  .tbl td .btn-ghost.small,.tbl td .btn.small{margin:.12rem .1rem}

  /* campaign / report tab strips scroll horizontally */
  .wa-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .wa-tabs button.wa-tab{white-space:nowrap;flex:none}

  /* dropdowns + popovers fit the screen */
  .notif-pop{position:fixed!important;left:.6rem;right:.6rem;top:56px;width:auto!important;z-index:60}
}
@media(max-width:560px){
  .topbar .brand small{display:none}
  .kpi-grid{gap:.55rem}
  .kpi{padding:.7rem .6rem}
  .kpi .kpi-n{font-size:1.2rem}
}

/* ===== Quotation module ===== */
.qitems input,.qitems select,.qitems textarea{width:100%;box-sizing:border-box;padding:.4rem;border:1px solid #ddd;border-radius:6px;font:inherit}
.qitems textarea.it-desc{margin-top:.3rem;resize:vertical;min-height:1.6rem;color:#555}
.qitems td{vertical-align:top}
.qitems .it-total{font-weight:600;white-space:nowrap;padding-top:.5rem}
.qtotals{display:flex;flex-direction:column;gap:.1rem}
.qtotals > div{display:flex;justify-content:space-between;padding:.25rem 0;border-bottom:1px dashed #eee}
.qtotals .qgrand{border-bottom:none;border-top:2px solid #323232;margin-top:.35rem;padding-top:.55rem;font-size:1.15rem;font-weight:700;color:var(--indigo)}
.qtotals .qwords{border:none;color:#888;font-size:.82rem;display:block}
.qtotals-wrap{display:grid;grid-template-columns:1fr 340px;gap:1.2rem;align-items:start}
@media (max-width:860px){ .qtotals-wrap{grid-template-columns:1fr} }
.cust-results{border:1px solid #e3e3e3;border-radius:8px;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.08);max-height:260px;overflow:auto;margin-bottom:.6rem}
.cust-hit{padding:.55rem .7rem;cursor:pointer;border-bottom:1px solid #f1f1f1}
.cust-hit:hover{background:#fff6ef}

/* ===== Contact profile: Quotations & Invoices summary ===== */
.qc-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin:.2rem 0 .8rem}
.qc-stats > div{background:#faf9f7;border:1px solid #eee;border-radius:10px;padding:.5rem .6rem;text-align:center}
.qc-stats b{display:block;font-size:1rem;color:#323232}
.qc-stats span{font-size:.72rem;color:#888}
.qc-stats .qc-due{background:#fff3f3;border-color:#f3caca}
.qc-stats .qc-due b{color:#b00}
@media (max-width:760px){ .qc-stats{grid-template-columns:repeat(2,1fr)} }

/* ===== AI settings ===== */
.ai-prov-row{display:flex;gap:1rem;flex-wrap:wrap;margin:.3rem 0 1rem}
.ai-prov{display:flex;align-items:center;gap:.4rem;padding:.5rem .8rem;border:1px solid #e5e5e5;border-radius:10px;cursor:pointer}
.ai-prov:has(input:checked){border-color:var(--indigo);background:#fff7f1}
.ai-card{border:1px solid #eee;border-radius:12px;padding:.6rem .8rem;margin:.6rem 0;background:#fafafa}

/* ===== Email automation builder ===== */
.ea-step{border:1px solid #e8e8e8;border-radius:10px;padding:.6rem;margin:.5rem 0;background:#fcfcfc}
.ea-step-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.ea-step-head .ea-step-n{color:var(--indigo)}
.ea-delay{font-size:.82rem;color:#777;display:flex;align-items:center;gap:.3rem}
.ea-del{margin-left:auto}
.ea-subj{width:100%;margin-bottom:.4rem;font-weight:600}
.ea-body{width:100%}

/* ===== Outreach Inbox ===== */
.om-body{white-space:pre-wrap;background:#fafafa;border:1px solid #eee;border-radius:8px;padding:.6rem;font-size:.9rem;max-height:240px;overflow:auto}
.om-suggest{background:#fff7f1;border:1px solid #f3d9c5;border-radius:8px;padding:.5rem .6rem;margin:.5rem 0;font-size:.9rem}
.om-reply{margin-top:.5rem}
.om-reply textarea{width:100%}

/* ===== Email automation builder v87 extras ===== */
.ea-cond{font-size:.82rem;color:#777;display:flex;align-items:center;gap:.3rem}
.ea-actions{display:flex;align-items:center;gap:.4rem;margin-top:.4rem;flex-wrap:wrap}
.ea-ab{display:none}
.ea-ab.open{display:block}
.ea-ab .ea-subjb{width:100%;margin:.3rem 0;font-weight:600}
.ea-ab .ea-bodyb{width:100%}
.ea-lint{min-height:1em;margin-top:.2rem}
.ea-preview{background:#f7f9ff;border:1px solid #dde6ff;border-radius:8px;padding:.6rem;margin-top:.4rem;font-size:.9rem}

/* ===== Email Marketing hub + sub-tabs ===== */
.subtabs{display:flex;gap:.3rem;flex-wrap:wrap;margin:0 0 1rem;border-bottom:1px solid #eee;padding-bottom:.5rem}
.subtabs a{padding:.4rem .8rem;border-radius:8px;font-size:.9rem;color:#555;text-decoration:none}
.subtabs a:hover{background:#f5f5f5}
.subtabs a.on{background:var(--indigo);color:#fff}
.em-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.em-card{display:block;background:#fff;border:1px solid #eee;border-radius:14px;padding:1.1rem;text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s}
.em-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.08);transform:translateY(-2px)}
.em-card .em-ic{font-size:1.6rem}
.em-card h3{margin:.4rem 0 .2rem}
.em-card p{color:#777;font-size:.86rem;margin:0 0 .6rem}

/* ===== Polished document forms (quotation / invoice / quotation settings) ===== */
.qdoc .panel{border-radius:14px}
.qdoc .panel h3{font-size:.98rem;color:var(--charcoal);border-bottom:1px solid #f1efed;padding-bottom:.55rem;margin:0 0 .9rem;display:flex;align-items:center;gap:.4rem}
.qdoc .grid-form{gap:1.05rem .95rem;align-items:end}
.qdoc label{font-size:.8rem;font-weight:600;color:#5a5a5a;letter-spacing:.01em}
.qdoc .grid-form label{font-size:.8rem}
.qdoc input[type=text],.qdoc input[type=email],.qdoc input[type=number],.qdoc input[type=date],.qdoc input:not([type]),.qdoc select,.qdoc textarea{
  width:100%;box-sizing:border-box;padding:.62rem .74rem;border:1.5px solid #e6e4e2;border-radius:10px;font-family:inherit;font-size:.92rem;color:var(--charcoal);background:#fff;transition:border-color .15s,box-shadow .15s;margin-top:.28rem;-webkit-text-fill-color:currentColor}
.qdoc textarea{line-height:1.45;min-height:2.4rem}
.qdoc input:hover,.qdoc select:hover,.qdoc textarea:hover{border-color:#cdcac7}
.qdoc input:focus,.qdoc select:focus,.qdoc textarea:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(45,61,170,.16)}
.qdoc input::placeholder,.qdoc textarea::placeholder{color:#b6b2af}
.qdoc select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%232D3DAA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right .72rem center;padding-right:2rem}
.qdoc input[type=checkbox],.qdoc input[type=radio]{width:1.1rem;height:1.1rem;margin-top:0;accent-color:var(--indigo);cursor:pointer;flex:none}
.qdoc input[type=file]{padding:.5rem;background:#faf9f8;border:1.5px dashed #ddd9d6;cursor:pointer}
.qdoc input[type=color]{padding:.2rem;height:42px;cursor:pointer}
/* joined control (amount + type) used for discounts & charges */
.qdoc .qjoin{display:flex;margin-top:.28rem;border:1.5px solid #e6e4e2;border-radius:10px;overflow:hidden;background:#fff;transition:border-color .15s,box-shadow .15s}
.qdoc .qjoin:hover{border-color:#cdcac7}
.qdoc .qjoin:focus-within{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(45,61,170,.16)}
.qdoc .qjoin input,.qdoc .qjoin select{margin:0;border:none;border-radius:0;box-shadow:none!important;background-image:none}
.qdoc .qjoin>input{flex:1;min-width:0}
.qdoc .qjoin>select{width:auto;flex:none;border-left:1.5px solid #efe9e4;background:#faf6f2;font-weight:700;color:var(--indigo);padding:.62rem 1.9rem .62rem .7rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%232D3DAA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right .6rem center}
.qdoc .gst-join{display:flex;gap:.4rem;margin-top:.28rem;align-items:stretch}
.qdoc .gst-join input{margin-top:0;flex:1}
.qdoc .gst-join .btn-ghost{white-space:nowrap;border-radius:10px;border:1.5px solid #e6e4e2;background:#faf6f2;color:var(--indigo);font-weight:700;padding:0 .9rem}
.qdoc .lbl-hint,.qdoc .muted.small,.qdoc .hint{font-weight:400;color:#9a9591;font-size:.74rem}
.qdoc #discHint{color:var(--indigo);font-weight:600;font-size:.76rem}
/* items table */
.qdoc table.qitems{border-collapse:separate;border-spacing:0}
.qdoc table.qitems thead th{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:#9a9591;font-weight:700;padding:.4rem .45rem;border-bottom:1px solid #f1efed}
.qdoc table.qitems td{vertical-align:top;padding:.55rem .4rem;border-bottom:1px solid #f6f4f2}
.qdoc .qitems input,.qdoc .qitems select,.qdoc .qitems textarea{margin-top:0;padding:.46rem .56rem;border-radius:8px;font-size:.86rem}
.qdoc .qitems .it-name{font-weight:600}
.qdoc .qitems .it-total{font-weight:700;color:var(--charcoal)}
.qdoc .it-xf-row{gap:.4rem}
.qdoc .it-xf-row label{font-size:.68rem;color:#a8a39f;font-weight:600}
.qdoc .it-xf-row input{padding:.34rem .46rem;border-radius:7px}
.qdoc .aka-btn.it-del{border:1px solid #eee;border-radius:8px;color:#c0392b;background:#fff;width:30px;height:30px}
.qdoc .aka-btn.it-del:hover{background:#fdecea}
/* totals box */
.qdoc .qtotals-wrap{background:linear-gradient(180deg,#fffdfb,#faf7f4)}
.qdoc .qtotals-wrap .sumline,.qdoc .qt-line{display:flex;justify-content:space-between;padding:.25rem 0}

/* ===== Quotation Settings — polished cards ===== */
.qsettings{max-width:880px}
.qsettings .panel{padding:0;overflow:hidden;border:1px solid #ececec;box-shadow:0 1px 3px rgba(50,50,50,.05);margin-bottom:1.1rem}
.qsettings .panel h3{margin:0;padding:.85rem 1.1rem;background:linear-gradient(180deg,#fffaf6,#fff5ee);border-bottom:1px solid #f1e7dd;font-size:.98rem;color:var(--charcoal);display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.qsettings .panel .grid-form{padding:1.15rem 1.1rem 1.25rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));align-items:end}
.qsettings .qs-ic{display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;background:#fff;border:1px solid #f0e3d7;border-radius:9px;font-size:1rem;flex:none}
.qsettings .qs-sub{font-weight:400;color:#a09a95;font-size:.76rem;letter-spacing:0}
.qsettings .panel h3 .qs-sub{margin-left:auto}
.qsettings .form-actions{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 35%);padding:.9rem 0;margin-top:-.3rem;z-index:2}
.qsettings .form-actions .btn{padding:.7rem 1.6rem;font-size:.95rem;box-shadow:0 2px 8px rgba(45,61,170,.25)}
@media(max-width:640px){ .qsettings .panel h3 .qs-sub{margin-left:0;flex-basis:100%} }

/* =====================================================================
   v87: MOBILE BOTTOM TAB BAR (native-app feel) + nav consolidation
   ===================================================================== */
.bottombar{display:none}
@media(max-width:860px){
  .bottombar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:46;
    background:#fff;border-top:1px solid var(--line);
    padding:.25rem .2rem calc(.25rem + env(safe-area-inset-bottom,0px));
    box-shadow:0 -2px 12px rgba(0,0,0,.07)}
  .bottombar .bb{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;padding:.3rem .1rem;color:#8a93a0;font-weight:600;text-decoration:none;
    background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .bottombar .bb-ic{position:relative;line-height:0}
  .bottombar .bb-ic svg{width:23px;height:23px;display:block}
  .bottombar .bb-lbl{font-size:.64rem;letter-spacing:.01em}
  .bottombar .bb.on{color:var(--indigo)}
  .bottombar .bb-dot{position:absolute;top:-2px;right:-4px;width:8px;height:8px;border-radius:50%;
    background:var(--indigo);border:1.5px solid #fff}
  /* keep page content clear of the fixed bar */
  .content{padding-bottom:5.2rem!important}
  body.nav-open .bottombar{display:none}

  /* consolidate: the drawer (≤860) is the single mobile nav — neutralise the
     older horizontal-strip rules so there is no flicker/overlap */
  .shell>.sidenav{border-bottom:none}
}
/* never let the bottom bar show on desktop even if a stray width matches */
@media(min-width:861px){ .bottombar{display:none!important} }

/* v87: clickable dashboard rows/bars */
.hrow-link{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:.6rem;text-decoration:none;color:inherit;cursor:pointer;border-radius:7px;padding:.18rem .3rem;margin:0 -.3rem;transition:background .12s}
.hrow-link:hover{background:#f6f4f1}
.hrow-link:hover .hlbl{color:var(--indigo)}
a.vbar-wrap{cursor:pointer;text-decoration:none}
.vchart a.vbar-wrap:hover .vbar{filter:brightness(.9)}

/* ============================================================================
   CHECKBOX / TOGGLE LABELS INSIDE A GRID-FORM  (investor-grade layout fix)
   A .grid-form lays its labels out as columns (control under a caption), which
   is right for text inputs but makes a *checkbox or toggle* float above and
   overlap its own wrapping text (seen on the New-automation “Advanced” section
   and the RCS “Fall back to SMS” toggle). This catches EVERY such label —
   .chk, .rcs-toggle and every bespoke class, present and future — via :has(),
   which this app already relies on elsewhere. ---------------------------------*/
.grid-form>label:has(>input[type=checkbox]){
  flex-direction:row;align-items:flex-start;justify-content:flex-start;
  gap:.55rem;grid-column:1/-1;font-weight:500;margin:0;line-height:1.45;
}
/* the same column-stacking happens in other form layouts — cover them too so a
   checkbox never floats above its caption anywhere in the app */
.field-edit label:has(>input[type=checkbox]),
.pay-grid label:has(>input[type=checkbox]),
.fc-grid label:has(>input[type=checkbox]),
.np label:has(>input[type=checkbox]),
.gf2 label:has(>input[type=checkbox]),
.mdl label:has(>input[type=checkbox]),
.sec-section .grid-form label:has(>input[type=checkbox]){
  flex-direction:row;align-items:flex-start;justify-content:flex-start;
  gap:.55rem;font-weight:500;line-height:1.45;
}
/* the box/knob keeps its natural size and pins to the first line of text */
.grid-form>label.chk>input[type=checkbox]{width:auto;flex:0 0 auto;margin:.18rem 0 0}
/* real toggle switches read better vertically centred against their label */
.grid-form>label.rcs-toggle,.grid-form>label.switch,.grid-form>label.pl-switch{align-items:center}

/* ===== Crimbox V2 — plan gating (locked nav + upgrade page) ===== */
.sidenav a.nav-locked{opacity:.85;cursor:pointer}
.sidenav a.nav-locked .nav-ic{opacity:.4}
.sidenav a.nav-locked .nav-lbl{color:#98a1b0;font-weight:600}
.sidenav a.nav-locked .nav-lock{margin-left:auto;display:inline-flex;align-items:center;color:#b6bcc6}
.sidenav a.nav-locked:hover{background:var(--indigo-50)}
.sidenav a.nav-locked:hover .nav-lbl,.sidenav a.nav-locked:hover .nav-lock{color:var(--indigo-700)}
.sidenav a.nav-locked:hover .nav-ic{opacity:.7}

/* Upgrade / plans comparison */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1.25rem 0}
.plan-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.1rem;display:flex;flex-direction:column}
.plan-card.current{border-color:var(--indigo);box-shadow:0 0 0 2px var(--indigo-50)}
.plan-card .plan-name{font-size:1.05rem;font-weight:800;color:var(--charcoal);display:flex;align-items:center;gap:.5rem}
.plan-card .plan-badge{font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--indigo);color:#fff;padding:.12rem .5rem;border-radius:999px}
.plan-card .plan-price{margin:.5rem 0 .2rem;font-size:1.5rem;font-weight:800;color:var(--charcoal)}
.plan-card .plan-price small{font-size:.72rem;font-weight:600;color:var(--muted)}
.plan-card .plan-sub{color:var(--muted);font-size:.8rem;margin-bottom:.6rem}
.plan-feats{list-style:none;padding:0;margin:.5rem 0 1rem;display:flex;flex-direction:column;gap:.4rem}
.plan-feats li{display:flex;align-items:flex-start;gap:.5rem;font-size:.88rem;color:#374151;line-height:1.35}
.plan-feats li.no{color:#9aa1ab}
.plan-feats .fi{flex:0 0 16px;margin-top:.1rem;display:inline-flex}
.plan-feats li .fi.yes{color:var(--success)}
.plan-feats li .fi.no{color:#c2c7d0}
.plan-card .plan-cta{margin-top:auto}
.plan-card .plan-cta .btn,.plan-card .plan-cta .btn-ghost{width:100%;text-align:center;display:block}
.plan-current-note{display:inline-block;width:100%;text-align:center;padding:.55rem .9rem;border-radius:10px;background:var(--indigo-50);color:var(--indigo-700);font-weight:700;font-size:.85rem}