/* ═══════════ BLOG IDEA GENERATOR ═══════════ */

.bi-wrap { display: flex; flex-direction: column; gap: var(--space-5); }
.bi-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-5); }

.bi-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.bi-breadcrumb { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 6px; }
.bi-breadcrumb span { margin: 0 6px; }
.bi-title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bi-ai-badge { font-size: 0.65rem; font-weight: var(--fw-semibold); color: #a78bfa; background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.3); padding: 3px 10px; border-radius: var(--radius-full); }
.bi-subtitle { color: var(--text-secondary); font-size: var(--fs-base); margin-top: 6px; max-width: 900px; }
.bi-header-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

/* Stats */
.bi-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.bi-stat { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-5); }
.bi-stat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.bi-stat-label { font-size: var(--fs-xs); color: var(--text-secondary); }
.bi-stat-val { font-size: 1.9rem; font-weight: var(--fw-bold); color: var(--text-primary); margin-top: 4px; }
.bi-stat-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.bi-stat-delta { font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.bi-stat-delta.pos { color: var(--success); }

/* Main 3-col grid */
.bi-main-grid { display: grid; grid-template-columns: 300px 1fr 300px; gap: var(--space-5); align-items: start; }
.bi-left, .bi-middle, .bi-right { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }

.bi-section-num { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-primary); margin-bottom: var(--space-3); }

/* Form */
.bi-form { display: flex; flex-direction: column; gap: 14px; }
.bi-form-group { display: flex; flex-direction: column; }
.bi-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bi-label { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-secondary); display: block; margin-bottom: 4px; }
.bi-optional { color: var(--text-muted); font-weight: var(--fw-normal); }
.bi-helper { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 2px; }

/* Checkboxes grid */
.bi-check-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.bi-check-label { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-2xs); color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border-color); padding: 4px 10px; border-radius: var(--radius-full); cursor: pointer; }
.bi-check-label input { width: 12px; height: 12px; accent-color: var(--primary); }
.bi-check-label.checked { background: var(--primary-muted); border-color: rgba(14,165,233,0.3); color: var(--primary); }

/* Toggle */
.bi-toggle-row { display: flex; align-items: center; justify-content: space-between; }
.bi-toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
.bi-toggle input { opacity: 0; width: 0; height: 0; }
.bi-toggle-slider { position: absolute; inset: 0; background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: 10px; cursor: pointer; transition: 0.2s; }
.bi-toggle-slider::before { content: ''; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; background: var(--text-muted); border-radius: 50%; transition: 0.2s; }
.bi-toggle input:checked + .bi-toggle-slider { background: var(--primary); border-color: var(--primary); }
.bi-toggle input:checked + .bi-toggle-slider::before { transform: translateX(16px); background: #fff; }

.bi-gen-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #3b82f6, #0ea5e9); border: none; color: #fff; font-weight: var(--fw-semibold); font-size: var(--fs-sm); border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: var(--space-3); }
.bi-gen-btn:hover { filter: brightness(1.1); }

/* Filter tabs */
.bi-filter-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-color); margin-bottom: var(--space-3); flex-wrap: wrap; }
.bi-filter-tab { background: none; border: none; color: var(--text-secondary); padding: 8px 14px; font-size: var(--fs-xs); font-weight: var(--fw-medium); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.bi-filter-tab:hover { color: var(--text-primary); }
.bi-filter-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.bi-filter-sub { font-size: var(--fs-xs); color: var(--primary); text-decoration: underline; }

.bi-results-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.bi-results-actions { display: flex; gap: 8px; }
.bi-icon-btn { background: var(--bg-elevated); border: 1px solid var(--border-color); color: var(--text-secondary); width: 32px; height: 32px; border-radius: 6px; cursor: pointer; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; }
.bi-icon-btn:hover { border-color: var(--border-color-hover); color: var(--text-primary); }

/* Ideas table */
.bi-table { width: 100%; border-collapse: collapse; }
.bi-table th { text-align: left; font-size: var(--fs-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; padding: 6px 6px; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.bi-table td { padding: 8px 6px; border-bottom: 1px solid var(--border-color); vertical-align: middle; font-size: var(--fs-xs); }
.bi-table tbody tr:hover { background: var(--bg-surface-hover); }
.bi-table-check { width: 16px; height: 16px; accent-color: var(--primary); }
.bi-idea-icon { margin-right: 6px; font-size: 0.8rem; }
.bi-idea-text { color: var(--text-primary); font-weight: var(--fw-medium); }
.bi-score { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: #fff; }
.bi-traffic { color: var(--text-secondary); font-weight: var(--fw-medium); }
.bi-difficulty { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); padding: 2px 8px; border-radius: var(--radius-full); }
.bi-difficulty.low { background: rgba(34,197,94,0.14); color: var(--success); }
.bi-difficulty.medium { background: rgba(245,158,11,0.14); color: var(--warning); }
.bi-difficulty.high { background: rgba(239,68,68,0.14); color: var(--error); }
.bi-cluster { font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--primary); background: var(--primary-muted); padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap; }
.bi-act-btn { background: var(--bg-elevated); border: 1px solid var(--border-color); color: var(--text-secondary); width: 26px; height: 26px; border-radius: 5px; cursor: pointer; font-size: 0.7rem; display: inline-flex; align-items: center; justify-content: center; }
.bi-act-btn:hover { border-color: var(--border-color-hover); color: var(--text-primary); }
.bi-view-all { text-align: center; padding: 12px 0; }
.bi-link-btn { background: none; border: none; color: var(--primary); font-size: var(--fs-sm); cursor: pointer; font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: 6px; }
.bi-link-btn:hover { text-decoration: underline; }

/* AI Insights */
.bi-insights-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-primary); margin-bottom: var(--space-3); }
.bi-insights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bi-insight-item { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); }
.bi-insight-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bi-insight-val { font-weight: var(--fw-bold); font-size: var(--fs-base); }

