/* ── Reset & Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Dark Mode (default) ───────────────────────────────────────── */
:root {
  --bg:       #0f0f0f;
  --surface:  #1a1a1a;
  --surface2: #222222;
  --border:   #2a2a2a;
  --border2:  #333333;
  --text:     #e8e8e8;
  --muted:    #777;
  --muted2:   #555;

  --p1:       #e05252;
  --p1-bg:    #2a1414;
  --p1-border:#4a2020;
  --p2:       #e09a30;
  --p2-bg:    #251d0a;
  --p2-border:#4a3810;
  --p3:       #4caf7d;
  --p3-bg:    #0c1e14;
  --p3-border:#1a3a24;
  --p4:       #5a8ab0;
  --p4-bg:    #0c1620;
  --p4-border:#1a2e44;

  --accent:   #7eb8d4;
  --blocked:  #c0392b;

  --font-body: 'Georgia', 'Times New Roman', serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  --topbar-h: 58px;
}

/* ── Light Mode ────────────────────────────────────────────────── */
body.light-mode {
  --bg:       #f5f2eb;
  --surface:  #ffffff;
  --surface2: #ede9df;
  --border:   #d4cec2;
  --border2:  #c4bdb0;
  --text:     #1c1914;
  --muted:    #7a7268;
  --muted2:   #a09890;

  --p1:       #b83020;
  --p1-bg:    #fdf0ed;
  --p1-border:#e8c4bc;
  --p2:       #a06010;
  --p2-bg:    #fdf6e8;
  --p2-border:#e0cc94;
  --p3:       #1e7a4e;
  --p3-bg:    #edf7f1;
  --p3-border:#a8d4bc;
  --p4:       #3a6888;
  --p4-bg:    #edf2f8;
  --p4-border:#aac4dc;

  --accent:   #3a6888;
  --blocked:  #b83020;
}

html { font-size: 15px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.55;
  min-height: 100vh;
}

/* ── Top Bar ───────────────────────────────────────────────────── */
#topbar {
  position: sticky; top: 0; z-index: 200;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  gap: 16px;
}
.topbar-left { display: flex; align-items: center; gap: 16px; }
.mode-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 10px 16px;
  margin: 0 4px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  border-radius: 4px;
}
.mode-btn:hover { 
  background: rgba(255,255,255,0.05);
  color: var(--text); 
}
.mode-btn.active { 
  color: var(--accent); 
  background: rgba(126, 184, 212, 0.1);
  border-bottom-color: var(--accent); 
}

/* ── Mode Transitions ── */
.mode-view {
  padding: 24px;
  animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Manage Mode Layout ── */
.manage-layout {
  display: flex;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
}
.manage-sidebar {
  flex: 0 0 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  height: fit-content;
  position: sticky;
  top: 80px;
}
.manage-body {
  flex: 1;
  min-width: 0;
}

/* ── Asset Inspection Styles ── */
.inspect-view {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.inspect-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inspect-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--muted);
}
.inspect-content {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  max-height: 300px;
  overflow-y: auto;
}
.inspect-content.empty {
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
}
.inspect-row {
  display: flex;
  gap: 20px;
}
.inspect-group {
  flex: 1;
}
.inspect-log {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted2);
  line-height: 1.6;
}
.cc-status-pill {
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  border: 1px solid transparent;
  display: inline-block;
  text-align: center;
}
.cc-status-pill.publish,
.cc-status-pill.published,
.cc-status-pill.sent {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.3);
}
.cc-status-pill.scheduled {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.3);
}
.cc-status-pill.draft,
.cc-status-pill.not_started {
  background: var(--surface2);
  color: var(--muted);
  border-color: var(--border2);
}

.promo-tab-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.promo-tab-btn {
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.05em;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
  text-align: left;
  border-radius: 0 4px 4px 0;
}
.promo-tab-btn:hover { 
  color: var(--text); 
  background: rgba(255,255,255,0.03);
}
.promo-tab-btn.active { 
  color: var(--accent); 
  border-left-color: var(--accent); 
  background: rgba(126, 184, 212, 0.05);
}
.hub-panel {
  max-width: 1000px;
  margin: 0 auto;
}
.hub-panel h2 {
  font-size: 24px;
  margin-bottom: 32px;
  letter-spacing: 0.05em;
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--muted);
}
.hub-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.hub-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.hub-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.hub-card h3 {
  font-size: 16px;
  margin-bottom: 16px;
  color: var(--accent);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.hub-stats {
  margin-bottom: 24px;
  flex-grow: 1;
}
.hub-stat {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
  padding-left: 14px;
  position: relative;
  line-height: 1.4;
}
.hub-stat::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
  opacity: 0.5;
}
.hub-open-btn {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.hub-open-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Coming Soon ────────────────────────────────────────────────── */
.coming-soon-panel {
  text-align: center;
  padding: 100px 24px;
  background: var(--surface);
  border: 1px dashed var(--border2);
  border-radius: 8px;
  max-width: 500px;
  margin: 60px auto;
}
.coming-soon-panel h2 {
  font-size: 20px;
  margin-bottom: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.coming-soon-panel p {
  color: var(--muted2);
  font-style: italic;
  font-size: 14px;
}

/* ── TO-DO Nav ──────────────────────────────────────────────────── */
.todo-nav-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  padding: 0 4px 12px;
  border-bottom: 1px solid var(--border);
}
.logo {
  font-size: 20px; font-weight: bold;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text);
}
.topbar-date {
  font-size: 12px; color: var(--muted);
  font-family: var(--font-mono); letter-spacing: 0.04em;
}
.topbar-right { display: flex; align-items: center; gap: 12px; }
.window-pill {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 4px 12px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--accent);
  white-space: nowrap;
}
.window-pill.closed { color: var(--muted); }
.window-pill.warning { color: var(--p2); border-color: var(--p2-border); }
.clock {
  font-family: var(--font-mono); font-size: 13px; color: var(--muted);
}
.icon-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  padding: 5px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn.active { border-color: var(--accent); color: var(--accent); }

/* ── Layout ────────────────────────────────────────────────────── */
#main {
  display: grid;
  grid-template-columns: 1fr 300px;
  min-height: calc(100vh - var(--topbar-h));
}
#feed {
  padding: 28px 28px 60px;
  border-right: 1px solid var(--border);
}
#sidebar {
  padding: 24px 18px 40px;
  background: var(--surface);
}

/* ── Capture Button ─────────────────────────────────────────────── */
#new-project-row { margin-bottom: 26px; }
.btn-capture {
  width: 100%;
  background: none;
  border: 1px dashed var(--border2);
  border-radius: 6px;
  color: var(--muted);
  font-size: 14px;
  font-family: var(--font-body);
  padding: 11px 20px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, color 0.15s;
}
.btn-capture:hover { border-color: var(--accent); color: var(--accent); }
.btn-capture .plus { font-size: 18px; margin-right: 8px; }

/* ── Priority Sections ──────────────────────────────────────────── */
.priority-section { margin-bottom: 32px; }
.section-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}
.section-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.section-title {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: bold;
}
.section-count {
  margin-left: auto; font-family: var(--font-mono);
  font-size: 11px; color: var(--muted2);
}

/* Priority colour sets */
.p1 .section-dot  { background: var(--p1); }
.p1 .section-title { color: var(--p1); }
.p2 .section-dot  { background: var(--p2); }
.p2 .section-title { color: var(--p2); }
.p3 .section-dot  { background: var(--p3); }
.p3 .section-title { color: var(--p3); }
.p4 .section-dot  { background: var(--p4); }
.p4 .section-title { color: var(--p4); }
.completed .section-dot  { background: var(--muted2); }
.completed .section-title { color: var(--muted2); }

