/* ─── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.5; background: var(--workspace-bg); color: var(--text-primary); }

/* ─── CSS Variables ─────────────────────────────────────────────── */
:root {
  --sidebar-bg: #0B0F14;
  --sidebar-text: #DDE3EA;
  --sidebar-muted: #5a6270;
  --sidebar-border: #1e2530;
  --sidebar-active-bg: #1a2236;
  --sidebar-hover-bg: #13181f;
  --sidebar-accent: #74A328;
  --sidebar-section-label: #4a5260;

  --workspace-bg: #F0F2F5;
  --card-bg: #ffffff;
  --card-border: #e2e5ea;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.07);

  --header-bg: #0B0F14;
  --header-text: #DDE3EA;
  --header-border: #1e2530;
  --header-height: 52px;

  --text-primary: #1a1d23;
  --text-secondary: #4a5260;
  --text-muted: #8a94a0;

  --accent: #74A328;
  --accent-light: #e8f3d0;
  --accent-hover: #629020;

  --btn-primary-bg: #74A328;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #f0f2f5;
  --btn-secondary-text: #3a4050;
  --btn-secondary-border: #d0d5dd;

  --input-bg: #ffffff;
  --input-border: #d0d5dd;
  --input-border-focus: #74A328;

  --danger: #dc2626;
  --warning: #d97706;
  --success: #16a34a;
  --info: #2563eb;

  --right-drawer-width: 220px;
  --sidebar-width-desktop: 200px;
  --sidebar-width-tablet: 52px;
  --bottom-nav-height: 0px;
}

/* ─── Header ─────────────────────────────────────────────────────── */
#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  z-index: 1000;
  -webkit-transform: translateZ(0);
}

#brand {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#brand-name {
  color: var(--sidebar-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.brand-sep {
  color: var(--sidebar-muted);
  font-size: 12px;
}

#brand-subtitle {
  color: var(--sidebar-muted);
  font-size: 11px;
  letter-spacing: 0.04em;
}

#product-selector {
  flex: 1;
  max-width: 180px;
  background: #13181f;
  border: 1px solid #2a3040;
  border-radius: 6px;
  color: var(--sidebar-text);
  font-size: 12px;
  padding: 5px 8px;
  cursor: pointer;
  outline: none;
}

#product-selector:focus { border-color: var(--sidebar-accent); }

#ai-status {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

#ai-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sidebar-muted);
  display: inline-block;
}
#ai-status-dot.online { background: var(--success); }
#ai-status-dot.offline { background: var(--danger); }

#ai-status-label {
  color: var(--sidebar-muted);
  font-size: 10px;
  display: none;
}

#header-domain {
  color: var(--sidebar-muted);
  font-size: 10px;
  display: none;
  letter-spacing: 0.02em;
}

@media (min-width: 768px) {
  #ai-status-label { display: inline; }
}
@media (min-width: 1024px) {
  #header-domain { display: inline; }
  #product-selector { max-width: 240px; }
}

/* ─── App Layout ─────────────────────────────────────────────────── */
#app-layout {
  display: flex;
  position: fixed;
  top: var(--header-height);
  left: 0; right: 0;
  bottom: var(--bottom-nav-height);
  height: calc(100vh - var(--header-height));
  height: calc(100dvh - var(--header-height));
  overflow: hidden;
}

@media (min-width: 768px) {
  #app-layout {
    bottom: 0;
    left: var(--sidebar-width-tablet);
  }
}

@media (min-width: 1024px) {
  #app-layout {
    left: var(--sidebar-width-desktop);
  }
}

/* ─── Mobile drawer / hamburger hidden on desktop ────────────────── */
@media (min-width: 768px) {
  #mobile-drawer { display: none !important; }
  #mobile-overlay { display: none !important; }
  #mobile-menu-btn { display: none !important; }
}

/* ─── Sidebar ─────────────────────────────────────────────────────── */
#sidebar {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  bottom: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 100;
  -webkit-transform: translateZ(0);
}

@media (min-width: 768px) {
  #sidebar {
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width-tablet);
  }
}

@media (min-width: 1024px) {
  #sidebar {
    width: var(--sidebar-width-desktop);
  }
}

#sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0 16px;
  min-height: 100%;
}

.sidebar-section {
  padding-top: 8px;
}

.sidebar-section + .sidebar-section {
  border-top: 1px solid var(--sidebar-border);
  margin-top: 8px;
}

.sidebar-section-label {
  color: var(--sidebar-section-label);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 6px 0 4px 14px;
  display: none;
}

@media (min-width: 1024px) {
  .sidebar-section-label { display: block; }
}

/* Sidebar items */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  color: var(--sidebar-text);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  width: 100%;
  transition: background 0.15s;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-item:hover { background: var(--sidebar-hover-bg); }
.sidebar-item.active { background: var(--sidebar-active-bg); color: #fff; }
.sidebar-item.active .ti { color: var(--sidebar-accent); }

.sidebar-item .ti {
  font-size: 16px;
  flex-shrink: 0;
  color: var(--sidebar-muted);
  width: 20px;
  text-align: center;
}

.sidebar-item span {
  display: none;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 1024px) {
  .sidebar-item span { display: inline; }
}

/* Channel pills styled as sidebar items */
.channel-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  color: var(--sidebar-text);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.15s;
  position: relative;
}

.channel-pill:hover { background: var(--sidebar-hover-bg); }
.channel-pill.active { background: var(--sidebar-active-bg); color: #fff; }
.channel-pill.active .ch-icon { color: var(--sidebar-accent); }

.ch-icon {
  font-size: 16px;
  flex-shrink: 0;
  color: var(--sidebar-muted);
  width: 20px;
  text-align: center;
}

.ch-name {
  display: none;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 1024px) {
  .ch-name { display: inline; }
}

.priority-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sidebar-accent);
  flex-shrink: 0;
  display: none;
}

@media (min-width: 1024px) {
  .priority-dot { display: inline-block; }
}

.start-here-tag {
  background: var(--sidebar-accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 4px;
  border-radius: 3px;
  display: none;
}

@media (min-width: 1024px) {
  .start-here-tag { display: inline; }
}


/* ─── Workspace ──────────────────────────────────────────────────── */
#workspace {
  flex: 1;
  overflow-y: scroll;
  overflow-x: hidden;
  touch-action: pan-y;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

@media (min-width: 768px) {
  #workspace { padding: 16px; gap: 14px; }
}

@media (min-width: 1024px) {
  #workspace { padding: 20px; gap: 16px; }
}

/* Top panels */
.top-panel { display: none; flex-direction: column; gap: 12px; }
.top-panel.active { display: flex; }

@media (min-width: 768px) {
  .top-panel { gap: 14px; }
}

/* ─── Workspace Cards ────────────────────────────────────────────── */
.workspace-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 16px;
  box-shadow: var(--card-shadow);
}

.card-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
  flex-wrap: wrap;
}

.card-title-row .card-title { margin-bottom: 0; }

/* ─── Recommended Actions Card ───────────────────────────────────── */
#recommended-actions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.action-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 7px;
  background: #f8f9fb;
  border: 1px solid var(--card-border);
  cursor: pointer;
  transition: background 0.15s;
}

.action-item:hover { background: #f0f2f5; }
.action-item.priority-high { border-left: 3px solid var(--accent); }

.action-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.action-text { flex: 1; }
.action-title { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.action-desc { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* ─── Campaign Setup Card ────────────────────────────────────────── */
#generation-settings {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 480px) {
  #generation-settings { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  #generation-settings { grid-template-columns: 1fr 1fr 1fr; }
}

.gen-setting label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 4px;
}

.gen-setting select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  outline: none;
}

.gen-setting select:focus { border-color: var(--input-border-focus); }

/* ─── Channel Builder Card ───────────────────────────────────────── */
/* Sub-panels — always visible stacked in new layout */
.sub-panel { display: block; }

.configure-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

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

.combo-count {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

#combo-matrix-wrap {
  overflow-x: auto;
  margin-bottom: 12px;
}

#combo-matrix {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 100%;
}

#combo-matrix th, #combo-matrix td {
  padding: 6px 10px;
  border: 1px solid var(--card-border);
  text-align: center;
  white-space: nowrap;
}

#combo-matrix th {
  background: #f8f9fb;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 11px;
}

#combo-matrix td { background: var(--card-bg); }
#combo-matrix input[type=checkbox] { cursor: pointer; accent-color: var(--accent); }

.angle-checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.angle-checkbox-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid var(--card-border);
  border-radius: 5px;
  font-size: 12px;
  background: #f8f9fb;
}

.angle-checkbox-item input[type=checkbox] { accent-color: var(--accent); }

.configure-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--card-border);
  margin-top: 10px;
}

.no-key-warning { font-size: 11px; color: var(--warning); flex: 1; }

/* ─── Google Ads Pack ────────────────────────────────────────────── */
#gads-pack-configure-bar {
  margin-top: 16px;
  padding: 14px;
  background: #f3f7ea;
  border: 1px solid #c8e090;
  border-radius: 8px;
}

.gads-pack-header { margin-bottom: 10px; }
.gads-pack-title { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: #4a7010; }
.gads-pack-desc { font-size: 11px; color: #5a7a20; margin-top: 4px; }

.gads-pack-expand-btn {
  background: none;
  border: 1px solid #b8d878;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 11px;
  color: #4a7010;
  cursor: pointer;
}

.gads-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.gads-setting label {
  display: block;
  font-size: 10px;
  color: #4a7010;
  font-weight: 500;
  margin-bottom: 3px;
}

.gads-setting select {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid #c8e090;
  border-radius: 5px;
  background: #fff;
  font-size: 12px;
  outline: none;
}

.gads-pack-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gads-pack-no-results { font-size: 11px; color: #5a7a20; }
#gads-pack-progress { margin-top: 8px; font-size: 12px; color: #4a7010; }

.gads-pack-warning {
  margin-top: 10px;
  font-size: 10px;
  color: #6a5a00;
  background: #fffbe0;
  border: 1px solid #f0d800;
  border-radius: 5px;
  padding: 6px 8px;
}

/* ─── Progress Card ──────────────────────────────────────────────── */
.combo-progress-list { display: flex; flex-direction: column; gap: 6px; }

.combo-progress-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  font-size: 12px;
  background: #f8f9fb;
}

.progress-status {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.progress-status.pending { border-color: #d0d5dd; }
.progress-status.running { border-color: var(--accent); animation: spin 1s linear infinite; }
.progress-status.done { background: var(--success); border-color: var(--success); color: #fff; }
.progress-status.error { background: var(--danger); border-color: var(--danger); color: #fff; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.generate-done-bar {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px solid var(--card-border);
}

/* ─── Results Card ───────────────────────────────────────────────── */
.results-toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.empty-state {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
  padding: 28px 20px;
  text-align: center;
  max-width: 460px;
  margin: 0 auto;
}
/* First line of a multi-line empty state reads as a calm heading. */
.empty-state strong, .empty-state b {
  display: block;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: 4px;
}
.proof-empty-state {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  padding: 14px 12px;
  background: var(--workspace-bg);
  border: 1px dashed var(--card-border);
  border-radius: 6px;
}
.proof-empty-state strong {
  display: block;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 3px;
}

/* Result cards */
.result-card {
  border: 1px solid var(--card-border);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--card-bg);
}

.result-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8f9fb;
  border-bottom: 1px solid var(--card-border);
  gap: 8px;
}

.result-combo-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.result-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.result-card-body { padding: 12px 14px; }

.result-section { margin-bottom: 10px; }
.result-section-title { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 6px; }

.result-field {
  padding: 7px 10px;
  border: 1px solid var(--card-border);
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.5;
  background: var(--input-bg);
  color: var(--text-primary);
  width: 100%;
  word-break: break-word;
  margin-bottom: 5px;
  outline: none;
}

.result-field[contenteditable] { cursor: text; }
.result-field[contenteditable]:focus { border-color: var(--input-border-focus); }
.result-field.flagged { border-color: var(--danger); background: #fff5f5; }

.result-field-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 3px;
  display: flex;
  justify-content: space-between;
}

.char-count { font-size: 10px; color: var(--text-muted); }
.char-count.over { color: var(--danger); font-weight: 700; }

.score-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
}
.score-badge.high { background: #e8f3d0; color: #4a7010; }
.score-badge.mid { background: #fff3cd; color: #856404; }
.score-badge.low { background: #fde8e8; color: #a00; }

.rsa-headlines-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 5px;
}

@media (min-width: 768px) {
  .rsa-headlines-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.post-body-text {
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-primary);
  padding: 10px;
  border: 1px solid var(--card-border);
  border-radius: 5px;
  background: #f8f9fb;
  max-height: 300px;
  overflow-y: auto;
}

/* ─── UTM Builder ────────────────────────────────────────────────── */
.utm-section-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
.utm-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.utm-field label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.field-hint { font-weight: 400; opacity: 0.75; }

.utm-field input, .utm-field select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}

.utm-field input:focus, .utm-field select:focus { border-color: var(--input-border-focus); }

.utm-generated { margin-bottom: 16px; }
.utm-generated-label { font-size: 11px; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; }

#utm-generated-url {
  padding: 8px 10px;
  background: #f8f9fb;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  font-size: 12px;
  word-break: break-all;
  color: var(--info);
  margin-bottom: 8px;
  min-height: 36px;
}

.utm-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.utm-divider { border: none; border-top: 1px solid var(--card-border); margin: 16px 0; }
.saved-links-list { display: flex; flex-direction: column; gap: 8px; }

.saved-link-item {
  padding: 8px 10px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: #f8f9fb;
  font-size: 12px;
}

.saved-link-label { font-weight: 500; color: var(--text-primary); margin-bottom: 3px; }
.saved-link-url { color: var(--info); word-break: break-all; font-size: 11px; }

/* ─── Saved Campaigns ────────────────────────────────────────────── */
#campaigns-container { display: flex; flex-direction: column; gap: 10px; }

.campaign-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: #f8f9fb;
  gap: 10px;
}

.campaign-card-info { flex: 1; overflow: hidden; }
.campaign-card-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.campaign-card-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.campaign-card-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ─── Right Drawer ───────────────────────────────────────────────── */
#right-drawer {
  display: none;
  width: var(--right-drawer-width);
  flex-shrink: 0;
  background: var(--card-bg);
  border-left: 1px solid var(--card-border);
  overflow-y: auto;
  position: relative;
  transition: width 0.2s;
}

@media (min-width: 1024px) {
  #right-drawer { display: flex; flex-direction: column; }
}

#right-drawer.collapsed { width: 0; overflow: hidden; border: none; }

.drawer-toggle {
  display: none;
  position: absolute;
  top: 12px;
  left: -68px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px 0 0 6px;
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-secondary);
  border-right: none;
  white-space: nowrap;
  z-index: 10;
}

@media (min-width: 1024px) {
  .drawer-toggle { display: flex; align-items: center; gap: 4px; }
}

#right-drawer-inner { padding: 12px; }

.drawer-section { margin-bottom: 16px; }
.drawer-section-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.drawer-item {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 3px 0;
  line-height: 1.4;
}

.drawer-claim-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 20px;
  background: #fde8e8;
  color: #a00;
  font-size: 10px;
  margin: 2px 2px 2px 0;
}

.drawer-view-all {
  display: block;
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  margin-top: 4px;
}
.drawer-view-all:hover { text-decoration: underline; }

/* ─── Mobile Drawer ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  #mobile-menu-btn { display: flex !important; }

  #mobile-drawer {
    position: fixed;
    top: 0; left: 0;
    width: 280px;
    height: 100vh;
    height: 100dvh;
    background: #0B0F14;
    z-index: 1500;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    padding: 0 0 calc(24px + env(safe-area-inset-bottom));
  }

  #mobile-drawer.open { transform: translateX(0); -webkit-transform: translateX(0); }

  #mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1400;
    display: none;
  }

  #mobile-overlay.open { display: block; }
}

#mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--sidebar-border);
  position: sticky;
  top: 0;
  background: #0B0F14;
  z-index: 1;
}

#mobile-drawer-brand {
  color: var(--sidebar-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

#mobile-drawer-close {
  background: none;
  border: none;
  color: var(--sidebar-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

#mobile-drawer-close:hover { color: var(--sidebar-text); }

.mobile-drawer-section {
  padding-top: 8px;
  border-top: 1px solid var(--sidebar-border);
  margin-top: 8px;
}

.mobile-drawer-section:first-of-type { border-top: none; margin-top: 0; }

.mobile-drawer-label {
  color: var(--sidebar-section-label);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 6px 0 4px 14px;
}

.mobile-drawer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  color: var(--sidebar-text);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  width: 100%;
  transition: background 0.15s;
}

.mobile-drawer-item:hover { background: var(--sidebar-hover-bg); }
.mobile-drawer-item.active { background: var(--sidebar-active-bg); color: #fff; }
.mobile-drawer-item.active .ti { color: var(--sidebar-accent); }

.mobile-drawer-item .ti {
  font-size: 16px;
  flex-shrink: 0;
  color: var(--sidebar-muted);
  width: 20px;
  text-align: center;
}

.mobile-drawer-item.active .ti { color: var(--sidebar-accent); }

/* ─── Product Settings Overlay ───────────────────────────────────── */
#product-settings-overlay {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background: var(--workspace-bg);
  z-index: 900;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#product-settings-overlay.hidden { display: none; }

