/* ============================================================
   TG Autopilot Workspace Redesign
   Preserves all data-* attributes, JS hooks and logic.
   Only overrides visual presentation.
   ============================================================ */

/* ── Dashboard overview (mockup-style cards) ── */

/* Hide empty-state in overview, show our grid instead */
[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .empty-state-card {
  display: none !important;
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 24px 0;
}

/* Overview Hero / Stats Row */
[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .telegram-first-run-card {
  grid-column: 1 / -1;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--panel-shadow);
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .telegram-first-run-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: start;
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .telegram-first-run-hero h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--ink);
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .telegram-first-run-hero p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .telegram-first-run-status {
  background: var(--surface-soft);
  padding: 12px 16px;
  border-radius: 10px;
  text-align: right;
  min-width: 200px;
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .telegram-first-run-status small {
  font-size: 11px;
  color: var(--muted);
  display: block;
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .telegram-first-run-status strong {
  font-size: 13px;
  color: var(--ink);
  display: block;
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .telegram-first-run-status span {
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin-top: 2px;
}

/* Onboarding checklist - restyled as compact stats */
[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .onboarding-checklist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .onboarding-checklist li {
  counter-increment: step;
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--surface);
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .onboarding-checklist li span {
  width: 28px;
  height: 28px;
  background: var(--teal);
  color: var(--teal-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .onboarding-checklist li div strong {
  font-size: 13px;
  display: block;
  color: var(--ink);
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .onboarding-checklist li div small {
  font-size: 11px;
  color: var(--muted);
}

/* Action buttons row */
[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .telegram-first-run-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .telegram-first-run-actions .primary,
[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .telegram-first-run-actions .secondary {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  transition: all .15s;
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .telegram-first-run-actions .primary {
  background: var(--button-dark);
  color: var(--button-dark-text);
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .telegram-first-run-actions .secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--line);
}

/* Source engine foundation card */
[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .source-engine-foundation {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--panel-shadow);
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .source-engine-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  margin-bottom: 16px;
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .source-engine-head h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 4px 0;
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .source-engine-head p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .source-engine-flow {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--surface);
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--muted);
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .source-engine-flow b {
  color: var(--teal-dark);
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .source-engine-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .source-engine-summary-grid article {
  background: var(--surface);
  padding: 12px;
  border-radius: 8px;
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .source-engine-summary-grid article small {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

[data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .source-engine-summary-grid article strong {
  font-size: 18px;
  display: block;
  margin: 4px 0;
}

/* ── Tab Bar Redesign ── */
[data-panel="tg-autopilot"] .tabbar {
  grid-column: 1 / -1 !important;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-soft);
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow-x: auto;
}

[data-panel="tg-autopilot"] .tabbar button {
  padding: 8px 18px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  white-space: nowrap;
  transition: all .15s;
}

[data-panel="tg-autopilot"] .tabbar button:hover {
  color: var(--ink);
  background: var(--paper);
}

[data-panel="tg-autopilot"] .tabbar button.is-active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ── Regular Tab Panels ── */
[data-panel="tg-autopilot"] .tab-panel {
  grid-column: 1 / -1 !important;
  padding: 0;
}

[data-panel="tg-autopilot"] .tab-panel .panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--panel-shadow);
}

[data-panel="tg-autopilot"] .autopilot-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

[data-panel="tg-autopilot"] .autopilot-panel-head h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

[data-panel="tg-autopilot"] .autopilot-panel-head span {
  font-size: 12px;
  color: var(--muted);
}

/* ── Telegram Channel Connect Panel ── */
[data-panel="tg-autopilot"] .telegram-connection-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

[data-panel="tg-autopilot"] .telegram-connection-head h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 4px 0;
}

[data-panel="tg-autopilot"] .telegram-connection-head p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

[data-panel="tg-autopilot"] .telegram-connection-status {
  background: var(--surface-soft);
  padding: 12px 16px;
  border-radius: 10px;
  text-align: right;
  min-width: 160px;
}

[data-panel="tg-autopilot"] .telegram-connection-status strong {
  font-size: 15px;
  font-weight: 700;
}

[data-panel="tg-autopilot"] .telegram-connection-status > span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* Channel badges in status card */
[data-panel="tg-autopilot"] [data-telegram-channel-meta] {
  margin-top: 6px;
  display: grid;
  gap: 4px;
}

[data-panel="tg-autopilot"] [data-telegram-channel-meta] > small {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

[data-panel="tg-autopilot"] [data-telegram-channel-list] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.channel-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--mint-soft, #e6f7f5);
  border: 1px solid var(--mint-strong, #34c7b5);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  color: var(--teal-dark, #1a6b5a);
  line-height: 1.4;
  white-space: nowrap;
  transition: background .15s;
}

[data-panel="tg-autopilot"] .telegram-connection-options {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

[data-panel="tg-autopilot"] .telegram-connection-option {
  flex: 1;
  padding: 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

[data-panel="tg-autopilot"] .telegram-connection-option.is-selected {
  border-color: var(--teal-dark);
  background: var(--surface);
}

[data-panel="tg-autopilot"] .telegram-connection-option input {
  margin-top: 3px;
  accent-color: var(--teal-dark);
}

[data-panel="tg-autopilot"] .telegram-connection-option strong {
  font-size: 14px;
  display: block;
}

[data-panel="tg-autopilot"] .telegram-connection-option small {
  font-size: 11px;
  color: var(--muted);
}

/* ── Form fields ── */
[data-panel="tg-autopilot"] .form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

[data-panel="tg-autopilot"] .form-field span {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

[data-panel="tg-autopilot"] .form-field input,
[data-panel="tg-autopilot"] .form-field select {
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  background: var(--paper);
  color: var(--ink);
  transition: border-color .15s;
}

[data-panel="tg-autopilot"] .form-field input:focus,
[data-panel="tg-autopilot"] .form-field select:focus {
  outline: none;
  border-color: var(--teal-dark);
}

[data-panel="tg-autopilot"] .form-field textarea {
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

[data-panel="tg-autopilot"] .form-field textarea:focus {
  outline: none;
  border-color: var(--teal-dark);
}

[data-panel="tg-autopilot"] .form-field small {
  font-size: 11px;
  color: var(--muted);
}

/* ── Source Scanner ── */
[data-panel="tg-autopilot"] .source-scanner-section-title {
  margin-bottom: 14px;
}

[data-panel="tg-autopilot"] .source-scanner-section-title small {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

[data-panel="tg-autopilot"] .source-scanner-section-title strong {
  font-size: 16px;
  display: block;
}

[data-panel="tg-autopilot"] .source-discovery-search-row {
  display: grid;
  grid-template-columns: 1fr 180px auto;
  gap: 12px;
  margin-bottom: 20px;
  align-items: end;
}

[data-panel="tg-autopilot"] .source-scanner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

[data-panel="tg-autopilot"] .source-scanner-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
}

[data-panel="tg-autopilot"] .source-scanner-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

[data-panel="tg-autopilot"] .source-scanner-controls label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-panel="tg-autopilot"] .source-scanner-controls label span {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

[data-panel="tg-autopilot"] .source-scanner-controls label select {
  padding: 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
  background: var(--paper);
}

[data-panel="tg-autopilot"] .source-scanner-filter-row {
  display: none;
}

[data-panel="tg-autopilot"] .source-scanner-action-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}

[data-panel="tg-autopilot"] .source-scanner-action-row .primary,
[data-panel="tg-autopilot"] .source-scanner-action-row .secondary {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  border: none;
}

[data-panel="tg-autopilot"] .source-scanner-results-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

[data-panel="tg-autopilot"] .source-scanner-results-head small {
  font-size: 11px;
  color: var(--muted);
}

[data-panel="tg-autopilot"] .source-scanner-results-head strong {
  font-size: 16px;
}

[data-panel="tg-autopilot"] .source-scanner-item-card {
  padding: 12px;
  background: var(--paper);
  border-radius: 8px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
}

/* ── Connected sources ── */
[data-panel="tg-autopilot"] .connected-sources-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

[data-panel="tg-autopilot"] .connected-sources-head small {
  font-size: 11px;
  color: var(--muted);
}

[data-panel="tg-autopilot"] .connected-sources-head strong {
  font-size: 16px;
}

/* ── Filters Panel ── */

/* Collapsed CTA: big card with question */
[data-panel="tg-autopilot"] .filters-collapsed-cta {
  display: block;
}

[data-panel="tg-autopilot"] .filters-cta-card {
  text-align: center;
  padding: 40px 24px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 12px;
}

[data-panel="tg-autopilot"] .filters-cta-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 12px 0 8px;
}

[data-panel="tg-autopilot"] .filters-cta-card p {
  font-size: 13px;
  color: var(--muted);
  max-width: 480px;
  margin: 0 auto 20px;
  line-height: 1.5;
}

[data-panel="tg-autopilot"] .filters-cta-card .primary {
  font-size: 14px;
  padding: 10px 28px;
  border-radius: 8px;
}

[data-panel="tg-autopilot"] .filters-cta-card .secondary {
  font-size: 14px;
  padding: 10px 28px;
  border-radius: 8px;
}

[data-panel="tg-autopilot"] .filters-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

[data-panel="tg-autopilot"] .filters-cta-skipped {
  border-style: solid;
  border-color: var(--line);
  opacity: 0.85;
}

[data-panel="tg-autopilot"] .filter-workbench-header {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 8px;
}

[data-panel="tg-autopilot"] .filter-workbench-header span {
  font-weight: 600;
  font-size: 14px;
}

[data-panel="tg-autopilot"] .filter-workbench-header .compact-btn {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 6px;
}

[data-panel="tg-autopilot"] .filter-workbench-grid {
  display: grid;
  grid-template-columns: 200px 1fr 220px;
  gap: 14px;
}

[data-panel="tg-autopilot"] .filter-rule-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[data-panel="tg-autopilot"] .filter-rule-num {
  color: var(--primary, #2563eb); font-weight: 700; margin-right: 2px;
}
[data-panel="tg-autopilot"] .filter-rule-card {
  background: var(--surface);
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
  font-size: 12px;
}

[data-panel="tg-autopilot"] .filter-rule-card strong {
  font-size: 13px;
  display: block;
  margin-bottom: 2px;
}

[data-panel="tg-autopilot"] .filter-rule-editor {
  background: var(--surface);
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
}

[data-panel="tg-autopilot"] .filter-rule-editor .form-field {
  margin-bottom: 10px;
}

[data-panel="tg-autopilot"] .filter-rule-editor .form-field span {
  font-size: 12px;
  margin-bottom: 2px;
}

[data-panel="tg-autopilot"] .filter-rule-editor .form-field input,
[data-panel="tg-autopilot"] .filter-rule-editor .form-field select,
[data-panel="tg-autopilot"] .filter-rule-editor .form-field textarea {
  font-size: 13px;
  padding: 6px 10px;
}

[data-panel="tg-autopilot"] .filter-rule-editor .form-field textarea {
  min-height: 48px;
}

[data-panel="tg-autopilot"] .filter-editor-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}

[data-panel="tg-autopilot"] .filter-editor-actions button {
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 6px;
}

[data-panel="tg-autopilot"] .filter-editor-actions .danger {
  background: transparent;
  color: #ef4444;
  border: 1px solid #ef4444;
}

[data-panel="tg-autopilot"] .filter-preview-panel {
  background: var(--surface);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  font-size: 12px;
}

[data-panel="tg-autopilot"] .filter-preview-panel strong {
  font-size: 13px;
  display: block;
  margin-bottom: 6px;
}

[data-panel="tg-autopilot"] .filter-preview-panel p {
  font-size: 11px;
  color: var(--muted);
  margin: 2px 0;
}

[data-panel="tg-autopilot"] .filter-result-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

[data-panel="tg-autopilot"] .preview-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
  cursor: pointer;
  font-size: 12px;
}

/* ── Inbox Panel ── */
[data-panel="tg-autopilot"] .inbox-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

[data-panel="tg-autopilot"] .inbox-filter-pills {
  display: flex;
  gap: 3px;
}

[data-panel="tg-autopilot"] .inbox-filter-pills button {
  padding: 4px 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 4px;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
}

[data-panel="tg-autopilot"] .inbox-filter-pills button.is-active {
  background: var(--button-dark);
  color: var(--button-dark-text);
  border-color: var(--button-dark);
}

[data-panel="tg-autopilot"] .inbox-toolbar select,
[data-panel="tg-autopilot"] .inbox-toolbar input {
  font-size: 12px;
  padding: 4px 8px;
}

[data-panel="tg-autopilot"] .inbox-toolbar button.secondary {
  font-size: 11px;
  padding: 4px 10px;
}

[data-panel="tg-autopilot"] .inbox-product-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 12px;
}

[data-panel="tg-autopilot"] .inbox-real-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Inbox item cards: compact ── */
[data-panel="tg-autopilot"] .inbox-item-card {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 4px 8px;
  font-size: 12px;
  position: relative;
}

[data-panel="tg-autopilot"] .inbox-item-card .inbox-item-number {
  font-weight: 700;
  font-size: 12px;
  color: var(--green);
  padding-top: 2px;
  grid-row: 1 / 3;
}

[data-panel="tg-autopilot"] .inbox-item-card .inbox-item-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

[data-panel="tg-autopilot"] .inbox-item-card .inbox-item-main strong {
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
  overflow-wrap: break-word;
  word-break: break-word;
}

[data-panel="tg-autopilot"] .inbox-item-card .inbox-item-main strong:hover {
  color: var(--primary, #2563eb);
}

[data-panel="tg-autopilot"] .inbox-item-card .inbox-item-main p {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  cursor: pointer;
  line-height: 1.35;
}

[data-panel="tg-autopilot"] .inbox-item-card .inbox-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--muted);
  min-width: 0;
}

[data-panel="tg-autopilot"] .inbox-item-card .inbox-item-meta > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

[data-panel="tg-autopilot"] .inbox-item-card .inbox-item-meta time {
  max-width: 120px;
}

[data-panel="tg-autopilot"] .inbox-item-card .inbox-status {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}

[data-panel="tg-autopilot"] .inbox-item-card .inbox-status.ready_for_ai { background: #e3f2fd; color: #1565c0; }
[data-panel="tg-autopilot"] .inbox-item-card .inbox-status.used { background: #e8f5e9; color: #2e7d32; }
[data-panel="tg-autopilot"] .inbox-item-card .inbox-status.ignored { background: #fff3e0; color: #e65100; }
[data-panel="tg-autopilot"] .inbox-item-card .inbox-status.duplicate { background: #fce4ec; color: #c62828; }
[data-panel="tg-autopilot"] .inbox-item-card .inbox-status.blocked { background: #f3e5f5; color: #7b1fa2; }

[data-panel="tg-autopilot"] .inbox-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  grid-column: 2;
}

[data-panel="tg-autopilot"] .inbox-item-actions button,
[data-panel="tg-autopilot"] .button-link {
  font-size: 10px;
  padding: 3px 8px;
  min-height: auto;
  border-radius: 4px;
}

[data-panel="tg-autopilot"] .inbox-item-actions button.primary {
  background: var(--green);
  color: #fff;
  border: none;
}

[data-panel="tg-autopilot"] .inbox-item-actions button.secondary {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
}

[data-panel="tg-autopilot"] .inbox-item-actions .portal-action-button {
  font-size: 10px;
  padding: 3px 8px;
}

/* ── Inbox selected preview panel ── */
[data-panel="tg-autopilot"] .inbox-selected-panel {
  background: var(--surface);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  font-size: 12px;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

/* ── Inbox card signals and expand ── */
[data-panel="tg-autopilot"] .inbox-item-card .inbox-item-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 10px;
  color: var(--muted);
}

[data-panel="tg-autopilot"] .inbox-item-card .inbox-item-signals > * {
  white-space: nowrap;
}

[data-panel="tg-autopilot"] .inbox-item-card .inbox-expand-details {
  grid-column: 1 / -1;
  font-size: 11px;
  margin-top: 4px;
  padding: 6px 8px;
  background: var(--surface, #f9f9f9);
  border-radius: 4px;
  border: 1px solid var(--line);
}

[data-panel="tg-autopilot"] .inbox-item-card .inbox-expand-details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 11px;
  color: var(--muted);
  padding: 2px 0;
}

[data-panel="tg-autopilot"] .inbox-item-card .inbox-expand-details small {
  display: block;
  margin: 2px 0;
  word-break: break-all;
}

[data-panel="tg-autopilot"] .inbox-item-card .inbox-expand-details pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 10px;
  max-height: 200px;
  overflow: auto;
}

[data-panel="tg-autopilot"] .inbox-selected-titles {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: break-word;
  word-break: break-word;
}

[data-panel="tg-autopilot"] .inbox-selected-preview {
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

[data-panel="tg-autopilot"] .inbox-selected-preview small {
  font-size: 11px;
  color: var(--muted);
}

[data-panel="tg-autopilot"] .inbox-preview-card {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font-size: 12px;
  margin-top: 8px;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

[data-panel="tg-autopilot"] .inbox-preview-card p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

[data-panel="tg-autopilot"] .status-badge {
  font-size: 10px;
  padding: 2px 6px;
}

[data-panel="tg-autopilot"] .compact-status-line {
  font-size: 10px;
  color: var(--muted);
  margin-top: 6px;
}

[data-panel="tg-autopilot"] .inbox-item-preview-panel {
  background: var(--surface);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
}

/* ── AI Templates Panel ── */
[data-panel="tg-autopilot"] .ai-templates-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
}

[data-panel="tg-autopilot"] .ai-template-section {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 16px;
}

[data-panel="tg-autopilot"] .ai-template-two-column-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

[data-panel="tg-autopilot"] .ai-template-operational-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 12px;
}

[data-panel="tg-autopilot"] .ai-phone-preview {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  height: fit-content;
  position: sticky;
  top: 90px;
}

[data-panel="tg-autopilot"] .ai-phone-frame {
  background: var(--paper);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}

[data-panel="tg-autopilot"] .ai-phone-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

[data-panel="tg-autopilot"] .ai-phone-avatar {
  width: 32px;
  height: 32px;
  background: var(--teal);
  color: var(--teal-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

[data-panel="tg-autopilot"] .ai-phone-header strong {
  font-size: 13px;
  display: block;
}

[data-panel="tg-autopilot"] .ai-phone-header span {
  font-size: 11px;
  color: var(--muted);
}

[data-panel="tg-autopilot"] .ai-phone-chat {
  padding: 16px;
  min-height: 200px;
}

[data-panel="tg-autopilot"] .ai-phone-message {
  background: var(--surface-soft);
  padding: 12px 16px;
  border-radius: 8px 8px 8px 0;
  font-size: 13px;
  line-height: 1.5;
}

[data-panel="tg-autopilot"] .ai-phone-message time {
  font-size: 10px;
  color: var(--muted);
  display: block;
  margin-top: 6px;
}

/* ── Draft Preview ── */
[data-panel="tg-autopilot"] .draft-preview-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 14px;
}

[data-panel="tg-autopilot"] .draft-branches-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

[data-panel="tg-autopilot"] .draft-branches-header strong {
  font-size: 15px;
  font-weight: 600;
}

[data-panel="tg-autopilot"] .draft-branches-header .compact-btn {
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 6px;
}

[data-panel="tg-autopilot"] .draft-branch-group {
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

[data-panel="tg-autopilot"] .draft-branch-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

[data-panel="tg-autopilot"] .draft-branch-toggle:hover {
  background: var(--surface-soft);
}

[data-panel="tg-autopilot"] .draft-branch-info strong {
  font-size: 14px;
  font-weight: 600;
  display: block;
}

[data-panel="tg-autopilot"] .draft-branch-info small {
  font-size: 11px;
  color: var(--muted);
}

[data-panel="tg-autopilot"] .draft-branch-actions-top {
  display: flex;
  gap: 6px;
  align-items: center;
}

[data-panel="tg-autopilot"] .draft-branch-actions-top .compact-btn {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
}

[data-panel="tg-autopilot"] .draft-card {
  background: var(--paper);
  padding: 10px 12px;
  border: 1px solid var(--line);
  margin-bottom: 4px;
  font-size: 12px;
  border-radius: 6px;
}

[data-panel="tg-autopilot"] .draft-card .status-badge {
  margin-bottom: 3px;
}

[data-panel="tg-autopilot"] .draft-card strong {
  font-size: 13px;
  display: block;
  margin-bottom: 1px;
}

[data-panel="tg-autopilot"] .draft-card small {
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin-bottom: 4px;
}

[data-panel="tg-autopilot"] .draft-card p {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 4px;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: break-word;
}

[data-panel="tg-autopilot"] .draft-card .draft-card-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

[data-panel="tg-autopilot"] .draft-card .draft-card-actions button {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
}

[data-panel="tg-autopilot"] .draft-card.status-published {
  opacity: 0.7;
}

[data-panel="tg-autopilot"] .draft-cards-list {
  padding: 8px 14px 10px;
}

[data-panel="tg-autopilot"] .draft-branch-config {
  padding: 10px 14px;
  display: grid;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

[data-panel="tg-autopilot"] .draft-branch-config .form-field {
  display: grid;
  gap: 2px;
}

[data-panel="tg-autopilot"] .draft-branch-config .form-field span {
  font-size: 12px;
}

[data-panel="tg-autopilot"] .draft-branch-config select,
[data-panel="tg-autopilot"] .draft-branch-config input {
  font-size: 12px;
  padding: 5px 8px;
}

[data-panel="tg-autopilot"] .draft-branch-config small {
  font-size: 10px;
  color: var(--muted);
}

[data-panel="tg-autopilot"] .draft-branch-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

[data-panel="tg-autopilot"] .draft-branch-actions button {
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 5px;
}

[data-panel="tg-autopilot"] .template-draft-group {
  margin-bottom: 16px;
}

[data-panel="tg-autopilot"] .publish-log-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[data-panel="tg-autopilot"] .publish-log-item {
  background: var(--paper);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
}

[data-panel="tg-autopilot"] .publish-log-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}

[data-panel="tg-autopilot"] .publish-log-meta strong {
  font-size: 13px;
}

[data-panel="tg-autopilot"] .publish-log-meta small {
  color: var(--muted);
}

[data-panel="tg-autopilot"] .publish-log-item > p {
  color: var(--muted);
  margin: 2px 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

[data-panel="tg-autopilot"] .publish-log-details {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 10px;
  color: var(--muted);
}

[data-panel="tg-autopilot"] .publish-log-empty-state {
  text-align: center;
  padding: 20px;
  color: var(--muted);
}

/* ── Step Navigation ── */
[data-panel="tg-autopilot"] .step-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

[data-panel="tg-autopilot"] .step-navigation button {
  font-size: 13px;
  padding: 7px 18px;
  border-radius: 6px;
}

[data-panel="tg-autopilot"] .step-nav-center {
  text-align: center;
}

[data-panel="tg-autopilot"] .step-nav-name {
  font-weight: 600;
  font-size: 14px;
  display: block;
}

[data-panel="tg-autopilot"] .step-nav-position {
  font-size: 11px;
  color: var(--muted);
}

[data-panel="tg-autopilot"] .step-navigation button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Status badges ── */
[data-panel="tg-autopilot"] .status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
}

[data-panel="tg-autopilot"] .status-badge.not_started {
  background: var(--surface-soft);
  color: var(--muted);
}

[data-panel="tg-autopilot"] .status-badge.connected {
  background: var(--teal);
  color: var(--teal-dark);
}

[data-panel="tg-autopilot"] .status-badge.blocked {
  background: var(--danger);
  color: #c0392b;
}

[data-panel="tg-autopilot"] .status-badge.experimental {
  background: var(--warning);
  color: #856404;
}

/* ── Primary / Secondary buttons ── */
[data-panel="tg-autopilot"] .primary {
  background: var(--button-dark) !important;
  color: var(--button-dark-text) !important;
  border: none !important;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 13px;
  transition: all .15s;
}

[data-panel="tg-autopilot"] .primary:hover {
  background: var(--teal-dark) !important;
}

[data-panel="tg-autopilot"] .secondary {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--line) !important;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 13px;
  transition: all .15s;
}

[data-panel="tg-autopilot"] .secondary:hover {
  border-color: var(--teal-dark) !important;
}

[data-panel="tg-autopilot"] .danger {
  background: transparent !important;
  color: #e74c3c !important;
  border: 1.5px solid #e74c3c !important;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
}

[data-panel="tg-autopilot"] .primary[disabled],
[data-panel="tg-autopilot"] .secondary[disabled] {
  opacity: .4;
  cursor: not-allowed;
}

/* ── compact-status-line ── */
[data-panel="tg-autopilot"] .compact-status-line {
  font-size: 11px;
  color: var(--muted);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* ── Help dot ── */
[data-panel="tg-autopilot"] .help-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  font-size: 10px;
  cursor: help;
  color: var(--muted);
}

/* ── Portal input / select / textarea ── */
[data-panel="tg-autopilot"] .portal-input,
[data-panel="tg-autopilot"] .portal-select,
[data-panel="tg-autopilot"] .portal-textarea {
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  width: 100%;
  background: var(--paper);
  color: var(--ink);
}

[data-panel="tg-autopilot"] .portal-input:focus,
[data-panel="tg-autopilot"] .portal-select:focus,
[data-panel="tg-autopilot"] .portal-textarea:focus {
  border-color: var(--teal-dark);
  outline: none;
}

/* ── Modal ── */
[data-panel="tg-autopilot"] .portal-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

[data-panel="tg-autopilot"] .portal-modal-dialog {
  background: var(--paper);
  border-radius: 16px;
  padding: 24px;
  max-width: 700px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

/* ── Platform cards ── */
[data-panel="tg-autopilot"] .platform-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
}

/* ── Safety cards ── */
[data-panel="tg-autopilot"] .source-engine-inline-safety {
  font-size: 11px;
  color: var(--muted);
  margin-top: 12px;
}

/* ── Workspace status row ── */
[data-panel="tg-autopilot"] .workspace-status-row {
  grid-column: 1 / -1 !important;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: var(--panel-shadow);
}

[data-panel="tg-autopilot"] .workspace-status-row small {
  font-size: 11px;
  color: var(--muted);
  display: block;
}

[data-panel="tg-autopilot"] .workspace-status-row strong {
  font-size: 14px;
  display: block;
}

[data-panel="tg-autopilot"] .workspace-status-row span {
  font-size: 11px;
  color: var(--muted);
}

/* ── Telegram bot info ── */
[data-panel="tg-autopilot"] .telegram-public-bot {
  background: var(--surface);
  padding: 14px;
  border-radius: 8px;
  margin: 12px 0;
}

[data-panel="tg-autopilot"] .telegram-public-bot small {
  font-size: 11px;
  color: var(--muted);
}

[data-panel="tg-autopilot"] .telegram-public-bot strong {
  font-size: 16px;
  display: block;
}

/* ── Queue channel routing ── */
[data-panel="tg-autopilot"] .queue-channel-routing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

[data-panel="tg-autopilot"] .queue-channel-routing article {
  background: var(--surface);
  padding: 16px;
  border-radius: 10px;
}

/* ── Page head redesign ── */
[data-panel="tg-autopilot"] .page-head {
  grid-column: 1 / -1 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

[data-panel="tg-autopilot"] .page-head h1 {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}

[data-panel="tg-autopilot"] .page-head p {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  [data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] {
    grid-template-columns: 1fr;
  }
  [data-panel="tg-autopilot"] [data-tab-panel="tg-overview"] .onboarding-checklist {
    grid-template-columns: 1fr;
  }
  [data-panel="tg-autopilot"] .source-scanner-grid {
    grid-template-columns: 1fr;
  }
  [data-panel="tg-autopilot"] .inbox-product-grid {
    grid-template-columns: 1fr;
  }
  [data-panel="tg-autopilot"] .ai-templates-layout {
    grid-template-columns: 1fr;
  }
  [data-panel="tg-autopilot"] .draft-preview-layout {
    grid-template-columns: 1fr;
  }
  [data-panel="tg-autopilot"] .filter-workbench-grid {
    grid-template-columns: 1fr;
  }
  [data-panel="tg-autopilot"] .source-discovery-search-row {
    grid-template-columns: 1fr;
  }
  [data-panel="tg-autopilot"] .telegram-connection-options {
    flex-direction: column;
  }
}

/* ── Queue schedule preview ── */
[data-panel="tg-autopilot"] .queue-schedule-preview {
  background: var(--surface);
  padding: 16px;
  border-radius: 10px;
}

[data-panel="tg-autopilot"] .queue-schedule-preview ol {
  padding-left: 20px;
  margin-top: 8px;
}

[data-panel="tg-autopilot"] .queue-schedule-preview li {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 0;
}

/* ── Telegram test publish card ── */
[data-panel="tg-autopilot"] .telegram-test-publish-card {
  background: var(--surface-soft);
  padding: 16px;
  border-radius: 10px;
  margin-top: 16px;
}

/* ── onbarding notes ── */
[data-panel="tg-autopilot"] .telegram-setup-note {
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0 0;
}

[data-panel="tg-autopilot"] .telegram-first-run-actions ~ p {
  margin-top: 12px;
}

[data-panel="tg-autopilot"] .telegram-first-run-actions ~ p a {
  color: var(--teal-dark);
  font-size: 12px;
}

/* ── AI template Editor actions ── */
[data-panel="tg-autopilot"] .template-editor-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

/* ── Discovery groups ── */
[data-panel="tg-autopilot"] .source-discovery-groups {
  margin-top: 16px;
}

[data-panel="tg-autopilot"] .source-discovery-suggestion-card {
  background: var(--surface);
  padding: 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
}

[data-panel="tg-autopilot"] .source-discovery-suggestion-card strong {
  font-size: 14px;
  display: block;
  margin-bottom: 4px;
}

[data-panel="tg-autopilot"] .source-discovery-suggestion-card p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* ── Autopilot panel headings ── */
[data-panel="tg-autopilot"] .autopilot-product-panel .autopilot-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── Connected source choice list ── */
[data-panel="tg-autopilot"] .connected-source-choice-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}

/* ── Portal card grid ── */
[data-panel="tg-autopilot"] .portal-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

/* ── Template editor head ── */
[data-panel="tg-autopilot"] .template-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

/* ── AI template source summary ── */
[data-panel="tg-autopilot"] .ai-template-source-summary-list {
  margin: 8px 0;
  font-size: 12px;
}

/* ── AI content selector head ── */
[data-panel="tg-autopilot"] .ai-content-selector-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

/* ── AI template helper line ── */
[data-panel="tg-autopilot"] .ai-template-helper-line {
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin-top: 8px;
}

/* ── AI inbox selector ── */
[data-panel="tg-autopilot"] .ai-inbox-selector-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── AI template empty ── */
[data-panel="tg-autopilot"] .ai-template-inbox-empty {
  padding: 12px;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: 8px;
  text-align: center;
}

/* ── Filter preview panel ── */
[data-panel="tg-autopilot"] .filter-preview-panel {
  background: var(--surface);
  padding: 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
}

[data-panel="tg-autopilot"] .filter-result-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

/* ── Preview checks ── */
[data-panel="tg-autopilot"] .preview-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  cursor: pointer;
}

[data-panel="tg-autopilot"] .preview-check input {
  accent-color: var(--teal-dark);
}

/* ── AI Template add ── */
[data-panel="tg-autopilot"] .ai-template-add {
  margin-bottom: 16px;
}

/* ── Inbox empty ── */
[data-panel="tg-autopilot"] .inbox-empty-state {
  padding: 20px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 8px;
}

[data-panel="tg-autopilot"] .inbox-empty-state strong {
  display: block;
  font-size: 14px;
}

[data-panel="tg-autopilot"] .inbox-empty-state span {
  font-size: 12px;
  color: var(--muted);
}

/* ── Source Engine Safety ── */
[data-panel="tg-autopilot"] .source-engine-safety {
  background: var(--surface-soft);
  padding: 12px 16px;
  border-radius: 10px;
  text-align: right;
  min-width: 160px;
}

[data-panel="tg-autopilot"] .source-engine-safety small {
  font-size: 11px;
  color: var(--muted);
  display: block;
}

[data-panel="tg-autopilot"] .source-engine-safety strong {
  font-size: 13px;
  display: block;
}

/* ── Inbox selected panel ── */
[data-panel="tg-autopilot"] .inbox-selected-panel {
  background: var(--surface);
  padding: 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
}

[data-panel="tg-autopilot"] .inbox-selected-titles {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

/* ── Telegram channel id help ── */
[data-panel="tg-autopilot"] .telegram-channel-id-help {
  margin: 12px 0;
  font-size: 12px;
}

[data-panel="tg-autopilot"] .telegram-channel-id-help summary {
  cursor: pointer;
  color: var(--teal-dark);
  font-weight: 500;
}

[data-panel="tg-autopilot"] .telegram-channel-id-help ul {
  margin: 8px 0 0 16px;
  line-height: 1.8;
}

/* ── AI template instruction field ── */
[data-panel="tg-autopilot"] .ai-template-instruction-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}

[data-panel="tg-autopilot"] .ai-template-instruction-field span {
  font-size: 12px;
  font-weight: 600;
}

/* ── Source language policy note ── */
[data-panel="tg-autopilot"] .source-language-policy-note {
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin-top: 6px;
}

/* ── Telegram connection form ── */
[data-panel="tg-autopilot"] .telegram-connection-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

/* ── portal-action-row ── */
[data-panel="tg-autopilot"] .portal-action-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── AI template builder v3 ── */
[data-panel="tg-autopilot"] .ai-template-builder-v3 {
  margin-top: 12px;
}

/* ── Template prompt tools ── */
[data-panel="tg-autopilot"] .template-prompt-tools {
  display: flex;
  gap: 8px;
  align-items: end;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

[data-panel="tg-autopilot"] .template-prompt-tools label {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-panel="tg-autopilot"] .template-prompt-tools label span {
  font-size: 11px;
  color: var(--muted);
}

/* ── Template source select ── */
[data-panel="tg-autopilot"] .template-source-select-field {
  margin-top: 8px;
}

[data-panel="tg-autopilot"] .template-source-select-field > span {
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}

[data-panel="tg-autopilot"] .ai-template-source-checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

[data-panel="tg-autopilot"] .ai-template-source-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* ── Draft phone preview ── */
[data-panel="tg-autopilot"] .draft-phone-preview {
  height: fit-content;
  position: sticky;
  top: 90px;
}

/* ── Success action, warning action ── */
[data-panel="tg-autopilot"] .success-action {
  background: #27ae60 !important;
  color: #fff !important;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-size: 12px;
  font-weight: 500;
}

[data-panel="tg-autopilot"] .warning-action {
  background: transparent !important;
  color: #e67e22 !important;
  border: 1.5px solid #e67e22 !important;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
}

/* ── Hide the old page-head + status row from default display since we now show in overview ── */
/* Actually keep them - the page-head is needed for the back button and title */

/* ── Workspace panel container ── */
[data-panel="tg-autopilot"].is-active {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* =============================================
   TG Autopilot Dashboard Overview (scoped)
   All .dash-* selectors scoped to avoid conflicts with styles.css
   ============================================= */

[data-panel="tg-autopilot"] .dashboard-overview {
  display: none !important;
  padding: 0 !important;
  width: 100%;
}

[data-panel="tg-autopilot"] .tab-panel.dashboard-overview.is-active {
  display: block !important;
}

.dashboard-overview-embedded {
  padding: 0;
  width: 100%;
}

.dashboard-account-summary {
  display: grid;
  gap: 16px;
  margin-bottom: 26px;
}

.dashboard-account-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.dashboard-account-summary-head h2 {
  margin: 4px 0 5px;
  font-size: 20px;
  color: var(--ink);
}

.dashboard-account-summary-head p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.dashboard-account-summary-head > div > small {
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dashboard-account-state {
  flex: 0 0 auto;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.dashboard-account-state-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-account-retry {
  min-height: 0;
  padding: 6px 11px;
  font-size: 11px;
}

.dashboard-account-summary[data-state="ready"] .dashboard-account-state {
  border-color: rgba(39, 174, 96, .3);
  background: rgba(39, 174, 96, .1);
  color: #1d7a43;
}

.dashboard-account-summary[data-state="refreshing"] .dashboard-account-state {
  border-color: rgba(21, 126, 156, .3);
  background: rgba(21, 126, 156, .09);
  color: #12647c;
}

.dashboard-account-summary[data-state="error"] .dashboard-account-state {
  border-color: rgba(231, 76, 60, .3);
  background: rgba(231, 76, 60, .08);
  color: #a6372b;
}

.dashboard-account-summary[data-state="stale"] .dashboard-account-state {
  border-color: rgba(217, 142, 16, .34);
  background: rgba(217, 142, 16, .1);
  color: #8d5a05;
}

.dashboard-account-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-account-cards article {
  min-width: 0;
  padding: 16px;
  border-radius: 10px;
  box-shadow: none;
}

.dashboard-account-cards article small,
.dashboard-account-cards article span {
  display: block;
  overflow-wrap: anywhere;
}

.dashboard-account-cards article small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.dashboard-account-cards article strong {
  margin: 7px 0 5px;
  font-size: 24px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.dashboard-account-cards article span {
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}

.dashboard-account-summary .dashboard-telegram-cta {
  margin: 0;
  border-radius: 10px;
  box-shadow: none;
}

/* ── Header ── */
.autopilot-dashboard-overview .dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.autopilot-dashboard-overview .dash-header h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}

.autopilot-dashboard-overview .dash-header p {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 0;
}

.autopilot-dashboard-overview .dash-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Badges ── */
.autopilot-dashboard-overview .dash-status-badge {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.autopilot-dashboard-overview .dash-status-badge.online {
  background: #d4edda;
  color: #155724;
}

.autopilot-dashboard-overview .dash-status-badge.offline {
  background: #f8d7da;
  color: #721c24;
}

/* ── Buttons ── */
.autopilot-dashboard-overview .dash-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all .15s;
}

.autopilot-dashboard-overview .dash-btn-primary {
  background: var(--button-dark);
  color: var(--button-dark-text);
}

.autopilot-dashboard-overview .dash-btn-primary:hover {
  background: var(--teal-dark);
}

.autopilot-dashboard-overview .dash-btn-secondary {
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--line);
}

.autopilot-dashboard-overview .dash-btn-secondary:hover {
  border-color: var(--teal-dark);
}

.autopilot-dashboard-overview .dash-link-btn {
  background: none;
  border: none;
  color: var(--teal-dark);
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  text-decoration: underline;
}

/* ── Stats Row ── */
.autopilot-dashboard-overview .dash-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.autopilot-dashboard-overview .dash-stat-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  overflow: hidden;
}

.autopilot-dashboard-overview .dash-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
}

.autopilot-dashboard-overview .dash-stat-lang {
  font-size: 20px;
}

.autopilot-dashboard-overview .dash-stat-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.autopilot-dashboard-overview .dash-stat-change {
  font-size: 11px;
  margin-top: 4px;
  color: var(--muted);
}

.autopilot-dashboard-overview .dash-stat-change.up {
  color: #27ae60;
}

.autopilot-dashboard-overview .dash-stat-change.down {
  color: #e74c3c;
}

/* ── Two-column Grid ── */
.autopilot-dashboard-overview .dash-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

/* ── Cards ── */
.autopilot-dashboard-overview .dash-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--panel-shadow);
  overflow: hidden;
}

.autopilot-dashboard-overview .dash-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.autopilot-dashboard-overview .dash-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.autopilot-dashboard-overview .dash-card-action {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--teal-dark);
  cursor: pointer;
  padding: 0;
  font-weight: 500;
}

.autopilot-dashboard-overview .dash-card-action:hover {
  text-decoration: underline;
}

/* ── Source List ── */
.autopilot-dashboard-overview .dash-source-list {
  display: flex;
  flex-direction: column;
}

.autopilot-dashboard-overview .dash-source-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.autopilot-dashboard-overview .dash-source-item:last-child {
  border-bottom: none;
}

.autopilot-dashboard-overview .dash-source-item.hidden {
  display: none;
}

.autopilot-dashboard-overview .dash-source-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.autopilot-dashboard-overview .dash-source-info {
  flex: 1;
  min-width: 0;
}

.autopilot-dashboard-overview .dash-source-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.autopilot-dashboard-overview .dash-source-status {
  font-size: 11px;
  color: var(--muted);
}

.autopilot-dashboard-overview .dash-source-toggle {
  width: 34px;
  height: 19px;
  background: #ddd;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: all .2s;
  flex-shrink: 0;
}

.autopilot-dashboard-overview .dash-source-toggle.on {
  background: var(--teal-dark);
}

.autopilot-dashboard-overview .dash-source-empty {
  color: var(--muted);
}

/* ── Dashboard overview: hide extra connected source buttons ── */
.autopilot-dashboard-overview .dash-source-list .connected-source-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.autopilot-dashboard-overview .dash-source-list .connected-source-card:last-child {
  border-bottom: none;
}

.autopilot-dashboard-overview .dash-source-list .connected-source-head {
  flex: 1;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.autopilot-dashboard-overview .dash-source-list .connected-source-head strong {
  font-size: 13px;
  font-weight: 500;
}

.autopilot-dashboard-overview .dash-source-list .connected-source-url {
  display: none;
}

.autopilot-dashboard-overview .dash-source-list .connected-source-meta {
  display: none;
}

.autopilot-dashboard-overview .dash-source-list .connected-source-actions {
  display: none;
}

.autopilot-dashboard-overview .dash-source-list .connected-source-status {
  display: none;
}

.autopilot-dashboard-overview .dash-source-list .connected-source-card.connected-source-placeholder {
  padding: 12px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

.autopilot-dashboard-overview .dash-source-list .connected-source-card.connected-source-placeholder strong {
  font-size: 13px;
}

.autopilot-dashboard-overview .dash-source-list .connected-source-card.connected-source-placeholder small {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.autopilot-dashboard-overview .dash-source-list .connected-source-toggle {
  flex-shrink: 0;
}

/* ── Dashboard overview: hide old style source items when JS renders connected-source-cards ── */
.autopilot-dashboard-overview .dash-source-list .dash-source-item,
.autopilot-dashboard-overview .dash-source-list .dash-source-empty {
  display: none;
}

/* ── Schedule ── */
.autopilot-dashboard-overview .dash-schedule-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.autopilot-dashboard-overview .dash-schedule-card {
  background: var(--surface);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  border: 1px solid var(--line);
}

.autopilot-dashboard-overview .dash-schedule-add {
  border: 1.5px dashed var(--line);
  background: transparent;
}

.autopilot-dashboard-overview .dash-schedule-source {
  font-size: 11px;
  color: var(--muted);
}

.autopilot-dashboard-overview .dash-schedule-time {
  font-size: 15px;
  font-weight: 700;
  margin: 3px 0;
  color: var(--ink);
}

.autopilot-dashboard-overview .dash-schedule-label {
  font-size: 10px;
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
}

.autopilot-dashboard-overview .dash-schedule-label.dash-ru {
  background: #e3f2fd;
  color: #0088cc;
}

.autopilot-dashboard-overview .dash-schedule-label.dash-es {
  background: #fff3e0;
  color: #e65100;
}

/* ── AI Prompt Summary ── */
.autopilot-dashboard-overview .dash-prompt-summary {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.autopilot-dashboard-overview .dash-prompt-row {
  flex: 1;
  background: var(--surface);
  padding: 10px;
  border-radius: 8px;
  min-width: 0;
}

.autopilot-dashboard-overview .dash-prompt-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 2px;
}

.autopilot-dashboard-overview .dash-prompt-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.autopilot-dashboard-overview .dash-prompt-preview {
  background: var(--surface);
  padding: 12px;
  border-radius: 8px;
}

.autopilot-dashboard-overview .dash-prompt-text {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Timeline ── */
.autopilot-dashboard-overview .dash-timeline {
  display: flex;
  flex-direction: column;
}

.autopilot-dashboard-overview .dash-timeline-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-left: 2px solid var(--line);
  padding-left: 16px;
  margin-left: 6px;
  position: relative;
  min-width: 0;
}

.autopilot-dashboard-overview .dash-timeline-item::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--teal-dark);
  border-radius: 50%;
  position: absolute;
  left: -5px;
  top: 14px;
}

.autopilot-dashboard-overview .dash-timeline-item.published::before {
  background: #27ae60;
}

.autopilot-dashboard-overview .dash-timeline-item.failed::before {
  background: #e74c3c;
}

.autopilot-dashboard-overview .dash-timeline-time {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  min-width: 40px;
  padding-top: 1px;
}

.autopilot-dashboard-overview .dash-timeline-content {
  flex: 1;
  min-width: 0;
}

.autopilot-dashboard-overview .dash-timeline-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.autopilot-dashboard-overview .dash-timeline-desc {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Source Discovery ── */
/* ── Hide old-style head & status row in dashboard view ── */
[data-panel="tg-autopilot"] > .page-head,
[data-panel="tg-autopilot"] > .workspace-status-row {
  display: none !important;
}

/* ── Hide mobile guide on desktop (scoped to tg-autopilot) ── */
[data-panel="tg-autopilot"] .mobile-workspace-guide-v3,
[data-panel="tg-autopilot"] .mobile-workspace-footer-v3 {
  display: none !important;
}

/* ── Responsive: Tablet ── */
@media (max-width: 1200px) {
  .dashboard-account-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .autopilot-dashboard-overview .dash-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .dashboard-account-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .autopilot-dashboard-overview .dash-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .autopilot-dashboard-overview .dash-grid-2col {
    grid-template-columns: 1fr;
  }
  .autopilot-dashboard-overview .dash-schedule-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .autopilot-dashboard-overview .dash-prompt-summary {
    flex-direction: column;
  }
}

/* ── Responsive: Mobile ── */
@media (max-width: 600px) {
  .dashboard-account-summary-head,
  .dashboard-account-summary .dashboard-telegram-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-account-state-actions {
    justify-content: flex-start;
  }

  .dashboard-account-state {
    align-self: flex-start;
  }

  .dashboard-account-cards {
    grid-template-columns: 1fr;
  }

  .dashboard-account-summary .dashboard-telegram-cta button {
    width: 100%;
  }

  .autopilot-dashboard-overview .dash-stats {
    grid-template-columns: 1fr;
  }
  .autopilot-dashboard-overview .dash-schedule-grid {
    grid-template-columns: 1fr;
  }
  .autopilot-dashboard-overview .dash-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ════════════════════════════════════════════════════════════
   COMPACT SOURCES TAB (restyled discovery groups + connected)
   ════════════════════════════════════════════════════════════ */

/* ── Source discovery groups: compact layout ── */
[data-panel="tg-autopilot"] .source-discovery-groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

/* ── Candidate group: compact header + items ── */
[data-panel="tg-autopilot"] .source-candidate-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--surface);
}

[data-panel="tg-autopilot"] .source-candidate-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

[data-panel="tg-autopilot"] .source-candidate-group-head > strong {
  font-size: 13px;
  font-weight: 600;
}

[data-panel="tg-autopilot"] .source-candidate-group-head > small {
  font-size: 11px;
  color: var(--muted);
}

[data-panel="tg-autopilot"] .source-candidate-group > p {
  font-size: 11px;
  color: var(--muted);
  margin: 2px 0 6px;
  line-height: 1.3;
}

[data-panel="tg-autopilot"] .source-candidate-status {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(104,204,179,.15);
  color: var(--green-dark);
  white-space: nowrap;
}

/* ── Individual candidate: compact link + Add button ── */
[data-panel="tg-autopilot"] .source-discovery-suggestion-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin: 2px 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  min-height: auto;
}

[data-panel="tg-autopilot"] .source-discovery-suggestion-card:hover {
  background: rgba(0,0,0,.03);
}

[data-panel="tg-autopilot"] .source-discovery-suggestion-card strong {
  display: none;
}

[data-panel="tg-autopilot"] .source-discovery-suggestion-card p {
  display: none;
}

[data-panel="tg-autopilot"] .source-discovery-suggestion-card small {
  display: none;
}

[data-panel="tg-autopilot"] .source-discovery-suggestion-card code {
  flex: 1 1 0%;
  min-width: 0;
  font-size: 12px;
  padding: 3px 8px;
  background: transparent;
  color: var(--link);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 4px;
  border: none;
}

[data-panel="tg-autopilot"] .source-discovery-suggestion-card code:hover {
  text-decoration: underline;
  background: rgba(0,0,0,.02);
}

[data-panel="tg-autopilot"] .source-discovery-suggestion-card .source-scanner-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

[data-panel="tg-autopilot"] .source-discovery-suggestion-card .source-scanner-item-actions button {
  font-size: 11px;
  padding: 3px 10px;
  min-height: auto;
  border-radius: 4px;
  flex: none;
}

[data-panel="tg-autopilot"] .source-discovery-suggestion-card .source-scanner-item-actions button.primary {
  background: var(--green);
  color: #fff;
  border: none;
}

[data-panel="tg-autopilot"] .source-discovery-suggestion-card .source-scanner-item-actions button.secondary {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
}

/* ── Hide old big card placeholder ── */
[data-panel="tg-autopilot"] .source-discovery-suggestion-card.source-scanner-placeholder-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 8px;
  text-align: center;
}

[data-panel="tg-autopilot"] .source-discovery-suggestion-card.source-scanner-placeholder-card strong {
  display: block;
  font-size: 14px;
}

[data-panel="tg-autopilot"] .source-discovery-suggestion-card.source-scanner-placeholder-card p {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0;
}

/* ── Connected sources: compact rows ── */
[data-panel="tg-autopilot"] .connected-sources-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}

[data-panel="tg-autopilot"] .connected-source-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}

[data-panel="tg-autopilot"] .connected-source-card.connected-source-placeholder {
  background: transparent;
  border: 1px dashed var(--line);
  justify-content: center;
  padding: 16px;
  flex-direction: column;
}

[data-panel="tg-autopilot"] .connected-source-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  margin: 0;
}

[data-panel="tg-autopilot"] .connected-source-head strong {
  font-size: 12px;
  white-space: nowrap;
}

[data-panel="tg-autopilot"] .connected-source-head small,
[data-panel="tg-autopilot"] .connected-source-card small {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
}

[data-panel="tg-autopilot"] .connected-source-status {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

[data-panel="tg-autopilot"] .connected-source-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

[data-panel="tg-autopilot"] .connected-source-actions button {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  min-height: auto;
}

/* ── Source discovery search row: compact ── */
[data-panel="tg-autopilot"] .source-discovery-search-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
}

[data-panel="tg-autopilot"] .source-discovery-search-row label {
  flex: 1;
  min-width: 200px;
}

[data-panel="tg-autopilot"] .source-discovery-search-row .form-field span {
  font-size: 12px;
  margin-bottom: 2px;
}

[data-panel="tg-autopilot"] .source-discovery-search-row .form-field input,
[data-panel="tg-autopilot"] .source-discovery-search-row .form-field select {
  font-size: 13px;
  padding: 6px 10px;
}

[data-panel="tg-autopilot"] .source-discovery-search-row .form-field small {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Hide YouTube and Unsupported groups ── */
[data-panel="tg-autopilot"] .source-candidate-group:has(.not_supported_yet),
[data-panel="tg-autopilot"] .source-candidate-group:has(.connector_later) {
  display: none;
}

/* ── Candidate links: clickable URL + Copy button ── */
[data-panel="tg-autopilot"] .source-discovery-suggestion-card code {
  cursor: pointer;
  color: var(--link);
  text-decoration: none;
}

[data-panel="tg-autopilot"] .source-discovery-suggestion-card code:hover {
  text-decoration: underline;
}

[data-panel="tg-autopilot"] .source-discovery-suggestion-card .source-scanner-item-actions button.copy-btn {
  background: var(--surface, #f5f5f5);
  border: 1px solid var(--line, #ddd);
  color: var(--ink, #333);
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

[data-panel="tg-autopilot"] .source-discovery-suggestion-card .source-scanner-item-actions button.copy-btn:hover {
  background: rgba(79, 140, 255, 0.12);
  border-color: #4f8cff;
  color: #4f8cff;
}

/* ── Candidate card: hide all action buttons except Copy ── */
[data-panel="tg-autopilot"] .source-discovery-suggestion-card .source-scanner-item-actions button:not(.copy-btn) {
  display: none;
}

/* ── Hide Validate button in needs_validation groups ── */
/* Removed: was hiding entire actions row including Copy button.
   The :not(.copy-btn) rule above already hides Save/Preview/Ignore, leaving only Copy visible. */

/* ── Connected sources: compact rows with type icon + status ── */
[data-panel="tg-autopilot"] .connected-source-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  transition: opacity .2s;
}

[data-panel="tg-autopilot"] .connected-source-card.paused {
  opacity: .45;
}

[data-panel="tg-autopilot"] .connected-source-card.paused .connected-source-actions .delete-btn {
  display: inline-flex;
}

[data-panel="tg-autopilot"] .connected-source-type-icon {
  font-size: 16px;
  flex-shrink: 0;
}

[data-panel="tg-autopilot"] .connected-source-head {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 1px;
  margin: 0;
}

[data-panel="tg-autopilot"] .connected-source-head strong {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-panel="tg-autopilot"] .connected-source-url {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-panel="tg-autopilot"] .connected-source-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--muted);
}

[data-panel="tg-autopilot"] .connected-source-meta .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

[data-panel="tg-autopilot"] .connected-source-meta .dot.active {
  background: #22c55e;
}

[data-panel="tg-autopilot"] .connected-source-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}

[data-panel="tg-autopilot"] .connected-source-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

[data-panel="tg-autopilot"] .connected-source-toggle .slider {
  position: absolute;
  inset: 0;
  background: var(--line);
  border-radius: 20px;
  transition: .2s;
}

[data-panel="tg-autopilot"] .connected-source-toggle .slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  background: white;
  border-radius: 50%;
  transition: .2s;
}

[data-panel="tg-autopilot"] .connected-source-toggle input:checked + .slider {
  background: #22c55e;
}

[data-panel="tg-autopilot"] .connected-source-toggle input:checked + .slider::before {
  transform: translateX(16px);
}

[data-panel="tg-autopilot"] .connected-source-card .delete-btn {
  display: none;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px;
}

[data-panel="tg-autopilot"] .connected-source-card.paused .delete-btn {
  display: inline-flex;
}

/* ── Connected sources placeholder ── */
[data-panel="tg-autopilot"] .connected-source-card.connected-source-placeholder {
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 16px;
  border: 1px dashed var(--line);
  opacity: 1;
}

[data-panel="tg-autopilot"] .connected-source-card.connected-source-placeholder p {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0;
}

[data-panel="tg-autopilot"] .connected-source-card.connected-source-placeholder small {
  font-size: 11px;
  color: var(--muted);
}

/* ── Source scanner fetch results: show last 3 items ── */
[data-panel="tg-autopilot"] .source-scanner-item-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-panel="tg-autopilot"] .source-scanner-item-card {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}

[data-panel="tg-autopilot"] .source-scanner-item-card strong {
  font-size: 13px;
}

[data-panel="tg-autopilot"] .source-scanner-item-card p {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0;
}

[data-panel="tg-autopilot"] .source-scanner-item-card small {
  font-size: 10px;
  color: var(--muted);
}

/* ── Force hidden attribute to override all display styles ── */
[hidden] { display: none !important; }

/* ── Connected channels section (per-channel disconnect) ── */
[data-panel="tg-autopilot"] .telegram-connected-channels {
  border: 1px solid var(--mint-strong, #34c7b5);
  border-radius: 12px;
  background: var(--mint-soft, #e6f7f5);
  overflow: hidden;
}

[data-panel="tg-autopilot"] .connected-channels-list {
  display: flex;
  flex-direction: column;
}

[data-panel="tg-autopilot"] .connected-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(52,199,181,.15);
}

[data-panel="tg-autopilot"] .connected-channel-item:last-child {
  border-bottom: none;
}

[data-panel="tg-autopilot"] .connected-channel-item .channel-badge {
  font-size: 12px;
  padding: 3px 12px;
}

.channel-disconnect-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: all .15s;
  padding: 0;
  flex-shrink: 0;
}

.channel-disconnect-btn:hover {
  background: #fee;
  border-color: #e88;
  color: #c33;
}

.channel-disconnect-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ── Compact channel form ── */
[data-panel="tg-autopilot"] .telegram-connection-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

[data-panel="tg-autopilot"] .telegram-connection-title {
  flex: 1;
}

/* ── Verification error styling ── */
.verification-error,
[data-panel="tg-autopilot"] .verification-error {
  color: #c33 !important;
  font-weight: 500;
}

[data-panel="tg-autopilot"] [data-telegram-verification-message].verification-error {
  background: #fff5f5;
  border: 1px solid #fcc;
  border-radius: 8px;
  padding: 10px 14px;
  color: #c33 !important;
}

/* ── Token show/hide toggle ── */
.token-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.token-input-wrapper input {
  width: 100%;
  padding-right: 38px;
}

.token-toggle-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  border-radius: 6px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}

.token-toggle-btn:hover {
  color: var(--text);
  background: var(--border-light, rgba(128, 128, 128, 0.12));
}

.token-toggle-btn:focus-visible {
  outline: 2px solid var(--accent, #4f8cff);
  outline-offset: -2px;
}

/* ── Copy button in discovery cards ── */
/* Styled via [data-panel="tg-autopilot"] scoped selector above */

/* ── Inbox v2: date groups ── */
[data-panel="tg-autopilot"] .inbox-date-group {
  margin-bottom: var(--gap-6, 1.5rem);
}
[data-panel="tg-autopilot"] .inbox-date-header {
  font-size: 0.8rem;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0 0.5rem;
  border-bottom: 1px solid var(--border-light, rgba(128,128,128,0.15));
  margin-bottom: 0.5rem;
}

/* ── Inbox v2: bulk actions bar ── */
[data-panel="tg-autopilot"] .inbox-bulk-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary, rgba(128,128,128,0.05));
  border-radius: var(--radius-md, 6px);
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
[data-panel="tg-autopilot"] .inbox-bulk-actions button {
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
}
[data-panel="tg-autopilot"] .inbox-bulk-actions span {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: auto;
}

/* ── Inbox v2: language flags ── */
[data-panel="tg-autopilot"] .inbox-lang-flag {
  font-size: 0.9rem;
  margin-right: 0.25rem;
}

/* ── Inbox v2: quality badges ── */
[data-panel="tg-autopilot"] .status-badge.quality-full_text,
[data-panel="tg-autopilot"] .status-badge.full_text {
  background: #d4edda; color: #155724;
}
[data-panel="tg-autopilot"] .status-badge.quality-good,
[data-panel="tg-autopilot"] .status-badge.good {
  background: #d1ecf1; color: #0c5460;
}
[data-panel="tg-autopilot"] .status-badge.quality-summary,
[data-panel="tg-autopilot"] .status-badge.summary {
  background: #fff3cd; color: #856404;
}
[data-panel="tg-autopilot"] .status-badge.quality-title_only,
[data-panel="tg-autopilot"] .status-badge.title_only {
  background: #f8d7da; color: #721c24;
}

/* ── Inbox v2: filter reason in filtered view ── */
[data-panel="tg-autopilot"] .inbox-filter-reason {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  margin-top: 0.3rem;
}

/* ── Inbox v2: matched keywords ── */
[data-panel="tg-autopilot"] .inbox-filter-badge {
  background: #e8f5e9; color: #2e7d32; padding: 1px 6px; border-radius: 4px;
  font-weight: 600; font-size: 10px;
}
[data-panel="tg-autopilot"] .inbox-keywords {
  font-size: 0.75rem;
  padding: 1px 6px; border-radius: 4px;
  font-weight: 500;
}
[data-panel="tg-autopilot"] .inbox-keywords-include {
  background: #e3f2fd; color: #1565c0;
}
[data-panel="tg-autopilot"] .inbox-keywords-exclude {
  background: #ffebee; color: #c62828;
}

/* ── Inbox v2: title-only warning ── */
[data-panel="tg-autopilot"] .inbox-title-only-warning {
  color: var(--danger, #dc3545);
  font-weight: 500;
}

/* ── Onboarding Wizard ── */
.wizard-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
}
.wizard-overlay[hidden] { display: none; }
.wizard-modal {
  background: var(--bg, #fff);
  border-radius: 12px;
  width: min(680px, 95vw);
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.wizard-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-light);
}
.wizard-steps { display: flex; gap: 0.15rem; flex-wrap: wrap; }
.wizard-step {
  padding: 0.3rem 0.6rem; font-size: 0.7rem;
  border-radius: 4px; color: var(--text-muted);
  background: var(--bg-secondary);
  cursor: default;
}
.wizard-step.active {
  background: var(--accent, #4f8cff); color: #fff;
}
.wizard-step.done {
  background: #d4edda; color: #155724;
}
.wizard-close {
  background: none; border: none; font-size: 1.3rem;
  cursor: pointer; color: var(--text-muted);
  padding: 0.25rem 0.5rem;
}
.wizard-body { padding: 1.5rem; }
.wizard-panel { display: none; }
.wizard-panel.active { display: block; }
.wizard-panel h2 { margin-top: 0; font-size: 1.3rem; }
.wizard-panel p { color: var(--text-muted); margin-bottom: 1rem; }
.wizard-welcome-features {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem; margin: 1.25rem 0;
}
.wizard-feature {
  padding: 0.75rem; background: var(--bg-secondary);
  border-radius: 8px; font-size: 0.85rem; line-height: 1.4;
}
.wizard-form-group { margin-bottom: 1rem; }
.wizard-form-group label {
  display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.9rem;
}
.wizard-form-group input,
.wizard-form-group select {
  width: 100%; padding: 0.55rem 0.75rem;
  border: 1px solid var(--border-light); border-radius: 6px;
  font-size: 0.9rem;
}
.wizard-topics-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem; margin-bottom: 1rem;
}
.wizard-topic-chip {
  padding: 0.5rem; text-align: center;
  border: 1px solid var(--border-light); border-radius: 8px;
  cursor: pointer; font-size: 0.85rem;
  background: var(--bg); transition: all 0.15s;
}
.wizard-topic-chip:hover { border-color: var(--accent); }
.wizard-topic-chip.selected {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.wizard-sources-list {
  max-height: 300px; overflow-y: auto;
  border: 1px solid var(--border-light); border-radius: 8px;
  margin-bottom: 0.75rem;
}
.wizard-source-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border-light);
  font-size: 0.85rem;
}
.wizard-source-item:last-child { border-bottom: none; }
.wizard-source-item .wiz-src-name { font-weight: 600; }
.wizard-source-item .wiz-src-meta { color: var(--text-muted); font-size: 0.75rem; }
.wizard-source-item button {
  padding: 0.25rem 0.6rem; font-size: 0.8rem;
  border-radius: 4px; border: none; cursor: pointer;
}
.wizard-source-item button.subscribe { background: var(--accent); color: #fff; }
.wizard-source-item button.subscribed { background: #d4edda; color: #155724; }
.wizard-template-options { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.wizard-template-option {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.75rem; border: 1px solid var(--border-light);
  border-radius: 8px; cursor: pointer;
}
.wizard-template-option:hover { border-color: var(--accent); }
.wizard-template-option input[type="radio"] { align-self: flex-start; }
.wizard-template-option strong { font-size: 0.95rem; }
.wizard-template-option small { color: var(--text-muted); font-size: 0.8rem; }
.wizard-done-checklist ul { list-style: none; padding: 0; }
.wizard-done-checklist li { padding: 0.3rem 0; font-size: 0.9rem; }
.wizard-prev, .wizard-next, .wizard-finish {
  padding: 0.55rem 1.2rem; border-radius: 6px;
  font-size: 0.9rem; cursor: pointer; border: none;
  margin-top: 1rem;
}
.wizard-prev { margin-right: 0.5rem; }
.wizard-next, .wizard-finish { background: var(--accent); color: #fff; }
.wizard-next:hover, .wizard-finish:hover { opacity: 0.9; }

@media (max-width: 600px) {
  .wizard-welcome-features { grid-template-columns: 1fr; }
  .wizard-topics-grid { grid-template-columns: repeat(2, 1fr); }
  .wizard-steps { gap: 0.1rem; }
  .wizard-step { padding: 0.2rem 0.35rem; font-size: 0.65rem; }
}

/* ═══ Catalog Toast ═══ */
.catalog-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #1a3a2a;
  color: #e8f5e9;
  padding: 0.6rem 1.5rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  transition: transform 0.3s ease;
  pointer-events: none;
}
.catalog-toast.show {
  transform: translateX(-50%) translateY(0);
}

/* ═══ Source Type Selection Cards ═══ */
[data-panel="tg-autopilot"] .source-type-cards {
  background: var(--paper);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border, #dce5e3);
}
[data-panel="tg-autopilot"] .source-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}
[data-panel="tg-autopilot"] .source-type-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border, #dce5e3);
  border-radius: 8px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}
[data-panel="tg-autopilot"] .source-type-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-color: var(--accent, #2563eb);
}
[data-panel="tg-autopilot"] .stc-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 2.2rem;
  text-align: center;
  line-height: 1;
}
[data-panel="tg-autopilot"] .stc-body {
  flex: 1;
  min-width: 0;
}
[data-panel="tg-autopilot"] .stc-body strong {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
}
[data-panel="tg-autopilot"] .stc-body p {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0 0 0.35rem;
  line-height: 1.4;
}
[data-panel="tg-autopilot"] .stc-body code {
  font-size: 0.7rem;
  background: #e8eaed;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}
[data-panel="tg-autopilot"] .stc-body small {
  font-size: 0.68rem;
  color: var(--muted);
  display: block;
  line-height: 1.4;
}
[data-panel="tg-autopilot"] .stc-action {
  flex-shrink: 0;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--accent, #2563eb);
  border-radius: 6px;
  background: var(--accent, #2563eb);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  align-self: center;
  transition: opacity 0.15s;
}
[data-panel="tg-autopilot"] .stc-action:hover {
  opacity: 0.9;
}

@media (max-width: 600px) {
  [data-panel="tg-autopilot"] .source-type-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══ Verified Source Catalog Browser ═══ */
[data-panel="tg-autopilot"] .source-catalog-section {
  background: var(--paper);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border, #dce5e3);
}
[data-panel="tg-autopilot"] .source-catalog-header {
  margin-bottom: 0.75rem;
}
[data-panel="tg-autopilot"] .source-catalog-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}
[data-panel="tg-autopilot"] .source-catalog-filters {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 1rem;
}
[data-panel="tg-autopilot"] .source-catalog-filter {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.75rem;
  color: var(--muted);
}
[data-panel="tg-autopilot"] .source-catalog-filter select,
[data-panel="tg-autopilot"] .source-catalog-filter input {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border, #dce5e3);
  border-radius: 6px;
  font-size: 0.8rem;
  background: #fff;
  min-width: 120px;
}
[data-panel="tg-autopilot"] .source-catalog-filter-search input {
  min-width: 160px;
}
[data-panel="tg-autopilot"] .source-catalog-refresh {
  background: none;
  border: 1px solid var(--border, #dce5e3);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}
[data-panel="tg-autopilot"] .source-catalog-refresh:hover {
  background: var(--bg);
}
[data-panel="tg-autopilot"] .source-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
[data-panel="tg-autopilot"] .source-catalog-loading,
[data-panel="tg-autopilot"] .source-catalog-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  color: var(--muted);
  font-size: 0.85rem;
}
[data-panel="tg-autopilot"] .source-catalog-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--bg);
  border: 1px solid var(--border, #dce5e3);
  border-radius: 8px;
  padding: 0.75rem;
  transition: box-shadow 0.15s;
}
[data-panel="tg-autopilot"] .source-catalog-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-panel="tg-autopilot"] .src-card-top {
  margin-bottom: 0.5rem;
}
[data-panel="tg-autopilot"] .src-card-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink);
  margin-bottom: 0.15rem;
}
[data-panel="tg-autopilot"] .src-verified {
  color: #16a34a;
  font-size: 0.75rem;
  margin-left: 0.25rem;
}
[data-panel="tg-autopilot"] .src-card-domain {
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 0.15rem;
}
[data-panel="tg-autopilot"] .src-card-url {
  font-size: 0.68rem;
  color: var(--accent, #2563eb);
  margin-bottom: 0.1rem;
  font-weight: 500;
}
[data-panel="tg-autopilot"] .src-card-length {
  font-size: 0.68rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
  font-style: italic;
}
[data-panel="tg-autopilot"] .src-card-meta {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
[data-panel="tg-autopilot"] .src-card-badge {
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: #e8f5e9;
  color: #2e7d32;
  white-space: nowrap;
}
[data-panel="tg-autopilot"] .src-card-badge:has([class]) { /* keep */ }
[data-panel="tg-autopilot"] .src-card-rate {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
}
[data-panel="tg-autopilot"] .src-card-topics {
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 0.2rem;
  text-transform: capitalize;
}
[data-panel="tg-autopilot"] .src-card-add {
  width: 100%;
  padding: 0.35rem;
  border: 1px solid var(--accent, #2563eb);
  border-radius: 6px;
  background: var(--accent, #2563eb);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
[data-panel="tg-autopilot"] .src-card-add:hover {
  opacity: 0.9;
}
[data-panel="tg-autopilot"] .src-card-add.subscribed {
  background: #e8f5e9;
  color: #2e7d32;
  border-color: #a5d6a7;
  cursor: default;
  opacity: 0.85;
}
[data-panel="tg-autopilot"] .source-catalog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--muted);
}
[data-panel="tg-autopilot"] .source-catalog-show-more {
  background: none;
  border: 1px solid var(--border, #dce5e3);
  border-radius: 6px;
  padding: 0.3rem 0.8rem;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--accent, #2563eb);
}
[data-panel="tg-autopilot"] .source-catalog-show-more:hover {
  background: var(--bg);
}

@media (max-width: 600px) {
  [data-panel="tg-autopilot"] .source-catalog-grid {
    grid-template-columns: 1fr;
  }
  [data-panel="tg-autopilot"] .source-catalog-filters {
    flex-direction: column;
  }
  [data-panel="tg-autopilot"] .source-catalog-filter select,
  [data-panel="tg-autopilot"] .source-catalog-filter input {
    width: 100%;
  }
}

/* ═══ Screen 3: Source Validation ═══ */
[data-panel="tg-autopilot"] .source-validation-section {
  background: var(--paper);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border, #dce5e3);
}
[data-panel="tg-autopilot"] .source-validation-search-row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
[data-panel="tg-autopilot"] .validation-search-field {
  flex: 1;
  min-width: 200px;
}
[data-panel="tg-autopilot"] .source-validation-results {
  margin-top: 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border, #dce5e3);
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
}
[data-panel="tg-autopilot"] .sv-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border, #dce5e3);
  cursor: pointer;
  transition: background 0.1s;
}
[data-panel="tg-autopilot"] .sv-result-item:last-child { border-bottom: none; }
[data-panel="tg-autopilot"] .sv-result-item:hover { background: #e8f0fe; }
[data-panel="tg-autopilot"] .sv-result-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
[data-panel="tg-autopilot"] .sv-result-info strong { font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-panel="tg-autopilot"] .sv-result-info small { font-size: 0.68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-panel="tg-autopilot"] .sv-result-reason { font-size: 0.65rem; color: var(--accent, #2563eb); margin-top: 0.1rem; }
[data-panel="tg-autopilot"] .sv-result-meta { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
[data-panel="tg-autopilot"] .sv-result-confidence {
  font-size: 0.62rem; padding: 0.1rem 0.35rem; border-radius: 4px;
  background: #e8f0fe; color: var(--accent, #2563eb); white-space: nowrap;
}
[data-panel="tg-autopilot"] .sv-result-pick {
  padding: 0.25rem 0.6rem; font-size: 0.7rem; border: 1px solid var(--accent, #2563eb);
  border-radius: 5px; background: var(--accent, #2563eb); color: #fff; cursor: pointer; flex-shrink: 0;
}
[data-panel="tg-autopilot"] .sv-result-pick:hover { opacity: 0.85; }
[data-panel="tg-autopilot"] .sv-result-item.sv-selected {
  background: rgba(37, 99, 235, 0.08); border-color: var(--accent, #2563eb);
}
[data-panel="tg-autopilot"] .sv-result-item.sv-selected .sv-result-pick {
  background: #16a34a; border-color: #16a34a;
}
[data-panel="tg-autopilot"] .sv-results-header {
  font-size: 0.72rem; color: var(--muted); padding: 0.3rem 0.75rem 0.5rem;
  border-bottom: 1px solid var(--border, #dce5e3);
}
[data-panel="tg-autopilot"] .source-validation-url-row {
  display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; margin-top: 1rem;
}
[data-panel="tg-autopilot"] .validation-url-field { flex: 1; min-width: 250px; }
[data-panel="tg-autopilot"] .validation-url-field small { font-size: 0.68rem; color: var(--muted); margin-top: 0.15rem; }

[data-panel="tg-autopilot"] .source-validation-preview { margin-top: 0.75rem; }
[data-panel="tg-autopilot"] .sv-preview-card {
  background: var(--bg); border: 1px solid var(--border, #dce5e3); border-radius: 8px; padding: 0.85rem;
}
[data-panel="tg-autopilot"] .sv-preview-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;
}
[data-panel="tg-autopilot"] .sv-preview-head strong { font-size: 0.9rem; color: #16a34a; }
[data-panel="tg-autopilot"] .sv-preview-head span { font-size: 0.72rem; color: var(--muted); }
[data-panel="tg-autopilot"] .sv-preview-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; margin-bottom: 0.6rem;
}
[data-panel="tg-autopilot"] .sv-stat {
  display: flex; flex-direction: column; background: #fff; border-radius: 6px; padding: 0.4rem 0.5rem;
  border: 1px solid var(--border, #dce5e3);
}
[data-panel="tg-autopilot"] .sv-stat span { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; }
[data-panel="tg-autopilot"] .sv-stat strong { font-size: 0.85rem; margin-top: 0.1rem; }
[data-panel="tg-autopilot"] .sv-preview-items { margin-top: 0.5rem; }
[data-panel="tg-autopilot"] .sv-preview-items small { font-size: 0.68rem; color: var(--muted); display: block; margin-bottom: 0.3rem; }
[data-panel="tg-autopilot"] .sv-preview-item {
  display: flex; justify-content: space-between; align-items: center; padding: 0.35rem 0.5rem;
  background: #fff; border-radius: 5px; margin-bottom: 0.25rem; cursor: pointer; transition: background 0.1s;
}
[data-panel="tg-autopilot"] .sv-preview-item:hover { background: #e8f0fe; }
[data-panel="tg-autopilot"] .sv-preview-item-title { font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 75%; }
[data-panel="tg-autopilot"] .sv-preview-item-len { font-size: 0.65rem; color: var(--muted); flex-shrink: 0; }

[data-panel="tg-autopilot"] .source-validation-subscribe {
  display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; margin-top: 0.75rem;
  padding-top: 0.75rem; border-top: 1px solid var(--border, #dce5e3);
}
[data-panel="tg-autopilot"] .source-validation-action-row { margin-top: auto; }

/* Fulltext popup */
.sv-fulltext-popup {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 10000;
}
.sv-fulltext-inner {
  background: #fff; border-radius: 12px; padding: 1.5rem; max-width: 680px; max-height: 80vh; overflow-y: auto; width: 90%; position: relative;
}
.sv-fulltext-close {
  position: absolute; top: 0.5rem; right: 0.75rem; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--muted);
}
.sv-fulltext-body { font-size: 0.85rem; line-height: 1.6; white-space: pre-wrap; color: var(--ink); }

/* ═══ Screen 4: Connected Sources New ═══ */
[data-panel="tg-autopilot"] .connected-sources-new {
  background: var(--paper); border-radius: 10px; padding: 1.25rem; margin-bottom: 1.5rem;
  border: 1px solid var(--border, #dce5e3);
}
[data-panel="tg-autopilot"] .connected-sources-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;
}
[data-panel="tg-autopilot"] .connected-sources-head small { font-size: 0.7rem; color: var(--muted); display: block; }
[data-panel="tg-autopilot"] .connected-sources-head strong { font-size: 0.95rem; }
[data-panel="tg-autopilot"] .connected-sources-head span { font-size: 0.75rem; color: var(--muted); }
[data-panel="tg-autopilot"] .connected-source-new-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.75rem;
  background: var(--bg); border: 1px solid var(--border, #dce5e3); border-radius: 8px; margin-bottom: 0.5rem;
}
[data-panel="tg-autopilot"] .cs-card-header { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 180px; }
[data-panel="tg-autopilot"] .cs-card-title strong { font-size: 0.85rem; display: block; }
[data-panel="tg-autopilot"] .cs-card-title small { font-size: 0.68rem; color: var(--muted); display: block; }
[data-panel="tg-autopilot"] .cs-status { font-size: 0.65rem; padding: 0.15rem 0.5rem; border-radius: 4px; font-weight: 600; flex-shrink: 0; }
[data-panel="tg-autopilot"] .cs-status.active { background: #e8f5e9; color: #2e7d32; }
[data-panel="tg-autopilot"] .cs-status.paused { background: #fff3e0; color: #e65100; }
[data-panel="tg-autopilot"] .cs-card-body { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
[data-panel="tg-autopilot"] .cs-preview { position: relative; }
[data-panel="tg-autopilot"] .cs-preview-select { padding: 0.3rem 0.5rem; border: 1px solid var(--border, #dce5e3); border-radius: 6px; font-size: 0.72rem; min-width: 160px; background: #fff; }
[data-panel="tg-autopilot"] .cs-preview-dropdown { position: absolute; top: 100%; left: 0; z-index: 10; background: #fff; border: 1px solid var(--border, #dce5e3); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); min-width: 320px; max-height: 300px; overflow-y: auto; margin-top: 0.25rem; }
[data-panel="tg-autopilot"] .cs-preview-dropdown-body { padding: 0.75rem; font-size: 0.78rem; line-height: 1.5; white-space: pre-wrap; }
[data-panel="tg-autopilot"] .cs-preview-close { display: block; width: 100%; padding: 0.3rem; border: none; border-top: 1px solid var(--border, #dce5e3); background: var(--bg); font-size: 0.7rem; cursor: pointer; color: var(--muted); }
[data-panel="tg-autopilot"] .cs-frequency { display: flex; align-items: center; gap: 0.35rem; }
[data-panel="tg-autopilot"] .cs-frequency label { font-size: 0.68rem; color: var(--muted); }
[data-panel="tg-autopilot"] .cs-freq-select { padding: 0.3rem 0.4rem; border: 1px solid var(--border, #dce5e3); border-radius: 6px; font-size: 0.72rem; background: #fff; }
[data-panel="tg-autopilot"] .cs-save-btn {
  padding: 0.3rem 0.7rem; border: 1px solid var(--accent, #2563eb); border-radius: 6px;
  background: var(--accent, #2563eb); color: #fff; font-size: 0.72rem; font-weight: 600; cursor: pointer;
}
[data-panel="tg-autopilot"] .cs-save-btn:hover { opacity: 0.9; }
[data-panel="tg-autopilot"] .cs-card-actions { flex-shrink: 0; }
[data-panel="tg-autopilot"] .cs-delete-btn {
  padding: 0.3rem 0.6rem; border: 1px solid #e0e0e0; border-radius: 6px; background: none;
  font-size: 0.7rem; cursor: pointer; color: var(--muted);
}
[data-panel="tg-autopilot"] .cs-delete-btn:hover { background: #fce4ec; color: #c62828; border-color: #ef9a9a; }
[data-panel="tg-autopilot"] .connected-source-placeholder {
  text-align: center; padding: 2rem; color: var(--muted); display: block;
}
[data-panel="tg-autopilot"] .connected-source-placeholder strong { display: block; font-size: 0.9rem; margin-bottom: 0.3rem; }
[data-panel="tg-autopilot"] .connected-source-placeholder p { font-size: 0.78rem; }

@media (max-width: 600px) {
  [data-panel="tg-autopilot"] .source-validation-search-row { flex-direction: column; }
  [data-panel="tg-autopilot"] .validation-search-field { min-width: 100%; }
  [data-panel="tg-autopilot"] .connected-source-new-card { flex-direction: column; align-items: flex-start; }
  [data-panel="tg-autopilot"] .cs-card-body { flex-direction: column; align-items: flex-start; width: 100%; }
  [data-panel="tg-autopilot"] .cs-frequency { width: 100%; }
  [data-panel="tg-autopilot"] .source-type-grid { grid-template-columns: 1fr; }
}

/* ═══ Delete Confirmation Modal ═══ */
.cs-delete-modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.55); z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  animation: deleteModalFadeIn 0.2s ease;
}
@keyframes deleteModalFadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
.cs-delete-modal {
  background: var(--card-bg, #1e1e2e); border: 1px solid var(--border, #333);
  border-radius: 14px; padding: 28px 32px; max-width: 420px; width: 90%;
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: deleteModalSlideUp 0.25s ease;
}
@keyframes deleteModalSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.cs-delete-modal-icon { font-size: 40px; margin-bottom: 12px; }
.cs-delete-modal h3 { margin: 0 0 8px; font-size: 18px; color: var(--text, #e0e0e0); }
.cs-delete-modal p { margin: 0 0 6px; font-size: 14px; color: var(--text-secondary, #999); line-height: 1.5; }
.cs-delete-modal-hint { font-size: 12px !important; color: var(--text-tertiary, #666) !important; margin-top: 4px !important; }
.cs-delete-modal-actions { display: flex; gap: 12px; margin-top: 20px; justify-content: center; }
.cs-delete-modal-cancel {
  padding: 10px 24px; border-radius: 8px; border: 1px solid var(--border, #444);
  background: transparent; color: var(--text, #ccc); cursor: pointer;
  font-size: 14px; transition: all 0.15s;
}
.cs-delete-modal-cancel:hover { background: var(--hover, #2a2a3a); }
.cs-delete-modal-confirm {
  padding: 10px 24px; border-radius: 8px; border: none;
  background: #e53e3e; color: #fff; cursor: pointer;
  font-size: 14px; font-weight: 600; transition: all 0.15s;
}
.cs-delete-modal-confirm:hover { background: #c53030; }


/* ═══════════════════════════════════════════════════════════════
   SOCIAL REELS WORKSPACE — Full design system
   Matches TG Autopilot visual language exactly
   ═══════════════════════════════════════════════════════════════ */

/* ── Page head ── */
[data-panel="social-posting"] .page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
[data-panel="social-posting"] .page-head small {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--teal-dark);
  display: block;
  margin-bottom: 3px;
}
[data-panel="social-posting"] .page-head h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--ink);
  line-height: 1.2;
}
[data-panel="social-posting"] .page-head p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
  max-width: 520px;
}

/* ── Status row ── */
[data-panel="social-posting"] .workspace-status-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: var(--panel-shadow);
  margin-bottom: 20px;
}
[data-panel="social-posting"] .workspace-status-row small {
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin-bottom: 2px;
}
[data-panel="social-posting"] .workspace-status-row strong {
  font-size: 14px;
  font-weight: 600;
  display: block;
  color: var(--ink);
  margin-bottom: 2px;
}
[data-panel="social-posting"] .workspace-status-row span {
  font-size: 11px;
  color: var(--muted);
}

/* ── Tabbar ── */
[data-panel="social-posting"] .tabbar {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
[data-panel="social-posting"] .tabbar button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: color .15s, border-color .15s, background .15s;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
[data-panel="social-posting"] .tabbar button:hover {
  color: var(--ink);
  background: var(--surface-soft, rgba(0,0,0,.04));
}
[data-panel="social-posting"] .tabbar button.is-active {
  color: var(--teal-dark);
  border-bottom-color: var(--teal-dark);
  font-weight: 600;
}
[data-panel="social-posting"] .tabbar button svg {
  opacity: .7;
  flex-shrink: 0;
}
[data-panel="social-posting"] .tabbar button.is-active svg {
  opacity: 1;
}

/* ── Overview / dashboard (reuse autopilot classes + override scope) ── */
[data-panel="social-posting"] .social-posting-overview .dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
[data-panel="social-posting"] .social-posting-overview .dash-header h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
[data-panel="social-posting"] .social-posting-overview .dash-header p {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 0;
}
[data-panel="social-posting"] .social-posting-overview .dash-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
[data-panel="social-posting"] .social-posting-overview .dash-status-badge {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffc107;
}
[data-panel="social-posting"] .social-posting-overview .dash-status-badge.online {
  background: #d4edda;
  color: #155724;
  border-color: #28a745;
}
/* Buttons */
[data-panel="social-posting"] .dash-btn,
[data-panel="social-posting"] .social-posting-overview .dash-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all .15s;
}
[data-panel="social-posting"] .dash-btn-primary {
  background: var(--button-dark);
  color: var(--button-dark-text);
}
[data-panel="social-posting"] .dash-btn-primary:hover { opacity: .88; }
[data-panel="social-posting"] .dash-btn-secondary {
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--line) !important;
}
[data-panel="social-posting"] .dash-btn-secondary:hover { border-color: var(--teal-dark) !important; }
[data-panel="social-posting"] .dash-link-btn {
  background: none; border: none;
  color: var(--teal-dark);
  cursor: pointer; font-size: inherit;
  padding: 0; text-decoration: underline;
}
/* Stats row */
[data-panel="social-posting"] .dash-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
[data-panel="social-posting"] .dash-stat-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: var(--panel-shadow);
  transition: box-shadow .15s;
}
[data-panel="social-posting"] .dash-stat-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
[data-panel="social-posting"] .dash-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
[data-panel="social-posting"] .dash-stat-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
[data-panel="social-posting"] .dash-stat-change {
  font-size: 11px;
  margin-top: 4px;
  color: var(--muted);
}
/* 2-col grid */
[data-panel="social-posting"] .dash-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
/* Cards */
[data-panel="social-posting"] .dash-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--panel-shadow);
}
[data-panel="social-posting"] .dash-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
[data-panel="social-posting"] .dash-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
[data-panel="social-posting"] .dash-card-action {
  background: none; border: none;
  font-size: 12px;
  color: var(--teal-dark);
  cursor: pointer; padding: 0;
  font-weight: 500;
}
[data-panel="social-posting"] .dash-card-action:hover { text-decoration: underline; }

/* ── Account status dot (connected/disconnected indicator) ── */
.account-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.account-status-dot.connected {
  background: #22c55e;
  box-shadow: 0 0 4px #22c55e88;
}
.account-status-dot.disconnected {
  background: #9ca3af;
}

/* ── Social Reels Dashboard embedded in main dashboard ── */
.social-reels-dashboard-overview .dash-status-badge,
[data-panel="social-posting"] .social-posting-overview .dash-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: #f3f4f6;
  color: #6b7280;
}
.social-reels-dashboard-overview .dash-status-badge.online,
[data-panel="social-posting"] .social-posting-overview .dash-status-badge.online {
  background: #ecfdf5;
  color: #059669;
}

.social-reels-dashboard-overview .dash-stat-value,
[data-panel="social-posting"] .dash-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.social-reels-dashboard-overview .dash-grid-2col,
[data-panel="social-posting"] .dash-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.social-reels-dashboard-overview .dash-card,
[data-panel="social-posting"] .dash-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}
.social-reels-dashboard-overview .dash-card-header,
[data-panel="social-posting"] .dash-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.social-reels-dashboard-overview .dash-card-title,
[data-panel="social-posting"] .dash-card-title {
  font-weight: 600;
  font-size: 14px;
}
.social-reels-dashboard-overview .dash-card-action,
[data-panel="social-posting"] .dash-card-action {
  font-size: 12px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 500;
}
.social-reels-dashboard-overview .dash-card-action:hover,
[data-panel="social-posting"] .dash-card-action:hover { text-decoration: underline; }
.social-reels-dashboard-overview .social-platform-status-list,
[data-panel="social-posting"] .social-platform-status-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.social-reels-dashboard-overview .social-platform-status-row,
[data-panel="social-posting"] .social-platform-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.social-reels-dashboard-overview .social-platform-status-row:last-child,
[data-panel="social-posting"] .social-platform-status-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.social-reels-dashboard-overview .social-platform-status-row span:nth-child(2),
[data-panel="social-posting"] .social-platform-status-row span:nth-child(2) {
  flex: 1;
  font-weight: 500;
  color: var(--ink);
}
.social-reels-dashboard-overview .platform-status-text,
[data-panel="social-posting"] .platform-status-text {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}
.social-reels-dashboard-overview .dash-header,
[data-panel="social-posting"] .social-posting-overview .dash-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.social-reels-dashboard-overview .dash-header h2,
[data-panel="social-posting"] .social-posting-overview .dash-header h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
}
.social-reels-dashboard-overview .dash-header p,
[data-panel="social-posting"] .social-posting-overview .dash-header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.social-reels-dashboard-overview .dash-btn,
[data-panel="social-posting"] .social-posting-overview .dash-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all .15s;
}
.social-reels-dashboard-overview .dash-btn-primary,
[data-panel="social-posting"] .dash-btn-primary {
  background: var(--button-dark);
  color: var(--button-dark-text);
}
.social-reels-dashboard-overview .dash-btn-primary:hover,
[data-panel="social-posting"] .dash-btn-primary:hover { opacity: .88; }
.social-reels-dashboard-overview .dash-btn-secondary,
[data-panel="social-posting"] .dash-btn-secondary {
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.social-reels-dashboard-overview .dash-btn-secondary:hover,
[data-panel="social-posting"] .dash-btn-secondary:hover { border-color: var(--teal-dark) !important; }
.social-reels-dashboard-overview .dash-link-btn,
[data-panel="social-posting"] .dash-link-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  text-decoration: underline;
}
.social-reels-dashboard-overview .dash-stats,
[data-panel="social-posting"] .social-posting-overview .dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.social-reels-dashboard-overview .dash-stat-card,
[data-panel="social-posting"] .social-posting-overview .dash-stat-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
}
.social-reels-dashboard-overview .dash-stat-label,
[data-panel="social-posting"] .social-posting-overview .dash-stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.social-reels-dashboard-overview .dash-stat-change,
[data-panel="social-posting"] .social-posting-overview .dash-stat-change {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.social-reels-dashboard-overview .dash-actions,
[data-panel="social-posting"] .social-posting-overview .dash-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .social-reels-dashboard-overview .dash-grid-2col,
  [data-panel="social-posting"] .dash-grid-2col {
    grid-template-columns: 1fr;
  }
  .social-reels-dashboard-overview .dash-stats,
  [data-panel="social-posting"] .social-posting-overview .dash-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Platform status list (in overview card) ── */
[data-panel="social-posting"] .social-platform-status-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
[data-panel="social-posting"] .social-platform-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
[data-panel="social-posting"] .social-platform-status-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
[data-panel="social-posting"] .social-platform-status-row span:nth-child(2) {
  flex: 1;
  font-weight: 500;
  color: var(--ink);
}
[data-panel="social-posting"] .platform-status-text {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}

/* ── Platform cards (Accounts tab) ── */
[data-panel="social-posting"] .cards {
  display: grid;
  gap: 16px;
  margin-bottom: 20px;
}
[data-panel="social-posting"] .cards.cards-3 {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
[data-panel="social-posting"] .platform-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--panel-shadow);
  transition: box-shadow .15s, border-color .15s;
}
[data-panel="social-posting"] .platform-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.09);
  border-color: var(--teal-dark, #0d7c66);
}
[data-panel="social-posting"] .platform-card strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
[data-panel="social-posting"] .platform-card p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  flex: 1;
  margin: 0;
}
[data-panel="social-posting"] .platform-card-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
[data-panel="social-posting"] .plan-upgrade-block {
  margin-top: 6px;
}
[data-panel="social-posting"] .plan-upgrade-block button {
  width: 100%;
}

/* ── Upload zone ── */
[data-panel="social-posting"] .social-upload-zone {
  border: 2px dashed var(--line);
  border-radius: 16px;
  padding: 48px 32px;
  text-align: center;
  background: var(--surface-soft, rgba(0,0,0,.02));
  transition: border-color .2s, background .2s;
  cursor: pointer;
  max-width: 560px;
  margin: 0 auto 24px;
}
[data-panel="social-posting"] .social-upload-zone:hover,
[data-panel="social-posting"] .social-upload-zone.dragover {
  border-color: var(--teal-dark);
  background: rgba(13,124,102,.04);
}
[data-panel="social-posting"] .social-upload-zone h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin: 12px 0 6px;
}
[data-panel="social-posting"] .social-upload-zone p {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 20px;
}
[data-panel="social-posting"] .social-upload-zone svg {
  color: var(--muted);
}
[data-panel="social-posting"] .upload-preview-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--panel-shadow);
  max-width: 720px;
}
[data-panel="social-posting"] .upload-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
[data-panel="social-posting"] .upload-info-row:last-child { border-bottom: none; }
[data-panel="social-posting"] .upload-info-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .4px;
}

/* ── Generate bar ── */
[data-panel="social-posting"] .social-generate-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  box-shadow: var(--panel-shadow);
}
[data-panel="social-posting"] .generate-for-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-right: 4px;
}
[data-panel="social-posting"] .social-platform-check {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 7px;
  transition: background .12s;
}
[data-panel="social-posting"] .social-platform-check:hover { background: var(--surface-soft, rgba(0,0,0,.04)); }
[data-panel="social-posting"] .social-platform-check input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--teal-dark); }

/* ── Platform inner tabs ── */
[data-panel="social-posting"] .platform-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
[data-panel="social-posting"] .platform-tab-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all .14s;
}
[data-panel="social-posting"] .platform-tab-btn:hover {
  border-color: var(--teal-dark);
  color: var(--teal-dark);
}
[data-panel="social-posting"] .platform-tab-btn.is-active {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: #fff;
  font-weight: 600;
}

/* ── Platform editor ── */
[data-panel="social-posting"] .social-platform-editor {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--panel-shadow);
}
[data-panel="social-posting"] .platform-editor-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
[data-panel="social-posting"] .platform-editor-header > div {
  flex: 1;
}
[data-panel="social-posting"] .platform-editor-header strong {
  font-size: 14px;
  font-weight: 700;
  display: block;
  color: var(--ink);
}
[data-panel="social-posting"] .platform-editor-header small {
  font-size: 11px;
  color: var(--muted);
}
[data-panel="social-posting"] .platform-editor-preview {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  align-items: start;
}
[data-panel="social-posting"] .phone-mockup {
  width: 112px;
  background: var(--ink, #111);
  border-radius: 20px;
  padding: 10px 7px;
  box-shadow: 0 8px 28px rgba(0,0,0,.25), inset 0 0 0 1.5px rgba(255,255,255,.08);
  flex-shrink: 0;
}
[data-panel="social-posting"] .phone-screen {
  border-radius: 13px;
  overflow: hidden;
  background: #1a1a1a;
  aspect-ratio: 9/16;
  position: relative;
}
[data-panel="social-posting"] .reel-preview {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
}
[data-panel="social-posting"] .reel-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: linear-gradient(160deg,#2a2a3e,#111);
  opacity: .6;
}
[data-panel="social-posting"] .reel-caption-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 6px 7px;
  font-size: 8px;
  color: rgba(255,255,255,.85);
  line-height: 1.3;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 100%);
  word-break: break-word;
}
[data-panel="social-posting"] .platform-editor-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-panel="social-posting"] .platform-caption {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border, var(--line));
  background: var(--input-bg, var(--surface));
  color: var(--text, var(--ink));
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  font-family: inherit;
  transition: border-color .15s;
  box-sizing: border-box;
}
[data-panel="social-posting"] .platform-caption:focus {
  outline: none;
  border-color: var(--teal-dark);
  box-shadow: 0 0 0 3px rgba(13,124,102,.1);
}
[data-panel="social-posting"] .caption-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--muted);
}
[data-panel="social-posting"] .caption-tag-count {
  color: var(--teal-dark);
  font-weight: 600;
}
[data-panel="social-posting"] .platform-title-input {
  transition: border-color .15s;
}
[data-panel="social-posting"] .platform-title-input:focus {
  outline: none;
  border-color: var(--teal-dark) !important;
  box-shadow: 0 0 0 3px rgba(13,124,102,.1);
}

/* ── Schedule card ── */
[data-panel="social-posting"] .schedule-datetime {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 4px;
}

/* ── History ── */
[data-panel="social-posting"] .publish-history-list {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--panel-shadow);
  min-height: 120px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  [data-panel="social-posting"] .workspace-status-row {
    grid-template-columns: repeat(2, 1fr);
  }
  [data-panel="social-posting"] .dash-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  [data-panel="social-posting"] .dash-grid-2col {
    grid-template-columns: 1fr;
  }
  [data-panel="social-posting"] .platform-editor-preview {
    grid-template-columns: 1fr;
  }
  [data-panel="social-posting"] .phone-mockup { display: none; }
  [data-panel="social-posting"] .upload-preview-inner {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  [data-panel="social-posting"] .workspace-status-row {
    grid-template-columns: 1fr 1fr;
  }
  [data-panel="social-posting"] .tabbar button { font-size: 11px; padding: 7px 10px; }
}

/* ── Dark theme ── */
body[data-theme="dark"] [data-panel="social-posting"] .tg-hint-step {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
}
body[data-theme="dark"] [data-panel="social-posting"] .tg-hint-step:hover {
  background: rgba(13,124,102,.12);
  border-color: var(--teal-dark);
}
body[data-theme="dark"] [data-panel="social-posting"] .social-upload-zone {
  background: rgba(255,255,255,.03);
}

/* ── Dashboard Social Reels CTA ── */
.dashboard-social-cta {
  border-color: rgba(13,124,102,.25);
  background: linear-gradient(135deg, rgba(13,124,102,.04) 0%, var(--paper) 100%);
  margin-top: -6px;
}
.dashboard-social-cta strong {
  color: var(--teal-dark, #0d7c66);
}