/* ============================================================
   WhatsApp Security System — all styles.
   Colour tokens are overwritten at boot from config.js (BRAND.colors).
   No external fonts/CDN so it runs on file:// and on Pages.
   ============================================================ */
:root{
  --wa:#25D366; --wa-d:#128C7E;
  --ink:#0F2A43; --ink2:#16395A;
  --bg:#F0F2F5; --card:#fff;
  --line:#E5E7EB; --line2:#F3F4F6;
  --muted:#9CA3AF; --muted2:#6B7280; --text:#111827;
  --red:#EF4444; --redbg:#FEE2E2; --redfg:#991B1B;
  --amber:#F59E0B; --amberbg:#FEF3C7; --amberfg:#92400E;
  --orange:#F97316; --orangebg:#FFEDD5; --orangefg:#C2410C;
  --green:#10B981; --greenbg:#D1FAE5; --greenfg:#065F46;
  --blue:#3B82F6; --bluebg:#DBEAFE; --bluefg:#1E40AF;
  --violet:#8B5CF6; --violetbg:#EDE9FE; --violetfg:#5B21B6;
  --slate:#64748B; --slatebg:#F1F5F9; --slatefg:#334155;
  --shadow:0 1px 3px rgba(0,0,0,.06);
  --shadow2:0 8px 28px rgba(0,0,0,.10);
  --r:12px; --banner:32px;
  --font:'Inter','Segoe UI',Roboto,-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased;padding-top:var(--banner);}