/* ── Project Cards ──────────────────────────────────────────────── */
.card {
  border-radius: 6px;
  border: 1px solid var(--border);
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.card:last-child { margin-bottom: 0; }
.card:hover { border-color: var(--border2); }

.p1 .card { border-left: 3px solid var(--p1); background: var(--p1-bg); border-color: var(--p1-border); }
.p2 .card { border-left: 3px solid var(--p2); background: var(--p2-bg); border-color: var(--p2-border); }
.p3 .card { border-left: 3px solid var(--p3); background: var(--p3-bg); border-color: var(--p3-border); }
.p4 .card { border-left: 3px solid var(--p4); background: var(--p4-bg); border-color: var(--p4-border); }

.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.card-title { font-size: 15px; font-weight: bold; color: var(--text); }
.card-meta  { font-size: 12px; color: var(--muted); margin-top: 3px; font-family: var(--font-mono); }
.card-action { font-size: 13px; color: var(--accent); margin-top: 8px; font-style: italic; }
.card-action::before { content: '→ '; }
.card-footer { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ── Badges ─────────────────────────────────────────────────────── */
.badge {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 3px; white-space: nowrap; flex-shrink: 0;
}
/* Use CSS vars so badges respect light/dark mode */
.badge-blocked  { background: var(--p1-bg); color: var(--p1); border: 1px solid var(--p1-border); }
.badge-new      { background: var(--p3-bg); color: var(--p3); border: 1px solid var(--p3-border); }
.badge-paused   { background: var(--p2-bg); color: var(--p2); border: 1px solid var(--p2-border); }
.badge-overdue  { background: var(--p1-bg); color: var(--p1); border: 1px solid var(--p1-border); }
.badge-complete { background: var(--p3-bg); color: var(--p3); border: 1px solid var(--p3-border); }
.badge-reopen   { background: var(--p4-bg); color: var(--p4); border: 1px solid var(--p4-border); }
.badge-phase-next { background: var(--p2-bg); color: var(--p2); border: 1px solid var(--p2-border); }
.badge-phase-prev { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }

/* Deadline pill */
.deadline-pill {
  font-family: var(--font-mono); font-size: 12px;
  padding: 3px 8px; border-radius: 3px; white-space: nowrap; flex-shrink: 0;
}
.dl-urgent  { background: var(--p1-bg); color: var(--p1); border: 1px solid var(--p1-border); }
.dl-soon    { background: var(--p2-bg); color: var(--p2); border: 1px solid var(--p2-border); }
.dl-ok      { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }
.dl-overdue { background: var(--p1-bg); color: var(--p1); border: 1px solid var(--p1-border); font-weight: bold; }

/* Inline buttons on cards */
.btn-card {
  background: none; border: 1px solid var(--border2);
  border-radius: 4px; color: var(--muted); font-size: 12px;
  font-family: var(--font-mono); padding: 3px 9px; cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.btn-card:hover { border-color: var(--accent); color: var(--accent); }

/* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar-section { margin-bottom: 28px; }
.sidebar-title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  padding-bottom: 7px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}

/* Lead Measures */
.measure-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.measure-row:last-child { border-bottom: none; }
.measure-label { color: var(--muted); }
.measure-right { display: flex; align-items: center; gap: 6px; }
.measure-val { font-family: var(--font-mono); font-size: 14px; min-width: 20px; text-align: right; }
.measure-target { font-size: 11px; color: var(--muted2); font-family: var(--font-mono); }
.measure-zero   { color: var(--p1); }
.measure-ok     { color: var(--p3); }
.measure-btns   { display: flex; gap: 3px; }
.measure-btn {
  background: none; border: 1px solid var(--border);
  border-radius: 3px; color: var(--muted); font-size: 11px;
  width: 20px; height: 20px; cursor: pointer; line-height: 1;
  transition: border-color 0.12s, color 0.12s;
}
.measure-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Content Pipeline table */
.pipeline-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.pipeline-table th {
  text-align: left; color: var(--muted2); font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 6px; border-bottom: 1px solid var(--border); font-weight: normal;
}
.pipeline-table td { padding: 7px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.pipeline-table tr:last-child td { border-bottom: none; }
.pipeline-table td:first-child { color: var(--text); font-size: 13px; }

.ps-live        { color: var(--p3); font-family: var(--font-mono); font-size: 11px; }
.ps-pending     { color: var(--p2); font-family: var(--font-mono); font-size: 11px; }
.ps-in_progress { color: var(--accent); font-family: var(--font-mono); font-size: 11px; }
.ps-not_started { color: var(--muted2); font-family: var(--font-mono); font-size: 11px; }

.pipeline-action { color: var(--accent); font-size: 11px; font-style: italic; display: block; }
.btn-pipeline-add {
  width: 100%; margin-top: 10px;
  background: none; border: 1px dashed var(--border);
  border-radius: 4px; color: var(--muted); font-size: 12px;
  font-family: var(--font-mono); padding: 5px; cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.btn-pipeline-add:hover { border-color: var(--accent); color: var(--accent); }

/* Quick projects list */
.qp-row {
  padding: 7px 0 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; cursor: pointer;
  display: flex; align-items: flex-start; gap: 9px;
}
.qp-row:last-child { border-bottom: none; }
.qp-row:hover .qp-name { color: var(--accent); }
.qp-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 4px;
}
.qp-dot-1 { background: var(--p1); }
.qp-dot-2 { background: var(--p2); }
.qp-dot-3 { background: var(--p3); }
.qp-dot-4 { background: var(--p4); }
.qp-content { flex: 1; min-width: 0; }
.qp-name { color: var(--text); }
.qp-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 2px; }
.qp-meta-blocked { color: var(--p1); }
.qp-meta-p2 { color: var(--p2); }

/* ── Publishing Dashboard ─────────────────────────────────────────── */
.publishing-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
}
.publishing-header h2 {
  font-size: 20px;
  margin-bottom: 8px;
}
.publishing-header p {
  color: var(--muted);
  margin-bottom: 16px;
}
.publishing-pipeline {
  padding: 20px;
}
.pipeline-row {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.pipeline-module {
  flex: 0 0 220px;
}
.pipeline-module strong {
  font-size: 15px;
  color: var(--text);
  display: block;
  margin-bottom: 4px;
}
.module-title {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
}
.pipeline-platforms {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.platform-cell {
  flex: 1;
  min-width: 140px;
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 10px;
  background: var(--surface2);
}
.platform-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 6px;
}
.platform-status {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 8px;
}
.platform-status.not_started { background: var(--surface); color: var(--muted2); }
.platform-status.in_progress { background: var(--p2-bg); color: var(--p2); }
.platform-status.completed { background: var(--p3-bg); color: var(--p3); }
.platform-rev {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rev-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--muted);
  width: 22px;
  height: 22px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.rev-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.rev-count {
  font-family: var(--font-mono);
  font-size: 14px;
  min-width: 24px;
  text-align: center;
}

/* ── Modal ───────────────────────────────────────────────────────── */
#modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
#modal-overlay.hidden { display: none; }
.hidden { display: none; }
#modal-box {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 28px 30px;
  width: 100%; max-width: 560px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  /* Visible scrollbar track so user knows it scrolls */
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}
.modal-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; color: var(--muted);
  font-size: 18px; cursor: pointer; line-height: 1;
}
.modal-close:hover { color: var(--text); }
.modal-title {
  font-size: 18px; font-weight: bold; margin-bottom: 6px;
}
.modal-subtitle {
  font-size: 13px; color: var(--muted); margin-bottom: 22px;
  font-family: var(--font-mono);
}
.modal-step-indicator {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted2);
  margin-bottom: 20px; letter-spacing: 0.06em;
}

/* Form elements */
.form-group { margin-bottom: 18px; }
.form-label {
  display: block; font-size: 12px; font-family: var(--font-mono);
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.form-input, .form-select, .form-textarea {
  width: 100%; background: var(--bg);
  border: 1px solid var(--border2); border-radius: 5px;
  color: var(--text); font-size: 14px; font-family: var(--font-body);
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent);
}
.form-select { cursor: pointer; }
.form-textarea { resize: vertical; min-height: 80px; }
.form-select option { background: var(--surface); }

/* Date input — ensure calendar icon and picker are always visible */
input[type="date"].form-input {
  cursor: pointer;
  color-scheme: dark;
}
body.light-mode input[type="date"].form-input {
  color-scheme: light;
}
input[type="date"].form-input::-webkit-calendar-picker-indicator {
  filter: invert(0.6);
  cursor: pointer;
  padding-left: 4px;
}
body.light-mode input[type="date"].form-input::-webkit-calendar-picker-indicator {
  filter: invert(0.3);
}

