:root{--bg:#f6f7f9;--card:#fff;--ink:#1d2330;--muted:#6b7385;--line:#e3e6ec;--accent:#2457d6;
--ok:#16794a;--okbg:#e4f5ec;--warn:#9a6200;--warnbg:#fdf3dc;--bad:#b42318;--badbg:#fde8e7;--gray:#5a6170;--graybg:#eceef2}
*{box-sizing:border-box}body{margin:0;font:14px/1.45 system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--ink)}
header{background:#152040;color:#fff;padding:0 24px;display:flex;gap:24px;align-items:center;height:52px}
header b{font-size:15px}header nav a{color:#c5cfee;text-decoration:none;margin-right:18px}header nav a:hover,header nav a.on{color:#fff}
main{max-width:1180px;margin:24px auto;padding:0 16px}h1{font-size:22px;margin:0 0 16px}h2{font-size:16px;margin:0 0 12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px;margin-bottom:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.stat{font-size:28px;font-weight:600}.muted{color:var(--muted)}.small{font-size:12px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
a{color:var(--accent)}input,select,textarea{font:inherit;padding:7px 9px;border:1px solid #cfd4dd;border-radius:6px;background:#fff}
button,.btn{font:inherit;background:var(--accent);color:#fff;border:0;border-radius:6px;padding:8px 14px;cursor:pointer;text-decoration:none;display:inline-block}
.btn.secondary{background:#fff;color:var(--accent);border:1px solid var(--accent)}button.danger{background:var(--bad)}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.b-ok{background:var(--okbg);color:var(--ok)}.b-mobile_manual{background:var(--warnbg);color:var(--warn)}
.b-blocked{background:var(--badbg);color:var(--bad)}.b-unverified{background:var(--graybg);color:var(--gray)}
.flash{padding:10px 14px;border-radius:6px;margin-bottom:14px}.flash.ok{background:var(--okbg);color:var(--ok)}.flash.error{background:var(--badbg);color:var(--bad)}
.notice{background:var(--warnbg);border:1px solid #f1d9a4;color:#5c3d00;border-radius:8px;padding:14px 16px;margin-bottom:18px}
form.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}label{display:block;font-weight:600;margin:10px 0 4px}
.row{display:flex;gap:18px;flex-wrap:wrap}.row>*{flex:1;min-width:260px}.phone{font-variant-numeric:tabular-nums;white-space:nowrap}
ol li{margin-bottom:6px}code{background:var(--graybg);padding:1px 5px;border-radius:4px}

header nav{flex:1}.who{display:flex;gap:14px;align-items:center}.who a{color:#c5cfee;text-decoration:none}.who a:hover,.who a.on{color:#fff}
.who form{margin:0}button.link{background:none;color:#c5cfee;padding:0;border:0}button.link:hover{color:#fff}
.login{max-width:380px;margin:60px auto}.login input{width:100%}.login button{width:100%;margin-top:16px}
.b-primary{background:#e3ebff;color:#1d47b8}.b-local{background:var(--okbg);color:var(--ok)}
.lead-new{background:var(--graybg);color:var(--gray)}.lead-attempted{background:#eef0f6;color:#4a5370}.lead-contacted{background:#e3ebff;color:#1d47b8}
.lead-interested,.lead-appointment-set{background:var(--warnbg);color:var(--warn)}.lead-signed{background:var(--okbg);color:var(--ok)}.lead-not-interested{background:var(--badbg);color:var(--bad)}
.nav-count{background:#e5484d;color:#fff;border-radius:999px;padding:0 6px;font-size:11px;margin-left:4px}
.activity{border-left:2px solid var(--line);padding-left:12px}.activity>div{margin-bottom:10px}.activity .when{color:var(--muted);font-size:12px}
.fu-row{display:flex;justify-content:space-between;gap:10px;align-items:center;border-bottom:1px solid var(--line);padding:8px 0}
.tabs-card{padding:0}.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding:0 12px}
.tab{background:none;color:var(--muted);border:0;border-bottom:3px solid transparent;border-radius:0;padding:14px 16px 11px;font-weight:600;font-size:15px}
.tab:hover{color:var(--ink)}.tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.tab-count{background:var(--graybg);color:var(--gray);border-radius:999px;padding:1px 8px;font-size:12px;margin-left:6px}
.tabpanel{padding:22px 24px 24px}.tabpanel textarea,.tabpanel input:not([type=hidden]):not([type=file]),.tabpanel select{width:100%}
.tabpanel textarea{font-size:15px}.tabpanel label{margin-top:14px}
.fields3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.fields2{display:grid;grid-template-columns:1fr 2fr;gap:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:36px}.grid2 h2{margin-top:4px}
.empty-state{padding:8px 0}.empty-state p{margin:0 0 10px;font-size:15px}
@media (max-width:820px){.fields3,.fields2,.grid2{grid-template-columns:1fr}.tab{padding:12px 10px 9px;font-size:14px}}
.seg{display:inline-flex;border:1px solid #cfd4dd;border-radius:8px;overflow:hidden}.seg label{margin:0;font-weight:600;padding:8px 18px;cursor:pointer;display:flex;gap:6px;align-items:center}
.seg label+label{border-left:1px solid #cfd4dd}.seg label:has(input:checked){background:#e3ebff;color:#1d47b8}.seg label:has(input:disabled){color:var(--muted);cursor:not-allowed}
.seg input{width:auto!important;margin:0}.fields2.even{grid-template-columns:1fr 1fr}
.dnc-warn{margin-top:12px;padding:10px 12px;border-radius:6px;background:var(--badbg);color:var(--bad);font-size:13px}
.fields3.callrow{grid-template-columns:1.6fr 1.2fr 1fr}@media (max-width:820px){.fields3.callrow{grid-template-columns:1fr}}
.owner-sub{margin:-6px 0 16px;color:var(--muted)}.owner-sub b{color:var(--ink)}
.callflag{color:var(--bad);font-weight:600;font-size:13px;margin-left:12px;vertical-align:middle}
.contact-head{margin-bottom:14px}
table.phones select.disp{width:auto;min-width:150px;padding:5px 8px}
.disp-good{border-color:var(--ok);color:var(--ok)}.disp-wrong_number,.disp-disconnected,.disp-fax,.disp-business{border-color:var(--bad);color:var(--bad)}
tr.dead td.phone{text-decoration:line-through;color:var(--muted)}tr.dead{background:#fafafa}
.btn-small{font:inherit;font-size:13px;padding:5px 10px;border-radius:6px;cursor:pointer}
.danger-outline{background:#fff;color:var(--bad);border:1px solid #f0b7b2}.danger-outline:hover{background:var(--badbg)}
.counts{margin:0 0 10px;color:#334155}
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:10px 0}
.pager form{display:flex;align-items:center;gap:6px}
.pager select{padding:4px 8px}
.pages{display:flex;flex-wrap:wrap;gap:4px}
.pages a,.pages span{min-width:34px;text-align:center;padding:5px 9px;border:1px solid #d6dbe4;border-radius:6px;background:#fff;text-decoration:none;font-size:14px}
.pages .cur{background:#1d4ed8;border-color:#1d4ed8;color:#fff;font-weight:600}
.pages .off{color:#9aa3b2;background:#f3f5f8}
.pages .gap{border:none;background:none;min-width:auto}
.pagehead{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* Guided tour: the page is dimmed and blurred around the highlighted part */
.tour-shade{position:fixed;background:rgba(15,23,42,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:1000;transition:all .2s}
.tour-ring{position:fixed;border:2px solid #60a5fa;border-radius:8px;box-shadow:0 0 0 4px rgba(96,165,250,.25);z-index:1001;pointer-events:none;transition:all .2s}
.tour-box{position:fixed;z-index:1002;width:min(380px,calc(100vw - 32px));background:#fff;color:#0f172a;border-radius:10px;padding:16px 18px;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.tour-box h3{margin:0 0 6px;font-size:16px}
.tour-box p{margin:0 0 12px;font-size:14px;line-height:1.45}
.tour-box .tour-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tour-box .tour-step{font-size:12px;color:#64748b}
.tour-box .tour-btns{display:flex;gap:6px}
.tour-box button{padding:6px 12px}
.tour-box .link{color:#475569}
.brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap}
.brand em{font-style:normal;background:linear-gradient(90deg,#22d3ee,#3b82f6 50%,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-logo{display:block;width:100%;max-width:300px;height:auto;margin:0 auto 18px}
/* ---- Sign-in page: fading colour background with grain, frosted card ---- */
body.auth{min-height:100vh;background:#070d24;color:#e8ecf8;overflow-x:hidden}
body.auth header{display:none}
body.auth main{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto;padding:32px 16px}
.auth-bg{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:
    linear-gradient(160deg,#0b1438 0%,#111d52 38%,#1b1b5e 62%,#0a1030 100%)}
.auth-bg::before{content:"";position:absolute;inset:0;   /* fine grain */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.16;mix-blend-mode:overlay}
.auth-bg::after{content:"";position:absolute;inset:0;   /* faint dot grid that fades out toward the edges */
  background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 45%,#000 0%,transparent 70%);opacity:.35}
.glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:drift 22s ease-in-out infinite alternate}
.glow.g1{width:620px;height:620px;left:-160px;top:-180px;background:#06b6d4}
.glow.g2{width:680px;height:680px;right:-200px;bottom:-240px;background:#8b5cf6;animation-duration:26s}
.glow.g3{width:460px;height:460px;left:45%;top:35%;background:#2563eb;opacity:.35;animation-duration:30s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,40px) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.glow{animation:none}}
body.auth .login{max-width:400px;width:100%;margin:0}
body.auth .login-logo{max-width:320px;margin:0 auto 22px}
.login-card{background:rgba(15,23,60,.55);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:28px 28px 22px;
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 30px 80px rgba(2,6,23,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.login-card h1{color:#fff;font-size:24px;margin:0 0 4px}
.login-sub{margin:0 0 18px;color:#a9b4d6;font-size:14px}
.login-card label{color:#c9d2ee;font-weight:600;font-size:13px}
.login-card input{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:10px;padding:11px 12px;margin-top:6px}
.login-card input:focus{outline:none;border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.3);background:rgba(255,255,255,.1)}
.login-card button{width:100%;margin-top:20px;padding:12px;border:0;border-radius:10px;font-weight:700;font-size:15px;color:#fff;cursor:pointer;
  background:linear-gradient(90deg,#06b6d4,#3b82f6 50%,#8b5cf6);background-size:200% 100%;transition:background-position .4s,transform .1s,box-shadow .2s;
  box-shadow:0 10px 25px rgba(59,130,246,.35)}
.login-card button:hover{background-position:100% 0;box-shadow:0 12px 30px rgba(139,92,246,.45)}
.login-card button:active{transform:translateY(1px)}
.login-note{margin:16px 0 0;color:#8f9bc2;font-size:12px;line-height:1.5}
.login-foot{margin:22px 0 0;text-align:center;color:#6f7aa3;font-size:12px}
body.auth .flash{max-width:400px;width:100%;margin:0 0 14px;border-radius:10px;backdrop-filter:blur(10px)}
body.auth .flash.ok{background:rgba(16,185,129,.18);color:#a7f3d0;border:1px solid rgba(16,185,129,.35)}
body.auth .flash.error{background:rgba(239,68,68,.18);color:#fecaca;border:1px solid rgba(239,68,68,.35)}
body.auth .login,body.auth .flash{position:relative;z-index:1}
/* white card on the coloured background */
.login-card{background:rgba(255,255,255,.96);border-color:rgba(255,255,255,.7);box-shadow:0 30px 80px rgba(2,6,23,.45)}
.login-card h1{color:#0f1b3d}.login-sub{color:#5b6785}.login-card label{color:#334155}
.login-card input{background:#f4f6fb;border-color:#d6dbe8;color:#0f172a}.login-card input:focus{background:#fff;border-color:#3b82f6}
.login-note{color:#6b7591}