@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --primary: #000091;
  --primary-light: #1a1aab;
  --accent: #E1000F;
  --accent-light: #ff1a2e;
  --green: #18753C;
  --yellow: #FFD700;
  --bg: #f6f6f9;
  --card: #ffffff;
  --text: #1e1e2f;
  --text-light: #6b7280;
  --border: #e5e7eb;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
  --radius: 12px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }

/* NAV */
.navbar {
  background:var(--primary); color:white; padding:0 2rem;
  display:flex; align-items:center; justify-content:space-between;
  height:64px; position:sticky; top:0; z-index:100;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.navbar .logo { font-size:1.4rem; font-weight:800; display:flex; align-items:center; gap:.5rem; color:white; }
.navbar .logo:hover { text-decoration:none; }
.navbar .logo span { color:var(--accent); }
.navbar nav { display:flex; gap:1.5rem; }
.navbar nav a { color:rgba(255,255,255,.8); font-weight:500; font-size:.9rem; transition:color .2s; }
.navbar nav a:hover, .navbar nav a.active { color:white; text-decoration:none; }

/* CONTAINER */
.container { max-width:1200px; margin:0 auto; padding:2rem; }
.page-title { font-size:2rem; font-weight:800; margin-bottom:1.5rem; }
.page-title small { font-weight:400; color:var(--text-light); font-size:1rem; }

/* STATS ROW */
.stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin-bottom:2rem; }
.stat-card { background:var(--card); border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow); text-align:center; }
.stat-card .stat-value { font-size:2rem; font-weight:800; color:var(--primary); }
.stat-card .stat-label { color:var(--text-light); font-size:.85rem; margin-top:.25rem; }