/* Type picker grid — 2 cols, last item spans full width if odd count */
.type-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.type-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
.type-btn {
  background: var(--bg); border: 1px solid var(--border2);
  border-radius: 5px; color: var(--muted); font-size: 13px;
  font-family: var(--font-body); padding: 10px 12px;
  cursor: pointer; text-align: left;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.type-btn:hover { border-color: var(--accent); color: var(--accent); }
.type-btn.selected {
  border-color: var(--accent); color: var(--accent);
  background: var(--surface2);
}

/* Priority picker */
.priority-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.pri-btn {
  border: 1px solid var(--border2); border-radius: 5px;
  background: var(--bg); color: var(--muted); font-size: 12px;
  font-family: var(--font-mono); padding: 8px 4px;
  cursor: pointer; text-align: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.pri-btn[data-p="1"].selected { border-color: var(--p1); color: var(--p1); background: var(--p1-bg); }
.pri-btn[data-p="2"].selected { border-color: var(--p2); color: var(--p2); background: var(--p2-bg); }
.pri-btn[data-p="3"].selected { border-color: var(--p3); color: var(--p3); background: var(--p3-bg); }
.pri-btn[data-p="4"].selected { border-color: var(--p4); color: var(--p4); background: var(--p4-bg); }

/* Checkbox row */
.check-row { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.check-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* Modal action buttons */
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.btn-primary {
  background: var(--accent); border: none; border-radius: 5px;
  color: #ffffff; font-size: 14px; font-weight: bold;
  padding: 9px 22px; cursor: pointer;
  transition: opacity 0.15s;
}
body.light-mode .btn-primary { color: #ffffff; }
.btn-primary:hover { opacity: 0.88; }
.btn-secondary {
  background: none; border: 1px solid var(--border2); border-radius: 5px;
  color: var(--muted); font-size: 14px;
  padding: 9px 18px; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger {
  background: none; border: 1px solid var(--p1-border); border-radius: 5px;
  color: var(--p1); font-size: 14px;
  padding: 9px 18px; cursor: pointer;
  transition: opacity 0.15s;
}
.btn-danger:hover { opacity: 0.8; }

/* Prompt boxes */
.prompt-box {
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 6px; padding: 14px 16px; margin-top: 18px;
  font-size: 14px;
}
.prompt-box-title { font-weight: bold; margin-bottom: 6px; color: var(--accent); }
.prompt-box-body  { color: var(--muted); font-size: 13px; margin-bottom: 12px; }

/* Plugin panel */
.plugin-item { margin-bottom: 14px; }
.plugin-label { font-size: 14px; font-weight: bold; margin-bottom: 4px; }
.plugin-desc  { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.plugin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-plugin {
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 4px; color: var(--muted); font-size: 12px;
  font-family: var(--font-mono); padding: 5px 12px; cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.btn-plugin:hover { border-color: var(--accent); color: var(--accent); }

/* ── Toasts ──────────────────────────────────────────────────────── */
#toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 6px; padding: 10px 16px;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text); opacity: 1;
  transition: opacity 0.4s;
  max-width: 320px;
}
.toast.success { border-color: var(--p3-border); color: var(--p3); }
.toast.error   { border-color: var(--p1-border); color: var(--p1); }
.toast.fade    { opacity: 0; }

/* ── Gap 1: Commitment Declaration ──────────────────────────────── */
.commitment-wrap {
  background: linear-gradient(135deg, var(--surface2) 0%, var(--surface) 100%);
  border: 2px solid var(--accent);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.commitment-label {
  font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent); margin-bottom: 10px;
  font-weight: bold;
}
.commitment-input {
  width: 100%; background: transparent; border: none;
  color: var(--text); font-size: 18px; font-family: var(--font-body);
  line-height: 1.6; resize: vertical; outline: none;
  padding: 0; min-height: 56px; font-weight: 500;
}
.commitment-input::placeholder { color: var(--muted2); font-style: italic; }

/* ── Gap 2: P4 toggle ────────────────────────────────────────────── */
.p4-toggle {
  display: flex; align-items: center;
  padding: 10px 0; margin-top: 4px; margin-bottom: 4px;
  cursor: pointer; border-top: 1px solid var(--border);
}
.p4-toggle:hover .p4-toggle-label { color: var(--accent); }
.p4-toggle-label {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--muted); letter-spacing: 0.06em;
}

/* Completed toggle */
.completed-toggle {
  display: flex; align-items: center;
  padding: 10px 0; margin-top: 4px; margin-bottom: 4px;
  cursor: pointer; border-top: 1px solid var(--border);
}
.completed-toggle:hover .completed-toggle-label { color: var(--accent); }
.completed-toggle-label {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--muted); letter-spacing: 0.06em;
}

/* ── Gap 3: Session note on card ─────────────────────────────────── */
.card-session-note {
  margin-top: 8px;
  font-size: 12px; color: var(--muted);
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 7px;
}
.session-note-date {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--muted2); margin-right: 6px;
}

/* ── Gap 4: Context modal ────────────────────────────────────────── */
.context-block {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.context-block:last-of-type { border-bottom: none; }
.context-section-label {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin-bottom: 5px;
}
.context-val {
  font-size: 14px; color: var(--text);
}
.context-next-val {
  color: var(--accent); font-style: italic;
}
.context-last-note { font-size: 14px; color: var(--text); margin-bottom: 4px; }
.context-blocked {
  display: flex; align-items: center;
  background: var(--p1-bg); border: 1px solid var(--p1-border);
  border-radius: 5px; padding: 10px 14px; margin-bottom: 16px;
}
.context-log-row { margin-top: 16px; }
.session-history { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.session-history-item {
  font-size: 13px; color: var(--muted);
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.session-history-item:last-child { border-bottom: none; }

/* ── Gap 5: Ghostwriting lifecycle bar ───────────────────────────── */
.gw-bar {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--border);
}
.gw-stage {
  display: flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 11px;
  border: 1px solid var(--border);
}
.gw-done    { background: var(--p3-bg); color: var(--p3); border-color: var(--p3-border); }
.gw-pending { background: var(--surface2); color: var(--muted2); }
.gw-stage-label { font-size: 10px; }
.gw-checklist { margin-top: 4px; }

/* ── Lead measures — prominent actuals ───────────────────────────── */
.measure-btn-large {
  background: var(--accent); border: none; border-radius: 4px;
  color: #fff; font-size: 12px; font-family: var(--font-mono);
  font-weight: bold; padding: 4px 10px; cursor: pointer;
  transition: opacity 0.12s; flex-shrink: 0;
}
.measure-btn-large:hover { opacity: 0.82; }
.measure-btn-sm {
  background: none; border: 1px solid var(--border2);
  border-radius: 4px; color: var(--muted); font-size: 13px;
  width: 24px; height: 24px; cursor: pointer; flex-shrink: 0;
  transition: border-color 0.12s, color 0.12s;
}
.measure-btn-sm:hover { border-color: var(--muted); color: var(--text); }
.measure-val-block { display: flex; align-items: baseline; gap: 4px; }
.measure-val  { font-family: var(--font-mono); font-size: 18px; font-weight: bold; }
.measure-zero  { color: var(--p1); }
.measure-good  { color: var(--p2); }
.measure-ok    { color: var(--p3); }
.measure-of    { font-family: var(--font-mono); font-size: 12px; color: var(--muted2); }
.lead-hint     { margin-left: auto; font-size: 10px; color: var(--muted2);
                 font-family: var(--font-mono); letter-spacing: 0; text-transform: none; }

/* ── Notes ───────────────────────────────────────────────────────── */
.note-row {
  padding: 9px 0; border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.note-row:last-child { border-bottom: none; }
.note-row:hover .note-title { color: var(--accent); }
.note-title { font-size: 14px; color: var(--text); }
.note-meta  { font-family: var(--font-mono); font-size: 11px; color: var(--muted2); margin-top: 2px; }

/* ── Pipeline Book Headers & Asset Drawer ────────────────────────── */
.pipeline-book-header td {
  background: var(--surface2);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 8px 10px 7px;
  border-top: 2px solid var(--border2);
}
.pipeline-book-count {
  font-weight: 400;
  color: var(--muted);
  margin-left: 8px;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}
.pipeline-assets-drawer {
  background: var(--surface2);
  border-radius: 4px;
  padding: 12px 14px;
  margin: 4px 0;
}
.pipeline-assets-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.pipeline-asset-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.55;
}
.pipeline-asset-key {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 3px;
}
.pipeline-synopsis-text {
  max-height: 120px;
  overflow-y: auto;
  display: block;
  color: var(--muted);
  line-height: 1.6;
}

/* ── Prompt Templates ────────────────────────────────────────────── */
.prompt-summary-list {
  margin-bottom: 12px;
}
.prompt-summary-row {
  padding: 8px 10px;
  border-left: 2px solid var(--accent);
  margin-bottom: 8px;
  background: var(--surface2);
  border-radius: 0 4px 4px 0;
}
.prompt-summary-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.prompt-summary-desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.prompt-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 10px;
  overflow: hidden;
  background: var(--surface);
}
.prompt-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  gap: 12px;
}
.prompt-card-header:hover { background: var(--surface2); }
.prompt-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}
.prompt-card-desc-short {
  font-size: 12px;
  color: var(--muted);
}
.prompt-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.prompt-chevron {
  font-size: 14px;
  color: var(--muted);
  margin-left: 4px;
}
.btn-icon {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 4px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.btn-icon:hover { background: var(--surface2); color: var(--text); }
.btn-icon-danger:hover { background: rgba(220,60,60,0.12); color: #e05555; border-color: #e05555; }

.prompt-card-body {
  padding: 0 14px 14px;
  border-top: 1px solid var(--border);
}
.prompt-meta-row {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.prompt-meta-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 3px;
}
.prompt-text-preview {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
  line-height: 1.6;
}
.prompt-edit-textarea {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
  resize: vertical;
}

/* ── WBS Phase Template Editor ───────────────────────────────────── */
.wbs-template-section {
  margin-bottom: 24px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 16px;
  background: var(--surface);
}
.wbs-template-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: bold;
  color: var(--accent);
  cursor: pointer;
  user-select: none;
}
.wbs-chevron {
  font-size: 14px;
  color: var(--muted);
  width: 14px;
  display: inline-block;
  text-align: center;
}
.wbs-template-header:hover .wbs-chevron {
  color: var(--accent);
}
.wbs-phase-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wbs-phase-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wbs-phase-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: 4px;
  color: var(--text);
  font-size: 13px;
  padding: 6px 10px;
  outline: none;
}
.wbs-phase-input:focus {
  border-color: var(--accent);
}
.wbs-btn {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 4px;
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font-mono);
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.wbs-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.wbs-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.wbs-add-phase-btn, .wbs-add-template-btn {
  background: none;
  border: 1px dashed var(--border2);
  border-radius: 4px;
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font-mono);
  padding: 6px 10px;
  cursor: pointer;
  margin-top: 8px;
}
.wbs-add-phase-btn:hover, .wbs-add-template-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Inbox Widget ────────────────────────────────────────────────── */
.inbox-section { margin-bottom: 28px; }
.inbox-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface2); color: var(--muted);
  border: 1px solid var(--border2);
  border-radius: 10px; font-size: 10px; font-family: var(--font-mono);
  min-width: 18px; height: 16px; padding: 0 5px; margin-left: 6px;
}
.inbox-count-badge.urgent {
  background: var(--p1-bg); color: var(--p1); border-color: var(--p1-border);
}
.inbox-urgent-banner {
  background: var(--p1-bg); border: 1px solid var(--p1-border);
  border-radius: 4px; padding: 7px 10px;
  font-size: 12px; color: var(--p1); font-family: var(--font-mono);
  margin-bottom: 8px;
}
.inbox-cap-bar {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; color: var(--muted2);
  margin-bottom: 10px;
}
.inbox-cap-item { color: var(--muted2); }
.inbox-cap-sep  { color: var(--border2); }
.inbox-dormant-link {
  background: none; border: none; padding: 0;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--accent); cursor: pointer; text-decoration: underline;
}
.inbox-dormant-link:hover { opacity: 0.75; }
.inbox-empty {
  font-size: 12px; color: var(--muted2); padding: 6px 0 10px;
  font-style: italic;
}
.inbox-item {
  border: 1px solid var(--border);
  border-radius: 5px; padding: 9px 11px; margin-bottom: 7px;
  background: var(--surface);
}
.inbox-item-title {
  font-size: 13px; color: var(--text); line-height: 1.4;
  margin-bottom: 6px;
}
.inbox-item-footer {
  display: flex; justify-content: space-between; align-items: center;
}
.inbox-expiry {
  font-family: var(--font-mono); font-size: 10px; border-radius: 3px;
  padding: 1px 5px;
}
.expiry-ok       { color: var(--muted2); }
.expiry-soon     { color: var(--p2);     background: var(--p2-bg);  border: 1px solid var(--p2-border);  }
.expiry-urgent   { color: var(--p1);     background: var(--p1-bg);  border: 1px solid var(--p1-border);  }
.expiry-critical { color: var(--p1); font-weight: bold; background: var(--p1-bg); border: 1px solid var(--p1-border); }
.expiry-gone     { color: var(--muted2); }
.inbox-triage-btn {
  background: none; border: 1px solid var(--border2);
  border-radius: 3px; color: var(--accent);
  font-size: 11px; font-family: var(--font-mono);
  padding: 2px 7px; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.inbox-triage-btn:hover { background: var(--surface2); }
.inbox-capture-row {
  display: flex; gap: 6px; margin-top: 10px;
}
.inbox-capture-input {
  flex: 1; background: var(--bg);
  border: 1px dashed var(--border2); border-radius: 4px;
  color: var(--text); font-size: 13px; font-family: var(--font-body);
  padding: 7px 10px; outline: none;
  transition: border-color 0.15s;
}
.inbox-capture-input:focus { border-color: var(--accent); border-style: solid; }
.inbox-capture-input::placeholder { color: var(--muted2); }
.inbox-capture-btn {
  background: none; border: 1px solid var(--border2);
  border-radius: 4px; color: var(--accent);
  font-size: 18px; width: 32px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s;
}
.inbox-capture-btn:hover { background: var(--surface2); }

/* ── Triage Modal ────────────────────────────────────────────────── */
.triage-item-title {
  font-size: 17px; font-weight: bold;
  color: var(--accent); margin: 10px 0 16px;
  font-style: italic;
}
.triage-question {
  font-size: 14px; color: var(--text);
  background: var(--surface2); border-left: 3px solid var(--accent);
  padding: 12px 14px; border-radius: 0 5px 5px 0;
  margin-bottom: 14px; line-height: 1.55;
}
.triage-notes {
  font-size: 12px; color: var(--muted); font-style: italic;
  margin-bottom: 14px;
}
.triage-actions {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px;
}
.triage-btn-promote {
  background: var(--p3-bg) !important;
  border-color: var(--p3-border) !important;
  color: var(--p3) !important;
  font-size: 14px !important; padding: 11px !important; text-align: center;
}
.triage-btn-archive {
  font-size: 14px; padding: 11px; text-align: center;
}
.triage-btn-delete {
  font-size: 14px; padding: 11px; text-align: center;
}
.triage-footer {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--muted2); font-family: var(--font-mono);
  margin-bottom: 12px;
}
.triage-caps-hint { font-family: var(--font-mono); font-size: 10px; }

