/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #0D2818;
  background: #F0F7F4;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #1565C0; text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: 'JetBrains Mono', 'Fira Code', monospace; background: #e8ede8; padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; }

/* === LAYOUT === */
.container { max-width: 900px; margin: 0 auto; padding: 0 1.5rem; }
.content-section { padding: 4rem 0; }
.alt-bg { background: #FFFFFF; }

/* === TYPOGRAPHY === */
h1, h2, h3, h4 { font-family: 'Playfair Display', Georgia, serif; color: #0D2818; line-height: 1.3; }
h1 { font-size: 2.8rem; font-weight: 900; }
h2 { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; }
h3 { font-size: 1.4rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; }
h4 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.5rem; }
p { margin-bottom: 1rem; }

/* === HERO === */
.hero-section {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background: url('./assets/bg-hero.png') center/cover no-repeat;
  z-index: 0;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: rgba(13, 40, 24, 0.78);
  z-index: 1;
}
.hero-content {
  position: relative; z-index: 2;
  text-align: center;
  max-width: 800px;
  padding: 3rem 1.5rem;
  color: #fff;
}
.hero-content h1 { color: #fff; margin-bottom: 0.75rem; }
.hero-subtitle { font-size: 1.25rem; color: #CDE0D0; margin-bottom: 0.5rem; }
.hero-authors { font-size: 0.95rem; color: #9dbba5; margin-bottom: 1.5rem; }
.upvote-badge {
  display: inline-block;
  background: rgba(46, 125, 50, 0.3);
  color: #90EE90;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1rem;
  border: 1px solid rgba(46, 125, 50, 0.5);
}
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.2s, transform 0.15s;
  background: #1565C0;
  color: #fff;
  border: 2px solid #1565C0;
}
.btn:hover { background: #0D47A1; text-decoration: none; transform: translateY(-1px); }
.btn-outline { background: transparent; color: #CDE0D0; border-color: #CDE0D0; }
.btn-outline:hover { background: rgba(205, 224, 208, 0.15); color: #fff; }

/* === ABSTRACT === */
.abstract-text { font-size: 1.1rem; border-left: 4px solid #2E7D32; padding-left: 1.25rem; margin-bottom: 2rem; }

/* === BADGES === */
.badge-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.chip {
  display: inline-block;
  background: #1B5E20;
  color: #fff;
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
}

/* === FIGURES === */
.full-figure { margin: 2rem 0; }
.full-figure img, .app-card img, .card img, .two-col img {
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
figcaption {
  font-size: 0.88rem;
  color: #6E8B73;
  margin-top: 0.5rem;
  line-height: 1.5;
}
.arch-figure { max-width: 700px; margin-left: auto; margin-right: auto; }

/* === CALLOUT === */
.callout-box {
  background: #fff;
  border-left: 4px solid #1565C0;
  padding: 1rem 1.25rem;
  border-radius: 0 8px 8px 0;
  margin: 1.5rem 0;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}

/* === CARDS === */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.card {
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.12); transform: translateY(-2px); }
.card img { border-radius: 8px; margin-top: 0.75rem; }

/* === METRIC CARDS === */
.metric-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin: 2rem 0; }
.metric-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  border-top: 4px solid #1565C0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.metric-value { font-family: 'JetBrains Mono', monospace; font-size: 2.2rem; font-weight: 700; color: #1565C0; }
.metric-unit { font-size: 0.85rem; color: #6E8B73; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.metric-desc { font-size: 0.88rem; color: #0D2818; margin-bottom: 0; }

/* === TABLES === */
.table-wrapper { overflow-x: auto; margin: 1.5rem 0; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid #CDE0D0; }
th { background: #1565C0; color: #fff; font-weight: 600; position: sticky; top: 0; }
tbody tr:nth-child(even) { background: #F0F7F4; }
tbody tr:hover { background: #DDE8F5; }
.highlight-row { background: #D8ECD8 !important; font-weight: 600; }
.highlight-row:hover { background: #C8DCD0 !important; }
.comparison-table td:first-child { font-weight: 500; white-space: nowrap; }
.data-table.compact { font-size: 0.85rem; }
.data-table.compact td, .data-table.compact th { padding: 0.4rem 0.6rem; }

/* === TWO-COL === */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; margin: 1.5rem 0; }
@media (max-width: 768px) { .two-col { grid-template-columns: 1fr; } }

/* === APP CARDS === */
.app-card {
  background: #fff;
  border-radius: 14px;
  padding: 2rem;
  margin: 1.5rem 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border-left: 5px solid #2E7D32;
}
.app-card h3 { margin-top: 0; color: #1B5E20; }

/* === LIMITATION LIST === */
.limitation-list { list-style: none; padding: 0; }
.limitation-list li {
  padding: 0.75rem 0 0.75rem 1.25rem;
  border-left: 3px solid #CDE0D0;
  margin-bottom: 0.5rem;
}

/* === CONCLUSION === */
.conclusion-card {
  background: #fff;
  border-left: 5px solid #1565C0;
  border-radius: 0 12px 12px 0;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* === REFERENCES === */
details { margin-top: 1rem; }
summary {
  cursor: pointer;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0D2818;
  padding: 0.5rem 0;
}
.reference-list { font-size: 0.85rem; color: #6E8B73; padding-left: 2rem; }
.reference-list li { margin-bottom: 0.5rem; line-height: 1.5; }

/* === FOOTER === */
.site-footer { background: #0D2818; color: #9dbba5; text-align: center; padding: 2rem 0; font-size: 0.85rem; }

/* === REVEAL ANIMATION === */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* === FLECTO EXPLANATION UI === */
.flecto-note, .flecto-callout, .flecto-card, .flecto-panel {
  margin: 1.5rem 0;
  border-radius: 10px;
  position: relative;
}
.flecto-note::before, .flecto-callout::before, .flecto-card::before, .flecto-panel::before {
  content: '\1F916 AI explanation';
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #60a5fa;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 0.5em;
}
.flecto-note {
  background: #F0F7F4;
  border-left: 3px solid #1565C0;
  padding: 0.75rem 1rem;
  font-size: 0.92rem;
}
.flecto-callout {
  background: #DDE8F5;
  padding: 1.25rem 1.5rem;
  border: 1px solid #CDE0D0;
}
.flecto-card {
  background: #fff;
  padding: 1.5rem;
  border: 1px solid #CDE0D0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.flecto-panel {
  background: #F0F7F4;
  padding: 1.75rem;
  border: 2px solid #CDE0D0;
}
.flecto-note h4, .flecto-callout h4, .flecto-card h4, .flecto-panel h4 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
  color: #1565C0;
}
.flecto-card ul, .flecto-panel ul { padding-left: 1.25rem; margin-top: 0.5rem; }
.flecto-card li, .flecto-panel li { margin-bottom: 0.3rem; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  .card-grid { grid-template-columns: 1fr; }
  .metric-cards { grid-template-columns: 1fr; }
  .hero-section { min-height: 400px; }
}