/* ════════════════════════════════════════════════════════════════════
   ERx SMS Bulk — standalone app styles
   Themed on the same tokens as ERx Hub so brand feels unified, but the
   accent color is emerald (messaging feel) instead of indigo.
   ════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  overflow: hidden;
}

/* ─── Tokens (dark default) ─── */
:root, :root[data-theme="dark"] {
  --bg:         #0a0e17;
  --bg-elev:    #0f141d;
  --surface:    #131a24;
  --surface-2:  #1a2231;
  --border:     rgba(148,163,184,0.12);
  --border-2:   rgba(148,163,184,0.24);
  --text:       #e6eaf2;
  --text-2:     #b0b8c8;
  --muted:      #6b7a94;
  --accent:     #10b981;
  --app-crm:    #a78bfa;
  --green:      #10b981;
  --amber:      #f59e0b;
  --red:        #ef4444;
  --blue:       #38bdf8;
  --grid-line:  rgba(148,163,184,0.08);
}
:root[data-theme="light"] {
  --bg:         #f7f8fa;
  --bg-elev:    #eef1f5;
  --surface:    #ffffff;
  --surface-2:  #f4f6f9;
  --border:     rgba(15,23,42,0.10);
  --border-2:   rgba(15,23,42,0.18);
  --text:       #0f172a;
  --text-2:     #475569;
  --muted:      #94a3b8;
  --accent:     #10b981;
  --app-crm:    #7c3aed;
  --green:      #059669;
  --amber:      #d97706;
  --red:        #dc2626;
  --blue:       #0284c7;
  --grid-line:  rgba(15,23,42,0.06);
}

/* ─── Splash ─── */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 12px;
  transition: opacity .3s, visibility .3s;
}
.splash.out { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-ring {
  width: 40px; height: 40px;
  border: 3px solid var(--surface-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.splash-text { color: var(--muted); font-size: 12.5px; }

/* ─── Shell ─── */
.app-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  height: 100vh;
}
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 14px 10px;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.sidebar-brand-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; letter-spacing: 0.5px;
  background: linear-gradient(135deg, #10b981, #22d3ee);
  color: white;
}
.sidebar-brand-text { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.1; }
.sidebar-brand-sub  { font-size: 10.5px; color: var(--muted); }

/* column flex so the "Other apps" group can be pushed to the bottom of the
   rail with margin-top:auto — in a plain block it would sit under Help with a
   screen of empty rail beneath it. */
.sidebar-nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
/* the way out of this app: separated by a rule, and last. */
.sidebar-section-out {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--sidebar-border);
}
.sidebar-section-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted);
  padding: 8px 8px 6px;
}
.sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  color: var(--text-2); text-decoration: none;
  font-size: 13px; font-weight: 500;
  transition: background .08s, color .08s;
}
.sidebar-item i { width: 14px; height: 14px; }
.sidebar-item:hover { background: var(--surface-2); color: var(--text); }
.sidebar-item.active {
  background: color-mix(in srgb, var(--accent) 15%, var(--surface-2));
  color: var(--accent);
}

.sidebar-footer {
  display: flex; gap: 6px;
  padding: 8px 4px 0;
  border-top: 1px solid var(--border);
  margin-top: 10px;
}
.sidebar-icon-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 6px; border-radius: 5px;
  display: flex; align-items: center;
}
.sidebar-icon-btn:hover { background: var(--surface-2); color: var(--text); }
.sidebar-icon-btn i { width: 15px; height: 15px; }

/* ─── Main ─── */
.main { display: flex; flex-direction: column; overflow: hidden; }
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.top-crumbs { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.crumb { color: var(--muted); }
.crumb.crumb-active { color: var(--text); font-weight: 600; }
.crumb-sep { width: 12px; height: 12px; color: var(--muted); }

.live-indicator {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px; color: var(--text-2);
  cursor: pointer; user-select: none;
  transition: background .1s;
}
.live-indicator:hover { background: var(--bg-elev); border-color: var(--border-2); }

/* Sync status floating panel */
.sync-panel {
  position: fixed; z-index: 10001;
  width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  padding: 12px 14px;
  animation: pop-in .12s ease-out;
}
@keyframes pop-in { from { transform: translateY(-4px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sync-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sync-panel-title { font-size: 12.5px; font-weight: 700; color: var(--text); }
.sync-panel-close {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 14px; padding: 2px 6px;
}
.sync-panel-close:hover { color: var(--text); }
.sync-panel-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; border-bottom: 1px dashed var(--border);
  font-size: 11.5px;
}
.sync-panel-row:last-child { border-bottom: none; }
.sync-panel-row > span:first-child { color: var(--muted); }
.sync-status-badge {
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
}
.sync-status-badge.ok    { background: color-mix(in srgb, var(--green) 15%, var(--surface-2)); color: var(--green); }
.sync-status-badge.error { background: color-mix(in srgb, var(--red) 15%, var(--surface-2)); color: var(--red); }
.sync-status-badge.muted { background: var(--surface-2); color: var(--muted); }
.sync-panel-error {
  margin-top: 8px; padding: 8px 10px;
  background: color-mix(in srgb, var(--red) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--red) 25%, var(--border));
  border-radius: 5px;
  font-size: 11px; color: var(--red);
}
.sync-panel-error pre {
  white-space: pre-wrap; word-wrap: break-word;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  color: var(--text-2); margin: 0;
  max-height: 150px; overflow-y: auto;
}
.sync-panel-actions { display: flex; justify-content: flex-end; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--border); }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted);
}
.live-dot.idle    { background: var(--green); animation: pulse 2s infinite; }
.live-dot.syncing { background: var(--amber); animation: pulse 0.8s infinite; }
.live-dot.error   { background: var(--red); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  50%      { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
}

.view { flex: 1; overflow-y: auto; padding: 12px 14px; min-height: 0; }

/* ─── Empty / toasts ─── */
.empty {
  text-align: center; color: var(--muted); font-size: 12.5px;
  padding: 16px;
}
.toast {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: 8px 16px; border-radius: 6px;
  font-size: 12.5px; box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s;
  z-index: 10000;
}
.toast.show { opacity: 1; visibility: visible; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; font-size: 12px; font-weight: 500;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px;
  cursor: pointer; transition: background .1s;
}
.btn:hover { background: var(--bg-elev); }
.btn.btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn.btn-primary:hover { background: color-mix(in srgb, var(--accent) 90%, black); }
.btn.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.btn-sm { padding: 4px 10px; font-size: 11.5px; }
.btn i { width: 12px; height: 12px; }
.link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 11px; }

/* ─── Cards / tables ─── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
thead { position: sticky; top: 0; background: var(--surface); z-index: 1; }
th {
  text-align: left; white-space: nowrap;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
th.right { text-align: right; }
th.left  { text-align: left; }
td { padding: 8px 12px; font-size: 12.5px; border-bottom: 1px solid var(--border); }
td.mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
td.right { text-align: right; }
td.left  { text-align: left; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--bg-elev); }

/* ─── UNIFIED TOP CONTROL BAR (Batch + From + Template + Send) ─── */
.compose-topbar {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) minmax(180px, 1.2fr) minmax(180px, 1.4fr) auto;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  align-items: end;
  flex-shrink: 0;
}
.topbar-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.topbar-field label {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}
.topbar-field input,
.topbar-field select {
  width: 100%;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 6px 10px; font-size: 13px; font-family: inherit; outline: none;
  height: 32px;
}
.topbar-field input:focus, .topbar-field select:focus { border-color: var(--accent); }
.topbar-label-link {
  margin-left: auto; color: var(--accent); text-decoration: none;
  font-size: 9.5px; font-weight: 500; text-transform: none; letter-spacing: 0;
}
.topbar-label-link:hover { text-decoration: underline; }