/* SPEECH CARDS */
.speech-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:1.5rem; }
.speech-card {
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; transition:transform .2s, box-shadow .2s; cursor:pointer;
}
.speech-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.12); }
.speech-card-header { display:flex; align-items:center; gap:1rem; padding:1.25rem 1.25rem .75rem; }
.speech-card-header img { width:48px; height:48px; border-radius:50%; object-fit:cover; background:var(--border); }
.speech-card-header .info { flex:1; min-width:0; }
.speech-card-header .info h3 { font-size:.95rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.speech-card-header .info .meta { font-size:.8rem; color:var(--text-light); }
.speech-card-header .score-badge {
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:800; color:white; flex-shrink:0;
}
.speech-card-body { padding:0 1.25rem 1rem; }
.speech-card-body .title { font-size:.9rem; font-weight:600; margin-bottom:.5rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.speech-card-body .summary { font-size:.82rem; color:var(--text-light); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.speech-card-footer { display:flex; gap:.5rem; padding:.75rem 1.25rem; border-top:1px solid var(--border); flex-wrap:wrap; }

/* TAGS */
.tag { display:inline-block; background:#eef2ff; color:var(--primary); padding:.2rem .6rem; border-radius:20px; font-size:.72rem; font-weight:500; }
.tag-tone { background:var(--primary); color:white; }
.tag-source { background:#fef3c7; color:#92400e; }

/* SCORE COLORS */
.score-high { background:var(--green); }
.score-mid { background:var(--yellow); color:#333; }
.score-low { background:var(--accent); }

/* RANKING */
.ranking-list { display:flex; flex-direction:column; gap:1rem; }
.ranking-item {
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.25rem; display:flex; align-items:center; gap:1rem;
  transition:transform .2s; cursor:pointer;
}
.ranking-item:hover { transform:translateX(4px); }
.ranking-item .rank { font-size:1.5rem; font-weight:800; color:var(--primary); min-width:40px; text-align:center; }
.ranking-item img { width:48px; height:48px; border-radius:50%; object-fit:cover; background:var(--border); }
.ranking-item .info { flex:1; }
.ranking-item .info h3 { font-size:1rem; font-weight:600; }
.ranking-item .info .meta { font-size:.82rem; color:var(--text-light); }
.ranking-item .score-bar-container { width:200px; }
.ranking-item .score-bar { height:8px; border-radius:4px; background:var(--border); overflow:hidden; margin-bottom:4px; }
.ranking-item .score-bar-fill { height:100%; border-radius:4px; transition:width .5s ease; }
.ranking-item .score-value { font-size:1.2rem; font-weight:700; text-align:right; }

/* SPEECH DETAIL */
.speech-detail { max-width:900px; margin:0 auto; }
.speech-detail .header { display:flex; align-items:center; gap:1.5rem; margin-bottom:2rem; }
.speech-detail .header img { width:80px; height:80px; border-radius:50%; object-fit:cover; }
.speech-detail .header h1 { font-size:1.5rem; }
.speech-detail .scores-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-bottom:2rem; }
.speech-detail .content-box {
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:2rem; line-height:1.9; font-size:1rem; margin-bottom:2rem;
}
.chart-box {
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.5rem; display:flex; align-items:center; justify-content:center;
}

/* HIGHLIGHTS */
.highlight-factual { background:rgba(24, 117, 60, 0.2); border-bottom:2px solid #18753C; padding:1px 2px; border-radius:2px; }
.highlight-false { background:rgba(225, 0, 15, 0.2); border-bottom:2px solid #E1000F; padding:1px 2px; border-radius:2px; }
.highlight-emotion { background:rgba(255, 215, 0, 0.2); border-bottom:2px solid #FFD700; padding:1px 2px; border-radius:2px; }
.highlight-proposal { background:rgba(0, 0, 145, 0.2); border-bottom:2px solid #000091; padding:1px 2px; border-radius:2px; }
.highlight-filler { background:rgba(128, 128, 128, 0.1); border-bottom:2px solid #ccc; padding:1px 2px; border-radius:2px; }
.highlight-sophism { background:rgba(128, 0, 128, 0.2); border-bottom:2px solid purple; padding:1px 2px; border-radius:2px; }

/* LEGEND */
.legend { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; font-size:.82rem; padding:.75rem 1rem; background:var(--card); border-radius:8px; box-shadow:var(--shadow); }
.legend span { padding:3px 8px; border-radius:4px; cursor:default; }

/* VERDICT BOX */
.verdict-box { background:linear-gradient(135deg, #f0f4ff 0%, #fff 100%); border-left:4px solid var(--primary); }

/* INTEGRAL BADGES */
.integral-badges { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.badge-integral {
  display:flex; align-items:center; gap:.75rem;
  background:var(--card); border:2px solid var(--border); border-radius:var(--radius);
  padding:.75rem 1.25rem; box-shadow:var(--shadow);
  font-size:.85rem; transition:transform .2s;
}
.badge-integral:hover { transform:translateY(-2px); }
.badge-dot { width:24px; height:24px; border-radius:50%; flex-shrink:0; }
.badge-icon { font-size:1.5rem; }
.badge-edt { border-color:#6366f1; }
.badge-aqal { border-color:#059669; }

/* COLLAPSIBLE ANALYSIS SECTIONS */
.rhetorical-analysis { margin-top:2rem; }
.analysis-section {
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  margin-bottom:1rem; overflow:hidden;
}
.analysis-section summary {
  padding:1rem 1.5rem; cursor:pointer; font-weight:600; font-size:1rem;
  display:flex; align-items:center; gap:.5rem;
  transition:background .2s; user-select:none;
  list-style:none;
}
.analysis-section summary::-webkit-details-marker { display:none; }
.analysis-section summary::before { content:'▸'; font-size:1.2rem; color:var(--primary); transition:transform .2s; margin-right:.25rem; }
.analysis-section[open] summary::before { transform:rotate(90deg); }
.analysis-section summary:hover { background:#f8f9ff; }
.section-icon { font-size:1.1rem; }
.section-content { padding:0 1.5rem 1.5rem; }
.section-content ul { margin:.5rem 0 .5rem 1.5rem; }
.section-content li { margin-bottom:.4rem; font-size:.9rem; }
.section-content p { margin-bottom:.5rem; font-size:.9rem; }

/* ARGUMENTATION GRID */
.arg-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; margin-bottom:1rem; }
.arg-card {
  background:#f8f9ff; border-radius:8px; padding:1rem; border-left:3px solid var(--primary);
}
.arg-card h4 { font-size:.85rem; margin-bottom:.5rem; color:var(--primary); }
.arg-card small { color:var(--text-light); }
.arg-card p { font-size:.85rem; }

.sophismes-list { background:#fff5f5; border-radius:8px; padding:1rem; border-left:3px solid var(--accent); margin-top:.5rem; }
.sophismes-list h4 { color:var(--accent); font-size:.9rem; margin-bottom:.5rem; }

/* POWER GRID */
.power-grid { display:flex; flex-direction:column; gap:.75rem; }
.power-grid > div { padding:.5rem; background:#f8f9ff; border-radius:6px; font-size:.9rem; }

/* BIAS CATEGORIES */
.bias-category { margin-bottom:.75rem; }
.bias-category strong { font-size:.85rem; }

/* INTEGRAL DETAIL */
.integral-detail { display:flex; flex-direction:column; gap:1rem; }
.integral-item { padding:1rem; background:#f8f9ff; border-radius:8px; }
.integral-item h4 { font-size:.9rem; margin-bottom:.5rem; display:flex; align-items:center; gap:.5rem; }
.integral-item p { font-size:.85rem; color:var(--text-light); }

/* KEYWORDS */
.keywords { display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0; }
.keyword { display:inline-block; background:var(--primary); color:white; padding:.25rem .75rem; border-radius:20px; font-weight:500; }

/* THESIS */
.thesis { font-size:1.05rem; font-style:italic; padding:.75rem; background:#f0f4ff; border-radius:8px; border-left:3px solid var(--primary); }

/* PDF BUTTON */
.pdf-btn {
  background:var(--primary); color:white; border:none; padding:.75rem 2rem;
  border-radius:8px; font-size:1rem; font-weight:600; cursor:pointer;
  transition:all .2s; box-shadow:0 4px 12px rgba(0,0,145,0.3);
}
.pdf-btn:hover { background:var(--primary-light); transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,145,0.4); }
.pdf-btn:disabled { opacity:.6; cursor:wait; }

/* COLORED TEXT */
.colored-text { font-size:.95rem; line-height:2; }

/* POLITICIAN DETAIL */
.politician-header {
  display:flex; align-items:center; gap:2rem;
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:2rem; margin-bottom:2rem;
}
.politician-header img { width:100px; height:100px; border-radius:50%; object-fit:cover; }
.politician-header h1 { font-size:1.8rem; }
.politician-header .party { font-size:1rem; color:var(--text-light); }

/* BACK LINK */
.back-link { display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.5rem; font-weight:500; font-size:.9rem; }

/* ADMIN */
.admin-btn {
  background:transparent; border:1px solid rgba(255,255,255,.3); color:white;
  padding:.3rem .75rem; border-radius:6px; cursor:pointer; font-size:.8rem;
}
.admin-btn:hover { background:rgba(255,255,255,.1); }

/* LOADING & EMPTY */
.loading { text-align:center; padding:3rem; color:var(--text-light); }
.spinner { display:inline-block; width:40px; height:40px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.empty-state { text-align:center; padding:4rem 2rem; color:var(--text-light); }
.empty-state .icon { font-size:3rem; margin-bottom:1rem; }

/* MERMAID */
.mermaid { display:flex; justify-content:center; overflow-x:auto; }
.mermaid svg { max-width:100%; }

/* RESPONSIVE */
@media (max-width:768px) {
  .container { padding:1rem; }
  .speech-grid { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .navbar { padding:0 1rem; }
  .navbar nav { gap:.75rem; }
  .speech-detail .scores-grid { grid-template-columns:1fr; }
  .ranking-item .score-bar-container { width:120px; }
  .politician-header { flex-direction:column; text-align:center; }
  .integral-badges { flex-direction:column; }
  .arg-grid { grid-template-columns:1fr; }
  .legend { font-size:.72rem; gap:.5rem; }
  .hero-features { grid-template-columns:1fr 1fr; }
}

/* HERO INTRO */
.hero-intro {
  background:linear-gradient(135deg, var(--primary) 0%, #1a1aab 60%, #3333cc 100%);
  color:white; border-radius:var(--radius); padding:1.8rem 2rem;
  margin-bottom:2rem;
  box-shadow:0 4px 24px rgba(0,0,145,0.2);
}
.hero-top { text-align:center; margin-bottom:1rem; }
.hero-intro h1 {
  font-size:1.8rem; font-weight:800; margin-bottom:.3rem;
  letter-spacing:-0.5px;
}
.hero-tagline {
  font-size:1.05rem; opacity:.85; font-weight:400;
}
.hero-short {
  font-size:.88rem; line-height:1.65; opacity:.9;
  max-width:740px; margin:0 auto 1.2rem; text-align:center;
}
.hero-short strong { color:#fff; opacity:1; }
.hero-features {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:.8rem;
  max-width:640px; margin:0 auto;
}
.hero-features .feature {
  background:rgba(255,255,255,0.1); border-radius:8px;
  padding:.65rem .5rem; font-size:.78rem; line-height:1.35;
  text-align:center;
  border:1px solid rgba(255,255,255,0.12);
}
.hero-features .feature strong { display:block; font-size:.85rem; margin-bottom:.15rem; }