/* Comparison stays side by side, including phones, and follows the active theme. */
.clean-theme .compare-view {
  box-sizing: border-box;
  padding: 0 !important;
  border: 0;
  background: var(--wash) !important;
  color: var(--ink);
}
.clean-theme .compare-view::backdrop { background: var(--wash); }
.clean-theme .compare-shell {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: var(--wash);
}
.clean-theme .compare-header { background: transparent; margin: 0; min-width: 0; }
.clean-theme .compare-header > div { min-width: 0; }
.clean-theme .compare-header .kicker { margin: 0; }
.clean-theme .compare-header > div:last-child { display: flex; gap: 8px; flex-shrink: 0; }
.clean-theme .compare-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  gap: 14px;
}
.clean-theme .compare-pane {
  min-height: 0;
  background: var(--clean-panel);
  color: var(--ink);
  grid-template-rows: minmax(0, 1fr) auto;
}
.clean-theme .compare-image-wrap { background: var(--clean-panel); padding: 0 0 56px; }
.clean-theme .compare-pane img { width: 100%; height: 100%; max-height: 100%; min-height: 0; object-fit: contain; }
.clean-theme .compare-nav {
  top: auto;
  bottom: 6px;
  transform: none;
  width: 44px;
  height: 44px;
  border-color: var(--line);
  border-radius: 7px;
  background: var(--wash);
  color: var(--ink);
}
.clean-theme .compare-nav:disabled { opacity: .4; }
.clean-theme .compare-pane footer { padding: 10px; gap: 8px; align-items: center; }
.clean-theme .compare-pane footer > b { font-size: 12px; line-height: 1.5; }
.clean-theme .compare-controls { flex: 1 1 100%; width: 100%; gap: 5px; }
.clean-theme .compare-controls button { flex: 1; width: auto; min-width: 0; min-height: 44px; }
.clean-theme .compare-pane footer :is(.viewer-select, .viewer-doubt) {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px;
  min-height: 44px !important;
  flex: 0 0 44px;
  background: var(--wash) !important;
  color: var(--muted) !important;
  border: 1px solid var(--line) !important;
}
.clean-theme .compare-pane footer .viewer-select.is-selected { background: var(--clean-soft) !important; color: var(--blue) !important; }
.clean-theme .compare-pane footer .viewer-doubt.is-doubt { background: var(--clean-soft) !important; color: var(--clean-gold) !important; }
.clean-theme .compare-view button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 720px) {
  .clean-theme .compare-shell { gap: 10px; padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .clean-theme .compare-header { flex-direction: column; gap: 8px; }
  .clean-theme .compare-header .kicker { display: none; }
  .clean-theme .compare-header h2 { font-size: 19px; line-height: 1.4; margin: 0; }
  .clean-theme .compare-header small { font-size: 11px; line-height: 1.5; }
  .clean-theme .compare-header > div:last-child { width: 100%; }
  .clean-theme .compare-header > div:last-child button { flex: 1; min-height: 44px; font-size: 12px; padding: 8px; }
  .clean-theme .compare-grid { gap: 8px; }
  .clean-theme .compare-pane footer { padding: 8px; gap: 6px; flex-direction: row; }
  .clean-theme .compare-pane footer > b { font-size: 11px; }
  .clean-theme .compare-controls button { padding: 0; font-size: 11px; }
  .clean-theme .compare-nav.prev { left: 6px; }
  .clean-theme .compare-nav.next { right: 6px; }
}
@media (max-height: 500px) and (min-width: 500px) {
  .clean-theme .compare-header .kicker, .clean-theme .compare-header small { display: none; }
  .clean-theme .compare-header { flex-direction: row; align-items: center; }
  .clean-theme .compare-header > div:last-child { width: auto; }
  .clean-theme .compare-pane footer { display: grid; grid-template-columns: minmax(0,1fr) 44px 44px; }
  .clean-theme .compare-pane footer > b { grid-column: 1 / -1; }
  .clean-theme .compare-controls { min-width: 0; }
}