.topbar-send { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.topbar-send .btn-send { padding: 6px 16px; font-size: 12.5px; height: 32px; }
.topbar-send .send-hint {
  font-size: 10px; color: var(--amber);
  background: color-mix(in srgb, var(--amber) 10%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--amber) 25%, var(--border));
  padding: 3px 8px; border-radius: 4px;
  max-width: 260px; text-align: right;
}
@media (max-width: 1100px) {
  .compose-topbar { grid-template-columns: 1fr 1fr; }
  .topbar-send { grid-column: 1 / -1; align-items: stretch; }
}

/* ─── Filter accordion ─── */
.filter-accordion {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.filter-accordion summary {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; cursor: pointer;
  font-size: 11.5px; font-weight: 600; color: var(--text);
  user-select: none; list-style: none;
}
.filter-accordion summary::-webkit-details-marker { display: none; }
.filter-accordion summary i { width: 13px; height: 13px; }
.filter-count-badge {
  margin-left: auto;
  font-size: 10px; padding: 2px 8px; border-radius: 999px;
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
}
.filter-count-badge.has-active {
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.filter-accordion .chev { transition: transform .12s; }
.filter-accordion[open] .chev { transform: rotate(180deg); }

.filter-body {
  padding: 10px; border-top: 1px dashed var(--border);
  background: var(--surface);
  max-height: 320px; overflow-y: auto;
}
.filter-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.filter-cell {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 8px;
  display: flex; flex-direction: column; gap: 5px;
}
.filter-cell-head {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted);
}
.filter-cell-head i { width: 11px; height: 11px; }
.filter-cell-count { margin-left: auto; font-family: 'JetBrains Mono', monospace; }
.filter-cell-search {
  width: 100%; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 3px 6px; font-size: 11px; outline: none;
}
.filter-cell-search:focus { border-color: var(--accent); }
.filter-cell-options { max-height: 140px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.filter-opt {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 4px; border-radius: 3px;
  font-size: 11px; cursor: pointer;
}
.filter-opt:hover { background: var(--surface); }
.filter-opt.selected { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.filter-opt input { cursor: pointer; margin: 0; }
.filter-opt-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-opt-count { font-family: 'JetBrains Mono', monospace; color: var(--muted); font-size: 10px; }

.active-filter-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  min-height: 4px; padding: 2px 0;
}
.active-filter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 15%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  color: var(--text);
  font-size: 10.5px; cursor: pointer;
}
.active-filter-chip:hover { background: color-mix(in srgb, var(--red) 15%, var(--surface-2)); border-color: color-mix(in srgb, var(--red) 30%, var(--border)); }
.active-filter-chip i { width: 10px; height: 10px; color: var(--muted); }
.chip-dim { color: var(--muted); font-size: 10px; }
.chip-val { font-weight: 600; }
.clear-all-btn { margin-left: 4px; }

.list-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 2px;
  font-size: 11px; color: var(--muted);
  flex-wrap: wrap; gap: 6px;
}
.list-count { font-family: 'JetBrains Mono', monospace; }
.list-toolbar-actions { display: flex; align-items: center; gap: 4px; }
.toolbar-sep { color: var(--border-2); }
.link-btn-danger { color: var(--red); }
.link-btn-danger:hover { text-decoration: underline; }

.compose-pager {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 6px 0;
  flex-shrink: 0;
}
.compose-pager .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager-info { font-size: 11px; color: var(--muted); }

/* Recipient row: title + location badges */
.recipient-tags { margin-left: 6px; display: inline-flex; gap: 3px; flex-wrap: wrap; }
.r-tag {
  display: inline-block; padding: 0 5px; border-radius: 3px;
  font-size: 9px; font-weight: 600; letter-spacing: 0.03em;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted);
}
.r-tag-loc  { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 25%, var(--border)); }
.r-tag-type { color: var(--app-crm); border-color: color-mix(in srgb, var(--app-crm) 25%, var(--border)); }
.r-tag-pos  { color: var(--green); border-color: color-mix(in srgb, var(--green) 25%, var(--border)); font-weight: 700; }
.r-tag-job  { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 25%, var(--border)); }

.filter-cell-hint {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; margin-left: 3px;
  border-radius: 50%;
  background: var(--surface); color: var(--muted);
  font-size: 9px; font-weight: 700; cursor: help;
  font-family: 'JetBrains Mono', monospace;
}
.filter-cell-hint:hover { background: var(--bg-elev); color: var(--text); }

/* ─── Compose page ─── */
.compose-page {
  display: flex; flex-direction: column; gap: 8px;
  height: 100%; min-height: 100%;
}

.compose-grid {
  display: grid; grid-template-columns: 360px 1fr;
  gap: 8px;
  flex: 1;
  min-height: 0;
}
@media (max-width: 960px) { .compose-grid { grid-template-columns: 1fr; } }
.compose-col {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 0;
  overflow: hidden;
}
.col-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted);
}
.col-header-count { color: var(--text-2); font-family: 'JetBrains Mono', monospace; font-weight: 500; }

/* Recipients */
.compose-search {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface-2);
}
.compose-search i { width: 13px; height: 13px; color: var(--muted); }
.compose-search input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-size: 12.5px;
}
.compose-selected-strip {
  display: flex; flex-wrap: wrap; gap: 4px;
  min-height: 4px;
}
.sel-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--accent) 15%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  color: var(--text);
  border-radius: 999px; font-size: 10.5px;
  cursor: pointer;
}
.sel-chip i { width: 10px; height: 10px; color: var(--muted); }
.sel-chip:hover i { color: var(--red); }
.sel-chip-more {
  font-size: 10.5px; padding: 3px 8px;
  color: var(--muted);
}

.compose-list { flex: 1; overflow-y: auto; min-height: 0; }
.recipient-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 5px;
  cursor: pointer; border-bottom: 1px solid var(--border);
}
.recipient-row:hover { background: var(--bg-elev); }
.recipient-row.selected { background: color-mix(in srgb, var(--accent) 5%, var(--surface-2)); }
.recipient-row.blocked { opacity: 0.55; }
.recipient-row input { cursor: pointer; }
.recipient-body { min-width: 0; flex: 1; }
.recipient-name { font-size: 12.5px; font-weight: 600; }
.recipient-meta { font-size: 10.5px; color: var(--muted); }
.blocked-badge {
  font-size: 9px; padding: 1px 5px; margin-left: 5px;
  background: color-mix(in srgb, var(--red) 20%, var(--surface));
  color: var(--red); border-radius: 3px; font-weight: 700;
}

/* Composer */
.compose-composer textarea {
  width: 100%; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 10px; font-size: 13px; font-family: inherit;
  resize: vertical; outline: none;
}
.compose-composer textarea:focus { border-color: var(--accent); }
.template-picker {
  display: flex; align-items: center; gap: 6px; font-size: 12px;
}
.template-picker select {
  flex: 1; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 5px 8px; font-size: 12px;
}

.merge-palette {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 6px 0; font-size: 11px;
}
.merge-palette-label { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin-right: 4px; }
.merge-chip {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: 4px; padding: 2px 8px; font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; cursor: pointer;
}
.merge-chip:hover { background: color-mix(in srgb, var(--accent) 20%, var(--surface-2)); }

