@font-face{font-family:Lunar;src:url('./assets/font-arabic.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}

@font-face{font-family:Lunar;src:url('./assets/font-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2190-2193,U+2212,U+2215}

:root{color-scheme:light;--bg:#f3f5fa;--surface:#fff;--surface-2:#e6ebf5;--text:#18243d;--muted:#53617a;--muted-2:#58667e;--accent:#3656cc;--accent-ink:#fff;--accent-soft:#3656cc0d;--line:#dbe1ed;--focus:#3656cc;--chrome:#fff;--hero-bg:#18223a;--hero-text:#f3f6ff;--hero-muted:#b8c5df;--phone:480px;--nav-height:76px;--ease-out:cubic-bezier(.22,1,.36,1);--ease-sheet:cubic-bezier(.32,.72,0,1);--font-ui:Lunar,'Geeza Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-display:var(--font-ui);--reader-bg:#101727;--reader-text:#f3f6ff;--reader-line:#ffffff18;--mint:var(--accent);--violet:var(--muted);--page-max:var(--phone)}

*{box-sizing:border-box}
html{background:var(--bg);scroll-padding-block:76px 110px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.75 var(--font-ui);font-variant-numeric:tabular-nums;min-height:100svh}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button,select,input{color:inherit}
button{border:0;background:transparent}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex:none}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{line-height:1.45;text-wrap:pretty;overflow-wrap:anywhere}
h1{font-size:28px;font-weight:700}
h2{font-size:20px;font-weight:650}
h3{font-size:15px;font-weight:650}
p{color:var(--muted)}
button:disabled{opacity:.5;cursor:wait}
img{max-width:100%}
[hidden]{display:none!important}
:is(a,button,input,select,summary):focus-visible{outline:2px solid var(--focus);outline-offset:3px}
bdi{unicode-bidi:isolate}
small{font-size:12px}
em{font-style:normal;color:var(--muted-2)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:80;top:8px;inset-inline-start:12px;transform:translateY(-160%);background:var(--accent);color:var(--accent-ink);padding:12px}
.skip-link:focus{transform:none}
.jouri-theme-wallpaper,.desktop-nav,.mobile-add-fab,.search-label,kbd,.brand-star,.brand-panel-gap{display:none}

.site-header{position:sticky;top:0;z-index:20;background:var(--bg);padding-top:env(safe-area-inset-top,0px)}
.header-shell{max-width:var(--phone);margin:auto;min-height:70px;display:flex;align-items:center;justify-content:space-between;padding:6px max(20px,env(safe-area-inset-right)) 6px max(20px,env(safe-area-inset-left));gap:12px}
.brand{display:flex;align-items:center;gap:9px;min-height:44px;white-space:nowrap}
.brand-mark{display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--accent);border-radius:50%}
.brand-mark svg{width:23px;height:23px;stroke:none;fill:var(--accent-ink)}
.brand-word{font-size:23px;font-weight:700}
.brand-kicker{font-size:8px;font-weight:550;letter-spacing:.18em;color:var(--muted-2);margin-top:5px}
.header-actions{display:flex;gap:6px}
.icon-button,.profile-button,.reader-back,.reader-setting-button,.reader-mark-button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:10px;flex:none}
.profile-button{background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-radius:50%}
.primary-button,.secondary-button,.text-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:8px 14px;font-weight:650;border-radius:9px;text-align:center;line-height:1.6}
.primary-button{background:var(--accent);color:var(--accent-ink);min-height:48px;border:1px solid transparent}
.secondary-button{background:var(--surface);border:1px solid var(--line);color:var(--text)}
.text-button{padding:8px;color:var(--muted);font-size:12px}
.text-button svg{width:18px;height:18px}
.full-width{width:100%}
.primary-button:active,.secondary-button:active,.icon-button:active,.profile-button:active{transform:scale(.98)}

#app{outline:none;min-height:calc(100svh - 62px)}
.page-shell{max-width:var(--phone);margin:auto;padding:14px max(20px,env(safe-area-inset-right)) calc(110px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.screen-heading,.library-head,.browse-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:6px 0 24px}
.screen-heading p,.browse-head p,.library-head p{font-size:12px}
.screen-heading h1{margin-top:2px}
.eyebrow{font-size:11px;font-weight:500;color:var(--muted-2);line-height:1.8}
.private-kicker{display:none}
.section-block{margin-top:32px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.section-heading h2{font-size:19px;font-weight:700}
.section-heading p:not(.eyebrow){font-size:12px}
.section-heading>div{min-width:0}

.mobile-nav{position:fixed;z-index:30;inset-inline:0;bottom:0;max-width:var(--phone);margin-inline:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:4px;background:var(--chrome);border-top:1px solid var(--line);min-height:76px}
.mobile-nav a{min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted-2);font-size:10px;font-weight:550;position:relative;border-radius:14px;transition:transform 140ms var(--ease-out),color 140ms ease,background-color 140ms ease}
.mobile-nav svg{width:22px;height:22px}
.mobile-nav a[aria-current=page]{color:var(--accent);background:var(--accent-soft)}
.mobile-nav a[aria-current=page]::before{content:none}
.network-status{max-width:var(--phone);margin:auto;background:#2d2631;color:#efdee5;padding:8px 16px;font-size:12px}
.toast{position:fixed;z-index:70;bottom:calc(94px + env(safe-area-inset-bottom));inset-inline:18px;max-width:444px;margin-inline:auto;background:var(--text);color:var(--bg);padding:13px 17px;border:1px solid var(--line);border-radius:14px;font-size:13px;opacity:0;transform:translateY(8px);pointer-events:none;box-shadow:0 8px 32px #0002;transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
.toast.is-visible{opacity:1;transform:translateY(0)}

.library-cover-wrap,.source-detail-cover-wrap{position:relative;isolation:isolate;aspect-ratio:2/3;background:var(--surface-2);overflow:hidden;border-radius:10px;min-width:0}
.library-cover-wrap img,.source-detail-cover-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:2;transition:opacity .18s}
.library-cover-wrap img.is-loaded,.source-detail-cover-wrap img.is-loaded{opacity:1}
.library-cover-fallback-wrap{position:absolute;inset:0}
.library-cover-fallback-wrap svg,.source-detail-cover-fallback{width:100%;height:100%;stroke:none}
.source-badge,.reading-state-badge{display:none}
.home-resume{position:relative;display:grid;grid-template-columns:108px minmax(0,1fr);gap:16px;align-items:center;min-height:0;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 6px 24px #20356705}
.home-resume>.library-cover-wrap{position:relative;inset:auto;aspect-ratio:2/3;border-radius:9px;align-self:start;box-shadow:3px 7px 16px #1020491a}
.resume-copy{position:relative;min-width:0;padding:0;background:none}
.resume-copy h2{font-size:19px;line-height:1.55;font-weight:650;margin:6px 0 12px;text-wrap:pretty;overflow-wrap:anywhere}
.resume-position{font-size:11px;color:var(--muted);margin-bottom:10px}
.resume-position span{margin-inline:3px}
.resume-copy .primary-button{width:100%;font-size:12px;padding:9px 12px;margin-top:16px;min-height:46px;justify-content:flex-start;gap:7px;border-radius:10px}
.resume-copy .primary-button svg{width:17px;height:17px}
.progress-track,.library-card-progress>span{height:3px;background:var(--surface-2);overflow:hidden;border-radius:3px}
.progress-track>span{display:block;width:var(--progress);height:100%;background:var(--accent)}
.cover-rail{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:-20px;padding:0 20px 6px;scroll-padding-inline:20px}
.cover-rail::-webkit-scrollbar{display:none}
.rail-card{flex:0 0 33%;max-width:150px;min-width:0;scroll-snap-align:start}
.rail-card .library-cover-wrap{aspect-ratio:2/3;border-radius:10px;box-shadow:0 4px 10px #15223c0b}
.rail-card img{object-position:center 30%}
.rail-card h3{margin:10px 0 3px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:13px;line-height:1.6;min-height:42px;font-weight:600}
.rail-card small{color:var(--muted-2)}
.continue-list,.updates-list{display:grid;gap:0}
.continue-card,.update-row{display:flex;align-items:center;gap:13px;min-width:0;padding:13px 0;border-bottom:1px solid var(--line);min-height:92px}
.continue-card>.library-cover-wrap,.update-row>.library-cover-wrap{width:52px;flex:none;border-radius:5px}
.continue-copy,.update-row>div:not(.library-cover-wrap){min-width:0;flex:1}
.continue-copy strong,.update-row strong{display:block;line-height:1.5;font-size:13px;overflow-wrap:anywhere}
.continue-copy small,.update-row small{display:block;font-size:11px;color:var(--muted-2);margin-top:5px}
.continue-copy .progress-track{margin-top:8px}
.update-row>svg{width:18px}
.quiet-empty{font-size:12px;line-height:1.95;padding:17px 0;border-block:1px solid var(--line);color:var(--muted)}
.refresh-status:not(:empty){font-size:12px;margin:12px 0;color:var(--accent)}
.library-door{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:18px 0;margin-top:28px;font-size:12px;color:var(--muted);min-height:56px}
.library-door span{display:flex;align-items:center;gap:8px}
.library-door strong{font-weight:600}

.library-head{margin-bottom:18px}
.search-field,.chapter-search-field{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);padding-inline:13px;border-radius:12px;min-height:50px;transition:border-color 150ms ease}
.search-field:focus-within,.chapter-search-field:focus-within{border-color:var(--accent)}
.search-field svg,.chapter-search-field svg{width:19px;color:var(--muted-2)}
input{min-width:0;font-size:16px;line-height:1.6}
.search-field input,.chapter-search-field input{width:100%;min-height:46px;background:transparent;border:0;outline:0;color:var(--text)}
input::placeholder{color:var(--muted-2);font-size:13px}
.library-toolbar,.filter-bar,.chapter-filters{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.library-toolbar{margin-top:14px;margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}
.filter-chip{flex:none;min-height:44px;min-width:44px;padding:8px 13px;border:1px solid transparent;border-radius:9px;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:550;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;transition:transform 140ms var(--ease-out),background-color 150ms ease,color 150ms ease}
.filter-chip[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}
.filter-chip bdi{font-size:10px;opacity:.75}
.library-viewbar{display:flex;align-items:center;gap:8px;margin:16px 0 4px}
.browse-count{margin-inline-end:auto;white-space:nowrap;font-size:12px;color:var(--muted-2)}
select{max-width:100%;min-height:44px;border:1px solid var(--line);border-radius:7px;background:var(--surface);padding:8px 10px;font-size:13px}
.library-sort-control select{background:transparent;border:0;padding-inline:2px;font-size:12px;max-width:124px}
.layout-toggle{display:flex;gap:2px}
.layout-toggle .icon-button{border-radius:6px;color:var(--muted-2)}
.layout-toggle .icon-button[aria-pressed=true]{background:var(--surface);color:var(--text)}
.layout-toggle svg{width:19px}
.library-refine,.detail-more{margin-bottom:22px;border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;min-height:44px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--muted);font-size:12px;font-weight:550;padding:8px 0}
summary::-webkit-details-marker{display:none}
details[open]>summary span[aria-hidden]{transform:rotate(45deg)}
.refine-content{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:8px 0 18px}
.refine-content label,.work-organization label{display:grid;gap:6px;min-width:0;font-size:12px;color:var(--muted)}
.refine-content .full-width{grid-column:1/-1}
.library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
.library-card{min-width:0;position:relative}
.library-card-main{display:block}
.library-card-title{font-size:14px;font-weight:600;line-height:1.6;margin-top:11px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:42px}
.library-card-meta,.library-card-genres{font-size:10px;line-height:1.7;color:var(--muted-2);margin-top:3px}
.library-card-genres{display:none}
.card-context{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:10px;color:var(--muted-2);margin-top:5px}
.card-context strong{font-weight:550;color:var(--accent)}
.library-card-action{display:none}
.library-card-progress{margin-top:7px}
.library-card-progress>span{display:block;position:relative}
.library-card-progress>span:after{content:'';display:block;height:100%;width:var(--progress);background:var(--accent)}
.library-card-progress small{font-size:10px;display:block;color:var(--muted-2);margin-top:3px}
.library-card-placeholder-cover{opacity:.45}
.library-list-view .library-grid{display:flex;flex-direction:column;gap:18px}
.library-list-view .library-card-main{display:grid;grid-template-columns:85px minmax(0,1fr);gap:14px}
.library-list-view .library-card-title{font-size:14px;line-height:1.6;margin:0;min-height:0;-webkit-line-clamp:4}
.library-list-view .library-card-copy{padding:3px 0}
.library-list-view .library-card-meta{font-size:11px}
.library-list-view .card-context{font-size:11px;margin-top:7px}
.library-list-view .library-card-genres{display:block}

.detail-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.detail-toolbar .text-button{padding-inline:0;font-size:12px}
.detail-media{width:148px;margin:0 auto 24px}
.detail-media>.source-detail-cover-wrap{aspect-ratio:2/3;border-radius:10px;box-shadow:3px 8px 20px #15223c18}
.detail-content h1{font-size:24px;line-height:1.5;text-align:center;margin:10px 0 14px;font-weight:650}
.detail-content>.eyebrow{text-align:center;font-size:11px}
.series-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:20px}
.tag{font-size:10px;background:var(--surface-2);padding:4px 8px;border-radius:5px;color:var(--muted)}
.detail-actions .primary-button{justify-content:space-between;padding-inline:16px}
.detail-actions .primary-button span{margin-inline-end:auto}
.detail-progress-pill{font-size:11px;text-align:center;margin:9px 0 0;color:var(--muted-2)}
.story-summary{font-size:13px;line-height:2;margin:24px 0 14px;color:var(--muted)}
.series-facts,.settings-facts{margin:8px 0 18px}
.series-facts>div,.settings-facts>div{padding:11px 0;margin:0;border-bottom:1px solid #ffffff07}
.series-facts dt,.settings-facts dt{color:var(--muted-2)}
dd{margin:0;overflow-wrap:anywhere}
.work-organization{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.work-organization>.full-width{grid-column:1/-1}
.work-organization input{min-height:44px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:8px 10px}
.chapter-section{margin-top:32px}
.chapter-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.chapter-heading p{font-size:11px;color:var(--muted-2);margin-top:3px}
.chapter-sort-row{display:flex;gap:6px;margin:12px 0}
.chapter-filters{flex:1;min-width:0}
.chapter-filters .filter-chip{padding-inline:10px;font-size:11px}
.chapter-sort{background:var(--surface)}
.chapter-row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:76px;padding:14px 8px;border-bottom:1px solid var(--line);border-radius:10px}
.chapter-copy{min-width:0}
.chapter-copy strong{font-size:13px;line-height:1.6;display:block;font-weight:550;overflow-wrap:anywhere}
.chapter-copy small{display:block;color:var(--muted-2);font-size:10px;margin-top:5px}
.chapter-state{display:flex;align-items:center;gap:5px;font-size:10px;flex:none;color:var(--muted-2)}
.chapter-state svg{width:16px;height:16px}
.chapter-row.is-current .chapter-copy strong,.chapter-row.is-current .chapter-state{color:var(--accent)}
.chapter-row.is-locked{color:var(--muted);opacity:1}
.chapter-row.is-read .chapter-state{color:var(--muted)}
.chapter-load-more{display:block;width:100%;min-height:48px;border:1px solid var(--line);border-radius:8px;margin-top:18px;color:var(--muted)}
.chapter-empty{text-align:center;padding:32px 0}
.chapter-empty strong,.chapter-empty small{display:block}

.history-head p{font-size:12px;margin-top:5px}
.history-head h1{font-size:28px}
.history-head{margin-bottom:26px}
.history-head>.secondary-button{display:none}
.history-group{margin-bottom:32px}
.history-list{display:grid;gap:0}
.history-card-main{display:flex;gap:14px;align-items:center;min-height:136px;padding:12px 0;border-bottom:1px solid var(--line)}
.history-card-main>.library-cover-wrap{width:72px;flex:none;border-radius:10px}
.history-card-copy{min-width:0;flex:1}
.history-card-copy strong{font-size:14px;font-weight:600;line-height:1.6;display:block;overflow-wrap:anywhere}
.history-card-copy small{display:block;font-size:11px;color:var(--muted-2);margin-top:7px}
.history-card-main>svg{width:17px}
.settings-page>.library-head{margin-bottom:12px}
.settings-section{border-bottom:1px solid var(--line);padding:26px 0}
.settings-section:first-child{padding-top:8px}
.settings-section h2{font-size:18px;font-weight:650;margin-bottom:8px}
.settings-section p{font-size:12px;line-height:1.9;margin-bottom:14px}
.settings-section .settings-note{font-size:11px;color:var(--muted-2);margin:12px 0 0}
.settings-actions{display:flex;flex-wrap:wrap;gap:10px}
.settings-actions button{flex:1}
.settings-facts>div{padding:8px 0;margin:0}
.settings-facts dd{max-width:60%;text-align:end}
.source-health>div{display:grid;gap:4px;margin-bottom:15px;font-size:12px}
.source-health span,.source-health small{color:var(--muted-2);font-size:11px}
.pending-imports>div{display:flex;gap:12px;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:12px 0}
.pending-imports>div>span{min-width:0}
.pending-imports strong{display:block;font-size:13px;overflow-wrap:anywhere}
.pending-imports small{display:block;font-size:11px;color:var(--muted-2)}
.empty-state{padding:40px 14px;text-align:center}
.empty-state h2{font-size:23px;margin:12px 0}
.empty-state p{font-size:13px;max-width:30ch;margin:0 auto 20px}
.empty-icon{display:flex;align-items:center;justify-content:center;width:76px;height:76px;background:var(--accent-soft);border:1px solid var(--line);border-radius:24px;color:var(--accent);margin:auto auto 20px;transform:rotate(-5deg)}
.empty-icon svg{width:30px;height:30px}
.app-boot{display:grid;justify-items:center;gap:16px;padding:100px 16px;color:var(--muted)}
.source-loading-card{padding:28px 0;min-height:260px}
.loading-spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:rotate 1s linear infinite}
.source-loading p,.source-error p{margin:14px 0}
.not-found{padding:45px 0;text-align:center}
.noscript{padding:24px}

dialog{position:fixed;inset:auto 0 0;margin:0 auto;width:100%;max-width:var(--phone);max-height:min(90dvh,var(--dialog-vh,90dvh));border:1px solid var(--line);border-bottom:0;border-radius:24px 24px 0 0;background:var(--surface);color:var(--text);padding:26px 22px calc(24px + env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;z-index:60;box-shadow:0 -12px 60px #0003}
dialog::backdrop{background:#000a}
dialog form{margin:0}
.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}
.dialog-head h2{font-size:23px;font-weight:650}
.dialog-head .icon-button{background:var(--surface-2);border-radius:50%}
.dialog-grabber{display:block;height:3px;width:32px;background:var(--line);margin:-12px auto 15px;border-radius:4px}
.form-stack{display:grid;gap:16px}
.form-field{display:grid;gap:7px;font-size:13px}
.form-field input,.form-field select{width:100%;min-height:50px;padding:11px 13px;background:var(--bg);border:1px solid var(--line);border-radius:11px}
.form-field small{font-size:11px;color:var(--muted-2);line-height:1.8}
.form-field em{font-size:10px}
.source-browse-link{color:var(--muted);font-size:12px;min-height:44px;display:flex;align-items:center;justify-content:flex-start}
.dialog-actions{display:flex;gap:10px;margin-top:22px}
.dialog-actions>*{flex:1}
.form-error{font-size:12px;color:#f2bac2;padding:12px;background:#35242a;border-radius:7px}
.form-status:not(:empty){font-size:12px;padding:10px 0}
.segmented-field{border:0;padding:0;margin:0 0 24px;display:flex;gap:7px}
.segmented-field legend{padding:0;font-size:12px;color:var(--muted);margin-bottom:10px}
.segmented-field label{flex:1;min-width:0;position:relative}
.segmented-field input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.segmented-field label span{display:flex;justify-content:center;align-items:center;min-height:48px;border:1px solid var(--line);background:var(--surface-2);border-radius:11px;font-size:12px}
.segmented-field input:checked+span{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.segmented-field input:focus-visible+span{outline:2px solid var(--focus);outline-offset:3px}
.settings-note,.bulk-chapter-description,.bulk-chapter-preview{font-size:12px;line-height:1.9;color:var(--muted);margin:14px 0}
.bulk-range-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bulk-dialog-actions{display:grid;gap:10px;margin-top:20px}
.import-preview{display:flex;gap:14px;padding:15px 0;border-block:1px solid var(--line);font-size:12px}
.import-preview img{width:72px;height:108px;object-fit:cover;border-radius:6px}
.import-preview>div{min-width:0}
.import-preview strong{display:block;font-size:14px;overflow-wrap:anywhere}
.import-preview p{margin-top:5px}
.search-dialog{height:min(80dvh,var(--dialog-vh,80dvh))}
.search-results{display:grid;gap:14px;margin-top:18px}
.search-result{display:flex;align-items:center;gap:12px;padding:8px 0;min-height:72px;border-bottom:1px solid var(--line)}
.search-result>.library-cover-wrap{width:54px;flex:none}
.search-result-label{min-width:0;flex:1}
.search-result strong{display:block;font-size:13px;line-height:1.7;overflow-wrap:anywhere}
.search-result small{display:block;color:var(--muted-2);font-size:11px}
.search-hint{font-size:12px;margin-top:16px}
.search-result>svg{width:18px}

body.reader-mode{background:var(--reader-bg);color:var(--reader-text)}
.reader-mode .site-header,.reader-mode .mobile-nav,.reader-mode .network-status{display:none}
.reader-shell{max-width:var(--phone);margin:auto;background:var(--reader-bg);color:var(--reader-text);padding-bottom:calc(125px + env(safe-area-inset-bottom))}
.reader-progress-bar{position:fixed;inset:0 0 auto;z-index:50;height:2px;max-width:var(--phone);margin:auto;background:transparent}
.reader-progress-bar span{display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(var(--reader-progress-scale,0));transform-origin:right center}
.reader-topbar{position:fixed;inset:auto 0 0;margin:auto;max-width:var(--phone);padding:8px max(12px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));z-index:40;background:var(--reader-bg);color:var(--reader-text);border-top:1px solid var(--reader-line);display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:2px 8px;transition:transform .18s,opacity .18s}
.reader-topbar.is-hidden{transform:translateY(100%);opacity:0;pointer-events:none}
.reader-title{display:flex;flex-direction:column;justify-content:center;min-width:0;text-align:center}
.reader-title strong{font-size:13px;font-weight:650}
.reader-title small{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit;opacity:.65}
.reader-chapter-tools{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--reader-line);padding-top:2px}
.reader-chapter-tools>a,.reader-chapter-placeholder{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;min-width:66px;font-size:12px}
.reader-chapter-tools>a>svg{width:17px}
.reader-position-tools{display:flex;align-items:center;gap:5px}
.reader-page-counter{font-size:11px}
.reader-mark-button{color:inherit}
.reader-intro{padding:calc(22px + env(safe-area-inset-top)) 16px 20px}
.reader-intro h1{font-size:22px;margin:6px 0}
.reader-intro p{font-size:11px;color:inherit;opacity:.65}
.reader-bookmarks-panel{margin-top:12px}
.reader-bookmarks-panel summary{font-size:11px;color:inherit}
.reader-bookmark-count{margin-inline-end:auto}
.reader-bookmark-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.reader-bookmark-row button{color:inherit;font-size:11px;min-width:44px;min-height:44px}
.reader-bookmarks-empty{font-size:11px}
.reader-canvas{width:100%;margin:auto;overflow-anchor:none;touch-action:auto;padding-inline:env(safe-area-inset-left,0px) env(safe-area-inset-right,0px)}
.reader-page-wrap{position:relative;width:100%;min-height:0;margin:0;background:var(--reader-bg)}
.reader-page-wrap.is-unrevealed{display:none}
.reader-page-wrap.has-image-dimensions{overflow:hidden}
.reader-page{display:block;width:100%;height:auto;object-fit:contain}
.reader-page-wrap.is-pending .reader-page,.reader-page-wrap.is-evicted .reader-page,.reader-page-wrap.is-error .reader-page,.reader-page-wrap.is-retrying .reader-page{position:absolute;inset:0;visibility:hidden}
.reader-page-wrap.is-error:not(.has-image-dimensions),.reader-page-wrap.is-retrying:not(.has-image-dimensions){min-height:88px}
.reader-page-error{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:88px;padding:16px;color:var(--reader-text);font-size:12px}
.has-image-dimensions .reader-page-error{position:absolute;inset:0}
.reader-image-retry{color:inherit;text-decoration:underline}
.reader-range-loader{min-height:64px;display:flex;justify-content:center;align-items:center;gap:8px;font-size:12px;padding:12px 16px;background:var(--reader-bg);color:var(--reader-text)}
.reader-complete{padding:35px 16px;color:var(--reader-text)}
.reader-complete h2{font-size:24px;margin:8px 0}
.reader-complete p{font-size:12px;color:inherit;opacity:.7}
.reader-complete-actions{display:grid;gap:12px;margin-top:22px}
.reader-paper{color-scheme:light;--reader-bg:#f1eee7;--reader-text:#27282b;--reader-line:#d0cdc6}
.reader-paper dialog{color-scheme:dark}
.reader-oled{--reader-bg:#000;--reader-text:#f1f0ee;--reader-line:#252525}
.reader-width-narrow .reader-canvas{max-width:88%}
.reader-width-wide .reader-canvas{max-width:100%}

@media(min-width:520px){body:not(.reader-mode){background:var(--bg)}
.site-header,#app{max-width:var(--phone);margin-inline:auto;background:var(--bg)}
.site-header{border-inline:1px solid var(--line)}
#app{border-inline:1px solid var(--line)}
.mobile-nav{border-inline:1px solid var(--line)}
.reader-shell{border-inline:1px solid var(--reader-line)}
}

@media(max-width:340px){h1{font-size:26px}
.home-resume{grid-template-columns:84px minmax(0,1fr);gap:12px;padding:14px}
.resume-copy h2{font-size:17px}
.brand-kicker{display:none}
.library-grid{gap:20px 12px}
.detail-content h1{font-size:24px}
.library-viewbar{gap:2px}
.library-sort-control select{max-width:110px}
.chapter-filters .filter-chip{padding-inline:8px}
.reader-chapter-tools>a{min-width:54px}
.reader-page-counter{font-size:10px}
}


@keyframes rotate{to{transform:rotate(360deg)}
}


.home-greeting{display:block;margin:6px 0 22px}
.home-greeting h1{font-size:28px;line-height:1.55;margin-top:5px;font-weight:650}
.library-sort-control select{appearance:none;-webkit-appearance:none;background:transparent;color:var(--muted);border:0;text-align:center}
.library-sort-control select:focus-visible{outline:2px solid var(--focus)}
.library-sort-control:before{content:"⌄";font-size:12px;color:var(--muted-2);margin-inline-end:3px}
.detail-media{margin-top:2px}
.detail-more[open]{padding-bottom:12px}


.library-cover-fallback{position:absolute;inset:0;display:grid;place-content:center;padding:14px;background:var(--surface-2);text-align:center}
.cover-copy{display:grid;gap:10px}
.cover-copy small{font-size:9px;color:var(--muted-2)}
.cover-copy strong{font-size:13px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cover-lines,.cover-arc,.cover-figure,.cover-grain{display:none}


/* Reading, browsing and motion share the same token contract. */
:is(a,button,input,select,summary){scroll-margin-block:90px 120px}

:is(button,a,summary){touch-action:manipulation}

.resume-copy .eyebrow{color:var(--muted-2);font-size:10px}

.home-resume img{object-position:center 25%}

.home-resume .progress-track{background:var(--surface-2)}

.resume-copy .primary-button>svg:last-child{margin-inline-start:auto}

.home-library-meta{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted-2);margin-top:7px}

.home-library-meta::before{content:'';width:5px;height:5px;flex:none;background:var(--accent);border-radius:50%}

.home-now>.section-heading{margin-bottom:12px}

.home-now>.section-heading h2{font-size:14px;font-weight:550;color:var(--muted)}

.home-primary .reading-state-badge{display:none}

.home-primary .source-badge{display:none}

.home-primary.has-long-title .resume-copy{padding:0}

.home-primary.has-long-title .resume-copy h2{font-size:14px;line-height:1.65}

.home-primary.has-long-title{grid-template-columns:72px minmax(0,1fr);gap:12px;padding:14px;min-height:0}

.library-card[data-reading-state=reading] .card-context>span:first-child{color:var(--accent)}

.chapter-row.is-current{background:var(--accent-soft);border-color:var(--line);padding-inline:12px}

.chapter-state svg{width:18px;height:18px}

.search-result>span{min-width:0;flex:1}

.search-result{border-radius:10px}

.settings-page .settings-section:first-child{padding-top:12px}

.settings-page .settings-actions{display:grid;grid-template-columns:1fr 1fr}

.settings-page .settings-actions button{padding-inline:10px;font-size:12px}

.site-header.is-scrolled{box-shadow:0 1px 0 var(--line)}

.primary-button,.secondary-button,.icon-button,.profile-button,.text-button,.library-card-main,.rail-card a,.continue-card,.history-card-main,.update-row{transition:transform 150ms var(--ease-out),background-color 150ms ease,color 150ms ease}

.mobile-nav a:active,.filter-chip:active,.text-button:active{transform:scale(.97)}

.library-card-main:active,.rail-card a:active{transform:scale(.985)}

.rail-card a{display:block}

dialog[open]{animation:sheet-enter 240ms var(--ease-sheet) both}

dialog[open]::backdrop{animation:backdrop-enter 180ms ease-out both}

dialog.is-closing{pointer-events:none}

.input-keyboard dialog[open],.input-keyboard dialog[open]::backdrop,dialog[open].is-entry-settled,dialog[open].is-entry-settled::backdrop{animation:none}

.input-keyboard :is(a,button){transition:none}

.reader-topbar{transition:transform 180ms var(--ease-out),opacity 180ms var(--ease-out)}

@keyframes sheet-enter{from{opacity:.5;transform:translateY(32px)}
to{opacity:1;transform:translateY(0)}
}

@keyframes backdrop-enter{from{opacity:0}
to{opacity:1}
}

@media(hover:hover) and (pointer:fine){
 .primary-button:hover{background:var(--accent);filter:brightness(1.08)}

 .secondary-button:hover,.icon-button:hover,.text-button:hover{background:var(--surface-2);color:var(--text)}

 .profile-button:hover{background:var(--accent);filter:brightness(1.08)}

 .mobile-nav a:hover{color:var(--accent);background:var(--accent-soft)}

 .library-card-main:hover,.rail-card a:hover{transform:translateY(-3px)}

 .chapter-row:not(.is-locked):hover,.search-result:hover{background:var(--surface)}

}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* A complete day/night system. Reading surfaces keep independent contrast. */
:root[data-appearance=night]{color-scheme:dark;--bg:#101727;--surface:#182238;--surface-2:#25314a;--text:#f0f4ff;--muted:#bac7df;--muted-2:#a5b2cc;--accent:#abc0ff;--accent-ink:#14234d;--accent-soft:#abc0ff12;--line:#ffffff15;--focus:#abc0ff;--chrome:#131d30}
:root[data-appearance=oled]{color-scheme:dark;--bg:#080b11;--surface:#11161f;--surface-2:#202733;--text:#f0f3f9;--muted:#bac4d4;--muted-2:#a4afc0;--accent:#c7d4ff;--accent-ink:#172348;--accent-soft:#c7d4ff10;--line:#ffffff18;--focus:#c7d4ff;--chrome:#0b0f17}
.home-greeting>.eyebrow{font-size:12px;color:var(--muted)}
.home-quick-actions{display:flex;align-items:center;gap:10px;margin-top:18px}
.home-quick-actions>*{flex:1;min-height:46px;font-size:12px}
.home-primary .resume-copy .primary-button>svg:first-child{display:none}
.home-now>.section-heading{margin-bottom:12px}
.home-now>.section-heading h2{font-size:14px;color:var(--muted)}
.home-recent .section-heading .eyebrow{display:none}
.home-recent .section-heading h2{font-size:21px}
.library-head .library-heading-actions{display:flex;gap:5px}
.library-head .add-work-button{background:var(--accent);color:var(--accent-ink);border-radius:12px}
.library-head .eyebrow{font-size:12px}
.layout-toggle .icon-button[aria-pressed=true]{background:var(--surface-2);color:var(--accent)}
.detail-book{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px;align-items:center;margin-bottom:24px}
.detail-book .detail-media{width:100%;margin:0}
.detail-heading{min-width:0}
.detail-heading h1{font-size:22px;line-height:1.55;margin:8px 0 12px;font-weight:650;overflow-wrap:anywhere}
.detail-heading .eyebrow{font-size:10px}
.detail-heading .series-tags{justify-content:flex-start;margin:0;gap:5px}
.detail-content>.detail-actions .primary-button{border-radius:12px}
.detail-content .detail-summary{font-size:13px;line-height:2;margin-top:22px}
.chapter-section .chapter-heading h2{font-size:24px}
.chapter-copy strong{font-size:14px}
.chapter-copy small{font-size:11px}
.chapter-state{background:var(--surface-2);padding:5px 8px;border-radius:7px;gap:4px}
.chapter-row.is-current .chapter-state{background:var(--accent);color:var(--accent-ink)}
.source-loading-card{display:grid;align-content:center;justify-items:center;gap:12px}
.source-loading-card strong{font-size:15px;font-weight:600}
.source-loading-card small{color:var(--muted-2)}
.account-summary{display:flex;gap:14px;align-items:center;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:16px;margin-bottom:8px}
.account-summary>div{min-width:0;flex:1}
.account-summary strong{display:block;font-size:17px;font-weight:650;overflow-wrap:anywhere}
.account-summary small{color:var(--muted-2);font-size:11px}
.account-summary .account-avatar{width:44px;height:44px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.account-summary .text-button{flex:none}
.empty-state .primary-button{min-width:170px}
.dialog-head .icon-button{background:var(--surface-2)}
.network-status{background:var(--surface-2);color:var(--text)}
.form-error{background:#fbe7eb;color:#9d2438}
:root[data-appearance=night] .form-error,:root[data-appearance=oled] .form-error{background:#3b202c;color:#f5bdcc}
.segmented-field input:checked+span{background:var(--accent);color:var(--accent-ink)}
.home-library-meta::before{display:none}
.library-card[data-reading-state=reading] .card-context>span:first-child{color:var(--accent)}
.reader-progress-bar span{background:#a8bfff}
.reader-shell .primary-button{background:#d9e3ff;color:#172344}
.reader-shell .text-button,.reader-shell .eyebrow{color:var(--reader-text)}
@media(max-width:340px){.detail-book{grid-template-columns:94px minmax(0,1fr);gap:14px}.detail-heading h1{font-size:20px}.home-greeting h1{font-size:25px}.home-primary.has-long-title{grid-template-columns:64px minmax(0,1fr);gap:10px;padding:12px}.home-primary.has-long-title .resume-copy h2{font-size:13px}}
:root[data-motion=reduced] *, :root[data-motion=reduced] *::before, :root[data-motion=reduced] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}