:root{--purple:#652784;--deep:#40175a;--ink:#2d1939;--line:#dfcfe4;--paper:#fffdf9;--soft:#f7eef9}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);background:linear-gradient(145deg,#f8effa,#fffaf4);font:16px/1.55 "Segoe UI",sans-serif}button,select,textarea{font:inherit}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;padding:12px max(18px,env(safe-area-inset-left));color:#fff;background:linear-gradient(110deg,#351249,#61267d);box-shadow:0 5px 24px #31123f3d}.topbar img{width:54px;height:54px;border-radius:14px}.topbar span{font-size:.65rem;font-weight:850;letter-spacing:.18em;color:#e7c9ef}.topbar h1{margin:1px 0;font:700 1.35rem Georgia,serif}.topbar p{margin:0;font-size:.78rem;opacity:.78}.topbar #install{margin-left:auto;padding:9px 12px;border:1px solid #ffffff77;border-radius:11px;color:#fff;background:#ffffff1a;font-weight:800}.welcome{width:min(650px,calc(100% - 28px));margin:7vh auto;padding:42px;text-align:center;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:0 22px 65px #43234a1c}.welcome-logo img{width:110px;border-radius:26px;box-shadow:0 10px 28px #3e17494a}.welcome>span{display:block;margin-top:21px;color:#9452ae;font-size:.7rem;font-weight:850;letter-spacing:.17em}.welcome h2{margin:7px 0;font:700 clamp(1.8rem,6vw,2.8rem) Georgia,serif}.welcome p{color:#725f78}.welcome button,.save-comment{padding:13px 22px;border:0;border-radius:13px;color:#fff;background:var(--purple);font-weight:850;cursor:pointer}.welcome small{display:block;margin-top:15px;color:#817285}.reader{display:grid;grid-template-columns:255px minmax(0,820px);justify-content:center;align-items:start;gap:20px;padding:22px}.reader-tools,.paper,.reviews{border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 15px 40px #3e22431c}.reader-tools{position:sticky;top:96px;padding:17px}.reader-tools span{color:#9552ae;font-size:.65rem;font-weight:850;letter-spacing:.16em}.reader-tools strong{display:block;margin:5px 0 15px;font:700 1.25rem Georgia,serif}.reader-tools label{font-weight:800}.reader-tools select{width:100%;margin:6px 0 8px;padding:10px;border:1px solid #d7c4de;border-radius:10px;background:#fff}.reader-tools button{width:100%;margin-top:8px;padding:10px;border:1px solid #79408e;border-radius:11px;color:var(--purple);background:#fff;font-weight:800;cursor:pointer}.reader-tools .primary{color:#fff;background:var(--purple)}#status{min-height:1.4em;color:#397846;font-size:.85rem;font-weight:750}.paper{min-height:75vh;padding:50px 10%}.paper h2{text-align:center;font:700 1.75rem Georgia,serif}.text{font:1.08rem/1.75 Georgia,serif}.text p{margin:0;text-indent:1.6em}.text p:first-of-type{text-indent:0}.text img{display:block;max-width:100%;max-height:70vh;margin:24px auto;border-radius:9px}.page-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin:27px 0}.page-nav button{width:45px;height:45px;border:1px solid #d5c2dd;border-radius:50%;color:var(--purple);background:#fff;font-size:1.5rem}.comment{display:block;padding-top:20px;border-top:1px solid #e3d6e7;font-weight:800}.comment textarea,.review textarea{display:block;width:100%;margin-top:8px;padding:13px;border:1px solid #d5c3dc;border-radius:12px;resize:vertical;font-weight:400}.save-comment{margin-top:10px}.reviews{padding:25px}.review{margin-bottom:14px;padding:18px;border:1px solid #dfd1e4;border-radius:15px}.review h3{margin:0;font:700 1.25rem Georgia,serif}.review b{color:var(--purple)}.review button{margin-top:8px;padding:10px 14px;border:0;border-radius:10px;color:#fff;background:var(--purple);font-weight:800}.empty{padding:45px;text-align:center;color:#78677d}@media(max-width:760px){.topbar{padding-top:max(10px,env(safe-area-inset-top))}.topbar img{width:46px;height:46px}.reader{display:block;padding:10px}.reader-tools{position:static;margin-bottom:10px}.paper{padding:30px 22px}.text{font-size:1rem}.welcome{margin:20px auto;padding:30px 20px}.topbar p{display:none}}
.back-button{flex:0 0 auto;width:46px;height:46px;padding:0;border:1px solid #ffffff66;border-radius:50%;color:#fff;background:#ffffff18;font-size:1.65rem;font-weight:800;cursor:pointer}.fixed-page-arrow{position:fixed;top:50%;z-index:8;width:54px;height:70px;border:1px solid #d4bddc;border-radius:18px;color:var(--purple);background:#fffdf9e8;box-shadow:0 9px 25px #32113f35;font-size:2rem;cursor:pointer;transform:translateY(-50%);backdrop-filter:blur(6px)}.fixed-page-arrow--left{left:max(14px,env(safe-area-inset-left))}.fixed-page-arrow--right{right:max(14px,env(safe-area-inset-right))}.fixed-page-arrow:disabled{opacity:.28;cursor:default}.fixed-page-arrow[hidden]{display:none}@media(max-width:760px){.back-button{width:40px;height:40px;font-size:1.35rem}.fixed-page-arrow{width:44px;height:58px;border-radius:15px;background:#fffdf9f2}.fixed-page-arrow--left{left:7px}.fixed-page-arrow--right{right:7px}}
.reading-progress{margin:0 0 15px;padding:12px;border:1px solid #eadced;border-radius:13px;background:#fbf6fc}.reading-progress>div:first-child{display:flex;align-items:center;justify-content:space-between}.reading-progress strong{margin:0;font:800 1rem "Segoe UI",sans-serif;color:var(--purple)}.progress-track{height:8px;margin:8px 0;border-radius:999px;background:#eadfeb;overflow:hidden}.progress-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#652784,#b15ac0);transition:width .25s}.reading-progress small{color:#77657c}.quick-reactions{margin:20px 0;padding:17px;border:1px solid #e4d5e8;border-radius:15px;background:#fcf8fd}.quick-reactions>strong{display:block;margin-bottom:10px}.quick-reactions>div{display:flex;flex-wrap:wrap;gap:8px}.quick-reactions button{padding:8px 11px;border:1px solid #cbaed4;border-radius:999px;color:var(--purple);background:#fff;cursor:pointer}.quick-reactions button.active{color:#fff;background:var(--purple);box-shadow:0 5px 14px #5421682b}.quick-reactions small{display:block;margin-top:8px;color:#806e85}.chapter-feedback{margin-top:28px;padding:20px;border:1px solid #d9c4df;border-radius:17px;background:linear-gradient(145deg,#fbf4fc,#fffaf6)}.chapter-feedback>div span{display:block;color:#9552ae;font-size:.67rem;font-weight:850;letter-spacing:.15em}.chapter-feedback>div strong{font:700 1.25rem Georgia,serif}.chapter-feedback label{display:block;margin-top:13px;font-weight:800}.chapter-feedback select,.chapter-feedback textarea{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid #d3bed9;border-radius:11px;background:#fff;font-weight:400}.chapter-feedback button{margin-top:11px;padding:11px 15px;border:0;border-radius:11px;color:#fff;background:var(--purple);font-weight:800;cursor:pointer}