/* Topic Cluster donut */
.bi-donut-wrap { position: relative; width: 140px; height: 140px; margin: 0 auto var(--space-3); }
.bi-donut-wrap svg { width: 100%; height: 100%; }
.bi-donut-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.bi-donut-val { font-size: 1.4rem; font-weight: var(--fw-bold); color: var(--text-primary); line-height: 1; }
.bi-donut-sub { font-size: var(--fs-2xs); color: var(--text-muted); }
.bi-cluster-legend { display: flex; flex-direction: column; gap: 6px; }
.bi-legend-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--text-secondary); }
.bi-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bi-legend-val { margin-left: auto; color: var(--text-primary); font-weight: var(--fw-medium); font-size: var(--fs-xs); }

.bi-cluster-btn { width: 100%; padding: 10px; background: var(--primary-muted); border: 1px solid rgba(14,165,233,0.3); color: var(--primary); font-weight: var(--fw-semibold); font-size: var(--fs-xs); border-radius: var(--radius-md); cursor: pointer; margin-top: var(--space-3); display: flex; align-items: center; justify-content: center; gap: 6px; }

/* Top performing list */
.bi-top-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-color); }
.bi-top-row:last-child { border-bottom: none; }
.bi-top-label { flex: 1; font-size: var(--fs-xs); color: var(--text-primary); }
.bi-top-traffic { font-size: var(--fs-xs); color: var(--text-muted); margin-right: 8px; }
.bi-top-score { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: #fff; flex-shrink: 0; }

/* Export grid */
.bi-export-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bi-export-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 14px 8px; text-align: center; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.bi-export-card:hover { border-color: var(--border-color-hover); transform: translateY(-2px); }
.bi-export-icon { font-size: 1.3rem; margin-bottom: 4px; }
.bi-export-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-primary); }
.bi-export-sub { font-size: var(--fs-2xs); color: var(--text-muted); }

/* Related Keywords section */
.bi-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.bi-related-col h4 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-primary); margin-bottom: var(--space-3); }
.bi-kw-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-color); font-size: var(--fs-xs); }
.bi-kw-name { color: var(--text-primary); }
.bi-kw-vol { color: var(--text-muted); font-weight: var(--fw-medium); }
.bi-entity-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bi-entity-tag { background: var(--bg-elevated); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 4px 10px; border-radius: var(--radius-full); font-size: var(--fs-2xs); }
.bi-paa-list { display: flex; flex-direction: column; gap: 6px; }
.bi-paa-item { font-size: var(--fs-xs); color: var(--text-secondary); padding-left: 10px; position: relative; }
.bi-paa-item::before { content: '›'; position: absolute; left: 0; color: var(--text-muted); }

/* Search intent bars */
.bi-intent-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bi-intent-label { font-size: var(--fs-xs); color: var(--text-secondary); min-width: 90px; }
.bi-intent-bar { flex: 1; height: 8px; background: var(--bg-elevated); border-radius: 4px; overflow: hidden; }
.bi-intent-fill { height: 100%; border-radius: 4px; }
.bi-intent-pct { font-size: var(--fs-xs); color: var(--text-muted); min-width: 30px; text-align: right; }

/* Content gap */
.bi-gap-pills { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.bi-gap-pill { font-size: var(--fs-xs); font-weight: var(--fw-medium); display: flex; align-items: center; gap: 6px; }

/* Responsive */
@media (max-width: 1300px) {
  .bi-main-grid { grid-template-columns: 1fr 1fr; }
  .bi-right { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .bi-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .bi-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .bi-main-grid { grid-template-columns: 1fr; }
  .bi-right { grid-template-columns: 1fr; }
  .bi-related-grid { grid-template-columns: 1fr; }
  .bi-export-grid { grid-template-columns: repeat(2, 1fr); }
}