.document-reader { min-width: 0; width: 100%; border-top: 1px solid var(--learning-upgrade-line, #ddd); }
body .legacy-upgrade-shell .manual-reader-card { background: var(--learning-upgrade-card, #fff); color: var(--learning-upgrade-ink, #202420); border-color: var(--learning-upgrade-line, #ddd); }
body .legacy-upgrade-shell .manual-reader-toolbar b { color: inherit; }
.document-reader-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px; background: var(--learning-upgrade-card, #fffdf8); }
.document-reader-pages, .document-reader-zoom { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
body .document-reader button { width: auto; min-width: 36px; min-height: 42px; margin: 0; padding: 8px 10px; border: 1px solid var(--learning-upgrade-line, #ccc); border-radius: 10px; background: var(--learning-upgrade-card, #fff); color: var(--learning-upgrade-ink, #202420); font: 600 13px/1.2 system-ui, sans-serif; white-space: nowrap; cursor: pointer; }
body .document-reader button:disabled { opacity: .4; cursor: default; }
.document-reader label { display: flex; align-items: center; gap: 3px; margin: 0; font: 13px/1.2 system-ui, sans-serif; white-space: nowrap; }
body .document-reader input { display: inline-block; width: 42px; min-width: 0; height: 36px; padding: 3px; border: 1px solid #bbb; border-radius: 6px; background: var(--learning-upgrade-card, #fff); color: inherit; text-align: center; font-size: 16px; appearance: textfield; }
.document-reader input::-webkit-inner-spin-button { appearance: none; }
.document-reader output { min-width: 42px; text-align: center; font-size: 12px; }
.document-reader-status, .document-reader-hint { margin: 0; padding: 5px 14px 10px; font: 12px/1.6 system-ui, sans-serif; color: var(--learning-upgrade-muted, #666); }
.document-reader-viewport { width: 100%; max-width: 100%; height: min(72vh, 900px); min-height: 300px; overflow: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; background: #e9e8e5; }
.document-reader-sheet { display: flex; justify-content: center; width: max-content; min-width: 100%; padding: 10px; box-sizing: border-box; }
.document-reader canvas { display: block; max-width: none; flex: none; background: white; box-shadow: 0 2px 8px #0002; }
.document-reader-hint { padding-top: 10px; }
.document-reader [hidden] { display: none !important; }
.document-reader-retry { margin: 8px 14px !important; }
.official-document-grid .official-document-choice { display: grid; gap: 6px; width: 100%; color: #26304a; text-align: left; cursor: pointer; font: inherit; }
.official-document-grid .official-document-choice[aria-pressed="true"] { border-color: #5268dd; }
.official-document-grid + .document-reader { margin-top: 16px; }
@media (max-width: 680px) {
  .document-reader-controls { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; padding: 10px 4px; }
  body .document-reader button { padding-inline: 8px; }
  .document-reader-viewport { height: 64vh; min-height: 280px; }
}