.compose-preview-wrap {
  padding-top: 8px; border-top: 1px dashed var(--border);
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.preview-title {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); font-weight: 700; margin-bottom: 6px;
}
.preview-title i { width: 12px; height: 12px; }
.compose-preview { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow-y: auto; }
.preview-warn {
  padding: 6px 10px; border-radius: 5px;
  background: color-mix(in srgb, var(--amber) 12%, var(--surface));
  color: var(--amber); font-size: 11px;
  display: flex; align-items: center; gap: 5px;
}
.preview-warn i { width: 12px; height: 12px; }
.preview-line {
  padding: 6px 10px; border-radius: 5px; background: var(--surface-2);
  border-left: 2px solid var(--accent);
}
.preview-name { font-size: 10.5px; color: var(--muted); font-weight: 600; margin-bottom: 3px; }
.preview-body { font-size: 12px; color: var(--text); line-height: 1.5; }
.preview-more { text-align: center; font-size: 11px; color: var(--muted); padding: 4px; }

/* Legacy .compose-actions no longer used — send lives in .compose-topbar */
.btn-send { padding: 8px 20px; font-size: 13px; }

/* ─── Conversations ─── */
.conv-page {
  display: flex; flex-direction: column; gap: 12px;
  height: 100%; min-height: 100%;
}
.conv-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; flex-shrink: 0; }
.conv-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.conv-title i { width: 16px; height: 16px; color: var(--accent); }

.conv-grid { display: grid; grid-template-columns: 340px 1fr; gap: 12px; flex: 1; min-height: 0; }
.conv-col { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
.conv-list-col { padding: 8px; }
.conv-search {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface-2); margin-bottom: 8px;
}
.conv-search i { width: 13px; height: 13px; color: var(--muted); }
.conv-search input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 12px; }
.conv-list { flex: 1; overflow-y: auto; }
.conv-item {
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.conv-item:hover { background: var(--bg-elev); }
.conv-item.active { background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); border-left: 2px solid var(--accent); padding-left: 8px; }
.conv-item-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.conv-item-name { font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item-time { font-size: 10px; color: var(--muted); flex-shrink: 0; }
.conv-item-meta { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.conv-item-num { font-size: 10.5px; color: var(--muted); }
.conv-item-count { font-size: 9.5px; background: var(--surface-2); color: var(--muted); padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); }
.conv-item-preview {
  font-size: 11.5px; color: var(--text-2); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-item-preview.incoming::before { content: '↓ '; color: var(--blue); }
.conv-item-preview.outgoing::before { content: '↑ '; color: var(--muted); }

.conv-item-name-unknown { color: var(--muted); font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 12px; }
.match-tag {
  display: inline-block; margin-left: 5px;
  padding: 1px 5px; border-radius: 3px;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  vertical-align: middle;
}
.match-tag-multi   { background: color-mix(in srgb, var(--amber) 20%, var(--surface)); color: var(--amber); cursor: help; }
.match-tag-zoho    { background: color-mix(in srgb, var(--accent) 15%, var(--surface)); color: var(--accent); }
.match-tag-unknown { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); font-style: italic; }

.thread-header { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.thread-header-name { font-size: 15px; font-weight: 700; }
.thread-header-num { font-size: 12px; color: var(--muted); }

.thread-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.msg {
  max-width: 70%; padding: 8px 12px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.4;
}
.msg-body { white-space: pre-wrap; word-wrap: break-word; }
.msg-meta { font-size: 10px; color: var(--muted); margin-top: 4px; }
.msg-bulk-tag { color: var(--accent); font-weight: 600; }
.msg-in { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); }
.msg-out { align-self: flex-end; background: color-mix(in srgb, var(--accent) 20%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); }

.thread-composer { padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.thread-sender { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.thread-sender select { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 4px 8px; font-size: 11.5px; }
.thread-input-row { display: flex; gap: 6px; }
.thread-input-row textarea {
  flex: 1; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 8px; font-size: 12.5px; resize: none; font-family: inherit; outline: none;
}
.thread-input-row textarea:focus { border-color: var(--accent); }

/* ─── Templates ─── */
.tpl-page, .hist-page, .bl-page { display: flex; flex-direction: column; gap: 12px; }
.tpl-head, .hist-head, .bl-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.tpl-title, .hist-title, .bl-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.tpl-title i, .hist-title i, .bl-title i { width: 16px; height: 16px; color: var(--accent); }
.tpl-actions { display: flex; align-items: center; gap: 12px; }
.toggle-line { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; }

.tpl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.tpl-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.tpl-card.archived { opacity: 0.55; }
.tpl-card-head { display: flex; justify-content: space-between; align-items: flex-start; }
.tpl-card-name { font-size: 14px; font-weight: 700; }
.tpl-archived-badge { font-size: 9.5px; color: var(--muted); font-weight: 600; }
.tpl-card-meta { font-size: 10.5px; color: var(--muted); text-align: right; }
.tpl-card-desc { font-size: 11.5px; color: var(--text-2); }
.tpl-card-body {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 8px; font-size: 11.5px; font-family: 'JetBrains Mono', monospace;
  white-space: pre-wrap; word-wrap: break-word; color: var(--text);
  max-height: 120px; overflow-y: auto;
}
.tpl-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tpl-card-actions { display: flex; gap: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }

.tpl-editor { display: flex; flex-direction: column; gap: 10px; padding: 6px; }
.tpl-editor-field { display: flex; flex-direction: column; gap: 4px; }
.tpl-editor-field label { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.tpl-editor-field input, .tpl-editor-field textarea {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 8px 10px; font-size: 12.5px; font-family: inherit; outline: none;
  resize: vertical;
}
.tpl-editor-warn { color: var(--amber); font-size: 11px; padding: 6px 10px; background: color-mix(in srgb, var(--amber) 8%, var(--surface)); border-radius: 5px; }
.tpl-editor-preview { padding: 8px 10px; background: var(--surface-2); border-radius: 5px; border-left: 2px solid var(--accent); }
.tpl-editor-actions { display: flex; justify-content: flex-end; padding-top: 6px; }

/* ─── History ─── */
.hist-detail-head { display: flex; justify-content: space-between; gap: 20px; padding: 10px; border-bottom: 1px dashed var(--border); }
.hist-detail-body { background: var(--surface-2); padding: 10px; font-size: 12px; border-radius: 5px; margin-top: 4px; white-space: pre-wrap; }
.hist-detail-stats { display: flex; gap: 10px; }
.stat-tile { padding: 8px 14px; border-radius: 6px; background: var(--surface-2); text-align: center; min-width: 70px; }
.stat-tile-value { font-size: 18px; font-weight: 800; }
.stat-tile-label { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

.status-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.status-pill.status-sending   { background: color-mix(in srgb, var(--amber) 15%, var(--surface-2)); color: var(--amber); }
.status-pill.status-completed { background: color-mix(in srgb, var(--green) 15%, var(--surface-2)); color: var(--green); }
.status-pill.status-partial   { background: color-mix(in srgb, var(--amber) 15%, var(--surface-2)); color: var(--amber); }
.status-pill.status-failed    { background: color-mix(in srgb, var(--red) 15%, var(--surface-2)); color: var(--red); }
.status-pill.status-sent      { background: color-mix(in srgb, var(--green) 15%, var(--surface-2)); color: var(--green); }
.status-pill.status-pending   { background: var(--surface-2); color: var(--muted); }
.reply-yes { color: var(--green); font-weight: 700; }
.reply-no  { color: var(--muted); }
.err-tag { color: var(--red); cursor: help; }

/* ─── Blocklist ─── */
.bl-add-inline { display: flex; gap: 6px; align-items: center; }
.bl-add-inline input { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 5px 10px; font-size: 12px; }
.bl-add-inline input:focus { border-color: var(--accent); outline: none; }
.reason-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.reason-pill.reason-STOP    { background: color-mix(in srgb, var(--red) 15%, var(--surface-2)); color: var(--red); }
.reason-pill.reason-manual  { background: color-mix(in srgb, var(--muted) 15%, var(--surface-2)); color: var(--muted); }
.reason-pill.reason-bounce  { background: color-mix(in srgb, var(--amber) 15%, var(--surface-2)); color: var(--amber); }

/* ─── Send confirmation modal ─── */
.modal.modal-narrow { max-width: 560px; width: 560px; }
.send-conf { display: flex; flex-direction: column; gap: 14px; padding: 4px; }
.send-conf-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.send-conf-tile {
  padding: 12px; border-radius: 6px;
  background: var(--surface-2); text-align: center;
}
.send-conf-tile-value { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.send-conf-tile-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 4px; font-weight: 700; }
.send-conf-errors {
  padding: 10px 12px; border-radius: 6px;
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--red) 25%, var(--border));
}
.send-conf-errors-title { display: flex; align-items: center; gap: 6px; color: var(--red); font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.send-conf-errors-title i { width: 14px; height: 14px; }
.send-conf-errors-list { display: flex; flex-direction: column; gap: 3px; max-height: 220px; overflow-y: auto; }
.send-conf-err-row { display: grid; grid-template-columns: 110px 1fr; gap: 8px; font-size: 11px; padding: 3px 6px; background: var(--surface-2); border-radius: 4px; }
.send-conf-err-msg { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.send-conf-err-more { font-size: 11px; color: var(--muted); font-style: italic; padding: 4px 0; }
.send-conf-actions { display: flex; justify-content: flex-end; gap: 6px; padding-top: 6px; border-top: 1px solid var(--border); }

.hist-detail-retry { padding: 10px 4px; border-bottom: 1px dashed var(--border); }
.hist-detail-retry .btn { display: inline-flex; align-items: center; gap: 5px; }

/* ─── History error banner ─── */
.hist-err-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--red) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--red) 30%, var(--border));
  border-left: 3px solid var(--red);
  border-radius: 6px;
  font-size: 12.5px;
}
.hist-err-title { display: flex; align-items: center; gap: 8px; color: var(--red); font-weight: 700; }
.hist-err-title i { width: 15px; height: 15px; }
.hist-err-actions { flex-shrink: 0; }

.inline-err {
  display: flex; align-items: center; gap: 4px;
  margin-top: 4px;
  font-size: 10.5px; color: var(--red);
  cursor: help; line-height: 1.3;
}
.inline-err i { width: 11px; height: 11px; flex-shrink: 0; }

/* ─── History reports ─── */
.hist-reports { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.hist-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
@media (max-width: 900px) { .hist-tiles { grid-template-columns: repeat(3, 1fr); } }
.hist-tile {
  padding: 8px 10px; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--border);
  text-align: center;
}
.hist-tile-value { font-size: 18px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.hist-tile-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 3px; font-weight: 700; }

.hist-reports-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 900px) { .hist-reports-grid { grid-template-columns: 1fr; } }
.hist-report-card { padding: 10px 12px; }
.hist-report-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted);
  margin-bottom: 8px;
}
.hist-report-title i { width: 13px; height: 13px; color: var(--accent); }
.hist-report-body { display: flex; flex-direction: column; gap: 4px; }
.hist-report-row {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 10px;
  padding: 6px 8px; border-radius: 5px;
  background: var(--surface-2); cursor: pointer;
  transition: background .08s;
}
.hist-report-row:hover { background: var(--bg-elev); }
.hist-report-row-name { font-size: 12px; font-weight: 600; color: var(--text); grid-column: 1; }
.hist-report-row-meta { font-size: 10.5px; color: var(--muted); grid-column: 1; }
.hist-report-row-pct { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.hist-pct-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 800; color: var(--amber);
}

