#exam-dialog{width:min(1400px,calc(100vw - 24px));max-width:calc(100vw - 24px);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);padding:0;overflow:hidden}
#exam-dialog[open]{display:flex;flex-direction:column}
.exam-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;background:#192b3b;flex:none}
.exam-heading h2{font-size:17px;margin:0}
.exam-heading p{font-size:11px;margin:3px 0 0;line-height:1.4;color:#9eb8cb}
.exam-heading button{min-height:42px;min-width:42px}
.exam-selection{display:flex;align-items:center;gap:7px;padding:9px 16px 0;flex:none}
.exam-selection label{font-size:11px}
.exam-selection select{min-width:0;min-height:42px;font-size:12px}
#exam-select{flex:1}
.exam-toolbar{display:flex;align-items:center;gap:6px;padding:8px 16px;flex:none}
.exam-toolbar button{min-width:38px;min-height:40px;padding:6px 8px}
.exam-toolbar-space{flex:1}
#exam-counter,#exam-scale{font-size:11px;color:#bfd5e6;min-width:36px;text-align:center}
#exam-viewport{overflow:auto;min-height:0;flex:1;touch-action:none;overscroll-behavior:contain;background:#b4bec7;cursor:grab;position:relative;scrollbar-width:thin}
#exam-image{display:block;max-width:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;background:white}
#exam-image-error{padding:24px;color:#46191d}
.exam-footer{padding:9px 16px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;flex:none;background:#172734}
.exam-footer details{width:100%;padding:0;margin:0;border:0}
.exam-footer summary{font-size:12px;padding:5px 0}
.exam-footer p{font-size:11px;line-height:1.6;margin:7px 0;white-space:pre-line;overflow-wrap:anywhere}
#exam-notes{color:#f0c590;max-height:80px;overflow:auto}
#exam-load{font-size:12px;min-height:42px}
.exam-tip{font-size:11px;color:#9db2c4;margin-left:auto}
@media(max-width:700px){#exam-dialog{max-width:100vw;width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}.exam-heading{padding:10px 12px}.exam-selection{padding:8px 12px 0;gap:5px}.exam-selection label{display:none}.exam-toolbar{padding:7px 12px;gap:4px}.exam-footer{padding:8px 12px}.exam-tip{font-size:10px}.focus-bottom button{font-size:11px;padding:5px 8px}}
@media(max-height:520px){.exam-heading{padding:6px 12px}.exam-heading p{display:none}.exam-selection{padding-top:5px}.exam-toolbar{padding-top:4px;padding-bottom:4px}.exam-footer{padding-top:4px;padding-bottom:4px}.exam-footer details[open]{max-height:90px;overflow:auto}}
@media(min-width:701px) and (max-height:520px){
  #exam-dialog[open]{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr);grid-template-rows:48px 44px minmax(80px,1fr) auto;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
  .exam-heading{grid-column:1}.exam-selection{grid-column:2;padding:4px 12px}
  .exam-heading h2{font-size:14px}.exam-heading button,.exam-selection select{min-height:36px}
  .exam-toolbar,#exam-viewport,.exam-footer{grid-column:1/-1}
  .exam-footer details[open]{max-height:64px}.exam-footer button{min-height:36px}
}