html,body { height: 100%; overflow: hidden; }
.viewer { display: flex; flex-direction: column; height: 100dvh; background: #0b0c0c; }
.viewer-bar { display: flex; align-items: center; gap: 24px; padding: 16px 24px; border-bottom: 1px solid var(--line); flex: none; }
.return-link { color: var(--gold); font-size: 14px; white-space: nowrap; }
.viewer-identity { margin-right: auto; min-width: 0; }
.viewer-identity h1 { font: 400 18px/1.5 var(--sans); margin: 0; overflow-wrap: anywhere; }
.viewer-identity span { color: var(--gold); font-size: 12px; }
.viewer-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.viewer-controls a,.viewer-controls button { font-size: 13px; border: 1px solid var(--line); border-radius: 5px; padding: 8px 12px; background: transparent; white-space: nowrap; }
.case-details { display: flex; justify-content: space-between; gap: 30px; padding: 14px 24px; flex: none; background: #121414; }
.case-details p { margin: 0; font-size: 14px; max-width: 80ch; }
#case-note { color: var(--muted); font-size: 12px; margin-top: 5px; }
.source-links { display: flex; gap: 18px; align-items: center; flex-shrink: 0; }
.source-links a { color: var(--gold); font-size: 13px; }
.viewer-stage { position: relative; flex: 1; min-height: 0; }
.viewer-stage iframe { width: 100%; height: 100%; border: none; background: #0b0c0c; display: block; }
.load-status { position: absolute; left: 18px; bottom: 14px; z-index: 1; padding: 8px 14px; border-radius: 5px; background: #151717f2; color: var(--muted); font-size: 13px; pointer-events: none; max-width: calc(100% - 36px); }
.viewer.focus-mode .viewer-bar,.viewer.focus-mode .case-details { display: none; }
.restore-controls { position: fixed; right: 14px; bottom: 14px; z-index: 2; background: #101212eb; border: 1px solid #746146; border-radius: 999px; padding: 10px 16px; font-size: 13px; }
.viewer:fullscreen { height: 100vh; }
@media(max-width:1000px) {
  .viewer-bar { flex-wrap: wrap; gap: 12px 20px; }
  .viewer-controls { margin-left: auto; }
  .case-details { flex-direction: column; gap: 10px; }
}
@media(max-width:600px) {
  .viewer-bar { padding: 12px 16px; gap: 10px; }
  .viewer-identity { width: calc(100% - 160px); }
  .viewer-identity h1 { font-size: 15px; }
  .viewer-controls { width: 100%; margin-left: 0; justify-content: space-between; gap: 6px; }
  .viewer-controls a,.viewer-controls button { padding: 7px 9px; font-size: 12px; }
  .case-details { padding: 12px 16px; max-height: 28dvh; overflow-y: auto; }
  .case-details p { font-size: 13px; }
  .source-links { gap: 20px; }
}