/* Haitun detail B (cover left) and reader A. Scoped to these two pages. */
.detail-recommendations{max-width:1240px;margin:28px auto 0;padding:24px 30px}
.comic-reader .detail-recommendations{max-width:1000px;margin-left:auto;margin-right:auto}
.night-mode .detail-recommendations{background:#202c3e;border-color:#34445d;box-shadow:inset 0 0 0 1px #34445d}
.night-mode .detail-recommendations .section-heading{border-color:#34445d;box-shadow:0 1px 0 #34445d}
.night-mode .detail-recommendations h2,.night-mode .detail-recommendations h3 a{color:#dce9fa}
.night-mode .detail-recommendations .genre,.night-mode .detail-recommendations .more{color:#a1b4cd}
@media(max-width:1300px){.detail-recommendations{margin-left:22px;margin-right:22px}}
@media(max-width:700px){.detail-recommendations,.comic-reader .detail-recommendations{margin:16px 10px 0;padding:18px 16px}}
.latest-chapters .chapter-grid{margin-top:20px}
@media(max-width:360px){.comic-detail.home-shell-a .header-inner,.comic-reader.home-shell-a .header-inner{grid-template-columns:minmax(0,1fr) auto;column-gap:8px}.comic-detail.home-shell-a .site-header .brand,.comic-reader.home-shell-a .site-header .brand{width:190px}.comic-detail.home-shell-a .site-header .brand-art,.comic-reader.home-shell-a .site-header .brand-art{width:209px;left:-8px;top:-15px}}
.comic-detail,.comic-reader{color:#103d79}
.detail-main{padding-bottom:8px}.detail-breadcrumb{max-width:1240px;margin:22px auto;display:flex;gap:12px;color:#6a819f;font-size:14px;line-height:24px}
.work-hero{max-width:1240px;margin:0 auto;background:linear-gradient(115deg,#e1f1ff,#eff8ff 70%,#deeffe);border:1px solid #c4d9f1;border-radius:10px;padding:30px;box-shadow:0 4px 16px #17477606}
.work-hero-inner{max-width:1240px;margin:auto;display:grid;grid-template-columns:270px minmax(0,1fr);gap:56px;align-items:center}
.work-cover{display:block;width:270px;height:360px;object-fit:contain;aspect-ratio:3/4;border-radius:8px;background:#eaf1f9;box-shadow:0 8px 20px #29547f15}
.work-summary{min-width:0}.work-summary h1{font-size:46px;line-height:1.3;letter-spacing:1px;color:#073878;margin:0 0 23px;font-weight:750;overflow-wrap:anywhere}
.work-facts{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:16px;line-height:1.6}.work-facts p{display:flex;gap:10px}.work-facts p>span{color:#6c87ab;flex-shrink:0}.work-facts strong{font-weight:600;color:#0084ef}.work-genres{flex-basis:100%}
.work-description{margin:24px 0;color:#54769f;font-size:16px;line-height:1.95;overflow-wrap:anywhere}
.work-actions{display:flex;gap:20px;flex-wrap:wrap}.primary-action,.secondary-action{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 26px;font-size:16px;line-height:24px;border-radius:9px;border:1px solid #9bc8ff;font-weight:600;cursor:pointer;box-sizing:border-box;white-space:nowrap}
.primary-action{background:#087df3;color:#fff;border-color:#087df3}.primary-action:hover{background:#006ce0;color:#fff}.secondary-action{background:#fff;color:#087df3}.secondary-action:hover{background:#eff7ff;color:#0072e5}
.work-actions .primary-action,.work-actions .secondary-action{min-width:190px;height:56px}.primary-action .icon,.secondary-action .icon{width:23px;height:23px}
.disabled,.primary-action.disabled,.secondary-action.disabled{background:#edf2f7;color:#a3b2c5;border-color:#e5ebf2;cursor:default;box-shadow:none}
.resume-reading{display:inline-block;margin-top:18px;color:#087df3;font-size:14px}.resume-reading[hidden]{display:none}
.chapter-directory{max-width:1240px;margin:28px auto 0;padding:28px 30px;background:#fff;border:1px solid #c4d9f1;border-radius:10px}
.directory-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}.directory-heading h2{font-size:28px;color:#093778;line-height:1.5}.directory-heading small{font-size:13px;color:#8198b4;font-weight:400;vertical-align:middle;margin-left:10px}
.sort-switch{display:flex;gap:12px;font-size:14px}.sort-switch a{padding:9px 12px;color:#58779b;border-bottom:2px solid transparent}.sort-switch a[aria-current]{color:#087df3;border-color:#087df3}
.directory-range{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:20px 0}.range-tabs{display:flex;gap:8px;flex-wrap:wrap}.range-tabs a{min-height:38px;padding:8px 15px;background:#f1f7fe;color:#5d7fa7;border-radius:6px;font-size:14px}.range-tabs a[aria-current]{background:#087df3;color:#fff}
.range-form{display:flex;gap:8px;align-items:center;color:#6985a7;font-size:13px}.range-form select,.range-form button{height:38px;padding:0 10px;border:1px solid #c6ddf6;background:#fff;color:#2366ac;border-radius:6px}.range-form button{cursor:pointer}
.chapter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px}.chapter-entry{min-height:64px;display:flex;align-items:center;gap:16px;border:1px solid #d2e4fa;border-radius:7px;overflow:hidden;color:#153b6b;padding-right:15px}
.chapter-entry:hover{background:#f4f9ff;border-color:#89baff}.chapter-index{font-size:22px;font-weight:600;font-style:italic;color:#6893cc;background:#f1f7fe;align-self:stretch;min-width:60px;display:flex;justify-content:center;align-items:center}
.chapter-name{line-height:1.55;font-size:16px;min-width:0;overflow-wrap:anywhere;padding:9px 0;flex:1}.chapter-name small{display:inline-block;font-size:10px;margin-left:6px;color:#a87116;background:#fff5dd;padding:2px 4px;border-radius:3px}.chapter-chevron{font-size:25px;color:#5489c8}
.chapter-pagination{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px;font-size:14px;color:#6983a4}.chapter-pagination a,.chapter-pagination span[aria-disabled]{min-height:40px;padding:10px 18px;border:1px solid #cde0f7;border-radius:6px}.chapter-pagination span[aria-disabled]{color:#a5b6cb;background:#f8fbff}.chapter-empty{padding:50px 15px;color:#7890ad}
.comic-reader{--reading-width:800px;--reader-surface:#fff;--reader-line:#d2e3f6;background:#e7eff8}
.reader-main{padding:22px 24px 0}.reader-heading{position:relative;max-width:1240px;text-align:center;margin:0 auto 22px;min-height:82px;padding:0 145px}
.reader-heading h1{font-size:28px;line-height:1.5;color:#123b70;overflow-wrap:anywhere}.reader-heading p{font-size:16px;color:#6c85a5;margin-top:5px}.reader-back{position:absolute;left:0;top:10px;line-height:32px;font-size:14px;color:#087df3}
.reader-toolbar{display:flex;justify-content:center;align-items:center;gap:18px;max-width:1000px;margin:0 auto 22px;background:var(--reader-surface);border:1px solid var(--reader-line);border-radius:9px;padding:10px 20px;font-size:14px}
.reader-toolbar button,.settings-dialog button[data-theme],.settings-dialog button[data-size]{background:transparent;color:#31547e;min-height:42px;padding:8px 15px;border-radius:7px;border:1px solid transparent;cursor:pointer}
.reader-toolbar button[aria-pressed=true],.settings-dialog button[aria-pressed=true]{background:#e7f3ff;color:#0086ef;border-color:#d9ebfe}.reading-mode{color:#0086ef;font-weight:600;border-right:1px solid #c7dcf3;padding:0 25px 0 0}
.reader-pages{width:var(--reading-width);max-width:100%;margin:0 auto;background:#fff;line-height:0;display:block}
.reader-page{margin:0;padding:0;border:0;line-height:0;position:relative;display:block}
.reader-page img{display:block;width:100%;height:auto;max-width:100%;margin:0;padding:0;border:0;object-fit:contain}
.comic-reader.original-size .reader-page img{width:auto;max-width:100%;margin:0 auto}
.reader-page.failed{min-height:120px;background:#f0f5fb;display:flex;align-items:center;justify-content:center}.reader-page.failed img{display:none}
.image-retry{min-height:48px;padding:14px 20px;border:1px solid #bad8fa;border-radius:8px;background:#fff;color:#1279d8;font-size:14px;line-height:1.5;cursor:pointer}.image-retry[hidden]{display:none}
.reader-chapter-nav{max-width:1000px;margin:22px auto 0;background:var(--reader-surface);border:1px solid var(--reader-line);border-radius:9px;padding:16px 24px;display:flex;justify-content:center;align-items:center;gap:22px}
.reader-chapter-nav .primary-action,.reader-chapter-nav .secondary-action{min-width:145px}.reading-progress{font-size:14px;color:#577499;font-variant-numeric:tabular-nums;white-space:nowrap}.reading-progress b,.tool-progress b{font-weight:500}
.reader-tools{position:fixed;right:max(18px,calc((100vw - var(--reading-width))/2 - 92px));top:285px;width:66px;border:1px solid var(--reader-line);border-radius:12px;background:var(--reader-surface);padding:8px;z-index:15;box-shadow:0 6px 20px #17477608}
.reader-tools button,.reader-tools a{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;width:100%;min-height:60px;background:transparent;color:#385c89;border-radius:6px;font-size:12px;cursor:pointer}
.reader-tools button:hover,.reader-tools a:hover{background:#eef7ff;color:#0086ef}.reader-tools .icon{width:22px;height:22px;color:#087df3}.tool-progress{display:block;text-align:center;font-size:10px;color:#738ba7;padding:7px 0;border-top:1px solid var(--reader-line);white-space:nowrap}
.comic-dialog{width:min(480px,calc(100% - 32px));max-height:80vh;overflow:auto;padding:28px;border:1px solid #c2daf5;border-radius:14px;background:#fff;color:#173c6b;box-shadow:0 16px 70px #062c5b30;margin:auto}
.comic-dialog::backdrop{background:#183b6355}.comic-dialog h2{font-size:23px;line-height:1.5;padding-right:30px;margin:0 0 13px}.comic-dialog p{font-size:14px;line-height:1.8;color:#738aaa;margin:12px 0 20px}.dialog-close{position:absolute;top:13px;right:13px;width:40px;height:40px;font-size:28px;background:#f0f6ff;border-radius:50%;color:#4f739c;cursor:pointer}
.reader-directory-list{display:grid;gap:6px;margin:16px 0 22px}.reader-directory-list a{padding:12px 14px;font-size:14px;background:#f6f9ff;border:1px solid #e1ebf9;border-radius:5px}.reader-directory-list a[aria-current]{background:#e8f4ff;color:#0086ef;border-color:#96c5fd}
.settings-dialog fieldset{border:0;border-top:1px solid #e0ebf9;padding:15px 0;margin:12px 0}.settings-dialog legend{font-size:14px;padding-right:10px;color:#5e7c9f}
.reading-gate{max-width:800px;margin:0 auto;padding:70px 25px;background:#fff;border:1px solid #c4dbf6;border-radius:10px;text-align:center}.reading-gate h2{font-size:25px}.reading-gate p{margin:20px 0;color:#7990ae;line-height:1.8}.reading-gate .primary-action,.reading-gate .secondary-action{margin:6px}
.comic-notice{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);z-index:100;padding:13px 22px;max-width:calc(100vw - 32px);width:max-content;background:#153e6d;color:#fff;box-shadow:0 5px 22px #173d6b25;border-radius:9px;font-size:14px;line-height:1.7}.comic-notice[hidden]{display:none}
.comic-detail button:focus-visible,.comic-reader button:focus-visible,.comic-detail main a:focus-visible,.comic-reader main a:focus-visible{outline:2px solid #0086ef;outline-offset:3px}
.comic-reader.night-mode{--reader-surface:#202c3e;--reader-line:#34445d;background:#151e2b;color:#dce9fa}
.night-mode .site-header,.night-mode .site-footer{background:#202c3e;border-color:#34445d}.night-mode .main-nav a,.night-mode .account a{color:#c8d9f1!important}
.night-mode .reader-heading h1,.night-mode .reader-toolbar button,.night-mode .reader-tools button,.night-mode .reader-tools a{color:#cfdef2}.night-mode .reader-heading p,.night-mode .reading-progress{color:#9fb3ce}
.night-mode .reader-toolbar button[aria-pressed=true]{color:#66b8ff;background:#263e5c;border-color:#355c87}
.night-mode .secondary-action{background:#25354b;color:#90c7ff;border-color:#496385}.night-mode .disabled{background:#2b3442;color:#7c8ea6;border-color:#374559}
.night-mode .footer-brand p,.night-mode .footer-group h3{color:#c3d9f7}.night-mode .footer-group a,.night-mode .footer-brand>span,.night-mode .footer-base{color:#a1b4cd}
@media(max-width:1300px){.detail-breadcrumb,.chapter-directory,.work-hero{margin-left:22px;margin-right:22px}.work-hero-inner{gap:38px;grid-template-columns:240px minmax(0,1fr)}.work-cover{width:240px;height:320px}.work-summary h1{font-size:38px}.reader-tools{right:14px}}
@media(max-width:1100px){.reader-tools{top:auto;bottom:16px;right:18px;width:auto;display:flex;gap:6px;padding:5px 8px;box-shadow:0 4px 20px #17477618}.reader-tools button,.reader-tools a{width:54px;min-height:50px}.tool-progress{display:none}.comic-reader .site-footer{padding-bottom:80px}.reader-toolbar{gap:8px}}
@media(max-width:700px){
 .detail-breadcrumb{margin:14px 16px;font-size:12px;gap:8px;flex-wrap:wrap}.work-hero{margin:0 10px;padding:22px 12px}.work-hero-inner{grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:start}.work-cover{width:112px;height:auto;aspect-ratio:3/4}
 .work-summary h1{font-size:25px;margin:0 0 12px;letter-spacing:0}.work-facts{gap:6px;font-size:12px;display:block}.work-facts p{gap:6px;margin-bottom:5px}.work-genres{line-height:1.7}
 .work-description{grid-column:1/-1;margin:18px 0;font-size:14px;line-height:1.85}.work-summary{display:contents}.work-summary h1,.work-facts{grid-column:2}.work-cover{grid-column:1;grid-row:1/3}.work-facts{margin-top:-12px}.work-actions,.resume-reading{grid-column:1/-1}.work-actions{gap:12px}.work-actions .primary-action,.work-actions .secondary-action{min-width:0;flex:1;height:48px;font-size:14px;padding:9px 12px}.work-hero-inner{row-gap:10px}
 .chapter-directory{margin:16px 10px 0;padding:18px 12px}.directory-heading h2{font-size:21px}.directory-heading small{display:block;font-size:11px;margin:2px 0 0}.sort-switch{gap:0;font-size:12px}.sort-switch a{padding:9px}
 .directory-range{display:block;margin:14px 0}.range-tabs{gap:5px}.range-tabs a{font-size:12px;padding:8px 10px;min-height:36px}.range-form{margin-top:12px;justify-content:flex-end}.range-form label{margin-right:auto}
 .chapter-grid{gap:9px;grid-template-columns:repeat(2,minmax(0,1fr))}.chapter-entry{min-height:66px;gap:8px;padding-right:7px}.chapter-index{min-width:28px;font-size:15px}.chapter-name{font-size:12px;line-height:1.7}.chapter-chevron{font-size:18px}.chapter-pagination{gap:10px;font-size:12px}.chapter-pagination a,.chapter-pagination span[aria-disabled]{padding:10px 12px}
 .reader-main{padding:16px 0 0}.reader-heading{padding:0 16px;margin:0 0 16px;min-height:0}.reader-back{position:static;display:block;text-align:left;font-size:12px;margin:0 0 10px;line-height:26px}.reader-heading h1{font-size:23px}.reader-heading p{font-size:14px}
 .reader-toolbar{margin:0 10px 14px;gap:4px;padding:7px 8px;justify-content:space-between;flex-wrap:wrap;font-size:12px}.reader-toolbar button{padding:5px 8px;min-height:38px}.reading-mode{padding-right:10px}
 .reader-pages{max-width:100%;width:100%}.reader-page{width:100%}.reader-chapter-nav{margin:14px 10px 0;padding:12px 8px;gap:7px;flex-wrap:wrap}.reader-chapter-nav .primary-action,.reader-chapter-nav .secondary-action{min-width:0;flex:1;padding:8px 7px;font-size:13px;min-height:44px}.reading-progress{flex-basis:100%;text-align:center;font-size:12px;margin-top:3px}
 .reader-tools{left:50%;right:auto;transform:translateX(-50%);bottom:12px;background:#ffffffed}.reader-tools button,.reader-tools a{min-height:48px;width:57px;font-size:11px}.reader-tools .icon{width:19px;height:19px}.night-mode .reader-tools{background:#202c3ef2}
 .comic-dialog{padding:22px}.reading-gate{margin:0 10px;padding:40px 16px}.reading-gate h2{font-size:21px}.comic-reader.original-size .reader-page img{max-width:100%}
}

.comic-reader .reader-tools[hidden]{display:none}

/* Mobile reader keeps only the reading header and a clear return action. */
@media(max-width:700px){
 .comic-reader .site-header,.comic-reader .site-footer{display:none}
 .comic-reader .reader-main{padding-bottom:20px}
 .comic-reader .reader-back{display:flex;align-items:center;justify-content:center;width:max-content;min-height:44px;padding:0 18px;margin:0 0 16px;border:1px solid #b8d8fa;border-radius:22px;background:#fff;color:#0876df;font-size:14px;font-weight:600;line-height:22px;box-shadow:0 3px 10px #1747760a}
 .comic-reader .reader-back:hover{background:#f1f8ff;border-color:#80bafa}
 .comic-reader .reader-back:active{background:#e4f1ff}
 .comic-reader.night-mode .reader-back{background:#25354b;border-color:#496385;color:#a8d4ff;box-shadow:none}
 .comic-reader.night-mode .reader-back:hover{background:#2b405b}
}

/* Full in-reader catalog: fixed header, independently scrolling chapters. */
.comic-dialog.directory-dialog{padding:0;overflow:hidden;max-height:80vh;max-height:80dvh}
.directory-dialog[open]{display:flex;flex-direction:column}
.reader-directory-header{position:relative;flex-shrink:0;padding:20px 22px 14px;border-bottom:1px solid #e1ebf9}
.reader-directory-header h2{font-size:21px;margin:0;padding-right:42px}
.reader-directory-header h2 span{display:inline-block;font-size:12px;font-weight:400;color:#738aaa;margin-left:8px;white-space:nowrap}
.reader-directory-header p{margin:6px 42px 0 0;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.directory-dialog .reader-directory-list{position:relative;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:auto;display:flex;flex-direction:column;gap:7px;margin:0;padding:14px 22px 18px}
.directory-dialog .reader-directory-list a{flex-shrink:0;min-height:44px;line-height:22px;overflow-wrap:anywhere}
.directory-dialog .reader-directory-end{margin:12px 0 0;text-align:center;font-size:12px}
.night-mode .directory-dialog{background:#202c3e;color:#dce9fa;border-color:#34445d}
.night-mode .reader-directory-header{border-color:#34445d}
.night-mode .reader-directory-header p,.night-mode .reader-directory-header h2 span,.night-mode .reader-directory-end{color:#a1b4cd}
.night-mode .directory-dialog .reader-directory-list a{background:#25354b;border-color:#34445d;color:#cfdef2}
.night-mode .directory-dialog .reader-directory-list a[aria-current]{background:#263e5c;border-color:#4b8ccb;color:#83c7ff}
.night-mode .directory-dialog .dialog-close{background:#2b405b;color:#cfdef2}
