.preview-ribbon {
  position: fixed;
  right: 10px;
  bottom: 50%;
  z-index: 80;
  transform: translateY(50%) rotate(-90deg);
  transform-origin: right bottom;
  padding: 7px 12px;
  border: 1px solid rgba(36, 49, 47, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 800;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.preview-ribbon-light {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

body.theme-dossier {
  --bg-primary: #f4f3ee;
  --bg-secondary: #ffffff;
  --text-primary: #2d3431;
  --text-secondary: #69726e;
  --accent: #b94a38;
  --accent-soft: #d7e4e1;
  --highlight: #d8b45f;
  --reflection: #25312e;
  --border: #cfd8d4;
  background:
    linear-gradient(rgba(37, 49, 46, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 49, 46, 0.035) 1px, transparent 1px),
    var(--bg-primary);
  background-size: 24px 24px;
}

.theme-dossier .step {
  justify-content: flex-start;
  padding-top: 90px;
}

.theme-dossier .step1-title,
.theme-dossier #monetize-headline,
.theme-dossier #philosophy-container {
  letter-spacing: 0;
}

.theme-dossier .language-option,
.theme-dossier .date-picker select,
.theme-dossier .stat-card,
.theme-dossier .bucket-card,
.theme-dossier .offer-card,
.theme-dossier #monetize-cta,
.theme-dossier .share-kit-card,
.theme-dossier .revision-note {
  border-radius: 6px;
  box-shadow: 5px 5px 0 rgba(37, 49, 46, 0.12);
}

.theme-dossier .stat-card,
.theme-dossier .offer-card,
.theme-dossier .share-kit-card {
  background: rgba(255, 255, 255, 0.88);
}

.theme-dossier .bucket-card {
  border: 1px solid rgba(37, 49, 46, 0.12);
  background: #fff !important;
}

.theme-dossier .bucket-icon {
  border: 1px solid rgba(37, 49, 46, 0.12);
  background: #edf3f1;
}

.theme-dossier .btn,
.theme-dossier #monetize-cta {
  background: #25312e;
  box-shadow: 5px 5px 0 rgba(185, 74, 56, 0.24);
}

.theme-dossier #step4 {
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    #25312e;
  background-size: 28px 28px;
}

.theme-dossier .danmu-item {
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

body.theme-night {
  --bg-primary: #111a1f;
  --bg-secondary: #172229;
  --text-primary: #e8f0ed;
  --text-secondary: #9fb0aa;
  --accent: #d5b36a;
  --accent-soft: #74b69f;
  --highlight: #83d9b6;
  --reflection: #e8f0ed;
  --border: rgba(232, 240, 237, 0.14);
  background:
    radial-gradient(circle at 50% 12%, rgba(116, 182, 159, 0.16), transparent 32%),
    linear-gradient(180deg, #111a1f 0%, #0b1014 100%);
}

.theme-night .step {
  background: transparent;
}

.theme-night .step1-title,
.theme-night .step2-title,
.theme-night .step3-title,
.theme-night #monetize-headline,
.theme-night #philosophy-container {
  color: #e8f0ed;
}

.theme-night .language-option,
.theme-night .date-picker select,
.theme-night .stat-card,
.theme-night .bucket-card,
.theme-night .offer-card,
.theme-night .share-kit-card,
.theme-night .revision-note,
.theme-night #monetize-cta {
  border: 1px solid rgba(232, 240, 237, 0.14);
  background: rgba(255, 255, 255, 0.045);
  color: #e8f0ed;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.25);
}

.theme-night .language-option.active {
  border-color: #d5b36a;
  background: rgba(213, 179, 106, 0.12);
  color: #f4d88b;
}

.theme-night .date-picker select {
  color: #111a1f;
  background: #e8f0ed;
}

.theme-night .stat-value,
.theme-night .bucket-number,
.theme-night .offer-kicker {
  color: #d5b36a;
}

.theme-night .stat-unit,
.theme-night .stat-note,
.theme-night .stat-label,
.theme-night .bucket-title,
.theme-night .bucket-insight,
.theme-night .offer-card span:last-child,
.theme-night .share-kit-card span,
.theme-night #monetize-subheadline,
.theme-night #monetize-bottom-note,
.theme-night .subtle {
  color: #9fb0aa;
}

.theme-night .bucket-icon {
  background: rgba(131, 217, 182, 0.1);
}

.theme-night .btn,
.theme-night #monetize-cta {
  background: #d5b36a;
  color: #111a1f;
  box-shadow: 0 0 0 1px rgba(213, 179, 106, 0.2), 0 12px 34px rgba(213, 179, 106, 0.18);
}

.theme-night #step4 {
  background:
    radial-gradient(circle at 50% 25%, rgba(131, 217, 182, 0.12), transparent 34%),
    #0b1014;
}

.theme-night #step5,
.theme-night #step6 {
  background:
    radial-gradient(circle at 50% 16%, rgba(131, 217, 182, 0.12), transparent 34%),
    linear-gradient(180deg, #111a1f 0%, #0b1014 100%);
}

.theme-night .share-kit-card strong {
  color: #e8f0ed;
}

.theme-night .danmu-item {
  border: 1px solid rgba(131, 217, 182, 0.18);
  background: rgba(131, 217, 182, 0.08);
  color: #e8f0ed;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.theme-night #step4 .step4-cta,
.theme-night .back-btn:hover,
.theme-night #share-btn:hover {
  border-color: #d5b36a;
  background: #d5b36a;
  color: #111a1f;
}

.theme-night .back-btn,
.theme-night .step-marker {
  border-color: rgba(232, 240, 237, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #9fb0aa;
}

@media (max-width: 480px) {
  .preview-ribbon {
    display: none;
  }
}