.hist-monthly-row {
  display: grid; grid-template-columns: 60px 1fr 120px;
  gap: 8px; align-items: center;
  padding: 3px 0; font-size: 11px;
}
.hist-monthly-label { color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 10px; }
.hist-monthly-track { height: 8px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.hist-monthly-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--blue)); }
.hist-monthly-val { text-align: right; color: var(--text-2); font-size: 10.5px; }
.hist-monthly-replies { color: var(--app-crm); }

/* ─── Docs page ─── */
.docs-page { display: flex; flex-direction: column; gap: 14px; }
.docs-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 4px; gap: 12px; flex-wrap: wrap;
}
.docs-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.docs-title i { width: 16px; height: 16px; color: var(--accent); }
.docs-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.docs-nav a {
  padding: 3px 8px; border-radius: 4px;
  font-size: 11px; color: var(--text-2); text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border);
}
.docs-nav a:hover { background: var(--bg-elev); color: var(--text); }
.docs-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 18px;
  scroll-margin-top: 12px;
}
.docs-h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--text);
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.docs-h2 i { width: 15px; height: 15px; color: var(--accent); }
.docs-h3 { font-size: 12.5px; font-weight: 700; color: var(--text); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: 0.03em; }
.docs-p  { font-size: 12.5px; line-height: 1.55; color: var(--text-2); margin: 4px 0; }
.docs-ul { margin: 4px 0 4px 18px; font-size: 12.5px; color: var(--text-2); }
.docs-ul li { margin: 2px 0; line-height: 1.5; }
.docs-code {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 8px 10px; margin: 6px 0;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  color: var(--text); white-space: pre-wrap; word-wrap: break-word;
  overflow-x: auto;
}
.docs-callout {
  padding: 8px 12px; border-radius: 5px;
  font-size: 12px; color: var(--text-2);
  margin: 6px 0;
  border-left: 3px solid var(--muted);
  background: var(--surface-2);
}
.docs-callout.ok    { border-left-color: var(--green); }
.docs-callout.info  { border-left-color: var(--blue); }
.docs-callout.warn  { border-left-color: var(--amber); }
.docs-table {
  width: 100%; border-collapse: collapse; margin: 8px 0;
  font-size: 12px;
}
.docs-table th, .docs-table td {
  text-align: left; padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.docs-table th {
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--surface-2);
}
.docs-table td { color: var(--text-2); vertical-align: top; }
.docs-table td:first-child { color: var(--text); font-weight: 600; }
.docs-faq {
  border: 1px solid var(--border); border-radius: 5px;
  margin: 4px 0; overflow: hidden;
  background: var(--surface-2);
}
.docs-faq summary {
  padding: 8px 12px; font-size: 12.5px; font-weight: 600;
  color: var(--text); cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 6px;
}
.docs-faq summary::-webkit-details-marker { display: none; }
.docs-faq summary::before { content: '▸'; color: var(--muted); transition: transform .12s; font-size: 10px; }
.docs-faq[open] summary::before { transform: rotate(90deg); }
.docs-faq-a {
  padding: 4px 12px 10px; font-size: 12px; color: var(--text-2);
  line-height: 1.55; border-top: 1px dashed var(--border);
}