button,input,select,textarea{font-family:var(--font);}
a{color:inherit;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.fade-up{animation:fadeUp .35s ease-out;}

/* ---------- DEMO BANNER ---------- */
.demo-banner{position:fixed;top:0;left:0;right:0;height:var(--banner);z-index:400;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.2px;padding:0 12px;}
.demo-banner .dot{width:7px;height:7px;border-radius:50%;background:var(--wa);animation:pulse 2s infinite;flex-shrink:0;}
.demo-banner .short{display:none;}

/* ---------- LOGIN ---------- */
.ls{position:fixed;inset:0;top:var(--banner);background:linear-gradient(135deg,#0A1B2C 0%,#14395C 55%,#0A1B2C 100%);
  display:flex;align-items:center;justify-content:center;z-index:300;padding:20px;overflow-y:auto;}
.lw{width:100%;max-width:400px;}
.ll{width:104px;height:104px;object-fit:contain;display:block;margin:0 auto 12px;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.45));}
.ln{color:#fff;font-size:21px;font-weight:800;text-align:center;letter-spacing:-.4px;line-height:1.2;}
.ls2{color:#9DB2C6;font-size:12px;text-align:center;margin-top:6px;line-height:1.45;max-width:330px;margin-left:auto;margin-right:auto;}
.lp{display:flex;justify-content:center;margin-top:12px;}
.lpb{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;
  background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.28);}
.lpd{width:7px;height:7px;border-radius:50%;background:var(--wa);animation:pulse 1.5s infinite;}
.lpb span{font-size:10px;font-weight:700;color:var(--wa);letter-spacing:1.4px;text-transform:uppercase;}
.lc{background:#fff;border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.45);padding:28px;margin-top:20px;}
.lc h2{font-size:17px;font-weight:700;text-align:center;margin-bottom:4px;}
.lc p{font-size:12px;color:var(--muted2);text-align:center;margin-bottom:18px;}
.lf{margin-bottom:12px;}
.lf label{display:block;font-size:11px;font-weight:700;color:var(--muted2);margin-bottom:5px;
  text-transform:uppercase;letter-spacing:.5px;}
.lf input{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-size:14px;
  color:var(--text);outline:none;transition:all .15s;}
.lf input:focus{border-color:var(--wa);box-shadow:0 0 0 3px rgba(37,211,102,.12);}
.lb{width:100%;padding:13px;background:var(--wa);border:none;border-radius:10px;font-size:14.5px;font-weight:700;
  color:#fff;cursor:pointer;margin-top:6px;transition:background .15s;min-height:48px;}
.lb:hover{background:var(--wa-d);}
.lhint{font-size:11.5px;color:var(--muted2);text-align:center;margin-top:14px;line-height:1.6;
  background:#F9FAFB;border:1px solid var(--line);border-radius:9px;padding:10px 12px;}
.lhint b{color:#374151;}
@media (max-width:420px){ .ll{width:88px;height:88px;} .lc{padding:22px 18px;} }

/* ---------- APP SHELL ---------- */
.app{display:none;}
.layout{display:flex;min-height:calc(100vh - var(--banner));}
.sidebar{width:242px;background:var(--ink);color:#fff;display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:var(--banner);height:calc(100vh - var(--banner));}
.sb-brand{display:flex;align-items:center;gap:10px;padding:18px 18px 12px;}
.sb-mark{width:30px;height:30px;flex-shrink:0;}
.sb-bt{font-size:14.5px;font-weight:800;letter-spacing:-.3px;line-height:1.15;}
.sb-bt span{display:block;font-size:11.5px;font-weight:600;color:#8FA3B8;letter-spacing:0;}
.sb-badge{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:var(--wa);letter-spacing:.4px;padding:0 18px 14px;text-transform:uppercase;}
.sb-wa{width:7px;height:7px;border-radius:50%;background:var(--wa);animation:pulse 2s infinite;}
.sb-nav{flex:1;overflow-y:auto;padding:6px 10px;}
.sb-sec{font-size:9px;font-weight:700;color:#5B7086;text-transform:uppercase;letter-spacing:1px;padding:14px 10px 6px;}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:#A8B8C8;font-size:13px;font-weight:500;cursor:pointer;transition:all .12s;margin-bottom:1px;}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-item.active{background:var(--wa);color:#fff;font-weight:600;}
.nav-item svg{width:17px;height:17px;flex-shrink:0;}
.nav-item .nb{margin-left:auto;font-size:10px;font-weight:800;min-width:18px;height:18px;padding:0 5px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);color:#fff;}
.nav-item.active .nb{background:rgba(255,255,255,.25);}
.nav-item .nb.alert{background:var(--red);color:#fff;}
.sb-foot{padding:12px;border-top:1px solid rgba(255,255,255,.08);}
.sb-cta{display:block;width:100%;padding:10px;border-radius:9px;background:var(--wa);color:#fff;font-size:12px;font-weight:700;text-align:center;text-decoration:none;border:none;cursor:pointer;}
.sb-cta:hover{background:var(--wa-d);}
.sb-cta small{display:block;font-weight:500;opacity:.85;font-size:10.5px;margin-top:1px;}
.logout-btn{margin-top:8px;width:100%;padding:9px;border:1px solid rgba(255,255,255,.14);border-radius:8px;
  background:transparent;font-size:12px;font-weight:500;cursor:pointer;color:#8FA3B8;}
.logout-btn:hover{color:#fff;border-color:rgba(255,255,255,.34);}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{height:58px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 22px;position:sticky;top:var(--banner);z-index:50;}
.hamb{display:none;background:none;border:none;cursor:pointer;color:var(--text);padding:4px;}
.hamb svg{width:22px;height:22px;}
.tb-title{font-size:16px;font-weight:800;letter-spacing:-.3px;}
.tb-sub{font-size:12px;color:var(--muted);}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.tb-sync{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--muted2);background:#F9FAFB;border:1px solid var(--line);padding:6px 11px;border-radius:8px;}
.tb-sync .dot{width:7px;height:7px;border-radius:50%;background:var(--wa);animation:pulse 2.5s infinite;}
.view{padding:22px;max-width:1180px;width:100%;margin:0 auto;}

/* ---------- MONEY HERO ---------- */
.hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px;}
.hc{background:#fff;border:1px solid var(--line);border-left:4px solid var(--hc,var(--ink));border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);}
.hc .hl{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;}
.hc .hv{font-size:29px;font-weight:800;letter-spacing:-1.2px;margin-top:7px;line-height:1;color:var(--hvc,var(--text));}
.hc .hs{font-size:11.5px;color:var(--muted2);margin-top:6px;}

/* ---------- SUSPENSION PIPELINE STRIP ---------- */
.pipe{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 18px;margin-bottom:18px;border-top:3px solid var(--red);}
.pipe-t{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;width:100%;}
.pipe-n{display:flex;align-items:baseline;gap:7px;font-size:14px;font-weight:600;color:#374151;cursor:pointer;}
.pipe-n b{font-size:24px;font-weight:800;letter-spacing:-.8px;}
.pipe-n:hover{color:var(--ink);}
.pipe-sep{color:#D1D5DB;}
.pipe-r{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;}
.cdn{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;background:var(--amberbg);color:var(--amberfg);}
.cdn.hot{background:var(--redbg);color:var(--redfg);}
.cdn.past{background:#1F2937;color:#fff;}

/* ---------- STAT CARDS ---------- */
.stats{display:grid;gap:14px;margin-bottom:20px;}
.stats.c5{grid-template-columns:repeat(5,minmax(0,1fr));}
.stats.c4{grid-template-columns:repeat(4,minmax(0,1fr));}
.stats.c3{grid-template-columns:repeat(3,minmax(0,1fr));}
.sc{background:#fff;border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden;border:1px solid var(--line);border-top:3px solid var(--ac,var(--line));}
.sc.click{cursor:pointer;transition:transform .12s,box-shadow .12s;}
.sc.click:hover{transform:translateY(-2px);box-shadow:var(--shadow2);}
.sl{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;margin-bottom:8px;padding-right:40px;}
.sv{font-size:26px;font-weight:800;letter-spacing:-1px;color:var(--vc,var(--text));line-height:1;}
.ss{font-size:11px;color:var(--muted);margin-top:5px;}
.si{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;}
.si svg{width:16px;height:16px;}

/* ---------- TABS / TOOLBAR ---------- */
.tabs{display:flex;gap:2px;background:var(--line);border-radius:10px;padding:3px;margin-bottom:16px;width:fit-content;max-width:100%;overflow-x:auto;}
.tab{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted2);transition:all .15s;white-space:nowrap;border:none;background:none;}
.tab.active{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:20px;font-size:10px;font-weight:700;margin-left:6px;background:#fff;color:var(--muted2);}
.tab.active .tab-count{background:var(--line);}
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.sw{position:relative;flex:1;min-width:180px;max-width:300px;}
.sw svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted);pointer-events:none;}
.si2{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:#fff;color:var(--text);outline:none;}
.si2:focus{border-color:var(--wa);box-shadow:0 0 0 3px rgba(37,211,102,.1);}
.fsel{padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:#fff;color:var(--text);outline:none;cursor:pointer;}
.fsel:focus{border-color:var(--wa);}
.tr{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.clbl{font-size:12px;color:var(--muted);}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .15s;white-space:nowrap;text-decoration:none;}
.btn svg{width:14px;height:14px;flex-shrink:0;}
.btn-dark{background:var(--ink2);color:#fff;}.btn-dark:hover{background:var(--ink);}
.btn-wa{background:var(--wa);color:#fff;}.btn-wa:hover{background:var(--wa-d);}
.btn-red{background:var(--red);color:#fff;}.btn-red:hover{background:#B91C1C;}
.btn-amber{background:var(--amber);color:#fff;}.btn-amber:hover{background:#D97706;}
.btn-ghost{background:#fff;color:#374151;border-color:var(--line);}.btn-ghost:hover{background:#F9FAFB;}
.btn-sm{padding:6px 11px;font-size:12px;}

/* ---------- CARD / TABLE ---------- */
.card{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden;margin-bottom:18px;}
.card-h{padding:15px 18px;border-bottom:1px solid var(--line2);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.card-h h3{font-size:14px;font-weight:700;}
.card-h .sub{font-size:12px;color:var(--muted);margin-top:2px;}
.card-b{padding:18px;}
.twrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;min-width:760px;border-collapse:collapse;}
thead th{background:#F9FAFB;padding:10px 14px;text-align:left;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--line);white-space:nowrap;}
tbody tr{transition:background .1s;}
tbody tr:hover{background:#F9FAFB;}
tbody tr:not(:last-child) td{border-bottom:1px solid var(--line2);}
tbody td{padding:11px 14px;font-size:13px;vertical-align:middle;}
.av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}
.av.biz{border-radius:9px;}
.mname{font-weight:600;font-size:13px;cursor:pointer;}
.mname:hover{color:var(--wa-d);text-decoration:underline;}
.mphone{font-size:11px;color:var(--muted);margin-top:1px;}
.mcell{display:flex;align-items:center;gap:10px;}
.tfoot{padding:10px 16px;border-top:1px solid var(--line2);background:#F9FAFB;font-size:12px;color:var(--muted);}
.empty{text-align:center;padding:48px 20px;color:var(--muted);font-size:13px;}
.empty svg{width:40px;height:40px;color:#D1D5DB;display:block;margin:0 auto 12px;}

/* ---------- BADGES / CHIPS ---------- */
.sb{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;}
.sb::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;background:currentColor;opacity:.9;}
.pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap;}
.lvl{display:inline-flex;align-items:center;padding:3px 8px;border-radius:5px;font-size:10.5px;font-weight:800;letter-spacing:.4px;white-space:nowrap;}
.svc{display:flex;flex-wrap:wrap;gap:4px;}
.svc .s{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:5px;font-size:10.5px;font-weight:600;background:var(--slatebg);color:var(--slatefg);white-space:nowrap;}
.svc .s.armed{background:#FEF2F2;color:#991B1B;}
.svc .s.alarm{background:#EFF6FF;color:#1D4ED8;}
.svc .s.guard{background:#F5F3FF;color:#5B21B6;}
.svc .s.cctv{background:#F0FDFA;color:#0F766E;}
.t-green{background:var(--greenbg);color:var(--greenfg);}
.t-amber{background:var(--amberbg);color:var(--amberfg);}
.t-orange{background:var(--orangebg);color:var(--orangefg);}
.t-red{background:var(--redbg);color:var(--redfg);}
.t-blue{background:var(--bluebg);color:var(--bluefg);}
.t-violet{background:var(--violetbg);color:var(--violetfg);}
.t-slate{background:var(--slatebg);color:var(--slatefg);}
.t-ink{background:#1F2937;color:#fff;}

/* ---------- ROW ACTIONS ---------- */
.act{display:inline-flex;gap:6px;align-items:center;flex-wrap:nowrap;}
.ab{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:7px;font-size:12px;font-weight:600;border:1px solid var(--line);background:#fff;cursor:pointer;color:#374151;white-space:nowrap;transition:all .12s;text-decoration:none;}
.ab svg{width:13px;height:13px;}
.ab:hover{background:#F9FAFB;}
.ab-wa{background:var(--wa);color:#fff;border-color:var(--wa);}.ab-wa:hover{background:var(--wa-d);border-color:var(--wa-d);}
.ab-warn{background:var(--amberbg);color:var(--amberfg);border-color:#FCD34D;}.ab-warn:hover{background:var(--amber);color:#fff;}
.ab-red{background:var(--redbg);color:var(--redfg);border-color:#FCA5A5;}.ab-red:hover{background:var(--red);color:#fff;}
.ab-ok{color:var(--greenfg);}.ab-ok:hover{background:var(--greenbg);border-color:var(--green);}
.icon-btn{width:30px;height:30px;border-radius:7px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);flex-shrink:0;}
.icon-btn:hover{background:var(--line2);color:#374151;}
.icon-btn svg{width:14px;height:14px;}

/* ---------- ESCALATION LADDER (settings) ---------- */
.lad{display:flex;flex-direction:column;gap:10px;}
.lad-row{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#fff;border-left:4px solid var(--lc,var(--slate));}
.lad-n{width:30px;height:30px;border-radius:8px;background:var(--lbg,#F3F4F6);color:var(--lc,#374151);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0;}
.lad-b{flex:1;min-width:0;}
.lad-b .nm{font-size:13px;font-weight:700;}
.lad-b .ds{font-size:11.5px;color:var(--muted2);margin-top:2px;}
.lad-in{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap;}
.lad-in input{width:74px;padding:6px 9px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;outline:none;}
.lad-in input:focus{border-color:var(--wa);}
.lad-in label{font-size:11.5px;color:var(--muted2);}
.lad-in .grow{flex:1;min-width:160px;width:auto;}

/* ---------- TEMPLATES ---------- */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}
.tpl{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;}
.tpl-h{padding:12px 15px;border-bottom:1px solid var(--line2);display:flex;align-items:center;justify-content:space-between;gap:8px;}
.tpl-name{font-size:13px;font-weight:700;}
.tpl-body{padding:13px 15px;font-size:12px;color:var(--muted2);line-height:1.5;white-space:pre-wrap;flex:1;max-height:170px;overflow:auto;}
.tpl-f{padding:11px 15px;border-top:1px solid var(--line2);display:flex;gap:8px;}
.ph{display:inline-block;background:#EFF6FF;color:#1D4ED8;border-radius:4px;padding:1px 5px;font-size:11px;font-weight:600;font-family:ui-monospace,monospace;}

/* ---------- TIMELINE ---------- */
.tl{position:relative;padding-left:26px;}
.tl::before{content:'';position:absolute;left:8px;top:4px;bottom:4px;width:2px;background:var(--line);}
.tl-item{position:relative;padding-bottom:16px;}
.tl-item:last-child{padding-bottom:0;}
.tl-dot{position:absolute;left:-22px;top:2px;width:14px;height:14px;border-radius:50%;border:2px solid #fff;background:var(--muted);}
.tl-item.whatsapp .tl-dot{background:var(--wa);}
.tl-item.payment .tl-dot{background:var(--green);}
.tl-item.letter .tl-dot{background:var(--blue);}
.tl-item.client .tl-dot{background:var(--violet);}
.tl-item.warning .tl-dot{background:var(--amber);}
.tl-item.suspend .tl-dot{background:var(--red);}
.tl-item.status .tl-dot{background:var(--slate);}
.tl-txt{font-size:13px;font-weight:500;}
.tl-time{font-size:11px;color:var(--muted);margin-top:1px;}

/* ---------- MODAL ---------- */
.mo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:998;align-items:center;justify-content:center;padding:16px;}
.mo.open{display:flex;}
.md{background:#fff;border-radius:14px;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.25);}
.md.wide{max-width:660px;}
.mh{padding:17px 20px;border-bottom:1px solid var(--line2);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;z-index:1;}
.mht{font-size:15px;font-weight:700;}
.mb{padding:20px;display:flex;flex-direction:column;gap:14px;}
.ms{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;padding-bottom:8px;border-bottom:1px solid var(--line2);}
.mf label{display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;}
.mf input,.mf select,.mf textarea{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:7px;font-size:13px;color:var(--text);outline:none;background:#fff;}
.mf input:focus,.mf select:focus,.mf textarea:focus{border-color:var(--wa);box-shadow:0 0 0 3px rgba(37,211,102,.1);}
.mf textarea{resize:vertical;min-height:80px;font-family:var(--font);}
.mfr{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.mfoot{padding:14px 20px;border-top:1px solid var(--line2);display:flex;gap:10px;justify-content:flex-end;align-items:center;position:sticky;bottom:0;background:#fff;flex-wrap:wrap;}
.close-btn{background:none;border:none;cursor:pointer;color:var(--muted);font-size:24px;line-height:1;padding:0;}
.close-btn:hover{color:#374151;}
.preview-box{background:#ECE5DD;border-radius:10px;padding:14px;}
.bubble{background:#fff;border-radius:8px 8px 8px 2px;padding:10px 12px;font-size:13px;line-height:1.5;white-space:pre-wrap;box-shadow:0 1px 1px rgba(0,0,0,.1);max-width:100%;}
.bubble .tick{display:block;text-align:right;font-size:10px;color:var(--muted);margin-top:4px;}
.wa-phone{background:#ECE5DD;border-radius:14px;padding:0;overflow:hidden;border:1px solid #D6CEC4;}
.wa-top{background:#075E54;color:#fff;padding:10px 14px;display:flex;align-items:center;gap:10px;}
.wa-top .av{width:32px;height:32px;background:rgba(255,255,255,.2);color:#fff;font-size:11px;}
.wa-top .nm{font-size:13.5px;font-weight:700;}
.wa-top .st{font-size:10.5px;opacity:.75;}
.wa-body{padding:14px;min-height:80px;}
.wa-ctx{background:#F9FAFB;border:1px solid var(--line);border-radius:10px;padding:12px 14px;}
.wa-opts{display:flex;flex-direction:column;gap:6px;}
.wa-opt{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;cursor:pointer;background:#fff;transition:all .12s;}
.wa-opt:hover{background:#F9FAFB;}
.wa-opt.sel{border-color:var(--wa);background:#F0FDF4;box-shadow:0 0 0 2px rgba(37,211,102,.15);}
.wa-opt.disabled{opacity:.45;cursor:not-allowed;}
.wa-opt .rk{width:16px;height:16px;border-radius:50%;border:2px solid #CBD5E1;flex-shrink:0;margin-top:2px;}
.wa-opt.sel .rk{border-color:var(--wa);background:var(--wa);box-shadow:inset 0 0 0 3px #fff;}
.wa-opt .ol{font-size:13px;font-weight:600;color:var(--text);}
.wa-opt .os{font-size:11px;color:var(--muted);margin-top:1px;}
.wa-edit{width:100%;min-height:150px;border:none;background:transparent;font-family:var(--font);font-size:13px;line-height:1.5;color:var(--text);resize:vertical;outline:none;padding:0;}

/* ---------- PROFILE ---------- */
.split{display:flex;gap:8px;flex-wrap:wrap;}
.prof-sec{margin-top:6px;}
.prof-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;background:#F9FAFB;border:1px solid var(--line);border-radius:10px;padding:4px 14px;}
.prow{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line2);font-size:12px;}
.prow:last-child{border-bottom:none;}
.prow .pk{color:var(--muted);flex-shrink:0;}
.prow .pv{font-weight:600;text-align:right;}
.stmt{width:100%;border-collapse:collapse;font-size:12px;min-width:0;}
.stmt th{background:#F9FAFB;padding:7px 10px;text-align:left;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--line);}
.stmt td{padding:7px 10px;border-bottom:1px solid var(--line2);}
.stmt .num{text-align:right;font-variant-numeric:tabular-nums;}
.stmt tfoot td{font-weight:800;background:#F9FAFB;border-top:2px solid var(--line);}
.ch-item{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--line2);}
.ch-item:last-child{border-bottom:none;}
.ch-date{font-size:11px;font-weight:700;color:var(--text);width:54px;flex-shrink:0;line-height:1.3;}
.ch-date span{display:block;font-weight:500;color:var(--muted);}
.ch-main{flex:1;min-width:0;}
.ch-meta{font-size:11px;color:var(--muted);margin-top:2px;}
.ch-body{font-size:11px;color:#6B7280;margin-top:4px;white-space:pre-wrap;background:#F9FAFB;border:1px solid var(--line2);border-radius:6px;padding:6px 8px;max-height:66px;overflow:auto;}
.sub-note{background:#FFFBEB;border:1px solid #FDE68A;border-radius:8px;padding:10px 12px;font-size:12px;color:#854D0E;margin-bottom:14px;display:flex;gap:8px;align-items:flex-start;}
.sub-note svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;}
.warn-banner{background:#FEF2F2;border:1px solid #FECACA;border-radius:8px;padding:10px 12px;font-size:12px;color:#991B1B;margin-bottom:14px;display:flex;gap:8px;align-items:center;}
.warn-banner svg{width:15px;height:15px;flex-shrink:0;}
.ok-banner{background:#F0FDF4;border:1px solid #A7F3D0;border-radius:8px;padding:10px 12px;font-size:12px;color:#065F46;margin-bottom:14px;display:flex;gap:8px;align-items:center;}
.ok-banner svg{width:15px;height:15px;flex-shrink:0;}

/* ---------- LETTERS PAGE ---------- */
.let-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.let{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:10px;}
.let .lt{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:8px;}
.let .lt .ic{width:30px;height:30px;border-radius:8px;background:var(--lbg,#F3F4F6);color:var(--lc,#374151);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.let .lt .ic svg{width:15px;height:15px;}
.let .ld{font-size:12px;color:var(--muted2);line-height:1.5;flex:1;}
.let .lf{display:flex;gap:8px;}
.let .lf .btn{flex:1;justify-content:center;}

/* ---------- WELCOME OVERLAY ---------- */
.wel{display:none;position:fixed;inset:0;background:rgba(9,18,30,.72);z-index:1000;align-items:center;justify-content:center;padding:18px;}
.wel.open{display:flex;}
.wel-c{background:#fff;border-radius:18px;max-width:470px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:hidden;}
.wel-h{background:var(--ink);color:#fff;padding:22px 24px;}
.wel-h .mk{width:34px;height:34px;margin-bottom:10px;}
.wel-h .pn{font-size:17px;font-weight:800;letter-spacing:-.3px;}
.wel-h .tg{font-size:12px;color:#9DB2C6;margin-top:4px;line-height:1.45;}
.wel-b{padding:24px;}
.wel-b .st{font-size:10px;font-weight:800;color:var(--wa);letter-spacing:1.2px;text-transform:uppercase;}
.wel-b h3{font-size:18px;font-weight:800;letter-spacing:-.4px;margin:8px 0 8px;line-height:1.25;}
.wel-b p{font-size:13px;color:var(--muted2);line-height:1.6;}
.wel-f{padding:16px 24px 22px;display:flex;align-items:center;gap:12px;}
.wel-dots{display:flex;gap:6px;margin-right:auto;}
.wel-dots i{width:7px;height:7px;border-radius:50%;background:#D1D5DB;display:block;}
.wel-dots i.on{background:var(--wa);width:20px;border-radius:20px;}

/* ---------- CTA ---------- */
.cta-fab{position:fixed;right:20px;bottom:20px;z-index:900;display:inline-flex;align-items:center;gap:9px;padding:12px 17px;border-radius:30px;background:var(--wa);color:#fff;font-size:13px;font-weight:700;text-decoration:none;box-shadow:0 8px 26px rgba(37,211,102,.42);border:none;cursor:pointer;}
.cta-fab:hover{background:var(--wa-d);}
.cta-fab svg{width:17px;height:17px;}
.cta-fab .x{position:absolute;top:-7px;right:-5px;width:20px;height:20px;border-radius:50%;background:#374151;color:#fff;font-size:13px;line-height:19px;text-align:center;border:2px solid #fff;cursor:pointer;}
.site-foot{background:var(--ink);color:#8FA3B8;padding:26px 22px 34px;margin-top:auto;}
.site-foot .in{max-width:1180px;margin:0 auto;display:flex;gap:18px;flex-wrap:wrap;align-items:center;}
.site-foot .fl{font-size:13px;color:#fff;font-weight:700;}
.site-foot .fs{font-size:12px;margin-top:3px;line-height:1.5;}
.site-foot a{color:var(--wa);text-decoration:none;font-weight:600;}
.site-foot a:hover{text-decoration:underline;}
.site-foot .fr{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap;}

/* ---------- TOAST ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,90px);background:var(--ink);color:#fff;padding:12px 17px;border-radius:12px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:9px;box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:0;transition:all .3s cubic-bezier(.34,1.56,.64,1);z-index:9998;pointer-events:none;max-width:min(92vw,460px);line-height:1.45;}
.toast.show{transform:translate(-50%,0);opacity:1;}
.toast svg{width:15px;height:15px;color:var(--wa);flex-shrink:0;}
.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90;}
.scrim.show{display:block;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){ .stats.c5{grid-template-columns:repeat(3,1fr);} .hero{grid-template-columns:1fr;} }
@media (max-width:880px){
  .sidebar{position:fixed;left:0;top:var(--banner);z-index:100;transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 40px rgba(0,0,0,.4);}
  .sidebar.open{transform:translateX(0);}
  .hamb{display:inline-flex;}
}
@media (max-width:640px){
  .demo-banner .full{display:none;} .demo-banner .short{display:inline;}
  .view{padding:14px 12px;}
  .topbar{padding:0 14px;gap:8px;}
  .tb-sync{display:none;}
  .stats.c5,.stats.c4,.stats.c3{grid-template-columns:repeat(2,1fr);gap:10px;}
  .sv{font-size:22px;}
  .hc .hv{font-size:26px;}
  .toolbar{flex-direction:column;align-items:stretch;}
  .sw{max-width:none;}
  .fsel{width:100%;}
  .tr{margin-left:0;}
  .tr .btn{flex:1;justify-content:center;}
  .md{max-width:100%;border-radius:14px 14px 0 0;align-self:flex-end;max-height:94vh;}
  .mo{align-items:flex-end;padding:0;}
  .mfr{grid-template-columns:1fr;}
  .toast{left:12px;right:12px;bottom:12px;transform:translate(0,90px);max-width:none;}
  .toast.show{transform:translate(0,0);}
  .cta-fab{right:12px;bottom:12px;padding:12px 17px;font-size:12.5px;min-height:44px;}
  .pipe-r{margin-left:0;width:100%;}
}
/* ---------- MOBILE: tables become cards ---------- */
@media (max-width:600px){
  html,body{overflow-x:hidden;}
  input,select,textarea,.si2,.fsel{font-size:16px !important;}
  .sc{padding:13px 14px;} .sl{padding-right:34px;}
  .tabs{width:100%;}
  .toolbar .tr{width:100%;}
  .toolbar .tr .btn{flex:1 1 auto;min-height:44px;justify-content:center;}
  .btn,.tab,.logout-btn,.sb-cta{min-height:44px;}
  .hamb{min-width:44px;min-height:44px;}
  .prof-grid{grid-template-columns:1fr;}
  .card{overflow:visible;}
  .card .twrap{overflow-x:visible;}
  .card table{min-width:0;}
  .card thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .card table,.card tbody{display:block;width:100%;}
  .card tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;border:1px solid var(--line);border-radius:12px;margin:0 0 9px;padding:11px 13px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.05);}
  .card tbody tr:hover{background:#fff;}
  .card tbody td{display:flex;align-items:center;padding:0;border:none;font-size:13px;min-width:0;}
  .card tbody td::before{content:attr(data-label);font-size:9.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-right:8px;flex:0 0 auto;}
  .card tbody td[data-label="Site"],.card tbody td[data-label="Contract"],.card tbody td[data-label="Last Contacted"],.card tbody td[data-label="Due"]{display:none;}
  .card tbody td:has(.mcell){flex:1 1 100%;order:1;padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--line2);}
  .card tbody td:has(.mcell)::before{content:none;}
  .card tbody td:has(.svc){flex:1 1 100%;order:2;margin-bottom:8px;}
  .card tbody td:has(.svc)::before{content:none;}
  .card .av{width:34px;height:34px;font-size:12px;}
  .card .mname{font-size:14px;}
  .card tbody td[data-label="Status"]{order:3;}
  .card tbody td[data-label="Status"]::before{content:none;}
  .card tbody td[data-label="Arrears"]{order:4;margin-left:auto;font-weight:700;font-size:15px;color:var(--text);}
  .card tbody td[data-label="Arrears"]::before{content:none;}
  .card tbody td[data-label="Level"]{order:5;flex:1 1 100%;margin-top:7px;}
  .card tbody td:has(.act){flex:1 1 100%;order:9;margin-top:10px;padding-top:10px;border-top:1px solid var(--line2);}
  .card tbody td:has(.act)::before{content:none;}
  .card .act{display:flex;width:100%;gap:7px;flex-wrap:nowrap;}
  .card .act .ab{flex:1 1 auto;justify-content:center;min-height:40px;font-size:13px;padding:8px 8px;}
  .card .act .icon-btn{flex:0 0 auto;min-height:40px;min-width:40px;}
  .card tbody td.empty{display:block;text-align:center;border:none;padding:26px 0;}
  .card tbody td.empty::before{content:none;}
  .tfoot{text-align:center;}
  .mfoot{flex-wrap:wrap;gap:8px;}
  .mfoot .btn{flex:1 1 auto;min-height:44px;justify-content:center;}
  .site-foot .fr{margin-left:0;width:100%;}
}