/* ── Skip Link (Accessibility) ────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10000;
  background: #231e14;
  color: #fff;
  padding: 10px 20px;
  border-radius: 0 0 6px 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #4a7c35;
  outline-offset: 2px;
}

/* ── Focus Indicators (Accessibility) ─────────────────────────────────── */
:focus-visible {
  outline: 3px solid #4a7c35;
  outline-offset: 2px;
}
button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 3px solid #4a7c35;
  outline-offset: 2px;
}

/* ── Unified Search (sidebar) ─────────────────────────────────────────── */
.us-wrap {
  padding: 8px 14px 10px;
  position: relative;
}
.us-input {
  width: 100%;
  padding: 7px 10px 7px 28px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 12.5px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6050' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E") 8px center no-repeat;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.us-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(74, 124, 53, 0.15);
}
.us-input::placeholder { color: #a09888; }
.us-results {
  display: none;
  position: absolute;
  left: 14px;
  right: 14px;
  top: 100%;
  z-index: 200;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  max-height: 380px;
  overflow-y: auto;
}
.us-results.open { display: block; }
.us-group-label {
  padding: 6px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
}
.us-item {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.35;
  border-bottom: 1px solid #f0ece4;
  cursor: pointer;
  transition: background 0.1s;
}
.us-item:last-child { border-bottom: none; }
.us-item:hover, .us-item:focus { background: var(--bg2); }
.us-item-title { font-weight: 600; display: block; }
.us-item-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.us-item-type {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 4px;
}
.us-item-type--drug { background: rgba(74, 124, 53, 0.12); color: var(--accent); }
.us-item-type--blog { background: rgba(139, 105, 20, 0.12); color: var(--accent2); }
.us-item-type--tool { background: rgba(96, 125, 139, 0.12); color: #546e7a; }
.us-empty { padding: 16px 12px; text-align: center; font-size: 12px; color: #999; }
.us-results mark { background: rgba(74, 124, 53, 0.2); color: inherit; padding: 0 1px; border-radius: 2px; }

/* ── Reset & Variables ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #f5f0e8;
  --bg2:        #ece6db;
  --bg3:        #e2dbd0;
  --card:       #fefcf8;
  --border:     #cfc8ba;
  --accent:     #4a7c35;
  --accent2:    #8b6914;
  --text:       #231e14;
  --text-muted: #6b6050;
  --green:      #3a6e28;
  --red:        #c04030;
  --yellow:     #8b6914;
  --orange:     #b05a20;
  --sidebar-w:  240px;
  --font:       'Segoe UI', system-ui, sans-serif;
}

html, body {
  height: 100%;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Layout ────────────────────────────────────────────────────────────── */
#sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--bg2);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

#content {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  padding: 0;
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.sidebar-header {
  padding: 20px 16px 14px;
  border-bottom: 1px solid var(--border);
}

.logo {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
}
.logo span { color: var(--accent); }
.logo-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.nav-links {
  list-style: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.nav-links li { margin: 2px 8px; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.nav-link:hover { background: var(--bg3); color: var(--text); }
.nav-link.active { background: rgba(74,124,53,0.12); color: var(--accent); }
.nav-icon { font-size: 11px; }

.filter-panel {
  padding: 14px 14px 10px;
  flex: 1;
}
.filter-panel h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.filter-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-muted);
  transition: color 0.1s;
}
.filter-item:hover { color: var(--text); }
.filter-item input[type="checkbox"] {
  width: 13px; height: 13px;
  accent-color: var(--accent);
}

.sidebar-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.6;
}

/* ── Section Styles ────────────────────────────────────────────────────── */
.section {
  display: none;
  padding: 28px 32px 48px;
  max-width: 1400px;
}
.section.active { display: block; }

/* Drug table gets full width — too many columns for a max-width constraint */
#drug-table.section {
  max-width: none;
  width: 100%;
}

.section-header {
  margin-bottom: 24px;
}
.section-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}
.section-sub {
  color: var(--text-muted);
  margin-top: 4px;
  font-size: 13px;
}

/* ── Overview ──────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.stat-value { font-size: 28px; font-weight: 700; color: var(--accent); }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }

.overview-search {
  position: relative;
  max-width: 480px;
  margin-bottom: 28px;
}
.overview-search input {
  width: 100%;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  outline: none;
}
.overview-search input:focus { border-color: var(--accent); }

.search-dropdown {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  z-index: 200;
  max-height: 280px;
  overflow-y: auto;
}
.search-result-item {
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.search-result-item:hover { background: var(--card); }
.search-result-item .drug-name { font-weight: 600; }
.search-result-item .drug-meta { font-size: 12px; color: var(--text-muted); }

.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.info-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}
.info-card h3 { font-size: 16px; margin-bottom: 8px; color: var(--accent); }
.info-card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 14px; }

.btn-primary {
  padding: 8px 16px;
  background: var(--accent);
  color: #fefcf8;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.85; }

/* ── Table Controls ────────────────────────────────────────────────────── */
.table-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.table-controls input,
.table-controls select {
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.table-controls input { min-width: 200px; }
.table-controls input:focus,
.table-controls select:focus { border-color: var(--accent); }
.table-controls select option { background: var(--bg2); }

.toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
}

/* ── Main Table ────────────────────────────────────────────────────────── */
.table-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 260px);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 100%;
  /* Always show scrollbar so users know it's scrollable */
  scrollbar-gutter: stable;
}

/* Prevent columns from collapsing — let content dictate width */
.col-name       { min-width: 120px; }
.col-brand      { min-width: 100px; }
.col-class      { min-width: 90px; }
.col-enantiomer { min-width: 110px; }
.col-halflife   { min-width: 120px; }
.col-metabolites{ min-width: 200px; }
.col-renal      { min-width: 90px; }
.col-hepatic    { min-width: 90px; }
.col-geriatric  { min-width: 80px; }
.col-qt         { min-width: 110px; }
.col-pb           { min-width: 110px; }
.col-pregnancy    { min-width: 130px; }
.col-breastfeeding{ min-width: 140px; }
.col-synaptic     { min-width: 200px; }
.col-receptor     { min-width: 100px; }

