@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Sora:wght@600;700&display=swap");

:root {
  --bg: #eef2f5;
  --bg-soft: #e4eaf0;
  --bg-elev: rgba(255, 255, 255, 0.86);
  --bg-elev-2: #ffffff;
  --ink: #10151c;
  --text: #18202a;
  --text-dim: #5a6675;
  --text-faint: #8894a3;
  --border: #d5dde6;
  --border-soft: #e2e8ef;
  --accent: #0f766e;
  --accent-hover: #0d9488;
  --accent-soft: rgba(15, 118, 110, 0.12);
  --accent-ink: #043f3a;
  --good: #15803d;
  --good-soft: rgba(21, 128, 61, 0.12);
  --warn: #b45309;
  --warn-soft: rgba(180, 83, 9, 0.12);
  --bad: #be123c;
  --bad-soft: rgba(190, 18, 60, 0.1);
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 18px 50px rgba(16, 21, 28, 0.08);
  --shadow-sm: 0 8px 24px rgba(16, 21, 28, 0.06);
  --font: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;
  --display: "Sora", "Avenir Next", "Segoe UI", sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background:
    radial-gradient(1100px 560px at 8% -12%, rgba(15, 118, 110, 0.16), transparent 55%),
    radial-gradient(900px 480px at 100% 0%, rgba(14, 116, 144, 0.1), transparent 52%),
    linear-gradient(180deg, #f7fafc 0%, var(--bg) 42%, #e8eef4 100%);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-user-select: text;
  user-select: text;
}

/* Chrome you click rather than read: keep drags and double-clicks from
   selecting label text. Everything else stays copyable. */
.topbar,
.tabs,
.tab,
.btn,
button {
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 20px;
  height: 58px;
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid var(--border-soft);
  backdrop-filter: blur(14px);
  -webkit-app-region: drag;
  flex: 0 0 auto;
}
.topbar .tabs,
.topbar .status,
.topbar .brand {
  -webkit-app-region: no-drag;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding-left: 64px;
}
.brand-mark {
  color: var(--accent);
  font-size: 16px;
  transform: translateY(1px);
}
.brand-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.brand-sub {
  color: var(--text-faint);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  font-weight: 600;
}

.tabs {
  display: flex;
  gap: 4px;
  margin-left: 4px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 3px;
}
.tab {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  padding: 7px 13px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, transform 0.12s ease;
}
.tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.7);
}
.tab.active {
  color: var(--accent-ink);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.65);
  font-weight: 600;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
}
.dot.running {
  background: var(--good);
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.18);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

/* ---------- view ---------- */
.view {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 22px 24px 44px;
}

.page-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.page-head h1 {
  font-family: var(--display);
  font-size: 28px;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.page-head .spacer {
  flex: 1;
}
.muted {
  color: var(--text-dim);
}
.faint {
  color: var(--text-faint);
}

.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.1s ease,
    box-shadow 0.14s ease;
}
.btn:hover {
  background: var(--bg-elev-2);
  border-color: #cdc5b5;
}
.btn:active {
  transform: translateY(1px);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 8px 20px rgba(15, 118, 110, 0.22);
}
.btn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.btn.danger {
  background: #fff5f7;
  border-color: #f1c0cb;
  color: var(--bad);
}
.btn.danger:hover {
  background: #ffe8ee;
}
.btn.small {
  padding: 5px 10px;
  font-size: 12px;
}
.btn.ghost {
  background: transparent;
}

