@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');
:root{--ink:#e9edf7;--muted:#9ca8bd;--panel:#111a2b;--line:rgba(255,255,255,.09);--accent:#a78bfa;--bg:#080e1b}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif}.app-shell{min-height:100vh;background:radial-gradient(ellipse at 55% 40%,#1a2540 0,#0b1323 55%,#080e1b 100%)}
.topbar{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:rgba(8,14,27,.82)}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:39px;height:39px;border:1px solid #8b76d6;color:#c4b5fd;border-radius:11px;display:grid;place-items:center;font-family:Georgia;font-weight:bold}.brand strong{display:block;letter-spacing:1.5px;font-size:12px}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.top-actions{display:flex;gap:9px}.tool-btn,.icon-btn{border:1px solid var(--line);background:#172238;color:#dce4f4;border-radius:9px;padding:9px 13px}.tool-btn:hover,.icon-btn:hover{background:#293657;color:#fff}.workspace{display:grid;grid-template-columns:255px minmax(0,1fr);min-height:calc(100vh - 124px)}.sidebar{border-right:1px solid var(--line);background:rgba(12,20,35,.7);padding:18px 14px}.side-tabs{display:flex;gap:4px;padding:4px;background:#0a1221;border-radius:9px}.side-tabs button{flex:1;background:none;border:0;color:var(--muted);font-size:11px;padding:9px 2px;border-radius:7px}.side-tabs button.active{background:#283451;color:#fff}.side-panel{padding:21px 4px}.side-heading,.eyebrow{font-size:10px;letter-spacing:1.7px;color:#a99ae7;font-weight:700}.toc-list{margin-top:13px}.toc-item{width:100%;display:block;text-align:left;border:0;border-bottom:1px solid var(--line);padding:11px 5px;background:none;color:#cbd5e1;font-size:12px}.toc-item span{display:block;color:#8592a9;font-size:10px;margin-top:4px}.toc-item:hover{color:#c4b5fd}.reader-area{padding:25px clamp(16px,3vw,48px) 20px;min-width:0}.reader-heading{display:flex;justify-content:space-between;align-items:end;max-width:1250px;margin:0 auto 20px}.reader-heading h1{font-family:'Playfair Display',serif;font-size:clamp(24px,3vw,34px);margin:7px 0 2px}.reader-heading p{color:var(--muted);font-size:12px;margin:0}.reader-status{font-size:11px;color:#a8b4c8;padding-bottom:5px}.live-dot{display:inline-block;width:7px;height:7px;background:#67d6a2;border-radius:50%;margin-right:7px}.toolbar{max-width:1250px;margin:auto;display:flex;justify-content:space-between;align-items:center;background:#111c30;border:1px solid var(--line);padding:9px 12px;border-radius:12px 12px 0 0}.tool-group{display:flex;align-items:center;gap:8px}.icon-btn{min-width:35px;padding:6px 10px;font-size:17px}.page-count{display:flex;align-items:center;gap:6px;color:#9eabc1;font-size:12px}.page-count input{width:43px;background:#0a1323;border:1px solid var(--line);color:#fff;text-align:center;border-radius:6px;padding:5px}.page-count input::-webkit-inner-spin-button{display:none}#zoomLabel{font-size:11px;color:#aebbd0;min-width:40px;text-align:center}.book-stage{height:min(69vh,820px);min-height:430px;max-width:1250px;margin:auto;background:linear-gradient(145deg,#101b30,#0b1425);border:1px solid var(--line);border-top:0;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;perspective:1800px}.book{height:94%;max-width:96%;margin:auto}.book .page{background:#fff;overflow:hidden;box-shadow:0 7px 28px #0007;position:relative}.book .page canvas{width:100%;height:100%;display:block;object-fit:contain}.mark-layer{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}.book-loading{position:absolute;text-align:center;color:#dce4f4;z-index:10}.book-loading p{margin:15px 0 4px;font-weight:600}.book-loading small{color:#9ca8bd}.bottom-bar{max-width:1250px;margin:auto;padding:13px 3px}.progress-wrap{height:3px;background:#25324a;border-radius:8px;overflow:hidden}.progress-wrap div{height:100%;width:1.3%;background:linear-gradient(90deg,#8b5cf6,#c4b5fd);transition:width .2s}.bottom-meta{display:flex;justify-content:space-between;color:#8996ad;font-size:10px;margin-top:9px}.footer{height:48px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 30px;color:#68758c;font-size:10px}.thumb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.thumb{background:#fff;border:2px solid transparent;padding:0;border-radius:3px;overflow:hidden}.thumb.active{border-color:#a78bfa}.thumb canvas{width:100%;display:block}.note-modal{background:#111c30;color:#eef2ff;border:1px solid var(--line)}.note-modal .modal-header,.note-modal .modal-footer{border-color:var(--line)}.note-modal textarea{background:#0b1425;border-color:var(--line);color:#fff}.note-modal textarea:focus{background:#0b1425;color:#fff}.note-modal small{color:#a99ae7;letter-spacing:1px}.btn-primary{background:#7657d8;border-color:#7657d8}.book-stage.zoomed .book{transform:scale(var(--zoom,1));transform-origin:center center}
@media(max-width:900px){.workspace{grid-template-columns:1fr}.sidebar{display:none}.reader-area{padding:16px 10px}.book-stage{height:65vh;min-height:380px}.topbar{padding:0 14px}.reader-heading{padding:0 4px}.toolbar{flex-wrap:wrap;gap:8px}.footer{padding:0 14px}}@media(max-width:520px){.reader-status{display:none}.book-stage{height:58vh;min-height:330px}.toolbar{justify-content:center}.tool-group{gap:4px}.icon-btn{min-width:31px;padding:5px 8px}.bottom-meta span:last-child{display:none}}