/* ─── Modal ─── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,0.55);
  align-items: center; justify-content: center;
  display: none;   /* hidden by default — modal.js toggles .show */
}
.modal-backdrop.show { display: flex; }
.modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  max-width: 700px; width: 90%; max-height: 85vh; overflow: hidden;
  display: flex; flex-direction: column;
}
.modal.modal-wide { max-width: 90vw; max-height: 90vh; width: 90vw; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.modal-header-name { font-size: 15px; font-weight: 700; }
.modal-header-meta { font-size: 11.5px; color: var(--muted); }
.modal-close {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 4px; border-radius: 4px;
  display: flex; align-items: center;
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }
.modal-body { flex: 1; overflow-y: auto; padding: 16px 20px; }

/* ZoomInfo-sourced address: visibly distinct from one the candidate gave us,
   because they are different claims even when they agree. */
.r-tag-zi { border-style: dashed; }
.r-tag .zi-mark {
  margin-left: 4px; padding: 0 3px; border-radius: 3px;
  font-size: 9px; font-weight: 800; letter-spacing: .04em;
  background: rgba(120, 120, 160, .18); opacity: .85;
}

/* A batch that stopped partway is not a cosmetic warning: each pending row is
   someone who was queued a message and never got one. */
.hist-unfinished {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid rgba(200, 140, 40, .45); border-radius: 8px;
  background: rgba(200, 140, 40, .10);
}
.hist-unfinished > i { flex: none; width: 18px; height: 18px; opacity: .9; }
.hist-unfinished-body { flex: 1; min-width: 0; }
.hist-unfinished-title { font-weight: 700; font-size: 13px; }
.hist-unfinished-meta { font-size: 11.5px; opacity: .75; margin-top: 2px; }

/* Advisory only — the message is never modified automatically. */
.optout-hint {
  margin: 0 0 8px; padding: 7px 10px; border-radius: 6px;
  font-size: 11.5px; line-height: 1.45;
  border: 1px solid rgba(200, 140, 40, .40);
  background: rgba(200, 140, 40, .09);
}

/* The rail is always expanded — see app.js. The collapse-on-hover version
   floated it over the page and covered the filter column on Quick send. */

/* ════════════════════════════════════════════════════════════════════
   AUDIENCE · LISTS · CAMPAIGNS
   ════════════════════════════════════════════════════════════════════ */
.aud-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.aud-head-actions { display: flex; gap: 8px; flex: none; }
.aud-sub { color: var(--muted); font-size: 12px; }
.aud-flabel { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin: 12px 0 5px; }
.aud-note { font-size: 11.5px; color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-top: 10px; line-height: 1.45; }
.aud-note-err { border-color: #ef4444; color: #fca5a5; }

/* Two panes: the filters you steer with, and the people they produce.
   Stacked (as the old picker was) you cannot see the effect of the control
   you are touching -- the list is below the fold. */
.aud-body { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 16px;
  align-items: start; height: calc(100vh - 190px); }
.aud-filters { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px; overflow-y: auto; height: 100%; }
.aud-filters-head { display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 700; padding: 4px 6px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.aud-active-count { font-size: 11px; color: var(--accent); font-weight: 600; }
.aud-fblock { border-bottom: 1px solid var(--border); }
.aud-fblock:last-child { border-bottom: 0; }
.aud-fblock-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 6px;
  background: none; border: 0; color: var(--text); font-size: 12.5px; font-weight: 600;
  cursor: pointer; text-align: left; }
.aud-fblock-head :is(i, svg) { width: 14px; height: 14px; flex: none; color: var(--muted); }
.aud-fblock-head span { flex: 1; }
.aud-fblock-caret { margin-left: auto; }
.aud-fblock-badge { flex: none !important; background: var(--accent); color: #fff; font-size: 10px;
  font-weight: 700; border-radius: 999px; padding: 1px 6px; }
.aud-fblock-body { padding: 0 6px 10px; }
.aud-fblock-part .aud-fblock-head { cursor: default; }
.aud-opt-search { width: 100%; margin-bottom: 6px; }
.aud-opts { max-height: 260px; overflow-y: auto; }
.aud-opt { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px;
  cursor: pointer; font-size: 12px; }
.aud-opt:hover { background: var(--surface-2); }
.aud-opt.on { background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 600; }
.aud-opt.ind { padding-left: 16px; }
.aud-opt-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aud-opt-n { font-size: 10.5px; color: var(--muted); flex: none; }
/* Variant grouping: the values stay separate (0111) but can be taken as one. */
.aud-optgroup { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.aud-optgroup-all { flex: 1; text-align: left; background: none; border: 0; cursor: pointer;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--muted); padding: 2px 4px; border-radius: 5px; }
.aud-optgroup-all:hover { color: var(--accent); background: var(--surface-2); }
.aud-optgroup-all.on { color: var(--accent); }
.aud-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.aud-chip { font-size: 11px; padding: 3px 8px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  transition: background .12s ease, border-color .12s ease, transform .08s ease; }
.aud-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.aud-check { display: flex; align-items: center; gap: 7px; font-size: 12px; margin-top: 10px; cursor: pointer; }
.aud-empty-mini { font-size: 11.5px; color: var(--muted); padding: 4px 5px; }
.aud-results { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; height: 100%; min-width: 0; }
.aud-results-head { display: flex; gap: 12px; align-items: center; padding: 10px 12px;
  border-bottom: 1px solid var(--border); }
.aud-search-wrap { position: relative; flex: 1; min-width: 0; }
.aud-search-wrap :is(i, svg) { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--muted); pointer-events: none; }
.aud-search { width: 100%; padding-left: 30px; }
.aud-count { font-size: 13px; font-weight: 700; flex: none; }
.aud-count.loading { color: var(--muted); font-weight: 500; }
.aud-table-wrap { flex: 1; overflow: auto; min-height: 0; }
.aud-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 12px; border-top: 1px solid var(--border); }
.aud-pager-btns { display: flex; align-items: center; gap: 8px; }
.aud-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.aud-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-2);
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--border); }
.aud-table th.th-right, .aud-table td.td-right { text-align: right; }
.aud-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.aud-table tbody tr:hover { background: var(--surface-2); }
.aud-name { font-weight: 600; }
.row-blocked { opacity: .55; }
.aud-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
.aud-tag :is(i, svg) { width: 11px; height: 11px; }
.aud-tag-zi { border-color: #a855f7; }
.aud-tag-warn { border-color: #f59e0b; color: #fbbf24; }
.aud-tag-block { border-color: #ef4444; color: #fca5a5; margin-left: 6px; }
.zi-mark { font-size: 8.5px; font-weight: 800; color: #a855f7; margin-left: 3px; }
.aud-empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.aud-empty :is(i, svg) { width: 30px; height: 30px; opacity: .5; margin-bottom: 10px; }
.aud-empty-sub { font-size: 12px; margin-top: 4px; }
.aud-savebox { min-width: 460px; max-width: 620px; }
.aud-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.lst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.lst-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.lst-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.lst-name { font-size: 14.5px; font-weight: 700; }
.lst-count { text-align: right; flex: none; }
.lst-count-n { font-size: 20px; font-weight: 800; display: block; line-height: 1; }
.lst-count-l { font-size: 10.5px; color: var(--muted); }
.lst-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.lst-last { display: flex; gap: 8px; align-items: center; padding: 7px 9px; background: var(--surface-2);
  border-radius: 8px; margin-bottom: 10px; }
.lst-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.lst-del:hover { color: #f87171; }
.lst-members { min-width: 620px; }
.cmp-rate { background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 14px; font-size: 12px; }
.cmp-rate.paused { border-color: #f59e0b; }
.cmp-rate-in { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cmp-rate-in :is(i, svg) { width: 15px; height: 15px; color: var(--muted); }
.cmp-list { display: flex; flex-direction: column; gap: 12px; }
.cmp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.cmp-card.cmp-sending { border-color: var(--accent); }
.cmp-card.cmp-completed { opacity: .82; }
.cmp-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cmp-name { font-size: 14.5px; font-weight: 700; }
.cmp-bar { position: relative; height: 7px; background: var(--surface-2); border-radius: 999px;
  overflow: hidden; margin: 11px 0 9px; }
.cmp-bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); transition: width .4s ease; }
.cmp-bar-fail { position: absolute; inset: 0 0 0 auto; background: #ef4444; }
.cmp-stats { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 11px; }
.cmp-stat-v { font-size: 16px; font-weight: 800; line-height: 1; }
.cmp-stat-l { font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; margin-top: 3px; }
.cmp-stat.ok  .cmp-stat-v { color: #34d399; }
.cmp-stat.bad .cmp-stat-v { color: #f87171; }
.cmp-detail { min-width: 680px; }
.cmp-msg pre { white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px; font-size: 12.5px; margin: 0 0 14px; }
.cmp-pace { margin-bottom: 14px; }
.cmp-pace-bars { display: flex; align-items: flex-end; gap: 2px; height: 50px;
  padding: 2px 4px; background: var(--surface-2); border-radius: 8px; }
.cmp-pace-bar { flex: 1; min-width: 3px; background: var(--accent); border-radius: 2px 2px 0 0; }
.cmp-pace-bar.over { background: #ef4444; }
.cmp-err { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f87171; }
.pill { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; border-radius: 999px; padding: 2px 8px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
.pill-sending   { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); border-color: var(--accent); }
.pill-sent      { background: rgba(52,211,153,.16); color: #34d399; border-color: #34d399; }
.pill-completed { background: rgba(52,211,153,.16); color: #34d399; border-color: #34d399; }
.pill-failed    { background: rgba(239,68,68,.16); color: #f87171; border-color: #ef4444; }
.pill-paused    { background: rgba(245,158,11,.16); color: #fbbf24; border-color: #f59e0b; }
.pill-cancelled { text-decoration: line-through; }
@media (max-width: 1100px) {
  .aud-body { grid-template-columns: 1fr; height: auto; }
  .aud-filters { height: auto; max-height: 420px; }
  .aud-results { height: 60vh; }
  .aud-savebox, .lst-members, .cmp-detail { min-width: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   FORM CONTROLS — `.inp` did NOT exist in this app.

   It was borrowed from the budget app, which has its own stylesheet that
   does not travel. Every input, select and checkbox in the new panels fell
   back to raw browser chrome: grey 3D bevels, a native dropdown arrow, a
   blue system checkbox. Same class of mistake as `.modal-wide` in the
   budget app — a class that silently does nothing.
   ════════════════════════════════════════════════════════════════════ */
.inp {
  width: 100%;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.inp::placeholder { color: var(--muted); }
.inp:hover { border-color: var(--border-2); background: var(--surface); }
.inp:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.inp-sm { padding: 5px 9px; font-size: 12px; border-radius: 6px; }
textarea.inp { resize: vertical; min-height: 90px; line-height: 1.5; }

/* Native select arrow is unstyleable, so it is replaced with our own. */
select.inp {
  appearance: none; -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7a94' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  cursor: pointer;
}

/* One accent for every checkbox in the app instead of the OS blue. */
.aud-opt input[type="checkbox"],
.aud-check input[type="checkbox"],
.compose-list input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; flex: none; margin: 0;
  border: 1.5px solid var(--border-2); border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  transition: background .12s ease, border-color .12s ease;
}
.aud-opt input[type="checkbox"]:hover,
.aud-check input[type="checkbox"]:hover { border-color: var(--accent); }
.aud-opt input[type="checkbox"]:checked,
.aud-check input[type="checkbox"]:checked,
.compose-list input[type="checkbox"]:checked {
  background: var(--accent); border-color: var(--accent);
}
.aud-opt input[type="checkbox"]:checked::after,
.aud-check input[type="checkbox"]:checked::after,
.compose-list input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ─── Rail: more room, more colour, less nesting ─── */
.aud-filters {
  padding: 12px 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.aud-filters-head {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 2px 4px 11px;
}
.aud-active-count {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent); border-radius: 999px; padding: 2px 8px;
  font-size: 10px; letter-spacing: .02em; text-transform: none;
}
.aud-fblock { border-bottom: 1px solid var(--grid-line); }
.aud-fblock-head { padding: 10px 6px; border-radius: 7px; }
.aud-fblock-head:hover { background: var(--surface-2); }
.aud-fblock.open > .aud-fblock-head { color: var(--text); }
.aud-fblock.open > .aud-fblock-head :is(i, svg):first-child { color: var(--accent); }
.aud-fblock-caret { width: 13px !important; height: 13px !important; opacity: .6; }
.aud-fblock-badge {
  background: var(--accent); color: #fff; box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 40%, transparent);
}
/* One inner scroller, not one per dimension nested in another. */
.aud-opts { max-height: 300px; overflow-y: auto; padding-right: 2px; }
.aud-opts::-webkit-scrollbar { width: 8px; }
.aud-opts::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
.aud-opt-n {
  background: var(--surface-2); border-radius: 4px; padding: 1px 5px;
  font-size: 10px; min-width: 30px; text-align: right;
}
.aud-opt.on .aud-opt-n { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.aud-optgroup {
  margin: 9px 0 3px; padding-top: 7px; border-top: 1px dashed var(--grid-line);
}
.aud-optgroup:first-child { border-top: 0; margin-top: 2px; padding-top: 0; }

/* Values that are not a real US state. Surfaced under their own heading
   rather than sorted in among the real ones: 0111 exists so this rubbish is
   VISIBLE, but visible is not the same as first in the list. */
.aud-cleanup-head {
  display: flex; align-items: center; gap: 6px;
  margin: 12px 0 4px; padding-top: 9px;
  border-top: 1px solid var(--amber);
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--amber);
}
.aud-cleanup-head :is(i, svg) { width: 12px; height: 12px; }
.aud-cleanup-note { font-size: 10.5px; color: var(--muted); padding: 0 6px 6px; line-height: 1.45; }
.aud-opt.unknown .aud-opt-v { color: var(--amber); }

/* ─── Participation block gets a tinted card so it reads as different ─── */
.aud-fblock-part {
  background: color-mix(in srgb, var(--blue) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
  border-radius: 9px; margin-bottom: 10px; padding-bottom: 4px;
}
.aud-fblock-part .aud-fblock-head :is(i, svg):first-child { color: var(--blue); }
.aud-flabel { margin: 11px 0 5px; font-size: 10px; }
.aud-chip:hover { border-color: var(--accent); }
.aud-chip:active { transform: translateY(1px); }
.aud-chip.on { box-shadow: 0 1px 4px color-mix(in srgb, var(--accent) 35%, transparent); }

/* ─── Results table ─── */
.aud-results { box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.aud-results-head { background: var(--surface-2); border-radius: 12px 12px 0 0; }
.aud-count { color: var(--text); }
.aud-count::first-letter { color: var(--accent); }
.aud-table tbody tr { transition: background .1s ease; }
.aud-table td { font-size: 12.5px; }
.aud-name { font-size: 13px; }
.aud-tag {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  border-color: color-mix(in srgb, var(--blue) 30%, transparent);
  color: var(--text-2);
}
.aud-tag-zi {
  background: color-mix(in srgb, var(--app-crm) 12%, transparent);
  border-color: color-mix(in srgb, var(--app-crm) 35%, transparent);
}
.zi-mark { color: var(--app-crm); }
.aud-tag-block {
  background: color-mix(in srgb, var(--red) 14%, transparent);
  border-color: color-mix(in srgb, var(--red) 40%, transparent); color: var(--red);
}
.aud-tag-warn {
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  border-color: color-mix(in srgb, var(--amber) 40%, transparent); color: var(--amber);
}

/* ─── Compose: three panes, not an accordion stacked on a list ─── */
.compose-grid {
  display: grid;
  /* filters : people : message. The people column gets the most room — it is
     the one you actually work in. */
  grid-template-columns: 252px minmax(0, 1.32fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  height: calc(100vh - 168px);
}
.compose-filters { height: 100%; }
.compose-col { height: 100%; display: flex; flex-direction: column; min-width: 0; }
.compose-recipients .compose-list { flex: 1; min-height: 0; }
.compose-composer { overflow-y: auto; }
/* Below ~1280 the three panes stop fitting beside a 220px rail, so the
   composer drops to its own full-width row rather than being squeezed. */
@media (max-width: 1280px) {
  .compose-grid { grid-template-columns: 236px minmax(0, 1fr); height: auto; }
  .compose-composer { grid-column: 1 / -1; height: auto; }
  .compose-filters { max-height: 520px; }
  .compose-recipients { height: 62vh; }
}

/* ─── Cards + buttons a little less flat ─── */
.lst-card, .cmp-card {
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.lst-card:hover { border-color: var(--border-2); box-shadow: 0 4px 14px rgba(0,0,0,.10); }
.lst-count-n { color: var(--accent); }
.cmp-rate {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
.cmp-bar { height: 8px; }
.cmp-bar-fill { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--blue))); }
.optout-hint {
  display: flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 38%, transparent);
  color: var(--amber); border-radius: 8px; padding: 8px 10px;
  font-size: 11.5px; margin-bottom: 8px; line-height: 1.4;
}
.optout-hint :is(i, svg) { width: 14px; height: 14px; flex: none; }
.active-filter-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding: 0 0 8px; }
.active-filter-chips:empty { padding: 0; }
.chip-x { margin-left: 5px; opacity: .75; font-weight: 700; }

/* ── Fixes found by looking at the rendered page ──
   `.inp` is appended after `.aud-search`, and both are single-class
   selectors, so source order won and `.inp`'s symmetric padding overrode the
   30px left gutter that makes room for the search icon — the magnifier sat on
   top of the placeholder's first letter. Same specificity collision as the
   duplicated `.sw` / `.fchip` rules documented in CLAUDE.md. */
.aud-search-wrap .aud-search { padding-left: 32px; }

/* An empty pill still paints its background: the Filters header showed a
   little green lozenge with nothing in it whenever no filter was active. */
.aud-active-count:empty { display: none; }

/* ::first-letter on the count tinted just the leading DIGIT of "11,263",
   which reads as a rendering fault rather than emphasis. */
.aud-count::first-letter { color: inherit; }
.aud-count { color: var(--text); font-weight: 800; }

/* An <a class="btn"> inherited the global link underline, so every button that
   is really a link ("New list", "Open Audience", "Watch it send") rendered
   with underlined text while the <button> ones did not. */
a.btn, a.btn:hover, .sidebar-item, .aud-chip { text-decoration: none; }

/* ── Person history ── */
.aud-row { cursor: pointer; }
.aud-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ph-body { min-width: 660px; }
.ph-stats { margin: 4px 0 6px; }
.ph-lists { margin-bottom: 4px; }
.ph-blocked { display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
  color: var(--red); border-radius: 8px; padding: 9px 11px; font-size: 12px; }
.ph-blocked :is(i, svg) { width: 15px; height: 15px; flex: none; }
.ph-msg { max-width: 300px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--text-2); font-size: 12px; }
.ph-table { margin-top: 4px; }
@media (max-width: 900px) { .ph-body { min-width: 0; } }
.cmp-rate-edit { margin-left: auto; }

/* Page headings. These were relying on the browser's default <h1>/<p>, which
   LOOKED fine and was pure accident — the size, weight and colour were the
   user agent's, not this app's. */
.page-title {
  font-size: 21px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text); margin: 0 0 3px;
}
.page-sub {
  font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.5;
  max-width: 78ch;
}

/* The person-history KPI row inherited .cmp-stats' 18px gap, which is fine for
   the wide campaign card but crowds three stats in a 700px modal — "0" sat
   almost touching the next label. Give it its own spacing and a divider so the
   three read as three. */
.ph-stats {
  gap: 0; margin: 2px 0 14px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-2); overflow: hidden;
}
.ph-stats .cmp-stat {
  flex: 1; padding: 11px 14px;
  border-right: 1px solid var(--border);
}
.ph-stats .cmp-stat:last-child { border-right: 0; }
.ph-stats .cmp-stat-v { font-size: 19px; }
.ph-stats .cmp-stat-l { margin-top: 4px; }
.ph-body .aud-flabel:first-of-type { margin-top: 0; }
.aud-part-sep { font-size: 9.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--blue); margin: 14px 0 2px;
  padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--blue) 30%, transparent); }
.aud-hint { display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; margin-left: 4px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border-2);
  color: var(--muted); font-size: 9px; font-weight: 700; cursor: help; }
.reuse-modes { display: flex; flex-direction: column; gap: 7px; }
.reuse-mode { display: flex; align-items: flex-start; gap: 12px; text-align: left;
  padding: 10px 12px; border-radius: 9px; cursor: pointer;
  background: var(--surface-2); border: 1.5px solid var(--border); color: var(--text); }
.reuse-mode:hover:not(.off) { border-color: var(--border-2); }
.reuse-mode.on { border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); }
.reuse-mode.off { opacity: .45; cursor: not-allowed; }
.reuse-mode-n { font-size: 19px; font-weight: 800; min-width: 62px; line-height: 1.1; }
.reuse-mode.on .reuse-mode-n { color: var(--accent); }
.reuse-mode-l { font-size: 12.5px; font-weight: 600; }
.reuse-mode-d { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.4; }

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD — the landing page
   Charts are hand-drawn SVG, not Chart.js: this app loads no charting
   library, and a CDN dependency for two small charts is a pinned version
   to maintain. SVG also inherits the theme tokens for free.
   ════════════════════════════════════════════════════════════════════ */
.dash-range { display: flex; gap: 5px; }
.dash-live { display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  padding: 10px 14px; border-radius: 10px; font-size: 12.5px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.dash-live .btn { margin-left: auto; }
.dash-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent);
  animation: dash-pulse 1.8s ease-out infinite; flex: none; }
@keyframes dash-pulse {
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 12px; margin-bottom: 16px; }
.dash-kpi { background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 15px; position: relative; overflow: hidden; }
.dash-kpi::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--tone, var(--muted)); }
.dash-kpi.tone-green  { --tone: var(--green); }
.dash-kpi.tone-blue   { --tone: var(--blue); }
.dash-kpi.tone-violet { --tone: var(--app-crm); }
.dash-kpi.tone-amber  { --tone: var(--amber); }
.dash-kpi.tone-red    { --tone: var(--red); }
.dash-kpi.tone-muted  { --tone: var(--border-2); }
.dash-kpi-top { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.dash-kpi-top :is(i, svg) { width: 13px; height: 13px; color: var(--tone, var(--muted)); flex: none; }
.dash-kpi-l { font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); }
.dash-kpi-v { font-size: 25px; font-weight: 800; line-height: 1; }
.dash-kpi-s { font-size: 10.5px; color: var(--muted); margin-top: 5px; }
.dash-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 14px; margin-bottom: 14px; }
.dash-panel { background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; min-width: 0; }
.dash-panel-head { display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 11px; }
.dash-panel-t { font-size: 13px; font-weight: 700; }
.dash-svg { width: 100%; height: 150px; display: block; overflow: visible; }
.dash-grid { stroke: var(--grid-line); stroke-width: 1; }
.dash-area { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: none; }
.dash-line-sent { fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; }
.dash-line-rep { fill: none; stroke: var(--app-crm); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 4 3; }
.dash-legend { display: flex; gap: 14px; align-items: center; font-size: 11px;
  color: var(--muted); margin-top: 8px; }
.dash-legend .dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block;
  margin-right: 5px; vertical-align: middle; }
.dot-sent { background: var(--accent); }
.dot-rep  { background: var(--app-crm); }
.dash-bars { display: flex; flex-direction: column; gap: 7px; }
.dash-bar-row { display: grid; grid-template-columns: 96px minmax(0,1fr) 52px;
  gap: 9px; align-items: center; font-size: 12px; }
.dash-bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bar-t { height: 9px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.dash-bar-f { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--accent)); }
.dash-bar-n { text-align: right; font-size: 11px; color: var(--muted); }
.dash-table th { position: static; }
.dash-table td, .dash-table th { padding: 7px 9px; }
.dash-mini-track { display: block; height: 6px; background: var(--surface-2);
  border-radius: 999px; overflow: hidden; }
.dash-mini-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.dash-foot { font-size: 11.5px; color: var(--muted); text-align: center;
  padding: 10px 0 4px; line-height: 1.5; }
/* The dashboard's own page wrapper. Every other page's wrapper is a bare
   container, but this one needs a max width: KPI tiles and two-up panels
   stretched to 2560px turn a glance into a scan. */
.dash-page { max-width: 1680px; }
.lst-hist { min-width: 720px; }
.lst-cov { margin: 0 0 16px; }
.lst-cov-bar { height: 8px; background: var(--surface-2); border-radius: 999px;
  overflow: hidden; margin-bottom: 7px; }
.lst-cov-bar span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--accent)); }
@media (max-width: 900px) { .lst-hist { min-width: 0; } }
/* Says the option list is a top-N and that typing searches the rest. Without
   it, "No matches" on a truncated list reads as "that value does not exist". */
