/* Mobile reading space, adapted from the supplied Apple style reference.
   The books and typography lead; glass is reserved for floating navigation. */
:root {
  --editorial-white: #fff;
  --editorial-mist: #f5f5f7;
  --editorial-frost: #fafafc;
  --editorial-line: #d6d6d6;
  --editorial-ink: #1d1d1f;
  --editorial-muted: #707070;
  --editorial-steel: #86868b;
  --editorial-blue: #0066cc;
  --editorial-action: #0071e3;
  --ui-ink: var(--editorial-ink);
  --ui-muted: var(--editorial-muted);
  --ui-line: var(--editorial-line);
  --ui-accent: var(--editorial-blue);
  --ui-focus: var(--editorial-blue);
  --ui-card: var(--editorial-white);
  background: var(--editorial-mist);
  color: var(--editorial-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
}
body { background: var(--editorial-mist); color: var(--editorial-ink); }
.app-shell {
  background: var(--editorial-white);
  box-shadow: none;
}
.app-header {
  justify-content: flex-end;
  height: 60px;
  padding: 9px 18px;
  border-bottom: 1px solid #e6e6e8;
  background: rgba(255,255,255,.88);
  box-shadow: none;
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  backdrop-filter: blur(20px) saturate(120%);
}
.brand-wrap { gap: 10px; }
.brand-mark {
  color: #fff;
  background: var(--editorial-ink);
  border-radius: 11px;
  box-shadow: none;
}
.brand {
  color: var(--editorial-ink);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.015em;
}
.brand-sub { color: var(--editorial-steel); font-size: 12px; letter-spacing: 0; }
.icon-button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--editorial-line);
  border-radius: 50%;
  background: #fff;
  color: var(--editorial-ink);
  box-shadow: none;
}
.quick-menu {
  position: fixed;
  top: 56px;
  right: 16px;
  border: 1px solid #e6e6e8;
  background: rgba(250,250,252,.94);
  color: var(--editorial-ink);
  box-shadow: none;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.shelf-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.shelf-header-copy { min-width:0; }
.shelf-add-btn { flex:none; width:44px; height:44px; border:1px solid var(--editorial-line); border-radius:50%; background:#fff; color:var(--editorial-ink); display:grid; place-items:center; }
.shelf-add-btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.quick-menu-item + .quick-menu-item { border-top-color: #e6e6e8; }
.quick-menu-item:hover, .quick-menu-item:focus-visible { background: #f0f0f2; }
.quick-menu-icon { color: var(--editorial-ink); background: #fff; border-color: #e6e6e8; }

.main-view { background: #fff; }
.eyebrow, .feature-kicker, .rank-eyebrow {
  color: var(--editorial-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
}
.page-title {
  color: var(--editorial-ink);
  font-size: clamp(27px, 7vw, 32px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.035em;
}
.page-subtitle, .section-meta, .book-meta, .feature-detail,
.source-author, .source-note, .directory-link-desc, .mark-detail,
.rank-list-meta, .ranked-author, .rank-disclaimer, .mine-panel-note,
.rank-refresh-hint, .rank-method, .status-line {
  color: var(--editorial-muted);
}
.page-subtitle { font-size: 14px; line-height: 1.5; }
.section-head { margin-top: 34px; margin-bottom: 16px; }
.section-title, .mine-panel-title {
  color: var(--editorial-ink);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.section-manage-button { color: var(--editorial-blue); }

/* One quiet featured reading stage, not a decorative dashboard card. */
.feature-card {
  margin-top: 24px;
  padding: 20px;
  border: 0;
  border-radius: 28px;
  background: var(--editorial-mist);
  color: var(--editorial-ink);
  box-shadow: none;
}
.feature-card .cover { box-shadow: none; }
.feature-kicker { color: var(--editorial-muted); }
.feature-title {
  color: var(--editorial-ink);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.feature-arrow { color: var(--editorial-blue); font-weight: 600; }
.book-grid { gap: 25px 15px; }
.cover {
  border-radius: 9px 14px 14px 9px;
  box-shadow: none;
}
.cover::before { content: none; }
.cover-title { font-weight: 600; }
/* The imprint is secondary, but still needs to be legible on a phone. */
.cover-small, .cover-author {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  opacity: 1;
}
.book-title { color: var(--editorial-ink); font-weight: 600; }
.import-tile {
  border: 1px dashed #b9b9be;
  border-radius: 14px;
  background: var(--editorial-mist);
  color: var(--editorial-muted);
}
.search-icon-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--editorial-line);
  background: #fff;
  color: var(--editorial-ink);
  box-shadow: none;
}
.search-icon-btn svg { stroke: currentColor; }

/* Flat content surfaces. An edge, rather than a cast shadow, separates them. */
.source-card, .rank-source-panel, .mine-panel, .mark-card,
.directory-link, .combined-rank-list, .empty-state, .source-result-item {
  border: 1px solid #e6e6e8;
  border-radius: 22px;
  background: #fff;
  color: var(--editorial-ink);
  box-shadow: none;
}
.directory-link, .rank-link { min-height: 112px; }
.rank-link { background: var(--editorial-mist); border-color: var(--editorial-mist); }
.source-title, .rank-title, .ranked-title { color: var(--editorial-ink); font-weight: 600; }
.source-pill, .rank-origin-chip, .rank-source-badge.fresh {
  background: var(--editorial-mist);
  color: var(--editorial-muted);
}
.source-pill { border-radius: 0; padding: 0; background: transparent; }
.info-banner, .sync-panel, .rank-unavailable, .rank-refresh-status {
  border-radius: 18px;
  background: var(--editorial-mist);
  color: var(--editorial-muted);
}
.empty-state strong, .sync-status { color: var(--editorial-ink); }
.rank-source-badge.stale, .rank-refresh-status.warning { color: #795e39; }
.rank-refresh-status.error { color: #a64644; }
.rank-entry, .ranked-work { border-bottom-color: #e6e6e8; }
.rank-position, .ranked-number { color: var(--editorial-steel); }
.rank-origin-link, .rank-origin-chip, .directory-link-type { color: var(--editorial-blue); }
.ranked-list {
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.ranked-work { padding-inline: 4px; }
.ranked-work:nth-child(-n+3) .ranked-number { color: var(--editorial-ink); }
.rank-tabs {
  border: 0;
  border-radius: 999px;
  background: var(--editorial-mist);
}
.rank-tab { border-radius: 999px; color: var(--editorial-muted); }
.rank-tab.active { background: #fff; color: var(--editorial-ink); box-shadow: 0 0 0 1px #e6e6e8; }

.primary-button, .ranked-action, .panel-primary {
  border: 1px solid var(--editorial-action);
  border-radius: 999px;
  background: var(--editorial-action);
  color: #fff;
  box-shadow: none;
  font-weight: 600;
}
.ghost-button, .ranked-original, .rank-update, .rank-refresh-button,
.rank-retry, .rank-auth-retry, .rank-refresh-row .account-link,
.source-search-cta, .account-action, .account-link {
  border: 1px solid var(--editorial-line);
  border-radius: 999px;
  background: #fff;
  color: var(--editorial-ink);
  box-shadow: none;
  font-weight: 600;
}
.ranked-original, .ranked-action { min-height: 40px; }
.search-input, .browser-workspace .browser-input {
  border: 1px solid var(--editorial-steel);
  border-radius: 999px;
  background: #fff;
  color: var(--editorial-ink);
  box-shadow: none;
}
.browser-workspace .browser-frame-wrap,
.browser-workspace .browser-frame { background: var(--editorial-mist); }
.browser-go {
  border-color: var(--editorial-action);
  border-radius: 999px;
  background: var(--editorial-action);
  box-shadow: none;
}
.browser-popout { border-radius: 999px; box-shadow: none; }
.browser-workspace .browser-input:focus,
.search-input:focus { border-color: var(--editorial-blue); }

button:focus-visible, input:focus-visible, a:focus-visible,
.nav-item:focus-visible { outline: 2px solid var(--editorial-blue); outline-offset: 3px; }

@media (max-width: 899px) {
  :root {
    --ui-ink: var(--editorial-ink);
    --ui-muted: var(--editorial-muted);
    --ui-line: var(--editorial-line);
    --ui-accent: var(--editorial-blue);
    --ui-focus: var(--editorial-blue);
  }
  .app-shell { min-height: 100dvh; background: #fff; }
  .app-header {
    height: calc(70px + env(safe-area-inset-top));
    padding: calc(12px + env(safe-area-inset-top)) 22px 12px;
  }
  .main-view {
    padding: 22px 22px calc(112px + env(safe-area-inset-bottom));
    background: #fff;
  }
  .book-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .feature-card .cover { width: clamp(92px, 27vw, 120px); }

  /* A translucent dock floats above the content, but has no lens gloss. */
  .bottom-nav {
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: min(calc(100% - 24px), 488px);
    height: 70px;
    padding: 5px;
    border: 1px solid rgba(214,214,214,.88);
    border-radius: 36px;
    background: rgba(250,250,252,.78);
    box-shadow: none;
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    backdrop-filter: blur(20px) saturate(120%);
  }
  .bottom-nav::before, .bottom-nav::after { content: none; }
  .nav-item {
    min-height: 58px;
    border: 0;
    border-radius: 31px;
    color: var(--editorial-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -.01em;
  }
  .nav-item svg { width: 21px; height: 21px; stroke-width: 1.7; }
  .nav-item.active {
    border: 0;
    background: rgba(255,255,255,.91);
    color: var(--editorial-blue);
    box-shadow: 0 0 0 1px rgba(214,214,214,.8);
  }
  .nav-item:not(.active):active { background: rgba(230,230,232,.6); }
}

@media (max-width: 359px) {
  .app-header { padding-inline: 16px; }
  .main-view { padding-inline: 16px; }
  .feature-card { gap: 12px; padding: 16px; }
  .feature-card .cover { width: 94px; }
  .feature-title { font-size: 16px; }
  .book-grid { gap: 20px 12px; }
  .bottom-nav { width: calc(100% - 16px); }
  .nav-item { font-size: 12px; }
}

@media (min-width: 900px) {
  body { background: var(--editorial-mist); }
  .app-shell {
    border: 1px solid #e6e6e8;
    border-radius: 28px;
    background: #fff;
    box-shadow: none;
  }
  .app-header, .bottom-nav {
    border-right-color: #e6e6e8;
    background: #fff;
    box-shadow: none;
  }
  .main-view { background: #fff; }
  .nav-item { color: var(--editorial-muted); }
  .nav-item.active {
    border-color: transparent;
    background: var(--editorial-mist);
    color: var(--editorial-ink);
    box-shadow: none;
  }
  .nav-item:hover { background: var(--editorial-mist); }
  .book-grid { gap: 28px 20px; }
}

@media (prefers-reduced-transparency: reduce) {
  .app-header, .quick-menu, .bottom-nav {
    background: var(--editorial-frost);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .app-header, .quick-menu, .bottom-nav, .nav-item.active {
    border-color: var(--editorial-ink);
    background: #fff;
  }
  .nav-item { color: var(--editorial-ink); }
  .nav-item.active { outline: 2px solid var(--editorial-blue); outline-offset: -3px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-header, .quick-menu, .bottom-nav { background: var(--editorial-frost); }
}

/* 深色主题（黑） */
html[data-theme="dark"] {
  --editorial-white: #1c1c1e;
  --editorial-mist: #101012;
  --editorial-frost: #1c1c1e;
  --editorial-line: #3a3a3c;
  --editorial-ink: #f5f5f7;
  --editorial-muted: #98989d;
  --editorial-steel: #6e6e73;
  --editorial-blue: #4da3ff;
  --editorial-action: #4da3ff;
  --ui-ink: #f5f5f7;
  --ui-muted: #98989d;
  --ui-line: #3a3a3c;
  --ui-card: #1c1c1e;
}
html[data-theme="dark"] body { background: #101012; color: #f5f5f7; }
html[data-theme="dark"] .app-shell { background: #1c1c1e; }
html[data-theme="dark"] .main-view { background: #1c1c1e; }
html[data-theme="dark"] .book-card,
html[data-theme="dark"] .source-card,
html[data-theme="dark"] .browser-input,
html[data-theme="dark"] .quick-menu,
html[data-theme="dark"] .shelf-add-btn { background: #2a2a2c; border-color: #3a3a3c; color: #f5f5f7; }
html[data-theme="dark"] .bottom-nav { background: rgba(28,28,30,.85); }
html[data-theme="dark"] .nav-item { color: #98989d; }
html[data-theme="dark"] .nav-item.active { color: #b6dbff; background: #25313e; }
html[data-theme="dark"] .page-title, html[data-theme="dark"] .section-title,
html[data-theme="dark"] .detail-title, html[data-theme="dark"] .rank-title,
html[data-theme="dark"] .ranked-title, html[data-theme="dark"] .book-title,
html[data-theme="dark"] .feature-title { color: #f5f5f7; }
html[data-theme="dark"] .page-subtitle, html[data-theme="dark"] .section-meta,
html[data-theme="dark"] .ranked-author, html[data-theme="dark"] .detail-author,
html[data-theme="dark"] .ranked-desc, html[data-theme="dark"] .book-meta,
html[data-theme="dark"] .feature-detail { color: #98989d; }
html[data-theme="dark"] .ranked-work { border-color: #3a3a3c; }
html[data-theme="dark"] .rank-tabs { background: #1c1c1e; border-color: #3a3a3c; }
html[data-theme="dark"] .rank-tab { color: #98989d; }
html[data-theme="dark"] .rank-tab.active { background: #2a2a2c; color: #f5f5f7; }
html[data-theme="dark"] .ranked-list,
html[data-theme="dark"] .rank-empty {
  background: #242426;
  border-color: #424246;
  color: #c2c2c7;
}
html[data-theme="dark"] .ranked-number,
html[data-theme="dark"] .rank-list-meta { color: #b0b0b6; }
html[data-theme="dark"] .ranked-work:nth-child(-n+3) .ranked-number { color: #f5f5f7; }
html[data-theme="dark"] .rank-update,
html[data-theme="dark"] .ranked-original,
html[data-theme="dark"] .rank-retry,
html[data-theme="dark"] .rank-auth-retry,
html[data-theme="dark"] .rank-refresh-button {
  background: #2a2a2c;
  border-color: #4a4a50;
  color: #c5dfff;
}
html[data-theme="dark"] .ranked-action {
  background: #8dc6ff;
  border-color: #8dc6ff;
  color: #101b2b;
}
html[data-theme="dark"] .detail-actions .ghost-button { color: #f5f5f7; }
html[data-theme="dark"] .empty-state, html[data-theme="dark"] .info-banner { background: #1c1c1e; color: #98989d; }
html[data-theme="dark"] .empty-state strong { color: #f5f5f7; }
html[data-theme="dark"] .rank-refresh-status {
  background: #242426;
  border: 1px solid #424246;
  color: #c2c2c7;
}
html[data-theme="dark"] .rank-refresh-status.error { color: #ffb4b1; }
html[data-theme="dark"] .rank-refresh-status.warning { color: #f1ce94; }

/* “我的”外观设置：仅在右上角展开，不覆盖账户与书签。 */
.mine-header { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; }
.mine-header > :first-child { min-width: 0; }
.mine-settings-wrap { grid-column: 2; grid-row: 1; }
.mine-settings-trigger, .mine-settings-close {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.85); border-radius: 50%;
  background: rgba(235,239,246,.8); color: #333b48;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 9px rgba(38,49,68,.08);
  cursor: pointer;
}
.mine-settings-trigger svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mine-settings-trigger[aria-expanded="true"] { background: rgba(217,230,249,.95); color: #2562a5; }
.mine-settings-popover {
  grid-column: 1 / -1; justify-self: end; width: min(100%, 300px);
  margin-top: 8px; padding: 12px; border: 1px solid rgba(255,255,255,.82);
  border-radius: 20px; background: rgba(248,249,252,.86); color: var(--editorial-ink);
  box-shadow: 0 12px 30px rgba(37,48,68,.12), inset 0 1px 0 rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
}
.mine-settings-popover[hidden] { display: none; }
.mine-settings-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 0 10px 3px; font-size: 14px; }
.mine-settings-close { width: 32px; height: 32px; font-size: 21px; line-height: 1; }
.theme-row { display: flex; gap: 6px; }
.theme-pill { flex: 1; min-width: 0; min-height: 44px; border: 1px solid #d9dde5; border-radius: 12px; background: rgba(255,255,255,.65); color: #4f5866; font-size: 12px; font-weight: 650; cursor: pointer; }
.theme-pill.selected { border-color: #80ade9; color: #245b9e; background: rgba(216,231,252,.8); }
.mine-settings-trigger:focus-visible, .mine-settings-close:focus-visible, .theme-pill:focus-visible { outline: 2px solid #2274cf; outline-offset: 2px; }
html[data-theme="dark"] .mine-settings-trigger,
html[data-theme="dark"] .mine-settings-close { background: rgba(48,52,62,.8); border-color: rgba(255,255,255,.13); color: #e6e9f0; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 12px rgba(0,0,0,.15); }
html[data-theme="dark"] .mine-settings-trigger[aria-expanded="true"] { background: rgba(42,66,100,.95); color: #a7cfff; }
html[data-theme="dark"] .mine-settings-popover { background: rgba(37,40,47,.91); border-color: rgba(255,255,255,.16); color: #f5f5f7; box-shadow: 0 14px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08); }
html[data-theme="dark"] .theme-pill { background: rgba(52,55,64,.78); border-color: rgba(255,255,255,.12); color: #c3c8d1; }
html[data-theme="dark"] .theme-pill.selected { border-color: #669ce0; color: #b9d8ff; background: rgba(38,66,100,.86); }

/* 深色主题补充：覆盖所有白色卡片/面板/输入框/按钮 */
html[data-theme="dark"] .feature-card { background: #1c1c1e; color: #f5f5f7; }
html[data-theme="dark"] .feature-card .feature-detail { color: #98989d; }
html[data-theme="dark"] .feature-card .feature-title { color: #f5f5f7; }
html[data-theme="dark"] .mine-panel,
html[data-theme="dark"] .sync-panel,
html[data-theme="dark"] .source-result-item,
html[data-theme="dark"] .directory-link,
html[data-theme="dark"] .source-card { background: #1c1c1e; border-color: #3a3a3c; }
html[data-theme="dark"] .mine-panel-title,
html[data-theme="dark"] .source-result-item strong,
html[data-theme="dark"] .sync-status { color: #f5f5f7; }
html[data-theme="dark"] .source-result-item span,
html[data-theme="dark"] .mine-panel-note { color: #98989d; }
html[data-theme="dark"] .ghost-button,
html[data-theme="dark"] .panel-secondary,
html[data-theme="dark"] .setting-chip,
html[data-theme="dark"] .setting-row button,
html[data-theme="dark"] .panel-buttons button { background: #2a2a2c; border-color: #3a3a3c; color: #f5f5f7; }
html[data-theme="dark"] .quick-menu-item { color: #f5f5f7; }
html[data-theme="dark"] .quick-menu-icon { background: #2a2a2c; border-color: #3a3a3c; color: #4da3ff; }
html[data-theme="dark"] .setting-label, html[data-theme="dark"] .setting-hint,
html[data-theme="dark"] .panel-note, html[data-theme="dark"] .source-note,
html[data-theme="dark"] .detail-hint { color: #98989d; }
html[data-theme="dark"] .ranked-number { color: #b0b0b6; }
html[data-theme="dark"] .detail-source, html[data-theme="dark"] .detail-back { color: #4da3ff; }
html[data-theme="dark"] .search-icon-btn { background: #2a2a2c; border-color: #3a3a3c; }
html[data-theme="dark"] .search-icon-btn svg { stroke: #f5f5f7; }
html[data-theme="dark"] .status-line { color: #b0b0b6; }
html[data-theme="dark"] .rank-update { color: #4da3ff; }
html[data-theme="dark"] .import-tile { background: #1c1c1e; border-color: #3a3a3c; color: #4da3ff; }

/* 书架：单书操作是手机底部菜单；管理模式只保留选择与批量操作。 */
.book-cell { position: relative; }
.shelf-selection-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: -2px 0 18px; border-bottom: 1px solid var(--editorial-line); }
.shelf-select-count { color: var(--editorial-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.shelf-select-all { min-height: 44px; padding: 0 2px 0 14px; border: 0; background: transparent; color: var(--editorial-blue); font-size: 14px; font-weight: 650; }
.shelf-select-mark { position: absolute; top: 9px; right: 9px; width: 27px; height: 27px; border: 2px solid rgba(255,255,255,.95); border-radius: 50%; background: rgba(25,34,46,.44); box-shadow: 0 1px 6px rgba(0,0,0,.12); pointer-events: none; }
.book-cell.is-selected .shelf-select-mark { border-color: var(--editorial-blue); background: var(--editorial-blue); }
.book-cell.is-selected .shelf-select-mark::after { content: ''; position: absolute; width: 10px; height: 6px; left: 6px; top: 7px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.book-cell.is-selected .cover { outline: 2px solid var(--editorial-blue); outline-offset: 3px; }
.shelf-bulk-bar { position: fixed; z-index: 26; left: 50%; bottom: calc(94px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; width: min(calc(100% - 28px),480px); padding: 6px; border: 1px solid rgba(214,214,214,.8); border-radius: 20px; background: rgba(250,250,252,.9); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 10px 26px rgba(30,40,55,.12); }
.shelf-bulk-action { min-height: 46px; padding: 7px 3px; border: 0; border-radius: 14px; background: rgba(255,255,255,.82); color: var(--editorial-ink); font-size: 12px; font-weight: 650; white-space: nowrap; }
.shelf-bulk-action.is-destructive { color: #b43e43; }
.shelf-bulk-action:disabled { opacity: .4; cursor: not-allowed; }
.main-view:has(.shelf-bulk-bar) { padding-bottom: calc(178px + env(safe-area-inset-bottom)); }
.shelf-book-scrim { position: fixed; z-index: 79; inset: 0; background: rgba(17,25,36,.34); animation: shelf-scrim-in .2s ease-out both; transition: opacity .18s ease-out; }
.shelf-book-scrim.is-closing { opacity: 0; animation: none; }
.shelf-book-sheet { position: fixed; z-index: 80; left: 50%; bottom: 0; transform: translate3d(-50%,0,0); width: min(100%,520px); max-height: min(85dvh,700px); overflow: auto; overscroll-behavior: contain; padding: 10px 22px calc(20px + env(safe-area-inset-bottom)); border: 1px solid rgba(255,255,255,.75); border-bottom: 0; border-radius: 28px 28px 0 0; background: rgba(250,250,252,.96); color: var(--editorial-ink); -webkit-backdrop-filter: blur(24px) saturate(120%); backdrop-filter: blur(24px) saturate(120%); box-shadow: 0 -18px 50px rgba(18,28,42,.16); }
.shelf-sheet-handle { position: relative; width: 100%; height: 29px; margin: -2px auto 5px; touch-action: none; cursor: grab; }
.shelf-sheet-handle::before { content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 36px; height: 5px; border-radius: 9px; background: #c8cbd0; pointer-events: none; }
.shelf-sheet-handle:active { cursor: grabbing; }
.shelf-book-sheet-head { display: grid; grid-template-columns: 58px minmax(0,1fr) 42px; align-items: center; gap: 13px; padding-bottom: 20px; }
.shelf-book-sheet-head .shelf-sheet-cover { width: 58px; height: 78px; padding: 6px; border-radius: 6px; }
.shelf-sheet-cover .cover-small, .shelf-sheet-cover .cover-author { display: none; }
.shelf-sheet-cover .cover-title { font-size: 12px; }
.shelf-sheet-name { min-width: 0; }
.shelf-sheet-name h2 { margin: 0 0 5px; font-size: 19px; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; overflow-wrap: anywhere; }
.shelf-sheet-name p { margin: 0; color: var(--editorial-muted); font-size: 12px; }
.shelf-sheet-close { align-self: start; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(225,228,233,.7); color: var(--editorial-ink); }
.shelf-sheet-close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.shelf-sheet-actions { overflow: hidden; border: 1px solid var(--editorial-line); border-radius: 16px; background: rgba(255,255,255,.72); }
.shelf-sheet-action { display: flex; align-items: center; width: 100%; min-height: 52px; padding: 10px 17px; border: 0; background: transparent; color: var(--editorial-ink); text-align: left; }
.shelf-sheet-action + .shelf-sheet-action { border-top: 1px solid var(--editorial-line); }
.shelf-sheet-action strong { font-size: 15px; font-weight: 650; }
.shelf-sheet-action.is-destructive strong { color: #b43e43; }
.shelf-sheet-action:active, .shelf-bulk-action:not(:disabled):active { background: rgba(220,232,248,.6); }
@keyframes shelf-scrim-in { from { opacity: 0; } to { opacity: 1; } }
html[data-theme="dark"] .shelf-bulk-bar, html[data-theme="dark"] .shelf-book-sheet { background: rgba(33,33,36,.94); border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .book-cell .book-card { background: transparent; }
html[data-theme="dark"] .shelf-bulk-action, html[data-theme="dark"] .shelf-sheet-actions { background: rgba(52,52,56,.78); }
html[data-theme="dark"] .shelf-sheet-close { background: rgba(69,69,73,.8); }
html[data-theme="dark"] .shelf-sheet-action.is-destructive strong, html[data-theme="dark"] .shelf-bulk-action.is-destructive { color: #ff989b; }
@media (min-width: 900px) { .shelf-book-sheet { bottom: 20px; border-radius: 28px; } }
@media (prefers-reduced-transparency: reduce) { .shelf-bulk-bar, .shelf-book-sheet { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--editorial-frost); } }
@media (prefers-reduced-motion: reduce) { .shelf-book-scrim { animation: none; transition: opacity .12s ease-out; } }

/* 书架采用封面优先的手机三列陈列。搜索入口位于标题上方，不重复摆放大卡或排序栏。 */
.shelf-header {
  margin-top: 28px;
  align-items: center;
}
.shelf-header .page-title {
  margin: 0;
  font-size: clamp(25px, 7vw, 30px);
  line-height: 1.2;
  letter-spacing: -.025em;
}
.shelf-header-controls { display: flex; align-items: center; gap: 4px; flex: none; }
.shelf-toolbar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 58px;
  min-height: 44px;
  padding: 0 3px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--editorial-ink);
  font-size: 14px;
  font-weight: 550;
  white-space: nowrap;
}
.shelf-toolbar-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shelf-toolbar-button:active { background: color-mix(in srgb, var(--editorial-ink) 8%, transparent); }
.shelf-toolbar-button[aria-pressed="true"] { color: var(--editorial-blue); }
.book-grid.shelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 11px; margin-top: 28px; }
.shelf-grid .book-card { background: transparent; border: 0; }
.shelf-grid .cover { aspect-ratio: 7 / 10; border-radius: 5px; padding: 10px 8px; box-shadow: 0 2px 9px rgba(18, 24, 32, .12); }
.shelf-grid .cover-title { font-size: clamp(14px, 3.9vw, 18px); line-height: 1.36; font-weight: 650; text-wrap: balance; }
.shelf-grid .cover-small, .shelf-grid .cover-author { font-size: 12px; letter-spacing: .02em; }
.shelf-grid .book-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.75em; margin: 9px 0 0; font-size: 14px; line-height: 1.38; font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
.shelf-selection-head { margin: 15px 0 0; }
.shelf-selection-head + .shelf-grid { margin-top: 18px; }
.shelf-grid .shelf-select-mark { top: 6px; right: 6px; width: 24px; height: 24px; }
.shelf-grid .book-cell.is-selected .shelf-select-mark::after { left: 5px; top: 5px; }
.main-view.is-shelf-empty { display: flex; flex-direction: column; }
.shelf-empty { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; min-height: 260px; margin: 0; padding: 28px 18px; text-align: center; color: var(--editorial-muted); }
.shelf-empty h2 { margin: 0 0 8px; color: var(--editorial-ink); font-size: 18px; font-weight: 600; }
.shelf-empty p { margin: 0 0 18px; font-size: 14px; line-height: 1.5; }
.shelf-empty-import { min-height: 44px; padding: 0 18px; border: 1px solid var(--editorial-line); border-radius: 22px; background: var(--editorial-white); color: var(--editorial-ink); font-size: 14px; font-weight: 600; }
html[data-theme="dark"] .shelf-toolbar-button { background: transparent; color: var(--editorial-ink); }
html[data-theme="dark"] .shelf-toolbar-button[aria-pressed="true"] { color: var(--editorial-blue); }
html[data-theme="dark"] .shelf-empty-import { background: #2a2a2c; color: #f5f5f7; border-color: #3a3a3c; }
@media (max-width: 359px) {
  .shelf-header { margin-top: 22px; }
  .shelf-header-controls { gap: 0; }
  .shelf-toolbar-button { min-width: 54px; font-size: 13px; }
  .book-grid.shelf-grid { gap: 20px 9px; }
  .shelf-grid .cover { padding: 8px 6px; }
  .shelf-grid .cover-small, .shelf-grid .cover-author { font-size: 8px; }
  .shelf-grid .book-title { font-size: 13px; }
}