/* Broker CRM — its own stylesheet, separate from the admin app's.
   Palette + shell lifted from the approved mockup (mockups/broker-crm.html). */
:root{
  --bg:#F4F2EE; --surface:#FFFFFF; --surface-2:#FBFAF7;
  --border:#E7E2D9; --border-2:#EFEBE3;
  --ink:#1B2430; --ink-2:#59636F; --ink-3:#8B94A0;
  --accent:#E5722A; --accent-ink:#B0521A; --accent-soft:#FBEADC;
  --new:#5B6CF0; --contacted:#1F9DBE; --showing:#E0972A; --app:#7A54D8; --closed:#28A56E;
  --danger:#DB4F39;
  --shadow:0 1px 2px rgba(24,32,45,.04), 0 8px 24px rgba(24,32,45,.06);
  --shadow-sm:0 1px 2px rgba(24,32,45,.05);
  --radius:14px; --radius-sm:10px; --sb:248px;
  --font:'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1319; --surface:#161B23; --surface-2:#1B222C;
    --border:#28313D; --border-2:#222A34;
    --ink:#E9EDF3; --ink-2:#9BA6B4; --ink-3:#6A7482;
    --accent:#F0894A; --accent-ink:#F0894A; --accent-soft:#2A1D13;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}
.tabnum{font-variant-numeric:tabular-nums}
a{color:inherit}

/* ---------------------------------------------------------- app shell */
.app{display:grid;grid-template-columns:var(--sb) 1fr;min-height:100vh}
.sidebar{background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:16px 18px 10px}
.brand .logo{width:34px;height:34px;border-radius:9px;flex:none;
  background:linear-gradient(135deg,var(--accent),#F0A24A);display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:16px;box-shadow:0 4px 10px rgba(229,114,42,.35)}
.brand .name{font-weight:800;font-size:15px;letter-spacing:-.2px;line-height:1.1}
.brand .name span{display:block;font-weight:600;font-size:11px;color:var(--ink-3);letter-spacing:.3px}

.planbox{margin:2px 14px 8px;padding:8px 12px;border-radius:var(--radius-sm);
  background:var(--accent-soft);border:1px solid #F2D8C1;text-decoration:none;
  display:flex;align-items:center;gap:8px}
.planbox .lbl{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--accent-ink)}
.planbox .val{font-size:14px;font-weight:800;color:var(--ink)}
.planbox .val .per{font-size:11px;font-weight:600;color:var(--ink-2)}
.planbox .stat{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.3px;
  padding:2px 8px;border-radius:20px;background:#25D36622;color:#128C4B;text-transform:uppercase}
.planbox .stat.trial{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-ink)}

/* dedicated line card — placeholder until a Twilio number is provisioned */
.mynum{margin:4px 14px 10px;padding:12px 13px;border-radius:var(--radius-sm);
  background:var(--accent-soft);border:1px solid #F2D8C1}
.mynum .lbl{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--accent-ink)}
.mynum .num{font-size:18px;font-weight:800;letter-spacing:-.3px;margin-top:2px}
.mynum .sub{font-size:11px;color:var(--ink-2);margin-top:4px;display:flex;gap:10px}
.mynum .dot{display:inline-flex;align-items:center;gap:4px}
.mynum .dot b{color:var(--ink);font-weight:700}

nav{padding:6px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.navlabel{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3);padding:12px 12px 5px}
.navitem{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;
  color:var(--ink-2);font-weight:600;cursor:pointer;border:none;background:none;
  width:100%;text-align:left;font-family:inherit;font-size:13.5px;text-decoration:none}
.navitem:hover{background:var(--surface-2);color:var(--ink)}
.navitem.active{background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(229,114,42,.3)}
.navitem .ic{width:18px;flex:none;opacity:.85;text-align:center}
.navitem .badge{margin-left:auto;background:var(--danger);color:#fff;font-size:11px;font-weight:800;
  min-width:19px;height:19px;border-radius:20px;display:grid;place-items:center;padding:0 5px}
.sb-foot{margin-top:auto;padding:14px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:13px;background:linear-gradient(135deg,#3E5169,#5B7295)}
.sb-foot .who{line-height:1.2;min-width:0}
.sb-foot .who b{font-size:13px}
.sb-foot .who span{display:block;font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
.logout{margin-left:auto;background:var(--surface-2);border:1px solid var(--border);color:var(--ink-2);
  border-radius:9px;padding:8px 12px;cursor:pointer;font-size:12px;font-weight:800;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:all .12s}
.logout .lo-ic{font-size:13px;line-height:1}
.logout:hover{background:var(--danger);border-color:var(--danger);color:#fff}

/* ---------------------------------------------------------------- main */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:5;background:var(--surface);
  border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;padding:16px 26px}
.topbar h1{font-size:19px;font-weight:800;letter-spacing:-.4px;margin:0}
.topbar .crumb{color:var(--ink-3);font-size:12.5px;font-weight:600}
.btn{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:10px 16px;
  font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;display:inline-flex;gap:7px;
  align-items:center;text-decoration:none;box-shadow:0 4px 12px rgba(229,114,42,.28)}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--border);box-shadow:none}
.btn.wide{width:100%;justify-content:center}
.spacer{margin-left:auto}
.view{padding:24px 26px 60px}
/* collapsible "+ Add" popover in a topbar (no-JS, native <details>) */
.addwrap{margin-left:auto;position:relative}
.addwrap>summary{list-style:none;cursor:pointer}
.addwrap>summary::-webkit-details-marker{display:none}
.addpop{position:absolute;right:0;top:calc(100% + 10px);z-index:20;width:min(720px,86vw);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px}
.pophead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pophead b{font-size:14px;font-weight:800}
.popclose{border:none;background:var(--surface-2);color:var(--ink-2);width:28px;height:28px;
  border-radius:50%;cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center}
.popclose:hover{background:var(--danger);color:#fff}

/* trial banner */
.trial{display:flex;align-items:center;gap:12px;background:var(--accent-soft);
  border:1px solid #F2D8C1;border-radius:12px;padding:12px 16px;margin-bottom:20px;font-size:13px}
.trial b{color:var(--accent-ink)}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 17px;box-shadow:var(--shadow-sm)}
.kpi .k-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:17px;
  background:var(--accent-soft);color:var(--accent-ink)}
.kpi .k-val{font-size:29px;font-weight:800;letter-spacing:-1px;margin:9px 0 1px}
.kpi .k-lbl{font-size:12.5px;color:var(--ink-2);font-weight:600}

/* Compact KPI cards: icon + number + label all on ONE row (smaller box). */
.kpis-row .kpi{display:flex;align-items:center;gap:12px;padding:13px 15px}
.kpis-row .kpi .k-ic{width:40px;height:40px;border-radius:10px;flex:none;
  display:grid;place-items:center;font-size:18px}
.kpis-row .kpi .k-val{font-size:23px;letter-spacing:-.5px;margin:0;flex:none}
.kpis-row .kpi .k-meta{display:flex;flex-direction:column;min-width:0}
.kpis-row .kpi .k-lbl{font-size:12.5px;color:var(--ink-2);font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpis-row .kpi .k-delta{font-size:11px;color:var(--ink-3);font-weight:600;margin-top:1px}

/* Recording player — orange play button + waveform (matches the mockup). */
.recwave{display:inline-flex;align-items:center;gap:9px}
.recbtn{width:34px;height:34px;border-radius:50%;border:none;background:var(--accent);
  color:#fff;font-size:12px;line-height:1;cursor:pointer;flex:none;
  display:grid;place-items:center;box-shadow:0 2px 8px rgba(229,114,42,.34);
  transition:transform .1s,background .12s}
.recbtn:hover{transform:scale(1.07)}
.recbtn.playing{background:var(--accent-ink,#b8511f)}
.wavebars{display:inline-flex;align-items:center;gap:2px;height:26px}
.wavebars i{width:3px;border-radius:2px;background:color-mix(in srgb,var(--ink-3) 45%,transparent);
  transition:background .12s}
.wavebars i.on{background:var(--accent)}
.rectime{font-size:12px;color:var(--ink-2);font-weight:700;min-width:30px;
  font-variant-numeric:tabular-nums}

.sec-h{display:flex;align-items:center;gap:12px;margin:26px 0 14px}
.sec-h h2{font-size:15px;font-weight:800;letter-spacing:-.2px;margin:0}
.sec-h .hint{font-size:12px;color:var(--ink-3);font-weight:600}

.grid-2{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card .c-h{display:flex;align-items:center;gap:10px;padding:15px 17px;border-bottom:1px solid var(--border-2)}
.card .c-h h3{font-size:14px;font-weight:800;margin:0}
.card .c-b{padding:6px}

/* pipeline snapshot */
.snap{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
/* Compact: label + count on ONE row, smaller box. */
.snap .s{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:12px 15px;box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.snap .s .lb{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.snap .s .n{font-size:22px;font-weight:800;margin-top:0;line-height:1}

/* feed + tasks */
.feed{list-style:none;margin:0;padding:4px}
.feed li{display:flex;gap:12px;padding:11px 12px;border-radius:10px}
.feed li:hover{background:var(--surface-2)}
.feed .ft{font-size:13px}.feed .ft b{font-weight:700}
.feed .fm{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.chip{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:20px}
.c-new{background:color-mix(in srgb,var(--new) 15%,transparent);color:var(--new)}
.c-contacted{background:color-mix(in srgb,var(--contacted) 15%,transparent);color:var(--contacted)}
.c-showing{background:color-mix(in srgb,var(--showing) 18%,transparent);color:var(--showing)}
.c-application{background:color-mix(in srgb,var(--app) 15%,transparent);color:var(--app)}
.c-closed{background:color-mix(in srgb,var(--closed) 15%,transparent);color:var(--closed)}
.task{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px}
.task .tt{font-size:13px}.task .tm{font-size:11px;color:var(--ink-3)}
.task .due{margin-left:auto;font-size:11px;font-weight:700;color:var(--showing)}
.empty{padding:26px;text-align:center;color:var(--ink-3);font-size:13px}

/* ---------------------------------------------------------- auth pages */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(circle at 50% 0,var(--accent-soft),var(--bg) 60%)}
.authcard{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);
  border-radius:18px;box-shadow:var(--shadow);padding:30px 30px 26px}
.authcard .logo{width:44px;height:44px;border-radius:11px;
  background:linear-gradient(135deg,var(--accent),#F0A24A);display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:20px;box-shadow:0 4px 10px rgba(229,114,42,.35);margin-bottom:16px}
.authcard h1{font-size:22px;font-weight:800;letter-spacing:-.4px;margin:0 0 4px}
.authcard .lede{font-size:13px;color:var(--ink-2);margin:0 0 20px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12px;font-weight:800;color:var(--ink-2);letter-spacing:.2px}
.field input,.field select{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
  padding:11px 13px;font-family:inherit;font-size:14px;color:var(--ink)}
.field input:focus,.field select:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.pw-wrap{position:relative;display:flex}
.pw-wrap input{flex:1;width:100%;padding-right:60px}
.pw-toggle{position:absolute;top:50%;right:7px;transform:translateY(-50%);background:transparent;
  border:0;color:var(--accent-ink);font-family:inherit;font-size:12px;font-weight:800;
  cursor:pointer;padding:5px 8px;border-radius:6px}
.pw-toggle:hover{background:var(--surface)}
.remember{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  color:var(--ink-2);margin:2px 0 6px;cursor:pointer}
.remember input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
.err{background:color-mix(in srgb,var(--danger) 10%,transparent);border:1px solid color-mix(in srgb,var(--danger) 40%,var(--border));
  color:var(--danger);border-radius:10px;padding:10px 13px;font-size:12.5px;font-weight:600;margin-bottom:16px}
/* Info banner (e.g. arrived from a Google sign-in with no matching account) */
.note{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));
  color:var(--accent-ink);border-radius:10px;padding:10px 13px;font-size:12.5px;font-weight:600;margin-bottom:16px}
/* "Continue with Google" — a plain link, no JS (CSP-clean) */
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:var(--surface);border:1px solid var(--border);border-radius:11px;
  padding:11px 14px;font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;
  cursor:pointer;transition:background .12s,border-color .12s}
.gbtn:hover{background:var(--surface-2,var(--accent-soft));border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.gbtn svg{width:18px;height:18px;flex:0 0 auto}
.gdivider{display:flex;align-items:center;text-align:center;gap:12px;margin:16px 0;
  color:var(--ink-3);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.gdivider::before,.gdivider::after{content:"";flex:1;height:1px;background:var(--border)}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.planpick{border:1px solid var(--border);border-radius:12px;padding:12px;cursor:pointer;position:relative}
.planpick input{position:absolute;opacity:0}
.planpick .t{font-size:13px;font-weight:800}
.planpick .p{font-size:20px;font-weight:800;letter-spacing:-.5px;margin:2px 0}
.planpick .p span{font-size:12px;font-weight:600;color:var(--ink-3)}
.planpick .b{font-size:10.5px;color:var(--ink-3);line-height:1.35}
.planpick:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.authfoot{text-align:center;font-size:12.5px;color:var(--ink-2);margin-top:16px}
.authfoot a{color:var(--accent-ink);font-weight:700;text-decoration:none}

/* -------------------------------------------- wide signup (form + plans) */
.auth-wide{align-items:start;padding:40px 24px}
.sucard{width:100%;max-width:640px;background:var(--surface);border:1px solid var(--border);
  border-radius:22px;box-shadow:var(--shadow);padding:32px 34px 28px}
.su-head{text-align:center;margin-bottom:20px}
.su-head .logo{margin:0 auto 14px}
.su-head h1{font-size:25px;font-weight:800;letter-spacing:-.6px;margin:0 0 8px}
.su-head .lede{font-size:13px;color:var(--ink-2);margin:0 auto;max-width:480px;line-height:1.55}
.su-fields{margin-bottom:22px}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.su-step{font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--border-2)}
.su-plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.plancard-pick{position:relative;border:1.5px solid var(--border);border-radius:15px;
  padding:15px 15px 14px;cursor:pointer;background:var(--surface);transition:border-color .12s,background .12s,box-shadow .12s}
.plancard-pick:hover{border-color:var(--ink-3)}
.plancard-pick input{position:absolute;opacity:0;pointer-events:none}
.plancard-pick .pc-head{display:flex;align-items:baseline;gap:10px}
.plancard-pick .pc-name{font-size:16px;font-weight:800;letter-spacing:-.2px}
.plancard-pick .pc-price{margin-left:auto;font-size:24px;font-weight:800;letter-spacing:-.6px}
.plancard-pick .pc-price span{font-size:12px;font-weight:600;color:var(--ink-3)}
.plancard-pick .pc-blurb{font-size:12px;color:var(--ink-2);margin:3px 0 12px;line-height:1.4}
.pc-feat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pc-feat li{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--ink);line-height:1.4}
.pc-feat .tk{flex:none;width:16px;height:16px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent-ink);display:grid;place-items:center;font-size:10px;font-weight:800;margin-top:1px}
.pc-feat em{font-style:normal;color:var(--ink-3);font-weight:600}
.pc-check{position:absolute;top:14px;right:16px;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--border);background:var(--surface);color:transparent;
  display:grid;place-items:center;font-size:12px;font-weight:800;transition:all .12s}
.plancard-pick .pc-price{margin-right:34px}
.pop-flag{position:absolute;top:-10px;left:16px;background:var(--accent);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.3px;padding:3px 9px;border-radius:20px;
  box-shadow:0 3px 8px rgba(229,114,42,.35)}
.plancard-pick.pop{border-color:var(--accent-soft)}
.plancard-pick:has(input:checked){border-color:var(--accent);background:var(--accent-soft);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.plancard-pick:has(input:checked) .pc-check{border-color:var(--accent);background:var(--accent);color:#fff}
.su-cta{margin-top:24px}
.su-fine{text-align:center;font-size:11.5px;color:var(--ink-3);font-weight:600;margin:10px 0 0}
@media (max-width:560px){
  .sucard{padding:24px 18px 20px;border-radius:18px}
  .su-head h1{font-size:22px}
  .frow2{grid-template-columns:1fr;gap:0}
  .su-plans{grid-template-columns:1fr}
}

/* ---------------------------------------------------- forms / inputs */
.addbar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:14px 16px;margin-bottom:20px}
.addbar h3{margin:0 0 12px;font-size:13px;font-weight:800}
.frow{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.frow .f{display:flex;flex-direction:column;gap:5px;flex:1 1 150px;min-width:0}
.frow .f label{font-size:11px;font-weight:800;color:var(--ink-2);letter-spacing:.2px}
.frow .f input,.frow .f select,.frow .f textarea{background:var(--surface-2);border:1px solid var(--border);
  border-radius:9px;padding:9px 11px;font-family:inherit;font-size:13.5px;color:var(--ink)}
.frow .f input:focus,.frow .f select:focus{outline:2px solid var(--accent);border-color:var(--accent)}

/* ---------------------------------------------------- pipeline board */
.board{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 14px}
.col{flex:0 0 260px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
  display:flex;flex-direction:column;align-self:flex-start}
.col.dragover{outline:2px dashed var(--accent);outline-offset:-2px;background:var(--accent-soft)}
.col-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border-2)}
.col-h .bar{width:8px;height:8px;border-radius:3px;flex:none}
.col-h b{font-size:12.5px;font-weight:800}
.col-h .ct{margin-left:auto;font-size:11px;font-weight:800;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--border);border-radius:20px;padding:1px 8px}
.col-b{padding:10px;display:flex;flex-direction:column;gap:9px}
.col-b.dragover{outline:2px dashed var(--accent);outline-offset:-6px;border-radius:12px}
.lead{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:12px;box-shadow:var(--shadow-sm)}
.lead:hover{border-color:var(--accent);transition:.12s}
.lead[draggable="true"]{cursor:grab}
.lead.dragging{opacity:.45;cursor:grabbing}
.lead .l-top{display:flex;align-items:center;gap:9px}
.lead .l-top>div{min-width:0}
.lead .l-av{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:#fff}
.lead .l-nm{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead .l-src{font-size:10.5px;color:var(--ink-3);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.lead .l-sub{font-size:11px;color:var(--ink-3);margin-top:2px}
.lead .l-want{font-size:12px;color:var(--ink-2);margin-top:9px;display:flex;gap:6px;align-items:center}
.lead .l-foot{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--border-2);font-size:11px;color:var(--ink-3);font-weight:600;flex-wrap:wrap}
.lead .l-foot .mi{display:inline-flex;align-items:center;gap:4px}
.tag{font-size:10px;font-weight:800;padding:2px 7px;border-radius:6px;background:var(--surface-2);
  border:1px solid var(--border);color:var(--ink-2)}
.pill-hot{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger);border:none}
/* rentals / home-sales segmented toggle (no-JS: links carrying ?board=) */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border-2);border-radius:9px;padding:3px;gap:3px}
.seg a{text-decoration:none;font-size:12.5px;font-weight:700;color:var(--ink-3);
  padding:6px 14px;border-radius:6px;display:flex;align-items:center;gap:6px}
.seg a.on{background:var(--accent);color:#fff;box-shadow:0 1px 4px rgba(229,114,42,.35)}
.badge-sale{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.3px;padding:1px 7px;border-radius:20px}
.badge-sale.buyer{color:#2A5EAA;background:#E7EFFB}
.badge-sale.seller{color:#B0521A;background:var(--accent-soft)}
.badge-sale.renter{color:#1E8A63;background:#E3F5EC}
:root[data-theme="dark"] .badge-sale.buyer{color:#93B7F0;background:#1B2A44}
:root[data-theme="dark"] .badge-sale.seller{color:#F0A24A;background:#332216}
:root[data-theme="dark"] .badge-sale.renter{color:#5FD3A2;background:#12301F}
.lead .l-move{margin-top:9px;display:flex;gap:6px;align-items:center}
.lead .l-move select{flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:7px;
  padding:5px 7px;font-family:inherit;font-size:11.5px;color:var(--ink)}
.lead .l-move button{border:1px solid var(--border);background:var(--surface);border-radius:7px;
  padding:5px 9px;font-size:11.5px;font-weight:700;cursor:pointer;color:var(--accent-ink)}
.lead .l-move button:hover{border-color:var(--accent)}
.kind{display:inline-block;font-size:9.5px;font-weight:800;padding:1px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.3px}
.kind.renter{background:color-mix(in srgb,var(--contacted) 15%,transparent);color:var(--contacted)}
.kind.buyer{background:color-mix(in srgb,var(--new) 15%,transparent);color:var(--new)}
.kind.seller{background:var(--accent-soft);color:var(--accent-ink)}
.col-empty{padding:16px;text-align:center;color:var(--ink-3);font-size:12px}

/* ---------------------------------------------------- tables */
.tablecard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:var(--ink-3);padding:12px 16px;border-bottom:1px solid var(--border)}
tbody td{padding:12px 16px;border-bottom:1px solid var(--border-2)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
.muted{color:var(--ink-3)}
.cname{display:flex;align-items:center;gap:10px;font-weight:700}
.cname-link{color:inherit;text-decoration:none;cursor:pointer}
.cname-link:hover .cname-txt{color:var(--accent-ink);text-decoration:underline}
/* richer lead-edit page */
/* Contact edit: 50/50. Follow-ups + Notes on the LEFT, the contact form on the
   RIGHT — done with `order` so the HTML/form stays as-is. */
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.lead-grid>.card{order:2}
.lead-grid>.lead-side{order:1}
.lead-side{display:flex;flex-direction:column;gap:18px}
/* Activity timeline — every call & text with a contact, one glance. */
.act-quick{display:flex;gap:8px;margin-left:auto}
.qbtn{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;text-decoration:none;
  padding:6px 12px;border-radius:8px;border:1px solid var(--border);white-space:nowrap}
.qbtn.qtext{background:var(--accent);color:#fff;border-color:var(--accent)}
.qbtn.qtext:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.qbtn.qcall{background:var(--surface);color:var(--ink)}
.qbtn.qcall:hover{background:var(--surface-2);border-color:var(--ink-3)}
.acts-tl{display:flex;flex-direction:column}
.act{display:flex;gap:11px;padding:11px 2px;border-bottom:1px solid var(--border)}
.act:last-child{border-bottom:0}
.act-ic{width:32px;height:32px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;font-size:15px;flex:none}
.act.dir-missed .act-ic{background:color-mix(in srgb,var(--danger) 14%,transparent)}
.act.dir-out .act-ic,.act.dir-outbound .act-ic{background:var(--accent-soft)}
.act-b{flex:1;min-width:0}
.act-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.act-what{font-weight:700;font-size:13px}
.act-dur{font-weight:400;color:var(--ink-2);font-size:12px}
.act-when{margin-left:auto;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.act-msg{margin-top:4px;font-size:12.5px;line-height:1.45;background:var(--surface-2);border:1px solid var(--border);
  border-radius:8px;padding:7px 10px;color:var(--ink);word-break:break-word}
.act-msg.act-auto{color:var(--ink-2);font-style:italic}
.act-rec{margin-top:7px;height:32px;width:100%;max-width:260px;display:block}
.frm-sec{flex:1 1 100%;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:var(--ink-3);margin:8px 0 0;padding-top:12px;border-top:1px solid var(--border)}
.frm-sec:first-child{border-top:0;padding-top:0;margin-top:0}
/* type-conditional field groups: children flow into the flex row; hide as a unit */
.kind-sec{display:contents}
.kind-sec[hidden]{display:none}
/* sale/rent-only fields: the JS sets [hidden], but .field{display:flex} would
   override it — so force the hide here. */
.field[hidden]{display:none}
.fu{display:flex;gap:10px;align-items:flex-start;padding:9px 2px;border-bottom:1px solid var(--border)}
.fu-check{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border);
  background:transparent;color:var(--ink-3);cursor:pointer;font-size:11px;line-height:1;padding:0}
.fu-check:hover{border-color:var(--accent);color:var(--accent)}
.fu-b{flex:1;min-width:0}
.fu-t{font-size:13px;font-weight:600}
.fu-due{font-size:11.5px;color:var(--accent-ink);font-weight:700;margin-top:1px}
.fu-add{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.fu-add input{flex:1 1 100%;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;
  padding:9px 11px;font-family:inherit;font-size:13px;color:var(--ink)}
.fu-add input[type=date],.fu-add input[type=datetime-local]{flex:1 1 180px}
.note-add{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.note-add textarea{background:var(--surface-2);border:1px solid var(--border);border-radius:9px;
  padding:9px 11px;font-family:inherit;font-size:13px;color:var(--ink);resize:vertical}
.note-add textarea:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.note-add button{align-self:flex-start}
.note-list{display:flex;flex-direction:column;gap:10px}
.note{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:9px 11px}
.note-legacy{border-style:dashed}
.note-body{font-size:13px;color:var(--ink);white-space:pre-wrap;line-height:1.5}
.note-when{font-size:11px;color:var(--ink-3);margin-top:4px}
.btn.sm{padding:8px 14px;font-size:12.5px}
@media(max-width:900px){.lead-grid{grid-template-columns:1fr}}
/* clickable dashboard tiles, feed & task meta */
a.kpi,a.s{text-decoration:none;color:inherit;cursor:pointer;
  transition:border-color .12s,box-shadow .12s,transform .12s}
a.kpi:hover,a.s:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(229,114,42,.13);transform:translateY(-2px)}
.feed-link{display:block;text-decoration:none;color:inherit;cursor:pointer;
  border-radius:8px;margin:-2px -8px;padding:6px 8px}
.feed-link:hover{background:var(--surface-2)}
.feed-link:hover .ft b{color:var(--accent-ink)}
.task .tmeta{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.task .tmeta a,.taskrow .meta a{color:var(--accent-ink);font-weight:700;text-decoration:none}
.task .tmeta a:hover,.taskrow .meta a:hover{text-decoration:underline}
.l-nmlink{color:inherit;text-decoration:none;cursor:pointer}
.l-nmlink:hover{color:var(--accent-ink);text-decoration:underline}
.cname .l-av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:#fff}
.link{color:var(--accent-ink);font-weight:700;font-size:12.5px;text-decoration:none;cursor:pointer}
.filters{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.filters .f{padding:7px 13px;border-radius:20px;border:1px solid var(--border);background:var(--surface);
  font-size:12.5px;font-weight:700;color:var(--ink-2);cursor:pointer;text-decoration:none}
.filters .f.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
/* Kind chips wear the same colors as their badges (buyer/seller/renter). */
.filters .f-buyer{color:#2A5EAA;background:#E7EFFB;border-color:#CFE0F6}
.filters .f-buyer.on{background:#2A5EAA;border-color:#2A5EAA;color:#fff}
.filters .f-seller{color:#B0521A;background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}
.filters .f-seller.on{background:var(--accent);border-color:var(--accent);color:#fff}
.filters .f-renter{color:#1E8A63;background:#E3F5EC;border-color:#CBEBDA}
.filters .f-renter.on{background:#1E8A63;border-color:#1E8A63;color:#fff}
:root[data-theme="dark"] .filters .f-buyer{color:#93B7F0;background:#1B2A44;border-color:#274063}
:root[data-theme="dark"] .filters .f-seller{color:#F0A24A;background:#332216;border-color:#4A331C}
:root[data-theme="dark"] .filters .f-renter{color:#5FD3A2;background:#12301F;border-color:#1E4632}

/* ---------------------------------------------------- follow-ups */
.tasklist{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.taskrow{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-2)}
.taskrow:last-child{border-bottom:none}
.taskrow form{display:flex}
.cb{width:20px;height:20px;border-radius:6px;border:2px solid var(--border);background:var(--surface);cursor:pointer;flex:none;
  display:grid;place-items:center;color:#fff;font-size:12px;font-weight:900;padding:0;line-height:1}
.cb.done{background:var(--closed);border-color:var(--closed)}
.taskrow .tt{font-size:13.5px}
.taskrow .tt.done{text-decoration:line-through;color:var(--ink-3)}
.taskrow .meta{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.taskrow .due{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--showing)}

/* ---------------------------------------------------- billing */
.billcard{max-width:560px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:22px}
.billcard .plan-name{font-family:inherit;font-weight:800;font-size:20px}
.billcard .plan-price{font-size:34px;font-weight:800;letter-spacing:-1px;margin:6px 0}
.billcard .plan-price span{font-size:14px;font-weight:600;color:var(--ink-3)}
.statusline{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  background:var(--accent-soft);color:var(--accent-ink);padding:6px 12px;border-radius:20px;margin-top:6px}
.soon{margin-top:20px;padding:14px 16px;border:1px dashed var(--border);border-radius:12px;
  background:var(--surface-2);font-size:12.5px;color:var(--ink-2)}

/* danger button + row actions (edit / delete) */
.btn.danger{background:var(--danger);box-shadow:none}
.rowacts{white-space:nowrap;text-align:right}
.rowacts .link{margin-left:14px}
.link.del{background:none;border:none;font:inherit;cursor:pointer;color:var(--danger)}
.addsource{margin-top:12px}
.addsource>summary{font-size:12.5px;font-weight:700;color:var(--accent-ink);cursor:pointer;list-style:none}
.addsource>summary::-webkit-details-marker{display:none}
/* dedicated-number search results */
.numres{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--border);
  border-radius:10px;margin-top:9px;background:var(--surface)}
.numres .n{font-weight:800;font-size:14px}
.numres .caps{font-size:11px;color:var(--ink-3);margin-top:1px}
.numres .spacer{margin-left:auto}

/* ------------------------------------------- account & billing */
.frm2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field.wide{grid-column:1 / -1}
.field textarea{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
  padding:10px 12px;font-family:inherit;font-size:13.5px;color:var(--ink);resize:vertical;min-height:64px}
.field textarea:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.chan-row{display:flex;align-items:center;gap:12px;padding:13px 4px;border-top:1px solid var(--border-2)}
.chan-row:first-child{border-top:none}
.chan-row .ci{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:16px;flex:none}
.chan-row .cinfo{flex:1;min-width:0}
.chan-row .cinfo b{font-size:13px}
.chan-row .cinfo span{display:block;font-size:11.5px;color:var(--ink-3)}
.stbadge{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:20px;white-space:nowrap}
.stbadge.on{background:#25D36618;color:#128C4B}
.stbadge.pend{background:color-mix(in srgb,var(--showing) 18%,transparent);color:var(--showing)}
.stbadge.off{background:var(--surface-2);color:var(--ink-3)}
/* a no-JS On/Off toggle rendered as a submit chip (a checkbox+label pair) */
.toggle{display:inline-flex;border:1px solid var(--border);border-radius:20px;overflow:hidden}
.toggle button{border:none;background:var(--surface-2);color:var(--ink-3);font:inherit;font-size:10.5px;
  font-weight:800;padding:4px 11px;cursor:pointer}
.toggle button.sel{background:#25D366;color:#fff}
.toggle button.sel.no{background:var(--ink-3)}
.cardbrand{width:46px;height:31px;border-radius:6px;background:linear-gradient(135deg,#1A1F71,#2A3B9E);color:#fff;
  font-size:11px;font-weight:800;display:grid;place-items:center;letter-spacing:.5px;flex:none;
  overflow:hidden;white-space:nowrap;padding:0 3px}
.billcol{display:flex;flex-direction:column;gap:18px}
.billrow{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px}
.billrow:hover{background:var(--surface-2)}
.billrow .bd{font-size:13px;font-weight:700}
.billrow .bsub{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.billrow .amt{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums;font-size:13.5px}
.paidpill{font-size:10.5px;font-weight:800;letter-spacing:.3px;padding:2px 9px;border-radius:999px;
  color:var(--closed);background:rgba(34,160,90,.12)}
.paidpill.pend{color:var(--accent-ink);background:rgba(229,114,42,.12)}
.plan{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:720px}
.plan.plan-3{grid-template-columns:repeat(3,1fr);max-width:1040px}
.plancard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;position:relative;
  text-decoration:none;color:inherit;display:block}
a.plancard{cursor:pointer}
@media(max-width:900px){.plan.plan-3{grid-template-columns:1fr}}
.plancard.feat{border-color:var(--accent);box-shadow:0 10px 30px rgba(229,114,42,.15)}
.plancard .ribbon{position:absolute;top:-11px;left:22px;background:var(--accent);color:#fff;font-size:10.5px;
  font-weight:800;padding:4px 10px;border-radius:20px;letter-spacing:.3px}
.plancard h3{margin:0;font-size:15px;font-weight:800}
.plancard .price{font-size:34px;font-weight:800;letter-spacing:-1.5px;margin:10px 0 2px}
.plancard .price span{font-size:14px;font-weight:600;color:var(--ink-3)}
.plancard ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:10px}
.plancard li{font-size:12.5px;display:flex;gap:9px;align-items:flex-start;color:var(--ink-2)}
.plancard li .ck{color:var(--closed);font-weight:800;flex:none}
.plancard .current{margin-top:16px;text-align:center;font-size:12px;font-weight:800;color:var(--closed)}
button.plancard.clickable{width:100%;text-align:left;font-family:inherit;cursor:pointer;color:inherit;display:block}
button.plancard.clickable:hover{border-color:var(--accent);box-shadow:0 8px 22px rgba(229,114,42,.16)}
/* profile photo avatar + inline images in sidebar circles */
.acct-av{width:64px;height:64px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;
  font-size:20px;font-weight:800;color:#fff;background:linear-gradient(135deg,#3E5169,#5B7295)}
.acct-av img{width:100%;height:100%;object-fit:cover}
.brand .logo img,.sb-foot .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.notewrap{margin-top:28px;padding:16px 18px;border:1px dashed var(--border);border-radius:12px;
  background:var(--surface-2);font-size:12.5px;color:var(--ink-2)}
.notewrap b{color:var(--ink)}
.danger-box{margin-top:22px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--danger) 45%,var(--border));
  border-radius:12px;background:color-mix(in srgb,var(--danger) 5%,transparent);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logout-btn{background:transparent;border:1px solid var(--danger);color:var(--danger);border-radius:10px;
  padding:10px 16px;font-weight:800;cursor:pointer;font-family:inherit;font-size:13px}
.logout-btn:hover{background:var(--danger);color:#fff}
.okmsg{margin-bottom:16px;padding:11px 15px;border-radius:10px;font-size:13px;font-weight:700;
  background:#25D36618;color:#128C4B;border:1px solid #25D36633}
.errmsg{margin-bottom:16px;padding:11px 15px;border-radius:10px;font-size:13px;font-weight:700;
  background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 30%,transparent)}

/* Calls page */
.kpi .k-top{display:flex;align-items:center}
.kpi .k-delta{font-size:11.5px;color:var(--ink-3);font-weight:700;margin-top:3px}
.kpi .k-delta.up{color:var(--closed)}
.dir{display:inline-block;font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px}
.dir.in{background:color-mix(in srgb,var(--contacted) 15%,transparent);color:var(--contacted)}
.dir.out{background:color-mix(in srgb,var(--closed) 15%,transparent);color:var(--closed)}
.dir.miss{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.addpipe{background:var(--surface-2);border:1px solid var(--border);color:var(--ink-2);border-radius:9px;
  padding:6px 13px;font-weight:800;cursor:pointer;font-family:inherit;font-size:12.5px}
.addpipe:hover{border-color:var(--accent);color:var(--accent-ink)}
.addpipe.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.addpipe.primary:hover{filter:brightness(1.05);color:#fff}
.recplay{height:34px;max-width:230px;vertical-align:middle}
.editrow>td{background:var(--surface-2);padding:0}
.editpanel .editform{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;padding:18px 20px}
.editpanel .field{margin-bottom:0;flex:1 1 170px}
.editpanel .field.big{flex:2 1 280px}
.editpanel .btn.sm{align-self:flex-end}

/* Messages inbox */
.msgwrap{display:grid;grid-template-columns:320px 1fr;gap:0;border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;background:var(--surface);height:calc(100vh - 180px);min-height:460px}
.threads{border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0}
.threads .th-h{padding:14px 15px;border-bottom:1px solid var(--border-2);display:flex;align-items:center;gap:8px}
.threads .th-h b{font-size:14px;font-weight:800}
.threads .th-h .ct{margin-left:auto;font-size:11px;color:var(--ink-3);font-weight:700}
.chanbar{display:flex;gap:6px;padding:9px 12px;border-bottom:1px solid var(--border-2)}
.chanbar .cf{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:20px;border:1px solid var(--border);
  background:var(--surface);color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.chanbar .cf.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.ch{font-size:9px;font-weight:800;padding:1px 6px;border-radius:5px;letter-spacing:.3px;flex:none}
.ch.wa{background:#25D36622;color:#128C4B}
.ch.sms{background:color-mix(in srgb,var(--contacted) 16%,transparent);color:var(--contacted)}
:root[data-theme="dark"] .ch.wa{background:#25D36622;color:#3ED98A}
.thread{display:flex;gap:11px;padding:13px 15px;cursor:pointer;border-bottom:1px solid var(--border-2);
  text-decoration:none;color:inherit}
.thread:hover{background:var(--surface-2)}
.thread.active{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
:root[data-theme="dark"] .thread.active{background:#20242D;box-shadow:inset 3px 0 0 var(--accent)}
.thread .t-av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-weight:800;font-size:13px;color:#fff}
.thread .t-mid{min-width:0;flex:1}
.thread .t-nm{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:7px}
.thread .t-nm .u{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.thread .t-pre{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.thread .t-time{font-size:10.5px;color:var(--ink-3);font-weight:600;flex:none}
.convo{display:flex;flex-direction:column;min-width:0;min-height:0}
.convo .cv-h{padding:12px 18px;border-bottom:1px solid var(--border-2);display:flex;align-items:center;gap:12px}
.convo .cv-h .t-av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-weight:800;font-size:15px;color:#fff}
.convo .cv-h .cv-nm{font-size:15px;font-weight:800}
.convo .cv-h .cv-sub{font-size:11.5px;color:var(--ink-3);font-weight:600}
.convo .cv-h .acts{margin-left:auto;display:flex;gap:8px}
.iconbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--surface);
  cursor:pointer;display:grid;place-items:center;font-size:15px;color:var(--ink-2);text-decoration:none}
.iconbtn:hover{border-color:var(--accent);color:var(--accent-ink)}
.addpanel{display:none;border-bottom:1px solid var(--border-2);background:var(--surface-2)}
.addpanel.open{display:block}
.stream{flex:1;min-height:0;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:12px;
  background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 5%,transparent),transparent 40%),var(--surface-2)}
.daysep{text-align:center;font-size:11px;color:var(--ink-3);font-weight:700;margin:6px 0}
.bub{max-width:74%;padding:10px 13px;border-radius:16px;font-size:13.5px;line-height:1.45;position:relative;box-shadow:var(--shadow-sm)}
.bub .bt{font-size:10px;color:var(--ink-3);margin-top:5px;font-weight:600}
.bub.in{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:5px}
.bub.out{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:5px}
.bub.out .bt{color:rgba(255,255,255,.75)}
.auto{align-self:center;background:transparent;border:1px dashed var(--border);color:var(--ink-2);
  font-size:12px;max-width:82%;text-align:center;border-radius:10px;padding:8px 12px}
.auto b{color:var(--accent-ink)}
:root[data-theme="dark"] .auto b{color:var(--accent)}
.composer{border-top:1px solid var(--border-2);padding:12px 16px;display:flex;gap:10px;align-items:center;background:var(--surface)}
.composer input[name="body"]{flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:22px;
  padding:11px 16px;font-family:inherit;font-size:13.5px;color:var(--ink)}
.composer .send{width:40px;height:40px;border-radius:50%;background:var(--accent);border:none;color:#fff;
  cursor:pointer;font-size:16px;flex:none;box-shadow:0 4px 12px rgba(229,114,42,.3)}

.ai-btn{margin-left:8px;font-size:11px;font-weight:800;color:var(--accent-ink);background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:20px;padding:2px 10px;cursor:pointer;font-family:inherit}
.ai-btn:hover{border-color:var(--accent)}
.ai-btn:disabled{opacity:.6;cursor:default}

/* Signup — Team (custom) box */
.teambox{display:flex;align-items:center;gap:12px;margin:12px 0 20px;padding:13px 15px;border-radius:12px;
  border:1.5px dashed var(--accent);background:var(--accent-soft);text-decoration:none;color:inherit}
.teambox:hover{border-style:solid}
.teambox .t{font-size:14px;font-weight:800}
.teambox .b{font-size:11.5px;color:var(--ink-2);margin-top:2px}
.teambox .call{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--accent-ink);white-space:nowrap}

/* Listings */
.lgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.lcard{background:var(--surface);border:1px solid var(--border);border-radius:13px;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .12s,border-color .12s,box-shadow .12s}
.lcard:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.10)}
.lcard .ph{height:96px;position:relative;display:flex;align-items:flex-start;justify-content:space-between;padding:8px;
  background:linear-gradient(135deg,#C9D3DE 0%,#E8EDF2 100%)}
.lcard .ph::before{content:"⌂";position:absolute;inset:0;display:grid;place-items:center;font-size:38px;color:#A9B6C4}
.lcard .ph.rented{background:linear-gradient(135deg,#D3DCCB 0%,#E6ECDD 100%)}
:root[data-theme="dark"] .lcard .ph{background:linear-gradient(135deg,#28313D,#39485A)}
:root[data-theme="dark"] .lcard .ph::before{color:#5B6C7E}
.lcard .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.lcard .ph .st,.lcard .ph .feat,.lcard .ph .phc{position:relative;z-index:2}
.lcard .ph .st{font-size:9px;font-weight:800;padding:3px 8px;border-radius:20px;background:var(--surface);color:var(--ink)}
.lcard .ph .st.ok{color:var(--closed)} .lcard .ph .st.pend{color:var(--showing)} .lcard .ph .st.rent{color:var(--ink-2)}
.lcard .ph .feat{font-size:9px;font-weight:800;padding:3px 8px;border-radius:20px;background:var(--accent);color:#fff}
.lcard .ph .phc{position:absolute;right:7px;bottom:7px;font-size:9.5px;font-weight:700;background:rgba(0,0,0,.55);color:#fff;padding:2px 7px;border-radius:20px}
.lcard .lb{padding:15px 15px 15px}
.lcard .lb-head{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.lcard .lb-head .p{margin:0}
.lcard .lb-head .lstat:first-of-type{margin-left:auto}
.lstat{font-size:11.5px;font-weight:800;padding:4px 11px;border-radius:20px;background:var(--surface-2);color:var(--ink);border:1px solid var(--border-2)}
.lstat-ok{color:var(--closed)} .lstat-pend{color:var(--showing)} .lstat-rent{color:var(--ink-2)}
.lstat.lfeat{background:var(--accent);color:#fff;border-color:var(--accent)}
.lcard .lb .p{font-size:21px;font-weight:800;letter-spacing:-.6px}
.lcard .lb .a{font-size:14.5px;font-weight:800;margin-top:3px;letter-spacing:-.2px}
.lcard .lb .d{font-size:13px;color:var(--ink-2);font-weight:600;margin-top:5px;line-height:1.45;min-height:18px}
.lcard .ltags{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:10px}
.lcard .ltags .chip{font-size:11.5px;padding:3px 10px}
.mc-tag{font-size:11.5px;font-weight:800;color:var(--ink-3)}
.mc-tag.mc-on{color:var(--closed)}
.lcard .stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:13px;padding-top:12px;border-top:1px solid var(--border-2)}
.lcard .stats .s{font-size:10.5px;color:var(--ink-3);font-weight:700;text-align:center;position:relative;letter-spacing:.1px}
.lcard .stats .s + .s::before{content:"";position:absolute;left:0;top:1px;bottom:1px;width:1px;background:var(--border-2)}
.lcard .stats .s b{display:block;font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.3px;margin-bottom:3px}
.lcard .row{display:flex;gap:6px;margin-top:12px}
.lcard .row .btn{flex:1;justify-content:center;padding:9px 10px;font-size:13.5px;text-align:center}
.mark-btn{width:100%;background:none;border:1px solid var(--border);border-radius:9px;padding:8px;font-size:12.5px;
  font-weight:700;color:var(--ink-3);cursor:pointer;font-family:inherit}
.mark-btn:hover{border-color:var(--closed);color:var(--closed)}
/* post/edit form */
.newform{background:var(--surface);border:1px solid var(--accent);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.newform .nf-h{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--border-2);background:var(--accent-soft)}
:root[data-theme="dark"] .newform .nf-h{background:#20242D}
.newform .nf-h h3{margin:0;font-size:15px;font-weight:800}
.nf-b{padding:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.nf-b .field.wide{grid-column:1 / -1}
.addrrow{display:grid;grid-template-columns:2.4fr 1fr;gap:14px;align-items:end}
.addrrow .field{margin:0}
.star{color:var(--danger);font-weight:800;font-size:13px}
.rowacts .txt{color:var(--accent-ink);font-weight:800}
@media (max-width:560px){.addrrow{grid-template-columns:1fr}}
.nf-b .field textarea{resize:vertical;min-height:70px}
.featrow{display:flex;flex-wrap:wrap;gap:8px}
.featrow .fc{font-size:12px;font-weight:600;padding:7px 12px;border-radius:20px;border:1px solid var(--border);
  background:var(--surface-2);cursor:pointer;color:var(--ink-2);user-select:none}
.featrow .fc input{position:absolute;opacity:0;width:0;height:0}
.featrow .fc:has(input:checked){background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
:root[data-theme="dark"] .featrow .fc:has(input:checked){color:var(--accent)}
.photostrip{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pthumb{position:relative;width:84px;height:64px;border-radius:9px;overflow:hidden;border:1px solid var(--border)}
.pthumb img{width:100%;height:100%;object-fit:cover}
.pdel{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:none;background:rgba(0,0,0,.6);
  color:#fff;font-size:11px;cursor:pointer;line-height:1}
.brokerbox{border:1px solid color-mix(in srgb,var(--showing) 45%,var(--border));border-radius:14px;padding:18px 18px 16px;
  background:color-mix(in srgb,var(--showing) 9%,var(--surface))}
:root[data-theme="dark"] .brokerbox{background:color-mix(in srgb,var(--showing) 14%,var(--surface))}
.brokerbox .bh{font-size:12.5px;font-weight:800;color:color-mix(in srgb,var(--showing) 60%,var(--ink));
  margin-bottom:14px;letter-spacing:.2px}
/* Inputs inside the Private box read as their OWN surface — crisp white fields
   on the warm-tinted card, clearly different from the off-white fields above. */
.brokerbox .field input,.brokerbox .field select{background:var(--surface);
  border-color:color-mix(in srgb,var(--showing) 28%,var(--border))}
.brokerbox .field input:focus,.brokerbox .field select:focus{border-color:var(--showing);outline-color:var(--showing)}
.brokerbox .field label{color:color-mix(in srgb,var(--showing) 45%,var(--ink-2))}
.brokerbox .brow{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.brokerbox .brow3{grid-template-columns:repeat(3,1fr)}
.doclist{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.docitem{display:inline-flex;align-items:center;gap:6px;background:var(--surface);
  border:1px solid var(--border);border-radius:8px;padding:5px 6px 5px 10px;font-size:12.5px;font-weight:700}
.docitem a{color:var(--accent-ink);text-decoration:none}
.docdel{border:none;background:var(--surface-2);color:var(--ink-3);width:20px;height:20px;
  border-radius:50%;cursor:pointer;font-size:11px;line-height:1;font-family:inherit}
.docdel:hover{background:var(--danger);color:#fff}
.brokerbox input[type=file]{font-size:12.5px;color:var(--ink-2)}
/* listing photo thumbnails */
.photolist{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.photoitem{position:relative;width:92px;height:92px;border-radius:10px;overflow:hidden;border:1px solid var(--border)}
.photoitem img{width:100%;height:100%;object-fit:cover;display:block}
.photodel{position:absolute;top:4px;right:4px;border:none;background:rgba(20,22,28,.72);color:#fff;
  width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:11px;line-height:1;font-family:inherit}
.photodel:hover{background:var(--danger)}
@media (max-width:640px){.brokerbox .brow3{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.brokerbox .brow,.brokerbox .brow3{grid-template-columns:1fr}}
.nf-foot{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--border-2);margin-top:4px}
.postpick{display:flex;gap:10px;flex-wrap:wrap}
.postopt{border:1.5px solid var(--border);border-radius:12px;padding:13px 15px;flex:1 1 240px;cursor:pointer;position:relative;background:var(--surface)}
.postopt input{position:absolute;opacity:0;width:0;height:0}
.postopt:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:0 4px 14px rgba(229,114,42,.14)}
:root[data-theme="dark"] .postopt:has(input:checked){background:#20242D}
.postopt .t{font-size:14px;font-weight:800;display:block}
.postopt .s{font-size:12px;color:var(--ink);font-weight:600;margin-top:3px;display:block}
/* CRM-only option: green (private) instead of orange (published) */
.postopt.crm:has(input:checked){border-color:#1E8A63;background:#E9F7F0;box-shadow:0 4px 14px rgba(30,138,99,.16)}
:root[data-theme="dark"] .postopt.crm:has(input:checked){background:#16241E;border-color:#2FB37E}

/* Mobile top bar + slide-in nav drawer (hidden on desktop) */
.mtopbar{display:none}
.hamb{font-size:22px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:8px;color:var(--ink);user-select:none}
.navscrim{display:none}

@media(max-width:1000px){
  .app{display:block}
  /* sidebar becomes an off-canvas drawer */
  .sidebar{position:fixed;top:0;left:-300px;width:270px;height:100vh;z-index:70;
    flex-direction:column;overflow-y:auto;transition:left .22s ease;box-shadow:0 0 40px rgba(0,0,0,.18)}
  .navtoggle:checked ~ .sidebar{left:0}
  .navscrim{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:65}
  .navtoggle:checked ~ .navscrim{display:block}
  .mtopbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:60;
    background:var(--surface);border-bottom:1px solid var(--border);padding:10px 14px}
  .mtopbar .mtitle{font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mtopbar .mplan{margin-left:auto;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
    color:var(--accent-ink);background:var(--accent-soft);padding:4px 10px;border-radius:20px;text-decoration:none}
  .main{width:100%}
  /* grid collapses */
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .snap{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:1fr}
  .plan.plan-3{grid-template-columns:1fr}
  .msgwrap{grid-template-columns:1fr;height:auto}
  .threads{max-height:320px}
  .stream{min-height:360px}
  .lgrid{grid-template-columns:repeat(2,1fr)}
  .nf-b{grid-template-columns:1fr 1fr}
  .brokerbox .brow{grid-template-columns:1fr}
  /* page chrome */
  .topbar{flex-wrap:wrap;gap:10px;padding:16px 18px}
  .topbar h1{font-size:21px}
  .topbar .search{order:3;width:100%}
  .filters{flex-wrap:wrap}
  .tablecard{overflow-x:auto}
  .kpi .k-val{font-size:24px}
}
@media(max-width:600px){
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .snap{grid-template-columns:1fr 1fr}
  .lgrid{grid-template-columns:1fr}
  .nf-b{grid-template-columns:1fr}
  .postpick{flex-direction:column}
  .main [style*="padding:24px 26px"],.main [style*="padding:18px 26px"]{padding-left:16px !important;padding-right:16px !important}
}