/* ── Zone Promote Picker ─────────────────────────────────────────── */
.zone-pick-grid {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px;
}
.zone-pick-btn {
  flex: 1; min-width: 80px;
  background: var(--bg); border: 1px solid var(--border2);
  border-radius: 6px; padding: 9px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; transition: border-color 0.12s, background 0.12s;
}
.zone-pick-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--surface2); }
.zone-pick-btn.selected { border-color: var(--accent); background: var(--surface2); }
.zone-pick-btn.full     { opacity: 0.45; cursor: not-allowed; }
.zone-pick-icon { font-size: 18px; }
.zone-pick-name { font-size: 12px; font-weight: bold; color: var(--text); }
.zone-pick-sub  { font-size: 10px; color: var(--muted2); font-family: var(--font-mono); }
.zone-pick-cap  { font-family: var(--font-mono); font-size: 10px; color: var(--muted2); }
.cap-full       { color: var(--p1); font-weight: bold; }

/* ── Dormant Browser ─────────────────────────────────────────────── */
.dormant-item {
  border: 1px solid var(--border); border-radius: 5px;
  padding: 10px 12px; margin-bottom: 9px;
}
.dormant-item-title { font-size: 14px; color: var(--text); margin-bottom: 4px; }
.dormant-item-notes { font-size: 12px; color: var(--muted); font-style: italic; margin-bottom: 6px; }
.dormant-item-footer {
  display: flex; justify-content: space-between; align-items: center;
}
.dormant-date { font-family: var(--font-mono); font-size: 10px; color: var(--muted2); }

/* ── Energy Zone Sections ────────────────────────────────────────── */
.zone-section { margin-bottom: 32px; }
.zone-section .section-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}
.zone-icon {
  font-size: 16px; flex-shrink: 0;
  width: 22px; text-align: center;
  opacity: 0.85;
}
.zone-subtitle {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--muted2); letter-spacing: 0.04em;
  margin-top: 1px;
}
.zone-morning  .section-title { color: var(--p2); }
.zone-morning  .section-header { border-bottom-color: var(--p2-border); }
.zone-evening  .section-title { color: var(--p4); }
.zone-evening  .section-header { border-bottom-color: var(--p4-border); }
.zone-flexible .section-title { color: var(--muted); }

/* Direct priority card colours (used when card is inside a zone section) */
.card-p1 { border-left: 3px solid var(--p1); background: var(--p1-bg); border-color: var(--p1-border); }
.card-p2 { border-left: 3px solid var(--p2); background: var(--p2-bg); border-color: var(--p2-border); }
.card-p3 { border-left: 3px solid var(--p3); background: var(--p3-bg); border-color: var(--p3-border); }
.card-p4 { border-left: 3px solid var(--p4); background: var(--p4-bg); border-color: var(--p4-border); }

/* ── Mission Badge ────────────────────────────────────────────────── */
.badge-mission {
  background: #2a1f00;
  color: #f0c040;
  border: 1px solid #5a4a00;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
body.light-mode .badge-mission {
  background: #fdf6d8;
  color: #8a6a00;
  border-color: #d4b800;
}

/* ── Zone Focus Slot ────────────────────────────────────────────── */
.zone-focus-label-row {
  display: flex; align-items: center;
  margin: 8px 0 4px;
}
.zone-focus-header-tag {
  font-size: 10px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); padding: 2px 6px;
  border: 1px solid var(--border2); border-radius: 3px;
}
.zone-focus-slot .card {
  border-color: #7eb8d4;
  box-shadow: 0 0 0 1px #7eb8d440;
}
body.light-mode .zone-focus-slot .card {
  border-color: #3a6888;
  box-shadow: 0 0 0 1px #3a688820;
}
.zone-focus-empty {
  padding: 10px 12px;
  border: 1px dashed var(--border2);
  border-radius: 6px;
  margin-bottom: 8px;
}
.zone-focus-empty-label {
  font-size: 12px; color: var(--muted2);
  font-family: var(--font-mono);
}
.zone-queue-label {
  font-size: 10px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted2); margin: 12px 0 4px;
}

/* Zone focus action badges */
.badge-focus-set {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border2);
  font-size: 12px; font-family: var(--font-mono);
  padding: 2px 7px; border-radius: 3px;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}
