*,*::before,*::after{box-sizing:border-box}
html{margin:0;padding:0;width:100%;height:auto;overflow-x:hidden}
body{margin:0;padding:0;min-height:100vh;height:auto;overflow-x:hidden;overflow-y:auto;position:static;-webkit-overflow-scrolling:touch;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Inter",sans-serif;background:var(--bg);color:var(--text-primary);line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}

.chapter-reader{max-width:none;margin:50px auto 80px;padding:0 15px}
.chapter-loading{text-align:center;margin-top:10px;font-size:22px;font-weight:700;color:var(--text-primary)}
.chapter-loading-sub{text-align:center;font-size:14px;color:var(--text-muted);margin-bottom:20px}

.chapter-nav{display:flex;justify-content:space-between;align-items:center;margin:12px 0}
.chapter-nav.top{flex-direction:column;gap:10px}
.chapter-nav.top .chapter-nav-buttons,.chapter-nav.bottom .chapter-nav-buttons{width:100%;display:flex;justify-content:space-between;align-items:center}
.chapter-nav.bottom{margin-top:40px}
.chapter-nav-btn.is-hidden{visibility:hidden;pointer-events:none}
.chapter-nav-btn{background:var(--bg-elevated);color:var(--text-primary);padding:10px 22px;font-size:15px;border-radius:8px;border:1px solid var(--border-subtle);cursor:pointer;transition:border-color .25s,background .25s}
.chapter-nav-btn:hover{border-color:var(--accent);background:var(--accent-soft)}
.chapter-nav-buttons{display:flex;justify-content:space-between;gap:12px}

.chapter-images{margin:0;padding:0;line-height:0}
.chapter-images img{width:100%;height:auto;display:block;margin:0;padding:0;border-radius:0;user-select:none;-webkit-user-drag:none}

.chapter-select{padding:10px 40px 10px 14px;font-size:15px;border-radius:8px;border:1px solid var(--border-subtle);background:var(--bg-elevated);color:var(--text-primary);cursor:pointer;outline:none;min-width:150px;appearance:none;transition:border-color .25s,box-shadow .25s;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' fill='none' stroke='currentColor' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-position:right 10px center;background-size:12px;background-repeat:no-repeat;padding-right:32px}
.chapter-select:hover{border-color:var(--accent)}
.chapter-select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.chapter-select::-ms-expand,.chapter-select::-moz-focus-inner{display:none!important}

.chapter-extra-actions{display:flex;gap:10px;justify-content:flex-end;width:100%;margin-bottom:-4px;margin-top:4px;padding-right:6px}
.icon-btn{width:38px;height:38px;border-radius:50%;background:var(--bg-chip);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s}
.icon-btn ion-icon{font-size:20px;color:var(--text-primary)}
.icon-btn:hover{background:var(--bg-elevated-soft);transform:translateY(-2px)}
.chapter-comments-wide{background:none;border:none;box-shadow:none;padding:0}
.chapter-comments-wide .comment-item{position:relative;padding-top:18px}
.chapter-comments-wide .comment-item::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--border-subtle);pointer-events:none}

.chapter-dd{width:100%;max-width:420px;margin:0 auto;position:relative;box-sizing:border-box}
.chapter-dd-btn{width:100%;padding:12px 44px 12px 16px;border-radius:10px;border:1px solid var(--border-subtle);background:var(--bg-elevated);color:var(--text-primary);font-size:16px;font-weight:700;cursor:pointer;text-align:center;box-sizing:border-box;transition:background-color 220ms cubic-bezier(.22,.61,.36,1),border-color 220ms cubic-bezier(.22,.61,.36,1)}
.chapter-dd-btn:hover{background:var(--accent-soft)}
.chapter-dd-caret{position:absolute;right:14px;top:50%;transform:translateY(-50%);opacity:.8;pointer-events:none}
#chapterDDLabel{display:block;width:100%;pointer-events:none}

.chapter-dd-menu{position:absolute;top:calc(100% + 8px);left:0;right:0;width:100%;max-height:60vh;overflow:auto;background:var(--bg-elevated);border-radius:12px;border:1px solid var(--border-subtle);box-shadow:0 14px 40px rgba(0,0,0,.18);z-index:9999;box-sizing:border-box;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top center;pointer-events:none;transition:opacity 180ms ease,transform 220ms cubic-bezier(.22,.61,.36,1)}
.chapter-dd-menu.is-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.chapter-dd-menu[hidden]{display:none}

