:root{--maroon-dark:#2a0d10;--maroon:#4a1418;--maroon-light:#6e1f24;--gold:#c9a24b;--gold-light:#e6cb85;--cream:#f3ead9}*{box-sizing:border-box}body,html{height:100%;margin:0}.login-gate{position:fixed;inset:0;background:#3a3a3a;display:flex;align-items:center;justify-content:center;z-index:1000;font-family:"Segoe UI",Tahoma,Arial,sans-serif}.login-box{width:320px;background:#f0f0f0;border:1px solid #888;border-radius:4px;box-shadow:2px 2px 12px rgba(0,0,0,.5);overflow:hidden}.login-titlebar{background:#0a5ea8;color:#fff;padding:8px 12px;font-size:14px;font-weight:600}.login-body{padding:16px}.login-body label{display:block;font-size:13px;color:#222;margin:10px 0 4px}.login-body label:first-child{margin-top:0}.login-body input{width:100%;padding:5px 6px;font-size:13px;font-family:inherit;border:1px solid #7a7a7a;border-radius:2px}.login-error{color:#b00020;font-size:12px;min-height:16px;margin:10px 0 0}.login-actions{display:flex;justify-content:flex-end;margin-top:12px}.login-actions button{padding:6px 20px;font-size:13px;font-family:inherit;background:#e1e1e1;border:1px solid #adadad;border-radius:2px;cursor:pointer}.login-actions button:hover{background:#e5f1fb;border-color:#0078d7}.login-actions button:active{background:#cce4f7}body{font-family:Georgia,'Times New Roman',serif;background:radial-gradient(ellipse at 50% 0,var(--maroon-light) 0,var(--maroon) 45%,var(--maroon-dark) 100%);color:var(--cream);min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-bottom:1px solid rgba(201,162,75,.25)}.brand-name{font-size:22px;letter-spacing:.28em;color:var(--gold-light);font-weight:700}.brand-sub{margin-left:14px;font-size:13px;letter-spacing:.08em;color:rgba(243,234,217,.65);font-style:italic}.icon-btn{background:0 0;border:1px solid rgba(201,162,75,.4);color:var(--gold-light);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .2s}.icon-btn:hover{background:rgba(201,162,75,.15);transform:scale(1.06)}.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px 36px;gap:20px}.book-row{display:flex;align-items:center;justify-content:center;gap:22px;width:100%}.book-viewport{position:relative;flex:1 1 auto;min-width:0;max-width:1800px;display:flex;align-items:center;justify-content:center}.book-crop{position:relative;overflow:hidden;width:100%;max-width:100%}.book-wrap{position:relative;width:100%}.book-crop.crop-animating{transition:width .9s ease-in-out}.book-wrap.crop-animating{transition:transform .9s ease-in-out}#book{box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(201,162,75,.2);border-radius:3px}#book canvas{border-radius:3px}.nav-btn{flex-shrink:0;background:rgba(20,6,8,.4);backdrop-filter:blur(2px);border:1px solid rgba(201,162,75,.45);color:var(--gold-light);width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .15s,border-color .2s}.nav-btn:hover{background:rgba(201,162,75,.25);border-color:var(--gold-light);transform:scale(1.08)}.nav-btn:active{transform:scale(.96)}.nav-btn:disabled{opacity:.25;cursor:default;transform:none}.controls{display:flex;align-items:center;gap:18px}.ctrl-btn{background:0 0;border:1px solid rgba(201,162,75,.45);color:var(--gold-light);padding:8px 20px;border-radius:20px;font-family:inherit;font-size:13px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}.ctrl-btn:hover{background:rgba(201,162,75,.18)}.ctrl-btn:disabled{opacity:.3;cursor:default}.page-indicator{font-size:14px;color:rgba(243,234,217,.85);letter-spacing:.05em;min-width:64px;text-align:center}.progress-track{width:min(560px,80vw);height:3px;background:rgba(243,234,217,.15);border-radius:2px;overflow:hidden}.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold),var(--gold-light));transition:width .4s ease}.loading-overlay{position:fixed;inset:0;background:var(--maroon-dark);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--gold-light);font-size:14px;letter-spacing:.1em;text-transform:uppercase;z-index:50;transition:opacity .5s ease}.loading-overlay.hidden{opacity:0;pointer-events:none}.spinner{width:34px;height:34px;border:2px solid rgba(201,162,75,.25);border-top-color:var(--gold-light);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:640px){.brand-name{font-size:17px;letter-spacing:.2em}.brand-sub{display:none}.stage{padding:14px 6px 24px}.book-row .nav-btn{display:none}}