/* Browse pages share the homepage's orange fiction-channel visual language. */
.browse-page {
  --browse-orange: #ff6a1a;
  --browse-orange-deep: #e94b10;
  --browse-ink: #302720;
  --browse-muted: #8e8178;
  --browse-paper: #f7f3ef;
  --browse-card: #fff;
  --browse-line: #eee6e0;
  background: var(--browse-paper);
  color: var(--browse-ink);
}
/* Reuse the home channel's palette for search, ranking, and shelf pages. */
.browse-page {
  --paper: var(--browse-paper);
  --surface: var(--browse-card);
  --surface-2: #fff0e9;
  --ink: var(--browse-ink);
  --ink-soft: var(--browse-muted);
  --ink-faint: #ad9f97;
  --line: var(--browse-line);
  --line-soft: var(--browse-line);
  --accent: var(--browse-orange);
  --accent-ink: var(--browse-orange-deep);
  --on-accent: #fff;
  --amber: var(--browse-orange-deep);
  --shadow: 0 8px 22px rgba(76, 48, 33, .08);
  --shadow-sm: 0 3px 10px rgba(76, 48, 33, .1);
}
.browse-page::before { display: none; }
.browse-site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--browse-line);
  backdrop-filter: blur(14px);
}
.browse-head-main { display: flex; align-items: center; gap: 26px; height: 68px; }
.browse-brand { display: inline-flex; flex: 0 0 auto; align-items: center; }
.browse-brand img { width: auto; height: 31px; max-width: 138px; object-fit: contain; }
.browse-search { display: flex; flex: 1 1 440px; align-items: center; max-width: 520px; height: 38px; overflow: hidden; border: 1px solid #e6ddd6; border-radius: 4px; background: #faf8f6; }
.browse-search input { flex: 1; min-width: 0; height: 100%; padding: 0 13px; border: 0; outline: 0; background: transparent; color: var(--browse-ink); font-size: 14px; }
.browse-search input::placeholder { color: #b8aea7; }
.browse-search button { align-self: stretch; min-width: 72px; border: 0; padding: 0 16px; background: var(--browse-orange); color: #fff; font-size: 14px; }
.browse-search button:hover { background: var(--browse-orange-deep); }
.browse-account { display: flex; align-items: center; gap: 18px; margin-left: auto; color: #665a53; font-size: 14px; white-space: nowrap; }
.browse-account a:hover { color: var(--browse-orange); }
.browse-shelf-link::before { content: "▱"; margin-right: 5px; color: var(--browse-orange); font-size: 18px; vertical-align: -1px; }
.browse-page .theme-toggle { width: auto; height: auto; padding: 5px 0; border: 0; background: transparent; color: #786c64; font-size: 13px; }
.browse-page .theme-toggle:hover { color: var(--browse-orange); border: 0; }
.browse-nav { height: 42px; border-top: 1px solid #f4efeb; }
.browse-nav-inner { display: flex; align-items: stretch; height: 100%; gap: 30px; overflow-x: auto; scrollbar-width: none; }
.browse-nav-inner::-webkit-scrollbar { display: none; }
.browse-nav a { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; color: #554943; font-size: 15px; white-space: nowrap; }
.browse-nav a:hover, .browse-nav a.is-active { color: var(--browse-orange); font-weight: 600; }
.browse-nav a.is-active::after { content: ""; position: absolute; right: 2px; bottom: 0; left: 2px; height: 3px; border-radius: 3px 3px 0 0; background: var(--browse-orange); }
.browse-page main.wrap { max-width: 1200px; padding-bottom: 42px; }
.browse-page .page-head { padding: 28px 0 10px; }
.browse-page .page-title { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; color: var(--browse-ink); font-family: var(--font-serif); font-size: 25px; font-weight: 700; }
.browse-page .page-title::before { width: 4px; height: 22px; border-radius: 2px; background: var(--browse-orange); content: ""; }
.browse-page .page-sub, .browse-page .seo-intro { color: var(--browse-muted); }
.browse-page .seo-intro { margin-bottom: 14px; }
.browse-page .topic-links { margin-bottom: 14px; }
.browse-page .topic-links a { color: var(--browse-orange-deep); }
.browse-page .tag-board { margin: 8px 0 22px; padding: 18px; border: 1px solid var(--browse-line); border-radius: 6px; background: var(--browse-card); }
.browse-page .tag-tabs { gap: 26px; border-bottom: 1px solid var(--browse-line); }
.browse-page .tag-tab { padding: 0 0 10px; border-radius: 0; color: #665a53; }
.browse-page .tag-tab:hover, .browse-page .tag-tab.is-active { color: var(--browse-orange); }
.browse-page .tag-tab.is-active { border-color: var(--browse-orange); }
.browse-page .tag-chips { padding-top: 14px; gap: 9px; }
.browse-page .cat-chip { border-color: var(--browse-line); border-radius: 4px; background: #fffaf8; color: #594d46; }
.browse-page .cat-chip:hover { border-color: var(--browse-orange); color: var(--browse-orange); }
.browse-page .cat-chip.is-active { border-color: var(--browse-orange); background: var(--browse-orange); color: #fff; }
.browse-page .cat-chip .cat-count { color: #ad9f97; }
.browse-page .cat-chip.is-active .cat-count { color: #ffe0d0; }
.browse-page .controls { margin: 0 0 20px; }
.browse-page .sort-tabs { border: 1px solid var(--browse-line); border-radius: 4px; background: var(--browse-card); padding: 3px; }
.browse-page .sort-tab { border-radius: 3px; color: var(--browse-muted); }
.browse-page .sort-tab.is-active { background: #fff0e9; color: var(--browse-orange-deep); box-shadow: none; }
.browse-page .pager-info { color: var(--browse-muted); }
.browse-page .book-grid { gap: 28px 18px; }
.browse-page .book-cover { border-radius: 3px; background: #eee4dd; box-shadow: 0 3px 10px rgba(76, 48, 33, .1); }
.browse-page .book-card:hover .book-cover { box-shadow: 0 8px 16px rgba(76, 48, 33, .18); }
.browse-page .book-title { color: #342a25; }
.browse-page .book-card:hover .book-title { color: var(--browse-orange-deep); }
.browse-page .book-meta { color: #a69a92; }
.browse-page .btn-ghost { border-color: var(--browse-line); background: var(--browse-card); color: #665a53; }
.browse-page .btn-ghost:hover { border-color: var(--browse-orange); color: var(--browse-orange-deep); }
.browse-page .site-foot { margin-top: 0; border-top-color: var(--browse-line); background: #fff; }
.browse-page .foot-brand .brand-logo { filter: none; }
.browse-page .foot-links a:hover { color: var(--browse-orange-deep); }

[data-theme="dark"] .browse-page {
  --browse-ink: #f2e8e0;
  --browse-muted: #b9aaa0;
  --browse-paper: #211a16;
  --browse-card: #2d231e;
  --browse-line: #46362d;
}
[data-theme="dark"] .browse-site-head { background: rgba(36, 27, 22, .94); border-bottom-color: var(--browse-line); }
[data-theme="dark"] .browse-search { border-color: #554138; background: #2a201b; }
[data-theme="dark"] .browse-search input, [data-theme="dark"] .browse-nav a { color: #eadfd7; }
[data-theme="dark"] .browse-account, [data-theme="dark"] .browse-page .theme-toggle { color: #c8b8ae; }
[data-theme="dark"] .browse-nav { border-top-color: #3f3028; }
[data-theme="dark"] .browse-page .cat-chip { background: #33271f; color: #e4d6cd; }
[data-theme="dark"] .browse-page .cat-chip .cat-count { color: #b59f91; }
[data-theme="dark"] .browse-page .book-cover { background: #3a2a22; }
[data-theme="dark"] .browse-page .book-title { color: #f2e8e0; }
[data-theme="dark"] .browse-page .site-foot { background: #2a201b; }

@media (max-width: 760px) {
  .browse-head-main { height: 54px; gap: 12px; }
  .browse-brand img { height: 25px; max-width: 105px; }
  .browse-search { flex-basis: auto; height: 32px; }
  .browse-search input { padding: 0 8px; font-size: 12px; }
  .browse-search button { min-width: 42px; padding: 0 9px; font-size: 12px; }
  .browse-account { display: none; }
  .browse-nav { height: 37px; }
  .browse-nav-inner { gap: 23px; }
  .browse-nav a { font-size: 13px; }
  .browse-page .page-head { padding-top: 20px; }
  .browse-page .page-title { gap: 7px; font-size: 21px; }
  .browse-page .page-title::before { width: 3px; height: 18px; }
  .browse-page .tag-board { margin-bottom: 18px; padding: 13px; border-radius: 5px; }
  .browse-page .tag-tabs { gap: 20px; }
  .browse-page .tag-chips { padding-top: 12px; gap: 7px; }
  .browse-page .tag-chips .cat-chip { padding: 6px 10px; font-size: 13px; }
  .browse-page .book-grid { gap: 22px 14px; }
}

/* Search, ranking, and shelf retain their content layouts in the channel shell. */
.browse-page .field { max-width: 560px; border-color: var(--browse-line); border-radius: 4px; background: var(--browse-card); }
.browse-page .field:focus-within { border-color: var(--browse-orange); box-shadow: 0 0 0 3px rgba(255, 106, 26, .14); }
.browse-page .field .btn-primary { border-radius: 0 3px 3px 0; background: var(--browse-orange); }
.browse-page .field .btn-primary:hover { background: var(--browse-orange-deep); }
.browse-page .search-hot { max-width: none; margin-top: 30px; padding: 18px; border: 1px solid var(--browse-line); border-radius: 6px; background: var(--browse-card); }
.browse-page .search-hot-title { display: flex; align-items: center; gap: 9px; color: var(--browse-ink); font-family: var(--font-serif); font-size: 19px; }
.browse-page .search-hot-title::before { width: 4px; height: 18px; border-radius: 2px; background: var(--browse-orange); content: ""; }
.browse-page .search-hot-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 17px; }
.browse-page .search-status { color: var(--browse-muted); }
.browse-page .search-scan i { background: var(--browse-orange); }

.browse-page .mine-page { padding-bottom: 52px; }
.browse-page .mine-panel { margin: 18px 0 28px; padding: 18px; border: 1px solid var(--browse-line); border-radius: 6px; background: var(--browse-card); }
.browse-page .mine-panel .section-head { min-height: 30px; margin-bottom: 16px; }
.browse-page .mine-panel .section-title { display: flex; align-items: center; gap: 9px; color: var(--browse-ink); font-family: var(--font-serif); font-size: 20px; }
.browse-page .mine-panel .section-title::before { width: 4px; height: 18px; border-radius: 2px; background: var(--browse-orange); content: ""; }
.browse-page .mine-panel .section-more { color: var(--browse-muted); }
.browse-page .mine-panel .section-more:hover { color: var(--browse-orange-deep); }
.browse-page .mine-grid .book-cover { border-radius: 3px; box-shadow: 0 3px 10px rgba(76, 48, 33, .1); }
.browse-page .mine-grid .book-title { color: var(--browse-ink); }
.browse-page .mine-grid .mine-link:hover .book-title { color: var(--browse-orange-deep); }
.browse-page .mine-progress { color: var(--browse-orange-deep); }
.browse-page .mine-note { color: var(--browse-muted); }

.browse-page .fq-rank { margin: 14px 0 38px; border-color: var(--browse-line); border-radius: 6px; background: var(--browse-card); }
.browse-page .fq-rank-nav { border-color: var(--browse-line); background: #fffaf8; }
.browse-page .fq-rank-nav button { color: var(--browse-muted); }
.browse-page .fq-rank-nav button.is-on { color: var(--browse-orange-deep); background: #fff0e9; box-shadow: inset 3px 0 0 var(--browse-orange); }
.browse-page .fq-rank-gender button.is-on { color: var(--browse-ink); box-shadow: inset 0 -2px 0 var(--browse-orange); }
.browse-page .fq-rank-hint, .browse-page .fq-rank-author, .browse-page .fq-rank-tags { color: var(--browse-muted); }
.browse-page .fq-rank-item a { border-color: var(--browse-line); }
.browse-page .fq-rank-item a:hover .book-title { color: var(--browse-orange-deep); }
.browse-page .fq-rank-item .book-cover { border-radius: 3px; }
.browse-page .fq-rank-heat { color: var(--browse-orange-deep); }

[data-theme="dark"] .browse-page { --surface-2: #3a2a22; --ink-faint: #b59f91; --on-accent: #fff; --shadow: 0 8px 22px rgba(0, 0, 0, .25); --shadow-sm: 0 3px 10px rgba(0, 0, 0, .3); }
[data-theme="dark"] .browse-page .search-hot, [data-theme="dark"] .browse-page .mine-panel, [data-theme="dark"] .browse-page .fq-rank { background: var(--browse-card); }
[data-theme="dark"] .browse-page .fq-rank-nav { background: #2a201b; }
[data-theme="dark"] .browse-page .fq-rank-nav button.is-on { background: #3a2a22; }

@media (max-width: 760px) {
  .browse-page .search-hot { margin-top: 24px; padding: 13px; border-radius: 5px; }
  .browse-page .search-hot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
  .browse-page .mine-panel { margin-bottom: 20px; padding: 13px 11px; border-radius: 5px; }
  .browse-page .mine-panel .section-title { font-size: 17px; }
  .browse-page .fq-rank { margin-top: 10px; border-radius: 5px; }
  .browse-page .fq-rank-nav button.is-on { box-shadow: none; background: var(--browse-orange); color: #fff; }
}

/* Ranked books open in the reader; keep its focused controls beneath the channel header. */
.browse-page.reader-body .reader-head { top: 110px; background: rgba(255, 255, 255, .94); border-bottom-color: var(--browse-line); }
.browse-page.reader-body .reader-back, .browse-page.reader-body .rtool { color: var(--browse-muted); }
.browse-page.reader-body .reader-back:hover, .browse-page.reader-body .rtool:hover { color: var(--browse-orange-deep); border-color: var(--browse-orange); }
.browse-page.reader-body .chapter-swipe-hint { color: var(--browse-orange-deep); background: #fff0e9; border-color: #ffd3bd; }
.browse-page.reader-body .chapter-swipe-hint::before, .browse-page.reader-body .chapter-swipe-hint::after { color: var(--browse-orange); }
.browse-page.reader-body .settings-pop { top: 176px; border-color: var(--browse-line); border-radius: 6px; }
[data-theme="dark"] .browse-page.reader-body .reader-head { background: rgba(36, 27, 22, .94); }
@media (max-width: 760px) {
  .browse-page.reader-body .reader-head { top: 91px; }
  .browse-page.reader-body .settings-pop { top: 147px; right: 12px; }
}