:root{--acc:#5b9dd9;--acc2:#3d7fb8}
.logo .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--acc),var(--acc2));
  color:#08131d;display:grid;place-items:center;font:800 13px Inter,sans-serif;letter-spacing:.5px;flex-shrink:0}
.nav button.on{box-shadow:inset 3px 0 0 var(--acc)}
.btn{background:var(--acc);color:#08131d}
.btn:hover{background:var(--acc2)}
.pill.acc,.prog i,.kbar .trk i{background:var(--acc);border-color:var(--acc);color:#08131d}
.tour-dots span.on{background:var(--acc)}
.clients{display:grid;gap:13px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.client{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;
  cursor:pointer;transition:border-color .15s,transform .12s}
.client:hover{border-color:var(--acc)}
.client:active{transform:scale(.995)}
.client .top{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.client .dot{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  font:800 13px Inter,sans-serif;flex-shrink:0;color:#0d0b07}
.client h3{font-size:16px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.client .nums{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.client .nums div{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 6px;text-align:center}
.client .nums b{font:400 19px Anton,sans-serif;display:block;line-height:1}
.client .nums small{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:700}
.client .foot{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.needs{color:var(--gold);font-weight:700}
.svc{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.tag{font:800 9.5px/1 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;padding:5px 8px;border-radius:5px;
  background:var(--panel2);border:1px solid var(--line);color:var(--muted)}
.tag.seo,.tag.aeo{color:#7fc4a0;border-color:#2b4a34}
.tag.social{color:#7ba5c4;border-color:#2b3f4a}
.tag.church{color:#e0b34a;border-color:#4a3f26}
.tag.website{color:#c49ad4;border-color:#3f2b4a}
.tag.gbp{color:#d4a574;border-color:#4a3a2b}
code{background:var(--panel2);padding:1px 5px;border-radius:4px;font-size:12px}
.alarm{font-size:12.5px;font-weight:700;padding:8px 11px;border-radius:8px;margin-bottom:11px;
  background:var(--panel2);border:1px solid var(--line);color:var(--muted)}
.alarm.high{background:#2c1512;border-color:#5a2420;color:#f0a49e}

/* ---- weekly email panel + preview ---- */
.cap{font:800 9.5px/1 Inter,sans-serif;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.hint{font-size:12.5px;line-height:1.55;color:var(--muted);margin:6px 0 10px}
.what{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.what b{font-size:14px;font-weight:600}
select.inp,input.inp{width:auto;min-width:132px}
select.inp.sm,input.inp.sm{padding:7px 9px;font-size:13px;min-width:118px}

.modal{position:fixed;inset:0;background:rgba(8,6,3,.72);backdrop-filter:blur(3px);
  display:grid;place-items:start center;padding:34px 18px;overflow:auto;z-index:200}
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;width:100%;max-width:520px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.sheet.wide{max-width:660px}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-top:14px}
.tab{background:none;border:0;color:var(--muted);cursor:pointer;padding:9px 13px;
  font:700 12.5px Inter,sans-serif;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--text)}
.tab.on{color:var(--acc);border-bottom-color:var(--acc)}
.subjline{background:var(--panel2);border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;font-size:14px;font-weight:600}
/* The email body is authored for a mail client, so it is light-on-white by
   design. Show it on its own paper rather than fighting the console's dark UI. */
.mailframe{background:#fff;color:#1b1c1f;border-radius:11px;margin-top:14px;
  max-height:52vh;overflow:auto;border:1px solid var(--line)}
.mailframe a{color:#1b1c1f}