.aud-trunc { font-size: 10.5px; color: var(--muted); line-height: 1.4;
  padding: 0 2px 6px; }
/* The composer is the emptiest of the three panes, so it gives up width first.
   Its textarea keeps a workable height instead of stretching to the pane. */
.compose-composer textarea { min-height: 132px; }
.compose-composer .merge-chip { font-size: 10.5px; padding: 2px 6px; }
/* ── List lock / archive / exclusions ── */
.lst-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; vertical-align: middle;
  background: color-mix(in srgb, var(--amber) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); color: var(--amber); }
.lst-badge :is(i, svg) { width: 10px; height: 10px; }
.lst-badge-muted { background: var(--surface-2); border-color: var(--border);
  color: var(--muted); }
.lst-card.lst-locked { border-color: color-mix(in srgb, var(--amber) 35%, var(--border)); }
.lst-card.lst-archived { opacity: .72; }
.lst-arch { margin-top: 20px; }
.lst-arch > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--muted);
  padding: 6px 2px; }
/* Rebuild outcome, pinned to the card — a toast that says "no change" and
   fades is indistinguishable from a dead button. */
.lst-result { display: none; }
.lst-result.show { display: block; font-size: 11px; margin: 8px 0 2px;
  padding: 6px 9px; border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent); }
