/* ========================================
   Screen-specific Layouts
   ======================================== */

/* --- Screen Container --- */
.screen { display: none; animation: fadeInUp var(--transition-slow) ease-out; }
.screen.active { display: block; }

/* --- App Header --- */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) 0; margin-bottom: var(--space-2);
}
.app-logo { display: flex; align-items: center; gap: var(--space-3); }
.app-logo-icon { font-size: 28px; }
.app-logo-text { font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: -0.02em; }
.app-logo-badge { font-size: var(--text-xs); color: var(--accent-primary); font-weight: var(--weight-medium); background: rgba(124,92,252,0.15); padding: 2px 8px; border-radius: var(--radius-full); }

/* Settings gear button in header */
.btn-settings-header {
  background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: 6px 12px; font-size: 18px; cursor: pointer; color: var(--text-muted);
  transition: all var(--transition-fast); display: flex; align-items: center; gap: 6px;
}
.btn-settings-header:hover {
  background: var(--bg-glass); border-color: var(--border-default); color: var(--text-primary);
  transform: rotate(30deg);
}
.btn-settings-header.active {
  background: var(--bg-glass-strong); border-color: var(--accent-primary); color: var(--accent-primary);
}

/* Settings tab navigation */
.settings-tab-btn:hover {
  color: var(--text-primary) !important;
  background: rgba(255,255,255,0.03) !important;
}

/* --- Screen 1: Upload --- */
.upload-area { max-width: 800px; margin: 0 auto; }
.upload-files-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.upload-preview { margin-top: var(--space-6); }
.upload-preview .data-table-wrapper { max-height: 300px; overflow-y: auto; }

/* --- Screen 2: Setup --- */
.setup-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); max-width: 1000px; margin: 0 auto; }
.setup-section { display: flex; flex-direction: column; gap: var(--space-5); }
.setup-full-width { grid-column: 1 / -1; }
.setup-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border-default); }

/* --- Screen 3: Analysis --- */
.analysis-insights { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-8); }
.analysis-keywords { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); margin-bottom: var(--space-8); }
.analysis-keywords .card { max-height: 500px; overflow-y: auto; }
.keyword-list { display: flex; flex-direction: column; gap: var(--space-2); }
.keyword-item {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  background: var(--bg-glass); border-radius: var(--radius-md); transition: all var(--transition-fast);
}
.keyword-item:hover { background: var(--bg-glass-strong); }
.keyword-term { flex: 1; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.keyword-metrics { display: flex; gap: var(--space-4); }
.keyword-metric { text-align: right; }
.keyword-metric-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); }
.keyword-metric-value { font-size: var(--text-xs); font-family: var(--font-mono); font-weight: var(--weight-semibold); }

.analysis-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.angle-suggestion { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--bg-glass); border-radius: var(--radius-md); }
.angle-primary { border: 1px solid var(--border-accent); }
.angle-name { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.angle-terms { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-1); }

.rejected-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 300px; overflow-y: auto; }
.rejected-item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); background: var(--bg-glass); border-radius: var(--radius-sm); }
.rejected-reason { font-size: var(--text-xs); color: var(--color-error); }

/* --- Screen 4: Listing --- */
.listing-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-6); }
.listing-main { display: flex; flex-direction: column; gap: var(--space-6); }
.listing-sidebar { display: flex; flex-direction: column; gap: var(--space-6); }
.listing-block { position: relative; }
.listing-block-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.listing-block-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.listing-editable {
  width: 100%; padding: var(--space-4); background: var(--bg-input);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  color: var(--text-primary); font-family: var(--font-family); font-size: var(--text-sm);
  line-height: var(--leading-relaxed); resize: vertical; outline: none; transition: all var(--transition-fast);
}
.listing-editable:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-primary-glow); }

.explanation-panel { position: sticky; top: var(--space-6); }
.explanation-item { padding: var(--space-3); border-bottom: 1px solid var(--border-default); }
.explanation-item:last-child { border-bottom: none; }
.explanation-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--accent-primary); margin-bottom: var(--space-1); }
.explanation-text { font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--leading-relaxed); }

