:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; background:#e8eeeb; color:#263a36; }
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; }
button, input { font:inherit; }
button { cursor:pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline:3px solid #60b3a8; outline-offset:3px; }
[hidden] { display:none !important; }
.app-shell { max-width:520px; min-height:100dvh; margin:auto; background:#f4f7f6; box-shadow:0 0 48px #153b3620; padding-bottom:calc(98px + env(safe-area-inset-bottom)); }
.app-header { position:sticky; top:0; z-index:10; height:76px; padding:16px 22px 12px; display:flex; align-items:center; justify-content:space-between; background:#f4f7f6e8; backdrop-filter:blur(16px); }
.brand-wrap { display:flex; align-items:center; gap:10px; }
.brand-mark { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#1a7a6d,#0e5c53); box-shadow:0 6px 16px #146b6226; }
.brand-mark svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.brand { font-size:18px; font-weight:800; letter-spacing:.06em; line-height:1.1; }
.brand-sub { font-size:12px; color:#8a9b96; margin-top:4px; letter-spacing:.05em; }
.icon-button { width:38px; height:38px; border:0; border-radius:50%; background:#e3efeb; color:#146b62; font-size:27px; line-height:1; display:grid; place-items:center; }
.main-view { padding:4px 20px 22px; min-height:calc(100dvh - 150px); }
.eyebrow { color:#2f8176; font-size: 12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.page-title { font-size:27px; line-height:1.25; letter-spacing:-.035em; margin:7px 0 6px; }
.page-subtitle { font-size:13px; color:#55706a; line-height:1.6; margin:0; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:12px; margin:28px 1px 14px; }
.section-title { margin:0; font-size:18px; letter-spacing:-.02em; }
.section-meta { font-size:12px; color:#667670; }
.feature-card { display:flex; gap:17px; align-items:center; width:100%; text-align:left; border:0; background:linear-gradient(125deg,#d9eee7,#edf6ec 65%,#f6f4e6); border-radius:22px; padding:17px; margin-top:22px; box-shadow:0 12px 30px #24594d0c; color:#203e38; }
.feature-card .cover { width:min(calc(33.333vw - 22px),151.3px); height:auto; flex:none; box-shadow:6px 7px 13px #1d4f4330; }
.feature-copy { min-width:0; }
.feature-kicker { color:#2e8a78; font-size: 12px; font-weight:800; }
.feature-title { font-size:17px; font-weight:800; margin:8px 0 7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feature-detail { font-size:12px; color:#547066; line-height:1.55; }
.feature-arrow { font-size:12px; font-weight:700; color:#147165; margin-top:14px; }
.book-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 13px; }
.book-cell { min-width:0; }
.book-card { display:block; width:100%; min-width:0; border:0; background:none; padding:0; text-align:left; color:inherit; }
.cover { position:relative; overflow:hidden; aspect-ratio:3/4; width:100%; height:auto; min-width:0; padding:13px 12px; border-radius:7px 12px 12px 7px; display:flex; flex-direction:column; justify-content:center; background:var(--cover,#416d69); color:#fffaf2; box-shadow:5px 7px 12px #18352f18, inset 4px 0 0 #ffffff28; }
.cover:before { content:""; position:absolute; width:110px; height:110px; border:1px solid #ffffff36; border-radius:50%; right:-48px; top:15px; box-shadow:0 0 0 22px #ffffff08,0 0 0 44px #ffffff08; }
.cover-small { font-size:12px; letter-spacing:.16em; opacity:.7; position:relative; }
.cover-title { font-family:"Songti SC","SimSun",serif; font-weight:700; font-size:clamp(15px,4vw,21px); line-height:1.35; position:relative; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cover-author { font-size:12px; letter-spacing:.08em; opacity:.78; position:relative; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.book-title { margin:10px 0 3px; font-size:13px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.book-meta { font-size: 12px; color:#8a9b96; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.import-tile { width:100%; aspect-ratio:3/4; border:1.5px dashed #b9d5cb; background:#eff6f1; color:#589487; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.import-plus { font-size:33px; font-weight:200; line-height:1; }
.import-tile span:last-child { font-size:12px; font-weight:700; }
.empty-state { text-align:center; padding:38px 25px; background:#eaf2ee; border-radius:20px; color:#65857c; font-size:13px; line-height:1.7; }
.empty-state strong { display:block; color:#31594f; font-size:17px; margin-bottom:7px; }
.primary-button { border:0; border-radius:11px; background:#146b62; color:#fff; padding:11px 15px; font-size:13px; font-weight:750; }
.ghost-button { border:1px solid #c9dcd5; border-radius:11px; background:#fff; color:#286b5d; padding:10px 14px; font-size:13px; font-weight:700; }
.info-banner { border-radius:16px; padding:14px 16px; background:#e9f1ed; font-size:12px; color:#658078; line-height:1.6; margin-top:18px; }
.search-icon-btn { width:42px; height:42px; border:1px solid #d9ebe4; border-radius:50%; background:#fff; color:#286c60; display:grid; place-items:center; margin-top:18px; box-shadow:0 4px 14px #1e55430d; }
.search-icon-btn svg { width:20px; height:20px; stroke:#286c60; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.search-row { display:flex; gap:9px; margin:22px 0 15px; }
.search-input { min-width:0; flex:1; border:1px solid #d5e1dc; background:#fff; border-radius:12px; padding:12px 13px; outline:none; font-size:14px; }
.search-input:focus { border-color:#3a9889; }
.source-card { background:#fff; border:1px solid #e5eeea; border-radius:17px; padding:16px; margin:11px 0; box-shadow:0 5px 16px #1e554309; }
.source-top { display:flex; justify-content:space-between; align-items:start; gap:12px; }
.source-title { font-size:16px; font-weight:750; line-height:1.4; margin:0; }
.source-author { font-size:12px; color:#5f756f; margin-top:4px; }
.source-pill { flex:none; font-size:12px; color:#286e61; background:#e7f2ed; padding:5px 8px; border-radius:20px; }
.source-note { font-size:12px; line-height:1.6; color:#667c75; margin:12px 0; }
.source-actions { display:flex; gap:8px; }
.source-link { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.source-directory,.rank-link-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.directory-link { min-width:0; min-height:112px; display:flex; flex-direction:column; gap:10px; padding:14px; border:1px solid #dceae4; border-radius:17px; background:rgba(255,255,255,.82); color:#23463e; text-decoration:none; box-shadow:0 6px 18px #1e554309; transition:transform .18s ease,box-shadow .18s ease; }
.directory-link:active { transform:scale(.98); }
.directory-link-top { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.directory-link-top strong { font-size:13px; line-height:1.35; }
.directory-link-type { font-size:12px; color:#27776c; font-weight:750; }
.directory-link-desc { font-size: 12px; line-height:1.5; color:#708780; }
.rank-link { min-height:116px; background:linear-gradient(145deg,#f9fffc,#e6f3ef); border-color:#d0e8e0; }
.rank-refresh-row { display:flex; align-items:center; flex-wrap:wrap; gap:9px 12px; margin:-3px 1px 13px; }
.rank-refresh-button { min-height:42px; padding:0 16px; border:1px solid #91c8b7; border-radius:13px; background:linear-gradient(150deg,#eaf8f0,#d7ede5); color:#17695a; box-shadow:inset 0 1px 0 #fff9,0 5px 14px #1e554312; font-size:12px; font-weight:800; transition:transform .18s ease,box-shadow .18s ease; }
.rank-refresh-button:not(:disabled):active { transform:scale(.97); box-shadow:inset 0 1px 0 #fff9,0 2px 7px #1e554314; }
.rank-refresh-button:disabled { cursor:not-allowed; opacity:.55; }
.rank-refresh-hint { flex:1; color:#7d938a; font-size: 12px; line-height:1.45; }
.rank-refresh-row .account-link,.rank-auth-retry { display:inline-flex; align-items:center; justify-content:center; min-height:40px; margin:0; padding:0 12px; border:1px solid #c9dcd5; border-radius:12px; background:#fff; color:#286b5d; font-size:12px; font-weight:750; text-decoration:none; }
.rank-refresh-status { margin:0 1px 15px; padding:10px 12px; border-radius:12px; background:#e8f2ed; color:#366b5d; font-size:12px; line-height:1.5; }
.rank-refresh-status.warning { background:#f6efe2; color:#8a6840; }
.rank-refresh-status.error { background:#f8eae8; color:#9b524c; }
.rank-unavailable { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0; padding:14px; border-radius:16px; background:#eef4f1; color:#647b73; font-size:12px; line-height:1.5; }
.rank-method { margin:-6px 1px 12px; color:#7b8f86; font-size: 12px; line-height:1.45; }
.combined-rank-list { padding:4px 15px; border:1px solid #d8e8df; border-radius:20px; background:linear-gradient(150deg,#f8fffb,#f3f7ef); box-shadow:0 8px 25px #1e55430c; }
.rank-origin-links { display:flex; gap:7px; flex-wrap:wrap; margin-top:5px; }
.rank-origin-chip { display:inline-flex; align-items:center; min-height:32px; border-radius:10px; background:#e4f1eb; color:#26746a; font-size: 12px; font-weight:750; padding:0 9px; text-decoration:none; }
.rank-origin-chip:focus-visible { outline:2px solid #218d7d; outline-offset:2px; }
.rank-retry { flex:none; min-height:42px; border:1px solid #cbded6; border-radius:12px; background:#fff; color:#28766a; font-size:12px; font-weight:750; padding:0 14px; }
.rank-source-panel { margin:12px 0; padding:16px; border:1px solid #e2ebe6; border-radius:20px; background:rgba(255,255,255,.86); box-shadow:0 7px 22px #1e554309; }
.rank-source-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rank-source-head h3 { margin:0; font-size:16px; line-height:1.4; }
.rank-source-badge { flex:none; border-radius:99px; padding:5px 9px; font-size:12px; font-weight:750; }
.rank-source-badge.fresh { background:#dff1e9; color:#226b59; }
.rank-source-badge.stale { background:#f3ede2; color:#8a6840; }
.rank-source-time { margin:8px 0 12px; color:#768c83; font-size: 12px; }
.rank-source-warning { margin:6px 0 12px; color:#8a6840; font-size:12px; line-height:1.5; }
.rank-source-empty { margin:10px 0; color:#71847b; font-size:12px; }
.rank-entry { display:flex; align-items:center; gap:12px; min-height:62px; padding:8px 0; border-top:1px solid #e8efeb; color:#23443b; text-decoration:none; }
.rank-position { flex:none; width:28px; color:#2d8b79; font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; }
.rank-book { display:flex; flex:1; min-width:0; flex-direction:column; gap:4px; }
.rank-book strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.rank-book small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#879b92; font-size: 12px; }
.rank-entry-arrow { color:#5b8d7c; font-size:18px; }
.rank-origin-link { display:inline-flex; min-height:44px; align-items:center; margin-top:9px; color:#24786b; font-size:12px; font-weight:750; text-decoration:none; }
.rank-origin-link::after { content:'↗'; margin-left:6px; }
.rank-entry:focus-visible,.rank-origin-link:focus-visible,.rank-retry:focus-visible,.rank-refresh-button:focus-visible,.rank-auth-retry:focus-visible { outline:2px solid #218d7d; outline-offset:3px; }
.mine-panel { margin-top:20px; padding:18px; border:1px solid #dfebe6; border-radius:20px; background:#fff; box-shadow:0 8px 22px #1e554309; }
.mine-panel-title { margin:0 0 12px; font-size:16px; }
.sync-panel { border-radius:14px; padding:14px; background:#edf4f1; }
.sync-status { display:inline-block; font-size:12px; font-weight:750; color:#35766a; }
.mine-panel-note { margin:7px 0 0; color:#6e827b; font-size:12px; line-height:1.6; }
.account-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
.account-action,.account-link { display:inline-flex; align-items:center; justify-content:center; min-height:40px; margin-top:12px; text-decoration:none; }
.account-actions .account-action,.account-actions .account-link { margin-top:0; }
.status-line { font-size:12px; color:#69877e; padding:11px 0; }
.mark-card { display:block; width:100%; text-align:left; background:#fff; border:1px solid #e4ece8; border-radius:15px; padding:14px 16px; margin:10px 0; color:inherit; }
.mark-book { font-size: 12px; color:#2d8577; font-weight:800; }
.mark-excerpt { font-family:"Songti SC","SimSun",serif; font-size:16px; line-height:1.65; margin:8px 0; }
.mark-detail { font-size: 12px; color:#98a8a2; }
.bottom-nav { position:fixed; z-index:20; bottom:calc(10px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:min(calc(100% - 24px),488px); height:65px; padding:5px; display:flex; gap:3px; isolation:isolate; overflow:hidden; border:1px solid #ffffffc9; border-radius:24px; background:rgba(245,251,248,.5); backdrop-filter:blur(20px) saturate(165%); -webkit-backdrop-filter:blur(20px) saturate(165%); box-shadow:0 14px 38px #123b3330,0 2px 7px #123b3319,inset 0 1px 0 #ffffffe6,inset 0 -1px 0 #8db5a541; }
.bottom-nav::before { content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:radial-gradient(ellipse 58% 65% at 16% 0%,#ffffff80,transparent 85%),linear-gradient(170deg,#ffffff24,transparent 50%); }
.nav-item { position:relative; z-index:1; flex:1; min-width:0; min-height:52px; border:0; border-radius:18px; background:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:#587068; font-size:12px; font-weight:750; transition:background .18s ease,color .18s ease,transform .18s ease; }
.nav-item svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; }
.nav-item.active { color:#0f6d61; background:rgba(225,244,237,.74); box-shadow:inset 0 1px 0 #ffffffc7,0 3px 8px #174b3b1a; }
.nav-item:active { transform:scale(.96); }
@media (hover:hover) { .directory-link:hover { transform:translateY(-2px); box-shadow:0 10px 24px #1e554319; } .nav-item:not(.active):hover { background:#ffffff6b; } }
.reader { --paper:#fbf8ef; --ink:#273a36; --muted:#75867f; --chrome:#faf8f1; --font-size:19px; --line-height:1.85; --letter-spacing:.02em; --brightness-overlay-color:#000; --brightness-overlay-opacity:0; position:fixed; z-index:30; inset:0; max-width:720px; margin:auto; display:flex; flex-direction:column; background:var(--paper); color:var(--ink); box-shadow:0 0 60px #142f2b2b; }
.reader.theme-white { --paper:#fff; --ink:#25322f; --muted:#8b9994; --chrome:#fff; }
.reader.theme-night { --paper:#1f2928; --ink:#d9e4dc; --muted:#8ea59b; --chrome:#24302e; color-scheme:dark; }
.reader.theme-green { --paper:#e7f0e7; --ink:#283e32; --muted:#708879; --chrome:#e7f0e7; }
.reader-header { flex:none; height:calc(52px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 12px 0; display:flex; align-items:center; background:var(--chrome); border-bottom:1px solid color-mix(in srgb,var(--ink) 9%,transparent); }
.reader-icon { flex:none; width:43px; height:43px; border:0; background:none; color:var(--ink); font-size:31px; display:grid; place-items:center; }
.reader-heading { flex:1; min-width:0; margin-right:43px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.reader-heading strong { max-width:100%; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reader-heading span { max-width:100%; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reader-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; scrollbar-width:thin; background:var(--paper); }
.reader-brightness-overlay { position:absolute; z-index:1; top:calc(52px + env(safe-area-inset-top)); right:0; bottom:0; left:0; pointer-events:none; background:var(--brightness-overlay-color); opacity:var(--brightness-overlay-opacity); transition:opacity .18s ease; }
.reader.texture-grain .reader-scroll { background-image:repeating-linear-gradient(0deg,transparent 0 5px,#86673909 6px 7px); }
.reader.texture-linen .reader-scroll { background-image:repeating-linear-gradient(90deg,transparent 0 3px,#7157350a 4px 5px),repeating-linear-gradient(0deg,transparent 0 4px,#7157350a 5px 6px); }
.reader.texture-mist .reader-scroll { background-image:radial-gradient(circle at 80% 15%,#a2c1b52c,transparent 32%),radial-gradient(circle at 8% 80%,#c9d8cb55,transparent 36%); background-attachment:local; }
.reader.texture-night-sky .reader-scroll { background-image:radial-gradient(circle at 75% 15%,#829fad2b,transparent 35%),radial-gradient(circle at 12% 82%,#6d839727,transparent 42%); background-attachment:local; }
.reader-content { max-width:660px; margin:auto; padding:30px 24px calc(132px + env(safe-area-inset-bottom)); font-family:"Songti SC","STSong","SimSun",serif; font-size:var(--font-size); line-height:var(--line-height); letter-spacing:var(--letter-spacing); overflow-wrap:anywhere; }
.reader.font-sans .reader-content { font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
.reader.font-kai .reader-content { font-family:"Kaiti SC","STKaiti","KaiTi","Songti SC","SimSun",serif; }
.reader.font-fangsong .reader-content { font-family:"STFangsong","FangSong","Songti SC","SimSun",serif; }
.reader.font-source-serif .reader-content { font-family:"Source Han Serif SC","Noto Serif CJK SC","Songti SC","SimSun",serif; }
.reader.font-source-sans .reader-content { font-family:"Source Han Sans SC","Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif; }
.reader-content h1 { text-align:left; font-size:1.35em; line-height:1.45; margin:8px 0 1.65em; font-weight:700; }
.reader-content p { text-indent:2em; margin:0 0 1.15em; }
.reader.no-indent .reader-content p { text-indent:0; }
.reader-content .reader-empty { text-indent:0; color:var(--muted); }
.reader-footer { position:absolute; z-index:3; bottom:0; left:0; right:0; padding:7px 16px calc(8px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--chrome) 82%,transparent); border-top:1px solid #ffffffa8; box-shadow:0 -10px 28px #173d3514,inset 0 1px 0 #ffffff6b; backdrop-filter:blur(14px) saturate(145%); -webkit-backdrop-filter:blur(14px) saturate(145%); transition:opacity .26s ease,transform .26s ease; }
.reader.theme-night .reader-footer { border-top-color:#ffffff38; box-shadow:0 -10px 28px #0005,inset 0 1px 0 #ffffff24; }
.reader.controls-collapsed .reader-footer { opacity:0; transform:translateY(110%); pointer-events:none; }
.progress-row { height:31px; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.progress-arrow { flex:none; width:30px; height:30px; border:0; border-radius:8px; display:grid; place-items:center; color:var(--ink); background:transparent; font-size:24px; line-height:1; }
.progress-arrow:disabled { opacity:.3; }
.progress-row input { flex:1; min-width:0; height:4px; accent-color:#278d7d; }
.reader-actions { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; margin-top:2px; }
.reader-actions button { border:0; color:var(--muted); background:none; min-height:49px; padding:5px 2px; display:flex; align-items:center; justify-content:center; }
.reader-actions button:active { color:#1b927f; }
.reader-actions .action-icon { display:block; height:25px; font-size:23px; font-weight:400; line-height:25px; }
.reader-actions .action-type { font-family:Georgia,serif; font-size:20px; font-weight:700; }
.reader-menu-orb { position:absolute; z-index:3; right:16px; bottom:calc(18px + env(safe-area-inset-bottom)); width:48px; height:48px; border-radius:50%; border:1px solid #ffffffc9; color:#183d37; background:rgba(255,255,255,.09); box-shadow:inset 0 1px 0 #ffffffd8,inset 0 -1px 2px #31584e30,0 8px 19px #102c2730,0 0 0 1px #315e5226; backdrop-filter:blur(6px) saturate(145%); -webkit-backdrop-filter:blur(6px) saturate(145%); display:grid; place-items:center; overflow:hidden; opacity:0; transform:translateY(10px) scale(.88); pointer-events:none; cursor:pointer; transition:opacity .22s ease,transform .28s cubic-bezier(.2,.85,.3,1),box-shadow .18s ease; }
.reader-menu-orb::before { content:''; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(ellipse 18px 8px at 29% 12%,#ffffffb8,transparent 85%),radial-gradient(ellipse 10px 18px at 97% 81%,#81b5ad35,transparent 80%); pointer-events:none; }
.reader-menu-orb::after { content:''; position:absolute; inset:2px; border-radius:50%; border:1px solid #ffffff8c; border-bottom-color:#5d908044; box-shadow:inset 0 1px 1px #ffffff59; pointer-events:none; }
.orb-dots { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:3px; }
.orb-dots i { width:4px; height:4px; border-radius:50%; background:currentColor; box-shadow:0 1px 1px #ffffffc9; }
.reader.controls-collapsed .reader-menu-orb { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.reader-menu-orb:active { transform:translateY(0) scale(.95)!important; box-shadow:inset 0 1px 0 #ffffffb8,0 5px 12px #102c2738; }
@media (hover:hover) { .reader.controls-collapsed .reader-menu-orb:hover { transform:translateY(-2px) scale(1.04); box-shadow:inset 0 1px 0 #ffffffd9,inset 0 -1px 2px #31584e30,0 13px 27px #102c2736; } }
.reader.theme-night .reader-menu-orb { color:#f0faf5; border-color:#e7f6ef8c; background:rgba(255,255,255,.06); box-shadow:inset 0 1px 0 #ffffff87,inset 0 -1px 2px #1027205c,0 9px 22px #0007,0 0 0 1px #c5eee52b; }
.reader.theme-night .reader-menu-orb::after { border-color:#ffffff61; border-bottom-color:#d7fff138; }
.reader-menu-orb:focus-visible,.reader-actions button:focus-visible,.progress-arrow:focus-visible { outline:2px solid #1b927f; outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .reader-footer,.reader-menu-orb,.reader-brightness-overlay { transition:none; } }
.drawer-scrim { position:absolute; z-index:4; inset:0; background:#0d282554; }
.reader-drawer { position:absolute; z-index:5; bottom:0; left:0; right:0; max-height:min(75dvh,680px); overflow:auto; background:color-mix(in srgb,var(--chrome) 88%,transparent); color:var(--ink); border-radius:22px 22px 0 0; border-top:1px solid #ffffffa8; padding:18px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow:0 -16px 45px #0d28252a,inset 0 1px 0 #ffffff75; backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); }
.reader.theme-night .reader-drawer { border-top-color:#ffffff38; box-shadow:0 -16px 45px #0008,inset 0 1px 0 #ffffff24; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .reader-menu-orb { background:rgba(238,247,241,.88); } .reader.theme-night .reader-menu-orb { background:rgba(47,66,62,.92); } .reader-footer,.reader-drawer { background:var(--chrome); } .bottom-nav { background:#fffefc; } }
@media (prefers-reduced-transparency:reduce) { .reader-menu-orb { background:rgba(238,247,241,.92); backdrop-filter:none; -webkit-backdrop-filter:none; } .reader.theme-night .reader-menu-orb { background:rgba(47,66,62,.94); } .reader-footer,.reader-drawer { background:var(--chrome); backdrop-filter:none; -webkit-backdrop-filter:none; } .bottom-nav { background:#fffefc; backdrop-filter:none; -webkit-backdrop-filter:none; } }
@media (prefers-contrast:more) { .reader-menu-orb,.reader.theme-night .reader-menu-orb { background:var(--chrome); border-color:var(--ink); color:var(--ink); } .reader-footer,.reader-drawer { background:var(--chrome); border-color:var(--ink); } .bottom-nav { background:#fff; border-color:#263a36; } .nav-item.active { outline:2px solid #0f6d61; outline-offset:-2px; } }
@media (prefers-reduced-motion:reduce) { .bottom-nav,.nav-item,.directory-link { transition:none; } }
.drawer-title-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.drawer-title { font-size:18px; font-weight:800; }
.drawer-close { border:0; background:none; color:var(--muted); font-size:25px; }
.toc-item { width:100%; text-align:left; display:flex; justify-content:space-between; gap:12px; border:0; border-bottom:1px solid color-mix(in srgb,var(--ink) 9%,transparent); background:none; padding:14px 2px; color:var(--ink); font-size:14px; }
.toc-item.active { color:#138474; font-weight:800; }
.toc-item span:last-child { font-size: 12px; color:var(--muted); }
.setting-label { display:block; font-size:12px; color:var(--muted); margin:16px 0 10px; font-weight:700; }
.setting-hint { font-size: 12px; color:var(--muted); line-height:1.5; margin:5px 0 12px; }
.setting-range { appearance:none; -webkit-appearance:none; width:100%; height:4px; border-radius:99px; background:color-mix(in srgb,var(--ink) 22%,var(--chrome)); margin:4px 0; }
.setting-range::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:28px; height:28px; border-radius:50%; border:1px solid #ffffff99; background:color-mix(in srgb,var(--ink) 30%,var(--chrome)); box-shadow:0 3px 8px #1027223a,inset 0 1px 1px #fff9; }
.setting-range::-moz-range-thumb { width:26px; height:26px; border-radius:50%; border:1px solid #ffffff99; background:color-mix(in srgb,var(--ink) 30%,var(--chrome)); box-shadow:0 3px 8px #1027223a,inset 0 1px 1px #fff9; }
.setting-range-row { display:flex; align-items:center; gap:10px; min-height:48px; padding:7px 11px; border-radius:28px; background:color-mix(in srgb,var(--ink) 7%,var(--chrome)); font-size:12px; color:var(--muted); }
.setting-range-row input { flex:1; min-width:0; }
.setting-value { min-width:40px; text-align:right; color:var(--ink); font-weight:800; white-space:nowrap; }
.setting-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent); font-size:13px; }
.setting-toggle input { accent-color:#218b7a; width:18px; height:18px; }
.setting-chip-row { display:flex; gap:9px; flex-wrap:wrap; }
.setting-chip { border:1px solid color-mix(in srgb,var(--ink) 16%,transparent); color:var(--ink); background:var(--paper); border-radius:12px; padding:10px 14px; font-size:12px; font-weight:700; }
.setting-chip.selected { color:#14796b; border-color:#1b927f; }
.panel-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:8px 0 22px; }
.stat { text-align:center; padding:12px 4px; border-right:1px solid color-mix(in srgb,var(--ink) 9%,transparent); }
.stat:last-child { border-right:0; }
.stat strong { display:block; font-size:23px; line-height:1.3; }
.stat span { display:block; margin-top:4px; color:var(--muted); font-size:12px; }
.panel-buttons { display:flex; gap:10px; margin:18px 0 4px; }
.panel-buttons button { flex:1; border:0; border-radius:12px; background:color-mix(in srgb,var(--ink) 9%,var(--chrome)); color:var(--ink); padding:12px 9px; font-size:12px; font-weight:700; }
.panel-note { font-size:12px; color:var(--muted); line-height:1.6; margin:12px 0; }
.note-entry { border:1px solid color-mix(in srgb,var(--ink) 12%,transparent); border-radius:13px; padding:12px; margin:9px 0; }
.note-entry q { display:block; font-family:"Songti SC","SimSun",serif; color:var(--muted); font-size:13px; line-height:1.6; margin-bottom:7px; }
.note-entry p { margin:4px 0 10px; font-size:13px; line-height:1.6; }
.note-entry .note-meta { color:var(--muted); font-size:12px; }
.note-entry .note-actions { display:flex; gap:10px; margin-top:10px; }
.note-entry .note-actions button { border:0; background:none; color:#16806f; padding:3px 0; font-size: 12px; }
.note-editor { width:100%; min-height:115px; resize:vertical; border:1px solid #abc9bd; border-radius:12px; padding:12px; color:var(--ink); background:var(--paper); outline:none; font-size:14px; }
.note-quote { border-left:3px solid #218b7a; padding-left:10px; color:var(--muted); font-size:12px; line-height:1.5; margin:10px 0; max-height:75px; overflow:auto; }
.panel-primary { border:0; border-radius:11px; padding:11px 15px; background:#14796b; color:#fff; font-size:12px; font-weight:800; }
.panel-secondary { border:1px solid color-mix(in srgb,var(--ink) 16%,transparent); border-radius:11px; padding:10px 14px; background:var(--paper); color:var(--ink); font-size:12px; }
.bookmark-panel-button { width:100%; margin-top:14px; font-weight:700; }
.setting-row { display:flex; align-items:center; gap:11px; }
.setting-row button { border:1px solid color-mix(in srgb,var(--ink) 16%,transparent); color:var(--ink); background:var(--paper); border-radius:10px; padding:9px 13px; min-width:45px; }
.setting-row output { flex:1; text-align:center; font-size:13px; }
.theme-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.theme-swatch { width:100%; height:48px; border:2px solid color-mix(in srgb,var(--ink) 8%,transparent); border-radius:13px; background:var(--swatch); }
.theme-swatch:last-child::after { content:'☾'; color:#99b9f4; font-size:23px; }
.theme-swatch.selected,.texture-swatch.selected { border-color:#258f83; box-shadow:0 0 0 2px var(--chrome) inset,0 0 0 2px #258f8330; }
.texture-options { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.texture-swatch { height:45px; border-radius:13px; border:2px solid color-mix(in srgb,var(--ink) 8%,transparent); }
.texture-option-none { background:#1d2928; }
.texture-option-grain { background:repeating-linear-gradient(0deg,#c7bda9 0 2px,#e7e0ce 3px 5px); }
.texture-option-linen { background:repeating-linear-gradient(90deg,#74715e 0 2px,#a6a28a 3px 5px); }
.texture-option-mist { background:radial-gradient(circle at 75% 25%,#d0e8e2,#9cb3ae 70%,#77918a); }
.texture-option-night-sky { background:radial-gradient(circle at 75% 15%,#4e6477,#192837 65%,#111b27); }
.layout-dual-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.layout-range-cell .setting-range-row { gap:5px; padding:7px 8px; }
.layout-range-cell .setting-value { min-width:30px; font-size: 12px; }
.layout-choice-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:21px 0 13px; }
.layout-pill { min-height:51px; padding:7px 6px; border:1px solid color-mix(in srgb,var(--ink) 8%,transparent); border-radius:27px; background:color-mix(in srgb,var(--ink) 7%,var(--chrome)); color:var(--ink); font-size: 12px; font-weight:700; line-height:1.3; }
.layout-pill.selected { border-color:color-mix(in srgb,#278d7d 55%,transparent); color:#168274; }
.reader.theme-night .layout-pill.selected { color:#9bd4c9; }
.reader-font-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:-2px 0 12px; }
.reader-font-options[hidden] { display:none; }
.reader-font-option { min-width:0; min-height:44px; padding:7px 5px; border:1px solid color-mix(in srgb,var(--ink) 13%,transparent); border-radius:15px; background:color-mix(in srgb,var(--paper) 56%,transparent); color:var(--ink); font-size:12px; line-height:1.3; cursor:pointer; }
.reader-font-option.selected { border-color:color-mix(in srgb,#258f83 75%,var(--ink)); background:color-mix(in srgb,#258f83 12%,var(--paper)); font-weight:700; }
.reader-font-option:focus-visible { outline:2px solid #258f83; outline-offset:2px; }
.reader-font-preview-serif { font-family:"Songti SC","STSong","SimSun",serif; }
.reader-font-preview-sans { font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
.reader-font-preview-kai { font-family:"Kaiti SC","STKaiti","KaiTi","Songti SC","SimSun",serif; }
.reader-font-preview-fangsong { font-family:"STFangsong","FangSong","Songti SC","SimSun",serif; }
.reader-font-preview-source-serif { font-family:"Source Han Serif SC","Noto Serif CJK SC","Songti SC","SimSun",serif; }
.reader-font-preview-source-sans { font-family:"Source Han Sans SC","Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif; }
.reader-font-hint { grid-column:1 / -1; margin:1px 2px 0; color:var(--muted); font-size: 12px; line-height:1.5; }
.toast { position:fixed; z-index:99; left:50%; bottom:calc(85px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:max-content; max-width:min(90vw,400px); background:#234d45; color:#fff; border-radius:12px; padding:11px 15px; font-size:12px; line-height:1.45; box-shadow:0 10px 25px #092a2536; text-align:center; }
@media (min-width:720px) { .app-shell { border-radius:24px; margin:20px auto; min-height:calc(100dvh - 40px); overflow:hidden; } .bottom-nav { bottom:30px; } .reader { top:20px; bottom:20px; border-radius:18px; overflow:hidden; } }
@media (max-width:359px) { .layout-dual-grid,.source-directory,.rank-link-grid { grid-template-columns:1fr; gap:10px; } }
@media (max-width:359px) { .reader-font-options { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:359px) { .main-view { padding-left:15px; padding-right:15px; } .book-grid { gap:14px 10px; } }

/* 书架管理：导出按钮 */
.shelf-ops { display:flex; gap:5px; margin-top:8px; }
.shelf-ops button { flex:1; border:1px solid #c9dcd5; border-radius:8px; background:#fff; color:#286b5d; font-size: 12px; font-weight:700; padding:7px 2px; }
.shelf-ops .shelf-del { border-color:#e2c9c5; color:#a6554f; background:#fff6f5; }

/* 内置浏览器 */
.browser-bar { display:flex; gap:9px; margin:22px 0 12px; }
.browser-input { min-width:0; flex:1; border:1px solid #d5e1dc; background:#fff; border-radius:12px; padding:11px 13px; outline:none; font-size:14px; }
.browser-input:focus { border-color:#3a9889; }
.browser-frame-wrap { border:1px solid #dbe6e1; border-radius:14px; overflow:hidden; background:#fff; height:340px; }
.browser-frame { width:100%; height:100%; border:0; display:block; background:#f7f9f8; }
.browser-open { width:100%; margin:10px 0 0; text-align:center; }
.download-row { display:flex; gap:9px; margin:14px 0 4px; }
.download-row .browser-input { flex:1; }
.browser-message { font-size:12px; line-height:1.6; margin:12px 0 0; color:#8a9b96; }
.browser-message.success { color:#1f7a5f; }
.browser-message.error { color:#ae5f5f; }
.source-result-list { display:flex; flex-direction:column; gap:8px; margin:12px 0 4px; }
.source-result-item { display:flex; flex-direction:column; gap:2px; text-align:left; border:1px solid #e0ebe6; border-radius:12px; background:#fff; padding:12px 14px; color:inherit; }
.source-result-item strong { font-size:14px; font-weight:750; color:#26493f; }
.source-result-item span { font-size: 12px; color:#5f756f; }
.source-health-hint { font-size: 12px; color:#5f756f; margin:10px 0 2px; }

/* 推荐页榜单阅读按钮 */
.rank-read-btn { flex:none; border:1px solid #bcd8cd; border-radius:16px; background:#eef7f2; color:#1f7a5f; font-size: 12px; font-weight:700; padding:5px 11px; }
.rank-entry-actions { display:flex; align-items:center; gap:7px; margin-top:6px; }
.rank-origin-chip { text-decoration:none; font-size: 12px; color:#6d9b8e; border:1px solid #d9e7e1; border-radius:14px; padding:4px 9px; }

/* 应用外壳暗色主题已由 apple-editorial-shell.css 统一提供（苹果灰 #1c1c1e 体系），此处不再重复。 */

/* ---- 连续曲率圆角（squircle）----
   底部导航、批量操作栏、底部弹层等 dock 栏使用 iOS 连续曲率，
   让四周圆角从直线平滑过渡，而非普通圆弧。 */
@supports (corner-shape: superellipse(2.5)) {
  .bottom-nav,
  .shelf-bulk-bar,
  .shelf-book-sheet,
  .reader-drawer,
  .wage-settings-panel.is-sheet,
  .toast,
  .reader-menu-orb {
    corner-shape: superellipse(2.5);
  }
}