.badge-focus-set:hover {
  color: var(--accent); border-color: var(--accent);
}
.badge-focus-release {
  background: #0c1620;
  color: var(--accent);
  border: 1px solid var(--accent);
  font-size: 11px; font-family: var(--font-mono);
  padding: 2px 7px; border-radius: 3px;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
body.light-mode .badge-focus-release {
  background: #edf2f8; color: #3a6888; border-color: #3a6888;
}
body.light-mode .badge-focus-set:hover {
  color: #3a6888; border-color: #3a6888;
}

/* ── Posting Tracker ────────────────────────────────────────────── */
.posting-section { padding: 16px 0; }
.posting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.posting-row:last-child { border-bottom: none; }
.posting-row.posting-done .posting-platform-name {
  text-decoration: line-through; color: var(--muted);
}
.posting-check-wrap {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; flex: 1;
}
.posting-check { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.posting-platform-name { font-size: 13px; font-weight: 500; }
.posting-platform-note { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.posting-streak {
  font-size: 12px; font-family: var(--font-mono);
  color: var(--muted2); white-space: nowrap;
}
.posting-streak.streak-active {
  color: var(--p3); font-weight: bold;
}

/* ── Help Modal ─────────────────────────────────────────────────── */
.help-section { margin-bottom: 18px; }
.help-heading {
  font-size: 12px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); margin-bottom: 6px;
}
.help-section p { font-size: 13px; color: var(--muted); line-height: 1.6; }
.help-list { padding-left: 16px; }
.help-list li { font-size: 13px; color: var(--muted); margin-bottom: 4px; line-height: 1.55; }
.help-list li strong { color: var(--text); }

/* ── Phase Template Section in Edit Modal ───────────────────────── */
.phase-template-section {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

/* ── Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 860px) {
  #main { grid-template-columns: 1fr; }
  #sidebar { border-top: 1px solid var(--border); }
  #feed { padding: 20px 16px 40px; }
}

/* ── Promotion Machine ─────────────────────────────────────────── */

.promo-tab-bar {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.promo-tab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 12px 0;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  text-transform: uppercase;
}

.promo-tab-btn:hover { color: var(--text); }
.promo-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

.promo-view-container {
  width: 100%;
}

.promo-action-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.promo-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.promo-table th, .promo-table td {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.promo-table th {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: bold;
}

.promo-table tr:hover { background: var(--surface); }

/* Kanban Board */
.promo-kanban-board {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 20px;
  min-height: 600px;
}

.promo-kanban-column {
  flex: 0 0 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.promo-kanban-column-header {
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  color: var(--accent);
}

.promo-kanban-cards {
  padding: 12px;
  flex-grow: 1;
}

.promo-lead-card {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}

.promo-lead-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.promo-lead-card-contact { font-weight: bold; font-size: 14px; margin-bottom: 4px; }
.promo-lead-card-product { font-size: 13px; color: var(--muted); margin-bottom: 8px; }

/* Badges */
.promo-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: bold;
  text-transform: uppercase;
}

.promo-badge-event { background: #3a4a34; color: #a8d4bc; }
.promo-badge-campaign { background: #4a3a24; color: #e0cc94; }
.promo-badge-membership { background: #2a3a44; color: #aac4dc; }
.promo-badge-other { background: #333; color: #ccc; }

.promo-stage-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: bold;
  text-transform: uppercase;
}

.promo-stage-lead        { background: var(--p4-bg); color: var(--p4); }
.promo-stage-qualified   { background: var(--p2-bg); color: var(--p2); }
.promo-stage-proposal    { background: var(--p1-bg); color: var(--p1); }
.promo-stage-negotiation { background: #4a2a44; color: #d48eb0; }
.promo-stage-won         { background: var(--p3-bg); color: var(--p3); }
.promo-stage-lost        { background: #222; color: #777; }

/* Two Panel layout */
.promo-two-panel {
  display: flex;
  gap: 24px;
}

.promo-left-panel {
  flex: 0 0 300px;
  border-right: 1px solid var(--border);
  padding-right: 24px;
}

.promo-right-panel {
  flex: 1;
}

@media (max-width: 800px) {
  .promo-two-panel { flex-direction: column; }
  .promo-left-panel { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 24px; flex: none; }
}

.promo-chunk-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.promo-chunk-status-pending  { color: var(--muted); }
.promo-chunk-status-queued   { color: var(--accent); }
.promo-chunk-status-sent     { color: var(--p3); }
.promo-chunk-status-overdue  { color: var(--warning, #f59e0b); }
.promo-chunk-status-failed   { color: var(--danger); }
.promo-chunk-status-dispatched { color: var(--accent); }

/* Post Preview */
.promo-post-preview {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}

.promo-post-preview img {
  max-width: 100%;
  border-radius: 6px;
  display: block;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}

.promo-post-content {
  font-family: var(--font-body);
  white-space: pre-wrap;
  margin-bottom: 20px;
}

/* Overdue Banner */
.promo-overdue-banner {
  background: #2a2210;
  border-left: 4px solid #e09a30;
  padding: 16px;
  margin-bottom: 20px;
  border-radius: 0 4px 4px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.promo-overdue-text { color: #e09a30; font-weight: bold; }

/* Status Colors */
.promo-message-status-queued  { color: var(--accent); }
.promo-message-status-sent    { color: var(--p3); }
.promo-message-status-failed  { color: var(--p1); }
.promo-message-status-overdue { color: var(--p2); }

.promo-comm-log-entry {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.promo-comm-direction {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.promo-comm-direction-in  { color: var(--p2); }
.promo-comm-direction-out { color: var(--p3); }

.promo-settings-section {
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 24px;
}

.promo-settings-section h3 {
  font-family: var(--font-mono);
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--muted);
}

/* ── Promotion Machine Cowork Banners & Statuses ── */
.promo-message-status-dispatched { color: #e09a30; }

.promo-dispatch-banner {
  background: rgba(3, 169, 244, 0.1);
  border-left: 4px solid #03a9f4;
  padding: 16px;
  margin-bottom: 24px;
  border-radius: 0 4px 4px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.promo-instruction-banner {
  background: rgba(76, 175, 80, 0.1);
  border-left: 4px solid #4caf50;
  padding: 20px;
  margin-bottom: 24px;
  border-radius: 0 4px 4px 0;
  position: relative;
}

.promo-instruction-banner h4 {
  margin-top: 0;
  margin-bottom: 12px;
  color: #4caf50;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.promo-instruction-banner p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.promo-instruction-banner code {
  font-family: var(--font-mono);
  background: rgba(0,0,0,0.2);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text);
}

.promo-banner-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LIVING WRITER: CREATIVE LEDGER
   ───────────────────────────────────────────────────────────────────────────── */

/* ── LIVING WRITER: CREATIVE LEDGER ── */


.lw-pipeline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  padding: 10px 0;
}

.lw-pipeline-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lw-pipeline-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.lw-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.lw-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}

.lw-draft-badge {
  background: var(--p3-bg);
  color: var(--p3);
  border: 1px solid var(--p3-border);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  font-weight: bold;
}

.lw-card-stage-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lw-stage-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lw-progress-track {
  height: 6px;
  background: var(--surface2);
  border-radius: 3px;
  width: 100%;
  overflow: hidden;
}

.lw-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.lw-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.lw-card-date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted2);
}

.lw-card-actions {
  display: flex;
  gap: 8px;
}

/* Story Detail View Layout */
.lw-story-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  height: calc(100vh - 120px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.lw-stage-sidebar {
  background: var(--surface2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  overflow-y: auto;
}

.lw-sidebar-header {
  padding: 0 20px 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

.lw-back-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.lw-back-btn:hover { color: var(--accent); }

.lw-sidebar-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.lw-stage-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.lw-stage-item:hover:not(.locked) {
  background: var(--surface);
}

.lw-stage-item.active {
  background: var(--surface);
  border-left-color: var(--accent);
}

.lw-stage-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  flex-shrink: 0;
}

.lw-stage-item.completed .lw-stage-status {
  background: var(--p3);
  border-color: var(--p3);
}

.lw-stage-item.active .lw-stage-status {
  border-color: var(--accent);
}

.lw-stage-item.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.lw-stage-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.lw-stage-item.active .lw-stage-name {
  color: var(--text);
  font-weight: 600;
}

.lw-stage-item.completed .lw-stage-name {
  color: var(--text);
}

.lw-stage-content {
  padding: 40px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.lw-stage-heading {
  margin-bottom: 0;
}

.lw-stage-heading h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}

.lw-stage-heading p {
  color: var(--muted);
  font-size: 15px;
  max-width: 600px;
}

.lw-info-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.lw-info-icon {
  font-size: 20px;
  color: var(--accent);
}

.lw-info-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* Stage 1: Concept Note */
.lw-concept-textarea {
  width: 100%;
  height: 300px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
  font-family: var(--font-body);
}

.lw-word-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted2);
  text-align: right;
  margin-top: 8px;
}

/* File Management */
.lw-file-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lw-file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lw-file-entry {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lw-file-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lw-file-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

.lw-file-path {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted2);
}

.lw-file-actions {
  display: flex;
  gap: 8px;
}

.lw-open-all-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  width: fit-content;
}

.lw-open-all-btn:hover { background: var(--accent-hover, #007aff); }

/* Form Elements */
.lw-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lw-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lw-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  color: var(--text);
  font-size: 14px;
}

/* Complete Actions */
.lw-stage-actions {
  margin-top: auto;
  padding-top: 30px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 12px;
}

.btn-lw-complete {
  background: var(--p3-bg);
  color: var(--p3);
  border: 1px solid var(--p3-border);
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

.btn-lw-complete:hover {
  background: var(--p3);
  color: #fff;
}

.lw-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  color: var(--muted);
  gap: 20px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 12px;
}

.lw-empty-icon {
  font-size: 48px;
}


/* ── Publishing Central: WhatsApp Send Section ── */
.publishing-wa-section {
  margin-top: 16px;
  border-top: 1px dashed var(--border2);
  padding-top: 12px;
  width: 100%;
}
.publishing-wa-header {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  cursor: pointer;
  user-select: none;
  display: inline-block;
  margin-bottom: 8px;
}
.publishing-wa-header:hover {
  text-decoration: underline;
}
.publishing-wa-body {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 12px;
  margin-top: 4px;
}
.publishing-wa-composer {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  width: 100%;
  margin-bottom: 12px;
}
.publishing-wa-controls {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.cc-book-header:hover {
  background: rgba(255, 255, 255, 0.05);
}
.btn-add-mini {
  background: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.4);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-add-mini:hover {
  background: rgba(139, 92, 246, 0.4);
  transform: translateY(-1px);
}
.btn-icon-danger {
  padding: 6px;
  border-radius: 6px;
  transition: background 0.2s;
  opacity: 0.6;
}
.btn-icon-danger:hover {
  background: rgba(239, 68, 68, 0.2);
  opacity: 1;
}
.publishing-wa-buttons {
  display: flex;
  gap: 8px;
}

/* ── Promotion Machine: Overdue Banner ── */
.promo-overdue-banner {
  background: var(--p2-bg);
  border: 1px solid var(--p2-border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.promo-overdue-text {
  color: var(--p2);
  font-weight: bold;
  font-family: var(--font-mono);
}

/* ── Promotion Machine: Instruction Banner ── */
.promo-instruction-banner {
  background: var(--p4-bg);
  border: 1px solid var(--p4-border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 20px;
  position: relative;
}
.promo-banner-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
}
.promo-instruction-banner h4 {
  color: var(--accent);
  margin-bottom: 6px;
  font-size: 14px;
}
.promo-instruction-banner p {
  font-size: 13px;
  color: var(--text);
}
.promo-instruction-banner code {
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  border: 1px solid var(--border2);
}

/* ── Promotion Machine: Status Badges ── */
.promo-message-status-queued { color: var(--muted); }
.promo-message-status-dispatched { color: var(--p4); }
.promo-message-status-sent { color: var(--p3); }
.promo-message-status-failed { color: var(--p1); font-weight: bold; }
.promo-message-status-overdue { color: var(--p2); font-weight: bold; }

.promo-dispatch-banner {
  background: var(--p4-bg);
  border: 1px solid var(--p4-border);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── BROADCAST POST GALLERY ── */
.broadcast-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.broadcast-post-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.broadcast-post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-color: var(--border2);
}

.broadcast-post-card-img {
  width: 100%;
  aspect-ratio: 9/16;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.broadcast-post-card-body {
  padding: 12px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.broadcast-post-card-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
}

.broadcast-post-card-actions button {
  flex: 1;
}
/* ── COMMAND CENTER ───────────────────────────────────────────────────────── */
.cc-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.cc-book-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.cc-book-card:hover {
  border-color: var(--border2);
}
.cc-book-header {
  padding: 16px 20px;
  background: var(--surface2);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.cc-book-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--accent);
  flex: 1;
}
.cc-book-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
}
.cc-toggle-icon {
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.2s ease;
  display: inline-block;
  width: 12px;
}

.cc-book-body {
  padding: 0;
  border-top: 1px solid var(--border);
}
.cc-module-row {
  border-bottom: 1px solid var(--border);
}
.cc-module-row:last-child {
  border-bottom: none;
}
.cc-module-header {
  padding: 12px 20px 12px 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: rgba(255,255,255,0.02);
}
.cc-module-header:hover {
  background: rgba(255,255,255,0.04);
}
.cc-module-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.cc-module-status {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.cc-module-status.final { background: var(--p3-bg); color: var(--p3); border: 1px solid var(--p3-border); }
.cc-module-status.draft { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); }

.cc-module-assets {
  padding: 16px 20px 24px 60px;
  background: var(--bg);
  border-left: 2px solid var(--border);
  margin-left: 20px;
}
.cc-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cc-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
  opacity: 0.3;
}
.cc-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.cc-asset-pill {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  background: var(--surface);
}
.cc-asset-pill.missing {
  opacity: 0.5;
  border-style: dashed;
}
.cc-asset-pill.exists {
  border-color: var(--p3-border);
}
.cc-asset-type {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.cc-asset-status-icon {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 12px;
}
.cc-asset-pill.multi {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
  border-color: var(--accent-muted);
}
.cc-multi-plus {
  color: var(--accent);
  font-weight: bold;
  margin-left: 4px;
  font-size: 12px;
}
.cc-ind-none {
  font-family: var(--font-mono);
  font-size: 8px;
  text-transform: uppercase;
  color: var(--muted2);
  letter-spacing: 0.05em;
}
.cc-asset-indicators {
  display: flex;
  gap: 4px;
}
.cc-ind-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted2);
}
.cc-ind-dot.done, .cc-ind-dot.published, .cc-ind-dot.sent {
  background: var(--p3);
  box-shadow: 0 0 4px var(--p3);
}
.cc-ind-dot.in_progress, .cc-ind-dot.scheduled {
  background: var(--p2);
}
.cc-ind-dot.not_started, .cc-ind-dot.not_published, .cc-ind-dot.not_promoted {
  background: var(--muted2);
}
/* ── COMMAND CENTER LAYOUT ────────────────────────────────────────────────── */
.cc-layout-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}

.cc-sidebar {
  position: sticky;
  top: 80px;
}

.cc-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}

.cc-panel h3 {
  font-family: var(--font-mono);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
  color: var(--accent);
}

.cc-panel-desc {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 20px;
}

.cc-actions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cc-action-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  transition: transform 0.15s, border-color 0.15s;
}

.cc-action-item:hover {
  border-color: var(--accent);
  transform: translateX(4px);
}

.cc-action-item.blocked {
  opacity: 0.6;
  border-style: dashed;
}

.cc-action-label {
  font-size: 13px;
  font-weight: bold;
  color: var(--text);
  margin-bottom: 4px;
}

.cc-action-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
}

.cc-action-score {
  font-family: var(--font-mono);
  color: var(--p3);
}

.cc-action-blocker {
  margin-top: 8px;
  font-size: 10px;
  color: var(--p1);
  font-family: var(--font-mono);
  text-transform: uppercase;
}

/* ── EXECUTION LOG ───────────────────────────────────────────────────────── */
.cc-log-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cc-log-item {
  font-size: 12px;
  padding: 8px;
  border-radius: 4px;
  border-left: 3px solid var(--border);
  background: var(--bg);
}
.cc-log-item.success {
  border-left-color: var(--p3);
}
.cc-log-item.error {
  border-left-color: var(--p1);
}
.cc-log-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}
.cc-log-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
}
.cc-log-result {
  font-size: 11px;
  color: var(--muted);
}
.cc-log-item.success .cc-log-result {
  color: var(--p3);
}
.cc-log-item.error .cc-log-result {
  color: var(--p1);
}
.cc-log-empty {
  font-size: 12px;
  color: var(--muted2);
  font-style: italic;
  text-align: center;
  padding: 10px;
}

/* ── DASHBOARD ───────────────────────────────────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.dash-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.dash-subtitle {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
}

.dash-global-actions {
  display: flex;
  gap: 12px;
}

.dash-section {
  margin-bottom: 48px;
}

.dash-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.dash-section-title {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: bold;
  color: var(--accent);
}

.dash-section-meta {
  font-size: 12px;
  color: var(--muted);
}

.dash-actions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dash-action-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  transition: transform 0.2s, border-color 0.2s;
}

.dash-action-card:hover {
  border-color: var(--accent);
}

.dash-action-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dash-action-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.ready .dash-action-indicator { background: var(--p3); box-shadow: 0 0 10px var(--p3); }
.blocked .dash-action-indicator { background: var(--p1); }
.blocked { opacity: 0.6; }

.dash-action-label {
  font-size: 16px;
  font-weight: bold;
  color: var(--text);
}

.dash-action-book {
  font-size: 12px;
  color: var(--muted);
}

.dash-action-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.dash-action-score {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
}

.btn-action-run {
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
}

.btn-action-run:hover:not(:disabled) {
  background: var(--accent);
  color: white;
}

.dash-log-panel {
  background: var(--surface2);
  border-radius: 12px;
  padding: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.dash-log-entry {
  display: grid;
  grid-template-columns: 20px 1fr 100px;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.dash-log-entry.success .dash-log-bullet { color: var(--p3); }
.dash-log-entry.error .dash-log-bullet { color: var(--p1); }
.dash-log-time { font-family: var(--font-mono); color: var(--muted); text-align: right; }

.dash-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}

.dash-panel h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 20px;
}

.dash-metrics-grid {
  display: grid;
  gap: 20px;
}

.dash-metric-val {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 4px;
}

.dash-metric-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
}

.dash-blockers-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dash-blocker-item {
  border-left: 2px solid var(--p1);
  padding-left: 12px;
}

.dash-blocker-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 4px;
}

.dash-blocker-book { color: var(--muted); font-size: 10px; }
.dash-blocker-reason { font-size: 11px; color: var(--p1); font-family: var(--font-mono); }

/* Entity badge types */
.promo-badge-module { background: #2a3a2a; color: #a8e4a0; }
.promo-badge-fundraiser { background: #4a2a3a; color: #e4a0c0; }

/* Sales Pipeline panel in Execute mode */
.dash-deal-followup:hover { background: var(--surface2) !important; }

/* Entities manage tab */
.work-type-filter { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }

/* Manage sidebar: accommodate more tabs */
.promo-tab-bar { display: flex; flex-direction: column; gap: 2px; }
.promo-tab-btn { text-align: left; padding: 8px 12px; font-size: 12px; }
.promo-tab-divider { height: 1px; background: var(--border); margin: 6px 12px; }

/* Stub placeholder for phases not yet built */
.stub-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
}

/* Promote sidebar group labels */
.promo-tab-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 8px 12px 2px;
}

/* ── Pipeline Overview (Phase 3) ────────────────────────────────── */

/* Work type filter bar */
.pipeline-filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.pipeline-filter-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s;
}
.pipeline-filter-btn:hover { border-color: var(--accent); color: var(--text); }
.pipeline-filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

/* Stage metric cards row */
.pipeline-stage-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.pipeline-stage-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  user-select: none;
}
.pipeline-stage-card:hover { border-color: var(--accent); }
.pipeline-stage-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
.pipeline-stage-card-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.pipeline-stage-card-count {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 10px;
}
.pipeline-stage-card-breakdown {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
  min-height: 16px;
}
.pipeline-stage-card-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
  display: flex;
}
.pipeline-stage-bar-segment {
  height: 100%;
  transition: width 0.3s ease;
}
/* Work type colour coding (bar segments + badges) */
.wt-book      { background: #7c6fcd; }
.wt-podcast   { background: #4ba3a3; }
.wt-campaign  { background: #d4a017; }
.wt-event     { background: #d47a60; }

/* Drill-down list */
.pipeline-drilldown-header {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.pipeline-drilldown-empty {
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
  padding: 16px 0;
}
.pipeline-module-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  transition: border-color 0.15s;
}
.pipeline-module-row:hover { border-color: var(--accent); }
.pipeline-module-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}
.pipeline-module-work {
  font-size: 11px;
  color: var(--muted);
}
.wt-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.wt-badge-book     { background: #2d2650; color: #9b8fe0; }
.wt-badge-podcast  { background: #163030; color: #5bbdbd; }
.wt-badge-campaign { background: #2e2200; color: #d4a017; }
.wt-badge-event    { background: #2e1a14; color: #d47a60; }
.pipeline-open-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  background: none;
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--accent);
  cursor: pointer;
  transition: border-color 0.15s;
  white-space: nowrap;
}
.pipeline-open-btn:hover { border-color: var(--accent); }

/* ── Works Screen (Phase 3) ─────────────────────────────────────── */

.works-section {
  margin-bottom: 36px;
}
.works-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.works-section-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.works-section-count {
  font-size: 11px;
  color: var(--muted);
  background: var(--surface2);
  padding: 2px 8px;
  border-radius: 10px;
  font-family: var(--font-mono);
}
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.works-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.works-card:hover { border-color: var(--accent); }
.works-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.works-card-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.works-card-work {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.works-card-stage {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 8px;
  white-space: nowrap;
}
.stage-producing  { background: var(--p2-bg); color: var(--p2); border: 1px solid var(--p2-border); }
.stage-publishing { background: var(--p4-bg); color: var(--p4); border: 1px solid var(--p4-border); }
.stage-promoting  { background: var(--p3-bg); color: var(--p3); border: 1px solid var(--p3-border); }

/* ── Module Detail View (Phase 4) ───────────────────────────────── */

.module-detail-view {
  max-width: 860px;
  margin: 0 auto;
}
.module-detail-breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}
.module-detail-breadcrumb span { color: var(--accent); cursor: pointer; }
.module-detail-breadcrumb span:hover { text-decoration: underline; }
.module-detail-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 6px;
}
.module-detail-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 24px;
  font-family: var(--font-mono);
}

/* Stage Status Bar */
.module-stage-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.module-stage-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s;
  user-select: none;
}
.module-stage-card:hover { border-color: var(--border2); }
.module-stage-card.active { border-color: #4caf7d; }
.module-stage-card-num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 3px;
}
.module-stage-card-name {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
}
.module-stage-card-progress {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-bottom: 6px;
  overflow: hidden;
}
.module-stage-card-progress-fill {
  height: 100%;
  background: #4caf7d;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.module-stage-card-stat {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
}

/* Detail Panel */
.module-detail-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.module-detail-panel-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.module-asset-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
  margin: 16px 0 8px;
}
.module-asset-section-title:first-child { margin-top: 0; }
.module-asset-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  margin-bottom: 5px;
  background: var(--surface2);
}
.module-asset-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-done    { background: #4caf7d; }
.dot-missing { background: #e05252; }
.dot-optional{ background: var(--muted2); }
.module-asset-name { flex: 1; font-size: 13px; }
.module-asset-action {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 10px;
  background: none;
  border: 1px solid var(--border2);
  border-radius: 5px;
  color: var(--accent);
  cursor: pointer;
  transition: border-color 0.15s;
}
.module-asset-action:hover { border-color: var(--accent); }

/* Publishing platform rows */
.module-platform-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  margin-bottom: 5px;
  background: var(--surface2);
}
.module-platform-name { flex: 1; font-size: 13px; }
.module-platform-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.module-platform-status.published { color: #4caf7d; }
.module-platform-mark-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 10px;
  background: none;
  border: 1px solid var(--border2);
  border-radius: 5px;
  color: var(--accent);
  cursor: pointer;
  transition: border-color 0.15s;
}
.module-platform-mark-btn:hover { border-color: var(--accent); }

/* Promoting broadcast rows */
.module-broadcast-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  margin-bottom: 5px;
  background: var(--surface2);
}
.module-broadcast-name { flex: 1; font-size: 13px; }
.module-broadcast-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.module-broadcast-status.sent { color: #4caf7d; }
.module-broadcast-action {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 10px;
  background: none;
  border: 1px solid var(--border2);
  border-radius: 5px;
  color: var(--accent);
  cursor: pointer;
  transition: border-color 0.15s;
}
.module-broadcast-action:hover { border-color: var(--accent); }

/* Back button */
.module-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
}
.module-back-btn:hover { color: var(--text); }

/* ── Settings Modal (Phase 5) ───────────────────────────────────── */

#settings-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}
#settings-modal.hidden { display: none; }
#settings-modal-box {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 16px;
  width: 600px;
  max-width: 95vw;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#settings-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}
#settings-modal-header h2 {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
#settings-modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
}
#settings-modal-close:hover { color: var(--text); }
#settings-modal-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
}
.settings-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 10px 14px;
  cursor: pointer;
  margin-bottom: -1px;
  transition: all 0.15s;
}
.settings-tab-btn.active { color: var(--text); border-bottom-color: var(--accent); }
.settings-tab-btn:hover { color: var(--text); }
#settings-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
.settings-tab-pane { display: none; }
.settings-tab-pane.active { display: block; }
.settings-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
  margin-top: 20px;
}
.settings-section-title:first-child { margin-top: 0; }
#settings-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.settings-save-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 20px;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: var(--bg);
  cursor: pointer;
  transition: opacity 0.15s;
}
.settings-save-btn:hover { opacity: 0.85; }