/* --- Screen 5: Export --- */
.export-layout { max-width: 900px; margin: 0 auto; }
.export-preview { margin-bottom: var(--space-6); }
.export-preview-section { margin-bottom: var(--space-4); padding: var(--space-4); background: var(--bg-glass); border-radius: var(--radius-md); border: 1px solid var(--border-default); }
.export-preview-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); margin-bottom: var(--space-2); }
.export-preview-content { font-size: var(--text-sm); color: var(--text-primary); line-height: var(--leading-relaxed); white-space: pre-wrap; }
.export-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.export-option {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-6); background: var(--bg-card); border: 2px solid var(--border-default);
  border-radius: var(--radius-lg); cursor: pointer; transition: all var(--transition-fast); text-align: center;
}
.export-option:hover { border-color: var(--border-hover); background: var(--bg-card-hover); transform: translateY(-2px); }
.export-option.selected { border-color: var(--accent-primary); box-shadow: var(--shadow-glow-sm); }
.export-option-icon { font-size: 32px; }
.export-option-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.export-option-desc { font-size: var(--text-xs); color: var(--text-tertiary); }

/* --- Screen Nav Footer --- */
.screen-nav { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-6); margin-top: var(--space-8); border-top: 1px solid var(--border-default); }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .analysis-insights { grid-template-columns: repeat(2, 1fr); }
  .analysis-keywords { grid-template-columns: 1fr; }
  .listing-layout { grid-template-columns: 1fr; }
  .export-options { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .app-container { padding: var(--space-4); }
  .stepper { flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2); }
  .stepper-connector { width: 20px; }
  .stepper-label { display: none; }
  .setup-layout { grid-template-columns: 1fr; }
  .analysis-insights { grid-template-columns: 1fr; }
  .analysis-bottom { grid-template-columns: 1fr; }
  .export-options { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────
   Screen 1 (revised): Google Sheets Data Source Manager
   ───────────────────────────────────────────────────── */
.upload-area { max-width: 860px; margin: 0 auto; }
.upload-preview { margin-top: var(--space-6); }

.sheet-list {
  display: flex; flex-direction: column; gap: var(--space-3);
  margin: var(--space-6) 0;
}

.sheet-item {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); transition: all var(--transition-fast);
}
.sheet-item:hover { border-color: var(--border-hover); }
.sheet-item-disabled { opacity: 0.45; }
.sheet-item-toggle { flex-shrink: 0; }
.sheet-item-icon { font-size: 24px; flex-shrink: 0; }
.sheet-item-info { flex: 1; min-width: 0; }
.sheet-item-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); flex-wrap: wrap; }
.sheet-item-label { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-primary); }
.sheet-item-url { font-size: var(--text-xs); color: var(--text-tertiary); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400px; }
.sheet-niche-name { font-size: var(--text-xs); color: var(--accent-primary); margin-top: var(--space-1); font-weight: var(--weight-medium); }
.sheet-error-msg { font-size: var(--text-xs); color: #ef4444; margin-top: var(--space-1); }
.sheet-item-status { flex-shrink: 0; }
.sheet-remove-btn { flex-shrink: 0; opacity: 0.5; }
.sheet-remove-btn:hover { opacity: 1; color: #ef4444; }

.sheet-loading-badge { display: inline-flex; align-items: center; gap: 6px; }

.tag-xs { font-size: 10px !important; padding: 2px 6px !important; }

.add-sheet-section { margin-bottom: var(--space-6); }
.add-sheet-form { margin-top: var(--space-3); }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.form-hint { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-1); }

.preview-niche-list { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-2) 0; }
.preview-niche-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); margin-bottom: var(--space-2); display: flex; align-items: center; gap: var(--space-2); }
.preview-keywords { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.keyword-chip {
  display: inline-block; padding: var(--space-1) var(--space-3);
  background: var(--bg-glass-strong); border: 1px solid var(--border-default);
  border-radius: var(--radius-full); font-size: var(--text-xs);
  color: var(--text-secondary); transition: all var(--transition-fast);
}
.keyword-chip:hover { border-color: var(--accent-primary); color: var(--text-primary); }
.keyword-chip-more { background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.3); color: var(--accent-primary); }