/* ---------- stat strip ---------- */
.stat-strip {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.stat {
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px 16px;
  min-width: 120px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}
.stat .num {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.stat .lbl {
  color: var(--text-faint);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

/* ---------- session cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.session-card {
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px 17px;
  cursor: pointer;
  transition: border-color 0.14s ease, transform 0.1s ease, box-shadow 0.14s ease;
  box-shadow: var(--shadow-sm);
}
.session-card:hover {
  border-color: #b8d7d3;
  box-shadow: var(--shadow);
}
.session-card:active {
  transform: translateY(1px);
}
.session-card .row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.session-card .sid {
  font-weight: 700;
  font-size: 15px;
}
.pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 7px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  text-transform: lowercase;
  background: rgba(255, 255, 255, 0.7);
}
.pill.platform {
  color: var(--accent-ink);
  border-color: #b7d8d4;
  background: var(--accent-soft);
}
.pill.status-running {
  color: var(--good);
  border-color: #b7d8c2;
  background: var(--good-soft);
}
.pill.status-completed {
  color: var(--text-dim);
}
.session-card .meta {
  color: var(--text-faint);
  font-size: 12px;
  margin-bottom: 12px;
}
.session-card .counts {
  display: flex;
  gap: 16px;
}
.session-card .counts .c .n {
  font-weight: 700;
  font-size: 16px;
}
.session-card .counts .c .l {
  color: var(--text-faint);
  font-size: 11px;
}
.rec-tag {
  margin-left: auto;
  font-size: 11px;
  color: var(--good);
  display: flex;
  align-items: center;
  gap: 4px;
}
.rec-tag.none {
  color: var(--text-faint);
}

/* ---------- video grid ---------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.video-card {
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.thumb-wrap {
  position: relative;
  background: #111;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  cursor: pointer;
}
.thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.video-card:hover .thumb-wrap img {
  transform: scale(1.03);
}
.relevance-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}
.relevance-badge.hi {
  background: rgba(21, 128, 61, 0.85);
}
.relevance-badge.mid {
  background: rgba(180, 83, 9, 0.85);
}
.relevance-badge.lo {
  background: rgba(0, 0, 0, 0.45);
}
.seg-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
}
.play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(23, 26, 31, 0.28);
  opacity: 0;
  transition: opacity 0.14s ease;
}
.thumb-wrap:hover .play-overlay {
  opacity: 1;
}
.play-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: var(--shadow-sm);
}
.video-card .body {
  padding: 12px 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.vc-handle-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.video-card .handle {
  font-weight: 700;
  font-size: 14px;
}
.session-pill {
  cursor: pointer;
}
.video-card .caption {
  color: var(--text-dim);
  font-size: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  font-size: 11px;
  color: var(--text-dim);
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  padding: 2px 7px;
}
.chip b {
  color: var(--text);
}
.chip.likes {
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-color: #b7d8d4;
}
.check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
  padding-bottom: 8px;
  cursor: pointer;
}
.check input {
  accent-color: var(--accent);
}

/* ---------- toolbar ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.tfield {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}
.tfield.grow {
  flex: 1 1 220px;
}
.tfield label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
.tfield input,
.tfield select {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
}
.tfield input:focus,
.tfield select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.toolbar-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.video-count {
  color: var(--text-faint);
  font-size: 12px;
  margin-bottom: 12px;
  font-weight: 500;
}
.check-inline {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
  padding-bottom: 8px;
  cursor: pointer;
}
.check-inline input {
  accent-color: var(--accent);
}

/* ---------- creators ---------- */
.creator-card {
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
}
.creator-card .head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.creator-card .name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.creator-card .h {
  font-weight: 700;
  font-size: 15px;
}
.creator-card .fn {
  color: var(--text-dim);
  font-size: 12px;
}
.creator-stats {
  display: flex;
  gap: 14px;
}
.creator-stats .s .n {
  font-weight: 700;
  font-size: 15px;
}
.creator-stats .s .l {
  color: var(--text-faint);
  font-size: 11px;
}
.creator-card .bio {
  color: var(--text-dim);
  font-size: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.email-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 7px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  white-space: nowrap;
  background: #fff;
}
.email-badge.sent {
  background: var(--good-soft);
  color: var(--good);
  border-color: #b7d8c2;
}
.email-badge.no {
  background: #fff;
  color: var(--text-faint);
}

/* ---------- control ---------- */
.control-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.9fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px) {
  .control-layout {
    grid-template-columns: 1fr;
  }
}
.control-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.panel {
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.panel-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.panel-head .spacer {
  flex: 1;
}

.hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 28px;
  border-radius: 18px;
  border: 1px solid #c9ddd9;
  background:
    radial-gradient(700px 240px at 0% 0%, rgba(15, 118, 110, 0.16), transparent 55%),
    linear-gradient(135deg, #ffffff 0%, #f2faf8 55%, #eef6fb 100%);
  box-shadow: var(--shadow);
  animation: heroIn 0.35s ease-out;
}
@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero-left {
  min-width: 0;
  flex: 1;
}
.hero-state {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.hero-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-faint);
  flex: 0 0 auto;
}
.hero-dot.running {
  background: var(--good);
  box-shadow: 0 0 0 5px rgba(21, 128, 61, 0.16);
  animation: pulse 1.6s infinite;
}
.hero-title {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.hero-elapsed {
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  font-size: 15px;
  font-weight: 600;
}
.hero-sub {
  color: var(--text-dim);
  font-size: 14px;
  max-width: 46ch;
}
.hero-stats {
  display: flex;
  gap: 18px;
  margin-top: 16px;
}
.hero-stat .n {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.hero-stat .l {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 600;
}
.hero-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}
.btn.big {
  padding: 13px 26px;
  font-size: 15px;
  border-radius: 12px;
}
.start-btn {
  min-width: 132px;
}
.stop-btn {
  min-width: 118px;
}

.feed-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #efd3a2;
  background: linear-gradient(90deg, #fff8eb, #fffdf8);
  border-radius: var(--radius);
  color: #7a4b0d;
  font-size: 13px;
  animation: rowIn 0.2s ease-out;
}
.feed-banner > div {
  flex: 1;
}

.activity-panel {
  min-height: 260px;
}
.activity {
  display: flex;
  flex-direction: column;
  max-height: 46vh;
  overflow-y: auto;
}
.activity-empty {
  color: var(--text-faint);
  font-size: 13px;
  padding: 28px 4px;
}
.activity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
  animation: rowIn 0.18s ease-out;
}
@keyframes rowIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.activity-row:last-child {
  border-bottom: 0;
}
.activity-row .a-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-dim);
  flex: 0 0 auto;
}
.activity-row .a-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.activity-row .a-time {
  color: var(--text-faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.activity-row.email .a-icon {
  color: var(--good);
  border-color: #b7d8c2;
  background: var(--good-soft);
}
.activity-row.email .a-text {
  color: var(--good);
  font-weight: 700;
}
.activity-row.research .a-icon {
  color: var(--accent-ink);
  border-color: #b7d8d4;
  background: var(--accent-soft);
}
.activity-row.ad .a-icon {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: #efd3a2;
}
.activity-row.error .a-icon,
.activity-row.error .a-text {
  color: var(--bad);
}
.activity-row.session .a-text {
  font-weight: 700;
}
.activity-row.waiting .a-icon {
  color: var(--warn);
}

.setup-panel textarea {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}
.setup-panel textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.setup-panel .check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
}
.setup-panel .check input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
}

