.translate-panel {
  position: fixed; z-index: 70; top: 70px; right: 0;
  width: min(420px, 92vw); height: calc(100dvh - 70px); padding: 18px;
  background: #f8f5ef; border-left: 1px solid var(--line);
  box-shadow: -14px 0 35px rgba(38,35,28,.16);
  transform: translateX(105%); transition: transform .22s ease;
  display: flex; flex-direction: column; gap: 14px;
}
.translate-panel.open { transform: translateX(0); }
.translate-panel:not(.open) { visibility: hidden; pointer-events: none; }
.stage:fullscreen .translate-panel,.stage.presentation-mode .translate-panel { top: 12px; height: min(320px,90dvh); z-index: 1100; }
.page-surface .page-translation-layer,.continuous-page .page-translation-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.translate-result { display: none !important; }
.translate-heading { display: flex; align-items: center; justify-content: space-between; }
.translate-heading > div { display: flex; align-items: baseline; gap: 10px; }
.translate-heading span, .translate-status { font-size: 12px; color: var(--muted); }
.translate-heading button { border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; }
.translate-controls { display: flex; gap: 8px; }
.translate-controls select { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; padding: 9px; }
.translate-controls button { border: 0; border-radius: 7px; background: var(--ink); color: #fff; padding: 0 14px; cursor: pointer; }
.translate-result { flex: 1; overflow: auto; white-space: pre-wrap; line-height: 1.75; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px; font-size: 14px; }
.translate-result:empty { display: none; }
.translate-panel small { color: #8c8b86; line-height: 1.5; }
.translation-failures { white-space: pre-wrap; overflow: auto; min-height: 0; font-size: 12px; line-height: 1.6; color: #99381e; }
.translation-failures:empty { display: none; }
.translation-progress { position: absolute; z-index: 45; bottom: max(12px,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(620px,calc(100% - 24px)); padding: 10px 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border-radius: 10px; background: rgba(30,32,30,.94); color: white; box-shadow: 0 4px 18px #0003; font-size: 12px; }
.translation-progress > span { flex: 1 1 100%; line-height: 1.5; }
.translation-progress progress { flex: 1; min-width: 40px; height: 8px; accent-color: #e4572e; }
.translation-progress button { border: 1px solid #ffffff44; color: white; background: transparent; padding: 6px 10px; border-radius: 5px; cursor: pointer; }
.translation-progress button:disabled { opacity: .5; cursor: default; }
@media (max-width: 820px) {
  .translate-panel { top: 62px; height: calc(100dvh - 62px); width: min(460px, 100vw); }
  #translateToggle { display: inline-flex !important; align-items: center; padding: 0 10px; }
}