/* ── Perinatal Risk Badges ──────────────────────────────────────────────── */
.peri-cell { display: flex; flex-direction: column; gap: 3px; }
.peri-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid;
}
.peri-low     { background: #dcfce7; color: #14532d; border-color: #86efac; }
.peri-caution { background: #fef9c3; color: #713f12; border-color: #fde047; }
.peri-avoid   { background: #fecaca; color: #450a0a; border-color: #f87171; }
.peri-unknown { background: var(--bg3); color: var(--text-muted); border-color: var(--border); }
.peri-cat {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
thead th {
  background: var(--bg3);
  color: var(--text-muted);
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  position: sticky;
  top: 0;
  z-index: 10;
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
.sort-arrow { font-size: 10px; opacity: 0.5; }
th.sort-asc .sort-arrow::after  { content: ' ▲'; opacity: 1; }
th.sort-desc .sort-arrow::after { content: ' ▼'; opacity: 1; }

tbody tr {
  border-bottom: 1px solid rgba(207,200,186,0.8);
  transition: background 0.1s;
}
tbody tr:hover { background: var(--bg3); }
tbody tr:last-child { border-bottom: none; }

td {
  padding: 9px 12px;
  vertical-align: top;
  color: var(--text);
}

/* Sticky first column — drug name stays visible on horizontal scroll */
#main-table thead th:first-child,
#main-table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--bg2);
  box-shadow: 2px 0 6px rgba(35,30,20,0.08);
}
#main-table thead th:first-child {
  z-index: 15;
  background: var(--bg3);
}
#main-table tbody tr:hover td:first-child { background: var(--bg3); }


.drug-name-cell { font-weight: 600; color: var(--accent); white-space: nowrap; }
.brand-name { color: var(--text-muted); font-size: 12px; text-transform: uppercase; }

/* Class badges */
.class-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.class-SSRI   { background: rgba(16,185,129,0.12); color: #0d7a52; }
.class-SNRI   { background: rgba(59,130,246,0.12); color: #1a5cb0; }
.class-TCA    { background: rgba(139,92,246,0.12); color: #6020c0; }
.class-MAOI   { background: rgba(245,158,11,0.12); color: #7a4e00; }
.class-NDRI   { background: rgba(20,184,166,0.12); color: #0a6860; }
.class-NaSSA  { background: rgba(236,72,153,0.12); color: #a81060; }
.class-SARI   { background: rgba(251,146,60,0.12); color: #a03808; }
.class-SSRI5HT1A { background: rgba(6,182,212,0.12); color: #0a6080; }
.class-FGA    { background: rgba(239,68,68,0.12);  color: #a81010; }
.class-SGA    { background: rgba(99,102,241,0.12); color: #3030a8; }
.class-MoodStabilizer { background: rgba(132,204,22,0.12); color: #406010; }
.class-ZDrug  { background: rgba(251,191,36,0.12); color: #7a5400; }
.class-Benzodiazepine { background: rgba(253,186,116,0.12); color: #8b3800; }
.class-MelatoninAgonist { background: rgba(167,139,250,0.12); color: #4818a0; }
.class-OrexinAntagonist { background: rgba(244,63,94,0.12); color: #980820; }
.class-Azapirone       { background: rgba(245,158,11,0.12);  color: #7a4e00; }
.class-NMDAAntagonist  { background: rgba(220,38,38,0.12);   color: #991010; }
.class-NeuroactiveSteroid { background: rgba(167,139,250,0.12); color: #4818a0; }
.class-Combination     { background: rgba(251,146,60,0.12);  color: #8b3800; }
.class-Gabapentinoid   { background: rgba(20,184,166,0.12);  color: #0a6860; }
.class-Alpha2Agonist   { background: rgba(6,182,212,0.12);   color: #0a5a7a; }
.class-BetaBlocker     { background: rgba(71,85,105,0.12);   color: #374151; }
.class-Antihistamine   { background: rgba(234,179,8,0.12);   color: #7a5400; }
.class-Anticholinergic { background: rgba(168,85,247,0.12);  color: #5b21b6; }
.class-Stimulant       { background: rgba(239,68,68,0.12);   color: #991b1b; }
.class-WakePromotingAgent { background: rgba(59,130,246,0.12); color: #1e4da8; }

/* Yes/No indicators */
.yes-badge { color: var(--red); font-weight: 600; }
.no-badge  { color: var(--text-muted); }
.modified-yes { color: var(--yellow); font-weight: 600; }

/* P450 Badges */
.badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin: 1px;
  white-space: nowrap;
}
.badge-substrate { background: rgba(74,124,53,0.12);  color: #2e6018; }
.badge-strong    { background: rgba(192,64,48,0.12);  color: #901010; }
.badge-moderate  { background: rgba(139,105,20,0.12); color: #6a4000; }
.badge-weak      { background: rgba(80,140,30,0.12);  color: #366010; }
.badge-inducer   { background: rgba(100,50,180,0.12); color: #481890; }

/* Chart button */
.chart-btn {
  padding: 4px 10px;
  background: rgba(201,160,53,0.15);
  border: 1px solid rgba(201,160,53,0.4);
  border-radius: 5px;
  color: var(--accent2);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s;
}
.chart-btn:hover { background: rgba(201,160,53,0.3); }

/* P450 table */
.p450-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.p450-filter {
  margin-bottom: 14px;
}
.p450-filter label { font-size: 13px; color: var(--text-muted); }
.p450-filter select {
  margin-left: 8px;
  padding: 5px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  outline: none;
}
.p450-filter select option { background: var(--bg2); }

.p450-cell { text-align: center; }

/* ── Receptor Binding Section ──────────────────────────────────────────── */
.receptor-drug-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.receptor-drug-selector label { font-size: 14px; color: var(--text-muted); }
.receptor-drug-selector select {
  padding: 8px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  min-width: 240px;
}
.receptor-drug-selector select:focus { border-color: var(--accent); }
.receptor-drug-selector select option { background: var(--bg2); }

.chart-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 36px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
}
.chart-panel.hidden { display: none; }

.chart-info { width: 100%; }
.chart-info h3 { font-size: 18px; margin-bottom: 4px; }
.chart-info p  { font-size: 13px; color: var(--text-muted); }

.pie-wrap {
  flex: 0 0 auto;
  max-width: 380px;
}
.pie-wrap canvas { width: 100% !important; height: auto !important; }

.ki-table-wrap { flex: 1; min-width: 240px; }

.ki-table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}
.ki-table th {
  background: var(--bg3);
  color: var(--text-muted);
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  position: sticky;
  top: 0;
}
.ki-table td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(207,200,186,0.8);
}
.ki-table tr:hover td { background: var(--bg3); }
.affinity-bar {
  display: inline-block;
  height: 8px;
  border-radius: 4px;
  vertical-align: middle;
  min-width: 4px;
}
.affinity-label { font-size: 11px; color: var(--text-muted); margin-left: 6px; }

.info-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent2);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
}
.info-box.hidden { display: none; }
.info-box strong { color: var(--text); }

.section-divider {
  margin: 32px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.section-divider h3 { font-size: 18px; margin-bottom: 4px; }

.class-select-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.class-select-row label { color: var(--text-muted); font-size: 13px; }
.class-select-row select {
  padding: 7px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.class-select-row select:focus { border-color: var(--accent); }
.class-select-row select option { background: var(--bg2); }

.receptor-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.receptor-toggle-btn {
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  opacity: 0.5;
  transition: opacity 0.1s;
}
.receptor-toggle-btn.active { opacity: 1; }

.bar-chart-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  position: relative;
}

/* ── Modal ─────────────────────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal.hidden { display: none; }
.modal-content {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 28px;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover { color: var(--text); }

.modal-drug-name { font-size: 22px; font-weight: 700; margin-bottom: 2px; }
.modal-brand     { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; }
.modal-section   { margin-bottom: 16px; }
.modal-section h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.modal-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.modal-field { flex: 1; min-width: 140px; }
.modal-field label { font-size: 11px; color: var(--text-muted); display: block; margin-bottom: 2px; }
.modal-field value { font-size: 13px; }

/* ── Synaptic Binding ──────────────────────────────────────────────────── */
.syn-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
  cursor: help;
}
.syn-row:last-child { margin-bottom: 0; }

.syn-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.syn-pre  { background: rgba(29,92,176,0.1);  color: #1a5cb0; border: 1px solid rgba(29,92,176,0.3); }
.syn-post { background: rgba(96,32,192,0.1);  color: #6020c0; border: 1px solid rgba(96,32,192,0.3); }
.syn-both { background: rgba(10,104,96,0.1);  color: #0a6860; border: 1px solid rgba(10,104,96,0.3); }

.syn-targets {
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
}

/* Modal synaptic rows */
.modal-syn-list { display: flex; flex-direction: column; gap: 10px; }
.modal-syn-row  { display: flex; align-items: flex-start; gap: 10px; }
.modal-syn-row .syn-badge {
  font-size: 11px;
  padding: 2px 7px;
  margin-top: 1px;
  flex-shrink: 0;
}

/* ── FDA Black Box Warnings ───────────────────────────────────────────── */
.modal-bbw h4 {
  color: #b91c1c;
}
.bbw-container {
  background: #fef2f2;
  border: 2px solid #b91c1c;
  border-radius: 4px;
  padding: 12px;
}
.bbw-item {
  font-size: 13px;
  line-height: 1.6;
  color: #7f1d1d;
  padding: 6px 0 6px 20px;
  position: relative;
}
.bbw-item::before {
  content: "\26A0";
  position: absolute;
  left: 0;
  top: 6px;
  font-size: 13px;
}
.bbw-item + .bbw-item {
  border-top: 1px solid #fecaca;
}

/* ── Common Side Effects ─────────────────────────────────────────────── */
.se-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.se-category {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.se-system {
  min-width: 130px;
  font-weight: 600;
  font-size: 12px;
  color: var(--accent2);
  padding-top: 4px;
  flex-shrink: 0;
}
.se-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.se-tag {
  display: inline-block;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
}

@media (max-width: 600px) {
  .se-category {
    flex-direction: column;
    gap: 4px;
  }
  .se-system {
    min-width: unset;
  }
}

/* ── Receptor Glossary ─────────────────────────────────────────────────── */
.glossary-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.glossary-controls input {
  padding: 9px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  min-width: 320px;
}
.glossary-controls input:focus { border-color: var(--accent); }

.glossary-type-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gtype-btn {
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.gtype-btn.active {
  background: rgba(74,124,53,0.12);
  color: var(--accent);
  border-color: rgba(74,124,53,0.4);
}
.gtype-btn:hover { color: var(--text); }

#glossary-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.glossary-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 14px;
}

.glossary-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.glossary-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.glossary-card-header:hover { background: var(--bg3); }

.glossary-receptor-name {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.receptor-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.receptor-symbol {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.receptor-fullname {
  font-size: 13px;
  color: var(--text-muted);
}

.glossary-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.receptor-type-badge {
  padding: 3px 9px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.glossary-chevron {
  color: var(--text-muted);
  font-size: 12px;
  transition: transform 0.2s;
  display: inline-block;
}
.glossary-chevron.rotated { transform: rotate(180deg); }

.glossary-card-body {
  display: none;
  padding: 0 18px 18px;
  border-top: 1px solid var(--border);
}
.glossary-card-body.open { display: block; }

.glossary-description {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
  padding: 14px 0 10px;
}

.glossary-action {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.glossary-action-title {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
}
.action-tag {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent2);
  white-space: nowrap;
}
.action-drugs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.drug-chip {
  padding: 2px 8px;
  background: rgba(74,124,53,0.1);
  border: 1px solid rgba(74,124,53,0.25);
  border-radius: 4px;
  font-size: 11px;
  color: var(--accent);
}

.glossary-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 700px) {
  .glossary-columns { grid-template-columns: 1fr; }
}

.glossary-col {
  padding: 12px 14px;
}
.benefits-col { border-right: 1px solid var(--border); }

.col-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.benefit-header { color: var(--green); }
.effect-header  { color: var(--red); }

.glossary-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.glossary-col ul li {
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 4px 0;
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
  border-bottom: 1px solid rgba(207,200,186,0.6);
}
.glossary-col ul li:last-child { border-bottom: none; }

.benefits-col li::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}
.effects-col li::before {
  content: '!';
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 700;
}

mark {
  background: rgba(139,105,20,0.18);
  color: #6a4000;
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Side-by-Side Comparison ───────────────────────────────────────────── */
.compare-selectors {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.compare-drug-slot {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 220px;
}
.compare-drug-slot label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.compare-drug-slot:first-child label { color: #4a7c35; }
.compare-drug-slot:last-child  label { color: #8b6914; }
.compare-drug-slot select {
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  width: 100%;
}
.compare-drug-slot select:focus { border-color: var(--accent); }
.compare-drug-slot select option { background: var(--bg2); }
.compare-vs {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-muted);
  padding-bottom: 6px;
  flex-shrink: 0;
}

.compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 4px;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.compare-table th {
  background: var(--bg3);
  padding: 9px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.compare-table td {
  padding: 8px 14px;
  border-bottom: 1px solid rgba(207,200,186,0.6);
  color: var(--text);
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:hover td { background: var(--bg3); }
.compare-receptor-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  white-space: nowrap;
}
.compare-win-a td:nth-child(2) { color: #4a7c35; font-weight: 600; }
.compare-win-b td:nth-child(3) { color: #8b6914; font-weight: 600; }

/* ── Clinical Warning Modal ────────────────────────────────────────────── */
.warning-overlay {
  position: fixed;
  inset: 0;
  background: rgba(35, 30, 20, 0.75);
  z-index: 1000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 16px;
  backdrop-filter: blur(3px);
}
.warning-overlay.hidden { display: none; }

.warning-box {
  background: var(--card);
  border: 2px solid #c04030;
  border-radius: 14px;
  max-width: 580px;
  width: 100%;
  margin: auto;
  padding: 32px 24px 28px;
  box-shadow: 0 8px 40px rgba(35,30,20,0.25);
  text-align: center;
}

.warning-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 12px;
  color: #c04030;
}

.warning-title {
  font-size: 22px;
  font-weight: 700;
  color: #c04030;
  margin-bottom: 20px;
  letter-spacing: -0.2px;
}

.warning-body {
  text-align: left;
  margin-bottom: 24px;
}

.warning-body p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 14px;
}

.warning-body strong {
  color: var(--text);
  font-weight: 700;
}

.warning-body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.warning-body ul li {
  font-size: 13px;
  color: var(--text-muted);
  padding: 9px 14px 9px 36px;
  line-height: 1.55;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.warning-body ul li:last-child { border-bottom: none; }
.warning-body ul li::before {
  content: '•';
  position: absolute;
  left: 16px;
  color: #c04030;
  font-weight: 700;
}

.warning-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #c04030;
  margin: 14px 0 5px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(192,64,48,0.2);
}

.warning-footer-note {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  font-style: italic;
  text-align: center;
  margin-bottom: 0 !important;
}

.warning-dismiss {
  display: block;
  width: 100%;
  padding: 13px 20px;
  background: #c04030;
  color: #fefcf8;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.1px;
  transition: background 0.15s;
}
.warning-dismiss:hover { background: #a03020; }

/* ── FDA Reference Search ───────────────────────────────────────────────── */
.fda-filter-input {
  display: block;
  width: 100%;
  max-width: 400px;
  padding: 10px 14px;
  margin-bottom: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}
.fda-filter-input:focus { border-color: var(--accent); }

.fda-link-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fda-link-btn {
  display: inline-block;
  padding: 6px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}
.fda-link-btn:hover {
  background: rgba(74,124,53,0.1);
  border-color: rgba(74,124,53,0.4);
}

/* ── Receptor Action Badges ─────────────────────────────────────────────── */
.action-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.act-reuptake { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.act-ant      { background: #fee2e2; color: #7f1d1d; border: 1px solid #fca5a5; }
.act-ant-pre  { background: #fef3c7; color: #78350f; border: 1px solid #fcd34d; }
.act-partial  { background: #fef9c3; color: #713f12; border: 1px solid #fde047; }
.act-agonist  { background: #dcfce7; color: #14532d; border: 1px solid #86efac; }
.act-inverse  { background: #ede9fe; color: #4c1d95; border: 1px solid #c4b5fd; }
.act-pam      { background: #e0f2fe; color: #0c4a6e; border: 1px solid #7dd3fc; }

/* ── Side Effect Sort Bar ───────────────────────────────────────────────── */
.se-sort-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 10px;
}
.se-sort-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.se-sort-bar select {
  padding: 6px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  min-width: 280px;
}
.se-sort-bar select:focus { border-color: var(--accent); }
.se-dir-btn {
  padding: 6px 12px;
  background: rgba(74,124,53,0.1);
  border: 1px solid rgba(74,124,53,0.4);
  border-radius: 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}
.se-dir-btn:hover { background: rgba(74,124,53,0.2); }

/* ── Risk Badges ────────────────────────────────────────────────────────── */
.risk-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  margin-right: 4px;
}
.risk-score {
  font-size: 11px;
  color: var(--text-muted);
}
.risk-vlow  { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.risk-low   { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.risk-mod   { background: #fef9c3; color: #713f12; border: 1px solid #fde047; }
.risk-high  { background: #fee2e2; color: #7f1d1d; border: 1px solid #fca5a5; }
.risk-vhigh { background: #fecaca; color: #450a0a; border: 1px solid #f87171; }
.col-se-risk {
  background: rgba(74,124,53,0.06);
  border-right: 2px solid rgba(74,124,53,0.3);
  font-size: 12px;
  white-space: nowrap;
}

/* ── QT Risk Tool ───────────────────────────────────────────────────────── */

/* Cards */
.qt-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 20px;
}
.qt-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
}

/* Education Accordion */
.qt-accordion { margin-bottom: 20px; }
.qt-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}
.qt-panel-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.qt-panel-title::-webkit-details-marker { display: none; }
.qt-panel-title::before {
  content: '▶';
  font-size: 10px;
  color: var(--accent);
  transition: transform 0.2s;
}
details[open] > .qt-panel-title::before { transform: rotate(90deg); }
.qt-panel-body {
  padding: 0 20px 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
}
.qt-panel-body p { margin: 0 0 10px; }
.qt-panel-body ul { margin: 0 0 10px; padding-left: 20px; }
.qt-panel-body li { margin-bottom: 4px; }
.qt-panel-body h4 { font-size: 13px; font-weight: 700; color: var(--text); margin: 0 0 6px; }

/* QT formula boxes */
.qt-formula-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.qt-formula-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  flex: 1;
  min-width: 220px;
}
.qt-formula-name { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; }
.qt-formula { font-size: 18px; font-weight: 700; color: var(--accent); font-family: monospace; }
.qt-formula-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* Threshold grid */
.qt-thresh-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
.qt-thresh-box {
  flex: 1;
  min-width: 160px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid;
}
.qt-thresh-val { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.qt-thresh-lbl { font-size: 11px; line-height: 1.4; }
.qt-thresh-normal  { background: #dcfce7; color: #14532d; border-color: #86efac; }
.qt-thresh-border  { background: #fef9c3; color: #713f12; border-color: #fde047; }
.qt-thresh-concern { background: #fee2e2; color: #7f1d1d; border-color: #fca5a5; }
.qt-thresh-high    { background: #fecaca; color: #450a0a; border-color: #f87171; }

/* Risk factor columns */
.qt-risk-cols { display: flex; gap: 20px; flex-wrap: wrap; }
.qt-risk-cols ul { flex: 1; min-width: 220px; margin: 0; padding-left: 18px; }
.qt-risk-cols li { font-size: 13px; margin-bottom: 5px; }

/* Callout boxes */
.qt-callout {
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 10px;
}
.qt-callout-warn { background: #fef3c7; border: 1px solid #fcd34d; color: #78350f; }
.qt-callout-info { background: #dbeafe; border: 1px solid #93c5fd; color: #1e3a5f; }

/* QTc Calculator */
.qtc-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 16px;
}
.qtc-input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.qtc-input-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.qtc-input-group input,
.qtc-input-group select {
  padding: 9px 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  width: 140px;
}
.qtc-input-group input:focus,
.qtc-input-group select:focus { border-color: var(--accent); }
.qt-calc-btn {
  padding: 9px 20px;
  background: var(--accent);
  color: #fefcf8;
  border: none;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-end;
  transition: opacity 0.15s;
}
.qt-calc-btn:hover { opacity: 0.85; }

.qtc-result { margin-top: 10px; }
.qtc-result.hidden { display: none; }
.qtc-result.qtc-error {
  padding: 12px 16px;
  background: #fee2e2;
  color: #7f1d1d;
  border-radius: 8px;
  font-size: 13px;
}
.qtc-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.qtc-method-box {
  flex: 1;
  min-width: 160px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid;
  text-align: center;
}
.qtc-method-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; opacity: 0.8; }
.qtc-value { font-size: 30px; font-weight: 800; }
.qtc-interp-label { font-size: 12px; font-weight: 600; margin-top: 4px; }
.qtc-note { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

.qtc-normal  { background: #dcfce7; color: #14532d; border-color: #86efac; }
.qtc-border  { background: #fef9c3; color: #713f12; border-color: #fde047; }
.qtc-concern { background: #fee2e2; color: #7f1d1d; border-color: #fca5a5; }
.qtc-high    { background: #fecaca; color: #450a0a; border-color: #f87171; }

/* Tisdale Score */
.tisdale-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.tisdale-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background 0.12s;
}
.tisdale-item:hover { background: var(--bg3); }
.tisdale-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.tisdale-pts {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent2);
  white-space: nowrap;
}
.tisdale-result {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.tisdale-score-label { font-size: 14px; font-weight: 600; color: var(--text-muted); }
#tisdale-score {
  font-size: 32px;
  font-weight: 800;
  color: var(--text);
  min-width: 36px;
  text-align: center;
}
.tisdale-risk-badge {
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid;
}
.tisdale-low  { background: #dcfce7; color: #14532d; border-color: #86efac; }
.tisdale-mod  { background: #fef9c3; color: #713f12; border-color: #fde047; }
.tisdale-high { background: #fecaca; color: #450a0a; border-color: #f87171; }
.tisdale-interp {
  width: 100%;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Non-psych drug list */
.qt-drug-legend {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 2;
}
.qt-nonpsych-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}
.qt-cat-block {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.qt-cat-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 8px 14px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
}
.qt-cat-drugs { padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
.qt-drug-item { display: flex; flex-direction: column; gap: 3px; }
.qt-drug-item-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qt-drug-name { font-size: 13px; font-weight: 600; color: var(--text); }
.qt-drug-notes { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

/* Risk pills */
.qt-risk-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid;
}
.qt-known       { background: #fecaca; color: #450a0a; border-color: #f87171; }
.qt-conditional { background: #fef9c3; color: #713f12; border-color: #fde047; }
.qt-possible    { background: #dbeafe; color: #1e3a5f; border-color: #93c5fd; }

/* Psych drug grid */
.qt-psych-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.qt-psych-item {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  min-width: 170px;
  transition: background 0.12s, border-color 0.12s;
}
.qt-psych-item:hover { background: rgba(74,124,53,0.08); border-color: rgba(74,124,53,0.4); }
.qt-psych-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.qt-psych-sub  { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }

/* References */
.qt-refs {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
  padding-left: 20px;
  margin: 0;
}
.qt-refs li { margin-bottom: 8px; }
.qt-refs em { font-style: italic; }

/* ── Refill Calendar ────────────────────────────────────────────────────── */
.rc-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 26px;
  margin-bottom: 18px;
}
.rc-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
}
.rc-card-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 16px;
}

.rc-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.rc-wrap { flex-wrap: wrap; }

.rc-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rc-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.rc-field input,
.rc-field select {
  padding: 8px 11px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  min-width: 130px;
}
.rc-field input:focus,
.rc-field select:focus { border-color: var(--accent); }

.rc-btn {
  padding: 9px 20px;
  background: var(--accent);
  color: #fefcf8;
  border: none;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
  align-self: flex-end;
}
.rc-btn:hover { opacity: 0.85; }

/* Results */
.rc-result {
  margin-top: 16px;
  padding: 16px 20px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.rc-result.hidden { display: none; }
.rc-result.rc-error {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #7f1d1d;
  font-size: 13px;
}

.rc-big-num {
  font-size: 52px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px;
}
.rc-big-unit {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-muted);
}
.rc-detail {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 4px;
}
.rc-detail strong { color: var(--text); }

/* Stats grid */
.rc-stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rc-stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 130px;
  flex: 1;
  text-align: center;
}
.rc-stat-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.2;
}
.rc-stat-unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.rc-stat-lbl {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.3;
}

/* Usage adherence banner */
.rc-usage-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 14px;
}
.rc-usage-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.rc-usage-pct {
  font-weight: 700;
  font-size: 16px;
}
.rc-usage-detail {
  font-size: 12.5px;
  opacity: 0.85;
}
.rc-usage-on {
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}
.rc-usage-over {
  background: #fbe9e7;
  color: #c62828;
  border: 1px solid #ef9a9a;
}
.rc-usage-under {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc80;
}

/* Fill date table */
.rc-fill-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.rc-fill-table tr {
  border-bottom: 1px solid var(--border);
}
.rc-fill-table tr:last-child { border-bottom: none; }
.rc-fill-table td { padding: 9px 10px; vertical-align: middle; }
.rc-fill-num {
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  width: 60px;
}
.rc-fill-date {
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.rc-fill-note {
  font-size: 12px;
  color: var(--text-muted);
}
.rc-copy-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.rc-copy-btn:hover {
  opacity: 0.85;
}

/* ── References & Methods Section ──────────────────────────────────────── */
.ref-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px 28px;
  margin-bottom: 20px;
}
.ref-card-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-main);
  margin: 0 0 6px;
}
.ref-card-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.fda-search-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.fda-search-row .fda-filter-input {
  flex: 1;
  min-width: 200px;
  padding: 9px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-main);
  font-size: 14px;
}
.fda-search-btn {
  padding: 9px 18px;
  border-radius: 6px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.fda-search-btn:hover { opacity: .85; }
.ref-method-block {
  margin-bottom: 22px;
}
.ref-method-block h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 8px;
}
.ref-method-block p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 8px;
  line-height: 1.6;
}
.ref-formula {
  background: var(--bg);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 10px 14px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: var(--text-main);
  margin: 8px 0;
  white-space: pre-wrap;
}
.ref-inline-formula {
  font-family: 'Courier New', monospace;
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 13px;
}
.ref-method-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 10px 0;
}
.ref-method-table th {
  background: rgba(255,255,255,.06);
  color: var(--text-main);
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.ref-method-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: var(--text-muted);
  vertical-align: top;
}
.ref-method-steps {
  padding-left: 18px;
  margin: 8px 0;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}
.ref-hale-list {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  font-size: 13px;
}
.ref-hale-list li {
  padding: 3px 0;
  color: var(--text-muted);
}
.ref-hale-list li strong {
  color: var(--text-main);
  font-family: 'Courier New', monospace;
}
.ref-caveat {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 10px;
  line-height: 1.5;
}
.ref-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ref-list li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.ref-list li:last-child { border-bottom: none; }
.ref-list a {
  color: var(--accent);
  text-decoration: none;
}
.ref-list a:hover { text-decoration: underline; }

/* ── Cognitive Assessment Section ──────────────────────────────────────── */

/* Pyramid / Hierarchy Visualization */
.cog-pyramid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 20px 0 16px;
}
.cog-pyramid-row {
  width: var(--w);
  background: var(--dom-col);
  border-radius: 6px;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: transform .15s;
}
.cog-pyramid-row:hover { transform: scaleX(1.01); }
.cog-py-label {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.cog-py-tag {
  font-size: 11px;
  color: rgba(255,255,255,.75);
  white-space: nowrap;
}

/* Domain Card Grid */
.cog-domain-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}
.cog-domain-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--dom-col);
  border-radius: 10px;
  overflow: hidden;
}
.cog-dc-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--dom-col) 12%, transparent);
  border-bottom: 1px solid var(--border);
}
.cog-dc-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--dom-col);
  min-width: 28px;
  line-height: 1;
}
.cog-dc-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
}
.cog-dc-tag {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.cog-dc-body {
  padding: 16px 18px;
}
.cog-dc-body > p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 12px;
}
.cog-dc-sub {
  font-size: 12px;
  color: var(--text-muted);
  background: rgba(255,255,255,.04);
  border-radius: 5px;
  padding: 8px 12px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.cog-dc-sub strong { color: var(--text-main); }

/* Test blocks within domain cards */
.cog-dc-tests {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 700px) {
  .cog-dc-tests { grid-template-columns: 1fr; }
}
.cog-test-block {
  border-radius: 6px;
  padding: 10px 12px;
}
.cog-moca { background: rgba(90,125,184,.12); border: 1px solid rgba(90,125,184,.25); }
.cog-slums { background: rgba(122,184,110,.12); border: 1px solid rgba(122,184,110,.25); }
.cog-test-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cog-moca .cog-test-label { color: #7aa0d4; }
.cog-slums .cog-test-label { color: #8ac880; }
.cog-test-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cog-test-block ul li {
  font-size: 12px;
  color: var(--text-muted);
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  line-height: 1.5;
}
.cog-test-block ul li:last-child { border-bottom: none; }
.cog-pts {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(255,255,255,.06);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 4px;
  white-space: nowrap;
}
.cog-condition-note {
  font-size: 12px;
  color: var(--text-muted);
  background: rgba(255,255,255,.03);
  border-radius: 5px;
  padding: 8px 12px;
  margin: 0;
  line-height: 1.5;
}
.cog-condition-note strong { color: var(--text-main); }

/* Domain comparison table */
.cog-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 12px 0 4px;
}
.cog-compare-table th {
  background: rgba(255,255,255,.06);
  color: var(--text-main);
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.cog-compare-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: var(--text-muted);
  vertical-align: top;
}
.cog-pts-col { text-align: center; font-weight: 600; color: var(--accent) !important; }
.cog-dom-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  border-radius: 4px;
  padding: 3px 8px;
  white-space: nowrap;
}

/* Score interpretation */
.cog-score-test-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 6px;
}
.cog-score-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.cog-score-box {
  flex: 1;
  min-width: 110px;
  background: color-mix(in srgb, var(--sc) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc) 40%, transparent);
  border-radius: 8px;
  padding: 12px 14px;
  text-align: center;
}
.cog-score-range {
  font-size: 22px;
  font-weight: 700;
  color: var(--sc);
  line-height: 1.1;
}
.cog-score-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.3;
}
.cog-score-edu-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Neuropsychiatric Circuits ──────────────────────────────────────────── */

.circuit-big-concept {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  margin: 16px 0 12px;
}
.cbc-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 12px;
}
.cbc-ref {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 8px;
}
.cbc-grid { display: flex; flex-direction: column; gap: 6px; }
.cbc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  background: color-mix(in srgb, var(--lc) 10%, transparent);
  border-left: 3px solid var(--lc);
  border-radius: 4px;
}
.cbc-loop {
  font-size: 13px;
  font-weight: 600;
  color: var(--lc);
  min-width: 200px;
}
.cbc-fn {
  font-size: 13px;
  color: var(--text-muted);
}
.circuit-category-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.cch-icon { font-size: 16px; color: var(--text-muted); }
.cch-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: .01em;
}
.cch-ref {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap;
}
.circuit-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--cc);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}
.circuit-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--cc) 10%, transparent);
  border-bottom: 1px solid var(--border);
}
.cc-num {
  font-size: 24px;
  font-weight: 700;
  color: var(--cc);
  min-width: 30px;
  line-height: 1;
}
.cc-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
}
.cc-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.cc-category-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: .03em;
}
.circuit-body { padding: 16px 18px; }
.circuit-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.cp-node {
  background: color-mix(in srgb, var(--cc) 20%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--cc) 40%, transparent);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
}
.cp-arrow {
  font-size: 16px;
  color: var(--cc);
  font-weight: 600;
  padding: 0 2px;
}
.cp-return {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-left: 8px;
  white-space: nowrap;
}
.cp-note-inline {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  flex-basis: 100%;
  margin-top: 4px;
  padding-left: 2px;
}
.circuit-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 700px) {
  .circuit-cols { grid-template-columns: 1fr; }
  .cch-ref { display: none; }
  .cc-category-badge { display: none; }
}
.circuit-col-fn,
.circuit-col-clin {
  background: rgba(255,255,255,.03);
  border-radius: 6px;
  padding: 10px 12px;
}
.cc-col-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cc);
  margin-bottom: 8px;
}
.cc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cc-list li {
  font-size: 12px;
  color: var(--text-muted);
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  line-height: 1.5;
}
.cc-list li:last-child { border-bottom: none; }
.cc-assoc-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cc-assoc {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  background: color-mix(in srgb, var(--ac) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--ac) 35%, transparent);
  color: color-mix(in srgb, var(--ac) 80%, #fff);
  border-radius: 4px;
  padding: 4px 9px;
  line-height: 1.4;
}
.cc-assoc-note {
  font-size: 10px;
  font-weight: 400;
  opacity: .8;
  margin-left: 4px;
}
.cc-symptoms-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.cc-sym-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  margin-right: 2px;
  flex-shrink: 0;
}
.cc-sym {
  font-size: 11px;
  color: var(--text-main);
  background: rgba(255,255,255,.07);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
.cc-pharm-note {
  font-size: 12px;
  color: var(--text-muted);
  background: rgba(255,255,255,.03);
  border-left: 3px solid var(--cc);
  border-radius: 0 5px 5px 0;
  padding: 9px 12px;
  line-height: 1.6;
  margin-top: 4px;
}
.cc-pharm-note strong { color: var(--cc); }

/* ── Disease Brain Regions ──────────────────────────────────────────────── */
.region-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.rl-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.rl-item::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--rc);
  flex-shrink: 0;
}

.disease-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}
.disease-grid-single {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 8px;
}

.disease-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--dc, var(--accent));
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dc-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dc, var(--accent));
}
.dc-badge {
  font-size: 0.72rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--dc, var(--accent)) 18%, transparent);
  color: var(--dc, var(--accent));
  border: 1px solid color-mix(in srgb, var(--dc, var(--accent)) 35%, transparent);
  border-radius: 20px;
  padding: 2px 9px;
}

.dc-regions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dc-region {
  font-size: 0.75rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--rc, #888) 18%, transparent);
  color: color-mix(in srgb, var(--rc, #888) 90%, white);
  border: 1px solid color-mix(in srgb, var(--rc, #888) 35%, transparent);
  border-radius: 20px;
  padding: 3px 9px;
}

.dc-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.dc-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.dc-themes-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 2px;
}
.dc-theme {
  font-size: 0.72rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  color: var(--text-muted);
}

.dc-insight {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.dc-insight strong { color: var(--accent); }

.dc-circuit-link {
  font-size: 0.75rem;
  color: var(--accent);
  opacity: 0.7;
  font-style: italic;
}

/* ── Hierarchical Nav ───────────────────────────────────────────────────── */
.nav-group { margin: 2px 8px; }

.nav-parent-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 6px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: left;
}
.nav-parent-btn:hover { background: var(--bg3); color: var(--text); }
.nav-parent-btn:disabled { opacity: 0.45; cursor: default; }
.nav-parent-btn:disabled:hover { background: none; color: var(--text-muted); }

.nav-parent-label { flex: 1; }

.nav-caret {
  font-size: 9px;
  transition: transform 0.2s;
  color: var(--text-muted);
  opacity: 0.6;
}
.nav-group.open .nav-caret { transform: rotate(90deg); }

.nav-group--disabled .nav-soon {
  font-size: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 6px;
  color: var(--text-muted);
}

.nav-sub {
  list-style: none;
  padding: 2px 0 4px 0;
  display: none;
}
.nav-group.open .nav-sub { display: block; }

.nav-sub li { margin: 1px 0 1px 12px; }

.nav-sub-link {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 5px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 400;
  transition: background 0.15s, color 0.15s;
  border-left: 2px solid transparent;
}
.nav-sub-link:hover { background: var(--bg3); color: var(--text); }
.nav-sub-link.active {
  background: rgba(74,124,53,0.10);
  color: var(--accent);
  border-left-color: var(--accent);
}
.nav-sub-divider {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 700;
  padding: 8px 10px 2px 10px;
  margin: 4px 0 0 0;
  opacity: 0.6;
  pointer-events: none;
  list-style: none;
}

/* ── Sidebar Footer Links ───────────────────────────────────────────────── */
.sidebar-footer { display: flex; flex-direction: column; gap: 4px; }
.sf-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 11px;
  padding: 3px 0;
  transition: color 0.15s;
}
.sf-link:hover { color: var(--accent); }
.sf-contact { font-size: 11px; color: var(--text-muted); opacity: 0.5; }

/* ── Overview Topic Cards ───────────────────────────────────────────────── */
.overview-cards--topics {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.info-card--topic { display: flex; flex-direction: column; gap: 10px; }
.ic-icon { font-size: 28px; line-height: 1; }
.ic-sub-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.btn-sub {
  padding: 5px 12px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-sub:hover { background: rgba(74,124,53,0.15); color: var(--accent); border-color: var(--accent); }
.btn-sub--disabled { opacity: 0.4; cursor: default; }
.btn-sub--disabled:hover { background: rgba(255,255,255,0.06); color: var(--text-muted); border-color: var(--border); }
.info-card--soon { opacity: 0.6; }

/* ── Medication Comparison ──────────────────────────────────────────────── */
.mc-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
  flex-wrap: wrap;
}
.mc-results-header .mc-tabs { border-bottom: none; margin-bottom: 0; flex: 1; }
.mc-results { border-bottom: 1px solid var(--border); padding-bottom: 0; }
.mc-results-header { border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.mc-print-btn { white-space: nowrap; flex-shrink: 0; }

.mc-setup-card { margin-bottom: 24px; }

.mc-count-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.mc-count-label { font-size: 13px; color: var(--text-muted); }
.mc-count-pills { display: flex; gap: 6px; }
.mc-count-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mc-count-btn:hover { background: var(--bg3); color: var(--text); }
.mc-count-btn.active { background: rgba(74,124,53,0.15); color: var(--accent); border-color: var(--accent); }

.mc-selectors {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.mc-select-wrap { display: flex; flex-direction: column; gap: 5px; }
.mc-select-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.mc-select {
  min-width: 180px;
  padding: 8px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.mc-select:focus { outline: none; border-color: var(--accent); }

.mc-go-btn { margin-top: 4px; }

/* Results */
.mc-results { margin-top: 4px; }

.mc-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.mc-tab {
  padding: 9px 18px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.mc-tab:hover { color: var(--text); }
.mc-tab--active { color: var(--accent); border-bottom-color: var(--accent); }

.mc-panel { display: none; }
.mc-panel--active { display: block; }

/* Chart */
.mc-chart-wrap {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  max-height: 380px;
}
.mc-chart-wrap canvas { max-height: 340px; }

/* Ki table */
.mc-ki-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-bottom: 10px;
}
.mc-ki-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.mc-ki-table td { padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.mc-r-name { font-weight: 600; color: var(--text-muted); }
.mc-ki-cell { font-variant-numeric: tabular-nums; text-align: center; border-radius: 4px; }
.mc-ki-none { color: var(--text-muted); opacity: 0.4; text-align: center; }
.mc-ki-vhigh { background: rgba(240,96,64,0.18); color: #f06040; font-weight: 600; }
.mc-ki-high  { background: rgba(240,168,64,0.18); color: #f0a840; font-weight: 600; }
.mc-ki-mod   { background: rgba(90,125,180,0.18); color: #7aadee; }
.mc-ki-low   { color: var(--text-muted); }
.mc-shared-badge {
  display: inline-block;
  background: rgba(74,124,53,0.2);
  color: var(--accent);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
}
.mc-no-share { color: var(--text-muted); opacity: 0.3; }
.mc-row-sig td { background: rgba(255,255,255,0.02); }
.mc-ki-legend { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

/* Side effects */
.mc-se-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.mc-se-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}
.mc-overlap-all { border-left: 3px solid var(--accent); }
.mc-overlap-partial { border-left: 3px solid #f0a840; }
.mc-se-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}
.mc-se-label { font-size: 13px; font-weight: 600; color: var(--text); }
.mc-overlap-badge {
  font-size: 10px;
  background: rgba(74,124,53,0.18);
  color: var(--accent);
  border-radius: 10px;
  padding: 2px 8px;
  white-space: nowrap;
  font-weight: 600;
}
.mc-se-bars { display: flex; flex-direction: column; gap: 5px; }
.mc-se-bar-row { display: flex; align-items: center; gap: 8px; }
.mc-se-bar-name { width: 110px; font-size: 11.5px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-se-bar-track { flex: 1; height: 12px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.mc-se-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.mc-se-bar-score { width: 30px; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.mc-se-bar-na { font-size: 11px; color: var(--text-muted); opacity: 0.5; }

/* Circuits */
.mc-circuit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.mc-circuit-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-circuit-card.mc-overlap-all { border-left: 3px solid var(--accent); }
.mc-circuit-card.mc-overlap-partial { border-left: 3px solid #f0a840; }
.mc-circuit-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mc-circuit-name { font-size: 13px; font-weight: 600; color: var(--text); }
.mc-circuit-badge {
  font-size: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 7px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.mc-circuit-drugs { display: flex; flex-wrap: wrap; gap: 5px; }
.mc-circuit-drug {
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
  border-radius: 12px;
  padding: 2px 8px;
}
.mc-circuit-conditions { display: flex; flex-wrap: wrap; gap: 4px; }
.mc-cond-pill {
  font-size: 11px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--text-muted);
}

/* Conditions summary */
.mc-conditions-summary {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-top: 8px;
}
.mc-summary-title { font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.mc-cond-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.mc-cond-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 10px 12px;
}
.mc-cond-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.mc-cond-detail { font-size: 11px; color: var(--text-muted); }

/* ── Medication Taper / Start ───────────────────────────────────────────── */
.mt-warning {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(240,96,64,0.08);
  border: 1px solid rgba(240,96,64,0.3);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}
.mt-warning-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.mt-warning strong { color: #f06040; display: block; margin-bottom: 3px; }

.mt-mode-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.mt-mode-btn {
  padding: 9px 22px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mt-mode-btn:hover { background: var(--bg3); color: var(--text); }
.mt-mode-btn--active { background: rgba(74,124,53,0.14); color: var(--accent); border-color: var(--accent); }

.mt-panel { }

.mt-form { margin-bottom: 20px; }

.mt-direction-row {
  display: flex;
  gap: 20px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.mt-dir-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--text-muted);
  cursor: pointer;
}
.mt-dir-opt input { accent-color: var(--accent); }

.mt-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.mt-field { display: flex; flex-direction: column; gap: 5px; }
.mt-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}
.mt-label-hint { font-size: 10px; opacity: 0.7; text-transform: none; letter-spacing: 0; }
.mt-field-hint { font-size: 11px; color: var(--text-muted); opacity: 0.65; }

.mt-input {
  padding: 8px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
}
.mt-input:focus { outline: none; border-color: var(--accent); }
.mt-select {
  padding: 8px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  width: 100%;
}
.mt-select:focus { outline: none; border-color: var(--accent); }

.mt-dose-row { display: flex; gap: 6px; }
.mt-dose-row .mt-input { flex: 1; min-width: 0; }
.mt-unit-select {
  padding: 8px 6px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 12px;
  flex-shrink: 0;
}

.mt-generate-btn { margin-top: 4px; }

/* Cross-taper layout */
.mt-cross-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 700px) { .mt-cross-cols { grid-template-columns: 1fr; } }

.mt-cross-col {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mt-cross-col--down { border-top: 3px solid #f47560; }
.mt-cross-col--up   { border-top: 3px solid #57c785; }
.mt-cross-col-header {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}
.mt-cross-col--down .mt-cross-col-header { color: #f47560; }
.mt-cross-col--up   .mt-cross-col-header { color: #57c785; }

.mt-shared-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 20px;
}

/* Output */
.mt-output { margin-top: 4px; }
.mt-output-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.mt-output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.025);
}
.mt-output-drug { font-size: 16px; font-weight: 700; color: var(--accent); margin-right: 10px; }
.mt-output-dir  { font-size: 13px; color: var(--text-muted); }
.mt-output-meta { font-size: 12px; color: var(--text-muted); }

.mt-print-btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mt-print-btn:hover { background: var(--bg3); color: var(--text); }

.mt-table-wrap { overflow-x: auto; }
.mt-schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mt-schedule-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.mt-schedule-table td {
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--text);
}
.mt-schedule-table tr:last-child td { border-bottom: none; }
.mt-row-first td { background: rgba(74,124,53,0.07); }
.mt-row-zero td { background: rgba(240,96,64,0.06); color: var(--text-muted); }
.mt-step-num { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 12px; }
.mt-dose-cell { font-weight: 600; }
.mt-notes-cell { font-size: 12px; color: var(--text-muted); font-style: italic; }
.mt-output-caveat { padding: 12px 20px; font-size: 11px; border-top: 1px solid var(--border); margin: 0; }

/* ── Modal Indications ──────────────────────────────────────────────────── */
.modal-indications {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.modal-ind-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12.5px;
}
.modal-ind-use {
  color: var(--text);
  flex: 1;
}
.modal-ind-year {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(74,124,53,0.12);
  border-radius: 10px;
  padding: 1px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Blog ──────────────────────────────────────────────────────────────── */
.blog-topic-section { margin-bottom: 36px; }
.blog-topic-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--text-muted);
  opacity: 0.7;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 16px;
}
.blog-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.blog-post-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.blog-post-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.bpc-category { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 600; }
.bpc-title { font-size: 17px; font-weight: 700; color: var(--text); line-height: 1.35; }
.bpc-excerpt { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.bpc-meta { display: flex; gap: 12px; font-size: 11px; color: var(--text-muted); }
.bpc-cta { font-size: 13px; color: var(--accent); font-weight: 600; margin-top: 4px; }

/* Blog Article */
.blog-article { max-width: 820px; }
.ba-header { margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.ba-category { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 600; margin-bottom: 10px; }
.ba-title { font-size: 28px; font-weight: 800; color: var(--text); line-height: 1.2; margin-bottom: 10px; }
.ba-subtitle { font-size: 16px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; }
.ba-meta { font-size: 12px; color: var(--text-muted); }

.ba-body { font-size: 14px; line-height: 1.75; color: var(--text-muted); }
.ba-body p { margin-bottom: 16px; }
.ba-lead { font-size: 16px; color: var(--text); line-height: 1.7; margin-bottom: 24px; }
.ba-h2 { font-size: 20px; font-weight: 700; color: var(--text); margin: 36px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.ba-h3 { font-size: 16px; font-weight: 700; color: var(--text); margin: 24px 0 10px; }
.ba-chart-note { font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 6px; }

/* Stats row */
.ba-stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 24px 0; }
.ba-stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 18px 16px; text-align: center; }
.ba-stat-card--alert { border-top: 3px solid #c0392b; }
.ba-stat-card--good  { border-top: 3px solid var(--accent); }
.ba-stat-num { font-size: 32px; font-weight: 800; color: var(--text); line-height: 1; margin-bottom: 6px; }
.ba-stat-card--alert .ba-stat-num { color: #e74c3c; }
.ba-stat-card--good  .ba-stat-num { color: var(--accent); }
.ba-stat-label { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

/* Timeline */
.ba-timeline { position: relative; padding-left: 24px; margin: 24px 0; border-left: 2px solid var(--accent); }
.ba-tl-item { position: relative; padding: 0 0 20px 20px; }
.ba-tl-item--last { padding-bottom: 0; }
.ba-tl-dot { position: absolute; left: -28px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
.ba-tl-dot--last { background: #f0c040; }
.ba-tl-time { font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
.ba-tl-text { font-size: 13px; color: var(--text-muted); }

/* Insight box */
.ba-insight-box { display: flex; gap: 14px; background: rgba(44,184,176,0.07); border: 1px solid rgba(44,184,176,0.2); border-radius: 8px; padding: 16px; margin: 20px 0; font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.ba-insight-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.ba-insight-box strong { color: var(--text); }

/* 5 A's */
.ba-5a-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 20px 0; }
.ba-5a-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 16px; text-align: center; }
.ba-5a-num { font-size: 28px; font-weight: 800; color: var(--accent); line-height: 1; }
.ba-5a-letter { font-size: 15px; font-weight: 700; color: var(--text); margin: 4px 0; }
.ba-5a-desc { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }

/* Bar chart */
.ba-bar-chart { margin: 20px 0; display: flex; flex-direction: column; gap: 14px; }
.ba-bar-row { display: flex; align-items: center; gap: 12px; }
.ba-bar-label { width: 180px; flex-shrink: 0; font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.ba-bar-track { flex: 1; background: rgba(255,255,255,0.05); border-radius: 4px; height: 28px; position: relative; display: flex; align-items: center; }
.ba-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s; }
.ba-bar-pct { position: absolute; right: -38px; font-size: 14px; font-weight: 700; color: var(--text); }

/* Tables */
.ba-table-wrap { overflow-x: auto; margin: 16px 0 24px; border-radius: 8px; border: 1px solid var(--border); }
.ba-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ba-table th { padding: 10px 12px; background: rgba(255,255,255,0.04); color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); text-align: left; }
.ba-table td { padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text-muted); vertical-align: top; }
.ba-table tr:last-child td { border-bottom: none; }
.ba-tr-highlight td { background: rgba(44,184,176,0.05); color: var(--text); }

/* Compare */
.ba-compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
@media (max-width: 600px) { .ba-compare-row { grid-template-columns: 1fr; } }
.ba-compare-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 20px; text-align: center; }
.ba-compare-card--winner { border-top: 3px solid #27ae60; }
.ba-compare-badge { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; background: rgba(39,174,96,0.15); color: #57c785; border-radius: 10px; padding: 2px 10px; display: inline-block; margin-bottom: 8px; font-weight: 700; }
.ba-compare-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.ba-compare-pct { font-size: 40px; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.ba-compare-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.ba-compare-note { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* Therapy grid */
.ba-therapy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 20px 0; }
.ba-therapy-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 18px; }
.ba-therapy-icon { font-size: 26px; margin-bottom: 8px; }
.ba-therapy-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.ba-therapy-card p { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; margin: 0; }

/* Support grid */
.ba-support-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 20px 0; }
.ba-support-card { background: var(--card-bg); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 18px; }
.ba-support-num { font-size: 20px; font-weight: 800; color: var(--accent); margin-bottom: 4px; }
.ba-support-card h4 { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.ba-support-card p { font-size: 12px; color: var(--text-muted); line-height: 1.55; margin: 0; }

/* Populations */
.ba-pop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 20px 0; }
.ba-pop-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 18px; }
.ba-pop-icon { font-size: 28px; margin-bottom: 8px; }
.ba-pop-card h4 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.ba-pop-list { padding-left: 16px; margin: 0; }
.ba-pop-list li { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-bottom: 5px; }

/* Stacked protocol */
.ba-stacked-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 20px 0; }
.ba-stacked-card { background: var(--card-bg); border: 1px solid var(--border); border-top: 3px solid var(--sc, var(--accent)); border-radius: 8px; padding: 18px; }
.ba-stacked-icon { font-size: 26px; margin-bottom: 8px; }
.ba-stacked-title { font-size: 15px; font-weight: 700; color: var(--sc, var(--accent)); margin-bottom: 2px; }
.ba-stacked-sub { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
.ba-stacked-list { padding-left: 16px; margin: 0; }
.ba-stacked-list li { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-bottom: 4px; }

/* Summary box */
.ba-summary-box { background: rgba(44,184,176,0.08); border: 1px solid rgba(44,184,176,0.25); border-radius: 10px; padding: 20px 24px; margin: 32px 0; }
.ba-summary-box h3 { font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.ba-summary-box p { font-size: 13px; color: var(--text-muted); line-height: 1.65; margin: 0; }

/* References */
.ba-references { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); }
.ba-ref-title { font-size: 14px; font-weight: 700; color: var(--text-muted); margin-bottom: 12px; }
.ba-ref-list { padding-left: 20px; }
.ba-ref-list li { font-size: 11.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 6px; }

.ba-footer { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); }

/* ── Blog: Weight Loss — Compare Grid (full-info variant) ──────────────── */
.ba-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 20px 0; }
@media (max-width: 900px) { .ba-compare-grid { grid-template-columns: 1fr; } }
.ba-compare-grid .ba-compare-card { text-align: left; border-top: 3px solid var(--cc, var(--accent)); }
.ba-compare-header { font-size: 20px; font-weight: 800; color: var(--cc, var(--accent)); margin-bottom: 2px; }
.ba-compare-brand { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.ba-compare-mech { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 3px 8px; background: color-mix(in srgb, var(--cc, var(--accent)) 12%, transparent); border-radius: 4px; display: inline-block; margin-bottom: 12px; }
.ba-compare-list { padding-left: 16px; font-size: 13px; color: var(--text-muted); line-height: 1.8; }
.ba-compare-list li { margin-bottom: 4px; }
.ba-compare-list strong { color: var(--text); }

/* ── Blog: Insight box title variant ───────────────────────────────────── */
.ba-insight-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.ba-insight-box[style*="--ib-color"] { background: color-mix(in srgb, var(--ib-color, #2cb8b0) 8%, transparent); border-color: color-mix(in srgb, var(--ib-color, #2cb8b0) 30%, transparent); }
.ba-insight-box[style*="--ib-color"] .ba-insight-title { color: var(--ib-color, var(--text)); }

/* ── Blog: Weight Loss — Pipeline Cards ────────────────────────────────── */
.ba-pipeline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 20px 0; }
@media (max-width: 900px) { .ba-pipeline-grid { grid-template-columns: 1fr; } }
.ba-pipeline-card { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
.ba-pipeline-tag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); border-radius: 4px; padding: 2px 8px; margin-bottom: 10px; }
.ba-pipeline-tag--star { background: color-mix(in srgb, #b57bee 20%, transparent); color: #b57bee; }
.ba-pipeline-name { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.ba-pipeline-class { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
.ba-pipeline-data { display: flex; gap: 14px; margin-bottom: 14px; }
.ba-pipeline-stat { flex: 1; background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 8px; padding: 10px 12px; }
.ba-pipeline-num { font-size: 24px; font-weight: 800; color: var(--accent); display: block; }
.ba-pipeline-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; display: block; margin-top: 2px; }
.ba-pipeline-note { font-size: 13px; color: var(--text-muted); line-height: 1.7; }

/* ── Blog: Weight Loss — Cost Timeline ─────────────────────────────────── */
.ba-cost-timeline { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin: 20px 0; }
.ba-cost-header { font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 16px; text-transform: uppercase; letter-spacing: .04em; }
.ba-cost-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ba-cost-label { width: 200px; font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.ba-cost-track { flex: 1; background: color-mix(in srgb, var(--border) 60%, transparent); border-radius: 4px; height: 28px; overflow: hidden; }
.ba-cost-bar { height: 100%; display: flex; align-items: center; padding: 0 10px; font-size: 12px; font-weight: 700; color: #fff; border-radius: 4px; white-space: nowrap; }
.ba-cost-bar--surgery { background: #57c785; }
.ba-cost-bar--glp1 { background: #3b82f6; }
.ba-cost-bar--over { background: #ef4444; }
.ba-cost-caption { font-size: 12px; color: var(--text-muted); margin-top: 12px; line-height: 1.6; }

/* ── Blog: Weight Loss — Takeaway Cards ────────────────────────────────── */
.ba-takeaway-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
@media (max-width: 900px) { .ba-takeaway-grid { grid-template-columns: 1fr; } }
.ba-takeaway-card { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px; }
.ba-takeaway-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--bg); font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ba-takeaway-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.ba-takeaway-body p { font-size: 13px; color: var(--text-muted); line-height: 1.7; }

/* ── Scrollbar ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #b0a898; }

/* ── Mobile hamburger button ───────────────────────────────────────────── */
#mobile-menu-btn {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  width: 44px;
  height: 44px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  padding: 0;
}
#mobile-menu-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
}
/* Overlay behind sidebar on mobile */
#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.25s;
}
#sidebar-overlay.overlay-visible {
  opacity: 1;
}

/* ── Responsive: tablet (≤900px) ──────────────────────────────────────── */
@media (max-width: 900px) {
  .section { padding: 24px 20px 40px; }
  .stats-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ── Responsive: mobile (≤768px) ──────────────────────────────────────── */
@media (max-width: 768px) {
  /* Show hamburger button */
  #mobile-menu-btn {
    display: flex;
  }

  /* Sidebar: hidden off-screen by default, slides in */
  #sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    width: 280px;
    display: flex;
  }
  #sidebar.sidebar-open {
    transform: translateX(0);
  }

  /* Overlay visible when sidebar open */
  #sidebar-overlay {
    display: block;
    pointer-events: none;
  }
  #sidebar-overlay.overlay-visible {
    pointer-events: auto;
  }

  /* Content takes full width */
  #content {
    margin-left: 0;
  }

  /* Section padding — leave room for hamburger button */
  .section {
    padding: 64px 16px 40px;
    max-width: 100%;
  }

  /* Section headers */
  .section-header h2 {
    font-size: 20px;
  }

  /* Prevent body scroll when sidebar open */
  body.sidebar-is-open {
    overflow: hidden;
  }

  /* Drug table: horizontal scroll */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Stats grid */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* Receptor binding detail layout */
  .ki-detail-layout {
    flex-direction: column;
  }

  /* Clinical tool forms — better touch targets */
  input[type="radio"],
  input[type="checkbox"] {
    min-width: 18px;
    min-height: 18px;
  }

  /* Warning boxes */
  .mt-warning {
    font-size: 13px;
    padding: 12px 14px;
  }

  /* Table controls */
  .table-controls {
    flex-direction: column;
    gap: 8px;
  }
  .table-controls input {
    min-width: unset;
    width: 100%;
  }
}

/* ── Responsive: small mobile (≤480px) ────────────────────────────────── */
@media (max-width: 480px) {
  .section {
    padding: 60px 12px 32px;
  }

  .section-header h2 {
    font-size: 18px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  .stat-card {
    padding: 12px 10px;
  }

  /* Collapsible accordion headers — easier to tap */
  button, .ci-btn, .pc-btn, .ym-btn, .yb-btn {
    min-height: 44px;
  }
}

/* ── Newsletter Sign-Up ──────────────────────────────────────────────── */
.nl-signup {
  margin-top: 32px;
  padding: 0;
}
.nl-signup-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  background: linear-gradient(135deg, #3a5a2a 0%, #4a7c35 100%);
  border-radius: 8px;
  padding: 32px 36px;
  color: #fff;
}
.nl-text {
  flex: 1;
  min-width: 200px;
}
.nl-text h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff;
}
.nl-text p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  margin: 0;
}
/* Beehiiv embed container */
.nl-embed {
  flex-shrink: 0;
  min-width: 300px;
}
.nl-embed iframe {
  width: 100%;
  max-width: 480px;
  height: 160px;
  border: none;
  border-radius: 4px;
}

/* Blog newsletter CTA */
.nl-blog-cta {
  margin: 32px 0;
  padding: 24px;
  background: linear-gradient(135deg, #3a5a2a 0%, #4a7c35 100%);
  border-radius: 6px;
  color: #fff;
  text-align: center;
}
.nl-blog-cta h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #fff;
}
.nl-blog-cta p {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  margin-bottom: 14px;
}
.nl-blog-cta .nl-embed {
  min-width: unset;
  display: flex;
  justify-content: center;
}
/* Subscribe button (replaces broken Beehiiv iframe) */
.nl-subscribe-btn {
  display: inline-block;
  padding: 12px 32px;
  background: #fff;
  color: #2d5a1e;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  letter-spacing: 0.02em;
  margin-top: 4px;
}
.nl-subscribe-btn:hover {
  background: #f0ece4;
  transform: translateY(-1px);
}
.nl-blog-cta .nl-subscribe-btn {
  margin-top: 8px;
}
.nl-signup-inner .nl-subscribe-btn {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .nl-signup-inner {
    flex-direction: column;
    gap: 20px;
    padding: 24px 20px;
    text-align: center;
  }
  .nl-embed {
    min-width: unset;
    width: 100%;
  }
  .nl-embed iframe {
    max-width: 100%;
  }
}

/* ── Print Stylesheet ─────────────────────────────────────────────────── */
@media print {
  /* Hide non-content elements */
  #sidebar,
  #sidebar-overlay,
  #mobile-menu-btn,
  .skip-link,
  .nav-links,
  .sidebar-header,
  .sidebar-footer,
  .filter-panel,
  .nl-blog-cta,
  .nl-subscribe-btn,
  .back-link,
  .rc-copy-btn,
  .pk-wrap,
  .rb-view-toggle,
  .ba-footer,
  button,
  .mt-warning { display: none !important; }

  /* Reset layout for print */
  body {
    margin: 0;
    padding: 0;
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.5;
  }
  #content,
  main {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
  }
  .section { display: none; }
  .section.active { display: block; }

  /* Blog article print */
  .blog-article,
  .ba-body,
  .container {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
  .ba-header {
    border-bottom: 2px solid #000;
    padding-bottom: 10pt;
    margin-bottom: 12pt;
  }
  .ba-title { font-size: 18pt; }
  .ba-h2 { font-size: 14pt; page-break-after: avoid; }
  .ba-h3 { font-size: 12pt; page-break-after: avoid; }
  .ba-paragraph, .ba-body p { font-size: 11pt; orphans: 3; widows: 3; }

  /* Tables */
  table { page-break-inside: avoid; border-collapse: collapse; }
  th, td { border: 1px solid #999; padding: 4pt 6pt; font-size: 10pt; }

  /* Links: show URL */
  .ba-body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666;
  }

  /* Charts/canvas: hide (not printable) */
  canvas { display: none; }

  /* Rating scale reports: keep visible for print */
  .rc-result,
  .rc-stats-grid { page-break-inside: avoid; }
}