.run-more {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-elev);
  padding: 11px 14px;
  box-shadow: var(--shadow-sm);
}
.run-more summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  user-select: none;
}
.run-more[open] summary {
  margin-bottom: 12px;
}
.field {
  margin-bottom: 14px;
}
.field label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 5px;
  font-weight: 600;
}
.field select,
.field input {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field .hint {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
}
.field-row {
  display: flex;
  gap: 10px;
}
.field-row .field {
  flex: 1;
}
/* A heading inside a block of fields, for a group that needs a name but not a section. */
.field-note {
  margin: 14px 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
.field input[type="checkbox"] {
  width: auto;
}
/* The Apify source's extra inputs, indented so they read as belonging to the source above. */
.apify-fields {
  border-left: 2px solid var(--border);
  padding-left: 12px;
  margin: 0 0 14px;
}
.control-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.control-actions .btn {
  flex: 1;
}
.divider {
  height: 1px;
  background: var(--border-soft);
  margin: 6px 0 16px;
}

.console {
  background: #171a1f;
  border: 1px solid #2a3038;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.console .chead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid #2a3038;
  font-size: 12px;
  color: #9aa3b2;
}
.console .chead .spacer {
  flex: 1;
}
.console .chead .btn {
  background: transparent;
  border-color: #3a4250;
  color: #c6ccd6;
}
.log {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: #d5dae3;
  -webkit-user-select: text;
  user-select: text;
  max-height: 280px;
}
.log .line.err {
  color: #ff9aaa;
}
.log .line.cmd {
  color: #5eead4;
}
.log .line.sys {
  color: #fbbf24;
}

/* ---------- onboarding ---------- */
.ob-backdrop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(15, 118, 110, 0.22), transparent 55%),
    rgba(23, 26, 31, 0.55);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 30px;
}
.ob-card {
  width: 580px;
  max-width: 92vw;
  max-height: min(92vh, 820px);
  overflow-y: auto;
  background:
    radial-gradient(600px 220px at 0% 0%, rgba(15, 118, 110, 0.12), transparent 55%),
    linear-gradient(165deg, #ffffff, #f3f7fa 70%);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(16, 21, 28, 0.22);
  padding: 36px 38px 28px;
  animation: obIn 0.28s ease-out;
}
@keyframes obIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.ob-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 10px;
}
.ob-title {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
  color: var(--ink);
}
.ob-sub {
  color: var(--text-dim);
  font-size: 15px;
  margin: 0 0 20px;
  line-height: 1.6;
}
.ob-body textarea,
.ob-body select {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  line-height: 1.5;
}
.ob-body textarea:focus,
.ob-body select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ob-hint {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 8px;
}
.ob-legal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.ob-risk {
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 600;
}
.ob-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.45;
  cursor: pointer;
}
.ob-check input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.ob-check a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ob-body input[type="text"] {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 14px;
  font-family: inherit;
}
.ob-body input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ob-error {
  margin-top: 10px;
  color: var(--bad);
  font-size: 12px;
  font-weight: 600;
}
.ob-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 26px;
}
.ob-dots {
  display: flex;
  gap: 7px;
}
.ob-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.15s ease, transform 0.15s ease;
}
.ob-dot.on {
  background: var(--accent);
  transform: scale(1.15);
}
.ob-dot.done {
  background: #99c9c3;
}