.lst-result.show.quiet { background: var(--surface-2); border-color: var(--border);
  color: var(--muted); }
.lst-lockbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  padding: 10px 12px; border-radius: 9px; font-size: 12px; line-height: 1.45;
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 38%, transparent); }
.lst-lockbar :is(i, svg) { width: 15px; height: 15px; flex: none; color: var(--amber); }
.lst-lockbar .btn { margin-left: auto; flex: none; }
.lst-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
/* ── Dashboard sections ── */
.dash-sec { display: flex; align-items: baseline; gap: 9px; margin: 4px 0 10px; }
.dash-sec:not(:first-child) { margin-top: 22px; }
.dash-sec-t { font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-2); }
.dash-kpis-4 { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.dash-kpi-link { text-decoration: none; color: inherit; transition: border-color .14s ease; }
.dash-kpi-link:hover { border-color: var(--border-2); }
.dash-area-rep { fill: color-mix(in srgb, var(--app-crm) 13%, transparent); stroke: none; }
/* Day-zero panel: what you have and what to do, instead of six zeros. */
.dash-start { background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; }
.dash-start-main { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.dash-start-main :is(i, svg) { width: 22px; height: 22px; color: var(--accent); flex: none; }
.dash-start-main .btn { margin-left: auto; flex: none; }
.dash-start-t { font-size: 14.5px; font-weight: 700; margin-bottom: 2px; }
.dash-start-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  border-top: 1px solid var(--border); background: var(--surface-2); }
.dash-mini { padding: 12px 18px; border-right: 1px solid var(--border); }
.dash-mini:last-child { border-right: 0; }
.dash-mini-v { font-size: 19px; font-weight: 800; line-height: 1; }
.dash-mini-l { font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-top: 5px; }
.dash-mini-s { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
/* ── Per-person include / exclude toggle ── */
.aud-tog-cell { padding-right: 4px !important; }
.aud-tog { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: none; border: 0; padding: 2px 0; }
.aud-tog-k { width: 30px; height: 17px; border-radius: 999px; flex: none; position: relative;
  background: var(--accent); transition: background .14s ease; }
.aud-tog-k::after { content: ''; position: absolute; top: 2px; left: 15px;
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
  transition: left .14s ease; }
.aud-tog.off .aud-tog-k { background: var(--border-2); }
.aud-tog.off .aud-tog-k::after { left: 2px; }
.aud-tog-t { font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent); }
.aud-tog.off .aud-tog-t { color: var(--muted); }
tr.row-out { opacity: .45; }
tr.row-out .aud-name { text-decoration: line-through; }
.aud-count-out { display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; vertical-align: middle;
  background: color-mix(in srgb, var(--amber) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); color: var(--amber); }
.aud-editbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  padding: 10px 14px; border-radius: 10px; font-size: 12px; line-height: 1.45;
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 38%, transparent); }
.aud-editbar :is(i, svg) { width: 15px; height: 15px; flex: none; color: var(--blue); }
.aud-editbar .btn { margin-left: auto; flex: none; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
/* The mandatory ERx: prefix. Shown, never editable — it is applied on the
   server (0126), so this is a statement of fact, not an input. */
.msg-prefix { display: flex; align-items: center; gap: 7px; margin-bottom: 7px;
  padding: 6px 10px; border-radius: 7px; font-size: 11.5px;
  background: var(--surface-2); border: 1px dashed var(--border-2); }
.msg-prefix :is(i, svg) { width: 12px; height: 12px; color: var(--muted); flex: none; }
.msg-prefix-v { font-weight: 800; color: var(--accent); font-size: 12.5px; }
.optout-hint .link-btn { font-weight: 700; text-decoration: underline; padding: 0; }
/* A started-but-not-yet-drained campaign. Without this it shows 0 sent and
   looks stalled, which is how the first real send felt. */
.cmp-warm { display: flex; align-items: center; gap: 9px; margin: 10px 0 2px;
  padding: 7px 11px; border-radius: 8px; font-size: 11.5px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); }
/* A blank-but-valid merge tag is a softer problem than an unknown one: the
   message still sends, it just reads wrong for some people. */
.preview-warn-soft { background: color-mix(in srgb, var(--amber) 10%, transparent);
  border-color: color-mix(in srgb, var(--amber) 35%, transparent); color: var(--amber); }