.chapter-dd-item{display:block;width:100%;padding:12px 14px;background:transparent;border:none;outline:none;text-align:center;cursor:pointer;font-size:15px;font-weight:650;color:var(--text-primary);transition:background-color 220ms cubic-bezier(.22,.61,.36,1),color 180ms ease}
.chapter-dd-item+.chapter-dd-item{border-top:1px solid var(--border-subtle)}
.chapter-dd-menu .chapter-dd-item:hover,.chapter-dd-menu .chapter-dd-item:focus,.chapter-dd-menu .chapter-dd-item:focus-visible{background:var(--accent-soft);color:var(--accent)}
.chapter-dd-menu .chapter-dd-item:active{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.chapter-dd-item.is-active{background:var(--accent-soft);color:var(--accent);font-weight:750}
html{scrollbar-gutter:stable}

button#bookmarkBtn.bookmark-guest{position:relative;cursor:not-allowed;isolation:isolate;overflow:visible}
button#bookmarkBtn.bookmark-guest ion-icon{opacity:.75}
button#bookmarkBtn.bookmark-guest::before{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);background:var(--bg-elevated);color:var(--text-primary);padding:6px 10px;border-radius:8px;font-size:12px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;z-index:9999;transition:opacity .18s ease;box-shadow:var(--shadow-soft)}
button#bookmarkBtn.bookmark-guest::after{content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--bg-elevated);opacity:0;pointer-events:none;z-index:9999;transition:opacity .18s ease}
button#bookmarkBtn.bookmark-guest:hover::before,button#bookmarkBtn.bookmark-guest:hover::after{opacity:1}

.chapter-comments-wide .comment-list>.comment-item:first-of-type::before{display:block}

.reader-width{max-width:800px;margin:0 auto;width:100%}

.chapter-skeleton{display:grid;gap:16px;padding:0;margin:0}
.skeleton-page{width:100%;aspect-ratio:2/3;background:linear-gradient(90deg,var(--bg-elevated-soft) 25%,var(--bg-chip) 37%,var(--bg-elevated-soft) 63%);background-size:400% 100%;animation:skeleton-shimmer 1.4s ease infinite}
@keyframes skeleton-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.chapter-images.is-loading{opacity:0;pointer-events:none}
.chapter-images{transition:opacity .25s ease}

#backToTop{position:fixed;display:flex;align-items:center;justify-content:center;bottom:150px;right:25px;width:30px;height:30px;border-radius:50%;border:none;background:var(--accent);color:#fff;font-size:20px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.25);z-index:99999;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease;touch-action:manipulation}
#backToTop.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}
@media(hover:hover){#backToTop:hover{background:color-mix(in srgb,var(--accent) 85%,black)}}
#backToTop ion-icon{pointer-events:none}

#reportModal{background:rgba(0,0,0,.55)}
#reportModal .report-box{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-subtle)}
#reportModal h2,#reportModal h3,#reportModal strong,#reportModal .report-selected span,#reportModal .report-selected strong{color:var(--text-primary)}
#reportModal p,#reportModal span{color:var(--text-secondary)}
#reportModal input,#reportModal textarea{background:var(--bg-elevated-soft);color:var(--text-primary);border-color:var(--border-subtle)}
#reportModal input::placeholder,#reportModal textarea::placeholder{color:var(--text-muted)}
#reportModal .report-option{background:var(--bg-elevated-soft);border-color:var(--border-subtle)}
#reportModal .report-option:hover{background:var(--bg-chip)}
#reportModal .report-option.is-selected{background:var(--accent-soft);border-color:var(--accent)}
#reportModal .report-footer{border-top:1px solid var(--border-subtle)}
#reportModal .report-close,#reportModal .report-back{color:var(--text-primary)}
#reportModal .report-close:hover,#reportModal .report-back:hover{color:#fff}
#reportModal .report-selected{background:var(--bg-elevated-soft);color:var(--text-primary);border:1px solid var(--border-subtle)}
#reportModal .report-upload{background:var(--bg-elevated-soft);color:var(--text-primary);border:1px dashed var(--border-strong)}
#reportModal .report-upload:hover{background:var(--bg-chip)}
#reportModal .report-upload ion-icon{color:var(--text-primary)}

@media(max-width:720px){
body{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
.chapter-reader{padding-left:0;padding-right:0}
.reader-width{margin:0;width:100%;max-width:100%}
.chapter-extra-actions{justify-content:flex-end;padding-right:10px}
.chapter-select{font-size:16px;padding:12px 44px 12px 16px;min-width:100%;text-align:center!important;background-position:right 14px center}
.chapter-nav-buttons{width:100%;gap:8px}
.chapter-nav-btn{flex:1;font-size:16px;padding:14px 0}
.chapter-images,.chapter-images img{width:100%;max-width:100%;display:block}
}

html,body,main,.chapter-reader{touch-action:pan-y;overscroll-behavior-y:auto}

.chapter-exo{display:flex;justify-content:center;width:100%;margin:24px 0}
.chapter-exo .exo-wrap{max-width:100%;overflow:hidden}
.rec-img-wrapper img{transition:filter .25s ease}
.rec-item:hover .rec-img-wrapper img{filter:saturate(150%)}
#bookmarkBtn{background:var(--bg-elevated);border:1px solid var(--border-subtle);}
#bookmarkBtn ion-icon{color:var(--text-primary);}
#bookmarkBtn:hover{background:var(--accent-soft);border-color:var(--accent);}
html.dark #bookmarkBtn{background:var(--bg-chip);}
html.dark #bookmarkBtn ion-icon{color:var(--text-primary);}
#scrollDown{position:fixed;display:flex;align-items:center;justify-content:center;bottom:110px;right:25px;width:30px;height:30px;border-radius:50%;border:none;background:var(--accent);color:#fff;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.25);z-index:99999;opacity:0;pointer-events:none;transform:translateY(-10px);transition:opacity .25s ease,transform .25s ease}
#scrollDown.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}
@media(hover:hover){#scrollDown:hover{background:color-mix(in srgb,var(--accent) 85%,black)}}
#scrollDown svg{pointer-events:none}