.katakana-controls { margin: 8px 0; color: #e5edf4; font-family: inherit; text-align: center; }
.katakana-controls .katakana-caption { margin: 0 0 5px; font-size: .78rem; font-weight: 600; }
.katakana-language-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.katakana-language-buttons button { min-width: 42px; min-height: 36px; padding: 5px 9px; border: 1px solid #8395a5; border-radius: 6px; background: #172634; color: #f3f6f9; cursor: pointer; font-family: inherit; font-weight: 600; font-size: .78rem; }
.katakana-language-buttons button[aria-pressed="true"] { background: #4fc3f7; color: #071620; border-color: #4fc3f7; box-shadow: inset 0 -3px 0 #087eaf; }
.katakana-language-buttons button:focus-visible { outline: 3px solid #a7ef69; outline-offset: 3px; }
.katakana-controls .katakana-help, .katakana-controls .katakana-status { font-size: .72rem; line-height: 1.4; margin: 5px 0 0; }
.katakana-controls .katakana-help { color: #c8d2dc; }
.katakana-controls .katakana-status { color: #f5da92; }
.katakana-controls .katakana-status:empty { display: none; }
#fv-simple-preview-modal .katakana-controls { flex-shrink: 0; }
#fv-simple-preview-modal .modal-content { max-height: 90vh; overflow-y: auto; }
/* Isolate the preview into its own compositing layer so dragging the rotated
   text overlays inside a scrollable modal does not leave repaint trails on iOS Safari. */
#fv-simple-preview-modal .preview-container { transform: translateZ(0); backface-visibility: hidden; }
#fv-simple-preview-modal .preview-text { backface-visibility: hidden; }