/* Settings key-value table */
.settings-kv-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.settings-kv-table td { padding: 6px 8px; vertical-align: middle; font-size: 13px; }
.settings-kv-table td:first-child { color: var(--muted); width: 160px; white-space: nowrap; }
.settings-kv-table .form-input { width: 100%; }

/* ── Publishing Screen — hierarchical Works list ─────────────────── */

.works-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}
.works-row-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.works-row-header:hover { background: var(--surface2); }
.works-row-title {
  font-size: 15px;
  font-weight: 600;
  flex: 1;
}
.works-row-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  background: var(--surface2);
  padding: 2px 8px;
  border-radius: 10px;
}
.works-row-expand {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}
.works-modules-list {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 8px 0;
}
.works-module-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  transition: background 0.12s;
}
.works-module-row:hover { background: var(--surface); }
.works-module-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted2);
  width: 28px;
  flex-shrink: 0;
  text-align: right;
}
.works-module-title {
  flex: 1;
  font-size: 13px;
}

/* ── Producing Sub-Tab Bar ──────────────────────────────────────────────────── */
.producing-subtab-bar {
  display: flex;
  gap: 4px;
  max-width: 1100px;
  margin: 0 auto 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.producing-subtab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.08em;
  padding: 8px 18px 10px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.15s;
  margin-bottom: -1px;
}
.producing-subtab-btn:hover { color: var(--text); }
.producing-subtab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Flash Fiction Panel ────────────────────────────────────────────────────── */
.ff-panel {
  max-width: 1100px;
  margin: 0 auto;
}
.ff-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 32px;
  align-items: start;
}
.ff-form-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ff-output-col {
  position: sticky;
  top: 80px;
  min-height: 400px;
}

