:root{--reader-bg:#111827;--reader-panel:#1f2937;--reader-line:#334155;--reader-text:#f8fafc;--reader-muted:#aeb8c8;--reader-purple:#7c4ddd;--reader-green:#16a37c}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--reader-bg);font-family:'DM Sans',system-ui,sans-serif}.reader-page{color:var(--reader-text);overflow:hidden}.reader-header{position:relative;z-index:30;display:flex;align-items:center;gap:13px;height:68px;padding:9px 15px;background:linear-gradient(100deg,#111827,#1e293b);border-bottom:1px solid #ffffff16;box-shadow:0 8px 25px #0003}.reader-icon-button,.reader-account{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;height:44px;padding:0 12px;border:1px solid #ffffff18;border-radius:13px;background:#ffffff0d;color:#fff;text-decoration:none;font-weight:800}.reader-icon-button:hover,.reader-account:hover{background:#ffffff19;color:#fff;text-decoration:none}.reader-heading{min-width:0;flex:1}.reader-heading small{display:block;color:#5ee0bc;font-size:.67rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.reader-heading h1{margin:2px 0 0;overflow:hidden;font:800 clamp(.95rem,2.6vw,1.22rem)/1.2 'Manrope',sans-serif;text-overflow:ellipsis;white-space:nowrap}.reader-header-actions{display:flex;gap:8px}.comments-link{color:#dfd0ff}.reader-login-note{position:relative;z-index:20;padding:7px 14px;background:#fff3cb;color:#775800;text-align:center;font-size:.82rem}.reader-login-note a{color:#6442b7;font-weight:900}.reader-workspace{height:calc(100dvh - 68px);display:grid;grid-template-rows:auto minmax(0,1fr);background:radial-gradient(circle at 50% 0,#24334a,#111827 65%)}.reader-login-note+.reader-workspace{height:calc(100dvh - 100px)}.reader-toolbar{position:relative;z-index:20;display:flex;justify-content:space-between;gap:12px;padding:9px 13px;background:#182235;border-bottom:1px solid #ffffff12;box-shadow:0 8px 25px #0002}.tool-group{display:flex;align-items:center;gap:7px}.tool-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 13px;border:1px solid #ffffff14;border-radius:11px;background:#273449;color:#eef2f8;font:800 .77rem 'Manrope',sans-serif;cursor:pointer}.tool-button:hover,.tool-button.active{background:#384962;border-color:#ffffff30}.tool-button:disabled{opacity:.35;cursor:not-allowed}.tool-button.compact{width:40px;padding:0}.tool-button.complete{background:#117a5d;border-color:#27b68d}.page-control{display:flex;align-items:center;gap:7px;color:var(--reader-muted);font-size:.78rem;font-weight:700}.page-control input{width:54px;height:38px;border:1px solid #ffffff1c;border-radius:10px;background:#0e1727;color:#fff;text-align:center;font:900 .9rem 'Manrope',sans-serif}.reader-stage{position:relative;min-height:0;overflow:auto;padding:18px max(12px,calc((100vw - 1440px)/2));scroll-behavior:smooth;overscroll-behavior:contain}.canvas-wrap{position:relative;width:max-content;max-width:100%;margin:0 auto;border-radius:5px;background:#fff;box-shadow:0 24px 70px #0008;overflow:hidden}.canvas-wrap canvas{display:block;max-width:none;background:#fff}.reader-loading,.reader-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--reader-muted)}.reader-loading b{margin-top:18px;color:#fff;font:800 1.1rem 'Manrope',sans-serif}.reader-loading small{margin-top:5px}.loader-book{display:grid;place-items:center;width:76px;height:76px;border-radius:24px;background:linear-gradient(135deg,#7044cc,#326ee2);color:#fff;font-size:1.8rem;box-shadow:0 18px 40px #6e44cb55;animation:readerPulse 1.6s ease-in-out infinite}.reader-error i{color:#ff718e;font-size:2.4rem}.reader-error h2{margin:12px 0 5px}.reader-error p{margin:0}.reader-error a{margin-top:14px;padding:11px 15px;border-radius:11px;background:#6f42c1;color:#fff;text-decoration:none;font-weight:800}.render-spinner{position:absolute;inset:0;background:#ffffffbb;backdrop-filter:blur(2px)}.render-spinner:after{content:"";position:absolute;left:50%;top:50%;width:45px;height:45px;margin:-23px;border:5px solid #ddd;border-top-color:#6f42c1;border-radius:50%;animation:spin .8s linear infinite}.mobile-reader-bar{display:none}.external-viewer{display:grid;grid-row:1/-1;grid-template-rows:auto 1fr auto;min-height:0;height:100%}.external-viewer iframe{width:100%;height:100%;border:0;background:#fff}.external-message,.external-fallback{display:flex;align-items:center;gap:11px;padding:10px 16px;background:#202c40;color:#dce5f2}.external-message i{color:#5ee0bc;font-size:1.3rem}.external-message b,.external-message span{display:block}.external-message span,.external-fallback{font-size:.78rem;color:#aeb8c8}.external-fallback{justify-content:center}.external-fallback a{color:#c7b2ff;font-weight:800}@keyframes readerPulse{50%{transform:translateY(-8px) rotate(-2deg)}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:760px){.reader-page{overflow:hidden}.reader-header{height:62px;padding:7px 9px}.reader-heading small{display:none}.reader-header-actions .reader-account span,.comments-link span{display:none}.reader-icon-button,.reader-account{height:42px;padding:0;width:42px}.reader-workspace{height:calc(100dvh - 62px);grid-template-rows:auto minmax(0,1fr) 54px}.reader-login-note+.reader-workspace{height:calc(100dvh - 94px)}.reader-toolbar{justify-content:center;padding:7px}.reader-toolbar .tool-group:first-child,.reader-toolbar .tool-button.complete span{display:none}.tool-button{height:38px}.tool-button.compact{width:38px}.reader-stage{padding:8px 4px 16px}.canvas-wrap{border-radius:2px}.mobile-reader-bar{display:grid;grid-template-columns:64px 1fr 64px;align-items:center;position:relative;z-index:25;padding-bottom:env(safe-area-inset-bottom);background:#182235;border-top:1px solid #ffffff17;text-align:center;font-weight:800}.mobile-reader-bar button{height:100%;border:0;background:transparent;color:#fff;font-size:1rem}.mobile-reader-bar button:disabled{opacity:.3}.external-viewer{grid-row:1/4}.external-message span{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.loader-book{animation:none}}
