:root {
  --clinical-primary: #2563eb;
  --clinical-secondary: #475569;
  --clinical-accent: #d97706;
  --clinical-danger: #dc2626;
  --clinical-success: #059669;
  --clinical-warning: #d97706;
  --clinical-dark: #1e293b;
  --clinical-gray: #64748b;
  --section-text: #334155;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #f8fafc;
  color: var(--clinical-dark);
  font-size: 0.925rem;
  line-height: 1.65;
}

/* ── Navbar ───────────────────────────── */
.navbar { border-bottom: 2px solid var(--clinical-accent); box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.navbar-brand i { color: var(--clinical-accent); }

/* ── Hero (Landing) ────────────────────── */
.hero-section {
  background: linear-gradient(180deg, #f0f5ff 0%, #ffffff 100%);
  padding: 3rem 1.5rem 2rem;
  text-align: center;
  border-bottom: 1px solid #e2e8f0;
}
.hero-inner { max-width: 600px; margin: 0 auto; }
.hero-icon { font-size: 2.8rem; margin-bottom: 0.5rem; line-height: 1; }
.hero-title { font-size: 2.2rem; font-weight: 800; color: var(--clinical-dark); letter-spacing: -0.5px; margin-bottom: 0.4rem; }
.hero-subtitle { color: var(--clinical-gray); font-size: 0.9rem; line-height: 1.5; margin-bottom: 1.5rem; }
.hero-search-wrapper { position: relative; max-width: 460px; margin: 0 auto 1rem; }
.hero-search-input {
  width: 100%; padding: 12px 18px 12px 44px !important;
  border: 2px solid #e2e8f0 !important; border-radius: 12px !important;
  font-size: 0.9rem !important; background: #fff !important;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.hero-search-input:focus {
  border-color: var(--clinical-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
  outline: none !important;
}
.hero-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 1rem; }
.hero-stats { display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--clinical-gray); }
.hero-stats span { font-weight: 600; color: var(--clinical-dark); }

/* ── System Filter (Quick-Jump) ────────── */
.filter-strip {
  position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid #e2e8f0;
  padding: 0.6rem 1rem; overflow-x: auto; white-space: nowrap; text-align: center;
}
.filter-pills { display: inline-flex; gap: 0.35rem; flex-wrap: nowrap; }
.filter-pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 5px 12px; font-size: 0.76rem; font-weight: 500;
  border-radius: 20px; cursor: pointer; transition: all 0.15s;
  border: 1.5px solid #d0d5dd; color: #64748b; background: #fff;
  user-select: none; white-space: nowrap;
}
.filter-pill i { font-size: 0.75rem; }
.filter-pill:hover { border-color: #94a3b8; background: #f8fafc; }
.filter-pill.active { color: #fff; border-color: var(--pill-color); background: var(--pill-color); }
.filter-pill.all-pill { border-color: var(--clinical-primary); color: var(--clinical-primary); }
.filter-pill.all-pill.active { background: var(--clinical-primary); color: #fff; }

/* ── Category Sections ─────────────────── */
.category-section { padding: 1.5rem 1.5rem 2rem; scroll-margin-top: 56px; }
.category-header {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.75rem; padding-bottom: 0.4rem;
  border-bottom: 2px solid #e2e8f0; padding-left: 0.5rem;
}
.cat-header-icon { font-size: 1.2rem; }
.cat-header-name { font-size: 1rem; font-weight: 700; }
.cat-header-count { font-size: 0.68rem; font-weight: 500; margin-left: auto; }

/* ── Disease Cards ─────────────────────── */
.disease-grid { max-width: 1200px; margin: 0 auto; padding: 0.5rem 1.5rem; }
.disease-card {
  border: none; border-radius: 12px; background: #fff;
  transition: transform 0.15s, box-shadow 0.15s; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.disease-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.08) !important; }
.disease-card .card-body { padding: 1.1rem !important; }
.card-emoji { font-size: 2rem; margin-bottom: 0.25rem; line-height: 1; }
.card-site-name { font-size: 0.95rem; font-weight: 700; color: var(--clinical-dark); margin-bottom: 0.2rem; line-height: 1.2; }
.card-description { font-size: 0.76rem; color: var(--clinical-gray); line-height: 1.35; margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-badges { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.card-badge { font-size: 0.68rem; font-weight: 500; }

/* ── Disease Page ──────────────────────── */
.disease-header-accent { height: 3px; background: linear-gradient(90deg, var(--clinical-primary), var(--clinical-accent)); border-radius: 2px; margin-bottom: 0.75rem; }
.disease-header h2 { font-weight: 700; color: var(--clinical-dark); letter-spacing: -0.3px; font-size: 1.4rem; }
.disease-header p { color: var(--clinical-gray); font-size: 0.85rem; }

/* ── Sidebar TOC ───────────────────────── */
.sidebar-col { border-right: 1px solid #e2e8f0; min-height: calc(100vh - 200px); background: #fff; }
.sticky-sidebar { position: sticky; top: 1rem; max-height: calc(100vh - 120px); overflow-y: auto; }
.sticky-sidebar h5 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--clinical-gray); }
.toc-link { display: block; padding: 0.25rem 0.6rem; color: #64748b; font-size: 0.8rem; border-radius: 4px; transition: all 0.12s; text-decoration: none; border-left: 3px solid transparent; }
.toc-link:hover { background: #f1f5f9; color: var(--clinical-dark); text-decoration: none; }
.toc-link.active { background: #f0f5ff; color: var(--clinical-primary); font-weight: 600; border-left-color: var(--clinical-primary); }
.toc-link i { width: 1rem; text-align: center; font-size: 0.75rem; }

/* ── Section Blocks ────────────────────── */
.section-block {
  background: #fff; border-radius: 8px; padding: 1.25rem 1.5rem;
  margin-bottom: 0.85rem; border: 1px solid #eef2f6;
  border-left: 4px solid #e2e8f0; scroll-margin-top: 70px;
}
.section-block.x-collapsed .section-content { display: none; }
.section-block.x-collapsed { border-left-color: #d0d5dd !important; opacity: 0.65; }
.section-block.x-collapsed .section-heading { margin-bottom: 0; border-bottom: none; }
/* Section color tints */
.section-block.definition-block   { background: #f0f7ff; border-left-color: #2563eb; }
.section-block.epidemiology-block { background: #f4f9f7; border-left-color: #059669; }
.section-block.subtypes-block     { background: #f5f3ff; border-left-color: #7c3aed; }
.section-block.molecular-block    { background: #f8f6ff; border-left-color: #6b21a8; }
.section-block.risk-block         { background: #fffbeb; border-left-color: #d97706; }
.section-block.clinical-block     { background: #f7fafc; border-left-color: #0284c7; }
.section-block.red-flag-block     { background: #fef2f2; border-left-color: #dc2626; }
.section-block.investigations-block { background: #f5f3ff; border-left-color: #7c3aed; }
.section-block.staging-block      { background: #f0f5ff; border-left-color: #4f46e5; }
.section-block.management-block   { background: #f7fafc; border-left-color: #2563eb; }
.section-block.pathway-block      { background: #faf7f0; border-left-color: #b45309; }
.section-block.pretreatment-block { background: #f4f9f7; border-left-color: #059669; }
.section-block.surgery-block      { background: #f7f7fa; border-left-color: #6366f1; }
.section-block.rt-block           { background: #f0f5ff; border-left-color: #2563eb; }
.section-block.systemic-block     { background: #f5f7f4; border-left-color: #16a34a; }
.section-block.response-block     { background: #f7fafc; border-left-color: #0891b2; }
.section-block.surveillance-block { background: #f4f8fa; border-left-color: #0284c7; }
.section-block.complications-block { background: #fef2f2; border-left-color: #dc2626; }
.section-block.supportive-block  { background: #f4f9f7; border-left-color: #059669; }
.section-block.prognosis-block   { background: #faf5ff; border-left-color: #9333ea; }
.section-block.followup-block    { background: #f4f8fa; border-left-color: #0891b2; }
.section-block.trials-block      { background: #f0f7ff; border-left-color: #4f46e5; }
.section-block.pearl-block       { background: #fffbeb; border-left-color: #d97706; }
.section-block.other-block       { background: #fafafa; border-left-color: #94a3b8; }
/* Section heading colors */
.section-block.definition-block .section-heading   { color: #2563eb; }
.section-block.epidemiology-block .section-heading { color: #059669; }
.section-block.subtypes-block .section-heading     { color: #7c3aed; }
.section-block.molecular-block .section-heading    { color: #6b21a8; }
.section-block.risk-block .section-heading         { color: #b45309; }
.section-block.clinical-block .section-heading     { color: #0284c7; }
.section-block.red-flag-block .section-heading     { color: #dc2626; }
.section-block.staging-block .section-heading      { color: #4f46e5; }
.section-block.management-block .section-heading   { color: #2563eb; }
.section-block.pathway-block .section-heading      { color: #b45309; }
.section-block.surgery-block .section-heading      { color: #6366f1; }
.section-block.rt-block .section-heading           { color: #2563eb; }
.section-block.systemic-block .section-heading     { color: #16a34a; }
.section-block.response-block .section-heading     { color: #0891b2; }
.section-block.surveillance-block .section-heading { color: #0284c7; }
.section-block.complications-block .section-heading{ color: #dc2626; }
.section-block.supportive-block .section-heading  { color: #059669; }
.section-block.prognosis-block .section-heading   { color: #9333ea; }
.section-block.followup-block .section-heading    { color: #0891b2; }
.section-block.trials-block .section-heading      { color: #4f46e5; }
.section-block.pearl-block .section-heading       { color: #b45309; }

/* ── Section Headings ──────────────────── */
.section-heading {
  border-bottom: 1px solid #eef2f6; padding-bottom: 6px; margin-bottom: 0.85rem;
  font-weight: 700; font-size: 1.1rem; letter-spacing: -0.2px;
  cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 0.4rem;
}
.section-heading .collapse-icon { font-size: 0.7rem; color: #94a3b8; transition: transform 0.2s; flex-shrink: 0; }
.section-heading .collapse-icon.is-closed { transform: rotate(-90deg); }
.section-heading .collapse-label { font-size: 0.62rem; font-weight: 400; color: #94a3b8; margin-left: auto; opacity: 0; transition: opacity 0.2s; }
.section-heading:hover .collapse-label { opacity: 1; }
.subsection-heading { color: var(--clinical-secondary); margin-top: 0.85rem; margin-bottom: 0.5rem; font-weight: 650; font-size: 0.95rem; }

/* ── Tables ────────────────────────────── */
.table-responsive { border-radius: 6px; }
.section-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-bottom: 0.25rem; }
.section-table thead th {
  background: #f1f4f8; color: var(--clinical-dark); font-weight: 600; font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.3px; padding: 0.45rem 0.65rem;
  border-bottom: 2px solid #d0d5dd;
}
.section-table tbody tr { border-bottom: 1px solid #eef2f6; }
.section-table tbody tr:last-child { border-bottom: none; }
.section-table tbody tr:hover { background: #f8fafc; }
.section-table td { padding: 0.4rem 0.65rem; vertical-align: top; line-height: 1.4; }
.section-table td:first-child { font-weight: 600; white-space: nowrap; color: var(--clinical-dark); }

/* ── Staging Tables ────────────────────── */
.staging-table td:first-child { color: var(--clinical-primary); }

/* ── Clinical Cards ────────────────────── */
.clinical-card { border-radius: 6px; background: #fff; border: 1px solid #eef2f6; margin-bottom: 0.5rem; }
.clinical-card .card-body { padding: 0.85rem 1rem; }
.clinical-card .card-text { font-size: 0.925rem; line-height: 1.6; color: var(--section-text); }
.clinical-card .card-subtitle { font-weight: 700; color: var(--clinical-dark); font-size: 0.9rem; margin-bottom: 0.3rem; }

/* ── Stat Cards (epidemiology) ─────────── */
.stat-card { border: none; border-radius: 8px; transition: transform 0.12s; }
.stat-card:hover { transform: translateY(-1px); }
.stat-card .stat-icon { font-size: 1.2rem; }
.stat-card .stat-value { font-size: 1.1rem; font-weight: 700; line-height: 1.15; }
.stat-card .stat-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px; }

/* ── Alert Cards ───────────────────────── */
.alert-card { border-radius: 6px; border-left: 4px solid var(--clinical-danger); background: #fff5f5; padding: 0.75rem 1rem; margin-bottom: 0.5rem; }
.alert-card strong { color: var(--clinical-danger); }

/* ── Definition Callout ────────────────── */
.definition-callout { background: #f0f7ff; border-radius: 6px; padding: 1rem 1.25rem; border-left: 3px solid #2563eb; margin-bottom: 0.25rem; }
.definition-callout p:last-child { margin-bottom: 0; }
.definition-callout p { font-size: 0.925rem; line-height: 1.65; }

/* ── Search Sticky ─────────────────────── */
.search-sticky {
  position: sticky; top: 0; z-index: 20;
  background: #f8fafc; padding: 0.5rem 0 0.3rem;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.search-sticky input { flex: 1; min-width: 120px; border-radius: 8px; font-size: 0.85rem; }
.search-nav { display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.search-nav .match-count { font-size: 0.78rem; color: var(--clinical-gray); font-weight: 500; min-width: 4rem; text-align: center; }
.search-nav-btn { border: 1px solid #d0d5dd; background: #fff; border-radius: 6px; padding: 0.2rem 0.5rem; font-size: 0.75rem; color: #64748b; cursor: pointer; line-height: 1.4; }
.search-nav-btn:hover { background: #f1f5f9; color: var(--clinical-dark); }
.search-clear { border: none; background: transparent; font-size: 1.1rem; color: #94a3b8; cursor: pointer; padding: 0 0.25rem; line-height: 1; }
.search-clear:hover { color: var(--clinical-danger); }

/* ── Search Highlighting ──────────────── */
mark.search-hl { background: #fef08a; padding: 1px 3px; border-radius: 2px; }
.section-block.search-current { box-shadow: inset 2px 0 0 var(--clinical-primary); }

/* ── Other ─────────────────────────────── */
.breadcrumb { font-size: 0.8rem; background: transparent; padding: 0; margin-bottom: 0.75rem; }
.breadcrumb-item a { color: var(--clinical-primary); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }
.btn-cta { border-radius: 8px; padding: 0.45rem 1.1rem; font-weight: 600; font-size: 0.82rem; }
.btn-cta i { margin-right: 0.35rem; }
.app-footer { background: #fff; border-top: 1px solid #e2e8f0; padding: 1.25rem 0; margin-top: 2.5rem; }
.app-footer p { font-size: 0.78rem; color: var(--clinical-gray); }
.text-muted { color: var(--clinical-gray) !important; }
.card-grid { margin-bottom: 0.25rem; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--clinical-gray); }
.empty-state i { font-size: 2.5rem; color: #d0d5dd; }
.empty-state h4 { margin-top: 0.75rem; font-size: 1rem; }

/* ── Regimen Page ────────────────────────── */
.section-mini-heading { font-size: 0.82rem; font-weight: 700; color: var(--clinical-dark); border-bottom: 1px solid #eef2f6; padding-bottom: 4px; margin-bottom: 0.5rem; margin-top: 0.75rem; }
.regimen-detail-card { position: sticky; top: 1rem; border-radius: 8px; border: 1px solid #e2e8f0; max-height: calc(100vh - 120px); overflow-y: auto; }
.regimen-detail-card .card-header { border-bottom: 1px solid #eef2f6; position: sticky; top: 0; z-index: 2; }
[x-cloak] { display: none !important; }

/* ── Responsive ────────────────────────── */
@media (max-width: 768px) {
  .hero-title { font-size: 1.5rem; }
  .hero-subtitle { font-size: 0.82rem; }
  .hero-section { padding: 1.5rem 1rem 1.5rem; }
  .hero-search-input { padding: 10px 14px 10px 40px !important; font-size: 0.85rem !important; }
  .sidebar-col { display: none; }
  .content-col { padding-left: 0 !important; }
  .disease-grid { padding: 0.5rem 0.5rem 1.5rem; }
  .category-section { padding: 0.75rem 0.75rem 1.25rem; }
  .section-block { padding: 0.85rem 1rem; }
  .section-heading { font-size: 1rem; }
  .card-emoji { font-size: 1.6rem; }
}