/* ---------- creators: segmented filter, emailed states, detail ---------- */
.segmented {
  display: flex;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.seg-btn:hover {
  color: var(--text);
}
.seg-btn.on {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.creator-card.clickable {
  cursor: pointer;
  transition: border-color 0.14s ease, transform 0.1s ease, box-shadow 0.14s ease;
}
.creator-card.clickable:hover {
  border-color: #b8d7d3;
  box-shadow: var(--shadow);
}
.creator-card.clickable:active {
  transform: translateY(1px);
}
.creator-card.emailed {
  border-color: #b7d8c2;
  background: linear-gradient(180deg, #ffffff, #f4fbf6);
}
.sent-line {
  font-size: 12px;
  color: var(--text-dim);
}
.sent-line b {
  color: var(--good);
}
/* Why this advertiser sits where it does in the hunt order. */
.brand-signals {
  font-size: 12px;
  color: var(--text-faint);
}
.brand-signals b {
  color: var(--accent);
}
.creator-card .name .h .rank {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
}
/* The second toolbar row: only shown while the list is in hunt order. */
.toolbar.weights {
  margin-top: -6px;
}
.toolbar.weights .tfield {
  max-width: 150px;
}
.toolbar.weights .muted {
  align-self: center;
  font-size: 12px;
}
.push-right {
  margin-left: auto;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}
.detail-bio {
  font-size: 14px;
  color: var(--text-dim);
  white-space: pre-wrap;
  border-left: 3px solid #b8d7d3;
  padding-left: 14px;
  margin-bottom: 22px;
  max-width: 720px;
}
.detail-section {
  margin-bottom: 28px;
}
.detail-section h2 {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 12px;
  text-transform: none;
}
.shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.shot {
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.14s ease, transform 0.12s ease, box-shadow 0.14s ease;
  box-shadow: var(--shadow-sm);
}
.shot:hover {
  border-color: #b8d7d3;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.shot img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  background: #111;
}
.shot-cap {
  font-size: 11px;
  color: var(--text-faint);
  padding: 7px 9px;
  font-weight: 500;
}
.outreach-card {
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 15px 17px;
  margin-bottom: 10px;
  max-width: 720px;
  box-shadow: var(--shadow-sm);
}
.outreach-card .o-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.outreach-card .o-head .spacer {
  flex: 1;
}
.outreach-card .o-to {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.outreach-card .o-body {
  font-size: 13px;
  color: var(--text-dim);
  white-space: pre-wrap;
  border-left: 2px solid var(--border);
  padding-left: 12px;
  -webkit-user-select: text;
  user-select: text;
}
.views-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.view-chip {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-dim);
}
.view-chip b {
  color: var(--text);
}

.ad-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 3px 7px;
  border-radius: 7px;
  background: var(--warn);
  color: #fff;
}

/* ---------- empty / loading ---------- */
.empty {
  text-align: center;
  color: var(--text-faint);
  padding: 80px 20px;
}
.empty .big {
  font-family: var(--display);
  font-size: 40px;
  margin-bottom: 8px;
  opacity: 0.4;
  color: var(--accent);
}
.loading {
  color: var(--text-faint);
  padding: 40px;
  text-align: center;
}

/* ---------- modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(23, 26, 31, 0.45);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 30px;
}
.modal {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(23, 26, 31, 0.22);
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal .mhead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.modal .mhead .title {
  font-weight: 700;
  font-family: var(--display);
  letter-spacing: -0.02em;
}
.modal .mhead .spacer {
  flex: 1;
}
.modal .mbody {
  padding: 14px 16px;
  overflow: auto;
}
.player video {
  max-width: 78vw;
  max-height: 72vh;
  border-radius: 10px;
  background: #000;
  display: block;
}
.player .player-meta {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
  font-size: 12px;
}
.player .seg-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}
.lightbox img {
  max-width: 80vw;
  max-height: 80vh;
  border-radius: 10px;
  display: block;
}
/* Ad creatives are shot vertical, so height is the binding constraint rather than width. */
.lightbox video {
  max-width: 80vw;
  max-height: 74vh;
  border-radius: 10px;
  background: #000;
  display: block;
  margin: 0 auto;
}
/* The copy under the creative. Capped to the video's own width so a long body doesn't stretch
   the modal wider than the thing it is describing. */
.lightbox .ad-facts,
.lightbox .ad-headline,
.lightbox .ad-copy {
  max-width: min(80vw, 560px);
  margin: 8px auto 0;
}
.lightbox .ad-facts {
  color: var(--text-faint);
  font-size: 11.5px;
}
.lightbox .ad-headline {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.lightbox .ad-copy {
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  max-height: 22vh;
  overflow: auto;
}
.codec-warn {
  color: var(--warn);
  font-size: 12px;
  max-width: 520px;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-thumb {
  background: #cdc5b5;
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: #b9b09c;
  background-clip: padding-box;
}

/* --- Creator page: deal proposal workspace --- */
.proposal-section {
  background: var(--bg-elev-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
  box-shadow: var(--shadow-sm);
}
.proposal-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  margin: 10px 0 5px;
}
.proposal-field {
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
}
.proposal-field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.proposal-field.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 12px;
}
.proposal-prompt {
  margin: 14px 0 4px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--bg-soft);
}
.proposal-prompt > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  user-select: none;
}
.proposal-prompt > .proposal-field {
  margin-top: 10px;
}
.proposal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.proposal-status {
  font-size: 12px;
  color: var(--text-faint);
}
.proposal-status.err {
  color: var(--bad);
}
.proposal-output:empty {
  display: none;
}
.proposal-doc {
  margin: 16px 0 0;
  padding: 16px 18px;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}

/* ---------- brands ---------- */
.pill.target {
  color: var(--warn);
  border-color: #e6cfae;
  background: var(--warn-soft);
}
.brand-reason {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
}
.brand-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 20px;
  margin-bottom: 14px;
}
.brand-facts .bf .l {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 2px;
}
.brand-facts .bf .v {
  font-size: 13px;
  color: var(--text);
  word-break: break-word;
}
.brand-facts .bf .v.link {
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
.brand-facts .bf .v.link:hover {
  text-decoration: underline;
}
.activity-row.brand .a-icon {
  color: var(--warn);
}

/* The per-brand outreach cadence: one row per touch, each a checkbox, a note and a stamp. */
.crm-hint {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 10px;
}
.crm-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crm-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.crm-step:hover {
  background: var(--panel-2, rgba(255, 255, 255, 0.03));
}
.crm-step input[type="checkbox"] {
  width: auto;
  flex: none;
  cursor: pointer;
}
.crm-step .crm-label {
  flex: none;
  width: 110px;
  font-size: 13px;
  color: var(--text);
}
.crm-step input[type="text"] {
  flex: 1;
  min-width: 0;
}
.crm-step .crm-status {
  flex: none;
  width: 150px;
  text-align: right;
  font-size: 11px;
  color: var(--text-faint);
}
.crm-step .crm-status.err {
  color: var(--danger, #e5534b);
}

/* ---------- list builder ----------
   The tab is a funnel: three lists, each shorter than the last. The rail across the top is
   the funnel itself, the run card says what the next press costs, and the rows are wide and
   flat because they exist to be skimmed by the hundred and ticked, not admired one at a time. */
/* The list picker: which pulled Ad Library search everything below is scoped to. Sits above the
   rail because it governs the rail's counts as well as the rows, and the select is given the
   room to grow because the option labels carry the keyword and its counts on one line. */
.lb-picker {
  margin-bottom: 12px;
}
.lb-picker .tfield.grow {
  flex: 1 1 420px;
}
.lb-pickernote {
  font-size: 12px;
  white-space: nowrap;
  padding-bottom: 8px;
}

.lb-rail {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.lb-step {
  appearance: none;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-elev);
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.lb-step:hover {
  border-color: var(--border);
  color: var(--text);
}
.lb-step.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.lb-step-n {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  background: rgba(16, 21, 28, 0.06);
}
.lb-step.on .lb-step-n {
  background: var(--accent);
  color: #fff;
}
.lb-step-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lb-step-title {
  font-weight: 600;
  font-size: 13px;
}
.lb-step-count {
  font-size: 11px;
  color: var(--text-faint);
}

.lb-run {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-elev-2);
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
}
.lb-run-body {
  min-width: 0;
  flex: 1;
}
.lb-run-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.lb-run-blurb {
  font-size: 12.5px;
  color: var(--text-dim);
}
.lb-actions {
  display: flex;
  gap: 8px;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.lb-strategy {
  appearance: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 28px 7px 10px;
  max-width: min(260px, 100%);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.lb-strategy:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}
.lb-setup {
  margin-bottom: 12px;
}
.lb-tickbtns {
  display: flex;
  gap: 6px;
}

.lb-call-filter {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: rgba(16, 21, 28, 0.06);
  border: 1px solid var(--border-soft);
}
.lb-call-filter-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.lb-call-filter-btn:hover {
  color: var(--text);
}
.lb-call-filter-btn.on {
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.08);
}

.lb-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 30px;
}
.lb-rowwrap {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  overflow: hidden;
}
.lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  min-height: 58px;
}
/* Unticked rows stay on screen — they have to, or you could never change your mind — but they
   step back so the list still reads as "these are the ones going through". */
