* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body { display:flex; flex-direction:column; background:radial-gradient(ellipse at 20% 10%,#ffffffb8,transparent 60%),linear-gradient(135deg,#e1e3e6,#c9cdd2); color:#333; font:14px/1.4 system-ui,sans-serif; }
body.reader-embedded { background:transparent; }
[hidden] { display:none!important; }
.viewer-title { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
#info-stage { flex:1; min-height:0; overflow:auto; padding:20px; text-align:center; }
#info-stage canvas,#info-stage img { display:block; margin:auto; background:#fff; box-shadow:0 2px 12px #0002; }
#info-stage canvas,#info-stage img { user-select:none; -webkit-user-drag:none; }
#info-stage.info-can-pan canvas,#info-stage.info-can-pan img { cursor:grab; }
#info-stage.info-panning,#info-stage.info-panning canvas,#info-stage.info-panning img { cursor:grabbing; user-select:none; }
#info-stage:focus-visible { outline:2px solid #777; outline-offset:-2px; }
#info-status { padding:40px 12px; }
.viewer-tools { display:flex; justify-content:center; flex-wrap:wrap; gap:10px 16px; padding:10px 46px 10px 12px; background:#fff; border-top:1px solid #ddd; }
.viewer-group { display:flex; align-items:center; gap:6px; }
.viewer-tools button,.viewer-tools a,.viewer-tools input { height:40px; min-width:40px; border:1px solid #d7d7d7; border-radius:6px; background:#f7f7f7; color:#333; font:inherit; }
.viewer-tools button,.viewer-tools a { display:inline-flex; align-items:center; justify-content:center; padding:0 10px; cursor:pointer; text-decoration:none; }
.viewer-tools button:hover:not(:disabled),.viewer-tools a:hover { background:#353535; color:#fff; }
.viewer-tools button:disabled { opacity:.4; cursor:default; }
.viewer-tools input { width:54px; text-align:center; background:white; }
.viewer-tools :focus-visible,.viewer-fallback:focus-visible { outline:2px solid #555; outline-offset:2px; }
.viewer-fallback { display:block; padding:4px 12px 8px; text-align:center; background:white; color:#666; font-size:12px; }
@media(max-width:575.98px) { #info-stage { padding:12px; } .viewer-tools { padding:8px; gap:6px; } .viewer-tools button,.viewer-tools a,.viewer-tools input { height:44px; min-width:36px; } .viewer-tools input { width:48px; } }