#product-settings-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

#settings-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--card-border);
  background: var(--card-bg);
  flex-shrink: 0;
}

#settings-product-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

#settings-tabs {
  display: flex;
  padding: 0 16px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--card-border);
  overflow-x: auto;
  flex-shrink: 0;
}

.settings-tab {
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}

.settings-tab:hover { color: var(--text-primary); }
.settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }

#settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.settings-panel { display: none; }
.settings-panel.active { display: block; }

.field-group { margin-bottom: 12px; }

.field-group label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.field-group input, .field-group textarea, .field-group select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  resize: vertical;
}

.field-group input:focus, .field-group textarea:focus, .field-group select:focus {
  border-color: var(--input-border-focus);
}

/* ─── iOS input zoom prevention ─────────────────────────────────── */
/* iPhone Safari zooms on inputs < 16px. Force 16px on mobile, revert on tablet+ */
@media (max-width: 767px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}
@media (min-width: 768px) {
  input, select, textarea {
    font-size: 13px !important;
  }
}

.char-hint { color: var(--text-muted); font-size: 10px; font-weight: 400; }

/* ── Settings item cards (Angles & Personas) ─────────────────────── */
.settings-item-card {
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: #f8f9fb;
  margin-bottom: 8px;
  overflow: hidden;
}

.sic-view { padding: 12px 14px; }

.sic-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.sic-number {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sic-title {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sic-actions { display: flex; gap: 6px; flex-shrink: 0; }

.sic-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 32px;
}

.sic-meta-row {
  display: flex;
  gap: 6px;
  font-size: 12px;
  line-height: 1.4;
}

.sic-meta-label {
  color: var(--text-muted);
  font-weight: 500;
  flex-shrink: 0;
  min-width: 60px;
}

.sic-meta-val {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sic-edit {
  padding: 12px 14px;
  border-top: 1px solid var(--card-border);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sic-edit.hidden { display: none; }

.sic-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sic-field label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

.sic-field input {
  padding: 7px 10px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--input-bg);
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  outline: none;
}

.sic-field input:focus { border-color: var(--input-border-focus); }

.sic-edit-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

.add-items-row { display: flex; gap: 8px; margin-top: 10px; }

/* ── Claims cards ────────────────────────────────────────────────── */
.claim-card {
  border: 1px solid #fca5a5;
  border-radius: 8px;
  background: #fff5f5;
  margin-bottom: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.claim-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.claim-text-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-primary);
  outline: none;
}

.claim-text-input:focus { border-color: var(--danger); }

.claim-risk-select {
  padding: 5px 8px;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
}

.claim-del-btn {
  background: none;
  border: none;
  color: #fca5a5;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.claim-del-btn:hover { color: var(--danger); }

.claim-reason-input {
  width: 100%;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-size: 11px;
  font-family: inherit;
  color: var(--text-muted);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.claim-reason-input:focus,
.claim-reason-input:not(:placeholder-shown) {
  border-color: #fca5a5;
  background: #fff;
}

/* ── Channel Priority ────────────────────────────────────────────── */
.priority-heading {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.5;
}

.priority-divider-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin: 14px 0 8px;
}

.priority-channel-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: #f8f9fb;
  margin-bottom: 6px;
}

.priority-channel-item.unprioritised { opacity: 0.45; }

.priority-rank {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.unprioritised-rank {
  background: var(--text-muted);
}

.priority-channel-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.priority-channel-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.priority-channel-best {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Legacy remove-btn (kept for any remaining refs) */
.remove-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 5px;
  flex-shrink: 0;
  line-height: 1;
}
.remove-btn:hover { color: var(--danger); }

#settings-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--card-bg);
  border-top: 1px solid var(--card-border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

#new-product-form {
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#new-product-form.visible { display: flex; }
#new-product-name {
  padding: 6px 10px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}

.btn-danger-link {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin-left: auto;
}

/* ─── Buttons ────────────────────────────────────────────────────── */
.btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 1px solid var(--btn-secondary-border);
}
.btn-secondary:hover:not(:disabled) { background: #e0e3e8; }

.btn-ai { background: #1a1d23; color: #fff; }
.btn-ai:hover:not(:disabled) { background: #2a2d35; }

.btn-small { padding: 5px 10px; font-size: 11px; }

/* ─── Modals ─────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.hidden { display: none; }

.modal-box {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 24px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.modal-box-wide { max-width: 680px; }

.modal-box h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
  flex-wrap: wrap;
}

.suggestion-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
  margin-top: 12px;
}

.suggestion-card {
  padding: 8px 12px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  font-size: 12px;
  background: #f8f9fb;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  transition: background 0.1s;
}

.suggestion-card:hover { background: #f0f2f5; }
.suggestion-card input[type=checkbox] { flex-shrink: 0; margin-top: 2px; accent-color: var(--accent); }

#campaign-view-modal-body {
  max-height: 400px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--text-primary);
  background: #f8f9fb;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 12px;
}

/* ─── Scrollbars ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #b0b8c4; }

/* ─── Utilities ──────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ─── PH Launch Pack ─────────────────────────────────────────────── */
.ph-pack-section { margin-bottom: 16px; }
.ph-pack-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* ─── Copy blocks (YouTube, Email, DM, Reddit, IH) ───────────────── */
.copy-block {
  padding: 10px;
  background: #f8f9fb;
  border: 1px solid var(--card-border);
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  margin-bottom: 8px;
}

.combo-row-label { text-align: left !important; font-weight: 500; color: var(--text-secondary); }

/* ─── Google Ads Pack results ────────────────────────────────────── */
#gads-pack-results-section {
  margin-bottom: 16px;
  padding: 14px;
  background: #f3f7ea;
  border: 1px solid #c8e090;
  border-radius: 8px;
}

.gads-result-section { margin-bottom: 12px; }
.gads-result-title { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: #4a7010; margin-bottom: 6px; }

.gads-keyword-list { display: flex; flex-wrap: wrap; gap: 5px; }

.gads-keyword-tag {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid #c8e090;
  border-radius: 20px;
  background: #fff;
  font-size: 11px;
  color: #4a7010;
}

/* ─── Channel page header ─────────────────────────────────────────── */
.channel-page-header {
  padding: 0 0 12px 0;
}
.channel-page-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0 0 4px 0;
}
.channel-page-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

/* ─── Empty output state ──────────────────────────────────────────── */
.empty-output-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  background: var(--card-bg);
  border: 1px dashed var(--card-border);
  border-radius: 8px;
  margin-top: 12px;
  gap: 12px;
}
.empty-output-state .ti {
  font-size: 32px;
  color: var(--text-muted);
  opacity: 0.5;
}
.empty-output-heading {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
}
.empty-output-subtext {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  max-width: 320px;
  line-height: 1.5;
}

/* ─── Recommended next actions grid ──────────────────────────────── */
.rec-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 767px) {
  .rec-actions-grid { grid-template-columns: 1fr; }
}
.rec-action-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rec-action-card--primary {
  border-color: var(--sidebar-accent);
  background: #f6faf0;
}
.rec-action-channel {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.rec-action-reason {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
}
.rec-action-btn {
  background: none;
  border: none;
  color: var(--sidebar-accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0 0;
  text-align: left;
  margin-top: auto; /* pin CTA to the bottom for consistent card heights */
}
.rec-action-btn:hover { text-decoration: underline; }

/* ─── Button sizes ───────────────────────────────────────────────── */
.btn-xs { padding: 3px 8px; font-size: 10px; }

/* ─── Channel badges ─────────────────────────────────────────────── */
.channel-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: #e8eaf0;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.channel-badge-google-rsa    { background: #e8f0fe; color: #1a56db; }
.channel-badge-linkedin-ad   { background: #dbeafe; color: #0077b5; }
.channel-badge-linkedin-post { background: #dbeafe; color: #0077b5; }
.channel-badge-linkedin-dm   { background: #dbeafe; color: #0077b5; }
.channel-badge-cold-email    { background: #fef3c7; color: #92400e; }
.channel-badge-product-hunt  { background: #fee2d5; color: #c2410c; }
.channel-badge-indie-hackers { background: #d1fae5; color: #065f46; }
.channel-badge-youtube       { background: #fee2e2; color: #b91c1c; }
.channel-badge-reddit                  { background: #ffedd5; color: #c2410c; }
.channel-badge-solo-founders-community { background: #ede9fe; color: #5b21b6; }

/* ─── Result card header elements ────────────────────────────────── */
.result-card-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── RSA card ───────────────────────────────────────────────────── */
.result-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 12px 14px;
}
@media (min-width: 700px) {
  .result-columns { grid-template-columns: 1fr 1fr; }
}
.copy-column h4 {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.col-limit { font-size: 10px; font-weight: 400; color: var(--text-muted); }
.copy-item { margin-bottom: 4px; }
.copy-line {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--card-border);
  border-radius: 5px;
  background: var(--input-bg);
  font-size: 12px;
}
.copy-text {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  outline: none;
  word-break: break-word;
}
.copy-text.flagged { color: var(--danger); }
.flag-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}
.score-badge.top-pick { background: #fff3cd; color: #856404; }
.score-badge.empty { background: #f0f2f5; color: var(--text-muted); }
.top-picks-divider {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  padding: 6px 0 4px;
  letter-spacing: 0.05em;
}

/* ─── Char count variants ────────────────────────────────────────── */
.char-count.warn  { color: #92400e; }
.char-count.muted { color: var(--text-muted); }
.char-count-inline {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 4px;
}
.char-count-inline.warn { color: var(--danger); font-weight: 600; }

/* ─── Fix-flagged row ────────────────────────────────────────────── */
.fix-flagged-row {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-top: 1px solid var(--card-border);
  background: #fff8f8;
}
.fix-flagged-row.visible { display: flex; }

/* ─── Single result fields (LinkedIn Post, YouTube, Reddit, etc.) ── */
.single-result-fields { padding: 0 14px 14px; }
.result-field-group {
  border: 1px solid var(--card-border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
  background: var(--card-bg);
}
.result-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #f8f9fb;
}
.result-field-sep {
  height: 1px;
  background: var(--card-border);
}
.result-field-body {
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
.result-field-body.flagged { background: #fff5f5; color: var(--danger); }
.result-field-headline {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.result-field-copy {
  padding: 4px 10px 6px;
  display: flex;
  justify-content: flex-end;
}
.result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 10px;
}
.result-tag {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--card-border);
  border-radius: 20px;
  font-size: 10px;
  background: #f8f9fb;
  color: var(--text-secondary);
}

/* ─── Reddit card ────────────────────────────────────────────────── */
.reddit-tone-warning {
  margin: 8px 14px 0;
  padding: 7px 10px;
  background: #fff8e6;
  border: 1px solid #f5d87a;
  border-radius: 5px;
  font-size: 11px;
  color: #7c5800;
}
.reddit-subreddits { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.reddit-sub-row { display: flex; align-items: flex-start; gap: 8px; }
.reddit-sub-reason { font-size: 11px; color: var(--text-muted); line-height: 1.5; }

/* ─── Product Hunt variations ────────────────────────────────────── */
.ph-variation {
  border: 1px solid var(--card-border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
}
.ph-variation-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 6px 10px;
  background: #f8f9fb;
  border-bottom: 1px solid var(--card-border);
}
.ph-variation .result-field-group { border: none; border-bottom: 1px solid var(--card-border); border-radius: 0; margin-bottom: 0; }
.ph-variation .result-field-group:last-child { border-bottom: none; }

/* ─── Variation cards (LinkedIn Ad, Cold Email, LinkedIn DM) ──────── */
.variations-container { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.variation-card {
  border: 1px solid var(--card-border);
  border-radius: 6px;
  overflow: hidden;
}
.variation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f8f9fb;
  cursor: pointer;
  user-select: none;
}
.variation-header:hover { background: #f0f2f5; }
.variation-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.variation-toggle { font-size: 14px; color: var(--text-muted); transition: transform 0.15s; }
.variation-card.collapsed .variation-toggle { transform: rotate(-90deg); }
.variation-body { border-top: 1px solid var(--card-border); }
.variation-card.collapsed .variation-body { display: none; }
.variation-field {
  padding: 0;
  border-bottom: 1px solid var(--card-border);
}
.variation-field:last-child { border-bottom: none; }
.variation-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 4px;
  background: #fafbfc;
}
.variation-field-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.variation-field-sep { height: 1px; background: var(--card-border); }
.variation-field-body {
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
.variation-field-body.flagged { background: #fff5f5; color: var(--danger); }
.variation-field-headline { font-size: 13px; font-weight: 600; }
.variation-cta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}
.variation-cta-pill {
  display: inline-block;
  padding: 4px 14px;
  border: 1px solid var(--card-border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--input-bg);
  color: var(--text-primary);
}
.variation-cta-pill.flagged { border-color: var(--danger); background: #fff5f5; color: var(--danger); }
.variation-copy-row {
  display: flex;
  justify-content: flex-end;
  padding: 4px 12px 6px;
}
.variation-actions {
  padding: 8px 12px;
  border-top: 1px solid var(--card-border);
  background: #fafbfc;
  display: flex;
  justify-content: flex-end;
}

/* ─── Solo Founders/Builders Community card ───────────────────────── */
.sfc-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 6px;
  flex-wrap: wrap;
}
.sfc-post-type-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: #ede9fe;
  color: #5b21b6;
}
.sfc-goal-label {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}
.sfc-body {
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
}
.sfc-placeholder {
  display: inline-block;
  background: #fef9c3;
  color: #854d0e;
  border-radius: 3px;
  padding: 0 4px;
  font-weight: 600;
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   ENTERPRISE DASHBOARD UPGRADE
   ═══════════════════════════════════════════════════════════════════ */

/* ── Header 3-zone layout ─────────────────────────────────────────── */
#header-center {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 0 12px;
}
#header-center #product-selector {
  flex: none;
  width: 200px;
  max-width: 240px;
}
#header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
#header-right #ai-status { flex-shrink: 0; }
#header-right #header-domain { flex-shrink: 0; }

/* Make AI status label always visible ── */
@media (min-width: 640px) {
  #header-right #ai-status-label { display: inline; }
}

/* ── Card subtitle ────────────────────────────────────────────────── */
.card-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  margin: -4px 0 12px;
  line-height: 1.5;
}

/* ── Product Growth Command Header ───────────────────────────────── */
.enterprise-header-card {
  border-left: 3px solid var(--accent);
}
.pgh-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pgh-text { flex: 1; min-width: 0; }
.pgh-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}
.pgh-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 500px;
}
.pgh-pills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
}
.pgh-pill {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: #f3f5f8;
  border: 1px solid var(--card-border);
  border-radius: 3px;
  padding: 3px 8px;
  white-space: nowrap;
}
.pgh-pill--active {
  color: var(--accent);
  background: #f2f8e8;
  border-color: #c4dfa0;
}

/* ── AI Context Status Row ───────────────────────────────────────── */
.ai-context-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--card-border);
}
.ai-context-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 4px;
  flex-shrink: 0;
}
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 3px;
  border: 1px solid var(--card-border);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--text-secondary);
}
.ai-badge--active {
  border-color: #c4dfa0;
  background: #f2f8e8;
}
.ai-badge--active strong { color: var(--accent); font-weight: 600; }
.ai-badge--missing { opacity: 0.55; background: #f8f9fb; }
.ai-badge--missing strong { color: var(--text-muted); font-weight: 500; }
.ai-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  display: inline-block;
}

/* ── Recommended Actions upgrade ─────────────────────────────────── */
.rec-action-sequence {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: -2px;
}
.rec-action-bestfor {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
}
.rec-bestfor-label {
  font-weight: 600;
  color: var(--text-secondary);
}

/* ── Angle Cards (premium selectable) ───────────────────────────── */
.angle-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 10px;
}
.angle-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--card-border);
  border-bottom: none;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  background: var(--card-bg);
  user-select: none;
}
.angle-card:first-child { border-radius: 6px 6px 0 0; }
.angle-card:last-child { border-bottom: 1px solid var(--card-border); border-radius: 0 0 6px 6px; }
.angle-card:only-child { border: 1px solid var(--card-border); border-radius: 6px; }
.angle-card:hover { background: #f6faf0; border-color: #c4dfa0; z-index: 1; }
.angle-card--selected {
  background: #f2f8e8;
  border-color: var(--accent);
  z-index: 1;
}
.angle-card--selected + .angle-card { border-top-color: var(--accent); }
.angle-card-cb {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.angle-card-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 3px;
  border: 1.5px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: transparent;
  margin-top: 1px;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  background: var(--card-bg);
}
.angle-card--selected .angle-card-check {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.angle-card-info { flex: 1; min-width: 0; }
.angle-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.angle-card-focus {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.angle-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  z-index: 2;
}

/* ── Configure footer — guardrail above button ───────────────────── */
.configure-footer {
  flex-direction: column;
  align-items: stretch;
}
.configure-footer #generate-btn {
  align-self: flex-end;
}

/* ── Generate guardrail ──────────────────────────────────────────── */
.generate-guardrail {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 7px 10px;
  background: #f8f9fb;
  border-left: 2px solid var(--card-border);
  border-radius: 0 3px 3px 0;
  margin-bottom: 10px;
}
.generate-guardrail.guardrail--warn {
  color: var(--accent);
  background: #f2f8e8;
  border-left-color: var(--accent);
}

/* ── Empty output state upgrade ─────────────────────────────────── */
.empty-output-icon {
  font-size: 36px;
  color: var(--text-muted);
  opacity: 0.35;
  margin-bottom: -4px;
}
.empty-output-icon .ti { font-size: 36px; }
.empty-output-meta {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.6;
  margin: 0;
  text-align: center;
  max-width: 360px;
  line-height: 1.5;
}

/* ── Result card traceability metadata ──────────────────────────── */
.result-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 14px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--card-border);
  background: #f8f9fb;
}
.rcm-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 0;
}
.rcm-key {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-size: 9px;
}
.rcm-claims { color: var(--accent); }
.rcm-claims .rcm-key { color: var(--accent); }

