.screenshot-open { display:block; position:relative; width:100%; padding:0; border:0; border-radius:inherit; background:transparent; color:inherit; font:inherit; cursor:zoom-in; }
.screenshot-open::after { content:"⤢"; position:absolute; right:8px; bottom:8px; width:32px; height:32px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.4); border-radius:8px; color:#fff; background:#14171c; font:600 22px/1 system-ui; pointer-events:none; }
.screenshot-open:focus-visible { outline:3px solid #6fa1d8; outline-offset:4px; }
.case-viewer { width:calc(100% - 32px); max-width:1500px; height:calc(100dvh - 32px); max-height:1100px; max-height:min(1100px,calc(100dvh - 32px)); margin:auto; padding:0; border:1px solid #616976; border-radius:16px; color:#fff; background:#14171c; overscroll-behavior:contain; }
.case-viewer[open] { display:flex; flex-direction:column; }
.case-viewer::backdrop { background:rgba(0,0,0,.82); }
.case-viewer-bar { flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:12px 16px; border-bottom:1px solid #454b55; }
.case-viewer-bar h2 { flex:1 1 180px; font:600 15px/1.4 var(--body); }
.case-viewer-controls { display:flex; gap:8px; }
.case-viewer-bar button { min-height:44px; padding:8px 14px; border:1px solid #7b8492; border-radius:10px; color:#fff; background:#242a33; font:600 13px/1.4 var(--body); cursor:pointer; }
.case-viewer-bar button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.case-viewer-bar button:disabled { opacity:.55; cursor:default; }
.case-viewer-stage { flex:1; min-height:0; display:flex; flex-direction:column; overflow:auto; padding:12px; overscroll-behavior:contain; }
.case-viewer-frame { flex:0 0 auto; margin:auto; overflow:hidden; }
.case-viewer-frame img { display:block; width:100%; height:auto; max-width:none; }
.case-viewer-frame.is-course img { margin-top:-2.53%; }
.case-viewer-status { padding:16px; font-size:14px; }
@media (max-width:480px) { .case-viewer { width:calc(100% - 16px); height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); } .case-viewer-bar { padding:10px; } .case-viewer-stage { padding:8px; } }