/* reader-appearance-v2: Pencil reading system. */
:root[data-reader-theme]{color-scheme:light;--font-ui:'Microsoft YaHei UI','Segoe UI',sans-serif;--font-reading:'Microsoft YaHei','PingFang SC',sans-serif;--font-serif:'Reader Serif','SimSun',serif;--control-radius:6px;--panel-radius:8px;--control-height:44px;--global-header-height:72px;--color-ink:#253039;--color-secondary:#59646b;--color-muted:#59646b;--color-line:#ddd9d4;--color-line-strong:#9b9490;--shadow:0 8px 28px #25303912;--player-height:0px;--mobile-nav-height:0px;min-width:320px}
:root[data-reader-theme=warm]{--color-accent:#90384c;--color-accent-strong:#782b3e;--color-selected:#f1e3e4;--color-canvas:#f6f1ed;--color-surface:#fffdfa;--color-page:#fffdfa;--color-soft:#f6f1ed;--reader-selection:#ecd4ce;--reader-nav-paper:#f6f1ed;--reader-switch-bg:#eee7e2;--reader-map-dot:#d8c4c0;--reader-breadcrumb:#fffdfa;--reader-scroll-thumb:#cbb2ac}
:root[data-reader-theme=classic]{--color-accent:#2459b8;--color-accent-strong:#1d4895;--color-selected:#eaf1ff;--color-canvas:#f3f6fa;--color-surface:#fff;--color-page:#fff;--color-soft:#f3f6fa;--reader-selection:#d7e5ff;--reader-nav-paper:#f3f6fa;--reader-switch-bg:#e9edf3;--reader-map-dot:#b8c4d6;--reader-breadcrumb:#fff;--reader-scroll-thumb:#a4b0c1}
:root[data-reader-theme]{--nav-ink:var(--color-ink);--nav-muted:var(--color-secondary);--nav-surface:var(--reader-nav-paper);--nav-card:var(--color-surface);--nav-line:var(--color-line);--nav-selected:var(--color-selected);--nav-accent:var(--color-accent)}
body[data-reader-ui]{background:var(--color-page);color:var(--color-ink);padding-bottom:calc(var(--mobile-nav-height) + var(--player-height))}
body[data-reader-ui] ::selection{background:var(--reader-selection);color:var(--color-ink)}
body[data-reader-ui] :is(button,input,select,summary,.button){border-radius:6px}
body[data-reader-ui] :is(button,select,summary,.button){min-height:44px}
body[data-reader-ui] input[type=range],body[data-reader-ui] .reading-width-custom input[type=number]{min-height:44px}
body[data-reader-ui] :is(a,button,input,textarea,select,summary):focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
body[data-reader-ui] .topbar{position:sticky;top:0;height:72px;min-height:72px;padding:0 24px;gap:32px;background:var(--color-surface);box-shadow:none;border-bottom:1px solid var(--color-line);z-index:35}
body[data-reader-ui] .brand{min-width:256px;gap:12px;color:var(--color-ink)}
body[data-reader-ui] .brand-mark{width:36px;height:36px;border-radius:8px;background:var(--color-accent)}
body[data-reader-ui] .brand-title strong{font:600 20px/1.4 var(--font-ui);letter-spacing:0;white-space:nowrap}
body[data-reader-ui] .library-nav{display:flex;gap:8px;flex:1}
body[data-reader-ui] .library-nav a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;color:var(--color-secondary);border-radius:6px;font-size:14px;white-space:nowrap;text-decoration:none}
body[data-reader-ui] .library-nav a[aria-current=page]{background:var(--color-selected);color:var(--color-accent)}
body[data-reader-ui] .library-nav a[aria-current=page]::after{display:none}
body[data-reader-ui] .topbar-actions{margin:0;gap:16px}
body[data-reader-ui] .account-bar{position:static;display:flex;align-items:center;flex-wrap:nowrap;gap:20px;padding:0;border:0;background:transparent;color:var(--color-secondary);font:13px/1.5 var(--font-ui)}
body[data-reader-ui] .account-bar [data-sync-status]{font-size:12px;min-width:0;max-width:180px;flex:none}
body[data-reader-ui] .account-bar [data-sync-status]:not(:empty){background:var(--color-soft);padding:4px 8px;border-radius:4px}
.reader-account-tools,.reader-theme-picker{position:relative;flex:none}
.reader-account-tools{order:3}.reader-theme-picker{order:2}
.reader-account-tools>summary,.reader-theme-picker>summary{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 14px;cursor:pointer;list-style:none;border:1px solid var(--color-line);border-radius:6px;background:var(--color-surface);color:var(--color-ink);font:14px/1.5 var(--font-ui)}
.reader-account-tools>summary::after,.reader-theme-picker>summary::after{content:'⌄'}
.reader-account-tools [data-account-name]{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reader-account-tools>summary .ui-icon{width:18px;height:18px}
.reader-account-contents,.reader-theme-options,.library-menu>nav{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:240px;padding:8px;border:1px solid var(--color-line);border-radius:8px;background:var(--color-surface);box-shadow:var(--shadow)}
.reader-account-contents{display:grid;gap:4px}
.reader-account-identity{display:none;margin:4px 12px;color:var(--color-ink);font-weight:600}
body[data-reader-ui] .reader-account-contents :is(a,button),body[data-reader-ui] .reader-theme-options>button,.library-menu>nav a{display:flex;align-items:center;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:4px;background:transparent;color:var(--color-ink);font:14px/1.6 var(--font-ui);text-align:left;text-decoration:none}
body[data-reader-ui] .reader-account-contents :is(a,button):hover,.library-menu>nav a:hover{background:var(--color-soft)}
body[data-reader-ui] .reader-theme-options>button[aria-pressed=true]{background:var(--color-selected);color:var(--color-accent)}
.reader-theme-options>button[aria-pressed=true]::after{content:'✓';margin-left:auto}
.reader-theme-options p{font-size:12px;color:var(--color-secondary);margin:8px 12px}
.reader-library-tools{display:flex;align-items:center;gap:12px;padding:12px 32px;background:var(--color-surface);border-bottom:1px solid var(--color-line)}
.reader-library-tools .dataset-picker{display:block;min-width:0}
.reader-library-tools select{max-width:240px;min-height:44px;color:var(--color-ink);background:var(--color-surface);border:1px solid var(--color-line);font-size:14px}
.library-menu{position:relative}
.library-menu>summary{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 12px;color:var(--color-secondary);list-style:none}
.library-menu>nav{right:auto;left:0;max-height:65dvh;overflow:auto}
body[data-reader-ui] .column-header .reader-library-tools{padding:0 0 16px;flex-wrap:wrap;gap:4px;border:0;background:transparent}
.column-header .reader-library-tools .dataset-picker{width:100%}
.column-header .reader-library-tools select{width:100%;max-width:100%}
body[data-reader-ui] .column-layout{padding:0;gap:0;grid-template-columns:clamp(272px,var(--column-nav-width,272px),calc(100% - 440px)) minmax(0,1fr)}
body[data-reader-ui] :is(.column-map,.column-reading-panel){height:calc(100dvh - var(--reader-chrome-height,72px) - var(--player-height) - var(--mobile-nav-height));min-height:360px;border:0;border-radius:0;box-shadow:none}
body[data-reader-ui] .column-map{background:var(--reader-nav-paper);border-right:1px solid var(--color-line)}
body[data-reader-ui] .column-header{padding:24px 20px 16px}
body[data-reader-ui] .column-heading{gap:6px}
body[data-reader-ui] .column-heading h1{font:600 18px/1.5 var(--font-ui)}
body[data-reader-ui] .column-library-label{display:none}
body[data-reader-ui] .column-map-toolbar{padding:0 16px 12px}
body[data-reader-ui] .column-view-switch{border-radius:6px;background:transparent}
body[data-reader-ui] .column-view-switch button{border-radius:6px;min-width:72px}
body[data-reader-ui] .column-view-switch button[aria-pressed=true]{background:var(--color-accent);color:white}
body[data-reader-ui] .column-search{margin-top:16px}
body[data-reader-ui] .column-search-field{border-color:var(--color-line);border-radius:6px}
body[data-reader-ui] .column-search-field button{min-height:40px}
body[data-reader-ui] .column-viewport{background-image:radial-gradient(var(--reader-map-dot) 1px,transparent 1px)}
body[data-reader-ui] .is-outline .column-viewport{background-image:none}
body[data-reader-ui] .is-outline .column-node-title{font:14px/1.65 var(--font-ui);padding-block:11px;border-radius:4px}
body[data-reader-ui] .is-outline .column-node.is-selected{background:var(--color-selected)}
body[data-reader-ui] .column-node{border-radius:6px;box-shadow:none}
body[data-reader-ui] .column-mobile-tools{display:none}
body[data-reader-ui] .column-reading-toolbar{min-height:64px;gap:12px;padding:10px 48px;border:0;border-radius:0;background:var(--color-surface)}
body[data-reader-ui] [data-reader-directory]{padding:8px 12px;border:1px solid var(--color-line);background:var(--color-surface);color:var(--color-secondary);font:13px/1.5 var(--font-ui);white-space:nowrap}
body[data-reader-ui] .column-reading-progress{margin-left:auto;white-space:nowrap;color:var(--color-secondary);font-size:12px}
body[data-reader-ui] .column-reading-toolbar>div{gap:8px}
body[data-reader-ui] .column-reading-toolbar button,.column-settings>summary{border:1px solid var(--color-line);color:var(--color-ink)}
body[data-reader-ui] .column-breadcrumb{min-height:44px;padding:0 48px;border:0;background:var(--color-surface);color:var(--color-secondary)}
body[data-reader-ui] .column-current-path{font-size:12px}
body[data-reader-ui] .column-progress-track{height:2px}
body[data-reader-ui] .column-reader{padding:12px 48px 48px!important;scrollbar-color:var(--reader-scroll-thumb) var(--color-surface)}
body[data-reader-ui] .column-reader>*{margin-inline:auto}
body[data-reader-ui] .column-article-head{margin-bottom:16px;padding-bottom:0}
body[data-reader-ui] .column-article-head h2{font:600 28px/1.5 var(--font-ui);letter-spacing:0;margin:4px 0 8px}
body[data-reader-ui] .column-article-head>p{font-size:13px;margin:6px 0;color:var(--color-secondary)}
body[data-reader-ui] .column-status{font-size:11px}
body[data-reader-ui] .column-source{margin-bottom:12px}
body[data-reader-ui] .column-original{margin-top:24px}
body[data-reader-ui] .column-original>h3{font:600 16px/1.6 var(--font-ui);margin-block:16px}
body[data-reader-ui] .column-original .article-body{line-height:1.95;color:var(--color-ink)}
body[data-reader-ui] .article-body p{margin-block:.8em}
body[data-reader-ui] .column-points{padding:12px 16px;border-radius:4px;background:var(--color-canvas);border:0}
body[data-reader-ui] .annotation-tools{margin-top:14px}
body[data-reader-ui] .annotation-buttons{gap:8px}
body[data-reader-ui] .annotation-buttons button{padding:8px 12px;border:1px solid var(--color-line);background:var(--color-surface);color:var(--color-ink)}
body[data-reader-ui] .annotation-message:empty{display:none}
body[data-reader-ui] .annotation-selection{bottom:calc(var(--player-height) + var(--mobile-nav-height) + 16px);z-index:50;max-width:calc(100vw - 32px);flex-wrap:wrap}
body[data-reader-ui] .article-audio{margin:12px auto;padding:0;background:transparent;border:0}
body[data-reader-ui] .article-audio-heading>span{font-size:12px;color:var(--color-secondary)}
body[data-reader-ui] .article-audio-heading>button{min-height:44px;padding:10px 16px;background:var(--color-accent);color:#fff;border:0;border-radius:6px}
body[data-reader-ui] .reader-directory-collapsed .column-layout{grid-template-columns:minmax(0,1fr)}
body[data-reader-ui] .reader-directory-collapsed .column-map{display:none}
body[data-reader-ui] .column-footnote{padding:12px 24px}
body[data-reader-ui] .workspace:not(.pinned-library){grid-template-columns:244px minmax(0,1fr)}
body[data-reader-ui] .main-column{min-width:0}
body[data-reader-ui] .app-shell{min-height:calc(100dvh - var(--reader-chrome-height,72px) - var(--mobile-nav-height) - var(--player-height))}
body[data-reader-ui] .workspace.pinned-library:not(.column-workspace)>.main-column{width:100%;max-width:none;padding:0}
body[data-reader-ui] .personal-favorites{width:100%;max-width:none;padding:0}
body[data-reader-ui] .workspace.pinned-library:not(.column-workspace){padding:36px 32px}
body[data-reader-ui] .context-rail{display:none}
.reader-context{margin-top:32px;border-top:1px solid var(--color-line);padding-top:12px}
.reader-context>summary{cursor:pointer;padding:12px 0;color:var(--color-accent)}
body[data-reader-ui] .reader-context>.context-rail{display:grid;position:static;max-height:none;overflow:visible;padding:16px 0 0;gap:16px}
body[data-reader-ui] .reader-context .panel{margin:0}
body[data-reader-ui] :is(.page-intro,.favorites-heading,.collections-heading) h1{font:600 28px/1.5 var(--font-ui)}
body[data-reader-ui] .hero{padding:24px 28px;box-shadow:none;background:var(--color-canvas);border-radius:8px}
body[data-reader-ui] .hero h1{font:600 30px/1.5 var(--font-ui);margin-block:4px 10px}
body[data-reader-ui] .hero::after{display:none}
body[data-reader-ui] :is(.panel,.stat,.folder-card){border-radius:8px;box-shadow:none}
body[data-reader-ui].is-column-focused>.topbar,body[data-reader-ui].is-map-focused>.topbar{display:none}
body[data-reader-ui] .pinned-column:is(.is-reading-focused,.is-map-focused) .column-layout{padding:0;gap:0;grid-template-columns:minmax(0,1fr)}
body[data-reader-ui] .pinned-column.is-reading-focused .column-reading-panel{height:calc(100dvh - var(--player-height));min-height:0;border:0}
body[data-reader-ui] .pinned-column.is-reading-focused [data-reader-directory]{display:none}
body[data-reader-ui].is-map-focused .column-workspace{inset:0;z-index:40}
body[data-reader-ui] .pinned-column.is-map-focused .column-map{display:flex;height:100dvh;min-height:0;border:0}
body[data-reader-ui][data-screen=auth]>.topbar{display:none}
body[data-reader-ui][data-screen=auth]{background:var(--color-canvas)}
body[data-reader-ui] .auth-header .reader-theme-picker{margin-left:auto}
body[data-reader-ui] .audio-progress-overview{background:var(--color-canvas);border-radius:8px}
body[data-reader-ui] .audio-progress-dialog{border-radius:12px;border-color:var(--color-line)}
body[data-reader-ui] .audio-progress-reason{overflow-wrap:anywhere}
body[data-reader-ui] .audio-progress-dialog progress{accent-color:var(--color-accent)}
@media(max-width:1200px){
body[data-reader-ui] .topbar{gap:16px;padding-inline:20px}body[data-reader-ui] .brand{min-width:210px}body[data-reader-ui] .account-bar{gap:10px}body[data-reader-ui] .account-bar [data-sync-status]{max-width:105px}body[data-reader-ui] .reader-account-tools summary{padding-inline:10px}}
@media(max-width:1000px){
body[data-reader-ui] .account-bar [data-sync-status]{display:none}body[data-reader-ui] .brand{min-width:0}body[data-reader-ui] .brand-title strong{font-size:18px}body[data-reader-ui] .library-nav a{padding-inline:10px}body[data-reader-ui] .reader-theme-picker>summary>span:first-child{display:none}}
@media(max-width:900px){
:root[data-reader-theme]{--mobile-nav-height:calc(68px + env(safe-area-inset-bottom))}
body[data-reader-ui] .topbar{height:64px;min-height:64px;padding:0 20px;gap:12px}
body[data-reader-ui] .brand-title strong{font-size:16px}
body[data-reader-ui] .library-nav{position:fixed;bottom:0;left:0;right:0;z-index:45;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:8px 12px calc(8px + env(safe-area-inset-bottom));margin:0;background:var(--color-surface);border-top:1px solid var(--color-line);gap:4px}
body[data-reader-ui] .library-nav a{display:flex;flex-direction:column;gap:2px;padding:4px;min-height:48px;font-size:11px}
body[data-reader-ui] .library-nav .ui-icon{display:block;width:20px;height:20px}
body[data-reader-ui] .reader-theme-picker>summary{padding-inline:10px}
body[data-reader-ui] .reader-account-tools>summary{max-width:44px;width:44px;padding:0;font-size:0}
.reader-account-tools>summary .ui-icon{width:22px;height:22px}.reader-account-tools>summary::after{display:none}
body[data-reader-ui] .topbar-actions{margin-left:auto}body[data-reader-ui] .account-bar{gap:8px}
.reader-account-contents{position:fixed;top:64px;right:12px;max-height:calc(100dvh - 150px);overflow:auto}
.reader-account-contents::before{content:'账号与同步';padding:8px 12px;color:var(--color-secondary);font-size:12px}
.reader-account-identity{display:block}
body[data-reader-ui] .reader-account-contents [data-sync-status]{display:block;max-width:none;margin:4px 8px}
body[data-reader-ui] .column-layout{grid-template-columns:minmax(0,1fr)}
body[data-reader-ui] .column-map{height:min(65dvh,640px);min-height:320px;border-right:0;border-bottom:1px solid var(--color-line)}
body[data-reader-ui] .column-reading-panel{height:calc(100dvh - 64px - var(--mobile-nav-height) - var(--player-height));min-height:320px}
body[data-reader-ui] .column-reading-toolbar{padding:12px 20px;gap:8px;min-height:68px}
body[data-reader-ui] .column-reading-progress{display:none}
body[data-reader-ui] .column-reading-toolbar>div{margin-left:auto}
body[data-reader-ui] .column-reading-toolbar [data-column-action=focus] span{display:none}
body[data-reader-ui] .column-breadcrumb{padding:0 20px}
body[data-reader-ui] .column-breadcrumb .column-current-path{display:none}
body[data-reader-ui] .column-reader{padding:12px 20px 40px!important}
body[data-reader-ui] .column-article-head h2{font-size:24px}
body[data-reader-ui] .workspace:not(.pinned-library){display:block}
body[data-reader-ui] .workspace.pinned-library:not(.column-workspace){padding:24px 20px}
.reader-library-tools{padding:12px 20px}.reader-library-tools select{max-width:180px}
body[data-reader-ui].is-column-focused>.topbar{display:block;visibility:hidden;height:0;min-height:0;padding:0;border:0}
body[data-reader-ui].is-column-focused .library-nav{visibility:visible}
body[data-reader-ui][data-screen=auth]{--mobile-nav-height:0px}}
@media(max-width:360px){
body[data-reader-ui] .topbar{padding-inline:16px;gap:6px}
body[data-reader-ui] .brand{gap:8px}body[data-reader-ui] .brand-mark{width:32px;height:32px}
body[data-reader-ui] .brand-title strong{font-size:15px}body[data-reader-ui] .account-bar{gap:4px}
body[data-reader-ui] .reader-theme-picker>summary{min-width:36px;padding-inline:6px}
body[data-reader-ui] .column-reader{padding-inline:16px!important}
body[data-reader-ui] .column-reading-toolbar,body[data-reader-ui] .column-breadcrumb{padding-inline:16px}
.reader-library-tools{gap:4px;padding-inline:16px}.reader-library-tools select{max-width:158px}}
@media(prefers-reduced-motion:reduce){body[data-reader-ui] *{scroll-behavior:auto!important;transition:none!important}}
@media print{body[data-reader-ui] :is(.topbar,.reader-library-tools,.column-map,.list-player){display:none}body[data-reader-ui] .column-layout{display:block;padding:0}body[data-reader-ui] .column-reading-panel{height:auto;min-height:0;border:0}body[data-reader-ui] .column-reader{overflow:visible}}