/* ── Growth Context drawer header ───────────────────────────────── */
.drawer-growth-header {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
  padding: 12px 14px 6px;
  border-bottom: 1px solid var(--sidebar-border);
  margin-bottom: 4px;
}

/* ── Campaign Brief ──────────────────────────────────────────────────────────── */

.campaign-brief-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.campaign-brief-heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.campaign-brief-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.campaign-brief-fields .gen-setting input[type="text"] {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text-main);
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 4px;
  font-family: inherit;
}

.campaign-brief-fields .gen-setting input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}

.campaign-brief-fields .gen-setting input[type="text"]::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

@media (max-width: 700px) {
  .campaign-brief-fields {
    grid-template-columns: 1fr;
  }
}

/* ── Proof Bank ──────────────────────────────────────────────────────────────── */

.proof-entry-card {
  background: var(--card-bg, #141c24);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.proof-entry-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.proof-entry-type {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(99,175,62,0.12);
  color: var(--accent);
  border-radius: 3px;
  padding: 2px 6px;
  flex-shrink: 0;
}

.proof-entry-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  flex: 1;
}

.proof-del-btn {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
  padding: 1px 6px;
}

.proof-entry-text {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

.proof-add-form {
  margin-top: 12px;
  padding: 12px;
  background: var(--card-bg, #141c24);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.proof-add-form.hidden { display: none; }

/* ─── Proof Bank 2.0 ─────────────────────────────────────────────── */

.proof-entry-card--inactive {
  opacity: 0.45;
}

.proof-entry-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.proof-entry-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.proof-inactive-tag {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--text-muted);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.proof-strength-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.proof-strength-strong  { background: #d1fae5; color: #065f46; }
.proof-strength-moderate { background: #fef3c7; color: #92400e; }
.proof-strength-weak    { background: #fee2e2; color: #991b1b; }

.proof-featured-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: #fef9c3;
  color: #713f12;
  font-weight: 600;
}

.proof-source-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}

.proof-inline-edit-form {
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: var(--workspace-bg);
  margin-bottom: 8px;
}

.proof-featured-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  margin-top: 8px;
}

/* ─── Proof Selector (Campaign Brief) ───────────────────────────── */

.proof-selector-section {
  margin-top: 14px;
  border-top: 1px solid var(--card-border);
  padding-top: 12px;
}

.proof-selector-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.proof-selector-area {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.proof-sel-pill {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--card-border);
  background: var(--workspace-bg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.proof-sel-pill:hover { border-color: var(--accent); color: var(--accent); }

.proof-sel-pill--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ─── Campaign Brief additions ───────────────────────────────────── */

.campaign-selector-row {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--card-border);
}

/* ─── Campaign Library ───────────────────────────────────────────── */

.cl-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.cl-filters select {
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--text-primary);
}

.cl-card {
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--card-bg);
  transition: box-shadow 0.15s;
}

.cl-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.cl-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cl-card-left { flex: 1; min-width: 0; }
.cl-card-right { display: flex; gap: 6px; flex-shrink: 0; }

.cl-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.cl-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}

.cl-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.cl-badge-objective { background: #e0f2fe; color: #0369a1; }
.cl-badge-mode      { background: #f3f4f6; color: var(--text-secondary); }
.cl-badge-proof     { background: #d1fae5; color: #065f46; }

.cl-badge-status.cl-status-planned   { background: #f1f5f9; color: #475569; }
.cl-badge-status.cl-status-drafting  { background: #fef3c7; color: #92400e; }
.cl-badge-status.cl-status-approved  { background: #d1fae5; color: #065f46; }
.cl-badge-status.cl-status-published { background: #dcfce7; color: #166534; }
.cl-badge-status.cl-status-archived  { background: #f1f5f9; color: #94a3b8; }

.cl-card-audience {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 3px;
}

.cl-card-pain {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

.campaign-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--card-border);
}

.clf-proof-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.clf-proof-pill {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--card-border);
  background: var(--workspace-bg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.clf-proof-pill:hover { border-color: var(--accent); }

.clf-proof-pill--selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ─── Product Growth Status/Priority Pills ───────────────────────── */

.pgh-pill--status {
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 600;
  text-transform: capitalize;
}

.pgh-pill--priority { font-weight: 600; text-transform: capitalize; }
.pgh-priority-high   { background: #fef2f2; color: #991b1b; }
.pgh-priority-medium { background: #fffbeb; color: #92400e; }
.pgh-priority-low    { background: #f1f5f9; color: #475569; }

/* ─── Growth Context drawer additions ───────────────────────────── */

.drawer-proof-counts, .drawer-cl-counts {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.drawer-proof-counts span, .drawer-cl-counts span {
  background: var(--sidebar-hover-bg, #13181f);
  padding: 1px 6px;
  border-radius: 4px;
}

/* ─── Result card proof meta ─────────────────────────────────────── */

.rcm-proof .rcm-key { color: var(--accent); }

/* ─── Phase 2C — Execution Tracking ─────────────────────────────────────────── */

/* Execution Dashboard Lite */
.execution-dashboard { margin-top: 10px; }
.exec-dash-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
}
.exec-dash-row--campaign {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--card-border);
  align-items: center;
}
.exec-dash-campaign-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); margin-right: 4px;
}
.exec-stat {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-width: 88px; flex: 1 1 88px; padding: 10px 12px; background: var(--card-bg);
  border: 1px solid var(--card-border); border-radius: 8px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.exec-stat:hover { border-color: #c9d2de; box-shadow: 0 1px 4px rgba(13,13,13,0.05); }
.exec-stat-val { font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--text-primary); letter-spacing: -0.01em; }
.exec-stat-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 3px; text-align: left;
}
/* Emphasise leads — the headline outcome metric. */
.exec-stat--lead .exec-stat-val { color: var(--accent); }

/* Content Library — execution area on saved cards */
.exec-area {
  margin: 8px 0; padding: 8px 10px; background: var(--workspace-bg);
  border: 1px solid var(--card-border); border-radius: 6px;
}
.exec-area-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 5px;
}
.exec-area-rows { display: flex; flex-wrap: wrap; gap: 6px; }
.exec-chip {
  font-size: 11px; padding: 2px 7px; border-radius: 10px;
  background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-secondary);
}
.exec-chip a { color: var(--accent); text-decoration: none; }
.exec-area-note { font-size: 11px; color: var(--text-secondary); margin-top: 5px; }
.exec-note-key { font-weight: 700; color: var(--text-muted); margin-right: 4px; }
.campaign-updated-label { color: var(--text-muted); }

/* Inline tracking panel */
.exec-track-panel {
  margin: 8px 0; padding: 10px 12px; background: var(--workspace-bg);
  border: 1px solid var(--card-border); border-radius: 6px;
}
.exec-track-helper { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.exec-track-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px;
}
.exec-track-actions { display: flex; gap: 8px; margin-top: 10px; }

/* Content Calendar */
.cal-date-group-heading {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent); margin: 12px 0 6px;
}
.cal-card, .perf-card {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px;
}
.cal-card-top, .perf-card-top { display: flex; justify-content: space-between; gap: 10px; }
.cal-card-title, .perf-card-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.cal-card-tags, .perf-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.cal-badge, .perf-badge {
  font-size: 10px; padding: 2px 7px; border-radius: 10px;
  background: var(--workspace-bg); border: 1px solid var(--card-border); color: var(--text-secondary);
}
.cal-badge-status.cal-status-planned { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }
.cal-badge-status.cal-status-drafted { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.cal-badge-status.cal-status-published { background: var(--accent-light); color: var(--accent-hover); border-color: var(--accent); }
.cal-card-notes, .perf-card-url { font-size: 11px; color: var(--text-secondary); margin-top: 5px; }
.cal-card-right, .perf-card-right { display: flex; gap: 4px; align-items: flex-start; flex-shrink: 0; }

/* Performance Notes */
.perf-card-url a { color: var(--accent); text-decoration: none; word-break: break-all; }
.perf-metrics { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.perf-metric {
  font-size: 11px; padding: 2px 7px; border-radius: 10px;
  background: var(--accent-light); color: var(--accent-hover); border: 1px solid var(--accent);
}
.perf-card-note { font-size: 11px; color: var(--text-secondary); margin-top: 5px; }
.perf-note-key { font-weight: 700; color: var(--text-muted); margin-right: 4px; }
.perf-clamp2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.perf-metric-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px;
}

/* Campaign Detail — execution summary */
.cl-exec-summary {
  margin: 8px 0; padding: 8px 10px; background: var(--workspace-bg);
  border: 1px solid var(--card-border); border-radius: 6px;
}
.cl-exec-summary-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 5px;
}
.cl-exec-summary-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-exec-summary-stats span {
  font-size: 11px; padding: 2px 7px; border-radius: 10px;
  background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-secondary);
}
.cl-asset-exec-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.cl-asset-exec-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 11px; color: var(--text-secondary);
  padding: 4px 6px; background: var(--workspace-bg); border-radius: 4px;
}
.cl-asset-perf { color: var(--accent-hover); }
.cl-asset-followup { color: var(--warning); }
.cl-detail-dates { color: var(--text-muted); }

/* ─── Active Campaign Card (Campaign Brief) ──────────────────────── */
#active-campaign-card:empty { display: none; }
.ac-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 10px 12px;
  border: 1px dashed var(--card-border);
  border-radius: 6px;
  margin-top: 10px;
}
.ac-card {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--card-bg);
}
.ac-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.ac-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.ac-actions { display: flex; gap: 6px; }
.ac-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.ac-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 8px;
}
.ac-meta-item { font-size: 12px; color: var(--text-secondary); }
.ac-meta-key {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-right: 5px;
}
.ac-nba {
  font-size: 12px;
  color: var(--text-secondary);
  padding-top: 8px;
  border-top: 1px solid var(--card-border);
}
.ac-nba-label { font-weight: 600; color: var(--accent); }

/* ─── Current Campaign block (Product Growth Command) ────────────── */
#pgh-current-campaign:empty { display: none; }
.pgh-campaign-block {
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--workspace-bg);
}
.pgh-campaign-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.pgh-campaign-block-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pgh-campaign-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.pgh-campaign-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  margin-bottom: 6px;
}
.pgh-campaign-meta span {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 1px 7px;
  text-transform: capitalize;
}
.pgh-campaign-block--empty {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pgh-campaign-empty-label { font-size: 12px; color: var(--text-muted); }
.pgh-campaign-empty-actions { display: flex; gap: 6px; }
.pgh-nba {
  font-size: 12px;
  color: var(--text-secondary);
  padding-top: 6px;
  border-top: 1px solid var(--card-border);
  width: 100%;
}
.pgh-nba-label { font-weight: 600; color: var(--accent); }

/* ─── Phase 3.2 — Google SEO Builder ─────────────────────────────────────────── */
.seo-section {
  padding: 10px 0;
  border-bottom: 1px solid var(--card-border);
}
.seo-section:last-child { border-bottom: none; }
.seo-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.seo-keyword-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.seo-keyword-pill {
  font-size: 12px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  background: var(--workspace-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 3px 8px;
  color: var(--text-secondary);
}
.seo-numbered-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.seo-numbered-list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--text-primary);
  padding: 4px 0;
  border-bottom: 1px solid var(--card-border);
}
.seo-numbered-list li:last-child { border-bottom: none; }
.seo-list-num {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  min-width: 18px;
}
.seo-faq-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--card-border);
}
.seo-faq-item:last-child { border-bottom: none; }
.seo-faq-q {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.seo-faq-a {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ─── Phase 3.2 — X Post Builder ──────────────────────────────────────────────── */
.x-post-section {
  padding: 10px 0;
  border-bottom: 1px solid var(--card-border);
}
.x-post-section:last-child { border-bottom: none; }
.x-post-short {
  font-size: 14px;
  white-space: pre-wrap;
}
.x-thread-post {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--card-border);
}
.x-thread-post:last-child { border-bottom: none; }
.x-thread-num {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  min-width: 24px;
}
.x-thread-text {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
  white-space: pre-wrap;
}
.x-thread-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.x-thread-copy {
  flex: 0 0 auto;
}
.x-thread-copy:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ─── Phase 3.2 — Meta Ad Builder ─────────────────────────────────────────────── */
.meta-cta-pill {
  background: #dcfce7;
  color: #15803d;
}

/* ─── Phase 3.3 — Platform SEO cards (YouTube / Instagram / Facebook / X) ──────── */
.seo-platform-section {
  padding: 10px 0;
  border-bottom: 1px solid var(--card-border);
}
.seo-platform-section:last-child { border-bottom: none; }
.seo-platform-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.seo-platform-value {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
  white-space: pre-wrap;
}
.seo-platform-value.mono {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  background: var(--workspace-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 8px 10px;
  color: var(--text-secondary);
}
.seo-platform-value.flagged {
  border-left: 3px solid var(--sidebar-accent);
  padding-left: 8px;
}
.seo-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.seo-tag-pill {
  font-size: 12px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  background: var(--workspace-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 3px 8px;
  color: var(--text-secondary);
}
.seo-copy-row {
  margin-top: 6px;
}
.seo-copy-btn:hover {
  border-color: var(--sidebar-accent);
  color: var(--sidebar-accent);
}
.seo-chapter-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.seo-chapter-list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--text-primary);
  padding: 4px 0;
  border-bottom: 1px solid var(--card-border);
}
.seo-chapter-list li:last-child { border-bottom: none; }
.seo-chapter-time {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: var(--sidebar-accent);
  min-width: 48px;
}

/* ─── Mobile UX fixes: drawer edge toggle + campaign library back ──────────── */
#drawer-toggle-btn {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 48px;
  background: var(--card-bg);
  border: 0.5px solid var(--card-border);
  border-right: none;
  border-radius: 6px 0 0 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-muted);
  z-index: 100;
}
#drawer-toggle-btn:hover {
  color: var(--text-primary);
  background: var(--workspace-bg);
}
/* The drawer only exists at >=1024px, so the toggle is hidden below that. */
@media (max-width: 1023px) {
  #drawer-toggle-btn { display: none; }
}
/* Robust collapse — hide the drawer entirely (the width-based collapse did not
   shrink the flex item reliably). The toggle lives outside the drawer, so it
   stays visible to bring it back. */
#right-drawer.collapsed { display: none; }

/* Campaign Library "← Back" — visible on all screen sizes */
.cl-mobile-back { display: inline-flex; margin-bottom: 10px; }