/* Form elements */
.ff-form-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ff-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.ff-hint {
  font-size: 11px;
  color: var(--muted2);
  font-style: italic;
  margin-bottom: 2px;
}
.ff-select, .ff-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 12px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
  appearance: auto;
}
.ff-select:focus, .ff-input:focus {
  border-color: var(--accent);
}
.ff-select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ff-contract {
  font-size: 11px;
  color: var(--accent);
  font-style: italic;
  padding: 4px 0 0 2px;
}

/* Word count radios */
.ff-radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ff-radio-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ff-radio-item:hover { border-color: var(--border2); }
.ff-radio-item.active {
  border-color: var(--accent);
  background: rgba(126, 184, 212, 0.06);
}
.ff-radio-item input[type=radio] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.ff-radio-body { display: flex; flex-direction: column; gap: 2px; }
.ff-radio-label { font-size: 13px; font-weight: bold; }
.ff-radio-sub   { font-size: 11px; color: var(--muted); }

/* POV radios */
.ff-pov-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ff-pov-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 12px;
  transition: border-color 0.15s;
}
.ff-pov-item:hover { border-color: var(--border2); }
.ff-pov-item.active {
  border-color: var(--accent);
  background: rgba(126, 184, 212, 0.06);
  color: var(--accent);
}
.ff-pov-item input[type=radio] { accent-color: var(--accent); }

/* Optional section */
.ff-optional-section {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.ff-optional-toggle {
  width: 100%;
  background: var(--surface);
  border: none;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s;
}
.ff-optional-toggle:hover { color: var(--text); }
.ff-optional-body {
  border-top: 1px solid var(--border);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Generate button */
.ff-btn-generate {
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.08em;
  padding: 14px 24px;
  cursor: pointer;
  text-transform: uppercase;
  transition: opacity 0.15s, transform 0.1s;
  width: 100%;
}
.ff-btn-generate:hover:not(:disabled) { opacity: 0.85; transform: translateY(-1px); }
.ff-btn-generate:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

.ff-btn-secondary {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.ff-btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* Output area */
.ff-output-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 400px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--muted2);
}
.ff-output-placeholder-icon { font-size: 28px; opacity: 0.4; }
.ff-output-placeholder-text { font-size: 13px; font-style: italic; }

/* Loading state */
.ff-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 400px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.ff-loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ff-spin 0.8s linear infinite;
}
@keyframes ff-spin { to { transform: rotate(360deg); } }
.ff-loading-text {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.ff-loading-dots::after {
  content: '';
  animation: ff-dots 1.4s steps(4, end) infinite;
}
@keyframes ff-dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}
.ff-loading-sub {
  font-size: 11px;
  color: var(--muted2);
  font-style: italic;
  text-align: center;
  max-width: 280px;
}

