/* PWM Reactivation Engine styles */

  :root{
    --purple:#7c4fef; --purple-d:#6633cc; --cyan:#00cee2; --magenta:#ff3675; --amber:#ffbb06;
    --wa:#25a566; --wa-bg:#e8f8ef; --wa-line:#bce8d0;
    --ink:#211c1c; --ink2:#4a4444; --muted:#6e6866; --line:#eceaea; --bg:#f6f5f4; --card:#fff;
    --side:#1e1919; --side2:#2a2424; --sideText:#c9c2c0; --sideMuted:#a89f9c; --sideLbl:#948b88;
    --target:#b25c00; --target-bg:#fff6e6; --target-line:#f4d79a;
    --support:#0f8a4f; --support-bg:#e9faf0; --support-line:#b7e6ca;
    --strong:#0f8a4f; --ok:#b57e00; --needs:#c2410c;
    --shadow:0 1px 2px rgba(20,15,15,.05),0 8px 26px rgba(20,15,15,.06);
    --font:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    --head:"Cal Sans","Inter Tight",sans-serif;
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5;}
  h1,h2,h3,h4,.head{font-family:var(--head);font-weight:400;letter-spacing:-.01em;line-height:1.18;text-wrap:balance;}
  /* large headings get tighter tracking + leading so the display face reads balanced */
  h1,h2.sec,.modalt,.drawert,.chartblock .charttot,.kpi .v,#login h1{letter-spacing:-.022em;line-height:1.12}
  a{color:inherit}
  .ic{width:1em;height:1em;display:inline-block;vertical-align:-.14em;flex:none}
  /* ---------- interaction states: keyboard focus ring (shown for keyboard users only) ---------- */
  :focus{outline:none}
  :focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:8px}
  /* on the dark sidebar / switcher a light ring reads more clearly than purple */
  .nav a:focus-visible,.tbtn:focus-visible,.tmenu .ti:focus-visible{outline-color:#e6d9ff}
  .btn:focus-visible{outline-offset:3px}
  /* ---------- login ---------- */
  #login,#activate{position:fixed;inset:0;z-index:100;background:linear-gradient(135deg,#1e1919,#2a2424);display:flex;align-items:center;justify-content:center;}
  #login .box,#activate .box{background:#fff;padding:34px 32px;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.4);width:350px;text-align:center;}
  #login img,#activate img{height:46px;margin-bottom:14px}
  #login h1,#activate h1{font-size:21px;margin:0 0 3px}#login p,#activate p{color:var(--muted);font-size:13px;margin:0 0 18px}
  #login input,#activate input{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:14px;margin-bottom:12px;font-family:inherit}
  #login button,#activate button{width:100%;padding:12px;border:0;border-radius:10px;background:var(--purple);color:#fff;font-weight:700;font-size:14px;cursor:pointer}
  #login .err,#activate .err{color:var(--needs);font-size:12.5px;margin-bottom:10px;min-height:16px}
  #login .hint,#activate .hint{font-size:11.5px;color:var(--muted);margin-top:12px}
  /* ---------- layout ---------- */
  .app{display:flex;min-height:100vh}
  .sidebar{width:248px;background:var(--side);color:var(--sideText);position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;padding:18px 14px;z-index:30;}
  .brand{display:flex;align-items:center;gap:11px;padding:2px 8px 15px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:12px;}
  .brand img{height:34px;width:auto}
  .brand .bt{line-height:1.15}
  .brand .bt .n{color:#fff;font-family:var(--head);font-size:15px;}
  .brand .bt .s{color:var(--purple);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;}
  /* tenant switcher */
  .tenant{margin:0 2px 14px;position:relative}
  .tenant .tlbl{font-size:9.5px;text-transform:uppercase;letter-spacing:1px;color:var(--sideLbl);padding:2px 8px 6px;}
  .tenant .tbtn{display:flex;align-items:center;gap:9px;width:100%;background:var(--side2);border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:9px 11px;cursor:pointer;color:#fff;text-align:left}
  .tenant .tbtn:hover{border-color:rgba(255,255,255,.2)}
  .tenant .tav{width:26px;height:26px;border-radius:7px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#fff;font-family:var(--head)}
  .tenant .tinfo{min-width:0;flex:1;display:flex;flex-direction:column}
  .tenant .tinfo .tn{display:block;font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .tenant .tinfo .tt{display:block;font-size:10.5px;color:var(--sideMuted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .tenant .tcar{color:var(--sideMuted);font-size:11px;flex:none}
  .tmenu{position:absolute;left:0;right:0;top:100%;margin-top:6px;background:#241f1f;border:1px solid rgba(255,255,255,.12);border-radius:11px;box-shadow:0 18px 44px rgba(0,0,0,.5);padding:6px;z-index:40;display:none}
  .tmenu.open{display:block}
  .tmenu .ti{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;cursor:pointer}
  .tmenu .ti:hover{background:var(--side2)}
  .tmenu .ti .tn{font-size:12.5px;color:#fff;font-weight:600}
  .tmenu .ti .tt{font-size:10px;color:var(--sideMuted)}
  .tmenu .sepr{height:1px;background:rgba(255,255,255,.08);margin:5px 4px}
  .navlbl{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--sideLbl);padding:8px 10px 6px;}
  .nav{display:flex;flex-direction:column;gap:3px}
  .nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:var(--sideText);text-decoration:none;font-size:13.5px;font-weight:600;cursor:pointer;transition:.14s;border:1px solid transparent;position:relative}
  .nav a .dot{width:9px;height:9px;border-radius:3px;flex:none;background:#5a5250}
  .nav a[data-m="dash"] .dot{background:var(--purple)}
  .nav a[data-m="campaigns"] .dot{background:var(--cyan)}
  .nav a[data-m="inbox"] .dot{background:var(--wa)}
  .nav a[data-m="leads"] .dot{background:var(--amber)}
  .nav a[data-m="connections"] .dot{background:var(--magenta)}
  .nav a:hover{background:var(--side2);color:#fff}
  .nav a.active{background:var(--side2);color:#fff;border-color:rgba(255,255,255,.10)}
  .nav a.active[data-m="dash"]{box-shadow:inset 3px 0 0 var(--purple)}
  .nav a.active[data-m="campaigns"]{box-shadow:inset 3px 0 0 var(--cyan)}
  .nav a.active[data-m="inbox"]{box-shadow:inset 3px 0 0 var(--wa)}
  .nav a.active[data-m="leads"]{box-shadow:inset 3px 0 0 var(--amber)}
  .nav a.active[data-m="connections"]{box-shadow:inset 3px 0 0 var(--magenta)}
  .nav a .badge{margin-left:auto;background:var(--magenta);color:#fff;font-size:10.5px;font-weight:800;border-radius:999px;min-width:18px;height:18px;padding:0 5px;display:flex;align-items:center;justify-content:center}
  .sidefoot{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding-top:10px;}
  .sidefoot .st{font-size:11px;color:var(--sideLbl);padding:6px 11px 2px;}
  .main{margin-left:248px;flex:1;min-width:0;padding:24px 32px 70px;}
  /* mobile top app bar + off-canvas nav scrim (hidden on desktop) */
  .mtop{display:none}
  .navscrim{display:none}
  @media(max-width:900px){
    /* fixed slim app bar with the hamburger + brand */
    .mtop{display:flex;align-items:center;gap:12px;position:fixed;top:0;left:0;right:0;height:56px;padding:0 12px;padding-top:env(safe-area-inset-top);background:var(--side);color:#fff;z-index:70}
    .mtop .burger{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:#fff;cursor:pointer;border-radius:9px}
    .mtop .burger:hover{background:var(--side2)}
    .mtop .mbrand{font-family:var(--head);display:flex;flex-direction:column;justify-content:center;line-height:1.15}
    .mtop .mbrand .n{color:var(--purple);font-size:10px;text-transform:uppercase;letter-spacing:1px}
    .mtop .mbrand .s{color:#fff;font-size:15px;font-weight:700}
    /* sidebar slides in from the left */
    .sidebar{transform:translateX(-100%);transition:transform .22s ease;width:272px;z-index:80;box-shadow:12px 0 40px rgba(0,0,0,.35)}
    .app.navopen .sidebar{transform:translateX(0)}
    .navscrim{position:fixed;inset:0;background:rgba(15,12,12,.5);z-index:75}
    .app.navopen .navscrim{display:block}
    .main{margin-left:0;padding:70px 16px calc(40px + env(safe-area-inset-bottom))}
    /* larger touch targets on mobile (>=44px) */
    .btn{min-height:44px}
    .nav a{min-height:46px}
    .cfchip,.tab,.rmi{min-height:40px;display:inline-flex;align-items:center}
    .tab{align-items:stretch}
    .bell{width:44px;height:44px}
  }
  @media(prefers-reduced-motion: reduce){ .sidebar{transition:none} }
  /* ---------- topbar ---------- */
  .topbar{display:flex;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}
  .topbar .crumb{font-size:12.5px;color:var(--muted)}
  .topbar .crumb b{color:var(--ink2);font-weight:700}
  .demoflag{margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--purple);background:#f1eefb;border:1px solid #d8c6f7;padding:4px 10px;border-radius:999px}
  /* ---------- shared ---------- */
  h2.sec{font-size:24px;margin:0 0 3px;color:var(--ink)}
  .lead{color:var(--ink2);font-size:14px;margin:0 0 20px;max-width:860px}
  .modtag{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:4px 10px;border-radius:999px;color:#fff;display:inline-block;margin-bottom:8px}
  .mt-dash{background:var(--purple)}.mt-campaigns{background:var(--cyan);color:#06414a}.mt-inbox{background:var(--wa)}.mt-leads{background:var(--amber);color:#5a4300}.mt-connections{background:var(--magenta)}.mt-escalations{background:var(--needs)}
  .subhd{font-size:14px;font-weight:750;margin:18px 0 8px;display:flex;align-items:center;gap:8px}
  .subhd .cnt{font-size:11.5px;font-weight:700;color:var(--muted)}
  .card{background:var(--card);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:20px 22px;margin-bottom:18px}
  .card h3{margin:0 0 12px;font-size:16px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}@media(max-width:900px){.grid2{grid-template-columns:1fr}}
  .btn{border:0;border-radius:9px;background:var(--purple);color:#fff;font-weight:700;font-size:14px;padding:11px 18px;cursor:pointer;font-family:inherit;transition:filter .12s ease, transform .07s ease, box-shadow .12s ease}
  .btn:hover{filter:brightness(1.05)}
  .btn:active{transform:translateY(1px);filter:brightness(.94)}
  .btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none;transform:none}
  .btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
  .btn.ghost:hover{background:#faf9f8;border-color:#dcd8d8}
  /* pressed feedback for the custom (non-button) controls */
  .cfchip,.tab,.rmi,.contactcard,.rowdots,.bell,.cfchip,.nav a,.stp{transition:background .12s ease, color .12s ease, border-color .12s ease, transform .07s ease}
  .cfchip:active,.rmi:active,.contactcard:active,.rowdots:active,.bell:active{transform:translateY(1px)}
  /* real disabled treatment for form controls */
  .inp:disabled,select.inp:disabled{background:#f0eeed;color:var(--muted);cursor:not-allowed;-webkit-text-fill-color:var(--muted)}
  .btn.cyan{background:var(--cyan);color:#06414a}.btn.mag{background:var(--magenta)}.btn.green{background:var(--wa)}
  .btn.danger{background:#fff;color:var(--needs);border:1px solid #f0c4b2}
  .btn.sm{padding:8px 13px;font-size:12.5px}
  .btn.xs{padding:6px 10px;font-size:11.5px;border-radius:8px}
  /* KPIs */
  .kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}@media(max-width:1100px){.kpis{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.kpis{grid-template-columns:repeat(2,1fr)}}
  .kpi{background:#fbfbfa;border:1px solid var(--line);border-radius:12px;padding:13px 14px}
  .kpi .v{font-size:25px;font-weight:750;font-family:var(--head)}
  .kpi .l{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px;margin-top:2px}
  .kpi .d{font-size:11px;font-weight:700;margin-top:4px}
  .kpi .d.up{color:var(--support)}.kpi .d.flat{color:var(--muted)}
  /* funnel */
  .funnel{display:grid;gap:8px}
  .fstep{display:flex;align-items:center;gap:12px}
  .fstep .fl{width:150px;font-size:12.5px;color:var(--ink2);font-weight:600;flex:none}
  .fbar{flex:1;height:26px;border-radius:7px;background:#f2f0ef;overflow:hidden;position:relative}
  .fbar .ff{height:100%;border-radius:7px;display:flex;align-items:center;padding-left:10px;color:#fff;font-size:12px;font-weight:700}
  .fv{width:52px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;flex:none}
  /* tables */
  table{width:100%;border-collapse:collapse;font-size:13.5px}
  /* on small screens let wide data tables scroll sideways inside their card instead of squashing */
  @media(max-width:760px){
    .card:has(table){overflow-x:auto;-webkit-overflow-scrolling:touch}
    .card table:not(.mini){min-width:560px}
  }
  thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;padding:9px 10px;border-bottom:2px solid var(--line);white-space:nowrap}
  tbody td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
  tbody tr.krow{cursor:pointer}tbody tr.krow:hover{background:#faf9f8}
  .kw{font-weight:650}.num{font-variant-numeric:tabular-nums;color:var(--ink2)}
  /* numeric COUNT columns: right-align so digits line up by place value (phones stay left via .num) */
  th.numc,td.numc{text-align:right;font-variant-numeric:tabular-nums}
  /* pills */
  .pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap}
  .p-queued{background:#f0eeed;color:var(--muted);border:1px solid var(--line)}
  .p-contacted{background:#eef6ff;color:#1d4ed8;border:1px solid #c7ddfb}
  .p-replied{background:#e6fbfd;color:#06515c;border:1px solid #b3eef4}
  .p-qualifying{background:#f4f0fe;color:var(--purple);border:1px solid #d8c6f7}
  .p-booked{background:var(--support-bg);color:var(--support);border:1px solid var(--support-line)}
  .p-handover{background:var(--target-bg);color:var(--target);border:1px solid var(--target-line)}
  .p-attention{background:#fdeee7;color:var(--needs);border:1px solid #f6c9ac}
  .p-lost{background:#f4f2f2;color:var(--muted);border:1px solid var(--line)}
  .p-optout{background:#f4f2f2;color:var(--muted);border:1px solid var(--line)}
  .p-on{background:var(--wa-bg);color:var(--wa);border:1px solid var(--wa-line)}
  .p-paused{background:var(--target-bg);color:var(--target);border:1px solid var(--target-line)}
  .p-human{background:#eef6ff;color:#1d4ed8;border:1px solid #c7ddfb}
  .chan{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700}
  .chan .cd{width:8px;height:8px;border-radius:50%;background:var(--wa)}
  .chan.sms .cd{background:var(--amber)}.chan.email .cd{background:var(--cyan)}
  .callout{border-radius:11px;padding:13px 15px;font-size:13.2px;border:1px solid;margin-bottom:16px}
  .callout.amber{background:var(--target-bg);border-color:var(--target-line);color:#8a4a10}
  .callout.purple{background:#f4f0fe;border-color:#ddd0fb;color:#4a2596}
  .callout.green{background:var(--support-bg);border-color:var(--support-line);color:#0b6b3d}
  .callout b{font-weight:750}
  /* inbox layout */
  .inbox{display:grid;grid-template-columns:314px 1fr;gap:16px;align-items:start}
  @media(max-width:1050px){.inbox{grid-template-columns:1fr}}
  /* below tablet width, stack the thread + lead-detail panel too (overrides the inline 288px grid) */
  @media(max-width:760px){.inbox{grid-template-columns:1fr!important}}
  .convlist{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);overflow:hidden}
  .convlist .cf{display:flex;gap:6px;padding:10px 11px;border-bottom:1px solid var(--line);flex-wrap:wrap}
  .cfchip{font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:#fbfbfa;color:var(--ink2);cursor:pointer}
  .cfchip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .citem{display:flex;gap:10px;padding:12px 13px;border-bottom:1px solid var(--line);cursor:pointer;position:relative}
  .citem:hover{background:#faf9f8}
  .citem.sel{background:#f4f0fe;box-shadow:inset 3px 0 0 var(--purple)}
  .citem .cav{width:34px;height:34px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff;font-family:var(--head)}
  .citem .cmid{min-width:0;flex:1}
  .citem .cnm{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:6px}
  .citem .cpr{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
  .citem .clast{font-size:12px;color:var(--ink2);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px}
  .citem .cright{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
  .citem .ctime{font-size:10.5px;color:var(--muted)}
  .attn-dot{width:8px;height:8px;border-radius:50%;background:var(--magenta)}
  /* thread */
  .thread{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;min-height:560px}
  .thead{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
  .thead .tav{width:40px;height:40px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-family:var(--head)}
  .thead .tnm{font-size:15.5px;font-weight:700}
  .thead .tsub{font-size:11.5px;color:var(--muted)}
  .thead .tstate{margin-left:auto;display:flex;align-items:center;gap:8px}
  .tbody{background:linear-gradient(#faf8f7,#f4f1ef);padding:16px;flex:1;overflow:auto;max-height:460px}
  .day{text-align:center;font-size:10.5px;color:var(--muted);margin:4px 0 12px;font-weight:600}
  .msg{max-width:74%;margin-bottom:10px;clear:both}
  .msg .bub{padding:9px 12px;border-radius:13px;font-size:13.2px;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.05)}
  .msg .mt{font-size:10px;color:var(--muted);margin-top:3px}
  .msg.lead{float:left}
  .msg.lead .bub{background:#fff;border:1px solid var(--line);border-top-left-radius:4px}
  .msg.ai{float:right}
  .msg.ai .bub{background:var(--wa-bg);border:1px solid var(--wa-line);border-top-right-radius:4px}
  .msg.ai .mt{text-align:right}
  .msg.agent{float:right}
  .msg.agent .bub{background:#eef6ff;border:1px solid #c7ddfb;border-top-right-radius:4px}
  .msg.agent .mt{text-align:right}
  .msg .who{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
  .msg.ai .who{color:var(--wa)}.msg.agent .who{color:#1d4ed8}
  .tmpltag{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--target);background:var(--target-bg);border:1px solid var(--target-line);border-radius:5px;padding:1px 5px;margin-left:6px}
  .sysmsg{clear:both;text-align:center;margin:12px 0}
  .sysmsg span{display:inline-block;font-size:11px;color:var(--ink2);background:#fff;border:1px dashed var(--line);border-radius:999px;padding:5px 12px}
  .sysmsg.flag span{color:var(--needs);border-color:#f0c4b2;background:#fdf2ee;font-weight:600}
  .sysmsg.book span{color:var(--support);border-color:var(--support-line);background:var(--support-bg);font-weight:600}
  /* control bar */
  .tcontrol{border-top:1px solid var(--line);padding:12px 14px;background:#fff}
  .autostate{display:flex;align-items:center;gap:9px;font-size:12.5px;margin-bottom:10px;color:var(--ink2)}
  .autostate .sw{width:34px;height:20px;border-radius:999px;background:var(--wa);position:relative;flex:none;transition:.15s;cursor:pointer}
  .autostate .sw:after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:16px;transition:.15s}
  .autostate.off .sw{background:#cfc9c7}.autostate.off .sw:after{left:2px}
  .cbtns{display:flex;gap:8px;flex-wrap:wrap}
  .manualbox{display:none;margin-top:10px;gap:8px}
  .manualbox.show{display:flex}
  .manualbox input{flex:1;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:13.5px;font-family:inherit;background:#fbfbfa}
  /* right rail */
  .rail{display:flex;flex-direction:column;gap:14px}
  .rail .card{margin:0;padding:15px 16px}
  .qgrid{display:grid;gap:8px}
  .qrow{display:flex;align-items:flex-start;gap:9px;font-size:12.8px}
  .qrow .qm{width:18px;height:18px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff}
  .qrow.yes .qm{background:var(--support)}.qrow.no .qm{background:#cfc9c7}.qrow.q .qm{background:var(--amber);color:#5a4300}
  .qrow .qk{color:var(--muted);font-weight:600}.qrow .qv{color:var(--ink);font-weight:600}
  .kv{display:grid;grid-template-columns:96px 1fr;gap:7px 10px;font-size:12.8px}
  .kv dt{color:var(--muted);font-weight:600}.kv dd{margin:0;font-weight:600}
  .consent{display:flex;align-items:center;gap:8px;font-size:12.5px;background:var(--support-bg);border:1px solid var(--support-line);border-radius:9px;padding:9px 11px;color:#0b6b3d;font-weight:600}
  .consent.optout{background:#fdeceb;border-color:#f0c4b2;color:var(--needs)}
  .bub.typing{display:inline-flex;gap:4px;align-items:center;padding:12px 14px}
  .bub.typing span{width:7px;height:7px;border-radius:50%;background:#b8b3ad;display:inline-block;animation:typedot 1.2s infinite ease-in-out}
  .bub.typing span:nth-child(2){animation-delay:.18s}.bub.typing span:nth-child(3){animation-delay:.36s}
  @keyframes typedot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
  /* connections */
  .conngrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:900px){.conngrid{grid-template-columns:1fr}}
  .conn{border:1px solid var(--line);border-radius:12px;padding:15px 16px;background:#fff;display:flex;flex-direction:column;gap:9px}
  .conn .ch{display:flex;align-items:center;gap:10px}
  .conn .cico{width:36px;height:36px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:17px}
  .conn .cnm{font-size:14.5px;font-weight:700}
  .conn .cdesc{font-size:11.5px;color:var(--muted)}
  .conn .cstat{margin-left:auto}
  .st-ok{color:var(--support);font-weight:700;font-size:12px}
  .st-no{color:var(--needs);font-weight:700;font-size:12px}
  .conn .crow{font-size:12px;color:var(--ink2);display:flex;justify-content:space-between;border-top:1px dashed var(--line);padding-top:8px}
  /* wizard */
  .stepper{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
  .stp{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:7px 11px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--muted)}
  .stp .ic{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:#eee;color:#999;flex:none}
  .stp.active{border-color:var(--purple);color:var(--ink);background:#f6f1ff}
  .stp.active .ic{background:var(--purple);color:#fff}
  .stp.done{color:var(--ink2)}.stp.done .ic{background:var(--support);color:#fff}
  .fld{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin:0 0 5px}
  .inp{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:14px;color:var(--ink);background:#fbfbfa;font-family:inherit}
  .inp:focus{outline:2px solid #d9ccfb;border-color:var(--purple)}
  .maprow{display:grid;grid-template-columns:1fr 24px 1fr;gap:10px;align-items:center;margin-bottom:8px;font-size:13px}
  .maprow .src{background:#fbfbfa;border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-family:ui-monospace,Menlo,monospace;font-size:12px}
  .maprow .arr{color:var(--muted);text-align:center}
  .foot{color:var(--muted);font-size:12px;margin-top:24px;border-top:1px solid var(--line);padding-top:16px}
  .hide{display:none!important}
  .flex{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .spacer{flex:1}


  /* supplemental styles for admin + settings */
  #login input,#activate input{margin-bottom:10px}
  .navgroup{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--sideLbl);padding:12px 10px 6px;}
  .nav a[data-v="admin-tenants"] .dot,.nav a[data-v="admin-users"] .dot{background:#c9c2c0}
  .rolechip{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:6px;background:#f1eefb;color:var(--purple);border:1px solid #d8c6f7}
  .modechip{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:4px 10px;border-radius:999px}
  .modechip.sim{color:#06515c;background:#e6fbfd;border:1px solid #b3eef4}
  .modechip.live{color:var(--wa);background:var(--wa-bg);border:1px solid var(--wa-line)}
  .statuschip{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px}
  .s-active{background:var(--support-bg);color:var(--support);border:1px solid var(--support-line)}
  .s-onboarding{background:var(--target-bg);color:var(--target);border:1px solid var(--target-line)}
  .s-paused{background:#f0eeed;color:var(--muted);border:1px solid var(--line)}
  .s-archived{background:#f4f2f2;color:var(--muted);border:1px solid var(--line)}
  .frow{margin-bottom:12px}
  select.inp{appearance:none;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='%236e6866' stroke-width='1.5'/></svg>");background-repeat:no-repeat;background-position:right 12px center}
  .tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
  .tab{font-size:13px;font-weight:600;color:var(--muted);padding:9px 13px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
  .tab.on{color:var(--ink);border-bottom-color:var(--purple)}
  .reqlist{display:grid;gap:8px}
  .reqrow{display:flex;align-items:flex-start;gap:10px;font-size:13px;padding:10px 12px;border:1px solid var(--line);border-radius:9px}
  .reqrow.ok{background:#f4fbf6}.reqrow.bad{background:#fff9f4}
  .reqm{width:19px;height:19px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff}
  .reqrow.ok .reqm{background:var(--support)}.reqrow.bad .reqm{background:var(--amber);color:#5a4300}
  .reqrow .rd{font-size:11.5px;color:var(--muted);margin-top:2px}
  .reqrow .opt{margin-left:auto;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase}
  .listrow{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:#fff}
  .listrow .grow{flex:1;min-width:0}
  .listrow .nm{font-weight:650;font-size:13.5px}
  .listrow .sub{font-size:11.5px;color:var(--muted)}
  .tplbody{font-size:12.5px;color:var(--ink2);background:#fbfbfa;border:1px solid var(--line);border-radius:8px;padding:9px 11px;margin-top:6px}
  .tstat{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:3px 8px;border-radius:6px}
  .ts-approved{background:var(--support-bg);color:var(--support)}.ts-draft{background:#f0eeed;color:var(--muted)}.ts-submitted{background:#fff6e6;color:var(--target)}.ts-rejected{background:#fdeee7;color:var(--needs)}
  .adminbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
  .drawerform{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:700px){.drawerform{grid-template-columns:1fr}}
  .savedok{color:var(--support);font-size:12px;font-weight:600}

  /* ---- modal (DPA signing) ---- */
  .modaloverlay{position:fixed;inset:0;background:rgba(20,16,16,.5);display:none;align-items:center;justify-content:center;z-index:1000;padding:24px}
  .modalcard{background:var(--card);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.28);width:100%;max-width:640px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
  .modalhd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
  .modalt{font-family:var(--head);font-weight:800;font-size:17px}
  .modalsub{font-size:12px;color:var(--muted);margin-top:2px}
  .modalx{border:0;background:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
  .modalbody{padding:18px 22px;overflow:auto}
  .modalft{display:flex;align-items:center;gap:10px;padding:14px 22px;border-top:1px solid var(--line);background:#fafafa}
  .linkbox{display:flex;gap:8px;align-items:center}.linkbox .inp{font-family:var(--mono,monospace);font-size:12px}
  table.mini{width:100%;border-collapse:collapse;font-size:12px}
  table.mini th{text-align:left;padding:7px 10px;background:#faf9f8;color:var(--muted);font-weight:600;white-space:nowrap}
  table.mini td{padding:6px 10px;border-top:1px solid var(--line);white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
  .dpa-doc{border:1px solid var(--line);border-radius:10px;padding:6px 14px;max-height:38vh;overflow:auto;background:#fcfbfb}
  .dpa-sec{padding:11px 0;border-bottom:1px solid var(--line)}.dpa-sec:last-child{border-bottom:0}
  .dpa-sh{font-weight:700;font-size:13px;margin-bottom:3px}
  .dpa-sb{font-size:12.5px;color:var(--ink2);line-height:1.5}
  .dpa-disc{font-size:11.5px;color:var(--muted);font-style:italic;margin:10px 0 0}
  .dpa-signbox{margin-top:16px;border-top:1px dashed var(--line);padding-top:14px}
  /* ---- compliance card ---- */
  .dpa-card{border:1px solid var(--line);border-radius:11px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
  .dpa-card.signed{background:var(--support-bg);border-color:var(--support-line)}
  .dpa-card.unsigned{background:var(--target-bg);border-color:var(--target-line)}
  .dpa-head{display:flex;gap:11px;align-items:flex-start}
  .dpa-tick,.dpa-x{flex:none;width:24px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff}
  .dpa-tick{background:var(--support)}.dpa-x{background:var(--target)}
  .dpa-t{font-weight:700;font-size:13.5px}
  .dpa-sub{font-size:12.5px;color:var(--ink2);margin-top:1px}
  .dpa-meta{font-size:11px;color:var(--muted);margin-top:4px}
  .dpa-act{display:flex;gap:8px;flex-wrap:wrap}
  .dpa-note{font-size:12.5px;color:var(--ink2);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .lawfuldesc{font-size:11.5px;color:var(--muted);line-height:1.5;margin:2px 0 0}

  /* ---- contact PWM module ---- */
  .mt-contact{background:var(--support)}
  .contactgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}@media(max-width:800px){.contactgrid{grid-template-columns:1fr}}
  .contactcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 15px;cursor:pointer;transition:.14s}
  .contactcard:hover{border-color:var(--support-line)}
  .contactcard.sel{border-color:var(--support);box-shadow:inset 0 0 0 1px var(--support),0 6px 18px rgba(15,138,79,.10);background:var(--support-bg)}
  .contactcard .cc-t{font-weight:700;font-size:14px;margin-bottom:3px}
  .contactcard .cc-d{font-size:12px;color:var(--ink2);line-height:1.45}

  /* ---- client drawer (admin) + campaign cap ---- */
  .draweroverlay{position:fixed;inset:0;background:rgba(20,16,16,.42);display:none;z-index:1000}
  .draweroverlay.open .drawerpanel{transform:translateX(0)}
  .drawerpanel{position:absolute;top:0;right:0;bottom:0;width:440px;max-width:92vw;background:var(--bg);box-shadow:-18px 0 50px rgba(0,0,0,.24);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s ease}
  .drawerhd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line);background:var(--card)}
  .drawert{font-family:var(--head);font-weight:800;font-size:18px}
  .drawersub{font-size:12px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:6px}
  .drawerbody{padding:18px 20px;overflow:auto}
  .drawerinfo{display:grid;grid-template-columns:1fr;gap:0;margin:0}
  .drawerinfo .di{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--line)}
  .drawerinfo .di:last-child{border-bottom:0}
  .drawerinfo dt{color:var(--muted);font-size:12.5px}
  .drawerinfo dd{margin:0;font-size:12.5px;font-weight:600;text-align:right;max-width:60%}
  .capusage{font-size:12.5px;color:var(--ink2);margin:2px 0 8px}
  .capbar{height:8px;background:var(--line);border-radius:999px;overflow:hidden;margin:0 0 12px}
  .capfill{height:100%;border-radius:999px;transition:width .2s}

  /* ---- pagination (campaign contacts) ---- */
  .pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .pager .pinfo{font-size:12px;color:var(--muted)}
  .pager .pbtns{display:flex;align-items:center;gap:10px}
  .pager .ppage{font-size:12px;color:var(--ink2);font-weight:600}

  /* ---- notifications bell + popover ---- */
  .bellwrap{position:relative}
  .bell{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink2)}
  .bell:hover{border-color:var(--purple);color:var(--purple)}
  .bellbadge{position:absolute;top:-5px;right:-5px;background:var(--magenta);color:#fff;font-size:10px;font-weight:800;border-radius:999px;min-width:17px;height:17px;padding:0 4px;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg)}
  .notifpop{position:absolute;top:46px;right:0;width:360px;max-width:90vw;background:var(--card);border:1px solid var(--line);border-radius:13px;box-shadow:0 20px 50px rgba(0,0,0,.20);z-index:60;display:none;overflow:hidden}
  .notifpop.open{display:block}
  .nhd{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line);font-size:14px}
  .nmark{font-size:12px;color:var(--purple);cursor:pointer;font-weight:600}
  .nlist{max-height:420px;overflow:auto}
  .nitem{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;align-items:flex-start}
  .nitem:last-child{border-bottom:0}
  .nitem:hover{background:#faf9f9}
  .nitem.unread{background:#f7f5fe}.nitem.unread:hover{background:#f2eefc}
  .nitem.standing{background:var(--target-bg)}
  .ndot{width:9px;height:9px;border-radius:999px;flex:none;margin-top:5px}
  .nbody{min-width:0;flex:1}
  .ntitle{font-weight:700;font-size:13px;display:flex;align-items:center;gap:6px}
  .ncount{background:var(--line);color:var(--ink2);font-size:10.5px;font-weight:800;border-radius:999px;padding:1px 7px}
  .ntext{font-size:12px;color:var(--ink2);line-height:1.45;margin-top:2px}
  .ntime{font-size:10.5px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.4px}
  .nempty{padding:26px 16px;text-align:center;color:var(--muted);font-size:13px}

  /* ---- campaign contacts: multi-select bar, row menu ---- */
  .selbar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f4f0fe;border:1px solid #d8c6f7;border-radius:11px;padding:10px 14px;margin-bottom:12px;flex-wrap:wrap}
  .selbar .selacts{display:flex;gap:8px;flex-wrap:wrap}
  .rowdots{background:none;border:0;font-size:18px;line-height:1;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:6px}
  .rowdots:hover{background:var(--line);color:var(--ink)}
  .rowmenu{position:fixed;z-index:1100;display:none;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.20);padding:5px;min-width:180px}
  .rmi{padding:9px 12px;border-radius:7px;font-size:13px;cursor:pointer}
  .rmi:hover{background:#faf9f9}
  .rmi.danger{color:var(--needs)}.rmi.danger:hover{background:#fdeee7}

  /* ---- campaign performance charts ---- */
  .charthd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
  .chartblock{margin:6px 0 16px}
  .chartblock .charthd{margin-bottom:2px}
  .chartblock .charttot{font-family:var(--head);font-weight:800;font-size:18px;color:var(--ink)}
  .chartblock svg{display:block;background:linear-gradient(180deg,#fcfbfb,#fff);border:1px solid var(--line);border-radius:8px}

  /* ---- reduced motion: honour the OS setting (typing dots, transitions, drawer slide) ---- */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
    .bub.typing span{animation:none;opacity:.55}
  }