*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#fff;color:#252525}
body{min-height:100vh;overflow:hidden}main{width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;background:#fff}
.reader-wrap{width:100%;max-width:1360px;min-width:0;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
#book-stage{width:100%;min-width:0;display:flex;justify-content:center;align-items:center;touch-action:none}
#book-stage .stf__parent{margin:0 auto!important;transform-origin:center center}
#book-stage .page{background:#fff;overflow:hidden}#book-stage .page img{display:block;width:100%;height:100%;object-fit:fill;user-select:none;-webkit-user-drag:none}
.bottom-toolbar{width:min(100%,900px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:12px auto 0;padding:10px 14px;background:#fff;border:1px solid #e7e7e7;border-radius:12px;box-shadow:0 3px 18px rgba(0,0,0,.07)}
.page-controls,.view-controls{display:flex;align-items:center;justify-content:center;gap:8px}
.nav-btn,.tool-btn{height:38px;min-width:38px;padding:0 10px;border:1px solid #d8d8d8;border-radius:7px;background:#fff;color:#252525;font-size:18px;cursor:pointer}
.nav-btn:hover,.tool-btn:hover{background:#f2f2f2}.page-status{min-width:70px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px}.page-status i{font-style:normal;color:#999}
.sound-btn{font-size:12px;font-weight:600;min-width:88px}.hint{margin:8px 0 0;color:#888;font-size:11px;text-align:center}
#loading{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#fff;z-index:10;color:#333}#loading span{font-size:12px;color:#777}
.spinner{width:36px;height:36px;border:3px solid #e5e5e5;border-top-color:#555;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
#error{max-width:520px;padding:20px;text-align:center;line-height:1.6;color:#9b2222}
@media(max-width:700px){main{padding:8px 6px}.reader-wrap{width:100%}.bottom-toolbar{width:100%;gap:8px;margin-top:8px;padding:8px 5px}.page-controls,.view-controls{gap:5px}.nav-btn,.tool-btn{height:35px;min-width:33px;padding:0 7px}.sound-btn{min-width:76px;font-size:11px}.hint{margin:6px 0 0}}