/* Error state */
.ff-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 400px;
  border: 1px solid var(--p1-border);
  border-radius: 12px;
  background: var(--p1-bg);
}
.ff-error-msg {
  font-size: 13px;
  color: var(--p1);
  text-align: center;
  max-width: 320px;
}

/* Story output */
.ff-story-output {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ff-story-text {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 32px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
  white-space: pre-wrap;
}
.ff-story-text em {
  color: var(--muted);
  font-style: italic;
}
.ff-story-actions {
  display: flex;
  gap: 10px;
}

/* ── Bulk Generate Modal ────────────────────────────────────────────────────── */
.bulk-gen-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bulk-gen-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--surface);
}
.bulk-gen-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bulk-gen-row-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.bulk-gen-icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  color: var(--muted2);
  transition: color 0.2s;
}
.bulk-gen-overwrite {
  font-size: 10px;
  color: var(--p2);
  background: var(--p2-bg);
  border: 1px solid var(--p2-border);
  border-radius: 4px;
  padding: 1px 6px;
}
.bulk-gen-warn {
  font-size: 10px;
  color: var(--p1);
  background: var(--p1-bg);
  border: 1px solid var(--p1-border);
  border-radius: 4px;
  padding: 1px 6px;
}

/* ── PANORAMA ────────────────────────────────────────────────────── */

.panorama-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.panorama-filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.panorama-filter-btn {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.panorama-filter-btn:hover  { background: var(--surface2); }
.panorama-filter-btn.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.panorama-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.panorama-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.panorama-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.panorama-card-book {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.panorama-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.panorama-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.panorama-stage-pill {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stage-producing  { background: var(--p2-bg);  color: var(--p2);  border: 1px solid var(--p2-border);  }
.stage-publishing { background: var(--p3-bg);  color: var(--p3);  border: 1px solid var(--p3-border);  }
.stage-promoting  { background: var(--accent-bg, #f0e6ff); color: var(--accent); border: 1px solid var(--accent); }
.panorama-asset-dot { font-size: 12px; }
.panorama-asset-dot.done    { color: var(--p3); }
.panorama-asset-dot.missing { color: var(--border2); }
.panorama-sa-count { font-size: 10px; color: var(--muted); }

/* ── PEOPLE ──────────────────────────────────────────────────────── */

.people-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding: 0 4px;
}
@media (max-width: 960px) {
  .people-layout { grid-template-columns: 1fr; }
}
.people-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.people-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.people-col-header h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.people-count {
  font-size: 11px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 7px;
  color: var(--muted);
  font-weight: 400;
}
.people-list {
  padding: 8px 0;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
.people-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.people-row:last-child { border-bottom: none; }
.people-row:hover { background: var(--surface2); }
.people-row-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.people-row-sub {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.people-badge {
  font-size: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── PROMOTING: Works + Serializer ──────────────────────────────── */

.promoting-works-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.promoting-work-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.promoting-work-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px;
  gap: 12px;
}
.promoting-work-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.promoting-work-book {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.promoting-chunk-list {
  border-top: 1px solid var(--border);
}
.promoting-chunk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.promoting-chunk-row:last-child { border-bottom: none; }
.promoting-chunk-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.promoting-chunk-preview {
  flex: 1;
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.promoting-chunk-status {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  flex-shrink: 0;
}
.promoting-chunk-status.ready { background: var(--p3-bg); color: var(--p3); border-color: var(--p3-border); }
.promoting-chunk-status.sent  { background: var(--surface2); color: var(--muted); }

/* Serialize modal part-count picker */
.serialize-part-btn.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* ── CRM People Mode ──────────────────────────────────────────────────────── */

.people-tab-pane {
  padding: 0;
}

#people-tab-contacts {
  /* Fill the viewport below the topbar + sub-tab bar */
  height: calc(100vh - 130px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#people-tab-contacts .crm-contacts-layout {
  flex: 1;
  min-height: 0;
}

/* ── CRM Contacts — split-pane table layout ───────────────────────────────── */

.crm-contacts-layout {
  display: flex;
  height: 100%;
  overflow: hidden;
  gap: 0;
}

/* Left: scrollable table pane */
.crm-table-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
}
.crm-table-pane-inner {
  overflow-y: auto;
  flex: 1;
}

/* Right: detail pane */
.crm-detail-pane {
  width: 360px;
  flex-shrink: 0;
  overflow-y: auto;
  background: var(--surface);
  display: none; /* shown via JS */
}
.crm-detail-pane.visible { display: block; }

/* Table header bar */
.crm-table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px 10px;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.crm-table-search {
  width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg2, var(--bg-secondary));
  color: var(--text);
  font-size: 13px;
  box-sizing: border-box;
  margin: 0 20px 10px;
  width: calc(100% - 40px);
  flex-shrink: 0;
}

/* Column header row */
.crm-col-header {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.6fr 80px 72px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2, var(--bg-secondary));
  flex-shrink: 0;
}
.crm-col-header span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* Data rows */
.crm-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.6fr 80px 72px;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.crm-row:last-child { border-bottom: none; }
.crm-row:hover { background: var(--surface2, var(--bg-secondary)); }
.crm-row.selected { background: var(--p1-bg, #f0f4ff); }

/* Avatar circle */
.crm-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--p1, #2c5f8a);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 10px;
}
.crm-row-name-cell {
  display: flex;
  align-items: center;
  min-width: 0;
}
.crm-row-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-row-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-row-cell {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity .12s;
}
.crm-row:hover .crm-row-actions { opacity: 1; }
.crm-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 5px;
  border-radius: 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  transition: background .12s, color .12s;
}
.crm-icon-btn:hover { background: var(--border); color: var(--text); }
.crm-icon-btn.danger:hover { background: #fee; color: var(--danger, #e74c3c); }

.crm-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.crm-badge-open { background: var(--p2-bg, #e8f4fd); color: var(--p2, #2980b9); }
.crm-badge-none { color: var(--muted); font-size: 11px; }

/* Detail pane inner */
.crm-detail-header {
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.crm-detail-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--p1, #2c5f8a);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.crm-detail-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.crm-detail-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.crm-detail-section {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.crm-detail-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 10px;
}
.crm-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

/* Legacy list — keep for pipeline/outreach tabs */
.crm-list {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.crm-contact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}
.crm-contact-row:last-child { border-bottom: none; }
.crm-contact-row:hover { background: var(--surface2, var(--bg-secondary)); }

/* Modal shared */
.modal-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 10px 0 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text);
  font-size: 13px;
}
.modal-input:focus { outline: none; border-color: var(--accent, #3498db); }

/* Pipeline tab selector (Laravel CRM-inspired) */
.crm-pipeline-tabs {
  display: flex;
  gap: 0;
  padding: 0 16px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 0;
  overflow-x: auto;
}
.crm-pipeline-tab {
  background: none;
  border: none;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.crm-pipeline-tab:hover { color: var(--text); }
.crm-pipeline-tab.active {
  color: var(--accent, #3498db);
  border-bottom-color: var(--accent, #3498db);
  font-weight: 700;
}

/* Kanban board */
.crm-kanban {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 8px;
  align-items: flex-start;
}
.crm-kanban-col {
  flex: 0 0 220px;
  min-width: 200px;
  background: var(--bg-secondary);
  border-radius: 8px;
  overflow: hidden;
}
.crm-kanban-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px 4px;
}
.crm-kanban-header-stage {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-secondary);
}
.crm-kanban-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.crm-kanban-count {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
}
.crm-kanban-add {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .1s, color .1s, border-color .1s;
}
.crm-kanban-add:hover {
  background: var(--accent, #3498db);
  color: #fff;
  border-color: var(--accent, #3498db);
}
.crm-kanban-header-value {
  padding: 0 12px 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.crm-kanban-value-bar {
  height: 3px;
  background: var(--border);
  margin: 0 12px 8px;
  border-radius: 2px;
  overflow: hidden;
}
.crm-kanban-value-bar-fill {
  height: 100%;
  background: var(--accent, #3498db);
  border-radius: 2px;
  transition: width .3s;
}
.crm-kanban-cards {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 60px;
}
/* Lead card */
.crm-lead-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}
.crm-lead-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  border-color: color-mix(in srgb, var(--accent, #3498db) 40%, transparent);
}
.crm-lead-card-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.crm-lead-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent, #3498db);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}
.crm-lead-body { flex: 1; min-width: 0; }
.crm-lead-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crm-lead-work {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.crm-lead-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.crm-lead-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}
.crm-lead-value-pill {
  background: #27ae6015;
  color: #27ae60;
  border: 1px solid #27ae6030;
}
.crm-lead-days-pill {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
/* Empty stage */
.crm-kanban-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.6;
}
.crm-kanban-empty-action {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--accent, #3498db);
  cursor: pointer;
  text-decoration: underline;
}

/* Stat pills */
.crm-stat-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
}
.crm-stat-pill.crm-stat-green { color: #27ae60; border-color: #27ae6040; background: #27ae6010; }
.crm-stat-pill.crm-stat-red   { color: #e74c3c; border-color: #e74c3c40; background: #e74c3c10; }
.crm-stat-pill.crm-stat-orange { color: #e67e22; border-color: #e67e2240; background: #e67e2210; }

/* Dashboard stat cards */
.crm-stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  text-align: center;
}
.crm-stat-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}
.crm-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.crm-stat-value.crm-stat-green { color: #27ae60; }
.crm-stat-value.crm-stat-red   { color: #e74c3c; }