/* ── Approval Queue (Marketing Agent) ───────────────────────────────────────── */
.aq-card {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 10px; transition: opacity .3s ease;
}
.aq-card-done { opacity: .4; }
.aq-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.aq-product { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.aq-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.aq-badge {
  font-size: 10px; padding: 2px 8px; border-radius: 10px;
  background: var(--workspace-bg); border: 1px solid var(--card-border); color: var(--text-secondary);
}
.aq-badge-platform { font-weight: 600; }
.aq-body {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 120px;
  font-family: inherit; font-size: 13px; line-height: 1.5; color: var(--text-primary);
  background: var(--workspace-bg); border: 1px solid var(--card-border); border-radius: 6px; padding: 10px;
}
.aq-source { margin-top: 8px; font-size: 11px; color: var(--text-secondary); }
.aq-source summary { cursor: pointer; color: var(--text-muted); }
.aq-source-body { margin-top: 4px; word-break: break-word; }
.aq-reject-row { margin-top: 8px; }
.aq-reject-reason {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 12px; padding: 6px 8px;
  border: 1px solid var(--card-border); border-radius: 6px; background: var(--workspace-bg); color: var(--text-primary);
}
.aq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.aq-status { font-size: 11px; color: var(--text-muted); }

/* ── Approval Queue — Phase 2 (grouped by product, 4 platforms) ─────────────── */
.aq-product-heading {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--card-border);
}
.aq-product-heading .aq-count {
  margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: var(--workspace-bg); border: 1px solid var(--card-border); border-radius: 10px; padding: 1px 8px;
}
.aq-badge-draft { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.aq-badge-linkedin { background: #e7f0fb; color: #0a66c2; border-color: #bcd9f5; }
.aq-badge-x        { background: #e8eaed; color: #0f1419; border-color: #cfd9de; }
.aq-badge-reddit   { background: #ffede4; color: #d93a00; border-color: #ffd3bd; }
.aq-badge-ih       { background: #e6f7f3; color: #0b7a63; border-color: #bfe9df; }
.aq-badge-whatsapp { background: #e7f9ee; color: #0a6e3a; border-color: #bfe9cf; }

/* ── Approval Queue summary bar + sidebar count badge ───────────────────────── */
.aq-summary {
  font-size: 12px; color: var(--text-secondary);
  background: var(--workspace-bg); border: 1px solid var(--card-border);
  border-radius: 8px; padding: 8px 12px; margin-bottom: 12px;
}
.aq-summary strong { color: var(--text-primary); font-weight: 700; }
.aq-summary:empty { display: none; }
/* Scoped above `.sidebar-item span { display:none }` (specificity) so the badge
   shows in both the collapsed and expanded sidebar states. */
.sidebar-item .aq-nav-badge,
.mobile-drawer-item .aq-nav-badge {
  display: inline-block;
  margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px;
  box-sizing: border-box; line-height: 18px; text-align: center;
  font-size: 11px; font-weight: 700; border-radius: 9px;
  background: var(--accent); color: #fff; flex-shrink: 0;
}
.sidebar-item .aq-nav-badge.aq-hidden,
.mobile-drawer-item .aq-nav-badge.aq-hidden { display: none; }

/* ─── Recommendation engine panel ─────────────────────────────────────────── */
#ai-recommendation-panel .rec-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rec-panel-loading { color: var(--text-muted); font-size: 13px; padding: 8px 0; }
.rec-panel-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 768px) { .rec-panel-grid { grid-template-columns: repeat(3, 1fr); } }
.rec-card { border: 1px solid var(--card-border); border-radius: 8px; padding: 12px; background: #f8f9fb; display: flex; flex-direction: column; gap: 8px; }
.rec-card-top { display: flex; align-items: center; gap: 8px; }
.rec-card-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.rec-card-product { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.rec-card-platform { margin-left: auto; font-size: 11px; padding: 2px 8px; border-radius: 4px; background: #e0e7ff; color: #3730a3; }
.rec-card-score { font-size: 11px; color: var(--text-muted); border: 1px solid var(--card-border); border-radius: 4px; padding: 1px 6px; }
.rec-card-angle { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.rec-card-reason { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.rec-card-hook { font-size: 12px; color: var(--text-secondary); background: #fff; border: 1px solid var(--card-border); border-radius: 6px; padding: 8px; }
.rec-card-key { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; }
.rec-card-actions { display: flex; gap: 8px; margin-top: auto; }
.rec-card-actions .btn { flex: 1; }
.rec-card-state-badge { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; border: 1px solid; white-space: nowrap; }
.rec-state-research   { background: #f0f4ff; color: #4f46e5; border-color: #c7d2fe; }
.rec-state-drafting   { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.rec-state-pending    { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.rec-state-publishing { background: #fdf4ff; color: #7e22ce; border-color: #e9d5ff; }
.rec-state-learning   { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.rec-state-optimising { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.rec-card-blocked-state { border-color: #fed7aa; background: #fffaf5; }
.rec-card-blocked { font-size: 11px; color: #c2410c; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 5px; padding: 6px 8px; }

/* ─── Product state bar ────────────────────────────────────────────────────── */
.product-state-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--card-bg, #f8f9fb); border: 1px solid var(--card-border); border-radius: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.product-state-bar.hidden { display: none; }
.psb-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.psb-pills { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.psb-pill { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-primary); padding: 3px 10px; border-radius: 20px; background: var(--surface, #fff); border: 1px solid var(--card-border); cursor: default; white-space: nowrap; }
.psb-pill-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.psb-pill-state { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; }
.psb-pill[data-state="pending"]    { border-color: #fed7aa; background: #fff7ed; }
.psb-pill[data-state="publishing"] { border-color: #e9d5ff; background: #fdf4ff; }
.psb-pill[data-state="learning"]   { border-color: #bbf7d0; background: #f0fdf4; }
.psb-detail-btn { margin-left: auto; white-space: nowrap; }

/* ─── Product state detail panel ───────────────────────────────────────────── */
.product-state-panel { background: var(--card-bg, #f8f9fb); border: 1px solid var(--card-border); border-radius: 10px; padding: 16px; margin-bottom: 12px; }
.product-state-panel.hidden { display: none; }
.psp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.psp-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; padding: 2px 6px; border-radius: 4px; }
.psp-close:hover { background: var(--surface-hover, #eef0f3); }
.psp-content { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .psp-content { grid-template-columns: repeat(3, 1fr); } }
.psp-product-card { border: 1px solid var(--card-border); border-radius: 8px; padding: 12px; background: var(--surface, #fff); }
.psp-product-name { font-weight: 600; font-size: 13px; color: var(--text-primary); margin-bottom: 6px; }
.psp-state-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.psp-state-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.psp-state-label { font-size: 12px; font-weight: 500; color: var(--text-primary); }
.psp-blocked-note { font-size: 11px; color: #c2410c; margin-bottom: 8px; }
.psp-history { display: flex; flex-direction: column; gap: 4px; }
.psp-event { font-size: 11px; color: var(--text-secondary); display: flex; gap: 6px; }
.psp-event-time { color: var(--text-muted); white-space: nowrap; }
.psp-event-label { color: var(--text-primary); font-weight: 500; }

/* Structured performance note fields */
.perf-structured-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
@media (min-width: 480px) { .perf-structured-grid { grid-template-columns: repeat(3, 1fr); } }

/* What is working drawer section */
.ww-line { font-size: 12px; color: var(--text-primary); font-weight: 500; }
.ww-updated { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.drawer-empty { font-size: 11px; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════════
   Growth Studio Command Centre
   ═══════════════════════════════════════════════════════════════════ */

/* ── Command Centre wrapper ─────────────────────────────────────── */
#gs-command-centre {
  padding: 0;
}

/* ── Hero ───────────────────────────────────────────────────────── */
.gs-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 24px 20px;
  border-bottom: 1px solid var(--card-border);
  background: var(--card-bg);
  margin-bottom: 0;
}
.gs-hero-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.gs-hero-subtitle {
  font-size: 13px;
  color: var(--text-muted);
}
.gs-hero-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  align-items: center;
}
.gs-hero-actions .aq-nav-badge {
  margin-left: 4px;
}
@media (max-width: 640px) {
  .gs-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 16px 16px;
  }
  .gs-hero-actions {
    flex-wrap: wrap;
  }
}

/* ── Agent row ──────────────────────────────────────────────────── */
.gs-agent-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--card-border);
  background: var(--card-bg);
}
@media (max-width: 1200px) {
  .gs-agent-row {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 720px) {
  .gs-agent-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .gs-agent-row {
    grid-template-columns: 1fr;
  }
}

/* ── Agent card ─────────────────────────────────────────────────── */
.gs-agent-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 14px 14px;
  border-right: 1px solid var(--card-border);
  cursor: default;
  transition: background 0.12s;
  position: relative;
}
.gs-agent-card:last-child {
  border-right: none;
}
.gs-agent-card:hover {
  background: #fafbfc;
}
.gs-agent-card-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}
.gs-agent-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.gs-agent-icon--sage  { background: #dbeafe; color: #2563eb; }
.gs-agent-icon--leo   { background: #dcfce7; color: #16a34a; }
.gs-agent-icon--keno  { background: #ede9fe; color: #7c3aed; }
.gs-agent-icon--emma  { background: #cffafe; color: #0891b2; }
.gs-agent-icon--maro  { background: #fce7f3; color: #db2777; }
.gs-agent-icon--finn  { background: #fef3c7; color: #d97706; }
.gs-agent-icon--pete  { background: #dcfce7; color: #16a34a; }
.gs-agent-meta {
  flex: 1;
  min-width: 0;
}
.gs-agent-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}
.gs-agent-role {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.gs-agent-status {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 8px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  align-self: flex-start;
  margin-left: auto;
}
.gs-agent-status--active   { background: #dcfce7; color: #15803d; }
.gs-agent-status--demand   { background: var(--workspace-bg); color: var(--text-muted); border: 1px solid var(--card-border); }
.gs-agent-status--learning { background: #fef3c7; color: #92400e; }
.gs-agent-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  flex: 1;
}
.gs-agent-last {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
}
.gs-agent-open-btn {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 1px solid var(--accent);
  border-radius: 5px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  align-self: flex-start;
}
.gs-agent-open-btn:hover {
  background: var(--accent);
  color: #fff;
}

/* ── Agent side panel ───────────────────────────────────────────── */
.agent-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 900;
  transition: opacity 0.2s;
}
.agent-panel-overlay.hidden { display: none; }

.agent-side-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 95vw;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  z-index: 901;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.agent-side-panel.hidden { display: none; }
.agent-side-panel--open { transform: translateX(0) !important; }

.agent-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
}
.agent-panel-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.agent-panel-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.agent-panel-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.agent-panel-role {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.agent-panel-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.12s;
}
.agent-panel-close:hover { color: var(--text-primary); }

.agent-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* ── Agent panel sections ───────────────────────────────────────── */
.ap-section {
  padding: 18px 20px;
  border-bottom: 1px solid var(--card-border);
}
.ap-section:last-child { border-bottom: none; }
.ap-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.ap-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.ap-muted { color: var(--text-muted); font-style: italic; }
.ap-action-btn {
  margin-top: 10px;
  display: inline-flex;
}
.ap-pipeline-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.ap-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-secondary);
}
.ap-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--workspace-bg);
  border: 1px solid var(--card-border);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ap-step-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  font-size: 14px;
}
.ap-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.ap-tag {
  font-size: 11px;
  background: var(--workspace-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 2px 8px;
  color: var(--text-secondary);
}
.ap-weight-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.ap-weight-angle {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
  width: 100px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-weight-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--workspace-bg);
  border-radius: 3px;
  overflow: hidden;
}
.ap-weight-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.ap-weight-val {
  font-size: 11px;
  color: var(--text-muted);
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}
.ap-queue-stats {
  display: flex;
  gap: 16px;
  margin-top: 4px;
}
.ap-queue-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: var(--workspace-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 10px 16px;
  flex: 1;
}
.ap-queue-stat-num {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.ap-pending  { color: var(--warning); }
.ap-approved { color: var(--accent); }
.ap-published { color: var(--info); }
.ap-queue-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ── Pete Orchestrator Daily Brief panel ─────────────────────────────────────── */
#pete-brief-panel { margin-bottom: 16px; }
.pete-brief-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pete-brief-date { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pete-brief-body { display: flex; flex-direction: column; gap: 10px; }
.pete-empty { color: var(--text-muted); font-size: 13px; }

.pete-product-row { border: 1px solid var(--card-border); border-radius: 8px; padding: 12px 14px; background: var(--card-bg); box-shadow: var(--card-shadow); }
.pete-product-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.pete-product-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.pete-recommended-action { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.5; }
.pete-block-reason { font-size: 11px; color: var(--text-muted); margin: 4px 0 0; }
.pete-cycle { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-left: auto; }

/* State pill */
.pete-state { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; padding: 2px 8px; border-radius: 99px; }
.pete-state--research   { background: #dbeafe; color: #1d4ed8; }
.pete-state--drafting   { background: #dcfce7; color: #15803d; }
.pete-state--pending    { background: #fef9c3; color: #a16207; }
.pete-state--publishing { background: #ede9fe; color: #6d28d9; }
.pete-state--learning   { background: #ffedd5; color: #c2410c; }
.pete-state--optimising { background: #f0fdf4; color: #166534; }
.pete-state--unknown    { background: #f1f5f9; color: var(--text-muted); }

/* Transition result badge */
.pete-badge { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 99px; }
.pete-badge--advanced { background: #dcfce7; color: #15803d; }
.pete-badge--blocked  { background: #fee2e2; color: #b91c1c; }

/* ── Finn learning summary (What is Working section) ─────────────────────────── */
.ww-finn {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  border-left: 2px solid var(--card-border);
  padding-left: 8px;
}

/* ── State history event row (Phase 3 format: from -> to | by | time) ────────── */
.psp-event { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--card-border); font-size: 12px; }
.psp-event:last-child { border-bottom: none; }
.psp-event-transition { color: var(--text-primary); font-weight: 500; flex: 1; min-width: 0; }
.psp-event-meta { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; }
.psp-event-by { color: var(--text-muted); font-size: 11px; }
.psp-event-time { color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ── Phase 4: Professional Enterprise Layout ──────────────────────────────────── */

/* Zone 2: Hero bar — no agent row, just the hero strip */
#gs-command-centre { padding-bottom: 0; }

/* Zone 4: Two-column dashboard grid */
.gs-dashboard-grid {
  display: grid;
  grid-template-columns: 65% 35%;
  gap: 24px;
  margin-top: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .gs-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* Section labels: JetBrains Mono style via system mono fallback */
.gs-section-label {
  font-family: 'JetBrains Mono', 'Fira Mono', 'Cascadia Code', 'Consolas', monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #5a7a9a;
  margin-bottom: 8px;
  margin-top: 20px;
}

.gs-left-col .gs-section-label:first-child,
.gs-right-col .gs-section-label:first-child {
  margin-top: 0;
}

/* Agent row inside left column: 4-column grid on desktop, 2-column on tablet */
.gs-left-col .gs-agent-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 0;
}

@media (max-width: 1200px) {
  .gs-left-col .gs-agent-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .gs-left-col .gs-agent-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* What is Working card in left column */
.gs-what-working-card {
  padding: 14px 16px;
}

.gs-what-working-card .card-title {
  margin-bottom: 10px;
}

/* Right column context card */
.gs-context-card {
  padding: 0;
  overflow: hidden;
}

.gs-context-subsection {
  padding: 12px 16px;
  border-bottom: 1px solid var(--card-border);
}

.gs-context-subsection:last-child {
  border-bottom: none;
}

.gs-context-subsection-title {
  font-family: 'JetBrains Mono', 'Fira Mono', 'Cascadia Code', 'Consolas', monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5a7a9a;
  margin-bottom: 6px;
}

/* Zone 5: Full-width tools below the dashboard */
.gs-zone5 {
  margin-top: 32px;
  border-top: 1px solid var(--card-border);
  padding-top: 24px;
}

/* Ensure #app-layout and workspace don't constrain the grid */
#workspace {
  overflow-y: auto;
  padding-bottom: 48px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Phase 4 Dark Theme — Enterprise Visual System
   All overrides scoped to Growth Studio surfaces only.
   No JS, no IDs, no structure changes.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Global workspace surface ──────────────────────────────────────────────── */
#workspace {
  background: #071422;
}

/* Hero bar dark surface */
#gs-command-centre {
  background: #071422;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 20px 0 18px;
  margin: 0;
}

.gs-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: #071422 !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

.gs-hero-title {
  font-size: 22px;
  font-weight: 700;
  color: #d6e4f7;
  letter-spacing: -0.02em;
  margin-bottom: 3px;
}

.gs-hero-subtitle {
  font-size: 13px;
  color: #8ba3c0;
  font-weight: 400;
}

.gs-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Primary button: green glow on dark */
#gs-run-brief-btn {
  background: #3fe56c;
  color: #071422;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 0 16px rgba(63,229,108,0.35);
  border: none;
}
#gs-run-brief-btn:hover:not(:disabled) {
  background: #5aec81;
  box-shadow: 0 0 22px rgba(63,229,108,0.5);
}

/* Review approvals: dark ghost */
.gs-hero-actions .btn-secondary {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: #8ba3c0;
}
.gs-hero-actions .btn-secondary:hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
  color: #d6e4f7;
}

/* ── Pipeline strip ─────────────────────────────────────────────────────────── */
.product-state-bar {
  background: #0d1b2a;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.psb-label {
  font-family: 'JetBrains Mono', 'Fira Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #5a7a9a;
  flex-shrink: 0;
}

.psb-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.psb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  font-weight: 500;
  color: #d6e4f7;
}

.psb-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.psb-pill-name {
  color: #8ba3c0;
  font-size: 11px;
}

.psb-pill-state {
  color: #d6e4f7;
  font-size: 11px;
  font-weight: 600;
}

/* State-specific pill colours */
.psb-pill[data-state="research"]   { border-color: rgba(59,130,246,0.4); }
.psb-pill[data-state="drafting"]   { border-color: rgba(245,158,11,0.4); }
.psb-pill[data-state="pending"]    { border-color: rgba(249,115,22,0.4); }
.psb-pill[data-state="publishing"] { border-color: rgba(34,197,94,0.4); }
.psb-pill[data-state="learning"]   { border-color: rgba(168,85,247,0.4); }
.psb-pill[data-state="optimising"] { border-color: rgba(20,184,166,0.4); }

#psb-detail-btn {
  color: #3fe56c;
  font-size: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
#psb-detail-btn:hover { color: #5aec81; }

/* Pipeline detail panel */
.product-state-panel {
  background: #0d1b2a;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  margin-top: 8px;
  overflow: hidden;
}

.psp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.psp-head .card-title {
  color: #5a7a9a;
  margin-bottom: 0;
}

.psp-close {
  background: none;
  border: none;
  color: #5a7a9a;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
}
.psp-close:hover { color: #d6e4f7; }

.psp-content {
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.psp-product-card {
  background: #14202f;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 12px 14px;
  min-width: 180px;
  flex: 1;
}

.psp-product-name {
  font-size: 13px;
  font-weight: 600;
  color: #d6e4f7;
  margin-bottom: 6px;
}

.psp-state-label {
  font-size: 11px;
  font-weight: 600;
  color: #8ba3c0;
}

.psp-blocked-note {
  font-size: 11px;
  color: #f59e0b;
  margin-top: 4px;
}

.psp-history {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.psp-event {
  border-bottom-color: rgba(255,255,255,0.05);
}

.psp-event-transition {
  color: #d6e4f7;
}

.psp-event-by, .psp-event-time {
  color: #5a7a9a;
}

/* ── All workspace cards in the dashboard: dark surface ────────────────────── */
#copy-studio-panel .workspace-card {
  background: #14202f;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

/* Card title on dark */
#copy-studio-panel .card-title,
#copy-studio-panel .card-subtitle {
  color: #5a7a9a;
}

#copy-studio-panel .card-title {
  font-family: 'JetBrains Mono', 'Fira Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
}

/* ── Pete's Daily Brief ─────────────────────────────────────────────────────── */
#pete-brief-panel {
  background: #0d1b2a !important;
}

.pete-brief-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.pete-brief-date {
  font-family: 'JetBrains Mono', 'Fira Mono', monospace;
  font-size: 10px;
  color: #5a7a9a;
}

.pete-brief-body {
  color: #8ba3c0;
  font-size: 13px;
  line-height: 1.6;
}

/* Pete product cards (rendered by JS) */
.pete-product-card {
  background: #14202f;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.pete-product-name {
  font-size: 15px;
  font-weight: 600;
  color: #d6e4f7;
  margin-bottom: 6px;
}

.pete-product-action {
  font-size: 13px;
  color: #8ba3c0;
  margin-top: 6px;
  line-height: 1.5;
}

.pete-product-blocked {
  color: #f59e0b;
}

.pete-cycle-count {
  font-family: 'JetBrains Mono', 'Fira Mono', monospace;
  font-size: 11px;
  color: #3fe56c;
  opacity: 0.7;
  margin-top: 4px;
}

/* State badges in Pete's brief — override light colours */
.pete-state--research   { background: rgba(59,130,246,0.15);  color: #60a5fa; }
.pete-state--drafting   { background: rgba(245,158,11,0.15);  color: #fbbf24; }
.pete-state--pending    { background: rgba(249,115,22,0.15);  color: #fb923c; }
.pete-state--publishing { background: rgba(34,197,94,0.15);   color: #4ade80; }
.pete-state--learning   { background: rgba(168,85,247,0.15);  color: #c084fc; }
.pete-state--optimising { background: rgba(20,184,166,0.15);  color: #2dd4bf; }
.pete-state--unknown    { background: rgba(255,255,255,0.06); color: #5a7a9a; }

/* Pete transition badges */
.pete-badge--advanced { background: rgba(34,197,94,0.15);  color: #4ade80; }
.pete-badge--blocked  { background: rgba(239,68,68,0.15);  color: #f87171; }

/* ── What to Generate Next (rec panel) ─────────────────────────────────────── */
#ai-recommendation-panel {
  background: #0d1b2a !important;
}

.rec-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

#rec-panel-refresh {
  color: #3fe56c;
  font-size: 12px;
}
#rec-panel-refresh:hover { color: #5aec81; }

#rec-panel-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Rec cards generated by JS — target the known classes */
.rec-card {
  background: #14202f;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rec-card-hook {
  font-size: 14px;
  font-weight: 500;
  color: #d6e4f7;
  line-height: 1.5;
}

.rec-card-meta {
  font-size: 11px;
  color: #5a7a9a;
}

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

.rec-generate-btn {
  background: #3fe56c;
  color: #071422;
  font-weight: 700;
  font-size: 12px;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0,200,83,0.3);
}
.rec-generate-btn:hover { background: #5aec81; }

.rec-skip-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: #5a7a9a;
  font-size: 12px;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}
.rec-skip-btn:hover { border-color: rgba(255,255,255,0.25); color: #8ba3c0; }

/* ── What is Working ────────────────────────────────────────────────────────── */
.gs-what-working-card {
  background: #0d1b2a !important;
}

#drawer-what-working {
  color: #8ba3c0;
  font-size: 13px;
}

.ww-line {
  font-family: 'JetBrains Mono', 'Fira Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: #d6e4f7;
  margin-bottom: 6px;
}

.ww-updated {
  font-size: 11px;
  color: #5a7a9a;
  margin-bottom: 6px;
}

.ww-finn {
  font-size: 12px;
  color: #8ba3c0;
  font-style: italic;
  line-height: 1.55;
  border-left: 2px solid rgba(0,200,83,0.3);
  padding-left: 10px;
  margin-top: 8px;
}

/* Dark empty state */
#drawer-what-working .drawer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 0;
  color: #5a7a9a;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

/* ── Agent cards (Your Team) ────────────────────────────────────────────────── */
.gs-agent-card {
  background: #14202f;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.gs-agent-card:hover {
  background: #1a2d42 !important;
  border-color: rgba(63,229,108,0.4) !important;
  box-shadow: 0 0 18px rgba(63,229,108,0.1) !important;
}

.gs-agent-card:focus,
.gs-agent-card.active {
  background: #1a2d42 !important;
  border-color: rgba(63,229,108,0.4) !important;
  outline: none;
}

.gs-agent-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.gs-agent-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: rgba(63,229,108,0.1);
  border: 1px solid rgba(63,229,108,0.25);
  color: #3fe56c;
}

.gs-agent-meta {
  flex: 1;
  min-width: 0;
}

.gs-agent-name {
  font-size: 14px;
  font-weight: 700;
  color: #d6e4f7;
  line-height: 1.2;
}

.gs-agent-role {
  font-family: 'JetBrains Mono', 'Fira Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5a7a9a;
  margin-top: 2px;
}

.gs-agent-desc {
  font-size: 12px;
  color: #8ba3c0;
  line-height: 1.45;
}

.gs-agent-last {
  font-size: 11px;
  color: #5a7a9a;
  font-style: italic;
}

/* Agent status badges */
.gs-agent-status {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 20px;
  flex-shrink: 0;
  text-transform: uppercase;
}

.gs-agent-status--active  { background: rgba(34,197,94,0.15);  color: #4ade80; }
.gs-agent-status--demand  { background: rgba(99,102,241,0.15); color: #818cf8; }
.gs-agent-status--learning { background: rgba(168,85,247,0.15); color: #c084fc; }

/* Open button: ghost green */
.gs-agent-open-btn {
  background: transparent;
  border: 1px solid rgba(63,229,108,0.3);
  color: #3fe56c;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  margin-top: auto;
}

.gs-agent-open-btn:hover {
  border-color: #3fe56c;
  background: rgba(0,200,83,0.08);
  box-shadow: 0 0 10px rgba(0,200,83,0.2);
}

/* ── Right column: Growth Context ───────────────────────────────────────────── */
.gs-context-card {
  background: #14202f;
  border: 1px solid rgba(255,255,255,0.06);
}

.gs-context-subsection {
  border-bottom-color: rgba(255,255,255,0.05);
}

.gs-context-subsection-title {
  color: #5a7a9a;
}

/* All drawer content rendered into the right column */
.gs-context-subsection .drawer-item {
  color: #8ba3c0;
  font-size: 12px;
}

.gs-context-subsection .drawer-empty {
  color: #5a7a9a;
  font-size: 12px;
  padding: 6px 0;
}

/* Recommended Next Actions on dark */
#recommended-actions-card {
  background: #14202f !important;
}

.action-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.action-item:hover {
  background: rgba(255,255,255,0.06);
}
.action-title { color: #d6e4f7; }
.action-desc  { color: #8ba3c0; }

/* ── Zone 5: Tools ──────────────────────────────────────────────────────────── */
.gs-zone5 {
  border-top-color: rgba(255,255,255,0.06);
  background: #060f1a;
  margin-left: -20px;
  margin-right: -20px;
  padding: 24px 20px 32px;
}

/* Zone 5 section label */
.gs-zone5 > .gs-section-label:first-child {
  margin-top: 0;
}

/* Cards in zone 5: slightly reduced visual weight */
.gs-zone5 .workspace-card {
  background: #0d1b2a !important;
  border-color: rgba(255,255,255,0.05);
  box-shadow: none;
}

/* Zone 5 labels and text */
.gs-zone5 .card-title     { color: #4a6a8a; }
.gs-zone5 .card-subtitle  { color: #3a5570; }

/* Campaign command header in zone 5 */
#product-growth-header {
  background: #0d1b2a !important;
}

.pgh-title {
  font-size: 18px;
  font-weight: 700;
  color: #d6e4f7;
}

.pgh-subtitle {
  font-size: 12px;
  color: #5a7a9a;
  margin-top: 3px;
}

/* Form inputs in zone 5: dark fields */
.gs-zone5 .gen-setting label,
.gs-zone5 .utm-field label,
.gs-zone5 .field-group label,
.gs-zone5 .campaign-brief-heading {
  color: #5a7a9a;
}

.gs-zone5 .gen-setting select,
.gs-zone5 .utm-field input,
.gs-zone5 .utm-field select,
.gs-zone5 .campaign-brief-fields input,
.gs-zone5 .campaign-brief-fields select {
  background: #071422;
  border-color: rgba(255,255,255,0.1);
  color: #d6e4f7;
}

.gs-zone5 .gen-setting select:focus,
.gs-zone5 .utm-field input:focus,
.gs-zone5 .campaign-brief-fields input:focus {
  border-color: rgba(0,200,83,0.5);
  outline: none;
}

/* Channel page header in zone 5 */
.channel-page-title   { color: #d6e4f7; }
.channel-page-subtitle { color: #5a7a9a; }

/* Combo matrix on dark */
.gs-zone5 #combo-matrix th {
  background: rgba(255,255,255,0.04);
  color: #8ba3c0;
  border-color: rgba(255,255,255,0.08);
}
.gs-zone5 #combo-matrix td {
  background: transparent;
  border-color: rgba(255,255,255,0.06);
  color: #d6e4f7;
}

/* Angle checkboxes on dark */
.gs-zone5 .angle-checkbox-item {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
  color: #d6e4f7;
}

/* Configure footer border */
.gs-zone5 .configure-footer {
  border-top-color: rgba(255,255,255,0.06);
}

/* Empty output state: dark */
.empty-output-state {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.06);
}
.empty-output-state .ti { color: #5a7a9a; }
.empty-output-heading   { color: #8ba3c0; }
.empty-output-subtext   { color: #5a7a9a; }
.empty-output-meta      { color: #3a5570; }

/* Progress and results cards */
.gs-zone5 .combo-progress-item {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
  color: #8ba3c0;
}

.gs-zone5 .generate-done-bar {
  border-top-color: rgba(255,255,255,0.06);
}

/* Results card */
#results-card {
  background: #0d1b2a !important;
}

.gs-zone5 .result-card {
  background: #14202f;
  border-color: rgba(255,255,255,0.06);
}

.gs-zone5 .result-card-header {
  background: rgba(255,255,255,0.03);
  border-bottom-color: rgba(255,255,255,0.06);
}

.gs-zone5 .result-combo-label { color: #8ba3c0; }
.gs-zone5 .result-card-body   { color: #d6e4f7; }

.gs-zone5 .result-field {
  background: #071422;
  border-color: rgba(255,255,255,0.08);
  color: #d6e4f7;
}

.gs-zone5 .post-body-text {
  background: #071422;
  border-color: rgba(255,255,255,0.08);
  color: #d6e4f7;
}

.gs-zone5 .result-section-title { color: #5a7a9a; }
.gs-zone5 .result-field-label   { color: #5a7a9a; }

/* Google Ads pack: dark surface in zone 5 */
.gs-zone5 #gads-pack-configure-bar {
  background: rgba(0,200,83,0.05);
  border-color: rgba(0,200,83,0.15);
}
.gs-zone5 .gads-pack-title  { color: #3fe56c; }
.gs-zone5 .gads-pack-desc   { color: #5a7a9a; }
.gs-zone5 .gads-pack-expand-btn {
  background: transparent;
  border-color: rgba(0,200,83,0.25);
  color: #3fe56c;
}
.gs-zone5 .gads-setting label { color: #5a7a9a; }
.gs-zone5 .gads-setting select {
  background: #071422;
  border-color: rgba(255,255,255,0.1);
  color: #d6e4f7;
}
.gs-zone5 .gads-pack-warning {
  background: rgba(245,158,11,0.08);
  border-color: rgba(245,158,11,0.2);
  color: #fbbf24;
}

/* ── Link buttons on dark ───────────────────────────────────────────────────── */
#copy-studio-panel .link-btn {
  color: #3fe56c;
}
#copy-studio-panel .link-btn:hover {
  color: #5aec81;
}

/* ── Scrollbar on dark workspace ────────────────────────────────────────────── */
#workspace::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }
#workspace::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* ── Proof selector on dark ────────────────────────────────────────────────── */
.gs-zone5 .proof-selector-label {
  color: #5a7a9a;
  font-size: 10px;
}

.gs-zone5 .proof-selector-area {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}

/* ── Generate button in zone 5 ──────────────────────────────────────────────── */
.gs-zone5 #generate-btn.btn-primary {
  background: #3fe56c;
  color: #071422;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(0,200,83,0.3);
}
.gs-zone5 #generate-btn.btn-primary:hover:not(:disabled) {
  background: #5aec81;
}

/* ── Generate guardrail text ────────────────────────────────────────────────── */
.gs-zone5 .generate-guardrail {
  color: #5a7a9a;
  font-size: 12px;
}

/* ── Campaign brief fields ──────────────────────────────────────────────────── */
.gs-zone5 .campaign-brief-heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── AI context row in product header ───────────────────────────────────────── */
.ai-context-label { color: #5a7a9a; font-size: 11px; }

/* ── Empty states on dark throughout copy-studio-panel ─────────────────────── */
#copy-studio-panel .empty-state {
  color: #5a7a9a;
}
#copy-studio-panel .empty-state strong,
#copy-studio-panel .empty-state b {
  color: #8ba3c0;
}

/* ── Agent row container: transparent (cards handle their own bg) ───────────── */
.gs-left-col .gs-agent-row {
  background: transparent !important;
}

/* ── Pete brief product rows (class from peteBriefPanel.ts) ────────────────── */
.pete-product-row {
  background: #14202f;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.pete-product-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.pete-product-name {
  font-size: 14px;
  font-weight: 600;
  color: #d6e4f7 !important;
}

.pete-recommended-action {
  font-size: 13px;
  color: #8ba3c0;
  line-height: 1.5;
  margin: 0;
}

.pete-block-reason {
  font-size: 12px;
  color: #f59e0b;
  margin: 4px 0 0;
}

.pete-cycle {
  font-family: 'JetBrains Mono', 'Fira Mono', monospace;
  font-size: 10px;
  color: #3fe56c;
  opacity: 0.7;
  margin-left: auto;
}

.pete-empty {
  color: #5a7a9a;
  font-size: 13px;
}

/* ── Rec action cards (class from workspace.ts) ─────────────────────────────── */
.rec-action-card {
  background: #14202f !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rec-action-card--primary {
  border-color: rgba(63,229,108,0.2) !important;
}

.rec-action-sequence {
  font-family: 'JetBrains Mono', 'Fira Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5a7a9a;
}

.rec-action-channel {
  font-size: 14px;
  font-weight: 600;
  color: #d6e4f7;
}

.rec-action-bestfor,
.rec-action-reason {
  font-size: 12px;
  color: #8ba3c0;
}

.rec-bestfor-label {
  color: #5a7a9a;
  font-size: 11px;
}

.rec-action-btn {
  background: transparent;
  border: 1px solid rgba(63,229,108,0.3);
  color: #3fe56c;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  margin-top: 4px;
  align-self: flex-start;
  transition: border-color 0.15s, background 0.15s;
}

.rec-action-btn:hover {
  border-color: #3fe56c;
  background: rgba(63,229,108,0.08);
}

/* ── Execution stats in product header ──────────────────────────────────────── */
.exec-stat {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 6px;
}

.exec-stat-val {
  color: #d6e4f7 !important;
}

.exec-stat-label {
  color: #5a7a9a !important;
}

.exec-stat--lead .exec-stat-val {
  color: #3fe56c !important;
}

/* ── AI context badges (missing state) ──────────────────────────────────────── */
.ai-badge {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #5a7a9a !important;
}

.ai-badge--present {
  background: rgba(63,229,108,0.1) !important;
  border-color: rgba(63,229,108,0.2) !important;
  color: #3fe56c !important;
}

/* ── Campaign block in product header ───────────────────────────────────────── */
.pgh-campaign-block,
.pgh-campaign-block--empty {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: #8ba3c0 !important;
}

/* Secondary buttons inside dark panels */
#product-growth-header .btn-secondary,
#copy-studio-panel .pgh-campaign-block .btn-secondary {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #8ba3c0 !important;
}
#product-growth-header .btn-secondary:hover,
#copy-studio-panel .pgh-campaign-block .btn-secondary:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #d6e4f7 !important;
}

/* ── All inputs/selects inside the dark panel ───────────────────────────────── */
#copy-studio-panel input,
#copy-studio-panel select,
#copy-studio-panel textarea {
  background: #071422 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #d6e4f7 !important;
}

#copy-studio-panel input:focus,
#copy-studio-panel select:focus,
#copy-studio-panel textarea:focus {
  border-color: rgba(63,229,108,0.5) !important;
  outline: none;
}

#copy-studio-panel input::placeholder,
#copy-studio-panel textarea::placeholder {
  color: #3a5570 !important;
}

/* ── Proof selector pills ────────────────────────────────────────────────────── */
.proof-sel-pill {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #8ba3c0 !important;
}

.proof-sel-pill.selected,
.proof-sel-pill:hover {
  background: rgba(63,229,108,0.1) !important;
  border-color: rgba(63,229,108,0.3) !important;
  color: #3fe56c !important;
}

/* ── General .btn-secondary in copy-studio dark context ────────────────────── */
#copy-studio-panel .btn-secondary {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #8ba3c0 !important;
}
#copy-studio-panel .btn-secondary:hover:not(:disabled) {
  background: rgba(255,255,255,0.1) !important;
  color: #d6e4f7 !important;
}

/* ── Rec card (from recommendationPanel.ts) full dark treatment ─────────────── */
.rec-card {
  background: #14202f !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 8px;
}

.rec-card-blocked-state {
  border-color: rgba(245,158,11,0.25) !important;
}

.rec-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.rec-card-product { font-size: 13px; font-weight: 600; color: #d6e4f7; }
.rec-card-platform { font-size: 11px; color: #5a7a9a; }
.rec-card-angle   { font-size: 14px; font-weight: 600; color: #d6e4f7; margin-bottom: 4px; }
.rec-card-reason  { font-size: 12px; color: #8ba3c0; margin-bottom: 8px; line-height: 1.5; }
.rec-card-score   { font-size: 10px; color: #5a7a9a; margin-left: auto; }

.rec-card-blocked {
  font-size: 12px;
  color: #f59e0b;
  margin-bottom: 8px;
}

/* Suggested hook box */
.rec-card-hook {
  background: #0d1b2a !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #d6e4f7;
  line-height: 1.5;
}

.rec-card-key {
  display: block;
  font-family: 'JetBrains Mono', 'Fira Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5a7a9a;
  margin-bottom: 4px;
}

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

/* State badges inside rec cards */
.rec-card-state-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
}
.rec-state-research   { background: rgba(59,130,246,0.15);  color: #60a5fa; }
.rec-state-drafting   { background: rgba(245,158,11,0.15);  color: #fbbf24; }
.rec-state-pending    { background: rgba(249,115,22,0.15);  color: #fb923c; }
.rec-state-publishing { background: rgba(34,197,94,0.15);   color: #4ade80; }
.rec-state-learning   { background: rgba(168,85,247,0.15);  color: #c084fc; }
.rec-state-optimising { background: rgba(20,184,166,0.15);  color: #2dd4bf; }

/* Generate / skip / review buttons inside rec cards */
.rec-card-generate {
  background: #3fe56c !important;
  color: #071422 !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 0 10px rgba(63,229,108,0.3);
}
.rec-card-generate:hover:not(:disabled) {
  background: #5aec81 !important;
}

.rec-card-skip,
.rec-card-review {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #8ba3c0 !important;
}
.rec-card-skip:hover:not(:disabled),
.rec-card-review:hover:not(:disabled) {
  border-color: rgba(255,255,255,0.25) !important;
  color: #d6e4f7 !important;
}

/* ── Zone 5 / pgh pills dark treatment ─────────────────────────────────────── */
.pgh-pill {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #5a7a9a !important;
}

.pgh-pill--active {
  background: rgba(63,229,108,0.1) !important;
  border-color: rgba(63,229,108,0.25) !important;
  color: #3fe56c !important;
}

.pgh-pill--status {
  background: rgba(59,130,246,0.1) !important;
  border-color: rgba(59,130,246,0.2) !important;
  color: #60a5fa !important;
}

.pgh-priority-high {
  background: rgba(239,68,68,0.1) !important;
  border-color: rgba(239,68,68,0.2) !important;
  color: #f87171 !important;
}

.pgh-priority-medium {
  background: rgba(245,158,11,0.1) !important;
  border-color: rgba(245,158,11,0.2) !important;
  color: #fbbf24 !important;
}

.pgh-priority-low {
  background: rgba(100,116,139,0.1) !important;
  border-color: rgba(100,116,139,0.2) !important;
  color: #94a3b8 !important;
}

/* Campaign meta chips */
.pgh-campaign-meta span {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: #8ba3c0 !important;
}

.pgh-campaign-name { color: #d6e4f7 !important; }
.pgh-campaign-empty-label { color: #5a7a9a !important; }
.pgh-campaign-block-label { color: #5a7a9a !important; }
.pgh-nba { border-top-color: rgba(255,255,255,0.06) !important; color: #8ba3c0 !important; }

/* ai-badge --active (TS renders this class, not --present) */
.ai-badge--active {
  background: rgba(63,229,108,0.08) !important;
  border-color: rgba(63,229,108,0.2) !important;
  color: #8ba3c0 !important;
}
.ai-badge--active strong { color: #3fe56c !important; }

/* ai-badge --missing explicit override */
.ai-badge--missing {
  background: rgba(255,255,255,0.02) !important;
  border-color: rgba(255,255,255,0.06) !important;
  opacity: 0.6;
}

.ai-context-row {
  border-top-color: rgba(255,255,255,0.06) !important;
}

/* ── Dark: Campaign Library panel cards ──────────────────────────────────── */
#campaign-library-panel .cl-card {
  background: #14202f !important;
  border-color: rgba(255,255,255,0.06) !important;
}
#campaign-library-panel .cl-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
#campaign-library-panel .cl-card-name { color: #d6e4f7 !important; }
#campaign-library-panel .cl-card-audience,
#campaign-library-panel .cl-card-pain { color: #8ba3c0 !important; }
#campaign-library-panel .cl-detail-panel {
  background: #0d1b2a !important;
  border-color: rgba(255,255,255,0.06) !important;
}
#campaign-library-panel .cl-detail-body { color: #d6e4f7 !important; }
#campaign-library-panel .cl-detail-key { color: #5a7a9a !important; }
#campaign-library-panel .cl-exec-summary {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
#campaign-library-panel .cl-exec-summary-title { color: #5a7a9a !important; }
#campaign-library-panel .cl-badge {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #8ba3c0 !important;
}
#campaign-library-panel .cl-active-badge {
  background: rgba(63,229,108,0.12) !important;
  border-color: rgba(63,229,108,0.25) !important;
  color: #3fe56c !important;
}
#campaign-library-panel .cl-status-helpers { border-top-color: rgba(255,255,255,0.06) !important; }
#campaign-library-panel .cl-filter-select,
#campaign-library-panel select,
#campaign-library-panel input {
  background: #071422 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #d6e4f7 !important;
}
#campaign-library-panel .cl-filters { border-bottom-color: rgba(255,255,255,0.06) !important; }
#campaign-library-panel #campaign-form-card {
  background: #0d1b2a !important;
  border-color: rgba(255,255,255,0.06) !important;
}
#campaign-library-panel .workspace-card { background: #0d1b2a !important; border-color: rgba(255,255,255,0.06) !important; }
#campaign-library-panel .card-title { color: #d6e4f7 !important; }
#campaign-library-panel .empty-state { color: #5a7a9a !important; }

/* ── Dark: Content Calendar panel cards ──────────────────────────────────── */
#content-calendar-panel .cal-card {
  background: #14202f !important;
  border-color: rgba(255,255,255,0.06) !important;
}
#content-calendar-panel .cal-card-title { color: #d6e4f7 !important; }
#content-calendar-panel .cal-card-notes { color: #8ba3c0 !important; }
#content-calendar-panel .cal-badge {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #8ba3c0 !important;
}
#content-calendar-panel select,
#content-calendar-panel input {
  background: #071422 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #d6e4f7 !important;
}
#content-calendar-panel .workspace-card { background: #0d1b2a !important; border-color: rgba(255,255,255,0.06) !important; }
#content-calendar-panel .card-title { color: #d6e4f7 !important; }
#content-calendar-panel .empty-state { color: #5a7a9a !important; }

/* ── Dark: Performance Notes panel cards ─────────────────────────────────── */
#performance-notes-panel .perf-card {
  background: #14202f !important;
  border-color: rgba(255,255,255,0.06) !important;
}
#performance-notes-panel .perf-card-title { color: #d6e4f7 !important; }
#performance-notes-panel .perf-card-notes,
#performance-notes-panel .perf-card-url { color: #8ba3c0 !important; }
#performance-notes-panel .perf-badge {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #8ba3c0 !important;
}
#performance-notes-panel select,
#performance-notes-panel input {
  background: #071422 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #d6e4f7 !important;
}
#performance-notes-panel .workspace-card { background: #0d1b2a !important; border-color: rgba(255,255,255,0.06) !important; }
#performance-notes-panel .card-title { color: #d6e4f7 !important; }
#performance-notes-panel .empty-state { color: #5a7a9a !important; }

/* ── Dark: Approval Queue panel ──────────────────────────────────────────── */
#approval-queue-panel .workspace-card { background: #0d1b2a !important; border-color: rgba(255,255,255,0.06) !important; }
#approval-queue-panel .card-title { color: #d6e4f7 !important; }
#approval-queue-panel .card-subtitle { color: #5a7a9a !important; }
#approval-queue-panel .aq-card {
  background: #14202f !important;
  border-color: rgba(255,255,255,0.06) !important;
}
#approval-queue-panel .aq-product { color: #d6e4f7 !important; }
#approval-queue-panel .aq-badge {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #8ba3c0 !important;
}
/* Override platform badge colours to dark tints */
#approval-queue-panel .aq-badge-linkedin { background: rgba(10,102,194,0.15) !important; color: #60a5fa !important; border-color: rgba(10,102,194,0.25) !important; }
#approval-queue-panel .aq-badge-x       { background: rgba(255,255,255,0.06) !important; color: #d6e4f7 !important; border-color: rgba(255,255,255,0.10) !important; }
#approval-queue-panel .aq-badge-reddit  { background: rgba(217,58,0,0.15) !important; color: #f87171 !important; border-color: rgba(217,58,0,0.25) !important; }
#approval-queue-panel .aq-badge-ih      { background: rgba(11,122,99,0.15) !important; color: #34d399 !important; border-color: rgba(11,122,99,0.25) !important; }
#approval-queue-panel .aq-badge-whatsapp { background: rgba(10,110,58,0.15) !important; color: #4ade80 !important; border-color: rgba(10,110,58,0.25) !important; }
#approval-queue-panel .aq-badge-draft  { background: rgba(245,158,11,0.15) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,0.25) !important; }
#approval-queue-panel .aq-body {
  background: #071422 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #d6e4f7 !important;
}
#approval-queue-panel .aq-reject-reason {
  background: #071422 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #d6e4f7 !important;
}
#approval-queue-panel .aq-source {
  border-top-color: rgba(255,255,255,0.06) !important;
  color: #5a7a9a !important;
}
#approval-queue-panel .aq-source-body { color: #8ba3c0 !important; }
#approval-queue-panel .aq-actions { border-top-color: rgba(255,255,255,0.06) !important; }
/* aq-summary: uses var(--workspace-bg) which is white */
#approval-queue-panel .aq-summary {
  background: #0d1b2a !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: #d6e4f7 !important;
}
#approval-queue-panel .aq-summary strong { color: #d6e4f7 !important; }

/* aq action buttons */
#approval-queue-panel .aq-approve {
  background: #3fe56c !important;
  border-color: #3fe56c !important;
  color: #071422 !important;
  font-weight: 700 !important;
}
#approval-queue-panel .aq-approve:hover:not(:disabled) {
  background: #5aec81 !important;
}

#approval-queue-panel .aq-edit-approve {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #d6e4f7 !important;
}
#approval-queue-panel .aq-edit-approve:hover:not(:disabled) {
  background: rgba(255,255,255,0.06) !important;
}

#approval-queue-panel .aq-reject {
  background: transparent !important;
  border: 1px solid rgba(239,68,68,0.4) !important;
  color: #f87171 !important;
}
#approval-queue-panel .aq-reject:hover:not(:disabled) {
  background: rgba(239,68,68,0.08) !important;
}

/* aq-refresh-btn */
#approval-queue-panel #aq-refresh-btn {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #8ba3c0 !important;
}
#approval-queue-panel .empty-state { color: #5a7a9a !important; }

/* ── Dark: Saved / Content Library panel ─────────────────────────────────── */
#saved-panel .workspace-card { background: #0d1b2a !important; border-color: rgba(255,255,255,0.06) !important; }
#saved-panel .card-title { color: #d6e4f7 !important; }
#saved-panel .empty-state { color: #5a7a9a !important; }

/* ── Dark: UTM Builder panel ─────────────────────────────────────────────── */
#utm-builder-panel .workspace-card { background: #0d1b2a !important; border-color: rgba(255,255,255,0.06) !important; }
#utm-builder-panel .utm-section-title { color: #d6e4f7 !important; }
#utm-builder-panel label { color: #8ba3c0 !important; }
#utm-builder-panel input,
#utm-builder-panel select { background: #071422 !important; border-color: rgba(255,255,255,0.1) !important; color: #d6e4f7 !important; }
#utm-builder-panel .utm-generated-label { color: #5a7a9a !important; }
#utm-builder-panel #utm-generated-url { color: #d6e4f7 !important; }
#utm-builder-panel .utm-divider { border-color: rgba(255,255,255,0.06) !important; }
#utm-builder-panel .saved-links-list { color: #8ba3c0 !important; }
#utm-builder-panel .empty-state { color: #5a7a9a !important; }

/* ── Panel back button (shared style) ────────────────────────────────────── */
.gs-panel-back-btn {
  align-self: flex-start;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 6px;
  color: #8ba3c0 !important;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  padding: 5px 12px;
  margin-bottom: 4px;
  transition: background 0.15s, color 0.15s;
}
.gs-panel-back-btn:hover { background: rgba(255,255,255,0.1) !important; color: #d6e4f7 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Growth Studio v5 — Tabbed Navigation
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tab bar ─────────────────────────────────────────────────────────────── */
#gs-tab-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: #0d1b2a;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.gs-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #8ba3c0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 12px 16px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  margin-bottom: -1px;
}

.gs-tab:hover {
  color: #d6e4f7;
}

.gs-tab--active {
  color: #d6e4f7 !important;
  border-bottom-color: #3fe56c !important;
  font-weight: 600;
}

/* ── Inner panes (Overview / Generate within copy-studio-panel) ──────────── */
.gs-inner-pane {
  display: none;
  flex-direction: column;
  gap: 12px;
}

.gs-inner-pane--active {
  display: flex;
}

/* ── Finn compact card on Overview ──────────────────────────────────────── */
.gs-finn-compact-card {
  background: #0d1b2a !important;
}

.gs-finn-compact-card .ww-line {
  font-size: 13px;
  font-weight: 600;
  color: #d6e4f7;
  margin-bottom: 4px;
}

.gs-finn-compact-card .ww-updated {
  font-size: 11px;
  color: #5a7a9a;
}

.gs-finn-compact-card .ww-finn {
  font-size: 12px;
  color: #8ba3c0;
  margin-top: 6px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Performance tab action buttons ─────────────────────────────────────── */
.gs-perf-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.gs-perf-action-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #0d1b2a;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  color: #d6e4f7;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}

.gs-perf-action-btn:hover {
  background: #14202f;
  border-color: rgba(255,255,255,0.12);
}

.gs-perf-action-btn > .ti:first-child {
  font-size: 20px;
  color: #5a7a9a;
  flex-shrink: 0;
}

.gs-perf-action-title {
  font-size: 13px;
  font-weight: 600;
  color: #d6e4f7;
  margin-bottom: 2px;
}

.gs-perf-action-sub {
  font-size: 11px;
  color: #5a7a9a;
}

.gs-perf-action-arrow {
  margin-left: auto;
  color: #5a7a9a;
  font-size: 14px;
  flex-shrink: 0;
}

/* ── AI Specialists tab — 5-column grid for 10 agents ───────────────────── */
#specialists-tab-panel .gs-agent-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   OVERVIEW TAB ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Pipeline summary bar ─────────────────────────────────────────────────── */
#pipeline-summary-bar {
  padding: 4px 20px;
  min-height: 20px;
  background: #071422;
}
#pipeline-summary-text {
  font-size: 12px;
  color: #8ba3c0;
  font-family: 'Hanken Grotesk', sans-serif;
}
#pipeline-summary-text:empty { display: none; }

/* ── Today's Priority card ───────────────────────────────────────────────── */
.overview-priority-card {
  background: #14202f !important;
  border-left: 3px solid #3fe56c !important;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 8px;
}
.overview-priority-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #3fe56c;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.overview-priority-text {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  color: #d6e4f7;
  line-height: 1.5;
}

/* ── Quick Stats card ────────────────────────────────────────────────────── */
.overview-qs-card {
  background: #0d1b2a !important;
}
.overview-qs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.overview-qs-tile {
  background: #14202f;
  border-radius: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.04);
}
.overview-qs-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 700;
  color: #3fe56c;
  line-height: 1;
  margin-bottom: 4px;
}
.overview-qs-label {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 11px;
  color: #8ba3c0;
  line-height: 1.3;
}

/* ── What Is Working summary ─────────────────────────────────────────────── */
.overview-ww-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 12px;
  line-height: 1.4;
}
.overview-ww-row:last-child { border-bottom: none; }
.overview-ww-product {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: #d6e4f7;
}
.overview-ww-sep {
  color: #3a5068;
  font-size: 11px;
}
.overview-ww-angle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #3fe56c;
}
.overview-ww-score {
  color: #5a7a9a;
}
.overview-ww-signal {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 11px;
  color: #8ba3c0;
  font-style: italic;
}
.overview-ww-no-data {
  font-size: 11px;
  color: #3a5068;
  font-style: italic;
}

/* ── Tab-link buttons (Full context →, Full performance view →) ──────────── */
.overview-tab-link {
  background: none !important;
  border: none !important;
  padding: 8px 0 0 0 !important;
  margin-top: 6px;
  font-size: 12px;
  color: #5a7a9a !important;
  cursor: pointer;
  font-family: 'Hanken Grotesk', sans-serif;
  display: block;
  text-align: left;
  transition: color 0.15s;
}
.overview-tab-link:hover { color: #3fe56c !important; }

/* ── Growth Context compact — hide Growth Status + Execution Summary on Overview ── */
#gs-pane-overview .gs-context-card [data-ctx="growth-status"],
#gs-pane-overview .gs-context-card [data-ctx="execution-summary"] {
  display: none !important;
}

/* light theme overrides for new components */
body[data-theme="light"] .overview-priority-card { background: #f0faf4 !important; border-left-color: #16a34a !important; }
body[data-theme="light"] .overview-priority-label { color: #16a34a; }
body[data-theme="light"] .overview-priority-text { color: #111827; }
body[data-theme="light"] .overview-qs-card { background: #f8fafc !important; }
body[data-theme="light"] .overview-qs-tile { background: #fff; border-color: rgba(0,0,0,0.06); }
body[data-theme="light"] .overview-qs-value { color: #16a34a; }
body[data-theme="light"] .overview-qs-label { color: #4b5563; }
body[data-theme="light"] .overview-ww-product { color: #111827; }
body[data-theme="light"] .overview-ww-angle { color: #16a34a; }
body[data-theme="light"] .overview-ww-signal { color: #4b5563; }
body[data-theme="light"] #pipeline-summary-text { color: #4b5563; }
body[data-theme="light"] #pipeline-summary-bar { background: #f8fafc; }

/* ── Back button dark style ──────────────────────────────────────────────── */
#campaign-library-back-btn,
#content-calendar-back-btn,
#saved-back-btn,
#utm-back-btn {
  background: transparent !important;
  color: #3fe56c !important;
  border: none !important;
  font-size: 13px !important;
  padding: 6px 0 !important;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#campaign-library-back-btn:hover,
#content-calendar-back-btn:hover,
#saved-back-btn:hover,
#utm-back-btn:hover {
  color: #5aec81 !important;
}

/* ── Tools tab grid ─────────────────────────────────────────────────────── */
.gs-tools-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gs-tool-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #0d1b2a;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
}

.gs-tool-card:hover {
  background: #14202f;
  border-color: rgba(255,255,255,0.12);
}

.gs-tool-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(63,229,108,0.08);
  border: 1px solid rgba(63,229,108,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  color: #3fe56c;
}

.gs-tool-text {
  flex: 1;
  min-width: 0;
}

.gs-tool-title {
  font-size: 13px;
  font-weight: 600;
  color: #d6e4f7;
  margin-bottom: 3px;
}

.gs-tool-sub {
  font-size: 11px;
  color: #5a7a9a;
}

.gs-tool-arrow {
  color: #5a7a9a;
  font-size: 16px;
  flex-shrink: 0;
}

/* ── Pipeline strip + tab bar at workspace level (not inside top-panel) ─── */
#product-state-bar,
#product-state-panel,
#gs-tab-bar {
  flex-shrink: 0;
}

/* Responsive: compact tab labels on narrow viewports */
@media (max-width: 600px) {
  .gs-tab { padding: 10px 10px; font-size: 11px; }
  #specialists-tab-panel .gs-agent-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── Fix 1: Tool cards dark background (beats UA button default) ─────────── */
.gs-tool-card {
  background: #0d1b2a !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: #d6e4f7 !important;
}

.gs-tool-card:hover {
  background: #14202f !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.gs-perf-action-btn {
  background: #0d1b2a !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: #d6e4f7 !important;
}

.gs-perf-action-btn:hover {
  background: #14202f !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* ── Fix 2: Theme toggle button ─────────────────────────────────────────── */
#gs-theme-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: #8ba3c0;
  cursor: pointer;
  padding: 5px 8px;
  font-size: 15px;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
}

#gs-theme-toggle:hover {
  color: #d6e4f7;
  border-color: rgba(255,255,255,0.25);
}

/* ══════════════════════════════════════════════════════════════════════════
   Fix 3: Light mode overrides — data-theme="light" on body
   Placed last so high-specificity + !important beats the dark theme block.
   ══════════════════════════════════════════════════════════════════════════ */

body[data-theme="light"] {
  --workspace-bg: #f4f6f9;
  --card-bg: #ffffff;
  --card-border: #e2e6ec;
  --text-primary: #0f1923;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --accent: #16a34a;
  --sidebar-bg: #1a2433;
  --sidebar-active-bg: #243348;
}

body[data-theme="light"] #workspace { background: #f4f6f9 !important; }
body[data-theme="light"] #gs-command-centre { background: #ffffff !important; border-bottom-color: #e2e6ec !important; }
body[data-theme="light"] .gs-hero { background: #ffffff !important; border-bottom-color: #e2e6ec !important; }
body[data-theme="light"] .gs-hero-title { color: #0f1923 !important; }
body[data-theme="light"] .gs-hero-subtitle { color: #374151 !important; }

body[data-theme="light"] #gs-tab-bar { background: #ffffff !important; border-bottom-color: #e2e6ec !important; }
body[data-theme="light"] .gs-tab { color: #6b7280 !important; }
body[data-theme="light"] .gs-tab:hover { color: #0f1923 !important; }
body[data-theme="light"] .gs-tab--active { color: #0f1923 !important; border-bottom-color: #16a34a !important; }

body[data-theme="light"] #product-state-bar { background: #ffffff !important; border-color: #e2e6ec !important; }
body[data-theme="light"] #product-state-panel { background: #ffffff !important; border-color: #e2e6ec !important; }
body[data-theme="light"] .psb-label,
body[data-theme="light"] .psb-detail-btn { color: #6b7280 !important; }

body[data-theme="light"] .workspace-card { background: #ffffff !important; border-color: #e2e6ec !important; color: #0f1923 !important; }
body[data-theme="light"] .card-title { color: #374151 !important; }
body[data-theme="light"] .card-subtitle { color: #6b7280 !important; }
body[data-theme="light"] .gs-section-label { color: #9ca3af !important; }

body[data-theme="light"] #pete-brief-panel { background: #ffffff !important; }
body[data-theme="light"] .pete-product-row { background: #f8fafc !important; border-color: #e2e6ec !important; }
body[data-theme="light"] .pete-brief-date { color: #6b7280 !important; }

body[data-theme="light"] .rec-card { background: #f8fafc !important; border-color: #e2e6ec !important; }
body[data-theme="light"] .rec-card-hook { background: #f0f4f8 !important; border-color: #d1d9e0 !important; color: #374151 !important; }
body[data-theme="light"] .rec-card-key { color: #9ca3af !important; }
body[data-theme="light"] .rec-card-angle { color: #0f1923 !important; }
body[data-theme="light"] .rec-card-reason { color: #6b7280 !important; }
body[data-theme="light"] .rec-card-generate { background: #16a34a !important; color: #ffffff !important; box-shadow: none !important; }
body[data-theme="light"] .rec-card-skip,
body[data-theme="light"] .rec-card-review { border-color: #d1d5db !important; color: #6b7280 !important; background: #ffffff !important; }

body[data-theme="light"] .gs-finn-compact-card { background: #f8fafc !important; }
body[data-theme="light"] .gs-finn-compact-card .ww-line { color: #0f1923 !important; }
body[data-theme="light"] .gs-finn-compact-card .ww-updated { color: #9ca3af !important; }
body[data-theme="light"] .gs-finn-compact-card .ww-finn { color: #6b7280 !important; }

body[data-theme="light"] .gs-context-card { background: #ffffff !important; border-color: #e2e6ec !important; }
body[data-theme="light"] .gs-context-subsection-title { color: #9ca3af !important; }

body[data-theme="light"] .gs-agent-card { background: #f8fafc !important; border-color: #e2e6ec !important; }
body[data-theme="light"] .gs-agent-card:hover { background: #e8f5e9 !important; border-color: rgba(22,163,74,0.3) !important; }
body[data-theme="light"] .gs-agent-name { color: #0f1923 !important; }
body[data-theme="light"] .gs-agent-role { color: #6b7280 !important; }
body[data-theme="light"] .gs-agent-desc { color: #6b7280 !important; }
body[data-theme="light"] .gs-agent-last { color: #9ca3af !important; }
body[data-theme="light"] .gs-agent-open-btn { border-color: rgba(22,163,74,0.4) !important; color: #16a34a !important; background: transparent !important; }

body[data-theme="light"] .gs-tool-card { background: #ffffff !important; border-color: #e2e6ec !important; }
body[data-theme="light"] .gs-tool-card:hover { background: #f8fafc !important; border-color: #c9d3dd !important; }
body[data-theme="light"] .gs-tool-icon { background: rgba(22,163,74,0.08) !important; border-color: rgba(22,163,74,0.15) !important; color: #16a34a !important; }
body[data-theme="light"] .gs-tool-title { color: #0f1923 !important; }
body[data-theme="light"] .gs-tool-sub,
body[data-theme="light"] .gs-tool-arrow { color: #9ca3af !important; }

body[data-theme="light"] .gs-perf-action-btn { background: #ffffff !important; border-color: #e2e6ec !important; }
body[data-theme="light"] .gs-perf-action-btn:hover { background: #f8fafc !important; }
body[data-theme="light"] .gs-perf-action-title { color: #0f1923 !important; }
body[data-theme="light"] .gs-perf-action-sub,
body[data-theme="light"] .gs-perf-action-arrow { color: #9ca3af !important; }
body[data-theme="light"] .gs-perf-action-btn > .ti:first-child { color: #9ca3af !important; }

body[data-theme="light"] #product-growth-header { background: #ffffff !important; border-color: #e2e6ec !important; }
body[data-theme="light"] .pgh-title { color: #0f1923 !important; }
body[data-theme="light"] .pgh-subtitle { color: #6b7280 !important; }
body[data-theme="light"] .pgh-pill { background: #f0f4f8 !important; border-color: #d1d9e0 !important; color: #6b7280 !important; }
body[data-theme="light"] .pgh-pill--active { background: rgba(22,163,74,0.1) !important; border-color: rgba(22,163,74,0.25) !important; color: #16a34a !important; }
body[data-theme="light"] .pgh-campaign-block { background: #f8fafc !important; border-color: #e2e6ec !important; }
body[data-theme="light"] .pgh-campaign-meta span { background: #f0f4f8 !important; border-color: #d1d9e0 !important; color: #6b7280 !important; }

body[data-theme="light"] .ai-badge { background: #f0f4f8 !important; border-color: #d1d9e0 !important; color: #6b7280 !important; }
body[data-theme="light"] .ai-badge--active { background: rgba(22,163,74,0.08) !important; border-color: rgba(22,163,74,0.2) !important; }
body[data-theme="light"] .ai-badge--active strong { color: #16a34a !important; }

body[data-theme="light"] #copy-studio-panel input,
body[data-theme="light"] #copy-studio-panel select,
body[data-theme="light"] #copy-studio-panel textarea { background: #ffffff !important; border-color: #d1d5db !important; color: #0f1923 !important; }

body[data-theme="light"] #copy-studio-panel .btn-secondary { background: #f0f4f8 !important; border-color: #d1d5db !important; color: #374151 !important; }

body[data-theme="light"] .empty-output-state { border-color: #e2e6ec !important; background: #f8fafc !important; }
body[data-theme="light"] .empty-output-heading { color: #374151 !important; }
body[data-theme="light"] .empty-output-subtext,
body[data-theme="light"] .empty-output-meta { color: #9ca3af !important; }

body[data-theme="light"] #gs-theme-toggle { border-color: #d1d5db !important; color: #6b7280 !important; }
body[data-theme="light"] #gs-theme-toggle:hover { color: #0f1923 !important; border-color: #9ca3af !important; }

/* ── Phase 4: Kay voice gate badges ──────────────────────────────────────── */
.aq-badge-kay { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.02em; }
.aq-badge-kay-pass { background: rgba(63,229,108,0.12); border: 1px solid rgba(63,229,108,0.3); color: var(--accent); }
.aq-badge-kay-revise { background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3); color: #fbbf24; }
.aq-badge-kay-reject { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); color: #f87171; }

.aq-kay-violations { margin: 6px 0 0 0; padding: 8px 10px 8px 20px; background: rgba(239,68,68,0.06); border-left: 2px solid rgba(239,68,68,0.35); border-radius: 0 4px 4px 0; list-style: disc; font-size: 12px; color: var(--text-secondary); }
.aq-kay-violations li { margin: 2px 0; }

/* ── Phase 4: Maro hooks section ─────────────────────────────────────────── */
.aq-maro-section { margin: 10px 0; padding: 10px 12px; background: rgba(63,229,108,0.05); border: 1px solid rgba(63,229,108,0.15); border-radius: 6px; font-size: 13px; }
.aq-hook-used { color: var(--text-primary); }
.aq-hook-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-right: 6px; }
.aq-maro-hooks { margin-top: 6px; color: var(--text-secondary); font-size: 12px; }
.aq-maro-hooks summary { cursor: pointer; user-select: none; color: var(--accent); }
.aq-maro-hooks ol { margin: 6px 0 0 16px; padding: 0; }
.aq-maro-hooks li { margin: 3px 0; }
.aq-hook-reasoning { margin: 6px 0 0; font-style: italic; color: var(--text-secondary); }

/* ── Phase 4: Repurpose button and modal ─────────────────────────────────── */
.aq-repurpose-modal { margin: 10px 0 0; padding: 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 6px; }
.aq-repurpose-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin: 0 0 8px; }
.aq-repurpose-platforms { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.aq-repurpose-option { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.aq-repurpose-actions { display: flex; gap: 8px; }
.aq-repurpose-status { margin-top: 8px; font-size: 12px; color: var(--text-secondary); min-height: 16px; }

/* ── Content Calendar Panel ─────────────────────────────────────────────────── */

/* Week nav */
.cal-week-nav { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; }
#cal-prev-week, #cal-next-week { background: transparent !important; border: 1px solid rgba(255,255,255,0.15) !important; color: #3fe56c !important; }
.cal-week-label { flex: 1; text-align: center; font-size: 13px; font-weight: 600; color: #d6e4f7; letter-spacing: 0.02em; }

/* Grid shell */
.cal-week-grid { display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.07); border-radius: 6px; overflow: hidden; }

/* Day headers */
.cal-grid-header { display: grid; grid-template-columns: repeat(7, 1fr); background: #0d1b2a; border-bottom: 1px solid rgba(255,255,255,0.07); }
.cal-col-head { padding: 10px 4px 8px; text-align: center; }
.cal-day-name { font-family: 'Hanken Grotesk', 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #8ba3c0; }
.cal-day-date { font-size: 18px; font-weight: 600; color: #d6e4f7; margin-top: 3px; line-height: 1; }
.cal-col-head.cal-today .cal-day-name { color: #3fe56c; }
.cal-col-head.cal-today .cal-day-date { color: #3fe56c; }

/* Day columns */
.cal-grid-body { display: grid; grid-template-columns: repeat(7, 1fr); min-height: 200px; }
.cal-day-col { border-right: 1px solid rgba(255,255,255,0.04); padding: 6px 5px; display: flex; flex-direction: column; gap: 5px; min-height: 200px; position: relative; }
.cal-day-col:last-child { border-right: none; }
.cal-today-col { border-left: 2px solid #3fe56c; background: rgba(63,229,108,0.04); }

/* Slot cards */
.cal-slot { background: #1a2d42; border-left: 3px solid #64748b; border-radius: 4px; padding: 8px 10px; font-size: 11px; position: relative; transition: opacity 0.15s; }
.cal-slot-time { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; color: #8ba3c0; margin-bottom: 3px; }
.cal-slot-product { font-weight: 700; color: #d6e4f7; font-size: 11px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-slot-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.cal-badge { display: inline-block; font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.05em; }
.cal-badge-platform { background: rgba(139,163,192,0.15); color: #8ba3c0; }
.cal-badge-status { background: rgba(100,116,139,0.2); color: #94a3b8; }
.cal-status-scheduled-badge { background: rgba(59,130,246,0.18); color: #93c5fd; }
.cal-status-generated-badge { background: rgba(139,92,246,0.18); color: #c4b5fd; }
.cal-status-published-badge { background: rgba(16,185,129,0.18); color: #6ee7b7; }
.cal-status-skipped-badge   { background: rgba(100,116,139,0.15); color: #64748b; }
.cal-status-cancelled-badge { background: rgba(220,38,38,0.15); color: #fca5a5; }
.cal-slot-notes { font-size: 10px; color: #5a7a9a; margin-top: 4px; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-slot-cancel-btn { position: absolute; top: 4px; right: 4px; background: none; border: none; cursor: pointer; font-size: 9px; color: #3d5a78; padding: 2px 4px; border-radius: 3px; line-height: 1; opacity: 0; transition: opacity 0.15s; }
.cal-slot:hover .cal-slot-cancel-btn { opacity: 1; }
.cal-slot-cancel-btn:hover { background: rgba(220,38,38,0.2); color: #fca5a5; }
.cal-status-skipped   { opacity: 0.55; }
.cal-status-cancelled { opacity: 0.35; }

/* Per-day add button */
.cal-add-day-btn { background: none; border: none; color: transparent; font-size: 16px; cursor: pointer; padding: 4px; margin-top: auto; border-radius: 4px; transition: color 0.15s, background 0.15s; line-height: 1; }
.cal-day-col:hover .cal-add-day-btn { color: #3fe56c; background: rgba(63,229,108,0.08); }

/* ── Slot form — enterprise dark ────────────────────────────────────────────── */
#cal-slot-form.workspace-card { background: #0d1b2a !important; border: 1px solid rgba(255,255,255,0.06) !important; border-radius: 8px; padding: 20px !important; margin-top: 12px; }
#cal-slot-form-title { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #3fe56c; border-left: 3px solid #3fe56c; padding-left: 10px; margin-bottom: 16px; }
.cal-form-fields { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }
.cal-form-fields label { display: flex; flex-direction: column; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: #5a7a9a; }
.cal-form-fields input,
.cal-form-fields select { padding: 8px 12px; border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; background: #14202f; color: #d6e4f7; font-size: 13px; width: 100%; box-sizing: border-box; }
.cal-form-fields input[type="date"],
.cal-form-fields input[type="time"] { background: #14202f; border: 1px solid rgba(255,255,255,0.1); color: #d6e4f7; padding: 8px 12px; border-radius: 4px; width: 100%; }
.cal-form-fields input:focus, .cal-form-fields select:focus { outline: none; border-color: rgba(63,229,108,0.4); }

/* Repeat weekly row */
.cal-repeat-row { display: flex; align-items: center; gap: 12px; padding: 10px 0 2px; }
.cal-repeat-check-label { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #8ba3c0; cursor: pointer; }
.cal-repeat-check-label input[type="checkbox"] { accent-color: #3fe56c; width: 14px; height: 14px; cursor: pointer; }
.cal-repeat-weeks-wrap { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #8ba3c0; }
.cal-weeks-input { width: 56px !important; padding: 4px 8px !important; text-align: center; }

/* Confirmation message */
.cal-slot-confirm { background: rgba(63,229,108,0.1); border: 1px solid rgba(63,229,108,0.25); border-radius: 4px; padding: 10px 14px; font-size: 13px; color: #3fe56c; margin-bottom: 12px; }

/* Save button full-width mint */
#cal-slot-save-btn { background: #3fe56c !important; color: #0d1b2a !important; border: none !important; font-weight: 700; }

/* ── Approval Queue — Delete confirm inline ─────────────────────────────────── */
.aq-delete-confirm { display: flex; align-items: center; gap: 8px; padding: 8px 0 4px; flex-wrap: wrap; }
.aq-delete-confirm-msg { font-size: 12px; color: #f87171; flex: 1 1 100%; margin-bottom: 4px; }

/* ── Pipeline Status Strip — PAUSED badge ───────────────────────────────────── */
.psb-pill--paused { opacity: 0.75; }
.psb-pill-dot--paused { background: none !important; color: #4a5568; font-size: 11px; line-height: 1; margin-right: 2px; display: inline-block; width: 9px; text-align: center; }
.psb-pill-state--paused { color: #4a5568; font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.psb-pill--paused .psb-pill-name { color: #4a5568; }

/* ── Marketing Control — Product Settings tab ───────────────────────────────── */
.mktg-ctrl-heading { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.mktg-ctrl-subtitle { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.5; }
.mktg-ctrl-cards { display: flex; flex-direction: column; gap: 12px; }
#mktg-ctrl-cards { display: flex; flex-direction: column; gap: 12px; }
.mktg-loading, .mktg-empty, .mktg-error { font-size: 13px; color: var(--text-muted); padding: 16px 0; }
.mktg-error { color: var(--danger, #dc2626); }

.mktg-card { background: var(--surface, var(--bg-secondary)); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
.mktg-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mktg-card-name { font-weight: 700; font-size: 14px; color: var(--text-primary); }
.mktg-card-stage { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); background: var(--bg-primary, var(--surface)); border: 1px solid var(--border); border-radius: 3px; padding: 2px 6px; }

.mktg-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--border); }
.mktg-row--auto { border-top: 1px solid var(--border); }
.mktg-row-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.mktg-row-right { display: flex; align-items: center; gap: 8px; }

/* Toggle switch */
.mktg-toggle { position: relative; display: inline-flex; align-items: center; width: 36px; height: 20px; border-radius: 10px; border: none; cursor: pointer; transition: background 0.2s; flex-shrink: 0; padding: 0; }
.mktg-toggle--on { background: #3fe56c; }
.mktg-toggle--off { background: #4a5568; }
.mktg-toggle--small { width: 30px; height: 17px; border-radius: 9px; }
.mktg-toggle:disabled { opacity: 0.5; cursor: not-allowed; }
.mktg-toggle-thumb { position: absolute; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 0.2s; }
.mktg-toggle--on .mktg-toggle-thumb { left: calc(100% - 18px); }
.mktg-toggle--off .mktg-toggle-thumb { left: 2px; }
.mktg-toggle--small .mktg-toggle-thumb { width: 13px; height: 13px; }
.mktg-toggle--small.mktg-toggle--on .mktg-toggle-thumb { left: calc(100% - 15px); }

/* Status labels */
.mktg-status-label { font-size: 11px; font-weight: 600; }
.mktg-status--active { color: #3fe56c; }
.mktg-status--paused { color: #4a5568; }
.mktg-status--manual { color: #3fe56c; }
.mktg-status--warn { color: #f59e0b; }

.mktg-card-paused-info { padding: 6px 0 4px; }
.mktg-paused-reason { font-size: 12px; color: var(--text-secondary); margin-bottom: 2px; }
.mktg-paused-since { font-size: 11px; color: var(--text-muted); }
.mktg-auto-warning { font-size: 11px; color: #f59e0b; padding: 4px 0 2px; border-top: 1px solid var(--border); margin-top: 4px; }

/* ── Scout ──────────────────────────────────────────────────────────────────── */

/* Sub-navigation pill row */
.scout-subnav { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.scout-subnav-btn { background: none; border: 1px solid transparent; border-radius: 6px; padding: 5px 14px; font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s; }
.scout-subnav-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }
.scout-subnav-btn.active { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border); }

/* Section visibility */
.scout-section { display: block; }
.scout-section.hidden { display: none; }

/* Queue header */
.scout-queue-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.scout-queue-left { display: flex; flex-direction: column; gap: 8px; }
.scout-queue-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Product pills */
.scout-product-pills { display: flex; gap: 6px; }
.scout-product-pill, .scout-history-pill { background: none; border: 1px solid var(--border); border-radius: 20px; padding: 3px 12px; font-size: 12px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s; }
.scout-product-pill:hover, .scout-history-pill:hover { background: var(--bg-secondary); color: var(--text-primary); }
.scout-product-pill.active, .scout-history-pill.active { background: var(--accent, #6366f1); color: #fff; border-color: transparent; }

/* Enabled/paused badge */
.scout-enabled-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 4px; }
.scout-enabled-badge--on { background: rgba(63,229,108,0.15); color: #3fe56c; }
.scout-enabled-badge--off { background: rgba(100,116,139,0.15); color: #64748b; }
.scout-mode-label { font-size: 12px; color: var(--text-muted); }

/* Tables */
.scout-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.scout-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.scout-table td { padding: 8px 8px; border-bottom: 1px solid var(--border); color: var(--text-primary); vertical-align: middle; }
.scout-table tr:last-child td { border-bottom: none; }
.scout-table tr:hover td { background: var(--bg-secondary); }
.scout-table--small td, .scout-table--small th { padding: 4px 6px; font-size: 12px; }
.scout-name-cell { font-weight: 600; white-space: nowrap; }
.scout-email-cell { font-size: 12px; color: var(--text-secondary); }
.scout-subject-cell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scout-actions-cell { white-space: nowrap; }
.scout-verified { color: #3fe56c; font-weight: 700; }

/* Status badges */
.scout-status-badge { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; display: inline-block; }
.scout-status--muted { background: rgba(100,116,139,0.12); color: #64748b; }
.scout-status--warn { background: rgba(245,158,11,0.12); color: #f59e0b; }
.scout-status--ok { background: rgba(63,229,108,0.12); color: #3fe56c; }
.scout-status--danger { background: rgba(239,68,68,0.12); color: #ef4444; }
.scout-status--blue { background: rgba(99,102,241,0.12); color: #818cf8; }
.scout-status--bright { background: rgba(63,229,108,0.2); color: #22c55e; }

/* Outcome badges */
.scout-outcome-badge { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; }
.scout-outcome--replied { background: rgba(63,229,108,0.12); color: #3fe56c; }
.scout-outcome--opted-out { background: rgba(100,116,139,0.12); color: #64748b; }

/* Batch bar */
.scout-batch-bar { display: flex; align-items: center; gap: 10px; padding: 10px 0 0; flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); }
.scout-batch-bar.hidden { display: none; }
.scout-danger-btn { color: #ef4444 !important; }

/* Button size helpers */
.btn-xs { padding: 2px 8px; font-size: 11px; border-radius: 4px; }

/* Modals */
.scout-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 9000; }
.scout-modal-overlay.hidden { display: none; }
.scout-modal-box { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 12px; width: 480px; max-width: 95vw; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; }
.scout-modal-box--wide { width: 640px; }
.scout-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--border); }
.scout-modal-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.scout-modal-close { background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer; line-height: 1; padding: 0; }
.scout-modal-close:hover { color: var(--text-primary); }
.scout-modal-body { padding: 18px 20px; flex: 1; }
.scout-modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; }

/* Email modal */
.scout-email-meta { display: flex; gap: 10px; font-size: 13px; margin-bottom: 6px; }
.scout-email-meta-label { font-weight: 600; color: var(--text-secondary); min-width: 60px; }

/* Import modal */
.scout-import-instructions { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; line-height: 1.5; }
.scout-dropzone { border: 2px dashed var(--border); border-radius: 8px; padding: 28px 20px; text-align: center; font-size: 13px; color: var(--text-muted); }
.scout-dropzone i { font-size: 28px; display: block; margin-bottom: 8px; }

/* Settings */
.scout-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .scout-settings-grid { grid-template-columns: 1fr; } }
.scout-settings-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.scout-settings-card-header { display: flex; align-items: center; justify-content: space-between; }
.scout-settings-card-name { font-weight: 700; font-size: 14px; color: var(--text-primary); }
.scout-settings-header-controls { display: flex; align-items: center; gap: 8px; }
.scout-settings-mode-label { font-size: 12px; color: var(--text-muted); }
.scout-settings-mode-row { display: flex; flex-direction: column; gap: 4px; }
.scout-settings-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.scout-settings-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); padding: 4px 0 0; border-top: 1px solid var(--border); }
.scout-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scout-safety-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.scout-safety-item { font-size: 11px; color: #3fe56c; }

/* Toast */
.scout-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 10px 20px; font-size: 13px; color: var(--text-primary); opacity: 0; transition: opacity 0.25s, transform 0.25s; z-index: 9999; pointer-events: none; }
.scout-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }