/* 今昔对照编辑器：全屏三层（看旧影 / 大幅预览 / 确认保存），不做长滚动表单。 */
body.r11-pe-open { overflow: hidden; }

.r11-pe { position: fixed; inset: 0; z-index: 320; display: flex; flex-direction: column; background: var(--r11-paper, #f5efe3); color: #342f29; }
.r11-pe-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #ddd0b8; background: #f5efe3; }
.r11-pe-head p { margin: 0; }
.r11-pe-kicker { font-size: 15px; font-weight: 600; }
.r11-pe-sub { font-size: 12px; color: #6b5741; margin-top: 3px !important; }
.r11-pe-head button { font: inherit; font-size: 13px; min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid #b9a88b; background: #fffaf1; color: #342f29; }

.r11-pe-body { flex: 1 1 auto; min-height: 0; display: flex; }
.r11-pe-step { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; }
.r11-pe-step[hidden] { display: none; }

/* 第一层：看旧影 */
.r11-pe-step[data-pe-step="intro"] { overflow-y: auto; padding: 14px 16px 20px; }
.r11-pe-old { margin: 0 0 12px; }
.r11-pe-old img { width: 100%; display: block; border-radius: 8px; background: #e7dcc9; }
.r11-pe-old figcaption { font-size: 11.5px; line-height: 1.7; color: #6b6154; margin-top: 7px; }
.r11-pe-hint { font-size: 14.5px; line-height: 1.85; margin: 4px 0 8px; }
.r11-pe-note { font-size: 12.5px; line-height: 1.75; color: #6b6154; margin: 0 0 14px; }
.r11-pe-status { font-size: 12.5px; line-height: 1.7; color: #6b6154; margin: 10px 0 0; }

/* 第二层：大幅预览 + 单一滑杆 */
.r11-pe-step[data-pe-step="edit"],
.r11-pe-step[data-pe-step="done"] { padding: 0; }
.r11-pe-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: #dcd2c0; padding: 8px; }
.r11-pe-stage canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border: 1px solid #c9bba2; box-shadow: 0 4px 18px #342f292e; }
.r11-pe-tip { flex: 0 0 auto; margin: 0; padding: 10px 16px 0; font-size: 12.5px; line-height: 1.6; color: #6b5741; background: #f5efe3; }
.r11-pe-guide { flex: 0 0 auto; padding: 8px 16px 12px; background: #f5efe3; }
.r11-pe-guide p { margin: 3px 0; font-size: 12px; line-height: 1.65; color: #6b6154; }
.r11-pe-guide b { color: #342f29; font-weight: 600; margin-right: 6px; }
.r11-pe-guide .r11-pe-warn { color: #8a5a3a; }
.r11-pe-step[data-pe-step="done"] .r11-pe-status { padding: 10px 16px 0; }
.r11-pe-pad { flex: 0 0 auto; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #ddd0b8; background: #f5efe3; }
.r11-pe-modes { display: flex; gap: 6px; margin-bottom: 6px; }
.r11-pe-modes button { flex: 1 1 0; min-height: 40px; font: inherit; font-size: 13px; border-radius: 8px; border: 1px solid #b9a88b; background: #fffaf1; color: #342f29; }
.r11-pe-modes button.on { background: #93392b; border-color: #93392b; color: #fffaf2; }
.r11-pe input[type=range] { width: 100%; min-height: 42px; margin: 0 0 4px; accent-color: #93392b; }

.r11-pe-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.r11-pe-actions button, .r11-pe-links button {
  font: inherit; font-size: 14px; min-height: 46px; padding: 0 16px; border-radius: 8px;
  border: 1px solid #b9a88b; background: #fffaf1; color: #342f29;
}
.r11-pe-actions .r11-pe-main { flex: 1 1 auto; background: #93392b; border-color: #93392b; color: #fffaf2; font-weight: 600; }
.r11-pe-actions button[disabled] { opacity: .55; }
.r11-pe-links { margin-top: 10px; }
.r11-pe-links img { max-width: 100%; border-radius: 6px; display: block; margin-bottom: 8px; }
.r11-pe-links a { display: inline-block; min-height: 44px; line-height: 44px; color: #75372c; }

@media (min-width: 720px) {
  .r11-pe-body { padding: 0 8vw; }
  .r11-pe-step[data-pe-step="intro"] { max-width: 640px; margin: 0 auto; }
}