* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Helvetica Neue', Arial, sans-serif; background: #0f1117; color: #e0e0e0; }

header {
  background: #1a1d2e; padding: 20px 32px; border-bottom: 1px solid #2d3150;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
header h1 { font-size: 1.4rem; color: #7c9fff; }
header .subtitle { font-size: 0.78rem; color: #666; margin-top: 2px; }
#controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

select, button {
  padding: 8px 16px; border-radius: 6px; border: 1px solid #3a3f6b;
  background: #252842; color: #e0e0e0; font-size: 0.9rem; cursor: pointer;
}
button { background: #4f6ef7; border-color: #4f6ef7; font-weight: 600; }
button:hover { background: #6b87ff; }
button:disabled { background: #3a3f6b; cursor: not-allowed; }

main { padding: 24px 32px; max-width: 1400px; margin: 0 auto; }

/* Summary cards */
.summary-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px; margin-bottom: 28px;
}
.card {
  background: #1a1d2e; border: 1px solid #2d3150; border-radius: 10px; padding: 18px;
}
.card .label { font-size: 0.75rem; color: #666; text-transform: uppercase; letter-spacing: 0.05em; }
.card .value { font-size: 1.8rem; font-weight: 700; color: #7c9fff; margin-top: 6px; }
.card .sub { font-size: 0.78rem; color: #888; margin-top: 4px; }

/* Charts – stacked vertically */
.chart-row { margin-bottom: 20px; }
.chart-card {
  background: #1a1d2e; border: 1px solid #2d3150; border-radius: 10px; padding: 20px;
}
.chart-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
}
.chart-card-header h2, .chart-card h2 { font-size: 0.95rem; color: #aaa; margin-bottom: 16px; }
.chart-card-header h2 { margin-bottom: 0; }
#topicPieChart    { max-height: 340px; }
#categoryBarChart { max-height: 260px; }

/* Pie sort toggle */
.sort-toggle { display: flex; gap: 4px; }
.sort-btn {
  padding: 4px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
  border: 1px solid #3a3f6b; background: #252842; color: #888; cursor: pointer;
}
.sort-btn:hover { border-color: #7c9fff; color: #ccc; }
.sort-btn.active { background: #4f6ef7; border-color: #4f6ef7; color: #fff; }

/* Section headers */
.section-header {
  font-size: 1.05rem; color: #aaa; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid #2d3150;
  display: flex; align-items: center; gap: 10px;
}
.section-header .tag {
  font-size: 0.7rem; background: #252842; border: 1px solid #3a3f6b;
  color: #888; padding: 2px 8px; border-radius: 4px;
}

/* Category filter */
.category-filter { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.filter-btn {
  padding: 5px 13px; border-radius: 999px; font-size: 0.78rem; font-weight: 600;
  border: 1px solid #3a3f6b; background: #1a1d2e; color: #888; cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.filter-btn:hover { border-color: #7c9fff; color: #ccc; }
.filter-btn.active { background: #4f6ef7; border-color: #4f6ef7; color: #fff; }

/* Topic grid */
.topics-section { margin-bottom: 32px; }
#topicsGrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 18px;
}
.topic-card {
  background: #1a1d2e; border: 1px solid #2d3150; border-radius: 10px; padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.importance-高 { border-left: 3px solid #ff6b6b; }
.importance-中 { border-left: 3px solid #ffd93d; }
.importance-低 { border-left: 3px solid #4a5070; }

/* Topic header row */
.topic-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.topic-order {
  font-size: 0.7rem; font-weight: 700; color: #4f6ef7;
  background: #1c2240; border: 1px solid #3a4f9f;
  border-radius: 4px; padding: 2px 7px; white-space: nowrap;
}
.topic-title { font-size: 1rem; font-weight: 600; color: #e0e0e0; flex: 1; }
.badge-group { display: flex; gap: 4px; flex-wrap: wrap; flex-shrink: 0; }
.badge {
  font-size: 0.68rem; padding: 3px 8px; border-radius: 999px; white-space: nowrap; font-weight: 600;
}
.badge-politics     { background: #3b2f7f; color: #a899ff; }
.badge-economy      { background: #1e4060; color: #7ec8ff; }
.badge-social       { background: #1e3f2f; color: #7fffa0; }
.badge-sports       { background: #4a2a00; color: #ffb84d; }
.badge-international{ background: #4a1a1a; color: #ff8080; }
.badge-weather      { background: #1a3a4a; color: #7ffbff; }
.badge-other        { background: #2a2a2a; color: #aaa; }

/* Broadcast metrics */
.broadcast-metrics { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.8rem; color: #888; }
.broadcast-metrics strong { color: #7c9fff; }
.metric-bar-wrap { margin-top: 6px; height: 3px; background: #2d3150; border-radius: 2px; }
.metric-bar { height: 3px; background: #4f6ef7; border-radius: 2px; }

/* Tone analysis */
.tone-label { font-size: 0.72rem; color: #888; margin-bottom: 6px; letter-spacing: 0.04em; text-transform: uppercase; }
.tone-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 1px; }
.tone-fact     { background: #7c9fff; }
.tone-emotional{ background: #ffb347; }
.tone-critical { background: #e05c5c; }
.tone-legend { display: flex; gap: 14px; margin-top: 6px; font-size: 0.72rem; color: #888; }
.tone-legend span { display: flex; align-items: center; gap: 4px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tone-criticism {
  margin-top: 10px; font-size: 0.82rem; color: #bbb; line-height: 1.55;
  border-left: 2px solid #3a3f6b; padding-left: 10px; font-style: italic;
}

/* Evidence quotes ── 新スキーマ対応 ─────────────────────── */
.quotes-section { }
.quotes-label { font-size: 0.72rem; color: #888; margin-bottom: 8px; letter-spacing: 0.04em; text-transform: uppercase; }
.quote-item {
  background: #13162a; border: 1px solid #2a2e50;
  border-radius: 7px; padding: 10px 12px; margin-bottom: 7px;
}
.quote-meta { display: flex; gap: 10px; margin-bottom: 6px; font-size: 0.72rem; align-items: center; }
.quote-speaker { color: #7c9fff; font-weight: 600; }
.quote-ts { color: #555; }

/* 核心ハイライト（デフォルト表示） */
.quote-highlight {
  font-size: 0.85rem; color: #e0e0e0; line-height: 1.6;
}
.quote-highlight::before { content: '「'; color: #4f6ef7; font-weight: 700; }
.quote-highlight::after  { content: '」'; color: #4f6ef7; font-weight: 700; }
mark.trigger-word {
  background: rgba(255,211,61,0.22); color: #ffd93d;
  border-radius: 3px; padding: 0 2px; font-weight: 600;
}

/* トリガーワードタグ */
.trigger-words { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.trigger-tag {
  font-size: 0.65rem; padding: 1px 7px; border-radius: 999px;
  background: rgba(255,211,61,0.12); color: #d4a800;
  border: 1px solid rgba(255,211,61,0.3);
}

/* 全文コンテキスト（展開時） */
.full-quote-context {
  margin-top: 6px; padding: 10px 12px;
  background: #0d1020; border: 1px solid #1e2240; border-radius: 5px;
}
.full-quote-label {
  font-size: 0.65rem; color: #555; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px;
}
.full-quote-text {
  font-size: 0.8rem; color: #666; line-height: 1.7;
}
.full-quote-highlight { color: #bbb; background: rgba(255,255,255,0.06); border-radius: 2px; }
.context-toggle {
  margin-top: 6px; font-size: 0.7rem; font-weight: 600; cursor: pointer;
  background: none; border: 1px solid #2a2e50; color: #555; border-radius: 4px;
  padding: 2px 10px; transition: color 0.12s, border-color 0.12s;
}
.context-toggle:hover { color: #888; border-color: #3a3f6b; background: none; }
.context-toggle.open  { color: #7c9fff; border-color: #4f6ef7; }

/* バイアス分析テキスト */
.bias-analysis {
  margin-top: 6px; font-size: 0.78rem; color: #a88;
  border-left: 2px solid #5a2a2a; padding-left: 8px; font-style: italic;
}

/* 後方互換: 旧スキーマの bias-tag */
.bias-tag {
  display: inline-block; margin-top: 6px; font-size: 0.68rem; padding: 2px 8px;
  border-radius: 4px; background: #2d1a1a; color: #ff9090; border: 1px solid #5a2a2a;
}

/* Experts */
.experts-label { font-size: 0.72rem; color: #888; margin-bottom: 8px; letter-spacing: 0.04em; text-transform: uppercase; }
.expert-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0; border-bottom: 1px solid #1e2240;
}
.expert-item:last-child { border-bottom: none; }
.expert-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: #252842; border: 1px solid #3a3f6b;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; color: #7c9fff; flex-shrink: 0;
}
.expert-info { flex: 1; }
.expert-name { font-size: 0.83rem; font-weight: 600; color: #e0e0e0; }
.expert-title { font-size: 0.72rem; color: #666; margin-bottom: 3px; }
.expert-tendency { font-size: 0.78rem; color: #bbb; line-height: 1.4; }

/* Keywords */
.keywords { display: flex; flex-wrap: wrap; gap: 5px; }
.keyword {
  font-size: 0.7rem; padding: 2px 8px; background: #1e2240;
  border: 1px solid #2d3460; border-radius: 999px; color: #888;
}

/* Loading */
.loading {
  position: fixed; inset: 0; background: rgba(15,17,23,0.88);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: #7c9fff; letter-spacing: 0.05em;
}
.duration-note { font-size: 0.7rem; color: #555; margin-top: 4px; }

@media (max-width: 768px) {
  main { padding: 16px; }
  #topicsGrid { grid-template-columns: 1fr; }
}

/* 放送情報入力パネル */
.meta-panel {
  background: #13162a; border-bottom: 1px solid #2d3150;
  padding: 14px 32px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
}
.meta-row { display: flex; flex-direction: column; gap: 4px; }
.meta-row label { font-size: 0.72rem; color: #888; letter-spacing: 0.04em; }
.meta-row input {
  padding: 6px 10px; border-radius: 5px; border: 1px solid #3a3f6b;
  background: #1a1d2e; color: #e0e0e0; font-size: 0.85rem; min-width: 160px;
}
.meta-note { font-size: 0.7rem; color: #555; align-self: flex-end; padding-bottom: 2px; }

/* 引用の出典表示 */
.quote-source {
  font-size: 0.68rem; color: #4f6ef7; margin-top: 5px;
  padding-top: 5px; border-top: 1px solid #1e2240;
}
.quote-source::before { content: '📌 '; }


/* ---- footer & legal pages (収益化タスク3) ---- */
.site-footer { max-width: 1100px; margin: 48px auto 24px; padding: 20px 24px; border-top: 1px solid #2a2a33; color: #8a8a95; font-size: 0.78rem; line-height: 1.7; }
.footer-disclaimer { margin: 0 0 12px; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 10px; }
.footer-links a { color: #9fb3ff; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-copy { margin: 0; color: #666; }
.legal-back { display: inline-block; margin: 18px 0 0 24px; color: #9fb3ff; text-decoration: none; font-size: 0.85rem; }
.legal-back:hover { text-decoration: underline; }
.legal-page { max-width: 820px; margin: 16px auto; padding: 0 24px 32px; line-height: 1.9; color: #d0d0d8; }
.legal-page h2 { font-size: 1.05rem; margin: 26px 0 8px; color: #cfe0ff; border-left: 3px solid #4f6ef7; padding-left: 10px; }
.legal-page p, .legal-page li { font-size: 0.9rem; }
.legal-page ul { padding-left: 1.3em; }
.legal-page a { color: #9fb3ff; }
.legal-updated { color: #777; font-size: 0.8rem; margin-bottom: 18px; }


/* ---- 広告枠 (収益化タスク4) ---- */
.ad-slot { max-width: 1100px; margin: 20px auto; padding: 10px 16px 14px; border: 1px dashed #33333d; border-radius: 8px; background: #14141a; }
.ad-label { font-size: 0.66rem; letter-spacing: 0.08em; color: #777; text-transform: uppercase; margin-bottom: 6px; }
.ad-unit { min-height: 90px; display: flex; align-items: center; justify-content: center; }
.ad-slot[hidden] { display: none; }