/* interactive blog tool styles */

/* ============================================== */
/* tool container */
/* ============================================== */

.tool-container {
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-md);
  padding: 32px;
  margin-bottom: 48px;
}

.tool-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tool-title svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

/* ============================================== */
/* step selector (goal, experience, route) */
/* ============================================== */

.tool-step {
  margin-bottom: 28px;
}

.tool-step-label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-step-number {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tool-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tool-option {
  padding: 10px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-option:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.tool-option.selected {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

.tool-option svg {
  width: 16px;
  height: 16px;
}

.tool-option.disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ============================================== */
/* results panel */
/* ============================================== */

.tool-results {
  display: none;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.tool-results.visible {
  display: block;
  animation: fadeInUp 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.tool-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.tool-results-title {
  font-size: 1rem;
  font-weight: 700;
}

.tool-reset-btn {
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tool-reset-btn:hover {
  border-color: var(--danger, #ef4444);
  color: var(--danger, #ef4444);
}

/* ============================================== */
/* route mismatch notice */
/* ============================================== */

.route-mismatch-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.15);
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.route-mismatch-notice svg {
  color: #f59e0b;
  flex-shrink: 0;
}

.route-mismatch-notice strong {
  color: var(--text-primary);
}

/* ============================================== */
/* stack card (recommended peptide) */
/* ============================================== */

.stack-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.stack-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 20px;
  transition: all var(--transition-fast);
}

.stack-card:hover {
  border-color: var(--border-hover);
}

.stack-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.stack-card-name {
  font-size: 1rem;
  font-weight: 700;
  flex: 1;
}

.stack-card-tier {
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tier-human-rct {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.tier-human-data {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.tier-animal {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.tier-in-vitro {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.2);
}

.tier-anecdotal {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.stack-card-mechanism {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
}

.stack-card-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stack-card-detail {
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
}

.stack-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: gap var(--transition-fast);
}

.stack-card-cta:hover {
  gap: 10px;
}

.stack-card-cta svg {
  width: 14px;
  height: 14px;
}

/* ============================================== */
/* synergy panel */
/* ============================================== */

.synergy-panel {
  border-radius: var(--radius-md);
  background: rgba(52, 211, 153, 0.04);
  border: 1px solid rgba(52, 211, 153, 0.12);
  padding: 20px;
  margin-bottom: 24px;
}

.synergy-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.synergy-title {
  font-size: 0.88rem;
  font-weight: 700;
}

.synergy-score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(52, 211, 153, 0.12);
  color: var(--accent);
}

.synergy-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  margin-bottom: 12px;
  overflow: hidden;
}

.synergy-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), #60a5fa);
  transition: width 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.synergy-explanation {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ============================================== */
/* modalities panel */
/* ============================================== */

.modalities-panel {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 20px;
  margin-bottom: 24px;
}

.modalities-title {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modalities-title svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

.modality-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.modality-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
}

.modality-item svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

/* ============================================== */
/* timing panel */
/* ============================================== */

.timing-panel {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 20px;
  margin-bottom: 24px;
}

.timing-title {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.timing-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timing-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.timing-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.timing-item strong {
  color: var(--text-primary);
}

/* ============================================== */
/* considerations / warnings */
/* ============================================== */

.considerations-panel {
  border-radius: var(--radius-md);
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.12);
  padding: 20px;
}

.considerations-title {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ef4444;
}

.considerations-title svg {
  width: 16px;
  height: 16px;
}

.consideration-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.consideration-item {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.consideration-item::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ef4444;
  margin-top: 8px;
  flex-shrink: 0;
}

/* ============================================== */
/* SVG visualization container */
/* ============================================== */

.tool-svg-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px 0;
  overflow: hidden;
}

.tool-svg-container svg {
  width: 100%;
  max-width: 700px;
  height: auto;
}

/* ============================================== */
/* named stacks section */
/* ============================================== */

.named-stacks {
  margin-top: 48px;
}

.named-stacks-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.named-stacks-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.named-stack-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 20px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.named-stack-card:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.named-stack-name {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.named-stack-peptides {
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 8px;
}

.named-stack-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.named-stack-load {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

.named-stack-load:hover {
  text-decoration: underline;
}

/* ============================================== */
/* responsive */
/* ============================================== */

@media (max-width: 768px) {
  .tool-container {
    padding: 24px 20px;
  }

  .tool-options {
    gap: 6px;
  }

  .tool-option {
    padding: 8px 14px;
    font-size: 0.8rem;
  }

  .named-stacks-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .tool-container {
    padding: 18px 16px;
    border-radius: var(--radius-md);
  }

  .tool-option {
    padding: 8px 12px;
    font-size: 0.78rem;
    width: 100%;
    justify-content: center;
  }

  .stack-card {
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tool-results.visible {
    animation: none;
  }
}

/* ============================================== */
/* debloat protocol builder specific styles */
/* ============================================== */

.debloat-timeline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: rgba(52, 211, 153, 0.06);
  border: 1px solid rgba(52, 211, 153, 0.12);
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.debloat-timeline svg {
  color: var(--accent);
  flex-shrink: 0;
}

.debloat-timeline strong {
  color: var(--text-primary);
}

.debloat-section-title {
  font-size: 0.92rem;
  font-weight: 700;
  margin: 24px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.debloat-section-title svg {
  color: var(--accent);
}

.debloat-foods {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 8px;
}

.debloat-foods strong {
  color: var(--text-primary);
}

.debloat-directions {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--accent);
  line-height: 1.5;
}

.debloat-directions svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.debloat-caution {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: #f59e0b;
  line-height: 1.5;
}

.debloat-caution svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #f59e0b;
}

.debloat-schedule {
  margin-top: 24px;
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.debloat-peptides {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.debloat-peptides-intro {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.6;
}

/* ============================================== */
/* whitening planner specific styles */
/* ============================================== */

.whitening-timeline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.whitening-timeline svg {
  color: #60a5fa;
  flex-shrink: 0;
}

.whitening-timeline strong {
  color: var(--text-primary);
}

.whitening-section-title {
  font-size: 0.92rem;
  font-weight: 700;
  margin: 24px 0 12px;
}

.whitening-note {
  margin-top: 10px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.whitening-note strong {
  color: var(--text-primary);
}

.whitening-swarm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.whitening-swarm-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.whitening-swarm-item::before {
  content: '';
  width: 5px;
  height: 5px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ============================================== */
/* tea analyzer specific styles */
/* ============================================== */

.tea-timeline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.tea-timeline svg {
  color: #22c55e;
  flex-shrink: 0;
}

.tea-timeline strong {
  color: var(--text-primary);
}

.tea-section-title {
  font-size: 0.92rem;
  font-weight: 700;
  margin: 24px 0 12px;
}

.tea-note {
  margin-top: 10px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.tea-note strong {
  color: var(--text-primary);
}

.tea-caution {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: #f59e0b;
  line-height: 1.5;
}

.tea-caution svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #f59e0b;
}

.tea-coverage-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tea-coverage-item {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.tea-coverage-item strong {
  color: var(--text-primary);
}

/* ============================================== */
/* safety checker specific styles */
/* ============================================== */

/* progress bar */

.safety-progress {
  margin-bottom: 24px;
}

.safety-progress-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
  margin-bottom: 8px;
}

.safety-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), #60a5fa);
  transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.safety-progress-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* question display */

.safety-question {
  margin-bottom: 24px;
}

.safety-question-number {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: 12px;
}

.safety-question-text {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.4;
}

.safety-question-why {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.safety-question-why svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

/* answer buttons */

.safety-answers {
  display: flex;
  gap: 10px;
}

.safety-answer {
  flex: 1;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-hover);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.safety-answer:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
  background: var(--bg-hover);
}

.safety-answer.selected {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}

.safety-answer[data-answer="yes"]:hover {
  border-color: rgba(34, 197, 94, 0.4);
  color: #22c55e;
  background: rgba(34, 197, 94, 0.06);
}

.safety-answer[data-answer="yes"].selected {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

.safety-answer[data-answer="no"]:hover {
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
}

.safety-answer[data-answer="no"].selected {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.safety-answer[data-answer="unknown"]:hover {
  border-color: rgba(245, 158, 11, 0.4);
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.06);
}

.safety-answer[data-answer="unknown"].selected {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.safety-answer svg {
  width: 16px;
  height: 16px;
}

/* navigation */

.safety-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.safety-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 100px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.safety-nav-prev {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.safety-nav-prev:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.safety-nav-next {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #000;
}

.safety-nav-next:hover {
  opacity: 0.9;
}

.safety-nav-finish {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #000;
}

.safety-nav-finish:hover {
  opacity: 0.9;
}

.safety-nav-btn svg {
  width: 14px;
  height: 14px;
}

/* results grade panel */

.safety-grade-panel {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin-bottom: 24px;
  animation: fadeInUp 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.safety-grade-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 900;
  flex-shrink: 0;
}

.safety-grade-info {
  flex: 1;
}

.safety-grade-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.safety-grade-score {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 500;
}

.safety-grade-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* breakdown */

.safety-breakdown {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 20px;
  margin-bottom: 24px;
}

.safety-breakdown-title {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.safety-breakdown-row {
  margin-bottom: 14px;
}

.safety-breakdown-row:last-child {
  margin-bottom: 0;
}

.safety-breakdown-q {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.4;
}

.safety-breakdown-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.safety-breakdown-answer {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 100px;
  flex-shrink: 0;
  min-width: 58px;
  text-align: center;
}

.answer-yes {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

.answer-no {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.answer-unknown {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.safety-breakdown-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}

.safety-breakdown-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), #60a5fa);
  transition: width 0.4s ease;
}

.safety-breakdown-points {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  min-width: 36px;
  text-align: right;
}

/* concerns */

.safety-concerns {
  border-radius: var(--radius-md);
  background: rgba(245, 158, 11, 0.04);
  border: 1px solid rgba(245, 158, 11, 0.12);
  padding: 20px;
  margin-bottom: 24px;
}

.safety-concerns-title {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f59e0b;
}

.safety-concerns-title svg {
  width: 16px;
  height: 16px;
}

.safety-concern-item {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(245, 158, 11, 0.08);
}

.safety-concern-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.safety-concern-q {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.safety-concern-advice {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* recommendations */

.safety-recommendations {
  border-radius: var(--radius-md);
  background: rgba(52, 211, 153, 0.04);
  border: 1px solid rgba(52, 211, 153, 0.12);
  padding: 20px;
  margin-bottom: 24px;
}

.safety-recs-title {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
}

.safety-recs-title svg {
  width: 16px;
  height: 16px;
}

.safety-recs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.safety-rec-item {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.safety-rec-item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 7px;
  flex-shrink: 0;
}

.safety-rec-item a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.safety-rec-item a:hover {
  text-decoration: underline;
}

/* reset row */

.safety-reset-row {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.safety-reset-row .tool-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* COA anatomy section */

.coa-anatomy {
  margin-top: 48px;
}

.coa-anatomy-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.coa-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.coa-layout .tool-svg-container {
  justify-content: flex-start;
}

.coa-layout .tool-svg-container svg {
  max-width: 100%;
}

.coa-detail-panel {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 20px;
  min-height: 200px;
}

.coa-detail-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.coa-detail-placeholder svg {
  color: var(--text-muted);
  opacity: 0.5;
}

.coa-detail-content {
  animation: fadeInUp 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.coa-detail-label {
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--accent);
}

.coa-detail-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 16px;
}

.coa-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.78rem;
  line-height: 1.5;
  margin-bottom: 8px;
}

.coa-detail-row svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.coa-look-for {
  color: var(--text-secondary);
}

.coa-look-for svg {
  color: #22c55e;
}

.coa-look-for strong {
  color: #22c55e;
}

.coa-red-flag {
  color: var(--text-secondary);
}

.coa-red-flag svg {
  color: #ef4444;
}

.coa-red-flag strong {
  color: #ef4444;
}

/* severity badges */

.severity-critical {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.severity-high {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.severity-moderate {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

/* responsive */

@media (max-width: 768px) {
  .safety-answers {
    flex-direction: column;
    gap: 8px;
  }

  .safety-answer {
    padding: 12px 16px;
  }

  .safety-grade-panel {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 20px;
  }

  .coa-layout {
    grid-template-columns: 1fr;
  }

  .safety-breakdown-bar-row {
    flex-wrap: wrap;
    gap: 6px;
  }

  .safety-breakdown-bar {
    order: 3;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .safety-question-text {
    font-size: 0.95rem;
  }

  .safety-nav-btn {
    padding: 8px 14px;
    font-size: 0.78rem;
  }

  .safety-grade-circle {
    width: 60px;
    height: 60px;
    font-size: 1.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .safety-grade-panel,
  .coa-detail-content {
    animation: none;
  }
}

/* ============================================== */
/* traveling with peptides specific styles */
/* ============================================== */

.travel-section-title {
  font-size: 0.92rem;
  font-weight: 700;
  margin: 28px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.travel-section-title svg {
  color: var(--accent);
}

/* risk banner */

.travel-risk-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.travel-risk-banner svg {
  flex-shrink: 0;
}

/* key notes */

.travel-key-notes {
  margin-bottom: 24px;
}

.travel-note-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 6px;
}

.travel-note-item svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 3px;
}

/* packing checklist */

.travel-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.travel-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
}

.travel-checklist-priority {
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 2px;
}

.travel-priority-essential {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.travel-priority-recommended {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.travel-priority-info {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.2);
}

.travel-checklist-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.travel-checklist-text strong {
  font-weight: 600;
}

.travel-checklist-note {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* documentation */

.travel-doc-group {
  margin-bottom: 16px;
}

.travel-doc-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.travel-doc-label svg {
  width: 14px;
  height: 14px;
}

.travel-doc-required {
  color: #ef4444;
}

.travel-doc-required svg {
  color: #ef4444;
}

.travel-doc-recommended {
  color: #22c55e;
}

.travel-doc-recommended svg {
  color: #22c55e;
}

.travel-doc-helpful {
  color: #3b82f6;
}

.travel-doc-helpful svg {
  color: #3b82f6;
}

.travel-doc-item {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  padding-left: 20px;
  position: relative;
  margin-bottom: 4px;
}

.travel-doc-item::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-muted);
  position: absolute;
  left: 6px;
  top: 9px;
}

/* cold chain */

.travel-urgency {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.travel-urgency svg {
  flex-shrink: 0;
}

.travel-urgency-high {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.12);
}

.travel-urgency-high svg {
  color: #ef4444;
}

.travel-urgency-high strong {
  color: #ef4444;
}

.travel-urgency-moderate {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.12);
}

.travel-urgency-moderate svg {
  color: #f59e0b;
}

.travel-urgency-moderate strong {
  color: #f59e0b;
}

.travel-coldchain-advice {
  margin-bottom: 16px;
}

.travel-advice-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 4px;
}

.travel-advice-item svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 3px;
}

/* stability cards */

.travel-stability-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.travel-stability-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 16px;
}

.travel-stability-name {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.travel-stability-row {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 2px;
}

.travel-stability-row strong {
  color: var(--text-primary);
}

.travel-stability-tips {
  margin-top: 10px;
}

.travel-stability-tip {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 3px;
}

.travel-stability-tip svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

/* security tips */

.travel-security-tips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.travel-security-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.travel-security-priority {
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 2px;
}

/* country cards */

.travel-country-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.travel-country-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 16px;
}

.travel-country-name {
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.travel-country-limit {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.travel-country-limit strong {
  color: var(--text-primary);
}

.travel-country-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* peptide connections */

.travel-peptides {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.travel-peptides-intro {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.6;
}

/* responsive */

@media (max-width: 768px) {
  .travel-country-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .travel-checklist-item {
    flex-direction: column;
    gap: 6px;
  }
}

/* ============================================== */
/* reconstitution guide specific styles */
/* ============================================== */

/* dose calculation grid */

.recon-calc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.recon-calc-item {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  text-align: center;
}

.recon-calc-highlight {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.recon-calc-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.recon-calc-value {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary);
}

.recon-calc-highlight .recon-calc-value {
  color: var(--accent);
}

/* dose reference table */

.recon-dose-table {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 16px;
  margin-bottom: 16px;
}

.recon-dose-table-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
}

.recon-dose-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.recon-dose-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  padding: 6px 0;
  border-bottom: 1px solid var(--glass-border);
}

.recon-dose-row:last-child {
  border-bottom: none;
}

.recon-dose-target {
  font-weight: 700;
  color: var(--text-primary);
  min-width: 80px;
}

.recon-dose-equals {
  color: var(--text-muted);
}

.recon-dose-units {
  font-weight: 600;
  color: var(--accent);
  min-width: 80px;
}

.recon-dose-ml {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* step navigation */

.recon-step-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.recon-step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.recon-step-dot:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.recon-step-dot.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #000;
}

.recon-step-dot.completed {
  border-color: var(--accent);
  color: var(--accent);
}

.recon-step-dot.completed svg {
  width: 12px;
  height: 12px;
}

/* step info */

.recon-step-info {
  margin-bottom: 20px;
}

.recon-step-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.recon-step-name svg {
  color: var(--accent);
}

.recon-step-instruction {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0 0 16px;
}

/* safety warning callout */

.recon-safety-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.15);
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.recon-safety-warning svg {
  color: #f59e0b;
  flex-shrink: 0;
  margin-top: 2px;
}

/* step navigation buttons */

.recon-step-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

.recon-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 100px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.recon-nav-prev {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.recon-nav-prev:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.recon-nav-prev svg {
  transform: rotate(180deg);
}

.recon-nav-next {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #000;
}

.recon-nav-next:hover {
  opacity: 0.9;
}

.recon-nav-btn svg {
  width: 14px;
  height: 14px;
}

/* storage card */

.recon-storage-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 20px;
  transition: all var(--transition-fast);
}

.recon-storage-card:hover {
  border-color: var(--border-hover);
}

.recon-storage-duration {
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: rgba(52, 211, 153, 0.12);
  color: var(--accent);
  white-space: nowrap;
}

.recon-storage-tips {
  margin-top: 12px;
}

.recon-storage-tip {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 4px;
}

.recon-storage-tip svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

/* section title */

.recon-section-title {
  font-size: 0.92rem;
  font-weight: 700;
  margin: 28px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.recon-section-title svg {
  color: var(--accent);
}

/* mistake cards */

.recon-mistake-consequence {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 10px;
}

.recon-mistake-consequence strong {
  color: #ef4444;
}

.recon-mistake-fix {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.recon-mistake-fix svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 3px;
}

.recon-mistake-fix strong {
  color: var(--accent);
}

/* peptide connections */

.recon-peptides {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.recon-peptides-intro {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.6;
}

/* syringe SVG specific */

.recon-syringe {
  max-width: 300px;
  margin: 0 auto;
}

/* responsive */

@media (max-width: 768px) {
  .recon-calc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .recon-step-dots {
    gap: 6px;
  }

  .recon-step-dot {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
  }

  .recon-dose-row {
    flex-wrap: wrap;
    gap: 4px;
  }
}

@media (max-width: 480px) {
  .recon-calc-grid {
    grid-template-columns: 1fr;
  }

  .recon-step-buttons {
    flex-direction: column;
    gap: 8px;
  }

  .recon-nav-btn {
    width: 100%;
    justify-content: center;
  }

  .recon-dose-target {
    min-width: 60px;
  }

  .recon-dose-units {
    min-width: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recon-animate-drip,
  .recon-animate-swirl,
  .recon-animate-pulse {
    animation: none !important;
  }
}

/* ============================================== */
/* glp-1 comparison tool specific styles */
/* ============================================== */

/* multi-select option with stacked text */

.glp1-option-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}

.glp1-option-text strong {
  font-size: 0.85rem;
  font-weight: 600;
  color: inherit;
}

.glp1-option-aliases {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 400;
}

.tool-option.selected .glp1-option-aliases {
  color: var(--accent);
  opacity: 0.7;
}

/* comparison grid (side-by-side cards) */

.glp1-comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.glp1-comparison-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 20px;
  transition: all var(--transition-fast);
  border-top: 3px solid var(--card-accent, var(--accent));
}

.glp1-comparison-card:hover {
  border-color: var(--border-hover);
  border-top-color: var(--card-accent, var(--accent));
}

.glp1-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.glp1-card-name {
  font-size: 1rem;
  font-weight: 700;
}

.glp1-card-aliases {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* approval badge */

.glp1-approval-badge {
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.glp1-badge-approved {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.glp1-badge-trial {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

/* stat rows */

.glp1-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--glass-border);
  font-size: 0.82rem;
}

.glp1-stat:last-of-type {
  border-bottom: none;
  margin-bottom: 12px;
}

.glp1-stat-label {
  color: var(--text-muted);
  font-weight: 500;
}

.glp1-stat-value {
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
}

/* card sections (pros, cons, side effects) */

.glp1-card-section {
  margin-top: 12px;
}

.glp1-card-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.glp1-card-section-title svg {
  width: 14px;
  height: 14px;
}

.glp1-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.glp1-card-list li {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
  margin-bottom: 3px;
}

.glp1-card-list li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 8px;
}

.glp1-card-pros li::before {
  background: #22c55e;
}

.glp1-card-cons li::before {
  background: #ef4444;
}

/* side effects chips */

.glp1-side-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.glp1-side-effect {
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 500;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
}

/* mechanism text at bottom of card */

.glp1-card-mechanism {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* bar chart container */

.glp1-bar-chart svg {
  max-width: 500px;
}

/* radar chart legend */

.glp1-radar-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
}

.glp1-radar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.glp1-radar-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* emerging research callout */

.glp1-emerging {
  margin-top: 32px;
  padding: 24px;
  border-radius: var(--radius-md);
  background: rgba(168, 85, 247, 0.04);
  border: 1px solid rgba(168, 85, 247, 0.12);
}

.glp1-emerging-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.glp1-emerging-header svg {
  color: #a855f7;
}

.glp1-emerging-title {
  font-size: 0.92rem;
  font-weight: 700;
}

.glp1-emerging-intro {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}

.glp1-emerging-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.glp1-emerging-item {
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
}

.glp1-emerging-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.glp1-emerging-item-header strong {
  font-size: 0.88rem;
}

.glp1-emerging-status {
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.2);
  flex-shrink: 0;
}

.glp1-emerging-type {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 8px;
}

.glp1-emerging-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* peptide course links */

.glp1-peptide-links {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

/* responsive */

@media (max-width: 768px) {
  .glp1-comparison-grid {
    grid-template-columns: 1fr;
  }

  .glp1-emerging-item-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

@media (max-width: 480px) {
  .glp1-comparison-card {
    padding: 16px;
  }

  .glp1-emerging {
    padding: 16px;
  }
}

/* ============================================== */
/* peptide storage calculator specific styles */
/* ============================================== */

/* peptide selector grid (grouped by category) */

.storage-peptide-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.storage-peptide-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.storage-group-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 6px;
}

.storage-group-label svg {
  width: 14px;
  height: 14px;
}

.storage-group-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* form option with description */

.storage-option-desc {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 2px;
}

.tool-option:has(.storage-option-desc) {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.tool-option:has(.storage-option-desc) span {
  display: flex;
  flex-direction: column;
}

/* shelf life timeline card */

.storage-timeline {
  border-radius: var(--radius-md);
  background: rgba(52, 211, 153, 0.04);
  border: 1px solid rgba(52, 211, 153, 0.12);
  padding: 20px;
  margin-bottom: 24px;
}

.storage-timeline-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.storage-timeline-header svg {
  color: var(--accent);
  flex-shrink: 0;
}

.storage-timeline-info {
  flex: 1;
}

.storage-timeline-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.storage-timeline-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.2;
}

.storage-timeline-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.storage-timeline-details .stack-card-detail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.storage-timeline-notes {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* warning callout */

.storage-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15);
  margin-bottom: 24px;
}

.storage-warning svg {
  color: #ef4444;
  flex-shrink: 0;
  margin-top: 2px;
}

.storage-warning strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #ef4444;
  margin-bottom: 4px;
}

.storage-warning p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* info tip card */

.storage-tip-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  margin-bottom: 24px;
}

.storage-tip-card svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.storage-tip-card strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.storage-tip-card p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* chart section */

.storage-chart-section {
  margin-bottom: 24px;
}

.storage-section-title {
  font-size: 0.92rem;
  font-weight: 700;
  margin: 24px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.storage-section-title svg {
  color: var(--accent);
}

.storage-chart {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0;
  overflow: hidden;
}

.storage-chart svg {
  width: 100%;
  max-width: 600px;
  height: auto;
}

.storage-chart-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
  text-align: center;
  margin-top: 8px;
}

/* tips list */

.storage-tips-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.storage-tip-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.storage-tip-item svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 3px;
}

/* mitigation row in degradation factor cards */

.storage-mitigation {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--accent);
  line-height: 1.5;
}

.storage-mitigation svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.storage-mitigation strong {
  color: var(--text-primary);
}

/* peptide connections */

.storage-peptides {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

/* responsive */

@media (max-width: 768px) {
  .storage-timeline-header {
    flex-wrap: wrap;
  }

  .storage-timeline-value {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .storage-group-options {
    gap: 4px;
  }

  .storage-group-options .tool-option {
    padding: 6px 10px;
    font-size: 0.75rem;
  }

  .storage-timeline-details {
    flex-direction: column;
    gap: 4px;
  }
}

/* ============================================== */
/* ghk-cu skincare protocol builder specific styles */
/* ============================================== */

/* protocol summary info box */

.skincare-protocol-summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(52, 211, 153, 0.06);
  border: 1px solid rgba(52, 211, 153, 0.12);
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}

.skincare-protocol-summary svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.skincare-protocol-summary strong {
  color: var(--text-primary);
}

/* timeline badge */

.skincare-timeline-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.12);
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.skincare-timeline-badge svg {
  color: #3b82f6;
  flex-shrink: 0;
}

.skincare-timeline-badge strong {
  color: var(--text-primary);
}

/* section titles */

.skincare-section-title {
  font-size: 0.92rem;
  font-weight: 700;
  margin: 24px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.skincare-section-title svg {
  color: var(--accent);
}

/* conflict/synergy cards */

.skincare-conflicts-section,
.skincare-synergies-section {
  margin-bottom: 16px;
}

.skincare-conflict {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}

.skincare-conflict--avoid {
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.15);
}

.skincare-conflict--separate {
  background: rgba(245, 158, 11, 0.04);
  border: 1px solid rgba(245, 158, 11, 0.15);
}

.skincare-conflict--ok {
  background: rgba(34, 197, 94, 0.04);
  border: 1px solid rgba(34, 197, 94, 0.12);
}

.skincare-conflict-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.skincare-conflict-header strong {
  font-size: 0.88rem;
}

.skincare-conflict-badge {
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.skincare-badge--avoid {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.skincare-badge--separate {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.skincare-badge--ok {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.skincare-conflict-reason {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 6px;
}

.skincare-conflict-timing {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}

.skincare-conflict-timing svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

/* AM/PM routine cards */

.skincare-routines {
  margin-bottom: 24px;
}

.skincare-routine-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 20px;
  margin-bottom: 16px;
}

.skincare-routine-header {
  margin-bottom: 16px;
}

.skincare-routine-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.skincare-routine-label--am {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.skincare-routine-label--pm {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

/* individual product layers */

.skincare-layers {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skincare-layer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.skincare-layer:hover {
  background: var(--bg-hover);
}

.skincare-layer--ghk {
  background: rgba(52, 211, 153, 0.06);
  border: 1px solid rgba(52, 211, 153, 0.12);
  color: var(--accent);
  font-weight: 600;
}

.skincare-layer--conflict {
  border-left: 3px solid #ef4444;
}

.skincare-layer--separate {
  border-left: 3px solid #f59e0b;
}

.skincare-layer--wait {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

.skincare-layer--wait svg {
  color: #f59e0b;
}

.skincare-layer-number {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.skincare-layer--ghk .skincare-layer-number {
  background: var(--accent);
  color: #000;
}

.skincare-layer-name {
  flex: 1;
}

.skincare-layer-tag {
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.skincare-tag--ghk {
  background: rgba(52, 211, 153, 0.12);
  color: var(--accent);
  border: 1px solid rgba(52, 211, 153, 0.2);
}

.skincare-layer-wait-icon {
  display: flex;
  align-items: center;
}

.skincare-routine-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 12px 0 0;
}

/* form guidance section */

.skincare-form-guidance {
  margin-bottom: 24px;
}

/* frequency section */

.skincare-frequency {
  margin-bottom: 24px;
}

.skincare-frequency-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* peptide connections */

.skincare-peptides {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.skincare-peptides-intro {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.6;
}

.skincare-synergy-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* responsive */

@media (max-width: 768px) {
  .skincare-conflict-header {
    flex-wrap: wrap;
    gap: 6px;
  }

  .skincare-routine-card {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .skincare-layer {
    font-size: 0.8rem;
    padding: 6px 10px;
    gap: 8px;
  }

  .skincare-layer-number {
    width: 20px;
    height: 20px;
    font-size: 0.68rem;
  }

  .skincare-conflict {
    padding: 12px;
  }
}

/* ============================================== */
/* looksmaxxing science checker */
/* ============================================== */

.looksmax-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.looksmax-category-option {
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 16px;
  text-align: left;
  gap: 4px;
}

.looksmax-category-label {
  font-weight: 600;
  font-size: 0.9rem;
}

.looksmax-category-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.looksmax-method-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.looksmax-method-option {
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 16px;
  gap: 4px;
}

.looksmax-method-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.looksmax-method-tier {
  font-size: 0.75rem;
  font-weight: 600;
}

/* results */
.looksmax-results {
  margin-top: 24px;
}

.looksmax-subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: -8px 0 20px;
  font-style: italic;
}

/* tier section: gauge + info */
.looksmax-tier-section {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

.looksmax-gauge-container {
  flex-shrink: 0;
  width: 240px;
}

.looksmax-gauge-svg {
  width: 100%;
  height: auto;
}

.looksmax-tier-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.looksmax-tier-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tier-gold { background: rgba(34, 197, 94, 0.15); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.3); }
.tier-strong { background: rgba(52, 211, 153, 0.15); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.3); }
.tier-promising { background: rgba(96, 165, 250, 0.15); color: #60a5fa; border: 1px solid rgba(96, 165, 250, 0.3); }
.tier-emerging { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.tier-anecdotal { background: rgba(249, 115, 22, 0.15); color: #f97316; border: 1px solid rgba(249, 115, 22, 0.3); }
.tier-debunked { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }

.looksmax-risk-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.85rem;
}

/* claims vs science */
.looksmax-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}

.looksmax-claim-card {
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
}

.looksmax-claim-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.looksmax-claim-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.looksmax-claim-card--claim {
  background: rgba(249, 115, 22, 0.05);
  border-color: rgba(249, 115, 22, 0.2);
}

.looksmax-claim-card--claim .looksmax-claim-label {
  color: #f97316;
}

.looksmax-claim-card--science {
  background: rgba(52, 211, 153, 0.05);
  border-color: rgba(52, 211, 153, 0.2);
}

.looksmax-claim-card--science .looksmax-claim-label {
  color: #34d399;
}

/* sections (risks, studies) */
.looksmax-section {
  margin-bottom: 24px;
}

.looksmax-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.looksmax-risk-list,
.looksmax-studies-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.looksmax-risk-list li,
.looksmax-studies-list li {
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}

.looksmax-risk-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
}

.looksmax-studies-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.3;
}

/* practical info (time + cost) */
.looksmax-practical {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.looksmax-practical-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

.looksmax-practical-item svg {
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 2px;
}

.looksmax-practical-item strong {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.looksmax-practical-item span {
  font-size: 0.88rem;
  color: var(--text-primary);
}

/* peptide connection */
.looksmax-peptide-link {
  padding: 20px;
  border-radius: var(--radius-md);
  background: rgba(52, 211, 153, 0.05);
  border: 1px solid rgba(52, 211, 153, 0.2);
}

.looksmax-peptide-link-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  margin-bottom: 8px;
}

.looksmax-peptide-link-name {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 6px;
}

.looksmax-peptide-link-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 12px;
}

.looksmax-peptide-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.2s;
}

.looksmax-peptide-link-cta:hover {
  opacity: 0.8;
}

/* responsive */
@media (max-width: 768px) {
  .looksmax-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .looksmax-method-grid {
    grid-template-columns: 1fr;
  }

  .looksmax-tier-section {
    flex-direction: column;
    text-align: center;
  }

  .looksmax-gauge-container {
    width: 200px;
  }

  .looksmax-tier-info {
    align-items: center;
  }

  .looksmax-comparison {
    grid-template-columns: 1fr;
  }

  .looksmax-practical {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .looksmax-category-grid {
    grid-template-columns: 1fr;
  }

  .looksmax-tier-section {
    padding: 16px;
  }

  .looksmax-gauge-container {
    width: 180px;
  }

  .looksmax-claim-card {
    padding: 14px;
  }

  .looksmax-practical-item {
    padding: 12px;
  }
}


/* ============================================== */
/* heightmax: height enhancement comparison tool  */
/* ============================================== */

.heightmax-method-card {
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: 24px;
  margin-bottom: 16px;
}

.heightmax-method-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.heightmax-method-rank {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent);
  min-width: 28px;
}

.heightmax-method-name {
  font-size: 1rem;
  font-weight: 700;
  flex: 1;
  min-width: 0;
}

.heightmax-category-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.heightmax-cat-soft {
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
}

.heightmax-cat-hard {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.heightmax-cat-pharma {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}

.heightmax-method-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

.heightmax-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.heightmax-stat {
  padding: 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
}

.heightmax-stat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.heightmax-stat-label svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.heightmax-stat-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.heightmax-tier-badge,
.heightmax-risk-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-block;
}

.heightmax-tier-badge.tier-a { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.heightmax-tier-badge.tier-b { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.heightmax-tier-badge.tier-c { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.heightmax-tier-badge.tier-d { background: rgba(239, 68, 68, 0.12); color: #ef4444; }

.heightmax-risk-badge.risk-low { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.heightmax-risk-badge.risk-moderate { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.heightmax-risk-badge.risk-high { background: rgba(239, 68, 68, 0.12); color: #ef4444; }

.heightmax-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.heightmax-list-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

.heightmax-list-title svg {
  width: 14px;
  height: 14px;
}

.heightmax-pros .heightmax-list-title { color: #22c55e; }
.heightmax-cons .heightmax-list-title { color: #ef4444; }

.heightmax-list-item {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 4px 0;
  padding-left: 12px;
  position: relative;
}

.heightmax-list-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

.heightmax-pro-item::before { background: #22c55e; }
.heightmax-con-item::before { background: #ef4444; }

/* warning banner */
.heightmax-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  margin-bottom: 20px;
  border-radius: var(--radius-sm);
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.2);
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.heightmax-warning svg {
  color: #f59e0b;
  flex-shrink: 0;
  margin-top: 2px;
}

.heightmax-warning strong {
  color: #f59e0b;
}

/* surgery breakdown section */
.heightmax-surgery-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--glass-border);
}

.heightmax-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.heightmax-section-title svg {
  color: var(--accent);
}

.heightmax-surgery-subsection {
  margin-bottom: 24px;
}

.heightmax-subsection-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.heightmax-subsection-title svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

/* country cost grid */
.heightmax-country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.heightmax-country-card {
  padding: 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
}

.heightmax-country-name {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 4px;
}

.heightmax-country-cost {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}

.heightmax-country-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* recovery timeline */
.heightmax-recovery-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.heightmax-recovery-phase {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.heightmax-phase-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.heightmax-phase-content {
  flex: 1;
}

.heightmax-phase-name {
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.heightmax-phase-duration {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
}

.heightmax-phase-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* complications list */
.heightmax-complications {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.heightmax-complication {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
}

.heightmax-complication-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.heightmax-complication-name {
  font-size: 0.85rem;
  font-weight: 600;
}

.heightmax-complication-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* peptide connections */
.heightmax-peptides {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--glass-border);
}

.heightmax-peptides-intro {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* responsive */
@media (max-width: 768px) {
  .heightmax-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .heightmax-pros-cons {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .heightmax-country-grid {
    grid-template-columns: 1fr;
  }

  .heightmax-method-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .heightmax-stats-grid {
    grid-template-columns: 1fr;
  }

  .heightmax-method-card {
    padding: 16px;
  }

  .heightmax-stat {
    padding: 8px;
  }

  .heightmax-stat-label {
    font-size: 0.68rem;
  }

  .heightmax-stat-value {
    font-size: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .heightmax-method-card {
    transition: none;
  }
}

/* ============================================== */
/* breathing protocol guide specific styles */
/* ============================================== */

.breathing-option {
  align-items: flex-start;
  gap: 10px;
}

.breathing-option-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.breathing-option-text strong {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
}

.breathing-option-desc {
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--text-muted);
  text-align: left;
}

.breathing-summary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.2);
  margin-bottom: 18px;
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.breathing-summary svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.breathing-summary strong {
  color: var(--text-primary);
}

.breathing-protocol-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.breathing-protocol-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  padding: 14px;
}

.breathing-protocol-card.is-primary {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.06);
}

.breathing-protocol-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.breathing-protocol-name {
  font-size: 0.86rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.breathing-protocol-cadence {
  font-size: 0.73rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.breathing-protocol-score {
  min-width: 34px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: #60a5fa;
  font-size: 0.74rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.breathing-protocol-tag {
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.breathing-protocol-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.breathing-protocol-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.77rem;
  color: var(--text-secondary);
}

.breathing-protocol-row strong {
  color: var(--text-primary);
  font-size: 0.78rem;
}

.breathing-subtitle {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 20px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.breathing-subtitle svg {
  color: var(--accent);
}

.breathing-note-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.breathing-note-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-secondary);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(245, 158, 11, 0.2);
  background: rgba(245, 158, 11, 0.07);
}

.breathing-note-item svg {
  color: #f59e0b;
  flex-shrink: 0;
  margin-top: 2px;
}

.breathing-coach {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 16px;
  margin-bottom: 20px;
}

.breathing-coach-layout {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  align-items: center;
}

.breathing-coach-orb-wrap {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%, rgba(52, 211, 153, 0.2), rgba(59, 130, 246, 0.08));
  border: 1px solid rgba(52, 211, 153, 0.25);
}

.breathing-coach-orb {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(96, 165, 250, 0.95), rgba(52, 211, 153, 0.95));
  box-shadow: 0 0 30px rgba(52, 211, 153, 0.35);
  transform: scale(0.78);
  transition: transform 0.1s linear;
}

.breathing-coach-main {
  margin-bottom: 10px;
}

.breathing-coach-phase {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: lowercase;
  margin-bottom: 4px;
}

.breathing-coach-cue {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.breathing-coach-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.breathing-coach-metric {
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.breathing-coach-metric span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.breathing-coach-metric strong {
  font-size: 0.84rem;
  color: var(--text-primary);
}

.breathing-progress {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.breathing-progress-track {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.breathing-progress-track--total {
  height: 5px;
  opacity: 0.9;
}

.breathing-progress-fill {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #60a5fa);
  transition: width 0.08s linear;
}

.breathing-progress-fill--total {
  background: linear-gradient(90deg, #3b82f6, #22c55e);
}

.breathing-coach-actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.breathing-coach-actions .tool-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.breathing-plan {
  margin-top: 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 14px;
}

.breathing-plan-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.breathing-plan-item {
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.02);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.breathing-plan-item strong {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-primary);
}

.breathing-plan-item span {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .breathing-protocol-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .breathing-coach-layout {
    grid-template-columns: 1fr;
  }

  .breathing-coach-orb-wrap {
    width: 128px;
    height: 128px;
    margin: 0 auto;
  }

  .breathing-coach-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .breathing-option {
    align-items: center;
  }

  .breathing-option-desc {
    display: none;
  }
}

@media (max-width: 480px) {
  .breathing-coach-metrics {
    grid-template-columns: 1fr;
  }

  .breathing-coach-actions .tool-reset-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .breathing-progress-fill,
  .breathing-coach-orb {
    transition: none;
  }
}

/* ============================================== */
/* cognitive peptide explorer specific styles     */
/* ============================================== */

.cognitive-summary {
  font-style: italic;
  color: var(--text-secondary);
  margin: 0 0 24px 0;
  line-height: 1.6;
  font-size: 0.92rem;
}

.cognitive-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cognitive-key-finding {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 16px;
  border-left: 3px solid var(--accent);
  background: rgba(52, 211, 153, 0.04);
  border-radius: 0 8px 8px 0;
  margin: 12px 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.cognitive-key-finding svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent);
}

.cognitive-safety-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  border-left: 3px solid #ef4444;
  background: rgba(239, 68, 68, 0.04);
  border-radius: 0 8px 8px 0;
  margin: 8px 0 12px 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.cognitive-safety-note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #ef4444;
  opacity: 0.7;
}

.cognitive-detail-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.cognitive-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cognitive-tag--risk {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  font-weight: 600;
}

.cognitive-tag--approved {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.2);
}

.cognitive-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 24px 0 12px 0;
}

.cognitive-peptides-cta {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* light theme overrides */
[data-theme="light"] .cognitive-key-finding {
  background: rgba(52, 211, 153, 0.06);
}

[data-theme="light"] .cognitive-safety-note {
  background: rgba(239, 68, 68, 0.06);
}

[data-theme="light"] .cognitive-tag {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .cognitive-tag--risk {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.15);
}

[data-theme="light"] .cognitive-tag--approved {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.15);
}

[data-theme="light"] .cognitive-peptides-cta {
  border-top-color: rgba(0, 0, 0, 0.08);
}

@media (max-width: 480px) {
  .cognitive-key-finding,
  .cognitive-safety-note {
    padding: 10px 12px;
    font-size: 0.82rem;
  }

  .cognitive-detail-row {
    gap: 6px;
  }

  .cognitive-tag {
    font-size: 0.72rem;
    padding: 3px 8px;
  }
}

/* ============================================== */
/* exercise-mimic peptide explorer specific styles */
/* ============================================== */

.exercise-summary {
  font-style: italic;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.exercise-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.exercise-key-finding {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: rgba(52, 211, 153, 0.04);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: 12px;
}

.exercise-key-finding svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent);
}

.exercise-safety-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-left: 3px solid #ef4444;
  background: rgba(239, 68, 68, 0.04);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: 8px;
}

.exercise-safety-note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #ef4444;
}

.exercise-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.exercise-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--glass-bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.exercise-tag--wada {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.exercise-tag--failed {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: #f59e0b;
}

.exercise-tag--info {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: #3b82f6;
}

.exercise-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.exercise-compounds-cta {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

/* light theme overrides */
[data-theme="light"] .exercise-key-finding {
  background: rgba(52, 211, 153, 0.06);
}

[data-theme="light"] .exercise-safety-note {
  background: rgba(239, 68, 68, 0.06);
}

[data-theme="light"] .exercise-tag--wada {
  background: rgba(239, 68, 68, 0.08);
}

[data-theme="light"] .exercise-tag--failed {
  background: rgba(245, 158, 11, 0.08);
}

[data-theme="light"] .exercise-tag--info {
  background: rgba(59, 130, 246, 0.08);
}

/* mobile */
@media (max-width: 480px) {
  .exercise-key-finding,
  .exercise-safety-note {
    padding: 10px 12px;
    font-size: 0.82rem;
  }

  .exercise-detail-row {
    gap: 6px;
  }

  .exercise-tag {
    font-size: 0.72rem;
    padding: 3px 8px;
  }
}