/* Before/After compare slider */
.ba-wrapper { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: var(--radius-md); overflow: hidden; }
.ba-after, .ba-before { position: absolute; inset: 0; }
.ba-after img, .ba-before img { width: 100%; height: 100%; object-fit: cover; }
.ba-before { z-index: 2; }
.ba-slider {
  position: absolute; top: 0; bottom: 0; width: 4px; z-index: 3;
  background: var(--theme-data-highlight); transform: translateX(-50%);
}
.ba-handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--theme-data-highlight); color: #0a1628;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.3);
  cursor: ew-resize;
}
.ba-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.ba-dot {
  width: 10px; height: 10px; border-radius: 50%; border: none;
  background: var(--theme-border); cursor: pointer;
}
.ba-dot.active { background: var(--theme-data-highlight); }
.ba-buttons { display: flex; justify-content: center; gap: 12px; margin-top: 12px; }
.ba-data-overlay {
  position: absolute; bottom: 8px; left: 8px; right: 8px; z-index: 4;
  display: flex; justify-content: space-between; font-size: 12px;
  background: rgba(0,0,0,0.45); padding: 6px 10px; border-radius: 8px;
}
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox);
  background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none !important; }
.lightbox-close {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px;
  border: none; background: rgba(255,255,255,0.15); color: #fff; font-size: 24px; border-radius: 50%; cursor: pointer;
}
.lightbox-image { max-width: 90%; max-height: 80vh; object-fit: contain; }
.share-landing-card {
  background: var(--theme-bg-panel); border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg); padding: 24px; text-align: center;
}
.share-cta { display: block; margin: 16px auto; max-width: 280px; text-decoration: none; }
.share-qr-block { margin: 16px auto; }
.editor-page { padding: 16px; max-width: 800px; margin: 0 auto; }
.editor-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.editor-tabs button {
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--theme-border);
  background: var(--theme-bg-panel); color: var(--theme-text-primary); cursor: pointer;
}
.editor-tabs button.active { background: var(--theme-data-highlight); color: #0a1628; }
.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-size: var(--fs-small); margin-bottom: 4px; color: var(--theme-text-secondary); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--theme-border); background: var(--theme-bg-primary);
  color: var(--theme-text-primary); font-size: var(--fs-body);
}
.static-chart-fallback {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 8px;
}
.static-chart-fallback .item {
  background: rgba(0,212,255,0.08); border-radius: 8px; padding: 12px; text-align: center;
}
.poster-preview img { max-width: 100%; border-radius: var(--radius-md); margin-top: 16px; }
.animate-in { animation: fadeInUp 0.6s ease both; }