#translateButton { min-height: 44px; }
#translateButton.active { color: #743e23; background: #f4dfc8; border-color: #a2633a; }
.translation-dialog { width: min(560px, calc(100vw - 24px)); border: 1px solid var(--line); border-radius: 18px; padding: 0; color: var(--ink); background: var(--paper); max-height: 86dvh; box-shadow: 0 15px 80px #172b3140; }
.translation-dialog::backdrop { background: #172b3159; }
.translation-dialog .modal-head { padding: 12px 18px; }
.translation-dialog .modal-head h2 { font-size: 23px; }
.translation-dialog .modal-body { padding: 18px; max-height: calc(86dvh - 72px); }
.translation-caption { margin: 0 0 5px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
#translationCrop { display: block; width: 100%; height: auto; max-height: 130px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 14px; }
#translationOriginal { white-space: pre-wrap; color: #586462; font-size: 15px; margin: 0 0 16px; overflow-wrap: anywhere; }
#translationText { font-size: 21px; line-height: 1.5; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
#translationNote { font-size: 12px; color: var(--muted); margin: 16px 0 0; }
.translation-highlight { position: fixed; z-index: 50; border: 2px solid #bc662d; background: #ffc76c38; border-radius: 3px; pointer-events: none; }
.translation-highlight[hidden] { display: none; }
#stepView .viewer-toolbar .group:last-child { flex-wrap: nowrap; gap: 4px; }
#stepView #zoomLabel { min-width: 34px !important; }
@media (max-width: 600px) {
  #stepView .viewer-toolbar .btn.icon { min-width: 36px; width: 36px; padding: 6px; }
  #stepView #fitImageButton, #stepView #translateButton { padding: 7px; font-size: 12px; }
  .translation-dialog { margin: auto auto max(12px,env(safe-area-inset-bottom)); }
}
@media (max-width: 370px) { #stepView #fullButton { display: none; } }
@media print { #translateButton, .translation-highlight, .translation-dialog { display: none; } }
body.large #translationText { font-size: 24px; }