.lb-row.off {
  opacity: 0.45;
}
.lb-cell {
  min-width: 0;
}
.lb-cell.tick {
  flex: none;
}
.lb-cell.tick input {
  width: 17px;
  height: 17px;
  cursor: pointer;
}
.lb-thumb {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  color: var(--text-faint);
}
.lb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lb-thumb.clickable {
  cursor: zoom-in;
}
/* The creatives under a row, at the size the drawer showed them — big enough to tell a talking
   head from a product shot at a glance, which is the whole reason to look.
   Kept in the layout even while empty (min-height, not display:none) because a box with no
   layout is a box the scroll watcher can never see, so the strip would never fill.
   One line only: rows stay the same height as each other, and the drawer has the rest. */
.lb-rowads {
  min-height: 1px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.lb-rowads.on {
  padding: 0 12px 10px 46px;
}
.lb-cell.name {
  flex: 0 0 190px;
}
.lb-brand {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-name .linkish,
.lb-name .faint {
  font-size: 11px;
}
.lb-cell.copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lb-adblurb {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-name .lb-adblurb {
  white-space: normal;
  margin: 1px 0 2px;
}
.lb-adcopy {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  color: var(--text-dim);
}
.lb-cell.facts {
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  font-size: 11.5px;
}
.lb-cell.num {
  flex: none;
  width: 54px;
  text-align: right;
}
.lb-lead {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-dim);
}
.lb-cell.verdict {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lb-cell.signals {
  flex: none;
  display: flex;
  gap: 10px;
}
.lb-sig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.lb-sig label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
.lb-cell.flags {
  flex: 0 1 210px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: center;
}
.lb-cell.why {
  flex: 1 1 220px;
}
.lb-reason {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  color: var(--text-dim);
}
/* What they said on the call, which has replaced why we guessed they were worth calling.
   Darker than the guess it displaced, because it is the one line on the row somebody earned. */
.lb-reason.said {
  color: var(--text);
}
.lb-cell.who,
.lb-cell.phone {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  font-size: 12px;
}
/* On the found list the person IS the row, so their name gets the width the ad copy had. */
.lb-cell.who.wide {
  flex: 1 1 260px;
  min-width: 0;
}
.lb-cell.who.wide > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-person {
  font-weight: 550;
  color: var(--text);
  font-size: 13px;
}
/* Your own note, in the row rather than in the drawer: it is written the moment you notice the
   thing, so it cannot be a click away. Two lines high so a row keeps the height it had, and it
   sits flat until focused — a list of three hundred boxes would otherwise read as a form. */
.lb-cell.notes {
  flex: 0 0 190px;
  position: relative;
  display: flex;
}
.lb-note {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid transparent;
  color: var(--text);
  border-radius: 7px;
  padding: 6px 8px;
  font-size: 11.5px;
  line-height: 1.35;
  font-family: inherit;
  resize: none;
}
.lb-note:hover {
  border-color: var(--border-soft);
}
.lb-note:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.lb-note::placeholder {
  color: var(--text-faint);
}
/* "saving…" / "saved", only while there is something to say. Over the box's bottom corner so
   nothing in the row moves when it appears. */
.lb-notestate {
  position: absolute;
  right: 4px;
  bottom: 3px;
  font-size: 9.5px;
  letter-spacing: 0.03em;
  color: var(--text-faint);
  background: var(--bg-soft);
  border-radius: 5px;
  padding: 0 4px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.lb-note:focus ~ .lb-notestate {
  background: #fff;
}
.lb-notestate.on {
  opacity: 1;
}
.lb-notestate.err {
  color: var(--bad);
  font-weight: 600;
}
/* A row with a note on it is a row you have already thought about, and that should be visible
   from across the list without reading anything. */
.lb-rowwrap:has(.lb-note:not(:placeholder-shown)) {
  border-color: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.lb-cell.expand {
  flex: none;
  margin-left: auto;
}
.lb-expand {
  appearance: none;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-faint);
  border-radius: 6px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.15s, color 0.15s;
}
.lb-expand:hover {
  color: var(--text);
}
.lb-expand.open {
  transform: rotate(180deg);
  color: var(--accent);
}

/* A 0-100 signal. "—" is deliberate: it means nobody ever found out, which is not a zero. */
.score-pill {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.score-pill.good {
  color: var(--good);
  background: var(--good-soft);
  border-color: rgba(21, 128, 61, 0.25);
}
.score-pill.warn {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: rgba(180, 83, 9, 0.25);
}
.score-pill.bad {
  color: var(--bad);
  background: var(--bad-soft);
  border-color: rgba(190, 18, 60, 0.2);
}
.score-pill.none {
  color: var(--text-faint);
  background: rgba(16, 21, 28, 0.05);
}
.lb-flag {
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 5px;
  white-space: nowrap;
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.6);
}
.lb-flag.good {
  color: var(--good);
  border-color: rgba(21, 128, 61, 0.25);
  background: var(--good-soft);
}
.lb-flag.warn {
  color: var(--warn);
  border-color: rgba(180, 83, 9, 0.25);
  background: var(--warn-soft);
}
.lb-flag.bad {
  color: var(--bad);
  border-color: rgba(190, 18, 60, 0.2);
  background: var(--bad-soft);
}

/* The drawer: every reason in full, and the creatives the scores were read off. */
.lb-detail {
  border-top: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.55);
}
.lb-detail-body {
  padding: 12px 14px 14px 46px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lb-dlines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lb-dline {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.lb-dline label {
  flex: none;
  width: 78px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

/* Do not call. Set apart from the scoring lines above it with a rule and a warmer colour,
   because it is the one line in the drawer that changes something rather than reporting it. */
.lb-dnc {
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px dashed var(--border-soft);
}
/* The clickable label beside the box, which is a <label> and so would otherwise inherit the
   78px uppercase column above and end up truncated to "Never ring th". */
.lb-dnc-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  flex: none;
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-dim);
  cursor: pointer;
}
.lb-dnc-box input {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--bad);
}
.lb-dnc-box:hover {
  color: var(--bad);
}

/* A suppressed advertiser stays on the list — taking the row away would hide the fact that you
   are deliberately not calling them, which is the thing worth being able to see. It just stops
   looking like something to work. */
.lb-rowwrap.dnc {
  border-color: rgba(190, 18, 60, 0.28);
  box-shadow: inset 3px 0 0 var(--bad);
}
.lb-rowwrap.dnc .lb-cell.phone {
  opacity: 0.5;
}
/* Prior lookup miss — still on the list for retry, but visually secondary to open rows. */
.lb-rowwrap.miss {
  border-color: rgba(180, 83, 9, 0.28);
  box-shadow: inset 3px 0 0 var(--warn);
  opacity: 0.92;
}
.dial:disabled {
  cursor: not-allowed;
  text-decoration: line-through;
  opacity: 0.7;
}

.lb-dhead {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.lb-ads {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.lb-ad {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
}
.lb-ad.clickable {
  cursor: pointer;
}
.lb-ad img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lb-adtag {
  position: absolute;
  top: 3px;
  left: 3px;
  font-size: 10px;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(16, 21, 28, 0.68);
  color: #fff;
}
.lb-adtag.play {
  left: auto;
  right: 3px;
}
.lb-evidence summary {
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
}
.lb-evidence pre {
  white-space: pre-wrap;
  font-size: 11px;
  color: var(--text-faint);
  max-height: 220px;
  overflow: auto;
  margin: 6px 0 0;
}
.linkish {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.linkish:hover {
  text-decoration: underline;
}
.linkish.strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* A number that rings when clicked. The handset is the whole affordance: the rest of the row is
   full of things that open a page, and this one puts a call through a phone in another room. */
.linkish.dial::before {
  content: "☎ ";
  opacity: 0.65;
}
/* The number is worth copying — into a CRM, a text, a notebook — so it opts back out of the
   no-selection rule that keeps the rest of the buttons from highlighting. */
.linkish.dial .dial-num {
  -webkit-user-select: text;
  user-select: text;
}
/* The switchboard, under the direct line. Dimmer on purpose: same click, second choice.
   (`.faint` would lose to `.linkish` on colour, being the earlier rule of equal specificity.) */
.linkish.dial.quiet {
  color: var(--text-dim);
  font-size: 11px;
}
.linkish.dial.dialing {
  color: var(--warn);
  cursor: progress;
}
.linkish.dial.rang {
  color: var(--good);
}
.lb-activity {
  margin-bottom: 12px;
}
.lb-activity .activity {
  max-height: 240px;
  overflow: auto;
  margin-top: 8px;
}

/* Floating card while PhoneBurner shows / rings a contact (live webhook feed). */
#liveCallRoot {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
#liveCallRoot > * {
  pointer-events: auto;
}
.lb-live {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface, #fff);
  box-shadow: 0 12px 40px rgba(16, 21, 28, 0.18);
  max-height: min(78vh, 720px);
  overflow: auto;
}
.lb-live-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lb-live-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(16, 21, 28, 0.06);
  padding: 2px 8px;
  border-radius: 999px;
}
.lb-live-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
.lb-live-blurb {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.lb-live-contact {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.35;
}
.lb-live-media {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  background: #0b0f14;
  border-radius: 8px;
}
.lb-live-media.empty {
  display: grid;
  place-items: center;
  min-height: 120px;
  color: var(--text-faint);
  font-size: 12px;
  background: rgba(16, 21, 28, 0.04);
}
.lb-live-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lb-live-summary,
.lb-live-adcopy {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-dim);
  white-space: pre-wrap;
}
.lb-live-adcopy {
  border-top: 1px solid var(--border-soft);
  padding-top: 8px;
  color: var(--text);
}

/* ---------- web app (not Electron chrome) ---------- */
body.web {
  overflow: auto;
}
body.web .topbar .brand {
  padding-left: 0;
}
body.web .view {
  min-height: 0;
}

.app-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
}
.phone-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 28px;
  border-right: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.38);
  overflow: auto;
}
.phone-bezel {
  width: 232px;
  aspect-ratio: 9 / 19.5;
  background: #121417;
  border-radius: 28px;
  padding: 11px 9px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.phone-bezel video,
.phone-bezel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  background: #1a1d22;
  display: block;
}
.phone-placeholder {
  position: absolute;
  inset: 11px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #9aa3ad;
  font-size: 12px;
  line-height: 1.4;
  padding: 18px;
  pointer-events: none;
}
.phone-bezel.has-frame .phone-placeholder {
  display: none;
}
.phone-caption {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}
@media (max-width: 820px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .phone-stage {
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
    padding: 14px 16px;
  }
  .phone-bezel {
    width: 160px;
  }
}

.gate {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.gate-card {
  width: min(440px, 100%);
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 32px 28px 28px;
}
.gate-card.wide {
  width: min(520px, 100%);
}
.gate-card .hint {
  margin: -8px 0 14px;
  font-size: 12px;
  color: var(--text-faint);
}
.gate-card h1 {
  font-family: var(--display);
  font-size: 28px;
  letter-spacing: -0.03em;
  margin: 10px 0 8px;
}
.gate-card .lede {
  color: var(--text-dim);
  margin: 0 0 22px;
}
.gate-card label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  margin: 0 0 6px;
}
.gate-card input,
.gate-card textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  margin-bottom: 14px;
}
.gate-card textarea {
  min-height: 120px;
  resize: vertical;
}
.gate-card .btn.full {
  width: 100%;
  margin-top: 6px;
}
.gate-error {
  color: var(--bad);
  font-size: 13px;
  font-weight: 600;
  min-height: 1.2em;
  margin: 0 0 8px;
}
.gate-switch {
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  margin: 16px 0 0;
}
.gate-switch button {
  background: none;
  border: 0;
  color: var(--accent);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.auth-toggle[hidden],
.form-panel[hidden] {
  display: none !important;
}